1

frontend/src/pages/Deploy/Application/List/index.tsx

@@ -40,7 +40,7 @@ const ApplicationList: React.FC = () => {
     try {
       const data = await getApplicationList();
       // TODO: 这里需要根据selectedProjectId筛选应用
-      setApplications(data.filter(app => app.projectId === selectedProjectGroupId));
+      setApplications(data.filter(app => app.projectGroupId === selectedProjectGroupId));
     } catch (error) {
       message.error('获取应用列表失败');
     } finally {

frontend/src/pages/Deploy/Application/List/types.ts

@@ -2,7 +2,7 @@ import type { BaseQuery } from '@/types/base';
 
 export interface Application {
   id: number;
-  projectId: number;
+  projectGroupId: number;
   appCode: string;
   appName: string;
   appDesc?: string;
@@ -11,7 +11,7 @@ export interface Application {
 }
 
 export interface CreateApplicationRequest {
-  projectId: number;
+  projectGroupId: number;
   appCode: string;
   appName: string;
   appDesc?: string;
@@ -24,7 +24,7 @@ export interface UpdateApplicationRequest extends CreateApplicationRequest {
 }
 
 export interface ApplicationQuery extends BaseQuery {
-  projectId?: number;
+  projectGroupId?: number;
   appCode?: string;
   appName?: string;
   appStatus?: string;

frontend/src/pages/Deploy/ProjectGroup/List/components/ProjectModal.tsx

@@ -1,7 +1,9 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
-import { Modal, Form, Input, InputNumber, Radio, message } from 'antd';
+import { Modal, Form, Input, InputNumber, Radio, message, Select } from 'antd';
 import type { ProjectGroup } from '../types';
+import type { Environment } from '../../../Environment/List/types';
 import { createProjectGroup, updateProjectGroup } from '../service';
+import { getEnvironmentList } from '../../../Environment/List/service';
 
 interface ProjectModalProps {
   visible: boolean;
@@ -17,22 +19,48 @@ const ProjectModal: React.FC<ProjectModalProps> = ({
   initialValues,
 }) => {
   const [form] = Form.useForm();
+  const [environments, setEnvironments] = useState<Environment[]>([]);
   const isEdit = !!initialValues;
 
+  // 获取环境列表
+  useEffect(() => {
+    const fetchEnvironments = async () => {
+      try {
+        const data = await getEnvironmentList();
+        setEnvironments(data);
+      } catch (error) {
+        message.error('获取环境列表失败');
+      }
+    };
+    fetchEnvironments();
+  }, []);
+
   useEffect(() => {
     if (visible && initialValues) {
-      form.setFieldsValue(initialValues);
+      // 设置初始值，包括环境ID列表
+      const envIds = initialValues.environments?.map(env => env.id) || [];
+      form.setFieldsValue({
+        ...initialValues,
+        environments: envIds
+      });
     }
   }, [visible, initialValues, form]);
 
   const handleSubmit = async () => {
     try {
       const values = await form.validateFields();
+      // 转换环境ID数组为对象数组
+      const environments = (values.environments || []).map((id: number) => ({ id }));
+      const submitData = {
+        ...values,
+        environments
+      };
+
       if (isEdit) {
-        await updateProjectGroup({ ...values, id: initialValues.id });
+        await updateProjectGroup({ ...submitData, id: initialValues.id });
         message.success('更新成功');
       } else {
-        await createProjectGroup(values);
+        await createProjectGroup(submitData);
         message.success('创建成功');
       }
       onSuccess();
@@ -99,6 +127,22 @@ const ProjectModal: React.FC<ProjectModalProps> = ({
           </Radio.Group>
         </Form.Item>
 
+        <Form.Item
+          name="environments"
+          label="关联环境"
+          rules={[{ required: true, message: '请选择关联环境' }]}
+        >
+          <Select
+            mode="multiple"
+            placeholder="请选择关联环境"
+            optionFilterProp="label"
+            options={environments.map(env => ({
+              label: env.envName,
+              value: env.id,
+            }))}
+          />
+        </Form.Item>
+
         <Form.Item
           name="sort"
           label="排序"