113 lines
2.6 KiB
TypeScript
113 lines
2.6 KiB
TypeScript
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;
|