From e9152e87252fe8578c7373f37874b6ae03ab600a Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Wed, 6 May 2026 09:28:53 +0800
Subject: [PATCH] refactor: add instance modal

---
 .../instances/components/add-modal.tsx        | 103 +++++++++++++-----
 .../gpu-service/instances/forms/index.tsx     |   4 +-
 .../instances/forms/instance-type.tsx         |  13 +--
 .../instances/forms/template-overlay.tsx      |   2 +-
 4 files changed, 84 insertions(+), 38 deletions(-)

diff --git a/src/pages/gpu-service/instances/components/add-modal.tsx b/src/pages/gpu-service/instances/components/add-modal.tsx
index 07d7cdaa..f04842f6 100644
--- a/src/pages/gpu-service/instances/components/add-modal.tsx
+++ b/src/pages/gpu-service/instances/components/add-modal.tsx
@@ -1,9 +1,32 @@
 import { PageActionType } from '@/config/types';
-import { ModalFooter } from '@gpustack/core-ui';
+import Separator from '@/pages/llmodels/components/separator';
+import { ColumnWrapper, GSDrawer, ModalFooter } from '@gpustack/core-ui';
 import { useRef } from 'react';
-import FormDrawer from '../../../_components/form-drawer';
+import styled from 'styled-components';
 import { FormData, ListItem } from '../config/types';
 import GPUServiceInstanceForm from '../forms';
