style: adjust providers style

src/pages/maas-provider/forms/access-token.tsx

@@ -1,20 +1,34 @@
 import ListInput from '@/components/list-input';
+import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import { FormData } from '../config/types';
 
 const AccessToken = () => {
   const intl = useIntl();
+  const { getRuleMessage } = useAppUtils();
   const form = Form.useFormInstance<FormData>();
 
   const handleOnChange = (values: string[]) => {};
 
   return (
     <>
-      <Form.Item name="tokens">
+      <Form.Item
+        name="tokens"
+        rules={[
+          {
+            required: true,
+            message: getRuleMessage(
+              'input',
+              intl.formatMessage({ id: 'providers.form.tokens.title' })
+            )
+          }
+        ]}
+      >
         <ListInput
-          btnText="Add Token"
-          label="Access Tokens"
+          required={true}
+          btnText={intl.formatMessage({ id: 'providers.form.tokens.add' })}
+          label={intl.formatMessage({ id: 'providers.form.tokens.title' })}
           dataList={[]}
           onChange={handleOnChange}
         ></ListInput>

src/pages/maas-provider/forms/advance-config.tsx

@@ -45,7 +45,7 @@ const AdvanceConfig: React.FC<{
       </Form.Item>
       <YamlEditor
         ref={editorRef}
-        title={'Custom Config (YAML)'}
+        title={`${intl.formatMessage({ id: 'providers.form.customConfig' })} (YAML)`}
         value={fileContent}
         height={300}
         onUpload={(content) => {

src/pages/maas-provider/forms/index.tsx

@@ -47,14 +47,14 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
   const segmentOptions = [
     {
       value: TABKeysMap.BASIC,
-      label: 'Basic',
+      label: intl.formatMessage({ id: 'common.title.basicInfo' }),
       icon: <IconFont type="icon-basic" />,
       field: 'name'
     },
     {
       value: TABKeysMap.SUPPORTEDMODELS,
-      label: 'Supported Models',
-      icon: <IconFont type="icon-speed" />,
+      label: intl.formatMessage({ id: 'providers.table.models' }),
+      icon: <IconFont type="icon-models" />,
       field: 'supportedModels'
     },
     {
@@ -125,13 +125,13 @@ const ProviderForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
             items={[
               {
                 key: TABKeysMap.SUPPORTEDMODELS,
-                label: 'Supported Models',
+                label: intl.formatMessage({ id: 'providers.table.models' }),
                 forceRender: true,
                 children: <SupportedModels></SupportedModels>
               },
               {
                 key: TABKeysMap.ADVANCED,
-                label: 'Advanced',
+                label: intl.formatMessage({ id: 'resources.form.advanced' }),
                 forceRender: true,
                 children: (
                   <AdvanceConfig

src/pages/maas-provider/forms/proxy-config.tsx

@@ -1,11 +1,13 @@
 import CheckboxField from '@/components/seal-form/checkbox-field';
 import SealInput from '@/components/seal-form/seal-input';
+import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import React from 'react';
 import { useFormContext } from '../config/form-context';
 
 const AdvanceConfig = () => {
+  const { getRuleMessage } = useAppUtils();
   const form = Form.useFormInstance();
   const intl = useIntl();
   const { action } = useFormContext();
@@ -32,21 +34,33 @@ const AdvanceConfig = () => {
         style={{ marginBottom: 8 }}
       >
         <CheckboxField
-          label={'Enable Proxy'}
+          label={intl.formatMessage({ id: 'providers.form.proxy.enable' })}
           onChange={handleSpeculativeEnabledChange}
         ></CheckboxField>
       </Form.Item>
       {proxyConfigEnabled && (
         <>
-          <Form.Item name={['proxy_config', 'url']}>
+          <Form.Item
+            name={['proxy_config', 'url']}
+            rules={[
+              {
+                required: true,
+                message: getRuleMessage(
+                  'input',
+                  intl.formatMessage({ id: 'providers.form.proxy.url' })
+                )
+              }
+            ]}
+          >
             <SealInput.Input
-              label={'Proxy URL'}
+              required
+              label={intl.formatMessage({ id: 'providers.form.proxy.url' })}
               placeholder="http://proxy.example.com:8080"
             ></SealInput.Input>
           </Form.Item>
           <Form.Item name={['proxy_config', 'timeout']}>
             <SealInput.Number
-              label={'Proxy Timeout'}
+              label={intl.formatMessage({ id: 'providers.form.proxy.timeout' })}
               placeholder="30"
             ></SealInput.Number>
           </Form.Item>

src/pages/maas-provider/forms/supported-models.tsx

@@ -60,7 +60,7 @@ const SupportedModels = () => {
           loading={data.loading}
           onClick={() => handleTestModel(data)}
         >
-          Test
+          {intl.formatMessage({ id: 'providers.form.model.test' })}
         </Button>
       </SelectWrapper>
     );
@@ -73,8 +73,12 @@ const SupportedModels = () => {
       <Form.Item name="models">
         <div data-field="supportedModels"></div>
         <ListInput
-          btnText="Add Model"
-          label="Supported Models"
+          styles={{
+            wrapper: {
+              paddingTop: 14
+            }
+          }}
+          btnText={intl.formatMessage({ id: 'providers.form.models.add' })}
           dataList={[]}
           renderItem={renderModelItem}
           onChange={handleOnChange}