fix: instance api alignment

src/pages/gpu-service/instances/forms/storage-volume.tsx

@@ -1,5 +1,6 @@
 import { InputNumber as CInputNumber, Select } from '@gpustack/core-ui';
 import { Button, Flex, Form, Radio } from 'antd';
+import { useEffect } from 'react';
 import styled from 'styled-components';
 import { mockStorageData } from '../../storage/config/mock-data';
 import { StorageModeValueMap } from '../config';
@@ -9,17 +10,33 @@ const FieldBlock = styled.div`
   margin-bottom: 24px;
 `;
 
-const StorageHeader = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 12px;
-  margin-bottom: 12px;
-`;
+type StorageHolderFields = {
+  storage_mode?: string;
+  storage_name?: string;
+  local_storage_size_gb?: number;
+};
 
 const StorageVolume = () => {
-  const form = Form.useFormInstance<FormData>();
-  const storageMode = Form.useWatch('storage_mode', form);
+  const form = Form.useFormInstance<FormData & StorageHolderFields>();
+  const storageMode = Form.useWatch('storage_mode', form) as string | undefined;
+  const storageName = Form.useWatch('storage_name', form) as string | undefined;
+  const localSize = Form.useWatch('local_storage_size_gb', form) as
+    | number
+    | undefined;
+
+  useEffect(() => {
+    if (storageMode === StorageModeValueMap.Existing) {
+      form.setFieldValue(['spec', 'volume'], {
+        persistent: { name: storageName || '' }
+      });
+    } else if (storageMode === StorageModeValueMap.Temporary) {
+      form.setFieldValue(['spec', 'volume'], {
+        ephemeral: {
+          capacity: localSize ? `${localSize}Gi` : ''
+        }
+      });
+    }
+  }, [form, storageMode, storageName, localSize]);
 
   return (
     <FieldBlock data-field="storage">
@@ -30,7 +47,7 @@ const StorageVolume = () => {
           marginBottom: 6
         }}
       >
-        <Form.Item<FormData>
+        <Form.Item
           name="storage_mode"
           style={{ marginBottom: 12 }}
           rules={[
@@ -42,10 +59,7 @@ const StorageVolume = () => {
         >
           <Radio.Group
             options={[
-              {
-                label: '持久存储',
-                value: StorageModeValueMap.Existing
-              },
+              { label: '持久存储', value: StorageModeValueMap.Existing },
               { label: '临时存储', value: StorageModeValueMap.Temporary }
             ]}
           />
@@ -56,12 +70,12 @@ const StorageVolume = () => {
       </Flex>
 
       {storageMode === StorageModeValueMap.Existing && (
-        <Form.Item<FormData>
-          name="storage_id"
+        <Form.Item
+          name="storage_name"
           rules={[
             {
               required: true,
-              message: '请选择预存储卷'
+              message: '请选择持久卷'
             }
           ]}
         >
@@ -70,14 +84,14 @@ const StorageVolume = () => {
             required
             options={mockStorageData.map((item) => ({
               label: `${item.metadata?.name} / ${item.spec?.capacity ?? '-'}`,
-              value: item.id
+              value: item.metadata?.name
             }))}
           />
         </Form.Item>
       )}
 
       {storageMode === StorageModeValueMap.Temporary && (
-        <Form.Item<FormData>
+        <Form.Item
           name="local_storage_size_gb"
           rules={[
             {