feat: templates, storage

2026-05-11 19:49:21 +08:00
parent 3ae49dc826
commit 7ea7f6666d
52 changed files with 3604 additions and 188 deletions
@@ -0,0 +1,118 @@
+import { InputNumber as CInputNumber, Input, Select } from '@gpustack/core-ui';
+import { Button, Flex, Form, Radio } from 'antd';
+import styled from 'styled-components';
+import { StorageStatusValueMap } from '../../storage/config';
+import { mockStorageData } from '../../storage/config/mock-data';
+import { StorageModeValueMap } from '../config';
+import { FormData } from '../config/types';
+
+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;
+`;
+
+const StorageVolume = () => {
+  const form = Form.useFormInstance<FormData>();
+  const storageMode = Form.useWatch('storage_mode', form);
+
+  return (
+    <FieldBlock data-field="storage">
+      <Flex
+        style={{
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: 6
+        }}
+      >
+        <Form.Item<FormData>
+          name="storage_mode"
+          style={{ marginBottom: 12 }}
+          rules={[
+            {
+              required: true,
+              message: '请选择存储卷'
+            }
+          ]}
+        >
+          <Radio.Group
+            options={[
+              {
+                label: '持久存储',
+                value: StorageModeValueMap.Existing
+              },
+              { label: '临时存储', value: StorageModeValueMap.Temporary }
+            ]}
+          />
+        </Form.Item>
+        <Button type="link" size="small" style={{ marginBottom: 6 }}>
+          添加存储
+        </Button>
+      </Flex>
+
+      {storageMode === StorageModeValueMap.Existing && (
+        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
+          <div style={{ flex: 1 }}>
+            <Form.Item<FormData>
+              name="storage_id"
+              rules={[
+                {
+                  required: true,
+                  message: '请选择预存储卷'
+                }
+              ]}
+            >
+              <Select
+                label="持久卷"
+                required
+                options={mockStorageData.map((item) => ({
+                  label: `${item.name} / ${item.capacity_gb ?? '-'} GB`,
+                  value: item.id,
+                  disabled: item.status !== StorageStatusValueMap.Available
+                }))}
+              />
+            </Form.Item>
+          </div>
+        </div>
+      )}
+
+      {storageMode === StorageModeValueMap.Temporary && (
+        <Form.Item<FormData>
+          name="local_storage_size_gb"
+          rules={[
+            {
+              required: true,
+              message: '请输入本地临时存储容量'
+            }
+          ]}
+        >
+          <CInputNumber min={1} precision={0} label="存储容量 (GB)" required />
+        </Form.Item>
+      )}
+      {/* 挂载路径 */}
+      <Form.Item<FormData>
+        name="mount_path"
+        rules={[
+          {
+            required: true,
+            message: '请输入存储挂载路径'
+          }
+        ]}
+      >
+        <Input.Input
+          label="挂载路径"
+          required
+          placeholder="挂载路径须以 / 开头"
+        />
+      </Form.Item>
+    </FieldBlock>
+  );
+};
+
+export default StorageVolume;