优化存储配置样式

pull/82/head^2
awenes 2024-04-06 19:32:37 +08:00
parent 6fb29820ef
commit 4f86c9700d
5 changed files with 88 additions and 80 deletions

View File

@ -22,7 +22,7 @@ import {
PageContainer, PageContainer,
ProCard, ProCard,
ProForm, ProForm,
ProFormSelect, ProFormSegmented,
ProFormSwitch, ProFormSwitch,
} from '@ant-design/pro-components'; } from '@ant-design/pro-components';
import { useAsyncEffect } from 'ahooks'; import { useAsyncEffect } from 'ahooks';
@ -159,7 +159,7 @@ const Storage = () => {
form.setFieldsValue({ enabled, provider }); form.setFieldsValue({ enabled, provider });
}} }}
submitter={{ submitter={{
render: (p, dom) => { render: (_p, dom) => {
return ( return (
<Form.Item {...tailFormItemLayout}> <Form.Item {...tailFormItemLayout}>
<Space>{dom}</Space> <Space>{dom}</Space>
@ -191,16 +191,16 @@ const Storage = () => {
> >
{enabled && ( {enabled && (
<> <>
<ProFormSelect <ProFormSegmented
name="provider" name="provider"
label={intl.formatMessage({ label={intl.formatMessage({
id: 'pages.setting.storage_provider.provider', id: 'pages.setting.storage_provider.provider',
})} })}
rules={[{ required: true }]} rules={[{ required: true }]}
fieldProps={{ fieldProps={{
onChange: async (value: string) => { onChange: async (value) => {
setLoading(true); setLoading(true);
setProvider(value); setProvider(value as string);
form.resetFields(); form.resetFields();
form.setFieldsValue({ form.setFieldsValue({
provider: value, provider: value,
@ -215,38 +215,40 @@ const Storage = () => {
setLoading(false); setLoading(false);
}, },
}} }}
options={[ request={async () => {
{ return [
value: OssProvider.ALIYUN_OSS, {
label: intl.formatMessage({ value: OssProvider.ALIYUN_OSS,
id: 'pages.setting.storage_provider.provider.aliyun_oss', label: intl.formatMessage({
}), id: 'pages.setting.storage_provider.provider.aliyun_oss',
}, }),
{ },
value: OssProvider.TENCENT_COS, {
label: intl.formatMessage({ value: OssProvider.TENCENT_COS,
id: 'pages.setting.storage_provider.provider.tencent_cos', label: intl.formatMessage({
}), id: 'pages.setting.storage_provider.provider.tencent_cos',
}, }),
{ },
value: OssProvider.QINIU_KODO, {
label: intl.formatMessage({ value: OssProvider.QINIU_KODO,
id: 'pages.setting.storage_provider.provider.qiniu_kodo', label: intl.formatMessage({
}), id: 'pages.setting.storage_provider.provider.qiniu_kodo',
}, }),
{ },
value: OssProvider.MINIO, {
label: intl.formatMessage({ value: OssProvider.MINIO,
id: 'pages.setting.storage_provider.provider.minio', label: intl.formatMessage({
}), id: 'pages.setting.storage_provider.provider.minio',
}, }),
{ },
value: OssProvider.S3, {
label: intl.formatMessage({ value: OssProvider.S3,
id: 'pages.setting.storage_provider.provider.s3', label: intl.formatMessage({
}), id: 'pages.setting.storage_provider.provider.s3',
}, }),
]} },
];
}}
/> />
{provider === OssProvider.ALIYUN_OSS && <AliCloudOss />} {provider === OssProvider.ALIYUN_OSS && <AliCloudOss />}
{provider === OssProvider.TENCENT_COS && <TencentCos />} {provider === OssProvider.TENCENT_COS && <TencentCos />}

View File

@ -80,7 +80,9 @@ export default () => {
/> />
<ProFormText <ProFormText
name={['config', 'endpoint']} name={['config', 'endpoint']}
label="Endpoint" label={intl.formatMessage({
id: `pages.setting.storage_provider.provider.aliyun_oss.endpoint`,
})}
placeholder={intl.formatMessage({ placeholder={intl.formatMessage({
id: 'pages.setting.storage_provider.provider.aliyun_oss.endpoint.placeholder', id: 'pages.setting.storage_provider.provider.aliyun_oss.endpoint.placeholder',
})} })}

View File

@ -27,13 +27,13 @@ export default () => {
name={['config', 'accessKey']} name={['config', 'accessKey']}
label="AccessKey" label="AccessKey"
placeholder={intl.formatMessage({ placeholder={intl.formatMessage({
id: 'pages.setting.storage_provider.minio.access_key.placeholder', id: 'pages.setting.storage_provider.provider.minio.access_key.placeholder',
})} })}
rules={[ rules={[
{ {
required: true, required: true,
message: intl.formatMessage({ message: intl.formatMessage({
id: 'pages.setting.storage_provider.minio.access_key.rule.0.message', id: 'pages.setting.storage_provider.provider.minio.access_key.rule.0.message',
}), }),
}, },
]} ]}
@ -46,12 +46,12 @@ export default () => {
{ {
required: true, required: true,
message: intl.formatMessage({ message: intl.formatMessage({
id: 'pages.setting.storage_provider.minio.secret_key.rule.0.message', id: 'pages.setting.storage_provider.provider.minio.secret_key.rule.0.message',
}), }),
}, },
]} ]}
placeholder={intl.formatMessage({ placeholder={intl.formatMessage({
id: 'pages.setting.storage_provider.minio.secret_key.placeholder', id: 'pages.setting.storage_provider.provider.minio.secret_key.placeholder',
})} })}
fieldProps={{ fieldProps={{
autoComplete: 'new-password', autoComplete: 'new-password',
@ -62,15 +62,17 @@ export default () => {
/> />
<ProFormText <ProFormText
name={['config', 'domain']} name={['config', 'domain']}
label="Domain" label={intl.formatMessage({
id: `pages.setting.storage_provider.provider.minio.domain`,
})}
placeholder={intl.formatMessage({ placeholder={intl.formatMessage({
id: 'pages.setting.storage_provider.minio.domain.placeholder', id: 'pages.setting.storage_provider.provider.minio.domain.placeholder',
})} })}
rules={[ rules={[
{ {
required: true, required: true,
message: intl.formatMessage({ message: intl.formatMessage({
id: 'pages.setting.storage_provider.minio.domain.rule.0.message', id: 'pages.setting.storage_provider.provider.minio.domain.rule.0.message',
}), }),
}, },
]} ]}
@ -80,15 +82,17 @@ export default () => {
/> />
<ProFormText <ProFormText
name={['config', 'endpoint']} name={['config', 'endpoint']}
label="Endpoint" label={intl.formatMessage({
id: `pages.setting.storage_provider.provider.minio.endpoint`,
})}
placeholder={intl.formatMessage({ placeholder={intl.formatMessage({
id: 'pages.setting.storage_provider.minio.endpoint.placeholder', id: 'pages.setting.storage_provider.provider.minio.endpoint.placeholder',
})} })}
rules={[ rules={[
{ {
required: true, required: true,
message: intl.formatMessage({ message: intl.formatMessage({
id: 'pages.setting.storage_provider.minio.endpoint.rule.0.message', id: 'pages.setting.storage_provider.provider.minio.endpoint.rule.0.message',
}), }),
}, },
]} ]}
@ -100,13 +104,13 @@ export default () => {
name={['config', 'bucket']} name={['config', 'bucket']}
label={'Bucket'} label={'Bucket'}
placeholder={intl.formatMessage({ placeholder={intl.formatMessage({
id: 'pages.setting.storage_provider.minio.bucket.placeholder', id: 'pages.setting.storage_provider.provider.minio.bucket.placeholder',
})} })}
rules={[ rules={[
{ {
required: true, required: true,
message: intl.formatMessage({ message: intl.formatMessage({
id: 'pages.setting.storage_provider.minio.bucket.rule.0.message', id: 'pages.setting.storage_provider.provider.minio.bucket.rule.0.message',
}), }),
}, },
]} ]}

View File

@ -23,51 +23,51 @@ export default () => {
return ( return (
<> <>
<ProFormText <ProFormText
name={['config', 'domain']} name={['config', 'endpoint']}
label={intl.formatMessage({ label={intl.formatMessage({
id: 'pages.setting.storage_provider.provider.s3.domain', id: `pages.setting.storage_provider.provider.s3.endpoint`,
})} })}
placeholder={intl.formatMessage({ placeholder={intl.formatMessage({
id: 'pages.setting.storage_provider.provider.s3.domain.placeholder', id: `pages.setting.storage_provider.provider.s3.endpoint.placeholder`,
})} })}
rules={[ rules={[
{ {
required: true, required: true,
message: intl.formatMessage({ message: intl.formatMessage({
id: 'pages.setting.storage_provider.provider.s3.domain.rule.0.message', id: `pages.setting.storage_provider.provider.s3.endpoint.rule.0.message`,
}),
},
]}
/>
<ProFormText
name={['config', 'domain']}
label={intl.formatMessage({
id: `pages.setting.storage_provider.provider.s3.domain`,
})}
placeholder={intl.formatMessage({
id: `pages.setting.storage_provider.provider.s3.domain.placeholder`,
})}
rules={[
{
required: true,
message: intl.formatMessage({
id: `pages.setting.storage_provider.provider.s3.domain.rule.0.message`,
}), }),
}, },
]} ]}
fieldProps={{ autoComplete: 'off' }} fieldProps={{ autoComplete: 'off' }}
/> />
<ProFormText
name={['config', 'endpoint']}
label={intl.formatMessage({
id: 'pages.setting.storage_provider.provider.s3.endpoint',
})}
placeholder={intl.formatMessage({
id: 'pages.setting.storage_provider.provider.s3.endpoint.placeholder',
})}
rules={[
{
required: true,
message: intl.formatMessage({
id: 'pages.setting.storage_provider.provider.s3.endpoint.rule.0.message',
}),
},
]}
/>
<ProFormText <ProFormText
name={['config', 'accessKeyId']} name={['config', 'accessKeyId']}
label="AccessKeyId" label="AccessKeyId"
placeholder={intl.formatMessage({ placeholder={intl.formatMessage({
id: 'pages.setting.storage_provider.provider.s3.access_key_id.placeholder', id: `pages.setting.storage_provider.provider.s3.access_key_id.placeholder`,
})} })}
rules={[ rules={[
{ {
required: true, required: true,
message: intl.formatMessage({ message: intl.formatMessage({
id: 'pages.setting.storage_provider.provider.s3.access_key_id.rule.0.message', id: `pages.setting.storage_provider.provider.s3.access_key_id.rule.0.message`,
}), }),
}, },
]} ]}
@ -79,13 +79,13 @@ export default () => {
name={['config', 'secretAccessKey']} name={['config', 'secretAccessKey']}
label="SecretAccessKey" label="SecretAccessKey"
placeholder={intl.formatMessage({ placeholder={intl.formatMessage({
id: 'pages.setting.storage_provider.provider.s3.secret_access_key.placeholder', id: `pages.setting.storage_provider.provider.s3.secret_access_key.placeholder`,
})} })}
rules={[ rules={[
{ {
required: true, required: true,
message: intl.formatMessage({ message: intl.formatMessage({
id: 'pages.setting.storage_provider.provider.s3.secret_access_key.rule.0.message', id: `pages.setting.storage_provider.provider.s3.secret_access_key.rule.0.message`,
}), }),
}, },
]} ]}
@ -95,13 +95,13 @@ export default () => {
name={['config', 'bucket']} name={['config', 'bucket']}
label={'Bucket'} label={'Bucket'}
placeholder={intl.formatMessage({ placeholder={intl.formatMessage({
id: 'pages.setting.storage_provider.provider.s3.bucket.placeholder', id: `pages.setting.storage_provider.provider.s3.bucket.placeholder`,
})} })}
rules={[ rules={[
{ {
required: true, required: true,
message: intl.formatMessage({ message: intl.formatMessage({
id: 'pages.setting.storage_provider.provider.s3.bucket.rule.0.message', id: `pages.setting.storage_provider.provider.s3.bucket.rule.0.message`,
}), }),
}, },
]} ]}
@ -111,7 +111,7 @@ export default () => {
name={['config', 'region']} name={['config', 'region']}
label={'Region'} label={'Region'}
placeholder={intl.formatMessage({ placeholder={intl.formatMessage({
id: 'pages.setting.storage_provider.provider.s3.region.placeholder', id: `pages.setting.storage_provider.provider.s3.region.placeholder`,
})} })}
fieldProps={{ autoComplete: 'off' }} fieldProps={{ autoComplete: 'off' }}
/> />

View File

@ -80,13 +80,13 @@ export default () => {
name={['config', 'secretKey']} name={['config', 'secretKey']}
label="SecretKey" label="SecretKey"
placeholder={intl.formatMessage({ placeholder={intl.formatMessage({
id: 'pages.setting.storage_provider.provider.tencent_cos.secret_Key.placeholder', id: 'pages.setting.storage_provider.provider.tencent_cos.secret_key.placeholder',
})} })}
rules={[ rules={[
{ {
required: true, required: true,
message: intl.formatMessage({ message: intl.formatMessage({
id: 'pages.setting.storage_provider.provider.tencent_cos.secret_Key.rule.0.message', id: 'pages.setting.storage_provider.provider.tencent_cos.secret_key.rule.0.message',
}), }),
}, },
]} ]}