1

frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx

@@ -1,3 +1,5 @@
+import * as z from "zod";
+import { zodResolver } from '@hookform/resolvers/zod';
 import React, {useEffect, useState} from 'react';
 import {
     Dialog,
@@ -53,17 +55,35 @@ interface EnvVariable {
     value: string;
 }
 
-interface FormValues {
+const envKeySchema = z.string()
-    applicationId?: number;
+    .refine(val => {
-    externalSystemId?: number;
+        // 不能为空
-    jenkinsViewId?: number;
+        if (!val) return false;
-    jenkinsJobId?: number;
+        // 不能以数字开头
-    script: string;
+        if (/^\d/.test(val)) return false;
-    envs: {
+        // 不能以符号开头
-        key: string;
+        if (/^[^a-zA-Z]/.test(val)) return false;
-        value: string;
+        // 不能是纯数字
-    }[];
+        if (/^\d+$/.test(val)) return false;
-}
+        // 不能是纯中文
+        if (/^[\u4e00-\u9fa5]+$/.test(val)) return false;
+        // 只允许字母、数字和下划线
+        return /^[a-zA-Z][a-zA-Z0-9_]*$/.test(val);
+    }, "变量名只能以字母开头，且只能包含字母、数字和下划线");
+
+const formSchema = z.object({
+    applicationId: z.number().optional(),
+    externalSystemId: z.number().optional(),
+    jenkinsViewId: z.number().optional(),
+    jenkinsJobId: z.number().optional(),
+    script: z.string(),
+    envs: z.array(z.object({
+        key: envKeySchema,
+        value: z.string()
+    }))
+});
+
+type FormValues = z.infer<typeof formSchema>;
 
 interface DeploymentConfigModalProps {
     open: boolean;
@@ -80,13 +100,14 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
     const [isFullscreen, setIsFullscreen] = useState(false);
     
     const form = useForm<FormValues>({
+        resolver: zodResolver(formSchema),
         defaultValues: {
             applicationId: undefined,
             externalSystemId: undefined,
             jenkinsViewId: undefined,
             jenkinsJobId: undefined,
             script: '',
-            envs: [],
+            envs: []
         }
     });
 
@@ -343,7 +364,16 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
                                             name="script"
                                             render={({field}) => (
                                                 <FormItem className="relative">
-                                                    <FormLabel>部署脚本</FormLabel>
+                                                    <div className="flex items-center justify-between mb-2">
+                                                        <FormLabel>部署脚本</FormLabel>
+                                                        <Button
+                                                            type="button"
+                                                            variant="outline"
+                                                            size="sm"
+                                                        >
+                                                            生成配置
+                                                        </Button>
+                                                    </div>
                                                     <FormControl>
                                                         <div className="relative">
                                                             <Button
@@ -355,14 +385,6 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({open, onCa
                                                             >
                                                                 <Maximize2 className="h-4 w-4"/>
                                                             </Button>
-                                                            <Button
-                                                                type="button"
-                                                                variant="outline"
-                                                                size="sm"
-                                                                className="absolute right-14 top-2 z-10"
-                                                            >
-                                                                生成配置
-                                                            </Button>
                                                             <Editor
                                                                 height="300px"
                                                                 language="groovy"