feat: add custom edge (#1061)

### What problem does this PR solve?
feat: add custom edge
feat: add flow card
feat: add store for canvas
#918 

### Type of change

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

web/src/pages/flow/flow-drawer/index.tsx

@@ -1,18 +1,46 @@
 import { IModalProps } from '@/interfaces/common';
 import { Drawer } from 'antd';
+import { Node } from 'reactflow';
+import AnswerForm from '../answer-form';
+import BeginForm from '../begin-form';
+import { Operator } from '../constant';
+import GenerateForm from '../generate-form';
+import { useHandleFormValuesChange } from '../hooks';
+import RetrievalForm from '../retrieval-form';
+
+interface IProps {
+  node?: Node;
+}
+
+const FormMap = {
+  [Operator.Begin]: BeginForm,
+  [Operator.Retrieval]: RetrievalForm,
+  [Operator.Generate]: GenerateForm,
+  [Operator.Answer]: AnswerForm,
+};
+
+const FlowDrawer = ({
+  visible,
+  hideModal,
+  node,
+}: IModalProps<any> & IProps) => {
+  const operatorName: Operator = node?.data.label;
+  const OperatorForm = FormMap[operatorName];
+  const { handleValuesChange } = useHandleFormValuesChange(node?.id);
 
-const FlowDrawer = ({ visible, hideModal }: IModalProps<any>) => {
   return (
     <Drawer
-      title="Basic Drawer"
+      title={node?.data.label}
       placement="right"
-      //   closable={false}
       onClose={hideModal}
       open={visible}
       getContainer={false}
       mask={false}
+      width={470}
     >
-      <p>Some contents...</p>
+      {visible && (
+        <OperatorForm onValuesChange={handleValuesChange}></OperatorForm>
+      )}
     </Drawer>
   );
 };