File size: 3,783 Bytes
503735c eb38196 af3ef26 9aadaa2 badd5fe bb69456 af3ef26 8441328 53f091c bb69456 9aadaa2 af3ef26 eb38196 af3ef26 badd5fe 9aadaa2 53f091c bb69456 8441328 bb69456 97d4387 7c4aa10 af3ef26 9aadaa2 d1bf860 51db3f9 9aadaa2 af3ef26 9aadaa2 53f091c 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 103 104 105 106 107 108 109 110 111 112 113 |
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 { useTheme } from '@/components/theme-provider';
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 { theme } = useTheme();
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={theme === 'dark' ? styles.titledark : styles.title}
>
{item.name}
</span>
<p
className={
theme === 'dark' ? styles.descriptiondark : styles.description
}
>
{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;
|