From 0313c0219830e268a81ef8076de03c73a5cd5c10 Mon Sep 17 00:00:00 2001
From: dengqichen <dengqichen@iscmtech.com>
Date: Mon, 20 Jan 2025 16:01:26 +0800
Subject: [PATCH] 1

---
 .../List/components/DeploymentConfigModal.tsx | 87 +++++++++++--------
 1 file changed, 51 insertions(+), 36 deletions(-)

diff --git a/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx b/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx
index f333f619..5d49954b 100644
--- a/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx
+++ b/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx
@@ -379,43 +379,58 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
                                         </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"
-                                                        >
-                                                            <X className="h-4 w-4"/>
-                                                        </Button>
+                                                {fields.length === 0 ? (
+                                                    <div className="h-[160px] flex flex-col items-center justify-center text-center">
+                                                        <div className="w-10 h-10 mb-3 text-muted-foreground/60">
+                                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                                                                <path d="M20 7h-7M14 17H6M8 7H4M4 17h-2M18 17h4M14 7h8"/>
+                                                                <path d="M12 20V4"/>
+                                                            </svg>
+                                                        </div>
+                                                        <div className="text-sm text-muted-foreground/80">暂无环境变量配置</div>
+                                                        <div className="text-xs text-muted-foreground/60 mt-1">
+                                                            点击"添加变量"开始配置
+                                                        </div>
                                                     </div>
-                                                ))}
+                                                ) : (
+                                                    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>