🔢 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:
@@ -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>
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user