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:
sjy
2026-07-02 18:30:46 +08:00
parent 9edaeb4031
commit 488c98617d
3 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
video-gen-app/dist/assets/index-_JKe0xeY.js → video-gen-app/dist/assets/index-DSYTlCRm.js
Vendored
+1 -1
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>
<script type="module" crossorigin src="/assets/index-_JKe0xeY.js"></script> <script type="module" crossorigin src="/assets/index-DSYTlCRm.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Bi8mcSs8.css"> <link rel="stylesheet" crossorigin href="/assets/index-Bi8mcSs8.css">
</head> </head>
<body> <body>
video-gen-app/src/pages/GenerateConver.tsx
+22 -22
View File
@@ -2011,14 +2011,14 @@ const AIChatPage: React.FC = () => {
<div style={{ width: isFirstLastFrameComposer ? 240 : 128, minWidth: isFirstLastFrameComposer ? 240 : 128, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'flex-start', paddingTop: 2 }}> <div style={{ width: isFirstLastFrameComposer ? 240 : 128, minWidth: isFirstLastFrameComposer ? 240 : 128, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'flex-start', paddingTop: 2 }}>
{/* 首尾帧模式 */} {/* 首尾帧模式 */}
{mediaType === 'video' && referenceMode === 'first_last_frame' ? ( {mediaType === 'video' && referenceMode === 'first_last_frame' ? (
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'stretch', gap: 8, width: '100%', height: 76 }}> <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'stretch', gap: 12, width: '100%', height: 100 }}>
{/* 首帧 */} {/* 首帧 */}
<div style={{ position: 'relative', flex: 1, minWidth: 0, height: 76, borderRadius: 12, border: '1px solid #E7EAF0', background: '#ffffff', boxShadow: '0 6px 16px rgba(47, 52, 64, 0.04)', overflow: 'hidden' }}> <div style={{ position: 'relative', flex: 1, minWidth: 0, height: 100, borderRadius: 12, border: '1px solid #E7EAF0', background: '#ffffff', boxShadow: '0 6px 16px rgba(47, 52, 64, 0.04)', overflow: 'hidden' }}>
<div style={{ position: 'absolute', top: 6, left: 8, right: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between', zIndex: 2 }}> <div style={{ position: 'absolute', top: 8, left: 10, right: 10, display: 'flex', alignItems: 'center', justifyContent: 'space-between', zIndex: 2 }}>
<span style={{ fontSize: 10, fontWeight: 600, color: '#8b5cf6', lineHeight: 1 }}>首帧</span> <span style={{ fontSize: 11, fontWeight: 600, color: '#8b5cf6', lineHeight: 1 }}>首帧</span>
</div> </div>
{firstFrame ? ( {firstFrame ? (
<div style={{ position: 'absolute', left: 8, right: 8, bottom: 8, height: 44 }}> <div style={{ position: 'absolute', left: 10, right: 10, bottom: 10, height: 64 }}>
<img <img
src={`${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${firstFrame.url}`} src={`${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${firstFrame.url}`}
alt={firstFrame.name} alt={firstFrame.name}
@@ -2040,12 +2040,12 @@ const AIChatPage: React.FC = () => {
) : ( ) : (
<Upload accept="image/*" showUploadList={false} beforeUpload={(file) => handleUpload(file, 'first')}> <Upload accept="image/*" showUploadList={false} beforeUpload={(file) => handleUpload(file, 'first')}>
<div <div
style={{ position: 'absolute', left: 8, right: 8, bottom: 8, height: 44, borderRadius: 8, border: '1px dashed rgba(139, 92, 246, 0.28)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', transition: 'all 0.25s ease', backgroundColor: 'rgba(139, 92, 246, 0.04)', flexDirection: 'column', gap: 2 }} style={{ position: 'absolute', left: 10, right: 10, bottom: 10, height: 64, borderRadius: 8, border: '1px dashed rgba(139, 92, 246, 0.28)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', transition: 'all 0.25s ease', backgroundColor: 'rgba(139, 92, 246, 0.04)', flexDirection: 'column', gap: 4 }}
onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#a78bfa'; e.currentTarget.style.backgroundColor = 'rgba(139, 92, 246, 0.08)'; }} onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#a78bfa'; e.currentTarget.style.backgroundColor = 'rgba(139, 92, 246, 0.08)'; }}
onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(139, 92, 246, 0.28)'; e.currentTarget.style.backgroundColor = 'rgba(139, 92, 246, 0.04)'; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(139, 92, 246, 0.28)'; e.currentTarget.style.backgroundColor = 'rgba(139, 92, 246, 0.04)'; }}
> >
<PlusOutlined style={{ fontSize: 14, color: '#8b5cf6' }} /> <PlusOutlined style={{ fontSize: 18, color: '#8b5cf6' }} />
<span style={{ fontSize: 10, color: '#8b5cf6', fontWeight: 500 }}>上传首帧</span> <span style={{ fontSize: 12, color: '#8b5cf6', fontWeight: 500 }}>上传首帧</span>
</div> </div>
</Upload> </Upload>
)} )}
@@ -2056,20 +2056,20 @@ const AIChatPage: React.FC = () => {
onClick={handleSwapFrames} onClick={handleSwapFrames}
disabled={!firstFrame || !lastFrame} disabled={!firstFrame || !lastFrame}
title="调换首尾帧" title="调换首尾帧"
style={{ width: 28, height: 28, alignSelf: 'center', borderRadius: 50, border: '1px solid rgba(231, 234, 240, 0.95)', background: firstFrame && lastFrame ? 'linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%)' : '#F3F5F8', cursor: firstFrame && lastFrame ? 'pointer' : 'not-allowed', color: firstFrame && lastFrame ? '#fff' : '#98A2B3', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: firstFrame && lastFrame ? '0 6px 14px rgba(139, 92, 246, 0.24)' : 'none', transition: 'all 0.2s ease', flexShrink: 0 }} style={{ width: 32, height: 32, alignSelf: 'center', borderRadius: 50, border: '1px solid rgba(231, 234, 240, 0.95)', background: firstFrame && lastFrame ? 'linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%)' : '#F3F5F8', cursor: firstFrame && lastFrame ? 'pointer' : 'not-allowed', color: firstFrame && lastFrame ? '#fff' : '#98A2B3', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: firstFrame && lastFrame ? '0 6px 14px rgba(139, 92, 246, 0.24)' : 'none', transition: 'all 0.2s ease', flexShrink: 0 }}
onMouseEnter={(e) => { if (firstFrame && lastFrame) e.currentTarget.style.transform = 'scale(1.06)'; }} onMouseEnter={(e) => { if (firstFrame && lastFrame) e.currentTarget.style.transform = 'scale(1.06)'; }}
onMouseLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
> >
<SwapOutlined style={{ fontSize: 12 }} /> <SwapOutlined style={{ fontSize: 14 }} />
</button> </button>
{/* 尾帧 */} {/* 尾帧 */}
<div style={{ position: 'relative', flex: 1, minWidth: 0, height: 76, borderRadius: 12, border: '1px solid #E7EAF0', background: '#ffffff', boxShadow: '0 6px 16px rgba(47, 52, 64, 0.04)', overflow: 'hidden', opacity: !firstFrame ? 0.5 : 1 }}> <div style={{ position: 'relative', flex: 1, minWidth: 0, height: 100, borderRadius: 12, border: '1px solid #E7EAF0', background: '#ffffff', boxShadow: '0 6px 16px rgba(47, 52, 64, 0.04)', overflow: 'hidden', opacity: !firstFrame ? 0.5 : 1 }}>
<div style={{ position: 'absolute', top: 6, left: 8, right: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between', zIndex: 2 }}> <div style={{ position: 'absolute', top: 8, left: 10, right: 10, display: 'flex', alignItems: 'center', justifyContent: 'space-between', zIndex: 2 }}>
<span style={{ fontSize: 10, fontWeight: 600, color: '#8b5cf6', lineHeight: 1 }}>尾帧</span> <span style={{ fontSize: 11, fontWeight: 600, color: '#8b5cf6', lineHeight: 1 }}>尾帧</span>
</div> </div>
{lastFrame ? ( {lastFrame ? (
<div style={{ position: 'absolute', left: 8, right: 8, bottom: 8, height: 44 }}> <div style={{ position: 'absolute', left: 10, right: 10, bottom: 10, height: 64 }}>
<img <img
src={`${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${lastFrame.url}`} src={`${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${lastFrame.url}`}
alt={lastFrame.name} alt={lastFrame.name}
@@ -2092,20 +2092,20 @@ const AIChatPage: React.FC = () => {
firstFrame ? ( firstFrame ? (
<Upload accept="image/*" showUploadList={false} beforeUpload={(file) => handleUpload(file, 'last')}> <Upload accept="image/*" showUploadList={false} beforeUpload={(file) => handleUpload(file, 'last')}>
<div <div
style={{ position: 'absolute', left: 8, right: 8, bottom: 8, height: 44, borderRadius: 8, border: '1px dashed rgba(139, 92, 246, 0.24)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', transition: 'all 0.25s ease', backgroundColor: 'rgba(139, 92, 246, 0.04)', flexDirection: 'column', gap: 2 }} style={{ position: 'absolute', left: 10, right: 10, bottom: 10, height: 64, borderRadius: 8, border: '1px dashed rgba(139, 92, 246, 0.24)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', transition: 'all 0.25s ease', backgroundColor: 'rgba(139, 92, 246, 0.04)', flexDirection: 'column', gap: 4 }}
onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#a78bfa'; e.currentTarget.style.backgroundColor = 'rgba(139, 92, 246, 0.08)'; }} onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#a78bfa'; e.currentTarget.style.backgroundColor = 'rgba(139, 92, 246, 0.08)'; }}
onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(139, 92, 246, 0.24)'; e.currentTarget.style.backgroundColor = 'rgba(139, 92, 246, 0.04)'; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(139, 92, 246, 0.24)'; e.currentTarget.style.backgroundColor = 'rgba(139, 92, 246, 0.04)'; }}
> >
<PlusOutlined style={{ fontSize: 14, color: '#8b5cf6' }} /> <PlusOutlined style={{ fontSize: 18, color: '#8b5cf6' }} />
<span style={{ fontSize: 10, color: '#8b5cf6', fontWeight: 500 }}>上传尾帧</span> <span style={{ fontSize: 12, color: '#8b5cf6', fontWeight: 500 }}>上传尾帧</span>
</div> </div>
</Upload> </Upload>
) : ( ) : (
<div <div
style={{ position: 'absolute', left: 8, right: 8, bottom: 8, height: 44, borderRadius: 8, border: '1px dashed rgba(226, 232, 240, 0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'not-allowed', backgroundColor: 'rgba(241, 245, 249, 0.5)', flexDirection: 'column', gap: 2 }} style={{ position: 'absolute', left: 10, right: 10, bottom: 10, height: 64, borderRadius: 8, border: '1px dashed rgba(226, 232, 240, 0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'not-allowed', backgroundColor: 'rgba(241, 245, 249, 0.5)', flexDirection: 'column', gap: 4 }}
> >
<PlusOutlined style={{ fontSize: 14, color: '#cbd5e1' }} /> <PlusOutlined style={{ fontSize: 18, color: '#cbd5e1' }} />
<span style={{ fontSize: 10, color: '#94a3b8', fontWeight: 500 }}>请先上传首帧</span> <span style={{ fontSize: 12, color: '#94a3b8', fontWeight: 500 }}>请先上传首帧</span>
</div> </div>
) )
)} )}
@@ -2453,9 +2453,9 @@ const AIChatPage: React.FC = () => {
{/* 底部工具栏 */} {/* 底部工具栏 */}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 14, marginTop: 10, paddingTop: 13, borderTop: '1px solid rgba(231, 234, 240, 0.76)' }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 14, marginTop: 10, paddingTop: 13, borderTop: '1px solid rgba(231, 234, 240, 0.76)' }}>
<Space size={8} wrap style={{ flex: 1, minWidth: 0 }}> <Space size={8} wrap style={{ flex: 1, minWidth: 0 }}>
<span> {/* <span>
创作类型： 创作类型：
</span> </span> */}
{/* 文件类型选择器 */} {/* 文件类型选择器 */}
<Select <Select
className="ai-composer-select" className="ai-composer-select"