style: versions config

src/components/collapse-container/index.tsx

@@ -44,7 +44,7 @@ const useStyles = createStyles(({ css, token }) => {
       gap: 8px;
     `,
     subtitle: css`
-      font-size: 12px;
+      font-size: 14px;
       color: ${token.colorTextSecondary};
     `,
     content: css`

src/locales/en-US/backends.ts

@@ -1,3 +1,3 @@
 export default {
-  'backends.title': 'Backends'
+  'backends.title': 'Inference Backends'
 };

src/locales/en-US/menu.ts

@@ -32,5 +32,5 @@ export default {
   'menu.clusterManagement.credentials': 'Cloud Credentials',
   'menu.clusterManagement.clusterDetail': 'Cluster Detail',
   'menu.clusterManagement.clusterCreate': 'Create Cluster',
-  'menu.models.backendsList': 'Backends'
+  'menu.models.backendsList': 'Inference Backends'
 };

src/locales/ja-JP/backends.ts

@@ -1,3 +1,3 @@
 export default {
-  'backends.title': 'Backends'
+  'backends.title': 'Inference Backends'
 };

src/locales/ja-JP/menu.ts

@@ -32,7 +32,7 @@ export default {
   'menu.models.userModels': 'My Models',
   'menu.clusterManagement.clusterDetail': 'Cluster Detail',
   'menu.clusterManagement.clusterCreate': 'Create Cluster',
-  'menu.models.backendsList': 'Backends'
+  'menu.models.backendsList': 'Inference Backends'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -49,5 +49,5 @@ export default {
 // 11. 'menu.models.userModels': 'My Models'
 // 12. 'menu.clusterManagement.clusterDetail': 'Cluster Detail',
 // 13. 'menu.clusterManagement.clusterCreate': 'Create Cluster',
-// 14. 'menu.models.backendsList': 'Backends'
+// 14. 'menu.models.backendsList': 'Inference Backends'
 // ========== End of To-Do List ==========

src/locales/ru-RU/backends.ts

@@ -1,3 +1,3 @@
 export default {
-  'backends.title': 'Backends'
+  'backends.title': 'Inference Backends'
 };

src/locales/ru-RU/menu.ts

@@ -32,9 +32,9 @@ export default {
   'menu.models.userModels': 'Мои модели',
   'menu.clusterManagement.clusterDetail': 'Детали кластера',
   'menu.clusterManagement.clusterCreate': 'Создать кластер',
-  'menu.models.backendsList': 'Backends'
+  'menu.models.backendsList': 'Inference Backends'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
-// 14. 'menu.models.backendsList': 'Backends'
+// 14. 'menu.models.backendsList': 'Inference Backends'
 // ========== End of To-Do List ==========

src/locales/zh-CN/backends.ts

@@ -1,3 +1,3 @@
 export default {
-  'backends.title': '后端'
+  'backends.title': '推理后端'
 };

src/locales/zh-CN/menu.ts

@@ -32,5 +32,5 @@ export default {
   'menu.clusterManagement.credentials': '云凭证',
   'menu.clusterManagement.clusterDetail': '集群详情',
   'menu.clusterManagement.clusterCreate': '创建集群',
-  'menu.models.backendsList': '后端'
+  'menu.models.backendsList': '推理后端'
 };

src/pages/backends/components/add-modal.tsx

@@ -97,8 +97,8 @@ const AddModal: React.FC<AddModalProps> = (props) => {
       const versionConfigs = Object.keys(values.version_configs || {}).map(
         (key) => ({
           version_no: key,
-          image_name: values.version_configs[key].image_name,
+          image_name: values.version_configs?.[key]?.image_name,
-          run_command: values.version_configs[key].run_command,
+          run_command: values.version_configs?.[key]?.run_command,
           is_default: key === values.default_version
         })
       );
@@ -107,10 +107,11 @@ const AddModal: React.FC<AddModalProps> = (props) => {
         values.build_in_version_configs || {}
       ).map((key) => ({
         version_no: key,
-        image_name: values.build_in_version_configs[key].image_name,
+        image_name: values.build_in_version_configs?.[key]?.image_name,
-        run_command: values.build_in_version_configs[key].run_command,
+        run_command: values.build_in_version_configs?.[key]?.run_command,
         is_default: key === values.default_version,
-        backend_list: values.build_in_version_configs[key].backend_list || [],
+        backend_list:
+          values.build_in_version_configs?.[key]?.backend_list || [],
         is_built_in: true
       }));
 
@@ -171,7 +172,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
     >
       <SegmentedHeader>
         <SegmentedInner
-          shape="round"
           onChange={(value) => setActiveKey(value as string)}
           options={[
             {

src/pages/backends/config/schema/create.json

@@ -35,6 +35,13 @@
             "run_command": {
               "type": ["string", "null"],
               "description": "start command"
+            },
+            "backend_list": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              },
+              "description": "backend list"
             }
           },
           "required": ["image_name", "run_command"],

src/pages/backends/config/schema/update-builtin.json

@@ -26,6 +26,13 @@
             "run_command": {
               "type": ["string", "null"],
               "description": "start command"
+            },
+            "backend_list": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              },
+              "description": "backend list"
             }
           },
           "required": ["image_name", "run_command"],

src/pages/backends/config/schema/update-custom.json

@@ -30,6 +30,13 @@
             "run_command": {
               "type": ["string", "null"],
               "description": "start command"
+            },
+            "backend_list": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              },
+              "description": "backend list"
             }
           },
           "required": ["image_name", "run_command"],

