From 1a5edb41cadd1e64f3a8b04024cbc1fbff2f737c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E9=98=B3?= <3311118881@qq.com>
Date: Thu, 22 Aug 2024 14:56:09 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/File/index.scss  | 18 ++++++------------
 src/pages/File/index.tsx   | 36 +++++++++++++++++++-----------------
 src/pages/Swiper/index.tsx |  5 ++---
 3 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/src/pages/File/index.scss b/src/pages/File/index.scss
index 17bae8d..ef9316a 100644
--- a/src/pages/File/index.scss
+++ b/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;
-        }
+    .anticon {
+        font-size: 20px;
+        color: #5d5d5d;
+        padding: 10px;
 
         &:hover {
-            background-color: #f7f7ff;
+            color: #727cf5;
         }
     }
 }
\ No newline at end of file
diff --git a/src/pages/File/index.tsx b/src/pages/File/index.tsx
index 756caef..f2cc537 100644
--- a/src/pages/File/index.tsx
+++ b/src/pages/File/index.tsx
@@ -109,24 +109,26 @@ export default () => {
                                                         },
                                                     ) => (
                                                         <Space className="toolbar-wrapper">
-                                                            <Popconfirm
-                                                                title="警告"
-                                                                description="删除后无法恢复，确定要删除吗"
-                                                                onConfirm={() => onDeleteImage(item)}
-                                                                okText="删除"
-                                                                cancelText="取消"
-                                                            >
-                                                                <DeleteOutlined />
-                                                            </Popconfirm>
+                                                            <div className='customAntdPreviewsItem'>
+                                                                <Popconfirm
+                                                                    title="警告"
+                                                                    description="删除后无法恢复，确定要删除吗"
+                                                                    onConfirm={() => onDeleteImage(item)}
+                                                                    okText="删除"
+                                                                    cancelText="取消"
+                                                                >
+                                                                    <DeleteOutlined />
+                                                                </Popconfirm>
 
-                                                            <DownloadOutlined onClick={() => onDownloadImage(item)} />
-                                                            <SwapOutlined rotate={90} onClick={onFlipY} />
-                                                            <SwapOutlined onClick={onFlipX} />
-                                                            <RotateLeftOutlined onClick={onRotateLeft} />
-                                                            <RotateRightOutlined onClick={onRotateRight} />
-                                                            <ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />
-                                                            <ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} />
-                                                            <UndoOutlined onClick={onReset} />
+                                                                <DownloadOutlined onClick={() => onDownloadImage(item)} />
+                                                                <SwapOutlined rotate={90} onClick={onFlipY} />
+                                                                <SwapOutlined onClick={onFlipX} />
+                                                                <RotateLeftOutlined onClick={onRotateLeft} />
+                                                                <RotateRightOutlined onClick={onRotateRight} />
+                                                                <ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />
+                                                                <ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} />
+                                                                <UndoOutlined onClick={onReset} />
+                                                            </div>
                                                         </Space>
                                                     ),
                                                 }} />
diff --git a/src/pages/Swiper/index.tsx b/src/pages/Swiper/index.tsx
index c59ce93..27546a0 100644
--- a/src/pages/Swiper/index.tsx
+++ b/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, },