完善功能图片浏览功能

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,6 +37,9 @@ const CreateAndEditPostContent = (props) => {
       key: "media",
       render: (data) => (
         <div>
+          <Image.PreviewGroup
+            items={data?.images?.map((item) => item.urls[0])}
+          >
             {data?.images?.map((item, index) => (
               <Image
                 key={index}
@@ -45,6 +48,7 @@ const CreateAndEditPostContent = (props) => {
                 style={{ marginBottom: 10 }}
               />
             ))}
+          </Image.PreviewGroup>
           {data?.videos?.map((item, index) => (
             <VideoPlayer key={index} url={item.urls[0]} />
           ))}

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]}/>
             ))}

src/pages/StreamerImageMachineReview/index.jsx

@@ -53,9 +53,11 @@ const StreamerImageMachineReviewContent = (props) => {
       key: "newMedia",
       render: (data) => (
         <div className="flex flex-wrap gap-1">
+          <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">
+          <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>
       ),
     },

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,6 +34,7 @@ const TopPostsContent = (props) => {
       key: "media",
       render: (data) => (
         <div>
+          <Image.PreviewGroup items={data?.images?.map((item) => item.urls[0])}>
             {data?.images?.map((item, index) => (
               <Image
                 key={index}
@@ -42,6 +43,7 @@ const TopPostsContent = (props) => {
                 style={{ marginBottom: 10 }}
               />
             ))}
+          </Image.PreviewGroup>
           {data?.videos?.map((item, index) => (
             <VideoPlayer key={index} url={item.urls[0]} width={150} />
           ))}

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,9 +48,11 @@ const ZonePostMachineReviewContent = (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]} width={150} />
             ))}