File size: 2,396 Bytes
af3ef26 eb38196 af3ef26 7b71fb2 362ec6c af3ef26 eb38196 362ec6c 04aba1b 362ec6c 04aba1b eb38196 af3ef26 6b8fc2c 362ec6c af3ef26 04aba1b af3ef26 eb38196 af3ef26 04aba1b 7b71fb2 af3ef26 04aba1b 6b8fc2c 362ec6c |
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 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
import { ReactComponent as FilterIcon } from '@/assets/filter.svg';
import ModalManager from '@/components/modal-manager';
import { PlusOutlined } from '@ant-design/icons';
import { Button, Flex, Space } from 'antd';
import { useCallback, useEffect } from 'react';
import { useDispatch, useNavigate, useSelector } from 'umi';
import KnowledgeCard from './knowledge-card';
import KnowledgeCreatingModal from './knowledge-creating-modal';
import styles from './index.less';
const Knowledge = () => {
const dispatch = useDispatch();
const knowledgeModel = useSelector((state: any) => state.knowledgeModel);
const navigate = useNavigate();
const { data = [] } = knowledgeModel;
const fetchList = useCallback(() => {
dispatch({
type: 'knowledgeModel/getList',
payload: {},
});
}, []);
// const handleAddKnowledge = () => {
// navigate(`/knowledge/${KnowledgeRouteKey.Configuration}`);
// };
useEffect(() => {
fetchList();
}, [fetchList]);
return (
<div className={styles.knowledge}>
<div className={styles.topWrapper}>
<div>
<span className={styles.title}>Welcome back, Zing</span>
<p className={styles.description}>
Which database are we going to use today?
</p>
</div>
<Space size={'large'}>
<Button icon={<FilterIcon />} className={styles.filterButton}>
Filters
</Button>
<ModalManager>
{({ visible, hideModal, showModal }) => (
<>
<Button
type="primary"
icon={<PlusOutlined />}
onClick={() => {
showModal();
}}
className={styles.topButton}
>
Create knowledge base
</Button>
<KnowledgeCreatingModal
visible={visible}
hideModal={hideModal}
></KnowledgeCreatingModal>
</>
)}
</ModalManager>
</Space>
</div>
<Flex gap="large" wrap="wrap">
{data.map((item: any) => {
return <KnowledgeCard item={item} key={item.name}></KnowledgeCard>;
})}
</Flex>
</div>
);
};
export default Knowledge;
|