From 376d54f56aa831ea90077560120bbc5b24bb0183 Mon Sep 17 00:00:00 2001
From: Martial BE <me@xiao5.info>
Date: Mon, 25 Mar 2024 12:17:19 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20improve:=20Optimized=20wei?=
 =?UTF-8?q?ght/priority=20input=20handling=20in=20TableRow=20component.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/Channel/component/TableRow.js | 81 +++++++++------------
 1 file changed, 33 insertions(+), 48 deletions(-)

diff --git a/web/src/views/Channel/component/TableRow.js b/web/src/views/Channel/component/TableRow.js
index 3fe204b6..06d0881a 100644
--- a/web/src/views/Channel/component/TableRow.js
+++ b/web/src/views/Channel/component/TableRow.js
@@ -11,10 +11,6 @@ import {
   MenuItem,
   TableCell,
   IconButton,
-  FormControl,
-  InputLabel,
-  InputAdornment,
-  Input,
   Dialog,
   DialogActions,
   DialogContent,
@@ -25,6 +21,7 @@ import {
   Grid,
   Collapse,
   Typography,
+  TextField,
   Box
 } from '@mui/material';
 
@@ -34,7 +31,7 @@ import TableSwitch from 'ui-component/Switch';
 import ResponseTimeLabel from './ResponseTimeLabel';
 import GroupLabel from './GroupLabel';
 
-import { IconDotsVertical, IconEdit, IconTrash, IconPencil, IconCopy, IconWorldWww } from '@tabler/icons-react';
+import { IconDotsVertical, IconEdit, IconTrash, IconCopy, IconWorldWww } from '@tabler/icons-react';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import { copy } from 'utils/common';
@@ -78,30 +75,34 @@ export default function ChannelTableRow({ item, manageChannel, handleOpenModal,
     }
   };
 
-  const handlePriority = async () => {
-    if (priorityValve === '' || priorityValve === item.priority) {
+  const handlePriority = async (event) => {
+    const currentValue = parseInt(event.target.value);
+    if (isNaN(currentValue) || currentValue === priorityValve) {
       return;
     }
 
-    if (priorityValve < 0) {
+    if (currentValue < 0) {
       showError('优先级不能小于 0');
       return;
     }
 
-    await manageChannel(item.id, 'priority', priorityValve);
+    await manageChannel(item.id, 'priority', currentValue);
+    setPriority(currentValue);
   };
 
-  const handleWeight = async () => {
-    if (weightValve === '' || weightValve === item.weight) {
+  const handleWeight = async (event) => {
+    const currentValue = parseInt(event.target.value);
+    if (isNaN(currentValue) || currentValue === weightValve) {
       return;
     }
 
-    if (weightValve <= 0) {
-      showError('权重不能小于 0');
+    if (currentValue < 1) {
+      showError('权重不能小于 1');
       return;
     }
 
-    await manageChannel(item.id, 'weight', weightValve);
+    await manageChannel(item.id, 'weight', currentValue);
+    setWeight(currentValue);
   };
 
   const handleResponseTime = async () => {
@@ -178,42 +179,26 @@ export default function ChannelTableRow({ item, manageChannel, handleOpenModal,
           </Tooltip>
         </TableCell>
         <TableCell>
-          <FormControl sx={{ m: 1, width: '70px' }} variant="standard">
-            <InputLabel htmlFor={`priority-${item.id}`}>优先级</InputLabel>
-            <Input
-              id={`priority-${item.id}`}
-              type="text"
-              value={priorityValve}
-              onChange={(e) => setPriority(e.target.value)}
-              sx={{ textAlign: 'center' }}
-              endAdornment={
-                <InputAdornment position="end">
-                  <IconButton onClick={handlePriority} sx={{ color: 'rgb(99, 115, 129)' }} size="small">
-                    <IconPencil />
-                  </IconButton>
-                </InputAdornment>
-              }
-            />
-          </FormControl>
+          <TextField
+            id={`priority-${item.id}`}
+            onBlur={handlePriority}
+            type="number"
+            label="优先级"
+            variant="standard"
+            defaultValue={item.priority}
+            inputProps={{ min: '0' }}
+          />
         </TableCell>
         <TableCell>
-          <FormControl sx={{ m: 1, width: '70px' }} variant="standard">
-            <InputLabel htmlFor={`priority-${item.id}`}>权重</InputLabel>
-            <Input
-              id={`weight-${item.id}`}
-              type="text"
-              value={weightValve}
-              onChange={(e) => setWeight(e.target.value)}
-              sx={{ textAlign: 'center' }}
-              endAdornment={
-                <InputAdornment position="end">
-                  <IconButton onClick={handleWeight} sx={{ color: 'rgb(99, 115, 129)' }} size="small">
-                    <IconPencil />
-                  </IconButton>
-                </InputAdornment>
-              }
-            />
-          </FormControl>
+          <TextField
+            id={`weight-${item.id}`}
+            onBlur={handleWeight}
+            type="number"
+            label="权重"
+            variant="standard"
+            defaultValue={item.weight}
+            inputProps={{ min: '1' }}
+          />
         </TableCell>
 
         <TableCell>