ci4sManagement-cloud/react-ui/src/pages/Dataset/components/ResourceItem/index.tsx

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) {
  const timeAgo = `最近更新：${formatDate(item.full_last_update_time, 'YYYY-MM-DD HH:mm')}`;
  const create_by = item.create_by ?? '';
  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" gap={'0 8px'}>
        <div className={styles['resource-item__time']}>
          <img
            style={{ width: '17px', marginRight: '6px' }}
            src={creatByImg}
            draggable={false}
            alt=""
          />
          <Typography.Text ellipsis={{ tooltip: create_by }}>{create_by}</Typography.Text>
        </div>
        <div className={styles['resource-item__time']}>
          <img style={{ width: '12px', marginRight: '5px' }} src={clock} draggable={false} alt="" />
          <Typography.Text ellipsis={{ tooltip: timeAgo }}>{timeAgo}</Typography.Text>
          <div className={styles['resource-item__time__separator']}></div>
          <KFIcon type="icon-dianzan" font={16} />
          <div className={styles['resource-item__time__praise']}>{item.praises_count}</div>
        </div>
      </Flex>
    </div>
  );
}

export default ResourceItem;