From 940c3f0682e9e670f9bd170506dd29c0cf717ae7 Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Mon, 1 Dec 2025 17:52:47 +0800
Subject: [PATCH] =?UTF-8?q?feat(container):=20=E5=AE=8C=E5=96=84=E5=AE=B9?=
 =?UTF-8?q?=E5=99=A8=E9=85=8D=E7=BD=AE=E8=A1=A8=E5=8D=95=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../componentEnv/containerModal.tsx           | 98 +++++++++++++++----
 1 file changed, 81 insertions(+), 17 deletions(-)

diff --git a/src/pages/componentDevelopment/componentEnv/containerModal.tsx b/src/pages/componentDevelopment/componentEnv/containerModal.tsx
index 771026a..4af7d99 100644
--- a/src/pages/componentDevelopment/componentEnv/containerModal.tsx
+++ b/src/pages/componentDevelopment/componentEnv/containerModal.tsx
@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react' ;
-import { Modal, Form, Select, Grid, Slider, Switch, Input, Message } from '@arco-design/web-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';
 
 const FormItem = Form.Item;
 const Option = Select.Option;
@@ -18,16 +19,53 @@ const runTypes = [
   }
 ];
 
+const netType = [
+  {
+    label: '桥接模式',
+    value: 'bridge'
+  },
+  {
+    label: '主机模式',
+    value: 'host'
+  },
+  {
+    label: '禁用网络',
+    value: 'null'
+  }
+];
+
 const portColumns = [
   {
     title: '主机端口',
     dataIndex: 'hostPort',
-    editable: true
+    editable: true,
+    renderEdit: ({ value, onChange }) => (
+      <InputNumber
+        value={value}
+        onChange={onChange}
+        min={1}
+        max={65535}
+        precision={0}
+        placeholder="请输入端口号"
+        style={{ width: '100%' }}
+      />
+    )
   },
   {
     title: '容器端口',
     dataIndex: 'containerPort',
-    editable: true
+    editable: true,
+    renderEdit: ({ value, onChange }) => (
+      <InputNumber
+        value={value}
+        onChange={onChange}
+        min={1}
+        max={65535}
+        precision={0}
+        placeholder="请输入端口号"
+        style={{ width: '100%' }}
+      />
+    )
   },
   {
     title: '备注',
@@ -83,6 +121,7 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
   const [directoryMountData, setDirectoryMountData] = useState([]); // 目录挂载数据
   const [deviceMountData, setDeviceMountData] = useState([]); // 设备挂载数据
   const [loading, setLoading] = useState(false);
+
   const [hostOptions, setHostOptions] = useState([]); // 主机
 
   const getHostOptions = async () => {
@@ -115,13 +154,21 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
         portMapping: portMappingData, // 端口映射
         directoryMount: directoryMountData, // 目录挂载
         deviceMount: deviceMountData, // 设备挂载
-        componentBaseId: addItem?.componentBaseId
+        componentBaseId: addItem?.componentBaseId,
+        // 下面是暂时写死的数据,
+        'restartPolicy': 'always',
+        'env': [
+          'GIT_USER_NAME=component',
+          'GIT_USER_EMAIL=componentl@component.com',
+          'GIT_USERNAME=component',
+          'GIT_PASSWORD=component',
+          'GIT_URL=192.168.5.119:30000'
+        ]
       };
 
       console.log('提交数据：', submitData);
-
       // TODO: 调用接口提交数据
-      // const res = await createContainerConfig(submitData);
+      // const res = await containerRegister(submitData);
       // if (res.code === 200) {
       //   Message.success('容器配置成功');
       //   handleCancel();
@@ -173,7 +220,7 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
             <Grid.Col span={12}>
               <FormItem
                 label="部署环境："
-                field="tags"
+                field="environment"
                 rules={[{ required: true, message: '请选择部署环境' }]}
               >
                 <Select
@@ -191,12 +238,18 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
             <Grid.Col span={12}>
               <FormItem
                 label="主机："
-                field="type"
+                field="deployEnvId"
                 rules={[{ required: true, message: '请选择主机' }]}
               >
                 <Select
                   placeholder="请选择主机"
                   style={{ width: '90%' }}
+                  onChange={(value) => {
+                    // 选择主机后自动设置网络模式为第一个选项（桥接模式）
+                    if (value && netType.length > 0) {
+                      form.setFieldValue('networkMode', netType[0].value);
+                    }
+                  }}
                 >
                   {hostOptions.map((option, index) => (
                     <Option key={option.ip} value={option.id}>
@@ -214,8 +267,7 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
             <Grid.Col span={12}>
               <FormItem
                 label="CPU核数："
-                field="cpuCores"
-                rules={[{ required: true, message: '请选择CPU核数' }]}
+                field="cpuCount"
               >
                 <Slider
                   defaultValue={1}
@@ -240,7 +292,6 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
               <FormItem
                 label="是否使用GPU："
                 field="useGpu"
-                rules={[{ required: true, message: '请选择是否使用GPU' }]}
               >
                 <Switch checkedText="ON" uncheckedText="OFF" />
               </FormItem>
@@ -248,8 +299,7 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
           </Grid.Row>
           <FormItem
             label="最大内存："
-            field="maxMemory"
-            rules={[{ required: true, message: '请设置最大内存' }]}
+            field="memory"
           >
             <Slider
               defaultValue={2048}
@@ -283,7 +333,7 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
                   placeholder="请选择网络模式"
                   style={{ width: '90%' }}
                 >
-                  {runTypes.map((option, index) => (
+                  {netType.map((option, index) => (
                     <Option key={option.value} value={option.value}>
                       {option.label}
                     </Option>
@@ -294,7 +344,7 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
             <Grid.Col span={8}>
               <FormItem
                 label="网卡："
-                field="networkCard"
+                field="networkType"
                 rules={[{ required: true, message: '请选择网卡' }]}
               >
                 <Select
@@ -313,9 +363,23 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
               <FormItem
                 label="IP："
                 field="ip"
-                rules={[{ required: true, message: '请输入IP' }]}
               >
-                <Input style={{ width: '90%' }} allowClear placeholder="请输入IP" />
+                <Input
+                  style={{ width: '90%' }}
+                  allowClear
+                  placeholder="请输入IP"
+                  onBlur={(e) => {
+                    const value = e.target.value;
+                    if (value) {
+                      // IP地址正则表达式
+                      const ipRegex = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+                      if (!ipRegex.test(value)) {
+                        Message.warning('请输入有效的IP地址');
+                      }
+                    }
+                  }}
+                />
+                <div style={{ fontSize: 12, color: '#c0c4cc', marginTop: 10 }}>所属子网: -</div>
               </FormItem>
             </Grid.Col>
           </Grid.Row>