src/pages/backends/forms/basic.tsx

@@ -1,3 +1,4 @@
+import ListInput from '@/components/list-input';
 import SealInput from '@/components/seal-form/seal-input';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
@@ -44,8 +45,23 @@ const BasicForm: React.FC<AddModalProps> = ({ action }) => {
         <SealInput.TextArea label="Default Execution Command"></SealInput.TextArea>
       </Form.Item>
 
+      <Form.Item<FormData>
+        name="default_backend_param"
+        rules={[{ required: false }]}
+      >
+        <ListInput
+          dataList={form.getFieldValue('default_backend_param') || []}
+          onChange={(data: string[]) => {
+            form.setFieldValue('default_backend_param', data);
+          }}
+          btnText={'Add Backend Parameter'}
+          label={'Default Backend Parameters'}
+        ></ListInput>
+      </Form.Item>
+
       <Form.Item<FormData> name="description" rules={[{ required: false }]}>
         <SealInput.TextArea
+          scaleSize={true}
           label={intl.formatMessage({ id: 'common.table.description' })}
         ></SealInput.TextArea>
       </Form.Item>

src/pages/backends/forms/index.tsx

@@ -6,7 +6,6 @@ import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
 import { FormData, ListItem } from '../config/types';
 import BasicForm from './basic';
 import BuiltInVersionsForm from './built-in-versions';
-import ParametersForm from './parameters';
 import VersionsForm from './versions-config';
 
 type AddModalProps = {
@@ -72,6 +71,7 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
         onFinishFailed={onFinishFailed}
       >
         <BasicForm action={action}></BasicForm>
+
         <CollapsePanel
           activeKey={activeKey}
           accordion={false}
@@ -86,25 +86,10 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
                     children: <BuiltInVersionsForm></BuiltInVersionsForm>
                   }
                 ]
-              : []),
+              : [])
-            {
-              key: 'version_configs',
-              label: 'Custom Versions',
-              forceRender: true,
-              children: (
-                <VersionsForm
-                  action={action}
-                  currentData={currentData}
-                ></VersionsForm>
-              )
-            },
-            {
-              key: 'parameters',
-              label: 'Default Parameters',
-              children: <ParametersForm action={action}></ParametersForm>
-            }
           ]}
         ></CollapsePanel>
+        <VersionsForm action={action} currentData={currentData}></VersionsForm>
       </Form>
     );
   }

src/pages/backends/forms/versions-config.tsx

@@ -1,3 +1,4 @@
+import CollapsibleContainer from '@/components/collapse-container';
 import SealInput from '@/components/seal-form/seal-input';
 import { PageActionType } from '@/config/types';
 import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
@@ -21,6 +22,14 @@ const ActionWrapper = styled.div`
   margin-top: 24px;
 `;
 
+const Title = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 600;
+  margin-bottom: 8px;
+`;
+
 const Label = styled.div`
   line-height: 1;
   color: var(--ant-color-text-tertiary);
