From 9706970690e274e1f670a66034dbf99ac285f3b7 Mon Sep 17 00:00:00 2001
From: susie-laptop <sishi1461@gmail.com>
Date: Thu, 22 May 2025 17:00:59 -0400
Subject: [PATCH] [dev]upload

---
 src/pages/CampaignScript.jsx      | 242 +++++++++++++++++++++---------
 src/store/slices/creatorsSlice.js |   2 +-
 2 files changed, 171 insertions(+), 73 deletions(-)

diff --git a/src/pages/CampaignScript.jsx b/src/pages/CampaignScript.jsx
index 487bb12..2c929dc 100644
--- a/src/pages/CampaignScript.jsx
+++ b/src/pages/CampaignScript.jsx
@@ -1,8 +1,9 @@
 import { useDispatch, useSelector } from 'react-redux';
 import { useCallback, useEffect, useState } from 'react';
-import { Button, Card, Col, Form, Row } from 'react-bootstrap';
+import { Accordion, Button, Card, Col, Form, Row, Table } from 'react-bootstrap';
 import { CloudUpload, Paperclip } from 'lucide-react';
 import { useDropzone } from 'react-dropzone';
+import { mockCreators } from '../store/slices/creatorsSlice';
 
 export default function CampaignScript() {
     const dispatch = useDispatch();
@@ -77,81 +78,178 @@ export default function CampaignScript() {
                         Campaigns & Collaborated Creators
                     </div>
                 </div>
-                <Card className='product-script-video-req'>
-                    <Form className='video-req-form'>
-                        <div className='form-header'>Video Posting Requirement</div>
-                        <Form.Group>
-                            <Form.Label>Product Selling Point</Form.Label>
-                            <Form.Control
-                                type='textarea'
-                                as='textarea'
-                                rows={3}
-                                placeholder='吸力强、有效除菌、香薰片功能、价格更优惠、两种颜色'
-                            />
-                        </Form.Group>
-                        <Form.Group>
-                            <Form.Label>Example Videos</Form.Label>
-                            <Form.Control
-                                type='textarea'
-                                as='textarea'
-                                rows={3}
-                                placeholder='https://mcnmza4kafoj.feishu.cn/drive/folder/HzhWfGvWtlCBqIduwfLczQ9Cnyb'
-                            />
-                        </Form.Group>
-                        <Form.Group>
-                            <Form.Label>Video Posting Suggestion</Form.Label>
-                            <Form.Control
-                                type='textarea'
-                                as='textarea'
-                                rows={3}
-                                placeholder='开头引人+产品亮点+CTA呼吁/时长30~50s左右'
-                            />
-                        </Form.Group>
-                        <Form.Group>
-                            <Form.Label>Video Acceptance Standard</Form.Label>
-                            <Form.Control
-                                type='textarea'
-                                as='textarea'
-                                rows={3}
-                                placeholder='1.场景：包括不限于厨房、卫生间、衣柜；在橱柜下方和洗手台下方安装橱柜灯、衣柜等安全及方便需求。场景展示要有黑暗环境对比HOOK。
-2.红人必须要表达卖点（以下卖点按优先级排列，达人任意选择提到至少三个卖点即可）
-电池大续航能力强可以（必须提到）（可用字幕展示）
-容易安装（有磁铁）（必须提到）（要拍出安装过程）
-开启人体感应模式 （必须提到）（可视觉展示）
-可充电
-亮度高，且可调节
-加分卖点：
-  视频需说明购买理由以及使用感受（例如：老人家晚上更安全，宝妈晚上起床更便捷安全等等购买理由）
-3.正确的hashtags 以及正确@官方账号'
-                            />
-                        </Form.Group>
-                        <Form.Group className='upload-group'>
-                            <FileUpload />
-                        </Form.Group>
-                    </Form>
-                    <div className='product-ai-script'>
-                        <div className='header'>
-                            <div className='title'>Script</div>
-                            <Button variant='primary' className='generate-btn'>
-                                AI Generate
-                            </Button>
-                        </div>
-                        <Form className='script-versions'>
-                            <Form.Group>
-                                <Form.Label>Version 1</Form.Label>
-                                <Form.Control type='textarea' as='textarea' rows={4} />
-                            </Form.Group>
-                            <Form.Group>
-                                <Form.Label>Version 2</Form.Label>
-                                <Form.Control type='textarea' as='textarea' rows={4} />
-                            </Form.Group>
-                        </Form>
-                    </div>
-                </Card>
+                {activeTab === 'collaborationInfo' && <CollabInfo />}
+                {activeTab === 'campaigns' && <CampaignsCollabCreators />}
             </div>
         )
     );
 }
