From a02e57e40467beff44748a903413116bac2f0f40 Mon Sep 17 00:00:00 2001
From: al <al@cdhncy.com>
Date: Thu, 8 Aug 2024 20:34:18 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=8A=9F=E8=83=BD=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E6=B5=8F=E8=A7=88=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/CreateAndEditPost/index.jsx         | 26 +++++++++++--------
 src/pages/EditSpacePost/index.jsx             |  2 ++
 .../StreamerImageMachineReview/index.jsx      | 16 +++++++-----
 src/pages/TopPosts/index.jsx                  | 22 +++++++++-------
 src/pages/ZonePostMachineReview/index.jsx     | 12 +++++----
 5 files changed, 46 insertions(+), 32 deletions(-)

diff --git a/src/pages/CreateAndEditPost/index.jsx b/src/pages/CreateAndEditPost/index.jsx
index 94c777f..a97f857 100644
--- a/src/pages/CreateAndEditPost/index.jsx
+++ b/src/pages/CreateAndEditPost/index.jsx
@@ -3,7 +3,7 @@ import { Form, Input, Table, Image, Space, Button, Modal, message } from "antd";
 import baseRequest from "../../utils/baseRequest";
 import ImageUploader from "../../components/ImageUploader";
 import VideoUploader from "../../components/VideoUploader";
