fix(style): cluster state do not display

src/pages/llmodels/forms/backend.tsx

@@ -4,6 +4,7 @@ import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import TooltipList from '@/components/tooltip-list';
 import { PageAction } from '@/config';
+import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
 import { Form, Typography } from 'antd';
 import React, { useMemo } from 'react';
@@ -19,6 +20,7 @@ import { FormData } from '../config/types';
 
 const BackendFields: React.FC = () => {
   const intl = useIntl();
+  const { getRuleMessage } = useAppUtils();
   const form = Form.useFormInstance();
   const {
     isGGUF,
@@ -51,7 +53,15 @@ const BackendFields: React.FC = () => {
 
   return (
     <>
-      <Form.Item name="backend" rules={[{ required: true }]}>
+      <Form.Item
+        name="backend"
+        rules={[
+          {
+            required: true,
+            message: getRuleMessage('select', 'models.form.backend')
+          }
+        ]}
+      >
         <SealSelect
           required
           onChange={onBackendChange}
@@ -109,7 +119,15 @@ const BackendFields: React.FC = () => {
       )}
       {backend === backendOptionsMap.custom && (
         <>
-          <Form.Item<FormData> name="image_name" rules={[{ required: true }]}>
+          <Form.Item<FormData>
+            name="image_name"
+            rules={[
+              {
+                required: true,
+                message: getRuleMessage('input', 'backend.imageName')
+              }
+            ]}
+          >
             <SealInput.Input
               required
               allowClear
@@ -117,7 +135,15 @@ const BackendFields: React.FC = () => {
               label={intl.formatMessage({ id: 'backend.imageName' })}
             ></SealInput.Input>
           </Form.Item>
-          <Form.Item<FormData> name="run_command" rules={[{ required: true }]}>
+          <Form.Item<FormData>
+            name="run_command"
+            rules={[
+              {
+                required: true,
+                message: getRuleMessage('input', 'backend.runCommand')
+              }
+            ]}
+          >
             <SealInput.TextArea
               required
               scaleSize={true}

src/pages/llmodels/forms/index.tsx

@@ -63,6 +63,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
   const [form] = Form.useForm();
   const intl = useIntl();
   const [activeKey, setActiveKey] = React.useState<string[]>([]);
+  const scheduleType = Form.useWatch('scheduleType', form);
 
   const handleSumit = () => {
     form.submit();
@@ -112,6 +113,11 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
   const handleClusterChange = (value: number) => {
     getGPUOptionList({ clusterId: value });
     getBackendOptions({ cluster_id: value });
+    if (scheduleType === ScheduleValueMap.Manual) {
+      form.setFieldsValue({
+        gpu_selector: { gpu_ids: [] }
+      });
+    }
   };
 
   const handleOnValuesChange = async (changedValues: any, allValues: any) => {

src/pages/llmodels/forms/performance.tsx

@@ -1,4 +1,5 @@
 import SealCascader from '@/components/seal-form/seal-cascader';
+import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import TooltipList from '@/components/tooltip-list';
 import useAppUtils from '@/hooks/use-app-utils';
@@ -9,6 +10,7 @@ import GPUCard from '../components/gpu-card';
 import { scheduleList, ScheduleValueMap } from '../config';
 import { backendOptionsMap } from '../config/backend-parameters';
 import { useCatalogFormContext, useFormContext } from '../config/form-context';
+import { FormData } from '../config/types';
 
 const scheduleTypeTips = [
   {
@@ -54,6 +56,28 @@ const Performance: React.FC = () => {
 
   return (
     <>
+      <Form.Item<FormData>
+        name="replicas"
+        rules={[
+          {
+            required: true,
+            message: getRuleMessage('input', 'models.form.replicas')
+          }
+        ]}
+      >
+        <SealInput.Number
+          style={{ width: '100%' }}
+          label={intl.formatMessage({
+            id: 'models.form.replicas'
+          })}
+          required
+          description={intl.formatMessage(
+            { id: 'models.form.replicas.tips' },
+            { api: `${window.location.origin}/v1` }
+          )}
+          min={0}
+        ></SealInput.Number>
+      </Form.Item>
       <Form.Item name="scheduleType">
         <SealSelect
           onChange={handleScheduleTypeChange}
@@ -73,24 +97,7 @@ const Performance: React.FC = () => {
           <Form.Item name={['gpu_selector', 'gpu_count']}>
             <SealSelect
               label={intl.formatMessage({ id: 'models.form.gpuCount' })}
-              options={[
-                {
-                  label: 'Auto',
-                  value: 'auto'
-                },
-                {
-                  label: '1',
-                  value: 1
-                },
-                {
-                  label: '2',
-                  value: 2
-                },
-                {
-                  label: '4',
-                  value: 4
-                }
-              ]}
+              options={[]}
             ></SealSelect>
           </Form.Item>
         </>