fix

src/pages/launchSystemV3/adqv3/creative/box.tsx

@@ -3,20 +3,25 @@ import React, { useMemo } from 'react'
 
 interface Props {
     creativeComponents: {
-        brand: {
+        brand?: {
             value: {
                 brandName: string
             }
         }[],
-        description: {
+        description?: {
             value: {
                 content: string
             }
         }[],
-        video: {
+        video?: {
             value: {
                 videoUrl: string
             }
+        }[],
+        image?: {
+            value: {
+                imageUrl: string
+            }
         }[]
     }
 }
@@ -28,34 +33,71 @@ const Box: React.FC<Props> = ({ creativeComponents }) => {
 
     let el = useMemo(() => {
         let video = creativeComponents?.video?.[0]?.value?.videoUrl
-        let title = creativeComponents?.brand?.[0]?.value?.brandName
-        let description = creativeComponents?.description?.[0]?.value?.content
+        let imageUrl = creativeComponents?.image
+        let titles = creativeComponents?.brand
+        let descriptions = creativeComponents?.description
         if (video) {
             return <div>
                 <Popover
                     placement='right'
                     content={<div>
-                        <div style={{ maxWidth: 300 }}><strong style={{ fontSize: 15 }}>标题:</strong>{title}</div>
-                        <small style={{ fontSize: 10, maxWidth: 300, display: 'inline-block' }}><strong style={{ fontSize: 13 }}>描述：</strong>{description}</small>
+                        {titles && titles?.length > 0 && <Space direction="vertical">
+                            {titles.map((item, index) => <div key={index} style={{ maxWidth: 300 }}><strong style={{ fontSize: 15 }}>标题:</strong>{item?.value?.brandName}</div>)}
+                        </Space>}
+                        {descriptions && descriptions?.length > 0 && <Space direction="vertical">
+                            {descriptions.map((item, index) => <small key={index} style={{ fontSize: 10, maxWidth: 300, display: 'inline-block' }}><strong style={{ fontSize: 13 }}>描述：</strong>{item?.value?.content}</small>)}
+                        </Space>}
                         <Space style={{ maxWidth: 300, display: 'flex', flexFlow: 'row wrap', margin: '10px 0' }}>
                             <video src={video} style={{ width: 250 }} controls />
                         </Space>
                     </div>}
                     destroyTooltipOnHide
+                    mouseEnterDelay={0.5}
                 >
                     <Space style={{ width: '100%' }}>
-                        {/* <video src={video} height={20} /> */}
-                        <a>{title}</a>
+                        <video src={video} style={{ maxHeight: 20, maxWidth: 30 }} />
+                        <a>{titles?.[0]?.value?.brandName}</a>
                     </Space>
                 </Popover>
             </div>
+        } else if (imageUrl && imageUrl?.length > 0) {
+            return <Popover
+                placement='right'
+                content={<div
+                    style={{ maxHeight: 450, overflow: 'hidden', overflowY: 'auto' }}
+                >
+                    <Space direction="vertical">
+                        {titles && titles?.length > 0 && <Space direction="vertical">
+                            {titles.map((item, index) => <div key={index} style={{ maxWidth: 300 }}><strong style={{ fontSize: 15 }}>标题:</strong>{item?.value?.brandName}</div>)}
+                        </Space>}
+                        {descriptions && descriptions?.length > 0 && <Space direction="vertical">
+                            {descriptions.map((item, index) => <small key={index} style={{ fontSize: 10, maxWidth: 300, display: 'inline-block' }}><strong style={{ fontSize: 13 }}>描述：</strong>{item?.value?.content}</small>)}
+                        </Space>}
+                        <Space wrap style={{ maxWidth: 500 }}>
+                            {imageUrl?.map((item, index) => <img key={index} src={item?.value?.imageUrl} height={100} />)}
+                        </Space>
+                    </Space>
+                </div>}
+                destroyTooltipOnHide
+                mouseEnterDelay={0.5}
+            >
+                <Space style={{ width: '100%' }}>
+                    {imageUrl?.map((item, index) => <img key={index} src={item?.value?.imageUrl} height={20} />)}
+                </Space>
+            </Popover>
+        } else if (titles && titles?.length > 0) {
+            return <span>{titles?.[0]?.value?.brandName}</span>
+        } else if (descriptions && descriptions?.length > 0) {
+            return <span>{descriptions?.[0]?.value?.content}</span>
         } else {
             return <span>--</span>
         }
 
     }, [creativeComponents])
 
-    return el
+    return <div style={{ overflow: 'hidden', overflowX: 'auto' }}>
+        {el}
+    </div>
 }
 
 export default React.memo(Box)