File size: 3,496 Bytes
af3ef26 503735c eb38196 af3ef26 503735c af3ef26 eb38196 af3ef26 eb38196 af3ef26 97d4387 eb38196 af3ef26 eb38196 af3ef26 eb38196 97d4387 503735c af3ef26 452020d af3ef26 eb38196 af3ef26 452020d af3ef26 452020d af3ef26 503735c af3ef26 503735c af3ef26 |
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 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
import { ReactComponent as MoreIcon } from '@/assets/svg/more.svg';
import { KnowledgeRouteKey } from '@/constants/knowledge';
import { IKnowledge } from '@/interfaces/database/knowledge';
import { formatDate } from '@/utils/date';
import {
CalendarOutlined,
DeleteOutlined,
FileTextOutlined,
UserOutlined,
} from '@ant-design/icons';
import { Avatar, Card, Dropdown, MenuProps, Space } from 'antd';
import { useDispatch, useNavigate } from 'umi';
import showDeleteConfirm from '@/components/deleting-confirm';
import styles from './index.less';
interface IProps {
item: IKnowledge;
}
const KnowledgeCard = ({ item }: IProps) => {
const navigate = useNavigate();
const dispatch = useDispatch();
const removeKnowledge = () => {
return dispatch({
type: 'knowledgeModel/rmKb',
payload: {
kb_id: item.id,
},
});
};
const handleDelete = () => {
showDeleteConfirm({ onOk: removeKnowledge });
};
const items: MenuProps['items'] = [
{
key: '1',
label: (
<Space>
Delete
<DeleteOutlined />
</Space>
),
},
];
const handleDropdownMenuClick: MenuProps['onClick'] = ({ domEvent, key }) => {
domEvent.preventDefault();
domEvent.stopPropagation();
if (key === '1') {
handleDelete();
}
};
const handleCardClick = () => {
navigate(`/knowledge/${KnowledgeRouteKey.Dataset}?id=${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} />
<span className={styles.delete}>
<Dropdown
menu={{
items,
onClick: handleDropdownMenuClick,
}}
>
<MoreIcon />
</Dropdown>
</span>
</div>
<div className={styles.titleWrapper}>
<span className={styles.title}>{item.name}</span>
<p>{item.description}</p>
</div>
<div className={styles.footer}>
<div className={styles.footerTop}>
<div className={styles.bottomLeft}>
<FileTextOutlined className={styles.leftIcon} />
<span className={styles.rightText}>
<Space>{item.doc_num}Docs</Space>
</span>
</div>
</div>
<div className={styles.bottom}>
<div className={styles.bottomLeft}>
<CalendarOutlined className={styles.leftIcon} />
<span className={styles.rightText}>
{formatDate(item.update_date)}
</span>
</div>
{/* <Avatar.Group size={25}>
<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />
<a href="https://ant.design">
<Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
</a>
<Tooltip title="Ant User" placement="top">
<Avatar
style={{ backgroundColor: '#87d068' }}
icon={<UserOutlined />}
/>
</Tooltip>
<Avatar
style={{ backgroundColor: '#1677ff' }}
icon={<AntDesignOutlined />}
/>
</Avatar.Group> */}
</div>
</div>
</div>
</Card>
);
};
export default KnowledgeCard;
|