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

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

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

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

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

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

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

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

@@ -59,10 +59,15 @@ const TwoFactor = () => {
disabled={!hasPermission('system:settings:modify:two-factor')}
>
<AntdForm.Item label={'提供者'} name={'issuer'}>
<AntdInput />
<AntdInput placeholder={'请输入提供者'} />
</AntdForm.Item>
<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>
</SettingsCard>