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