diff --git a/.env.development b/.env.development
index 80cc26b..4165644 100644
--- a/.env.development
+++ b/.env.development
@@ -1,5 +1,5 @@
 # 页面标题
-VITE_APP_TITLE=里派基础框架
+VITE_APP_TITLE=里派基础框架(开发版)
 
 # 开发环境配置
 VITE_APP_ENV='development'
diff --git a/package.json b/package.json
index 522068b..173084e 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,8 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.2",
+    "@logicflow/core": "^2.2.0-alpha.0",
+    "@logicflow/extension": "^2.2.0-alpha.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
     "axios": "1.12.0",
diff --git a/src/assets/icons/Accept.vue b/src/assets/icons/Accept.vue
new file mode 100644
index 0000000..2aca67a
--- /dev/null
+++ b/src/assets/icons/Accept.vue
@@ -0,0 +1,3 @@
+<template>
+	<svg t="1765187652838" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="131708" width="256" height="256"><path d="M960 317.03h-65.41V714.8c0 30.93-25.07 56-56 56H185.41c-30.93 0-56-25.07-56-56V317.03H64v521.16c0 30.93 25.07 56 56 56h784c30.93 0 56-25.07 56-56V317.03zM404.37 129.81h215.25v72.74H404.37z" p-id="131709"></path><path d="M621.6 501V249.08H406.34V501H302.78L512 710.22 721.22 501z" p-id="131710"></path></svg>
+</template>
diff --git a/src/assets/icons/Approval.vue b/src/assets/icons/Approval.vue
new file mode 100644
index 0000000..e8e8e8e
--- /dev/null
+++ b/src/assets/icons/Approval.vue
@@ -0,0 +1,3 @@
+<template>
+	<svg t="1765186703331" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="111238" width="256" height="256"><path d="M896 928H128c-17.6 0-32-14.4-32-32s14.4-32 32-32h768c17.6 0 32 14.4 32 32s-14.4 32-32 32z m0-128H128c-17.6 0-32-14.4-32-32V608c0-52.8 43.2-96 96-96h204.8c-6.4-38.4-25.6-75.2-52.8-107.2-36.8-41.6-56-94.4-56-148.8 0-60.8 24-118.4 68.8-161.6 44.8-43.2 102.4-64 164.8-62.4C636.8 36.8 734.4 136 736 251.2c1.6 57.6-20.8 113.6-59.2 156.8-27.2 28.8-43.2 64-49.6 104H832c52.8 0 96 43.2 96 96v160c0 17.6-14.4 32-32 32z m-736-64h704V608c0-17.6-14.4-32-32-32H592c-17.6 0-32-14.4-32-32 0-67.2 24-131.2 68.8-179.2 28.8-30.4 43.2-70.4 43.2-112-1.6-83.2-70.4-153.6-153.6-156.8-44.8-1.6-86.4 14.4-116.8 44.8-32 30.4-49.6 72-49.6 115.2 0 38.4 14.4 76.8 40 105.6 46.4 52.8 72 116.8 72 182.4 0 17.6-14.4 32-32 32H192c-17.6 0-32 14.4-32 32v128z" p-id="111239"></path></svg>
+</template>
diff --git a/src/assets/icons/Command.vue b/src/assets/icons/Command.vue
new file mode 100644
index 0000000..e6f9769
--- /dev/null
+++ b/src/assets/icons/Command.vue
@@ -0,0 +1,3 @@
+<template>
+	<svg t="1765179193337" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="103617" width="256" height="256"><path d="M512 0C229.218 0 0 229.218 0 512s229.218 512 512 512 512-229.218 512-512S794.782 0 512 0z m0 944c-238.594 0-432-193.406-432-432S273.406 80 512 80s432 193.406 432 432-193.406 432-432 432z" p-id="103618"></path><path d="M512 672.312c-17.656 0-32 14.282-32 31.968s14.344 32.032 32 32.032 32-14.344 32-32.032-14.344-31.968-32-31.968zM512 544.062c-46.25 0-87.124 21.25-114.718 54.094l29.094 38.782c18.594-27.468 49.968-45.5 85.624-45.5s67.032 18.032 85.594 45.5l29.156-38.782c-27.656-32.844-68.5-54.094-114.75-54.094zM326.062 491.656l28.75 38.156c39.812-41 95.468-66.562 157.188-66.562 61.688 0 117.282 25.562 157.218 66.562l28.656-38.188c-48.062-46.812-113.562-75.75-185.876-75.75-72.374 0.002-137.874 28.938-185.936 75.782z" p-id="103619"></path><path d="M256 387.188l31.124 41.5c59.124-54.844 137.968-88.656 224.876-88.656s165.75 33.812 224.812 88.656L768 387.124c-67.844-61.188-157.468-98.782-256-98.782-98.562 0.002-188.124 37.596-256 98.846z" p-id="103620"></path></svg>
+</template>
diff --git a/src/assets/icons/Custom.vue b/src/assets/icons/Custom.vue
new file mode 100644
index 0000000..ecd692b
--- /dev/null
+++ b/src/assets/icons/Custom.vue
@@ -0,0 +1,3 @@
+<template>
+	<svg t="1765187244666" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="113486" width="256" height="256"><path d="M811.008 768.170667v106.666666a106.666667 106.666667 0 0 1-106.666667 106.666667h-128a21.248 21.248 0 0 1-21.333333-21.333333V938.666667c0-75.52-43.306667-127.872-128.341333-127.872-84.224 0-128.085333 52.821333-128.085334 127.872v21.461333a21.333333 21.333333 0 0 1-21.333333 21.333333h-128a106.666667 106.666667 0 0 1-106.666667-106.709333l0.426667-128a21.333333 21.333333 0 0 1 21.333333-21.248h42.666667c58.752 0 106.410667-55.210667 106.410667-128 0-73.386667-47.36-128-106.410667-128H64.213333a21.333333 21.333333 0 0 1-21.333333-21.333333v-128a106.666667 106.666667 0 0 1 106.666667-106.666667h106.368V213.333333c0-97.066667 61.013333-170.538667 170.752-170.538666 107.008 0 171.392 75.434667 171.392 170.538666v0.128h106.837333a106.666667 106.666667 0 0 1 106.666667 106.666667v106.666667h20.778666c84.053333 0 149.077333 75.008 149.077334 170.666666 0 95.104-65.28 170.666667-149.077334 170.666667h-21.333333z m-42.666667-20.736v-0.597334a21.333333 21.333333 0 0 1 21.333334-21.333333h42.666666c58.752 0 106.410667-55.210667 106.410667-128 0-73.386667-47.36-128-106.410667-128h-42.666666a21.333333 21.333333 0 0 1-20.778667-26.325333V320.128a64 64 0 0 0-64-64h-126.890667a21.76 21.76 0 0 1-1.28 0 21.333333 21.333333 0 0 1-21.333333-21.333333V213.333333c0-72.917333-46.933333-127.872-128.725333-127.872-84.224 0-128.085333 52.821333-128.085334 127.872v21.461334a21.248 21.248 0 0 1-21.333333 21.333333H149.546667a64 64 0 0 0-64 64v106.666667h21.461333c84.053333 0 149.077333 75.008 149.077333 170.666666 0 95.104-65.28 170.666667-149.077333 170.666667h-21.418667l-0.341333 106.666667a64 64 0 0 0 64 64h106.666667V938.666667c0-97.066667 61.013333-170.538667 170.752-170.538667 110.592 0 171.008 73.002667 171.008 170.538667v0.170666h106.666666a64 64 0 0 0 64-64v-127.402666z" p-id="113487"></path></svg>
+</template>
diff --git a/src/assets/icons/End.vue b/src/assets/icons/End.vue
new file mode 100644
index 0000000..1846ece
--- /dev/null
+++ b/src/assets/icons/End.vue
@@ -0,0 +1,3 @@
+<template>
+	<svg t="1765195980045" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="162965" width="256" height="256"><path d="M678.528 642.304c0 17.6-14.4 32-32 32h-268.992a32 32 0 0 1-32-32V381.696a32 32 0 0 1 32-32h268.992c17.6 0 32 14.4 32 32v260.608z" p-id="162966"></path><path d="M1015.552 512.128a502.656 502.656 0 0 0-503.68-503.68 502.208 502.208 0 0 0-356.096 147.264 502.016 502.016 0 0 0-147.328 356.416 500.288 500.288 0 0 0 146.816 356.736 499.584 499.584 0 0 0 356.544 146.688c277.312-2.816 503.744-226.24 503.744-503.424z m-947.968 0a444.288 444.288 0 0 1 444.288-444.544c246.976 0 447.296 200.128 447.296 444.544 0 244.032-200.32 444.416-447.296 444.416a442.304 442.304 0 0 1-444.288-444.416z" p-id="162967"></path></svg>
+</template>
diff --git a/src/assets/icons/Exclusive.vue b/src/assets/icons/Exclusive.vue
new file mode 100644
index 0000000..0921b1c
--- /dev/null
+++ b/src/assets/icons/Exclusive.vue
@@ -0,0 +1,3 @@
+<template>
+	<svg t="1765195784018" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="151266" width="256" height="256"><path d="M605.866667 42.666667l375.466666 375.466666a132.721778 132.721778 0 0 1 0 187.733334l-375.466666 375.466666a132.721778 132.721778 0 0 1-187.733334 0l-375.466666-375.466666a132.721778 132.721778 0 0 1 0-187.733334l375.466666-375.466666a132.721778 132.721778 0 0 1 187.733334 0z m-136.192 29.582222l-5.973334 5.290667-386.161777 386.161777a68.266667 68.266667 0 0 0-5.290667 90.624l5.290667 5.973334 386.161777 386.161777a68.266667 68.266667 0 0 0 90.624 5.290667l5.973334-5.290667 386.161777-386.161777a68.266667 68.266667 0 0 0 5.290667-90.624l-5.290667-5.973334-386.161777-386.161777a68.266667 68.266667 0 0 0-90.624-5.290667z m147.399111 292.636444l42.040889 42.040889-105.130667 105.016889 105.130667 105.130667-42.040889 42.040889L512 553.984l-105.073778 105.130667-42.040889-42.040889 105.130667-105.130667-105.130667-105.016889 42.040889-42.040889L512 469.959111l105.073778-105.073778z" p-id="151267"></path></svg>
+</template>
diff --git a/src/assets/icons/Flow.vue b/src/assets/icons/Flow.vue
new file mode 100644
index 0000000..59f6631
--- /dev/null
+++ b/src/assets/icons/Flow.vue
@@ -0,0 +1,3 @@
+<template>
+	<svg t="1765011138233" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12401" width="256" height="256"><path d="M582.4 67.2H448c-54.4 0-99.2 44.8-99.2 99.2 0 54.4 44.8 99.2 99.2 99.2h134.4c54.4 0 99.2-44.8 99.2-99.2 0-54.4-44.8-99.2-99.2-99.2z m0 134.4H448c-19.2 0-32-16-32-32 0-19.2 16-32 32-32h134.4c19.2 0 32 16 32 32s-12.8 32-32 32z m0 198.4H448c-54.4 0-99.2 44.8-99.2 99.2 0 54.4 44.8 99.2 99.2 99.2h134.4c54.4 0 99.2-44.8 99.2-99.2 0-54.4-44.8-99.2-99.2-99.2z m0 134.4H448c-19.2 0-32-16-32-32 0-19.2 16-32 32-32h134.4c19.2 0 32 16 32 32s-12.8 32-32 32z m0 201.6H448c-54.4 0-99.2 44.8-99.2 99.2 0 54.4 44.8 99.2 99.2 99.2h134.4c54.4 0 99.2-44.8 99.2-99.2 0-54.4-44.8-99.2-99.2-99.2z m0 134.4H448c-19.2 0-32-16-32-32 0-19.2 16-32 32-32h134.4c19.2 0 32 16 32 32s-12.8 32-32 32z m-368-67.2c-35.2 0-70.4-12.8-96-38.4-25.6-25.6-38.4-57.6-38.4-96 0-35.2 12.8-70.4 38.4-96 25.6-25.6 57.6-38.4 96-38.4h67.2v-67.2h-67.2c-112 0-201.6 89.6-201.6 201.6s89.6 201.6 201.6 201.6v67.2l99.2-99.2L214.4 736v67.2zM816 134.4h-67.2v67.2H816c35.2 0 70.4 12.8 96 38.4 25.6 25.6 38.4 57.6 38.4 96s-12.8 70.4-38.4 96c-25.6 25.6-57.6 38.4-96 38.4v-67.2l-99.2 99.2 99.2 99.2v-67.2c112 0 201.6-89.6 201.6-201.6 0-108.8-89.6-198.4-201.6-198.4z" p-id="12402"></path></svg>
+</template>
diff --git a/src/assets/icons/Inclusive.vue b/src/assets/icons/Inclusive.vue
new file mode 100644
index 0000000..e3e19a7
--- /dev/null
+++ b/src/assets/icons/Inclusive.vue
@@ -0,0 +1,3 @@
+<template>
+	<svg t="1765195912695" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="160862" width="256" height="256"><path d="M509.437437 75.339339c14.35035 0 27.675676 5.637638 37.925926 15.375376L933.285285 476.636637c21.013013 21.013013 21.013013 54.838839 0 75.851851l-378.746746 378.746747c-21.013013 21.013013-54.838839 21.013013-75.851852 0l-385.921922-385.921922c-21.013013-21.013013-21.013013-54.838839 0-75.851852L471.511512 91.227227c10.25025-10.25025 24.088088-15.887888 37.925925-15.887888m0-72.776776C476.124124 2.562563 443.835836 15.887888 420.26026 39.463463l-379.259259 379.25926c-49.201201 49.201201-49.201201 129.153153 0 178.866867l385.921922 385.921922c49.201201 49.201201 129.153153 49.201201 178.866867 0L984.024024 604.764765c49.201201-49.201201 49.201201-129.153153 0-178.866867L598.614615 39.975976C575.039039 16.4004 543.263263 3.075075 509.437437 2.562563z" p-id="160863"></path><path d="M544.800801 308.532533c3.075075 0 5.637638 2.562563 5.637637 5.637637v160.416417h159.903904c3.075075 0 6.15015 2.562563 6.15015 5.637637v64.576577c0 3.075075-2.562563 5.637638-5.637637 5.637637h-159.903904v158.366367c0 3.075075-2.562563 5.637638-5.637638 5.637637H480.224224c-3.075075 0-5.637638-2.562563-5.637637-5.637637l-0.512513-158.366367H314.17017c-3.075075 0-5.637638-2.562563-5.637637-5.637637V480.736737c0-3.075075 2.562563-5.637638 5.637637-5.637638h159.903904l-0.512512-160.928929c0.512513-3.075075 2.562563-5.637638 5.637637-5.637637 1.025025-0.512513 65.601602 0 65.601602 0z" p-id="160864"></path></svg>
+</template>
diff --git a/src/assets/icons/Message.vue b/src/assets/icons/Message.vue
new file mode 100644
index 0000000..38258bb
--- /dev/null
+++ b/src/assets/icons/Message.vue
@@ -0,0 +1,3 @@
+<template>
+	<svg t="1765172711806" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15580" width="256" height="256"><path d="M529.222243 943.53334c-247.171426 0-448.25314-201.081715-448.25314-448.241884 0-247.171426 201.081715-448.25314 448.25314-448.25314s448.25314 201.081715 448.25314 448.25314C977.475384 742.451626 776.393669 943.53334 529.222243 943.53334zM529.222243 80.927147c-228.483808 0-414.364309 185.880501-414.364309 414.364309 0 228.472552 185.880501 414.353053 414.364309 414.353053S943.586552 723.764008 943.586552 495.291456C943.586552 266.807648 757.706051 80.927147 529.222243 80.927147z" p-id="15581"></path><path d="M770.723529 539.980261c-24.644283 0-44.677549-20.044522-44.677549-44.688805s20.033265-44.699038 44.677549-44.699038 44.699038 20.054755 44.699038 44.699038S795.367813 539.980261 770.723529 539.980261z" p-id="15582"></path><path d="M529.046235 539.980261c-24.644283 0-44.699038-20.044522-44.699038-44.688805s20.054755-44.699038 44.699038-44.699038 44.677549 20.054755 44.677549 44.699038S553.690518 539.980261 529.046235 539.980261z" p-id="15583"></path><path d="M295.068296 539.980261c-24.644283 0-44.699038-20.044522-44.699038-44.688805s20.054755-44.699038 44.699038-44.699038 44.677549 20.054755 44.677549 44.699038S319.712579 539.980261 295.068296 539.980261z" p-id="15584"></path></svg>
+</template>
diff --git a/src/assets/icons/Parallel.vue b/src/assets/icons/Parallel.vue
new file mode 100644
index 0000000..63f4e6c
--- /dev/null
+++ b/src/assets/icons/Parallel.vue
@@ -0,0 +1,3 @@
+<template>
+	<svg t="1765195930707" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="161927" width="256" height="256"><path d="M601.838933 53.248l368.64 369.0496a123.426133 123.426133 0 0 1-0.955733 174.557867l-372.599467 372.9408a123.426133 123.426133 0 0 1-174.557866 0.955733l-368.64-369.0496a123.357867 123.357867 0 0 1 0.955733-174.557867L427.485867 54.135467A123.4944 123.4944 0 0 1 601.838933 53.248z m-125.815466 39.5264l-5.393067 4.846933-372.9408 372.9408a61.8496 61.8496 0 0 0-5.256533 81.92l4.778666 5.3248 368.64 369.0496a61.44 61.44 0 0 0 81.92 4.369067l5.461334-4.778667 372.9408-372.9408a61.917867 61.917867 0 0 0 5.256533-81.92l-4.778667-5.3248-368.64-369.0496a61.44 61.44 0 0 0-81.92-4.369066z m41.7792 238.933333a184.32 184.32 0 1 1-186.1632 184.32 185.1392 185.1392 0 0 1 186.1632-184.661333z m0 61.44a122.88 122.88 0 1 0 124.1088 122.88 123.426133 123.426133 0 0 0-124.1088-123.2896z" p-id="161928"></path></svg>
+</template>
diff --git a/src/assets/icons/Script.vue b/src/assets/icons/Script.vue
new file mode 100644
index 0000000..33bae24
--- /dev/null
+++ b/src/assets/icons/Script.vue
@@ -0,0 +1,3 @@
+<template>
+	<svg t="1765187091244" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="112280" width="256" height="256"><path d="M934 271c0-90-73-163-163-163H292.3c-66.5 0-118.8 56.7-113.5 122.9L221.1 704H91l-1 54c0 84.6 66.4 153.6 150 157.8v0.2h424.3c98.2 0 177.7-79.6 177.7-177.7L795.8 328H934v-57zM171.6 834.4c-20.3-20.3-31.5-47.3-31.6-76l0.1-4.4h85.4l9.9 111.3c-24-2.8-46.3-13.5-63.8-30.9zM792 740.9c-0.7 33.2-13.9 64.2-37.4 87.7-24.1 24.1-56.2 37.4-90.3 37.4H285.7l-57.1-639.3c-1.4-17.9 4.6-35 16.8-48.2 12.2-13.2 28.9-20.5 46.9-20.5h19c23.4 26.3 37.7 61 37.7 99 0 25.7-6.5 49.9-18 71h414.4L792 740.9zM884 278H397.9c0.7-7 1.1-14 1.1-21 0-36-9.4-69.8-26-99h398c30.2 0 58.6 11.8 79.9 33.1S884 240.8 884 271v7zM664.5 515h-297v-50h297v50z m0 123.2h-297v-50h297v50z" p-id="112281"></path></svg>
+</template>
diff --git a/src/layout/components/NavMenu.vue b/src/layout/components/NavMenu.vue
index f3b2dec..1d06d95 100644
--- a/src/layout/components/NavMenu.vue
+++ b/src/layout/components/NavMenu.vue
@@ -1,17 +1,17 @@
 <template>
 	<div v-if="navMenus.length<=0" style="padding:20px;">
