fix

src/pages/launchSystemNew/components/selectCloud/index.tsx

@@ -12,6 +12,7 @@ interface Props {
     onClose?: () => void,
     sliderImgContent?: { url: string, width?: number, height?: number }[]
     isBack?: boolean
+    isGroup?: boolean
 }
 /**
  * 选择素材
@@ -20,7 +21,7 @@ interface Props {
 const SelectCloud: React.FC<Props> = (props) => {
 
     /**================================**/
-    const { visible, onChange, onClose, sliderImgContent, isBack = true } = props
+    const { visible, onChange, onClose, sliderImgContent, isBack = true, isGroup } = props
     const { state, set, getList } = useModel('useLaunchAdq.useBdMediaPup')
     const { mediaType, belongUser, parentId, selectItem, num } = state
 
@@ -41,6 +42,10 @@ const SelectCloud: React.FC<Props> = (props) => {
     }, [])
 
     const handleOk = () => {
+        if (isGroup && num && selectItem && num > selectItem?.length) {
+            message.error(`当前选择了组图${num}图，当前选择了${selectItem.length}个图片`)
+            return
+        }
         if (selectItem && selectItem?.length > 0) {
             onChange && onChange(selectItem)
         } else {

src/pages/launchSystemV3/adqv3/const.tsx

@@ -9,7 +9,12 @@ export enum ADGROUP_STATUS {
     ADGROUP_STATUS_ACTIVE = '投放中',
     ADGROUP_STATUS_DELETED = '已删除',
     ADGROUP_STATUS_ACCOUNT_BALANCE_NOT_ENOUGH = '账户余额不足',
-    ADGROUP_STATUS_DAILY_BUDGET_REACHED = '广告达到日预算上限'
+    ADGROUP_STATUS_DAILY_BUDGET_REACHED = '广告达到日预算上限',
+    ADGROUP_STATUS_PARTIAL_ACTIVE = '部分投放中',
+    ADGROUP_STATUS_CREATIVE_STATUS_PENDING = '创意未投放',
+    ADGROUP_STATUS_CREATIVE_EMPTY = '创意准备中',
+    ADGROUP_STATUS_JOINT_BUDGET_REACHED = '广告被暂停（联合预算达上限）',
+    ADGROUP_STATUS_TOTAL_BUDGET_REACHED = '广告达到总预算上限'
 }
 
 /** 投放模式 */

src/pages/launchSystemV3/components/PageModal/index.tsx

@@ -164,7 +164,7 @@ const PageModal: React.FC<Props> = (props) => {
 
     return <Modal
         title={<Space>
-            <span>ADQ落地页</span>
+            <strong>选择落地页</strong>
             {data?.length > 1 && <Button style={{ padding: 0, margin: 0 }} disabled={!data[selectAdz - 1]['pageList']?.length} onClick={setOnekey} type="link" loading={listAjax.loading}>
                 <Space>
                     <span style={{ fontSize: 12 }}>一键设置</span>

src/pages/launchSystemV3/tencentAdPutIn/create/Material/addMaterial.tsx

@@ -1,5 +1,5 @@
-import { DeleteOutlined, PlusOutlined } from "@ant-design/icons"
-import { Button, Card, Dropdown, Form, Menu, Modal, Popconfirm, Space, message } from "antd"
+import { CloseCircleOutlined, DeleteOutlined, PlusOutlined } from "@ant-design/icons"
+import { Button, Card, Dropdown, Empty, Form, Menu, Modal, Popconfirm, Space, message } from "antd"
 import React, { useEffect, useState } from "react"
 import styles from './index.less'
 import VideoNews from "@/pages/launchSystemNew/components/newsModal/videoNews"
@@ -36,7 +36,8 @@ const AddMaterial: React.FC<Props> = ({ creativeTemplateId, materialData, delive
         list: any[],
         index: number,
         max: number,
-        sliderImgContent: any
+        sliderImgContent: any,
+        isGroup?: boolean
     }>({
         type: '',//类型
         cloudSize: [],//素材搜索条件
@@ -53,7 +54,6 @@ const AddMaterial: React.FC<Props> = ({ creativeTemplateId, materialData, delive
     /*********************************/
 
     useEffect(() => {
-        console.log('materialData--->', materialData)
         if (materialData && Object.keys(materialData).length > 0) {
             let fKey = Object.keys(materialData)[0];
             let children = materialData[fKey]?.children
@@ -79,7 +79,6 @@ const AddMaterial: React.FC<Props> = ({ creativeTemplateId, materialData, delive
                     setImgUploads({ ...data['children']['image'], arrayProperty: data.arrayProperty, name: 'element_story' })
                 }
             }
-            // setImgUploads(childrenKey?.find(item => item === 'cover_id' || item === 'list' || item === 'image_id'))
         } else {
             setVideoUploads({})
             setImgUploads({})
@@ -128,35 +127,63 @@ const AddMaterial: React.FC<Props> = ({ creativeTemplateId, materialData, delive
         }
     }, [value])
 
+    const clearTem = (index: number, count: number) => {
+        let newDynamicGroup = dynamicGroup?.map((item: any, i: number) => {
+            if (i === index) {
+                let oldList = item?.list?.filter((_: any, li: number) => count !== li)
+                return { list: oldList }
+            }
+            return item
+        })
+        form.setFieldsValue({ dynamicGroup: newDynamicGroup })
+    }
+
+    const selectGroupImg = (index: number, num: number) => {
+        init({ mediaType: 'IMG', num, cloudSize: [[{ relation: '=', width: 800, height: 800 }]], maxSize: 400 * 1024 })
+        setMaterialConfig({
+            ...materialConfig,
+            type: 'image',
+            max: num,
+            index,
+            adcreativeTemplateId: creativeTemplateId,
+            isGroup: true
+        })
+        setTimeout(() => {
+            setSelectVideoVisible(true)
+        }, 100)
+    }
+
     return <Modal
         title={<Space>
             <strong style={{ fontSize: 20 }}>创意素材</strong>
-            {videoUploads && Object.keys(videoUploads)?.length > 0 && <Button type="link" onClick={() => {
-                init({ mediaType: 'VIDEO', num: 100, cloudSize: creativeTemplateId === 1708 ? [[{ relation: '=', width: 1280, height: 720 }]] : [[{ relation: '=', width: videoUploads.restriction.videoRestriction.minWidth, height: videoUploads.restriction.videoRestriction.minHeight }]], maxSize: videoUploads.restriction.videoRestriction.fileSize * 1024 })
-                setMaterialConfig({
-                    ...materialConfig,
-                    type: videoUploads.name,
-                    max: 1,
-                    index: 99999,
-                    adcreativeTemplateId: creativeTemplateId
-                })
-                setTimeout(() => {
-                    setSelectVideoVisible(true)
-                }, 100)
-            }}>批量添加视频素材</Button>}
-            {imgUploads && Object.keys(imgUploads)?.length > 0 && <Button type="link" onClick={() => {
-                init({ mediaType: 'IMG', num: 100, cloudSize: [[{ relation: '=', width: imgUploads.restriction.imageRestriction.width, height: imgUploads.restriction.imageRestriction.height }]], maxSize: imgUploads.restriction.imageRestriction.fileSize * 1024 })
-                setMaterialConfig({
-                    ...materialConfig,
-                    type: imgUploads.name,
-                    max: (imgUploads.name === 'image_list' || imgUploads.name === 'element_story') ? imgUploads.arrayProperty.maxNumber : 1,
-                    index: 99999,
-                    adcreativeTemplateId: creativeTemplateId
-                })
-                setTimeout(() => {
-                    setSelectVideoVisible(true)
-                }, 100)
-            }}>批量添加图片素材</Button>}
+            {deliveryMode === 'DELIVERY_MODE_CUSTOMIZE' && <>
+                {videoUploads && Object.keys(videoUploads)?.length > 0 && <Button type="link" onClick={() => {
+                    init({ mediaType: 'VIDEO', num: 100, cloudSize: creativeTemplateId === 1708 ? [[{ relation: '=', width: 1280, height: 720 }]] : [[{ relation: '=', width: videoUploads.restriction.videoRestriction.minWidth, height: videoUploads.restriction.videoRestriction.minHeight }]], maxSize: videoUploads.restriction.videoRestriction.fileSize * 1024 })
+                    setMaterialConfig({
+                        ...materialConfig,
+                        type: videoUploads.name,
+                        max: 1,
+                        index: 99999,
+                        adcreativeTemplateId: creativeTemplateId
+                    })
+                    setTimeout(() => {
+                        setSelectVideoVisible(true)
+                    }, 100)
+                }}>批量添加视频素材</Button>}
+                {imgUploads && Object.keys(imgUploads)?.length > 0 && <Button type="link" onClick={() => {
+                    init({ mediaType: 'IMG', num: 100, cloudSize: [[{ relation: '=', width: imgUploads.restriction.imageRestriction.width, height: imgUploads.restriction.imageRestriction.height }]], maxSize: imgUploads.restriction.imageRestriction.fileSize * 1024 })
+                    setMaterialConfig({
+                        ...materialConfig,
+                        type: imgUploads.name,
+                        max: (imgUploads.name === 'image_list' || imgUploads.name === 'element_story') ? imgUploads.arrayProperty.maxNumber : 1,
+                        index: 99999,
+                        adcreativeTemplateId: creativeTemplateId
+                    })
+                    setTimeout(() => {
+                        setSelectVideoVisible(true)
+                    }, 100)
+                }}>批量添加图片素材</Button>}
+            </>}
             {(dynamicGroup && dynamicGroup?.length > 1) && <Popconfirm
                 title="是否清空?"
                 onConfirm={() => form.setFieldsValue({ dynamicGroup: [undefined] })}
@@ -195,7 +222,7 @@ const AddMaterial: React.FC<Props> = ({ creativeTemplateId, materialData, delive
         >
             <Card className="cardResetCss" style={{ marginBottom: 10 }}>
                 <Form.Item name="mediaType" label={<strong>创意组分配规则</strong>} style={{ marginBottom: 0 }} rules={[{ required: true, message: '请选择创意组分配规则!' }]}>
-                    <New1Radio 
+                    <New1Radio
                         data={[{ label: '全账号复用', value: 0 }, { label: '平均分配到广告', value: 1 }, { label: '顺序分配到广告', value: 2 }]}
                         onChange={(e) => {
                             if (e === 2 && dynamicGroup?.length > adLength) {
@@ -214,12 +241,25 @@ const AddMaterial: React.FC<Props> = ({ creativeTemplateId, materialData, delive
                                 {deliveryMode === 'DELIVERY_MODE_COMPONENT' && <>
                                     <Dropdown
                                         overlay={<Menu>
-                                            <Menu.Item onClick={() => { console.log('添加9:16视频') }}>添加9:16视频</Menu.Item>
-                                            <Menu.Item onClick={() => { console.log('添加16:9视频') }}>添加16:9视频</Menu.Item>
-                                            <Menu.Item onClick={() => { console.log('添加9:16(720*1280)图片') }}>添加9:16(720*1280)图片</Menu.Item>
-                                            <Menu.Item onClick={() => { console.log('添加16:9(1280*720)图片') }}>添加16:9(1280*720)图片</Menu.Item>
-                                            <Menu.Item onClick={() => { console.log('添加1:1(800*800)图片') }}>添加1:1(800*800)图片</Menu.Item>
-                                            <Menu.Item onClick={() => { console.log('添加20:7(960*334)图片') }}>添加20:7(960*334)图片</Menu.Item>
+                                            <Menu.Item onClick={() => {
+                                                init({
+                                                    mediaType: 'VIDEO', num: 15, cloudSize: [[
+                                                        { relation: '=', width: 1280, height: 720 },
+                                                        { relation: '=', width: 720, height: 1280 }
+                                                    ]], maxSize: 512000 * 1024
+                                                })
+                                                setMaterialConfig({
+                                                    ...materialConfig,
+                                                    type: 'video',
+                                                    max: 15 - (dynamicGroup?.[num]?.['list']?.length || 0),
+                                                    index: num,
+                                                    adcreativeTemplateId: creativeTemplateId,
+                                                    isGroup: false
+                                                })
+                                                setTimeout(() => {
+                                                    setSelectVideoVisible(true)
+                                                }, 100)
+                                            }}>添加视频</Menu.Item>
                                             <Menu.Item onClick={() => {
                                                 init({
                                                     mediaType: 'IMG', num: 15, cloudSize: [[
@@ -233,14 +273,15 @@ const AddMaterial: React.FC<Props> = ({ creativeTemplateId, materialData, delive
                                                 setMaterialConfig({
                                                     ...materialConfig,
                                                     type: 'image',
-                                                    max: 15,
-                                                    index: 99999,
-                                                    adcreativeTemplateId: creativeTemplateId
+                                                    max: 15 - (dynamicGroup?.[num]?.['list']?.length || 0),
+                                                    index: num,
+                                                    adcreativeTemplateId: creativeTemplateId,
+                                                    isGroup: false
                                                 })
                                                 setTimeout(() => {
                                                     setSelectVideoVisible(true)
                                                 }, 100)
-                                            }}>添加3:2(480*320)图片</Menu.Item>
+                                            }}>新增图片</Menu.Item>
                                         </Menu>}
                                         placement="bottomLeft"
                                         arrow
@@ -249,9 +290,9 @@ const AddMaterial: React.FC<Props> = ({ creativeTemplateId, materialData, delive
                                     </Dropdown>
                                     <Dropdown
                                         overlay={<Menu>
-                                            <Menu.Item onClick={() => { console.log('1:1 六图') }}>1:1 六图</Menu.Item>
-                                            <Menu.Item onClick={() => { console.log('1:1 三图') }}>1:1 三图</Menu.Item>
-                                            <Menu.Item onClick={() => { console.log('1:1 四图') }}>1:1 四图</Menu.Item>
+                                            <Menu.Item disabled={dynamicGroup?.[num]?.['list']?.length >= 15} onClick={() => { selectGroupImg(num, 6) }}>1:1 六图</Menu.Item>
+                                            <Menu.Item disabled={dynamicGroup?.[num]?.['list']?.length >= 15} onClick={() => { selectGroupImg(num, 3) }}>1:1 三图</Menu.Item>
+                                            <Menu.Item disabled={dynamicGroup?.[num]?.['list']?.length >= 15} onClick={() => { selectGroupImg(num, 4) }}>1:1 四图</Menu.Item>
                                         </Menu>}
                                         placement="bottomLeft"
                                         arrow
@@ -262,11 +303,11 @@ const AddMaterial: React.FC<Props> = ({ creativeTemplateId, materialData, delive
                             </Space>}
                             className="cardResetCss"
                             key={field.key}
-                            style={{ width: ([641, 642, 643, 720, 721, 722, 1529, 618].includes(creativeTemplateId) || dynamicGroup?.length === 1) ? '100%' : 'calc(50% - 5px)' }}
+                            style={{ width: deliveryMode === 'DELIVERY_MODE_CUSTOMIZE' ? ([641, 642, 643, 720, 721, 722, 1529, 618].includes(creativeTemplateId) || dynamicGroup?.length === 1) ? '100%' : 'calc(50% - 5px)' : '100%' }}
                             extra={fields?.length > 1 && <DeleteOutlined className={styles.clear} onClick={() => remove(field.name)} style={{ color: 'red' }} />}
                         >
-                            <Space size={30} style={{ width: '100%' }} className={styles.space}>
-                                {deliveryMode === 'DELIVERY_MODE_CUSTOMIZE' ? Object.keys(materialData)?.map(key => {
+                            {deliveryMode === 'DELIVERY_MODE_CUSTOMIZE' ? <Space size={30} style={{ width: '100%' }} className={styles.space}>
+                                {Object.keys(materialData)?.map(key => {
                                     let m = materialData[key]
                                     let children = m.children
 
@@ -385,13 +426,60 @@ const AddMaterial: React.FC<Props> = ({ creativeTemplateId, materialData, delive
 
                                         return null
                                     })
-                                }) : <div>
-                                    11111111111111
-                                </div>}
-                            </Space>
+                                })}
+                            </Space> : <Form.Item
+                                {...field}
+                                label={<strong>创意素材</strong>}
+                                rules={[{ required: true, message: '请选择素材!' }]}
+                                name={[field.name, 'list']}
+                            >
+                                <div className={`${styles.box} ${styles.video}`} style={{ width: '100%', height: 'auto', backgroundColor: 'rgb(247, 249, 252)' }}>
+                                    {dynamicGroup?.length && dynamicGroup?.[num]?.['list']?.length > 0 ? <div className={styles.boxList}>
+                                        <div className={styles.boxList_title}>
+                                            <span>上传素材</span>
+                                            <a onClick={() => {
+                                                let newDynamicGroup = dynamicGroup?.map((item: any, i: number) => {
+                                                    if (i === num) {
+                                                        return { list: [] }
+                                                    }
+                                                    return item
+                                                })
+                                                form.setFieldsValue({ dynamicGroup: newDynamicGroup })
+                                            }}>清空</a>
+                                        </div>
+                                        <div className={styles.boxList_body}>
+                                            {dynamicGroup?.[num]?.['list']?.map((item: any, index: number) => {
+                                                if (Array.isArray(item)) {
+                                                    let length = item.length
+                                                    return <div className={styles.boxList_body_item} key={index}>
+                                                        <div className={styles.tag}>{length}图</div>
+                                                        <div className={styles.content}>
+                                                            {item.map((l, i) => <img src={l?.url} key={i} style={{width: length === 6 ? 33.3 : 49.9}}/>)}
+                                                        </div>
+                                                        <div className={styles.clear} onClick={() => { clearTem(num, index) }}><CloseCircleOutlined /></div>
+                                                    </div>
+                                                } else if (item?.url?.includes('mp4')) {
+                                                    return <div className={styles.boxList_body_item} key={index}>
+                                                        <div className={styles.content}>
+                                                            <VideoNews src={item?.url} style={{ width: 100, height: 100 }} maskBodyStyle={{ backgroundColor: "rgba(242, 246, 254, 0.1)" }} />
+                                                        </div>
+                                                        <div className={styles.clear} onClick={() => { clearTem(num, index) }}><CloseCircleOutlined /></div>
+                                                    </div>
+                                                } else {
+                                                    return <div className={styles.boxList_body_item} key={index}>
+                                                        <div className={styles.content}><img src={item?.url} /></div>
+                                                        <div className={styles.clear} onClick={() => { clearTem(num, index) }}><CloseCircleOutlined /></div>
+                                                    </div>
+                                                }
+
+                                            })}
+                                        </div>
+                                    </div> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无素材内容，可通过上方添加" />}
+                                </div>
+                            </Form.Item>}
                         </Card>))}
                     </div>
-                    
+
                     {!(mediaType === 2 && dynamicGroup?.length >= adLength) && <Form.Item style={{ marginBottom: 0, marginTop: 10 }}>
                         <Button type="dashed" style={{ color: '#1890ff' }} onClick={() => add()} block icon={<PlusOutlined />}>添加创意组</Button>
                     </Form.Item>}
@@ -410,6 +498,7 @@ const AddMaterial: React.FC<Props> = ({ creativeTemplateId, materialData, delive
 
         {/* 选择视频素材 */}
         {selectVideoVisible && <SelectCloud
+            isGroup={materialConfig?.isGroup}
             visible={selectVideoVisible}
             onClose={() => setSelectVideoVisible(false)}
             sliderImgContent={materialConfig.index === 99999 ? undefined :
@@ -419,109 +508,126 @@ const AddMaterial: React.FC<Props> = ({ creativeTemplateId, materialData, delive
             }
             onChange={(content: any) => {
                 if (content.length > 0) {
-                    if (materialConfig.index === 99999) {
-                        if (materialConfig.type === 'image_list' || materialConfig.type === 'element_story') {
-                            let urls = content?.map((item: any) => ({ id: item?.id, url: item?.url, materialType: 0 }))
-                            let max = materialConfig.max
-                            let materialsNew = dynamicGroup.map((item: any) => {
-                                let newItem = item || {}
-                                // 判断是否有字段，是否设置了值
-                                if (Object.keys(newItem).includes(materialConfig.type) && newItem[materialConfig.type]) {
-                                    if (max > newItem[materialConfig.type].length && urls.length > 0) {
-                                        let difference = max - newItem[materialConfig.type].length
-                                        let material: any[] = []
-                                        if (urls.length >= difference) {
-                                            material = urls.splice(0, difference)
+                    if (deliveryMode === 'DELIVERY_MODE_COMPONENT') { // 组件化创意
+                        let newDynamicGroup = dynamicGroup?.map((item: any, index: number) => {
+                            if (materialConfig.index === index) {
+                                let oldList = item?.list || []
+                                if (materialConfig.isGroup) {
+                                    oldList = oldList.concat([content.map((m: any) => ({ id: m?.id, url: m?.url, materialType: 0 }))])
+                                    return { list: oldList }
+                                } else {
+                                    oldList = oldList.concat(content.map((m: any) => ({ id: m?.id, url: m?.url, materialType: 0 })))
+                                    return { list: oldList }
+                                }
+                            }
+                            return item
+                        })
+                        form.setFieldsValue({ dynamicGroup: newDynamicGroup })
+                    } else { // 自定义创意
+                        if (materialConfig.index === 99999) {
+                            if (materialConfig.type === 'image_list' || materialConfig.type === 'element_story') {
+                                let urls = content?.map((item: any) => ({ id: item?.id, url: item?.url, materialType: 0 }))
+                                let max = materialConfig.max
+                                let materialsNew = dynamicGroup.map((item: any) => {
+                                    let newItem = item || {}
+                                    // 判断是否有字段，是否设置了值
+                                    if (Object.keys(newItem).includes(materialConfig.type) && newItem[materialConfig.type]) {
+                                        if (max > newItem[materialConfig.type].length && urls.length > 0) {
+                                            let difference = max - newItem[materialConfig.type].length
+                                            let material: any[] = []
+                                            if (urls.length >= difference) {
+                                                material = urls.splice(0, difference)
+                                            } else {
+                                                material = urls.splice(0, urls.length)
+                                            }
+                                            newItem[materialConfig.type] = [...newItem[materialConfig.type], ...material]
+                                            return newItem
                                         } else {
-                                            material = urls.splice(0, urls.length)
+                                            return newItem
                                         }
-                                        newItem[materialConfig.type] = [...newItem[materialConfig.type], ...material]
-                                        return newItem
                                     } else {
-                                        return newItem
-                                    }
-                                } else {
-                                    if (urls.length >= max) {
-                                        let material = urls.splice(0, max)
-                                        return { ...newItem, [materialConfig.type]: material }
-                                    } else if (urls.length > 0) {
-                                        let material = urls.splice(0, urls.length)
-                                        return { ...newItem, [materialConfig.type]: material }
-                                    } else {
-                                        return newItem
+                                        if (urls.length >= max) {
+                                            let material = urls.splice(0, max)
+                                            return { ...newItem, [materialConfig.type]: material }
+                                        } else if (urls.length > 0) {
+                                            let material = urls.splice(0, urls.length)
+                                            return { ...newItem, [materialConfig.type]: material }
+                                        } else {
+                                            return newItem
+                                        }
                                     }
+                                })
+                                if (urls.length > 0) {
+                                    let data = Array(Math.ceil(urls.length / max)).fill(undefined).map(item => {
+                                        if (urls.length >= max) {
+                                            let material = urls.splice(0, max)
+                                            return { [materialConfig.type]: material }
+                                        } else {
+                                            let material = urls.splice(0, urls.length)
+                                            return { [materialConfig.type]: material }
+                                        }
+                                    })
+                                    materialsNew = [...materialsNew, ...data]
                                 }
-                            })
-                            if (urls.length > 0) {
-                                let data = Array(Math.ceil(urls.length / max)).fill(undefined).map(item => {
-                                    if (urls.length >= max) {
-                                        let material = urls.splice(0, max)
-                                        return { [materialConfig.type]: material }
-                                    } else {
-                                        let material = urls.splice(0, urls.length)
-                                        return { [materialConfig.type]: material }
+                                console.log('materialsNew-->', materialsNew)
+                                form.setFieldsValue({ dynamicGroup: materialsNew })
+                            } else {
+                                let newMaterials = content?.map((item: any) => {
+                                    if (["short_video1", 'video_id'].includes(materialConfig.type) && mLength === 2) {
+                                        return { [materialConfig.type]: { url: item?.url, id: item?.id, materialType: 0 }, cover_id: { url: getVideoImgUrl(item?.url), id: null, materialType: 0 } }
                                     }
+                                    return { [materialConfig.type]: { url: item?.url, id: item?.id, materialType: 0 } }
                                 })
-                                materialsNew = [...materialsNew, ...data]
-                            }
-                            console.log('materialsNew-->', materialsNew)
-                            form.setFieldsValue({ dynamicGroup: materialsNew })
-                        } else {
-                            let newMaterials = content?.map((item: any) => {
-                                if (["short_video1", 'video_id'].includes(materialConfig.type) && mLength === 2) {
-                                    return { [materialConfig.type]: { url: item?.url, id: item?.id, materialType: 0 }, cover_id: { url: getVideoImgUrl(item?.url), id: null, materialType: 0 } }
-                                }
-                                return { [materialConfig.type]: { url: item?.url, id: item?.id, materialType: 0 } }
-                            })
-                            if (newMaterials.length > 0) {
-                                if (dynamicGroup?.every((item: any) => !item)) { // 没设置过
-                                    form.setFieldsValue({ dynamicGroup: newMaterials })
-                                } else { // 设置过
-                                    let materialsNew = dynamicGroup.map((item: any) => {
-                                        let newItem = item || {}
-                                        if (Object.keys(newItem).includes(materialConfig.type) && newItem[materialConfig.type]) {
-                                            return item
-                                        } else {
-                                            if (newMaterials.length > 0) {
-                                                let material = newMaterials.splice(0, 1)
-                                                return { ...newItem, ...material[0] }
-                                            } else {
+                                if (newMaterials.length > 0) {
+                                    if (dynamicGroup?.every((item: any) => !item)) { // 没设置过
+                                        form.setFieldsValue({ dynamicGroup: newMaterials })
+                                    } else { // 设置过
+                                        let materialsNew = dynamicGroup.map((item: any) => {
+                                            let newItem = item || {}
+                                            if (Object.keys(newItem).includes(materialConfig.type) && newItem[materialConfig.type]) {
                                                 return item
+                                            } else {
+                                                if (newMaterials.length > 0) {
+                                                    let material = newMaterials.splice(0, 1)
+                                                    return { ...newItem, ...material[0] }
+                                                } else {
+                                                    return item
+                                                }
                                             }
+                                        })
+                                        if (newMaterials.length > 0) {
+                                            materialsNew = [...materialsNew, ...newMaterials]
                                         }
-                                    })
-                                    if (newMaterials.length > 0) {
-                                        materialsNew = [...materialsNew, ...newMaterials]
+                                        form.setFieldsValue({ dynamicGroup: materialsNew })
                                     }
-                                    form.setFieldsValue({ dynamicGroup: materialsNew })
                                 }
                             }
-                        }
-                    } else {
-                        let newDynamicGroup = dynamicGroup?.map((item: any, index: number) => {
-                            if (materialConfig.index === index) {
-                                if (materialConfig.type === 'image_list' || materialConfig.type === 'element_story') {
-                                    if (item) {
-                                        item[materialConfig.type] = content?.map((item: any) => ({ id: item?.id, url: item?.url, materialType: 0 }))
-                                        return { ...item }
-                                    } else {
-                                        return { [materialConfig.type]: content?.map((item: any) => ({ id: item?.id, url: item?.url, materialType: 0 })) }
-                                    }
-                                } else {
-                                    if (item) {
-                                        item[materialConfig.type] = { id: content[0]?.id, url: content[0]?.url, materialType: 0 }
-                                        return { ...item }
+                        } else {
+                            let newDynamicGroup = dynamicGroup?.map((item: any, index: number) => {
+                                if (materialConfig.index === index) {
+                                    if (materialConfig.type === 'image_list' || materialConfig.type === 'element_story') {
+                                        if (item) {
+                                            item[materialConfig.type] = content?.map((item: any) => ({ id: item?.id, url: item?.url, materialType: 0 }))
+                                            return { ...item }
+                                        } else {
+                                            return { [materialConfig.type]: content?.map((item: any) => ({ id: item?.id, url: item?.url, materialType: 0 })) }
+                                        }
                                     } else {
-                                        if (["short_video1", 'video_id'].includes(materialConfig.type) && mLength === 2) {
-                                            return { [materialConfig.type]: { id: content[0]?.id, url: content[0]?.url, materialType: 0 }, cover_id: { id: null, url: getVideoImgUrl(content[0]?.url), materialType: 0 } }
+                                        if (item) {
+                                            item[materialConfig.type] = { id: content[0]?.id, url: content[0]?.url, materialType: 0 }
+                                            return { ...item }
+                                        } else {
+                                            if (["short_video1", 'video_id'].includes(materialConfig.type) && mLength === 2) {
+                                                return { [materialConfig.type]: { id: content[0]?.id, url: content[0]?.url, materialType: 0 }, cover_id: { id: null, url: getVideoImgUrl(content[0]?.url), materialType: 0 } }
+                                            }
+                                            return { [materialConfig.type]: { id: content[0]?.id, url: content[0]?.url, materialType: 0 } }
                                         }
-                                        return { [materialConfig.type]: { id: content[0]?.id, url: content[0]?.url, materialType: 0 } }
                                     }
                                 }
-                            }
-                            return item
-                        })
-                        form.setFieldsValue({ dynamicGroup: newDynamicGroup })
+                                return item
+                            })
+                            form.setFieldsValue({ dynamicGroup: newDynamicGroup })
+                        }
                     }
                 }
                 setSelectVideoVisible(false)

src/pages/launchSystemV3/tencentAdPutIn/create/Material/index.less

@@ -36,8 +36,6 @@
     flex-flow: column;
 }
 
-.video {}
-
 .box {
     width: 60%;
     height: 200px;
@@ -47,7 +45,7 @@
     background-color: #f5f7fa;
     flex-direction: column;
     color: rgba(0, 0, 0, .3);
-    border-radius: 5px;
+    border-radius: 6px;
 
     /* TWEENER - IE 10 */
     >p,
@@ -81,6 +79,80 @@
     }
 }
 
+.boxList {
+    min-height: 150px;
+    padding: 16px;
+    box-sizing: border-box;
+    width: 100%;
+    border: 1px solid #e6e8ed;
+    border-radius: 6px;
+}
+
+.boxList_title {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    margin-bottom: 10px;
+
+    >span {
+        font-weight: bold;
+        color: #000;
+    }
+}
+
+.boxList_body {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 15px;
+}
+
+.boxList_body_item {
+    border: 1px solid #e6e8ed;
+    border-radius: 6px;
+    background-color: rgb(242, 246, 254);
+    position: relative;
+
+    .content {
+        width: 100px;
+        height: 100px;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-wrap: wrap;
+
+        >img {
+            max-width: 100%;
+            max-height: 100%;
+        }
+    }
+
+    .tag {
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        padding: 0 3px;
+        border-radius: 3px;
+        background: rgba(255, 255, 255, 0.8);
+        color: rgb(98, 99, 102);
+        font-size: 12px;
+    }
+
+    .clear {
+        position: absolute;
+        top: -9px;
+        right: -6px;
+        color: red;
+        cursor: pointer;
+        opacity: 0;
+        transition: opacity ease-out .1s;
+    }
+
+    &:hover .clear {
+        opacity: 1;
+    }
+}
+
 .image_list {
     flex-flow: row wrap;
     background-color: transparent;

src/pages/launchSystemV3/tencentAdPutIn/create/Material/index.tsx

@@ -1,5 +1,6 @@
 import React, { useContext, useEffect, useState } from "react"
 import style from '../index.less'
+import styles from './index.less'
 import { DispatchAddelivery } from "..";
 import { Button, Empty, Typography } from "antd";
 import { FolderOpenOutlined, RedoOutlined } from "@ant-design/icons";
@@ -57,25 +58,55 @@ const Material: React.FC<{ adData?: any[] }> = ({ adData }) => {
                         <Title level={5} style={{ fontSize: 12 }}>{mediaType === 0 ? '全账号复用' : mediaType === 1 ? '平均分配到广告' : mediaType === 2 ? '顺序分配到广告' : null}</Title>
                         <div className={style.detail_body_m}>
                             {dynamicMaterialDTos.dynamicGroup.map((item: any, index: number) => {
-                                return <div key={index} style={{ width: deliveryMode === 'DELIVERY_MODE_CUSTOMIZE' ? [641, 642, 643].includes(creativeTemplateId) ? '100%' : [720, 721, 722, 1529, 618].includes(creativeTemplateId) ? '50%' : '25%' : '100%' }}>
-                                    <Title level={5} style={{ fontSize: 12 }}>创意组{index + 1}</Title>
-                                    {mType ? ['short_video', 'video'].includes(mType) ? <div className={style.video}>
-                                        <VideoNews src={item?.video_id?.url || item?.short_video1?.url} />
-                                        {item?.cover_id && <div className={style.cover_image}>
-                                            <img src={item?.cover_id?.url} />
-                                        </div>}
-                                    </div> : ['image_list'].includes(mType) ? <div className={style.imageList}>
-                                        {item?.image_list?.map((item: { url: string | undefined; }, index: undefined) => <div className={style.cover_image} key={index}>
-                                            <img src={item?.url} />
-                                        </div>)}
-                                    </div> : ['element_story'].includes(mType) ? <div className={style.imageList}>
-                                        {item?.element_story?.map((item: { url: string | undefined; }, index: undefined) => <div className={style.cover_image} key={index}>
-                                            <img src={item?.url} />
-                                        </div>)}
-                                    </div> : ['image'].includes(mType) ? <div className={style.cover_image}>
-                                        <img src={item?.image_id?.url} />
-                                    </div> : null : null}
-                                </div>
+                                if (deliveryMode === 'DELIVERY_MODE_CUSTOMIZE') {
+                                    return <div key={index} style={{ width: deliveryMode === 'DELIVERY_MODE_CUSTOMIZE' ? [641, 642, 643].includes(creativeTemplateId) ? '100%' : [720, 721, 722, 1529, 618].includes(creativeTemplateId) ? '50%' : '25%' : '100%' }}>
+                                        <Title level={5} style={{ fontSize: 12 }}>创意组{index + 1}</Title>
+                                        {mType ? ['short_video', 'video'].includes(mType) ? <div className={style.video}>
+                                            <VideoNews src={item?.video_id?.url || item?.short_video1?.url} />
+                                            {item?.cover_id && <div className={style.cover_image}>
+                                                <img src={item?.cover_id?.url} />
+                                            </div>}
+                                        </div> : ['image_list'].includes(mType) ? <div className={style.imageList}>
+                                            {item?.image_list?.map((item: { url: string | undefined; }, index: undefined) => <div className={style.cover_image} key={index}>
+                                                <img src={item?.url} />
+                                            </div>)}
+                                        </div> : ['element_story'].includes(mType) ? <div className={style.imageList}>
+                                            {item?.element_story?.map((item: { url: string | undefined; }, index: undefined) => <div className={style.cover_image} key={index}>
+                                                <img src={item?.url} />
+                                            </div>)}
+                                        </div> : ['image'].includes(mType) ? <div className={style.cover_image}>
+                                            <img src={item?.image_id?.url} />
+                                        </div> : null : null}
+                                    </div>
+                                } else {
+                                    return <div key={index} style={{ width: '100%' }}>
+                                        <Title level={5} style={{ fontSize: 12 }}>创意组{index + 1}</Title>
+                                        <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
+                                            {item?.list?.map((item: any, index: number) => {
+                                                if (Array.isArray(item)) {
+                                                    let length = item.length
+                                                    return <div className={styles.boxList_body_item} key={index} style={{ width: 60, height: 60 }}>
+                                                        <div className={styles.tag}>{length}图</div>
+                                                        <div className={styles.content} style={{ width: 60, height: 60 }}>
+                                                            {item.map((l, i) => <img src={l?.url} key={i} style={{ width: length === 6 ? 19.9 : 29.9 }} />)}
+                                                        </div>
+                                                    </div>
+                                                } else if (item?.url?.includes('mp4')) {
+                                                    return <div className={styles.boxList_body_item} key={index} style={{ width: 60, height: 60 }}>
+                                                        <div className={styles.content} style={{ width: 60, height: 60 }}>
+                                                            <VideoNews src={item?.url} style={{ width: 60, height: 60 }} maskBodyStyle={{ backgroundColor: "rgba(242, 246, 254, 0.1)" }} />
+                                                        </div>
+                                                    </div>
+                                                } else {
+                                                    return <div className={styles.boxList_body_item} key={index} style={{ width: 60, height: 60 }}>
+                                                        <div className={styles.content} style={{ width: 60, height: 60 }}><img src={item?.url} /></div>
+                                                    </div>
+                                                }
+                                            })}
+                                        </div>
+                                    </div>
+                                }
+
                             })}
                         </div>
                     </> :

src/pages/launchSystemV3/tencentAdPutIn/create/index.tsx

@@ -155,6 +155,8 @@ const Create: React.FC = () => {
                                 return {}
                             }
                         })
+                    } else { // 组件化创意
+
                     }
 
                     setAddelivery({
@@ -207,7 +209,7 @@ const Create: React.FC = () => {
         }
     }, [])
 
-
+    // 预览
     const preview = () => {
         if (accountCreateLogs?.length === 0) {
             message.error('请先选择媒体账户')
@@ -431,67 +433,115 @@ const Create: React.FC = () => {
         setTableData(newTableData)
     }
 
+    // 提交
     const onSubmit = (values: any) => {
         const { adgroups, targeting, dynamic, dynamicMaterialDTos, dynamicCreativesTextDTOS, mediaType } = addelivery
 
         let dynamicMaterialDTOS = []
-        if ((materialData && Object.keys(materialData).length && dynamicMaterialDTos && Object.keys(dynamicMaterialDTos).length)) {
-            let mType = Object.keys(materialData)[0];
-            dynamicMaterialDTOS = dynamicMaterialDTos.dynamicGroup?.map((item: any) => {
-                if (mType === 'image') {
-                    return [{
-                        type: mType,
-                        valueJson: JSON.stringify({
-                            value: {
-                                imageUrl: item?.image_id?.url,
-                                imageId: item?.image_id?.id,
-                                materialType: item?.image_id?.materialType
-                            }
-                        })
-                    }]
-                } else if (mType === 'image_list' || mType === 'element_story') {
-                    let key = 'image_list'
-                    if (mType === 'element_story') {
-                        key = 'element_story'
-                    }
-                    let list = item?.[key]?.map((l: any) => {
-                        return {
-                            imageUrl: l?.url,
-                            imageId: l?.id,
-                            materialType: l?.materialType
+        if (dynamic.deliveryMode === 'DELIVERY_MODE_CUSTOMIZE') {
+            if ((materialData && Object.keys(materialData).length && dynamicMaterialDTos && Object.keys(dynamicMaterialDTos).length)) {
+                let mType = Object.keys(materialData)[0];
+                dynamicMaterialDTOS = dynamicMaterialDTos.dynamicGroup?.map((item: any) => {
+                    if (mType === 'image') {
+                        return [{
+                            type: mType,
+                            valueJson: JSON.stringify({
+                                value: {
+                                    imageUrl: item?.image_id?.url,
+                                    imageId: item?.image_id?.id,
+                                    materialType: item?.image_id?.materialType
+                                }
+                            })
+                        }]
+                    } else if (mType === 'image_list' || mType === 'element_story') {
+                        let key = 'image_list'
+                        if (mType === 'element_story') {
+                            key = 'element_story'
                         }
-                    })
-                    return [{
-                        type: mType,
-                        valueJson: JSON.stringify({
-                            value: {
-                                list
+                        let list = item?.[key]?.map((l: any) => {
+                            return {
+                                imageUrl: l?.url,
+                                imageId: l?.id,
+                                materialType: l?.materialType
                             }
                         })
-                    }]
-                } else if (['short_video', 'video'].includes(mType)) {
-                    let value: any = {
-                        materialType: item?.video_id?.materialType || item?.short_video1?.materialType || 0,
-                        videoUrl: item?.video_id?.url || item?.short_video1?.url,
-                        videoId: item?.video_id?.id || item?.short_video1?.id
-                    }
-                    if (item?.cover_id?.url) {
-                        value.imageUrl = item?.cover_id?.url
-                        value.imageId = item?.cover_id?.id
-                        value.materialCoverType = item?.cover_id?.materialType
+                        return [{
+                            type: mType,
+                            valueJson: JSON.stringify({
+                                value: {
+                                    list
+                                }
+                            })
+                        }]
+                    } else if (['short_video', 'video'].includes(mType)) {
+                        let value: any = {
+                            materialType: item?.video_id?.materialType || item?.short_video1?.materialType || 0,
+                            videoUrl: item?.video_id?.url || item?.short_video1?.url,
+                            videoId: item?.video_id?.id || item?.short_video1?.id
+                        }
+                        if (item?.cover_id?.url) {
+                            value.imageUrl = item?.cover_id?.url
+                            value.imageId = item?.cover_id?.id
+                            value.materialCoverType = item?.cover_id?.materialType
+                        }
+                        return [{
+                            type: mType,
+                            valueJson: JSON.stringify({
+                                value
+                            })
+                        }]
                     }
                     return [{
                         type: mType,
-                        valueJson: JSON.stringify({
-                            value
-                        })
+                        valueJson: ''
                     }]
-                }
-                return [{
-                    type: mType,
-                    valueJson: ''
-                }]
-            })
+                })
+            }
+        } else {
+            if (dynamicMaterialDTos && Object.keys(dynamicMaterialDTos).length) {
+                dynamicMaterialDTOS = dynamicMaterialDTos.dynamicGroup?.map((item: { list: any[] }) => {
+                    return item.list.map(l => {
+                        if (Array.isArray(l)) {
+                            return {
+                                type: 'image_list',
+                                valueJson: JSON.stringify({
+                                    value: {
+                                        list: l?.map((i: any) => {
+                                            return {
+                                                imageUrl: i?.url,
+                                                imageId: i?.id,
+                                                materialType: i?.materialType
+                                            }
+                                        })
+                                    }
+                                })
+                            }
+                        } else if (l?.url?.includes('mp4')) {
+                            return {
+                                type: 'video',
+                                valueJson: JSON.stringify({
+                                    value: {
+                                        materialType: l?.materialType,
+                                        videoUrl: l?.url,
+                                        videoId: l?.id
+                                    }
+                                })
+                            }
+                        } else {
+                            return {
+                                type: 'image',
+                                valueJson: JSON.stringify({
+                                    value: {
+                                        imageUrl: l?.url,
+                                        imageId: l?.id,
+                                        materialType: l?.materialType
+                                    }
+                                })
+                            }
+                        }
+                    })
+                })
+            }
         }
         let accountIdParamDTOMap: any = {}
         accountCreateLogs.forEach(item => {

src/pages/launchSystemV3/tencentAdPutIn/create/tableConfig.tsx

@@ -4,6 +4,7 @@ import { OPTIMIZATIONGOAL_ENUM } from "../const";
 const { Text, Title } = Typography;
 import style from './index.less'
 import VideoNews from "@/pages/launchSystemNew/components/newsModal/videoNews";
+import styles from './Material/index.less'
 
 const columns = (): TableProps<any>['columns'] => {
 
@@ -108,7 +109,6 @@ const columns = (): TableProps<any>['columns'] => {
                         if (dynamicGroup && Object.keys(dynamicGroup).length) {
                             let keys = Object.keys(dynamicGroup)
                             if (deliveryMode === "DELIVERY_MODE_CUSTOMIZE") {
-                                // return <Text style={{ fontSize: 12, color: '#1890ff' }}>已选{(keys.includes('video_id') || keys.includes('short_video1')) ? '1个视频，0张图片' : keys.includes('image_id') ? '0个视频，1张图片' : (keys.includes('image_list') || keys.includes('element_story') ? '1个组图, 0个视频' : '')}</Text>
                                 return <>
                                     <div className={style.detail_body_m}>
                                         {(keys.includes('video_id') || keys.includes('short_video1')) ? <>
@@ -133,7 +133,28 @@ const columns = (): TableProps<any>['columns'] => {
                                     </div>
                                 </>
                             } else {
-                                return <Text style={{ fontSize: 12 }}>开发中</Text>
+                                return <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
+                                    {dynamicGroup?.list?.map((item: any, index: number) => {
+                                        if (Array.isArray(item)) {
+                                            let length = item.length
+                                            return <div className={styles.boxList_body_item} key={index} style={{ width: 30, height: 30 }}>
+                                                <div className={styles.content} style={{ width: 30, height: 30 }}>
+                                                    {item.map((l, i) => <img src={l?.url} key={i} style={{ width: length === 6 ? 9.999 : 14.999 }} />)}
+                                                </div>
+                                            </div>
+                                        } else if (item?.url?.includes('mp4')) {
+                                            return <div className={styles.boxList_body_item} key={index} style={{ width: 30, height: 30 }}>
+                                                <div className={styles.content} style={{ width: 30, height: 30 }}>
+                                                    <VideoNews src={item?.url} style={{ width: 30, height: 30 }} maskBodyStyle={{ backgroundColor: "rgba(242, 246, 254, 0.1)" }} />
+                                                </div>
+                                            </div>
+                                        } else {
+                                            return <div className={styles.boxList_body_item} key={index} style={{ width: 30, height: 30 }}>
+                                                <div className={styles.content} style={{ width: 30, height: 30 }}><img src={item?.url} /></div>
+                                            </div>
+                                        }
+                                    })}
+                                </div>
                             }
                         } else {
                             return <Text style={{ fontSize: 12 }}>无需配置</Text>
@@ -164,7 +185,19 @@ const columns = (): TableProps<any>['columns'] => {
                                     })}
                                 </div>
                             } else {
-                                return <Text style={{ fontSize: 12 }}>开发中</Text>
+                                return <div className={style.detail_body} style={{ height: 'auto' }}>
+                                    {Object.keys(value)?.map((key, index: number) => {
+                                        return <div key={index}>
+                                            {key === 'description' ? <>
+                                                <Title level={5} style={{ fontSize: 12 }}>{'文案'}</Title>
+                                                <div className={style.text}><Text ellipsis={{ tooltip: true }}>{value['description']?.toString()}</Text></div>
+                                            </> : key === 'title' ? <>
+                                                <Title level={5} style={{ fontSize: 12 }}>{'标题'}</Title>
+                                                <div className={style.text}><Text ellipsis={{ tooltip: true }}>{value['title']?.toString()}</Text></div>
+                                            </> : null}
+                                        </div>
+                                    })}
+                                </div>
                             }
                         } else {
                             return <Text style={{ fontSize: 12 }}>无需配置</Text>
@@ -262,7 +295,28 @@ export const columnsAddDynamic = (): TableProps<any>['columns'] => {
                                     </div>
                                 </>
                             } else {
-                                return <Text style={{ fontSize: 12 }}>开发中</Text>
+                                return <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
+                                    {dynamicGroup?.list?.map((item: any, index: number) => {
+                                        if (Array.isArray(item)) {
+                                            let length = item.length
+                                            return <div className={styles.boxList_body_item} key={index} style={{ width: 30, height: 30 }}>
+                                                <div className={styles.content} style={{ width: 30, height: 30 }}>
+                                                    {item.map((l, i) => <img src={l?.url} key={i} style={{ width: length === 6 ? 9.999 : 14.999 }} />)}
+                                                </div>
+                                            </div>
+                                        } else if (item?.url?.includes('mp4')) {
+                                            return <div className={styles.boxList_body_item} key={index} style={{ width: 30, height: 30 }}>
+                                                <div className={styles.content} style={{ width: 30, height: 30 }}>
+                                                    <VideoNews src={item?.url} style={{ width: 30, height: 30 }} maskBodyStyle={{ backgroundColor: "rgba(242, 246, 254, 0.1)" }} />
+                                                </div>
+                                            </div>
+                                        } else {
+                                            return <div className={styles.boxList_body_item} key={index} style={{ width: 30, height: 30 }}>
+                                                <div className={styles.content} style={{ width: 30, height: 30 }}><img src={item?.url} /></div>
+                                            </div>
+                                        }
+                                    })}
+                                </div>
                             }
                         } else {
                             return <Text style={{ fontSize: 12 }}>无需配置</Text>
@@ -293,7 +347,19 @@ export const columnsAddDynamic = (): TableProps<any>['columns'] => {
                                     })}
                                 </div>
                             } else {
-                                return <Text style={{ fontSize: 12 }}>开发中</Text>
+                                return <div className={style.detail_body} style={{ height: 'auto' }}>
+                                    {Object.keys(value)?.map((key, index: number) => {
+                                        return <div key={index}>
+                                            {key === 'description' ? <>
+                                                <Title level={5} style={{ fontSize: 12 }}>{'文案'}</Title>
+                                                <div className={style.text}><Text ellipsis={{ tooltip: true }}>{value['description']?.toString()}</Text></div>
+                                            </> : key === 'title' ? <>
+                                                <Title level={5} style={{ fontSize: 12 }}>{'标题'}</Title>
+                                                <div className={style.text}><Text ellipsis={{ tooltip: true }}>{value['title']?.toString()}</Text></div>
+                                            </> : null}
+                                        </div>
+                                    })}
+                                </div>
                             }
                         } else {
                             return <Text style={{ fontSize: 12 }}>无需配置</Text>