فهرست منبع

🔢 feat(user-edit): replace add-quota input with Semi-UI InputNumber

Summary:
• Imported InputNumber from @douyinfe/semi-ui.
• Swapped plain Input for InputNumber in “Add Quota” modal.
• Added UX tweaks: full-width styling, showClear, step = 500 000.
• Initialized addQuotaLocal to an empty string so the field starts blank.
• Adjusted state handling and kept quota calculation logic unchanged.

This improves numeric input accuracy and overall user experience without breaking existing functionality.
t0ng7u 10 ماه پیش
والد
کامیت
3049ad47e5
3فایلهای تغییر یافته به همراه8 افزوده شده و 7 حذف شده
  1. 1 1
      web/src/components/table/UsersTable.js
  2. 1 1
      web/src/i18n/locales/en.json
  3. 6 5
      web/src/pages/User/EditUser.js

+ 1 - 1
web/src/components/table/UsersTable.js

@@ -119,7 +119,7 @@ const UsersTable = () => {
             <Tooltip content={remark} position="top" showArrow>
               <Tag color='white' size='large' shape='circle' className="!text-xs">
                 <div className="flex items-center gap-1">
-                  <div className="w-2 h-2 flex-shrink-0" style={{ backgroundColor: '#10b981' }} />
+                  <div className="w-2 h-2 flex-shrink-0 rounded-full" style={{ backgroundColor: '#10b981' }} />
                   {displayRemark}
                 </div>
               </Tag>

+ 1 - 1
web/src/i18n/locales/en.json

@@ -1199,7 +1199,7 @@
   "添加用户": "Add user",
   "角色": "Role",
   "已绑定的 Telegram 账户": "Bound Telegram account",
-  "新额度": "New quota",
+  "新额度": "New quota: ",
   "需要添加的额度(支持负数)": "Need to add quota (supports negative numbers)",
   "此项只读,需要用户通过个人设置页面的相关绑定按钮进行绑定,不可直接修改": "Read-only, user's personal settings, and cannot be modified directly",
   "请输入新的密码,最短 8 位": "Please enter a new password, at least 8 characterss",

+ 6 - 5
web/src/pages/User/EditUser.js

@@ -22,6 +22,7 @@ import {
   Row,
   Col,
   Input,
+  InputNumber,
 } from '@douyinfe/semi-ui';
 import {
   IconUser,
@@ -39,7 +40,7 @@ const EditUser = (props) => {
   const userId = props.editingUser.id;
   const [loading, setLoading] = useState(true);
   const [addQuotaModalOpen, setIsModalOpen] = useState(false);
-  const [addQuotaLocal, setAddQuotaLocal] = useState('0');
+  const [addQuotaLocal, setAddQuotaLocal] = useState('');
   const [groupOptions, setGroupOptions] = useState([]);
   const formApiRef = useRef(null);
 
@@ -254,7 +255,6 @@ const EditUser = (props) => {
                           field='quota'
                           label={t('剩余额度')}
                           placeholder={t('请输入新的剩余额度')}
-                          min={0}
                           step={500000}
                           extraText={renderQuotaWithPrompt(values.quota || 0)}
                           rules={[{ required: true, message: t('请输入额度') }]}
@@ -328,18 +328,19 @@ const EditUser = (props) => {
               const current = formApiRef.current?.getValue('quota') || 0;
               return (
                 <Text type='secondary' className='block mb-2'>
-                  {`${t('新额度')}${renderQuota(current)} + ${renderQuota(addQuotaLocal)} = ${renderQuota(current + parseInt(addQuotaLocal || 0))}`}
+                  {`${t('新额度')}${renderQuota(current)} + ${renderQuota(addQuotaLocal)} = ${renderQuota(current + parseInt(addQuotaLocal || 0))}`}
                 </Text>
               );
             })()
           }
         </div>
-        <Input
+        <InputNumber
           placeholder={t('需要添加的额度(支持负数)')}
-          type='number'
           value={addQuotaLocal}
           onChange={setAddQuotaLocal}
+          style={{ width: '100%' }}
           showClear
+          step={500000}
         />
       </Modal>
     </>