feat: add GraphAvatar to graph list #918 (#1385)

### What problem does this PR solve?

feat: add GraphAvatar to graph list #918

### Type of change


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

web/src/hooks/flow-hooks.ts

@@ -111,7 +111,12 @@ export const useSetFlow = () => {
     mutateAsync,
   } = useMutation({
     mutationKey: ['setFlow'],
-    mutationFn: async (params: { id?: string; title?: string; dsl?: DSL }) => {
+    mutationFn: async (params: {
+      id?: string;
+      title?: string;
+      dsl?: DSL;
+      avatar?: string;
+    }) => {
       const { data } = await flowService.setCanvas(params);
       if (data.retcode === 0) {
         message.success(

web/src/pages/flow/list/create-flow-modal.tsx

@@ -1,20 +1,11 @@
-import { ReactComponent as NothingIcon } from '@/assets/svg/nothing.svg';
 import { IModalManagerChildrenProps } from '@/components/modal-manager';
 import { useTranslate } from '@/hooks/commonHooks';
 import { useFetchFlowTemplates } from '@/hooks/flow-hooks';
 import { useSelectItem } from '@/hooks/logicHooks';
-import {
-  Avatar,
-  Card,
-  Flex,
-  Form,
-  Input,
-  Modal,
-  Space,
-  Typography,
-} from 'antd';
+import { Card, Flex, Form, Input, Modal, Space, Typography } from 'antd';
 import classNames from 'classnames';
 import { useEffect } from 'react';
+import GraphAvatar from './graph-avatar';
 import styles from './index.less';
 
 const { Title } = Typography;
@@ -90,11 +81,7 @@ const CreateFlowModal = ({
             onClick={handleItemClick(x.id)}
           >
             <Space size={'middle'}>
-              {x.avatar ? (
-                <Avatar size={40} icon={<NothingIcon />} src={x.avatar} />
-              ) : (
-                <NothingIcon width={40} height={30} />
-              )}
+              <GraphAvatar avatar={x.avatar}></GraphAvatar>
               <b>{x.title}</b>
             </Space>
             <p>{x.description}</p>

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

@@ -1,5 +1,5 @@
 .container {
-  height: 251px;
+  height: 160px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;

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

@@ -1,12 +1,13 @@
 import { formatDate } from '@/utils/date';
-import { CalendarOutlined, UserOutlined } from '@ant-design/icons';
-import { Avatar, Card } from 'antd';
+import { CalendarOutlined } from '@ant-design/icons';
+import { Card, Typography } from 'antd';
 import { useNavigate } from 'umi';
 
 import OperateDropdown from '@/components/operate-dropdown';
 import { useDeleteFlow } from '@/hooks/flow-hooks';
 import { IFlow } from '@/interfaces/database/flow';
 import { useCallback } from 'react';
+import GraphAvatar from '../graph-avatar';
 import styles from './index.less';
 
 interface IProps {
@@ -29,11 +30,16 @@ const FlowCard = ({ item }: IProps) => {
     <Card className={styles.card} onClick={handleCardClick}>
       <div className={styles.container}>
         <div className={styles.content}>
-          <Avatar size={34} icon={<UserOutlined />} src={item.avatar} />
+          <GraphAvatar avatar={item.avatar}></GraphAvatar>
           <OperateDropdown deleteItem={removeFlow}></OperateDropdown>
         </div>
         <div className={styles.titleWrapper}>
-          <span className={styles.title}>{item.title}</span>
+          <Typography.Title
+            className={styles.title}
+            ellipsis={{ tooltip: item.title }}
+          >
+            {item.title}
+          </Typography.Title>
           <p>{item.description}</p>
         </div>
         <div className={styles.footer}>

web/src/pages/flow/list/graph-avatar.tsx

@@ -0,0 +1,16 @@
+import { ReactComponent as NothingIcon } from '@/assets/svg/nothing.svg';
+import { Avatar } from 'antd';
+
+const GraphAvatar = ({ avatar }: { avatar?: string | null }) => {
+  return (
+    <div>
+      {avatar ? (
+        <Avatar size={40} icon={<NothingIcon />} src={avatar} />
+      ) : (
+        <NothingIcon width={40} height={30} />
+      )}
+    </div>
+  );
+};
+
+export default GraphAvatar;

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

@@ -45,6 +45,7 @@ export const useSaveFlow = () => {
       const ret = await setFlow({
         title,
         dsl,
+        avatar: templateItem?.avatar,
         // dsl: dslJson,
         // dsl: {
         //   ...retrievalRelevantRewriteAndGenerateBase,