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/list/flow-card/index.less

@@ -0,0 +1,78 @@
+.container {
+  height: 251px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .delete {
+    height: 24px;
+  }
+
+  .content {
+    display: flex;
+    justify-content: space-between;
+
+    .context {
+      flex: 1;
+    }
+  }
+
+  .footer {
+    // text-align: left;
+  }
+  .footerTop {
+    padding-bottom: 2px;
+  }
+}
+
+.card {
+  border-radius: 12px;
+  border: 1px solid rgba(234, 236, 240, 1);
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  padding: 24px;
+  width: 300px;
+  cursor: pointer;
+
+  .titleWrapper {
+    // flex: 1;
+    .title {
+      font-size: 24px;
+      line-height: 32px;
+      font-weight: 600;
+      color: rgba(0, 0, 0, 0.88);
+      word-break: break-all;
+    }
+    .description {
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 20px;
+      color: rgba(0, 0, 0, 0.45);
+    }
+  }
+
+  :global {
+    .ant-card-body {
+      padding: 0;
+      margin: 0;
+    }
+  }
+  .bottom {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .bottomLeft {
+    vertical-align: middle;
+  }
+  .leftIcon {
+    margin-right: 10px;
+    font-size: 18px;
+    vertical-align: middle;
+  }
+  .rightText {
+    font-size: 12px;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.65);
+    vertical-align: middle;
+  }
+}

web/src/pages/flow/list/flow-card/index.tsx