-		<el-alert title="无子集菜单" center type="info" :closable="false"></el-alert>
+		<el-alert :title="t('menu.noSubmenu')" center type="info" :closable="false"></el-alert>
 	</div>
 	<template v-for="navMenu in navMenus" v-bind:key="navMenu">
 		<el-menu-item v-if="!hasChildren(navMenu)" :index="navMenu.path">
-			<a v-if="navMenu.meta&&navMenu.meta.type=='link'" :href="navMenu.path" target="_blank"
+			<a v-if="navMenu.meta&&navMenu.meta.type==='link'" :href="navMenu.path" target="_blank"
 			   @click.stop='()=>{}'></a>
 			<el-icon v-if="navMenu.meta&&navMenu.meta?.icon">
 				<component :is="navMenu.meta?.icon || 'el-icon-menu'"/>
 			</el-icon>
 			<template #title>
 				<span>{{ navMenu.meta.title }}</span>
-				<span v-if="navMenu.meta.tag" class="menu-tag">{{ navMenu.meta.tag }}</span>
+				<span v-if="navMenu.meta.tag" class="menu-tag">{{ navMenu.meta.title }}</span>
 			</template>
 		</el-menu-item>
 		<el-sub-menu v-else :index="navMenu.path">
@@ -20,14 +20,20 @@
 					<component :is="navMenu.meta?.icon || 'el-icon-menu'"/>
 				</el-icon>
 				<span>{{ navMenu.meta.title }}</span>
