mz/video-gen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ai创建修改

Browse Source
This commit is contained in:
孙佳艺
2026-06-23 15:29:50 +08:00
parent 242030c50b
commit da056ea64b
16 changed files with 786 additions and 652 deletions
Download Patch File Download Diff File Expand all files Collapse all files
video-gen-app/dist/assets/bg1-5_KeKgjy.png
Vendored
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 MiB

video-gen-app/dist/assets/bg2-DR6Q-s5B.png
Vendored
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 MiB

video-gen-app/dist/assets/index-90jrBVA8.js
Vendored
-428
View File
File diff suppressed because one or more lines are too long
video-gen-app/dist/assets/index-ZwwuCCw2.js
Vendored
+440
View File
File diff suppressed because one or more lines are too long
video-gen-app/dist/index.html
Vendored
+1 -1
View File
@@ -28,7 +28,7 @@
}
})();
</script>
<script type="module" crossorigin src="/assets/index-90jrBVA8.js"></script>
<script type="module" crossorigin src="/assets/index-ZwwuCCw2.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-eLRg4pQk.css">
</head>
<body>
video-gen-app/src/api/index.ts
+6 -2
View File
@@ -367,8 +367,12 @@ export async function generateReplication(params: any): Promise<any> {
return api.post('/hot-opening-replications/tasks', params);
}
// 获取爆款开头复刻任务列表
export async function getReplicationList(page: number,page_size: number): Promise<any[]> {
return api.get(`/hot-opening-replications/tasks?page=${page}&page_size=${page_size}`);
export async function getReplicationList(page: number, page_size: number, keyword?: string): Promise<any[]> {
let url = `/hot-opening-replications/tasks?page=${page}&page_size=${page_size}`;
if (keyword) {
url += `&keyword=${encodeURIComponent(keyword)}`;
}
return api.get(url);
}
// 获取爆款开头复刻任务详情
export async function getReplicationDetail(id: string): Promise<any> {
video-gen-app/src/assets/bg1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 MiB

video-gen-app/src/assets/bg2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 MiB

video-gen-app/src/components/VideoPromptSchemaEditor.tsx
+37 -9
View File
@@ -1,5 +1,5 @@
import React from 'react';
import { Alert, Input, Space, Tag, Typography } from 'antd';
import { Alert, Input, Radio, Space, Tag, Typography } from 'antd';
import type {
JsonValue,
VideoPromptSchemaFieldConfig,
@@ -54,10 +54,24 @@ function EditableInput({ value, maxLength, onChange }: { value: JsonValue; maxLe
return <Input {...commonProps} />;
}
function renderFieldTag(field: VideoPromptSchemaFieldConfig) {
return field.editable ? <Tag color="processing">可编辑</Tag> : <Tag color="default">只读</Tag>;
function BooleanRadio({ value, onChange }: { value: JsonValue; onChange: (nextValue: JsonValue) => void }) {
const boolValue = value === true || value === 'true';
return (
<Radio.Group
value={boolValue}
onChange={(e) => onChange(e.target.value)}
style={{ display: 'flex', gap: 24 }}
>
<Radio value={true} style={{ fontSize: 14, color: '#475569' }}>是</Radio>
<Radio value={false} style={{ fontSize: 14, color: '#475569' }}>否</Radio>
</Radio.Group>
);
}
// function renderFieldTag(field: VideoPromptSchemaFieldConfig) {
// return field.editable ? <Tag color="processing">可编辑</Tag> : <Tag color="default">只读</Tag>;
// }
const VideoPromptSchemaEditor: React.FC<VideoPromptSchemaEditorProps> = ({ value, schemaConfigSnapshot, onChange }) => {
const safeValue = isRecord(value) ? value : {};
const sections = normalizeSchemaSections(schemaConfigSnapshot);
@@ -93,21 +107,28 @@ const VideoPromptSchemaEditor: React.FC<VideoPromptSchemaEditorProps> = ({ value
<div key={section.key} style={{ marginBottom: 18 }}>
<Space style={{ marginBottom: 8 }}>
<Text strong style={{ color: '#334155', fontSize: 13 }}>{section.label}</Text>
{renderFieldTag(section)}
{/* {renderFieldTag(section)} */}
</Space>
<div style={{ borderLeft: '3px solid #6366f1', paddingLeft: 12, marginLeft: 4 }}>
{fields.map((field) => (
<div key={field.key} style={{ marginBottom: 12 }}>
<Space style={{ marginBottom: 4 }}>
<Text style={{ color: '#64748b', fontSize: 12 }}>{field.label}</Text>
{renderFieldTag(field)}
{/* {renderFieldTag(field)} */}
</Space>
{field.editable ? (
field.type === 'boolean' ? (
<BooleanRadio
value={sectionValue[field.key]}
onChange={(nextValue) => onChange(setObjectField(safeValue, section.key, field.key, nextValue))}
/>
) : (
<EditableInput
value={sectionValue[field.key]}
maxLength={field.maxLength}
onChange={(nextText) => onChange(setObjectField(safeValue, section.key, field.key, nextText))}
/>
)
) : (
<ReadonlyBlock value={sectionValue[field.key]} />
)}
@@ -142,14 +163,21 @@ const VideoPromptSchemaEditor: React.FC<VideoPromptSchemaEditorProps> = ({ value
<div key={field.key} style={{ marginBottom: 10 }}>
<Space style={{ marginBottom: 4 }}>
<Text style={{ color: '#64748b', fontSize: 12 }}>{field.label}</Text>
{renderFieldTag(field)}
{/* {renderFieldTag(field)} */}
</Space>
{field.editable ? (
field.type === 'boolean' ? (
<BooleanRadio
value={row[field.key]}
onChange={(nextValue) => onChange(setArrayObjectField(safeValue, section.key, index, field.key, nextValue))}
/>
) : (
<EditableInput
value={row[field.key]}
maxLength={field.maxLength}
onChange={(nextText) => onChange(setArrayObjectField(safeValue, section.key, index, field.key, nextText))}
/>
)
) : (
<ReadonlyBlock value={row[field.key]} />
)}
@@ -170,7 +198,7 @@ const VideoPromptSchemaEditor: React.FC<VideoPromptSchemaEditorProps> = ({ value
<div key={section.key} style={{ marginBottom: 18 }}>
<Space style={{ marginBottom: 8 }}>
<Text strong style={{ color: '#334155', fontSize: 13 }}>{section.label}</Text>
{renderFieldTag(section)}
{/* {renderFieldTag(section)} */}
</Space>
{section.editable ? (
<EditableInput
@@ -191,13 +219,13 @@ const VideoPromptSchemaEditor: React.FC<VideoPromptSchemaEditorProps> = ({ value
return (
<div>
<Alert
{/* <Alert
type="info"
showIcon
style={{ marginBottom: 14 }}
message="仅可修改后台 Schema 配置允许编辑的字段"
description="视频规格、时间段、流程条目数量、输出规格、质量控制、合规控制等锁定内容由服务端最终校验。"
/>
/> */}
{sections.map((section) => {
if (!(section.key in safeValue)) return null;
if (section.type === 'object') return renderObjectSection(section);
video-gen-app/src/components/VideoTrimPicker.tsx
+43 -31
View File
@@ -1,6 +1,6 @@
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Button, Modal, Slider, Spin, Typography } from 'antd';
import { PauseOutlined, PlayCircleFilled } from '@ant-design/icons';
import { PauseCircleFilled, PlayCircleFilled } from '@ant-design/icons';
const { Text } = Typography;
@@ -469,16 +469,29 @@ const VideoTrimPicker: React.FC<VideoTrimPickerProps> = ({
width={980}
destroyOnHidden
footer={[
<Button key="cancel" onClick={onCancel} disabled={loading}>
<Button key="cancel" onClick={onCancel} disabled={loading} style={{ borderRadius: 8, border: '1px solid rgba(99, 102, 241, 0.2)', color: '#6366f1' }}>
取消
</Button>,
<Button key="confirm" type="primary" onClick={handleConfirm} loading={loading} disabled={loading || disabledByDuration || !integerDuration}>
<Button key="confirm" type="primary" onClick={handleConfirm} loading={loading} disabled={loading || disabledByDuration || !integerDuration} style={{ borderRadius: 8, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', border: 'none', boxShadow: '0 4px 12px rgba(99, 102, 241, 0.3)' }}>
确认拆镜
</Button>,
]}
>
<div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
<div style={{ display: 'flex', justifyContent: 'center', background: '#fff' }}>
<style>{`
.ant-slider-handle::after {
height: 80px !important;
width: 10px !important;
border-radius: 10px !important;
top: 95% !important;
transform: translateY(-50%) !important;
}
.ant-slider-handle {
height: 80px !important;
margin-top: -37px !important;
}
`}</style>
<div style={{ display: 'flex', justifyContent: 'center', background: '#fff', borderRadius: 16, overflow: 'hidden' }}>
<video
ref={videoRef}
src={videoUrl}
@@ -497,26 +510,26 @@ const VideoTrimPicker: React.FC<VideoTrimPickerProps> = ({
}}
onTimeUpdate={handleTimeUpdate}
onPause={() => setPlaying(false)}
style={{ width: '100%', maxHeight: 420, objectFit: 'contain', background: '#111', borderRadius: 8 }}
style={{ maxHeight: 320, objectFit: 'contain', background: '#111' }}
/>
</div>
<div
style={{
borderRadius: 24,
background: '#f3f6ff',
padding: '26px 34px 18px',
borderRadius: 20,
background: '#f0f5ff',
padding: '20px 24px',
}}
>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 28, marginBottom: 22 }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16, marginBottom: 18 }}>
<Button
type="text"
icon={playing ? <PauseOutlined /> : <PlayCircleFilled />}
icon={playing ? <PauseCircleFilled /> : <PlayCircleFilled />}
onClick={handlePlaySelected}
disabled={!integerDuration || disabledByDuration}
style={{ fontSize: 22, color: '#111' }}
style={{ fontSize: 20, color: '#1e293b', padding: 0 }}
/>
<span style={{ fontSize: 26, color: '#111', letterSpacing: 1 }}>
<span style={{ fontSize: 18, color: '#1e293b', fontFamily: 'monospace' }}>
{formatTime(currentTime)} / {formatTime(integerDuration)}
</span>
</div>
@@ -528,8 +541,9 @@ const VideoTrimPicker: React.FC<VideoTrimPickerProps> = ({
gridTemplateColumns: `repeat(${Math.max(frames.length, 1)}, minmax(42px, 1fr))`,
height: 86,
overflow: 'hidden',
borderRadius: 10,
background: '#dbe2ff',
borderRadius: 12,
background: '#fff',
position: 'relative',
}}
>
{frameLoading && frames.length === 0 ? (
@@ -549,7 +563,7 @@ const VideoTrimPicker: React.FC<VideoTrimPickerProps> = ({
height: 86,
border: 'none',
padding: 0,
background: '#eef2ff',
background: 'transparent',
overflow: 'hidden',
cursor: disabledByDuration ? 'not-allowed' : 'pointer',
position: 'relative',
@@ -562,7 +576,7 @@ const VideoTrimPicker: React.FC<VideoTrimPickerProps> = ({
<Spin size="small" />
</div>
) : (
<div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', color: '#64748b', fontSize: 12, background: '#eef2ff' }}>
<div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', color: '#64748b', fontSize: 12, background: '#fff' }}>
<span>{frame.second}s</span>
<span style={{ fontSize: 11 }}>无有效帧</span>
</div>
@@ -586,9 +600,10 @@ const VideoTrimPicker: React.FC<VideoTrimPickerProps> = ({
暂无帧预览，请确认视频是否加载完成
</div>
)}
</div>
<div style={{ marginTop: 0, padding: '0 8px 0' }}>
<div style={{ position: 'absolute', top: -6, left: 10, right: 0, padding: '0 8px 0' }}>
<Slider
range
min={0}
@@ -601,38 +616,35 @@ const VideoTrimPicker: React.FC<VideoTrimPickerProps> = ({
disabled={!integerDuration || disabledByDuration}
styles={{
track: {
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
height: 6,
background: '#6969dd63',
height: 70,
borderRadius: 3,
margin: '0 ',
},
rail: {
background: '#e2e8f0',
height: 6,
// background: '#0e447e70',
height: 70,
borderRadius: 3,
},
handle: {
width: 18,
height: 18,
width: 20,
height: 70,
marginTop: 0,
// backgroundColor: '#fff',
// border: '3px solid #6366f1',
// boxShadow: '0 2px 8px rgba(99, 102, 241, 0.3)',
transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
// border: '2px solid #6366f1',
borderRadius: '50%',
},
}}
/>
</div>
</div>
<div style={{ marginTop: 30, textAlign: 'center', color: '#64748b', fontSize: 16 }}>
<div style={{ marginTop: 16, textAlign: 'center', color: '#64748b', fontSize: 14 }}>
已选取 {selectedDuration}s
<span style={{ marginLeft: 12, fontSize: 13, color: '#94a3b8' }}>
最小 {minDuration}s，最大 {maxDuration}s
</span>
</div>
{localError && (
<div style={{ marginTop: 12, textAlign: 'center', color: '#ef4444', fontSize: 13 }}>
<div style={{ marginTop: 12, padding: '10px 14px', borderRadius: 8, background: 'rgba(239, 68, 68, 0.08)', border: '1px solid rgba(239, 68, 68, 0.15)', color: '#ef4444', fontSize: 13, textAlign: 'center' }}>
{localError}
</div>
)}
video-gen-app/src/pages/GenerateConver.tsx
+155 -100
View File
@@ -15,6 +15,10 @@ import {
Modal,
} from 'antd';
import bg1 from '../assets/bg1.png';
import bg2 from '../assets/bg2.png';
import {
getParameters, createGenerationTask, getgen_list, getEngine, uploadImage,
uploadVideo, getCreditRatios, deleteHistory, calculateCredits
@@ -830,7 +834,16 @@ const AIChatPage: React.FC = () => {
// ==================== 渲染 ====================
return (
<Layout style={{ height: 'calc(100vh - 90px)', overflow: 'auto' }}>
<Layout style={{
margin: '-24px -32px -32px',
borderRadius: 20,
height: 'calc(100vh - 34px)',
background: 'linear-gradient(135deg, #f8fafc 0%, #f0f4ff 50%, #faf5ff 100%)',
backgroundImage: `url(${bg2})`,
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
backgroundPosition: 'center',
}}>
{/* 左侧边栏 - 对话列表（已隐藏，保留代码） */}
{false && (
<Sider
@@ -839,8 +852,9 @@ const AIChatPage: React.FC = () => {
collapsed={collapsed}
width={220}
style={{
background: '#fff',
borderRight: '1px solid #f0f0f0',
background: 'rgba(255,255,255,0.7)',
backdropFilter: 'blur(20px)',
borderRight: '1px solid rgba(99, 102, 241, 0.08)',
}}
>
<div style={{ padding: 12 }}>
@@ -917,38 +931,46 @@ const AIChatPage: React.FC = () => {
)}
{/* 主内容区 */}
<Layout style={{ flex: 1, background: '#ffffffff' }}>
<Layout style={{ display: 'flex', flex: 1, background: 'transparent' }}>
{/* 头部 - 显示对话标题和模型信息 */}
<Header
style={{
background: '#fff',
// padding: '0 24px',
borderBottom: '1px solid #f0f0f0',
borderRadius: '20px 20px 0 0',
background: 'rgba(255,255,255,0.1)',
backdropFilter: 'blur(20px)',
borderBottom: '1px solid rgba(99, 102, 241, 0.08)',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '0 24px',
}}
>
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<div style={{ width: 36, height: 36, borderRadius: 12, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<RobotOutlined style={{ fontSize: 18, color: '#fff' }} />
</div>
<div>
<Text strong style={{ fontSize: 16 }}>
{'开启创作'}
<Text strong style={{ fontSize: 16, background: 'linear-gradient(90deg, #6366f1, #8b5cf6)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
开启创作
</Text>
{/* <div style={{ width: 32, height: 2, background: 'linear-gradient(90deg, #6366f1, #8b5cf6)', borderRadius: 1, marginTop: 4 }} /> */}
</div>
</div>
{/* <div style={{ display: 'flex', gap: 16, fontSize: 12, color: '#999' }}>
<span>模型: Gemini 3 Pro</span>
<span>比例: 9:16</span>
<span style={{ color: '#6366f1', fontWeight: 500 }}>消耗 15 积分</span>
</div> */}
</Header>
{/* 消息区域 */}
<Content
style={{
flex: 1,
margin: 0,
padding: 24,
boxSizing: 'border-box',
display: 'flex',
flexDirection: 'column',
// padding: 24,
overflow: 'hidden',
minHeight: 0,
}}
>
{/* 空状态 - 没有对话或当前对话没有消息时显示 */}
@@ -982,10 +1004,15 @@ const AIChatPage: React.FC = () => {
<div
ref={scrollContainerRef}
style={{
height: 'calc(100vh - 280px)', // 固定高度，减去头部和输入区域
overflowY: 'auto', // 垂直滚动
flex: 1,
overflowY: 'auto',
paddingBottom: 24,
paddingRight: 8, // 预留滚动条空间
paddingRight: 8,
// backgroundImage: `url(${bg1})`,
// backgroundRepeat: 'no-repeat',
// backgroundSize: 'cover',
// backgroundPosition: 'center',
}}
>
{/* 加载更多按钮 - 在列表顶部 */}
@@ -1015,30 +1042,32 @@ const AIChatPage: React.FC = () => {
<div
key={msg.id}
style={{
width: '100%',
display: 'flex',
justifyContent: 'flex-start', // 所有消息左对齐
marginBottom: 16,
}}
>
<div style={{ display: 'flex', gap: 10, maxWidth: '70%' }}>
<div style={{ width: '100%', display: 'flex', gap: 10 }}>
{/* 头像 */}
<div
style={{
width: 36,
height: 36,
borderRadius: 50,
background: '#e0e0e0',
borderRadius: 12,
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexShrink: 0,
boxShadow: '0 4px 12px rgba(99, 102, 241, 0.3)',
}}
>
<RobotOutlined style={{ color: '#666', fontSize: 16 }} />
<RobotOutlined style={{ color: '#fff', fontSize: 16 }} />
</div>
{/* 消息内容 */}
<div>
<div style={{ flex: 1 }}>
{/* 时间戳和参数信息 */}
<div style={{ margin: 4, fontSize: 11, color: '#999', textAlign: 'left', display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
@@ -1080,12 +1109,16 @@ const AIChatPage: React.FC = () => {
{/* 消息气泡 */}
<div
style={{
background: '#fff',
background: 'rgba(255,255,255,0.85)',
backdropFilter: 'blur(20px)',
borderRadius: '16px 16px 16px 4px',
padding: '12px 16px',
width: '600px',
boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
width: '70%',
maxWidth: 800,
boxSizing: 'border-box',
boxShadow: '0 4px 20px rgba(99, 102, 241, 0.08), 0 1px 3px rgba(0,0,0,0.04)',
position: 'relative',
border: '1px solid rgba(99, 102, 241, 0.06)',
}}
>
{/* 删除按钮 - 右上角 */}
@@ -1115,8 +1148,8 @@ const AIChatPage: React.FC = () => {
height: 28,
borderRadius: 8,
border: 'none',
background: 'rgba(146, 144, 144, 1)',
color: '#ffffffff',
background: 'rgba(99, 102, 241, 0.08)',
color: '#6366f1',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
@@ -1125,12 +1158,12 @@ const AIChatPage: React.FC = () => {
padding: 0,
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = '#fff2f0';
e.currentTarget.style.color = '#ff4d4f';
e.currentTarget.style.background = 'rgba(239, 68, 68, 0.1)';
e.currentTarget.style.color = '#ef4444';
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = 'rgba(0,0,0,0.05)';
e.currentTarget.style.color = '#999';
e.currentTarget.style.background = 'rgba(99, 102, 241, 0.08)';
e.currentTarget.style.color = '#6366f1';
}}
>
<DeleteOutlined style={{ fontSize: 12 }} />
@@ -1142,18 +1175,19 @@ const AIChatPage: React.FC = () => {
{/* 文本内容 */}
<div
style={{
width: '100%',
position: 'relative',
margin: '8px 0',
padding: '12px 16px',
backgroundColor: '#f8fafc',
borderRadius: 8,
border: '1px solid #e2e8f0',
backgroundColor: 'rgba(99, 102, 241, 0.04)',
borderRadius: 10,
border: '1px solid rgba(99, 102, 241, 0.08)',
fontSize: 13,
color: '#475569',
lineHeight: 1.6,
cursor: 'pointer',
transition: 'all 0.2s ease',
boxShadow: '0 1px 3px rgba(0,0,0,0.05)',
boxShadow: '0 1px 3px rgba(99, 102, 241, 0.04)',
}}
onMouseEnter={() => {
setExpandedPrompts(prev => {
@@ -1172,6 +1206,7 @@ const AIChatPage: React.FC = () => {
>
{/* 默认显示：一行省略 */}
<div style={{
width: '100%',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
@@ -1182,6 +1217,7 @@ const AIChatPage: React.FC = () => {
{/* 鼠标移入显示：完整内容 */}
<div style={{
width: '100%',
maxHeight: 200,
overflowY: 'auto',
display: expandedPrompts.has(msg.id) ? 'block' : 'none',
@@ -1445,11 +1481,14 @@ const AIChatPage: React.FC = () => {
{/* 输入区域 - 始终显示 */}
<div
style={{
background: '#fff',
background: 'rgba(255,255,255,0.1)',
backdropFilter: 'blur(20px)',
borderRadius: 24,
padding: 16,
boxShadow: '0 4px 20px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06)',
boxShadow: '0 8px 32px rgba(99, 102, 241, 0.1), 0 2px 8px rgba(0,0,0,0.04)',
transition: 'all 0.3s ease',
border: '1px solid rgba(99, 102, 241, 0.08)',
// margin: '0 24px 24px',
}}
>
{/* 已上传媒体预览 */}
@@ -1499,12 +1538,13 @@ const AIChatPage: React.FC = () => {
{/* 输入框区域 */}
<div style={{
display: 'flex',
alignItems: 'center',
gap: 12,
padding: '12px 16px',
backgroundColor: '#ffffff',
backgroundColor: 'rgba(248,250,252,0.6)',
borderRadius: 16,
border: '1px solid #e2e8f0',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)',
border: '1px solid rgba(99, 102, 241, 0.08)',
boxShadow: '0 2px 8px rgba(99, 102, 241, 0.04)',
transition: 'all 0.2s ease',
}}>
{/* 上传按钮 */}
@@ -1518,15 +1558,15 @@ const AIChatPage: React.FC = () => {
style={{
width: 48,
height: 48,
borderRadius: 12,
border: '2px dashed #cbd5e1',
borderRadius: 14,
border: '2px dashed rgba(99, 102, 241, 0.2)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
transition: 'all 0.25s ease',
flexShrink: 0,
backgroundColor: '#f8fafc',
backgroundColor: 'rgba(255,255,255,0.7)',
}}
onMouseEnter={(e) => {
e.currentTarget.style.borderColor = '#6366f1';
@@ -1534,8 +1574,8 @@ const AIChatPage: React.FC = () => {
e.currentTarget.style.transform = 'scale(1.05)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.borderColor = '#cbd5e1';
e.currentTarget.style.backgroundColor = '#f8fafc';
e.currentTarget.style.borderColor = 'rgba(99, 102, 241, 0.2)';
e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.7)';
e.currentTarget.style.transform = 'scale(1)';
}}
>
@@ -1557,6 +1597,7 @@ const AIChatPage: React.FC = () => {
autoSize={{ minRows: 1, maxRows: 4 }}
style={{
flex: 1,
height: '100%',
borderRadius: 12,
border: 'none',
outline: 'none',
@@ -1564,7 +1605,10 @@ const AIChatPage: React.FC = () => {
fontSize: 14,
lineHeight: 1.5,
color: '#1e293b',
resize: 'none',
// resize: 'none',
// boxShadow: 'none',
// padding: '8px 12px',
}}
disabled={loading}
/>
@@ -1582,14 +1626,16 @@ const AIChatPage: React.FC = () => {
width: 48,
height: 48,
borderRadius: 14,
boxShadow: '0 4px 12px rgba(99, 102, 241, 0.35)',
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
boxShadow: '0 4px 16px rgba(99, 102, 241, 0.4)',
transition: 'all 0.2s ease',
border: 'none',
}}
/>
</div>
{/* 底部选择器 - 媒体类型和数量 */}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12, paddingTop: 12, borderTop: '1px solid #f0f0f0' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12, paddingTop: 12, borderTop: '1px solid rgba(99, 102, 241, 0.08)' }}>
<Space size="middle">
{/* 文件类型选择器 */}
{/* <div style={{
@@ -1608,11 +1654,11 @@ const AIChatPage: React.FC = () => {
onChange={(val) => setMediaType(val)}
style={{
width: 100,
outline: 'none',
background: '#f1f5f9',
border: 'none',
borderRadius: 8,
height: 34,
outline: 'none',
border: 'none',
backgroundColor: '#f1f5f9',
borderRadius: 10,
}}
size="middle"
>
@@ -1634,16 +1680,26 @@ const AIChatPage: React.FC = () => {
className="image-settings-trigger"
style={{
minWidth: 200,
padding: '4px 12px',
padding: '6px 14px',
height: 34,
borderRadius: 8,
borderRadius: 10,
border: 'none',
backgroundColor: '#f1f5f9',
cursor: 'pointer',
display: 'inline-flex',
alignItems: 'center',
gap: 6,
transition: 'all 0.2s',
boxShadow: '0 2px 8px rgba(99, 102, 241, 0.04)',
}}
onMouseEnter={(e) => {
e.currentTarget.style.borderColor = 'rgba(99, 102, 241, 0.3)';
e.currentTarget.style.boxShadow = '0 4px 12px rgba(99, 102, 241, 0.08)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.borderColor = 'rgba(99, 102, 241, 0.15)';
e.currentTarget.style.boxShadow = '0 2px 8px rgba(99, 102, 241, 0.04)';
}}
>
<SettingOutlined style={{ fontSize: 14, color: '#64748b' }} />
@@ -1664,11 +1720,12 @@ const AIChatPage: React.FC = () => {
bottom: 'calc(100% + 8px)',
left: 0,
width: 360,
backgroundColor: '#fff',
borderRadius: 16,
boxShadow: '0 10px 40px rgba(0,0,0,0.15)',
backgroundColor: 'rgba(255,255,255,0.95)',
backdropFilter: 'blur(20px)',
borderRadius: 14,
boxShadow: '0 12px 48px rgba(99, 102, 241, 0.15)',
padding: 16,
border: 'none',
border: '1px solid rgba(99, 102, 241, 0.1)',
zIndex: 9999,
}}
onClick={(e) => e.stopPropagation()}
@@ -1679,8 +1736,8 @@ const AIChatPage: React.FC = () => {
display: 'block',
marginBottom: 8,
fontSize: 12,
fontWeight: 500,
color: '#666666',
fontWeight: 600,
color: '#475569',
}}>
选择引擎
</Text>
@@ -1793,11 +1850,12 @@ const AIChatPage: React.FC = () => {
bottom: 'calc(100% + 8px)',
left: 0,
width: 480,
backgroundColor: '#fff',
borderRadius: 16,
boxShadow: '0 10px 40px rgba(0,0,0,0.15)',
backgroundColor: 'rgba(255,255,255,0.95)',
backdropFilter: 'blur(20px)',
borderRadius: 14,
boxShadow: '0 12px 48px rgba(99, 102, 241, 0.15)',
padding: 16,
border: 'none',
border: '1px solid rgba(99, 102, 241, 0.1)',
zIndex: 9999,
}}
onClick={(e) => e.stopPropagation()}
@@ -2074,11 +2132,12 @@ const AIChatPage: React.FC = () => {
bottom: 'calc(100% + 8px)',
left: 0,
width: 400,
backgroundColor: '#fff',
borderRadius: 16,
boxShadow: '0 10px 40px rgba(0,0,0,0.15)',
backgroundColor: 'rgba(255,255,255,0.95)',
backdropFilter: 'blur(20px)',
borderRadius: 14,
boxShadow: '0 12px 48px rgba(99, 102, 241, 0.15)',
padding: 16,
border: 'none',
border: '1px solid rgba(99, 102, 241, 0.1)',
zIndex: 9999,
}}
onClick={(e) => e.stopPropagation()}
@@ -2265,22 +2324,12 @@ const AIChatPage: React.FC = () => {
</div>
)}
{/* 预估积分 */}
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
<Text style={{ fontSize: 12, color: '#94a3b8' }}>预估积分</Text>
<Text style={{ fontSize: 12, color: '#666666' }}>{getEstimatedCredits()}</Text>
<div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 14px', backgroundColor: 'rgba(99, 102, 241, 0.06)', borderRadius: 10, border: '1px solid rgba(99, 102, 241, 0.1)' }}>
<Text style={{ fontSize: 13, color: '#6366f1', fontWeight: 500 }}>预估积分</Text>
<Text style={{ fontSize: 14, color: '#6366f1', fontWeight: 600 }}>{getEstimatedCredits()}</Text>
</div>
</Space>
{/* 底部信息 */}
{/* <div style={{ display: 'flex', gap: 8, fontSize: 12, color: '#999' }}>
<span>GPT Video 2</span>
<span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
<span style={{ width: 16, height: 16, borderRadius: 4, background: '#f0f0f0', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10 }}>
{mediaType === 'image' ? (selectedRatio === 'auto' ? '智能' : selectedRatio) : videoAspectRatio}
</span>
<span>{countType}</span>
</span>
</div> */}
</div>
</div>
</Content>
@@ -2299,7 +2348,7 @@ const AIChatPage: React.FC = () => {
open={previewVisible}
onCancel={handleClosePreview}
footer={[
<Button key="download" type="primary" onClick={handleDownload}>
<Button key="download" type="primary" onClick={handleDownload} style={{ background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', borderRadius: 10, border: 'none' }}>
下载
</Button>,
]}
@@ -2309,14 +2358,14 @@ const AIChatPage: React.FC = () => {
<button
onClick={handleClosePreview}
style={{
width: 28,
height: 28,
width: 32,
height: 32,
borderRadius: '50%',
border: 'none',
background: '#ff4d4f',
background: 'rgba(99, 102, 241, 0.1)',
cursor: 'pointer',
fontSize: 14,
color: '#fff',
fontSize: 16,
color: '#6366f1',
fontWeight: 'bold',
display: 'flex',
alignItems: 'center',
@@ -2324,24 +2373,27 @@ const AIChatPage: React.FC = () => {
transition: 'all 0.2s',
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = '#ff7875';
e.currentTarget.style.background = 'rgba(239, 68, 68, 0.1)';
e.currentTarget.style.color = '#ef4444';
e.currentTarget.style.transform = 'scale(1.1)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = '#ff4d4f';
e.currentTarget.style.background = 'rgba(99, 102, 241, 0.1)';
e.currentTarget.style.color = '#6366f1';
e.currentTarget.style.transform = 'scale(1)';
}}
>
×
</button>
}
style={{ borderRadius: 16 }}
styles={{
body: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
minHeight: '400px',
}
},
}}
>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}>
@@ -2388,7 +2440,7 @@ const AIChatPage: React.FC = () => {
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}}>
}} style={{ background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', borderRadius: 10, border: 'none' }}>
下载
</Button>,
]}
@@ -2398,14 +2450,14 @@ const AIChatPage: React.FC = () => {
<button
onClick={() => setAttachmentPreviewVisible(false)}
style={{
width: 28,
height: 28,
width: 32,
height: 32,
borderRadius: '50%',
border: 'none',
background: '#ff4d4f',
background: 'rgba(99, 102, 241, 0.1)',
cursor: 'pointer',
fontSize: 14,
color: '#fff',
fontSize: 16,
color: '#6366f1',
fontWeight: 'bold',
display: 'flex',
alignItems: 'center',
@@ -2413,24 +2465,27 @@ const AIChatPage: React.FC = () => {
transition: 'all 0.2s',
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = '#ff7875';
e.currentTarget.style.background = 'rgba(239, 68, 68, 0.1)';
e.currentTarget.style.color = '#ef4444';
e.currentTarget.style.transform = 'scale(1.1)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = '#ff4d4f';
e.currentTarget.style.background = 'rgba(99, 102, 241, 0.1)';
e.currentTarget.style.color = '#6366f1';
e.currentTarget.style.transform = 'scale(1)';
}}
>
×
</button>
}
style={{ borderRadius: 16 }}
styles={{
body: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
minHeight: '400px',
}
},
}}
>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}>
video-gen-app/src/pages/InitialInfo.tsx
+16 -6
View File
@@ -52,6 +52,7 @@ function InitialInfo() {
const [currentPage, setCurrentPage] = useState(1);
const [pageSize, setPageSize] = useState(20);
const [total, setTotal] = useState(0);
const [searchKeyword, setSearchKeyword] = useState('');
// 任务详情数据
const [taskDetail, setTaskDetail] = useState<any>({});
// API 返回的步骤数据
@@ -82,8 +83,8 @@ function InitialInfo() {
// 获取列表数据的函数
const fetchList = (page: number, size: number) => {
getReplicationList(page, size).then((res: any) => {
const fetchList = (page: number, size: number, keyword?: string) => {
getReplicationList(page, size, keyword).then((res: any) => {
if (res.items) {
setTableData(res.items);
}
@@ -98,7 +99,13 @@ function InitialInfo() {
const handlePageChange = (page: number, size: number) => {
setCurrentPage(page);
setPageSize(size);
fetchList(page, size);
fetchList(page, size, searchKeyword);
};
// 搜索处理
const handleSearch = () => {
setCurrentPage(1);
fetchList(1, pageSize, searchKeyword);
};
// 获取复刻列表数据
@@ -1072,7 +1079,7 @@ function InitialInfo() {
<>
<div style={{ padding: '12px 14px', background: 'rgba(255,255,255,0.6)', borderRadius: 10, border: '1px solid rgba(99, 102, 241, 0.08)', marginBottom: 4 }}>
<Text style={{ color: '#64748b', fontSize: 13, lineHeight: 1.8 }}>
视频提词已生成，可点击按钮查看并修改后台 Schema 允许编辑的字段。
视频提词已生成，可点击按钮查看/修改
</Text>
</div>
<Space style={{ marginTop: 16, gap: 12, width: '100%' }}>
@@ -1083,7 +1090,7 @@ function InitialInfo() {
style={{ flex: 1, borderRadius: 10, borderColor: 'rgba(99, 102, 241, 0.3)', color: '#6366f1', height: 36, fontWeight: 500, background: 'rgba(99, 102, 241, 0.04)' }}
disabled={step.status !== 'completed' || !taskDetail?.videoGeneration?.promptSchema || !taskDetail?.videoGeneration?.schemaConfigSnapshot}
>
查看视频提词
查看/修改视频提词
</Button>
<Button
onClick={() => { message.info('正在生成视频，请稍候...'); createvideo(step.id, step.engineId); }}
@@ -1211,9 +1218,12 @@ function InitialInfo() {
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 16 }}>
<Input
placeholder="搜索产品名称"
value={searchKeyword}
onChange={(e) => setSearchKeyword(e.target.value)}
onPressEnter={handleSearch}
style={{ width: 200, borderRadius: 8, marginRight: 8, border: '1px solid rgba(99, 102, 241, 0.15)', background: 'rgba(255,255,255,0.8)' }}
/>
<Button type="primary" style={{ borderRadius: 8, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', border: 'none', boxShadow: '0 4px 12px rgba(99, 102, 241, 0.3)' }}>
<Button type="primary" onClick={handleSearch} style={{ borderRadius: 8, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', border: 'none', boxShadow: '0 4px 12px rgba(99, 102, 241, 0.3)' }}>
搜索
</Button>
</div>
video-gen-app/src/pages/InitialReplication.tsx
+18 -6
View File
@@ -34,6 +34,7 @@ const GenerateConver: React.FC = () => {
const [currentPage, setCurrentPage] = useState(1);
const [pageSize, setPageSize] = useState(20);
const [total, setTotal] = useState(0);
const [searchKeyword, setSearchKeyword] = useState('');
// 卡片列表专用状态
const [cardData, setCardData] = useState<any[]>([]);
@@ -114,8 +115,8 @@ const GenerateConver: React.FC = () => {
};
// 获取列表数据的函数
const fetchList = (page: number, size: number, isPolling = false) => {
getReplicationList(page, size).then((res: any) => {
const fetchList = (page: number, size: number, isPolling = false, keyword?: string) => {
getReplicationList(page, size, keyword).then((res: any) => {
if (res.items) {
if (isPolling) {
// 轮询时：增量更新，只更新状态发生变化的项目
@@ -139,7 +140,7 @@ const GenerateConver: React.FC = () => {
// 如果有 processing 状态且轮询未启动，启动轮询
if (hasProcessing && !tablePollingTimer.current) {
tablePollingTimer.current = setInterval(() => {
fetchList(currentPage, pageSize, true);
fetchList(currentPage, pageSize, true, searchKeyword);
}, 5000);
}
// 如果没有 processing 状态且轮询正在运行，停止轮询
@@ -177,7 +178,13 @@ const GenerateConver: React.FC = () => {
const handlePageChange = (page: number, size: number) => {
setCurrentPage(page);
setPageSize(size);
fetchList(page, size);
fetchList(page, size, false, searchKeyword);
};
// 搜索处理
const handleSearch = () => {
setCurrentPage(1);
fetchList(1, pageSize, false, searchKeyword);
};
// 文件上传前校验
@@ -205,7 +212,7 @@ const GenerateConver: React.FC = () => {
resolve(false);
return;
}
if (video.duration > 15) {
if (video.duration >= 16) {
message.error('视频时长不能超过15秒');
URL.revokeObjectURL(video.src);
resolve(false);
@@ -489,13 +496,14 @@ const GenerateConver: React.FC = () => {
key={item.id}
style={{
background: 'rgba(255,255,255,0.9)',
border: '1px solid rgba(99, 102, 241, 0.6)',
backdropFilter: 'blur(10px)',
borderRadius: 16,
overflow: 'hidden',
boxShadow: '0 4px 16px rgba(99, 102, 241, 0.06)',
cursor: 'pointer',
transition: 'transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
border: '1px solid rgba(99, 102, 241, 0.06)',
// border: '1px solid rgba(99, 102, 241, 0.06)',
}}
onClick={() => navigate(`/initial/${item.id}/initialinfo`)}
onMouseEnter={(e) => {
@@ -1146,6 +1154,9 @@ const GenerateConver: React.FC = () => {
<div style={{ display: 'flex', justifyContent: 'flex-end', margin: '16px 24px', flexShrink: 0 }}>
<Input
placeholder="搜索产品名称"
value={searchKeyword}
onChange={(e) => setSearchKeyword(e.target.value)}
onPressEnter={handleSearch}
style={{
width: 220,
borderRadius: 10,
@@ -1156,6 +1167,7 @@ const GenerateConver: React.FC = () => {
/>
<Button
type="primary"
onClick={handleSearch}
style={{
borderRadius: 10,
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
video-gen-app/src/pages/RemoveInfo.tsx
+1
View File
@@ -730,6 +730,7 @@ function RemoveInfo() {
}
placement="top"
trigger="hover"
overlayInnerStyle={{ backgroundColor: '#fff', border: '1px solid rgba(99, 102, 241, 0.1)', borderRadius: 12, boxShadow: '0 8px 24px rgba(99, 102, 241, 0.12)' }}
>
<span style={{ marginLeft: 8, fontSize: 13, opacity: 0.9 }}>(AI 镜头拆分方案)</span>
</Tooltip>
video-gen-app/src/pages/RemoveLens.tsx
+2 -2
View File
@@ -127,8 +127,8 @@ export default function VideoFrameExtractor() {
<div style={{ maxWidth: 1200, margin: '50px auto', position: 'relative', zIndex: 10 }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 32 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 16,marginBottom: 50 }}>
<div style={{ marginBottom: 50,height: 160, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
<div style={{ width: 40, height: 2, background: 'linear-gradient(90deg, transparent, #6366f1, #8b5cf6, transparent)', borderRadius: 1 }} />
<div>
<h1 style={{
video-gen-app/src/pages/RemoveRw.tsx
+2 -2
View File
@@ -1075,7 +1075,7 @@ function InitialInfo() {
<>
<div style={{ padding: '12px 14px', background: 'rgba(255,255,255,0.6)', borderRadius: 10, border: '1px solid rgba(99, 102, 241, 0.08)', marginBottom: 4 }}>
<Text style={{ color: '#64748b', fontSize: 13, lineHeight: 1.8 }}>
视频提词已生成，可点击按钮查看并修改后台 Schema 允许编辑的字段。
视频提词已生成，可点击按钮查看/修改
</Text>
</div>
<Space style={{ marginTop: 16, gap: 12, width: '100%' }}>
@@ -1086,7 +1086,7 @@ function InitialInfo() {
style={{ flex: 1, borderRadius: 10, borderColor: 'rgba(99, 102, 241, 0.3)', color: '#6366f1', height: 36, fontWeight: 500, background: 'rgba(99, 102, 241, 0.04)' }}
disabled={step.status !== 'completed' || !taskDetail?.videoGeneration?.promptSchema || !taskDetail?.videoGeneration?.schemaConfigSnapshot}
>
查看视频提词
查看/修改视频提词
</Button>
<Button onClick={() => { message.info('正在生成视频，请稍候...'); createvideo(step.id, step.engineId); }} type="primary" style={{ flex: 1, borderRadius: 10, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', border: 'none', height: 36, fontWeight: 500, boxShadow: '0 4px 12px rgba(99, 102, 241, 0.3)' }} disabled={step.status !== 'completed'}>
下一步：生成视频