fix(style): add backend

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

@@ -196,7 +196,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
         />
       </SegmentedHeader>
       <ColumnWrapper
-        maxHeight={'calc(100vh - 123px)'}
+        maxHeight={'calc(100vh - 140px)'}
         styles={{
           container: {
             paddingTop: 0

src/pages/backends/components/import-yaml.tsx

@@ -137,7 +137,7 @@ const ImportYAML: React.FC<ImportYAMLProps> = forwardRef(
           actionStatus={actionStatus}
           theme={userSettings?.isDarkTheme ? 'vs-dark' : 'vs-light'}
           value={fileContent}
-          height={'calc(100vh - 255px)'}
+          height={'calc(100vh - 260px)'}
           header={renderHeader()}
         ></YamlEditor>
         {error && <ErrorText type="danger">{error}</ErrorText>}

src/pages/backends/config/index.ts

@@ -153,14 +153,14 @@ export const yamlTemplate = `# backend configuration template
 backend_name: my-backend
 description: this is my-backend
 default_version: v0.5.1
-health_check_path: /health
+health_check_path: /v1/models
 default_backend_param:
   - --host
-default_run_command: myBackend serve {model} --port {port}
+default_run_command: myBackend serve {{model}} --port {{port}}
 version_configs:
   v0.0.1:
     image_name: lm/mybackend:latest
-    run_command: myBackend serve {model} --port {port}
+    run_command: myBackend serve {{model}} --port {{port}}
     custom_framework: cuda
   v0.0.2:
     image_name: lm/mybackend:test

src/pages/backends/forms/basic.tsx

@@ -1,5 +1,6 @@
 import ListInput from '@/components/list-input';
 import SealInput from '@/components/seal-form/seal-input';
+import SealTextArea from '@/components/seal-form/seal-textarea';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import useAppUtils from '@/hooks/use-app-utils';
@@ -40,16 +41,27 @@ const BasicForm: React.FC<AddModalProps> = ({ action }) => {
       >
         <SealInput.Input
           trim
+          placeholder={intl.formatMessage(
+            { id: 'common.help.default' },
+            { content: '/v1/models' }
+          )}
           label={intl.formatMessage({ id: 'backend.form.healthCheckPath' })}
         ></SealInput.Input>
       </Form.Item>
 
       <Form.Item name="default_run_command">
-        <SealInput.TextArea
+        <SealTextArea
+          scaleSize={true}
+          alwaysFocus={true}
+          placeholder={intl.formatMessage(
+            { id: 'common.help.eg' },
+            { content: 'vllm serve {{model}} --port {{port}}' }
+          )}
+          autoSize={{ minRows: 2, maxRows: 4 }}
           label={intl.formatMessage({
             id: 'backend.form.defaultExecuteCommand'
           })}
-        ></SealInput.TextArea>
+        ></SealTextArea>
       </Form.Item>
 
       <Form.Item<FormData>

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

@@ -6,7 +6,7 @@ import { PageActionType } from '@/config/types';
 import useAppUtils from '@/hooks/use-app-utils';
 import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Empty, Form, Tag } from 'antd';
+import { Button, Form, Tag } from 'antd';
 import React, { useEffect, useMemo } from 'react';
 import styled from 'styled-components';
 import { frameworks } from '../config';
@@ -172,13 +172,14 @@ const VersionsForm: React.FC<AddModalProps> = ({
             }
             value={defaultVersion}
             notFoundContent={
-              <Empty
-                style={{ marginBlock: 8 }}
-                image={Empty.PRESENTED_IMAGE_SIMPLE}
-                description={intl.formatMessage({
+              <div
+                className="justify-center"
+                style={{ paddingBlock: '8px 7px' }}
+              >
+                {intl.formatMessage({
                   id: 'backend.form.noVersion'
                 })}
-              />
+              </div>
             }
             placeholder={intl.formatMessage({ id: 'backend.version' })}
             options={validVersions}