ci4sManagement-cloud/react-ui/src/pages/CodeConfig/components/CodeConfigItem/index.tsx

import clock from '@/assets/img/clock.png';
import creatByImg from '@/assets/img/creatBy.png';
import KFIcon from '@/components/KFIcon';
import { AvailableRange } from '@/enums';
import { type CodeConfigData } from '@/pages/CodeConfig/List';
import { formatDate } from '@/utils/date';
import { Button, Flex, Typography } from 'antd';
import classNames from 'classnames';
import styles from './index.less';

type CodeConfigItemProps = {
  item: CodeConfigData;
  onClick?: (item: CodeConfigData) => void;
  onEdit?: (item: CodeConfigData) => void;
  onRemove?: (item: CodeConfigData) => void;
};

function CodeConfigItem({ item, onClick, onEdit, onRemove }: CodeConfigItemProps) {
  return (
    <div className={styles['code-config-item']} onClick={() => onClick?.(item)}>
      <Flex justify="space-between" align="center" style={{ marginBottom: '20px', height: '32px' }}>
        <img
          className={styles['code-config-item__icon']}
          src={require('@/assets/img/code-name-icon.png')}
          alt=""
        />
        <Typography.Paragraph
          className={styles['code-config-item__name']}
          ellipsis={{ tooltip: item.code_repo_name }}
        >
          {item.code_repo_name}
        </Typography.Paragraph>
        <div
          className={classNames(
            styles['code-config-item__tag'],
            item.code_repo_vis === AvailableRange.Public
              ? styles['code-config-item__tag--public']
              : styles['code-config-item__tag--private'],
          )}
        >
          {item.code_repo_vis === AvailableRange.Public ? '公开' : '私有'}
        </div>
        <Button
          type="text"
          shape="circle"
          style={{ marginLeft: 'auto', marginRight: '4px' }}
          onClick={(e) => {
            e.stopPropagation();
            onEdit?.(item);
          }}
        >
          <KFIcon type="icon-bianji" font={17} />
        </Button>
        <Button
          type="text"
          shape="circle"
          style={{ marginRight: '-4px' }}
          onClick={(e) => {
            e.stopPropagation();
            onRemove?.(item);
          }}
        >
          <KFIcon type="icon-shanchu" font={17} />
        </Button>
      </Flex>
      <div className={styles['code-config-item__url-box']}>
        <Typography.Paragraph
          className={styles['code-config-item__url']}
          ellipsis={{ tooltip: item.git_url }}
        >
          {item.git_url}
        </Typography.Paragraph>
        <Typography.Paragraph
          className={styles['code-config-item__branch']}
          ellipsis={{ tooltip: item.git_branch }}
        >
          {item.git_branch}
        </Typography.Paragraph>
      </div>
      <Flex justify="space-between">
        <div className={styles['code-config-item__user']}>
          <img
            style={{ width: '16px', marginRight: '6px' }}
            src={creatByImg}
            alt=""
            draggable={false}
          />
          <span>{item.create_by}</span>
        </div>
        <div className={styles['code-config-item__time']}>
          <img style={{ width: '12px', marginRight: '5px' }} src={clock} alt="" draggable={false} />
          <span>最近更新: {formatDate(item.update_time, 'YYYY-MM-DD')}</span>
        </div>
      </Flex>
    </div>
  );
}

export default CodeConfigItem;