feat: The order of the category operator form is messed up after refreshing the page #3088 (#3089)

### What problem does this PR solve?

feat: The order of the category operator form is messed up after
refreshing the page #3088

### Type of change

- [ ] Bug Fix (non-breaking change which fixes an issue)
- [x] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):

web/src/pages/flow/canvas/node/hooks.ts

@@ -29,13 +29,15 @@ export const useBuildCategorizeHandlePositions = ({
       idx: number;
     }> = [];
 
-    Object.keys(categoryData).forEach((x, idx) => {
+    Object.keys(categoryData)
-      list.push({
+      .sort((a, b) => categoryData[a].index - categoryData[b].index)
-        text: x,
+      .forEach((x, idx) => {
-        idx,
+        list.push({
-        top: idx === 0 ? 98 : list[idx - 1].top + 8 + 26,
+          text: x,
+          idx,
+          top: idx === 0 ? 98 : list[idx - 1].top + 8 + 26,
+        });
       });
-    });
 
     return list;
   }, [categoryData]);

web/src/pages/flow/form/categorize-form/dynamic-categorize.tsx

@@ -111,7 +111,15 @@ const DynamicCategorize = ({ nodeId }: IProps) => {
       <Form.List name="items">
         {(fields, { add, remove }) => {
           const handleAdd = () => {
-            add({ name: humanId() });
+            const idx = form.getFieldValue([
+              'items',
+              fields.at(-1)?.name,
+              'index',
+            ]);
+            add({
+              name: humanId(),
+              index: fields.length === 0 ? 0 : idx + 1,
+            });
             if (nodeId) updateNodeInternals(nodeId);
           };
           return (
@@ -178,6 +186,9 @@ const DynamicCategorize = ({ nodeId }: IProps) => {
                       )}
                     />
                   </Form.Item>
+                  <Form.Item hidden name={[field.name, 'index']}>
+                    <Input />
+                  </Form.Item>
                 </Card>
               ))}
 

web/src/pages/flow/form/categorize-form/hooks.ts

@@ -24,15 +24,14 @@ const buildCategorizeListFromObject = (
 ) => {
   // Categorize's to field has two data sources, with edges as the data source.
   // Changes in the edge or to field need to be synchronized to the form field.
-  return Object.keys(categorizeItem).reduce<Array<ICategorizeItem>>(
+  return Object.keys(categorizeItem)
-    (pre, cur) => {
+    .reduce<Array<ICategorizeItem>>((pre, cur) => {
       // synchronize edge data to the to field
 
       pre.push({ name: cur, ...categorizeItem[cur] });
       return pre;
-    },
+    }, [])
-    [],
+    .sort((a, b) => a.index - b.index);
-  );
 };
 
 /**

web/src/pages/flow/interface.ts

@@ -43,6 +43,7 @@ export interface ICategorizeItem {
   description?: string;
   examples?: string;
   to?: string;
+  index: number;
 }
 
 export interface IGenerateParameter {