1

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

@@ -1,7 +1,10 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 import type {Application} from '../types';
 import {DevelopmentLanguageTypeEnum} from '../types';
 import {createApplication, updateApplication} from '../service';
+import type {ExternalSystemResponse} from '@/pages/Deploy/External/types';
+import {SystemType} from '@/pages/Deploy/External/types';
+import {getExternalSystems} from '@/pages/Deploy/External/service';
 import {
     Dialog,
     DialogContent,
@@ -50,6 +53,8 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
 }) => {
     const {toast} = useToast();
     const isEdit = !!initialValues?.id;
+    const [gitInstances, setGitInstances] = useState<ExternalSystemResponse[]>([]);
+    const [selectedGitInstance, setSelectedGitInstance] = useState<ExternalSystemResponse>();
 
     const form = useForm<ApplicationFormValues>({
         resolver: zodResolver(applicationFormSchema),
@@ -61,9 +66,34 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
             language: undefined,
             enabled: true,
             sort: 0,
+            gitInstanceId: undefined,
         },
     });
 
+    // 加载Git实例列表
+    const loadGitInstances = async () => {
+        try {
+            const response = await getExternalSystems({
+                type: SystemType.GIT,
+                enabled: true,
+            });
+            if (response?.content) {
+                setGitInstances(response.content);
+            }
+        } catch (error) {
+            toast({
+                variant: "destructive",
+                title: "加载Git实例失败",
+                description: error instanceof Error ? error.message : undefined,
+                duration: 3000,
+            });
+        }
+    };
+
+    useEffect(() => {
+        loadGitInstances();
+    }, []);
+
     useEffect(() => {
         if (initialValues) {
             form.reset({
@@ -74,9 +104,22 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
                 language: initialValues.language,
                 enabled: initialValues.enabled,
                 sort: initialValues.sort,
+                gitInstanceId: initialValues.gitInstanceId,
             });
+            const gitInstance = gitInstances.find(instance => instance.id === initialValues.gitInstanceId);
+            if (gitInstance) {
+                setSelectedGitInstance(gitInstance);
             }
-    }, [initialValues, form]);
+        }
+    }, [initialValues, form, gitInstances]);
+
+    // 处理Git实例选择
+    const handleGitInstanceChange = (value: string) => {
+        const instance = gitInstances.find(item => item.id === Number(value));
+        setSelectedGitInstance(instance);
+        // 清空仓库地址
+        form.setValue("repoUrl", "");
+    };
 
     const handleSubmit = async (values: ApplicationFormValues) => {
         try {
@@ -179,6 +222,38 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
                             )}
                         />
 
+                        <FormField
+                            control={form.control}
+                            name="gitInstanceId"
+                            render={({field}) => (
+                                <FormItem>
+                                    <FormLabel>Git实例</FormLabel>
+                                    <Select
+                                        disabled={isEdit}
+                                        onValueChange={(value) => {
+                                            field.onChange(value);
+                                            handleGitInstanceChange(value);
+                                        }}
+                                        value={field.value?.toString()}
+                                    >
+                                        <FormControl>
+                                            <SelectTrigger>
+                                                <SelectValue placeholder="请选择Git实例"/>
+                                            </SelectTrigger>
+                                        </FormControl>
+                                        <SelectContent>
+                                            {gitInstances.map(instance => (
+                                                <SelectItem key={instance.id} value={instance.id.toString()}>
+                                                    {instance.name}
+                                                </SelectItem>
+                                            ))}
+                                        </SelectContent>
+                                    </Select>
+                                    <FormMessage/>
+                                </FormItem>
+                            )}
+                        />
+
                         <FormField
                             control={form.control}
                             name="repoUrl"
@@ -186,10 +261,13 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
                                 <FormItem>
                                     <FormLabel>仓库地址</FormLabel>
                                     <FormControl>
+                                        <div className="flex gap-2">
                                             <Input
                                                 {...field}
-                                            placeholder="请输入仓库地址"
+                                                placeholder={selectedGitInstance ? `例如: ${selectedGitInstance.url}/your-project.git` : "请先选择Git实例"}
+                                                disabled={!selectedGitInstance}
                                             />
+                                        </div>
                                     </FormControl>
                                     <FormMessage/>
                                 </FormItem>

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

@@ -12,6 +12,7 @@ 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实例"),
     repoUrl: z.string().url("请输入有效的URL地址").min(1, "请输入仓库地址"),
     language: z.nativeEnum(DevelopmentLanguageTypeEnum, {
         required_error: "请选择开发语言",

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

@@ -18,6 +18,7 @@ export interface Application {
     enabled: boolean;
     sort: number;
     projectGroup: ProjectGroup;
+    gitInstanceId?: number;
 }
 
 export interface CreateApplicationRequest {
@@ -29,6 +30,7 @@ export interface CreateApplicationRequest {
     language: DevelopmentLanguageTypeEnum;
     enabled: boolean;
     sort: number;
+    gitInstanceId: number;
 }
 
 export interface UpdateApplicationRequest extends CreateApplicationRequest {