diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 04e6d5dd9..2a674f658 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "bisheng",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "bisheng",
-      "version": "0.4.0",
+      "version": "0.4.1",
       "dependencies": {
         "@headlessui/react": "^2.0.4",
         "@radix-ui/react-accordion": "^1.2.0",
@@ -38,7 +38,7 @@
         "base64-js": "^1.5.1",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
-        "cmdk": "^1.0.0",
+        "cmdk": "^0.2.1",
         "date-fns": "^3.6.0",
         "dompurify": "^3.1.5",
         "i18next": "^23.12.1",
@@ -3154,12 +3154,11 @@
       }
     },
     "node_modules/cmdk": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/cmdk/-/cmdk-1.0.0.tgz",
-      "integrity": "sha512-gDzVf0a09TvoJ5jnuPvygTB77+XdOSwEmJ88L6XPFPlv7T3RxbP9jgenfylrAMD0+Le1aO0nVjQUzl2g+vjz5Q==",
+      "version": "0.2.1",
+      "resolved": "https://registry.npmmirror.com/cmdk/-/cmdk-0.2.1.tgz",
+      "integrity": "sha512-U6//9lQ6JvT47+6OF6Gi8BvkxYQ8SCRRSKIJkthIMsFsLZRG0cKvTtuTaefyIKMQb8rvvXy0wGdpTNq/jPtm+g==",
       "dependencies": {
-        "@radix-ui/react-dialog": "1.0.5",
-        "@radix-ui/react-primitive": "1.0.3"
+        "@radix-ui/react-dialog": "1.0.0"
       },
       "peerDependencies": {
         "react": "^18.0.0",
@@ -3167,332 +3166,218 @@
       }
     },
     "node_modules/cmdk/node_modules/@radix-ui/primitive": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/@radix-ui/primitive/-/primitive-1.0.1.tgz",
-      "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/primitive/-/primitive-1.0.0.tgz",
+      "integrity": "sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==",
       "dependencies": {
         "@babel/runtime": "^7.13.10"
       }
     },
     "node_modules/cmdk/node_modules/@radix-ui/react-compose-refs": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
-      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz",
+      "integrity": "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==",
       "dependencies": {
         "@babel/runtime": "^7.13.10"
       },
       "peerDependencies": {
-        "@types/react": "*",
         "react": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
       }
     },
     "node_modules/cmdk/node_modules/@radix-ui/react-context": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/@radix-ui/react-context/-/react-context-1.0.1.tgz",
-      "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-context/-/react-context-1.0.0.tgz",
+      "integrity": "sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==",
       "dependencies": {
         "@babel/runtime": "^7.13.10"
       },
       "peerDependencies": {
-        "@types/react": "*",
         "react": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
       }
     },
     "node_modules/cmdk/node_modules/@radix-ui/react-dialog": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmmirror.com/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",
-      "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-dialog/-/react-dialog-1.0.0.tgz",
+      "integrity": "sha512-Yn9YU+QlHYLWwV1XfKiqnGVpWYWk6MeBVM6x/bcoyPvxgjQGoeT35482viLPctTMWoMw0PoHgqfSox7Ig+957Q==",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-dismissable-layer": "1.0.5",
-        "@radix-ui/react-focus-guards": "1.0.1",
-        "@radix-ui/react-focus-scope": "1.0.4",
-        "@radix-ui/react-id": "1.0.1",
-        "@radix-ui/react-portal": "1.0.4",
-        "@radix-ui/react-presence": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-slot": "1.0.2",
-        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-dismissable-layer": "1.0.0",
+        "@radix-ui/react-focus-guards": "1.0.0",
+        "@radix-ui/react-focus-scope": "1.0.0",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-portal": "1.0.0",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.0",
+        "@radix-ui/react-slot": "1.0.0",
+        "@radix-ui/react-use-controllable-state": "1.0.0",
         "aria-hidden": "^1.1.1",
-        "react-remove-scroll": "2.5.5"
+        "react-remove-scroll": "2.5.4"
       },
       "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
         "react": "^16.8 || ^17.0 || ^18.0",
         "react-dom": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
       }
     },
     "node_modules/cmdk/node_modules/@radix-ui/react-dismissable-layer": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmmirror.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz",
-      "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.0.tgz",
+      "integrity": "sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g==",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-use-callback-ref": "1.0.1",
-        "@radix-ui/react-use-escape-keydown": "1.0.3"
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.0",
+        "@radix-ui/react-use-callback-ref": "1.0.0",
+        "@radix-ui/react-use-escape-keydown": "1.0.0"
       },
       "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
         "react": "^16.8 || ^17.0 || ^18.0",
         "react-dom": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
       }
     },
     "node_modules/cmdk/node_modules/@radix-ui/react-focus-guards": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
-      "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz",
+      "integrity": "sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==",
       "dependencies": {
         "@babel/runtime": "^7.13.10"
       },
       "peerDependencies": {
-        "@types/react": "*",
         "react": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
       }
     },
     "node_modules/cmdk/node_modules/@radix-ui/react-focus-scope": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmmirror.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz",
-      "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.0.tgz",
+      "integrity": "sha512-C4SWtsULLGf/2L4oGeIHlvWQx7Rf+7cX/vKOAD2dXW0A1b5QXwi3wWeaEgW+wn+SEVrraMUk05vLU9fZZz5HbQ==",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-use-callback-ref": "1.0.1"
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.0",
+        "@radix-ui/react-use-callback-ref": "1.0.0"
       },
       "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
         "react": "^16.8 || ^17.0 || ^18.0",
         "react-dom": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
       }
     },
     "node_modules/cmdk/node_modules/@radix-ui/react-id": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/@radix-ui/react-id/-/react-id-1.0.1.tgz",
-      "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-id/-/react-id-1.0.0.tgz",
+      "integrity": "sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-layout-effect": "1.0.1"
+        "@radix-ui/react-use-layout-effect": "1.0.0"
       },
       "peerDependencies": {
-        "@types/react": "*",
         "react": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
       }
     },
     "node_modules/cmdk/node_modules/@radix-ui/react-portal": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmmirror.com/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
-      "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-portal/-/react-portal-1.0.0.tgz",
+      "integrity": "sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA==",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-primitive": "1.0.3"
+        "@radix-ui/react-primitive": "1.0.0"
       },
       "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
         "react": "^16.8 || ^17.0 || ^18.0",
         "react-dom": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
       }
     },
     "node_modules/cmdk/node_modules/@radix-ui/react-presence": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/@radix-ui/react-presence/-/react-presence-1.0.1.tgz",
-      "integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-presence/-/react-presence-1.0.0.tgz",
+      "integrity": "sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-use-layout-effect": "1.0.1"
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-use-layout-effect": "1.0.0"
       },
       "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
         "react": "^16.8 || ^17.0 || ^18.0",
         "react-dom": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
       }
     },
     "node_modules/cmdk/node_modules/@radix-ui/react-primitive": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmmirror.com/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
-      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-primitive/-/react-primitive-1.0.0.tgz",
+      "integrity": "sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-slot": "1.0.2"
+        "@radix-ui/react-slot": "1.0.0"
       },
       "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
         "react": "^16.8 || ^17.0 || ^18.0",
         "react-dom": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
       }
     },
     "node_modules/cmdk/node_modules/@radix-ui/react-slot": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
-      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-slot/-/react-slot-1.0.0.tgz",
+      "integrity": "sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.1"
+        "@radix-ui/react-compose-refs": "1.0.0"
       },
       "peerDependencies": {
-        "@types/react": "*",
         "react": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
       }
     },
     "node_modules/cmdk/node_modules/@radix-ui/react-use-callback-ref": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
-      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz",
+      "integrity": "sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==",
       "dependencies": {
         "@babel/runtime": "^7.13.10"
       },
       "peerDependencies": {
-        "@types/react": "*",
         "react": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
       }
     },
     "node_modules/cmdk/node_modules/@radix-ui/react-use-controllable-state": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
-      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz",
+      "integrity": "sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-callback-ref": "1.0.1"
+        "@radix-ui/react-use-callback-ref": "1.0.0"
       },
       "peerDependencies": {
-        "@types/react": "*",
         "react": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
       }
     },
     "node_modules/cmdk/node_modules/@radix-ui/react-use-escape-keydown": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmmirror.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
-      "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.0.tgz",
+      "integrity": "sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-callback-ref": "1.0.1"
+        "@radix-ui/react-use-callback-ref": "1.0.0"
       },
       "peerDependencies": {
-        "@types/react": "*",
         "react": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
       }
     },
     "node_modules/cmdk/node_modules/@radix-ui/react-use-layout-effect": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
