1

frontend/package-lock.json

@@ -32,6 +32,7 @@
         "@radix-ui/react-label": "^2.1.1",
         "@radix-ui/react-navigation-menu": "^1.2.3",
         "@radix-ui/react-progress": "^1.1.1",
+        "@radix-ui/react-scroll-area": "^1.2.2",
         "@radix-ui/react-select": "^2.1.4",
         "@radix-ui/react-separator": "^1.1.1",
         "@radix-ui/react-slot": "^1.1.1",
@@ -2509,6 +2510,37 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.2.tgz",
+      "integrity": "sha512-EFI1N/S3YxZEW/lJ/H1jY3njlvTd8tBmgKEn4GHi51+aMm94i6NmAJstsm5cu3yJwYqYc93gpCPm21FeAbFk6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-select": {
       "version": "2.1.4",
       "resolved": "https://registry.npmmirror.com/@radix-ui/react-select/-/react-select-2.1.4.tgz",

frontend/src/pages/Deploy/Application/List/components/ApplicationModal.tsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from 'react';
-import type {Application} from '../types';
+import type {Application, RepositoryGroup} from '../types';
 import {DevelopmentLanguageTypeEnum} from '../types';
-import {createApplication, updateApplication} from '../service';
+import {createApplication, updateApplication, getRepositoryGroupList} from '../service';
 import type {ExternalSystemResponse} from '@/pages/Deploy/External/types';
 import {SystemType} from '@/pages/Deploy/External/types';
 import {getExternalSystems} from '@/pages/Deploy/External/service';
@@ -51,9 +51,10 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
     initialValues,
     projectGroupId,
 }) => {
+    const [gitInstances, setGitInstances] = useState<ExternalSystemResponse[]>([]);
+    const [repositoryGroups, setRepositoryGroups] = useState<RepositoryGroup[]>([]);
     const {toast} = useToast();
     const isEdit = !!initialValues?.id;
-    const [gitInstances, setGitInstances] = useState<ExternalSystemResponse[]>([]);
     const [selectedGitInstance, setSelectedGitInstance] = useState<ExternalSystemResponse>();
 
     const form = useForm<ApplicationFormValues>({
@@ -67,6 +68,7 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
             enabled: true,
             sort: 0,
             gitInstanceId: undefined,
+            repositoryGroupId: undefined,
         },
     });
 
@@ -105,6 +107,7 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
                 enabled: initialValues.enabled,
                 sort: initialValues.sort,
                 gitInstanceId: initialValues.gitInstanceId,
+                repositoryGroupId: initialValues.repositoryGroupId,
             });
             const gitInstance = gitInstances.find(instance => instance.id === initialValues.gitInstanceId);
             if (gitInstance) {
@@ -113,12 +116,21 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
         }
     }, [initialValues, form, gitInstances]);
 
-    // 处理Git实例选择
+    // 当选择Git实例时，获取对应的仓库组列表
-    const handleGitInstanceChange = (value: string) => {
+    const handleGitInstanceChange = async (gitInstanceId: number) => {
-        const instance = gitInstances.find(item => item.id === Number(value));
+        try {
-        setSelectedGitInstance(instance);
+            const data = await getRepositoryGroupList(gitInstanceId);
-        // 清空仓库地址
+            setRepositoryGroups(data);
-        form.setValue("repoUrl", "");
+            // 清空已选择的仓库组
+            form.setValue('repositoryGroupId', undefined);
+        } catch (error) {
+            console.error('Failed to fetch repository groups:', error);
+            toast({
+                title: "错误",
+                description: "获取仓库组列表失败",
+                variant: "destructive",
+            });
+        }
     };
 
     const handleSubmit = async (values: ApplicationFormValues) => {
@@ -231,8 +243,8 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
                                     <Select
                                         disabled={isEdit}
                                         onValueChange={(value) => {
-                                            field.onChange(value);
+                                            field.onChange(Number(value));
-                                            handleGitInstanceChange(value);
+                                            handleGitInstanceChange(Number(value));
                                         }}
                                         value={field.value?.toString()}
                                     >
@@ -254,6 +266,35 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
                             )}
                         />
 
