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

AI创作模块优化样式 V3

Browse Source
This commit is contained in:
GinHa
2026-07-02 15:42:22 +08:00
parent 913c1d4026
commit 0fcc21a2f5
1 changed files with 110 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
video-gen-app/src/pages/GenerateConver.tsx
+110 -129
View File
@@ -1,7 +1,7 @@
import React, { useState, useRef, useEffect, useCallback } from 'react';
// AI 创作对话框样式优化版 v11：白色极简高级风格，统一参考素材与历史附件展示。
// AI 创作对话框样式优化版 v12：白色极简高级风格，选项按钮、标题、头像与关键字统一使用 #8b5cf6。
import {
Layout,
@@ -1276,7 +1276,7 @@ const AIChatPage: React.FC = () => {
style={{
background: 'rgba(255,255,255,0.7)',
backdropFilter: 'blur(16px)',
borderRight: '1px solid rgba(75, 85, 99, 0.08)',
borderRight: '1px solid rgba(139, 92, 246, 0.08)',
}}
>
<div style={{ padding: 12 }}>
@@ -1313,7 +1313,7 @@ const AIChatPage: React.FC = () => {
borderRadius: 10,
cursor: 'pointer',
background: currentConversationId === conversation.id ? '#FAFBFC' : 'transparent',
border: currentConversationId === conversation.id ? '1px solid #e6e1ea' : 'none',
border: currentConversationId === conversation.id ? '1px solid #ede9fe' : 'none',
transition: 'all 0.2s',
}}
onMouseEnter={(e) => {
@@ -1371,7 +1371,7 @@ const AIChatPage: React.FC = () => {
margin: 0,
fontSize: 18,
fontWeight: 700,
color: '#4B5563',
color: '#8b5cf6',
letterSpacing: 0.4,
}}>
AI创作
@@ -1406,7 +1406,7 @@ const AIChatPage: React.FC = () => {
width: 80,
height: 80,
borderRadius: 50,
background: 'linear-gradient(135deg, #4B5563 0%, #D6DAE2 100%)',
background: 'linear-gradient(135deg, #8b5cf6 0%, #ddd6fe 100%)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
@@ -1448,7 +1448,7 @@ const AIChatPage: React.FC = () => {
disabled={isLoadingMore}
style={{
fontSize: 12,
color: '#4B5563',
color: '#8b5cf6',
background: 'none',
border: 'none',
cursor: isLoadingMore ? 'not-allowed' : 'pointer',
@@ -1478,7 +1478,7 @@ const AIChatPage: React.FC = () => {
width: 36,
height: 36,
borderRadius: 12,
background: 'linear-gradient(135deg, #4B5563 0%, #D6DAE2 100%)',
background: 'linear-gradient(135deg, #8b5cf6 0%, #ddd6fe 100%)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
@@ -1513,8 +1513,8 @@ const AIChatPage: React.FC = () => {
<div style={{ margin: 4, fontSize: 11, color: '#98a2b3', textAlign: 'left', display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
<span>{msg.createdAt?.replace('T', ' ').split('.')[0]}</span>
<span style={{
background: msg.genType === 'image' ? 'rgba(46, 125, 103, 0.10)' : 'rgba(167, 111, 61, 0.10)',
color: msg.genType === 'image' ? '#2e7d67' : '#9a6a2f',
background: msg.genType === 'image' ? 'rgba(139, 92, 246, 0.10)' : 'rgba(139, 92, 246, 0.10)',
color: msg.genType === 'image' ? '#8b5cf6' : '#8b5cf6',
padding: '2px 8px',
borderRadius: 12,
fontWeight: 500,
@@ -1527,7 +1527,7 @@ const AIChatPage: React.FC = () => {
{/* 附件详情 - 右上角 */}
{msg.mediaReferences && msg.mediaReferences.length > 0 && (
<div style={{ position: 'absolute', top: 8, right: 8, zIndex: 100 }}>
<span style={{ padding: '4px 12px', borderRadius: 16, color: '#4B5563', cursor: 'pointer', fontWeight: 500, border: '1px solid rgba(75, 85, 99, 0.2)', background: 'rgba(75, 85, 99, 0.04)' }} onClick={(e) => { e.stopPropagation(); const target = e.currentTarget as HTMLElement; const rect = target.getBoundingClientRect(); setAttachmentPopupPosition({ x: rect.left, y: rect.top - 10 }); setAttachmentPopupMessageId(msg.id); setAttachmentPopupVisible(true); }}>附件详情</span>
<span style={{ padding: '4px 12px', borderRadius: 16, color: '#8b5cf6', cursor: 'pointer', fontWeight: 500, border: '1px solid rgba(139, 92, 246, 0.2)', background: 'rgba(139, 92, 246, 0.04)' }} onClick={(e) => { e.stopPropagation(); const target = e.currentTarget as HTMLElement; const rect = target.getBoundingClientRect(); setAttachmentPopupPosition({ x: rect.left, y: rect.top - 10 }); setAttachmentPopupMessageId(msg.id); setAttachmentPopupVisible(true); }}>附件详情</span>
</div>
)}
{/* 操作按钮 - 右下角 */}
@@ -1569,8 +1569,8 @@ const AIChatPage: React.FC = () => {
padding: '0 10px',
borderRadius: 10,
border: 'none',
background: 'rgba(75, 85, 99, 0.08)',
color: '#4B5563',
background: 'rgba(139, 92, 246, 0.08)',
color: '#8b5cf6',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
@@ -1580,10 +1580,10 @@ const AIChatPage: React.FC = () => {
fontSize: 12,
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = 'rgba(75, 85, 99, 0.15)';
e.currentTarget.style.background = 'rgba(139, 92, 246, 0.15)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = 'rgba(75, 85, 99, 0.08)';
e.currentTarget.style.background = 'rgba(139, 92, 246, 0.08)';
}}
>
<ReloadOutlined style={{ fontSize: 12 }} />
@@ -1614,8 +1614,8 @@ const AIChatPage: React.FC = () => {
padding: '0 10px',
borderRadius: 10,
border: 'none',
background: 'rgba(75, 85, 99, 0.08)',
color: '#4B5563',
background: 'rgba(139, 92, 246, 0.08)',
color: '#8b5cf6',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
@@ -1629,8 +1629,8 @@ const AIChatPage: React.FC = () => {
e.currentTarget.style.color = '#A45B5B';
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = 'rgba(75, 85, 99, 0.08)';
e.currentTarget.style.color = '#4B5563';
e.currentTarget.style.background = 'rgba(139, 92, 246, 0.08)';
e.currentTarget.style.color = '#8b5cf6';
}}
>
<DeleteOutlined style={{ fontSize: 12 }} />
@@ -1646,9 +1646,9 @@ const AIChatPage: React.FC = () => {
position: 'relative',
margin: '8px 0',
padding: '12px 16px',
backgroundColor: 'rgba(75, 85, 99, 0.04)',
backgroundColor: 'rgba(139, 92, 246, 0.04)',
borderRadius: 10,
border: '1px solid rgba(75, 85, 99, 0.08)',
border: '1px solid rgba(139, 92, 246, 0.08)',
fontSize: 13,
color: '#475467',
lineHeight: 1.6,
@@ -1699,23 +1699,23 @@ const AIChatPage: React.FC = () => {
<div style={{ display: 'flex', gap: 16, marginBottom: 16, marginTop: 16, width: '100%', alignItems: 'flex-start',
}}>
<div style={{ width: '50%', overflow: 'hidden', borderRadius: 12, position: 'relative', height: 220, border: '1px solid #E7EAF0', boxShadow: '0 4px 12px rgba(75, 85, 99, 0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'linear-gradient(135deg, #ffffff 0%, #FAFBFC 100%)' }}>
<div style={{ width: '50%', overflow: 'hidden', borderRadius: 12, position: 'relative', height: 220, border: '1px solid #E7EAF0', boxShadow: '0 4px 12px rgba(139, 92, 246, 0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'linear-gradient(135deg, #ffffff 0%, #FAFBFC 100%)' }}>
{msg.status === 'generating' ? (
<>
<div style={{ position: 'absolute', top: 12, left: 12, display: 'flex', alignItems: 'center', gap: 8, zIndex: 2 }}>
{/* <div style={{ width: 20, height: 20, border: '2px solid #D9DEE7', borderTopColor: '#4B5563', borderRadius: '50%', animation: 'spin 1s linear infinite' }} /> */}
{/* <div style={{ width: 20, height: 20, border: '2px solid #ddd6fe', borderTopColor: '#8b5cf6', borderRadius: '50%', animation: 'spin 1s linear infinite' }} /> */}
</div>
<div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%)', animation: 'shimmer 2s infinite' }} />
<div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
<div style={{ width: 64, height: 64, borderRadius: '50%', background: 'rgba(75, 85, 99, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 0 30px rgba(75, 85, 99, 0.2)' }}>
<div style={{ width: 48, height: 48, border: '3px solid #D9DEE7', borderTopColor: '#4B5563', borderRadius: '50%', animation: 'spin 1s linear infinite' }} />
<div style={{ width: 64, height: 64, borderRadius: '50%', background: 'rgba(139, 92, 246, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 0 30px rgba(139, 92, 246, 0.2)' }}>
<div style={{ width: 48, height: 48, border: '3px solid #ddd6fe', borderTopColor: '#8b5cf6', borderRadius: '50%', animation: 'spin 1s linear infinite' }} />
</div>
<span style={{ fontSize: 12, color: '#4B5563', fontWeight: 500 }}>生成中...</span>
<span style={{ fontSize: 12, color: '#8b5cf6', fontWeight: 500 }}>生成中...</span>
{/* <div style={{ display: 'flex', gap: 4 }}>
<div style={{ width: 6, height: 6, borderRadius: '50%', background: '#4B5563', animation: 'pulse 1.5s ease-in-out infinite' }} />
<div style={{ width: 6, height: 6, borderRadius: '50%', background: '#8b5cf6', animation: 'pulse 1.5s ease-in-out infinite' }} />
<div style={{ width: 6, height: 6, borderRadius: '50%', background: '#a8a1b6', animation: 'pulse 1.5s ease-in-out 0.2s infinite' }} />
<div style={{ width: 6, height: 6, borderRadius: '50%', background: '#D6DAE2', animation: 'pulse 1.5s ease-in-out 0.4s infinite' }} />
<div style={{ width: 6, height: 6, borderRadius: '50%', background: '#ddd6fe', animation: 'pulse 1.5s ease-in-out 0.4s infinite' }} />
</div> */}
</div>
</>
@@ -1750,15 +1750,15 @@ const AIChatPage: React.FC = () => {
</div>
<div style={{ fontSize: 12, color: '#667085', textAlign: 'left', display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center', justifyContent: 'space-between',marginBottom: 12 }}>
<span style={{
// background: 'rgba(75, 85, 99, 0.08)',
borderRadius: 16, color: '#4B5563', fontWeight: 500 }}>{msg.engineSnapshot.name}</span>
// background: 'rgba(139, 92, 246, 0.08)',
borderRadius: 16, color: '#8b5cf6', fontWeight: 500 }}>{msg.engineSnapshot.name}</span>
<span style={{
// background: 'rgba(75, 85, 99, 0.08)',
// background: 'rgba(139, 92, 246, 0.08)',
borderRadius: 16, color: '#667085' }}>{msg.genType === 'image' ? `${msg.imageProportion || ''} · ${msg.imagePx || ''} · ${msg.imageSize || ''}` : `${msg.duration || ''}s · ${msg.aspectRatio || ''} · ${msg.resolution || ''}`}</span>
<span style={{
// background: 'rgba(164, 91, 91, 0.08)',
fontSize: 14,
borderRadius: 16, color: '#8a5f4a', fontWeight: 620 }}>消耗积分：{msg.creditsCost}</span>
borderRadius: 16, color: '#8b5cf6' }}>消耗积分：{msg.creditsCost}</span>
</div>
@@ -1917,7 +1917,7 @@ const AIChatPage: React.FC = () => {
</div>
</>
)}
<span style={{ position: 'absolute', left: 6, top: 6, padding: '2px 6px', borderRadius: 999, background: 'rgba(255,255,255,0.92)', color: '#4B5563', fontSize: 10, fontWeight: 800, boxShadow: '0 4px 10px rgba(31, 41, 55, 0.08)' }}>
<span style={{ position: 'absolute', left: 6, top: 6, padding: '2px 6px', borderRadius: 999, background: 'rgba(255,255,255,0.92)', color: '#8b5cf6', fontSize: 10, fontWeight: 800, boxShadow: '0 4px 10px rgba(31, 41, 55, 0.08)' }}>
{label}
</span>
</div>
@@ -1939,7 +1939,7 @@ const AIChatPage: React.FC = () => {
borderRadius: 9,
border: '1px solid #E7EAF0',
background: '#F8FAFC',
color: '#4B5563',
color: '#8b5cf6',
fontSize: 11,
fontWeight: 700,
cursor: 'pointer',
@@ -2004,7 +2004,7 @@ const AIChatPage: React.FC = () => {
{/* 首帧 */}
<div style={{ position: 'relative', flex: 1, minWidth: 0, height: 92, borderRadius: 16, border: '1px solid #E7EAF0', background: '#ffffff', boxShadow: '0 8px 20px rgba(47, 52, 64, 0.045)', overflow: 'hidden' }}>
<div style={{ position: 'absolute', top: 8, left: 10, right: 10, display: 'flex', alignItems: 'center', justifyContent: 'space-between', zIndex: 2 }}>
<span style={{ fontSize: 11, fontWeight: 700, color: '#4B5563', lineHeight: 1 }}>首帧</span>
<span style={{ fontSize: 11, fontWeight: 700, color: '#8b5cf6', lineHeight: 1 }}>首帧</span>
<span style={{ fontSize: 10, color: '#98A2B3' }}>必传</span>
</div>
{firstFrame ? (
@@ -2018,7 +2018,7 @@ const AIChatPage: React.FC = () => {
setAttachmentPreviewName(firstFrame.name);
setAttachmentPreviewVisible(true);
}}
style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 10, cursor: 'pointer', border: '1px solid rgba(75, 85, 99, 0.2)', boxShadow: '0 4px 12px rgba(47, 52, 64, 0.08)' }}
style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 10, cursor: 'pointer', border: '1px solid rgba(139, 92, 246, 0.2)', boxShadow: '0 4px 12px rgba(47, 52, 64, 0.08)' }}
/>
<button
onClick={handleRemoveFirstFrame}
@@ -2030,12 +2030,12 @@ const AIChatPage: React.FC = () => {
) : (
<Upload accept="image/*" showUploadList={false} beforeUpload={(file) => handleUpload(file, 'first')}>
<div
style={{ position: 'absolute', left: 10, right: 10, bottom: 10, height: 54, borderRadius: 10, border: '1px dashed rgba(75, 85, 99, 0.28)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', transition: 'all 0.25s ease', backgroundColor: 'rgba(75, 85, 99, 0.04)', flexDirection: 'column', gap: 3 }}
onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#6B7280'; e.currentTarget.style.backgroundColor = 'rgba(75, 85, 99, 0.08)'; }}
onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(75, 85, 99, 0.28)'; e.currentTarget.style.backgroundColor = 'rgba(75, 85, 99, 0.04)'; }}
style={{ position: 'absolute', left: 10, right: 10, bottom: 10, height: 54, borderRadius: 10, 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: 3 }}
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)'; }}
>
<PlusOutlined style={{ fontSize: 16, color: '#4B5563' }} />
<span style={{ fontSize: 11, color: '#4B5563', fontWeight: 600 }}>上传首帧</span>
<PlusOutlined style={{ fontSize: 16, color: '#8b5cf6' }} />
<span style={{ fontSize: 11, color: '#8b5cf6', fontWeight: 600 }}>上传首帧</span>
</div>
</Upload>
)}
@@ -2046,7 +2046,7 @@ const AIChatPage: React.FC = () => {
onClick={handleSwapFrames}
disabled={!firstFrame || !lastFrame}
title="调换首尾帧"
style={{ width: 34, height: 34, alignSelf: 'center', borderRadius: 50, border: '1px solid rgba(231, 234, 240, 0.95)', background: firstFrame && lastFrame ? 'linear-gradient(135deg, #4B5563 0%, #6B7280 100%)' : '#F3F5F8', cursor: firstFrame && lastFrame ? 'pointer' : 'not-allowed', color: firstFrame && lastFrame ? '#fff' : '#98A2B3', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: firstFrame && lastFrame ? '0 8px 18px rgba(75, 85, 99, 0.28)' : 'none', transition: 'all 0.2s ease', flexShrink: 0 }}
style={{ width: 34, height: 34, 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 8px 18px rgba(139, 92, 246, 0.28)' : 'none', transition: 'all 0.2s ease', flexShrink: 0 }}
onMouseEnter={(e) => { if (firstFrame && lastFrame) e.currentTarget.style.transform = 'scale(1.06)'; }}
onMouseLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
>
@@ -2056,7 +2056,7 @@ const AIChatPage: React.FC = () => {
{/* 尾帧 */}
<div style={{ position: 'relative', flex: 1, minWidth: 0, height: 92, borderRadius: 16, border: '1px solid #E7EAF0', background: '#ffffff', boxShadow: '0 8px 20px rgba(47, 52, 64, 0.045)', overflow: 'hidden' }}>
<div style={{ position: 'absolute', top: 8, left: 10, right: 10, display: 'flex', alignItems: 'center', justifyContent: 'space-between', zIndex: 2 }}>
<span style={{ fontSize: 11, fontWeight: 700, color: '#4B5563', lineHeight: 1 }}>尾帧</span>
<span style={{ fontSize: 11, fontWeight: 700, color: '#8b5cf6', lineHeight: 1 }}>尾帧</span>
<span style={{ fontSize: 10, color: '#98A2B3' }}>可选</span>
</div>
{lastFrame ? (
@@ -2070,7 +2070,7 @@ const AIChatPage: React.FC = () => {
setAttachmentPreviewName(lastFrame.name);
setAttachmentPreviewVisible(true);
}}
style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 10, cursor: 'pointer', border: '1px solid rgba(75, 85, 99, 0.2)', boxShadow: '0 4px 12px rgba(47, 52, 64, 0.08)' }}
style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 10, cursor: 'pointer', border: '1px solid rgba(139, 92, 246, 0.2)', boxShadow: '0 4px 12px rgba(47, 52, 64, 0.08)' }}
/>
<button
onClick={handleRemoveLastFrame}
@@ -2082,12 +2082,12 @@ const AIChatPage: React.FC = () => {
) : (
<Upload accept="image/*" showUploadList={false} beforeUpload={(file) => handleUpload(file, 'last')}>
<div
style={{ position: 'absolute', left: 10, right: 10, bottom: 10, height: 54, borderRadius: 10, border: '1px dashed rgba(75, 85, 99, 0.24)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', transition: 'all 0.25s ease', backgroundColor: 'rgba(75, 85, 99, 0.04)', flexDirection: 'column', gap: 3 }}
onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#6B7280'; e.currentTarget.style.backgroundColor = 'rgba(75, 85, 99, 0.08)'; }}
onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(75, 85, 99, 0.24)'; e.currentTarget.style.backgroundColor = 'rgba(75, 85, 99, 0.04)'; }}
style={{ position: 'absolute', left: 10, right: 10, bottom: 10, height: 54, borderRadius: 10, 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: 3 }}
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)'; }}
>
<PlusOutlined style={{ fontSize: 16, color: '#4B5563' }} />
<span style={{ fontSize: 11, color: '#4B5563', fontWeight: 600 }}>上传尾帧</span>
<PlusOutlined style={{ fontSize: 16, color: '#8b5cf6' }} />
<span style={{ fontSize: 11, color: '#8b5cf6', fontWeight: 600 }}>上传尾帧</span>
</div>
</Upload>
)}
@@ -2173,7 +2173,7 @@ const AIChatPage: React.FC = () => {
);
})}
{currentMedia.length > 4 && (
<div style={{ position: 'absolute', right: -8, bottom: -4, zIndex: 10, background: '#4B5563', color: '#fff', fontSize: 10, fontWeight: 700, padding: '2px 7px', borderRadius: 999, boxShadow: '0 6px 14px rgba(31, 41, 55, 0.18)' }}>
<div style={{ position: 'absolute', right: -8, bottom: -4, zIndex: 10, background: '#8b5cf6', color: '#fff', fontSize: 10, fontWeight: 700, padding: '2px 7px', borderRadius: 999, boxShadow: '0 6px 14px rgba(31, 41, 55, 0.18)' }}>
+{currentMedia.length - 4}
</div>
)}
@@ -2409,8 +2409,8 @@ const AIChatPage: React.FC = () => {
transition: 'all 0.15s',
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = 'rgba(75, 85, 99, 0.08)';
e.currentTarget.style.color = '#4B5563';
e.currentTarget.style.background = 'rgba(139, 92, 246, 0.08)';
e.currentTarget.style.color = '#8b5cf6';
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = 'transparent';
@@ -2418,9 +2418,9 @@ const AIChatPage: React.FC = () => {
}}
>
{media.type === 'image' ? (
<PictureOutlined style={{ fontSize: 14, color: '#4B5563' }} />
<PictureOutlined style={{ fontSize: 14, color: '#8b5cf6' }} />
) : (
<VideoCameraOutlined style={{ fontSize: 14, color: '#4B5563' }} />
<VideoCameraOutlined style={{ fontSize: 14, color: '#8b5cf6' }} />
)}
<span>{media.label}</span>
</div>
@@ -2451,11 +2451,11 @@ const AIChatPage: React.FC = () => {
size="middle"
>
<Option value="video">
<VideoCameraOutlined style={{ marginRight: 6, fontSize: 14, color: '#4B5563' }} />
<VideoCameraOutlined style={{ marginRight: 6, fontSize: 14, color: '#8b5cf6' }} />
<span style={{ fontSize: 13, fontWeight: 650, color: '#475467' }}>视频生成</span>
</Option>
<Option value="image">
<PictureOutlined style={{ marginRight: 6, fontSize: 14, color: '#4B5563' }} />
<PictureOutlined style={{ marginRight: 6, fontSize: 14, color: '#8b5cf6' }} />
<span style={{ fontSize: 13, fontWeight: 650, color: '#475467' }}>图片生成</span>
</Option>
</Select>
@@ -2490,7 +2490,7 @@ const AIChatPage: React.FC = () => {
e.currentTarget.style.boxShadow = '0 1px 2px rgba(47, 52, 64, 0.03)';
}}
>
<SettingOutlined style={{ fontSize: 14, color: '#4B5563' }} />
<SettingOutlined style={{ fontSize: 14, color: '#8b5cf6' }} />
<Text style={{
fontSize: 13,
fontWeight: 500,
@@ -2498,7 +2498,7 @@ const AIChatPage: React.FC = () => {
}}>
{mediaType === 'image' ? enginesele.image?.find((e: any) => e.id === countType)?.name : enginesele.video?.find((e: any) => e.id === countType)?.name || '选择引擎'}
</Text>
<CaretDownOutlined style={{ fontSize: 10, color: '#4B5563', marginLeft: 'auto' }} />
<CaretDownOutlined style={{ fontSize: 10, color: '#8b5cf6', marginLeft: 'auto' }} />
</button>
{showEngineModal && (
@@ -2565,10 +2565,10 @@ const AIChatPage: React.FC = () => {
minHeight: 48,
borderRadius: 10,
border: countType === engine.id
? '1px solid #4B5563'
? '1px solid #8b5cf6'
: '1px solid #E7EAF0',
backgroundColor: countType === engine.id
? '#F6F7FA'
? '#f5f3ff'
: '#ffffff',
cursor: 'pointer',
display: 'flex',
@@ -2583,7 +2583,7 @@ const AIChatPage: React.FC = () => {
<span style={{
fontSize: 13,
fontWeight: countType === engine.id ? 600 : 500,
color: countType === engine.id ? '#4B5563' : '#475467',
color: countType === engine.id ? '#8b5cf6' : '#475467',
marginBottom: 2,
}}>
{engine.name}
@@ -2632,7 +2632,7 @@ const AIChatPage: React.FC = () => {
e.currentTarget.style.boxShadow = '0 1px 2px rgba(47, 52, 64, 0.03)';
}}
>
<PictureOutlined style={{ fontSize: 14, color: '#4B5563' }} />
<PictureOutlined style={{ fontSize: 14, color: '#8b5cf6' }} />
<Text style={{
fontSize: 13,
fontWeight: 500,
@@ -2640,7 +2640,7 @@ const AIChatPage: React.FC = () => {
}}>
{referenceMode === 'universal' ? '全能参考' : '首尾帧'}
</Text>
<CaretDownOutlined style={{ fontSize: 10, color: '#4B5563', marginLeft: 'auto' }} />
<CaretDownOutlined style={{ fontSize: 10, color: '#8b5cf6', marginLeft: 'auto' }} />
</button>
{referenceModeDropdownVisible && (
@@ -2681,10 +2681,10 @@ const AIChatPage: React.FC = () => {
padding: '10px 14px',
borderRadius: 10,
border: referenceMode === 'universal'
? '1px solid rgba(75, 85, 99, 0.3)'
? '1px solid rgba(139, 92, 246, 0.3)'
: '1px solid transparent',
backgroundColor: referenceMode === 'universal'
? 'rgba(75, 85, 99, 0.08)'
? 'rgba(139, 92, 246, 0.08)'
: 'transparent',
cursor: supportsUniversalReference ? 'pointer' : 'not-allowed',
display: 'flex',
@@ -2696,7 +2696,7 @@ const AIChatPage: React.FC = () => {
}}
onMouseEnter={(e) => {
if (supportsUniversalReference && referenceMode !== 'universal') {
e.currentTarget.style.backgroundColor = 'rgba(75, 85, 99, 0.04)';
e.currentTarget.style.backgroundColor = 'rgba(139, 92, 246, 0.04)';
}
}}
onMouseLeave={(e) => {
@@ -2705,11 +2705,11 @@ const AIChatPage: React.FC = () => {
}
}}
>
<PictureOutlined style={{ fontSize: 14, color: '#4B5563' }} />
<PictureOutlined style={{ fontSize: 14, color: '#8b5cf6' }} />
<span style={{
fontSize: 13,
fontWeight: referenceMode === 'universal' ? 600 : 500,
color: referenceMode === 'universal' ? '#4B5563' : '#475467',
color: referenceMode === 'universal' ? '#8b5cf6' : '#475467',
flex: 1,
}}>
全能参考
@@ -2726,10 +2726,10 @@ const AIChatPage: React.FC = () => {
padding: '10px 14px',
borderRadius: 10,
border: referenceMode === 'first_last_frame'
? '1px solid rgba(75, 85, 99, 0.3)'
? '1px solid rgba(139, 92, 246, 0.3)'
: '1px solid transparent',
backgroundColor: referenceMode === 'first_last_frame'
? 'rgba(75, 85, 99, 0.08)'
? 'rgba(139, 92, 246, 0.08)'
: 'transparent',
cursor: supportsFirstLastFrame ? 'pointer' : 'not-allowed',
display: 'flex',
@@ -2741,7 +2741,7 @@ const AIChatPage: React.FC = () => {
}}
onMouseEnter={(e) => {
if (supportsFirstLastFrame && referenceMode !== 'first_last_frame') {
e.currentTarget.style.backgroundColor = 'rgba(75, 85, 99, 0.04)';
e.currentTarget.style.backgroundColor = 'rgba(139, 92, 246, 0.04)';
}
}}
onMouseLeave={(e) => {
@@ -2750,11 +2750,11 @@ const AIChatPage: React.FC = () => {
}
}}
>
<SwapOutlined style={{ fontSize: 14, color: '#4B5563' }} />
<SwapOutlined style={{ fontSize: 14, color: '#8b5cf6' }} />
<span style={{
fontSize: 13,
fontWeight: referenceMode === 'first_last_frame' ? 600 : 500,
color: referenceMode === 'first_last_frame' ? '#4B5563' : '#475467',
color: referenceMode === 'first_last_frame' ? '#8b5cf6' : '#475467',
flex: 1,
}}>
首尾帧
@@ -2800,7 +2800,7 @@ const AIChatPage: React.FC = () => {
e.currentTarget.style.boxShadow = '0 1px 2px rgba(47, 52, 64, 0.03)';
}}
>
<LayoutOutlined style={{ fontSize: 14, color: '#4B5563' }} />
<LayoutOutlined style={{ fontSize: 14, color: '#8b5cf6' }} />
<Text style={{
fontSize: 13,
fontWeight: 500,
@@ -2808,7 +2808,7 @@ const AIChatPage: React.FC = () => {
}}>
{selectedRatio === 'auto' ? '智能' : selectedRatio} · {selectedResolution == '2K' ? '2K高清' : '4K超清'} · {width}×{height}
</Text>
<CaretDownOutlined style={{ fontSize: 10, color: '#4B5563', marginLeft: 'auto' }} />
<CaretDownOutlined style={{ fontSize: 10, color: '#8b5cf6', marginLeft: 'auto' }} />
</button>
{showImageSettingsModal && (
@@ -2858,10 +2858,10 @@ const AIChatPage: React.FC = () => {
height: 52,
borderRadius: 6,
border: selectedRatio === item.value
? '2px solid #4B5563'
? '2px solid #8b5cf6'
: '1px solid #E7EAF0',
backgroundColor: selectedRatio === item.value
? '#fff'
? '#f5f3ff'
: '#FFFFFF',
cursor: 'pointer',
display: 'flex',
@@ -2884,7 +2884,7 @@ const AIChatPage: React.FC = () => {
if (h >= w) return maxSize;
return Math.round(maxSize * (h / w));
})(),
border: `2px solid ${selectedRatio === item.value ? '#4B5563' : '#98a2b3'}`,
border: `2px solid ${selectedRatio === item.value ? '#8b5cf6' : '#98a2b3'}`,
borderRadius: 2,
marginBottom: 2,
display: 'flex',
@@ -2895,7 +2895,7 @@ const AIChatPage: React.FC = () => {
<span style={{
fontSize: 7,
color: selectedRatio === item.value
? '#4B5563'
? '#8b5cf6'
: '#98a2b3',
}}>
智
@@ -2905,7 +2905,7 @@ const AIChatPage: React.FC = () => {
<span style={{
fontSize: 9,
color: selectedRatio === item.value
? '#4B5563'
? '#8b5cf6'
: '#667085',
fontWeight: selectedRatio === item.value ? 600 : 400,
}}>
@@ -2940,10 +2940,10 @@ const AIChatPage: React.FC = () => {
height: 42,
borderRadius: 6,
border: selectedResolution === item.value
? '2px solid #4B5563'
? '2px solid #8b5cf6'
: '1px solid #E7EAF0',
backgroundColor: selectedResolution === item.value
? '#4B5563'
? '#8b5cf6'
: '#FFFFFF',
cursor: 'pointer',
display: 'flex',
@@ -3027,7 +3027,7 @@ const AIChatPage: React.FC = () => {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
color: '#4B5563',
color: '#8b5cf6',
}}
>
<SwapOutlined style={{ fontSize: 10 }} />
@@ -3157,10 +3157,10 @@ const AIChatPage: React.FC = () => {
height: 52,
borderRadius: 6,
border: videoAspectRatio === ratio
? '2px solid #4B5563'
? '2px solid #8b5cf6'
: '1px solid #E7EAF0',
backgroundColor: videoAspectRatio === ratio
? '#fff'
? '#f5f3ff'
: '#FFFFFF',
cursor: 'pointer',
display: 'flex',
@@ -3183,14 +3183,14 @@ const AIChatPage: React.FC = () => {
if (h >= w) return maxSize;
return Math.round(maxSize * (h / w));
})(),
border: `2px solid ${videoAspectRatio === ratio ? '#4B5563' : '#98a2b3'}`,
border: `2px solid ${videoAspectRatio === ratio ? '#8b5cf6' : '#98a2b3'}`,
borderRadius: 2,
marginBottom: 2,
}} />
<span style={{
fontSize: 9,
color: videoAspectRatio === ratio
? '#4B5563'
? '#8b5cf6'
: '#667085',
fontWeight: videoAspectRatio === ratio ? 600 : 400,
}}>
@@ -3232,7 +3232,7 @@ const AIChatPage: React.FC = () => {
left: 0,
height: 6,
borderRadius: 3,
background: '#4B5563',
background: '#8b5cf6',
width: `${((videoDuration - Math.min(...engineOptions.durations)) / (Math.max(...engineOptions.durations) - Math.min(...engineOptions.durations))) * 100}%`,
transform: 'translateY(-50%)',
}} />
@@ -3294,10 +3294,10 @@ const AIChatPage: React.FC = () => {
height: 42,
borderRadius: 6,
border: videoResolution === resolution
? '2px solid #4B5563'
? '2px solid #8b5cf6'
: '1px solid #E7EAF0',
backgroundColor: videoResolution === resolution
? '#4B5563'
? '#8b5cf6'
: '#FFFFFF',
cursor: 'pointer',
display: 'flex',
@@ -3323,31 +3323,6 @@ const AIChatPage: React.FC = () => {
)}
</div>
)}
<button
type="button"
onClick={() => {
setInputValue(`${inputValue}@`);
setMentionVisible(currentMedia.length > 0 && referenceMode === 'universal');
setTimeout(() => mentionInputRef.current?.focus?.(), 0);
}}
style={{
width: 32,
height: 32,
borderRadius: 11,
border: '1px solid #E7EAF0',
background: '#ffffff',
color: '#2f3440',
fontSize: 16,
fontWeight: 700,
cursor: 'pointer',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
boxShadow: '0 1px 2px rgba(47, 52, 64, 0.025)',
}}
>
@
</button>
</Space>
<div style={{ display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0 }}>
@@ -3368,11 +3343,11 @@ const AIChatPage: React.FC = () => {
height: 36,
borderRadius: '50%',
background: composerCanSend
? 'linear-gradient(135deg, #4B5563 0%, #6B7280 100%)'
? 'linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%)'
: '#E7EAF0',
color: '#ffffff',
opacity: composerCanSend ? 1 : 0.86,
boxShadow: composerCanSend ? '0 10px 24px rgba(75, 85, 99, 0.28)' : 'inset 0 0 0 1px rgba(75, 85, 99, 0.18)',
boxShadow: composerCanSend ? '0 10px 24px rgba(139, 92, 246, 0.28)' : 'inset 0 0 0 1px rgba(139, 92, 246, 0.18)',
cursor: composerCanSend ? 'pointer' : 'not-allowed',
transition: 'all 0.2s ease',
border: 'none',
@@ -3386,6 +3361,12 @@ const AIChatPage: React.FC = () => {
{/* 自定义CSS动画 - 加载中闪烁效果 */}
<style>{`
.ai-create-page {
--ai-accent: #8b5cf6;
--ai-accent-soft: #f5f3ff;
--ai-accent-mid: #a78bfa;
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0.3; }
@@ -3400,7 +3381,7 @@ const AIChatPage: React.FC = () => {
width: 8px;
}
.ai-create-scroll::-webkit-scrollbar-thumb {
background: rgba(75, 85, 99, 0.32);
background: rgba(139, 92, 246, 0.32);
border-radius: 999px;
}
.ai-create-scroll::-webkit-scrollbar-track {
@@ -3433,8 +3414,8 @@ const AIChatPage: React.FC = () => {
}
.ant-select-dropdown .ant-select-item-option-active,
.ant-select-dropdown .ant-select-item-option-selected {
background: #f5f3f8 !important;
color: #344054 !important;
background: #f5f3ff !important;
color: #8b5cf6 !important;
}
.image-settings-popover {
animation: composerPopoverIn 0.16s ease-out;
@@ -3450,8 +3431,8 @@ const AIChatPage: React.FC = () => {
open={previewVisible}
title={
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<div style={{ width: 4, height: 20, background: 'linear-gradient(180deg, #4B5563 0%, #D6DAE2 100%)', borderRadius: 2 }} />
<span style={{ fontSize: 16, fontWeight: 700, color: '#4B5563', letterSpacing: 0.4 }}>
<div style={{ width: 4, height: 20, background: 'linear-gradient(180deg, #8b5cf6 0%, #ddd6fe 100%)', borderRadius: 2 }} />
<span style={{ fontSize: 16, fontWeight: 700, color: '#8b5cf6', letterSpacing: 0.4 }}>
预览
</span>
</div>
@@ -3459,12 +3440,12 @@ const AIChatPage: React.FC = () => {
onCancel={handleClosePreview}
width={800}
footer={
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12, padding: '16px 24px', background: 'rgba(255,255,255,0.6)', borderTop: '1px solid rgba(75, 85, 99, 0.08)' }}>
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12, padding: '16px 24px', background: 'rgba(255,255,255,0.6)', borderTop: '1px solid rgba(139, 92, 246, 0.08)' }}>
<Button
type="primary"
icon={<DownloadOutlined />}
onClick={handleDownload}
style={{ borderRadius: 10, background: 'linear-gradient(135deg, #4B5563 0%, #D6DAE2 100%)', border: 'none', boxShadow: '0 8px 18px rgba(47, 52, 64, 0.15)' }}
style={{ borderRadius: 10, background: 'linear-gradient(135deg, #8b5cf6 0%, #ddd6fe 100%)', border: 'none', boxShadow: '0 8px 18px rgba(47, 52, 64, 0.15)' }}
disabled={isMediaExpired(previewUrl)}
>
{isMediaExpired(previewUrl) ? '资源已过期' : '下载'}
@@ -3480,7 +3461,7 @@ const AIChatPage: React.FC = () => {
justifyContent: 'center',
minHeight: '400px',
},
header: { background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(10px)', borderBottom: '1px solid rgba(75, 85, 99, 0.08)', padding: '16px 24px' },
header: { background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(10px)', borderBottom: '1px solid rgba(139, 92, 246, 0.08)', padding: '16px 24px' },
}}
>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}>
@@ -3510,8 +3491,8 @@ const AIChatPage: React.FC = () => {
open={attachmentPreviewVisible}
title={
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<div style={{ width: 4, height: 20, background: 'linear-gradient(180deg, #4B5563 0%, #D6DAE2 100%)', borderRadius: 2 }} />
<span style={{ fontSize: 16, fontWeight: 700, color: '#4B5563', letterSpacing: 0.4 }}>
<div style={{ width: 4, height: 20, background: 'linear-gradient(180deg, #8b5cf6 0%, #ddd6fe 100%)', borderRadius: 2 }} />
<span style={{ fontSize: 16, fontWeight: 700, color: '#8b5cf6', letterSpacing: 0.4 }}>
附件预览
</span>
</div>
@@ -3537,7 +3518,7 @@ const AIChatPage: React.FC = () => {
}}
width={800}
footer={
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12, padding: '16px 24px', background: 'rgba(255,255,255,0.6)', borderTop: '1px solid rgba(75, 85, 99, 0.08)' }}>
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12, padding: '16px 24px', background: 'rgba(255,255,255,0.6)', borderTop: '1px solid rgba(139, 92, 246, 0.08)' }}>
<Button
type="primary"
icon={<DownloadOutlined />}
@@ -3550,7 +3531,7 @@ const AIChatPage: React.FC = () => {
link.click();
document.body.removeChild(link);
}}
style={{ borderRadius: 10, background: 'linear-gradient(135deg, #4B5563 0%, #D6DAE2 100%)', border: 'none', boxShadow: '0 8px 18px rgba(47, 52, 64, 0.15)' }}
style={{ borderRadius: 10, background: 'linear-gradient(135deg, #8b5cf6 0%, #ddd6fe 100%)', border: 'none', boxShadow: '0 8px 18px rgba(47, 52, 64, 0.15)' }}
>
下载
</Button>
@@ -3565,7 +3546,7 @@ const AIChatPage: React.FC = () => {
justifyContent: 'center',
minHeight: '400px',
},
header: { background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(10px)', borderBottom: '1px solid rgba(75, 85, 99, 0.08)', padding: '16px 24px' },
header: { background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(10px)', borderBottom: '1px solid rgba(139, 92, 246, 0.08)', padding: '16px 24px' },
}}
>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}>