-      "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz",
+      "integrity": "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==",
       "dependencies": {
         "@babel/runtime": "^7.13.10"
       },
       "peerDependencies": {
-        "@types/react": "*",
         "react": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
       }
     },
     "node_modules/cmdk/node_modules/react-remove-scroll": {
-      "version": "2.5.5",
-      "resolved": "https://registry.npmmirror.com/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
-      "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+      "version": "2.5.4",
+      "resolved": "https://registry.npmmirror.com/react-remove-scroll/-/react-remove-scroll-2.5.4.tgz",
+      "integrity": "sha512-xGVKJJr0SJGQVirVFAUZ2k1QLyO6m+2fy0l8Qawbp5Jgrv3DeLalrfMNBFSlmz5kriGGzsVBtGVnf4pTKIhhWA==",
       "dependencies": {
         "react-remove-scroll-bar": "^2.3.3",
         "react-style-singleton": "^2.2.1",
diff --git a/src/frontend/package.json b/src/frontend/package.json
index df1c785a7..45806e420 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bisheng",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "private": true,
   "dependencies": {
     "@headlessui/react": "^2.0.4",
@@ -33,7 +33,7 @@
     "base64-js": "^1.5.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "cmdk": "^1.0.0",
+    "cmdk": "^0.2.1",
     "date-fns": "^3.6.0",
     "dompurify": "^3.1.5",
     "i18next": "^23.12.1",
diff --git a/src/frontend/src/components/bs-ui/select/cascader.tsx b/src/frontend/src/components/bs-ui/select/cascader.tsx
index 551d315de..9e12aaa30 100644
--- a/src/frontend/src/components/bs-ui/select/cascader.tsx
+++ b/src/frontend/src/components/bs-ui/select/cascader.tsx
@@ -72,7 +72,7 @@ const Col = (props: {
     onClick: (o: Option, isLeaf: boolean) => void
 }) => {
     const { options, ...opros } = props
-    return <div className="w-36 border-l first:border-none">
+    return <div className="w-36 border-l first:border-none max-h-80 overflow-y-auto">
         {
             options.map(option => <Item {...opros} option={option} key={option.value} />)
         }
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index efc8ac94a..5ba7cdf26 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -9,7 +9,7 @@ export default function InputComponent({
   disabled,
   password,
   type = 'input',
-  maxLength = 100,
+  maxLength = 150,
   editNode = false,
 }: InputComponentType) {
   const [myValue, setMyValue] = useState(value ?? "");
diff --git a/src/frontend/src/controllers/API/assistant.ts b/src/frontend/src/controllers/API/assistant.ts
index 153a33545..74e908cbd 100644
--- a/src/frontend/src/controllers/API/assistant.ts
+++ b/src/frontend/src/controllers/API/assistant.ts
@@ -92,4 +92,9 @@ export const getAssistantToolsApi = async (type: 'all' | 'default' | 'custom'):
 // 修改内置工具配置
 export const updateAssistantToolApi = async (tool_id, extra) => {
     return await axios.post(`/api/v1/assistant/tool/config`, { tool_id, extra })
+}
+
+// 获取自动优化任务taskid
+export const getAssistantOptimizeTaskApi = async (assistant_id, prompt) => {
+    return await axios.post(`/api/v1/assistant/auto/task`, { assistant_id, prompt })
 }
\ No newline at end of file
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 58c33bf95..dac0f2ae5 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -457,8 +457,8 @@ export const getChatsApi = (page) => {
         if (isJsonSerializable(message)) {
           const json = JSON.parse(message);
           if (Array.isArray(json)) return message
-          const chatKey = Object.keys(json)[0]
-          return json[chatKey] || message
+          const chatKey = el.flow_type === 'workflow' ? 'msg' : Object.keys(json)[0]
+          return json[chatKey] || ''
         }
         return message;
       }())
diff --git a/src/frontend/src/controllers/API/pro.ts b/src/frontend/src/controllers/API/pro.ts
index 3d196f505..9971ee468 100644
--- a/src/frontend/src/controllers/API/pro.ts
+++ b/src/frontend/src/controllers/API/pro.ts
@@ -56,6 +56,7 @@ export const saveGroupApi = async (data: any): Promise<any> => {
         adminUserId: admin_user_id,
         groupName: group_name,
         assistant,
+        workFlows,
         skill } = data;
     // const {resourceId, groupId, resourceLimit} = assistant
 
@@ -66,7 +67,8 @@ export const saveGroupApi = async (data: any): Promise<any> => {
         admin_user_id,
         group_name,
         assistant,
-        skill
+        skill,
+        workFlows
     });
 };
 
diff --git a/src/frontend/src/controllers/API/workflow.ts b/src/frontend/src/controllers/API/workflow.ts
index 5a51234a7..b08d9981f 100644
--- a/src/frontend/src/controllers/API/workflow.ts
+++ b/src/frontend/src/controllers/API/workflow.ts
@@ -57,6 +57,19 @@ export const onlineWorkflow = async (flow, status = ''): Promise<any> => {
     return await axios.patch(`/api/v1/workflow/update/${flow.id}`, data);
 }
 
+/**
+ * 单节点运行
+ * 
+ */
+export const runWorkflowNodeApi = async (node_input, data): Promise<any> => {
+    return await axios.post(`/api/v1/workflow/run_once`, {
+        node_input, node_data: {
+            id: data.id,
+            data,
+        }
+    });
+}
+
 
 /**
  * 工作流节点模板
@@ -385,7 +398,7 @@ const workflowTemplate = [
                         ],
                         "step": 1,
                         "value": {
-                            "flag": false,
+                            "flag": true,
                             "value": 50
                         },
                         "help": "是否携带历史对话记录。"
@@ -442,7 +455,7 @@ const workflowTemplate = [
                         "label": "将输出结果展示在会话中",
                         "type": "switch",
                         "help": "一般在问答等场景开启，文档审核、报告生成等场景可关闭。",
-                        "value": false
+                        "value": true
                     },
                     {
                         "key": "output",
@@ -535,6 +548,7 @@ const workflowTemplate = [
                         "label": "检索范围",
                         "global": "self=system_prompt,user_prompt",
                         "type": "knowledge_select_multi",
+                        "placeholder": "请选择知识库",
                         "value": {
                             "type": "knowledge",
                             "value": []
diff --git a/src/frontend/src/controllers/request.ts b/src/frontend/src/controllers/request.ts
index 11ee63d9d..9e898ed37 100644
--- a/src/frontend/src/controllers/request.ts
+++ b/src/frontend/src/controllers/request.ts
@@ -41,7 +41,7 @@ customAxios.interceptors.response.use(function (response) {
         const infoStr = localStorage.getItem(UUR_INFO)
         localStorage.removeItem(UUR_INFO)
         infoStr && location.reload()
-        return Promise.reject(error);
+        return Promise.reject('登录过期,请重新登录');
     }
     // app 弹窗
     toast({
diff --git a/src/frontend/src/pages/BuildPage/CreateApp.tsx b/src/frontend/src/pages/BuildPage/CreateApp.tsx
index 0ddabf250..322c19a10 100644
--- a/src/frontend/src/pages/BuildPage/CreateApp.tsx
+++ b/src/frontend/src/pages/BuildPage/CreateApp.tsx
@@ -107,7 +107,7 @@ ${t('build.exampleTwo')}
                 return '';
             case 'desc':
                 if (AppType.ASSISTANT === appType && value.length < 20) return '为了更好的助手效果，描述需要大于20 个字';
-                if (AppType.FLOW === appType && value.length > 200) return '工作流描述不可超过 200 字';
+                // if (AppType.FLOW === appType && value.length > 200) return '工作流描述不可超过 200 字';
                 return '';
             default:
                 return '';
@@ -223,14 +223,13 @@ ${t('build.exampleTwo')}
                     <div className="mb-6">
                         <label htmlFor="desc" className="bisheng-label">
                             {appType === AppType.ASSISTANT ? '你希望助手的角色是什么，具体完成什么任务？' : '描述'}
-                            <span className="bisheng-tip">*</span>
                         </label>
                         <Textarea
                             id="desc"
                             name="desc"
                             placeholder={appType === AppType.ASSISTANT ? t('build.forExample') : '输入工作流描述'}
                             maxLength={appType === AppType.ASSISTANT ? 1000 : undefined}
-                            className="mt-3 min-h-32"
+                            className="mt-3 h-12 min-h-12 pt-3"
                             value={formData.desc}
                             onChange={handleChange}
                         />
@@ -238,7 +237,7 @@ ${t('build.exampleTwo')}
                     </div>
                 </div>
                 {/* 工作流安全审查 */}
-                {false && appConfig.isPro && <Accordion type="multiple" className="w-full">
+                {appConfig.isPro && <Accordion type="multiple" className="w-full">
                     <AssistantSetting id={'xxx'} type={3} />
                 </Accordion>}
                 <DialogFooter>
@@ -247,7 +246,7 @@ ${t('build.exampleTwo')}
                             {t('cancel')}
                         </Button>
                     </DialogClose>
-                    <Button disabled={!formData.name || !formData.desc || loading} type="submit" className="px-11" onClick={handleSubmit}>
+                    <Button disabled={!formData.name || loading} type="submit" className="px-11" onClick={handleSubmit}>
                         {loading && <LoadIcon className="mr-2" />}
                         {t(isEditMode ? '保存' : '创建')}
                     </Button>
diff --git a/src/frontend/src/pages/BuildPage/appTemps.tsx b/src/frontend/src/pages/BuildPage/appTemps.tsx
index e0933d924..48e64fe47 100644
--- a/src/frontend/src/pages/BuildPage/appTemps.tsx
+++ b/src/frontend/src/pages/BuildPage/appTemps.tsx
@@ -67,7 +67,6 @@ export default function Templates() {
             desc: `是否确认删除该${labelName}模板？`,
             okTxt: t('delete'),
             onOk(next) {
-                // TODO 三类模板删除
                 captureAndAlertRequestErrorHoc(deleteTempApi(id).then((res) => {
                     onChange(res)
                     setTemps(temps.filter((temp, i) => index !== i));
diff --git a/src/frontend/src/pages/BuildPage/apps.tsx b/src/frontend/src/pages/BuildPage/apps.tsx
index 56892a0b9..2f49cce57 100644
--- a/src/frontend/src/pages/BuildPage/apps.tsx
+++ b/src/frontend/src/pages/BuildPage/apps.tsx
@@ -82,7 +82,7 @@ export default function apps() {
             }))
         } else if (data.flow_type === 5) {
             return captureAndAlertRequestErrorHoc(changeAssistantStatusApi(data.id, checked ? 2 : 1)).then(res => {
-                if (res) {
+                if (res === null) {
                     refreshData((item) => item.id === data.id, { status: checked ? 2 : 1 })
                 }
                 return res
@@ -216,7 +216,13 @@ export default function apps() {
                                     user={item.user_name}
                                     currentUser={user}
                                     onClick={() => handleSetting(item)}
-                                    onSwitchClick={() => !item.write && item.status !== 2 && message({ title: t('prompt'), description: t('skills.contactAdmin'), variant: 'warning' })}
+                                    onSwitchClick={() => {
+                                        !item.write && item.status !== 2 && message({
+                                            title: t('prompt'),
+                                            description: `您没有权限上线此${typeCnNames[item.flow_type]}，请联系管理员上线。`,
+                                            variant: 'warning'
+                                        })
+                                    }}
                                     onAddTemp={toggleTempModal}
                                     onCheckedChange={handleCheckedChange}
                                     onDelete={handleDelete}
@@ -237,7 +243,7 @@ export default function apps() {
                                         </LabelShow>
                                     }
                                     footer={
-                                        <Badge className={`absolute py-0 px-1 right-0 bottom-0 rounded-none rounded-br-md  ${item.flow_type === 1 && 'bg-gray-950'} ${item.flow_type === 5 && 'bg-blue-500'}`}>
+                                        <Badge className={`absolute py-0 px-1 right-0 bottom-0 rounded-none rounded-br-md  ${item.flow_type === 1 && 'bg-gray-950'} ${item.flow_type === 5 && 'bg-[#fdb136]'}`}>
                                             {typeCnNames[item.flow_type]}
                                         </Badge>
                                     }
diff --git a/src/frontend/src/pages/BuildPage/assistant/editAssistant/AutoPromptDialog.tsx b/src/frontend/src/pages/BuildPage/assistant/editAssistant/AutoPromptDialog.tsx
index 06960c6e1..75982c6cd 100644
--- a/src/frontend/src/pages/BuildPage/assistant/editAssistant/AutoPromptDialog.tsx
+++ b/src/frontend/src/pages/BuildPage/assistant/editAssistant/AutoPromptDialog.tsx
@@ -4,6 +4,7 @@ import { Button } from "@/components/bs-ui/button";
 import { DialogClose, DialogContent, DialogFooter } from "@/components/bs-ui/dialog";
 import { Textarea } from "@/components/bs-ui/input";
 import { useToast } from "@/components/bs-ui/toast/use-toast";
+import { getAssistantOptimizeTaskApi } from "@/controllers/API/assistant";
 import { useAssistantStore } from "@/store/assistantStore";
 import { AssistantTool } from "@/types/assistant";
 import { FlowType } from "@/types/flow";
@@ -25,9 +26,10 @@ export default function AutoPromptDialog({ onOpenChange }) {
     const { id } = useParams()
     const { assistantState, dispatchAssistant } = useAssistantStore()
 
-    const init = () => {
+    const init = async () => {
         const prompt = areaRef.current?.value || assistantState.prompt
-        const apiUrl = `${__APP_ENV__.BASE_URL}/api/v1/assistant/auto?assistant_id=${id}&prompt=${encodeURIComponent(prompt)}`;
+        const res = await getAssistantOptimizeTaskApi(id, prompt)
+        const apiUrl = `${__APP_ENV__.BASE_URL}/api/v1/assistant/auto?task_id=${res.task_id}`;
         const eventSource = new EventSource(apiUrl);
         if (areaRef.current) areaRef.current.value = ''
         let queue = LoadType.Prompt
@@ -77,12 +79,6 @@ export default function AutoPromptDialog({ onOpenChange }) {
                     variant: 'error',
                     description: ''
                 });
-            } else {
-                toast({
-                    title: '提示词过长,请缩减内容',
-                    variant: 'error',
-                    description: ''
-                });
             }
         };
     }
@@ -178,7 +174,7 @@ export default function AutoPromptDialog({ onOpenChange }) {
             <div className="w-[50%] relative pr-6">
                 <div className="flex items-center justify-between">
                     <span className="text-lg font-semibold leading-none tracking-tight flex">{t('build.portraitOptimization')}{LoadType.Prompt === loading && <LoadIcon className="ml-2 text-gray-600" />}</span>
-                    <Button variant="link" size="sm" onClick={handleReload} disabled={!!loading} ><RefreshCw className="mr-2" />{t('build.retry')}</Button>
+                    <Button variant="link" size="sm" onClick={handleReload} disabled={!!loading} ><RefreshCw size={14} className="mr-2" />{t('build.retry')}</Button>
                 </div>
                 <div className="group flex justify-end mt-2 h-[600px] relative">
                     <Textarea ref={areaRef} className="h-full"
diff --git a/src/frontend/src/pages/BuildPage/assistant/editAssistant/Header.tsx b/src/frontend/src/pages/BuildPage/assistant/editAssistant/Header.tsx
index 5847ab560..a272df1e1 100644
--- a/src/frontend/src/pages/BuildPage/assistant/editAssistant/Header.tsx
+++ b/src/frontend/src/pages/BuildPage/assistant/editAssistant/Header.tsx
@@ -3,6 +3,7 @@ import { AssistantIcon } from "@/components/bs-icons";
 import { Button } from "@/components/bs-ui/button";
 import { Dialog, DialogTrigger } from "@/components/bs-ui/dialog";
 import { useAssistantStore } from "@/store/assistantStore";
+import { OnlineState } from "@/types/flow";
 import { ChevronLeft, SquarePen } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -15,6 +16,7 @@ export default function Header({ onSave, onLine, onTabChange }) {
     const navigate = useNavigate()
 
     const { assistantState, dispatchAssistant } = useAssistantStore()
+    console.log('assistantState :>> ', assistantState);
     {/* 编辑助手 */ }
     const [editShow, setEditShow] = useState(false);
 
@@ -67,7 +69,7 @@ export default function Header({ onSave, onLine, onTabChange }) {
         </div>
         <div className="flex gap-4">
             <Button variant="outline" className="px-10" type="button" onClick={onSave}>{t('build.save')}</Button>
-            <Button type="submit" className="px-10" onClick={onLine}>{t('build.online')}</Button>
+            <Button type="submit" className="px-10" onClick={() => onLine(assistantState.status === OnlineState.OffLine)}>{assistantState.status === OnlineState.OnLine ? '下线' : t('build.online')}</Button>
         </div>
     </div>
 };
diff --git a/src/frontend/src/pages/BuildPage/assistant/editAssistant/index.tsx b/src/frontend/src/pages/BuildPage/assistant/editAssistant/index.tsx
index 330e6ba79..eb90ef2f1 100644
--- a/src/frontend/src/pages/BuildPage/assistant/editAssistant/index.tsx
+++ b/src/frontend/src/pages/BuildPage/assistant/editAssistant/index.tsx
@@ -65,20 +65,25 @@ export default function editAssistant() {
     }
 
     // 上线助手
-    const handleOnline = async () => {
+    const handleOnline = async (online) => {
         if (!handleCheck()) return
-        await handleSave()
-        await captureAndAlertRequestErrorHoc(changeAssistantStatusApi(assistantState.id, 2)).then(res => {
-            if (res === false) return
-            message({
-                title: t('prompt'),
-                variant: 'success',
-                description: t('skills.onlineSuccessful')
+        if (online) {
+            await handleSave()
+            await captureAndAlertRequestErrorHoc(changeAssistantStatusApi(assistantState.id, 2)).then(res => {
+                if (res === false) return
+                message({
+                    title: t('prompt'),
+                    variant: 'success',
+                    description: t('skills.onlineSuccessful')
+                })
             })
-        })
-        setTimeout(() => {
-            navigate('/build')
-        }, 1200);
+            setTimeout(() => {
+                navigate('/build')
+            }, 1200);
+        } else {
+            // TODO 下线接口
+            // 更新 assistantState.status = 1
+        }
     }
 
     // 校验助手数据
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowChat/Chat.tsx b/src/frontend/src/pages/BuildPage/flow/FlowChat/Chat.tsx
index 7c7a2bbc8..118fe4a06 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowChat/Chat.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowChat/Chat.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import ChatInput from "./ChatInput";
 import ChatMessages from "./ChatMessages";
+import { LoadingIcon } from "@/components/bs-icons/loading";
 
 export default function Chat({
     stop = false,
@@ -17,11 +18,13 @@ export default function Chat({
 }) {
     const [loading, setLoading] = useState(autoRun)
 
-    return <div className="relative h-full bs-chat-bg" style={{ backgroundImage: `url(${__APP_ENV__.BASE_URL}/points.png)` }}>
-        <ChatMessages logo={logo} useName={useName} guideWord={guideWord} loadMore={loadMore}></ChatMessages>
-        <ChatInput autoRun={autoRun} clear={clear} form={form} wsUrl={wsUrl} inputForm={inputForm} onBeforSend={onBeforSend} onLoad={() => setLoading(false)} ></ChatInput>
+    return <div className="h-full bs-chat-bg px-4" style={{ backgroundImage: `url(${__APP_ENV__.BASE_URL}/points.png)` }}>
+        <div className="relative h-full">
+            <ChatMessages logo={logo} useName={useName} guideWord={guideWord} loadMore={loadMore}></ChatMessages>
+            <ChatInput autoRun={autoRun} clear={clear} form={form} wsUrl={wsUrl} inputForm={inputForm} onBeforSend={onBeforSend} onLoad={() => setLoading(false)} ></ChatInput>
+        </div>
         {loading && <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-primary/5 z-10">
-            <img className="w-[138px]" src="/application-start-logo.png" alt="" />
+            <LoadingIcon className="size-24" />
         </div>}
     </div>
 };
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowChat/ChatPane.tsx b/src/frontend/src/pages/BuildPage/flow/FlowChat/ChatPane.tsx
index 448ca8ed9..35d326c8a 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowChat/ChatPane.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowChat/ChatPane.tsx
@@ -55,6 +55,7 @@ export default function ChatPane({ autoRun = false, chatId, flow, wsUrl = '' }:
 
         return {
             action,
+            flow_id: flow.id,
             data: flow
         }
     }
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowChat/ChatTest.tsx b/src/frontend/src/pages/BuildPage/flow/FlowChat/ChatTest.tsx
index 404844e0a..ebdcdc0f1 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowChat/ChatTest.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowChat/ChatTest.tsx
@@ -61,7 +61,7 @@ export const ChatTest = forwardRef((props, ref) => {
                 ><X /></Button>
             </div>
         </div>
-        <div className={`h-[calc(100vh-28px)] overflow-y-auto px-4 ${small ? 'hidden' : ''}`}>
+        <div className={`h-[calc(100vh-28px)] relative overflow-y-auto ${small ? 'hidden' : ''}`}>
             <ChatPane autoRun chatId={chatId} flow={flow} wsUrl={`${host}${__APP_ENV__.BASE_URL}/api/v1/workflow/chat/${flow?.id}`} />
         </div>
     </div>
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowChat/InputForm.tsx b/src/frontend/src/pages/BuildPage/flow/FlowChat/InputForm.tsx
index 96e72bd3f..d185487c8 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowChat/InputForm.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowChat/InputForm.tsx
@@ -1,5 +1,6 @@
 import { Button } from "@/components/bs-ui/button";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/bs-ui/select";
+import { useToast } from "@/components/bs-ui/toast/use-toast";
 import InputComponent from "@/components/inputComponent";
 import InputFileComponent from "@/components/inputFileComponent";
 import { WorkflowNodeParam } from "@/types/flow";
@@ -28,16 +29,28 @@ const InputForm = ({ data, onSubmit }: { data: WorkflowNodeParam, onSubmit: (dat
         formDataRef.current[item.key].fileName = fileName
     }
 
+    const { message } = useToast()
     const submit = () => {
         const valuesObject = {}
         let stringObject = ""
+        const errors = []
 
         Object.keys(formDataRef.current).forEach((key: string) => {
-            const item = formDataRef.current[key]
-            valuesObject[key] = item.value
-            stringObject += `${item.label}:${item.type === FormItemType.File ? item.fileName : item.value}\n`
+            const fieldData = formDataRef.current[key]
+            const required = data.value.find(item => item.key === key).required
+            if (required && !fieldData.value) {
+                errors.push(`${fieldData.label} 为必填项，不能为空。`)
+            }
+            valuesObject[key] = fieldData.value
+            stringObject += `${fieldData.label}:${fieldData.type === FormItemType.File ? fieldData.fileName : fieldData.value}\n`
         })
 
+        if (errors.length) {
+            return message({
+                description: errors,
+                variant: 'warning'
+            })
+        }
         onSubmit([valuesObject, stringObject])
     }
 
@@ -45,10 +58,11 @@ const InputForm = ({ data, onSubmit }: { data: WorkflowNodeParam, onSubmit: (dat
         <div className="max-h-[520px] overflow-y-auto">
             {
                 data.value.map((item, i) => (
-                    <div key={item.id} className="w-full text-sm">
+                    <div key={item.id} className="w-full text-sm bisheng-label">
+                        {item.required && <span className="text-red-500">*</span>}
                         {item.value}
                         {/* <span className="text-status-red">{item.required ? " *" : ""}</span> */}
-                        <div className="mt-2">
+                        <div className="mb-2">
                             {(() => {
                                 switch (item.type) {
                                     case FormItemType.Text:
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowChat/messageStore.ts b/src/frontend/src/pages/BuildPage/flow/FlowChat/messageStore.ts
index 9b26eeee4..e8a9c237b 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowChat/messageStore.ts
+++ b/src/frontend/src/pages/BuildPage/flow/FlowChat/messageStore.ts
@@ -170,7 +170,6 @@ export const useMessageStore = create<State & Actions>((set, get) => ({
         })
     },
     async loadHistoryMsg(flowid, chatId, { lastMsg }) {
-        console.log('1234 :>> ', 1234);
         const res = await getChatHistory(flowid, chatId, 30, 0)
         const msgs = handleHistoryMsg(res)
         const hisMessages = msgs.reverse()
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowEdge.tsx b/src/frontend/src/pages/BuildPage/flow/FlowEdge.tsx
index 45eb8dbc9..a9fa49c92 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowEdge.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowEdge.tsx
@@ -2,21 +2,70 @@ import { Button } from "@/components/bs-ui/button";
 import { Card, CardContent } from "@/components/bs-ui/card";
 import { BaseEdge, EdgeLabelRenderer, getBezierPath, Position } from "@xyflow/react";
 import { Plus } from "lucide-react";
+import { useMemo } from "react";
 import Sidebar from "./Sidebar";
-export default function CustomEdge({ id, sourceX, sourceY, targetX, targetY, onOptionSelect, onButtonClick, isDropdownOpen }) {
-    const [edgePath, labelX, labelY] = getBezierPath({
-        sourceX,
-        sourceY,
-        sourcePosition: Position.Right,
-        targetX,
-        targetY,
-        targetPosition: Position.Left,
-        curvature: 0.4
-    });
 
-    const handleOptionClick = (option) => {
-        onOptionSelect({ label: option, position: { x: labelX, y: labelY } });
+function getUpperArcBezierPath(sourceX, sourceY, targetX, targetY) {
+    const dx = Math.abs(targetX - sourceX);
+    const dy = Math.abs(targetY - sourceY);
+
+    // 控制点的偏移量
+    const offsetX = dx / 2.8; // 水平控制点偏移
+    const offsetY = Math.max(dy, 180); // 垂直控制点偏移，确保曲线更弯曲
+
+    // 控制点的坐标（从上方绕弧线）
+    const controlX1 = sourceX + offsetX;
+    const controlY1 = sourceY - offsetY; // 控制点向上偏移
+    const controlX2 = targetX - offsetX;
+    const controlY2 = targetY - offsetY;
+
+    const path = `M${sourceX},${sourceY} C${controlX1},${controlY1} ${controlX2},${controlY2} ${targetX},${targetY}`;
+    const centerX =
+        0.125 * sourceX +
+        0.375 * controlX1 +
+        0.375 * controlX2 +
+        0.125 * targetX;
+    const centerY =
+        0.125 * sourceY +
+        0.375 * controlY1 +
+        0.375 * controlY2 +
+        0.125 * targetY;
+    return [path, centerX, centerY];
+}
+
+export default function CustomEdge({
+    id,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    selected,
+    onOptionSelect,
+    onButtonClick,
+    isDropdownOpen,
+}) {
+
+    const [edgePath, labelX, labelY] = useMemo(() => {
+        return targetX > sourceX ? getBezierPath({
+            sourceX,
+            sourceY,
+            sourcePosition: Position.Right,
+            targetX,
+            targetY,
+            targetPosition: Position.Left,
+            curvature: 0.4,
+        }) : getUpperArcBezierPath(sourceX, sourceY, targetX, targetY)
+
+    }, [sourceX, sourceY, targetX, targetY])
+
+    const handleOptionClick = (flownodedata) => {
+        onOptionSelect({
+            node: flownodedata,
+            edgeId: id,
+            position: { x: labelX, y: labelY }
+        });
     };
+
     return (
         <>
             {/* arrow */}
@@ -39,28 +88,42 @@ export default function CustomEdge({ id, sourceX, sourceY, targetX, targetY, onO
             <BaseEdge
                 id={id}
                 path={edgePath}
-                style={{ stroke: '#024de3', strokeWidth: 1 }}
+                style={{ stroke: '#024de3', strokeWidth: selected ? 2 : 1, strokeDasharray: selected && 0 }}
                 markerEnd="url(#arrow)"
             />
             {/* 在连线中间添加一个加号按钮 */}
-            {/* <EdgeLabelRenderer>
+            {selected && <EdgeLabelRenderer>
                 <div
                     className="absolute"
                     style={{
                         transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
-                        zIndex: 1000
+                        zIndex: 1000,
                     }}
                 >
-                    <Button size="icon" className="rounded-full w-6 h-6 pointer-events-auto" onClick={() => onButtonClick(id)}>
+                    <Button
+                        size="icon"
+                        className="rounded-full w-5 h-5 pointer-events-auto"
+                        onClick={() => onButtonClick(id)}
+                    >
                         <Plus size={18} className="text-[#fff]" />
                     </Button>
-                    {isDropdownOpen && <Card className="absolute top-10 translate-x-[-50%] bg-transparent hover:shadow-none" style={{ zIndex: 1001 }}>
-                        <CardContent className="min-w-56 pointer-events-auto px-0">
-                            <Sidebar dropdown onClick={(key) => handleOptionClick(key)}></Sidebar>
-                        </CardContent>
-                    </Card>}
+                    {isDropdownOpen && (
+                        <Card
+                            className="absolute top-8 translate-x-[-50%] bg-transparent hover:shadow-none hover:border-transparent"
+                            style={{ zIndex: 1001 }}
+                        >
+                            <CardContent className="min-w-56 pointer-events-auto px-0">
+                                <Sidebar
+                                    dropdown
+                                    disabledNodes={['end']}
+                                    onClick={(flownodedata) => handleOptionClick(flownodedata)}
+                                ></Sidebar>
+                            </CardContent>
+                        </Card>
+                    )}
                 </div>
-            </EdgeLabelRenderer> */}
+            </EdgeLabelRenderer>
+            }
         </>
     );
-};
\ No newline at end of file
+}
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowNode/EditText.tsx b/src/frontend/src/pages/BuildPage/flow/FlowNode/EditText.tsx
index 6e9dbdd46..8588e4df9 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowNode/EditText.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowNode/EditText.tsx
@@ -22,7 +22,7 @@ export default function EditText({ type = 'input', reDefaultValue = false, child
             })
         }
         setEdit(false)
-        if (reDefaultValue && !value) {
+        if (reDefaultValue && !value.trim()) {
             // Restore default if empty
             setValue(defaultValue)
             return onChange(defaultValue)
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowNode/NodeToolbarComponent.tsx b/src/frontend/src/pages/BuildPage/flow/FlowNode/NodeToolbarComponent.tsx
index 2270081f6..793c6be15 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowNode/NodeToolbarComponent.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowNode/NodeToolbarComponent.tsx
@@ -22,9 +22,9 @@ export default function NodeToolbarComponent({ nodeId, type, onRun }) {
 
     return <div className="rounded-xl shadow-sm p-1 bg-gradient-to-r from-gray-50 to-[#fff] border">
         {
-            // ["agent", "tool", "llm", "rag", "qa_retriever", "code"].includes(type) && <Tip content="运行此节点" side="top">
-            //     <Button size="icon" variant="ghost" className="size-8" onClick={onRun}><Play size={16} /></Button>
-            // </Tip>
+            ["agent", "tool", "llm", "rag", "qa_retriever", "code"].includes(type) && <Tip content="运行此节点" side="top">
+                <Button size="icon" variant="ghost" className="size-8" onClick={onRun}><Play size={16} /></Button>
+            </Tip>
         }
         <Tip content="复制" side="top">
             <Button
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowNode/Parameter.tsx b/src/frontend/src/pages/BuildPage/flow/FlowNode/Parameter.tsx
index 1b6e5441c..3eee5ba49 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowNode/Parameter.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowNode/Parameter.tsx
@@ -1,4 +1,4 @@
-import { WorkflowNodeParam } from "@/types/flow";
+import { WorkflowNode, WorkflowNodeParam } from "@/types/flow";
 import CodeInputItem from "./component/CodeInputItem";
 import CodeOutputItem from "./component/CodeOutputItem";
 import CodePythonItem from "./component/CodePythonItem";
@@ -23,9 +23,10 @@ import VarTextareaItem from "./component/VarTextareaItem";
 import VarTextareaUploadItem from "./component/VarTextareaUploadItem";
 
 // 节点表单项
-export default function Parameter({ nodeId, item, onOutPutChange, onStatusChange, onVarEvent }
+export default function Parameter({ node, nodeId, item, onOutPutChange, onStatusChange, onVarEvent }
     : {
         nodeId: string,
+        node: WorkflowNode,
         item: WorkflowNodeParam,
         onOutPutChange: (key: string, value: any) => void
         onStatusChange: (key: string, obj: any) => void
@@ -65,7 +66,7 @@ export default function Parameter({ nodeId, item, onOutPutChange, onStatusChange
         case 'var_textarea_file':
             return <VarTextareaUploadItem nodeId={nodeId} data={item} onChange={handleOnNewValue} onValidate={bindValidate} onVarEvent={bindVarValidate} />
         case 'output_form':
-            return <OutputItem nodeId={nodeId} data={item} onChange={handleOnNewValue} onValidate={bindValidate} />
+            return <OutputItem nodeId={nodeId} node={node} data={item} onChange={handleOnNewValue} onValidate={bindValidate} />
         case 'bisheng_model':
             return <ModelItem data={item} onChange={handleOnNewValue} onValidate={bindValidate} />
         case 'agent_model':
@@ -77,9 +78,20 @@ export default function Parameter({ nodeId, item, onOutPutChange, onStatusChange
         case 'switch':
             return <SwitchItem data={item} onChange={handleOnNewValue} />;
         case 'var_select':
-            return <VarSelectSingleItem nodeId={nodeId} data={item} onChange={handleOnNewValue} onValidate={bindValidate} />;
+            return <VarSelectSingleItem
+                nodeId={nodeId}
+                data={item}
+                onChange={handleOnNewValue}
+                onValidate={bindValidate}
+                onVarEvent={bindVarValidate} />;
         case 'user_question':
-            return <VarSelectItem nodeId={nodeId} data={item} onChange={handleOnNewValue} onOutPutChange={onOutPutChange} onValidate={bindValidate} />;
+            return <VarSelectItem
+                nodeId={nodeId}
+                data={item}
+                onChange={handleOnNewValue}
+                onOutPutChange={onOutPutChange}
+                onValidate={bindValidate}
+                onVarEvent={bindVarValidate} />;
         case 'knowledge_select_multi':
             return <KnowledgeSelectItem data={item} onChange={handleOnNewValue} onValidate={bindValidate} />;
         case 'qa_select_multi':
@@ -95,7 +107,7 @@ export default function Parameter({ nodeId, item, onOutPutChange, onStatusChange
         case 'add_tool':
             return <ToolItem data={item} onChange={handleOnNewValue} />;
         case 'condition':
-            return <ConditionItem nodeId={nodeId} data={item} onChange={handleOnNewValue} onValidate={bindValidate} />;
+            return <ConditionItem nodeId={nodeId} node={node} data={item} onChange={handleOnNewValue} onValidate={bindValidate} />;
         case 'report':
             return <ReportItem nodeId={nodeId} data={item} onChange={handleOnNewValue} onValidate={bindValidate} />;
         case 'sql_config':
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowNode/ParameterGroup.tsx b/src/frontend/src/pages/BuildPage/flow/FlowNode/ParameterGroup.tsx
index 648f5ab5d..5b77eba39 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowNode/ParameterGroup.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowNode/ParameterGroup.tsx
@@ -1,9 +1,10 @@
 import { WorkflowNode } from "@/types/flow";
 import Parameter from "./Parameter";
 
-export default function ParameterGroup({ nodeId, cate, tab, onOutPutChange, onStatusChange, onVarEvent }
+export default function ParameterGroup({ nodeId, node, cate, tab, onOutPutChange, onStatusChange, onVarEvent }
     : {
         nodeId: string,
+        node: WorkflowNode,
         cate: WorkflowNode['group_params'][number],
         tab: string,
         onOutPutChange: (key: string, value: any) => void
@@ -17,6 +18,7 @@ export default function ParameterGroup({ nodeId, cate, tab, onOutPutChange, onSt
         {cate.name && <p className='mt-2 mb-3 text-sm font-bold'>{cate.name}</p>}
         {cate.params.map(item => tab === item.tab || !item.tab ? <Parameter
             nodeId={nodeId}
+            node={node}
             key={item.key}
             item={item}
             onOutPutChange={onOutPutChange}
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowNode/RunLog.tsx b/src/frontend/src/pages/BuildPage/flow/FlowNode/RunLog.tsx
index 5b0de1e27..ca39b168a 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowNode/RunLog.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowNode/RunLog.tsx
@@ -64,7 +64,7 @@ const Log = ({ type, name, data }) => {
 
 export default function RunLog({ node, children }) {
     const [state, setState] = useState<Status>(Status.normal)
-    const [data, setData] = useState<any[]>([])
+    const [data, setData] = useState<any>({})
 
     // 订阅日志事件
     useEffect(() => {
@@ -72,8 +72,28 @@ export default function RunLog({ node, children }) {
             const { nodeId, action, data } = e.detail
             if (nodeId !== node.id && nodeId !== '*') return
 
+            if (Object.keys(data).length) {
+                let result = {};
+                let hasKeys = []
+
+                // 遍历 b 中的 group_params
+                node.group_params.forEach(group => {
+                    group.params.forEach(param => {
+                        if (data[param.key]) {
+                            result[param.label] = data[param.key];
+                            hasKeys.push(param.key)
+                        }
+                    });
+                });
+
+                for (let key in data) {
+                    if (!hasKeys.includes(key)) {
+                        result[key] = data[key];
+                    }
+                }
+                setData(result)
+            }
             setState(action)
-            setData(data)
         }
         window.addEventListener('nodeLogEvent', onNodeLogEvent)
         return () => {
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowNode/RunTest.tsx b/src/frontend/src/pages/BuildPage/flow/FlowNode/RunTest.tsx
index fefcc3cf6..c17918b48 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowNode/RunTest.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowNode/RunTest.tsx
@@ -4,6 +4,8 @@ import { Textarea } from "@/components/bs-ui/input";
 import { Label } from "@/components/bs-ui/label";
 import { Sheet, SheetClose, SheetContent, SheetFooter, SheetHeader, SheetTitle } from "@/components/bs-ui/sheet";
 import { useToast } from "@/components/bs-ui/toast/use-toast";
+import { runWorkflowNodeApi } from "@/controllers/API/workflow";
+import { captureAndAlertRequestErrorHoc } from "@/controllers/request";
 import { WorkflowNode } from "@/types/flow";
 import { copyText } from "@/utils";
 import { Copy, CopyCheck } from "lucide-react";
@@ -27,7 +29,6 @@ export const ResultText = ({ title, value }: { title: string, value: any }) => {
         } else {
             return value
         }
-        return value
     })
     const handleCopy = (e) => {
         e.stopPropagation()
@@ -44,7 +45,7 @@ export const ResultText = ({ title, value }: { title: string, value: any }) => {
             <p>{title}</p>
             {copyed ? <CopyCheck size={14} /> : <Copy size={14} className="cursor-pointer" onClick={handleCopy} />}
         </div>
-        <textarea defaultValue={text} disabled className="w-full p-2 block text-muted-foreground " />
+        <textarea defaultValue={text} disabled className="w-full min-h-28 p-2 block text-muted-foreground " />
     </div>
 }
 
@@ -99,24 +100,19 @@ export const RunTest = forwardRef((props, ref) => {
             }
         })
         setLoading(true)
-
-        console.log('给后端什么 :>> ', node, inputs);
-        console.log('结果展示 :>> ');
-        setResults([
-            { title: '输出1', text: '输出1' },
-            { title: '输出1', text: '输出1' },
-            { title: '输出1', text: '输出1' },
-            { title: '输出1', text: '输出1' },
-            { title: '输出1', text: '输出1' },
-            { title: '输出1', text: '输出1' },
-            { title: '输出1', text: '输出1' },
-            { title: '输出1', text: '输出1' },
-            { title: '输出2', text: '输出2' }
-        ])
-
-        setTimeout(() => {
-            setLoading(false)
-        }, 2000);
+        captureAndAlertRequestErrorHoc(
+            runWorkflowNodeApi(
+                inputs.reduce((result, input) => {
+                    result[`${node.id}.${input.key}`] = input.value;
+                    return result;
+                }, {}),
+                node
+            ).then(res => {
+                const result = Object.keys(res).map(key => ({ title: key, text: res[key] }))
+                setResults(result)
+                setLoading(false)
+            })
+        );
     }
 
     return (
@@ -156,7 +152,7 @@ export const RunTest = forwardRef((props, ref) => {
 
                     <Button className="w-full mb-2" disabled={loading} onClick={handleRunClick}>运行</Button>
                     {results.length !== 0 && <p className='mt-2 mb-3 text-sm font-bold'>运行结果</p>}
-                    {results.map(res => <ResultText key={res.title} title={res.title} text={res.text} />)}
+                    {results.map(res => <ResultText key={res.text} title={res.title} value={res.text} />)}
                 </div>
                 <SheetFooter>
                     <SheetClose asChild>
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/ConditionItem.tsx b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/ConditionItem.tsx
index 344a374a6..cff98eb20 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/ConditionItem.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/ConditionItem.tsx
@@ -7,6 +7,7 @@ import { Handle, Position } from "@xyflow/react";
 import { ChevronDown, RefreshCcw, Trash2 } from "lucide-react";
 import { useEffect, useState } from "react";
 import SelectVar from "./SelectVar";
+import { CustomHandle } from "..";
 
 interface Item {
     id: string;  // UUID 类型的字符串
@@ -111,7 +112,7 @@ const Item = ({ nodeId, item, index, del, required, onUpdateItem, onDeleteItem }
     );
 };
 
-export default function ConditionItem({ nodeId, data, onChange, onValidate }) {
+export default function ConditionItem({ nodeId, node, data, onChange, onValidate }) {
     const [value, setValue] = useState([]);
 
     const handleAddCondition = () => {
@@ -235,25 +236,13 @@ export default function ConditionItem({ nodeId, data, onChange, onValidate }) {
                 <Button onClick={() => handleAddItem(val.id)} variant="outline" className="border-primary text-primary mt-2 h-8">
                     + 添加条件
                 </Button>
-                <Handle
-                    id={val.id}
-                    type="source"
-                    position={Position.Right}
-                    className='bisheng-flow-handle group'
-                    style={{ top: 20, right: -30 }}
-                ><span></span></Handle>
+                <CustomHandle id={val.id} node={node} className="top-[20px] -right-[30px]" />
             </div>)
         }
 
         <div className="relative">
             <p className='mt-2 mb-3 text-sm font-bold'>否则</p>
-            <Handle
-                id='right_handle'
-                type="source"
-                position={Position.Right}
-                className='bisheng-flow-handle group'
-                style={{ top: 12, right: -30 }}
-            ><span></span></Handle>
+            <CustomHandle node={node} className="top-[12px] -right-[30px]" />
         </div>
         <Button onClick={handleAddCondition} variant="outline" className="border-primary text-primary mt-2 h-8">
             + 添加分支
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/DragOptions.tsx b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/DragOptions.tsx
index bd0add9e0..85cb760ed 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/DragOptions.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/DragOptions.tsx
@@ -99,7 +99,7 @@ export default function DragOptions({ edges = false, scroll = false, options, on
     };
 
     return (
-        <div className={`${scroll && 'nowheel overflow-y-auto max-h-96'} mt-2`}>
+        <div className={`${scroll && 'nowheel overflow-y-auto max-h-80'} mt-2`}>
             <DragDropContext onDragEnd={handleDragEnd} usePortal>
                 <Droppable droppableId="options-list">
                     {(provided) => (
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/InputFormItem.tsx b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/InputFormItem.tsx
index 972bbbae1..a159a19ec 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/InputFormItem.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/InputFormItem.tsx
@@ -187,6 +187,7 @@ function Form({ initialData, onSubmit, onCancel, existingOptions }) {
                 <div>
                     <Label className="bisheng-label">选项</Label>
                     <DragOptions
+                        scroll
                         options={formData.options}
                         onChange={updateOptions}
                     />
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/KnowledgeSelectItem.tsx b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/KnowledgeSelectItem.tsx
index 379033f7b..6110b79b3 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/KnowledgeSelectItem.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/KnowledgeSelectItem.tsx
@@ -56,7 +56,7 @@ export default function KnowledgeSelectItem({ data, onChange, onValidate }) {
                     if (param.key === 'form_input') {
                         param.value.forEach(val => {
                             val.type === 'file' && files.push({
-                                label: val.value,
+                                label: val.key,
                                 value: `${node.id}.${val.key}`
                             })
                         })
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/ModelItem.tsx b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/ModelItem.tsx
index fbf901db9..cefd34c25 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/ModelItem.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/ModelItem.tsx
@@ -31,8 +31,12 @@ export default function ModelItem({ agent = false, data, onChange, onValidate })
             setOptions(llmOptions)
             // return { llmOptions, embeddings }
         })
+
+        // TODO更新默认值
+        // !data.value && onChange(60)
     }, [])
 
+
     const defaultValue = useMemo(() => {
         if (!options.length) return ''
         let _defaultValue = []
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/OutputItem.tsx b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/OutputItem.tsx
index f9afde379..022bfa2d8 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/OutputItem.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/OutputItem.tsx
@@ -3,11 +3,11 @@ import { Label } from "@/components/bs-ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/bs-ui/radio";
 import { QuestionTooltip } from "@/components/bs-ui/tooltip";
 import { useEffect, useMemo, useState } from "react";
+import { CustomHandle } from "..";
 import DragOptions from "./DragOptions";
 import VarInput from "./VarInput";
-import { Handle, Position } from "@xyflow/react";
 
-const OutputItem = ({ nodeId, data, onChange, onValidate }) => {
+const OutputItem = ({ nodeId, node, data, onChange, onValidate }) => {
     const [interactionType, setInteractionType] = useState<string>(data.value.type || "none"); // 交互类型状态
     const options = useMemo(() => {
         return data.options.map(el => ({
@@ -65,7 +65,7 @@ const OutputItem = ({ nodeId, data, onChange, onValidate }) => {
             return false
         })
 
-        return () => onValidate(() => {})
+        return () => onValidate(() => { })
     }, [data.value, interactionType])
 
     return (
@@ -98,13 +98,7 @@ const OutputItem = ({ nodeId, data, onChange, onValidate }) => {
             <div className="interaction-content mt-4 nodrag">
                 {renderContent()}
                 {error && <div className="text-red-500 text-sm mt-2">选项不可为空</div>}
-                {interactionType !== 'choose' && <Handle
-                    id="right_handle"
-                    type="source"
-                    position={Position.Right}
-                    className='bisheng-flow-handle group'
-                    style={{ top: 58, right: -16 }}
-                ><span></span></Handle>}
+                {interactionType !== 'choose' && <CustomHandle node={node} />}
             </div>
         </div>
     );
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/ReportWordEdit.tsx b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/ReportWordEdit.tsx
index 7d70dda16..62fa772d3 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/ReportWordEdit.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/ReportWordEdit.tsx
@@ -12,7 +12,7 @@ import { DialogClose } from "@/components/bs-ui/dialog"
 export default function ReportWordEdit({ versionKey, nodeId, onChange }) {
     const { t } = useTranslation()
 
-    const { docx, loading, createDocx, importDocx } = useReport(versionKey, onChange)
+    const { docx, loading, pageLoading, createDocx, importDocx } = useReport(versionKey, onChange)
 
     // inset var
     const iframeRef = useRef(null)
@@ -28,6 +28,10 @@ export default function ReportWordEdit({ versionKey, nodeId, onChange }) {
         }), '*');
     }
 
+    if (pageLoading) return <div className="absolute w-full h-full top-0 left-0 flex justify-center items-center z-10 bg-primary/20">
+        <LoadingIcon />
+    </div>
+
     // new
     if (!docx.path) return <div className="relative size-full">
         <div className="absolute -top-10 z-10 flex gap-4">
@@ -74,6 +78,7 @@ export default function ReportWordEdit({ versionKey, nodeId, onChange }) {
 
 const useReport = (versionKey, onchange) => {
     const [loading, setLoading] = useState(false)
+    const [pageLoading, setPageLoading] = useState(true)
 
     const [docx, setDocx] = useState({
         key: '',
@@ -82,6 +87,7 @@ const useReport = (versionKey, onchange) => {
 
     useEffect(() => {
         getWorkflowReportTemplate(versionKey).then(res => {
+            setPageLoading(false)
             setDocx({
                 key: res.version_key,
                 path: res.url
@@ -93,7 +99,7 @@ const useReport = (versionKey, onchange) => {
 
     const handleCreate = async () => {
         // setDocx(docx => ({ ...docx, path: 'http://192.168.106.120:3002/empty.docx' }))
-        setDocx(doc => ({...docx, path: location.origin + __APP_ENV__.BASE_URL + '/empty.docx'}))// 文档服务能访问到的文件地址
+        setDocx(doc => ({ ...docx, path: location.origin + __APP_ENV__.BASE_URL + '/empty.docx' }))// 文档服务能访问到的文件地址
     }
 
     const handleImport = () => {
@@ -121,6 +127,7 @@ const useReport = (versionKey, onchange) => {
 
     return {
         loading,
+        pageLoading,
         docx,
         createDocx: handleCreate,
         importDocx: handleImport
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/SelectVar.tsx b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/SelectVar.tsx
index c24f2885e..7fec985e3 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/SelectVar.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/SelectVar.tsx
@@ -1,6 +1,6 @@
 import { Select, SelectContent, SelectTrigger } from "@/components/bs-ui/select";
 import { cname } from "@/components/bs-ui/utils";
-import { ChevronRight } from "lucide-react";
+import { Check, ChevronRight } from "lucide-react";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import useFlowStore from "../../flowStore";
 import NodeLogo from "../NodeLogo";
@@ -14,12 +14,16 @@ const isMatch = (obj, expression) => {
  * @param  nodeId 节点id, itemKey 当前变量key, children, onSelect
  * @returns 
  */
-const SelectVar = forwardRef(({ nodeId, itemKey, children, onSelect, className = '' }, ref) => {
+const SelectVar = forwardRef(({ nodeId, itemKey, multip = false, value = [], children, onSelect, className = '' }, ref) => {
     const [open, setOpen] = useState(false)
     const { flow } = useFlowStore()
 
+    const inputOpenRef = useRef(false)
     useImperativeHandle(ref, () => ({
-        open() { setOpen(true) }
+        open(inputOpen) {
+            inputOpenRef.current = !!inputOpen
+            setOpen(true)
+        }
     }));
 
     const getNodeDataByTemp = (temp) => {
@@ -134,7 +138,10 @@ const SelectVar = forwardRef(({ nodeId, itemKey, children, onSelect, className =
     }, [open])
 
     return <Select open={open} onOpenChange={setOpen}>
-        <SelectTrigger showIcon={false} className={cname('group p-0 h-auto data-[placeholder]:text-inherit border-none bg-transparent shadow-none outline-none focus:shadow-none focus:outline-none focus:ring-0', className)}>
+        <SelectTrigger
+            onClick={() => inputOpenRef.current = false}
+            showIcon={false}
+            className={cname('group p-0 h-auto data-[placeholder]:text-inherit border-none bg-transparent shadow-none outline-none focus:shadow-none focus:outline-none focus:ring-0', className)}>
             {children}
         </SelectTrigger>
         <SelectContent position="popper" avoidCollisions={false}>
@@ -160,25 +167,27 @@ const SelectVar = forwardRef(({ nodeId, itemKey, children, onSelect, className =
                             className="relative flex justify-between w-full select-none items-center rounded-sm p-1.5 text-sm outline-none cursor-pointer hover:bg-[#EBF0FF] data-[focus=true]:bg-[#EBF0FF] dark:hover:bg-gray-700 dark:data-[focus=true]:bg-gray-700 data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
                             onClick={() => {
                                 if (v.param) return
-                                onSelect(currentMenuRef.current, v)
-                                setOpen(false)
+                                onSelect(currentMenuRef.current, v, inputOpenRef.current)
+                                !multip && setOpen(false)
                             }}
-                            onMouseEnter={() => v.param && handleShowQuestions(v.param)}>
+                            onMouseEnter={() => v.param ? handleShowQuestions(v.param) : setQuestions([])}>
                             <span className="w-28 overflow-hidden text-ellipsis">{v.label}</span>
                             {v.param && <ChevronRight className="size-4" />}
+                            {value.includes(`${currentMenuRef.current.id}.${v.value}`) && <Check size={14} />}
                         </div>
                     )}
                 </div>}
                 {
-                    !!questions.length && <div className="w-36 border-l first:border-none">
+                    !!questions.length && <div className="w-44 border-l first:border-none">
                         {questions.map(q =>
                             <div
                                 className="relative flex justify-between w-full select-none items-center rounded-sm p-1.5 text-sm outline-none cursor-pointer hover:bg-[#EBF0FF] data-[focus=true]:bg-[#EBF0FF] dark:hover:bg-gray-700 dark:data-[focus=true]:bg-gray-700 data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
                                 onClick={() => {
-                                    onSelect(currentMenuRef.current, q)
-                                    setOpen(false)
+                                    onSelect(currentMenuRef.current, q, inputOpenRef.current)
+                                    !multip && setOpen(false)
                                 }}>
-                                <span className="w-28 overflow-hidden text-ellipsis">{q.label}</span>
+                                <span className="w-full overflow-hidden text-ellipsis truncate">{q.label}</span>
+                                {value.includes(`${currentMenuRef.current.id}.${q.value}`) && <Check size={14} />}
                             </div>
                         )}
                     </div>
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/SliderItem.tsx b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/SliderItem.tsx
index c88e1f69c..338209202 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/SliderItem.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/SliderItem.tsx
@@ -41,11 +41,11 @@ export const SwitchSliderItem = ({ data, onChange }) => {
                 {data.label}
                 {data.help && <QuestionTooltip content={data.help} />}
             </Label>
-            <Switch checked={value.flag} onCheckedChange={(v) => {
+            {/* <Switch checked={value.flag} onCheckedChange={(v) => {
                 const newValue = { ...value, flag: v }
                 setValue(newValue)
                 onChange(newValue)
-            }} />
+            }} /> */}
         </div>
         <div className="flex gap-4 mt-2">
             <Slider
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/ToolItem.tsx b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/ToolItem.tsx
index 78c8b76c3..b5a2af1ce 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/ToolItem.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/ToolItem.tsx
@@ -20,7 +20,7 @@ export default function ToolItem({ data, onChange }) {
                         <TitleIconBg id={tool.id} className="h-6 w-6">
                             <ToolIcon />
                         </TitleIconBg>
-                        <p className="text-sm">{tool.name}</p>
+                        <p className="text-sm truncate w-60">{tool.name}</p>
                     </div>
                     <CircleMinus
                         className="w-4 h-4 hidden text-primary group-hover:block"
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/VarInput copy.tsx b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/VarInput copy.tsx
index ce74ac09b..10f6c742c 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/VarInput copy.tsx	
+++ b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/VarInput copy.tsx	
@@ -112,7 +112,6 @@ export default function VarInput({ nodeId, itemKey, placeholder = '', flowNode,
 
     // // 在光标位置插入内容
     const handleInsertVariable = (item, _var) => {
-        console.log('1234 :>> ', 1234);
         const msg = textMsgRef.current
         // console.log('positon :>> ', cursorPositionRef.current, msg);
         const beforeCursor = msg.slice(0, cursorPositionRef.current);
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/VarInput.tsx b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/VarInput.tsx
index 69a9fd6de..c05614d5f 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/VarInput.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/VarInput.tsx
@@ -1,3 +1,4 @@
+import { RbDragIcon } from "@/components/bs-icons/rbDrag";
 import { Button } from "@/components/bs-ui/button";
 import { Label } from "@/components/bs-ui/label";
 import { isVarInFlow } from "@/util/flowUtils";
@@ -5,23 +6,34 @@ import { UploadCloud, Variable } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import useFlowStore from "../../flowStore";
 import SelectVar from "./SelectVar";
-import { RbDragIcon } from "@/components/bs-icons/rbDrag";
 
+function encodeHTMLEntities(text) {
+    const textarea = document.createElement("textarea");
+    textarea.textContent = text;
+    return textarea.innerHTML;
+}
+
+function decodeHTMLEntities(text) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(text, "text/html");
+    return doc.documentElement.textContent;
+}
 // 解析富文本内容为保存格式
 function parseToValue(input, flowNode) {
     const tempDiv = document.createElement('div');
     tempDiv.innerHTML = input.replace(
         /<span[^>]*?>(.*?)<\/span>/g, // 匹配所有 <span> 标签
         (match, content) => {
+            const _content = decodeHTMLEntities(content);
             // 在对象中查找匹配的 key
-            const key = Object.keys(flowNode.varZh).find((k) => flowNode.varZh[k] === content);
+            const key = Object.keys(flowNode.varZh).find((k) => flowNode.varZh[k] === _content);
             return key ? `{{#${key}#}}` : content; // 如果找到 key，返回 key，否则保持原内容
         }
     );
 
     // 遍历子节点，将 <br> 转换为 \n，同时处理文本内容
     const traverseNodes = (node) => {
-        let result = '';
+        let result = tempDiv !== node && node.nodeName === 'DIV' ? '\n' : '';
         node.childNodes.forEach((child) => {
             if (child.nodeName === 'BR') {
                 result += '\n'; // 换行符
@@ -54,7 +66,6 @@ export default function VarInput({
     const selectVarRef = useRef(null);
 
     const { flow } = useFlowStore();
-
     // 校验变量是否可用
     const validateVarAvailble = () => {
         const value = valueRef.current;
@@ -77,7 +88,7 @@ export default function VarInput({
 
     function parseToHTML(input, validate = false) {
         let error = '';
-        const html = input
+        const html = encodeHTMLEntities(input)
             .replace(/{{#(.*?)#}}/g, (a, part) => {
                 if (validate) {
                     error = isVarInFlow(nodeId, flow.nodes, part, flowNode.varZh?.[part]);
@@ -96,7 +107,7 @@ export default function VarInput({
     }, []);
 
     // 在光标位置插入内容
-    function handleInsertVariable(item, _var) {
+    function handleInsertVariable(item, _var, inputOpen) {
         handleFocus();
 
         const selection = window.getSelection();
@@ -114,17 +125,25 @@ export default function VarInput({
         // 文本框内容
         const key = `${item.id}.${_var.value}`;
         const label = `${item.name}/${_var.label}`;
+
         if (flowNode.varZh) {
+            const existingProp = Object.keys(flowNode.varZh).find(prop => flowNode.varZh[prop] === label);
+            if (existingProp) delete flowNode.varZh[existingProp];
             flowNode.varZh[key] = label;
         } else {
-            flowNode.varZh = {
-                [key]: label,
-            };
+            flowNode.varZh = { [key]: label };
         }
 
         const html = `<span class="textarea-badge" contentEditable="false">${label}</span>`;
         const fragment = range.createContextualFragment(html);
 
+        if (inputOpen) {
+            // 删除光标前一个字符{
+            const r = selection.getRangeAt(0);
+            r.setStart(r.endContainer, r.endOffset - 1);
+            range.deleteContents();
+        }
+
         const lastChild = fragment.lastChild; // 提前保存引用
         if (lastChild) {
             range.deleteContents();
@@ -182,11 +201,24 @@ export default function VarInput({
                 onKeyDown={(e) => {
                     // 唤起插入变量
                     if (e.key === '{') {
-                        selectVarRef.current.open();
-                        e.preventDefault();
+                        requestAnimationFrame(() => {
+                            selectVarRef.current.open(true);
+                        });
+                        e.stopPropagation()
+                    }
+                    if (e.key === 'Backspace') {
+                        // del hook
+                        const selection = window.getSelection();
+                        const range = selection.getRangeAt(0);
+                        const node = range.startContainer;
+                        if (textareaRef.current === node) {
+                            range.setStart(range.endContainer, range.endOffset - 1);
+                            range.deleteContents();
+                            e.preventDefault();  // 阻止默认行为
+                        }
                     }
                 }}
-                className="nowheel bisheng-richtext px-3 py-2 whitespace-pre-line min-h-[80px] max-h-64 overflow-y-auto overflow-x-hidden border-none outline-none bg-search-input rounded-md dark:text-gray-50 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                className="nowheel bisheng-richtext px-3 py-2 cursor-text whitespace-pre-line min-h-[80px] max-h-64 overflow-y-auto overflow-x-hidden border-none outline-none bg-search-input rounded-md dark:text-gray-50 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
             ></div>
             {children}
             <div
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/VarItem.tsx b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/VarItem.tsx
index 1a13d2e2f..9e7b8c004 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/VarItem.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/VarItem.tsx
@@ -4,7 +4,7 @@ import { ChevronUp } from "lucide-react";
 import { useState } from "react";
 
 export default function VarItem({ data }) {
-    const [open, setOpen] = useState(false)
+    const [open, setOpen] = useState(true)
 
     if (Array.isArray(data.value) && data.value.length > 0) return <div className="mb-2">
         <div className="flex justify-between items-center">
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/VarSelectItem.tsx b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/VarSelectItem.tsx
index 7687b822a..c48892e29 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/VarSelectItem.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/VarSelectItem.tsx
@@ -1,52 +1,44 @@
 import { Badge } from "@/components/bs-ui/badge";
 import { Label } from "@/components/bs-ui/label";
 import { QuestionTooltip } from "@/components/bs-ui/tooltip";
+import { isVarInFlow } from "@/util/flowUtils";
 import { ChevronDown, X } from "lucide-react";
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
+import useFlowStore from "../../flowStore";
 import SelectVar from "./SelectVar";
 
-export default function VarSelectItem({ nodeId, data, onChange, onOutPutChange, onValidate }) {
-    const [value, setValue] = React.useState(data.value)
+const valueToOutput = (newValues, varZh) => {
+    return newValues.map(el => {
+        const labelName = varZh[el];
+        return {
+            key: el.split('.')[1].replace('#', '_'),
+            label: labelName.split('/')[1]
+        };
+    });
+};
 
-    const handleDelete = (val) => {
-        const newValues = value.filter(el => el !== val)
-        const outputVar = valueToOutput(newValues)
+export default function VarSelectItem({ nodeId, data, onChange, onOutPutChange, onValidate, onVarEvent }) {
+    const [value, setValue] = React.useState(() => data.value || []);
+    const [error, setError] = React.useState(false);
 
-        onOutPutChange(data.linkage, outputVar)
-        setValue(newValues)
-        onChange(newValues)
-    }
+    const updateValue = (newValues) => {
+        const outputVar = valueToOutput(newValues, data.varZh || {});
+        onOutPutChange(data.linkage, outputVar);
+        setValue(newValues);
+        onChange(newValues);
+    };
 
+    const handleDelete = (val) => updateValue(value.filter(el => el !== val));
     const handleChange = (item, v) => {
-        // [nodeId.xxx]
-        const itemVar = `${item.id}.${v.value}`
-        if (value.includes(itemVar)) return
-        const newValues = [...value, itemVar]
-        // varZh  {nodeId.xxx: '中文'}
-        if (data.varZh) {
-            data.varZh[itemVar] = `${item.name}/${v.label}`
-        } else {
-            data.varZh = { [itemVar]: `${item.name}/${v.label}` }
+        const itemVar = `${item.id}.${v.value}`;
+        if (!value.includes(itemVar)) {
+            if (!data.varZh) data.varZh = {}; // 确保 data.varZh 已初始化
+            data.varZh[itemVar] = `${item.name}/${v.label}`;
+            const newValues = [...value, itemVar];
+            updateValue(newValues);
         }
-        // output {key: xxx , label: '中文'}[]
-        const outputVar = valueToOutput(newValues)
+    };
 
-        onOutPutChange(data.linkage, outputVar)
-        setValue(newValues)
-        onChange(newValues)
-    }
-
-    const valueToOutput = (newValues) => {
-        return newValues.map(el => {
-            const labelName = data.varZh[el]
-            return {
-                key: el.split('.')[1].replace('#', '_'),
-                label: labelName.split('/')[1]
-            }
-        })
-    }
-
-    const [error, setError] = React.useState(false)
     useEffect(() => {
         data.required && onValidate(() => {
             if (!data.value.length) {
@@ -56,9 +48,28 @@ export default function VarSelectItem({ nodeId, data, onChange, onOutPutChange,
             setError(false)
             return false
         })
-        return () => onValidate(() => {})
+        return () => onValidate(() => { })
     }, [data.value])
 
+
+    // 校验变量是否可用
+    const { flow } = useFlowStore();
+    const [errorKeys, setErrorKeys] = useState<string[]>([])
+    const validateVarAvailble = () => {
+        let error = ''
+        const _errorKeys = []
+        value.map(key => {
+            error = isVarInFlow(nodeId, flow.nodes, key, data.varZh?.[key]);
+            error && _errorKeys.push(key)
+        })
+        setErrorKeys(_errorKeys)
+        return error;
+    };
+    useEffect(() => {
+        onVarEvent && onVarEvent(validateVarAvailble);
+        return () => onVarEvent && onVarEvent(() => { });
+    }, [data, value]);
+
     return <div className='node-item mb-4' data-key={data.key}>
         <div className="flex justify-between items-center">
             <Label className="flex items-center bisheng-label">
@@ -68,10 +79,13 @@ export default function VarSelectItem({ nodeId, data, onChange, onOutPutChange,
             </Label>
             <Badge variant="outline" className="bg-[#E6ECF6] text-[#2B53A0]">{data.key}</Badge>
         </div>
-        <SelectVar nodeId={nodeId} itemKey={data.key} onSelect={handleChange}>
+        <SelectVar nodeId={nodeId} itemKey={data.key} multip value={value} onSelect={handleChange}>
             <div className={`${error && 'border-red-500'} no-drag nowheel mt-2 group flex min-h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-search-input px-3 py-1 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 data-[placeholder]:text-gray-400`}>
                 <div className="flex flex-wrap size-full max-h-32 overflow-y-auto">
-                    {value.length ? value.map(item => <Badge onPointerDown={(e) => e.stopPropagation()} key={item} className="flex whitespace-normal items-center gap-1 select-none bg-primary/20 text-primary hover:bg-primary/15 m-[2px]">
+                    {value.length ? value.map(item => <Badge
+                        onPointerDown={(e) => e.stopPropagation()}
+                        key={item}
+                        className={`flex whitespace-normal items-center gap-1 select-none bg-primary/20 text-primary hover:bg-primary/15 m-[2px] ${errorKeys.includes(item) && 'bg-red-100 border-red-600'}`}>
                         {data.varZh[item]}
                         <X className="h-3 w-3 min-w-3" onClick={() => handleDelete(item)}></X>
                     </Badge>
@@ -85,7 +99,7 @@ export default function VarSelectItem({ nodeId, data, onChange, onOutPutChange,
 
 
 // 单选
-export function VarSelectSingleItem({ nodeId, data, onChange, onValidate }) {
+export function VarSelectSingleItem({ nodeId, data, onChange, onValidate, onVarEvent }) {
     const [value, setValue] = React.useState(data.value)
 
     const handleChange = (item, v) => {
@@ -113,9 +127,21 @@ export function VarSelectSingleItem({ nodeId, data, onChange, onValidate }) {
             setError(false)
             return false
         })
-        return () => onValidate(() => {})
+        return () => onValidate(() => { })
     }, [data.value])
 
+    // 校验变量是否可用
+    const { flow } = useFlowStore();
+    const validateVarAvailble = () => {
+        const error = isVarInFlow(nodeId, flow.nodes, value, data.varZh?.[value])
+        error && setError(true)
+        return error;
+    };
+    useEffect(() => {
+        onVarEvent && onVarEvent(validateVarAvailble);
+        return () => onVarEvent && onVarEvent(() => { });
+    }, [data, value]);
+
     return <div className='node-item mb-4' data-key={data.key}>
         <div className="flex justify-between items-center">
             <Label className="flex items-center bisheng-label">
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/VarTextareaItem.tsx b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/VarTextareaItem.tsx
index 98ddce907..32d7648b6 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/VarTextareaItem.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/VarTextareaItem.tsx
@@ -7,14 +7,14 @@ export default function VarTextareaItem({ nodeId, data, onChange, onValidate, on
 
     useEffect(() => {
         data.required && onValidate(() => {
-            if (!data.value) {
+            if (!data.value.trim()) {
                 setError(true)
                 return data.label + '不可为空'
             }
             setError(false)
             return false
         })
-        return () => onValidate(() => {})
+        return () => onValidate(() => { })
     }, [data.value])
 
     return (
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/VarTextareaUploadItem.tsx b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/VarTextareaUploadItem.tsx
index 9bf97d92d..a50eac0c2 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowNode/component/VarTextareaUploadItem.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowNode/component/VarTextareaUploadItem.tsx
@@ -20,7 +20,7 @@ export default function VarTextareaUploadItem({ nodeId, data, onChange, onValida
     const [error, setError] = useState(false)
     useEffect(() => {
         data.required && onValidate(() => {
-            if (!data.value?.msg) {
+            if (!data.value?.msg && data.value?.files.length === 0) {
                 setError(true)
                 return data.label + '不可为空'
             }
@@ -32,7 +32,10 @@ export default function VarTextareaUploadItem({ nodeId, data, onChange, onValida
 
     return (
         <div className='node-item mb-4 nodrag' data-key={data.key}>
-            <Label className='bisheng-label'>{data.label}</Label>
+            <Label className='bisheng-label'>
+                {data.required && <span className="text-red-500">*</span>}
+                {data.label}
+            </Label>
             <VarInput
                 error={error}
                 placeholder={data.placeholder}
@@ -89,7 +92,7 @@ export const useFileUpload = (_files, onFilesChange) => {
     const handleFileUpload = () => {
         const input = document.createElement("input");
         input.type = "file";
-        input.accept = "image/*"; // Restrict to images
+        input.accept = "image/*,application/pdf"; // Restrict to images
         input.style.display = "none";
         input.multiple = false;
 
diff --git a/src/frontend/src/pages/BuildPage/flow/FlowNode/index.tsx b/src/frontend/src/pages/BuildPage/flow/FlowNode/index.tsx
index 7c4ee440a..420ec519b 100644
--- a/src/frontend/src/pages/BuildPage/flow/FlowNode/index.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/FlowNode/index.tsx
@@ -1,9 +1,12 @@
 import { LoadingIcon } from '@/components/bs-icons/loading';
+import { Card, CardContent } from '@/components/bs-ui/card';
 import { useToast } from '@/components/bs-ui/toast/use-toast';
+import { cname } from '@/components/bs-ui/utils';
 import { WorkflowNode } from '@/types/flow';
 import { Handle, NodeToolbar, Position } from '@xyflow/react';
 import { ChevronDown } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import Sidebar from '../Sidebar';
 import EditText from './EditText';
 import NodeLogo from './NodeLogo';
 import NodeTabs from './NodeTabs';
@@ -11,7 +14,92 @@ import NodeToolbarComponent from './NodeToolbarComponent';
 import ParameterGroup from './ParameterGroup';
 import RunLog from './RunLog';
 import { RunTest } from './RunTest';
-import { cname } from '@/components/bs-ui/utils';
+
+export const CustomHandle = ({ id = '', node, isLeft = false, className = '' }) => {
+    const [openLeft, setOpenLeft] = useState(false);
+    const [openRight, setOpenRight] = useState(false);
+    const posRef = useRef({ x: 0, y: 0 });
+
+    useEffect(() => {
+        const handleAddLine = () => {
+            setOpenLeft(false);
+            setOpenRight(false);
+        };
+
+        window.addEventListener("closeHandleMenu", handleAddLine);
+        return () => {
+            window.removeEventListener("closeHandleMenu", handleAddLine);
+        };
+    }, []);
+
+    const handleOptionClick = (newNode) => {
+        const addNodeEvent = new CustomEvent("addNodeByHandle", {
+            detail: {
+                id,
+                targetNode: node,
+                newNode: newNode,
+                isLeft: isLeft,
+                position: posRef.current
+            }
+        });
+        window.dispatchEvent(addNodeEvent);
+    };
+
+    if (isLeft) {
+        return <div className={cname('absolute top-[58px] -left-[16px]', className)}>
+            <Handle
+                id={id || "left_handle"}
+                type="target"
+                position={Position.Left}
+                className='bisheng-flow-handle group'
+                onClick={(e) => {
+                    posRef.current = { x: e.clientX, y: e.clientY }
+                    setOpenLeft(true)
+                }}
+            ><span></span></Handle>
+            {
+                openLeft && <Card
+                    className="absolute top-4 translate-x-[-50%] bg-transparent hover:shadow-none hover:border-transparent"
+                    style={{ zIndex: 1001 }}
+                >
+                    <CardContent className="min-w-56 pointer-events-auto px-0">
+                        <Sidebar
+                            dropdown
+                            disabledNodes={['end']}
+                            onClick={handleOptionClick}
+                        ></Sidebar>
+                    </CardContent>
+                </Card>
+            }
+        </div>
+    }
+
+    return <div className={cname('absolute top-[58px] right-[-16px]', className)}>
+        <Handle
+            id={id || "right_handle"}
+            type="source"
+            position={Position.Right}
+            className='bisheng-flow-handle group'
+            onClick={(e) => {
+                posRef.current = { x: e.clientX, y: e.clientY }
+                setOpenRight(true)
+            }}
+        ><span></span></Handle>
+        {
+            openRight && <Card
+                className="absolute top-4 translate-x-[-50%] bg-transparent hover:shadow-none hover:border-transparent"
+                style={{ zIndex: 1001 }}
+            >
+                <CardContent className="min-w-56 pointer-events-auto px-0">
+                    <Sidebar
+                        dropdown
+                        onClick={handleOptionClick}
+                    ></Sidebar>
+                </CardContent>
+            </Card>
+        }
+    </div>
+}
 
 function CustomNode({ data: node, selected, isConnectable }: { data: WorkflowNode, selected: boolean, isConnectable: boolean }) {
     const [focusUpdate, setFocusUpdate] = useState(false)
@@ -47,7 +135,6 @@ function CustomNode({ data: node, selected, isConnectable }: { data: WorkflowNod
             })
         })
         setFocusUpdate(!focusUpdate) // render
-        console.log('node :>> ', key, value, node);
     }
 
     const { paramValidateEntities, varValidateEntities, validateParams } = useEventMaster(node)
@@ -63,7 +150,7 @@ function CustomNode({ data: node, selected, isConnectable }: { data: WorkflowNod
         runRef.current.run(node)
     }
 
-    const [expend, setExpend] = useState(false)
+    const [expend, setExpend] = useState(!!node.expand)
     const nodeError = useBorderColor(node)
 
     const { isVisible, handleMouseEnter, handleMouseLeave } = useHoverToolbar();
@@ -109,9 +196,12 @@ function CustomNode({ data: node, selected, isConnectable }: { data: WorkflowNod
                             </EditText>
                         </div>
                         {!['output', 'condition', 'end'].includes(node.type) && <ChevronDown
-                            className={`absolute right-0 bisheng-label cursor-pointer ${expend && 'rotate-180'}`}
+                            className={`absolute right-0 bisheng-label cursor-pointer ${!expend && 'rotate-180'}`}
                             size={14}
-                            onClick={() => setExpend(!expend)}
+                            onClick={() => {
+                                setExpend(!expend)
+                                node.expand = !expend
+                            }}
                         />}
                     </div>
                     <EditText
@@ -129,18 +219,29 @@ function CustomNode({ data: node, selected, isConnectable }: { data: WorkflowNod
                 </div>
                 {/* body */}
                 <div className='-nowheel bg-[#F7F8FB] pb-5 rounded-b-[20px]'>
-                    <div className={expend ? `h-0 overflow-hidden` : ''}>
+                    <div className={expend || ['output', 'condition', 'end'].includes(node.type) ? `` : 'h-0 overflow-hidden'}>
                         {node.tab && <NodeTabs
                             data={node.tab}
                             onChange={(val) => {
                                 setCurrentTab(val)
                                 node.tab.value = val
+                                // 特殊逻辑
+                                handleChangeOutPut('output', [])
+                                node.group_params.some(group => {
+                                    return group.params.some(param => {
+                                        if (param.key === "batch_variable") {
+                                            param.value = []
+                                            return true
+                                        }
+                                    })
+                                })
                             }} />}
                         {node.group_params.map(group =>
                             <ParameterGroup
                                 nodeId={node.id}
                                 key={group.name}
                                 tab={currentTab}
+                                node={node}
                                 cate={group}
                                 onOutPutChange={handleChangeOutPut}
                                 onStatusChange={((key, obj) => paramValidateEntities.current[key] = obj)}
@@ -150,20 +251,12 @@ function CustomNode({ data: node, selected, isConnectable }: { data: WorkflowNod
                     </div>
                 </div>
                 {/* footer */}
-                {node.type !== 'start' && <Handle
-                    id="left_handle"
-                    type="target"
-                    position={Position.Left}
-                    className='bisheng-flow-handle group'
-                    style={{ top: 58, left: -16 }}
-                ><span></span></Handle>}
-                {!['condition', 'output', 'end'].includes(node.type) && <Handle
-                    id="right_handle"
-                    type="source"
-                    position={Position.Right}
-                    className='bisheng-flow-handle group'
-                    style={{ top: 58, right: -16 }}
-                ><span></span></Handle>}
+                {
+                    node.type !== 'start' && <CustomHandle isLeft node={node} />
+                }
+                {
+                    !['condition', 'output', 'end'].includes(node.type) && <CustomHandle node={node} />
+                }
             </div>
 
             <RunTest ref={runRef} />
diff --git a/src/frontend/src/pages/BuildPage/flow/Header.tsx b/src/frontend/src/pages/BuildPage/flow/Header.tsx
index 93d3d00dd..465c88a38 100644
--- a/src/frontend/src/pages/BuildPage/flow/Header.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/Header.tsx
@@ -5,6 +5,7 @@ import { bsConfirm } from "@/components/bs-ui/alertDialog/useConfirm";
 import { Badge } from "@/components/bs-ui/badge";
 import { Button } from "@/components/bs-ui/button";
 import ActionButton from "@/components/bs-ui/button/actionButton";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/bs-ui/dialog";
 import TextInput from "@/components/bs-ui/input/textInput";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/bs-ui/popover";
 import { RadioGroup, RadioGroupItem } from "@/components/bs-ui/radio";
@@ -16,23 +17,25 @@ import { captureAndAlertRequestErrorHoc } from "@/controllers/request";
 import { AppType } from "@/types/app";
 import { FlowVersionItem } from "@/types/flow";
 import { findParallelNodes } from "@/util/flowUtils";
-import { ChevronLeft, EllipsisVertical, PencilLineIcon, Play, Shield, ShieldCheck, TicketCheck } from "lucide-react";
-import { useContext, useEffect, useRef, useState } from "react";
+import { isEqual } from "lodash-es";
+import { ChevronLeft, EllipsisVertical, PencilLineIcon, Play, ShieldCheck } from "lucide-react";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
+import { unstable_useBlocker as useBlocker, useNavigate } from "react-router-dom";
 import CreateApp from "../CreateApp";
 import { ChatTest } from "./FlowChat/ChatTest";
 import useFlowStore from "./flowStore";
 import Notification from "./Notification";
 
-const Header = ({ flow, onTabChange }) => {
+const Header = ({ flow, onTabChange, preFlow }) => {
     const { message } = useToast()
     const testRef = useRef(null)
     const updateAppModalRef = useRef(null)
     const { uploadFlow } = useFlowStore()
     const { t } = useTranslation()
     const navigate = useNavigate()
-    console.log('flow :>> ', flow);
+    const [modelVersionId, setModelVersionId] = useState(0)
+    // console.log('flow :>> ', flow);
 
     const validateNodes = useNodeEvent(flow)
     const addNotification = useFlowStore((state) => state.addNotification);
@@ -70,22 +73,37 @@ const Header = ({ flow, onTabChange }) => {
         }
 
         // api请求
+        // TODO 指定版本上线
         const res = await captureAndAlertRequestErrorHoc(onlineWorkflow(flow, 2))
         if (res) {
             message({
                 variant: 'success',
-                description: "上线成功"
+                description: `${version?.name} 已上线`
             })
+            window.history.length > 1 ? window.history.back() : navigate('/build/apps')
         }
     }
+    const handleOfflineClick = () => {
+        message({
+            variant: 'success',
+            description: `${version?.name} 已下线`
+        })
+    }
 
     const handleSaveClick = async () => {
 
-        if (isOnlineVersion()) return message({
-            title: '提示',
-            description: '工作流已上线不可编辑，您可以另存为新版本进行保存',
-            variant: 'warning'
-        })
+        if (isOnlineVersionFun()) {
+            hasChanged ? message({
+                title: '提示',
+                description: '当前版本已上线，请先下线或另存为新版本',
+                variant: 'warning'
+            }) : message({
+                title: '提示',
+                description: '工作流已上线不可编辑，您可以另存为新版本进行保存',
+                variant: 'warning'
+            })
+            return !hasChanged
+        }
         // temp
         // localStorage.setItem('flow_tmp', JSON.stringify(flow))
         const res = await captureAndAlertRequestErrorHoc(saveWorkflow(version.id, {
@@ -99,8 +117,9 @@ const Header = ({ flow, onTabChange }) => {
         }))
         res && message({
             variant: 'success',
-            description: "保存成功"
+            description: "更改已保存"
         })
+        return res
     }
 
     const handleExportClick = () => {
@@ -127,8 +146,8 @@ const Header = ({ flow, onTabChange }) => {
     }
     // versions
     const [loading, setLoading] = useState(false)
-    const { flow: f, setFlow } = useFlowStore()
-    const { versions, version, lastVersionIndexRef, isOnlineVersion, changeName, deleteVersion, refrenshVersions, setCurrentVersion } = useVersion(flow)
+    const { flow: f, setFlow, setFitView } = useFlowStore()
+    const { versions, version, lastVersionIndexRef, isOnlineVersion, isOnlineVersionFun, changeName, deleteVersion, refrenshVersions, setCurrentVersion } = useVersion(flow)
     // 切换版本
     const handleChangeVersion = async (versionId) => {
         setLoading(true)
@@ -145,6 +164,7 @@ const Header = ({ flow, onTabChange }) => {
             description: ""
         })
         setLoading(false)
+        setFitView()
     }
     const [saveVersionId, setVersionId] = useState('')
     useEffect(() => {
@@ -172,6 +192,13 @@ const Header = ({ flow, onTabChange }) => {
 
     const [tabType, setTabType] = useState('edit')
     const [open, setOpen] = useState(false)
+
+    const [blocker, hasChanged] = useBeforeUnload(flow, preFlow)
+    // 离开并保存
+    const handleSaveAndClose = async () => {
+        const res = await handleSaveClick()
+        res ? blocker.proceed?.() : blocker.reset?.()
+    }
     return (
         <header className="flex justify-between items-center p-4 py-2 bisheng-bg border-b">
             {
@@ -210,7 +237,7 @@ const Header = ({ flow, onTabChange }) => {
                     </div>
                 </div>
             </div>
-            {/* <div>
+            <div>
                 <Button variant="secondary" className={`${tabType === 'edit' ? 'bg-[#fff] hover:bg-[#fff]/70 text-primary h-8"' : ''} h-8`}
                     onClick={() => { setTabType('edit'); onTabChange('edit') }}
                 >
@@ -220,7 +247,7 @@ const Header = ({ flow, onTabChange }) => {
                     onClick={() => { setTabType('api'); onTabChange('api') }}>
                     对外发布
                 </Button>
-            </div> */}
+            </div>
             {/* Right Section with Options */}
             <div className="flex items-center gap-3">
                 <Notification />
@@ -232,8 +259,7 @@ const Header = ({ flow, onTabChange }) => {
                     保存
                 </Button>
                 {
-                    // version && <ActionButton
-                    false && <ActionButton
+                    version && <ActionButton
                         size="sm"
                         className="px-6 flex gap-2 bg-[#fff]"
                         iconClassName="bg-[#fff]"
@@ -250,7 +276,13 @@ const Header = ({ flow, onTabChange }) => {
                         dropDown={(
                             <div className=" overflow-y-auto max-h-96 max-h">
                                 <RadioGroup value={version.id + ''} onValueChange={(vid) => {
-                                    updateVersion(version.id, { name: version.name, description: '', data: flow.data })
+                                    if (isOnlineVersionFun() && hasChanged) return setModelVersionId(vid)
+                                    const { edges, nodes, viewport } = flow
+                                    updateVersion(version.id, {
+                                        name: version.name, description: '', data: {
+                                            edges, nodes, viewport
+                                        }
+                                    })
                                     handleChangeVersion(vid)
                                 }} className="gap-0">
                                     {versions.map((vers, index) => (
@@ -284,9 +316,11 @@ const Header = ({ flow, onTabChange }) => {
                         )}
                     >{t('skills.saveVersion')}</ActionButton>
                 }
-                <Button size="sm" className="h-8 px-6" onClick={handleOnlineClick}>
+                {isOnlineVersion ? <Button size="sm" className="h-8 px-6" onClick={handleOfflineClick}>
+                    下线
+                </Button> : <Button size="sm" className="h-8 px-6" onClick={handleOnlineClick}>
                     上线
-                </Button>
+                </Button>}
                 <Popover open={open} onOpenChange={setOpen}>
                     <PopoverTrigger asChild >
                         <Button size="icon" variant="outline" className="bg-[#fff] size-8">
@@ -312,6 +346,45 @@ const Header = ({ flow, onTabChange }) => {
                 setFlow({ ...f, ...base })
                 onlineWorkflow(f)
             }} />
+            {/* 上线不可修改提示 */}
+            <Dialog open={!!modelVersionId}>
+                <DialogContent className="sm:max-w-[425px]" close={false}>
+                    <DialogHeader>
+                        <DialogTitle>提示</DialogTitle>
+                        <DialogDescription>当前版本已上线不可修改，可另存为新版本保存修改的内容</DialogDescription>
+                    </DialogHeader>
+                    <DialogFooter className="mt-4">
+                        <Button className="h-8" onClick={() => {
+                            handleSaveNewVersion()
+                            setModelVersionId(0)
+                        }}>另存为新版本</Button>
+                        <Button className="leave h-8" variant="destructive" onClick={() => {
+                            handleChangeVersion(modelVersionId)
+                            setModelVersionId(0)
+                        }}>不保存,直接切换</Button>
+                        <Button className="h-8" variant="outline" onClick={() => setModelVersionId(0)}>取消</Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+
+            {/* 离开并保存提示 */}
+            <Dialog open={blocker.state === "blocked"}>
+                <DialogContent className="sm:max-w-[425px]" close={false}>
+                    <DialogHeader>
+                        <DialogTitle>提示</DialogTitle>
+                        <DialogDescription>您有未保存的更改，确定要离开吗？</DialogDescription>
+                    </DialogHeader>
+                    <DialogFooter>
+                        <Button className="leave h-8" onClick={handleSaveAndClose}>保存</Button>
+                        <Button className="h-8" variant="destructive" onClick={() => blocker.proceed?.()}>不保存</Button>
+                        <Button className="h-8" variant="outline" onClick={() => {
+                            const dom = document.getElementById("flow-page") as HTMLElement;
+                            blocker.reset?.()
+                            if (dom) dom.className = dom.className.replace('report-hidden', '');
+                        }}>取消</Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
         </header>
     );
 };
@@ -365,7 +438,9 @@ const useNodeEvent = (flow) => {
          */
         const branchLines: { branch: string, nodeIds: { branch: string, nodeId: string }[], end: boolean }[] = []
         const nodeMap = {}
-        const startNodeId = flow.edges.find(node => node.source.indexOf('start') === 0).source
+        const startEdge = flow.edges.find(node => node.source.indexOf('start') === 0)
+        if (!startEdge) return ['请先链接开始节点']
+        const startNodeId = startEdge.source
         const findEdgesByNodeId = (id) => {
             return flow.edges.filter(node => node.source === id)
         }
@@ -428,7 +503,7 @@ const useNodeEvent = (flow) => {
                 []
                 // ...outputParallelNids.length > 1 ? outputParallelNids.map(node => node.nodeId) : []
             ])
-            return ['不支持多个 input 节点（输入型交互）并行执行']
+            return ['不支持多个 input 节点并行执行']
         }
 
         // 开始到结束流程是否完整
@@ -525,7 +600,8 @@ const useVersion = (flow) => {
     return {
         versions,
         version,
-        isOnlineVersion: () => version.id === onlineVid,
+        isOnlineVersion: version?.id === onlineVid,
+        isOnlineVersionFun: () => version.id === onlineVid,
         lastVersionIndexRef,
         setCurrentVersion(versionId) {
             const currentV = versions.find(el => el.id === versionId)
@@ -539,4 +615,32 @@ const useVersion = (flow) => {
 }
 
 
+// 离开页面保存提示
+const useBeforeUnload = (flow, preFlow) => {
+    const { t } = useTranslation()
+
+    // 离开提示保存
+    useEffect(() => {
+        const fun = (e) => {
+            var confirmationMessage = `${t('flow.unsavedChangesConfirmation')}`;
+            (e || window.event).returnValue = confirmationMessage; // Compatible with different browsers
+            return confirmationMessage;
+        }
+        window.addEventListener('beforeunload', fun);
+        return () => { window.removeEventListener('beforeunload', fun) }
+    }, [])
+
+    const hasChanged = useMemo(() => {
+        if (!flow) return false
+        const oldFlowData = JSON.parse(preFlow)
+        if (!oldFlowData) return true
+        // 比较新旧
+        const { edges, nodes } = flow
+        const { edges: oldEdges, nodes: oldNodes } = oldFlowData
+        return !(isEqual(edges, oldEdges) && isEqual(nodes, oldNodes))
+    }, [preFlow, flow.nodes, flow.edges])
+
+    return [useBlocker(hasChanged), hasChanged] as const;
+}
+
 export default Header;
diff --git a/src/frontend/src/pages/BuildPage/flow/Panne.tsx b/src/frontend/src/pages/BuildPage/flow/Panne.tsx
index c0b18a21b..1d286100a 100644
--- a/src/frontend/src/pages/BuildPage/flow/Panne.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/Panne.tsx
@@ -1,6 +1,7 @@
+import ApiMainPage from "@/components/bs-comp/apiComponent";
 import { generateUUID } from "@/components/bs-ui/utils";
 import { WorkFlow, WorkflowNode } from "@/types/flow";
-import { autoNodeName, initNode } from "@/util/flowUtils";
+import { autoNodeName, initNode, useCopyPasteNode } from "@/util/flowUtils";
 import { useUndoRedo } from "@/util/hook";
 import { Background, BackgroundVariant, Connection, Controls, ReactFlow, addEdge, applyEdgeChanges, applyNodeChanges, useReactFlow } from '@xyflow/react';
 import '@xyflow/react/dist/base.css';
@@ -16,7 +17,7 @@ import useFlowStore from "./flowStore";
 // 自定义组件
 const nodeTypes = { flowNode: FlowNode };
 // 流程编排面板
-export default function Panne({ flow }: { flow: WorkFlow }) {
+export default function Panne({ flow, preFlow }: { flow: WorkFlow, preFlow: string }) {
     const [reactFlowInstance, setReactFlowInstance] = useState(null);
     // 导入自适应布局
     const fitView = useFlowStore(state => state.fitView)
@@ -34,15 +35,11 @@ export default function Panne({ flow }: { flow: WorkFlow }) {
         }
     }, [])
 
+    const { takeSnapshot } = useUndoRedo()
+
     const { reactFlowWrapper, nodes, edges, keyBoardPanneRef,
-        setNodes, onNodesChange, onSelectionChange, onEdgesChange, onEdgeSelect, onConnect, onDragOver, onDrop } = useFlow(reactFlowInstance, flow)
+        setNodes, onNodesChange, onSelectionChange, onEdgesChange, onEdgeSelect, onConnect, onDragOver, onDrop } = useFlow(reactFlowInstance, flow, takeSnapshot)
 
-    useUndoRedo(nodes,
-        (data) => {
-            console.log('undo :>> ', data);
-        }, (data) => {
-            console.log('redo :>> ', data);
-        })
     /**
      * 监听节点变化，更新flow数据
      * 用户手动修改节点，或者使用reactFlow实例的setNode、setEdge都会触发
@@ -70,9 +67,26 @@ export default function Panne({ flow }: { flow: WorkFlow }) {
         }
     };
 
+    const onNodeDragStart = useCallback(() => {
+        // 👇 make dragging a node undoable
+        takeSnapshot();
+        // 👉 you can place your event handlers here
+    }, [takeSnapshot]);
+
+    const onSelectionDragStart = useCallback(() => {
+        // 👇 make dragging a selection undoable
+        takeSnapshot();
+    }, [takeSnapshot]);
+
+    const onEdgesDelete = useCallback(() => {
+        // 👇 make deleting edges undoable
+        takeSnapshot();
+    }, [takeSnapshot]);
+
     const [showApiPage, setShowApiPage] = useState(false)
+
     return <div className="flex flex-col h-full overflow-hidden">
-        <Header flow={flow} onTabChange={(type) => setShowApiPage('api' === type)}></Header>
+        <Header flow={flow} onTabChange={(type) => setShowApiPage('api' === type)} preFlow={preFlow}></Header>
         <div className={`flex-1 min-h-0 overflow-hidden ${showApiPage ? 'hidden' : ''} relative`}>
             <Sidebar onInitStartNode={node => {
                 // start node
@@ -95,14 +109,17 @@ export default function Panne({ flow }: { flow: WorkFlow }) {
                             onEdgesChange={onEdgesChange} // rebuild?
                             onConnect={onConnect}
                             nodeTypes={nodeTypes}
-                            onPaneClick={() => { setDropdownOpenEdgeId(null) }}
+                            onPaneClick={() => {
+                                setDropdownOpenEdgeId(null);
+                                window.dispatchEvent(new CustomEvent("closeHandleMenu"));
+                            }}
                             edgeTypes={{
                                 customEdge: (edgeProps) => (
                                     <CustomEdge
                                         {...edgeProps}
                                         isDropdownOpen={dropdownOpenEdgeId === edgeProps.id}
                                         onButtonClick={handleButtonClick}
-                                        onOptionSelect={() => { onEdgeSelect(); setDropdownOpenEdgeId(null) }}
+                                        onOptionSelect={(data) => { onEdgeSelect(data); setDropdownOpenEdgeId(null) }}
                                     />
                                 ),
                             }}
@@ -118,17 +135,17 @@ export default function Panne({ flow }: { flow: WorkFlow }) {
                                 // 阻止start节点删除
                                 !e.nodes.some(node => node.data.type === 'start')
                             }
+                            onEdgesDelete={onEdgesDelete}
+                            onNodeDragStart={onNodeDragStart} // 快照
+                            onSelectionDragStart={onSelectionDragStart} // 快照
+                            onNodesDelete={() => takeSnapshot(flow)} // 更新setEdges
                             // 自定义线组件
                             // connectionLineComponent={ConnectionLineComponent} 
                             // 校验连线合法性
                             // onReconnect={onEdgeUpdate} 
                             // onReconnectStart={onEdgeUpdateStart}
                             // onReconnectEnd={onEdgeUpdateEnd}
-                            // onEdgesDelete={onEdgesDelete}
 
-                            // onNodesDelete={onDelete} // 更新setEdges
-                            // onNodeDragStart={onNodeDragStart} // 快照
-                            // onSelectionDragStart={onSelectionDragStart} // 快照
                             // 框选 (group)
                             // onSelectionStart={(e) => { e.preventDefault(); setSelectionEnded(false) }}
                             // onSelectionEnd={() => setSelectionEnded(true)}
@@ -147,14 +164,13 @@ export default function Panne({ flow }: { flow: WorkFlow }) {
             </main>
         </div>
         <div className={`flex flex-1 min-h-0 overflow-hidden ${showApiPage ? '' : 'hidden'}`}>
-            {/* <ApiMainPage type={'flow'} /> */}
-            come sun~
+            <ApiMainPage type={'flow'} />
         </div>
     </div>
 };
 
 
-const useFlow = (_reactFlowInstance, data) => {
+const useFlow = (_reactFlowInstance, data, takeSnapshot) => {
 
     const reactFlowWrapper = useRef(null);
 
@@ -173,7 +189,7 @@ const useFlow = (_reactFlowInstance, data) => {
     }, [data, _reactFlowInstance, setEdges, setNodes, setViewport]);
 
     // 绑定快捷键
-    const { keyBoardPanneRef, setLastSelection } = useKeyBoard(reactFlowWrapper, setNodes)
+    const { keyBoardPanneRef, setLastSelection } = useKeyBoard(_reactFlowInstance, reactFlowWrapper, setNodes, setEdges)
 
     const onNodesChange = useCallback(
         (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
@@ -185,7 +201,7 @@ const useFlow = (_reactFlowInstance, data) => {
     );
     const onConnect = useCallback(
         (params: Connection) => {
-            console.log('conect :>> ', params);
+            takeSnapshot()
             setEdges((eds) => {
                 return addEdge(
                     {
@@ -200,7 +216,7 @@ const useFlow = (_reactFlowInstance, data) => {
             });
             setNodes((x) => cloneDeep(x));
         },
-        [setEdges, setNodes]
+        [setEdges, setNodes, takeSnapshot]
     );
 
     // 拖拽结束样式
@@ -216,8 +232,9 @@ const useFlow = (_reactFlowInstance, data) => {
         (event: React.DragEvent) => {
             event.preventDefault();
             if (event.dataTransfer.types.some((t) => t === "flownodedata")) {
+                takeSnapshot();
                 const reactflowBounds = reactFlowWrapper.current.getBoundingClientRect();
-                let data: { type: string; node?: WorkflowNode } = JSON.parse(
+                let flowdata: { type: string; node?: WorkflowNode } = JSON.parse(
                     event.dataTransfer.getData("flownodedata")
                 );
 
@@ -225,14 +242,13 @@ const useFlow = (_reactFlowInstance, data) => {
                     x: event.clientX - reactflowBounds.left,
                     y: event.clientY - reactflowBounds.top,
                 });
-                console.log('object :>> ', position, data);
 
-                const nodeId = `${data.node.type}_${generateUUID(5)}`
-                data.node.id = nodeId
+                const nodeId = `${flowdata.node.type}_${generateUUID(5)}`
+                flowdata.node.id = nodeId
                 // 增加节点
                 setNodes((nds) => {
-                    const newName = autoNodeName(nds, data.node.name)
-                    const newNode = initNode(data.node)
+                    const newName = autoNodeName(nds, flowdata.node.name)
+                    const newNode = initNode(flowdata.node)
                     newNode.name = newName
                     return nds.concat({ id: nodeId, type: 'flowNode', position, data: newNode })
                 });
@@ -243,19 +259,38 @@ const useFlow = (_reactFlowInstance, data) => {
             }
         },
         // Specify dependencies for useCallback
-        [setNodes, _reactFlowInstance]
+        [setNodes, _reactFlowInstance, takeSnapshot]
     );
 
-    const onEdgeSelect = useCallback(() => {
-        const reactflowBounds = reactFlowWrapper.current.getBoundingClientRect();
-        const position = _reactFlowInstance.screenToFlowPosition({
-            x: 1 - reactflowBounds.left,
-            y: 2 - reactflowBounds.top,
+    const onEdgeSelect = (obj) => {
+        takeSnapshot()
+        const { node, edgeId, position } = obj
+        let flowdata: { type: string; node: WorkflowNode } = cloneDeep(node)
+        const nodeId = `${flowdata.node.type}_${generateUUID(5)}`
+        flowdata.node.id = nodeId
+        // 增加节点
+        setNodes((nds) => {
+            const newName = autoNodeName(nds, flowdata.node.name)
+            const newNode = initNode(flowdata.node)
+            newNode.name = newName
+            return nds.concat({
+                id: nodeId, type: 'flowNode', position: {
+                    x: position.x - 160,
+                    y: position.y - 100,
+                }, data: newNode
+            })
         });
-        // setNodes((nds) => nds.concat(
-        //     { id: 'c', type: 'flowNode', position, data: { value: 'Node B' } }
-        // ));
-    }, [setNodes, _reactFlowInstance])
+        // 增加边
+        setEdges((eds) => {
+            const edge = eds.find(el => el.id === edgeId)
+            const leftEdge = { ...edge, selected: false, target: nodeId, id: `xy-edge__${edge.source}${edge.sourceHandle}-${nodeId}${edge.targetHandle}` }
+            const rightEdge = { ...edge, selected: false, source: nodeId, sourceHandle: "right_handle", id: `xy-edge__${nodeId}right_handle-${edge.target}${edge.targetHandle}` }
+
+            return eds
+                .filter(el => el.id !== edgeId)
+                .concat(leftEdge, rightEdge);
+        })
+    }
 
     // 监听来自自定义节点的Chang value
     useEffect(() => {
@@ -271,6 +306,7 @@ const useFlow = (_reactFlowInstance, data) => {
         };
         // del node
         const handleNodeDelete = (event) => {
+            takeSnapshot()
             const nodeId = event.detail;
             setNodes((nodes) => nodes.filter((n) => n.id !== nodeId));
             setEdges((edges) => edges.filter((ns) => ns.source !== nodeId && ns.target !== nodeId));
@@ -308,11 +344,61 @@ const useFlow = (_reactFlowInstance, data) => {
                 return nds.map((e) => ({ ...e, selected: false })).concat(_newNodes)
             });
         }
+        // add node by handle
+        const handleAddNode = (event) => {
+            takeSnapshot()
+            const { id, targetNode, isLeft, position } = event.detail;
+            const newNode = cloneDeep(event.detail.newNode)
+            window.dispatchEvent(new CustomEvent("closeHandleMenu"));
+
+            const nodeId = `${newNode.type}_${generateUUID(5)}`
+            newNode.node.id = nodeId
+            const reactflowBounds = reactFlowWrapper.current.getBoundingClientRect();
+            const pos = _reactFlowInstance.screenToFlowPosition({
+                x: position.x - reactflowBounds.left + (isLeft ? -300 : 80),
+                y: position.y - reactflowBounds.top,
+            });
+            // 增加节点
+            setNodes((nds) => {
+                const newName = autoNodeName(nds, newNode.node.name)
+                const _newNode = initNode(newNode.node)
+                _newNode.name = newName
+                return nds.concat({
+                    id: nodeId, type: 'flowNode', position: pos, data: _newNode
+                })
+            });
+
+            // let data: { type: string; node: WorkflowNode } = node
+            // data.node.id = nodeId
+            // // 增加边
+            const edge = isLeft ? {
+                animated: true,
+                id: `xy-edge__${nodeId}right_handle-${targetNode.id}left_handle`,
+                source: nodeId,
+                sourceHandle: "right_handle",
+                target: targetNode.id,
+                targetHandle: "left_handle",
+                type: "customEdge"
+            } : {
+                animated: true,
+                id: `xy-edge__${targetNode.id}${id || 'right_handle'}-${nodeId}left_handle`,
+                source: targetNode.id,
+                sourceHandle: id || "right_handle",
+                target: nodeId,
+                targetHandle: "left_handle",
+                type: "customEdge"
+            }
+            setEdges((eds) => [
+                edge,
+                ...eds
+            ]);
+        }
 
         // 监听自定义事件
         window.addEventListener('nodeUpdate', handleNodeUpdate);
         window.addEventListener('nodeDelete', handleNodeDelete);
         window.addEventListener('nodeCopy', handleCopy);
+        window.addEventListener('addNodeByHandle', handleAddNode);
 
 
         // 在组件卸载时移除事件监听
@@ -320,6 +406,7 @@ const useFlow = (_reactFlowInstance, data) => {
             window.removeEventListener('nodeUpdate', handleNodeUpdate);
             window.addEventListener('nodeDelete', handleNodeDelete);
             window.removeEventListener('nodeCopy', handleCopy);
+            window.removeEventListener('addNodeByHandle', handleAddNode);
         };
     }, [_reactFlowInstance]);
 
@@ -334,24 +421,40 @@ const useFlow = (_reactFlowInstance, data) => {
     }
 }
 
-
 // 复制粘贴组件，支持跨技能粘贴
-const useKeyBoard = (reactFlowWrapper, setNodes) => {
+const useKeyBoard = (_reactFlowInstance, reactFlowWrapper) => {
     const keyBoardPanneRef = useRef<HTMLDivElement>(null); // 绑定快捷键
     const [lastSelection, setLastSelection] = useState(null);
-    // useCopyPaste(keyBoardPanneRef.current, lastSelection, (newSelection, position) => {
-    //     let bounds = reactFlowWrapper.current.getBoundingClientRect();
-    //     setNodes((nds) => nds.concat(
-    //         {
-    //             id: 'd', type: 'flowNode', position: {
-    //                 x: position.x - bounds.left,
-    //                 y: position.y - bounds.top,
-    //             }, data: { value: 'Node 2' }
-    //         }
-    //     ))
-    // }, [setNodes])
+    const { setNodes, setEdges } = useReactFlow();
+
+    useCopyPasteNode(keyBoardPanneRef.current, lastSelection, (newSelectNode, position) => {
+        if (newSelectNode.nodes.some(node => node.data.type === 'start')) return
+        let bounds = reactFlowWrapper.current.getBoundingClientRect();
+        setNodes((nds) => {
+            const newNodes = newSelectNode.nodes.map(node => {
+                const newNode = cloneDeep(node)
+                const nodeId = `${newNode.data.type}_${generateUUID(5)}`
+                newNode.id = nodeId
+                newNode.data.id = nodeId
+                const newName = autoNodeName(nds, newNode.data.name)
+                newNode.data.name = newName
+                // newNode.selected = false
+
+                newNode.position = _reactFlowInstance.screenToFlowPosition({
+                    x: position.x - bounds.left,
+                    y: position.y - bounds.top,
+                });
+                return newNode
+            })
+            return [...newNodes, ...nds]
+        })
+    }, (selectNode) => {
+        // takeSnapshot()
+        const targetNodes = selectNode.nodes;
+        if (targetNodes.some(node => node.data.type === 'start')) return
+        setNodes((nodes) => nodes.filter((n) => !targetNodes.some(el => el.id === n.id)));
+        setEdges((edges) => edges.filter((ns) => !targetNodes.some(el => el.id === ns.source) && !targetNodes.some(el => el.id === ns.target)));
+    }, [_reactFlowInstance, setNodes])
 
     return { keyBoardPanneRef, setLastSelection }
-}
-
-// TODO 离开页面保存提示
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/frontend/src/pages/BuildPage/flow/Sidebar.tsx b/src/frontend/src/pages/BuildPage/flow/Sidebar.tsx
index d3c7a77be..ab92c3542 100644
--- a/src/frontend/src/pages/BuildPage/flow/Sidebar.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/Sidebar.tsx
@@ -11,11 +11,10 @@ import { useMemo, useState } from "react";
 import { useQuery } from "react-query";
 import NodeLogo from "./FlowNode/NodeLogo";
 
-export default function Sidebar({ dropdown = false, onInitStartNode = (node: any) => { }, onClick = (k) => { } }) {
+export default function Sidebar({ dropdown = false, disabledNodes = [], onInitStartNode = (node: any) => { }, onClick = (k) => { } }) {
     const { data: tempData, refetch } = useQuery({
         queryKey: "QueryWorkFlowTempKey",
-        queryFn: () => getWorkflowNodeTemplate(),
-        cacheTime: 0
+        queryFn: () => getWorkflowNodeTemplate()
     });
 
     const getNodeDataByTemp = (temp) => {
@@ -30,16 +29,19 @@ export default function Sidebar({ dropdown = false, onInitStartNode = (node: any
     const nodeTemps = useMemo(() => {
         if (!tempData) return []
         return tempData.reduce((list, temp) => {
+            if (disabledNodes.includes(temp.type)) return list
             const newNode = getNodeDataByTemp(temp)
             temp.type === 'start' ? onInitStartNode(cloneDeep(temp)) : list.push(newNode)
             return list
         }, [])
-    }, [tempData])
+    }, [tempData, disabledNodes])
+
 
     // tool
     const { data: toolTempData } = useQuery({
         queryKey: "QueryToolsKey",
-        queryFn: () => getAssistantToolsApi('all')
+        queryFn: () => getAssistantToolsApi('all'),
+        cacheTime: 0
     });
 
     const toolTemps = useMemo(() => {
@@ -112,7 +114,7 @@ export default function Sidebar({ dropdown = false, onInitStartNode = (node: any
                                                     )[0]
                                                 );
                                             }}
-                                            onClick={() => dropdown && onClick(item.type)}
+                                            onClick={() => dropdown && onClick({ type: item.type, node: tempData.find(tmp => tmp.type === item.type) })}
                                         >
                                             {item.icon}
                                             <span className="text-sm">{item.name}</span>
@@ -159,7 +161,15 @@ export default function Sidebar({ dropdown = false, onInitStartNode = (node: any
                                                                     )[0]
                                                                 );
                                                             }}
-                                                        // onClick={() => dropdown && onClick(el.type)}
+                                                            onClick={() => {
+                                                                if (!dropdown) return
+                                                                let node = null
+                                                                toolTemps.some((temp) => {
+                                                                    node = temp.children.find(node => node.tool_key === el.tool_key)
+                                                                    return node
+                                                                })
+                                                                onClick({ type: el.type, node })
+                                                            }}
                                                         >
                                                             <NodeLogo type="tool" colorStr={el.name} />
                                                             <span className="text-sm truncate">{el.name}</span>
diff --git a/src/frontend/src/pages/BuildPage/flow/flowStore.ts b/src/frontend/src/pages/BuildPage/flow/flowStore.ts
index 9cd87528c..0526c514f 100644
--- a/src/frontend/src/pages/BuildPage/flow/flowStore.ts
+++ b/src/frontend/src/pages/BuildPage/flow/flowStore.ts
@@ -9,6 +9,7 @@ type State = {
 type Actions = {
     setFlow: (flowid: WorkFlow) => void;
     uploadFlow: (file?: File) => void;
+    setFitView: () => void;
     // updateNode: (id: string, data: any) => void;
 }
 
@@ -17,6 +18,7 @@ const useFlowStore = create<State & Actions & { notifications: Notification[]; a
     fitView: false,
     notifications: [], // 消息队列
     setFlow: (newFlow) => set({ flow: newFlow }),
+    setFitView: () => set((state) => ({ fitView: !state.fitView })),
     uploadFlow(file?: File) {
         const input = document.createElement("input");
         input.type = "file";
diff --git a/src/frontend/src/pages/BuildPage/flow/index.tsx b/src/frontend/src/pages/BuildPage/flow/index.tsx
index 1ca296ebd..dcc9a762e 100644
--- a/src/frontend/src/pages/BuildPage/flow/index.tsx
+++ b/src/frontend/src/pages/BuildPage/flow/index.tsx
@@ -1,5 +1,6 @@
 import { getFlowApi } from "@/controllers/API/flow";
-import { useEffect } from "react";
+import { cloneDeep } from "lodash-es";
+import { useEffect, useMemo } from "react";
 import { useParams } from "react-router-dom";
 import Panne from "./Panne";
 import useFlowStore from "./flowStore";
@@ -16,16 +17,6 @@ export default function FlowPage() {
     //     }
     // }, [])
 
-    // const [copyFlow, preFlow] = useMemo(() => {
-    //     if (flow?.id === id) {
-    //         const copyFlow = cloneDeep(flow)
-    //         return [copyFlow, JSON.stringify(copyFlow?.data || null)] as const
-    //     }
-    //     return []
-    // }, [flow, id])
-    // const { user } = useContext(userContext);
-
-
     const { flow, setFlow } = useFlowStore()
 
     useEffect(() => {
@@ -52,18 +43,20 @@ export default function FlowPage() {
                 version_list: []
             })
         })
-        // const str = localStorage.getItem('flow_tmp')
-        // let f = str ? JSON.parse(str) : flow
-        // if ('workflow_test' === user.user_name) {
-        //     f = test
-        // }
-        // setFlow(f)
-        // return f
         return () => setFlow(null)
     }, [])
+
+    const [copyFlow, preFlow] = useMemo(() => {
+        if (flow?.id === id) {
+            const copyFlow = cloneDeep(flow)
+            return [copyFlow, JSON.stringify(copyFlow || null)] as const
+        }
+        return []
+    }, [flow, id])
+
     return (
         <div className="flow-page-positioning">
-            {flow && <Panne flow={flow} />}
+            {flow && <Panne flow={copyFlow} preFlow={preFlow} />}
         </div>
     );
 }
diff --git a/src/frontend/src/pages/ChatAppPage/components/ChatHome.tsx b/src/frontend/src/pages/ChatAppPage/components/ChatHome.tsx
index e57ec782c..e9cb616b8 100644
--- a/src/frontend/src/pages/ChatAppPage/components/ChatHome.tsx
+++ b/src/frontend/src/pages/ChatAppPage/components/ChatHome.tsx
@@ -119,7 +119,7 @@ export default function HomePage({ onSelect }) {
                             type="sheet"
                             icon={flow.flow_type === 'flow' ? SkillIcon : flow.flow_type === 'assistant' ? AssistantIcon : FlowIcon}
                             footer={
-                                <Badge className={`absolute right-0 bottom-0 rounded-none rounded-br-md  ${flow.flow_type === 'flow' && 'bg-gray-950'} ${flow.flow_type === 'assistant' && 'bg-blue-600'}`}>
+                                <Badge className={`absolute right-0 bottom-0 rounded-none rounded-br-md  ${flow.flow_type === 'flow' && 'bg-gray-950'} ${flow.flow_type === 'assistant' && 'bg-[#fdb136]'}`}>
                                     {typeCnNames[flow.flow_type]}
                                 </Badge>
                             }
diff --git a/src/frontend/src/pages/ChatAppPage/components/ChatPanne.tsx b/src/frontend/src/pages/ChatAppPage/components/ChatPanne.tsx
index 8cefca209..5657ace57 100644
--- a/src/frontend/src/pages/ChatAppPage/components/ChatPanne.tsx
+++ b/src/frontend/src/pages/ChatAppPage/components/ChatPanne.tsx
@@ -31,7 +31,7 @@ export default function ChatPanne({ customWsHost = '', appendHistory = false, da
     const { assistantState, loadAssistantState, destroy } = useAssistantStore()
     // console.log('data :>> ', flow);
     const build = useBuild()
-    const { messages, loadHistoryMsg, loadMoreHistoryMsg, changeChatId, clearMsgs } = useMessageStore() // TODO del
+    const { messages, loadHistoryMsg, loadMoreHistoryMsg, changeChatId, clearMsgs } = useMessageStore() 
     const { loadHistoryMsg: loadFlowHistoryMsg } = useFlowMessageStore()
     
     useEffect(() => {
@@ -72,7 +72,6 @@ export default function ChatPanne({ customWsHost = '', appendHistory = false, da
                 lastMsg: '本轮会话已结束'
             }).then(res =>
             {
-                console.log('1234 :>> ', 1234);
                 setAutoRun(!res.length)
             }
                 // setAutoRun()
diff --git a/src/frontend/src/pages/ChatAppPage/index.tsx b/src/frontend/src/pages/ChatAppPage/index.tsx
index 3d6a7ca71..8ee158cb5 100755
--- a/src/frontend/src/pages/ChatAppPage/index.tsx
+++ b/src/frontend/src/pages/ChatAppPage/index.tsx
@@ -16,6 +16,47 @@ import { generateUUID } from "../../utils";
 import HomePage from "./components/ChatHome";
 import ChatPanne from "./components/ChatPanne";
 
+const ChatItem = ({ chat, chatId, location, handleSelectChat, handleDeleteChat }) => {
+
+    return (
+        <div
+            key={chat.chat_id}
+            className={`group item w-full rounded-lg mt-2 p-4 relative hover:bg-[#EDEFF6] cursor-pointer dark:hover:bg-[#34353A] ${location
+                ? 'bg-[#f9f9fc] dark:bg-[#212122]'
+                : (chatId === chat.chat_id
+                    ? 'bg-[#EDEFF6] dark:bg-[#34353A]'
+                    : 'bg-[#f9f9fc] dark:bg-[#212122]')}`}
+            onClick={() => handleSelectChat(chat)}
+        >
+            <div className="flex place-items-center space-x-3">
+                <div className="inline-block bg-purple-500 rounded-md">
+                    <TitleLogo
+                        url={chat.logo}
+                        id={chat.flow_id}
+                    >
+                        {chat.flow_type === 'assistant' ? <AssistantIcon /> : <SkillIcon />}
+                    </TitleLogo>
+                </div>
+                <p className="truncate text-sm font-bold leading-6">{chat.flow_name}</p>
+            </div>
+            <span className="block text-xs text-gray-600 dark:text-[#8D8D8E] mt-3 break-words truncate">
+                {chat.latest_message?.message || ''}
+            </span>
+            <div className="mt-6">
+                <span className="text-gray-400 text-xs absolute bottom-2 left-4">
+                    {formatStrTime(chat.update_time, 'MM 月 dd 日')}
+                </span>
+                <Trash2
+                    size={14}
+                    className="absolute bottom-2 right-2 text-gray-400 hidden group-hover:block"
+                    onClick={(e) => handleDeleteChat(e, chat.chat_id)}
+                />
+            </div>
+        </div>
+    );
+};
+
+
 export default function SkillChatPage() {
     const { t } = useTranslation()
     const [selectChat, setSelelctChat] = useState<any>({
@@ -95,30 +136,14 @@ export default function SkillChatPage() {
             <div ref={chatsRef} className="scroll h-full overflow-y-scroll no-scrollbar p-2 pt-14">
                 {
                     chatList.map((chat, i) => (
-                        <div key={chat.chat_id}
-                            className={`group item w-full rounded-lg mt-2 p-4 relative  hover:bg-[#EDEFF6] cursor-pointer dark:hover:bg-[#34353A] ${location
-                                ? 'bg-[#f9f9fc] dark:bg-[#212122]'
-                                : (chatId === chat.chat_id
-                                    ? 'bg-[#EDEFF6] dark:bg-[#34353A]'
-                                    : 'bg-[#f9f9fc] dark:bg-[#212122]')}`}
-                            onClick={() => handleSelectChat(chat)}>
-                            <div className="flex place-items-center space-x-3">
-                                <div className=" inline-block bg-purple-500 rounded-md">
-                                    <TitleLogo
-                                        url={chat.logo}
-                                        id={chat.flow_id}
-                                    >
-                                        {chat.flow_type === 'assistant' ? <AssistantIcon /> : <SkillIcon />}
-                                    </TitleLogo>
-                                </div>
-                                <p className="truncate text-sm font-bold leading-6">{chat.flow_name}</p>
-                            </div>
-                            <span className="block text-xs text-gray-600 dark:text-[#8D8D8E] mt-3 break-words truncate">{chat.latest_message?.message || ''}</span>
-                            <div className="mt-6">
-                                <span className="text-gray-400 text-xs absolute bottom-2 left-4">{formatStrTime(chat.update_time, 'MM 月 dd 日')}</span>
-                                <Trash2 size={14} className="absolute bottom-2 right-2 text-gray-400 hidden group-hover:block" onClick={(e) => handleDeleteChat(e, chat.chat_id)}></Trash2>
-                            </div>
-                        </div>
+                        <ChatItem
+                            key={chat.chat_id}
+                            chat={chat}
+                            chatId={chatId}
+                            location={location}
+                            handleSelectChat={handleSelectChat}
+                            handleDeleteChat={handleDeleteChat}
+                        />
                     ))
                 }
                 <LoadMore onScrollLoad={onScrollLoad} />
diff --git a/src/frontend/src/pages/LogPage/utils/index.ts b/src/frontend/src/pages/LogPage/utils/index.ts
index 76e4172c0..4b0769581 100644
--- a/src/frontend/src/pages/LogPage/utils/index.ts
+++ b/src/frontend/src/pages/LogPage/utils/index.ts
@@ -36,7 +36,7 @@ export function transformEvent(event: string): string {
 export function transformObjectType(object: string): string {
     switch(object) {
         case 'none': return '无'
-        case 'workflow': return '工作流' // TODO 确认名称
+        case 'workflow': return '工作流'
         case 'flow': return '技能'
         case 'assistant': return '助手'
         case 'knowledge': return '知识库'
diff --git a/src/frontend/src/pages/ModelPage/components/CreateTask.tsx b/src/frontend/src/pages/ModelPage/components/CreateTask.tsx
index c63b76bca..549982a02 100644
--- a/src/frontend/src/pages/ModelPage/components/CreateTask.tsx
+++ b/src/frontend/src/pages/ModelPage/components/CreateTask.tsx
@@ -14,8 +14,8 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../
 import { useTranslation } from "react-i18next";
 import { Input } from "../../../components/bs-ui/input";
 import { Label } from "../../../components/bs-ui/label";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../components/bs-ui/table";
 import { RadioGroup, RadioGroupItem } from "../../../components/bs-ui/radio-group";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../components/bs-ui/table";
 import { alertContext } from "../../../contexts/alertContext";
 import { getFTServicesApi, getServicesApi } from "../../../controllers/API";
 import { createTaskApi } from "../../../controllers/API/finetune";
diff --git a/src/frontend/src/pages/ModelPage/manage/SystemModelConfig.tsx b/src/frontend/src/pages/ModelPage/manage/SystemModelConfig.tsx
index d2f9bd1cd..095dd61d9 100644
--- a/src/frontend/src/pages/ModelPage/manage/SystemModelConfig.tsx
+++ b/src/frontend/src/pages/ModelPage/manage/SystemModelConfig.tsx
@@ -1,11 +1,12 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/bs-ui/tabs";
 import ShadTooltip from "@/components/ShadTooltipComponent";
 import { ArrowLeft } from "lucide-react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/bs-ui/tabs";
 import AssisModel from "./tabs/AssisModel";
 import EvaluationModel from "./tabs/EvaluationModel";
 import KnowledgeModle from "./tabs/KnowledgeModel";
-import { useMemo } from "react";
+import WorkflowModel from "./tabs/WorkflowModel";
 
 export default function SystemModelConfig({ data, onBack }) {
     const { t } = useTranslation('model')
@@ -49,6 +50,7 @@ export default function SystemModelConfig({ data, onBack }) {
                         <TabsTrigger value="knowledge" className="w-[150px]">{t('model.knowledgeBaseModel')}</TabsTrigger>
                         <TabsTrigger value="assis" className="w-[150px]">{t('model.assistantModel')}</TabsTrigger>
                         <TabsTrigger value="evaluation" className="w-[150px]">{t('model.evaluationModel')}</TabsTrigger>
+                        <TabsTrigger value="workflow" className="w-[150px]">工作流模型</TabsTrigger>
                     </TabsList>
                     <TabsContent value="knowledge">
                         <KnowledgeModle llmOptions={llmOptions} embeddings={embeddings} onBack={onBack}></KnowledgeModle>
@@ -59,6 +61,9 @@ export default function SystemModelConfig({ data, onBack }) {
                     <TabsContent value="evaluation">
                         <EvaluationModel llmOptions={llmOptions} onBack={onBack}></EvaluationModel>
                     </TabsContent>
+                    <TabsContent value="workflow">
+                        <WorkflowModel llmOptions={llmOptions} onBack={onBack}></WorkflowModel>
+                    </TabsContent>
                 </Tabs>
             </div>
         </div>
diff --git a/src/frontend/src/pages/ModelPage/manage/tabs/WorkflowModel.tsx b/src/frontend/src/pages/ModelPage/manage/tabs/WorkflowModel.tsx
new file mode 100644
index 000000000..55a78885c
--- /dev/null
+++ b/src/frontend/src/pages/ModelPage/manage/tabs/WorkflowModel.tsx
@@ -0,0 +1,59 @@
+import { Button } from "@/components/bs-ui/button";
+import { Label } from "@/components/bs-ui/label";
+import { useToast } from "@/components/bs-ui/toast/use-toast";
+import { getEvaluationModelConfig, updateEvaluationModelConfig } from "@/controllers/API/finetune";
+import { captureAndAlertRequestErrorHoc } from "@/controllers/request";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ModelSelect } from "./KnowledgeModel";
+import { LoadingIcon } from "@/components/bs-icons/loading";
+
+export default function WorkflowModel({ llmOptions, onBack }) {
+    const { t } = useTranslation('model')
+    const [selectedModel, setSelectedModel] = useState(null);
+    const [loading, setLoading] = useState(true)
+    useEffect(() => {
+        setLoading(true)
+        // TODO 获取默认值
+        getEvaluationModelConfig().then(res => {
+            setSelectedModel(res.model_id)
+            setLoading(false)
+        })
+    }, []);
+
+    const { message } = useToast()
+    const handleSave = () => {
+        if (!selectedModel) {
+            return message({ variant: 'error', description: t('model.defaultEvaluationFeature') + t('bs:required') })
+        }
+        const data = {
+            model_id: selectedModel
+        };
+        // TODO 更新
+        captureAndAlertRequestErrorHoc(updateEvaluationModelConfig(data).then(res => {
+            message({ variant: 'success', description: t('model.saveSuccess') })
+        }));
+    };
+
+    if (loading) return <div className="absolute w-full h-full top-0 left-0 flex justify-center items-center z-10 bg-[rgba(255,255,255,0.6)] dark:bg-blur-shared">
+        <LoadingIcon />
+    </div>
+
+    return (
+        <div className="max-w-[520px] mx-auto">
+            <div className="mt-10">
+                <Label className="bisheng-label">大模型及RAG节点<span className="text-red-500 text-xs">*</span></Label>
+                <ModelSelect
+                    label={''}
+                    value={selectedModel}
+                    options={llmOptions}
+                    onChange={(val) => setSelectedModel(val)}
+                />
+            </div>
+            <div className="mt-10 text-center space-x-6">
+                <Button className="px-6" variant="outline" onClick={onBack}>{t('model.cancel')}</Button>
+                <Button className="px-10" onClick={handleSave}>{t('model.save')}</Button>
+            </div>
+        </div>
+    );
+}
diff --git a/src/frontend/src/pages/SystemPage/components/EditUserGroup.tsx b/src/frontend/src/pages/SystemPage/components/EditUserGroup.tsx
index f10fd8bb0..56869e463 100644
--- a/src/frontend/src/pages/SystemPage/components/EditUserGroup.tsx
+++ b/src/frontend/src/pages/SystemPage/components/EditUserGroup.tsx
@@ -81,9 +81,12 @@ function FlowRadio({ limit, onChange }) {
 
 function FlowControl({ groupId, type, onChange }) {
     const { t } = useTranslation()
-    const { name, label, placeholder } = type === 3
-        ? { name: t('build.assistantName'), label: t('system.AssistantFlowCtrl'), placeholder: t('system.assistantName') }
-        : { name: t('skills.skillName'), label: t('system.SkillFlowCtrl'), placeholder: t('skills.skillName') }
+    const map = {
+        3: { name: t('build.assistantName'), label: t('system.AssistantFlowCtrl'), placeholder: t('system.assistantName') },
+        2: { name: t('skills.skillName'), label: t('system.SkillFlowCtrl'), placeholder: t('skills.skillName') },
+        5: { name: '工作流名称', label: '工作流流量控制', placeholder: '工作流名称' },
+    }
+    const { name, label, placeholder } = map[type]
     const { page, pageSize, data, total, setPage, search, refreshData } = useTable({ pageSize: 10 }, (params) =>
         getGroupFlowsApi(params.page, params.pageSize, type, groupId, params.keyword)
     )
@@ -167,7 +170,8 @@ export default function EditUserGroup({ data, onBeforeChange, onChange }) {
         adminUser: '',
         groupLimit: 0,
         assistant: [],
-        skill: []
+        skill: [],
+        workFlows: []
     })
     /**
      * 用户
@@ -257,6 +261,13 @@ export default function EditUserGroup({ data, onBeforeChange, onChange }) {
                     onChange={(vals) => setForm({ ...form, skill: vals })}
                 ></FlowControl>
             </div>
+            <div className="mt-12 mb-20">
+                <FlowControl
+                    groupId={data.id}
+                    type={5}
+                    onChange={(vals) => setForm({ ...form, workFlows: vals })}
+                ></FlowControl>
+            </div>
         </>}
         <div className="flex justify-center items-center absolute bottom-0 w-[630px] h-[8vh] gap-4 mt-[100px] bg-background-login">
             <Button variant="outline" className="px-16" onClick={onChange}>{t('cancel')}</Button>
diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts
index 713754e51..0576b1108 100644
--- a/src/frontend/src/types/flow/index.ts
+++ b/src/frontend/src/types/flow/index.ts
@@ -1,6 +1,11 @@
 import { Edge, Node, ReactFlowJsonObject, Viewport, XYPosition } from "@xyflow/react";
 import { APIClassType } from "../api/index";
 
+export const enum OnlineState {
+  OffLine = 1,
+  OnLine = 2
+}
+
 /** 流程 */
 export type FlowState = {
   edges: {
diff --git a/src/frontend/src/util/flowUtils.ts b/src/frontend/src/util/flowUtils.ts
index 8b52fd4dc..18c3ae160 100644
--- a/src/frontend/src/util/flowUtils.ts
+++ b/src/frontend/src/util/flowUtils.ts
@@ -1,4 +1,6 @@
 import { Node } from "@xyflow/react";
+import { cloneDeep } from "lodash-es";
+import { useEffect, useRef, useState } from "react";
 
 // 节点名称自动命名
 export function autoNodeName(nodes: Node[], name: string): string {
@@ -15,7 +17,7 @@ export function autoNodeName(nodes: Node[], name: string): string {
     return newName;
 }
 
-// 节点初始化,node中的变量动态替换id
+// 在节点初始化时，将node中的模板变量替换为界面中对应的变量key
 export function initNode(node) {
     const { id } = node;
 
@@ -104,7 +106,7 @@ export function isVarInFlow(nodeId, nodes, varName, varNameCn) {
             })
         ) : false
     )
-    return res ? '' : `${nodeName}节点错误：${varNameCn}不存在`
+    return res ? '' : `${nodeName}节点错误：${varNameCn}已失效，可能是相关节点已被删除或替换，请重新引用变量。`
 }
 
 
@@ -168,3 +170,55 @@ export function findParallelNodes(a, b) {
     return [...new Set(result)];
 }
 
+/**
+ * 复制粘贴节点
+ * @param dom 事件绑定 dom
+ * @param lastSelection 被复制对象
+ * @param paste 粘贴时间回调，参数（克隆的lastSelection，鼠标当前坐标）
+ * @param deps 依赖
+ */
+export function useCopyPasteNode(dom, lastSelection, paste, del, deps) {
+    const position = useRef({ x: 0, y: 0 });
+    const [lastCopiedSelection, setLastCopiedSelection] = useState(null);
+
+    useEffect(() => {
+        if (!dom) return
+        const onKeyDown = (event: KeyboardEvent) => {
+            console.log('event.target :>> ', event.target);
+            if (['INPUT', 'TEXTAREA'].includes(event.target.tagName)) return // 排除输入框内复制粘贴
+            if (
+                event.target instanceof HTMLInputElement ||
+                (event.target instanceof HTMLElement && event.target.isContentEditable)
+            ) return
+
+            if (
+                (event.ctrlKey || event.metaKey) &&
+                event.key === "c" &&
+                lastSelection
+            ) {
+                event.preventDefault();
+                setLastCopiedSelection(cloneDeep(lastSelection));
+            } else if (
+                (event.ctrlKey || event.metaKey) &&
+                event.key === "v" &&
+                lastCopiedSelection
+            ) {
+                event.preventDefault();
+                paste(lastCopiedSelection, position.current)
+            } else if (event.key === 'Delete' && lastSelection) {
+                del(lastSelection)
+            }
+        };
+        const handleMouseMove = (event) => {
+            position.current = { x: event.clientX, y: event.clientY };
+        };
+
+        dom.addEventListener("keydown", onKeyDown);
+        dom.addEventListener("mousemove", handleMouseMove);
+
+        return () => {
+            dom?.removeEventListener("keydown", onKeyDown);
+            dom?.removeEventListener("mousemove", handleMouseMove);
+        };
+    }, [dom, lastSelection, lastCopiedSelection, ...deps]);
+}
\ No newline at end of file
diff --git a/src/frontend/src/util/hook.ts b/src/frontend/src/util/hook.ts
index f1a62477d..bc7f992c0 100644
--- a/src/frontend/src/util/hook.ts
+++ b/src/frontend/src/util/hook.ts
@@ -3,6 +3,7 @@ import { copyText } from "../utils";
 import { alertContext } from "../contexts/alertContext";
 import { useTranslation } from "react-i18next";
 import cloneDeep from "lodash-es/cloneDeep";
+import { useReactFlow } from "@xyflow/react";
 
 // 防抖
 export function useDebounce(func: any, wait: number, immediate: boolean, callback?: any,): (any?: any) => any {
@@ -197,27 +198,29 @@ export function useCopyPaste(dom, lastSelection, paste, deps) {
 }
 
 // undo redo
-export function useUndoRedo<T>(data, undoCall, redoCall, maxHistorySize = 100) {
+export function useUndoRedo<T>(maxHistorySize = 100) {
     const [past, setPast] = useState<T[]>([]); // 过去的历史记录（past）
     const [future, setFuture] = useState<T[]>([]); // 和未来的历史记录（future)
+    const { setNodes, setEdges, getNodes, getEdges } = useReactFlow();
+
     /**
      * 快照功能
      * 将上一次的状态保存到 past 中，并清空 future
      * if max = 2: [1,x,x] -> [x, x]
      * [x,x,new]
      */
-    const takeSnapshot = useCallback((data: T) => {
+    const takeSnapshot = useCallback(() => {
         setPast((old) => {
-            // let newPast = cloneDeep(old);
             const newPast = old.slice(
                 old.length - maxHistorySize + 1,
                 old.length
             );
-            newPast.push(data);
+            newPast.push({ nodes: cloneDeep(getNodes()), edges: cloneDeep(getEdges()) });
             return newPast;
         });
         setFuture([]);
-    }, [setPast, setFuture]);
+    }, [setPast, setFuture, getNodes, getEdges]);
+
     /**
      * 撤销
      * 将状态恢复到 past 中的上一个状态，并将当前状态保存到 future 中
@@ -237,12 +240,13 @@ export function useUndoRedo<T>(data, undoCall, redoCall, maxHistorySize = 100) {
             setFuture((old) => {
                 // let newFuture = cloneDeep(old);
                 let newFuture = old;
-                newFuture.push(data);
+                newFuture.push({ nodes: cloneDeep(getNodes()), edges: cloneDeep(getEdges()) });
                 return newFuture;
             });
-            undoCall(pastState)
+            setNodes(pastState.nodes);
+            setEdges(pastState.edges);
         }
-    }, [data, past, setFuture, setPast, undoCall]);
+    }, [past, setFuture, setPast]);
     /**
      * 重做
      * 将状态恢复到 future 中的下一个状态，并将当前状态保存到 past 中
@@ -262,12 +266,13 @@ export function useUndoRedo<T>(data, undoCall, redoCall, maxHistorySize = 100) {
             setPast((old) => {
                 // let newPast = cloneDeep(old);
                 let newPast = old
-                newPast.push(data);
+                newPast.push({ nodes: cloneDeep(getNodes()), edges: cloneDeep(getEdges()) });;
                 return newPast;
             });
-            redoCall(futureState)
+            setNodes(futureState.nodes);
+            setEdges(futureState.edges);
         }
-    }, [data, future, setFuture, setPast, redoCall]);
+    }, [future, setFuture, setPast]);
 
     // 快捷键
     useEffect(() => {