+const CollabInfo = () => {
+    const [formData, setFormData] = useState({
+        productSellingPoint: '吸力强、有效除菌、香薰片功能、价格更优惠、两种颜色',
+        exampleVideos: 'https://mcnmza4kafoj.feishu.cn/drive/folder/HzhWfGvWtlCBqIduwfLczQ9Cnyb',
+        videoPostingSuggestion: '开头引人+产品亮点+CTA呼吁/时长30~50s左右',
+        videoAcceptanceStandard: `1.场景：包括不限于厨房、卫生间、衣柜；在橱柜下方和洗手台下方安装橱柜灯、衣柜等安全及方便需求。场景展示要有黑暗环境对比HOOK。
+        2.红人必须要表达卖点（以下卖点按优先级排列，达人任意选择提到至少三个卖点即可）
+        电池大续航能力强可以（必须提到）（可用字幕展示）
+        容易安装（有磁铁）（必须提到）（要拍出安装过程）
+        开启人体感应模式 （必须提到）（可视觉展示）
+        可充电
+        亮度高，且可调节
+        加分卖点：
+        视频需说明购买理由以及使用感受（例如：老人家晚上更安全，宝妈晚上起床更便捷安全等等购买理由）
+        3.正确的hashtags 以及正确@官方账号`,
+        documentsUpload: [],
+    });
+
+    const handleChange = (e) => {
+        setFormData({ ...formData, [e.target.name]: e.target.value });
+    };
+
+    return (
+        <Card className='product-script-video-req'>
+            <Form className='video-req-form'>
+                <div className='form-header'>Video Posting Requirement</div>
+                <Form.Group>
+                    <Form.Label>Product Selling Point</Form.Label>
+                    <Form.Control
+                        type='textarea'
+                        as='textarea'
+                        rows={3}
+                        placeholder='Enter the product selling point'
+                        name='productSellingPoint'
+                        value={formData.productSellingPoint}
+                        onChange={handleChange}
+                    />
+                </Form.Group>
+                <Form.Group>
+                    <Form.Label>Example Videos</Form.Label>
+                    <Form.Control
+                        type='textarea'
+                        as='textarea'
+                        rows={3}
+                        placeholder='Enter the example videos'
+                        name='exampleVideos'
+                        value={formData.exampleVideos}
+                        onChange={handleChange}
+                    />
+                </Form.Group>
+                <Form.Group>
+                    <Form.Label>Video Posting Suggestion</Form.Label>
+                    <Form.Control
+                        type='textarea'
+                        as='textarea'
+                        rows={3}
+                        placeholder='Enter the video posting suggestion'
+                        name='videoPostingSuggestion'
+                        value={formData.videoPostingSuggestion}
+                        onChange={handleChange}
+                    />
+                </Form.Group>
+                <Form.Group>
+                    <Form.Label>Video Acceptance Standard</Form.Label>
+                    <Form.Control
+                        type='textarea'
+                        as='textarea'
+                        rows={3}
+                        placeholder='Enter the video acceptance standard'
+                        name='videoAcceptanceStandard'
+                        value={formData.videoAcceptanceStandard}
+                        onChange={handleChange}
+                    />
+                </Form.Group>
+                <Form.Group className='upload-group'>
+                    <FileUpload />
+                </Form.Group>
+            </Form>
+            <div className='product-ai-script'>
+                <div className='header'>
+                    <div className='title'>Script</div>
+                    <Button variant='primary' className='generate-btn'>
+                        AI Generate
+                    </Button>
+                </div>
+                <Form className='script-versions'>
+                    <Form.Group>
+                        <Form.Label>Version 1</Form.Label>
+                        <Form.Control type='textarea' as='textarea' rows={4} />
+                    </Form.Group>
+                    <Form.Group>
+                        <Form.Label>Version 2</Form.Label>
+                        <Form.Control type='textarea' as='textarea' rows={4} />
+                    </Form.Group>
+                </Form>
+            </div>
+        </Card>
+    );
+};
+
+const CampaignsCollabCreators = () => {
+    const mockData = [
+        {
+            id: 1,
+            name: 'SUNLINK 拍拍灯',
+            creatorList: mockCreators,
+        },
+        {
+            id: 2,
+            name: 'SUNLINK 拍拍灯2',
+            creatorList: mockCreators,
+        },
+    ];
+
+    if (mockData.length === 0) {
+        return <div className='text-center'>No campaigns found</div>;
+    }
+
+    return (
+        <Accordion className='campaigns-collab-creators-list' defaultActiveKey={mockData[0].id}>
+            {mockData.map((item) => (
+                <Accordion.Item eventKey={item.id} key={item.id} className='campaigns-collab-creators-item'>
+                    <Accordion.Header>{item.name}</Accordion.Header>
+                    <Accordion.Body>
+                        <Table responsive hover className='bg-white shadow-xs rounded overflow-hidden'>
+                            <thead>
+                                <tr>
+                                    <th>Creator</th>
+                                    <th>Category</th>
+                                    <th>Followers</th>
+                                    <th>GMV Generated</th>
+                                    <th>Views Generated</th>
+                                    <th>Pricing</th>
+                                    <th>Status</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {item?.creatorList.length > 0 &&
+                                    item?.creatorList.map((creator) => (
+                                        <tr key={creator.id}>
+                                            <td>
+                                                <div className='white-space-nowrap'>
+                                                    <img
+                                                        className='creator-avatar'
+                                                        src={creator.avatar}
+                                                        alt={creator.name}
+                                                    />
+                                                    <span className='creator-name'>{creator.name}</span>
+                                                </div>
+                                            </td>
+                                            <td>{creator.category}</td>
+                                            <td>{creator.followers || '--'}</td>
+                                            <td>{creator.gmv || '--'}</td>
+                                            <td>{creator.views || '--'}</td>
+                                            <td>{creator.pricing || '--'}</td>
+                                            <td>{creator.status || '--'}</td>
+                                        </tr>
+                                    ))}
+                            </tbody>
+                        </Table>
+                    </Accordion.Body>
+                </Accordion.Item>
+            ))}
+        </Accordion>
+    );
+};
 
 const FileUpload = () => {
     const [files, setFiles] = useState([]);
diff --git a/src/store/slices/creatorsSlice.js b/src/store/slices/creatorsSlice.js
index 26bb99f..302be93 100644
--- a/src/store/slices/creatorsSlice.js
+++ b/src/store/slices/creatorsSlice.js
@@ -26,7 +26,7 @@ const mockVideos = [
     },
 ];
 // 模拟创作者数据，实际项目中会从API获取
-const mockCreators = [
+export const mockCreators = [
     {
         id: 1,
         name: 'name',