feat: 容器创建支持指定 IP 地址 (#4489)

#### What this PR does / why we need it?

#### Summary of your change

#### Please indicate you've done the following:

- [ ] Made sure tests are passing and test coverage is added if needed.
- [ ] Made sure commit message follow the rule of [Conventional Commits specification](https://www.conventionalcommits.org/).
- [ ] Considered the docs impact and opened a new docs issue or PR with docs changes if needed.

backend/app/dto/container.go

@@ -48,6 +48,8 @@ type ContainerOperate struct {
 	Name            string         `json:"name" validate:"required"`
 	Image           string         `json:"image" validate:"required"`
 	Network         string         `json:"network"`
+	Ipv4            string         `json:"ipv4"`
+	Ipv6            string         `json:"ipv6"`
 	PublishAllPorts bool           `json:"publishAllPorts"`
 	ExposedPorts    []PortHelper   `json:"exposedPorts"`
 	Tty             bool           `json:"tty"`

backend/app/service/container.go

@@ -413,6 +413,14 @@ func (u *ContainerService) ContainerInfo(req dto.OperationWithName) (*dto.Contai
 			break
 		}
 	}
+
+	networkSettings := oldContainer.NetworkSettings
+	bridgeNetworkSettings := networkSettings.Networks[data.Network]
+	ipv4Address := bridgeNetworkSettings.IPAMConfig.IPv4Address
+	ipv6Address := bridgeNetworkSettings.IPAMConfig.IPv6Address
+	data.Ipv4 = ipv4Address
+	data.Ipv6 = ipv6Address
+
 	data.Cmd = oldContainer.Config.Cmd
 	data.OpenStdin = oldContainer.Config.OpenStdin
 	data.Tty = oldContainer.Config.Tty
@@ -985,8 +993,21 @@ func loadConfigInfo(isCreate bool, req dto.ContainerOperate, oldContainer *types
 		case "host", "none", "bridge":
 			hostConf.NetworkMode = container.NetworkMode(req.Network)
 		}
-		networkConf.EndpointsConfig = map[string]*network.EndpointSettings{req.Network: {}}
+		if req.Ipv4 != "" || req.Ipv6 != "" {
+			networkConf.EndpointsConfig = map[string]*network.EndpointSettings{
+				req.Network: {
+					IPAMConfig: &network.EndpointIPAMConfig{
+						IPv4Address: req.Ipv4,
+						IPv6Address: req.Ipv6,
+					},
+				}}
 		} else {
+			networkConf.EndpointsConfig = map[string]*network.EndpointSettings{req.Network: {}}
+		}
+	} else {
+		if req.Ipv4 != "" || req.Ipv6 != "" {
+			return nil, nil, nil, fmt.Errorf("Please set up the network")
+		}
 		networkConf = network.NetworkingConfig{}
 	}
 

frontend/src/api/interface/container.ts

@@ -27,6 +27,8 @@ export namespace Container {
         imageInput: boolean;
         forcePull: boolean;
         network: string;
+        ipv4: string;
+        ipv6: string;
         cmdStr: string;
         entrypointStr: string;
         memoryItem: number;

frontend/src/lang/modules/en.ts

@@ -599,6 +599,8 @@ const message = {
         cpuShare: 'CPU Share',
         cpuShareHelper:
             'The default CPU share for a container is 1024, which can be increased to give the container more CPU time.',
+        inputIpv4: 'Please enter the IPv4 address',
+        inputIpv6: 'Please enter the IPv6 address',
 
         containerFromAppHelper:
             'Detected that this container originates from the app store. App operations may cause current edits to be invalidated.',

frontend/src/lang/modules/tw.ts

@@ -581,6 +581,8 @@ const message = {
         ip: 'IP 地址',
         cpuShare: 'CPU 權重',
         cpuShareHelper: '容器默認份額為 1024 個 CPU，增大可使當前容器獲得更多的 CPU 時間',
+        inputIpv4: '請輸入 IPv4 地址',
+        inputIpv6: '請輸入 IPv6 地址',
 
         containerFromAppHelper: '檢測到該容器來源於應用商店，應用操作可能會導致當前編輯失效',
         containerFromAppHelper1: '在已安裝應用程式列表點擊 `參數` 按鈕，進入編輯頁面即可修改容器名稱。',

frontend/src/lang/modules/zh.ts

@@ -582,6 +582,8 @@ const message = {
         ip: 'IP 地址',
         cpuShare: 'CPU 权重',
         cpuShareHelper: '容器默认份额为 1024 个 CPU，增大可使当前容器获得更多的 CPU 时间',
+        inputIpv4: '请输入 ipv4 地址',
+        inputIpv6: '请输入 ipv6 地址',
 
         containerFromAppHelper: '检测到该容器来源于应用商店，应用操作可能会导致当前编辑失效',
         containerFromAppHelper1: '在已安装应用列表点击 `参数` 按钮，进入编辑页面即可修改容器名称。',

frontend/src/views/container/container/operate/index.vue

@@ -135,6 +135,14 @@
                             />
                         </el-select>
                     </el-form-item>
+
+                    <el-form-item label="ipv4" prop="ipv4">
+                        <el-input v-model="dialogData.rowData!.ipv4" :placeholder="$t('container.inputIpv4')" />
+                    </el-form-item>
+                    <el-form-item label="ipv6" prop="ipv6">
+                        <el-input v-model="dialogData.rowData!.ipv6" :placeholder="$t('container.inputIpv6')" />
+                    </el-form-item>
+
                     <el-form-item :label="$t('container.mount')">
                         <div v-for="(row, index) in dialogData.rowData!.volumes" :key="index" style="width: 100%">
                             <el-card class="mt-1">