+                        <FormField
+                            control={form.control}
+                            name="repositoryGroupId"
+                            render={({field}) => (
+                                <FormItem>
+                                    <FormLabel>代码仓库组</FormLabel>
+                                    <Select
+                                        onValueChange={(value) => field.onChange(Number(value))}
+                                        value={field.value?.toString()}
+                                        disabled={!form.watch('gitInstanceId')}
+                                    >
+                                        <FormControl>
+                                            <SelectTrigger>
+                                                <SelectValue placeholder="请选择代码仓库组"/>
+                                            </SelectTrigger>
+                                        </FormControl>
+                                        <SelectContent>
+                                            {repositoryGroups.map((group) => (
+                                                <SelectItem key={group.id} value={group.id.toString()}>
+                                                    {group.name}
+                                                </SelectItem>
+                                            ))}
+                                        </SelectContent>
+                                    </Select>
+                                    <FormMessage/>
+                                </FormItem>
+                            )}
+                        />
+
                         <FormField
                             control={form.control}
                             name="repoUrl"

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

@@ -12,7 +12,8 @@ export const applicationFormSchema = z.object({
     appCode: z.string().min(1, "请输入应用编码").max(50, "应用编码不能超过50个字符"),
     appName: z.string().min(1, "请输入应用名称").max(50, "应用名称不能超过50个字符"),
     appDesc: z.string().max(200, "应用描述不能超过200个字符").optional(),
-    gitInstanceId: z.string().min(1, "请选择Git实例"),
+    gitInstanceId: z.number().min(1, "请选择Git实例"),
+    repositoryGroupId: z.number().min(1, "请选择代码仓库组"),
     repoUrl: z.string().url("请输入有效的URL地址").min(1, "请输入仓库地址"),
     language: z.nativeEnum(DevelopmentLanguageTypeEnum, {
         required_error: "请选择开发语言",

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

@@ -1,9 +1,10 @@
 import request from '@/utils/request';
-import type { CreateApplicationRequest, UpdateApplicationRequest, Application, ApplicationQuery } from './types';
+import type { CreateApplicationRequest, UpdateApplicationRequest, Application, ApplicationQuery, RepositoryGroup } from './types';
 import type { Page } from '@/types/base';
 import {DevelopmentLanguageType} from "./types";
 
 const BASE_URL = '/api/v1/applications';
+const REPOSITORY_GROUP_URL = '/api/v1/repository-group';
 
 // 创建应用
 export const createApplication = (data: CreateApplicationRequest) => 
@@ -33,5 +34,12 @@ export const getApplicationList = () =>
 export const getApplicationListByCondition = (params?: ApplicationQuery) =>
     request.get<Application[]>(`${BASE_URL}/list`, { params });
 
+// 获取开发语言列表
 export const getDevelopmentLanguages = () =>
     request.get<DevelopmentLanguageType[]>(`${BASE_URL}/development-languages`);
+
+// 获取仓库组列表
+export const getRepositoryGroupList = (externalSystemId: number) =>
+    request.get<RepositoryGroup[]>(`${REPOSITORY_GROUP_URL}/list`, {
+        params: { externalSystemId },
+    });

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

@@ -49,3 +49,18 @@ export interface DevelopmentLanguageType {
     code: string;
     name: string;
 }
+
+export interface RepositoryGroup {
+    id: number;
+    name: string;
+    description?: string;
+    groupId: number;
+    parentId?: number;
+    path: string;
+    externalSystemId: number;
+    avatarUrl?: string;
+    webUrl?: string;
+    visibility?: string;
+    sort?: number;
+    enabled?: boolean;
+}