style: create images ux

src/pages/api-keys/components/add-apikey.tsx

@@ -5,7 +5,7 @@ import SealSelect from '@/components/seal-form/seal-select';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import { useIntl } from '@umijs/max';
-import { Button, Form, Modal, Select, Tag } from 'antd';
+import { Button, Form, Modal, Tag } from 'antd';
 import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
 import { createApisKey } from '../apis';
@@ -160,17 +160,10 @@ const AddModal: React.FC<AddModalProps> = ({
               ]}
             >
               <SealSelect
+                options={expirationOptions}
                 label={intl.formatMessage({ id: 'apikeys.form.expiretime' })}
                 required
-              >
-                {expirationOptions.map((option) => {
-                  return (
-                    <Select.Option key={option.value} value={option.value}>
-                      {intl.formatMessage({ id: option.label })}
-                    </Select.Option>
-                  );
-                })}
-              </SealSelect>
+              ></SealSelect>
             </Form.Item>
             <Form.Item<FormData>
               name="description"

src/pages/api-keys/config/index.ts

@@ -1,6 +1,26 @@
 export const expirationOptions = [
-  { label: 'apikeys.form.expiration.7days', type: 'day', value: 7 },
-  { label: 'apikeys.form.expiration.1month', type: 'month', value: 1 },
-  { label: 'apikeys.form.expiration.6months', type: 'month', value: 6 },
-  { label: 'apikeys.form.expiration.never', type: 'never', value: -1 }
+  {
+    label: 'apikeys.form.expiration.7days',
+    type: 'day',
+    value: 7,
+    locale: true
+  },
+  {
+    label: 'apikeys.form.expiration.1month',
+    type: 'month',
+    value: 1,
+    locale: true
+  },
+  {
+    label: 'apikeys.form.expiration.6months',
+    type: 'month',
+    value: 6,
+    locale: true
+  },
+  {
+    label: 'apikeys.form.expiration.never',
+    type: 'never',
+    value: -1,
+    locale: true
+  }
 ];