-				<span v-if="navMenu.meta.tag" class="menu-tag">{{ navMenu.meta.tag }}</span>
+				<span v-if="navMenu.meta.tag" class="menu-tag">{{ navMenu.meta.title }}</span>
 			</template>
 			<NavMenu :navMenus="navMenu.children"></NavMenu>
 		</el-sub-menu>
 	</template>
 </template>
 
-<script setup name="NavMenu">
+<script setup>
+import {useI18n} from "vue-i18n";
+
+defineOptions({
+	name: 'NavMenu'
+})
+const {t} = useI18n()
 const props = defineProps(['navMenus']);
 
 function hasChildren(item) {
diff --git a/src/layout/components/search.vue b/src/layout/components/search.vue
index db8ac90..11554dc 100644
--- a/src/layout/components/search.vue
+++ b/src/layout/components/search.vue
@@ -1,6 +1,7 @@
 <template>
 	<div class="sc-search">
-		<el-input ref="input" v-model="searchText" placeholder="搜索" size="large" clearable prefix-icon="el-icon-search"
+		<el-input ref="input" v-model="searchText" placeholder="搜索" size="large" clearable
+				  prefix-icon="el-icon-search"
 				  :trigger-on-focus="false" @input="inputChange"/>
 		<div class="sc-search-history" v-if="history.length>0">
 			<el-tag closable effect="dark" type="info" v-for="(item, index) in history" :key="item"
@@ -8,7 +9,7 @@
 			</el-tag>
 		</div>
 		<div class="sc-search-result">
-			<div class="sc-search-no-result" v-if="result.length<=0">暂无搜索结果</div>
+			<div class="sc-search-no-result" v-if="result.length<=0">{{ t('menu.noSearchResults') }}</div>
 			<ul v-else>
 				<el-scrollbar max-height="366px">
 					<li v-for="item in result" :key="item.path" @click="to(item)">
@@ -24,10 +25,12 @@
 </template>
 
 <script setup>
-import {ref, onMounted, getCurrentInstance} from "vue";
-import tools from "@/utils/tools.js";
-import {useRouter} from "vue-router";
+import {ref, onMounted, getCurrentInstance} from "vue"
+import tools from "@/utils/tools.js"
+import {useRouter} from "vue-router"
+import {useI18n} from "vue-i18n"
 
+const {t} = useI18n()
 const {proxy} = getCurrentInstance()
 const router = useRouter()
 
@@ -53,10 +56,10 @@ function inputChange(value) {
 
 function filterMenu(map) {
 	map.forEach(item => {
-		if (item.meta.hidden || item.meta.type == "button") {
+		if (item.meta.hidden || item.meta.type === "button") {
 			return false
 		}
-		if (item.meta.type == 'iframe') {
+		if (item.meta.type === 'iframe') {
 			item.path = `/i/${item.name}`
 		}
 		if (item.children && item.children.length > 0 && !item.component) {
@@ -84,10 +87,10 @@ function menuFilter(queryString) {
 	//匹配系统路由
 	const routes = router.getRoutes();
 	const filterRouter = filterMenu.map((m) => {
-		if (m.meta.type == "link") {
-			return routes.find(r => r.path == '/' + m.path)
+		if (m.meta.type === "link") {
+			return routes.find(r => r.path === '/' + m.path)
 		} else {
-			return routes.find(r => r.path == m.path)
+			return routes.find(r => r.path === m.path)
 		}
 	});
 	//重组对象
@@ -95,7 +98,7 @@ function menuFilter(queryString) {
 		res.push({
 			name: item.name,
 			type: item.meta.type,
-			path: item.meta.type == "link" ? item.path.slice(1) : item.path,
+			path: item.meta.type === "link" ? item.path.slice(1) : item.path,
 			icon: item.meta.icon,
 			title: item.meta.title,
 			breadcrumb: item.meta.breadcrumb.map(v => v.meta.title).join(' - ')
@@ -109,7 +112,7 @@ function to(item) {
 		history.value.push(searchText.value)
 		tools.data.set("SEARCH_HISTORY", history.value)
 	}
-	if (item.type == "link") {
+	if (item.type === "link") {
 		setTimeout(() => {
 			let a = document.createElement("a")
 			a.style = "display: none"
diff --git a/src/layout/components/setting.vue b/src/layout/components/setting.vue
index 19cffdd..216350f 100644
--- a/src/layout/components/setting.vue
+++ b/src/layout/components/setting.vue
@@ -2,17 +2,17 @@
 	<el-form ref="form" label-width="120px" label-position="left" style="padding:0 20px;">
 		<el-divider>{{ t('user.thememode') }}</el-divider>
 		<el-row class="pi-theme" :gutter="20">
-			<el-col :span="8"><img src="/images/light.png" class="pi-pic" :class="{'active': dark == 'light'}"
+			<el-col :span="8"><img src="/images/light.png" class="pi-pic" :class="{'active': dark === 'light'}"
 								   @click="themeClick('light')"/>
-				<el-text type="info" class="pi-text">浅色</el-text>
+				<el-text type="info" class="pi-text">{{t('system.lightColor')}}</el-text>
 			</el-col>
-			<el-col :span="8"><img src="/images/dark.png" class="pi-pic" :class="{'active': dark == 'dark'}"
+			<el-col :span="8"><img src="/images/dark.png" class="pi-pic" :class="{'active': dark === 'dark'}"
 								   @click="themeClick('dark')"/>
-				<el-text type="info" class="pi-text">深色</el-text>
+				<el-text type="info" class="pi-text">{{t('system.darkColor')}}</el-text>
 			</el-col>
-			<el-col :span="8"><img src="/images/follow.png" class="pi-pic" :class="{'active': dark == 'follow'}"
+			<el-col :span="8"><img src="/images/follow.png" class="pi-pic" :class="{'active': dark === 'follow'}"
 								   @click="themeClick('follow')"/>
-				<el-text type="info" class="pi-text">跟随系统</el-text>
+				<el-text type="info" class="pi-text">{{t('system.followSystem')}}</el-text>
 			</el-col>
 		</el-row>
 		<el-divider></el-divider>
@@ -51,13 +51,13 @@
 </template>
 
 <script setup>
-import {ref, watch} from "vue";
+import {ref, watch} from "vue"
 import colorTool from '@/utils/color'
-import tools from "@/utils/tools";
-import config from "@/config";
-import globalStore from "@/store/global.js";
-import {useI18n} from "vue-i18n";
-import {setupI18n} from "@/locales/setup.js";
+import tools from "@/utils/tools"
+import config from "@/config"
+import globalStore from "@/store/global.js"
+import {useI18n} from "vue-i18n"
+import {setupI18n} from "@/locales/setup.js"
 
 const global = globalStore()
 const {t} = useI18n()
@@ -115,10 +115,10 @@ watch(colorPrimary, (val) => {
 })
 
 function themeClick(val) {
-	if (val == 'dark') {
+	if (val === 'dark') {
 		document.documentElement.classList.add("dark")
 		localStorage.setItem("APP_DARK", val)
-	} else if (val == 'light') {
+	} else if (val === 'light') {
 		document.documentElement.classList.remove("dark")
 		localStorage.setItem("APP_DARK", val)
 	} else {
diff --git a/src/layout/components/tags.vue b/src/layout/components/tags.vue
index fa65b1c..ff42f65 100644
--- a/src/layout/components/tags.vue
+++ b/src/layout/components/tags.vue
@@ -22,33 +22,33 @@
 				<el-icon>
 					<el-icon-refresh/>
 				</el-icon>
-				刷新
+				{{t('menu.refresh')}}
 			</li>
 			<hr>
 			<li @click="closeTabs()" :class="contextMenuItem.meta.affix?'disabled':''">
 				<el-icon>
 					<el-icon-close/>
 				</el-icon>
-				关闭标签
+				{{t('menu.closeTab')}}
 			</li>
 			<li @click="closeOtherTabs()">
 				<el-icon>
 					<el-icon-folder-delete/>
 				</el-icon>
-				关闭其他标签
+				{{t('menu.closeOtherTabs')}}
 			</li>
 			<hr>
 			<li @click="maximize()">
 				<el-icon>
 					<el-icon-full-screen/>
 				</el-icon>
-				最大化
+				{{t('menu.maximize')}}
 			</li>
 			<li @click="openWindow()">
 				<el-icon>
 					<el-icon-copy-document/>
 				</el-icon>
-				在新的窗口中打开
+				{{t('menu.openInNewWindow')}}
 			</li>
 		</ul>
 	</transition>
@@ -65,7 +65,9 @@ import keepAliveStore from "@/store/keepAlive";
 import iframeStore from "@/store/iframe";
 import {useRouter, useRoute} from "vue-router";
 import {getMenu} from "@/utils/route"
+import {useI18n} from "vue-i18n"
 
+const {t} = useI18n()
 const viewTags = viewTagsStore()
 const keepAlive = keepAliveStore()
 const iframe = iframeStore()
diff --git a/src/layout/components/topbar.vue b/src/layout/components/topbar.vue
index 468da6a..6f9373c 100644
--- a/src/layout/components/topbar.vue
+++ b/src/layout/components/topbar.vue
@@ -23,11 +23,10 @@
 </template>
 
 <script setup>
-import {ref, watch} from "vue";
-import {useRoute} from "vue-router";
+import {ref, watch} from "vue"
+import {useRoute} from "vue-router"
 
 const route = useRoute()
-
 let breadList = ref([])
 
 getBreadcrumb();
@@ -37,7 +36,7 @@ watch(route, () => {
 })
 
 function getBreadcrumb() {
-	breadList.value = route.meta.breadcrumb;
+	breadList.value = route.meta.breadcrumb
 }
 </script>
 
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 48cd7c2..a5991b9 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -182,7 +182,7 @@
 				<div class="pi-side-split-scroll">
 					<el-scrollbar>
 						<ul>
-							<li v-for="item in menu" :key="item" :class="pmenu.path==item.path?'active':''"
+							<li v-for="item in menu" :key="item" :class="pmenu.path===item.path?'active':''"
 								@click="showMenu(item)">
 								<el-icon>
 									<component :is="item.meta?.icon || 'el-icon-menu'"/>
@@ -248,7 +248,6 @@ import userbar from './components/userbar.vue';
 import iframeView from './components/iframeView.vue';
 import globalStore from "@/store/global.js";
 import keepAliveStore from "@/store/keepAlive.js";
-
 import {useRoute, useRouter} from 'vue-router'
 import config from "@/config";
 import {getMenu} from '@/utils/route'
diff --git a/src/router/index.ts b/src/router/index.ts
index 1afc60b..abaf6e4 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,11 +3,12 @@ import {ElNotification} from 'element-plus';
 import config from "@/config"
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
-import tools from '@/utils/tools';
-import api from "@/api";
-import sRouter from './system';
+import tools from '@/utils/tools'
+import api from "@/api"
+import sRouter from './system'
 import {treeFilter, filterAsyncRouter, flatAsyncRoutes} from '@/utils/route'
-import {beforeEach, afterEach} from '@/utils/route';
+import {beforeEach, afterEach} from '@/utils/route'
+import i18n from "@/locales"
 
 //系统路由
 const routes = sRouter
@@ -93,7 +94,7 @@ router.afterEach((to, from) => {
 router.onError((error) => {
 	NProgress.done();
 	ElNotification.error({
-		title: '路由错误',
+		title: i18n.global.t('menu.routingError'),
 		message: error.message
 	});
 });
diff --git a/src/views/system/login/index.vue b/src/views/system/login/index.vue
index 747ccb8..449c07a 100644
--- a/src/views/system/login/index.vue
+++ b/src/views/system/login/index.vue
@@ -22,7 +22,7 @@
 					<template #dropdown>
 						<el-dropdown-menu>
 							<el-dropdown-item v-for="item in langs" :key="item.value" :command="item"
-											  :class="{'selected':lang==item.value}">{{ item.name }}
+											  :class="{'selected':lang===item.value}">{{ item.name }}
 							</el-dropdown-item>
 						</el-dropdown-menu>
 					</template>
@@ -133,9 +133,9 @@ let isLogin = ref(false);
 
 const darkConfig = localStorage.getItem('APP_DARK') || sysConfig.DARK
 
-if (darkConfig == "dark") {
+if (darkConfig === "dark") {
 	dark.value = true
-} else if (darkConfig == 'follow') {
+} else if (darkConfig === 'follow') {
 	const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
 	if (systemTheme.matches) {
 		dark.value = true
diff --git a/src/views/system/translation/index.vue b/src/views/system/translation/index.vue
index d9bc001..fdd04d2 100644
--- a/src/views/system/translation/index.vue
+++ b/src/views/system/translation/index.vue
@@ -43,7 +43,7 @@
 			</template>
 		</el-table-column>
 	</pi-table>
-	<el-drawer v-model="drawerShow" :size="450" title="翻译管理" destroy-on-close>
+	<el-drawer v-model="drawerShow" :size="450" title="翻译管理" destroy-on-close :close-on-click-modal="false">
 		<save ref="saveRef" @success="tableRef.refresh()" @closed="drawerShow=false"></save>
 	</el-drawer>
 </template>
diff --git a/src/views/tools/flow/index.vue b/src/views/tools/flow/index.vue
new file mode 100644
index 0000000..6c11521
--- /dev/null
+++ b/src/views/tools/flow/index.vue
@@ -0,0 +1,282 @@
+<template>
+	<el-container class="flow-editor">
+		<left-panel v-if="lf" :lf="lf"></left-panel>
+		<div ref="containerRef" class="flow-container"></div>
+		<div class="right-panel" v-if="activeNode"></div>
+		<menu-panel v-if="lf" :lf="lf" class="menu-panel"/>
+	</el-container>
+</template>
+
+<script setup>
+import {ref, onMounted, onUnmounted} from "vue"
+import LogicFlow from "@logicflow/core"
+import {MiniMap, Snapshot} from "@logicflow/extension"
+import "@logicflow/core/lib/style/index.css"
+import "@logicflow/extension/lib/style/index.css"
+import leftPanel from "./left.vue"
+import menuPanel from "./menu.vue"
+import {StartNodeModel, StartNodeView, START_NODE_TYPES} from "./model/StartNode"
+import {EventNodeModel, EventNodeView, EVENT_NODE_TYPES} from "./model/EventNode"
+import {GatewayNodeModel, GatewayNodeView, GATEWAY_NODE_TYPES} from "./model/GatewayNode"
+import {CatchNodeModel, CatchNodeView, CATCH_NODE_TYPES} from "./model/CatchNode"
+import {EndNodeModel, EndNodeView, END_NODE_TYPES} from "./model/EndNode"
+import {CustomLineModel, CustomLine, CUSTOM_LINE} from "./model/CustomLine"
+import {ElMessageBox} from 'element-plus'
+import {useI18n} from "vue-i18n"
+
+const containerRef = ref(HTMLElement | null);
+const {t} = useI18n()
+let lf = ref(LogicFlow | null);
+let activeNode = ref({})
+
+onMounted(() => {
+	init()
+	window.addEventListener("keydown", handleKeydown);
+})
+
+onUnmounted(() => {
+	window.removeEventListener("keydown", handleKeydown);
+})
+
+function init() {
+	lf.value = new LogicFlow({
+		container: containerRef.value,
+		grid: {
+			size: 20,              // 网格间距
+			visible: true,         // 显示网格
+			type: "dot",           // dot(点) / mesh(格子线)
+			config: {
+				color: "#dcdfe6",    // 网格颜色
+				thickness: 1,        // 网格粗细
+			}
+		},
+		background: {
+			color: "#f7f8fa"
+		},
+		plugins: [MiniMap, Snapshot],
+		pluginsOptions: {
+			miniMap: {
+				headerTitle: '小地图',
+				isShowHeader: true,
+				showEdge: true,
+				isShowCloseIcon: true,
+				bottomPosition: 10,
+				rightPosition: 10
+			}
+		}
+	})
+
+	/** 注册自定义节点 */
+	registerCustomNodes()
+	/** 注册自定义连线 */
+	registerCustomEdge()
+
+	/** 监听节点点击 */
+	lf.value.on("node:click", ({data}) => {
+		activeNode.value = data
+	})
+
+	lf.value.on("edge:click", ({data}) => {
+		activeNode.value = data
+	})
+
+	lf.value.on("blank:click", () => {
+		activeNode.value = {}
+	});
+
+	// 初始渲染
+	lf.value.render({
+		nodes: [
+			{id: "1", type: "start-basic", x: 200, y: 200, text: "开始节点"},
+			{id: "2", type: "event-approval", x: 400, y: 200, text: "审批节点"},
+		],
+		edges: [
+			{sourceNodeId: "1", targetNodeId: "2", type: CUSTOM_LINE.LINE_TYPE}
+		]
+	})
+}
+
+/** 注册自定义节点 */
+function registerCustomNodes() {
+	if (!lf.value) return;
+
+	// 开始节点
+	Object.values(START_NODE_TYPES).map(i => {
+		lf.value.register({
+			type: i,
+			view: StartNodeView,
+			model: StartNodeModel
+		});
+	})
+
+	// 事件节点
+	Object.values(EVENT_NODE_TYPES).map(i => {
+		lf.value.register({
+			type: i,
+			view: EventNodeView,
+			model: EventNodeModel
+		});
+	})
+
+	// 网关节点
+	Object.values(GATEWAY_NODE_TYPES).map(i => {
+		lf.value.register({
+			type: i,
+			view: GatewayNodeView,
+			model: GatewayNodeModel
+		});
+	})
+
+	// 捕获节点
+	Object.values(CATCH_NODE_TYPES).map(i => {
+		lf.value.register({
+			type: i,
+			view: CatchNodeView,
+			model: CatchNodeModel
+		});
+	})
+
+	// 结束节点
+	Object.values(END_NODE_TYPES).map(i => {
+		lf.value.register({
+			type: i,
+			view: EndNodeView,
+			model: EndNodeModel
+		});
+	})
+}
+
+function registerCustomEdge() {
+	if (!lf.value) return;
+
+	lf.value.register({
+		type: CUSTOM_LINE.LINE_TYPE,
+		view: CustomLine,
+		model: CustomLineModel
+	});
+	lf.value.setDefaultEdgeType(CUSTOM_LINE.LINE_TYPE);
+}
+
+/** 更新节点文本 */
+function updateNodeText() {
+	if (!lf.value || !activeNode.value) return;
+	lf.value.updateText(activeNode.value.id, activeNode.value.text.value);
+}
+
+/** 更新节点属性 */
+function updateNodeProps() {
+	if (!lf.value || !activeNode.value) return;
+	lf.value.setProperties(activeNode.value.id, activeNode.value.properties);
+}
+
+// 快捷键设置
+const handleKeydown = (event) => {
+	if (event.key === "Delete" || event.key === "Backspace") {
+		if (Object.keys(activeNode.value).length !== 0) {
+			ElMessageBox.confirm(
+				activeNode.value.type === 'line' ? t('flow.deleteLine') : t('flow.deleteNode'),
+				t('system.warning'),
+				{
+					confirmButtonText: t('system.ok'),
+					cancelButtonText: t('system.cancel'),
+					type: 'warning',
+				}
+			).then(() => {
+				if (activeNode.value.type === 'line') {
+					lf.value.deleteEdge(activeNode.value.id);
+				} else {
+					lf.value.deleteNode(activeNode.value.id);
+				}
+			}).catch(() => {
+			})
+		}
+		return
+	}
+
+	const directionKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+	if (directionKeys.includes(event.key)) {
+		// 获取当前选中的所有元素
+		const selectedElements = lf.value.getSelectElements();
+		const selectedNodes = selectedElements.nodes;
+
+		// 如果没有节点被选中，则不执行操作
+		if (selectedNodes.length === 0) return;
+
+		// 根据按键计算移动偏移量
+		let deltaX = 0;
+		let deltaY = 0;
+		switch (event.key) {
+			case 'ArrowUp':
+				deltaY = -1;
+				break;
+			case 'ArrowDown':
+				deltaY = 1;
+				break;
+			case 'ArrowLeft':
+				deltaX = -1;
+				break;
+			case 'ArrowRight':
+				deltaX = 1;
+				break;
+		}
+
+		// 遍历所有选中的节点进行移动
+		selectedNodes.forEach(node => {
+			const newNodeX = node.x + deltaX;
+			const newNodeY = node.y + deltaY;
+
+			// 获取节点模型并移动
+			const nodeModel = lf.value.getNodeModelById(node.id);
+			if (nodeModel) {
+				nodeModel.moveTo({x: newNodeX, y: newNodeY});
+			}
+		});
+		return
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.flow-editor {
+	display: flex;
+	height: 100%;
+	position: relative;
+
+	.flow-container {
+		flex: 1;
+		width: 100%;
+		height: calc(100% - 3px);
+	}
+
+	.right-panel {
+		width: 320px;
+		background: #fff;
+		border-left: 1px solid #ddd;
+		padding: 10px;
+	}
+
+	:deep(.lf-mini-map) {
+		background: #FFF;
+		border: 1px solid #eee;
+		padding: 2px;
+	}
+
+	:deep(.lf-mini-map-header) {
+		background: #f5f5f5;
+		border: 0;
+		height: 24px;
+		line-height: 24px;
+	}
+
+	:deep(.lf-mini-map-close) {
+		height: 22px;
+		width: 22px;
+	}
+
+	:deep(.lf-minimap-viewport) {
+		border: 2px solid #409EFF;
+		background-color: transparent;
+	}
+}
+
+</style>
diff --git a/src/views/tools/flow/left.vue b/src/views/tools/flow/left.vue
new file mode 100644
index 0000000..5f2f09f
--- /dev/null
+++ b/src/views/tools/flow/left.vue
@@ -0,0 +1,133 @@
+<template>
+	<el-aside class="left-panel">
+		<el-collapse v-model="node" accordion>
+			<el-collapse-item title="开始事件" name="start">
+				<div class="panel-item" v-for="item in startList" :key="item.type" @mousedown="startDrag(item)">
+					<el-icon size="16" color="#67C23A">
+						<component :is="item.icon"/>
+					</el-icon>
+					{{ item.label }}
+				</div>
+			</el-collapse-item>
+			<el-collapse-item title="活动事件" name="event">
+				<div class="panel-item" v-for="item in eventList" :key="item.type" @mousedown="startDrag(item)">
+					<el-icon size="16" color="#409EFF">
+						<component :is="item.icon"/>
+					</el-icon>
+					{{ item.label }}
+				</div>
+			</el-collapse-item>
+			<el-collapse-item title="网关事件" name="gateway">
+				<div class="panel-item" v-for="item in gatewayList" :key="item.type" @mousedown="startDrag(item)">
+					<el-icon size="16" color="#E6A23C">
+						<component :is="item.icon"/>
+					</el-icon>
+					{{ item.label }}
+				</div>
+			</el-collapse-item>
+			<el-collapse-item title="捕获事件" name="catch">
+				<div class="panel-item" v-for="item in catchList" :key="item.type" @mousedown="startDrag(item)">
+					<el-icon size="16" color="#FF85C0">
+						<component :is="item.icon"/>
+					</el-icon>
+					{{ item.label }}
+				</div>
+			</el-collapse-item>
+			<el-collapse-item title="结束事件" name="end">
+				<div class="panel-item" v-for="item in endList" :key="item.type" @mousedown="startDrag(item)">
+					<el-icon size="16" color="#F56C6C">
+						<component :is="item.icon"/>
+					</el-icon>
+					{{ item.label }}
+				</div>
+			</el-collapse-item>
+		</el-collapse>
+	</el-aside>
+</template>
+
+<script setup lang="ts">
+import {reactive, ref} from "vue";
+import LogicFlow from "@logicflow/core";
+import {START_NODE_TYPES} from "./model/StartNode"
+import {EVENT_NODE_TYPES} from "./model/EventNode"
+import {GATEWAY_NODE_TYPES} from "./model/GatewayNode"
+import {CATCH_NODE_TYPES} from "./model/CatchNode"
+import {END_NODE_TYPES} from "./model/EndNode"
+
+interface Node {
+	type: string,
+	label: string,
+	icon: string
+}
+
+const props = defineProps({
+	lf: {type: LogicFlow}
+})
+
+const node = ref('start')
+
+const startList = reactive<Node[]>([
+	{type: START_NODE_TYPES.BASIC, label: "开始节点", icon: "el-icon-video-play"},
+	{type: START_NODE_TYPES.TIMER, label: "定时节点", icon: "el-icon-clock"},
+	{type: START_NODE_TYPES.MESSAGE, label: "消息节点", icon: "pi-icon-message"},
+	{type: START_NODE_TYPES.COMMAND, label: "指令节点", icon: "pi-icon-command"}
+])
+const eventList = reactive<Node[]>([
+	{type: EVENT_NODE_TYPES.APPROVAL, label: "审批节点", icon: "pi-icon-approval"},
+	{type: EVENT_NODE_TYPES.SCRIPT, label: "脚本节点", icon: "pi-icon-script"},
+	{type: EVENT_NODE_TYPES.CUSTOM, label: "自定义节点", icon: "pi-icon-custom"},
+	{type: EVENT_NODE_TYPES.EMAIL, label: "邮件节点", icon: "el-icon-message"},
+	{type: EVENT_NODE_TYPES.ACCEPT, label: "接收节点", icon: "pi-icon-accept"}
+])
+const gatewayList = reactive<Node[]>([
+	{type: GATEWAY_NODE_TYPES.EXCLUSIVE, label: "排他节点", icon: "pi-icon-exclusive"},
+	{type: GATEWAY_NODE_TYPES.INCLUSIVE, label: "并行网关", icon: "pi-icon-inclusive"},
+	{type: GATEWAY_NODE_TYPES.PARALLEL, label: "包容网关", icon: "pi-icon-parallel"}
+])
+const catchList = reactive<Node[]>([
+	{type: CATCH_NODE_TYPES.TIMER, label: "定时节点", icon: "el-icon-clock"},
+	{type: CATCH_NODE_TYPES.MESSAGE, label: "消息节点", icon: "pi-icon-message"},
+	{type: CATCH_NODE_TYPES.COMMAND, label: "指令节点", icon: "pi-icon-command"}
+])
+const endList = reactive<Node[]>([
+	{type: END_NODE_TYPES.CLOSE, label: "结束节点", icon: "pi-icon-end"}
+])
+
+/** 提供拖拽到画布功能 */
+function startDrag(item: Node) {
+	props.lf.dnd.startDrag({type: item.type, text: item.label});
+}
+</script>
+
+<style lang="scss" scoped>
+.left-panel {
+	width: 130px;
+	background: #fff;
+	padding: 10px;
+	user-select: none;
+
+	.panel-item {
+		padding: 8px;
+		background: #eef2ff;
+		margin-bottom: 10px;
+		border-radius: 6px;
+		cursor: grab;
+		display: flex;
+		align-items: center;
+		gap: 5px;
+	}
+
+	:deep(.el-collapse) {
+		border: 0;
+	}
+
+	:deep(.el-collapse-item__content) {
+		padding-bottom: 0;
+	}
+}
+
+.left-panel {
+	overflow-y: auto;
+	scrollbar-width: none;
+}
+</style>
diff --git a/src/views/tools/flow/menu.vue b/src/views/tools/flow/menu.vue
new file mode 100644
index 0000000..c56a00f
--- /dev/null
+++ b/src/views/tools/flow/menu.vue
@@ -0,0 +1,132 @@
+<template>
+	<div class="menu-panel">
+		<el-icon size="18" title="放大" @click="lf.zoom(true)">
+			<component :is="'el-icon-zoom-in'"/>
+		</el-icon>
+		<el-icon size="18" title="缩小" @click="lf.zoom(false)">
+			<component :is="'el-icon-zoom-out'"/>
+		</el-icon>
+		<el-icon size="18" title="大小还原" @click="lf.resetZoom()">
+			<component :is="'el-icon-refresh-left'"/>
+		</el-icon>
+		<el-icon size="18" title="居中" @click="lf.translateCenter()">
+			<component :is="'el-icon-aim'"/>
+		</el-icon>
+		<el-icon size="18" title="位置还原" @click="lf.resetTranslate()">
+			<component :is="'el-icon-position'"/>
+		</el-icon>
+		<el-icon :class="{disabled: !canUndo}" size="18" title="上一步" @click="canUndo && lf.undo()">
+			<component :is="'el-icon-back'"/>
+		</el-icon>
+		<el-icon :class="{disabled: !canRedo}" size="18" title="下一步" @click="canRedo && lf.redo()">
+			<component :is="'el-icon-right'"/>
+		</el-icon>
+		<el-icon size="18" title="删除" @click="remove">
+			<component :is="'el-icon-delete'"/>
+		</el-icon>
+		<el-icon size="18" title="小地图" @click="map">
+			<component :is="'el-icon-map-location'"/>
+		</el-icon>
+		<el-icon size="18" title="下载图片" @click="download">
+			<component :is="'el-icon-download'"/>
+		</el-icon>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {onMounted, onUnmounted, ref} from "vue";
+import LogicFlow from "@logicflow/core";
+import {ElMessageBox} from "element-plus";
+import {useI18n} from "vue-i18n";
+
+const props = defineProps({
+	lf: {type: LogicFlow}
+})
+const {t} = useI18n()
+
+let canUndo = ref(false)
+let canRedo = ref(false)
+
+const updateHistoryButtons = () => {
+	// 直接从 lf.history 读取最新长度
+	canUndo.value = props.lf.history.undos.length > 0;
+	canRedo.value = props.lf.history.redos.length > 0;
+};
+
+onMounted(() => {
+	if (props.lf) {
+		props.lf.on('history:change', updateHistoryButtons)
+		// 初始化一次状态
+		updateHistoryButtons()
+	}
+})
+
+onUnmounted(() => {
+	// 记得移除监听器
+	props.lf?.off('history:change', updateHistoryButtons)
+})
+
+function remove() {
+	// 在你的Vue组件或事件回调中
+	const selectedElements = props.lf.getSelectElements()
+	// 提取选中的节点
+	const selectedNodes = selectedElements.nodes
+	if (selectedNodes.length > 0) {
+		ElMessageBox.confirm(t('flow.deleteNode'), t('system.warning'), {
+			confirmButtonText: t('system.ok'), cancelButtonText: t('system.cancel'), type: 'warning'
+		}).then(() => {
+			props.lf.deleteNode(selectedNodes[0].id)
+		}).catch(() => {
+		})
+		return
+	}
+	// 提取选中的连线
+	const selectedEdges = selectedElements.edges
+	if (selectedEdges.length > 0) {
+		ElMessageBox.confirm(t('flow.deleteLine'), t('system.warning'), {
+			confirmButtonText: t('system.ok'), cancelButtonText: t('system.cancel'), type: 'warning'
+		}).then(() => {
+			props.lf.deleteEdge(selectedEdges[0].id)
+		}).catch(() => {
+		})
+		return
+	}
+}
+
+function map() {
+	const miniMap = props.lf.extension.miniMap as any
+	if (miniMap.isShow) {
+		miniMap.hide()
+	} else {
+		miniMap.show()
+	}
+}
+
+function download() {
+	props.lf.getSnapshot("下载-" + (Date.now()), {backgroundColor: "#FFFFFF"})
+}
+</script>
+
+<style lang="scss" scoped>
+.menu-panel {
+	background: rgb(255, 255, 255);
+	top: 10px;
+	right: 330px;
+	border-radius: 12px;
+	display: flex;
+	align-items: center;
+	position: absolute;
+	z-index: 999;
+	padding: 10px;
+	box-shadow: 3px 0 10px 1px #e4e0db;
+	gap: 10px;
+
+	i {
+		cursor: pointer;
+	}
+
+	.disabled {
+		color: #909399;
+	}
+}
+</style>
diff --git a/src/views/tools/flow/model/CatchNode.ts b/src/views/tools/flow/model/CatchNode.ts
new file mode 100644
index 0000000..2c6ec67
--- /dev/null
+++ b/src/views/tools/flow/model/CatchNode.ts
@@ -0,0 +1,70 @@
+import {RectNodeModel, RectNode, h} from "@logicflow/core"
+
+export const CATCH_NODE_TYPES = {
+	TIMER: 'catch-timer',
+	MESSAGE: 'catch-message',
+	COMMAND: 'catch-command'
+};
+
+export class CatchNodeModel extends RectNodeModel {
+	initNodeData(data) {
+		super.initNodeData(data)
+		// 默认尺寸
+		this.width = data.width || 40
+		this.height = data.height || 40
+		// 禁止编辑
+		this.text.editable = false
+		this.text.draggable = false
+	}
+
+	getTextStyle() {
+		return {
+			...super.getTextStyle(),
+			display: 'none'
+		};
+	}
+}
+
+export class CatchNodeView extends RectNode {
+	getShape() {
+		const {model} = this.props;
+		const {x, y, width, height, type} = model;
+
+		let iconPaths: string[] = [];
+		switch (type) {
+			case CATCH_NODE_TYPES.TIMER:
+				iconPaths = ['M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768m0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896', 'M480 256a32 32 0 0 1 32 32v256a32 32 0 0 1-64 0V288a32 32 0 0 1 32-32', 'M500.641792 243.539968h-44.91264v322.17088h322.17088v-44.91264h-277.25824z']
+				break;
+			case CATCH_NODE_TYPES.MESSAGE:
+				iconPaths = ['M529.222243 943.53334c-247.171426 0-448.25314-201.081715-448.25314-448.241884 0-247.171426 201.081715-448.25314 448.25314-448.25314s448.25314 201.081715 448.25314 448.25314C977.475384 742.451626 776.393669 943.53334 529.222243 943.53334zM529.222243 80.927147c-228.483808 0-414.364309 185.880501-414.364309 414.364309 0 228.472552 185.880501 414.353053 414.364309 414.353053S943.586552 723.764008 943.586552 495.291456C943.586552 266.807648 757.706051 80.927147 529.222243 80.927147z', 'M770.723529 539.980261c-24.644283 0-44.677549-20.044522-44.677549-44.688805s20.033265-44.699038 44.677549-44.699038 44.699038 20.054755 44.699038 44.699038S795.367813 539.980261 770.723529 539.980261z', 'M529.046235 539.980261c-24.644283 0-44.699038-20.044522-44.699038-44.688805s20.054755-44.699038 44.699038-44.699038 44.677549 20.054755 44.677549 44.699038S553.690518 539.980261 529.046235 539.980261z', 'M295.068296 539.980261c-24.644283 0-44.699038-20.044522-44.699038-44.688805s20.054755-44.699038 44.699038-44.699038 44.677549 20.054755 44.677549 44.699038S319.712579 539.980261 295.068296 539.980261z'];
+				break;
+			case CATCH_NODE_TYPES.COMMAND:
+				iconPaths = ['M512 0C229.218 0 0 229.218 0 512s229.218 512 512 512 512-229.218 512-512S794.782 0 512 0z m0 944c-238.594 0-432-193.406-432-432S273.406 80 512 80s432 193.406 432 432-193.406 432-432 432z', 'M512 672.312c-17.656 0-32 14.282-32 31.968s14.344 32.032 32 32.032 32-14.344 32-32.032-14.344-31.968-32-31.968zM512 544.062c-46.25 0-87.124 21.25-114.718 54.094l29.094 38.782c18.594-27.468 49.968-45.5 85.624-45.5s67.032 18.032 85.594 45.5l29.156-38.782c-27.656-32.844-68.5-54.094-114.75-54.094zM326.062 491.656l28.75 38.156c39.812-41 95.468-66.562 157.188-66.562 61.688 0 117.282 25.562 157.218 66.562l28.656-38.188c-48.062-46.812-113.562-75.75-185.876-75.75-72.374 0.002-137.874 28.938-185.936 75.782z', 'M256 387.188l31.124 41.5c59.124-54.844 137.968-88.656 224.876-88.656s165.75 33.812 224.812 88.656L768 387.124c-67.844-61.188-157.468-98.782-256-98.782-98.562 0.002-188.124 37.596-256 98.846z'];
+				break;
+		}
+		// 图标缩放比例
+		const iconScale = 0.025;
+
+		return h('g', {},
+			// 方形
+			h('rect', {
+				x: x - width / 2,
+				y: y - height / 2,
+				width,
+				height,
+				fill: '#FDAED5',
+				stroke: '#FF85C0',
+				strokeWidth: 2,
+				rx: 10,
+				fillOpacity: 0.3,
+				strokeOpacity: 1
+			}),
+
+			...iconPaths.map(d => h("path", {
+				d,
+				fill: '#FF85C0',
+				transform: `translate(${x}, ${y}) scale(${iconScale}) translate(-512,-512)`
+			}))
+		);
+	}
+}
diff --git a/src/views/tools/flow/model/CustomLine.ts b/src/views/tools/flow/model/CustomLine.ts
new file mode 100644
index 0000000..418a664
--- /dev/null
+++ b/src/views/tools/flow/model/CustomLine.ts
@@ -0,0 +1,47 @@
+import {PolylineEdgeModel, PolylineEdge, h} from '@logicflow/core';
+
+export const CUSTOM_LINE = {
+	LINE_TYPE: 'line'
+};
+
+// 自定义连线模型
+export class CustomLineModel extends PolylineEdgeModel {
+	initEdgeData(data) {
+		super.initEdgeData(data);
+
+		// 禁止编辑标签
+		this.text.editable = false;
+		this.text.draggable = false;
+	}
+
+	getEdgeStyle() {
+		const style = super.getEdgeStyle();
+		const {isSelected} = this;
+
+		if (isSelected) {
+			style.strokeWidth = 3
+			style.stroke = "#909399"
+		} else {
+			style.strokeWidth = 2
+			style.stroke = "#B1B3B8"
+		}
+		return style;
+	}
+
+	setAttributes() {
+		this.isAnimation = true
+	}
+
+	getEdgeAnimationStyle() {
+		const style = super.getEdgeAnimationStyle()
+		style.strokeDasharray = '15 5'
+		style.animationDuration = '10s'
+		style.stroke = '#B1B3B8'
+		return style
+	}
+}
+
+export class CustomLine extends PolylineEdge {
+
+}
+
diff --git a/src/views/tools/flow/model/EndNode.ts b/src/views/tools/flow/model/EndNode.ts
new file mode 100644
index 0000000..011127c
--- /dev/null
+++ b/src/views/tools/flow/model/EndNode.ts
@@ -0,0 +1,65 @@
+import {CircleNodeModel, CircleNode, h} from "@logicflow/core"
+
+export const END_NODE_TYPES = {
+	CLOSE: 'end-close'
+};
+
+export class EndNodeModel extends CircleNodeModel {
+	initNodeData(data) {
+		super.initNodeData(data);
+		this.r = data.r || 20;
+		// 禁止编辑
+		this.text.editable = false;
+		this.text.draggable = false;
+	}
+
+	/**
+	 * 默认锚点：去掉右侧
+	 */
+	getDefaultAnchor() {
+		const anchors = super.getDefaultAnchor();
+		return anchors.filter(a => {
+			return a.x <= this.x;
+		});
+	}
+
+	getTextStyle() {
+		return {
+			...super.getTextStyle(),
+			display: 'none'
+		};
+	}
+}
+
+export class EndNodeView extends CircleNode {
+	getShape() {
+		const {model} = this.props
+		const {x, y, r, type} = model
+
+		let iconPaths: string[] = [];
+		switch (type) {
+			case END_NODE_TYPES.CLOSE:
+				iconPaths = ['M678.528 642.304c0 17.6-14.4 32-32 32h-268.992a32 32 0 0 1-32-32V381.696a32 32 0 0 1 32-32h268.992c17.6 0 32 14.4 32 32v260.608z']; // 三角形
+				break;
+		}
+
+		return h('g', {},
+			// 外圆
+			h('circle', {
+				cx: x,
+				cy: y,
+				r,
+				fill: '#F89898',
+				stroke: '#F56C6C',
+				strokeWidth: 2,
+				fillOpacity: 0.3,
+				strokeOpacity: 1
+			}),
+			...iconPaths.map(d => h("path", {
+				d,
+				fill: '#F56C6C',
+				transform: `translate(${x}, ${y}) scale(0.03) translate(-512, -512)`
+			}))
+		)
+	}
+}
diff --git a/src/views/tools/flow/model/EventNode.ts b/src/views/tools/flow/model/EventNode.ts
new file mode 100644
index 0000000..1777f72
--- /dev/null
+++ b/src/views/tools/flow/model/EventNode.ts
@@ -0,0 +1,94 @@
+import {RectNodeModel, RectNode, h} from "@logicflow/core"
+
+export const EVENT_NODE_TYPES = {
+	APPROVAL: 'event-approval',
+	SCRIPT: 'event-script',
+	CUSTOM: 'event-custom',
+	EMAIL: 'event-email',
+	ACCEPT: 'event-accept'
+};
+
+export class EventNodeModel extends RectNodeModel {
+	initNodeData(data) {
+		super.initNodeData(data);
+		// 默认尺寸
+		this.width = data.width || 120;
+		this.height = data.height || 50;
+		// 禁止编辑
+		this.text.editable = false;
+		this.text.draggable = false;
+	}
+
+	getTextStyle() {
+		return {
+			...super.getTextStyle(),
+			display: 'none'
+		};
+	}
+}
+
+export class EventNodeView extends RectNode {
+	getShape() {
+		const {model} = this.props
+		const {x, y, width, height, type, text} = model
+
+		let iconPaths: string[] = [];
+		switch (type) {
+			case EVENT_NODE_TYPES.APPROVAL:
+				iconPaths = ['M896 928H128c-17.6 0-32-14.4-32-32s14.4-32 32-32h768c17.6 0 32 14.4 32 32s-14.4 32-32 32z m0-128H128c-17.6 0-32-14.4-32-32V608c0-52.8 43.2-96 96-96h204.8c-6.4-38.4-25.6-75.2-52.8-107.2-36.8-41.6-56-94.4-56-148.8 0-60.8 24-118.4 68.8-161.6 44.8-43.2 102.4-64 164.8-62.4C636.8 36.8 734.4 136 736 251.2c1.6 57.6-20.8 113.6-59.2 156.8-27.2 28.8-43.2 64-49.6 104H832c52.8 0 96 43.2 96 96v160c0 17.6-14.4 32-32 32z m-736-64h704V608c0-17.6-14.4-32-32-32H592c-17.6 0-32-14.4-32-32 0-67.2 24-131.2 68.8-179.2 28.8-30.4 43.2-70.4 43.2-112-1.6-83.2-70.4-153.6-153.6-156.8-44.8-1.6-86.4 14.4-116.8 44.8-32 30.4-49.6 72-49.6 115.2 0 38.4 14.4 76.8 40 105.6 46.4 52.8 72 116.8 72 182.4 0 17.6-14.4 32-32 32H192c-17.6 0-32 14.4-32 32v128z']; // 三角形
+				break;
+			case EVENT_NODE_TYPES.SCRIPT:
+				iconPaths = ['M934 271c0-90-73-163-163-163H292.3c-66.5 0-118.8 56.7-113.5 122.9L221.1 704H91l-1 54c0 84.6 66.4 153.6 150 157.8v0.2h424.3c98.2 0 177.7-79.6 177.7-177.7L795.8 328H934v-57zM171.6 834.4c-20.3-20.3-31.5-47.3-31.6-76l0.1-4.4h85.4l9.9 111.3c-24-2.8-46.3-13.5-63.8-30.9zM792 740.9c-0.7 33.2-13.9 64.2-37.4 87.7-24.1 24.1-56.2 37.4-90.3 37.4H285.7l-57.1-639.3c-1.4-17.9 4.6-35 16.8-48.2 12.2-13.2 28.9-20.5 46.9-20.5h19c23.4 26.3 37.7 61 37.7 99 0 25.7-6.5 49.9-18 71h414.4L792 740.9zM884 278H397.9c0.7-7 1.1-14 1.1-21 0-36-9.4-69.8-26-99h398c30.2 0 58.6 11.8 79.9 33.1S884 240.8 884 271v7zM664.5 515h-297v-50h297v50z m0 123.2h-297v-50h297v50z'];
+				break;
+			case EVENT_NODE_TYPES.CUSTOM:
+				iconPaths = ['M811.008 768.170667v106.666666a106.666667 106.666667 0 0 1-106.666667 106.666667h-128a21.248 21.248 0 0 1-21.333333-21.333333V938.666667c0-75.52-43.306667-127.872-128.341333-127.872-84.224 0-128.085333 52.821333-128.085334 127.872v21.461333a21.333333 21.333333 0 0 1-21.333333 21.333333h-128a106.666667 106.666667 0 0 1-106.666667-106.709333l0.426667-128a21.333333 21.333333 0 0 1 21.333333-21.248h42.666667c58.752 0 106.410667-55.210667 106.410667-128 0-73.386667-47.36-128-106.410667-128H64.213333a21.333333 21.333333 0 0 1-21.333333-21.333333v-128a106.666667 106.666667 0 0 1 106.666667-106.666667h106.368V213.333333c0-97.066667 61.013333-170.538667 170.752-170.538666 107.008 0 171.392 75.434667 171.392 170.538666v0.128h106.837333a106.666667 106.666667 0 0 1 106.666667 106.666667v106.666667h20.778666c84.053333 0 149.077333 75.008 149.077334 170.666666 0 95.104-65.28 170.666667-149.077334 170.666667h-21.333333z m-42.666667-20.736v-0.597334a21.333333 21.333333 0 0 1 21.333334-21.333333h42.666666c58.752 0 106.410667-55.210667 106.410667-128 0-73.386667-47.36-128-106.410667-128h-42.666666a21.333333 21.333333 0 0 1-20.778667-26.325333V320.128a64 64 0 0 0-64-64h-126.890667a21.76 21.76 0 0 1-1.28 0 21.333333 21.333333 0 0 1-21.333333-21.333333V213.333333c0-72.917333-46.933333-127.872-128.725333-127.872-84.224 0-128.085333 52.821333-128.085334 127.872v21.461334a21.248 21.248 0 0 1-21.333333 21.333333H149.546667a64 64 0 0 0-64 64v106.666667h21.461333c84.053333 0 149.077333 75.008 149.077333 170.666666 0 95.104-65.28 170.666667-149.077333 170.666667h-21.418667l-0.341333 106.666667a64 64 0 0 0 64 64h106.666667V938.666667c0-97.066667 61.013333-170.538667 170.752-170.538667 110.592 0 171.008 73.002667 171.008 170.538667v0.170666h106.666666a64 64 0 0 0 64-64v-127.402666z'];
+				break;
+			case EVENT_NODE_TYPES.EMAIL:
+				iconPaths = ['M128 224v512a64 64 0 0 0 64 64h640a64 64 0 0 0 64-64V224zm0-64h768a64 64 0 0 1 64 64v512a128 128 0 0 1-128 128H192A128 128 0 0 1 64 736V224a64 64 0 0 1 64-64', 'M904 224 656.512 506.88a192 192 0 0 1-289.024 0L120 224zm-698.944 0 210.56 240.704a128 128 0 0 0 192.704 0L818.944 224z'];
+				break;
+			case EVENT_NODE_TYPES.ACCEPT:
+				iconPaths = ['M960 317.03h-65.41V714.8c0 30.93-25.07 56-56 56H185.41c-30.93 0-56-25.07-56-56V317.03H64v521.16c0 30.93 25.07 56 56 56h784c30.93 0 56-25.07 56-56V317.03zM404.37 129.81h215.25v72.74H404.37z', 'M621.6 501V249.08H406.34V501H302.78L512 710.22 721.22 501z'];
+				break;
+		}
+
+		// 图标缩放比例
+		const iconScale = 0.015;
+
+		// 图标在矩形左上角偏移
+		const iconOffsetX = -width/2 + 16; // 左边距16px
+		const iconOffsetY = -height/2 + 16; // 上边距16px
+
+		return h('g', {},
+			// 矩形
+			h('rect', {
+				x: x - width / 2,
+				y: y - height / 2,
+				width,
+				height,
+				fill: '#79BBFF',
+				stroke: '#409EFF',
+				strokeWidth: 2,
+				rx: 10,
+				fillOpacity: 0.3,
+				strokeOpacity: 1
+			}),
+
+			// 图标左上角
+			...iconPaths.map(d => h('path', {
+				d,
+				fill: '#409EFF',
+				transform: `translate(${x + iconOffsetX}, ${y + iconOffsetY}) scale(${iconScale}) translate(-512,-512)`
+			})),
+
+			// 文字居中
+			h('text', {
+				x,
+				y,
+				textAnchor: 'middle',
+				dominantBaseline: 'middle',
+				fontSize: 14,
+				fill: '#333'
+			}, text.value)
+		);
+	}
+}
diff --git a/src/views/tools/flow/model/GatewayNode.ts b/src/views/tools/flow/model/GatewayNode.ts
new file mode 100644
index 0000000..c692fe2
--- /dev/null
+++ b/src/views/tools/flow/model/GatewayNode.ts
@@ -0,0 +1,94 @@
+import {BaseNodeModel, BaseNode, h} from "@logicflow/core"
+
+export const GATEWAY_NODE_TYPES = {
+	EXCLUSIVE: 'gateway-exclusive',
+	PARALLEL: 'gateway-parallel',
+	INCLUSIVE: 'gateway-inclusive'
+};
+
+export class GatewayNodeModel extends BaseNodeModel {
+	initNodeData(data) {
+		super.initNodeData(data)
+		// 默认尺寸
+		this.width = data.width || 50
+		this.height = data.height || 50
+		// 禁止编辑
+		this.text.editable = false
+		this.text.draggable = false
+		this.allowOutgoing = true
+		this.allowIncoming = true
+
+		this.ports = [
+			{ id: 'top', type: 'inout', position: { x: 0.5, y: 0 } },
+			{ id: 'right', type: 'inout', position: { x: 1, y: 0.5 } },
+			{ id: 'bottom', type: 'inout', position: { x: 0.5, y: 1 } },
+			{ id: 'left', type: 'inout', position: { x: 0, y: 0.5 } }
+		];
+	}
+
+	getTextStyle() {
+		return {
+			...super.getTextStyle(),
+			display: 'none'
+		};
+	}
+
+	// 返回默认锚点（四个顶点）
+	getDefaultAnchor() {
+		const { x, y, width, height } = this;
+		return this.ports.map(port => ({
+			id: port.id,
+			x: x + (port.position.x - 0.5) * width,
+			y: y + (port.position.y - 0.5) * height
+		}));
+	}
+}
+
+export class GatewayNodeView extends BaseNode {
+	getShape() {
+		const {model} = this.props;
+		const {x, y, width, height, type} = model;
+
+		// 四个顶点
+		const points = [
+			[x, y - height / 2],  // 上
+			[x + width / 2, y],   // 右
+			[x, y + height / 2],  // 下
+			[x - width / 2, y]    // 左
+		];
+
+		// 拼接 path 字符串
+		const pathD = `M ${points.map(p => p.join(',')).join(' L ')} Z`;
+		let iconPaths: string[] = [];
+
+		switch (type) {
+			case GATEWAY_NODE_TYPES.EXCLUSIVE:
+				iconPaths = ['M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z'];
+				break;
+			case GATEWAY_NODE_TYPES.PARALLEL:
+				iconPaths = ['M512.00337692 223.62507194c-39.07811828 0-76.40824868 7.54812851-112.02349786 22.7966725-35.61524846 15.24854397-66.28448731 35.85361048-92.03419966 61.53711098-25.75633368 25.82254479-46.28194643 56.45205638-61.51062641 92.02757833-15.26178662 35.70794488-22.88274757 72.93213694-22.88274757 112.07646705 0 39.01190645 7.62096168 76.36852217 22.88274757 111.94404411 15.22868071 35.71456621 35.75429346 66.3440778 61.51062641 92.1666226 25.74971235 25.69012185 56.41895047 46.14952278 92.03419966 61.53049039a284.03475437 284.03475437 0 0 0 112.02349786 22.80329382c39.06487635 0 76.39500676-7.69379412 112.01025522-22.80329382 35.61524846-15.38096763 66.28448731-35.84698987 92.03419965-61.5304904 25.75633368-25.82254479 46.28194643-56.45205638 61.51062642-92.16662258 15.28827122-35.57552195 22.88274757-72.93213694 22.88274758-111.94404412 0-39.1443301-7.5944771-76.36852217-22.88274758-112.07646704-15.22868071-35.57552195-35.75429346-66.21165414-61.51062642-92.03419894-25.74971235-25.67687918-56.41895047-46.28194643-92.03419965-61.53049038C588.39838368 231.17982179 551.06163194 223.62507194 511.99675559 223.62507194m0-82.41364616c50.20167629 0 98.25809517 9.75297643 144.02359033 29.39797427 45.79860107 19.63837652 85.22764104 46.0104785 118.27387798 79.10968462 33.07272152 32.96678243 59.41833818 72.38920181 79.03023011 118.2606353 19.61851326 45.73901058 29.43770153 93.81529271 29.45094418 143.94413656 0.03972724 50.27450871-9.81918826 98.35079085-29.45094418 144.08980216-19.62513458 45.87143423-45.97075126 85.29385288-79.03023011 118.254014-33.03299426 33.10582743-72.43554966 59.47792868-118.27387797 79.12292725C610.19526027 872.88993219 562.19181056 882.78195289 512.00337692 882.78195289c-50.18843363 0-98.19188333-9.89202143-144.02359031-29.39797427-45.85157025-19.63837652-85.26736828-46.0104785-118.28712063-79.1096846C216.62656579 741.30751156 190.28757045 701.8850922 170.66243587 656.00703736 151.03068066 610.27464813 141.17176516 562.19836599 141.21149168 511.93047787c0.01324266-50.13546446 9.83243092-98.21174661 29.45094419-143.94413656 19.61189194-45.88467617 45.950888-85.3004742 79.03023011-118.26725664 33.0396156-33.10582743 72.47527689-59.47130809 118.28712063-79.11630594C413.73866043 150.96440221 461.78845799 141.21142578 511.99675559 141.21142578'];
+				break;
+			case GATEWAY_NODE_TYPES.INCLUSIVE:
+				iconPaths = ['M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64z'];
+				break;
+		}
+
+		return h('g', {},
+			// 菱形
+			h('path', {
+				d: pathD,
+				fill: '#EEBE77',
+				stroke: '#E6A23C',
+				strokeWidth: 2,
+				fillOpacity: 0.3,
+				strokeOpacity: 1
+			}),
+
+			...iconPaths.map(d => h("path", {
+				d,
+				fill: '#E6A23C',
+				transform: `translate(${x}, ${y}) scale(0.03) translate(-512, -512)`
+			}))
+		);
+	}
+}
diff --git a/src/views/tools/flow/model/StartNode.ts b/src/views/tools/flow/model/StartNode.ts
new file mode 100644
index 0000000..d83b4d6
--- /dev/null
+++ b/src/views/tools/flow/model/StartNode.ts
@@ -0,0 +1,77 @@
+import {CircleNodeModel, CircleNode, h} from "@logicflow/core"
+
+export const START_NODE_TYPES = {
+	BASIC: 'start-basic',
+	TIMER: 'start-timer',
+	MESSAGE: 'start-message',
+	COMMAND: 'start-command'
+};
+
+export class StartNodeModel extends CircleNodeModel {
+	initNodeData(data) {
+		super.initNodeData(data);
+		this.r = data.r || 20;
+		// 禁止编辑
+		this.text.editable = false;
+		this.text.draggable = false;
+	}
+
+	/**
+	 * 默认锚点：去掉左侧
+	 */
+	getDefaultAnchor() {
+		const anchors = super.getDefaultAnchor();
+		return anchors.filter(a => {
+			return a.x >= this.x;
+		});
+	}
+
+	getTextStyle() {
+		return {
+			...super.getTextStyle(),
+			display: 'none'
+		};
+	}
+}
+
+export class StartNodeView extends CircleNode {
+	getShape() {
+		const {model} = this.props
+		const {x, y, r, type} = model
+
+		let iconPaths: string[] = [];
+		switch (type) {
+			case START_NODE_TYPES.BASIC:
+				iconPaths = ['M334.456 840.52a30.112 30.112 0 0 1-30.104-30.104V196.032c0-11.408 6.44-21.816 16.64-26.928a30.048 30.048 0 0 1 31.512 2.848l409.616 307.176a30.104 30.104 0 0 1 0 48.16l-409.616 307.2a29.888 29.888 0 0 1-18.048 6.032zM364.56 256.24v493.976l329.296-247L364.56 256.24z']; // 三角形
+				break;
+			case START_NODE_TYPES.TIMER:
+				iconPaths = ['M480 256a32 32 0 0 1 32 32v256a32 32 0 0 1-64 0V288a32 32 0 0 1 32-32', 'M500.641792 243.539968h-44.91264v322.17088h322.17088v-44.91264h-277.25824z'];
+				break;
+			case START_NODE_TYPES.MESSAGE:
+				iconPaths = ['M770.723529 539.980261c-24.644283 0-44.677549-20.044522-44.677549-44.688805s20.033265-44.699038 44.677549-44.699038 44.699038 20.054755 44.699038 44.699038S795.367813 539.980261 770.723529 539.980261z', 'M529.046235 539.980261c-24.644283 0-44.699038-20.044522-44.699038-44.688805s20.054755-44.699038 44.699038-44.699038 44.677549 20.054755 44.677549 44.699038S553.690518 539.980261 529.046235 539.980261z', 'M295.068296 539.980261c-24.644283 0-44.699038-20.044522-44.699038-44.688805s20.054755-44.699038 44.699038-44.699038 44.677549 20.054755 44.677549 44.699038S319.712579 539.980261 295.068296 539.980261z'];
+				break;
+			case START_NODE_TYPES.COMMAND:
+				iconPaths = ['M512 672.312c-17.656 0-32 14.282-32 31.968s14.344 32.032 32 32.032 32-14.344 32-32.032-14.344-31.968-32-31.968zM512 544.062c-46.25 0-87.124 21.25-114.718 54.094l29.094 38.782c18.594-27.468 49.968-45.5 85.624-45.5s67.032 18.032 85.594 45.5l29.156-38.782c-27.656-32.844-68.5-54.094-114.75-54.094zM326.062 491.656l28.75 38.156c39.812-41 95.468-66.562 157.188-66.562 61.688 0 117.282 25.562 157.218 66.562l28.656-38.188c-48.062-46.812-113.562-75.75-185.876-75.75-72.374 0.002-137.874 28.938-185.936 75.782z', 'M256 387.188l31.124 41.5c59.124-54.844 137.968-88.656 224.876-88.656s165.75 33.812 224.812 88.656L768 387.124c-67.844-61.188-157.468-98.782-256-98.782-98.562 0.002-188.124 37.596-256 98.846z'];
+				break;
+		}
+
+		return h('g', {},
+			// 外圆
+			h('circle', {
+				cx: x,
+				cy: y,
+				r,
+				fill: '#4caf50',
+				stroke: '#67C23A',
+				strokeWidth: 2,
+				fillOpacity: 0.3,
+				strokeOpacity: 1
+			}),
+			...iconPaths.map(d => h("path", {
+				d,
+				fill: '#67C23A',
+				transform: `translate(${x}, ${y}) scale(0.03) translate(-512, -512)`
+			}))
+		)
+	}
+}