-import VideoPlayer from '../../components/VideoPlayer';
+import VideoPlayer from "../../components/VideoPlayer";
 const CreateAndEditPostContent = (props) => {
   const { TextArea } = Input;
   //表头
@@ -37,16 +37,20 @@ const CreateAndEditPostContent = (props) => {
       key: "media",
       render: (data) => (
         <div>
-          {data?.images?.map((item, index) => (
-            <Image
-              key={index}
-              src={item.urls[0]}
-              width={150}
-              style={{ marginBottom: 10 }}
-            />
-          ))}
+          <Image.PreviewGroup
+            items={data?.images?.map((item) => item.urls[0])}
+          >
+            {data?.images?.map((item, index) => (
+              <Image
+                key={index}
+                src={item.urls[0]}
+                width={150}
+                style={{ marginBottom: 10 }}
+              />
+            ))}
+          </Image.PreviewGroup>
           {data?.videos?.map((item, index) => (
-            <VideoPlayer key={index} url={item.urls[0]}/>
+            <VideoPlayer key={index} url={item.urls[0]} />
           ))}
         </div>
       ),
@@ -542,7 +546,7 @@ const CreateAndEditPostContent = (props) => {
               <div className="flex flex-row mt-4">
                 <div className="relative">
                   <div className="mr-auto">
-                  <VideoPlayer url={defaultMedia.videos[0].urls[0]}/>
+                    <VideoPlayer url={defaultMedia.videos[0].urls[0]} />
                   </div>
                   <Button
                     className="absolute top-0 left-0 w-full"
diff --git a/src/pages/EditSpacePost/index.jsx b/src/pages/EditSpacePost/index.jsx
index b822b47..414aff5 100644
--- a/src/pages/EditSpacePost/index.jsx
+++ b/src/pages/EditSpacePost/index.jsx
@@ -55,9 +55,11 @@ const EditSpacePostContent = (props) => {
           </div>
           <p className="text-red-400">媒体：</p>
           <div className="flex flex-wrap gap-1">
+            <Image.PreviewGroup items={data.media.images?.map((item) => item.urls[0])}>
             {data.media.images.map((item, index) => (
               <Image key={index} src={item.urls[0]} width={100} />
             ))}
+            </Image.PreviewGroup>
             {data.media.videos.map((item, index) => (
               <VideoPlayer key={index} url={item.urls[0]}/>
             ))}
diff --git a/src/pages/StreamerImageMachineReview/index.jsx b/src/pages/StreamerImageMachineReview/index.jsx
index f36de91..2b494cc 100644
--- a/src/pages/StreamerImageMachineReview/index.jsx
+++ b/src/pages/StreamerImageMachineReview/index.jsx
@@ -53,9 +53,11 @@ const StreamerImageMachineReviewContent = (props) => {
       key: "newMedia",
       render: (data) => (
         <div className="flex flex-wrap gap-1">
-          {data?.map((item, index) => (
-            <Image key={index} src={item.urls[0]} width={100} />
-          ))}
+          <Image.PreviewGroup items={data?.map((item) => item.urls[0])}>
+            {data?.map((item, index) => (
+              <Image key={index} src={item.urls[0]} width={100} />
+            ))}
+          </Image.PreviewGroup>
         </div>
       ),
     },
@@ -65,9 +67,11 @@ const StreamerImageMachineReviewContent = (props) => {
       key: "oldMedia",
       render: (data) => (
         <div className="flex flex-wrap gap-1">
-          {data?.map((item, index) => (
-            <Image key={index} src={item.urls[0]} width={100} />
-          ))}
+          <Image.PreviewGroup items={data?.map((item) => item.urls[0])}>
+            {data?.map((item, index) => (
+              <Image key={index} src={item.urls[0]} width={100} />
+            ))}
+          </Image.PreviewGroup>
         </div>
       ),
     },
diff --git a/src/pages/TopPosts/index.jsx b/src/pages/TopPosts/index.jsx
index 94694ef..a8dfc54 100644
--- a/src/pages/TopPosts/index.jsx
+++ b/src/pages/TopPosts/index.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Form, Input, Table, Image, Space, Button, Modal, message } from "antd";
 import baseRequest from "../../utils/baseRequest";
-import VideoPlayer from '../../components/VideoPlayer';
+import VideoPlayer from "../../components/VideoPlayer";
 const TopPostsContent = (props) => {
   //表头
   const columns = [
@@ -34,16 +34,18 @@ const TopPostsContent = (props) => {
       key: "media",
       render: (data) => (
         <div>
-          {data?.images?.map((item, index) => (
-            <Image
-              key={index}
-              src={item.urls[0]}
-              width={150}
-              style={{ marginBottom: 10 }}
-            />
-          ))}
+          <Image.PreviewGroup items={data?.images?.map((item) => item.urls[0])}>
+            {data?.images?.map((item, index) => (
+              <Image
+                key={index}
+                src={item.urls[0]}
+                width={150}
+                style={{ marginBottom: 10 }}
+              />
+            ))}
+          </Image.PreviewGroup>
           {data?.videos?.map((item, index) => (
-            <VideoPlayer key={index}  url={item.urls[0]} width={150} />
+            <VideoPlayer key={index} url={item.urls[0]} width={150} />
           ))}
         </div>
       ),
diff --git a/src/pages/ZonePostMachineReview/index.jsx b/src/pages/ZonePostMachineReview/index.jsx
index 237f908..b1ae85c 100644
--- a/src/pages/ZonePostMachineReview/index.jsx
+++ b/src/pages/ZonePostMachineReview/index.jsx
@@ -8,7 +8,7 @@ import {
   useLocation,
 } from "react-router-dom";
 import baseRequest from "../../utils/baseRequest";
-import VideoPlayer from '../../components/VideoPlayer';
+import VideoPlayer from "../../components/VideoPlayer";
 const ZonePostMachineReviewContent = (props) => {
   const { TextArea } = Input;
   const current = props.current;
@@ -48,11 +48,13 @@ const ZonePostMachineReviewContent = (props) => {
           </div>
           <p className="text-red-400">媒体：</p>
           <div className="flex flex-wrap gap-1">
-            {data.media.images.map((item, index) => (
-              <Image key={index} src={item.urls[0]} width={100} />
-            ))}
+            <Image.PreviewGroup items={data.media.images?.map((item) => item.urls[0])}>
+              {data.media.images.map((item, index) => (
+                <Image key={index} src={item.urls[0]} width={100} />
+              ))}
+            </Image.PreviewGroup>
             {data.media.videos.map((item, index) => (
-              <VideoPlayer key={index}  url={item.urls[0]} width={150} />
+              <VideoPlayer key={index} url={item.urls[0]} width={150} />
             ))}
           </div>
         </div>