flow-playform-react/src/pages/scene/cardWrap.tsx

import React from 'react';
import styles from './style/cardWrap.module.less';
import { getImageUrl } from '@/utils/pubUse';
import { Image, Popconfirm } from '@arco-design/web-react';
import { IconEdit, IconDelete } from '@arco-design/web-react/icon';

interface CardWrapProps {
  item: any;
  onEdit?: (item: any, e: React.MouseEvent) => void;
  onDelete?: (item: any, e: React.MouseEvent) => void;
  onClick?: (item: any, e: React.MouseEvent) => void;
}

const CardWrap: React.FC<CardWrapProps> = ({ item, onEdit, onDelete, onClick }) => {
  const handleEdit = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (onEdit) {
      onEdit(item, e);
    }
  };

  const handleDelete = (e: React.MouseEvent) => {
    e.stopPropagation();
  };

  const handleClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (onClick) {
      onClick(item, e);
    }
  };

  const onOk = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (onDelete) {
      onDelete(item, e);
    }
  };

  return (
    <div className={styles['card-wrap']} onClick={handleClick}>
      <div className={styles['card-header']}>
        <Image
          preview={false}
          src={getImageUrl(item.logo)}
        />
      </div>
      <div className={styles['card-content']}>
        <div className={styles['card-title']}>{item.name}</div>
        <div className={styles['card-desc']}>{item.description}</div>
      </div>
      <div className={styles['card-footer']}>
        <div className={styles['owner']}>
          {/*<Image*/}
          {/*/>*/}
          <span>头像&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <span>{item.createUser}</span>
        </div>
        <div className={styles['operation']}>
          <span className={styles['icon-hover']} onClick={handleEdit}>
            <IconEdit />
          </span>
          <Popconfirm
            trigger="click"
            title="确认删除该工程?"
            onOk={(e: React.MouseEvent) => onOk(e)}
            onCancel={(e: React.MouseEvent) => e.stopPropagation()}
          >
            <span className={styles['icon-hover']} onClick={handleDelete}>
              <IconDelete />
            </span>
          </Popconfirm>
        </div>
      </div>
    </div>
  );
};

export default CardWrap;