style: scroller

src/pages/gpu-service/instances/forms/basic.tsx

@@ -4,8 +4,9 @@ import { FormData } from '../config/types';
 
 const Basic = () => {
   return (
-    <div data-field="name">
+    <>
       <Form.Item<FormData>
+        data-field="name"
         name="name"
         rules={[
           {
@@ -19,7 +20,7 @@ const Basic = () => {
       <Form.Item<FormData> name="description">
         <CInput.TextArea label="描述" scaleSize />
       </Form.Item>
-    </div>
+    </>
   );
 };
 

src/pages/gpu-service/instances/forms/index.tsx

@@ -91,7 +91,7 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
         value: TABKeysMap.TEMPLATE,
         label: '实例模板',
         icon: <IconFont type="icon-model" />,
-        field: 'template'
+        field: 'vendor'
       },
       {
         value: TABKeysMap.STORAGE,
@@ -168,8 +168,8 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
         activeKey={activeKey}
         setActiveKey={handleActiveChange}
         segmentedTop={{
-          top: 0,
-          offsetTop: 96
+          top: 40,
+          offsetTop: 130
         }}
         getScrollElementScrollableHeight={getScrollElementScrollableHeight}
       >
@@ -196,7 +196,7 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
                 key: TABKeysMap.TEMPLATE,
                 label: '实例模板',
                 forceRender: true,
-                children: <TemplateBasicForm />
+                children: <TemplateBasicForm page="instance" />
               },
               {
                 key: TABKeysMap.STORAGE,

src/pages/gpu-service/instances/forms/template-overlay.tsx

@@ -1,49 +1,10 @@
 import FormOverlayView from '@/pages/_components/form-overlay-view';
 import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
-import { AutoTooltip, IconFont, TemplateCard } from '@gpustack/core-ui';
 import { Button, Empty, Flex, Input } from 'antd';
 import { useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { mockTemplateData } from '../../templates/config/mock-data';
-import { ListItem as TemplateItem } from '../../templates/config/types';
-
-const TemplateGrid = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-`;
-
-const TemplateContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  color: var(--ant-color-text-secondary);
-
-  .name {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    margin-bottom: 8px;
-    color: var(--ant-color-text);
-    font-weight: 500;
-  }
-
-  .info {
-    display: grid;
-    grid-template-columns: max-content minmax(0, 1fr);
-    gap: 8px;
-    color: var(--ant-color-text-tertiary);
-  }
-
-  .value {
-    color: var(--ant-color-text);
-  }
-
-  .icon {
-    color: var(--ant-color-text-quaternary);
-  }
-`;
+import TemplateSelector from './template-selector';
 
 const DrawerBody = styled.div`
   display: flex;
@@ -51,12 +12,6 @@ const DrawerBody = styled.div`
   gap: 16px;
 `;
 
-interface TemplateSelectorProps {
-  value?: number;
-  onChange?: (value: number) => void;
-  dataList?: TemplateItem[];
-}
-
 interface TemplateOverlayProps {
   open: boolean;
   value?: number;
@@ -65,56 +20,6 @@ interface TemplateOverlayProps {
   onCreate?: () => void;
 }
 
-export const TemplateSelector: React.FC<TemplateSelectorProps> = ({
-  value,
-  onChange,
-  dataList = mockTemplateData
-}) => {
-  return (
-    <TemplateGrid>
-      {dataList.map((item: TemplateItem) => (
-        <TemplateCard
-          key={item.id}
-          clickable
-          ghost
-          hoverable
-          height={102}
-          active={value === item.id}
-          disabled={item.status !== 'enabled'}
-          onClick={() => onChange?.(item.id)}
-        >
-          <TemplateContent>
-            <div className="name">
-              <AutoTooltip ghost minWidth={20}>
-                {item.name}
-              </AutoTooltip>
-              {/* <Tag color={item.status === 'enabled' ? 'success' : 'default'}>
-                {item.status === 'enabled' ? '启用' : '停用'}
-              </Tag> */}
-            </div>
-            <div className="info">
-              <span>
-                <IconFont className="icon" type="icon-model" /> 镜像:
-              </span>
-              <AutoTooltip ghost minWidth={20}>
-                <span className="value">{item.image || '-'}</span>
-              </AutoTooltip>
-            </div>
-            <div className="info">
-              <span>
-                <IconFont className="icon" type="icon-storage-outlined" /> 存储:
-              </span>
-              <span className="value">
-                {item.volume_size_gb ?? '-'} GB {item.volume_mount_path || '-'}
-              </span>
-            </div>
-          </TemplateContent>
-        </TemplateCard>
-      ))}
-    </TemplateGrid>
-  );
-};
-
 const TemplateOverlay: React.FC<TemplateOverlayProps> = ({
   open,
   value,

src/pages/gpu-service/instances/forms/template-selector.tsx

@@ -0,0 +1,97 @@
+import { AutoTooltip, IconFont, TemplateCard } from '@gpustack/core-ui';
+import styled from 'styled-components';
+import { mockTemplateData } from '../../templates/config/mock-data';
+import { ListItem as TemplateItem } from '../../templates/config/types';
+
+const TemplateGrid = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+const TemplateContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  color: var(--ant-color-text-secondary);
+
+  .name {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    margin-bottom: 8px;
+    color: var(--ant-color-text);
+    font-weight: 500;
+  }
+
+  .info {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    gap: 8px;
+    color: var(--ant-color-text-tertiary);
+  }
+
+  .value {
+    color: var(--ant-color-text);
+  }
+
+  .icon {
+    color: var(--ant-color-text-quaternary);
+  }
+`;
+
+interface TemplateSelectorProps {
+  value?: number;
+  onChange?: (value: number) => void;
+  dataList?: TemplateItem[];
+}
+
+const TemplateSelector: React.FC<TemplateSelectorProps> = ({
+  value,
+  onChange,
+  dataList = mockTemplateData
+}) => {
+  return (
+    <TemplateGrid>
+      {dataList.map((item: TemplateItem) => (
+        <TemplateCard
+          key={item.id}
+          clickable
+          ghost
+          hoverable
+          height={102}
+          active={value === item.id}
+          disabled={item.status !== 'enabled'}
+          onClick={() => onChange?.(item.id)}
+        >
+          <TemplateContent>
+            <div className="name">
+              <AutoTooltip ghost minWidth={20}>
+                {item.name}
+              </AutoTooltip>
+            </div>
+            <div className="info">
+              <span>
+                <IconFont className="icon" type="icon-model" /> 镜像:
+              </span>
+              <AutoTooltip ghost minWidth={20}>
+                <span className="value">{item.image || '-'}</span>
+              </AutoTooltip>
+            </div>
+            <div className="info">
+              <span>
+                <IconFont className="icon" type="icon-storage-outlined" /> 存储:
+              </span>
+              <span className="value">
+                {item.volume_size_gb ?? '-'} GB {item.volume_mount_path || '-'}
+              </span>
+            </div>
+          </TemplateContent>
+        </TemplateCard>
+      ))}
+    </TemplateGrid>
+  );
+};
+
+export default TemplateSelector;