antd+react hooks写一个小demo。用table表格展示一组含有图片的数据。table表格的有一列展示图片，点击表头旁边眼睛图标可以查看图片，再次点击可关闭图片图标变闭眼。每一行的图片也可以单独点击展示或隐藏。

好的，我可以帮您完成这个小demo。首先，我们需要准备一些数据和图片资源。假设我们有一个数组`data`，每个元素包含一个图片的url和一些其他的属性，如下所示：

const data = [
  {
    id: 1,
    name: 'Apple',
    image: 'https://picsum.photos/id/1/200/200',
    description: 'A juicy fruit',
  },
  {
    id: 2,
    name: 'Banana',
    image: 'https://picsum.photos/id/2/200/200',
    description: 'A yellow fruit',
  },
  {
    id: 3,
    name: 'Cherry',
    image: 'https://picsum.photos/id/3/200/200',
    description: 'A red fruit',
  },
];

接下来，我们需要使用Antd的Table组件来展示这些数据。我们可以使用`columns`属性来定义表格的列，其中包含一列展示图片。另外，我们还需要定义一个`state`来记录当前哪些行的图片被展示了。

import React, { useState } from 'react';
import { Table, Modal } from 'antd';

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Image',
    dataIndex: 'image',
    render: (text, record) => (
      <img src={text} alt={record.name} style={{ width: '50px', height: '50px', cursor: 'pointer' }} />
    ),
  },
  {
    title: 'Description',
    dataIndex: 'description',
  },
];

const Demo = () => {
  const [visibleRows, setVisibleRows] = useState(new Set());

  const handleImageClick = (record) => {
    const { id } = record;
    const newVisibleRows = new Set(visibleRows);
    if (newVisibleRows.has(id)) {
      newVisibleRows.delete(id);
    } else {
      newVisibleRows.add(id);
    }
    setVisibleRows(newVisibleRows);
  };

  return (
    <Table
      dataSource={data}
      columns={columns}
      rowKey="id"
      onHeaderRow={() => ({
        onClick: () => {
          const newVisibleRows = new Set(visibleRows);
          if (newVisibleRows.size === data.length) {
            newVisibleRows.clear();
          } else {
            data.forEach((item) => {
              newVisibleRows.add(item.id);
            });
          }
          setVisibleRows(newVisibleRows);
        },
      })}
      onRow={(record) => ({
        onClick: () => {
          handleImageClick(record);
        },
      })}
      pagination={false}
    />
  );
};

export default Demo;

在这个组件中，我们使用了`useState`钩子来定义了一个`visibleRows`的状态，它是一个`Set`对象，用来记录哪些行的图片被展示了。我们还定义了一个`handleImageClick`函数，它会根据当前行的id来切换这个行的图片的展示状态。

在表格的列定义中，我们使用了`render`属性来自定义图片的展示方式。在每一行的`onRow`属性中，我们调用了`handleImageClick`函数来处理图片的展示和隐藏。在表头的`onHeaderRow`属性中，我们使用了一个类似于全选的逻辑，来一次性展示或隐藏所有的图片。

最后，我们需要使用Antd的Modal组件来展示单独点击的图片。我们可以在`handleImageClick`函数中添加一些额外的逻辑，来展示或隐藏Modal。

import React, { useState } from 'react';
import { Table, Modal } from 'antd';

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Image',
    dataIndex: 'image',
    render: (text, record) => (
      <img src={text} alt={record.name} style={{ width: '50px', height: '50px', cursor: 'pointer' }} />
    ),
  },
  {
    title: 'Description',
    dataIndex: 'description',
  },
];

const Demo = () => {
  const [visibleRows, setVisibleRows] = useState(new Set());
  const [modalVisible, setModalVisible] = useState(false);
  const [modalImage, setModalImage] = useState(null);

  const handleImageClick = (record) => {
    const { id, image } = record;
    const newVisibleRows = new Set(visibleRows);
    if (newVisibleRows.has(id)) {
      newVisibleRows.delete(id);
    } else {
      newVisibleRows.add(id);
    }
    setVisibleRows(newVisibleRows);

    if (modalImage === image) {
      setModalVisible(!modalVisible);
    } else {
      setModalImage(image);
      setModalVisible(true);
    }
  };

  const handleModalClose = () => {
    setModalVisible(false);
  };

  const modalFooter = [
    <div key="close" onClick={handleModalClose} style={{ cursor: 'pointer', color: '#1890ff' }}>
      Close
    </div>,
  ];

  return (
    <div>
      <Table
        dataSource={data}
        columns={columns}
        rowKey="id"
        onHeaderRow={() => ({
          onClick: () => {
            const newVisibleRows = new Set(visibleRows);
            if (newVisibleRows.size === data.length) {
              newVisibleRows.clear();
            } else {
              data.forEach((item) => {
                newVisibleRows.add(item.id);
              });
            }
            setVisibleRows(newVisibleRows);
          },
        })}
        onRow={(record) => ({
          onClick: () => {
            handleImageClick(record);
          },
        })}
        pagination={false}
      />
      <Modal visible={modalVisible} footer={modalFooter} onCancel={handleModalClose}>
        {modalImage && <img src={modalImage} alt="modal" style={{ maxWidth: '100%', maxHeight: '100%' }} />}
      </Modal>
    </div>
  );
};

export default Demo;

在这个组件中，我们使用了另外两个`useState`钩子，分别用来记录Modal的展示状态和当前展示的图片的url。在`handleImageClick`函数中，我们根据当前展示的图片的url和点击的行的图片的url是否一致，来切换Modal的展示状态。在Modal的`footer`属性中，我们添加了一个关闭按钮，点击它可以关闭Modal。

到此为止，我们的小demo就完成了。您可以尝试在自己的环境中运行它，看看效果如何。