+import { TemplateSelector } from '../forms/template-overlay';
+import InstanceTypeList from './instance-type-list';
+
+const Container = styled.div`
+  display: flex;
+  height: 100%;
+  min-height: 0;
+`;
+
+const ColWrapper = styled.div`
+  display: flex;
+  flex: 1;
+  max-width: 33.33%;
+  min-height: 0;
+`;
+
+const FormWrapper = styled.div`
+  display: flex;
+  flex: 1;
+  max-width: 33.33%;
+  min-height: 0;
+`;
 
 type AddModalProps = {
   title: string;
@@ -40,33 +63,61 @@ const AddModal: React.FC<AddModalProps> = ({
   };
 
   return (
-    <FormDrawer
+    <GSDrawer
       title={title}
       open={open}
-      onCancel={handleCancel}
-      onSubmit={handleSubmit}
-      width={600}
-      push={{ distance: 24 }}
-      footer={
-        <ModalFooter
-          onOk={handleSubmit}
-          onCancel={handleCancel}
-          style={{
-            padding: '16px 24px 8px',
-            display: 'flex',
-            justifyContent: 'flex-end'
-          }}
-        />
-      }
+      onClose={handleCancel}
+      destroyOnHidden={true}
+      closeIcon={false}
+      mask={{
+        closable: false
+      }}
+      keyboard={false}
+      styles={{
+        wrapper: { width: 'calc(100vw - 220px)' },
+        body: { overflowY: 'hidden' }
+      }}
+      footer={false}
     >
-      <GPUServiceInstanceForm
-        ref={form}
-        action={action}
-        currentData={data}
-        onFinish={onFinish}
-        open={open}
-      />
-    </FormDrawer>
+      <Container>
+        <ColWrapper>
+          <ColumnWrapper styles={{ container: { paddingBlock: 0 } }}>
+            <InstanceTypeList />
+          </ColumnWrapper>
+          <Separator></Separator>
+        </ColWrapper>
+        <ColWrapper>
+          <ColumnWrapper styles={{ container: { paddingBlock: 0 } }}>
+            <TemplateSelector></TemplateSelector>
+          </ColumnWrapper>
+          <Separator></Separator>
+        </ColWrapper>
+        <FormWrapper>
+          <ColumnWrapper
+            styles={{ container: { paddingBlock: 0 } }}
+            footer={
+              <ModalFooter
+                onOk={handleSubmit}
+                onCancel={handleCancel}
+                style={{
+                  padding: '16px 24px 8px',
+                  display: 'flex',
+                  justifyContent: 'flex-end'
+                }}
+              />
+            }
+          >
+            <GPUServiceInstanceForm
+              ref={form}
+              action={action}
+              currentData={data}
+              onFinish={onFinish}
+              open={open}
+            />
+          </ColumnWrapper>
+        </FormWrapper>
+      </Container>
+    </GSDrawer>
   );
 };
 
diff --git a/src/pages/gpu-service/instances/forms/index.tsx b/src/pages/gpu-service/instances/forms/index.tsx
index 81b57a0c..9a7fe5df 100644
--- a/src/pages/gpu-service/instances/forms/index.tsx
+++ b/src/pages/gpu-service/instances/forms/index.tsx
@@ -12,12 +12,12 @@ import { Form } from 'antd';
 import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { mockStorageData } from '../../storage/config/mock-data';
 import { mockTemplateData } from '../../templates/config/mock-data';
+import TemplateBasicForm from '../../templates/forms/basic';
 import { instanceTypeOptions, StorageModeValueMap } from '../config';
 import { FormData, ListItem } from '../config/types';
 import Basic from './basic';
 import InstanceTypeFormItem from './instance-type';
 import StorageVolume from './storage-volume';
-import TemplateFormItem from './template';
 
 interface InstanceFormProps {
   ref?: any;
@@ -196,7 +196,7 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
                 key: TABKeysMap.TEMPLATE,
                 label: '实例模板',
                 forceRender: true,
-                children: <TemplateFormItem />
+                children: <TemplateBasicForm />
               },
               {
                 key: TABKeysMap.STORAGE,
diff --git a/src/pages/gpu-service/instances/forms/instance-type.tsx b/src/pages/gpu-service/instances/forms/instance-type.tsx
index 717837a7..52bda0a4 100644
--- a/src/pages/gpu-service/instances/forms/instance-type.tsx
+++ b/src/pages/gpu-service/instances/forms/instance-type.tsx
@@ -3,7 +3,7 @@ import {
   Input as CInput,
   InputNumber as CInputNumber
 } from '@gpustack/core-ui';
-import { Button, Flex, Form, Tag } from 'antd';
+import { Flex, Form } from 'antd';
 import { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { instanceTypeOptions, InstanceTypeStatusValueMap } from '../config';
@@ -68,20 +68,15 @@ const InstanceTypePicker: React.FC<InstanceTypePickerProps> = ({
               <AutoTooltip ghost minWidth={20}>
                 {selected?.name || '请选择实例类型'}
               </AutoTooltip>
-              <Tag
+              {/* <Tag
                 style={{
                   fontWeight: 400,
                   color: 'var(--ant-color-text-tertiary)'
                 }}
               >
                 库存 {selected?.gpu_count}
-              </Tag>
+              </Tag> */}
             </Flex>
-            {/* {selected && (
-              <Tag color="success" style={{ margin: 0 }}>
-                可用
-              </Tag>
-            )} */}
           </SummaryTitle>
           <SummaryMeta>
             <span>显存 {selected?.vram ?? '-'} GiB</span>
@@ -91,7 +86,7 @@ const InstanceTypePicker: React.FC<InstanceTypePickerProps> = ({
             </Flex>
           </SummaryMeta>
         </div>
-        <Button onClick={() => setOpen(true)}>更换</Button>
+        {/* <Button onClick={() => setOpen(true)}>更换</Button> */}
       </SelectedCard>
       <InstanceTypeOverlay
         open={open}
diff --git a/src/pages/gpu-service/instances/forms/template-overlay.tsx b/src/pages/gpu-service/instances/forms/template-overlay.tsx
index 27066ce0..762e1ae0 100644
--- a/src/pages/gpu-service/instances/forms/template-overlay.tsx
+++ b/src/pages/gpu-service/instances/forms/template-overlay.tsx
@@ -65,7 +65,7 @@ interface TemplateOverlayProps {
   onCreate?: () => void;
 }
 
-const TemplateSelector: React.FC<TemplateSelectorProps> = ({
+export const TemplateSelector: React.FC<TemplateSelectorProps> = ({
   value,
   onChange,
   dataList = mockTemplateData