🔢 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.
This commit is contained in:
t0ng7u
2025-07-05 00:03:12 +08:00
parent 8945a3a2dd
commit 3049ad47e5
3 changed files with 8 additions and 7 deletions

View File

@@ -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>

View File

@@ -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",

View File

@@ -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>
</>