fix: template api alignment

2026-05-11 19:49:21 +08:00
parent 7d0cfeff77
commit 7ee1635833
9 changed files with 272 additions and 305 deletions
@@ -0,0 +1,112 @@
+import { Input as CInput, MetadataList } from '@gpustack/core-ui';
+import { Form } from 'antd';
+import { EnvItem as EnvItemType, FormData } from '../config/types';
+
+interface EnvItemProps {
+  item: EnvItemType;
+  index: number;
+  onChange: (item: EnvItemType) => void;
+}
+
+const EnvItem: React.FC<EnvItemProps> = ({ item, onChange }) => {
+  return (
+    <div style={{ display: 'flex', gap: 12, width: '100%' }}>
+      <div style={{ flex: 1 }}>
+        <CInput.Input
+          value={item.name}
+          placeholder="名称"
+          onChange={(e) => {
+            onChange({
+              ...item,
+              name: e.target.value
+            });
+          }}
+          style={{ width: '100%' }}
+        />
+      </div>
+      <div style={{ flex: 1 }}>
+        <CInput.Input
+          value={item.value}
+          placeholder="值"
+          onChange={(e) => {
+            onChange({
+              ...item,
+              value: e.target.value
+            });
+          }}
+          style={{ width: '100%' }}
+        />
+      </div>
+    </div>
+  );
+};
+
+const Env: React.FC = () => {
+  const form = Form.useFormInstance<FormData>();
+  const env = Form.useWatch('env', form) || [];
+
+  const updateEnv = (list: EnvItemType[]) => {
+    form.setFieldValue('env', list);
+  };
+
+  const handleAdd = () => {
+    updateEnv([
+      ...env,
+      {
+        name: '',
+        value: ''
+      }
+    ]);
+  };
+
+  const handleDelete = (index: number) => {
+    const newList = [...env];
+    newList.splice(index, 1);
+    updateEnv(newList);
+  };
+
+  const handleChange = (index: number, item: EnvItemType) => {
+    const newList = [...env];
+    newList[index] = item;
+    updateEnv(newList);
+  };
+
+  return (
+    <Form.Item<FormData>
+      name="env"
+      rules={[
+        {
+          validator: async (_, value) => {
+            if (!value?.length) {
+              return Promise.resolve();
+            }
+            const hasInvalid = value.some((item: EnvItemType) => !item.name);
+            if (hasInvalid) {
+              return Promise.reject(new Error('请填写完整的环境变量'));
+            }
+            return Promise.resolve();
+          }
+        }
+      ]}
+    >
+      <MetadataList
+        dataList={env}
+        btnText="添加环境变量"
+        label="环境变量"
+        onAdd={handleAdd}
+        onDelete={handleDelete}
+      >
+        {(item, index) => (
+          <EnvItem
+            key={index}
+            index={index}
+            item={item}
+            onChange={(data) => handleChange(index, data)}
+          />
+        )}
+      </MetadataList>
+    </Form.Item>
+  );
+};
+
+export default Env;