AI创作模块优化样式 V3
This commit is contained in:
@@ -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%' }}>
|
||||
|
||||
Reference in New Issue
Block a user