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

素材批量上传功能

Browse Source
This commit is contained in:
Lrd
2026-06-16 17:22:43 +08:00
parent 540143de58
commit dbf912dd26
3 changed files with 63 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
video-gen-app/src/pages/AuthorizationPage.tsx
+4 -6
View File
@@ -163,10 +163,10 @@ const AuthorizationPage: React.FC = () => {
}));
return (
<div style={{ padding: 24, minHeight: '94vh', background: '#f8fafc' }}>
<div style={{ padding: 12, minHeight: '94vh', background: '#f8fafc' }}>
{/* 页面标题 */}
<div style={{ marginBottom: 20 }}>
<h1 style={{ fontSize: 24, fontWeight: 600, color: '#1e293b', marginBottom: 8 }}>
<div>
<h1 style={{lineHeight: '28px', fontSize: 24, fontWeight: 600, color: '#1e293b', marginBottom: 8, marginTop: 0 }}>
授权管理
</h1>
</div>
@@ -175,13 +175,11 @@ const AuthorizationPage: React.FC = () => {
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12, marginBottom: 16 }}>
<Button
type="primary"
size="large"
size="medium"
icon={<PlusOutlined />}
onClick={handleAuthorize}
loading={loading}
style={{
height: 40,
padding: '0 24px',
borderRadius: 8,
fontSize: 14,
fontWeight: 500,
video-gen-app/src/pages/GeneratedRecord.tsx
+51 -53
View File
@@ -258,13 +258,12 @@ const GeneratedRecord: React.FC = () => {
style={{
width: 160,
height: 120,
borderRadius: 4,
overflow: 'hidden',
cursor: 'pointer',
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
transition: 'transform 0.2s, box-shadow 0.2s',
position: 'relative',
backgroundColor: '#f1f5f9',
borderRadius: 4,
cursor: 'pointer',
overflow: 'hidden',
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
transition: 'transform 0.2s, box-shadow 0.2s',
}}
onClick={!isSelectionMode ? onClick : undefined}
onMouseEnter={(e) => {
@@ -280,50 +279,7 @@ const GeneratedRecord: React.FC = () => {
}
}}
>
{/* 加载占位符 - 显示渐变背景和加载状态 */}
{!isLoading && !isLoaded && !isError && (
<div style={{
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)',
}}>
<div style={{
width: 32,
height: 32,
borderRadius: 8,
backgroundColor: '#cbd5e1',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}>
{mediaType === 'video' ? (
<VideoCameraOutlined style={{ color: '#64748b', fontSize: 16 }} />
) : (
<PictureOutlined style={{ color: '#64748b', fontSize: 16 }} />
)}
</div>
</div>
)}
{/* 视频无封面时直接显示占位符 */}
{mediaType === 'video' && !item.videoCoverUrl && !isError && (
<div style={{
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#1e293b',
}}>
<VideoCameraOutlined style={{ color: '#64748b', fontSize: 24 }} />
<Text style={{ fontSize: 12, color: '#94a3b8', marginTop: 4 }}>暂无封面</Text>
</div>
)}
{/* 媒体内容 - 当isLoading为true时开始渲染，加载完成后显示 */}
{((mediaType === 'video' && item.videoCoverUrl) || mediaType === 'image') && (isLoading || isLoaded) && !isError && (
<div style={{
@@ -391,6 +347,51 @@ const GeneratedRecord: React.FC = () => {
</div>
)}
{/* 加载占位符 - 显示渐变背景和加载状态 */}
{!isLoading && !isLoaded && !isError && (
<div style={{
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)',
}}>
<div style={{
width: 32,
height: 32,
borderRadius: 8,
backgroundColor: '#cbd5e1',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}>
{mediaType === 'video' ? (
<VideoCameraOutlined style={{ color: '#64748b', fontSize: 16 }} />
) : (
<PictureOutlined style={{ color: '#64748b', fontSize: 16 }} />
)}
</div>
</div>
)}
{/* 视频无封面时直接显示占位符 */}
{mediaType === 'video' && !item.videoCoverUrl && !isError && (
<div style={{
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#1e293b',
}}>
<VideoCameraOutlined style={{ color: '#64748b', fontSize: 24 }} />
<Text style={{ fontSize: 12, color: '#94a3b8', marginTop: 4 }}>暂无封面</Text>
</div>
)}
{/* 过期占位符 */}
{isExpired && (
<div style={{
@@ -572,9 +573,7 @@ const GeneratedRecord: React.FC = () => {
message.warning('请先选择要上传的文件');
return;
}
setUploading(true);
// 模拟批量上传过程
for (let i = 0; i < uploadFiles.length; i++) {
const file = uploadFiles[i];
@@ -586,7 +585,6 @@ const GeneratedRecord: React.FC = () => {
setUploadProgress(prev => ({ ...prev, [file.uid]: progress }));
}
}
// 上传完成
await new Promise(resolve => setTimeout(resolve, 500));
message.success(`成功上传 ${uploadFiles.length} 个文件`);