File size: 3,438 Bytes
503735c eb38196 af3ef26 9aadaa2 badd5fe bb69456 af3ef26 8441328 bb69456 9aadaa2 af3ef26 eb38196 af3ef26 badd5fe 9aadaa2 af3ef26 bb69456 8441328 bb69456 97d4387 7c4aa10 af3ef26 9aadaa2 af3ef26 9aadaa2 af3ef26 9aadaa2 af3ef26 9aadaa2 af3ef26 9aadaa2 af3ef26 9aadaa2 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 |
import { KnowledgeRouteKey } from '@/constants/knowledge';
import { IKnowledge } from '@/interfaces/database/knowledge';
import { formatDate } from '@/utils/date';
import {
CalendarOutlined,
FileTextOutlined,
UserOutlined,
} from '@ant-design/icons';
import { Avatar, Badge, Card, Space } from 'antd';
import classNames from 'classnames';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'umi';
import OperateDropdown from '@/components/operate-dropdown';
import { useDeleteKnowledge } from '@/hooks/knowledge-hooks';
import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
import styles from './index.less';
interface IProps {
item: IKnowledge;
}
const KnowledgeCard = ({ item }: IProps) => {
const navigate = useNavigate();
const { t } = useTranslation();
const { data: userInfo } = useFetchUserInfo();
const { deleteKnowledge } = useDeleteKnowledge();
const removeKnowledge = async () => {
return deleteKnowledge(item.id);
};
const handleCardClick = () => {
navigate(`/knowledge/${KnowledgeRouteKey.Dataset}?id=${item.id}`, {
state: { from: 'list' },
});
};
return (
<Badge.Ribbon
text={item.nickname}
color={userInfo.nickname === item.nickname ? '#1677ff' : 'pink'}
className={classNames(styles.ribbon, {
[styles.hideRibbon]: item.permission !== 'team',
})}
>
<Card className={styles.card} onClick={handleCardClick}>
<div className={styles.container}>
<div className={styles.content}>
<Avatar size={34} icon={<UserOutlined />} src={item.avatar} />
<OperateDropdown deleteItem={removeKnowledge}></OperateDropdown>
</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>
</Badge.Ribbon>
);
};
export default KnowledgeCard;
|