diff --git a/src/apis/workFlow/workFlowService.ts b/src/apis/workFlow/workFlowService.ts
index 3f094d9ab2ad15d94c5f30d2fe2e196d24abc8aa..a206facacc2da24a7d1b40792513c8c475646709 100644
--- a/src/apis/workFlow/workFlowService.ts
+++ b/src/apis/workFlow/workFlowService.ts
@@ -64,10 +64,36 @@ export const delFlowTopology = (params: {
   return del(`/api/flow?appId=${params.appId}&flowId=${params.flowId}`);
 };
 
+/**
+ * 获取Choice节点内参数
+ * @param params
+ * @returns
+ */
+export const queryParameter = (params: {
+  appId: string;
+  flowId: string;
+  stepId: string;
+}): Promise<[any, FcResponse<unknown> | undefined]> => {
+  return get('/api/parameter', params);
+};
+
+/**
+ * 获取Choice节点内参数的操作内容
+ * @param params
+ * @returns
+ */
+export const queryParameterOperate = (params: {
+  ParamType: string;
+}): Promise<[any, FcResponse<unknown> | undefined]> => {
+  return get('/api/parameter/operate', params);
+};
+
 export const workFlowApi = {
   queryAllFlowService,
   querySingleFlowServiceNode,
   querySingleFlowTopology,
   delFlowTopology,
   createOrUpdateFlowTopology,
+  queryParameter,
+  queryParameterOperate,
 };
diff --git a/src/assets/svgs/file_download.svg b/src/assets/svgs/file_download.svg
index 283d57e696c0cc738161a593fe5a5af61eb8b81f..1f6be3a0246bb02e909a822390992d01d334597f 100644
--- a/src/assets/svgs/file_download.svg
+++ b/src/assets/svgs/file_download.svg
@@ -3,11 +3,11 @@
 			Created with Pixso.
 	</desc>
 	<defs>
-		<clipPath id="clip124_13873">
-			<rect id="下载" width="16.000000" height="16.000000" fill="white" fill-opacity="0"/>
+		<clipPath id="clip312_5836">
+			<rect id="下载_def" width="16.000000" height="16.000000" fill="white" fill-opacity="0"/>
 		</clipPath>
 	</defs>
-	<g clip-path="url(#clip124_13873)">
-		<path id="合并" d="M10.3408 1.27747Q10.3491 1.28511 10.3569 1.29294L13.9443 4.88066L13.9468 4.88417C14.0942 5.04233 14.1353 5.20049 14.0703 5.35866L14.0703 12.9967C14.0703 13.2677 14.0176 13.5273 13.9126 13.7753C13.8115 14.0147 13.6689 14.2265 13.4844 14.4109C13.2998 14.5953 13.0884 14.7381 12.8486 14.8393C12.6006 14.9442 12.3413 14.9967 12.0703 14.9967L3.93018 14.9967Q3.71094 14.9967 3.50146 14.9509L3.50098 14.9508Q3.32275 14.9117 3.15137 14.8393C2.91211 14.7381 2.7002 14.5953 2.51611 14.4109Q2.37109 14.2662 2.26074 14.099L2.26074 14.0989Q2.16016 13.9465 2.0874 13.7753C1.98242 13.5273 1.93018 13.2677 1.93018 12.9967L1.93018 3.00005Q1.93018 2.7804 1.97607 2.57083L1.97607 2.57082Q2.01514 2.39247 2.0874 2.2214Q2.16016 2.05021 2.26074 1.89777L2.26074 1.89776L2.26074 1.89774Q2.37109 1.73051 2.51611 1.58583Q2.66064 1.44115 2.82812 1.3306L2.82812 1.3306L2.82812 1.33059Q2.98047 1.22983 3.15137 1.15742Q3.32275 1.08508 3.50098 1.046L3.50098 1.046L3.50098 1.04598L3.50098 1.04597Q3.71045 1.00005 3.93018 1.00005L9.6499 1.00005C9.78223 1.00005 9.90967 1.02542 10.0322 1.07617Q10.124 1.11421 10.2056 1.16838L10.2056 1.16839L10.2056 1.1684Q10.2773 1.21656 10.3408 1.27747ZM10.2725 5.59519C10.4585 5.67391 10.6533 5.71327 10.8564 5.71327L13.0703 5.71327L13.0703 12.9967C13.0703 13.1326 13.0439 13.2622 12.9917 13.3858Q12.9575 13.4671 12.9102 13.5401L12.9102 13.5401L12.9097 13.5407L12.9097 13.5407Q12.8525 13.6283 12.7773 13.7038Q12.7017 13.7793 12.6143 13.8362L12.6143 13.8362L12.6138 13.8366L12.6138 13.8366Q12.5405 13.8839 12.4595 13.9183C12.3359 13.9706 12.2061 13.9967 12.0703 13.9967L3.93018 13.9967Q3.81201 13.9967 3.69971 13.9703L3.69922 13.9702Q3.61865 13.9511 3.54102 13.9183Q3.45996 13.8839 3.38672 13.8367L3.38672 13.8365Q3.29883 13.7795 3.22314 13.7038Q3.14746 13.6282 3.09033 13.5405L3.09033 13.5402Q3.04297 13.4672 3.00879 13.3858C2.95654 13.2623 2.93018 13.1326 2.93018 12.9967L2.93018 3.00005Q2.93018 2.88177 2.95654 2.76971L2.95654 2.76969Q2.97559 2.68869 3.00879 2.61095Q3.04297 2.52956 3.09033 2.45656L3.09033 2.45656Q3.14746 2.36867 3.22314 2.29294Q3.29883 2.21721 3.38672 2.1602Q3.45947 2.11285 3.54102 2.07843Q3.61865 2.04554 3.69971 2.02645L3.69971 2.02645Q3.81201 2.00005 3.93018 2.00005L9.35645 2.00005L9.35645 4.21327Q9.35645 4.3766 9.39014 4.53256L9.39014 4.53278Q9.41992 4.6678 9.47461 4.79729Q9.5293 4.92638 9.60498 5.04124L9.60498 5.04126L9.60547 5.04137Q9.68799 5.16603 9.7959 5.27393C9.93408 5.41217 10.0928 5.51926 10.2725 5.59519ZM10.3564 2.70705L10.3564 4.21327Q10.3564 4.31683 10.3931 4.40522Q10.4297 4.4936 10.5029 4.56683Q10.5762 4.64004 10.6646 4.67665L10.6646 4.67666Q10.7529 4.71327 10.8564 4.71327L12.3628 4.71327L10.3564 2.70705ZM8.50098 9.84798L8.50098 5.99994C8.50098 5.71994 8.28125 5.49994 8.00098 5.49994C7.72119 5.49994 7.50098 5.71994 7.50098 5.99994L7.50098 9.85091L6.49658 8.84634C6.29834 8.64835 5.9873 8.64835 5.78955 8.84634C5.59131 9.04433 5.59131 9.35545 5.78955 9.55344L7.646 11.4101Q7.82275 11.5869 7.99951 11.5869Q8.17627 11.5869 8.35303 11.4101L10.21 9.55344C10.4077 9.35545 10.4077 9.04433 10.21 8.84634C10.0117 8.64835 9.70068 8.64835 9.50293 8.84634L8.50098 9.84798Z" clip-rule="evenodd" fill="#8D98AA" fill-opacity="1.000000" fill-rule="evenodd"/>
+	<g clip-path="url(#clip312_5836)">
+		<path id="合并" d="M8.49805 1.30518L8.49805 9.26594L10.8198 6.9444C11.0176 6.74641 11.3286 6.74641 11.5269 6.9444C11.7246 7.1424 11.7246 7.45352 11.5269 7.65151L8.35449 10.8238C8.30566 10.8726 8.25146 10.9092 8.19287 10.9337C8.13379 10.9581 8.06982 10.9703 8.00098 10.9703C7.93164 10.9703 7.86768 10.9581 7.80908 10.9337C7.80811 10.9334 7.80762 10.9331 7.80664 10.9328C7.72656 10.9003 7.65674 10.8477 7.60449 10.7809L4.4751 7.65151C4.27686 7.45352 4.27686 7.1424 4.4751 6.9444C4.67285 6.74641 4.98389 6.74641 5.18213 6.9444L7.49805 9.26038L7.49805 1.30518C7.49805 1.02518 7.71826 0.805176 7.99805 0.805176C8.27783 0.805176 8.49805 1.02518 8.49805 1.30518ZM14.8447 8.45864C14.8447 8.17864 14.625 7.95864 14.3447 7.95865C14.0649 7.95866 13.8447 8.17867 13.8447 8.45866L13.8447 12.6992C13.8447 12.7682 13.8325 12.8322 13.8081 12.8911L13.8081 12.8912C13.7837 12.9501 13.7471 13.0039 13.6982 13.0527C13.6499 13.1015 13.5957 13.1381 13.5371 13.1625L13.5371 13.1626L13.5366 13.1626C13.478 13.187 13.4141 13.1992 13.3447 13.1992L2.65576 13.1992C2.58691 13.1992 2.52246 13.187 2.46387 13.1626C2.40479 13.1382 2.35107 13.1016 2.30225 13.0527C2.25342 13.0039 2.2168 12.9501 2.19238 12.8911C2.16797 12.8322 2.15576 12.7682 2.15576 12.6992L2.15576 8.46062C2.15576 8.18063 1.93555 7.96062 1.65576 7.96062C1.37549 7.96062 1.15576 8.18063 1.15576 8.46062L1.15576 12.6992C1.15576 12.8081 1.16699 12.9145 1.18945 13.0185L1.18945 13.0185L1.18945 13.0185C1.20898 13.1086 1.2373 13.1968 1.27393 13.2832C1.31006 13.3693 1.354 13.4506 1.4043 13.5272L1.4043 13.5272C1.45947 13.6103 1.52295 13.6879 1.59521 13.7598C1.66699 13.8318 1.74463 13.8953 1.82764 13.9504C1.9043 14.0011 1.98584 14.0447 2.07178 14.0811C2.1582 14.1176 2.24609 14.1457 2.33643 14.1652L2.33643 14.1653L2.33643 14.1653C2.44043 14.1879 2.54688 14.1992 2.65576 14.1992L13.3447 14.1992C13.4536 14.1992 13.5601 14.1879 13.6636 14.1654L13.6641 14.1653C13.7544 14.1457 13.8428 14.1176 13.9292 14.0811C14.0151 14.0447 14.0962 14.0012 14.1729 13.9504L14.1729 13.9504L14.1729 13.9504C14.2559 13.8953 14.3335 13.8318 14.4058 13.7598C14.4775 13.6879 14.541 13.6103 14.5962 13.5272C14.647 13.4506 14.6904 13.3693 14.7271 13.2832C14.7632 13.1968 14.7915 13.1085 14.811 13.0184C14.8335 12.9145 14.8447 12.808 14.8447 12.6992L14.8447 8.45864Z" clip-rule="evenodd" fill="#8D98AA" fill-opacity="1.000000" fill-rule="evenodd"/>
 	</g>
 </svg>
diff --git a/src/assets/svgs/file_download_active.svg b/src/assets/svgs/file_download_active.svg
index c072db44196d37edee48be9499d18f0e67744582..eb0a6b00f4407e3212aabcdde210e0b581ee808e 100644
--- a/src/assets/svgs/file_download_active.svg
+++ b/src/assets/svgs/file_download_active.svg
@@ -3,11 +3,11 @@
 			Created with Pixso.
 	</desc>
 	<defs>
-		<clipPath id="clip124_14004">
-			<rect id="下载active" width="16.000000" height="16.000000" fill="white" fill-opacity="0"/>
+		<clipPath id="clip312_5850">
+			<rect id="下载_active" width="16.000000" height="16.000000" fill="white" fill-opacity="0"/>
 		</clipPath>
 	</defs>
-	<g clip-path="url(#clip124_14004)">
-		<path id="合并" d="M13.9487 4.88665L13.9443 4.88066L10.3569 1.29294Q10.3491 1.28513 10.3413 1.27753L10.21 1.14639Q10.1748 1.11125 10.1343 1.08416L10.1343 1.08413Q10.0938 1.05703 10.0479 1.038Q10.002 1.01897 9.9541 1.00946L9.9541 1.00945Q9.90625 0.999939 9.85645 0.999939Q9.81104 0.999939 9.76855 1.00698Q9.70996 1.00005 9.6499 1.00005L3.93018 1.00005Q3.71045 1.00005 3.50098 1.04598L3.50098 1.04598L3.50098 1.046L3.50098 1.046Q3.32275 1.08509 3.15137 1.15742Q2.98047 1.22983 2.82812 1.33059L2.82812 1.33059L2.82812 1.33059L2.82812 1.33059Q2.66064 1.44114 2.51611 1.58583Q2.37109 1.73052 2.26074 1.89776L2.26074 1.89777L2.26074 1.89777Q2.16016 2.05021 2.0874 2.2214Q2.01514 2.39247 1.97607 2.57082L1.97607 2.57083Q1.93018 2.7804 1.93018 3.00005L1.93018 12.9967Q1.93018 13.2162 1.97607 13.4257L1.97607 13.4259L1.97607 13.4259Q2.01514 13.6043 2.0874 13.7753Q2.15967 13.9463 2.26025 14.0986L2.26074 14.099L2.26074 14.099L2.26074 14.099Q2.37109 14.2663 2.51611 14.4109Q2.66064 14.5556 2.82812 14.6662L2.82812 14.6662Q2.98047 14.7669 3.15137 14.8393Q3.32227 14.9116 3.50049 14.9507L3.50098 14.9508Q3.71045 14.9967 3.93018 14.9967L12.0703 14.9967Q12.29 14.9967 12.4995 14.9508L12.4995 14.9508L12.4995 14.9508Q12.6777 14.9117 12.8486 14.8393Q13.02 14.7669 13.1724 14.6662L13.1724 14.6662L13.1724 14.6662Q13.3398 14.5556 13.4844 14.4109Q13.6289 14.2662 13.7397 14.099Q13.8403 13.9465 13.9126 13.7753Q13.9854 13.6043 14.0244 13.426L14.0244 13.4256Q14.0703 13.2162 14.0703 12.9967L14.0703 5.23409Q14.0703 5.22313 14.0698 5.21224Q14.0693 5.10928 14.0332 5.02133Q14.0029 4.9489 13.9487 4.88665ZM10.5371 5.67937Q10.6929 5.71327 10.8564 5.71327L13.0703 5.71327L13.0703 12.9967Q13.0703 13.1148 13.0439 13.2267L13.0439 13.227L13.0439 13.227Q13.0249 13.308 12.9917 13.3858Q12.9575 13.4671 12.9102 13.5401L12.9102 13.5401L12.9097 13.5407L12.9097 13.5407Q12.8525 13.6283 12.7773 13.7038Q12.7017 13.7793 12.6143 13.8362L12.6143 13.8362L12.6138 13.8366L12.6138 13.8366Q12.5405 13.8839 12.4595 13.9183Q12.3813 13.9512 12.3003 13.9703Q12.1885 13.9967 12.0703 13.9967L3.93018 13.9967Q3.81201 13.9967 3.69971 13.9703L3.69971 13.9703Q3.61865 13.9512 3.54102 13.9183Q3.45996 13.8841 3.38721 13.837L3.38672 13.8365L3.38623 13.8363Q3.29883 13.7794 3.22314 13.7038Q3.14746 13.6282 3.09033 13.5405L3.09033 13.5402Q3.04297 13.4672 3.00879 13.3858Q2.97607 13.3085 2.95654 13.2279L2.95654 13.2271Q2.93018 13.115 2.93018 12.9967L2.93018 3.00005Q2.93018 2.88177 2.95654 2.76971L2.95654 2.76969Q2.97559 2.6887 3.00879 2.61095Q3.04297 2.52957 3.09033 2.45657L3.09033 2.45656Q3.14746 2.36868 3.22314 2.29294Q3.29883 2.2172 3.38672 2.1602L3.38672 2.1602Q3.45947 2.11285 3.54102 2.07843Q3.61865 2.04556 3.69971 2.02647L3.69971 2.02645Q3.81201 2.00005 3.93018 2.00005L9.35645 2.00005L9.35645 4.21327Q9.35645 4.37659 9.39014 4.53255L9.39014 4.53278Q9.41992 4.6678 9.47461 4.79729Q9.5293 4.92638 9.60498 5.04124L9.60498 5.04126L9.60547 5.04136Q9.68799 5.16603 9.7959 5.27393Q9.90381 5.38188 10.0283 5.4645L10.0288 5.46464Q10.1436 5.54063 10.2725 5.59519Q10.4019 5.65 10.5371 5.67937ZM10.3564 2.70705L10.3564 4.21327Q10.3564 4.31682 10.3931 4.40521Q10.4297 4.4936 10.5029 4.56682Q10.5762 4.64003 10.6646 4.67665L10.6646 4.67666Q10.7529 4.71327 10.8564 4.71327L12.3628 4.71327L10.3564 2.70705ZM8.50098 9.84798L8.50098 5.99994C8.50098 5.71994 8.28125 5.49994 8.00098 5.49994C7.72119 5.49994 7.50098 5.71994 7.50098 5.99994L7.50098 9.85091L6.49658 8.84634C6.29834 8.64835 5.9873 8.64835 5.78955 8.84634C5.59131 9.04433 5.59131 9.35545 5.78955 9.55344L7.646 11.4101Q7.79248 11.5566 7.99951 11.5566Q8.20703 11.5566 8.35303 11.4101L10.21 9.55344C10.4077 9.35545 10.4077 9.04433 10.21 8.84634C10.0117 8.64835 9.70068 8.64835 9.50293 8.84634L8.50098 9.84798Z" clip-rule="evenodd" fill="#6395FD" fill-opacity="1.000000" fill-rule="evenodd"/>
+	<g clip-path="url(#clip312_5850)">
+		<path id="合并" d="M8.49805 1.30518L8.49805 9.26594L10.8198 6.9444C11.0176 6.74641 11.3286 6.74641 11.5269 6.9444C11.7246 7.14239 11.7246 7.45352 11.5269 7.65151L8.35449 10.8238C8.30566 10.8726 8.25146 10.9092 8.19287 10.9337C8.13379 10.9581 8.06982 10.9703 8.00098 10.9703C7.93164 10.9703 7.86768 10.9581 7.80908 10.9337C7.80811 10.9334 7.80762 10.9331 7.80664 10.9328C7.72656 10.9003 7.65674 10.8477 7.60449 10.7809L4.4751 7.65151C4.27686 7.45352 4.27686 7.14239 4.4751 6.9444C4.67285 6.74641 4.98389 6.74641 5.18213 6.9444L7.49805 9.26038L7.49805 1.30518C7.49805 1.02518 7.71826 0.805176 7.99805 0.805176C8.27783 0.805176 8.49805 1.02518 8.49805 1.30518ZM14.8447 8.45864C14.8447 8.17864 14.625 7.95864 14.3447 7.95865C14.0649 7.95866 13.8447 8.17867 13.8447 8.45866L13.8447 12.6992C13.8447 12.7682 13.8325 12.8322 13.8081 12.8911L13.8081 12.8912C13.7837 12.9501 13.7471 13.0039 13.6982 13.0527C13.6499 13.1015 13.5957 13.1381 13.5371 13.1625L13.5371 13.1626L13.5366 13.1626C13.478 13.187 13.4141 13.1992 13.3447 13.1992L2.65576 13.1992C2.58691 13.1992 2.52246 13.187 2.46387 13.1626C2.40479 13.1382 2.35107 13.1016 2.30225 13.0527C2.25342 13.0039 2.2168 12.9501 2.19238 12.8911C2.16797 12.8322 2.15576 12.7682 2.15576 12.6992L2.15576 8.46063C2.15576 8.18063 1.93555 7.96063 1.65576 7.96063C1.37549 7.96063 1.15576 8.18063 1.15576 8.46063L1.15576 12.6992C1.15576 12.8081 1.16699 12.9145 1.18945 13.0185L1.18945 13.0185L1.18945 13.0185C1.20898 13.1086 1.2373 13.1968 1.27393 13.2832C1.31006 13.3693 1.354 13.4506 1.4043 13.5272L1.4043 13.5272C1.45947 13.6103 1.52295 13.6879 1.59521 13.7598C1.66699 13.8318 1.74463 13.8953 1.82764 13.9504C1.9043 14.0011 1.98584 14.0447 2.07178 14.0811C2.1582 14.1176 2.24609 14.1457 2.33643 14.1652L2.33643 14.1653L2.33643 14.1653C2.44043 14.1879 2.54688 14.1992 2.65576 14.1992L13.3447 14.1992C13.4536 14.1992 13.5601 14.1879 13.6636 14.1654L13.6641 14.1653C13.7544 14.1457 13.8428 14.1176 13.9292 14.0811C14.0151 14.0447 14.0962 14.0012 14.1729 13.9504L14.1729 13.9504L14.1729 13.9504C14.2559 13.8953 14.3335 13.8318 14.4058 13.7598C14.4775 13.6879 14.541 13.6103 14.5962 13.5272C14.647 13.4506 14.6904 13.3693 14.7271 13.2832C14.7632 13.1968 14.7915 13.1085 14.811 13.0184C14.8335 12.9145 14.8447 12.808 14.8447 12.6992L14.8447 8.45864Z" clip-rule="evenodd" fill="#6395FD" fill-opacity="1.000000" fill-rule="evenodd"/>
 	</g>
 </svg>
diff --git a/src/assets/svgs/file_download_hover.svg b/src/assets/svgs/file_download_hover.svg
index 09d8b74fef906ba4786dc0809cf4e1bdf238b54b..855772f215645ea1aad92617fa4f30ba2478bf47 100644
--- a/src/assets/svgs/file_download_hover.svg
+++ b/src/assets/svgs/file_download_hover.svg
@@ -3,11 +3,11 @@
 			Created with Pixso.
 	</desc>
 	<defs>
-		<clipPath id="clip124_13998">
-			<rect id="下载hover" width="16.000000" height="16.000000" fill="white" fill-opacity="0"/>
+		<clipPath id="clip312_5845">
+			<rect id="下载_hover" width="16.000000" height="16.000000" fill="white" fill-opacity="0"/>
 		</clipPath>
 	</defs>
-	<g clip-path="url(#clip124_13998)">
-		<path id="合并" d="M13.9487 4.88665L13.9443 4.88066L10.3569 1.29294Q10.3491 1.28512 10.3413 1.27751L10.21 1.14639Q10.1748 1.11124 10.1343 1.08416L10.1343 1.08413Q10.0938 1.05703 10.0479 1.038Q10.002 1.01897 9.9541 1.00946L9.9541 1.00945Q9.90625 0.999939 9.85645 0.999939Q9.81104 0.999939 9.76855 1.00698Q9.70996 1.00005 9.6499 1.00005L3.93018 1.00005Q3.71045 1.00005 3.50098 1.04597L3.50098 1.04597L3.50098 1.046L3.50098 1.046Q3.32275 1.08509 3.15137 1.15742Q2.98047 1.22982 2.82812 1.33059L2.82812 1.33059L2.82812 1.33059L2.82812 1.33059Q2.66064 1.44114 2.51611 1.58583Q2.37109 1.73051 2.26074 1.89776L2.26074 1.89777L2.26074 1.89777Q2.16016 2.05021 2.0874 2.2214Q2.01514 2.39246 1.97607 2.57082L1.97607 2.57083Q1.93018 2.7804 1.93018 3.00005L1.93018 12.9967Q1.93018 13.2162 1.97607 13.4257L1.97607 13.4259L1.97607 13.4259Q2.01514 13.6043 2.0874 13.7753Q2.15967 13.9463 2.26025 14.0986L2.26074 14.099L2.26074 14.099L2.26074 14.099Q2.37109 14.2663 2.51611 14.4109Q2.66064 14.5556 2.82812 14.6662L2.82812 14.6662Q2.98047 14.7669 3.15137 14.8393Q3.32227 14.9116 3.50049 14.9507L3.50098 14.9508Q3.71045 14.9967 3.93018 14.9967L12.0703 14.9967Q12.29 14.9967 12.4995 14.9508L12.4995 14.9508L12.4995 14.9508Q12.6777 14.9117 12.8486 14.8393Q13.02 14.7669 13.1724 14.6662L13.1724 14.6662L13.1724 14.6662Q13.3398 14.5556 13.4844 14.4109Q13.6289 14.2662 13.7397 14.099Q13.8403 13.9465 13.9126 13.7753Q13.9854 13.6043 14.0244 13.426L14.0244 13.4256Q14.0703 13.2162 14.0703 12.9967L14.0703 5.23409Q14.0703 5.22313 14.0698 5.21223Q14.0693 5.10927 14.0332 5.02133Q14.0029 4.94889 13.9487 4.88665ZM10.5371 5.67937Q10.6929 5.71327 10.8564 5.71327L13.0703 5.71327L13.0703 12.9967Q13.0703 13.1148 13.0439 13.2267L13.0439 13.227L13.0439 13.227Q13.0249 13.308 12.9917 13.3858Q12.9575 13.4671 12.9102 13.5401L12.9102 13.5401L12.9097 13.5407L12.9097 13.5407Q12.8525 13.6283 12.7773 13.7038Q12.7017 13.7793 12.6143 13.8362L12.6143 13.8362L12.6138 13.8366L12.6138 13.8366Q12.5405 13.8839 12.4595 13.9183Q12.3813 13.9512 12.3003 13.9703Q12.1885 13.9967 12.0703 13.9967L3.93018 13.9967Q3.81201 13.9967 3.69971 13.9703L3.69971 13.9703Q3.61865 13.9512 3.54102 13.9183Q3.45996 13.8841 3.38721 13.837L3.38672 13.8365L3.38623 13.8363Q3.29883 13.7794 3.22314 13.7038Q3.14746 13.6282 3.09033 13.5405L3.09033 13.5402Q3.04297 13.4672 3.00879 13.3858Q2.97607 13.3085 2.95654 13.2279L2.95654 13.2271Q2.93018 13.115 2.93018 12.9967L2.93018 3.00005Q2.93018 2.88177 2.95654 2.76971L2.95654 2.76969Q2.97559 2.68869 3.00879 2.61095Q3.04297 2.52957 3.09033 2.45657L3.09033 2.45656Q3.14746 2.36868 3.22314 2.29294Q3.29883 2.2172 3.38672 2.1602L3.38672 2.1602Q3.45947 2.11285 3.54102 2.07842Q3.61865 2.04556 3.69971 2.02647L3.69971 2.02645Q3.81201 2.00005 3.93018 2.00005L9.35645 2.00005L9.35645 4.21327Q9.35645 4.37659 9.39014 4.53255L9.39014 4.53278Q9.41992 4.6678 9.47461 4.79729Q9.5293 4.92638 9.60498 5.04124L9.60498 5.04126L9.60547 5.04136Q9.68799 5.16603 9.7959 5.27393Q9.90381 5.38188 10.0283 5.4645L10.0288 5.46464Q10.1436 5.54063 10.2725 5.59519Q10.4019 5.65 10.5371 5.67937ZM10.3564 2.70705L10.3564 4.21327Q10.3564 4.31682 10.3931 4.40521Q10.4297 4.49361 10.5029 4.56682Q10.5762 4.64003 10.6646 4.67665L10.6646 4.67666Q10.7529 4.71327 10.8564 4.71327L12.3628 4.71327L10.3564 2.70705ZM8.50098 9.84798L8.50098 5.99994C8.50098 5.71994 8.28125 5.49994 8.00098 5.49994C7.72119 5.49994 7.50098 5.71994 7.50098 5.99994L7.50098 9.85091L6.49658 8.84634C6.29834 8.64835 5.9873 8.64835 5.78955 8.84634C5.59131 9.04433 5.59131 9.35545 5.78955 9.55344L7.646 11.4101Q7.79248 11.5566 7.99951 11.5566Q8.20703 11.5566 8.35303 11.4101L10.21 9.55344C10.4077 9.35545 10.4077 9.04433 10.21 8.84634C10.0117 8.64835 9.70068 8.64835 9.50293 8.84634L8.50098 9.84798Z" clip-rule="evenodd" fill="#7AA5FF" fill-opacity="1.000000" fill-rule="evenodd"/>
+	<g clip-path="url(#clip312_5845)">
+		<path id="合并" d="M8.49805 1.30518L8.49805 9.26594L10.8198 6.9444C11.0176 6.74641 11.3286 6.74641 11.5269 6.9444C11.7246 7.14239 11.7246 7.45352 11.5269 7.65151L8.35449 10.8238C8.30566 10.8726 8.25146 10.9092 8.19287 10.9337C8.13379 10.9581 8.06982 10.9703 8.00098 10.9703C7.93164 10.9703 7.86768 10.9581 7.80908 10.9337C7.80811 10.9334 7.80762 10.9331 7.80664 10.9328C7.72656 10.9003 7.65674 10.8477 7.60449 10.7809L4.4751 7.65151C4.27686 7.45352 4.27686 7.14239 4.4751 6.9444C4.67285 6.74641 4.98389 6.74641 5.18213 6.9444L7.49805 9.26038L7.49805 1.30518C7.49805 1.02518 7.71826 0.805176 7.99805 0.805176C8.27783 0.805176 8.49805 1.02518 8.49805 1.30518ZM14.8447 8.45864C14.8447 8.17864 14.625 7.95864 14.3447 7.95865C14.0649 7.95866 13.8447 8.17867 13.8447 8.45866L13.8447 12.6992C13.8447 12.7682 13.8325 12.8322 13.8081 12.8911L13.8081 12.8912C13.7837 12.9501 13.7471 13.0039 13.6982 13.0527C13.6499 13.1015 13.5957 13.1381 13.5371 13.1625L13.5371 13.1626L13.5366 13.1626C13.478 13.187 13.4141 13.1992 13.3447 13.1992L2.65576 13.1992C2.58691 13.1992 2.52246 13.187 2.46387 13.1626C2.40479 13.1382 2.35107 13.1016 2.30225 13.0527C2.25342 13.0039 2.2168 12.9501 2.19238 12.8911C2.16797 12.8322 2.15576 12.7682 2.15576 12.6992L2.15576 8.46062C2.15576 8.18063 1.93555 7.96062 1.65576 7.96062C1.37549 7.96062 1.15576 8.18063 1.15576 8.46062L1.15576 12.6992C1.15576 12.8081 1.16699 12.9145 1.18945 13.0185L1.18945 13.0185L1.18945 13.0185C1.20898 13.1086 1.2373 13.1968 1.27393 13.2832C1.31006 13.3693 1.354 13.4506 1.4043 13.5272L1.4043 13.5272C1.45947 13.6103 1.52295 13.6879 1.59521 13.7598C1.66699 13.8318 1.74463 13.8953 1.82764 13.9504C1.9043 14.0011 1.98584 14.0447 2.07178 14.0811C2.1582 14.1176 2.24609 14.1457 2.33643 14.1652L2.33643 14.1653L2.33643 14.1653C2.44043 14.1879 2.54688 14.1992 2.65576 14.1992L13.3447 14.1992C13.4536 14.1992 13.5601 14.1879 13.6636 14.1654L13.6641 14.1653C13.7544 14.1457 13.8428 14.1176 13.9292 14.0811C14.0151 14.0447 14.0962 14.0012 14.1729 13.9504L14.1729 13.9504L14.1729 13.9504C14.2559 13.8953 14.3335 13.8318 14.4058 13.7598C14.4775 13.6879 14.541 13.6103 14.5962 13.5272C14.647 13.4506 14.6904 13.3693 14.7271 13.2832C14.7632 13.1968 14.7915 13.1085 14.811 13.0184C14.8335 12.9145 14.8447 12.808 14.8447 12.6992L14.8447 8.45864Z" clip-rule="evenodd" fill="#7AA5FF" fill-opacity="1.000000" fill-rule="evenodd"/>
 	</g>
 </svg>
diff --git a/src/assets/svgs/taskChoice.svg b/src/assets/svgs/taskChoice.svg
index ebace828de164ed949e86d75dfc9aeed628d5b75..381b2ddd065951c1cee2b004cf82b1d44ef3cee3 100644
--- a/src/assets/svgs/taskChoice.svg
+++ b/src/assets/svgs/taskChoice.svg
@@ -11,7 +11,7 @@
 		</clipPath>
 	</defs>
 	<rect id="选择任务" width="24.000000" height="24.000000" fill="#FFFFFF" fill-opacity="0"/>
-	<rect id="矩形备份 24" rx="4.000000" width="24.000000" height="24.000000" fill="#DA4576" fill-opacity="1.000000"/>
+	<rect id="矩形备份 24" rx="4.000000" width="24.000000" height="24.000000" fill="#30B7BB" fill-opacity="1.000000"/>
 	<rect id="矩形备份 24" x="0.500000" y="0.500000" rx="4.000000" width="23.000000" height="23.000000" stroke="#7AA5FF" stroke-opacity="0" stroke-width="1.000000"/>
 	<g clip-path="url(#clip1685_11815)">
 		<g clip-path="url(#clip1685_11816)">
diff --git a/src/views/createapp/components/types.ts b/src/views/createapp/components/types.ts
index 8633df27cbc22404495a41cd0411d713364249c3..ab038d34617c75d5665193049859dcc483945724 100644
--- a/src/views/createapp/components/types.ts
+++ b/src/views/createapp/components/types.ts
@@ -145,3 +145,50 @@ export interface ListItem {
   id: string;
   value: string | null;
 }
+
+const opertionList = [
+  // Number operations
+  {value: 'number_equal', label: '等于', str: '='},
+  {value: 'number_not_equal', label: '不等于', str: '≠'},
+  {value: 'number_greater_than', label: '大于', str: '>'},
+  {value: 'number_less_than', label: '小于', str: '<'},
+  {value: 'number_greater_than_or_equal', label: '大于等于', str: '≥'},
+  {value: 'number_less_than_or_equal', label: '小于等于', str: '≤'},
+
+  // String operations
+  {value: 'string_equal', label: '等于', str: '='},
+  {value: 'string_not_equal', label: '不等于', str: '≠'},
+  {value: 'string_contains', label: '包含', str: ''},
+  {value: 'string_not_contains', label: '不包含', str: ''},
+  {value: 'string_starts_with', label: '起始等于', str: '='},
+  {value: 'string_ends_with', label: '结束等于', str: '='},
+  {value: 'string_length_equal', label: '长度等于', str: '|...|='},
+  {value: 'string_length_greater_than', label: '长度大于', str: '|...|>'},
+  {value: 'string_length_greater_than_or_equal', label: '长度大于等于', str: '|...|≥'},
+  {value: 'string_length_less_than', label: '长度小于', str: '|...|<'},
+  {value: 'string_length_less_than_or_equal', label: '长度小于等于', str: '|...|≤'},
+  {value: 'string_regex_match', label: '正则匹配', str: '\\+'},
+
+  // List operations
+  {value: 'list_equal', label: '等于', str: '='},
+  {value: 'list_not_equal', label: '不等于', str: '≠'},
+  {value: 'list_contains', label: '包含', str: ''},
+  {value: 'list_not_contains', label: '不包含', str: ''},
+  {value: 'list_length_equal', label: '长度等于', str: '|...|='},
+  {value: 'list_length_greater_than', label: '长度大于', str: '|...|>'},
+  {value: 'list_length_greater_than_or_equal', label: '长度大于等于', str: '|...|≥'},
+  {value: 'list_length_less_than', label: '长度小于', str: '|...|<'},
+  {value: 'list_length_less_than_or_equal', label: '长度小于等于', str: '|...|≤'},
+
+  // Boolean operations
+  {value: 'bool_equal', label: '等于', str: '='},
+  {value: 'bool_not_equal', label: '不等于', str: '≠'},
+
+  // Dictionary operations
+  {value: 'dict_equal', label: '等于', str: '='},
+  {value: 'dict_not_equal', label: '不等于', str: '≠'},
+  {value: 'dict_contains_key', label: '包含键', str: ''},
+  {value: 'dict_not_contains_key', label: '不包含键', str: ''}
+]
+
+ export const opertionListMap = new Map(opertionList.map(item => [item.value, item]));
diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue
index dff72018c11bdd82cd6563af454b1d19c1332f72..c3e510e215382d4f5cc4590d6fc31435750dd057 100644
--- a/src/views/createapp/components/workFlow.vue
+++ b/src/views/createapp/components/workFlow.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import '../../styles/workFlowArrange.scss';
 import { onMounted, ref, watch, onUnmounted } from 'vue';
-import { IconSuccess, IconError } from '@computing/opendesign-icons';
 import { useI18n } from 'vue-i18n';
 import { ElMessage } from 'element-plus';
-import { VueFlow, useVueFlow } from '@vue-flow/core';
+import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core';
 import { Background } from '@vue-flow/background';
 import { MiniMap } from '@vue-flow/minimap';
 import BranchNode from './workFlowConfig/BranchNode.vue';
@@ -53,7 +52,8 @@ const debugDialogVisible = ref(false);
 const apiServiceList = ref([]);
 const allApiServiceList = ref([]);
 const yamlContent = ref();
-const nodeYamlId = ref();
+const nodeYamlIds = ref();
+const nodeIds = ref();
 const emits = defineEmits(['updateFlowsDebug']);
 const route = useRoute();
 const workFlowList = ref([]);
@@ -94,6 +94,7 @@ const {
   setEdges,
   removeSelectedNodes,
   getSelectedNodes,
+  removeEdges
 } = useVueFlow();
 const { layout } = useLayout();
 
@@ -137,6 +138,12 @@ onConnect((e) => {
   // 获取当前状态
   const sourceStatus = sourceItem?.data?.status || 'default';
   const targetStatus = targetItem?.data?.status || 'default';
+  
+  // 如果没有提供sourceHandle，但节点有activeSourceHandle，则使用它
+  if (!e.sourceHandle && sourceItem?.data?.activeSourceHandle) {
+    e.sourceHandle = sourceItem.data.activeSourceHandle;
+  }
+  
   addEdges({
     ...e,
     data: {
@@ -211,12 +218,14 @@ const nodeAndLineConnection = () => {
   isNodeAndLineConnect.value = isNodeConnect;
 };
 // 编辑yaml
-const editYamlDrawer = (name, desc, yamlCode, nodeId) => {
+const editYamlDrawer = (name, desc, yamlCode, nodeYamlId, nodeId) => {
+  console.log('start', nodeId);
   yamlContent.value = yamlCode;
   nodeName.value = name;
   nodeDesc.value = desc;
   isEditYaml.value = true;
-  nodeYamlId.value = nodeId;
+  nodeIds.value = nodeId;
+  nodeYamlIds.value = nodeYamlId;
   // 编辑 yaml 时，需要debug 后才可发布
   emits('updateFlowsDebug', false);
 };
@@ -241,6 +250,7 @@ async function layoutGraph(direction) {
 
 // 拖拽添加
 const dropFunc = (e) => {
+  console.log('开始拖拽', e);
   if (!flowObj.value?.flowId) {
     ElMessage.warning(i18n.global.t('app.create_or_edit_workflow_first'));
     return;
@@ -378,9 +388,12 @@ const queryFlow = (deal: string) => {
             }
           }
           const flowDataList = res?.[1]?.result?.workflows || [];
+          console.log(nodes.value,'nodes')
           // 更新当前publish状态
           emits('updateFlowsDebug', '', flowDataList);
+          console.log('----------')
           updateFlowsDebugStatus.value = true;
+          console.log(nodes.value,'nodes')
         }
         loading.value = false;
       });
@@ -463,7 +476,7 @@ const redrageFlow = (nodesList, edgesList) => {
         nodePosition: node.callId === 'start' ? 'Right' : 'Left',
       };
       newNode.deletable = false;
-    } else if (node.callId === 'choice') {
+    } else if (node.callId === 'Choice') {
       newNode.type = 'branch';
     } else {
       newNode.type = 'custom';
@@ -482,6 +495,7 @@ const redrageFlow = (nodesList, edgesList) => {
     // 线分支条件需后续添加
     return newEdge;
   });
+  console.log(newNodeList)
   setNodes(newNodeList);
   setEdges(newEdgeList);
   // 回显节点和边后，判断各节点连接状态
@@ -581,9 +595,17 @@ const updateNodeFunc = (id, status, constTime, content?) => {
   });
 };
 
-// 保存当前handle拖拽的nodeid--以便于拖拽结束时，设置该节点handle恢复默认状态
-const updateConnectHandle = (nodeId) => {
+// 保存当前handle拖拽的nodeid和sourceHandle--以便于拖拽结束时，设置该节点handle恢复默认状态
+const updateConnectHandle = (nodeId, sourceHandleId?) => {
   connectHandleNodeId.value = nodeId;
+  // 如果提供了sourceHandleId，保存它以便在onConnect中使用
+  if (sourceHandleId) {
+    // 可以在这里保存sourceHandleId，例如添加到节点数据中
+    const node = findNode(nodeId);
+    if (node) {
+      updateNode(nodeId, { data: { ...node.data, activeSourceHandle: sourceHandleId } });
+    }
+  }
 };
 
 // 这里是松开鼠标时[拖拽结束]-恢复不再拖拽的handle节点默认状态【对应的是customNode里拖拽节点设置状态】
@@ -593,14 +615,20 @@ const cancelConnectStatus = () => {
     const node = findNode(connectHandleNodeId.value);
     // 这里获取node的data
     const data = node?.data;
+    // 创建一个新的数据对象，不包含activeSourceHandle属性
+    let updatedData = { ...data };
+    if (updatedData && updatedData.activeSourceHandle) {
+      delete updatedData.activeSourceHandle;
+    }
     // 根据当前id，更新下data重新赋值，初始化节点状态和handle状态
-    updateNode(connectHandleNodeId.value, { data: { ...data } });
+    updateNode(connectHandleNodeId.value, { data: updatedData });
     // 将其置空
     connectHandleNodeId.value = '';
   }
 };
 
 const saveFlow = (updateNodeParameter?, debug?) => {
+  console.log(getNodes.value)
   loading.value = true;
   const appId = route.query?.appId;
   if (!flowObj.value.flowId) {
@@ -608,7 +636,10 @@ const saveFlow = (updateNodeParameter?, debug?) => {
   }
   // 将对应的节点和边存储格式改造
   let updateNodes = getNodes.value.map((item) => {
+    console.log('node：',item)
+
     const { ...otherItem } = item.data;
+    console.log(item)
     let newItem = {
       enable: true,
       editable: false,
@@ -633,7 +664,7 @@ const saveFlow = (updateNodeParameter?, debug?) => {
       // 这里是需要将parameters
       newItem = {
         ...newItem,
-        callId: 'choice',
+        callId: 'Choice',
         parameters: item.data.parameters,
       };
     }
@@ -654,7 +685,7 @@ const saveFlow = (updateNodeParameter?, debug?) => {
   if (updateNodeParameter) {
     updateNodes.forEach((item) => {
       if (item.stepId === updateNodeParameter.id) {
-        if (item.type === 'choice') {
+        if (item.type === 'Choice') {
           item.parameters.input_parameters.choices =
             updateNodeParameter.inputStream;
         } else {
@@ -775,7 +806,7 @@ defineExpose({
                     :key="index"
                     :draggable="true"
                     @dragstart="
-                      onDragStart($event, node.type, {
+                      onDragStart($event, node.nodeId, {
                         serviceId: item.serviceId,
                         ...node,
                       })
@@ -807,6 +838,7 @@ defineExpose({
         :nodes="nodes"
         :edges="edges"
         :default-viewport="{ zoom: DefaultViewPortZoom }"
+        :connection-mode="ConnectionMode.Strict"
         :min-zoom="0.5"
         :max-zoom="4"
         class="my-diagram-class"
@@ -1003,7 +1035,10 @@ defineExpose({
     :yamlContent="yamlContent"
     :nodeName="nodeName"
     :nodeDesc="nodeDesc"
-    :nodeYamlId="nodeYamlId"
+    :nodeYamlId="nodeYamlIds"
+    :nodeId="nodeIds"
+    :getEdges="getEdges"
+    :removeEdges="removeEdges"
   ></EditYamlDrawer>
 </template>
 <style lang="scss">
diff --git a/src/views/createapp/components/workFlowConfig/BranchNode.vue b/src/views/createapp/components/workFlowConfig/BranchNode.vue
index 38188405871f104695803812d7e59da98196fcf2..58d0e0466b2455c00ebd7e665112d997e73c02e4 100644
--- a/src/views/createapp/components/workFlowConfig/BranchNode.vue
+++ b/src/views/createapp/components/workFlowConfig/BranchNode.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { Position, Handle } from '@vue-flow/core';
-import { ref, onMounted, watch } from 'vue';
-import { BranchSourceIdType } from '../types';
+import { ref, watch } from 'vue';
+import { getSrcIcon, opertionListMap } from '../types';
 import NodeMirrorText from '../codeMirror/nodeMirrorText.vue';
 const props = defineProps({
   id: {
@@ -25,12 +25,16 @@ const props = defineProps({
     required: false,
   },
 });
-const emits = defineEmits(['delNode', 'editYamlDrawer']);
+const emits = defineEmits(['delNode', 'editYamlDrawer', 'updateConnectHandle']);
 
 const statusList = ref(['running', 'success', 'error']);
 
 const branchIdList = ref([]);
 
+// 当前handle是否连接中[分别是target和source]
+const handleTargetConnecting = ref(false);
+const handleSourceConnecting = ref(false);
+
 // 当前节点状态-工作流调试结果-成功/失败/运行中
 const curStatus = ref('');
 
@@ -44,6 +48,17 @@ const inputAndOutput = ref({
 });
 
 watch(
+  () => props.data?.parameters?.input_parameters?.choices,
+  ()=>{
+    console.log(props.data?.parameters?.input_parameters?.choices)
+
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+)
+  watch(
   () => props.data,
   () => {
     const isInclude = statusList.value.includes(props.data?.status);
@@ -85,20 +100,50 @@ const delNode = (id) => {
 };
 
 // 编辑yaml
-const editYaml = (nodeName, nodeDesc, yamlCode) => {
-  emits('editYamlDrawer', nodeName, nodeDesc, yamlCode, props.id);
+const editYaml = (nodeName, nodeDesc, yamlCode, nodeId) => {
+  emits('editYamlDrawer', nodeName, nodeDesc, yamlCode, props.id, nodeId);
+};
+
+// 设置当前正在连接[这里是使连接过程中，handle节点高亮]
+const setConnectStatus = (type, sourceIndex?) => {
+  if (type === 'source') {
+    handleSourceConnecting.value = true;
+    // 存储当前活动的连接点索引
+    const sourceHandleId = sourceIndex !== undefined ? `source_${sourceIndex}` : 'source_default';
+    // 更新当前节点handle连接状态，并传递正确的sourceHandle ID
+    emits('updateConnectHandle', props.id, sourceHandleId);
+  } else {
+    handleTargetConnecting.value = true;
+    // 更新当前节点handle连接状态
+    emits('updateConnectHandle', props.id);
+  }
+};
+
+// 计算每个连接点的样式，使其与choiceContent对齐
+const getHandleStyle = (index, total) => {
+  // 如果只有一个连接点，居中显示
+  if (total === 1) {
+    return { top: '50%' };
+  }
+  const spacing = 100 / (total + 1); // 平均分配空间
+  const position = spacing * (index + 1); // 计算每个连接点的位置
+  return { top: `${position}% ` };
 };
 </script>
 
 <template>
   <div class="customNodeStyle" :class="curStatus">
     <Handle type="target" :position="Position.Left"></Handle>
-    <div class="outHandleRing outRingLeft"></div>
-    <div class="delOverShadow leftBox"></div>
-    <div class="delOverShadow leftNodeBox"></div>
     <div class="nodeBox">
       <div class="title" v-if="props.data.name">
-        <div class="iconStyle"></div>
+        <img
+            class="iconStyle"
+            v-if="props.data.nodeId"
+            :src="getSrcIcon(props.data)"
+          />
+          <el-icon v-else class="warnTiangleIcon">
+            <WarnTriangleFilled />
+          </el-icon>
         <div class="label">{{ props.data.name }}</div>
         <div class="moreTip" :class="{ notAllow: props.disabled }">
           <el-popover
@@ -116,6 +161,7 @@ const editYaml = (nodeName, nodeDesc, yamlCode) => {
                   props.data.name,
                   props.data.description,
                   props.data.parameters,
+                  props.data.nodeId
                 )
               "
             >
@@ -127,31 +173,46 @@ const editYaml = (nodeName, nodeDesc, yamlCode) => {
           </el-popover>
         </div>
       </div>
-      <div class="desc" v-if="props.data.description">
-        {{ props.data.description }}
-      </div>
-      <div
-        class="branchDesc"
-        v-if="props.data?.parameters?.input_parameters?.choices"
-      >
-        <div
-          class="branchItem"
-          v-for="(item, index) in props.data?.parameters?.input_parameters
-            ?.choices"
-          :key="index"
-        >
-          {{ item.description }}
-          <Handle
-            class="souceFirstHandle"
-            :id="branchIdList[index]"
-            type="source"
-            :position="Position.Right"
-          ></Handle>
-          <div class="delOverShadow rightBox" style="top: 0%"></div>
-          <div class="outHandleRing outRingRight" style="top: 30%"></div>
+      <div class="choiceNode">
+        <div class="choiceContent" v-for="(item, index) in [...props.data.parameters?.input_parameters?.choices]?.reverse()" :key="index">   
+          <div class="choiceLabel">
+            <div v-if="item.is_default" >
+              否则
+            </div>
+            <div v-else>
+              <div v-if="index === 0">
+                如果
+              </div>
+              <div v-else>
+                否则如果
+              </div>
+            </div>
+          </div>
+          <div class="choice">
+            <div v-for="(condition, cIndex) in item.conditions" :key="cIndex" class="choiceCondition">
+              <el-tooltip :content="condition.left.value" placement="top">
+                <div class="choiceLeft" v-if="condition.left.value"> {{ condition.left.value }}</div>
+              </el-tooltip>
+              <span class="choiceOperate" v-if="condition.operate">{{ opertionListMap.get(condition.operate)?.str || opertionListMap.get(condition.operate)?.label }}</span>
+              <el-tooltip :content="condition.right.value" placement="top">
+                <div class="choiceRight" v-if="condition.right.value">{{ condition.right.value }}</div>
+              </el-tooltip>
+            </div>
+          </div>
         </div>
       </div>
     </div>
+    <Handle
+        v-for="(choice, index) in [...props.data.parameters?.input_parameters.choices].reverse()"
+        :key="choice.branch_id + index"
+        :id="choice.branch_id"
+        type="source"
+        :position="Position.Right"
+        @mousedown="setConnectStatus('source', choice.branch_id)"
+        :class="{ isConnecting: handleSourceConnecting }"
+        :connectable="props.data?.isConnectSource"
+        :style="getHandleStyle(index, props.data.parameters?.input_parameters.choices.length)"
+      ></Handle>
     <!-- 调试时出现-暂时隐藏 -->
     <NodeMirrorText
       v-if="curStatus !== 'default'"
diff --git a/src/views/createapp/components/workFlowConfig/CustomNode.vue b/src/views/createapp/components/workFlowConfig/CustomNode.vue
index 3ea0b1258bc04c2d48d31d5566b384f5fd6f077f..4c47079a823ab0c78a1179b1096d652c87bfc284 100644
--- a/src/views/createapp/components/workFlowConfig/CustomNode.vue
+++ b/src/views/createapp/components/workFlowConfig/CustomNode.vue
@@ -86,8 +86,8 @@ const delNode = (id) => {
 };
 
 // 编辑yaml
-const editYaml = (nodeName, nodeDesc, yamlCode) => {
-  emits('editYamlDrawer', nodeName, nodeDesc, yamlCode, props.id);
+const editYaml = (nodeName, nodeDesc, yamlCode, nodeId) => {
+  emits('editYamlDrawer', nodeName, nodeDesc, yamlCode, props.id, nodeId);
 };
 
 // 设置当前正在连接[这里是使连接过程中，handle节点高亮]
@@ -162,6 +162,7 @@ const handleCopyTextToclipboard = (text) => {
                   props.data.name,
                   props.data.description,
                   props.data.parameters,
+                  props.data.nodeId
                 )
               "
             >
diff --git a/src/views/createapp/components/workFlowConfig/useDnD.js b/src/views/createapp/components/workFlowConfig/useDnD.js
index eecea56426ec7da0bf145167a44c52b5f3b28ea8..a2186fe1ad0368fa92dc241ee5c819b7b9f1ff80 100644
--- a/src/views/createapp/components/workFlowConfig/useDnD.js
+++ b/src/views/createapp/components/workFlowConfig/useDnD.js
@@ -43,7 +43,7 @@ export default function useDragAndDrop() {
       event.dataTransfer.setData('application/vueflow', type);
       event.dataTransfer.effectAllowed = 'move';
     }
-    draggedType.value = type === 'choice' ? 'branch' : 'custom';
+    draggedType.value = type === 'Choice' ? 'branch' : 'custom';
     isDragging.value = true;
     nodeData.value = { ...info };
 
@@ -90,7 +90,7 @@ export default function useDragAndDrop() {
     });
 
     const nodeId = getId();
-
+    console.log(event,nodeData.value,draggedType.value);
     const newNode = {
       id: nodeId,
       type: draggedType.value,
diff --git a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
index a84090a6e20d6bacea47757fc2937eea7fde2d9c..9a19e68c303eb2c80a736114dd2ff22ffd464c89 100644
--- a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
+++ b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
@@ -8,14 +8,155 @@
       class="flowDrawer"
       :before-close="closeDrawer"
     >
-      <template #header>
+      <template #header> 
         <div class="drawerHeader">
           {{ $t('flow.step_configuration') }}-{{ yamlNodeName }}
         </div>
       </template>
       <template #default>
         <div class="drawerBody">
-          <el-collapse v-model="activeName" class="o-hpc-collapse yamlContent">
+          <div v-if="yamlNodeId==='Choice'" class="yamlChoiceContainer">
+            <div>
+              <el-button :icon="IconPlusCircle" @click="handleAddChoice">
+                {{ $t('添加条件分支') }}
+              </el-button>
+            </div>
+            <div v-for="(item, index) in choicesList" :key="index" class="yamlChoiceItem">
+              <div class="yamlChoiceItemTitle">
+                <div v-if="item.is_default" >
+                  否则
+                </div>
+                <div v-else>
+                  <div v-if="index === 0">
+                    如果
+                  </div>
+                  <div v-else>
+                    否则如果
+                  </div>
+                </div>
+                <el-icon v-if="!item.is_default && choicesList.length > 2" class="delIcon" @click="handleDelChoice(index, item)">
+                  <IconMinimize />
+                </el-icon>
+              </div>
+              <div class="yamlChoiceItemContent">
+                <div v-if="item.conditions.length > 1" class="yamlChoiceItemLogic">
+                  <el-select
+                    v-model="item.logic"
+                    class="yamlChoiceItemLogicSelect"
+                  >
+                  <template #label >
+                    {{ logicObj[item.logic] }}
+                  </template>
+                  <el-option :label="logicObj['and']" value="and" key="and"></el-option>
+                  <el-option :label="logicObj['or']" value="or" key="or"></el-option>
+                </el-select>
+                </div>
+                <div class="yamlConditionContainer">
+                  <div v-for="(condition, cIndex) in item.conditions" :key="cIndex" class="yamlConditionItem">
+                    <el-select
+                      v-model="condition.operate"
+                      class="yamlConditionOperateSelect"
+                      placeholder="请选择条件"
+                      @change="(value) => onSelectOperateOption(value, index, cIndex)"
+                    >
+                    <template #label >
+                      {{ opertionListMap.get(condition.operate)?.str }}
+                      {{ opertionListMap.get(condition.operate)?.label }}
+                    </template>
+                    <el-option v-for="item in paramoperateList" :label="opertionListMap.get(item.operate)?.str+' '+opertionListMap.get(item.operate)?.label" :value="item.operate" :key="item.operate">
+                     {{ opertionListMap.get(item.operate)?.str }}
+                      {{ opertionListMap.get(item.operate)?.label }}
+                    </el-option>
+                    </el-select>
+                    <div class="yamlConditionValue">
+                      <el-select
+                        v-model="condition.left.value"
+                        placeholder="请选择"
+                        class="yamlConditionLeft"
+                        :style="item.conditions.length > 1?{minWidth: '345px'}:{minWidth: '460px'}"
+                        @change="(value) => onSelectOption(value, index, cIndex)"
+                      >
+                        <div class="option-container" v-for="item in leftOptions" :key="item.stepId" >
+                          <el-option class="leftOption" v-if="item.visible" :disabled="item.isGroup" :label="item.paramPath" :value="item.paramPath" :style="{paddingLeft: item?.isGroup ? '' : '40px'}">
+                            <template #default>
+                              <template v-if="item.isGroup">
+                                {{ item.name }} 
+                                <div class="arrowIcon">
+                                  <el-icon v-if="!item.childVisible" @click.stop="handleGroupClick(item,true)">
+                                    <IconCaretDown/>
+                                  </el-icon>
+                                  <el-icon v-else @click.stop="handleGroupClick(item,false)">
+                                    <IconCaretUp/>
+                                  </el-icon>
+                                </div>
+                              </template>
+                              <template v-else>
+                                <div>
+                                {{ item.name }} 
+                                <span class="paramType">
+                                  {{ item.paramType }}
+                                </span>
+                                </div>
+                              </template>
+                            </template>
+                          </el-option>
+                        </div>
+                      </el-select>
+                      <div class="yamlConditionRight">
+                        <span class="yamlConditionRightType">{{ condition.right.type ?? 'string' }}</span>
+                        <el-input
+                          v-model="condition.right.value"
+                          placeholder="输入或引用参数值"
+                          class="yamlConditionRightSelect"
+                          :value="condition.right.value || ''"
+                          @change="(value) => onSelectInputOption(value, index, cIndex)"
+                        >
+                        <template #append>
+                          <el-select class="rightSelect" v-model="condition.right.value" placeholder="Select" @change="(value) => onSelectInputOption(value, index, cIndex)" 
+                            :popper-options="{ modifiers: [{ name: 'offset', options: { offset: [-150, 10] } }] }"
+                          >
+                            <div class="option-container" v-for="item in leftOptions" :key="item.stepId" >
+                              <el-option class="leftOption" v-if="item.visible" :disabled="item.isGroup" :label="item.paramPath" :value="item.paramPath" :style="{paddingLeft: item?.isGroup ? '' : '40px'}">
+                                <template #default>
+                                  <template v-if="item.isGroup">
+                                    {{ item.name }} 
+                                    <div class="arrowIcon">
+                                      <el-icon v-if="!item.childVisible" @click.stop="handleGroupClick(item,true)">
+                                        <IconCaretDown/>
+                                      </el-icon>
+                                      <el-icon v-else @click.stop="handleGroupClick(item,false)">
+                                        <IconCaretUp/>
+                                      </el-icon>
+                                    </div>
+                                  </template>
+                                  <template v-else>
+                                    <div>
+                                    {{ item.name }} 
+                                    <span class="paramType">
+                                      {{ item.paramType }}
+                                    </span>
+                                    </div>
+                                  </template>
+                                </template>
+                              </el-option>
+                            </div>
+                          </el-select>
+                        </template>
+                        </el-input>
+                      </div>
+                    </div>
+                    <el-icon v-if="cIndex > 0 && typeof cIndex === 'number'" class="delIcon" @click="handleDelCondition(index, cIndex)">
+                      <IconMinimize />
+                    </el-icon>
+                  </div>
+                </div>
+              </div>
+              <div v-if="!item.is_default" class="addCondition">
+                <el-button text :icon="IconPlusCircle" @click="handleAddCondition(index)">新增</el-button>
+              </div>
+            </div>
+          </div>
+          <el-collapse v-else v-model="activeName" class="o-hpc-collapse yamlContent">
             <el-collapse-item
               title="Consistency"
               :key="item.title"
@@ -106,18 +247,24 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import MirrorText from '../codeMirror/mirrorTextArea.vue';
-import { IconCaretRight } from '@computing/opendesign-icons';
+import { IconCaretDown, IconCaretRight, IconCaretUp, IconMinimize, IconPlusCircle } from '@computing/opendesign-icons';
 import yaml from 'js-yaml';
 import { ElMessage } from 'element-plus';
 import MonacoEditor from 'src/components/monaco/MonacoEditor.vue';
 import YamlContentOutput from 'src/components/yamloutput/yamlContentOutput.jsx';
 import i18n from 'src/i18n';
+import { api } from 'src/apis';
+import { useRoute } from 'vue-router';
+import { opertionListMap } from '../types';
+const route = useRoute();
 const visible = ref(true);
 const yamlInputCode = ref();
 const yamlOutputCode = ref();
 const yamlNodeName = ref();
+const yamlNodeId = ref();
+const choicesList = ref<Array<{ is_default: boolean; branch_id: string; conditions: any[]; logic: string}>>([]);
 const infoDisabled = ref(true);
 const yamlExpress = ref([
   {
@@ -150,22 +297,126 @@ const activeName = ref([
   yamlExpress.value[1].title,
   yamlExpress.value[2].title,
 ]);
+interface Props {
+  yamlContent?: string;
+  nodeName?: string;
+  nodeDesc?: string;
+  nodeId?: string;
+  nodeYamlId?: string;
+  appId?: string | number;
+  flowId?: string;
+  getEdges?: any[];
+  removeEdges?: (edgeIds: string[]) => void;
+}
+
+const props = defineProps<Props>();
 const emits = defineEmits(['closeDrawer', 'saveNode']);
-const props = defineProps<{
-  yamlContent: any;
-  nodeName: string;
-  nodeDesc: string;
-  appId: any;
-  flowId: any;
-  nodeYamlId: any;
-}>();
+
+const logicObj ={
+  and: '且',
+  or: '或',
+}
+
+const leftOptions = ref<any[]>([]);
+const paramoperateList = ref<any>([])
+
+const handleGroupClick = (item: any, isVisible: boolean) => {
+  item.childVisible = isVisible;
+  leftOptions.value.forEach(option => {
+    if(option.stepId === item.stepId && !Object.hasOwn(option, 'isGroup')){
+      option.visible = isVisible;
+    }
+  })
+}
+const onSelectOption = (option: any,index:number, cIndex:number) => {
+  const curOption = leftOptions.value.find(op => {
+    return op.paramPath === option;
+  });
+  choicesList.value[index].conditions[cIndex].operate = null;
+  choicesList.value[index].conditions[cIndex].right={
+    step_id: null, type: null, value: null,name:null
+  }
+  choicesList.value[index].conditions[cIndex].left={
+    step_id: curOption.stepId, type: curOption.paramType, value: option,name:curOption.pathName
+  }
+  api
+    .queryParameterOperate({ParamType:curOption.paramType})
+    .then((res)=>{
+      paramoperateList.value = res?.[1]?.result;
+    })
+    .catch((err)=>[
+      console.error(err)
+    ])
+}
+
+
+const onSelectOperateOption = (option: any,index:number, cIndex:number) => {
+  choicesList.value[index].conditions[cIndex].operate = option;
+  const curBindType = paramoperateList.value.find(op => {
+    return op.operate === option;
+  })?.bind_type;
+  choicesList.value[index].conditions[cIndex].right.type = curBindType;
+  choicesList.value[index].conditions[cIndex].right.value = null;
+}
+
+const onSelectInputOption = (option: any, index:number, cIndex:number) => {
+  const targetType = choicesList.value[index].conditions[cIndex].right.type;
+  let isValid = true;
+  // 类型检查逻辑
+  switch (targetType) {
+    case 'number':
+      isValid = !isNaN(Number(option));
+      break;
+    case 'boolean':
+      isValid = option === 'true' || option === 'false' || option === true || option === false;
+      break;
+    case 'list':
+      if (typeof option === 'string') {
+        try {
+          const parsed = JSON.parse(option);
+          isValid = Array.isArray(parsed);
+        } catch {
+          isValid = false;
+        }
+      }
+      break;
+    case 'dict':
+      if (typeof option === 'string') {
+        try {
+          const parsed = JSON.parse(option);
+          isValid = typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed);
+        } catch {
+          isValid = false;
+        }
+      }
+      break;
+    case 'string':
+    default:
+      isValid = typeof option === 'string';
+      break;
+  }
+  if (isValid) {
+    choicesList.value[index].conditions[cIndex].right.value = option;
+  } else {
+    ElMessage.error(i18n.global.t('输入类型错误'));
+  }
+  const curOption = leftOptions.value.find(op => {
+    return op.paramPath === option;
+  });
+  if(curOption?.stepId){
+  choicesList.value[index].conditions[cIndex].right.step_id = curOption?.stepId ?? null;
+  choicesList.value[index].conditions[cIndex].right.name = curOption?.pathName ?? null;
+  }
+}
 
 watch(
-  () => [props.yamlContent, props.nodeName, props.nodeDesc],
+  () => [props.yamlContent, props.nodeName, props.nodeDesc, props.nodeId],
   () => {
     yamlInputCode.value = yaml.dump(props.yamlContent.input_parameters);
     yamlOutputCode.value = yaml.dump(props.yamlContent.output_parameters);
     yamlNodeName.value = props.nodeName;
+    yamlNodeId.value = props.nodeId;
+    choicesList.value = JSON.parse(JSON.stringify(props.yamlContent?.input_parameters?.choices || [])).reverse();
     yamlExpress.value[0].name = props.nodeName;
     yamlExpress.value[0].description = props.nodeDesc;
     yamlExpress.value[1].yamlCode = yaml.dump(
@@ -197,21 +448,137 @@ const closeDrawer = () => {
 // 完成yaml更新
 const updateNodeYaml = () => {
   let transResult;
+  let choiceHasEmpty = false;
   try {
-    transResult = yaml.load(yamlExpress.value[1].yamlCode);
+    if(yamlNodeId.value === 'Choice'){
+      choicesList.value.forEach(item => {
+        if(!item.is_default){
+          item.conditions.forEach(condition => {
+            if(!condition.left.value || !condition.right.value || !condition.operate){
+              choiceHasEmpty = true;
+              return;
+            }
+          })
+        }
+      })
+    }
+    if(yamlNodeId.value === 'Choice' && choiceHasEmpty){
+      ElMessage.error(i18n.global.t('请完善条件'));
+      return;
+    }
+    transResult = yamlNodeId.value === 'Choice'? JSON.parse(JSON.stringify(choicesList.value.reverse())) :yaml.load(yamlExpress.value[1].yamlCode ?? '');
     // 调用接口并更新--根据id包含更新后的yamlCode, name, desc
     emits(
       'saveNode',
       transResult,
       props.nodeYamlId,
-      yamlExpress.value[0].name,
-      yamlExpress.value[0].description,
+      yamlExpress.value[0].name || '',
+      yamlExpress.value[0].description || '',
     );
     closeDrawer();
-  } catch (error) {
+  } catch (err) {
     ElMessage.error(i18n.global.t('semantic.checkFormat'));
   }
 };
+
+const handleAddChoice = () => {
+  // 处理 pop() 可能返回 undefined 的情况
+  const last = choicesList.value.length > 0 ? choicesList.value.pop() : undefined;
+  choicesList.value.push({
+    is_default: false,
+    branch_id: crypto.randomUUID(),
+    conditions: [
+      {
+        operate: '',
+        left: { value: '', type: '' },
+        right: { value: '', type: 'str.' },
+      },
+    ],
+    logic: 'and',
+  });
+  if (last !== undefined) {
+    choicesList.value.push(last);
+  }
+};
+const handleDelChoice = (index: number, branchItem: any) => {
+  // 添加类型注解
+  if (choicesList.value.length <= 1) {
+    ElMessage.error(i18n.global.t('semantic.choiceMin'));
+    return;
+  }
+  
+  // 删除当前分支的边
+  if (props.getEdges) {
+    console.log(props.getEdges, branchItem);
+    props.getEdges?.forEach((item) => {
+      if(item.branchId === branchItem.branch_id && props.removeEdges){
+        props.removeEdges([item.id])
+      }
+    })
+  }
+  
+  choicesList.value.splice(index, 1);
+};
+const handleAddCondition = (index: number) => {
+  // 添加类型注解和边界检查
+  if (index >= 0 && index < choicesList.value.length) {
+    choicesList.value[index].conditions.push({
+      operate: '',
+      left: { value: '', type: '' },
+      right: { value: '', type: 'str.' },
+    });
+  }
+};
+const handleDelCondition = (index: number, cIndex: number) => {
+  // 添加类型注解和边界检查
+  if (index >= 0 && index < choicesList.value.length && choicesList.value[index].conditions.length <= 1) {
+    ElMessage.error(i18n.global.t('semantic.conditionMin'));
+    return;
+  }
+  if (index >= 0 && index < choicesList.value.length && cIndex >= 0 && cIndex < choicesList.value[index].conditions.length) {
+    choicesList.value[index].conditions.splice(cIndex, 1);
+  }
+};
+
+onMounted(()=>{
+  api
+    .queryParameter({
+      appId: route.query?.appId as string,
+      flowId: props.flowId,
+      stepId: props.nodeYamlId
+    })
+    .then((res) => {
+      if(Array.isArray(res[1]?.result)){
+        res[1]?.result?.forEach(item => {
+          leftOptions.value.push({
+            stepId:item.stepId,
+            name:item.name,
+            paramPath:item.name,
+            isGroup:true,
+            visible:true,
+            childVisible:false
+          });
+          if(item?.paramsNode?.subParams){
+            item?.paramsNode?.subParams.forEach(param => {
+              leftOptions.value.push({
+                ...param,
+                name:param.paramName,
+                stepId:item.stepId,
+                visible:false,
+                paramPath:`${item.name}${param.paramPath.replace(/\//, '.')}`,
+                pathName:param.paramPath,
+              })
+            })
+          }
+        })
+
+      }
+    })
+    .catch((err) => {
+      console.error('Error fetching parameters:', err);
+      leftOptions.value = [];
+    })
+})
 </script>
 
 <style lang="scss" scoped>
@@ -284,6 +651,146 @@ const updateNodeYaml = () => {
       width: 100%;
       height: 100%;
     }
+    .yamlChoiceContainer{
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      min-width: 500px;
+      
+      .yamlChoiceItem{
+        background-color: var(--o-bg-color-light);
+        padding: 16px;
+        border-radius: 4px;
+        .yamlChoiceItemTitle {
+          font-weight: 500;
+          font-size: 14px;
+          color: var(--o-text-color-primary);
+          line-height: 24px;
+          display: flex;
+          justify-content: space-between;
+        }
+        .yamlChoiceItemContent{
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          .yamlChoiceItemLogic{
+            .yamlChoiceItemLogicSelect{
+              max-width: 100px;
+            }
+          }
+          .yamlConditionContainer{
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            .yamlConditionItem{
+              display: flex;
+              align-items: center;
+              gap: 8px;
+              width: 100%;
+              .el-select__wrapper{
+                padding: 0 8px;
+              }
+              .yamlConditionOperateSelect{
+                max-width: 100px;
+              }
+              .yamlConditionValue{
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
+                position: relative;
+                .yamlConditionLeft{ }
+                .yamlConditionRight{
+                  display: flex;
+                  .yamlConditionRightType{
+                    text-align: center;
+                    display: inline-block;
+                    width: 87px;
+                    height: 32px;
+                    padding: 8px;
+                    border: 1px solid var(--o-border-color-lighter);
+                    border-radius: 4px 0 0 4px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  }
+                  .yamlConditionRightSelect{
+                    .el-input__wrapper{
+                      border-radius: 0;
+                    }
+                    .rightSelect{
+                      width: 50px !important;
+                      .el-select__selection{
+                        display: none;
+                      }
+                      .el-select__wrapper{
+                        width: 50px;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        .addCondition{
+          margin-left: 110px;
+          margin-top: 16px;
+        }
+      }
+    }
+  }
+}
+.leftOption{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  .arrowIcon{
+    .el-icon{
+
+      cursor: pointer;
+    }
+  }
+  .paramType{
+    background-color: var(--o-border-color-base);
+    color: var(--o-text-color-tertiary);
+    padding: 0 8px;
+    line-height: 16px;
+    font-size: 12px;
+    border-radius: 2px;
+    margin-left: 4px;
+  }
+}
+
+.option-container {
+  min-width: 200px;
+  .el-popper .is-disabled, .el-popper .is-disabled,.el-select-dropdown__item.is-disabled, .el-select-dropdown__item.is-disabled:hover{
+    background-color: var(--o-select-dropdown-bg-color) !important;
+    color: var(--o-text-color-primary) !important;
+  }
+}
+
+.submenu {
+  position: absolute;
+  top: 38px;
+  left: 280px;
+  background-color: var(--o-bg-color-light);
+  border: 1px solid var(--o-border-color-lighter);
+  border-radius: 4px;
+  padding: 8px;
+  min-width: 200px;
+  z-index: 9000;
+}
+.delIcon{
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  border: 1px solid var(--o-border-color-lighter);
+  padding: 4px;
+  color: var(--o-text-color-tertiary);
+  cursor: pointer;
+  &:hover {
+    color: #6395fd;
+    border-color: #6395fd;
   }
 }
 .monacoEditorMask {
diff --git a/src/views/styles/workFlowArrange.css b/src/views/styles/workFlowArrange.css
new file mode 100644
index 0000000000000000000000000000000000000000..124c4d6e535cfc4966e9948881a646ce0776bb87
--- /dev/null
+++ b/src/views/styles/workFlowArrange.css
@@ -0,0 +1,596 @@
+.workFlowContainer {
+  display: flex;
+  gap: 24px;
+  width: 100%;
+}
+@keyframes slideInFromLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-100%);
+    overflow: hidden;
+    min-width: 0;
+    width: 0;
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+    width: 312px;
+    min-width: 256px;
+  }
+}
+@keyframes slideOutToLeft {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+    width: 312px;
+    min-width: 256px;
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-100%);
+    min-width: 0;
+    overflow: hidden;
+    width: 0;
+  }
+}
+.workFlowContainer .transition-fade-enter-active {
+  animation: slideInFromLeft 0.2s ease-out;
+}
+.workFlowContainer .transition-fade-leave-active {
+  animation: slideOutToLeft 0.2s ease-in;
+}
+.workFlowContainer .aside-wrapper {
+  position: relative;
+  height: 100%;
+}
+.workFlowContainer .aside-wrapper .trapezoid {
+  width: 16px;
+  height: 56px;
+  z-index: 100;
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  background: var(--expand-fold-default);
+  background-repeat: no-repeat;
+  overflow: hidden;
+  cursor: pointer;
+}
+.workFlowContainer .aside-wrapper .trapezoid:hover {
+  background: var(--expand-fold-hover);
+}
+.workFlowContainer .aside-wrapper .trapezoid:active {
+  background: var(--expand-fold-active);
+}
+.workFlowContainer .aside-wrapper .trapezoid.isExpandIcon {
+  left: calc(100% - 8px);
+}
+.workFlowContainer .copilot-aside {
+  width: 312px;
+  min-width: 256px;
+  background-color: var(--o-bg-color-base);
+  padding: 24px 4px 24px 24px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  height: 100%;
+}
+.workFlowContainer .apiCenterBox {
+  height: 100%;
+  display: flex;
+  min-width: 264px;
+  flex-direction: column;
+}
+.workFlowContainer .apiCenterBox .apiCenterTitle {
+  color: var(--o-text-color-primary);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+}
+.workFlowContainer .apiCenterBox .apiCenterSearch {
+  margin: 8px 0;
+}
+.workFlowContainer .apiCenterBox .apiCenterSearch .o-style-search {
+  width: 264px;
+}
+.workFlowContainer .apiCenterBox .apiCenterSearch .o-style-search .el-input__wrapper {
+  border-color: var(--o-border-color-lighter);
+  border-radius: 4px;
+}
+.workFlowContainer .apiCenterBox .apiCenterSearch .o-style-search .el-input__suffix::after {
+  margin-top: 7px;
+}
+.workFlowContainer .apiCenterBox .apiContanter {
+  flex: 1;
+  overflow: auto;
+}
+.workFlowContainer .apiCenterBox .apiContanter .el-collapse .el-collapse-item__header {
+  padding: 0 !important;
+  height: 24px;
+  line-height: 24px;
+  font-size: 14px;
+  color: var(--o-text-color-primary);
+  display: flex;
+  gap: 8px;
+  text-align: left;
+  flex-wrap: nowrap;
+  margin-bottom: 8px;
+}
+.workFlowContainer .apiCenterBox .apiContanter .el-collapse .el-collapse-item__header .el-icon {
+  color: var(--o-text-color-tertiary);
+}
+.workFlowContainer .apiCenterBox .apiContanter .el-collapse .el-collapse-item__content {
+  margin-left: 0px;
+  margin-bottom: 0px;
+}
+.workFlowContainer .apiCenterBox .apiContanter .el-collapse .el-collapse-item__arrow.is-active {
+  transform: rotate(90deg);
+  padding: 0px;
+}
+.workFlowContainer .workFlowContainerRight {
+  flex: 1;
+  background-color: var(--flow-canvas-bg);
+  border-radius: 8px;
+}
+.workFlowContainer .stancesItem {
+  width: 264px;
+  height: 40px;
+  line-height: 40px;
+  background-color: var(--o-bash-bg);
+  color: var(--o-text-color-primary);
+  margin-bottom: 8px;
+  padding-left: 16px;
+  border-radius: 4px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.workFlowContainer .stancesItem .stancesName {
+  width: 100%;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+}
+.workFlowContainer .stancesItem .stancesName .nodeIcon {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  line-height: 40px;
+  margin-right: 12px;
+}
+.workFlowContainer .stancesItem:hover {
+  background-color: var(--flow-bg-color);
+  box-shadow: var(--o-bash-box-shadow);
+  cursor: pointer;
+}
+.workFlowContainer .workFlowContainerRight {
+  position: relative;
+}
+.workFlowContainer .workFlowContainerRight .workFlowOps {
+  position: absolute;
+  left: 24px;
+  top: 24px;
+  display: flex;
+  gap: 8px;
+}
+.workFlowContainer .workFlowContainerRight .workFlowOps .workFlowSelect {
+  display: block;
+  width: 144px;
+  height: 32px;
+  border-radius: 4px;
+  background-color: var(--o-bg-color-base);
+}
+.workFlowContainer .workFlowContainerRight .workFlowOps .workFlowSelect .el-select {
+  width: 144px;
+  height: 32px;
+}
+.workFlowContainer .workFlowContainerRight .workFlowOps .workFlowSelect .el-select .el-select__wrapper {
+  background-color: var(--o-select-bg-color) !important;
+  border-radius: 4px;
+}
+.workFlowContainer .workFlowContainerRight .workFlowOps .workFlowSelect .el-select .el-select__wrapper .el-select__placeholder {
+  color: var(--o-select-color) !important;
+}
+.workFlowContainer .workFlowContainerRight .workFlowOps .debugBtn {
+  width: 32px;
+  height: 32px;
+  background: var(--flow-debug-default);
+  border-radius: 4px;
+  cursor: pointer;
+}
+.workFlowContainer .workFlowContainerRight .workFlowOps .debugBtn:hover {
+  background: var(--flow-debug-hover);
+}
+.workFlowContainer .workFlowContainerRight .workFlowOps .debugBtn:active {
+  background: var(--flow-debug-active);
+}
+.workFlowContainer .workFlowContainerRight .workFlowOps .debugBtn.isDebugDis {
+  background: var(--flow-debug-dis);
+}
+.workFlowContainer .workFlowContainerRight .noWorkFlow {
+  position: absolute;
+  width: 320px;
+  height: 202px;
+  top: calc(50% - 101px);
+  left: calc(50% - 160px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0px;
+}
+.workFlowContainer .workFlowContainerRight .noWorkFlow .noFlow {
+  height: 130px;
+  width: 100%;
+  background-image: var(--no-work-flow);
+  background-size: 100% 100%;
+  line-height: 130px;
+}
+.workFlowContainer .workFlowContainerRight .noWorkFlow .noFlowDesc {
+  width: 100%;
+  height: 16px;
+  margin-top: 8px;
+  margin-bottom: 16px;
+  text-align: center;
+  color: var(--o-text-color-secondary);
+}
+.workFlowContainer .vueFlowContainer {
+  width: 100%;
+  height: 100%;
+}
+.workFlowContainer .vueFlowContainer .my-diagram-class {
+  flex: 1 !important;
+}
+.workFlowContainer .vue-flow__minimap {
+  transform-origin: bottom right;
+  background-color: var(--o-bg-color-base);
+  bottom: 57px;
+  margin-left: 24px;
+  border-radius: 8px;
+  width: 144px;
+  height: 96px;
+}
+.workFlowContainer .vue-flow__minimap svg {
+  width: 144px;
+  height: 96px;
+  border-radius: 8px;
+}
+.workFlowContainer .vue-flow__minimap svg path {
+  padding: 10px;
+  height: 96px !important;
+}
+.workFlowContainer .vue-flow__panel.right {
+  right: unset;
+  left: 0;
+}
+
+.addWorkFlow {
+  cursor: pointer;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: var(--o-text-color-secondary);
+}
+.addWorkFlow .el-icon {
+  color: var(--o-text-color-tertiary);
+}
+.addWorkFlow span {
+  min-width: auto !important;
+}
+
+.workFlowOption {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.workFlowOption .flowName {
+  flex: 1;
+}
+.workFlowOption .dealIcon {
+  display: inline-block;
+  width: 16px;
+  line-height: 20px;
+  height: 16px;
+  flex: right;
+}
+.workFlowOption .editIcon {
+  background: url("@/assets/svgs/light_editor.svg");
+}
+.workFlowOption .delIcon {
+  background: url("@/assets/svgs/light_delete.svg");
+}
+
+.workFlowOption.is-selected .editIcon,
+.workFlowOption.is-hovering .editIcon {
+  background: url("@/assets/svgs/dark_editor_active.svg");
+}
+.workFlowOption.is-selected .delIcon,
+.workFlowOption.is-hovering .delIcon {
+  background: url("@/assets/svgs/dark_delete_active.svg");
+}
+
+.vue-flow__node {
+  min-width: 200px;
+  padding: 0px;
+  margin-top: 0px;
+}
+.vue-flow__node .customNodeStyle {
+  width: 320px;
+  height: -moz-fit-content;
+  height: fit-content;
+  border-radius: 4px;
+  background: var(--el-bg-color);
+  border: 2px solid transparent;
+  position: relative;
+  border-radius: 10px;
+  background-clip: padding-box;
+}
+.vue-flow__node .customNodeStyle .nodeBox {
+  min-height: 80px;
+  padding: 16px;
+  display: flex;
+  background: var(--flow-system-bg);
+  flex-direction: column;
+  gap: 8px;
+  border-radius: 8px;
+}
+.vue-flow__node .customNodeStyle .nodeBox .title {
+  display: flex;
+  height: 24px;
+  font-size: 16px;
+  color: var(--o-text-color-primary);
+  border: 2px solid transparent;
+  align-items: center;
+  gap: 8px;
+}
+.vue-flow__node .customNodeStyle .nodeBox .title .iconStyle {
+  width: 24px;
+  height: 24px;
+  background: linear-gradient(120deg, rgba(109, 117, 250, 0.15), rgba(90, 179, 255, 0.15));
+}
+.vue-flow__node .customNodeStyle .nodeBox .title .warnTiangleIcon {
+  font-size: 20px;
+}
+.vue-flow__node .customNodeStyle .nodeBox .title .warnTiangleIcon svg path:first-child {
+  fill: red;
+}
+.vue-flow__node .customNodeStyle .nodeBox .title .iconLabel {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.vue-flow__node .customNodeStyle .nodeBox .title .label {
+  max-width: 64px !important;
+  flex: 1;
+  height: 24px;
+  line-height: 24px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.vue-flow__node .customNodeStyle .nodeBox .title .moreTip {
+  margin-left: auto;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+}
+.vue-flow__node .customNodeStyle .nodeBox .title .moreTip .moreDots {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.vue-flow__node .customNodeStyle .nodeBox .title .moreTip .moreDots .nodeDot {
+  width: 2px;
+  height: 2px;
+  border-radius: 50%;
+  background-color: #8d98aa;
+}
+.vue-flow__node .customNodeStyle .nodeBox .title .moreTip:hover {
+  color: #6395fd;
+}
+.vue-flow__node .customNodeStyle .nodeBox .title .notAllow {
+  cursor: not-allowed;
+}
+.vue-flow__node .customNodeStyle .nodeBox .desc {
+  font-size: 12px;
+  color: var(--o-text-color-tertiary);
+}
+.vue-flow__node .customNodeStyle .nodeBox .descSign {
+  color: red !important;
+  font-weight: 600 !important;
+}
+.vue-flow__node .customNodeStyle .nodeBox .branchDesc {
+  font-size: 12px;
+}
+.vue-flow__node .customNodeStyle .nodeBox .choiceNode {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.vue-flow__node .customNodeStyle .nodeBox .choiceNode .choiceContent {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.vue-flow__node .customNodeStyle .nodeBox .choiceNode .choiceContent .choiceLabel {
+  font-size: 12px;
+  color: var(--o-text-color-secondary);
+  line-height: 16px;
+  width: 48px;
+}
+.vue-flow__node .customNodeStyle .nodeBox .choiceNode .choiceContent .choice {
+  min-width: 232px;
+  border: 1px solid var(--o-border-color-base);
+  border-radius: 2px;
+  padding: 8px;
+  min-height: 24px;
+  gap: 4px;
+}
+.vue-flow__node .customNodeStyle .nodeBox .choiceNode .choiceContent .choice .choiceCondition {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.vue-flow__node .customNodeStyle .nodeBox .choiceNode .choiceContent .choice .choiceCondition div {
+  font-size: 12px;
+  width: 96px;
+  background-color: var(--o-bg-color-dark);
+  padding: 4px 8px;
+  border-radius: 2px;
+  color: var(--o-text-color-primary);
+}
+.vue-flow__node .customNodeStyle .nodeBox.otherNode {
+  background: var(--flow-other-node-bg);
+}
+.vue-flow__node .customNodeStyle .nodeBox.aposNode {
+  background: var(--flow-apos-apollo-bg);
+}
+.vue-flow__node .customNodeStyle .vue-flow__handle-right {
+  top: 50%;
+  right: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--el-bg-color);
+  display: flex;
+  justify-content: center;
+  border: none;
+  z-index: 2;
+  align-items: center;
+}
+.vue-flow__node .customNodeStyle .vue-flow__handle-right::after {
+  display: block;
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #c3cedf;
+}
+.vue-flow__node .customNodeStyle .vue-flow__handle-left {
+  top: 50%;
+  left: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--el-bg-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  z-index: 2;
+}
+.vue-flow__node .customNodeStyle .vue-flow__handle-left::after {
+  display: block;
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #c3cedf;
+}
+.vue-flow__node .customNodeStyle .select {
+  border: 2px solid #6395fd;
+}
+.vue-flow__node .customNodeStyle:hover {
+  border: 2px solid #6395fd;
+}
+.vue-flow__node .customNodeStyle:hover .vue-flow__handle {
+  width: 12px;
+  height: 12px;
+}
+.vue-flow__node .customNodeStyle:hover .vue-flow__handle::after {
+  width: 10px;
+  height: 10px;
+  background: #6395fd;
+}
+.vue-flow__node .customNodeStyle:hover .vue-flow__handle-left {
+  left: -1px;
+}
+.vue-flow__node .customNodeStyle:hover .vue-flow__handle-right {
+  right: -1px;
+}
+.vue-flow__node .customNodeStyle.success {
+  border: 2px solid #24ab36;
+}
+.vue-flow__node .customNodeStyle.success .vue-flow__handle-left::after {
+  background: #24ab36;
+}
+.vue-flow__node .customNodeStyle.success .vue-flow__handle-right::after {
+  background: #24ab36;
+}
+.vue-flow__node .customNodeStyle.error {
+  border: 2px solid #e32020;
+}
+.vue-flow__node .customNodeStyle.error .vue-flow__handle-left::after {
+  background: #e32020;
+}
+.vue-flow__node .customNodeStyle.error .vue-flow__handle-right::after {
+  background: #e32020;
+}
+.vue-flow__node .nodeIdShow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.vue-flow__node .nodeIdShow .nodeIdText {
+  font-size: 12px;
+  flex: 1;
+  color: #575d6c;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.vue-flow__node .nodeIdShow .copydocument {
+  cursor: pointer;
+  transform: rotateZ(180deg);
+}
+.vue-flow__node .nodeIdShow .copydocument:hover {
+  color: #0077ff;
+}
+.vue-flow__node .vue-flow__handle.isConnecting {
+  width: 12px;
+  height: 12px;
+}
+.vue-flow__node .vue-flow__handle.isConnecting::after {
+  width: 10px;
+  height: 10px;
+  background: #6395fd;
+}
+.vue-flow__node .vue-flow__handle-left.isConnecting {
+  left: -1px;
+}
+.vue-flow__node .vue-flow__handle-right.isConnecting {
+  right: -1px;
+}
+
+.nodeDealPopper {
+  width: 64px !important;
+  min-width: 64px !important;
+  height: 72px;
+  padding: 4px 0px !important;
+  border-radius: 4px;
+}
+.nodeDealPopper .el-popper__arrow {
+  display: none;
+}
+.nodeDealPopper .dealItem {
+  display: block;
+  width: 100%;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  margin-left: 0px;
+  color: var(--o-text-color-secondary);
+}
+.nodeDealPopper .dealItem:hover {
+  background-color: var(--o-color-primary-secondary) !important;
+}
+.nodeDealPopper .dealItem:hover span {
+  color: var(--o-color-white) !important;
+}
+.nodeDealPopper:hover {
+  border: 1px solid var(--o-color-primary-secondary) !important;
+}/*# sourceMappingURL=workFlowArrange.css.map */
\ No newline at end of file
diff --git a/src/views/styles/workFlowArrange.css.map b/src/views/styles/workFlowArrange.css.map
new file mode 100644
index 0000000000000000000000000000000000000000..6f111ed04d69b878ee5b3ed5e3ab7667c54d9507
--- /dev/null
+++ b/src/views/styles/workFlowArrange.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["workFlowArrange.scss","workFlowArrange.css"],"names":[],"mappings":"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","file":"workFlowArrange.css"}
\ No newline at end of file
diff --git a/src/views/styles/workFlowArrange.scss b/src/views/styles/workFlowArrange.scss
index 5d60e69c780e4da05da426205936f9a6ed93cd4d..feb582ada2ba2ae6725b0045203e96c0c3d6a7f5 100644
--- a/src/views/styles/workFlowArrange.scss
+++ b/src/views/styles/workFlowArrange.scss
@@ -425,6 +425,53 @@
       .branchDesc {
         font-size: 12px;
       }
+      .choiceNode{
+        display: flex;
+        flex-direction: column;
+        gap: 8px; 
+        .choiceContent{
+          display: flex;
+          gap: 4px;
+          align-items: center;
+          .choiceLabel {
+            font-size: 12px;
+            color: var(--o-text-color-secondary);
+            line-height: 16px;
+            min-width: 50px;
+          }
+          .choice {
+            display: flex;
+            flex-direction: column;
+            min-width: 232px;
+            border: 1px solid var(--o-border-color-base);
+            border-radius: 2px;
+            padding: 8px;
+            min-height: 24px;
+            gap: 4px;
+            .choiceCondition{
+              display: flex;
+              gap: 6px;
+              align-items: center;
+              .choiceLeft,.choiceRight{
+                font-size: 12px;
+                width: 96px;
+                background-color: var(--o-bg-color-dark);
+                padding: 4px 8px;
+                border-radius: 2px;
+                color: var(--o-text-color-primary);
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+              .choiceOperate{
+                min-width: 25px;
+                font-size: 12px;
+                text-align: center;
+              }
+            }
+          }
+        }
+      }
     }
     .nodeBox.otherNode {
       background: var(--flow-other-node-bg);