FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Refactor(Form): Optimize form input experience

Browse Source 
Add placeholder. Optimize form validation. Hide ID input.
This commit is contained in:
Fat Snake
2024-04-22 18:09:42 +08:00
parent 81b170d944
commit 5d28f7d8d7
22 changed files with 213 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/pages/Sign/Forget.tsx
View File

@@ -155,8 +155,8 @@ const Forget = () => {
> >
<AntdInput <AntdInput
prefix={<Icon component={IconOxygenEmail} />} prefix={<Icon component={IconOxygenEmail} />}
placeholder={'邮箱'}
disabled={isSending} disabled={isSending}
placeholder={'邮箱'}
/> />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item> <AntdForm.Item>
@@ -199,6 +199,7 @@ const Forget = () => {
name={'password'} name={'password'}
rules={[ rules={[
{ required: true, message: '请输入密码' }, { required: true, message: '请输入密码' },
{ whitespace: true, message: '密码不能为空字符' },
{ min: 10, message: '密码至少为10位' }, { min: 10, message: '密码至少为10位' },
{ max: 30, message: '密码最多为30位' } { max: 30, message: '密码最多为30位' }
]} ]}
@@ -208,8 +209,8 @@ const Forget = () => {
addonBefore={ addonBefore={
<span>新&nbsp;&nbsp;密&nbsp;&nbsp;码</span> <span>新&nbsp;&nbsp;密&nbsp;&nbsp;码</span>
} }
placeholder={'密码'}
disabled={isChanging} disabled={isChanging}
placeholder={'密码'}
/> />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item <AntdForm.Item
@@ -234,8 +235,8 @@ const Forget = () => {
<AntdInput.Password <AntdInput.Password
id={'forget-password-confirm'} id={'forget-password-confirm'}
addonBefore={'确认密码'} addonBefore={'确认密码'}
placeholder={'确认密码'}
disabled={isChanging} disabled={isChanging}
placeholder={'确认密码'}
/> />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item> <AntdForm.Item>

17
src/pages/Sign/SignIn.tsx
View File

@@ -124,6 +124,7 @@ const SignIn = () => {
form={twoFactorForm} form={twoFactorForm}
ref={(ref) => { ref={(ref) => {
setTimeout(() => { setTimeout(() => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
ref?.getFieldInstance('twoFactorCode').focus() ref?.getFieldInstance('twoFactorCode').focus()
}, 50) }, 50)
}} }}
@@ -132,7 +133,7 @@ const SignIn = () => {
name={'twoFactorCode'} name={'twoFactorCode'}
label={'验证码'} label={'验证码'}
style={{ marginTop: 10 }} style={{ marginTop: 10 }}
rules={[{ required: true, len: 6 }]} rules={[{ required: true, whitespace: true, len: 6 }]}
> >
<AntdInput <AntdInput
showCount showCount
@@ -217,22 +218,28 @@ const SignIn = () => {
<AntdForm autoComplete={'on'} onFinish={handleOnFinish} className={'form'}> <AntdForm autoComplete={'on'} onFinish={handleOnFinish} className={'form'}>
<AntdForm.Item <AntdForm.Item
name={'account'} name={'account'}
rules={[{ required: true, message: '请输入账号' }]} rules={[
{ required: true, message: '请输入账号' },
{ whitespace: true, message: '账号不能为空字符' }
]}
> >
<AntdInput <AntdInput
prefix={<Icon component={IconOxygenUser} />} prefix={<Icon component={IconOxygenUser} />}
placeholder={'邮箱/用户名'}
disabled={isSigningIn} disabled={isSigningIn}
placeholder={'邮箱/用户名'}
/> />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item <AntdForm.Item
name={'password'} name={'password'}
rules={[{ required: true, message: '请输入密码' }]} rules={[
{ required: true, message: '请输入密码' },
{ whitespace: true, message: '密码不能为空字符' }
]}
> >
<AntdInput.Password <AntdInput.Password
prefix={<Icon component={IconOxygenPassword} />} prefix={<Icon component={IconOxygenPassword} />}
placeholder={'密码'}
disabled={isSigningIn} disabled={isSigningIn}
placeholder={'密码'}
/> />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item> <AntdForm.Item>

10
src/pages/Sign/SignUp.tsx
View File

@@ -139,6 +139,7 @@ const SignUp = () => {
name={'username'} name={'username'}
rules={[ rules={[
{ required: true, message: '请输入用户名' }, { required: true, message: '请输入用户名' },
{ whitespace: true, message: '用户名不能为空字符' },
{ {
pattern: /^[a-zA-Z-_][0-9a-zA-Z-_]{2,38}$/, pattern: /^[a-zA-Z-_][0-9a-zA-Z-_]{2,38}$/,
message: message:
@@ -148,10 +149,10 @@ const SignUp = () => {
> >
<AntdInput <AntdInput
prefix={<Icon component={IconOxygenUser} />} prefix={<Icon component={IconOxygenUser} />}
placeholder={'用户名'}
maxLength={39} maxLength={39}
showCount={true} showCount={true}
disabled={isSigningUp} disabled={isSigningUp}
placeholder={'用户名'}
/> />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item <AntdForm.Item
@@ -164,14 +165,15 @@ const SignUp = () => {
<AntdInput <AntdInput
type={'email'} type={'email'}
prefix={<Icon component={IconOxygenEmail} />} prefix={<Icon component={IconOxygenEmail} />}
placeholder={'邮箱'}
disabled={isSigningUp} disabled={isSigningUp}
placeholder={'邮箱'}
/> />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item <AntdForm.Item
name={'password'} name={'password'}
rules={[ rules={[
{ required: true, message: '请输入密码' }, { required: true, message: '请输入密码' },
{ whitespace: true, message: '密码不能为空字符' },
{ min: 10, message: '密码至少为10位' }, { min: 10, message: '密码至少为10位' },
{ max: 30, message: '密码最多为30位' } { max: 30, message: '密码最多为30位' }
]} ]}
@@ -179,8 +181,8 @@ const SignUp = () => {
<AntdInput.Password <AntdInput.Password
id={'sign-up-password'} id={'sign-up-password'}
prefix={<Icon component={IconOxygenPassword} />} prefix={<Icon component={IconOxygenPassword} />}
placeholder={'密码'}
disabled={isSigningUp} disabled={isSigningUp}
placeholder={'密码'}
/> />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item <AntdForm.Item
@@ -202,8 +204,8 @@ const SignUp = () => {
<AntdInput.Password <AntdInput.Password
id={'sign-up-password-confirm'} id={'sign-up-password-confirm'}
prefix={<Icon component={IconOxygenPassword} />} prefix={<Icon component={IconOxygenPassword} />}
placeholder={'确认密码'}
disabled={isSigningUp} disabled={isSigningUp}
placeholder={'确认密码'}
/> />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item> <AntdForm.Item>

1
src/pages/Sign/Verify.tsx
View File

@@ -195,6 +195,7 @@ const Verify = () => {
name={'nickname'} name={'nickname'}
rules={[ rules={[
{ required: true, message: '请输入昵称' }, { required: true, message: '请输入昵称' },
{ whitespace: true, message: '昵称不能为空字符' },
{ min: 3, message: '昵称至少为3个字符' } { min: 3, message: '昵称至少为3个字符' }
]} ]}
> >

12
src/pages/System/Group.tsx
View File

@@ -190,8 +190,9 @@ const Group = () => {
const handleOnListDeleteBtnClick = () => { const handleOnListDeleteBtnClick = () => {
modal modal
.confirm({ .confirm({
title: '确定删除', centered: true,
maskClosable: true, maskClosable: true,
title: '确定删除',
content: `确定删除选中的 ${tableSelectedItem.length} 个用户组吗？` content: `确定删除选中的 ${tableSelectedItem.length} 个用户组吗？`
}) })
.then( .then(
@@ -243,8 +244,9 @@ const Group = () => {
return () => { return () => {
modal modal
.confirm({ .confirm({
title: '确定删除', centered: true,
maskClosable: true, maskClosable: true,
title: '确定删除',
content: `确定删除角色 ${value.name} 吗？` content: `确定删除角色 ${value.name} 吗？`
}) })
.then( .then(
@@ -543,6 +545,7 @@ const Group = () => {
onChange={handleOnSearchNameChange} onChange={handleOnSearchNameChange}
onKeyDown={handleOnSearchNameKeyDown} onKeyDown={handleOnSearchNameKeyDown}
status={isRegexLegal ? undefined : 'error'} status={isRegexLegal ? undefined : 'error'}
placeholder={'请输入搜索内容'}
/> />
</Card> </Card>
<Card style={{ overflow: 'inherit', flex: '0 0 auto' }}> <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
@@ -597,7 +600,7 @@ const Group = () => {
const addAndEditForm = ( const addAndEditForm = (
<AntdForm form={form} disabled={isSubmitting} layout={'vertical'}> <AntdForm form={form} disabled={isSubmitting} layout={'vertical'}>
<AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}> <AntdForm.Item hidden name={'id'} label={'ID'}>
<AntdInput disabled /> <AntdInput disabled />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item <AntdForm.Item
@@ -605,7 +608,7 @@ const Group = () => {
label={'名称'} label={'名称'}
rules={[{ required: true, whitespace: true }]} rules={[{ required: true, whitespace: true }]}
> >
<AntdInput allowClear /> <AntdInput allowClear placeholder={'请输入名称'} />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item name={'roleIds'} label={'角色'}> <AntdForm.Item name={'roleIds'} label={'角色'}>
<AntdSelect <AntdSelect
@@ -617,6 +620,7 @@ const Group = () => {
value: value.id, value: value.id,
label: `${value.name}${!value.enable ? '(已禁用)' : ''}` label: `${value.name}${!value.enable ? '(已禁用)' : ''}`
}))} }))}
placeholder={'请选择角色'}
/> />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item <AntdForm.Item

1
src/pages/System/Log.tsx
View File

@@ -250,6 +250,7 @@ const Log = () => {
value={searchRequestUrl} value={searchRequestUrl}
onChange={handleOnSearchUrlChange} onChange={handleOnSearchUrlChange}
onKeyDown={handleOnSearchUrlKeyDown} onKeyDown={handleOnSearchUrlKeyDown}
placeholder={'请输入搜索内容'}
/> />
</Card> </Card>
<Card style={{ overflow: 'inherit', flex: '0 0 auto' }}> <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>

12
src/pages/System/Role.tsx
View File

@@ -182,8 +182,9 @@ const Role = () => {
const handleOnListDeleteBtnClick = () => { const handleOnListDeleteBtnClick = () => {
modal modal
.confirm({ .confirm({
title: '确定删除', centered: true,
maskClosable: true, maskClosable: true,
title: '确定删除',
content: `确定删除选中的 ${tableSelectedItem.length} 个角色吗？` content: `确定删除选中的 ${tableSelectedItem.length} 个角色吗？`
}) })
.then( .then(
@@ -235,8 +236,9 @@ const Role = () => {
return () => { return () => {
modal modal
.confirm({ .confirm({
title: '确定删除', centered: true,
maskClosable: true, maskClosable: true,
title: '确定删除',
content: `确定删除角色 ${value.name} 吗？` content: `确定删除角色 ${value.name} 吗？`
}) })
.then( .then(
@@ -552,6 +554,7 @@ const Role = () => {
onChange={handleOnSearchNameChange} onChange={handleOnSearchNameChange}
onKeyDown={handleOnSearchNameKeyDown} onKeyDown={handleOnSearchNameKeyDown}
status={isRegexLegal ? undefined : 'error'} status={isRegexLegal ? undefined : 'error'}
placeholder={'请输入搜索内容'}
/> />
</Card> </Card>
<Card style={{ overflow: 'inherit', flex: '0 0 auto' }}> <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
@@ -606,7 +609,7 @@ const Role = () => {
const addAndEditForm = ( const addAndEditForm = (
<AntdForm form={form} disabled={isSubmitting} layout={'vertical'}> <AntdForm form={form} disabled={isSubmitting} layout={'vertical'}>
<AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}> <AntdForm.Item hidden name={'id'} label={'ID'}>
<AntdInput disabled /> <AntdInput disabled />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item <AntdForm.Item
@@ -614,7 +617,7 @@ const Role = () => {
label={'名称'} label={'名称'}
rules={[{ required: true, whitespace: true }]} rules={[{ required: true, whitespace: true }]}
> >
<AntdInput allowClear /> <AntdInput allowClear placeholder={'请输入名称'} />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item name={'powerIds'} label={'权限'}> <AntdForm.Item name={'powerIds'} label={'权限'}>
<AntdTreeSelect <AntdTreeSelect
@@ -624,6 +627,7 @@ const Role = () => {
allowClear allowClear
treeNodeFilterProp={'fullTitle'} treeNodeFilterProp={'fullTitle'}
loading={isLoadingPower} loading={isLoadingPower}
placeholder={'请选择权限'}
/> />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item <AntdForm.Item

12
src/pages/System/Settings/Base.tsx
View File

@@ -59,16 +59,20 @@ const Base = () => {
disabled={!hasPermission('system:settings:modify:base')} disabled={!hasPermission('system:settings:modify:base')}
> >
<AntdForm.Item label={'应用名称'} name={'appName'}> <AntdForm.Item label={'应用名称'} name={'appName'}>
<AntdInput /> <AntdInput placeholder={'请输入应用名称'} />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item label={'应用 URL'} name={'appUrl'}> <AntdForm.Item label={'应用 URL'} name={'appUrl'}>
<AntdInput /> <AntdInput placeholder={'请输入应用 URL'} />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item label={'验证邮箱 URL'} name={'verifyUrl'}> <AntdForm.Item label={'验证邮箱 URL'} name={'verifyUrl'}>
<AntdInput placeholder={'验证码使用 ${verifyCode} 代替'} /> <AntdInput
placeholder={'请输入验证邮箱 URL，验证码使用 ${verifyCode} 代替'}
/>
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item label={'找回密码 URL'} name={'retrieveUrl'}> <AntdForm.Item label={'找回密码 URL'} name={'retrieveUrl'}>
<AntdInput placeholder={'验证码使用 ${retrieveCode} 代替'} /> <AntdInput
placeholder={'请输入找回密码 URL，验证码使用 ${retrieveCode} 代替'}
/>
</AntdForm.Item> </AntdForm.Item>
</AntdForm> </AntdForm>
</SettingsCard> </SettingsCard>

24
src/pages/System/Settings/Mail.tsx
View File

@@ -31,6 +31,7 @@ const Mail = () => {
form={mailSendForm} form={mailSendForm}
ref={(ref) => { ref={(ref) => {
setTimeout(() => { setTimeout(() => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
ref?.getFieldInstance('to').focus() ref?.getFieldInstance('to').focus()
}, 50) }, 50)
}} }}
@@ -41,7 +42,7 @@ const Mail = () => {
style={{ marginTop: 10 }} style={{ marginTop: 10 }}
rules={[{ required: true, type: 'email' }]} rules={[{ required: true, type: 'email' }]}
> >
<AntdInput /> <AntdInput placeholder={'请输入接收人'} />
</AntdForm.Item> </AntdForm.Item>
</AntdForm> </AntdForm>
<AntdTag style={{ whiteSpace: 'normal' }}> <AntdTag style={{ whiteSpace: 'normal' }}>
@@ -134,29 +135,34 @@ const Mail = () => {
disabled={!hasPermission('system:settings:modify:mail')} disabled={!hasPermission('system:settings:modify:mail')}
> >
<AntdForm.Item label={'SMTP 服务器'} name={'host'}> <AntdForm.Item label={'SMTP 服务器'} name={'host'}>
<AntdInput /> <AntdInput placeholder={'请输入 SMTP 服务器'} />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item label={'端口'} name={'port'}> <AntdForm.Item label={'端口号'} name={'port'}>
<AntdInputNumber min={0} max={65535} style={{ width: '100%' }} /> <AntdInputNumber
min={0}
max={65535}
style={{ width: '100%' }}
placeholder={'请输入端口号'}
/>
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item label={'安全类型'} name={'securityType'}> <AntdForm.Item label={'安全类型'} name={'securityType'}>
<AntdSelect> <AntdSelect placeholder={'请选择安全类型'}>
<AntdSelect.Option key={'None'}>None</AntdSelect.Option> <AntdSelect.Option key={'None'}>None</AntdSelect.Option>
<AntdSelect.Option key={'SSL/TLS'}>SSL/TLS</AntdSelect.Option> <AntdSelect.Option key={'SSL/TLS'}>SSL/TLS</AntdSelect.Option>
<AntdSelect.Option key={'StartTls'}>StartTls</AntdSelect.Option> <AntdSelect.Option key={'StartTls'}>StartTls</AntdSelect.Option>
</AntdSelect> </AntdSelect>
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item label={'用户名'} name={'username'}> <AntdForm.Item label={'用户名'} name={'username'}>
<AntdInput /> <AntdInput placeholder={'请输入用户名'} />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item label={'密码'} name={'password'}> <AntdForm.Item label={'密码'} name={'password'}>
<AntdInput.Password /> <AntdInput.Password placeholder={'请输入密码'} />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item label={'发送者'} name={'from'}> <AntdForm.Item label={'发送者'} name={'from'}>
<AntdInput /> <AntdInput placeholder={'请输入发送者'} />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item label={'发送者名称'} name={'fromName'}> <AntdForm.Item label={'发送者名称'} name={'fromName'}>
<AntdInput /> <AntdInput placeholder={'请输入发送者名称'} />
</AntdForm.Item> </AntdForm.Item>
</AntdForm> </AntdForm>
</SettingsCard> </SettingsCard>

3
src/pages/System/Settings/SensitiveWord.tsx
View File

@@ -153,7 +153,8 @@ const SensitiveWord = () => {
<Icon component={IconOxygenPlus} /> <Icon component={IconOxygenPlus} />
</AntdButton> </AntdButton>
} }
></AntdInput> placeholder={'请输入敏感词'}
/>
</SettingsCard> </SettingsCard>
</> </>
) )

9
src/pages/System/Settings/TwoFactor.tsx
View File

@@ -59,10 +59,15 @@ const TwoFactor = () => {
disabled={!hasPermission('system:settings:modify:two-factor')} disabled={!hasPermission('system:settings:modify:two-factor')}
> >
<AntdForm.Item label={'提供者'} name={'issuer'}> <AntdForm.Item label={'提供者'} name={'issuer'}>
<AntdInput /> <AntdInput placeholder={'请输入提供者'} />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item label={'密钥长度'} name={'secretKeyLength'}> <AntdForm.Item label={'密钥长度'} name={'secretKeyLength'}>
<AntdInputNumber min={3} max={64} style={{ width: '100%' }} /> <AntdInputNumber
min={3}
max={64}
style={{ width: '100%' }}
placeholder={'请输入密钥长度'}
/>
</AntdForm.Item> </AntdForm.Item>
</AntdForm> </AntdForm>
</SettingsCard> </SettingsCard>

27
src/pages/System/Tools/Base.tsx
View File

@@ -279,9 +279,9 @@ const Base = () => {
compileForm.setFieldValue('entryFileName', undefined) compileForm.setFieldValue('entryFileName', undefined)
void modal.confirm({ void modal.confirm({
title: '编译',
centered: true, centered: true,
maskClosable: true, maskClosable: true,
title: '编译',
footer: (_, { OkBtn, CancelBtn }) => ( footer: (_, { OkBtn, CancelBtn }) => (
<> <>
<OkBtn /> <OkBtn />
@@ -295,7 +295,7 @@ const Base = () => {
name={'entryFileName'} name={'entryFileName'}
label={'入口文件'} label={'入口文件'}
style={{ marginTop: 10 }} style={{ marginTop: 10 }}
rules={[{ required: true, message: '请选择入口文件' }]} rules={[{ required: true }]}
> >
<AntdSelect <AntdSelect
options={Object.keys(files) options={Object.keys(files)
@@ -307,6 +307,7 @@ const Base = () => {
].includes(value) ].includes(value)
) )
.map((value) => ({ value, label: value }))} .map((value) => ({ value, label: value }))}
placeholder={'请选择入口文件'}
/> />
</AntdForm.Item> </AntdForm.Item>
</AntdForm> </AntdForm>
@@ -428,8 +429,9 @@ const Base = () => {
return () => { return () => {
modal modal
.confirm({ .confirm({
title: '确定删除', centered: true,
maskClosable: true, maskClosable: true,
title: '确定删除',
content: `确定删除基板 ${value.name} 吗？` content: `确定删除基板 ${value.name} 吗？`
}) })
.then( .then(
@@ -609,9 +611,9 @@ const Base = () => {
const handleOnAddFile = () => { const handleOnAddFile = () => {
void modal.confirm({ void modal.confirm({
title: '新建文件',
centered: true, centered: true,
maskClosable: true, maskClosable: true,
title: '新建文件',
footer: (_, { OkBtn, CancelBtn }) => ( footer: (_, { OkBtn, CancelBtn }) => (
<> <>
<OkBtn /> <OkBtn />
@@ -623,6 +625,7 @@ const Base = () => {
form={addFileForm} form={addFileForm}
ref={(ref) => { ref={(ref) => {
setTimeout(() => { setTimeout(() => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
ref?.getFieldInstance('fileName').focus() ref?.getFieldInstance('fileName').focus()
}, 50) }, 50)
}} }}
@@ -652,7 +655,7 @@ const Base = () => {
}) })
]} ]}
> >
<AntdInput /> <AntdInput placeholder={'请输入文件名'} />
</AntdForm.Item> </AntdForm.Item>
</AntdForm> </AntdForm>
), ),
@@ -800,9 +803,9 @@ const Base = () => {
return () => { return () => {
renameFileForm.setFieldValue('fileName', fileName) renameFileForm.setFieldValue('fileName', fileName)
void modal.confirm({ void modal.confirm({
title: '重命名文件',
centered: true, centered: true,
maskClosable: true, maskClosable: true,
title: '重命名文件',
footer: (_, { OkBtn, CancelBtn }) => ( footer: (_, { OkBtn, CancelBtn }) => (
<> <>
<OkBtn /> <OkBtn />
@@ -814,6 +817,7 @@ const Base = () => {
form={renameFileForm} form={renameFileForm}
ref={(ref) => { ref={(ref) => {
setTimeout(() => { setTimeout(() => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
ref?.getFieldInstance('fileName').focus() ref?.getFieldInstance('fileName').focus()
}, 50) }, 50)
}} }}
@@ -846,7 +850,7 @@ const Base = () => {
}) })
]} ]}
> >
<AntdInput /> <AntdInput placeholder={'请输入空文件名'} />
</AntdForm.Item> </AntdForm.Item>
</AntdForm> </AntdForm>
), ),
@@ -915,8 +919,9 @@ const Base = () => {
return () => { return () => {
modal modal
.confirm({ .confirm({
title: '确定删除', centered: true,
maskClosable: true, maskClosable: true,
title: '确定删除',
content: `确定删除文件 ${fileName} 吗？` content: `确定删除文件 ${fileName} 吗？`
}) })
.then( .then(
@@ -1040,7 +1045,7 @@ const Base = () => {
const addAndEditForm = ( const addAndEditForm = (
<AntdForm form={form} disabled={isSubmitting} layout={'vertical'}> <AntdForm form={form} disabled={isSubmitting} layout={'vertical'}>
<AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}> <AntdForm.Item hidden name={'id'} label={'ID'}>
<AntdInput disabled /> <AntdInput disabled />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item <AntdForm.Item
@@ -1048,7 +1053,7 @@ const Base = () => {
label={'名称'} label={'名称'}
rules={[{ required: true, whitespace: true }]} rules={[{ required: true, whitespace: true }]}
> >
<AntdInput allowClear /> <AntdInput allowClear placeholder={'请输入名称'} />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item <AntdForm.Item
name={'platform'} name={'platform'}
@@ -1056,7 +1061,7 @@ const Base = () => {
rules={[{ required: true }]} rules={[{ required: true }]}
hidden={isDrawerEdit} hidden={isDrawerEdit}
> >
<AntdSelect> <AntdSelect placeholder={'请选择平台'}>
<AntdSelect.Option key={'WEB'}>Web</AntdSelect.Option> <AntdSelect.Option key={'WEB'}>Web</AntdSelect.Option>
<AntdSelect.Option key={'DESKTOP'}>Desktop</AntdSelect.Option> <AntdSelect.Option key={'DESKTOP'}>Desktop</AntdSelect.Option>
<AntdSelect.Option key={'ANDROID'}>Android</AntdSelect.Option> <AntdSelect.Option key={'ANDROID'}>Android</AntdSelect.Option>

7
src/pages/System/Tools/Category.tsx
View File

@@ -121,8 +121,9 @@ const Category = () => {
return () => { return () => {
modal modal
.confirm({ .confirm({
title: '确定删除', centered: true,
maskClosable: true, maskClosable: true,
title: '确定删除',
content: `确定删除类别 ${value.name} 吗？` content: `确定删除类别 ${value.name} 吗？`
}) })
.then( .then(
@@ -266,7 +267,7 @@ const Category = () => {
const addAndEditForm = ( const addAndEditForm = (
<AntdForm form={form} disabled={isSubmitting} layout={'vertical'}> <AntdForm form={form} disabled={isSubmitting} layout={'vertical'}>
<AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}> <AntdForm.Item hidden name={'id'} label={'ID'}>
<AntdInput disabled /> <AntdInput disabled />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item <AntdForm.Item
@@ -274,7 +275,7 @@ const Category = () => {
label={'名称'} label={'名称'}
rules={[{ required: true, whitespace: true }]} rules={[{ required: true, whitespace: true }]}
> >
<AntdInput allowClear /> <AntdInput allowClear placeholder={'请输入名称'} />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item name={'enable'} label={'状态'}> <AntdForm.Item name={'enable'} label={'状态'}>
<AntdSwitch checkedChildren={'启用'} unCheckedChildren={'禁用'} /> <AntdSwitch checkedChildren={'启用'} unCheckedChildren={'禁用'} />

12
src/pages/System/Tools/Code.tsx
View File

@@ -12,6 +12,7 @@ import Card from '@/components/common/Card'
const Code = () => { const Code = () => {
const navigate = useNavigate() const navigate = useNavigate()
const [modal, contextHolder] = AntdModal.useModal()
const { id } = useParams() const { id } = useParams()
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [files, setFiles] = useState<IFiles>({}) const [files, setFiles] = useState<IFiles>({})
@@ -20,7 +21,15 @@ const Code = () => {
const handleOnRunTool = () => { const handleOnRunTool = () => {
if (checkDesktop() || platform !== 'DESKTOP') { if (checkDesktop() || platform !== 'DESKTOP') {
void modal.confirm({
centered: true,
maskClosable: true,
title: '注意',
content: '运行前请仔细查阅工具代码！',
onOk: () => {
navigate(`/system/tools/execute/${id}`) navigate(`/system/tools/execute/${id}`)
}
})
} else { } else {
void message.warning('此应用需要桌面端环境，请在桌面端运行') void message.warning('此应用需要桌面端环境，请在桌面端运行')
} }
@@ -71,6 +80,7 @@ const Code = () => {
}, []) }, [])
return ( return (
<>
<FitFullscreen data-component={'system-tools-code'}> <FitFullscreen data-component={'system-tools-code'}>
<Card> <Card>
<Playground.CodeEditor <Playground.CodeEditor
@@ -91,6 +101,8 @@ const Code = () => {
</div> </div>
</Draggable> </Draggable>
</FitFullscreen> </FitFullscreen>
{contextHolder}
</>
) )
} }

35
src/pages/System/Tools/Template.tsx
View File

@@ -276,8 +276,9 @@ const Template = () => {
return () => { return () => {
modal modal
.confirm({ .confirm({
title: '确定删除', centered: true,
maskClosable: true, maskClosable: true,
title: '确定删除',
content: `确定删除模板 ${value.name} 吗？` content: `确定删除模板 ${value.name} 吗？`
}) })
.then( .then(
@@ -464,9 +465,9 @@ const Template = () => {
const handleOnAddFile = () => { const handleOnAddFile = () => {
void modal.confirm({ void modal.confirm({
title: '新建文件',
centered: true, centered: true,
maskClosable: true, maskClosable: true,
title: '新建文件',
footer: (_, { OkBtn, CancelBtn }) => ( footer: (_, { OkBtn, CancelBtn }) => (
<> <>
<OkBtn /> <OkBtn />
@@ -478,6 +479,7 @@ const Template = () => {
form={addFileForm} form={addFileForm}
ref={(ref) => { ref={(ref) => {
setTimeout(() => { setTimeout(() => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
ref?.getFieldInstance('fileName').focus() ref?.getFieldInstance('fileName').focus()
}, 50) }, 50)
}} }}
@@ -507,7 +509,7 @@ const Template = () => {
}) })
]} ]}
> >
<AntdInput /> <AntdInput placeholder={'请输入文件名'} />
</AntdForm.Item> </AntdForm.Item>
</AntdForm> </AntdForm>
), ),
@@ -658,9 +660,9 @@ const Template = () => {
return () => { return () => {
renameFileForm.setFieldValue('fileName', fileName) renameFileForm.setFieldValue('fileName', fileName)
void modal.confirm({ void modal.confirm({
title: '重命名文件',
centered: true, centered: true,
maskClosable: true, maskClosable: true,
title: '重命名文件',
footer: (_, { OkBtn, CancelBtn }) => ( footer: (_, { OkBtn, CancelBtn }) => (
<> <>
<OkBtn /> <OkBtn />
@@ -672,6 +674,7 @@ const Template = () => {
form={renameFileForm} form={renameFileForm}
ref={(ref) => { ref={(ref) => {
setTimeout(() => { setTimeout(() => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
ref?.getFieldInstance('fileName').focus() ref?.getFieldInstance('fileName').focus()
}, 50) }, 50)
}} }}
@@ -704,7 +707,7 @@ const Template = () => {
}) })
]} ]}
> >
<AntdInput /> <AntdInput placeholder={'请输入新文件名'} />
</AntdForm.Item> </AntdForm.Item>
</AntdForm> </AntdForm>
), ),
@@ -773,8 +776,9 @@ const Template = () => {
return () => { return () => {
modal modal
.confirm({ .confirm({
title: '确定删除', centered: true,
maskClosable: true, maskClosable: true,
title: '确定删除',
content: `确定删除文件 ${fileName} 吗？` content: `确定删除文件 ${fileName} 吗？`
}) })
.then( .then(
@@ -979,7 +983,7 @@ const Template = () => {
const addAndEditForm = ( const addAndEditForm = (
<AntdForm form={form} disabled={isSubmitting} layout={'vertical'}> <AntdForm form={form} disabled={isSubmitting} layout={'vertical'}>
<AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}> <AntdForm.Item hidden name={'id'} label={'ID'}>
<AntdInput disabled /> <AntdInput disabled />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item <AntdForm.Item
@@ -987,7 +991,7 @@ const Template = () => {
label={'名称'} label={'名称'}
rules={[{ required: true, whitespace: true }]} rules={[{ required: true, whitespace: true }]}
> >
<AntdInput allowClear /> <AntdInput allowClear placeholder={'请输入名称'} />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item <AntdForm.Item
hidden={isDrawerEdit} hidden={isDrawerEdit}
@@ -995,10 +999,19 @@ const Template = () => {
label={'基板'} label={'基板'}
rules={[{ required: true }]} rules={[{ required: true }]}
> >
<AntdCascader showSearch allowClear={false} options={baseDataGroupByPlatform()} /> <AntdCascader
showSearch
allowClear={false}
options={baseDataGroupByPlatform()}
placeholder={'请选择基板'}
/>
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item name={'entryPoint'} label={'入口'} rules={[{ required: true }]}> <AntdForm.Item
<AntdInput allowClear /> name={'entryPoint'}
label={'入口文件'}
rules={[{ required: true, whitespace: true }]}
>
<AntdInput allowClear placeholder={'请输入入口文件'} />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item name={'enable'} label={'状态'}> <AntdForm.Item name={'enable'} label={'状态'}>
<AntdSwitch checkedChildren={'启用'} unCheckedChildren={'禁用'} /> <AntdSwitch checkedChildren={'启用'} unCheckedChildren={'禁用'} />

11
src/pages/System/Tools/index.tsx
View File

@@ -56,7 +56,7 @@ const Tools = () => {
<AntdAvatar <AntdAvatar
src={ src={
<AntdImage <AntdImage
preview={{ mask: <Icon component={IconOxygenEye}></Icon> }} preview={{ mask: <Icon component={IconOxygenEye} /> }}
src={`data:image/svg+xml;base64,${value}`} src={`data:image/svg+xml;base64,${value}`}
alt={'Avatar'} alt={'Avatar'}
/> />
@@ -204,9 +204,9 @@ const Tools = () => {
return () => { return () => {
form.setFieldValue('pass', undefined) form.setFieldValue('pass', undefined)
void modal.confirm({ void modal.confirm({
title: '审核',
centered: true, centered: true,
maskClosable: true, maskClosable: true,
title: '审核',
footer: (_, { OkBtn, CancelBtn }) => ( footer: (_, { OkBtn, CancelBtn }) => (
<> <>
<OkBtn /> <OkBtn />
@@ -352,8 +352,9 @@ const Tools = () => {
return () => { return () => {
modal modal
.confirm({ .confirm({
title: '确定下架', centered: true,
maskClosable: true, maskClosable: true,
title: '确定下架',
content: `确定下架工具 ${value.author.username}:${value.toolId}:${value.ver} 吗？` content: `确定下架工具 ${value.author.username}:${value.toolId}:${value.ver} 吗？`
}) })
.then( .then(
@@ -387,8 +388,9 @@ const Tools = () => {
return () => { return () => {
modal modal
.confirm({ .confirm({
title: '确定删除', centered: true,
maskClosable: true, maskClosable: true,
title: '确定删除',
content: `确定删除工具 ${value.author.username}:${value.toolId}:${value.platform.slice(0, 1)}${value.platform.slice(1).toLowerCase()}:${value.ver} 吗？` content: `确定删除工具 ${value.author.username}:${value.toolId}:${value.platform.slice(0, 1)}${value.platform.slice(1).toLowerCase()}:${value.ver} 吗？`
}) })
.then( .then(
@@ -552,6 +554,7 @@ const Tools = () => {
onChange={handleOnSearchValueChange} onChange={handleOnSearchValueChange}
onKeyDown={handleOnSearchValueKeyDown} onKeyDown={handleOnSearchValueKeyDown}
status={isRegexLegal ? undefined : 'error'} status={isRegexLegal ? undefined : 'error'}
placeholder={'请输入搜索内容'}
/> />
</Card> </Card>
<Card style={{ overflow: 'inherit', flex: '0 0 auto' }}> <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>

41
src/pages/System/User.tsx
View File

@@ -88,7 +88,7 @@ const User = () => {
<AntdAvatar <AntdAvatar
src={ src={
<AntdImage <AntdImage
preview={{ mask: <Icon component={IconOxygenEye}></Icon> }} preview={{ mask: <Icon component={IconOxygenEye} /> }}
src={`data:image/png;base64,${value}`} src={`data:image/png;base64,${value}`}
alt={'Avatar'} alt={'Avatar'}
/> />
@@ -285,8 +285,9 @@ const User = () => {
const handleOnListDeleteBtnClick = () => { const handleOnListDeleteBtnClick = () => {
modal modal
.confirm({ .confirm({
title: '确定删除', centered: true,
maskClosable: true, maskClosable: true,
title: '确定删除',
content: `确定删除选中的 ${tableSelectedItem.length} 个用户吗？` content: `确定删除选中的 ${tableSelectedItem.length} 个用户吗？`
}) })
.then( .then(
@@ -326,6 +327,8 @@ const User = () => {
value.credentialsExpiration && isPastTime(value.credentialsExpiration) value.credentialsExpiration && isPastTime(value.credentialsExpiration)
) )
void modal.confirm({ void modal.confirm({
centered: true,
maskClosable: true,
icon: <></>, icon: <></>,
title: ( title: (
<> <>
@@ -336,8 +339,6 @@ const User = () => {
修改用户 {value.username} 的密码 修改用户 {value.username} 的密码
</> </>
), ),
centered: true,
maskClosable: true,
footer: (_, { OkBtn, CancelBtn }) => ( footer: (_, { OkBtn, CancelBtn }) => (
<> <>
<OkBtn /> <OkBtn />
@@ -352,23 +353,17 @@ const User = () => {
wrapperCol={{ span: 18 }} wrapperCol={{ span: 18 }}
ref={(ref) => { ref={(ref) => {
setTimeout(() => { setTimeout(() => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
ref?.getFieldInstance('password').focus() ref?.getFieldInstance('password').focus()
}, 50) }, 50)
}} }}
> >
<AntdForm.Item name={'id'} label={'ID'} labelAlign={'right'}>
<AntdInput disabled />
</AntdForm.Item>
<AntdForm.Item <AntdForm.Item
name={'password'} name={'password'}
label={'密码'} label={'密码'}
rules={[ rules={[{ required: true, whitespace: true }]}
{
required: true
}
]}
> >
<AntdInput.Password /> <AntdInput.Password placeholder={'请输入密码'} />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item <AntdForm.Item
name={'passwordConfirm'} name={'passwordConfirm'}
@@ -387,7 +382,7 @@ const User = () => {
}) })
]} ]}
> >
<AntdInput.Password /> <AntdInput.Password placeholder={'请确认密码'} />
</AntdForm.Item> </AntdForm.Item>
{value.id !== '0' && ( {value.id !== '0' && (
<AntdForm.Item <AntdForm.Item
@@ -479,8 +474,9 @@ const User = () => {
return () => { return () => {
modal modal
.confirm({ .confirm({
title: '确定删除', centered: true,
maskClosable: true, maskClosable: true,
title: '确定删除',
content: `确定删除用户 ${value.username} 吗？` content: `确定删除用户 ${value.username} 吗？`
}) })
.then( .then(
@@ -800,7 +796,7 @@ const User = () => {
<AntdForm.Item hidden name={'avatar'}> <AntdForm.Item hidden name={'avatar'}>
<AntdInput /> <AntdInput />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}> <AntdForm.Item hidden name={'id'} label={'ID'}>
<AntdInput disabled /> <AntdInput disabled />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item <AntdForm.Item
@@ -808,7 +804,7 @@ const User = () => {
label={'用户名'} label={'用户名'}
rules={[{ required: true, whitespace: true }]} rules={[{ required: true, whitespace: true }]}
> >
<AntdInput allowClear /> <AntdInput allowClear placeholder={'请输入用户名'} />
</AntdForm.Item> </AntdForm.Item>
{!isDrawerEdit && ( {!isDrawerEdit && (
<> <>
@@ -817,7 +813,7 @@ const User = () => {
label={'密码'} label={'密码'}
rules={[{ required: true, whitespace: true }]} rules={[{ required: true, whitespace: true }]}
> >
<AntdInput.Password allowClear /> <AntdInput.Password allowClear placeholder={'请输入密码'} />
</AntdForm.Item> </AntdForm.Item>
</> </>
)} )}
@@ -826,14 +822,14 @@ const User = () => {
label={'昵称'} label={'昵称'}
rules={[{ required: true, whitespace: true }]} rules={[{ required: true, whitespace: true }]}
> >
<AntdInput allowClear /> <AntdInput allowClear placeholder={'请输入昵称'} />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item <AntdForm.Item
name={'email'} name={'email'}
label={'邮箱'} label={'邮箱'}
rules={[{ required: true, whitespace: true, type: 'email' }]} rules={[{ required: true, type: 'email' }]}
> >
<AntdInput type={'email'} allowClear /> <AntdInput type={'email'} allowClear placeholder={'请输入邮箱'} />
</AntdForm.Item> </AntdForm.Item>
{formValues?.id !== '0' && ( {formValues?.id !== '0' && (
<> <>
@@ -847,6 +843,7 @@ const User = () => {
value: value.id, value: value.id,
label: `${value.name}${!value.enable ? '(已禁用)' : ''}` label: `${value.name}${!value.enable ? '(已禁用)' : ''}`
}))} }))}
placeholder={'请选择角色'}
/> />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item name={'groupIds'} label={'用户组'}> <AntdForm.Item name={'groupIds'} label={'用户组'}>
@@ -859,6 +856,7 @@ const User = () => {
value: value.id, value: value.id,
label: `${value.name}${!value.enable ? '(已禁用)' : ''}` label: `${value.name}${!value.enable ? '(已禁用)' : ''}`
}))} }))}
placeholder={'请选择用户组'}
/> />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item name={'verified'} label={'验证'}> <AntdForm.Item name={'verified'} label={'验证'}>
@@ -957,6 +955,7 @@ const User = () => {
onChange={handleOnSearchValueChange} onChange={handleOnSearchValueChange}
onKeyDown={handleOnSearchValueKeyDown} onKeyDown={handleOnSearchValueKeyDown}
status={isRegexLegal ? undefined : 'error'} status={isRegexLegal ? undefined : 'error'}
placeholder={'请输入搜索内容'}
/> />
</Card> </Card>
<Card style={{ overflow: 'inherit', flex: '0 0 auto' }}> <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>

22
src/pages/Tools/Create.tsx
View File

@@ -241,7 +241,7 @@ const Create = () => {
<AntdForm.Item <AntdForm.Item
label={'名称'} label={'名称'}
name={'name'} name={'name'}
rules={[{ required: true }]} rules={[{ required: true, whitespace: true }]}
> >
<AntdInput <AntdInput
maxLength={20} maxLength={20}
@@ -253,7 +253,7 @@ const Create = () => {
label={'工具 ID'} label={'工具 ID'}
name={'toolId'} name={'toolId'}
rules={[ rules={[
{ required: true }, { required: true, whitespace: true },
{ {
pattern: /^[a-zA-Z-_][0-9a-zA-Z-_]{2,19}$/, pattern: /^[a-zA-Z-_][0-9a-zA-Z-_]{2,19}$/,
message: message:
@@ -270,11 +270,11 @@ const Create = () => {
<AntdForm.Item <AntdForm.Item
label={'平台'} label={'平台'}
name={'platform'} name={'platform'}
rules={[{ required: true }]} rules={[{ required: true, whitespace: true }]}
> >
<AntdSelect <AntdSelect
placeholder={'请选择平台'}
onChange={handleOnPlatformChange} onChange={handleOnPlatformChange}
placeholder={'请选择平台'}
> >
<AntdSelect.Option key={'WEB'}>Web</AntdSelect.Option> <AntdSelect.Option key={'WEB'}>Web</AntdSelect.Option>
<AntdSelect.Option key={'DESKTOP'}> <AntdSelect.Option key={'DESKTOP'}>
@@ -297,7 +297,7 @@ const Create = () => {
label={'版本'} label={'版本'}
name={'ver'} name={'ver'}
rules={[ rules={[
{ required: true }, { required: true, whitespace: true },
{ {
pattern: /^\d+\.\d+\.\d+$/, pattern: /^\d+\.\d+\.\d+$/,
message: `格式必须为 '<数字>.<数字>.<数字>', eg. 1.0.3` message: `格式必须为 '<数字>.<数字>.<数字>', eg. 1.0.3`
@@ -313,10 +313,9 @@ const Create = () => {
<AntdForm.Item <AntdForm.Item
label={'模板'} label={'模板'}
name={'templateId'} name={'templateId'}
rules={[{ required: true }]} rules={[{ required: true, whitespace: true }]}
> >
<AntdSelect <AntdSelect
placeholder={'请选择模板'}
options={templateData?.map((value) => ({ options={templateData?.map((value) => ({
value: value.id, value: value.id,
label: value.name label: value.name
@@ -324,28 +323,28 @@ const Create = () => {
loading={loadingTemplate} loading={loadingTemplate}
disabled={loadingTemplate} disabled={loadingTemplate}
onChange={handleOnTemplateChange} onChange={handleOnTemplateChange}
placeholder={'请选择模板'}
/> />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item <AntdForm.Item
label={'关键字'} label={'关键字'}
tooltip={'工具搜索（每个不超过10个字符）'} tooltip={'工具搜索（每个不超过10个字符）'}
name={'keywords'} name={'keywords'}
rules={[{ required: true, message: '请输入关键字' }]} rules={[{ required: true, whitespace: true }]}
> >
<AntdSelect <AntdSelect
placeholder={'请输入关键字'}
mode={'tags'} mode={'tags'}
maxCount={20} maxCount={20}
placeholder={'请输入关键字'}
/> />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item <AntdForm.Item
label={'类别'} label={'类别'}
tooltip={'工具分类'} tooltip={'工具分类'}
name={'categories'} name={'categories'}
rules={[{ required: true }]} rules={[{ required: true, whitespace: true }]}
> >
<AntdSelect <AntdSelect
placeholder={'请选择类别'}
mode={'multiple'} mode={'multiple'}
options={categoryData?.map((value) => ({ options={categoryData?.map((value) => ({
value: value.id, value: value.id,
@@ -353,6 +352,7 @@ const Create = () => {
}))} }))}
loading={loadingCategory} loading={loadingCategory}
disabled={loadingCategory} disabled={loadingCategory}
placeholder={'请选择类别'}
/> />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item> <AntdForm.Item>

14
src/pages/Tools/Edit.tsx
View File

@@ -369,7 +369,11 @@ const Edit = () => {
<AntdForm.Item name={'icon'} hidden> <AntdForm.Item name={'icon'} hidden>
<AntdInput /> <AntdInput />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item label={'名称'} name={'name'} rules={[{ required: true }]}> <AntdForm.Item
label={'名称'}
name={'name'}
rules={[{ required: true, whitespace: true }]}
>
<AntdInput maxLength={20} showCount placeholder={'请输入名称'} /> <AntdInput maxLength={20} showCount placeholder={'请输入名称'} />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item label={'简介'} name={'description'}> <AntdForm.Item label={'简介'} name={'description'}>
@@ -384,18 +388,17 @@ const Edit = () => {
label={'关键字'} label={'关键字'}
tooltip={'工具搜索（每个不超过10个字符）'} tooltip={'工具搜索（每个不超过10个字符）'}
name={'keywords'} name={'keywords'}
rules={[{ required: true, message: '请输入关键字' }]} rules={[{ required: true, whitespace: true }]}
> >
<AntdSelect placeholder={'请输入关键字'} mode={'tags'} maxCount={20} /> <AntdSelect mode={'tags'} maxCount={20} placeholder={'请输入关键字'} />
</AntdForm.Item> </AntdForm.Item>
<AntdForm.Item <AntdForm.Item
label={'类别'} label={'类别'}
tooltip={'工具分类'} tooltip={'工具分类'}
name={'categories'} name={'categories'}
rules={[{ required: true }]} rules={[{ required: true, whitespace: true }]}
> >
<AntdSelect <AntdSelect
placeholder={'请选择类别'}
mode={'multiple'} mode={'multiple'}
options={categoryData?.map((value) => ({ options={categoryData?.map((value) => ({
value: value.id, value: value.id,
@@ -403,6 +406,7 @@ const Edit = () => {
}))} }))}
loading={loadingCategory} loading={loadingCategory}
disabled={loadingCategory} disabled={loadingCategory}
placeholder={'请选择类别'}
/> />
</AntdForm.Item> </AntdForm.Item>
</AntdForm> </AntdForm>

2
src/pages/Tools/Store.tsx
View File

@@ -331,11 +331,11 @@ const Store = () => {
> >
<div className={`search${hideSearch ? ' hide' : ''}`}> <div className={`search${hideSearch ? ' hide' : ''}`}>
<AntdInput.Search <AntdInput.Search
placeholder={'请输入工具名或关键字'}
enterButton enterButton
allowClear allowClear
loading={isLoading} loading={isLoading}
onSearch={handleOnSearch} onSearch={handleOnSearch}
placeholder={'请输入工具名或关键字'}
/> />
</div> </div>
<FlexBox direction={'horizontal'} className={'root-content'}> <FlexBox direction={'horizontal'} className={'root-content'}>

3
src/pages/Tools/index.tsx
View File

@@ -348,6 +348,7 @@ const Tools = () => {
form={upgradeForm} form={upgradeForm}
ref={(ref) => { ref={(ref) => {
setTimeout(() => { setTimeout(() => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
ref?.getFieldInstance('toolId').focus() ref?.getFieldInstance('toolId').focus()
}, 50) }, 50)
}} }}
@@ -376,7 +377,7 @@ const Tools = () => {
name={'ver'} name={'ver'}
label={'版本'} label={'版本'}
rules={[ rules={[
{ required: true }, { required: true, whitespace: true },
{ {
pattern: /^\d+\.\d+\.\d+$/, pattern: /^\d+\.\d+\.\d+$/,
message: `格式必须为 '<数字>.<数字>.<数字>', eg. 1.0.3` message: `格式必须为 '<数字>.<数字>.<数字>', eg. 1.0.3`

21
src/pages/User/index.tsx
View File

@@ -115,6 +115,7 @@ const User = () => {
wrapperCol={{ span: 18 }} wrapperCol={{ span: 18 }}
ref={(ref) => { ref={(ref) => {
setTimeout(() => { setTimeout(() => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
ref?.getFieldInstance('originalPassword').focus() ref?.getFieldInstance('originalPassword').focus()
}, 50) }, 50)
}} }}
@@ -123,7 +124,7 @@ const User = () => {
name={'originalPassword'} name={'originalPassword'}
label={'原密码'} label={'原密码'}
labelAlign={'right'} labelAlign={'right'}
rules={[{ required: true, message: '请输入原密码' }]} rules={[{ required: true, whitespace: true }]}
> >
<AntdInput.Password placeholder={'请输入原密码'} /> <AntdInput.Password placeholder={'请输入原密码'} />
</AntdForm.Item> </AntdForm.Item>
@@ -132,7 +133,7 @@ const User = () => {
label={'新密码'} label={'新密码'}
labelAlign={'right'} labelAlign={'right'}
rules={[ rules={[
{ required: true, message: '请输入新密码' }, { required: true, whitespace: true },
{ min: 10, message: '密码至少为10位' }, { min: 10, message: '密码至少为10位' },
{ max: 30, message: '密码最多为30位' } { max: 30, message: '密码最多为30位' }
]} ]}
@@ -144,7 +145,7 @@ const User = () => {
label={'确认密码'} label={'确认密码'}
labelAlign={'right'} labelAlign={'right'}
rules={[ rules={[
{ required: true, message: '请确认密码' }, { required: true },
({ getFieldValue }) => ({ ({ getFieldValue }) => ({
validator(_, value) { validator(_, value) {
if (!value || getFieldValue('newPassword') === value) { if (!value || getFieldValue('newPassword') === value) {
@@ -247,6 +248,7 @@ const User = () => {
form={twoFactorForm} form={twoFactorForm}
ref={(ref) => { ref={(ref) => {
setTimeout(() => { setTimeout(() => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
ref?.getFieldInstance('twoFactorCode').focus() ref?.getFieldInstance('twoFactorCode').focus()
}, 50) }, 50)
}} }}
@@ -255,12 +257,13 @@ const User = () => {
name={'twoFactorCode'} name={'twoFactorCode'}
label={'验证码'} label={'验证码'}
style={{ marginTop: 10 }} style={{ marginTop: 10 }}
rules={[{ required: true, len: 6 }]} rules={[{ required: true, whitespace: true, len: 6 }]}
> >
<AntdInput <AntdInput
showCount showCount
maxLength={6} maxLength={6}
autoComplete={'off'} autoComplete={'off'}
placeholder={'请输入验证码'}
/> />
</AntdForm.Item> </AntdForm.Item>
</AntdForm> </AntdForm>
@@ -334,6 +337,7 @@ const User = () => {
form={twoFactorForm} form={twoFactorForm}
ref={(ref) => { ref={(ref) => {
setTimeout(() => { setTimeout(() => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
ref?.getFieldInstance('twoFactorCode').focus() ref?.getFieldInstance('twoFactorCode').focus()
}, 50) }, 50)
}} }}
@@ -342,12 +346,15 @@ const User = () => {
name={'twoFactorCode'} name={'twoFactorCode'}
label={'验证码'} label={'验证码'}
style={{ marginTop: 10, marginRight: 30 }} style={{ marginTop: 10, marginRight: 30 }}
rules={[{ required: true, len: 6 }]} rules={[
{ required: true, whitespace: true, len: 6 }
]}
> >
<AntdInput <AntdInput
showCount showCount
maxLength={6} maxLength={6}
autoComplete={'off'} autoComplete={'off'}
placeholder={'请输入验证码'}
/> />
</AntdForm.Item> </AntdForm.Item>
</AntdForm> </AntdForm>
@@ -410,6 +417,7 @@ const User = () => {
setAvatar(userWithPowerInfoVo.userInfo.avatar) setAvatar(userWithPowerInfoVo.userInfo.avatar)
form.setFieldValue('nickname', userWithPowerInfoVo.userInfo.nickname) form.setFieldValue('nickname', userWithPowerInfoVo.userInfo.nickname)
setUserWithPowerInfoVo(userWithPowerInfoVo) setUserWithPowerInfoVo(userWithPowerInfoVo)
void form.validateFields()
}) })
.finally(() => { .finally(() => {
setIsLoading(false) setIsLoading(false)
@@ -509,7 +517,7 @@ const User = () => {
<AntdForm.Item <AntdForm.Item
name={'nickname'} name={'nickname'}
rules={[ rules={[
{ required: true, message: '请输入昵称' }, { required: true, whitespace: true },
{ min: 3, message: '昵称至少为3个字符' } { min: 3, message: '昵称至少为3个字符' }
]} ]}
style={{ marginBottom: 0 }} style={{ marginBottom: 0 }}
@@ -518,6 +526,7 @@ const User = () => {
maxLength={20} maxLength={20}
showCount showCount
disabled={isLoading} disabled={isLoading}
placeholder={'请输入昵称'}
/> />
</AntdForm.Item> </AntdForm.Item>
</AntdForm> </AntdForm>