样式

src/pages/File/index.scss

@@ -10,24 +10,18 @@
 }
 
 // 自定义图片预览样式
-.ant-image-preview-footer {
+.customAntdPreviewsItem {
     overflow: hidden;
     background: #fff;
     border-radius: 10px;
 
-    .ant-space-gap-col-small {
-        column-gap: 0
-    }
-
-    .ant-space-item {
     .anticon {
         font-size: 20px;
         color: #5d5d5d;
         padding: 10px;
-        }
 
         &:hover {
-            background-color: #f7f7ff;
+            color: #727cf5;
         }
     }
 }

src/pages/File/index.tsx

@@ -109,6 +109,7 @@ export default () => {
                                                         },
                                                     ) => (
                                                         <Space className="toolbar-wrapper">
+                                                            <div className='customAntdPreviewsItem'>
                                                                 <Popconfirm
                                                                     title="警告"
                                                                     description="删除后无法恢复，确定要删除吗"
@@ -127,6 +128,7 @@ export default () => {
                                                                 <ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />
                                                                 <ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} />
                                                                 <UndoOutlined onClick={onReset} />
+                                                            </div>
                                                         </Space>
                                                     ),
                                                 }} />

src/pages/Swiper/index.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Table, Button, Modal, Form, Input, Tabs, Card, Popconfirm, message } from 'antd';
+import { Table, Button, Image, Form, Input, Tabs, Card, Popconfirm, message } from 'antd';
 import { getSwiperListAPI, addSwiperDataAPI, editSwiperDataAPI, delSwiperDataAPI } from '@/api/Swiper';
 import { Swiper } from '@/types/app/swiper';
 import Title from '@/components/Title';
@@ -12,14 +12,13 @@ const SwiperPage = () => {
     const [swiper, setSwiper] = useState<Swiper>({} as Swiper);
     const [list, setList] = useState<Swiper[]>([]);
     const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
-    const [viewImage, setViewImage] = useState<string>('');
     const [tab, setTab] = useState<string>('list');
 
     const columns: ColumnsType<Swiper> = [
         { title: 'ID', dataIndex: 'id', key: 'id', align: 'center' },
         {
             title: '图片', dataIndex: 'image', key: 'image', width: 200,
-            render: (text: string) => <img src={text} alt="swiper" className="w-full rounded cursor-pointer" onClick={() => setViewImage(text)} />
+            render: (url: string) => <Image width={200} src={url} className="w-full rounded cursor-pointer" />
         },
         { title: '标题', dataIndex: 'title', key: 'title' },
         { title: '描述', dataIndex: 'description', key: 'description', width: 500, },