🔢 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> <Tooltip content={remark} position="top" showArrow>
<Tag color='white' size='large' shape='circle' className="!text-xs"> <Tag color='white' size='large' shape='circle' className="!text-xs">
<div className="flex items-center gap-1"> <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} {displayRemark}
</div> </div>
</Tag> </Tag>

View File

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

View File

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