File size: 1,581 Bytes
be99f83 c33b05f be99f83 68ed806 be99f83 2962077 be99f83 38eebf9 be99f83 13080d4 be99f83 9ee6e3a c33b05f 9ee6e3a c33b05f 9ee6e3a be99f83 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
import { PlusOutlined } from '@ant-design/icons';
import { Button, Empty, Flex, Spin } from 'antd';
import AgentTemplateModal from './agent-template-modal';
import FlowCard from './flow-card';
import { useFetchDataOnMount, useSaveFlow } from './hooks';
import { useTranslate } from '@/hooks/common-hooks';
import styles from './index.less';
const FlowList = () => {
const {
showFlowSettingModal,
hideFlowSettingModal,
flowSettingVisible,
flowSettingLoading,
onFlowOk,
} = useSaveFlow();
const { t } = useTranslate('flow');
const { list, loading } = useFetchDataOnMount();
return (
<Flex className={styles.flowListWrapper} vertical flex={1} gap={'large'}>
<Flex justify={'end'}>
<Button
type="primary"
icon={<PlusOutlined />}
onClick={showFlowSettingModal}
>
{t('createGraph')}
</Button>
</Flex>
<Spin spinning={loading}>
<Flex gap={'large'} wrap="wrap" className={styles.flowCardContainer}>
{list.length > 0 ? (
list.map((item) => {
return <FlowCard item={item} key={item.id}></FlowCard>;
})
) : (
<Empty className={styles.knowledgeEmpty}></Empty>
)}
</Flex>
</Spin>
{flowSettingVisible && (
<AgentTemplateModal
visible={flowSettingVisible}
onOk={onFlowOk}
loading={flowSettingLoading}
hideModal={hideFlowSettingModal}
></AgentTemplateModal>
)}
</Flex>
);
};
export default FlowList;
|