fix

src/components/FileBox/index.less

@@ -76,12 +76,14 @@
 }
 .file_content {
   width: 100%;
-  columns:200px 7;
-  column-gap: 20px;
+  // columns:200px 7;
+  // column-gap: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
   > div {
-    width: 100%;
+    width: 200px;
     break-inside: avoid;
-    margin-bottom: 20px;
     display: flex;
     justify-content: center;
   }

src/components/FileBoxAD/index.less

@@ -91,13 +91,15 @@
 
 .file_content {
   width: 100%;
-  columns: 200px 7;
-  column-gap: 20px;
+  // columns: 200px 7;
+  // column-gap: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
 
   >div {
-    width: 100%;
+    width: 200px;
     break-inside: avoid;
-    margin-bottom: 20px;
     display: flex;
     justify-content: center;
   }
@@ -429,3 +431,12 @@
     opacity: 1;
   }
 }
+.maskClass {
+  background-color: transparent;
+
+  >div {
+    background-color: rgba(0, 0, 0, 0.7);
+    padding: 4px 10px;
+    border-radius: 6px;
+  }
+}

src/components/FileBoxAD/index.tsx

@@ -60,6 +60,7 @@ function FlieBox(props: Props) {
     const [moveId, setMoveId] = useState<any>('')//移动的素材ID
     const [treeEl, item, folderId, setActionId, setHoverId] = TreeBox({ data: get_folder_tree.data, belongUser })
     const [listData, setListData] = useState<any>({})
+    const [showImg, setShowImg] = useState(-1)
 
     // 获取数据
     useEffect(() => {
@@ -73,7 +74,7 @@ function FlieBox(props: Props) {
     /**全局右键菜单 */
     const Menu = useCallback((props: { isItem?: boolean }) => {
         console.log('props--->', props, rightClickPup);
-        
+
         if (props.isItem && isAll) {
             return <ul style={{ top: xy?.y, left: xy?.x }} className={style.menu} >
                 {
@@ -189,7 +190,7 @@ function FlieBox(props: Props) {
             },
         }
     }, [folderId, moveId, mediaType])
-    
+
     return <div style={{ display: 'flex', flexFlow: 'row' }}>
         {get_folder_tree?.data?.length > 0 && <div style={{ flexShrink: 0 }}>
             {treeEl}
@@ -223,7 +224,7 @@ function FlieBox(props: Props) {
                 <Spin spinning={list.loading} style={{ width: '100%' }}>
                     <div className={style.file_content}>
                         {
-                            listData?.records?.map((item: Item) => {
+                            listData?.records?.map((item: Item, index: number) => {
                                 if (item.folder) {
                                     {/* 文件夹模板 */ }
                                     return <Popconfirm
@@ -273,7 +274,27 @@ function FlieBox(props: Props) {
                                     }
                                     let El = null
                                     if (mediaType === 'IMG') {
-                                        El = <Image src={item.url} onClick={(e) => { e.stopPropagation() }} />
+                                        El = <Image
+                                            src={item.url}
+                                            onClick={(e) => {
+                                                e.stopPropagation()
+                                                let className = (e.target as any).className
+                                                if (className === 'ant-image-mask-info') {
+                                                    setShowImg(index)
+                                                } else {
+                                                    changeClickFile(e, item, isAll, noFile)
+                                                }
+                                            }}
+                                            preview={{
+                                                visible: showImg === index,
+                                                maskClassName: style.maskClass,
+                                                onVisibleChange: (value) => {
+                                                    if (!value) {
+                                                        setShowImg(-1)
+                                                    }
+                                                }
+                                            }}
+                                        />
                                     } else if (mediaType === 'VIDEO') {
                                         El = <video src={item.url} style={{ width: 130, height: 100 }} controls />
                                     } else if (mediaType === 'PAGE') {

src/pages/launchSystemNew/launchManage/createAd/creativeCL/modal/copywriting.tsx

@@ -1,6 +1,6 @@
 import TextAideInput from "@/pages/launchSystemNew/components/textAideInput"
 import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons"
-import { Button, Collapse, Form, Modal, Space } from "antd"
+import { Button, Collapse, Form, Modal, Popconfirm, Space } from "antd"
 import React, { useEffect, useState } from "react"
 import styles from './index.less'
 
@@ -30,6 +30,7 @@ const Copywriting: React.FC<Props> = (props) => {
     const { adcreativeTemplateId, linkNameType } = sysAdcreative
     const [visible, setVisible] = useState<boolean>(false)
     const [form] = Form.useForm();
+    let texts = Form.useWatch('texts', form)
     /******************************/
 
     // 回填
@@ -50,10 +51,26 @@ const Copywriting: React.FC<Props> = (props) => {
             setVisible(false)
         })
     }
-    
+
     return <>
         <span onClick={() => { setVisible(true) }}>{value && value?.length > 0 ? '编辑' : '添加'}</span>
-        {visible && <Modal visible={visible} onCancel={() => setVisible(false)} title="创意文案" width={700} onOk={handleOk}>
+        {visible && <Modal
+            visible={visible}
+            onCancel={() => setVisible(false)}
+            title={<>
+                <span>创意文案</span>
+                {(texts && texts?.length > 1) && <Popconfirm
+                    title="是否清空?"
+                    onConfirm={() => form.setFieldsValue({ texts: [texts[0]] })}
+                    okText="是"
+                    cancelText="否"
+                >
+                    <Button type="link" danger>一键清空</Button>
+                </Popconfirm>}
+            </>}
+            width={700}
+            onOk={handleOk}
+        >
             <Form name="dynamic_form_item" form={form} labelAlign='left' >
                 <Form.List name="texts">
                     {(fields, { add, remove }) => (<>
@@ -109,7 +126,7 @@ const Copywriting: React.FC<Props> = (props) => {
                                         </div>
                                     }
                                     if (item.name === 'description') {
-                                        let maxNum = (adcreativeTemplateId === 1708 || adcreativeTemplateId === 1707) && linkNameType ?  10 : item.restriction.textRestriction.maxLength
+                                        let maxNum = (adcreativeTemplateId === 1708 || adcreativeTemplateId === 1707) && linkNameType ? 10 : item.restriction.textRestriction.maxLength
                                         return <div key={'description' + item.fieldType}>
                                             <Form.Item {...field} label={<strong>{item.description}</strong>} name={[field.name, item.name]} rules={[{ required: true, pattern: RegExp(item.restriction.textRestriction.textPattern?.replace(/\+/ig, `{1,${maxNum}}`)), message: '请输入正确的' + item.description }]}>
                                                 <TextAideInput placeholder={'请输入' + item.description} style={{ width: 450 }} maxTextLength={maxNum} />

src/pages/launchSystemNew/launchManage/createAd/creativeCL/modal/material.tsx

@@ -2,7 +2,7 @@ import { useAjax } from "@/Hook/useAjax"
 import SelectCloud from "@/pages/launchSystemNew/components/selectCloud"
 import { get_tools_video_capture } from "@/services/launchAdq/global"
 import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons"
-import { Button, Form, message, Modal, Radio, Space, Switch, Image } from "antd"
+import { Button, Form, message, Modal, Radio, Space, Switch, Image, Popconfirm } from "antd"
 import React, { useEffect, useState } from "react"
 import { useModel } from "umi"
 import styles from './index.less'
@@ -175,8 +175,20 @@ const Material: React.FC<Props> = (props) => {
                         set_selectVideoVisible(true)
                     }, 100)
                 }}>批量添加图片素材</Button>}
+                {(materials && materials?.length > 1) && <Popconfirm
+                    title="是否清空?"
+                    onConfirm={() => form.setFieldsValue({ materials: [undefined] })}
+                    okText="是"
+                    cancelText="否"
+                >
+                    <Button type="link" danger>一键清空</Button>
+                </Popconfirm>}
             </>}
             width={930}
+            bodyStyle={{
+                maxHeight: 650,
+                overflowY: 'scroll'
+            }}
             onOk={handleOk}
         >
             <Form name="dynamic_form_item" form={form} labelAlign='left' >