1

frontend/package-lock.json

@@ -25,6 +25,7 @@
         "@logicflow/core": "^2.0.9",
         "@logicflow/extension": "^2.0.13",
         "@monaco-editor/react": "^4.6.0",
+        "@radix-ui/react-alert-dialog": "^1.1.4",
         "@radix-ui/react-avatar": "^1.1.2",
         "@radix-ui/react-dialog": "^1.1.4",
         "@radix-ui/react-dropdown-menu": "^2.1.4",
@@ -1957,6 +1958,33 @@
       "integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==",
       "license": "MIT"
     },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.4.tgz",
+      "integrity": "sha512-A6Kh23qZDLy3PSU4bh2UJZznOrUdHImIXqF8YtUa6CN73f8EOO9XlXSCd9IHyPvIquTaa/kwaSWzZTtUvgXVGw==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dialog": "1.1.4",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-slot": "1.1.1"
+      },
+      "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-arrow": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@radix-ui/react-arrow/-/react-arrow-1.1.1.tgz",

frontend/package.json

@@ -27,6 +27,7 @@
     "@logicflow/core": "^2.0.9",
     "@logicflow/extension": "^2.0.13",
     "@monaco-editor/react": "^4.6.0",
+    "@radix-ui/react-alert-dialog": "^1.1.4",
     "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-dropdown-menu": "^2.1.4",

frontend/src/components/ui/toast.tsx

@@ -14,7 +14,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
       className
     )}
     {...props}

frontend/src/components/ui/use-toast.ts

@@ -6,7 +6,7 @@ import type {
 } from "@/components/ui/toast"
 
 const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
+const TOAST_REMOVE_DELAY = 3000
 
 type ToasterToast = ToastProps & {
   id: string
@@ -90,8 +90,6 @@ export const reducer = (state: State, action: Action): State => {
     case "DISMISS_TOAST": {
       const { toastId } = action
 
-      // ! Side effects ! - This could be extracted into a dismissToast() action,
-      // but I'll keep it here for simplicity
       if (toastId) {
         addToRemoveQueue(toastId)
       } else {

frontend/src/pages/Deploy/ProjectGroup/List/components/ProjectGroupModal.tsx

@@ -14,6 +14,7 @@ import {
     FormItem,
     FormLabel,
     FormDescription,
+    FormMessage,
 } from "@/components/ui/form";
 import {Input} from "@/components/ui/input";
 import {
@@ -90,15 +91,6 @@ const ProjectGroupModal: React.FC<ProjectGroupModalProps> = ({
     }, [form, initialValues, open]);
 
     const handleSubmit = async (values: FormValues) => {
-        if (!form.formState.isValid) {
-            toast({
-                variant: "destructive",
-                title: "错误",
-                description: "请检查表单填写是否正确",
-            });
-            return;
-        }
-
         try {
             setLoading(true);
             if (isEdit) {
@@ -107,23 +99,27 @@ const ProjectGroupModal: React.FC<ProjectGroupModalProps> = ({
                     id: initialValues!.id,
                 });
                 toast({
-                    title: "成功",
+                    title: "操作成功",
                     description: "项目组更新成功",
+                    duration: 3000,
                 });
+                onSuccess();
             } else {
                 await createProjectGroup(values);
                 toast({
-                    title: "成功",
+                    title: "操作成功",
                     description: "项目组创建成功",
+                    duration: 3000,
                 });
+                onSuccess();
             }
-            onSuccess();
         } catch (error) {
             console.error('操作失败:', error);
             toast({
                 variant: "destructive",
-                title: "错误",
+                title: "操作失败",
                 description: error instanceof Error ? error.message : `项目组${isEdit ? '更新' : '创建'}失败`,
+                duration: 3000,
             });
         } finally {
             setLoading(false);
@@ -154,6 +150,7 @@ const ProjectGroupModal: React.FC<ProjectGroupModalProps> = ({
                                     <FormDescription>
                                         项目组的唯一标识，创建后不可修改。只能包含小写字母、数字和连字符
                                     </FormDescription>
+                                    <FormMessage />
                                 </FormItem>
                             )}
                         />
@@ -173,6 +170,7 @@ const ProjectGroupModal: React.FC<ProjectGroupModalProps> = ({
                                     <FormDescription>
                                         项目组的显示名称
                                     </FormDescription>
+                                    <FormMessage />
                                 </FormItem>
                             )}
                         />
@@ -201,6 +199,7 @@ const ProjectGroupModal: React.FC<ProjectGroupModalProps> = ({
                                     <FormDescription>
                                         项目组的类型，创建后不可修改
                                     </FormDescription>
+                                    <FormMessage />
                                 </FormItem>
                             )}
                         />
@@ -220,6 +219,7 @@ const ProjectGroupModal: React.FC<ProjectGroupModalProps> = ({
                                     <FormDescription>
                                         项目组的详细描述信息
                                     </FormDescription>
+                                    <FormMessage />
                                 </FormItem>
                             )}
                         />
@@ -241,6 +241,7 @@ const ProjectGroupModal: React.FC<ProjectGroupModalProps> = ({
                                             onCheckedChange={field.onChange}
                                         />
                                     </FormControl>
+                                    <FormMessage />
                                 </FormItem>
                             )}
                         />
@@ -262,6 +263,7 @@ const ProjectGroupModal: React.FC<ProjectGroupModalProps> = ({
                                     <FormDescription>
                                         数值越小越靠前
                                     </FormDescription>
+                                    <FormMessage />
                                 </FormItem>
                             )}
                         />

frontend/src/pages/Deploy/ProjectGroup/List/index.tsx

@@ -93,8 +93,9 @@ const ProjectGroupList: React.FC = () => {
         } catch (error) {
             toast({
                 variant: "destructive",
-                title: "错误",
+                title: "加载失败",
-                description: "加载数据失败",
+                description: "加载数据失败，请稍后重试",
+                duration: 3000,
             });
         } finally {
             setLoading(false);
@@ -109,15 +110,18 @@ const ProjectGroupList: React.FC = () => {
         try {
             await deleteProjectGroup(id);
             toast({
-                title: "成功",
+                variant: "default",
-                description: "删除成功",
+                title: "操作成功",
+                description: "项目组删除成功",
+                duration: 3000,
             });
             loadData(form.getValues());
         } catch (error) {
             toast({
                 variant: "destructive",
-                title: "错误",
+                title: "操作失败",
-                description: "删除失败",
+                description: "删除项目组失败，请稍后重试",
+                duration: 3000,
             });
         }
     };