feat(container): 动态加载容器资源配置

src/api/userContainer.ts

@@ -22,3 +22,8 @@ export function stopContainer(deployEnvId) {
 export function getContainer(deployEnvId) {
   return axios.get(`${urlPrefix}/userContainer/${deployEnvId}/get`);
 }
+
+// 获取容器限制配置
+export function getContainerLimit(deployEnvId) {
+  return axios.get(`${urlPrefix}/userContainer/${deployEnvId}/limits`);
+}

src/pages/componentDevelopment/componentEnv/containerModal.tsx

@@ -1,7 +1,19 @@
-import React, { useEffect, useState } from 'react' ;
+import React, { useEffect, useState, useMemo } from 'react';
-import { Modal, Form, Select, Grid, Slider, Switch, Input, InputNumber, Message } from '@arco-design/web-react';
+import {
+  Modal,
+  Form,
+  Select,
+  Grid,
+  Slider,
+  Switch,
+  Input,
+  InputNumber,
+  Message,
+  Button,
+  Spin
+} from '@arco-design/web-react';
 import EditableTable from '@/components/EditableTable';
-import { containerRegister } from '@/api/userContainer';
+import { containerRegister, getContainerLimit } from '@/api/userContainer';
 import { getNetworkMode } from '@/api/componentDeploy';
 
 const FormItem = Form.Item;
@@ -124,6 +136,12 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
 
   const [currentNetworkCard, setCurrentNetworkCard] = useState(''); // 当前选择的网卡
   const [currentIp, setCurrentIp] = useState(''); // 当前输入的IP
+  const [containerConfig, setContainerConfig] = useState<{
+    maxCpuCores: number,
+    maxMemoryMiB: number
+  }>({ maxCpuCores: 4, maxMemoryMiB: 4096 }); // 容器配置数据
+  const [configLoaded, setConfigLoaded] = useState(false); // 容器配置是否已加载
+  const [configLoading, setConfigLoading] = useState(false); // 容器配置加载中
 
   // 处理取消
   const handleCancel = () => {
@@ -135,6 +153,8 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
     setSelectedNetworkType([]);
     setCurrentNetworkCard('');
     setCurrentIp('');
+    setConfigLoaded(false);
+    setConfigLoading(false);
     setVisible(false);
   };
 
@@ -168,7 +188,7 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
         volumes: directoryMountData, // 目录挂载
         devices: deviceMountData, // 设备挂载
         // 下面是暂时写死的数据,
-        'restartPolicy': 'always',
+        'restartPolicy': 'always'
       };
 
       const res: any = await containerRegister(submitData);
@@ -189,6 +209,51 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
     }
   };
 
+  const getContainerConfig = async () => {
+    setConfigLoading(true);
+    try {
+      const res: any = await getContainerLimit(addItem.id);
+      if (res.code === 200) {
+        setContainerConfig(res.data);
+        setConfigLoaded(true);
+        // 设置表单默认值
+        form.setFieldsValue({
+          cpuCount: 1,
+          memory: 2048,
+          useGpu: false
+        });
+      }
+    } finally {
+      setConfigLoading(false);
+    }
+  };
+
+  // 动态生成CPU核数的marks
+  const cpuMarks = useMemo(() => {
+    const max = containerConfig.maxCpuCores;
+    const marks: Record<number, string> = {};
+    marks[1] = '1核';
+    if (max > 1) marks[max] = `${max}核`;
+    // 中间值不显示文字
+    for (let i = 2; i < max; i++) {
+      marks[i] = '';
+    }
+    return marks;
+  }, [containerConfig.maxCpuCores]);
+
+  // 动态生成内存的marks (按2的幂次方: 1, 2, 4, 8, 16GB)
+  const memoryMarks = useMemo(() => {
+    const max = containerConfig.maxMemoryMiB;
+    const marks: Record<number, string> = {};
+    for (let gb = 2; gb <= 128; gb *= 2) {
+      const mb = gb * 1024;
+      if (mb <= max) {
+        marks[mb] = `${gb}GB`;
+      }
+    }
+    return marks;
+  }, [containerConfig.maxMemoryMiB]);
+
   useEffect(() => {
     if (envType.length > 0) setEnvTypeOptions(envType);
   }, [envType]);
@@ -196,12 +261,7 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
 
   useEffect(() => {
     if (visible) {
-      // 设置表单默认值
+      // 不再自动加载，等用户点击按钮
-      form.setFieldsValue({
-        cpuCount: 1,
-        memory: 2048,
-        useGpu: false
-      });
     }
     else {
       // 关闭时重置表单和数据
@@ -213,6 +273,8 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
       setSelectedNetworkType([]);
       setCurrentNetworkCard('');
       setCurrentIp('');
+      setConfigLoaded(false);
+      setConfigLoading(false);
     }
   }, [visible]);
 
@@ -228,6 +290,27 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
       style={{ width: '80%' }}
     >
       <Form form={form} autoComplete="off" labelCol={{ flex: 'none' }}>
+        {/* 容器资源配置区域 - 需要点击按钮获取 */}
+        {!configLoaded ? (
+          <div style={{
+            textAlign: 'center',
+            padding: '20px 0',
+            marginBottom: 16,
+            background: '#f7f8fa',
+            borderRadius: 4
+          }}>
+            <Button
+              type="primary"
+              loading={configLoading}
+              onClick={getContainerConfig}
+            >
+              获取容器配置
+            </Button>
+            <div style={{ marginTop: 8, color: '#86909c', fontSize: 13 }}>
+              点击按钮获取当前环境的容器资源限制
+            </div>
+          </div>
+        ) : (
           <>
             <Grid.Row gutter={8}>
               <Grid.Col span={12}>
@@ -238,15 +321,10 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
                 >
                   <Slider
                     min={1}
-                  max={4}
+                    max={containerConfig.maxCpuCores}
                     step={1}
                     showTicks={true}
-                  marks={{
+                    marks={cpuMarks}
-                    1: '1核',
-                    2: '',
-                    3: '',
-                    4: '4核'
-                  }}
                     style={{
                       width: '90%',
                       whiteSpace: 'nowrap'
@@ -271,15 +349,10 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
               initialValue={2048}
             >
               <Slider
-              min={64}
+                min={1024}
-              max={4069}
+                max={containerConfig.maxMemoryMiB}
                 step={64}
-              marks={{
+                marks={memoryMarks}
-                64: '64MB',
-                1024: '1GB',
-                2048: '2GB',
-                4069: '4GB'
-              }}
                 showInput={{
                   hideControl: false,
                   suffix: 'MB',
@@ -290,6 +363,10 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
                 style={{ width: '100%' }}
               />
             </FormItem>
+          </>
+        )}
+
+        {/* 以下配置默认展示 */}
         <Grid.Row gutter={8}>
           <Grid.Col span={8}>
             <FormItem
@@ -416,7 +493,6 @@ const ContainerModal = ({ addItem, visible, envType, setVisible, onSuccess }) =>
             }}
           />
         </FormItem>
-        </>
       </Form>
 
     </Modal>