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

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

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

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

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

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

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

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

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