@@ -0,0 +1,94 @@
+import { ReactComponent as MoreIcon } from '@/assets/svg/more.svg';
+import { useShowDeleteConfirm } from '@/hooks/commonHooks';
+import { formatDate } from '@/utils/date';
+import {
+  CalendarOutlined,
+  DeleteOutlined,
+  UserOutlined,
+} from '@ant-design/icons';
+import { Avatar, Card, Dropdown, MenuProps, Space } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'umi';
+
+import { useDeleteFlow } from '@/hooks/flow-hooks';
+import { IFlow } from '../../interface';
+import styles from './index.less';
+
+interface IProps {
+  item: IFlow;
+}
+
+const FlowCard = ({ item }: IProps) => {
+  const navigate = useNavigate();
+  const showDeleteConfirm = useShowDeleteConfirm();
+  const { t } = useTranslation();
+  const { deleteFlow } = useDeleteFlow();
+
+  const removeKnowledge = () => {
+    return deleteFlow([item.id]);
+  };
+
+  const handleDelete = () => {
+    showDeleteConfirm({ onOk: removeKnowledge });
+  };
+
+  const items: MenuProps['items'] = [
+    {
+      key: '1',
+      label: (
+        <Space>
+          {t('common.delete')}
+          <DeleteOutlined />
+        </Space>
+      ),
+    },
+  ];
+
+  const handleDropdownMenuClick: MenuProps['onClick'] = ({ domEvent, key }) => {
+    domEvent.preventDefault();
+    domEvent.stopPropagation();
+    if (key === '1') {
+      handleDelete();
+    }
+  };
+
+  const handleCardClick = () => {
+    navigate(`/flow/${item.id}`);
+  };
+
+  return (
+    <Card className={styles.card} onClick={handleCardClick}>
+      <div className={styles.container}>
+        <div className={styles.content}>
+          <Avatar size={34} icon={<UserOutlined />} src={item.avatar} />
+          <Dropdown
+            menu={{
+              items,
+              onClick: handleDropdownMenuClick,
+            }}
+          >
+            <span className={styles.delete}>
+              <MoreIcon />
+            </span>
+          </Dropdown>
+        </div>
+        <div className={styles.titleWrapper}>
+          <span className={styles.title}>{item.title}</span>
+          <p>{item.description}</p>
+        </div>
+        <div className={styles.footer}>
+          <div className={styles.bottom}>
+            <div className={styles.bottomLeft}>
+              <CalendarOutlined className={styles.leftIcon} />
+              <span className={styles.rightText}>
+                {formatDate(item.update_time)}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default FlowCard;

web/src/pages/flow/list/hooks.ts

@@ -0,0 +1,48 @@
+import { useSetModalState } from '@/hooks/commonHooks';
+import { useFetchFlowList, useSetFlow } from '@/hooks/flow-hooks';
+import { useCallback, useState } from 'react';
+import { dsl } from '../mock';
+
+export const useFetchDataOnMount = () => {
+  const { data, loading } = useFetchFlowList();
+
+  return { list: data, loading };
+};
+
+export const useSaveFlow = () => {
+  const [currentFlow, setCurrentFlow] = useState({});
+  const {
+    visible: flowSettingVisible,
+    hideModal: hideFlowSettingModal,
+    showModal: showFileRenameModal,
+  } = useSetModalState();
+  const { loading, setFlow } = useSetFlow();
+
+  const onFlowOk = useCallback(
+    async (title: string) => {
+      const ret = await setFlow({ title, dsl });
+
+      if (ret === 0) {
+        hideFlowSettingModal();
+      }
+    },
+    [setFlow, hideFlowSettingModal],
+  );
+
+  const handleShowFlowSettingModal = useCallback(
+    async (record: any) => {
+      setCurrentFlow(record);
+      showFileRenameModal();
+    },
+    [showFileRenameModal],
+  );
+
+  return {
+    flowSettingLoading: loading,
+    initialFlowName: '',
+    onFlowOk,
+    flowSettingVisible,
+    hideFlowSettingModal,
+    showFlowSettingModal: handleShowFlowSettingModal,
+  };
+};

web/src/pages/flow/list/index.less

@@ -0,0 +1,48 @@
+.flowListWrapper {
+  padding: 48px;
+}
+
+.topWrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 0 60px 72px;
+
+  .title {
+    font-family: Inter;
+    font-size: 30px;
+    font-style: normal;
+    font-weight: @fontWeight600;
+    line-height: 38px;
+    color: rgba(16, 24, 40, 1);
+  }
+  .description {
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+    color: rgba(71, 84, 103, 1);
+  }
+
+  .topButton {
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: @fontWeight600;
+    line-height: 20px;
+  }
+
+  .filterButton {
+    display: flex;
+    align-items: center;
+    .topButton();
+  }
+}
+.flowCardContainer {
+  padding: 0 60px;
+  overflow: auto;
+  .knowledgeEmpty {
+    width: 100%;
+  }
+}

web/src/pages/flow/list/index.tsx

@@ -0,0 +1,53 @@
+import RenameModal from '@/components/rename-modal';
+import { PlusOutlined } from '@ant-design/icons';
+import { Button, Empty, Flex, Spin } from 'antd';
+import FlowCard from './flow-card';
+import { useFetchDataOnMount, useSaveFlow } from './hooks';
+
+import styles from './index.less';
+
+const FlowList = () => {
+  const {
+    showFlowSettingModal,
+    hideFlowSettingModal,
+    flowSettingVisible,
+    flowSettingLoading,
+    onFlowOk,
+  } = useSaveFlow();
+
+  const { list, loading } = useFetchDataOnMount();
+
+  return (
+    <Flex className={styles.flowListWrapper} vertical flex={1} gap={'large'}>
+      <Flex justify={'end'}>
+        <Button
+          type="primary"
+          icon={<PlusOutlined />}
+          onClick={showFlowSettingModal}
+        >
+          create canvas
+        </Button>
+      </Flex>
+      <Spin spinning={loading}>
+        <Flex gap={'large'} wrap="wrap" className={styles.flowCardContainer}>
+          {list.length > 0 ? (
+            list.map((item: any) => {
+              return <FlowCard item={item} key={item.name}></FlowCard>;
+            })
+          ) : (
+            <Empty className={styles.knowledgeEmpty}></Empty>
+          )}
+        </Flex>
+      </Spin>
+      <RenameModal
+        visible={flowSettingVisible}
+        onOk={onFlowOk}
+        loading={flowSettingLoading}
+        hideModal={hideFlowSettingModal}
+        initialName=""
+      ></RenameModal>
+    </Flex>
+  );
+};
+
+export default FlowList;