feat: build react flow nodes and edges from mock data #918 (#919)

### What problem does this PR solve?
feat: build react flow nodes and edges from mock data #918

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/flow/mock.tsx

@@ -9,3 +9,43 @@ export const componentList = [
   { name: 'Retrieval', icon: <RocketOutlined />, description: '' },
   { name: 'Generate', icon: <MergeCellsOutlined />, description: '' },
 ];
+
+export const dsl = {
+  components: {
+    begin: {
+      obj: {
+        component_name: 'Begin',
+        params: {},
+      },
+      downstream: ['Answer:China'],
+      upstream: [],
+    },
+    'Answer:China': {
+      obj: {
+        component_name: 'Answer',
+        params: {},
+      },
+      downstream: ['Retrieval:China'],
+      upstream: ['begin', 'Generate:China'],
+    },
+    'Retrieval:China': {
+      obj: {
+        component_name: 'Retrieval',
+        params: {},
+      },
+      downstream: ['Generate:China'],
+      upstream: ['Answer:China'],
+    },
+    'Generate:China': {
+      obj: {
+        component_name: 'Generate',
+        params: {},
+      },
+      downstream: ['Answer:China'],
+      upstream: ['Retrieval:China'],
+    },
+  },
+  history: [],
+  path: ['begin'],
+  answer: [],
+};