From 6b1e9c6b4c6a6594166ebeac176b5805211e5594 Mon Sep 17 00:00:00 2001
From: dengqichen <dengqichen@iscmtech.com>
Date: Mon, 20 Jan 2025 14:03:13 +0800
Subject: [PATCH] 1

---
 .../List/components/DeploymentConfigModal.tsx | 372 +++++++++---------
 1 file changed, 187 insertions(+), 185 deletions(-)

diff --git a/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx b/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx
index 81640c09..c4e60c77 100644
--- a/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx
+++ b/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx
@@ -138,199 +138,201 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
 
     return (
         <Dialog open={open} onOpenChange={(open) => !open && onCancel()}>
-            <DialogContent className="sm:max-w-[600px] max-h-[80vh] overflow-hidden flex flex-col">
-                <DialogHeader>
+            <DialogContent className="max-w-[800px] h-[75vh]">
+                <DialogHeader className="pb-4">
                     <DialogTitle>部署配置</DialogTitle>
                 </DialogHeader>
                 <Form {...form}>
-                    <form onSubmit={handleSubmit} className="space-y-4 flex-1">
-                        <div className="space-y-4 px-6">
-                            <div className="grid grid-cols-2 gap-4">
-                                <FormField
-                                    control={form.control}
-                                    name="applicationId"
-                                    render={({field}) => (
-                                        <FormItem>
-                                            <FormLabel>应用选择</FormLabel>
-                                            <Select
-                                                onValueChange={(value) => field.onChange(Number(value))}
-                                                value={field.value?.toString()}
-                                            >
-                                                <FormControl>
-                                                    <SelectTrigger>
-                                                        <SelectValue placeholder="请选择应用" />
-                                                    </SelectTrigger>
-                                                </FormControl>
-                                                <SelectContent>
-                                                    {applications.map((app) => (
-                                                        <SelectItem key={app.id} value={String(app.id)}>
-                                                            {app.appName}
-                                                        </SelectItem>
-                                                    ))}
-                                                </SelectContent>
-                                            </Select>
-                                            <FormMessage />
-                                        </FormItem>
-                                    )}
-                                />
-                                <FormField
-                                    control={form.control}
-                                    name="externalSystemId"
-                                    render={({field}) => (
-                                        <FormItem>
-                                            <FormLabel>三方系统</FormLabel>
-                                            <Select
-                                                onValueChange={(value) => handleExternalSystemChange(Number(value))}
-                                                value={field.value?.toString()}
-                                            >
-                                                <FormControl>
-                                                    <SelectTrigger>
-                                                        <SelectValue placeholder="请选择三方系统" />
-                                                    </SelectTrigger>
-                                                </FormControl>
-                                                <SelectContent>
-                                                    {externalSystems.map((system) => (
-                                                        <SelectItem key={system.id} value={String(system.id)}>
-                                                            {system.name}
-                                                        </SelectItem>
-                                                    ))}
-                                                </SelectContent>
-                                            </Select>
-                                            <FormMessage />
-                                        </FormItem>
-                                    )}
-                                />
-                            </div>
-
-                            <Separator className="my-4" />
-
-                            <div className="grid grid-cols-2 gap-4">
-                                <FormField
-                                    control={form.control}
-                                    name="viewId"
-                                    render={({field}) => (
-                                        <FormItem>
-                                            <FormLabel>Jenkins视图选择</FormLabel>
-                                            <Select
-                                                disabled={!form.getValues('externalSystemId')}
-                                                onValueChange={(value) => handleViewChange(Number(value))}
-                                                value={field.value?.toString()}
-                                            >
-                                                <FormControl>
-                                                    <SelectTrigger>
-                                                        <SelectValue placeholder="请选择 View" />
-                                                    </SelectTrigger>
-                                                </FormControl>
-                                                <SelectContent>
-                                                    {jenkinsViews.map((view) => (
-                                                        <SelectItem key={view.id} value={String(view.id)}>
-                                                            {view.viewName}
-                                                        </SelectItem>
-                                                    ))}
-                                                </SelectContent>
-                                            </Select>
-                                            <FormMessage />
-                                        </FormItem>
-                                    )}
-                                />
-                                <FormField
-                                    control={form.control}
-                                    name="jobId"
-                                    render={({field}) => (
-                                        <FormItem>
-                                            <FormLabel>Jenkins任务选择</FormLabel>
-                                            <Select
-                                                disabled={!form.getValues('viewId')}
-                                                onValueChange={(value) => field.onChange(Number(value))}
-                                                value={field.value?.toString()}
-                                            >
-                                                <FormControl>
-                                                    <SelectTrigger>
-                                                        <SelectValue placeholder="请选择 Job" />
-                                                    </SelectTrigger>
-                                                </FormControl>
-                                                <SelectContent>
-                                                    {jenkinsJobs.map((job) => (
-                                                        <SelectItem key={job.id} value={String(job.id)}>
-                                                            {job.jobName}
-                                                        </SelectItem>
-                                                    ))}
-                                                </SelectContent>
-                                            </Select>
-                                            <FormMessage />
-                                        </FormItem>
-                                    )}
-                                />
-                            </div>
-
-                            <Separator className="my-4" />
-
-                            <div className="space-y-4">
-                                <div className="flex items-center justify-between bg-background z-10 py-2">
-                                    <FormLabel>环境变量</FormLabel>
-                                    <Button
-                                        type="button"
-                                        variant="outline"
-                                        size="sm"
-                                        onClick={() => append({key: '', value: ''})}
-                                    >
-                                        <PlusCircle className="h-4 w-4 mr-2" />
-                                        添加变量
-                                    </Button>
-                                </div>
-                                <ScrollArea className="h-[200px] rounded-md border">
-                                    <div className="space-y-4 p-4">
-                                        {fields.map((field, index) => (
-                                            <div key={field.id} className="flex gap-4 items-start">
-                                                <FormField
-                                                    control={form.control}
-                                                    name={`envs.${index}.key`}
-                                                    render={({field}) => (
-                                                        <FormItem className="flex-1">
-                                                            <FormControl>
-                                                                <Input placeholder="变量名" {...field} />
-                                                            </FormControl>
-                                                            <FormMessage />
-                                                        </FormItem>
-                                                    )}
-                                                />
-                                                <FormField
-                                                    control={form.control}
-                                                    name={`envs.${index}.value`}
-                                                    render={({field}) => (
-                                                        <FormItem className="flex-1">
-                                                            <FormControl>
-                                                                <Input placeholder="变量值" {...field} />
-                                                            </FormControl>
-                                                            <FormMessage />
-                                                        </FormItem>
-                                                    )}
-                                                />
-                                                <Button
-                                                    type="button"
-                                                    variant="ghost"
-                                                    size="icon"
-                                                    onClick={() => remove(index)}
-                                                    className="mt-2"
+                    <form onSubmit={handleSubmit} className="space-y-4 flex flex-col h-full">
+                        <ScrollArea className="flex-1 -mx-6">
+                            <div className="px-6 space-y-4">
+                                <div className="grid grid-cols-2 gap-4">
+                                    <FormField
+                                        control={form.control}
+                                        name="applicationId"
+                                        render={({field}) => (
+                                            <FormItem>
+                                                <FormLabel>应用选择</FormLabel>
+                                                <Select
+                                                    onValueChange={(value) => field.onChange(Number(value))}
+                                                    value={field.value?.toString()}
                                                 >
-                                                    <X className="h-4 w-4" />
-                                                </Button>
-                                            </div>
-                                        ))}
+                                                    <FormControl>
+                                                        <SelectTrigger>
+                                                            <SelectValue placeholder="请选择应用" />
+                                                        </SelectTrigger>
+                                                    </FormControl>
+                                                    <SelectContent>
+                                                        {applications.map((app) => (
+                                                            <SelectItem key={app.id} value={String(app.id)}>
+                                                                {app.appName}
+                                                            </SelectItem>
+                                                        ))}
+                                                    </SelectContent>
+                                                </Select>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                    <FormField
+                                        control={form.control}
+                                        name="externalSystemId"
+                                        render={({field}) => (
+                                            <FormItem>
+                                                <FormLabel>三方系统</FormLabel>
+                                                <Select
+                                                    onValueChange={(value) => handleExternalSystemChange(Number(value))}
+                                                    value={field.value?.toString()}
+                                                >
+                                                    <FormControl>
+                                                        <SelectTrigger>
+                                                            <SelectValue placeholder="请选择三方系统" />
+                                                        </SelectTrigger>
+                                                    </FormControl>
+                                                    <SelectContent>
+                                                        {externalSystems.map((system) => (
+                                                            <SelectItem key={system.id} value={String(system.id)}>
+                                                                {system.name}
+                                                            </SelectItem>
+                                                        ))}
+                                                    </SelectContent>
+                                                </Select>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                </div>
+
+                                <Separator className="my-4" />
+
+                                <div className="grid grid-cols-2 gap-4">
+                                    <FormField
+                                        control={form.control}
+                                        name="viewId"
+                                        render={({field}) => (
+                                            <FormItem>
+                                                <FormLabel>Jenkins视图选择</FormLabel>
+                                                <Select
+                                                    disabled={!form.getValues('externalSystemId')}
+                                                    onValueChange={(value) => handleViewChange(Number(value))}
+                                                    value={field.value?.toString()}
+                                                >
+                                                    <FormControl>
+                                                        <SelectTrigger>
+                                                            <SelectValue placeholder="请选择 View" />
+                                                        </SelectTrigger>
+                                                    </FormControl>
+                                                    <SelectContent>
+                                                        {jenkinsViews.map((view) => (
+                                                            <SelectItem key={view.id} value={String(view.id)}>
+                                                                {view.viewName}
+                                                            </SelectItem>
+                                                        ))}
+                                                    </SelectContent>
+                                                </Select>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                    <FormField
+                                        control={form.control}
+                                        name="jobId"
+                                        render={({field}) => (
+                                            <FormItem>
+                                                <FormLabel>Jenkins任务选择</FormLabel>
+                                                <Select
+                                                    disabled={!form.getValues('viewId')}
+                                                    onValueChange={(value) => field.onChange(Number(value))}
+                                                    value={field.value?.toString()}
+                                                >
+                                                    <FormControl>
+                                                        <SelectTrigger>
+                                                            <SelectValue placeholder="请选择 Job" />
+                                                        </SelectTrigger>
+                                                    </FormControl>
+                                                    <SelectContent>
+                                                        {jenkinsJobs.map((job) => (
+                                                            <SelectItem key={job.id} value={String(job.id)}>
+                                                                {job.jobName}
+                                                            </SelectItem>
+                                                        ))}
+                                                    </SelectContent>
+                                                </Select>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                </div>
+
+                                <Separator className="my-4" />
+
+                                <div className="space-y-4">
+                                    <div className="flex items-center justify-between bg-background z-10 py-2">
+                                        <FormLabel>环境变量</FormLabel>
+                                        <Button
+                                            type="button"
+                                            variant="outline"
+                                            size="sm"
+                                            onClick={() => append({key: '', value: ''})}
+                                        >
+                                            <PlusCircle className="h-4 w-4 mr-2" />
+                                            添加变量
+                                        </Button>
                                     </div>
-                                </ScrollArea>
+                                    <ScrollArea className="h-[200px] rounded-md border">
+                                        <div className="space-y-4 p-4">
+                                            {fields.map((field, index) => (
+                                                <div key={field.id} className="flex gap-4 items-start">
+                                                    <FormField
+                                                        control={form.control}
+                                                        name={`envs.${index}.key`}
+                                                        render={({field}) => (
+                                                            <FormItem className="flex-1">
+                                                                <FormControl>
+                                                                    <Input placeholder="变量名" {...field} />
+                                                                </FormControl>
+                                                                <FormMessage />
+                                                            </FormItem>
+                                                        )}
+                                                    />
+                                                    <FormField
+                                                        control={form.control}
+                                                        name={`envs.${index}.value`}
+                                                        render={({field}) => (
+                                                            <FormItem className="flex-1">
+                                                                <FormControl>
+                                                                    <Input placeholder="变量值" {...field} />
+                                                                </FormControl>
+                                                                <FormMessage />
+                                                            </FormItem>
+                                                        )}
+                                                    />
+                                                    <Button
+                                                        type="button"
+                                                        variant="ghost"
+                                                        size="icon"
+                                                        onClick={() => remove(index)}
+                                                        className="mt-2"
+                                                    >
+                                                        <X className="h-4 w-4" />
+                                                    </Button>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    </ScrollArea>
+                                </div>
                             </div>
-                        </div>
+                        </ScrollArea>
+                        <DialogFooter className="flex-shrink-0">
+                            <Button variant="outline" onClick={onCancel}>
+                                取消
+                            </Button>
+                            <Button onClick={form.handleSubmit(handleSubmit)}>
+                                确定
+                            </Button>
+                        </DialogFooter>
                     </form>
                 </Form>
-                <DialogFooter className="flex-shrink-0 px-6 py-4">
-                    <Button variant="outline" onClick={onCancel}>
-                        取消
-                    </Button>
-                    <Button onClick={form.handleSubmit(handleSubmit)}>
-                        确定
-                    </Button>
-                </DialogFooter>
             </DialogContent>
         </Dialog>
     );