-
+
diff --git a/video-gen-app/src/pages/RemoveInfo.tsx b/video-gen-app/src/pages/RemoveInfo.tsx
new file mode 100644
index 00000000..ec24e62f
--- /dev/null
+++ b/video-gen-app/src/pages/RemoveInfo.tsx
@@ -0,0 +1,419 @@
+import React, { useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { Button, Table, Tag, Drawer, Input, Upload, message } from 'antd';
+import { ArrowLeftOutlined, PlayCircleOutlined, XOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
+import type { UploadFile } from 'antd';
+
+const { TextArea } = Input;
+
+function RemoveInfo() {
+ const { creatID } = useParams<{ creatID: string }>();
+ const navigate = useNavigate();
+ const [drawerVisible, setDrawerVisible] = useState(false);
+ const [currentSegment, setCurrentSegment] = useState(null);
+ const [productName, setProductName] = useState('');
+ const [productSellingPoint, setProductSellingPoint] = useState('');
+ const [productImage, setProductImage] = useState('');
+ const [detailImage, setDetailImage] = useState('');
+
+ const handleGenerate = (segmentId: number) => {
+ setCurrentSegment(segmentId);
+ setDrawerVisible(true);
+ };
+
+ const handleCloseDrawer = () => {
+ setDrawerVisible(false);
+ setCurrentSegment(null);
+ setProductName('');
+ setProductSellingPoint('');
+ setProductImage('');
+ setDetailImage('');
+ };
+
+ const handleProductImageChange: any = (info: any) => {
+ if (info.fileList.length > 0) {
+ const file = info.fileList[0];
+ if (file.originFileObj) {
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ setProductImage(e.target?.result as string);
+ };
+ reader.readAsDataURL(file.originFileObj);
+ }
+ } else {
+ setProductImage('');
+ }
+ };
+
+ const handleDetailImageChange: any = (info: any) => {
+ if (info.fileList.length > 0) {
+ const file = info.fileList[0];
+ if (file.originFileObj) {
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ setDetailImage(e.target?.result as string);
+ };
+ reader.readAsDataURL(file.originFileObj);
+ }
+ } else {
+ setDetailImage('');
+ }
+ };
+
+ const handleManualGenerate = () => {
+ // 必填校验
+ if (!productImage) {
+ message.warning('请上传产品图');
+ return;
+ }
+ if (!productName.trim()) {
+ message.warning('请输入产品名称');
+ return;
+ }
+ if (!productSellingPoint.trim()) {
+ message.warning('请输入产品卖点');
+ return;
+ }
+
+ // 输出内容
+ console.log('手动生成 - 片段', currentSegment);
+ console.log('产品图:', productImage);
+ console.log('细节图:', detailImage);
+ console.log('产品名称:', productName);
+ console.log('产品卖点:', productSellingPoint);
+
+ message.success(`手动生成成功！片段: ${currentSegment}`);
+ };
+
+ const mockData = {
+ productName: '返回',
+ uploadTime: '2026-06-09 09:01:16',
+ sellingPoints: ['一键匹配', '连麦聊天'],
+ audience: '123123',
+ audienceAnalysis: '123123',
+ videoUrl: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=320&h=180&fit=crop',
+ segments: [
+ {
+ key: '1',
+ id: 1,
+ timeRange: '00:00 - 00:03',
+ thumbnail: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=120&h=80&fit=crop',
+ content: '11111',
+ lines: 'qqqqqqqqqqq',
+ contentStrategy: '展示礼盒'
+ },
+ {
+ key: '2',
+ id: 2,
+ timeRange: '00:03 - 00:06',
+ thumbnail: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=120&h=80&fit=crop',
+ content: '1231231231',
+ lines: 'qqqqqqqqqqq',
+ contentStrategy: '开箱展示'
+ },
+ {
+ key: '3',
+ id: 3,
+ timeRange: '00:06 - 00:09',
+ thumbnail: 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=120&h=80&fit=crop',
+ content: '123123',
+ lines: 'qqqqqqqqqqq',
+ contentStrategy: '取出产品'
+ },
+ ]
+ };
+
+ const columns = [
+ {
+ title: '片段',
+ width: 100,
+ render: (text: any, record: any) => (
+
+
+
+ 智能视频复刻
+ -片段{currentSegment}
+
+ }
+ onClick={handleCloseDrawer}
+ style={{ padding: 0 }}
+ />
+
+ }
+ placement="right"
+ closable={false}
+ onClose={handleCloseDrawer}
+ open={drawerVisible}
+ width={480}
+ bodyStyle={{ padding: '24px' }}
+ >
+
+
+ )
+ },
+ {
+ title: '片段视频',
+ width: 120,
+ render: (text: any, record: any) => (
+ 片段{record.id}
+ {record.timeRange}
+
+ 
+
+ )
+ },
+ {
+ title: '画面内容',
+ width: 250,
+
+ render: (text: any, record: any) => (
+
+
+
+ {record.content}
+
+ )
+ },
+ {
+ title: '台词',
+ width: 250,
+
+ render: (text: any, record: any) => (
+
+ {record.lines}
+
+ )
+ },
+ {
+ title: '内容策略',
+ width: 120,
+ align: 'left' as const,
+ render: (text: any, record: any) => (
+
+ {record.contentStrategy || '-'}
+
+ )
+ },
+ {
+ title: '素材',
+ width: 140,
+ align: 'center' as const,
+ render: (text: any, record: any) => (
+
+
+ )
+ }
+ ];
+
+ return (
+
+ 等待生成
+
+
+
+
+
+
+
+
+
+ }
+ onClick={() => navigate(-1)}
+ style={{ fontSize: 16, color: '#666' }}
+ />
+ {mockData.productName}
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+ 视频总结
+
+ 上传时间: {mockData.uploadTime}
+
+
+
+ 产品名称:
+ {mockData.productName}
+
+
+ 卖点词:
+
+
+ {mockData.sellingPoints.map((point, index) => (
+
+ {point}
+
+ ))}
+
+
+ 受众群体:
+ {mockData.audience}
+
+
+ 受众分析:
+ {mockData.audienceAnalysis}
+
+
+
+
+
+
+
+
+
+
+
+ {!productImage && (
+
+
+ {!detailImage && (
+
+
+
+
+ )}
+
+
+ )}
+
+
+ setProductName(e.target.value)}
+ placeholder="请输入产品名称"
+ style={{ height: 48, borderRadius: 8 }}
+ maxLength={10}
+ showCount
+ />
+
+
+
+
+