|
|
|
@@ -0,0 +1,54 @@ |
|
|
|
import clock from '@/assets/img/clock.png'; |
|
|
|
import creatByImg from '@/assets/img/creatBy.png'; |
|
|
|
import KFIcon from '@/components/KFIcon'; |
|
|
|
import { formatDate } from '@/utils/date'; |
|
|
|
import { Button, Flex, Typography } from 'antd'; |
|
|
|
import { ResourceData } from '../../config'; |
|
|
|
import styles from './index.less'; |
|
|
|
|
|
|
|
type ResourceItemProps = { |
|
|
|
item: ResourceData; |
|
|
|
isPublic: boolean; |
|
|
|
onRemove: (item: ResourceData) => void; |
|
|
|
onClick: (item: ResourceData) => void; |
|
|
|
}; |
|
|
|
|
|
|
|
function ResourceItem({ item, isPublic, onClick, onRemove }: ResourceItemProps) { |
|
|
|
return ( |
|
|
|
<div className={styles['resource-item']} onClick={() => onClick(item)}> |
|
|
|
<Flex justify="space-between" align="center" style={{ marginBottom: '20px', height: '32px' }}> |
|
|
|
<Typography.Paragraph |
|
|
|
className={styles['resource-item__name']} |
|
|
|
ellipsis={{ tooltip: item.name }} |
|
|
|
> |
|
|
|
{item.name} |
|
|
|
</Typography.Paragraph> |
|
|
|
{!isPublic && ( |
|
|
|
<Button |
|
|
|
type="text" |
|
|
|
shape="circle" |
|
|
|
onClick={(e) => { |
|
|
|
e.stopPropagation(); |
|
|
|
onRemove(item); |
|
|
|
}} |
|
|
|
> |
|
|
|
<KFIcon type="icon-shanchu" font={17} /> |
|
|
|
</Button> |
|
|
|
)} |
|
|
|
</Flex> |
|
|
|
<div className={styles['resource-item__description']}>{item.description}</div> |
|
|
|
<Flex justify="space-between"> |
|
|
|
<div className={styles['resource-item__time']}> |
|
|
|
<img style={{ width: '17px', marginRight: '6px' }} src={creatByImg} alt="" /> |
|
|
|
<span>{item.create_by}</span> |
|
|
|
</div> |
|
|
|
<div className={styles['resource-item__time']}> |
|
|
|
<img style={{ width: '12px', marginRight: '5px' }} src={clock} alt="" /> |
|
|
|
<span>最近更新: {formatDate(item.update_time, 'YYYY-MM-DD')}</span> |
|
|
|
</div> |
|
|
|
</Flex> |
|
|
|
</div> |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
export default ResourceItem; |