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

样式优化

Browse Source
This commit is contained in:
sjy
2026-07-17 18:02:39 +08:00
parent bba29d79a2
commit 519c1e58b9
10 changed files with 238 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
video-gen-app/dist/assets/index-DYI2idb2.js → video-gen-app/dist/assets/index-BSJnUCPX.js
Vendored
+65 -9
View File
File diff suppressed because one or more lines are too long
video-gen-app/dist/index.html
Vendored
+1 -1
View File
@@ -28,7 +28,7 @@
}
})();
</script>
<script type="module" crossorigin src="/assets/index-DYI2idb2.js"></script>
<script type="module" crossorigin src="/assets/index-BSJnUCPX.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-CKeRPhR_.css">
</head>
<body>
video-gen-app/src/components/Layout/AppLayout.tsx
+10 -5
View File
@@ -66,6 +66,8 @@ import { useAuthStore } from '../../store/useAuthStore';
import { getMenuConfigs, getRechargePackages, getPaymentMethods, createRechargeOrder, getPaymentOrder, cancelPaymentOrder, getSiteInfo, getUnreadCount, createContactRequest, getUser, changePassword, changeUsername } from '../../api';
import NotificationPopup from '../NotificationPopup';
import './AppLayout.css';
import bg1 from '../../assets/bg1.png';
// ── ResourceCapacity 类型（与 src/types/index.ts 保持一致） ──
type ResourceCapacityData = {
@@ -186,7 +188,7 @@ const StorageCard: React.FC<{ data: ResourceCapacityData | null }> = ({ data })
}}>
<span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
<DatabaseOutlined style={{ fontSize: 12, color: isOver ? '#000000ff' :'#000000ff' }} />
<DatabaseOutlined style={{ fontSize: 12, color: isOver ? '#000000ff' : '#000000ff' }} />
{rawPercent.toFixed(1)}%
</span>
{data.enabled ? (
@@ -829,7 +831,10 @@ const AppLayout: React.FC = () => {
};
return (
<Layout style={{ minHeight: '100vh' }}>
<Layout style={{
minHeight: '100vh',
}}>
<div className="desktop-sidebar" style={{
width: sidebarW, position: 'fixed', left: 16, top: 16, bottom: 16, zIndex: 100,
background: 'linear-gradient(180deg, #ffffff 0%, #f8fafc 100%)',
@@ -1063,7 +1068,7 @@ const AppLayout: React.FC = () => {
<div style={{
boxSizing: 'border-box',
height: '100%',
background: '#ffffffff',
background: '#f1f2f3',
borderRadius: '20px',
boxShadow: '0 4px 32px rgba(0, 0, 0, 0.06), 0 1px 8px rgba(0, 0, 0, 0.04)',
minHeight: '100%',
@@ -1307,7 +1312,7 @@ const AppLayout: React.FC = () => {
footer={null}>
<Tabs defaultActiveKey="profile">
<Tabs.TabPane tab="个人信息" key="profile">
<Form form={usernameForm} layout="vertical" style={{ marginTop: 20 }} onValuesChange={() => {}}>
<Form form={usernameForm} layout="vertical" style={{ marginTop: 20 }} onValuesChange={() => { }}>
<Form.Item name="username" label="用户名" rules={[{ required: true, message: '请输入用户名' }, { min: 3, message: '用户名至少3位' }]}>
<Input placeholder="请输入用户名" size="large" prefix={<UserOutlined style={{ color: '#94a3b8', marginRight: 8 }} />} />
</Form.Item>
@@ -1317,7 +1322,7 @@ const AppLayout: React.FC = () => {
</Form>
</Tabs.TabPane>
<Tabs.TabPane tab="修改密码" key="password">
<Form form={pwdForm} layout="vertical" style={{ marginTop: 20 }} onValuesChange={() => {}}>
<Form form={pwdForm} layout="vertical" style={{ marginTop: 20 }} onValuesChange={() => { }}>
<Form.Item name="oldPwd" label="原密码" rules={[{ required: true, message: '请输入原密码' }]}>
<Input.Password placeholder="请输入原密码" size="large" prefix={<LockOutlined style={{ color: '#94a3b8', marginRight: 8 }} />} />
</Form.Item>
video-gen-app/src/components/generation/GenerationTaskResourceGrid.tsx
+69 -2
View File
@@ -65,8 +65,9 @@ const PROGRESS_RATE = 0.6;
const calculateProgressValue = (createdAt?: string): number => {
if (!createdAt) return 0;
const createdTime = new Date(createdAt).getTime();
if (isNaN(createdTime)) return 0;
const now = Date.now();
const elapsedSeconds = (now - createdTime) / 1000;
const elapsedSeconds = Math.max(0, (now - createdTime) / 1000);
if (elapsedSeconds >= MAX_DURATION_SECONDS) {
return 99;
}
@@ -189,6 +190,71 @@ const GenerationTaskResourceGrid: React.FC<Props> = ({ task, onPreview, resolveU
const [fullProgressItems, setFullProgressItems] = useState<Set<string>>(new Set());
const processedItems = useRef<Set<string>>(new Set());
useEffect(() => {
const styleId = 'gen-task-resource-grid-animations';
if (document.getElementById(styleId)) return;
const style = document.createElement('style');
style.id = styleId;
style.textContent = `
.gen-task-loading-bg {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #faf8ff 0%, #f5f3ff 100%);
}
.gen-task-loading-bg::before,
.gen-task-loading-bg::after,
.gen-task-loading-bg .gen-task-aurora-3 {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(30px);
pointer-events: none;
z-index: 0;
}
.gen-task-loading-bg::before {
width: 220px;
height: 220px;
background: radial-gradient(circle, rgba(139, 92, 246, 0.45) 0%, rgba(168, 85, 247, 0.25) 50%, transparent 100%);
animation: genTaskAurora1 6s linear infinite;
}
.gen-task-loading-bg::after {
width: 240px;
height: 240px;
background: radial-gradient(circle, rgba(168, 85, 247, 0.35) 0%, rgba(192, 132, 252, 0.2) 50%, transparent 100%);
animation: genTaskAurora2 7.5s linear infinite;
}
.gen-task-loading-bg .gen-task-aurora-3 {
width: 180px;
height: 180px;
background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, rgba(139, 92, 246, 0.15) 50%, transparent 100%);
animation: genTaskAurora3 5s linear infinite;
}
.gen-task-loading-bg > * { position: relative; z-index: 1; }
@keyframes genTaskAurora1 {
0% { transform: translate(-100px, -80px); }
25% { transform: translate(100px, -60px); }
50% { transform: translate(120px, 80px); }
75% { transform: translate(-60px, 100px); }
100% { transform: translate(-100px, -80px); }
}
@keyframes genTaskAurora2 {
0% { transform: translate(120px, 100px); }
25% { transform: translate(-80px, 120px); }
50% { transform: translate(-100px, -60px); }
75% { transform: translate(80px, -80px); }
100% { transform: translate(120px, 100px); }
}
@keyframes genTaskAurora3 {
0% { transform: translate(60px, -40px); }
25% { transform: translate(-40px, 60px); }
50% { transform: translate(40px, 100px); }
75% { transform: translate(100px, -20px); }
100% { transform: translate(60px, -40px); }
}
`;
document.head.appendChild(style);
}, []);
const handleProgressChange = (itemId: string, progress: number) => {
if (progress >= 100) {
setFullProgressItems(prev => {
@@ -271,7 +337,8 @@ const GenerationTaskResourceGrid: React.FC<Props> = ({ task, onPreview, resolveU
{isVideo ? <PlayCircleFilled style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', fontSize: items.length > 2 ? 28 : 46, color: 'rgba(255,255,255,.92)', filter: 'drop-shadow(0 4px 10px rgba(0,0,0,.28))' }} /> : null}
</button>
) : (
<div style={{ width: '100%', height: '100%', minHeight: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 7, padding: 8, textAlign: 'center' }}>
<div className={pending || isFinishing ? 'gen-task-loading-bg' : ''} style={{ width: '100%', height: '100%', minHeight: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 7, padding: 8, textAlign: 'center' }}>
{pending || isFinishing ? <span className="gen-task-aurora-3" /> : null}
{pending || isFinishing ? <LoadingOutlined spin style={{ color: '#8b5cf6', fontSize: items.length > 2 ? 20 : 34 }} /> : <WarningOutlined style={{ color: displayStatus === 'deleted' ? '#98A2B3' : '#A45B5B', fontSize: items.length > 2 ? 20 : 34 }} />}
<span style={{ fontSize: items.length > 2 ? 10 : 12, color: pending || isFinishing ? '#8b5cf6' : (displayStatus === 'deleted' ? '#98A2B3' : '#A45B5B'), fontWeight: 500 }}>{statusLabel}</span>
<ProgressItem item={item} isPending={pending || isFinishing} isCompleted={completed} onAnimationComplete={() => handleFinishAnimation(itemId)} onProgressChange={(progress) => handleProgressChange(itemId, progress)} />
video-gen-app/src/pages/GenerateConver.tsx
+19 -90
View File
@@ -2023,9 +2023,11 @@ const AIChatPage: React.FC = () => {
margin: '-24px -32px -32px',
borderRadius: 22,
height: 'calc(100vh - 34px)',
background: '#fff',
background: 'rgba(255, 255, 255, 0.52)',
overflow: 'hidden',
}}>
{/* 隐藏的音频播放器 */}
<audio
@@ -2035,95 +2037,18 @@ const AIChatPage: React.FC = () => {
onEnded={() => setPlayingAudioUrl(null)}
style={{ display: 'none' }}
/>
{/* 左侧边栏 - 对话列表（已隐藏，保留代码） */}
{false && (
<Sider
trigger={null}
collapsible
collapsed={collapsed}
width={220}
style={{
background: 'rgba(255,255,255,0.7)',
backdropFilter: 'blur(16px)',
borderRight: '1px solid rgba(139, 92, 246, 0.08)',
}}
>
<div style={{ padding: 12 }}>
<Button
type="text"
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
onClick={() => setCollapsed(!collapsed)}
style={{ marginBottom: 12, width: '100%' }}
/>
{!collapsed && (
<Button
block
type="primary"
icon={<PlusOutlined />}
onClick={handleNewChat}
style={{ marginBottom: 16, borderRadius: 8 }}
>
新对话
</Button>
)}
{!collapsed && conversations.length > 0 && (
<div style={{ maxHeight: 'calc(100vh - 120px)', overflowY: 'auto' }}>
{conversations.map((conversation) => (
<div
key={conversation.id}
onClick={() => handleSelectChat(conversation.id)}
style={{
display: 'flex',
alignItems: 'center',
padding: '10px 12px',
marginBottom: 4,
borderRadius: 10,
cursor: 'pointer',
background: currentConversationId === conversation.id ? '#FAFBFC' : 'transparent',
border: currentConversationId === conversation.id ? '1px solid #ede9fe' : 'none',
transition: 'all 0.2s',
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = currentConversationId === conversation.id ? '#FAFBFC' : '#FFFFFF';
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = currentConversationId === conversation.id ? '#FAFBFC' : 'transparent';
}}
>
<div style={{ flex: 1, minWidth: 0 }}>
<p style={{ margin: 0, fontSize: 13, fontWeight: 500, color: '#2f3440', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{conversation.title}
</p>
<p style={{ margin: 2, fontSize: 11, color: '#98a2b3', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{conversation.lastMessage || '暂无消息'}
</p>
</div>
<Popconfirm
title="确定删除此对话？"
onConfirm={() => handleDeleteChat(conversation.id)}
okText="确定"
cancelText="取消"
>
<Button
type="text"
icon={<DeleteOutlined />}
style={{ color: '#98a2b3', padding: 4 }}
onClick={(e) => e.stopPropagation()}
/>
</Popconfirm>
</div>
))}
</div>
)}
</div>
</Sider>
)}
{/* 主内容区 */}
<Layout style={{ display: 'flex', flex: 1, background: '#fff' }}>
<Layout style={{
display: 'flex', flex: 1,
background: 'rgba(255, 255, 255, 0.52)',
// backgroundImage: `url(${bg1})`,
// backgroundRepeat: 'no-repeat',
// backgroundSize: '100% 100%',
// backgroundPosition: 'center',
}}>
{/* 头部 - 显示对话标题和模型信息 */}
<div className="animate-fadeInUp" style={{
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
@@ -2133,6 +2058,7 @@ const AIChatPage: React.FC = () => {
border: '1px solid rgba(231, 234, 240, 0.82)',
// boxShadow: '0 16px 44px rgba(31, 41, 55, 0.06)',
position: 'relative', overflow: 'hidden', flexWrap: 'wrap', gap: 12,
}}>
<div style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 16 }}>
<div style={{ width: '15%', height: 1, background: 'linear-gradient(90deg, transparent, rgba(117,106,136,0.18), rgba(232,227,236,0.48), transparent)', borderRadius: 1 }} />
@@ -2166,6 +2092,7 @@ const AIChatPage: React.FC = () => {
overflow: 'hidden',
minHeight: 0,
}}
>
{/* 空状态 - 没有对话或当前对话没有消息时显示 */}
@@ -2205,8 +2132,9 @@ const AIChatPage: React.FC = () => {
paddingRight: 10,
paddingBottom: 18,
// background: 'linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0))',
background: '#fff',
// background: '#fff',
// borderRadius: 22,
}}
onScroll={(e) => {
const target = e.currentTarget;
@@ -2262,7 +2190,7 @@ const AIChatPage: React.FC = () => {
{/* 消息气泡 */}
<div
style={{
background: 'rgba(255, 255, 255, 0.92)',
background: 'rgb(255, 255, 255)',
backdropFilter: 'blur(18px)',
borderRadius: '22px',
padding: '14px 16px',
@@ -2824,7 +2752,8 @@ const AIChatPage: React.FC = () => {
<div
style={{
position: 'relative',
background: '#ffffff',
background: 'rgba(255, 255, 255, 0.52)',
borderRadius: 24,
padding: '18px 72px 16px 20px',
boxShadow: '0 22px 64px rgba(31, 41, 55, 0.08), 0 1px 0 rgba(255,255,255,0.98) inset',
video-gen-app/src/pages/GeneratePage.tsx
+16 -10
View File
@@ -2153,13 +2153,16 @@ const GeneratePage: React.FC = () => {
overflowY: "auto",
}}
>
{references
.filter(
{(() => {
const filtered = references.filter(
(r) => !mentionFilter || r.name.includes(mentionFilter),
)
.map((ref, i) => (
);
const displayList = filtered.length > 0 ? filtered : references;
return displayList.map((ref, originalIndex) => {
const i = references.indexOf(ref);
return (
<div
key={i}
key={originalIndex}
style={{
display: "flex",
alignItems: "center",
@@ -2187,7 +2190,8 @@ const GeneratePage: React.FC = () => {
if (!textarea || !textarea.value) return;
const val = textarea.value;
const lastAt = val.lastIndexOf("@");
const newVal = val.slice(0, lastAt) + `@${ref.name} `;
const displayName = ref.name || (ref.type === "image" ? `图片${i + 1}` : `视频${i + 1}`);
const newVal = val.slice(0, lastAt) + `@${displayName} `;
setPromptText(newVal);
form.setFieldValue("prompt", newVal);
setShowMention(false);
@@ -2228,13 +2232,15 @@ const GeneratePage: React.FC = () => {
)}
</div>
<Typography.Text style={{ fontSize: 13 }}>
{ref.name}
{ref.name || (ref.type === "image" ? `图片${i + 1}` : `视频${i + 1}`)}
</Typography.Text>
<Tag style={{ marginLeft: "auto", fontSize: 11 }}>
{ref.type === "image" ? "图片" : "视频"}
</Tag>
</div>
))}
);
});
})()}
</div>
)}
@@ -2787,7 +2793,7 @@ const GeneratePage: React.FC = () => {
{recordStates[currentRecord.id] === "generating" && (
<span>
{mediaType === "image" ? "图片" : "视频"}生成中，请稍候...
<span
{/* <span
style={{
marginLeft: 8,
fontSize: 14,
@@ -2797,7 +2803,7 @@ const GeneratePage: React.FC = () => {
}}
>
{Math.round(generationDisplayProgress[currentRecord.id] || 0)}%
</span>
</span> */}
</span>
)}
{recordStates[currentRecord.id] === "done" &&
video-gen-app/src/pages/HomePage.tsx
+2 -2
View File
@@ -342,8 +342,8 @@ const HomePage: React.FC = () => {
const aiEntries = [
{
icon: <FileTextOutlined style={{ fontSize: 24 }} />,
title: '行业提示词优化',
description: '根据项目行业进行图文理解优化提示词',
title: '行业智造',
description: '新建项目、设置图文视频参数、核对信息并生成素材',
action: '立即创作',
path: '/projects',
},
video-gen-app/src/pages/InitialReplication.tsx
+34 -8
View File
@@ -20,6 +20,8 @@ import {
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { uploadHotOpeningVideo, uploadHotOpeningImage, generateReplication, getReplicationList, getone, getReplicationDetail, deleteHotOpeningReplicationTask } from '../api';
import bg1 from '../assets/bg1.png';
const { Header, Content } = Layout;
@@ -450,7 +452,6 @@ const GenerateConver: React.FC = () => {
justifyContent: 'space-between',
alignItems: 'stretch',
gap: '2%',
// background: 'linear-gradient(135deg, #f8fafc 0%, #eef2ff 50%, #f0f9ff 100%)',
position: 'relative',
// padding: '20px 32px',
boxSizing: 'border-box',
@@ -458,7 +459,12 @@ const GenerateConver: React.FC = () => {
}}
>
<div className="replication-preview" style={{ width: '70%', background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(20px)', display: 'flex', flexDirection: 'column', borderRadius: 20, overflow: 'hidden', border: '1px solid rgba(99, 102, 241, 0.1)', boxShadow: '0 8px 32px rgba(99, 102, 241, 0.08)', position: 'relative', zIndex: 10 }}>
<div className="replication-preview" style={{ width: '70%', background: '#f1f2f3', backdropFilter: 'blur(20px)', display: 'flex', flexDirection: 'column', borderRadius: 20, overflow: 'hidden',
// border: '1px solid rgba(99, 102, 241, 0.1)',
// boxShadow: '0 8px 32px rgba(99, 102, 241, 0.08)',
position: 'relative', zIndex: 10,
}}>
@@ -472,7 +478,8 @@ const GenerateConver: React.FC = () => {
border: '1px solid rgba(99, 102, 241, 0.08)',
position: 'relative', overflow: 'hidden', flexWrap: 'wrap', gap: 12,
}}>
<div style={{ display: 'flex', alignItems: 'center', gap: 16 ,
<div style={{
display: 'flex', alignItems: 'center', gap: 16,
paddingBottom: 12,
}}>
@@ -514,7 +521,13 @@ const GenerateConver: React.FC = () => {
</div>
{/* 左侧预览区域 */}
<div style={{ flex: 1, background: 'rgba(248, 250, 252, 0.5)', borderRight: '1px solid rgba(99, 102, 241, 0.08)', overflowY: 'auto' }}>
<div style={{
flex: 1,
background: 'transparent',
borderRight: '1px solid rgba(99, 102, 241, 0.08)', overflowY: 'auto',
scrollbarWidth: 'none',
}}>
{cardData.length > 0 ? (
<div style={{ height: '100%', padding: '24px', }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
@@ -526,7 +539,6 @@ const GenerateConver: React.FC = () => {
<div
key={item.id}
style={{
background: 'rgba(255,255,255,0.9)',
border: '1px solid rgba(99, 102, 241, 0.6)',
backdropFilter: 'blur(10px)',
borderRadius: 16,
@@ -546,7 +558,10 @@ const GenerateConver: React.FC = () => {
e.currentTarget.style.boxShadow = '0 4px 16px rgba(99, 102, 241, 0.06)';
}}
>
<div style={{ position: 'relative', aspectRatio: '1/1', background: '#f8fafc' }}>
<div style={{
position: 'relative', aspectRatio: '1/1',
// background: '#f8fafc'
}}>
{item.finalVideoUrl ? (
@@ -830,9 +845,20 @@ const GenerateConver: React.FC = () => {
</div>
<div className="replication-form" style={{ flex: 1, overflow: 'auto', width: '28%', background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(20px)', borderRadius: 20, border: '1px solid rgba(99, 102, 241, 0.1)', boxShadow: '0 8px 32px rgba(99, 102, 241, 0.08)', position: 'relative', zIndex: 10 }}>
<div className="replication-form" style={{
flex: 1, overflow: 'auto', width: '28%',
background: 'transparent',
backdropFilter: 'blur(20px)', borderRadius: 20,
// border: '1px solid rgba(99, 102, 241, 0.1)',
// boxShadow: '0 8px 32px rgba(99, 102, 241, 0.08)',
position: 'relative', zIndex: 10
}}>
{/* 右侧表单区域 */}
<div className="replication-form-content" style={{ width: '100%', height: '100%', background: 'rgba(248, 250, 252, 0.5)', padding: 24, overflowY: 'auto' }}>
<div className="replication-form-content" style={{
width: '100%', height: '100%',
background: 'rgba(258, 250, 252, 0.2)',
padding: 24, overflowY: 'auto'
}}>
{/* 上传视频 */}
<div style={{ marginBottom: 20 }}>
<p style={{ margin: 0, fontSize: 14, fontWeight: 600, color: '#1e293b', marginBottom: 10 }}>
video-gen-app/src/pages/LoginPage.tsx
+2
View File
@@ -364,6 +364,7 @@ const LoginPage: React.FC = () => {
disabled={!loginSliderVerified}
style={{ ...inputStyle, borderRadius: '10px 0 0 10px', flex: 1 }} />
<Button disabled={countdown > 0}
style={{fontSize: 14,fontWeight: 400}}
onClick={() => {
if (loginShowResend) {
setLoginSliderVerified(false);
@@ -411,6 +412,7 @@ const LoginPage: React.FC = () => {
disabled={!sliderVerified}
style={{ ...inputStyle, borderRadius: '10px 0 0 10px', flex: 1 }} />
<Button disabled={regCountdown > 0}
style={{fontSize: 14,fontWeight: 400}}
onClick={() => {
if (showResend) {
setSliderVerified(false);
video-gen-app/src/pages/RemoveLens.tsx
+6 -5
View File
@@ -179,13 +179,14 @@ export default function VideoFrameExtractor() {
borderRadius: 20,
minHeight: 'calc(100vh - 34px)',
overflow: 'auto',
background: 'linear-gradient(135deg, #f8fafc 0%, #eef2ff 50%, #f0f9ff 100%)',
background: 'transparent',
// background: 'linear-gradient(135deg, #f8fafc 0%, #eef2ff 50%, #f0f9ff 100%)',
position: 'relative',
padding: '20px 32px',
backgroundImage: `url(${bg1})`,
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
backgroundPosition: 'center',
// backgroundImage: `url(${bg1})`,
// backgroundRepeat: 'no-repeat',
// backgroundSize: '100% 100%',
// backgroundPosition: 'center',
}}
>