style: scroller

2026-05-11 19:49:21 +08:00
parent e9152e8725
commit 7fa44644fd
6 changed files with 260 additions and 168 deletions
@@ -1,11 +1,15 @@
 import { PageActionType } from '@/config/types';
 import Separator from '@/pages/llmodels/components/separator';
+import { SearchOutlined } from '@ant-design/icons';
 import { ColumnWrapper, GSDrawer, ModalFooter } from '@gpustack/core-ui';
-import { useRef } from 'react';
+import { Empty, Input, Typography } from 'antd';
+import { useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
+import { mockTemplateData } from '../../templates/config/mock-data';
+import { instanceTypeOptions } from '../config';
 import { FormData, ListItem } from '../config/types';
 import GPUServiceInstanceForm from '../forms';
-import { TemplateSelector } from '../forms/template-overlay';
+import TemplateSelector from '../forms/template-selector';
 import InstanceTypeList from './instance-type-list';

 const Container = styled.div`
@@ -21,6 +25,14 @@ const ColWrapper = styled.div`
  min-height: 0;
 `;

+const PanelBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  height: 100%;
+  min-height: 0;
+`;
+
 const FormWrapper = styled.div`
  display: flex;
  flex: 1;
@@ -46,6 +58,42 @@ const AddModal: React.FC<AddModalProps> = ({
  onCancel
 }) => {
  const form = useRef<any>(null);
+  const [instanceTypeId, setInstanceTypeId] = useState<number>();
+  const [templateId, setTemplateId] = useState<number>();
+  const [instanceKeyword, setInstanceKeyword] = useState('');
+  const [templateKeyword, setTemplateKeyword] = useState('');
+
+  const filteredInstanceTypes = useMemo(() => {
+    const keyword = instanceKeyword.trim().toLowerCase();
+    if (!keyword) {
+      return instanceTypeOptions;
+    }
+    return instanceTypeOptions.filter((item) =>
+      [
+        item.name,
+        String(item.gpu_count),
+        String(item.vram),
+        String(item.ram),
+        String(item.vCPU)
+      ].some((text) => text.toLowerCase().includes(keyword))
+    );
+  }, [instanceKeyword]);
+
+  const filteredTemplates = useMemo(() => {
+    const keyword = templateKeyword.trim().toLowerCase();
+    if (!keyword) {
+      return mockTemplateData;
+    }
+    return mockTemplateData.filter((item) =>
+      [
+        item.name,
+        item.image,
+        item.vendor,
+        item.volume_mount_path,
+        String(item.volume_size_gb ?? '')
+      ].some((text) => (text || '').toLowerCase().includes(keyword))
+    );
+  }, [templateKeyword]);

  const handleSubmit = () => {
    form.current?.submit();
@@ -82,13 +130,65 @@ const AddModal: React.FC<AddModalProps> = ({
      <Container>
        <ColWrapper>
          <ColumnWrapper styles={{ container: { paddingBlock: 0 } }}>
-            <InstanceTypeList />
+            <PanelBody>
+              <div
+                style={{
+                  position: 'sticky',
+                  top: 0,
+                  zIndex: 10,
+                  backgroundColor: 'var(--ant-color-bg-elevated)'
+                }}
+              >
+                <Input
+                  allowClear
+                  prefix={<SearchOutlined className="text-tertiary" />}
+                  placeholder="搜索名称、GPU、显存、内存或 vCPU"
+                  value={instanceKeyword}
+                  onChange={(e) => setInstanceKeyword(e.target.value)}
+                />
+              </div>
+              {filteredInstanceTypes.length > 0 ? (
+                <InstanceTypeList
+                  value={instanceTypeId}
+                  dataList={filteredInstanceTypes}
+                  onChange={setInstanceTypeId}
+                />
+              ) : (
+                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+              )}
+            </PanelBody>
          </ColumnWrapper>
          <Separator></Separator>
        </ColWrapper>
        <ColWrapper>
          <ColumnWrapper styles={{ container: { paddingBlock: 0 } }}>
-            <TemplateSelector></TemplateSelector>
+            <PanelBody>
+              <div
+                style={{
+                  position: 'sticky',
+                  top: 0,
+                  zIndex: 10,
+                  backgroundColor: 'var(--ant-color-bg-elevated)'
+                }}
+              >
+                <Input
+                  allowClear
+                  prefix={<SearchOutlined className="text-tertiary" />}
+                  placeholder="搜索模板名称、镜像、厂商或挂载路径"
+                  value={templateKeyword}
+                  onChange={(e) => setTemplateKeyword(e.target.value)}
+                />
+              </div>
+              {filteredTemplates.length > 0 ? (
+                <TemplateSelector
+                  value={templateId}
+                  dataList={filteredTemplates}
+                  onChange={setTemplateId}
+                />
+              ) : (
+                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+              )}
+            </PanelBody>
          </ColumnWrapper>
          <Separator></Separator>
        </ColWrapper>
@@ -107,13 +207,30 @@ const AddModal: React.FC<AddModalProps> = ({
              />
            }
          >
-            <GPUServiceInstanceForm
-              ref={form}
-              action={action}
-              currentData={data}
-              onFinish={onFinish}
-              open={open}
-            />
+            <>
+              <Typography.Title
+                level={3}
+                style={{
+                  fontSize: 14,
+                  paddingTop: 10,
+                  paddingBottom: 16,
+                  margin: 0,
+                  position: 'sticky',
+                  top: 0,
+                  zIndex: 100,
+                  backgroundColor: 'var(--ant-color-bg-elevated)'
+                }}
+              >
+                Configuration
+              </Typography.Title>
+              <GPUServiceInstanceForm
+                ref={form}
+                action={action}
+                currentData={data}
+                onFinish={onFinish}
+                open={open}
+              />
+            </>
          </ColumnWrapper>
        </FormWrapper>
      </Container>
@@ -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>
+    </>
  );
 };

@@ -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,
@@ -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,
@@ -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;
@@ -6,34 +6,36 @@ import {
  Select as SealSelect,
  Textarea
 } from '@gpustack/core-ui';
-import { Form, Select } from 'antd';
+import { Form } from 'antd';
 import { FormData } from '../config/types';
 import Ports from './ports';

-const Basic = () => {
-  const form = Form.useFormInstance<FormData>();
-  const envs = Form.useWatch('env', form);
-  const gpuVendorOptions = Object.values(GPUsConfigs);
+interface BasicProps {
+  page: 'template' | 'instance';
+}

-  const handleEnvChange = (labels: Record<string, any>) => {
-    form.setFieldValue('env', labels);
-  };
+const Basic: React.FC<BasicProps> = ({ page = 'template' }) => {
+  const form = Form.useFormInstance<FormData>();
+  const gpuVendorOptions = Object.values(GPUsConfigs);

  return (
    <>
-      <Form.Item<FormData>
-        name="name"
-        rules={[
-          {
-            required: true,
-            message: '请输入模板名称'
-          }
-        ]}
-      >
-        <CInput.Input label="名称" required />
-      </Form.Item>
+      {page === 'template' && (
+        <Form.Item<FormData>
+          name="name"
+          rules={[
+            {
+              required: true,
+              message: '请输入模板名称'
+            }
+          ]}
+        >
+          <CInput.Input label="名称" required />
+        </Form.Item>
+      )}
      <Form.Item<FormData>
        name="vendor"
+        data-field="vendor"
        rules={[
          {
            required: true,
@@ -41,13 +43,11 @@ const Basic = () => {
          }
        ]}
      >
-        <SealSelect label="适用设备厂商" required>
-          {gpuVendorOptions.map((item) => (
-            <Select.Option value={item.value} key={item.value}>
-              {item.label}
-            </Select.Option>
-          ))}
-        </SealSelect>
+        <SealSelect
+          label="适用设备厂商"
+          required
+          options={[...gpuVendorOptions, { label: 'CPU', value: 'cpu' }]}
+        ></SealSelect>
      </Form.Item>
      <Form.Item<FormData>
        name="image"
@@ -60,17 +60,6 @@ const Basic = () => {
      >
        <CInput.Input label="容器镜像" required />
      </Form.Item>
-      {/* <Form.Item<FormData> name="image_pull_policy">
-        <SealSelect
-          allowClear
-          label="镜像拉取策略"
-          options={[
-            { label: 'IfNotPresent', value: 'IfNotPresent' },
-            { label: 'Always', value: 'Always' },
-            { label: 'Never', value: 'Never' }
-          ]}
-        ></SealSelect>
-      </Form.Item> */}
      <Form.Item<FormData> name="run_command">
        <Textarea
          label="容器启动命令"
@@ -83,26 +72,9 @@ const Basic = () => {
      <Form.Item<FormData> name="boot_disk_size_gb">
        <CInputNumber min={1} precision={0} label="容器启动盘大小 (GB)" />
      </Form.Item>
-      {/* <div style={{ display: 'flex', gap: 16 }}>
-        <div style={{ flex: 1 }}>
-          <Form.Item<FormData> name="volume_size_gb">
-            <CInputNumber min={1} precision={0} label="存储卷大小 (GB)" />
-          </Form.Item>
-        </div>
-        <div style={{ flex: 2 }}>
-          <Form.Item<FormData> name="volume_mount_path">
-            <CInput.Input label="存储卷挂载路径" placeholder="例如：/data" />
-          </Form.Item>
-        </div>
-      </div> */}
      <Ports />
      <Form.Item<FormData> name="env">
-        <LabelSelector
-          label="环境变量"
-          labels={envs || {}}
-          btnText="添加变量"
-          onChange={handleEnvChange}
-        />
+        <LabelSelector label="环境变量" btnText="添加变量" />
      </Form.Item>
    </>
  );