@@ -37,6 +46,7 @@ type AddModalProps = {
 const VersionsForm: React.FC<AddModalProps> = ({ action, currentData }) => {
   const form = Form.useFormInstance();
   const version_configs = Form.useWatch('version_configs', form);
+  const [collapseKey, setCollapseKey] = React.useState<string[]>(['0']);
   const versionList = [
     {
       version_no: '',
@@ -76,6 +86,24 @@ const VersionsForm: React.FC<AddModalProps> = ({ action, currentData }) => {
     }
   };
 
+  const onToggle = (open: boolean, key: string) => {
+    setCollapseKey(open ? [key] : []);
+  };
+
+  const handleAdd = async (add: (defaultValue?: any) => void) => {
+    try {
+      const isValid = await form.validateFields(['version_configs'], {
+        recursive: true
+      });
+      console.log('isValid:', isValid);
+      if (isValid) {
+        add();
+      }
+    } catch (error) {
+      console.log('Validation failed:', error);
+    }
+  };
+
   useEffect(() => {
     const versions = form.getFieldValue('version_configs') || [];
     console.log('versions:', versions);
@@ -90,89 +118,118 @@ const VersionsForm: React.FC<AddModalProps> = ({ action, currentData }) => {
         return (
           <div
             style={{
-              border: '1px solid var(--ant-color-border)',
+              display: 'flex',
-              borderRadius: 'var(--border-radius-base)',
+              flexDirection: 'column',
-              padding: '14px'
+              marginBottom: '24px'
             }}
           >
-            <Label>Custom Versions</Label>
+            <Title>
+              <span>Version Configurations</span>
+              <Button
+                onClick={() => handleAdd(add)}
+                variant="filled"
+                color="default"
+              >
+                <PlusOutlined /> Add Version
+              </Button>
+            </Title>
             {fields.map(({ key, name, ...restField }, index) => (
-              <ItemWrapper key={key}>
+              <>
-                <Box>
+                <CollapsibleContainer
-                  <Form.Item
+                  collapsible={true}
-                    {...restField}
+                  key={key}
-                    name={[name, 'version_no']}
+                  defaultOpen
-                    rules={[{ required: true, message: 'Version is required' }]}
+                  open={collapseKey.includes(String(key))}
-                  >
+                  title={<span>{version_configs[name]?.version_no}</span>}
-                    <SealInput.Input
+                  subtitle={
-                      trim
+                    version_configs[name]?.image_name && (
-                      label="Version"
+                      <span style={{ marginLeft: 20 }}>
-                      required
+                        {version_configs[name]?.image_name}
-                    ></SealInput.Input>
+                      </span>
-                  </Form.Item>
+                    )
-                  <Form.Item
+                  }
-                    {...restField}
+                  onToggle={(open) => onToggle(open, key + '')}
-                    name={[name, 'image_name']}
+                  deleteBtn={false}
-                    rules={[
+                  right={
-                      { required: true, message: 'Image Name is required' }
+                    <div className="flex-center gap-8">
-                    ]}
+                      <span
-                  >
+                        className="flex-center"
-                    <SealInput.Input
+                        onClick={(e) => e.stopPropagation()}
-                      trim
-                      label="Image Name"
-                      required
-                    ></SealInput.Input>
-                  </Form.Item>
-                </Box>
-                <Form.Item name={[name, 'run_command']} {...restField} noStyle>
-                  <SealInput.TextArea label="Execution Command"></SealInput.TextArea>
-                </Form.Item>
-                <ActionWrapper>
-                  <span className="flex-center">
-                    {!currentData?.is_build_in && (
-                      <Form.Item
-                        {...restField}
-                        name={[name, 'is_default']}
-                        valuePropName="checked"
-                        initialValue={false}
-                        noStyle
                       >
-                        <Radio
+                        {!currentData?.is_build_in && (
-                          onChange={(e: any) =>
+                          <Form.Item
-                            handleSetDefaultVersion(e, index)
+                            {...restField}
-                          }
+                            name={[name, 'is_default']}
+                            valuePropName="checked"
+                            initialValue={false}
+                            noStyle
+                          >
+                            <Radio
+                              onChange={(e: any) =>
+                                handleSetDefaultVersion(e, index)
+                              }
+                            >
+                              Default Version
+                            </Radio>
+                          </Form.Item>
+                        )}
+                      </span>
+                      {(fields.length > 1 || currentData?.is_build_in) && (
+                        <Button
+                          size="small"
+                          onClick={() => remove(name)}
+                          shape="circle"
                         >
-                          Set as Default Version
+                          <MinusOutlined />
-                        </Radio>
+                        </Button>
-                      </Form.Item>
+                      )}
-                    )}
+                    </div>
-                  </span>
+                  }
-                  <div className="flex-center gap-16">
+                >
-                    {(fields.length > 1 || currentData?.is_build_in) && (
+                  <Box>
-                      <Button
+                    <Form.Item
-                        size="small"
+                      {...restField}
-                        onClick={() => remove(name)}
+                      name={[name, 'version_no']}
-                        shape="circle"
+                      rules={[
-                      >
+                        { required: true, message: 'Version is required' }
-                        <MinusOutlined />
+                      ]}
-                      </Button>
+                    >
-                    )}
+                      <SealInput.Input
-                  </div>
+                        trim
-                </ActionWrapper>
+                        label="Version"
-                <Divider
+                        required
-                  className="divider"
+                      ></SealInput.Input>
-                  style={{ borderTop: '1px  dashed var(--ant-color-border)' }}
+                    </Form.Item>
-                />
+                    <Form.Item
-              </ItemWrapper>
+                      {...restField}
+                      name={[name, 'image_name']}
+                      rules={[
+                        { required: true, message: 'Image Name is required' }
+                      ]}
+                    >
+                      <SealInput.Input
+                        trim
+                        label="Image Name"
+                        required
+                      ></SealInput.Input>
+                    </Form.Item>
+                  </Box>
+                  <Form.Item
+                    name={[name, 'run_command']}
+                    {...restField}
+                    noStyle
+                  >
+                    <SealInput.TextArea label="Execution Command"></SealInput.TextArea>
+                  </Form.Item>
+                </CollapsibleContainer>
+                {index < fields.length - 1 && (
+                  <Divider
+                    className="divider"
+                    style={{ borderTop: '1px  dashed var(--ant-color-border)' }}
+                  />
+                )}
+              </>
             ))}
-            <Button
-              onClick={() => add()}
-              block
-              variant="filled"
-              color="default"
-            >
-              <PlusOutlined /> Add Version
-            </Button>
           </div>
         );
       }}

src/pages/backends/forms/versions-form.tsx

@@ -0,0 +1,11 @@
+import { Form } from 'antd';
+import React from 'react';
+import VersionsField from './versions-config';
+
+const VersionsForm: React.FC = () => {
+  return (
+    <Form>
+      <VersionsField />
+    </Form>
+  );
+};