File size: 3,745 Bytes
af3ef26 503735c e441caf eb38196 af3ef26 503735c badd5fe af3ef26 eb38196 af3ef26 e441caf badd5fe af3ef26 97d4387 eb38196 af3ef26 badd5fe eb38196 af3ef26 eb38196 97d4387 7c4aa10 af3ef26 452020d 657bc8a af3ef26 657bc8a af3ef26 452020d af3ef26 badd5fe af3ef26 8d2a400 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 124 125 126 127 128 129 130 |
import { ReactComponent as MoreIcon } from '@/assets/svg/more.svg';
import { KnowledgeRouteKey } from '@/constants/knowledge';
import { useShowDeleteConfirm } from '@/hooks/commonHooks';
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 { useTranslation } from 'react-i18next';
import { useDispatch, useNavigate } from 'umi';
import styles from './index.less';
interface IProps {
item: IKnowledge;
}
const KnowledgeCard = ({ item }: IProps) => {
const navigate = useNavigate();
const dispatch = useDispatch();
const showDeleteConfirm = useShowDeleteConfirm();
const { t } = useTranslation();
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>
{t('common.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}`, {
state: { from: 'list' },
});
};
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.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}
{t('knowledgeList.doc')}
</Space>
</span>
</div>
</div>
<div className={styles.bottom}>
<div className={styles.bottomLeft}>
<CalendarOutlined className={styles.leftIcon} />
<span className={styles.rightText}>
{formatDate(item.update_time)}
</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;
|