From e8ed0425d1d7e78a8f45b565760b9a3502a190da Mon Sep 17 00:00:00 2001 From: ZLY Date: Tue, 2 Dec 2025 11:42:12 +0800 Subject: [PATCH] =?UTF-8?q?feat(componentEnv):=20=E5=AE=B9=E5=99=A8?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=8A=9F=E8=83=BD=E5=A2=9E=E5=BC=BA=E4=B8=8E?= =?UTF-8?q?=E7=BD=91=E7=BB=9C=E6=A8=A1=E5=BC=8F=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/componentDeploy.ts | 5 + src/api/userContainer.ts | 5 + .../componentEnv/containerModal.tsx | 159 +++++++++++------- .../componentEnv/index.tsx | 2 +- 4 files changed, 113 insertions(+), 58 deletions(-) diff --git a/src/api/componentDeploy.ts b/src/api/componentDeploy.ts index aa4952d..22edad3 100644 --- a/src/api/componentDeploy.ts +++ b/src/api/componentDeploy.ts @@ -16,4 +16,9 @@ export function componentOnSale(params) { // 组件下架 export function componentOffSale(params) { return axios.get(`${urlPrefix}/componentDeploy/stop`, { params }); +} + +// 网络模式获取 +export function getNetworkMode(type: string, deployEnvId: string) { + return axios.get(`${urlPrefix}/componentDeployEnv/network/${type}?deployEnvId=${deployEnvId}`); } \ No newline at end of file diff --git a/src/api/userContainer.ts b/src/api/userContainer.ts index 1152b61..d184d31 100644 --- a/src/api/userContainer.ts +++ b/src/api/userContainer.ts @@ -16,4 +16,9 @@ export function startContainer(deployEnvId) { // 根据组件实例ID停止容器 export function stopContainer(deployEnvId) { return axios.get(`${urlPrefix}/userContainer/${deployEnvId}/stop`); +} + +// 根据组件实例ID获取容器数据 +export function getContainer(deployEnvId) { + return axios.get(`${urlPrefix}/userContainer/${deployEnvId}/get`); } \ No newline at end of file diff --git a/src/pages/componentDevelopment/componentEnv/containerModal.tsx b/src/pages/componentDevelopment/componentEnv/containerModal.tsx index 4af7d99..196225f 100644 --- a/src/pages/componentDevelopment/componentEnv/containerModal.tsx +++ b/src/pages/componentDevelopment/componentEnv/containerModal.tsx @@ -1,9 +1,8 @@ import React, { useEffect, useState } from 'react' ; import { Modal, Form, Select, Grid, Slider, Switch, Input, InputNumber, Message } from '@arco-design/web-react'; import EditableTable from '@/components/EditableTable'; -import { createInstance, localStart } from '@/api/componentInstance'; -import { getHostList } from '@/api/componentDeployEnv'; import { containerRegister } from '@/api/userContainer'; +import { getNetworkMode } from '@/api/componentDeploy'; const FormItem = Form.Item; const Option = Select.Option; @@ -33,7 +32,6 @@ const netType = [ value: 'null' } ]; - const portColumns = [ { title: '主机端口', @@ -120,17 +118,12 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) => const [portMappingData, setPortMappingData] = useState([]); // 端口映射数据 const [directoryMountData, setDirectoryMountData] = useState([]); // 目录挂载数据 const [deviceMountData, setDeviceMountData] = useState([]); // 设备挂载数据 + const [networkTypeList, setNetworkTypeList] = useState([]); // 网卡数据列表 + const [selectedNetworkType, setSelectedNetworkType] = useState([]); // 选择的网卡数据 const [loading, setLoading] = useState(false); - const [hostOptions, setHostOptions] = useState([]); // 主机 - - const getHostOptions = async () => { - const res: any = await getHostList({ - type: 'docker-env', - componentBaseId: addItem.componentBaseId - }); - if (res.code === 200) setHostOptions(res.data); - }; + const [currentNetworkCard, setCurrentNetworkCard] = useState(''); // 当前选择的网卡 + const [currentIp, setCurrentIp] = useState(''); // 当前输入的IP // 处理取消 const handleCancel = () => { @@ -139,9 +132,28 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) => setPortMappingData([]); setDirectoryMountData([]); setDeviceMountData([]); + setNetworkTypeList([]); + setSelectedNetworkType([]); + setCurrentNetworkCard(''); + setCurrentIp(''); setVisible(false); }; + const fetchNetworkMode = async (type: string, deployEnvId: string) => { + // 切换网络模式时清除网卡和IP数据 + form.setFieldValue('networkType', undefined); + form.setFieldValue('ip', ''); + setCurrentNetworkCard(''); + setCurrentIp(''); + setSelectedNetworkType([]); + setNetworkTypeList([]); + + const res: any = await getNetworkMode(type, deployEnvId); + if (res.code === 200) { + setNetworkTypeList(res.data); + } + }; + // 处理确认 const handleOk = async () => { try { @@ -151,10 +163,10 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) => // 组装提交数据 const submitData = { ...values, + deployEnvId: addItem.id, portMapping: portMappingData, // 端口映射 directoryMount: directoryMountData, // 目录挂载 deviceMount: deviceMountData, // 设备挂载 - componentBaseId: addItem?.componentBaseId, // 下面是暂时写死的数据, 'restartPolicy': 'always', 'env': [ @@ -166,16 +178,15 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) => ] }; - console.log('提交数据：', submitData); - // TODO: 调用接口提交数据 - // const res = await containerRegister(submitData); - // if (res.code === 200) { - // Message.success('容器配置成功'); - // handleCancel(); - // onSuccess?.(); - // } else { - // Message.error('容器配置失败: ' + res.message); - // } + const res: any = await containerRegister(submitData); + if (res.code === 200) { + Message.success('容器配置成功'); + handleCancel(); + onSuccess?.(); + } + else { + Message.error('容器配置失败: ' + res.message); + } } catch (error) { console.error('表单校验失败：', error); @@ -192,17 +203,31 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) => useEffect(() => { if (visible) { - getHostOptions(); + // 设置表单默认值 + form.setFieldsValue({ + cpuCount: 1, + memory: 2048, + useGpu: false + }); } else { // 关闭时重置表单和数据 form.resetFields(); + setCurrentRunType('local'); setPortMappingData([]); setDirectoryMountData([]); setDeviceMountData([]); + setNetworkTypeList([]); + setSelectedNetworkType([]); + setCurrentNetworkCard(''); + setCurrentIp(''); } }, [visible]); + useEffect(() => { + console.log('selectedNetworkType:', selectedNetworkType); + }, [selectedNetworkType]); + return ( - - - - - + {/**/} + {/* */} + {/* {*/} + {/* // 选择主机后自动设置网络模式为第一个选项（桥接模式）*/} + {/* if (value && netType.length > 0) {*/} + {/* form.setFieldValue('networkMode', netType[0].value);*/} + {/* fetchNetworkMode(netType[0].value, value);*/} + {/* }*/} + {/* }}*/} + {/* >*/} + {/* {hostOptions.map((option, index) => (*/} + {/* */} + {/* ))}*/} + {/* */} + {/* */} + {/**/} @@ -300,9 +328,9 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) => { + setCurrentNetworkCard(value); + form.setFieldValue('networkType', value); + const selectedCard = networkTypeList.find(item => item.name === value); + setSelectedNetworkType(selectedCard ? [selectedCard] : []); + }} > - {runTypes.map((option, index) => ( - ))} @@ -368,6 +404,11 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) => style={{ width: '90%' }} allowClear placeholder="请输入IP" + value={currentIp} + onChange={(value) => { + setCurrentIp(value); + form.setFieldValue('ip', value); + }} onBlur={(e) => { const value = e.target.value; if (value) { @@ -379,7 +420,11 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) => } }} /> -
所属子网: -
+
所属子网: {selectedNetworkType.length > 0 ? selectedNetworkType[0]?.subnet : '-'}
 diff --git a/src/pages/componentDevelopment/componentEnv/index.tsx b/src/pages/componentDevelopment/componentEnv/index.tsx index 8b3fe00..f7201c2 100644 --- a/src/pages/componentDevelopment/componentEnv/index.tsx +++ b/src/pages/componentDevelopment/componentEnv/index.tsx @@ -93,7 +93,7 @@ const ComponentEnv = () => { render: (_, record: any) => ( {record.isEnable === 'NOT_EXIST' && ( -