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