添加多图片浏览功能

src/pages/ImageMachineReview/index.jsx

@@ -53,9 +53,16 @@ const ImageMachineReviewContent = (props) => {
       key: "newMedia",
       render: (data) => (
         <div className="flex flex-wrap gap-1">
-          {data?.map((item, index) => (
+          <Image.PreviewGroup items={data?.map((item) => item.urls[0])}>
-            <Image key={index} src={item.urls[0]} width={100} />
+            {data.map((item) => (
+              <Image
+                key={item.urls[0]}
+                src={item.urls[0]}
+                width={100}
+                style={{ marginBottom: 10 }}
+              />
             ))}
+          </Image.PreviewGroup>
         </div>
       ),
     },
@@ -65,9 +72,9 @@ const ImageMachineReviewContent = (props) => {
       key: "oldMedia",
       render: (data) => (
         <div className="flex flex-wrap gap-1">
-          {data?.map((item, index) => (
+          <Image.PreviewGroup items={data?.map((item) => item.urls[0])}>
-            <Image key={index} src={item.urls[0]} width={100} />
+            <Image src={data[0].urls[0]} width={100} />
-          ))}
+          </Image.PreviewGroup>
         </div>
       ),
     },

src/pages/StreamerInformation/index.jsx

@@ -130,6 +130,7 @@ const StreamerInformationContent = () => {
           key: "displayGallery",
           render: (data) => (
             <div>
+              <Image.PreviewGroup items={data?.map((item) => item.urls[0])}>
                 {data.map((item) => (
                   <Image
                     key={item.urls[0]}
@@ -138,6 +139,7 @@ const StreamerInformationContent = () => {
                     style={{ marginBottom: 10 }}
                   />
                 ))}
+              </Image.PreviewGroup>
             </div>
           ),
         };

src/pages/StreamerInformationCompleteNew/index.jsx

@@ -112,6 +112,7 @@ const JoinContent = (props) => {
       key: "displayGallery",
       render: (data) => (
         <div>
+          <Image.PreviewGroup items={data?.map((item) => item.urls[0])}>
             {data.map((item) => (
               <Image
                 key={item.urls[0]}
@@ -120,6 +121,7 @@ const JoinContent = (props) => {
                 style={{ marginBottom: 10 }}
               />
             ))}
+          </Image.PreviewGroup>
         </div>
       ),
     },

src/pages/StreamerJoin/index.jsx

@@ -141,6 +141,7 @@ const JoinContent = (props) => {
       key: "displayGallery",
       render: (data) => (
         <div>
+          <Image.PreviewGroup items={data?.map((item) => item.urls[0])}>
             {data.map((item) => (
               <Image
                 key={item.urls[0]}
@@ -149,6 +150,7 @@ const JoinContent = (props) => {
                 style={{ marginBottom: 10 }}
               />
             ))}
+          </Image.PreviewGroup>
         </div>
       ),
     },

src/pages/StreamerVerification/index.jsx

@@ -51,14 +51,16 @@ const VerificationContent = (props) => {
       key: "ID_card_photos",
       render: (data) => (
         <div>
-          {data.map((item, index) => (
+          <Image.PreviewGroup items={data?.map((item) => item.urls[0])}>
+            {data.map((item) => (
               <Image
-              key={index}
+                key={item.urls[0]}
-              className="mb-2"
                 src={item.urls[0]}
                 width={100}
+                style={{ marginBottom: 10 }}
               />
             ))}
+          </Image.PreviewGroup>
         </div>
       ),
     },