2190 lines
105 KiB
TypeScript
2190 lines
105 KiB
TypeScript
import React, { useEffect, useState, useLayoutEffect, useRef, useCallback } from 'react';
|
||
import { Button, Empty, Input, Select, Space, Typography, Tag, message, Modal, Table, DatePicker } from 'antd';
|
||
import dayjs from 'dayjs';
|
||
import JSZip from 'jszip';
|
||
import {
|
||
FilterOutlined,
|
||
VideoCameraOutlined,
|
||
PictureOutlined,
|
||
FolderOpenOutlined,
|
||
FileTextOutlined,
|
||
DownloadOutlined,
|
||
XOutlined,
|
||
ClockCircleOutlined,
|
||
UploadOutlined,
|
||
|
||
} from '@ant-design/icons';
|
||
import { gethistory, gethistoryItems, getOAuthList, asyncBatchUploadMaterial, updateFilename, getUploadHistory } from '../api';
|
||
|
||
const { Search } = Input;
|
||
const { Text } = Typography;
|
||
|
||
const GeneratedRecord: React.FC = () => {
|
||
const [filterType, setFilterType] = useState<'project' | 'creation'>('project');
|
||
const [filterMedia, setFilterMedia] = useState<'video' | 'image'>('video');
|
||
const [recordlist, setRecordList] = useState<any[]>([]);
|
||
const [Pagebreak, setPagebreak] = useState<any>({
|
||
page: 1,
|
||
pageSize: 10,
|
||
});
|
||
const [Totalnumber, setTotalnumber] = useState<number>(0);
|
||
const [loading, setLoading] = useState<boolean>(false);
|
||
const [loadingGroups, setLoadingGroups] = useState<Set<string>>(new Set());
|
||
const [previewVisible, setPreviewVisible] = useState(false);
|
||
const [previewItem, setPreviewItem] = useState<any>(null);
|
||
const videoRef = React.createRef<HTMLVideoElement>();
|
||
const [selectedDate, setSelectedDate] = useState<string>('');
|
||
|
||
const [uploading, setUploading] = useState(false);
|
||
|
||
// 上传配置弹窗相关状态
|
||
const [uploadConfigModalVisible, setUploadConfigModalVisible] = useState(false);
|
||
const [accountIdLists, setAccountIdLists] = useState<{
|
||
accountId: string;
|
||
}[][]>([[]]);
|
||
const [accountIdInputs, setAccountIdInputs] = useState<string[]>(['']);
|
||
|
||
const [oauthList, setOauthList] = useState<any[]>([]);
|
||
const [oauthLoading, setOauthLoading] = useState(false);
|
||
const [oauthTotal, setOauthTotal] = useState(0);
|
||
const [selectedOauthItems, setSelectedOauthItems] = useState<({ value: string; label: string } | undefined)[]>([undefined]);
|
||
const [materialFileNames, setMaterialFileNames] = useState<Map<string, string>>(new Map());
|
||
const [unifiedFileName, setUnifiedFileName] = useState('');
|
||
const updateFilenameDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||
const [oauthPage, setOauthPage] = useState(1);
|
||
const [oauthPageSize, setOauthPageSize] = useState(10);
|
||
const [oauthSelectOpens, setOauthSelectOpens] = useState<boolean[]>([false]);
|
||
|
||
// 上传任务历史弹窗相关状态
|
||
const [uploadHistoryModalVisible, setUploadHistoryModalVisible] = useState(false);
|
||
const [uploadHistoryList, setUploadHistoryList] = useState<any[]>([]);
|
||
const [uploadHistoryTotal, setUploadHistoryTotal] = useState(0);
|
||
const [uploadHistoryPage, setUploadHistoryPage] = useState(1);
|
||
const [uploadHistoryPageSize, setUploadHistoryPageSize] = useState(10);
|
||
const [uploadHistoryLoading, setUploadHistoryLoading] = useState(false);
|
||
const [uploadHistoryStatus, setUploadHistoryStatus] = useState<string>('');
|
||
|
||
// 多选相关状态
|
||
const [isSelectionMode, setIsSelectionMode] = useState(false);
|
||
const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
|
||
|
||
// 全局 Intersection Observer 实例（复用，避免创建过多实例）
|
||
let globalObserver: IntersectionObserver | null = null;
|
||
const observerCallbacks = new Map<HTMLElement, () => void>();
|
||
|
||
// 加载队列控制 - 限制同时加载的媒体数量
|
||
// 使用优先级队列，完全在可视区的元素优先加载
|
||
interface LoadTask {
|
||
callback: () => void;
|
||
priority: number; // 优先级：2=完全可见(立即加载)，1=部分可见，0=即将进入
|
||
element: HTMLElement;
|
||
}
|
||
const loadingQueue: LoadTask[] = [];
|
||
const MAX_CONCURRENT_LOADS = 15; // 最大同时加载数量
|
||
const MAX_VISIBLE_LOADS = 8; // 可视区最大并发数（不受队列限制）
|
||
let currentLoads = 0;
|
||
let visibleLoads = 0; // 当前可视区加载数
|
||
|
||
const enqueueLoad = (callback: () => void, element: HTMLElement, isFullyVisible: boolean) => {
|
||
// 完全可见的元素立即加载，不受队列限制
|
||
if (isFullyVisible && visibleLoads < MAX_VISIBLE_LOADS) {
|
||
visibleLoads++;
|
||
currentLoads++;
|
||
callback();
|
||
} else if (currentLoads < MAX_CONCURRENT_LOADS) {
|
||
// 部分可见或预加载区域的元素，受队列限制
|
||
currentLoads++;
|
||
callback();
|
||
} else {
|
||
// 添加到优先级队列
|
||
const task: LoadTask = {
|
||
callback,
|
||
priority: isFullyVisible ? 2 : 1,
|
||
element
|
||
};
|
||
loadingQueue.push(task);
|
||
// 按优先级排序，高优先级在前
|
||
loadingQueue.sort((a, b) => b.priority - a.priority);
|
||
}
|
||
};
|
||
|
||
const completeLoad = () => {
|
||
currentLoads--;
|
||
// 如果是可视区加载完成
|
||
if (visibleLoads > 0) {
|
||
visibleLoads--;
|
||
}
|
||
// 处理队列中的任务
|
||
if (loadingQueue.length > 0) {
|
||
// 优先处理高优先级任务
|
||
const nextTask = loadingQueue.shift();
|
||
if (nextTask) {
|
||
currentLoads++;
|
||
// 如果是完全可见的任务，计入可视区加载数
|
||
if (nextTask.priority === 2) {
|
||
visibleLoads++;
|
||
}
|
||
nextTask.callback();
|
||
}
|
||
}
|
||
};
|
||
|
||
const getGlobalObserver = (): IntersectionObserver => {
|
||
if (!globalObserver) {
|
||
globalObserver = new IntersectionObserver(
|
||
(entries) => {
|
||
entries.forEach((entry) => {
|
||
const callback = observerCallbacks.get(entry.target as HTMLElement);
|
||
if (entry.isIntersecting && callback) {
|
||
observerCallbacks.delete(entry.target as HTMLElement);
|
||
globalObserver?.unobserve(entry.target);
|
||
// 判断是否完全可见（intersectionRatio >= 1）
|
||
const isFullyVisible = entry.intersectionRatio >= 1;
|
||
// 使用优先级队列控制加载
|
||
enqueueLoad(callback, entry.target as HTMLElement, isFullyVisible);
|
||
}
|
||
});
|
||
},
|
||
{ rootMargin: '400px', threshold: [0.01, 0.5, 1.0] } // 提前400px开始加载，多阈值检测
|
||
);
|
||
}
|
||
return globalObserver;
|
||
};
|
||
|
||
// 从URL中提取exp时间戳（支持相对路径和完整URL）
|
||
const extractExpTimestamp = (url: string): number | null => {
|
||
if (!url) return null;
|
||
|
||
try {
|
||
// 尝试作为完整URL解析
|
||
const urlObj = new URL(url);
|
||
const expStr = urlObj.searchParams.get('exp');
|
||
if (expStr) {
|
||
return parseInt(expStr, 10);
|
||
}
|
||
return null;
|
||
} catch {
|
||
// 如果完整URL解析失败，尝试解析相对路径中的查询参数
|
||
try {
|
||
const queryStart = url.indexOf('?');
|
||
if (queryStart !== -1) {
|
||
const queryString = url.substring(queryStart + 1);
|
||
const params = new URLSearchParams(queryString);
|
||
const expStr = params.get('exp');
|
||
if (expStr) {
|
||
return parseInt(expStr, 10);
|
||
}
|
||
}
|
||
return null;
|
||
} catch {
|
||
return null;
|
||
}
|
||
}
|
||
};
|
||
|
||
// 检查媒体是否过期
|
||
const isMediaExpired = (url: string): boolean => {
|
||
const expTimestamp = extractExpTimestamp(url);
|
||
if (!expTimestamp) {
|
||
return false; // 没有exp参数，视为不过期
|
||
}
|
||
const currentTimestamp = Math.floor(Date.now() / 1000);
|
||
return currentTimestamp > expTimestamp;
|
||
};
|
||
|
||
// 懒加载媒体组件
|
||
const LazyMedia: React.FC<{
|
||
item: any;
|
||
mediaType: 'video' | 'image';
|
||
onClick: () => void;
|
||
isSelected?: boolean;
|
||
onToggleSelect?: (itemId: string) => void;
|
||
isSelectionMode?: boolean;
|
||
}> = ({ item, mediaType, onClick, isSelected = false, onToggleSelect, isSelectionMode = false }) => {
|
||
const [isLoaded, setIsLoaded] = useState(false);
|
||
const [isError, setIsError] = useState(false);
|
||
const [isExpired, setIsExpired] = useState(false);
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
const placeholderRef = useRef<HTMLDivElement>(null);
|
||
const mediaRef = useRef<HTMLImageElement | HTMLVideoElement>(null);
|
||
const errorTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||
|
||
// 检查媒体是否过期
|
||
useEffect(() => {
|
||
const url = mediaType === 'video' ? item.videoUrl : item.imageUrl;
|
||
if (url && isMediaExpired(url)) {
|
||
setIsExpired(true);
|
||
}
|
||
}, [item, mediaType]);
|
||
|
||
useEffect(() => {
|
||
// 如果已过期，不需要监听
|
||
if (isExpired) return;
|
||
|
||
const placeholder = placeholderRef.current;
|
||
if (!placeholder) return;
|
||
|
||
const observer = getGlobalObserver();
|
||
const callback = () => {
|
||
setIsLoading(true);
|
||
};
|
||
|
||
observerCallbacks.set(placeholder, callback);
|
||
observer.observe(placeholder);
|
||
|
||
return () => {
|
||
observerCallbacks.delete(placeholder);
|
||
observer.unobserve(placeholder);
|
||
};
|
||
}, [isExpired]);
|
||
|
||
// 安全拼接URL，避免双斜杠
|
||
const buildUrl = (path: string, isImage: boolean = false): string => {
|
||
const baseUrl = import.meta.env.VITE_API_BASE || "http://localhost:8000";
|
||
// 移除路径开头的斜杠（如果有）
|
||
const cleanPath = path.startsWith('/') ? path.slice(1) : path;
|
||
// 移除baseUrl结尾的斜杠（如果有）
|
||
const cleanBase = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
|
||
if (isImage) {
|
||
return `${cleanBase}/static/${cleanPath}&w=300&q=50`;
|
||
}
|
||
return `${cleanBase}/${cleanPath}`;
|
||
};
|
||
|
||
// 处理加载完成
|
||
const handleLoad = () => {
|
||
// 清除可能的错误延迟定时器
|
||
if (errorTimer.current) {
|
||
clearTimeout(errorTimer.current);
|
||
}
|
||
setIsLoaded(true);
|
||
setIsLoading(false);
|
||
completeLoad();
|
||
};
|
||
|
||
const handleError = () => {
|
||
// 使用防抖，只有错误持续一段时间后才显示错误状态
|
||
errorTimer.current = setTimeout(() => {
|
||
const mediaUrl = mediaType === 'video' ? buildUrl(item.videoUrl) : buildUrl(item.imageUrl);
|
||
// console.warn(`媒体加载失败: ${mediaUrl}`, item);
|
||
setIsError(true);
|
||
setIsLoading(false);
|
||
completeLoad();
|
||
}, 1000); // 1秒防抖延迟
|
||
};
|
||
|
||
// 获取媒体URL
|
||
const mediaUrl = mediaType === 'video' ? buildUrl(item.videoUrl) : buildUrl(item.imageUrl, true);
|
||
const coverUrl = item.videoCoverUrl ? buildUrl(item.videoCoverUrl, true) : undefined;
|
||
|
||
return (
|
||
<div
|
||
ref={placeholderRef}
|
||
style={{
|
||
width: 160,
|
||
height: 120,
|
||
position: 'relative',
|
||
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) => {
|
||
if (!isSelectionMode) {
|
||
(e.currentTarget as HTMLElement).style.transform = 'scale(1.05)';
|
||
(e.currentTarget as HTMLElement).style.boxShadow = '0 4px 16px rgba(0,0,0,0.2)';
|
||
}
|
||
}}
|
||
onMouseLeave={(e) => {
|
||
if (!isSelectionMode) {
|
||
(e.currentTarget as HTMLElement).style.transform = 'scale(1)';
|
||
(e.currentTarget as HTMLElement).style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
|
||
}
|
||
}}
|
||
>
|
||
|
||
{/* 媒体内容 - 当isLoading为true时开始渲染，加载完成后显示 */}
|
||
{((mediaType === 'video' && item.videoCoverUrl) || mediaType === 'image') && (isLoading || isLoaded) && !isError && (
|
||
<div style={{
|
||
width: '100%',
|
||
height: '100%',
|
||
position: 'relative',
|
||
}}>
|
||
{/* 加载中遮罩 */}
|
||
{isLoading && !isLoaded && (
|
||
<div style={{
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
backgroundColor: 'rgba(248, 250, 252, 0.9)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
zIndex: 1,
|
||
}}>
|
||
<div style={{
|
||
width: 28,
|
||
height: 28,
|
||
border: '3px solid #e2e8f0',
|
||
borderTopColor: '#3b82f6',
|
||
borderRadius: '50%',
|
||
animation: 'spin 0.8s linear infinite',
|
||
}} />
|
||
</div>
|
||
)}
|
||
{mediaType === 'video' && item.videoCoverUrl && (
|
||
<img
|
||
ref={mediaRef as React.RefObject<HTMLImageElement>}
|
||
src={coverUrl}
|
||
style={{
|
||
width: '100%',
|
||
height: '100%',
|
||
objectFit: 'cover',
|
||
opacity: isLoaded ? 1 : 0,
|
||
transition: 'opacity 0.3s ease-in-out'
|
||
}}
|
||
loading="lazy"
|
||
onLoad={handleLoad}
|
||
onError={handleError}
|
||
/>
|
||
)}
|
||
{mediaType === 'image' && (
|
||
<img
|
||
ref={mediaRef as React.RefObject<HTMLImageElement>}
|
||
src={mediaUrl}
|
||
alt="图片预览"
|
||
style={{
|
||
width: '100%',
|
||
height: '100%',
|
||
objectFit: 'cover',
|
||
opacity: isLoaded ? 1 : 0,
|
||
transition: 'opacity 0.3s ease-in-out'
|
||
}}
|
||
loading="lazy"
|
||
onLoad={handleLoad}
|
||
onError={handleError}
|
||
/>
|
||
)}
|
||
</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={{
|
||
width: '100%',
|
||
height: '100%',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
backgroundColor: '#fef3c7',
|
||
color: '#d97706',
|
||
fontSize: 12,
|
||
flexDirection: 'column',
|
||
gap: 4,
|
||
}}>
|
||
<ClockCircleOutlined style={{ fontSize: 24 }} />
|
||
图片过期
|
||
</div>
|
||
)}
|
||
|
||
{/* 错误占位符 */}
|
||
{isError && (
|
||
<div style={{
|
||
width: '100%',
|
||
height: '100%',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
backgroundColor: '#fef2f2',
|
||
color: '#dc2626',
|
||
fontSize: 12,
|
||
}}>
|
||
加载失败
|
||
</div>
|
||
)}
|
||
|
||
{/* 点击提示 */}
|
||
{!isExpired && !isSelectionMode && (
|
||
<div style={{
|
||
position: 'absolute',
|
||
bottom: 0,
|
||
left: 0,
|
||
right: 0,
|
||
background: 'linear-gradient(transparent, rgba(0,0,0,0.5))',
|
||
padding: '8px',
|
||
color: '#fff',
|
||
fontSize: 12,
|
||
opacity: 0,
|
||
transition: 'opacity 0.2s',
|
||
}}
|
||
onMouseEnter={(e) => {
|
||
(e.currentTarget as HTMLElement).style.opacity = '1';
|
||
}}
|
||
onMouseLeave={(e) => {
|
||
(e.currentTarget as HTMLElement).style.opacity = '0';
|
||
}}
|
||
>
|
||
点击预览
|
||
</div>
|
||
)}
|
||
|
||
{/* 选择模式下的选择框 */}
|
||
{isSelectionMode && (
|
||
<div
|
||
style={{
|
||
position: 'absolute',
|
||
top: 8,
|
||
right: 8,
|
||
width: 20,
|
||
height: 20,
|
||
borderRadius: '50%',
|
||
backgroundColor: isSelected ? '#10b981' : 'rgba(255,255,255,0.9)',
|
||
border: isSelected ? '2px solid #10b981' : '2px solid #d1d5db',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
cursor: 'pointer',
|
||
zIndex: 10,
|
||
transition: 'all 0.2s',
|
||
}}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
onToggleSelect?.(item.generatedResourceId || item.id);
|
||
}}
|
||
onMouseEnter={(e) => {
|
||
e.currentTarget.style.transform = 'scale(1.1)';
|
||
}}
|
||
onMouseLeave={(e) => {
|
||
e.currentTarget.style.transform = 'scale(1)';
|
||
}}
|
||
>
|
||
{isSelected && (
|
||
<svg width={12} height={12} viewBox="0 0 12 12" fill="none">
|
||
<path d="M10 3L4.5 8.5L2 6" stroke="white" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
|
||
</svg>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* 选中状态下的边框高亮 */}
|
||
{isSelectionMode && isSelected && (
|
||
<div style={{
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
border: '3px solid #10b981',
|
||
borderRadius: 4,
|
||
pointerEvents: 'none',
|
||
zIndex: 5,
|
||
}} />
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// 下载文件
|
||
const handleDownload = (item: any) => {
|
||
const url = `${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${item.videoUrl || item.imageUrl}`;
|
||
const link = document.createElement('a');
|
||
link.href = url;
|
||
link.download = item.title || item.id || 'download';
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
};
|
||
|
||
// 预览文件
|
||
const handlePreview = (item: any) => {
|
||
setPreviewItem(item);
|
||
setPreviewVisible(true);
|
||
// 触发事件通知布局组件关闭浮动按钮
|
||
window.dispatchEvent(new Event('previewOpen'));
|
||
};
|
||
|
||
// 关闭预览并暂停视频
|
||
const handleClosePreview = () => {
|
||
// 方法1: 使用 ref
|
||
if (videoRef.current) {
|
||
videoRef.current.pause();
|
||
videoRef.current.currentTime = 0;
|
||
}
|
||
// 方法2: 直接通过 DOM 查询（备用）
|
||
const videoElements = document.querySelectorAll('video');
|
||
videoElements.forEach(video => {
|
||
video.pause();
|
||
video.currentTime = 0;
|
||
});
|
||
setPreviewVisible(false);
|
||
};
|
||
|
||
// 获取item的资源ID（优先使用generatedResourceId，否则使用id）
|
||
const getItemResourceId = (item: any): string => {
|
||
return item.generatedResourceId || item.id;
|
||
};
|
||
|
||
// 判断item是否有generatedResourceId
|
||
const hasGeneratedResourceId = (item: any): boolean => {
|
||
return Boolean(item.generatedResourceId);
|
||
};
|
||
|
||
// 多选相关函数
|
||
const handleToggleSelect = (itemId: string) => {
|
||
setSelectedItems(prev => {
|
||
const newSet = new Set(prev);
|
||
if (newSet.has(itemId)) {
|
||
newSet.delete(itemId);
|
||
} else {
|
||
newSet.add(itemId);
|
||
}
|
||
return newSet;
|
||
});
|
||
};
|
||
|
||
const handleSelectAll = () => {
|
||
const allItemIds = recordlist.flatMap((group: any) =>
|
||
group.items.map((item: any) => getItemResourceId(item))
|
||
);
|
||
if (selectedItems.size === allItemIds.length) {
|
||
setSelectedItems(new Set());
|
||
} else {
|
||
setSelectedItems(new Set(allItemIds));
|
||
}
|
||
};
|
||
|
||
const handleDownloadSelected = async () => {
|
||
if (selectedItems.size === 0) {
|
||
message.warning('请先选择要下载的媒体');
|
||
return;
|
||
}
|
||
|
||
// 检查下载数量限制
|
||
if (selectedItems.size > 10) {
|
||
message.warning('最多只能单次下载10个文件');
|
||
return;
|
||
}
|
||
|
||
const selectedContent: any[] = [];
|
||
recordlist.forEach((group: any) => {
|
||
group.items.forEach((item: any) => {
|
||
if (selectedItems.has(getItemResourceId(item))) {
|
||
selectedContent.push(item);
|
||
}
|
||
});
|
||
});
|
||
|
||
const zip = new JSZip();
|
||
const baseUrl = import.meta.env.VITE_API_BASE || "http://localhost:8000";
|
||
const folder = zip.folder('downloads');
|
||
let hasError = false;
|
||
let successCount = 0;
|
||
|
||
message.loading({ content: '下载中，请稍候...', key: 'downloadProgress' });
|
||
|
||
for (const item of selectedContent) {
|
||
const url = `${baseUrl}${item.videoUrl || item.imageUrl}`;
|
||
const filename = ((item.videoUrl || item.imageUrl).split('/').pop() || `file_${Date.now()}`).split('?')[0];
|
||
try {
|
||
const response = await fetch(url);
|
||
if (!response.ok) throw new Error('Network response was not ok');
|
||
const blob = await response.blob();
|
||
folder?.file(filename, blob);
|
||
successCount++;
|
||
} catch (error) {
|
||
console.warn(`文件下载失败（CORS限制）: ${filename}，将使用备用方式下载`);
|
||
hasError = true;
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (hasError) {
|
||
// Fallback: 逐个打开文件下载（不受 CORS 限制）
|
||
message.destroy('downloadProgress');
|
||
message.info('由于跨域限制，将逐个下载文件');
|
||
selectedContent.forEach((item, index) => {
|
||
setTimeout(() => {
|
||
const url = `${baseUrl}${item.videoUrl || item.imageUrl}&download=1`;
|
||
const link = document.createElement('a');
|
||
link.href = url;
|
||
link.download = '';
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
}, index * 500);
|
||
});
|
||
return;
|
||
}
|
||
|
||
const zipBlob = await zip.generateAsync({ type: 'blob' });
|
||
const link = document.createElement('a');
|
||
link.href = URL.createObjectURL(zipBlob);
|
||
link.download = `downloads_${Date.now()}.zip`;
|
||
link.click();
|
||
URL.revokeObjectURL(link.href);
|
||
|
||
message.destroy('downloadProgress');
|
||
message.success(`下载完成，共 ${successCount} 个文件`);
|
||
};
|
||
|
||
|
||
const handleBatchUploadSelected = () => {
|
||
if (selectedItems.size === 0) {
|
||
message.warning('请先选择要上传的媒体');
|
||
return;
|
||
}
|
||
setAccountIdLists([[]]);
|
||
setAccountIdInputs(['']);
|
||
setSelectedOauthItems([undefined]);
|
||
setUploadConfigModalVisible(true);
|
||
};
|
||
|
||
const handleSinglePushToMedia = () => {
|
||
if (!previewItem) return;
|
||
const resourceId = getItemResourceId(previewItem);
|
||
setSelectedItems(new Set([resourceId]));
|
||
setAccountIdLists([[]]);
|
||
setAccountIdInputs(['']);
|
||
setSelectedOauthItems([undefined]);
|
||
setMaterialFileNames(new Map());
|
||
setUnifiedFileName('');
|
||
setUploadConfigModalVisible(true);
|
||
};
|
||
|
||
const loadOAuthList = async (page: number, pageSize: number) => {
|
||
setOauthLoading(true);
|
||
try {
|
||
const res = await getOAuthList({ page, page_size: pageSize });
|
||
const data = res?.data || res;
|
||
setOauthList(data || []);
|
||
setOauthTotal(res.pagination.total || 0);
|
||
} catch (error) {
|
||
console.error('加载授权列表失败:', error);
|
||
setOauthList([]);
|
||
setOauthTotal(0);
|
||
} finally {
|
||
setOauthLoading(false);
|
||
}
|
||
};
|
||
|
||
const loadUploadHistory = async () => {
|
||
setUploadHistoryLoading(true);
|
||
try {
|
||
const res = await getUploadHistory({
|
||
status: uploadHistoryStatus || undefined,
|
||
page: uploadHistoryPage,
|
||
pageSize: uploadHistoryPageSize,
|
||
});
|
||
const data = res?.data || res;
|
||
setUploadHistoryList(data || []);
|
||
setUploadHistoryTotal(res.pagination?.total || res.total || 0);
|
||
} catch (error) {
|
||
console.error('加载上传历史失败:', error);
|
||
setUploadHistoryList([]);
|
||
setUploadHistoryTotal(0);
|
||
} finally {
|
||
setUploadHistoryLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleOpenUploadHistory = () => {
|
||
setUploadHistoryModalVisible(true);
|
||
setUploadHistoryPage(1);
|
||
setUploadHistoryStatus('');
|
||
loadUploadHistory();
|
||
};
|
||
|
||
const handleUploadHistorySearch = () => {
|
||
setUploadHistoryPage(1);
|
||
loadUploadHistory();
|
||
};
|
||
|
||
const handleUploadHistoryPageChange = (page: number, pageSize: number) => {
|
||
setUploadHistoryPage(page);
|
||
setUploadHistoryPageSize(pageSize);
|
||
loadUploadHistory();
|
||
};
|
||
|
||
// 批量上传素材
|
||
const handleStartBatchUpload = async () => {
|
||
const validOauthItems = selectedOauthItems.filter(item => item !== undefined);
|
||
if (validOauthItems.length === 0) {
|
||
message.warning('请先选择授权账户');
|
||
return;
|
||
}
|
||
if (selectedItems.size === 0) {
|
||
message.warning('请先选择要上传的媒体');
|
||
return;
|
||
}
|
||
setUploading(true);
|
||
try {
|
||
const tasks: {
|
||
advertiser_ids: string[];
|
||
resource_ids: string[];
|
||
oauth_id: string;
|
||
source_model: string;
|
||
}[] = [];
|
||
const resourceIds = Array.from(selectedItems);
|
||
|
||
for (let i = 0; i < validOauthItems.length; i++) {
|
||
const oauthItem = validOauthItems[i];
|
||
const advertiserIds = accountIdLists[i]?.map(account => account.accountId) || [];
|
||
|
||
if (advertiserIds.length === 0) {
|
||
message.warning(`第 ${i + 1} 组授权账户未设置账户ID，已跳过`);
|
||
continue;
|
||
}
|
||
|
||
tasks.push({
|
||
advertiser_ids: advertiserIds,
|
||
resource_ids: resourceIds,
|
||
oauth_id: oauthItem.value,
|
||
source_model: filterType === 'project' ? 'generation_records' : 'chat_generation_tasks',
|
||
});
|
||
}
|
||
|
||
await asyncBatchUploadMaterial({ tasks });
|
||
message.success(`已提交 ${tasks.length} 个上传任务，后台异步处理中`);
|
||
setIsSelectionMode(false);
|
||
setSelectedItems(new Set());
|
||
// 关闭弹窗并清理状态
|
||
setUploadConfigModalVisible(false);
|
||
setAccountIdLists([[]]);
|
||
setAccountIdInputs(['']);
|
||
setSelectedOauthItems([undefined]);
|
||
setMaterialFileNames(new Map());
|
||
setUnifiedFileName('');
|
||
} catch (error: any) {
|
||
console.error('批量上传失败:', error);
|
||
message.error(error.message || '批量上传失败');
|
||
} finally {
|
||
setUploading(false);
|
||
}
|
||
};
|
||
|
||
// 更新文件名函数
|
||
const handleUpdateFileName = async (sourceId: string, newFileName: string) => {
|
||
if (!newFileName.trim()) return;
|
||
try {
|
||
const response = await updateFilename({
|
||
filenames: [{ source_id: sourceId, file_name: newFileName }],
|
||
});
|
||
// 更新 recordlist 中的文件名，使用 API 返回的 new_file_name
|
||
const result = response?.results?.find((r: any) => r.source_id === sourceId);
|
||
const actualFileName = result?.new_file_name || newFileName;
|
||
setRecordList(prevList => {
|
||
return prevList.map(group => ({
|
||
...group,
|
||
items: group.items.map((item: any) => {
|
||
const resourceId = getItemResourceId(item);
|
||
if (resourceId === sourceId) {
|
||
return { ...item, fileName: actualFileName };
|
||
}
|
||
return item;
|
||
}),
|
||
}));
|
||
});
|
||
message.success('文件名更新成功');
|
||
} catch (error: any) {
|
||
console.error('文件名更新失败:', error);
|
||
message.error(error.message || '文件名更新失败');
|
||
}
|
||
};
|
||
|
||
// 批量更新文件名函数
|
||
const handleBatchUpdateFileName = async (sourceIds: string[], newFileName: string) => {
|
||
if (!newFileName.trim() || sourceIds.length === 0) return;
|
||
try {
|
||
const filenames = sourceIds.map(sourceId => ({
|
||
source_id: sourceId,
|
||
file_name: newFileName,
|
||
}));
|
||
const response = await updateFilename({ filenames });
|
||
// 批量更新 recordlist 中的文件名，使用 API 返回的 new_file_name
|
||
const resultsMap = new Map<string, string>();
|
||
response?.results?.forEach((r: any) => {
|
||
if (r.success && r.newFileName) {
|
||
resultsMap.set(r.sourceId, r.newFileName);
|
||
}
|
||
});
|
||
setRecordList(prevList => {
|
||
const sourceIdSet = new Set(sourceIds);
|
||
return prevList.map(group => ({
|
||
...group,
|
||
items: group.items.map((item: any) => {
|
||
const resourceId = getItemResourceId(item);
|
||
if (sourceIdSet.has(resourceId)) {
|
||
const actualFileName = resultsMap.get(resourceId) || newFileName;
|
||
return { ...item, fileName: actualFileName };
|
||
}
|
||
return item;
|
||
}),
|
||
}));
|
||
});
|
||
console.log(response);
|
||
const successCount = response?.successCount || 0;
|
||
message.success(`已更新 ${successCount} 个文件名`);
|
||
} catch (error: any) {
|
||
console.error('文件名更新失败:', error);
|
||
message.error(error.message || '文件名更新失败');
|
||
}
|
||
};
|
||
|
||
// 日期选择器变化处理函数
|
||
const handleDateChange = (dateString: string) => {
|
||
setSelectedDate(dateString);
|
||
};
|
||
|
||
useEffect(() => {
|
||
setLoading(true);
|
||
let parameters = '';
|
||
if (filterType === 'project') {
|
||
parameters = `?gen_type=${filterMedia}&history_source=generation_record&page=${Pagebreak.page}&page_size=${Pagebreak.pageSize}`;
|
||
} else {
|
||
parameters = `?gen_type=${filterMedia}&page=${Pagebreak.page}&page_size=${Pagebreak.pageSize}`;
|
||
}
|
||
|
||
if (selectedDate) {
|
||
let parameters = ``;
|
||
|
||
if (filterType === 'project') {
|
||
parameters = `${selectedDate}?gen_type=${filterMedia}&history_source=generation_record&page=${Pagebreak.page}&page_size=${Pagebreak.pageSize}`;
|
||
} else {
|
||
parameters = `${selectedDate}?gen_type=${filterMedia}&page=${Pagebreak.page}&page_size=${Pagebreak.pageSize}`;
|
||
}
|
||
gethistoryItems(parameters).then((res: any) => {
|
||
const data = Array.isArray(res) ? res : (res?.items || []);
|
||
let recordList = [{
|
||
generatedDate: res.generatedDate,
|
||
items: data,
|
||
total: res.total,
|
||
page: res.page,
|
||
}];
|
||
if (recordList && recordList[0].items.length > 0) {
|
||
setRecordList(recordList);
|
||
} else {
|
||
setRecordList([]);
|
||
}
|
||
}).catch((err) => {
|
||
}).finally(() => {
|
||
setLoading(false);
|
||
});
|
||
|
||
try {
|
||
} catch (err) {
|
||
} finally {
|
||
|
||
}
|
||
} else {
|
||
gethistory(parameters).then((res: any) => {
|
||
const data = Array.isArray(res) ? res : (res?.groups || []);
|
||
data.forEach(group => {
|
||
group.page = 1;
|
||
});
|
||
// 如果是第一页，替换数据；否则追加数据
|
||
if (Pagebreak.page === 1) {
|
||
setRecordList(data);
|
||
} else {
|
||
setRecordList(prev => [...prev, ...data]);
|
||
}
|
||
setTotalnumber(res?.totalDays || 0);
|
||
}).catch((err) => {
|
||
if (Pagebreak.page === 1) {
|
||
setRecordList([]);
|
||
}
|
||
}).finally(() => {
|
||
setLoading(false);
|
||
});
|
||
}
|
||
|
||
|
||
}, [filterType, filterMedia, Pagebreak.page, selectedDate]);
|
||
|
||
// 加载更多
|
||
const handleLoadMore = () => {
|
||
if (loading) return;
|
||
setPagebreak(prev => ({
|
||
...prev,
|
||
page: prev.page + 1
|
||
}));
|
||
};
|
||
|
||
// 分组加载更多
|
||
const handleGroupLoadMore = async (time: string, date: string, page: number) => {
|
||
if (loadingGroups.has(date)) return;
|
||
setLoadingGroups(prev => new Set([...prev, date]));
|
||
|
||
const addpage = page + 1;
|
||
|
||
let parameters = ``;
|
||
|
||
if (filterType === 'project') {
|
||
parameters = `${time}?gen_type=${filterMedia}&history_source=generation_record&page=${addpage}&page_size=${Pagebreak.pageSize}`;
|
||
} else {
|
||
parameters = `${time}?gen_type=${filterMedia}&page=${addpage}&page_size=${Pagebreak.pageSize}`;
|
||
}
|
||
|
||
try {
|
||
const res: any = await gethistoryItems(parameters);
|
||
|
||
// gethistoryItems 返回数组，直接使用
|
||
const newItems: any[] = res.items || [];
|
||
|
||
if (newItems && newItems.length > 0) {
|
||
setRecordList(prev => prev.map(group => {
|
||
if (group.generatedDate === time) {
|
||
return {
|
||
...group,
|
||
items: [...group.items, ...newItems],
|
||
page: addpage
|
||
};
|
||
}
|
||
return group;
|
||
}));
|
||
}
|
||
} catch (err) {
|
||
} finally {
|
||
setLoadingGroups(prev => {
|
||
const next = new Set(prev);
|
||
next.delete(date);
|
||
return next;
|
||
});
|
||
}
|
||
};
|
||
|
||
// 当筛选条件改变时，重置页码
|
||
useEffect(() => {
|
||
setPagebreak(prev => ({
|
||
...prev,
|
||
page: 1
|
||
}));
|
||
}, [filterType, filterMedia]);
|
||
|
||
return (
|
||
<div style={{ minHeight: 'calc(100vh - 90px)', background: '#ffffffff', overflowY: 'auto' }} >
|
||
{/* 操作栏：筛选 + 上传按钮 */}
|
||
<div style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: 12,
|
||
marginBottom: 16,
|
||
padding: '12px 20px',
|
||
borderRadius: 12,
|
||
background: '#fff',
|
||
border: '1px solid #f0f0f5',
|
||
justifyContent: 'space-between',
|
||
}}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||
<FilterOutlined style={{ color: '#94a3b8', fontSize: 14 }} />
|
||
<Space>
|
||
<Button
|
||
type={filterType === 'project' ? 'primary' : 'default'}
|
||
onClick={() => {
|
||
setFilterType('project');
|
||
setIsSelectionMode(false);
|
||
setSelectedItems(new Set());
|
||
}}
|
||
style={{
|
||
borderRadius: 8,
|
||
background: filterType === 'project'
|
||
? 'linear-gradient(135deg, #6366f1, #8b5cf6)'
|
||
: '#f8f9fc',
|
||
border: filterType === 'project' ? 'none' : '1px solid #e2e8f0',
|
||
color: filterType === 'project' ? '#fff' : '#64748b',
|
||
fontWeight: 600,
|
||
}}
|
||
icon={<FolderOpenOutlined />}
|
||
>
|
||
项目记录
|
||
</Button>
|
||
<Button
|
||
type={filterType === 'creation' ? 'primary' : 'default'}
|
||
onClick={() => {
|
||
setFilterType('creation');
|
||
setIsSelectionMode(false);
|
||
setSelectedItems(new Set());
|
||
}}
|
||
style={{
|
||
borderRadius: 8,
|
||
background: filterType === 'creation'
|
||
? 'linear-gradient(135deg, #6366f1, #8b5cf6)'
|
||
: '#f8f9fc',
|
||
border: filterType === 'creation' ? 'none' : '1px solid #e2e8f0',
|
||
color: filterType === 'creation' ? '#fff' : '#64748b',
|
||
fontWeight: 600,
|
||
}}
|
||
icon={<FileTextOutlined />}
|
||
>
|
||
创作记录
|
||
</Button>
|
||
</Space>
|
||
</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||
{/* 多选模式按钮 */}
|
||
{isSelectionMode ? (
|
||
<Space>
|
||
<Button
|
||
onClick={handleSelectAll}
|
||
style={{
|
||
borderRadius: 8,
|
||
background: '#f8f9fc',
|
||
border: '1px solid #e2e8f0',
|
||
color: '#222222ff',
|
||
fontWeight: 600,
|
||
}}
|
||
>
|
||
{selectedItems.size === recordlist.reduce((sum: number, group: any) => sum + group.items.length, 0) ? '取消全选' : '全选'}
|
||
</Button>
|
||
<Button
|
||
onClick={() => {
|
||
setIsSelectionMode(false);
|
||
setSelectedItems(new Set());
|
||
}}
|
||
style={{
|
||
borderRadius: 8,
|
||
background: '#f8f9fc',
|
||
border: '1px solid #e2e8f0',
|
||
color: '#64748b',
|
||
fontWeight: 600,
|
||
}}
|
||
>
|
||
取消选择
|
||
</Button>
|
||
<Button
|
||
onClick={() => handleDownloadSelected()}
|
||
style={{
|
||
borderRadius: 8,
|
||
background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
|
||
color: '#fff',
|
||
fontWeight: 600,
|
||
}}
|
||
>
|
||
下载 ({selectedItems.size})
|
||
</Button>
|
||
<Button
|
||
type="primary"
|
||
onClick={handleBatchUploadSelected}
|
||
loading={uploading}
|
||
disabled={uploading || selectedItems.size === 0}
|
||
style={{
|
||
borderRadius: 8,
|
||
background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
|
||
color: '#fff',
|
||
fontWeight: 600,
|
||
}}
|
||
>
|
||
{uploading ? '上传中...' : `推送至账户 (${selectedItems.size})`}
|
||
</Button>
|
||
</Space>
|
||
) : (
|
||
<Button
|
||
type="primary"
|
||
icon={<UploadOutlined />}
|
||
onClick={() => setIsSelectionMode(true)}
|
||
style={{
|
||
borderRadius: 8,
|
||
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
|
||
border: 'none',
|
||
fontWeight: 600,
|
||
}}
|
||
>
|
||
批量操作
|
||
</Button>
|
||
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Second row filter: 视频 / 图片 */}
|
||
<div style={{
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
gap: 12,
|
||
marginBottom: 24,
|
||
padding: '12px 20px',
|
||
borderRadius: 12,
|
||
background: '#fff',
|
||
border: '1px solid #f0f0f5',
|
||
}}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||
<Typography.Text style={{ color: '#94a3b8', fontSize: 14 }}>媒体类型：</Typography.Text>
|
||
|
||
<Space>
|
||
<Button
|
||
type={filterMedia === 'video' ? 'primary' : 'default'}
|
||
onClick={() => {
|
||
setFilterMedia('video');
|
||
setIsSelectionMode(false);
|
||
setSelectedItems(new Set());
|
||
}}
|
||
style={{
|
||
borderRadius: 8,
|
||
background: filterMedia === 'video'
|
||
? 'linear-gradient(135deg, #6366f1, #8b5cf6)'
|
||
: '#f8f9fc',
|
||
border: filterMedia === 'video' ? 'none' : '1px solid #e2e8f0',
|
||
color: filterMedia === 'video' ? '#fff' : '#64748b',
|
||
fontWeight: 600,
|
||
}}
|
||
icon={<VideoCameraOutlined />}
|
||
>
|
||
视频
|
||
</Button>
|
||
<Button
|
||
type={filterMedia === 'image' ? 'primary' : 'default'}
|
||
onClick={() => {
|
||
setFilterMedia('image');
|
||
setIsSelectionMode(false);
|
||
setSelectedItems(new Set());
|
||
}}
|
||
style={{
|
||
borderRadius: 8,
|
||
background: filterMedia === 'image'
|
||
? 'linear-gradient(135deg, #6366f1, #8b5cf6)'
|
||
: '#f8f9fc',
|
||
border: filterMedia === 'image' ? 'none' : '1px solid #e2e8f0',
|
||
color: filterMedia === 'image' ? '#fff' : '#64748b',
|
||
fontWeight: 600,
|
||
}}
|
||
icon={<PictureOutlined />}
|
||
>
|
||
图片
|
||
</Button>
|
||
<DatePicker
|
||
picker="date"
|
||
value={selectedDate ? dayjs(selectedDate) : undefined}
|
||
onChange={(date, dateString) => handleDateChange(dateString || '')}
|
||
format="YYYY-MM-DD"
|
||
style={{ width: 160, borderRadius: 8, border: '1px solid #e2e8f0' }}
|
||
placeholder="选择日期"
|
||
/>
|
||
{selectedDate && (
|
||
<Button
|
||
type="text"
|
||
onClick={() => handleDateChange('')}
|
||
style={{ color: '#94a3b8', fontSize: 12 }}
|
||
>
|
||
清除
|
||
</Button>
|
||
)}
|
||
</Space>
|
||
</div>
|
||
<Button
|
||
icon={<ClockCircleOutlined />}
|
||
onClick={handleOpenUploadHistory}
|
||
style={{
|
||
borderRadius: 8,
|
||
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
|
||
border: 'none',
|
||
color: '#ffffff',
|
||
fontWeight: 600,
|
||
boxShadow: '0 4px 15px rgba(102, 126, 234, 0.4)',
|
||
transition: 'all 0.3s ease',
|
||
}}
|
||
onMouseEnter={(e) => {
|
||
e.currentTarget.style.transform = 'translateY(-2px)';
|
||
e.currentTarget.style.boxShadow = '0 6px 20px rgba(102, 126, 234, 0.6)';
|
||
}}
|
||
onMouseLeave={(e) => {
|
||
e.currentTarget.style.transform = 'translateY(0)';
|
||
e.currentTarget.style.boxShadow = '0 4px 15px rgba(102, 126, 234, 0.4)';
|
||
}}
|
||
>
|
||
查询上传任务历史
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Content area */}
|
||
{recordlist.length === 0 ? (
|
||
<Empty
|
||
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
||
description="暂无生成记录"
|
||
style={{ padding: '60px 0' }}
|
||
/>
|
||
) : (
|
||
<div style={{ padding: '0 4px' }}>
|
||
{recordlist.map((group: any, index: number) => (
|
||
<div key={index} style={{ marginBottom: 32 }}>
|
||
{/* Date label */}
|
||
<div style={{
|
||
fontSize: 14,
|
||
fontWeight: 600,
|
||
color: '#64748b',
|
||
marginBottom: 12,
|
||
paddingLeft: 8,
|
||
}}>
|
||
{group.generatedDate}
|
||
</div>
|
||
{/* Media grid */}
|
||
<div style={{
|
||
display: 'flex',
|
||
flexWrap: 'wrap',
|
||
gap: 8,
|
||
}}>
|
||
{group.items.map((item: any) => (
|
||
<LazyMedia
|
||
key={getItemResourceId(item)}
|
||
item={item}
|
||
mediaType={filterMedia}
|
||
onClick={() => isSelectionMode ? handleToggleSelect(getItemResourceId(item)) : handlePreview(item)}
|
||
isSelected={selectedItems.has(getItemResourceId(item))}
|
||
onToggleSelect={handleToggleSelect}
|
||
isSelectionMode={isSelectionMode}
|
||
/>
|
||
))}
|
||
</div>
|
||
{/* 分组内加载更多 */}
|
||
{group.total && group.total > group.items.length && (
|
||
<div style={{ padding: '12px 0', textAlign: 'left' }}>
|
||
<Button
|
||
onClick={() => handleGroupLoadMore(group.generatedDate, group.items, group.page)}
|
||
loading={loadingGroups.has(group.generatedDate)}
|
||
disabled={loadingGroups.has(group.generatedDate)}
|
||
size="small"
|
||
style={{
|
||
borderRadius: 6,
|
||
background: 'transparent',
|
||
border: '1px dashed #cbd5e1',
|
||
color: '#64748b',
|
||
fontSize: 12,
|
||
}}
|
||
>
|
||
{loadingGroups.has(group.date) ? '加载中...' : `查看全部 (${group.total})`}
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
{/* 加载更多按钮 */}
|
||
{recordlist.length > 0 && Totalnumber > recordlist.length && (
|
||
<div style={{ textAlign: 'center', padding: '20px 0' }}>
|
||
<Button
|
||
onClick={handleLoadMore}
|
||
loading={loading}
|
||
disabled={loading}
|
||
style={{
|
||
borderRadius: 8,
|
||
background: '#f8f9fc',
|
||
border: '1px solid #e2e8f0',
|
||
color: '#64748b',
|
||
fontWeight: 500,
|
||
}}
|
||
>
|
||
{loading ? '加载中...' : '加载更多'}
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* 上传配置弹窗 */}
|
||
<Modal
|
||
title={selectedItems.size === 1 ? '上传配置' : '批量上传配置'}
|
||
open={uploadConfigModalVisible}
|
||
onCancel={() => {
|
||
setUploadConfigModalVisible(false);
|
||
setAccountIdLists([[]]);
|
||
setAccountIdInputs(['']);
|
||
setSelectedOauthItems([undefined]);
|
||
setMaterialFileNames(new Map());
|
||
setUnifiedFileName('');
|
||
}}
|
||
footer={null}
|
||
width={900}
|
||
mask={{ closable: false }}
|
||
>
|
||
<div style={{ padding: '16px 0' }}>
|
||
<Typography.Text strong style={{ fontSize: 14, color: '#475569', marginBottom: 8, display: 'block' }}>
|
||
选中素材 ({selectedItems.size}个)
|
||
</Typography.Text>
|
||
<div style={{ marginBottom: 16 }}>
|
||
<div style={{
|
||
display: 'flex',
|
||
gap: 8,
|
||
marginBottom: 12,
|
||
alignItems: 'center',
|
||
}}>
|
||
<Typography.Text style={{ fontSize: 12, color: '#64748b' }}>统一修改名称：</Typography.Text>
|
||
<Input
|
||
value={unifiedFileName}
|
||
onChange={(e) => setUnifiedFileName(e.target.value)}
|
||
placeholder="输入名称后点击应用"
|
||
style={{ flex: 1, borderRadius: 8 }}
|
||
size="small"
|
||
/>
|
||
<Button
|
||
type="primary"
|
||
size="small"
|
||
onClick={() => {
|
||
if (unifiedFileName.trim() && selectedItems.size > 0) {
|
||
handleBatchUpdateFileName(Array.from(selectedItems), unifiedFileName);
|
||
}
|
||
}}
|
||
disabled={!unifiedFileName.trim() || selectedItems.size === 0}
|
||
style={{ borderRadius: 8 }}
|
||
>
|
||
应用
|
||
</Button>
|
||
</div>
|
||
<div style={{
|
||
maxHeight: 300,
|
||
overflow: 'auto',
|
||
border: '1px solid #f0f0f0',
|
||
borderRadius: 8,
|
||
padding: 12,
|
||
}}>
|
||
{(() => {
|
||
const itemMap = new Map<string, any>();
|
||
recordlist.forEach((group: any) => {
|
||
group.items.forEach((item: any) => {
|
||
const resourceId = getItemResourceId(item);
|
||
itemMap.set(resourceId, item);
|
||
});
|
||
});
|
||
return Array.from(selectedItems).map((itemId) => {
|
||
const item = itemMap.get(itemId);
|
||
return (
|
||
<div
|
||
key={itemId}
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: 12,
|
||
padding: '8px 0',
|
||
borderBottom: '1px solid #f5f5f5',
|
||
}}
|
||
>
|
||
<div style={{
|
||
width: 60,
|
||
height: 40,
|
||
borderRadius: 4,
|
||
backgroundColor: '#f5f5f5',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
overflow: 'hidden',
|
||
flexShrink: 0,
|
||
}}>
|
||
{(() => {
|
||
const coverField = filterMedia === 'video' ? item?.videoCoverUrl : item?.imageUrl;
|
||
if (!coverField) {
|
||
return <Typography.Text style={{ fontSize: 12, color: '#94a3b8' }}>预览</Typography.Text>;
|
||
}
|
||
const baseUrl = import.meta.env.VITE_API_BASE || "http://localhost:8000";
|
||
const cleanPath = coverField.startsWith('/') ? coverField.slice(1) : coverField;
|
||
const cleanBase = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
|
||
const coverUrl = `${cleanBase}/static/${cleanPath}&w=300&q=50`;
|
||
return (
|
||
<img
|
||
src={coverUrl}
|
||
alt=""
|
||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||
/>
|
||
);
|
||
})()}
|
||
</div>
|
||
<div style={{ flex: 1, minWidth: 0 }}>
|
||
<Typography.Text style={{ fontSize: 12, color: '#1e293b' }}>
|
||
{item?.fileName || `素材 ${item.id}`}
|
||
</Typography.Text>
|
||
</div>
|
||
<Input
|
||
value={materialFileNames.has(itemId) ? materialFileNames.get(itemId)! : item?.fileName || ''}
|
||
onChange={(e) => {
|
||
const newName = e.target.value;
|
||
const newNames = new Map(materialFileNames);
|
||
newNames.set(itemId, newName);
|
||
setMaterialFileNames(newNames);
|
||
// 防抖调用API
|
||
if (updateFilenameDebounceRef.current) {
|
||
clearTimeout(updateFilenameDebounceRef.current);
|
||
}
|
||
updateFilenameDebounceRef.current = setTimeout(() => {
|
||
handleUpdateFileName(itemId, newName);
|
||
}, 800);
|
||
}}
|
||
placeholder="输入新名称"
|
||
style={{ width: 200, borderRadius: 4 }}
|
||
size="small"
|
||
/>
|
||
</div>
|
||
);
|
||
});
|
||
})()}
|
||
</div>
|
||
</div>
|
||
{selectedOauthItems.map((oauthItem, index) => (
|
||
<div key={index} style={{ marginBottom: 16, padding: 12, border: '1px solid #e2e8f0', borderRadius: 8 }}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
|
||
<Typography.Text strong style={{ fontSize: 14, color: '#475569' }}>
|
||
授权账户 {index + 1}
|
||
</Typography.Text>
|
||
{selectedOauthItems.length > 1 && (
|
||
<Button
|
||
type="text"
|
||
danger
|
||
onClick={() => {
|
||
const newOauthItems = [...selectedOauthItems];
|
||
const newAccountIdInputs = [...accountIdInputs];
|
||
const newAccountIdLists = [...accountIdLists];
|
||
const newOauthSelectOpens = [...oauthSelectOpens];
|
||
newOauthItems.splice(index, 1);
|
||
newAccountIdInputs.splice(index, 1);
|
||
newAccountIdLists.splice(index, 1);
|
||
newOauthSelectOpens.splice(index, 1);
|
||
setSelectedOauthItems(newOauthItems);
|
||
setAccountIdInputs(newAccountIdInputs);
|
||
setAccountIdLists(newAccountIdLists);
|
||
setOauthSelectOpens(newOauthSelectOpens);
|
||
}}
|
||
>
|
||
删除
|
||
</Button>
|
||
)}
|
||
</div>
|
||
<Select
|
||
value={oauthItem}
|
||
onChange={(value) => {
|
||
const newOauthItems = [...selectedOauthItems];
|
||
newOauthItems[index] = value as { value: string; label: string } | undefined;
|
||
setSelectedOauthItems(newOauthItems);
|
||
}}
|
||
placeholder="点击选择授权账户"
|
||
style={{ width: '100%', marginBottom: 12, borderRadius: 8 }}
|
||
popupRender={() => (
|
||
<div style={{ padding: 8, width: 800, maxHeight: 500, overflow: 'auto' }}>
|
||
<Table
|
||
dataSource={oauthList}
|
||
columns={[
|
||
{
|
||
title: '授权账户ID',
|
||
dataIndex: 'accountId',
|
||
key: 'accountId',
|
||
width: 120,
|
||
},
|
||
{
|
||
title: '授权账户名称',
|
||
dataIndex: 'accountName',
|
||
key: 'accountName',
|
||
width: 120,
|
||
},
|
||
{
|
||
title: '授权应用ID',
|
||
dataIndex: 'appid',
|
||
key: 'appid',
|
||
width: 120,
|
||
},
|
||
{
|
||
title: '授权用户ID',
|
||
dataIndex: 'accountUserid',
|
||
key: 'accountUserid',
|
||
width: 120,
|
||
},
|
||
{
|
||
title: '授权账户角色',
|
||
dataIndex: 'accountRole',
|
||
key: 'accountRole',
|
||
width: 160,
|
||
render: (role: string) => {
|
||
const roleMap: Record<string, string> = {
|
||
ADVERTISER: '客户',
|
||
CUSTOMER_ADMIN: '普通版工作台-管理员',
|
||
CUSTOMER_OPERATOR: '普通版工作台-协作者',
|
||
AGENT: '代理商',
|
||
CHILD_AGENT: '二级代理商',
|
||
PLATFORM_ROLE_STAR: '星图账户',
|
||
PLATFORM_ROLE_SHOP_ACCOUNT: '抖音店铺账户',
|
||
PLATFORM_ROLE_QIANCHUAN_AGENT: '千川代理商',
|
||
PLATFORM_ROLE_STAR_AGENT: '星图代理商',
|
||
PLATFORM_ROLE_AWEME: '抖音号',
|
||
PLATFORM_ROLE_STAR_MCN: '星图MCN机构',
|
||
PLATFORM_ROLE_STAR_ISV: '星图服务商',
|
||
AGENT_SYSTEM_ACCOUNT: '代理商系统账户',
|
||
PLATFORM_ROLE_LOCAL_AGENT: '本地推代理商',
|
||
PLATFORM_ROLE_YUNTU_BRAND_ISV_ADMIN: '云图品牌服务商管理员',
|
||
PLATFORM_ROLE_LIFE: '抖音来客账户',
|
||
PLATFORM_ROLE_ENTERPRISE_BP_ADMIN: '升级版工作台管理员',
|
||
PLATFORM_ROLE_ENTERPRISE_BP_OPERATOR: '升级版工作台协作者',
|
||
};
|
||
return roleMap[role] || role;
|
||
},
|
||
},
|
||
{
|
||
title: '授权账户用户名',
|
||
dataIndex: 'accountUsername',
|
||
key: 'accountUsername',
|
||
width: 120,
|
||
render: (text: string) => <span style={{ color: text ? '#1e293b' : '#94a3b8' }}>{text || '-'}</span>,
|
||
},
|
||
]}
|
||
loading={oauthLoading}
|
||
pagination={{
|
||
current: oauthPage,
|
||
pageSize: oauthPageSize,
|
||
total: oauthTotal,
|
||
showSizeChanger: true,
|
||
showTotal: (total) => `共 ${total} 条记录`,
|
||
onChange: (page, size) => {
|
||
setOauthPage(page);
|
||
setOauthPageSize(size);
|
||
loadOAuthList(page, size);
|
||
},
|
||
}}
|
||
rowKey="id"
|
||
size="small"
|
||
scroll={{ x: 'max-content' }}
|
||
onRow={(record) => ({
|
||
onClick: () => {
|
||
const id = String(record.id);
|
||
const newOauthItems = [...selectedOauthItems];
|
||
newOauthItems[index] = { value: id, label: String(record.accountId)+'-'+(record.accountName || '-') };
|
||
setSelectedOauthItems(newOauthItems);
|
||
const newOauthSelectOpens = [...oauthSelectOpens];
|
||
newOauthSelectOpens[index] = false;
|
||
setOauthSelectOpens(newOauthSelectOpens);
|
||
},
|
||
style: {
|
||
cursor: 'pointer',
|
||
backgroundColor: oauthItem?.value === String(record.id) ? '#e6f7ff' : undefined,
|
||
},
|
||
})}
|
||
/>
|
||
</div>
|
||
)}
|
||
open={oauthSelectOpens[index]}
|
||
onOpenChange={(open) => {
|
||
const newOauthSelectOpens = [...oauthSelectOpens];
|
||
newOauthSelectOpens[index] = open;
|
||
setOauthSelectOpens(newOauthSelectOpens);
|
||
if (open) {
|
||
loadOAuthList(1, oauthPageSize);
|
||
}
|
||
}}
|
||
labelInValue
|
||
fieldNames={{ label: 'accountUserid', value: 'id' }}
|
||
/>
|
||
<Typography.Text strong style={{ fontSize: 14, color: '#475569', marginBottom: 8, display: 'block' }}>
|
||
粘贴账户ID（每行一个或用逗号分隔）
|
||
</Typography.Text>
|
||
<Input.TextArea
|
||
value={accountIdInputs[index]}
|
||
onChange={(e) => {
|
||
const value = e.target.value;
|
||
const newAccountIdInputs = [...accountIdInputs];
|
||
newAccountIdInputs[index] = value;
|
||
setAccountIdInputs(newAccountIdInputs);
|
||
const ids = value.split(/[\n,]/)
|
||
.map(line => line.trim())
|
||
.filter(line => line.length > 0);
|
||
const uniqueIds = [...new Set(ids)];
|
||
const textAccounts = uniqueIds.map(id => ({ accountId: id }));
|
||
const seen = new Set<string>();
|
||
const finalAccounts = textAccounts.filter(a => {
|
||
if (seen.has(a.accountId)) return false;
|
||
seen.add(a.accountId);
|
||
return true;
|
||
});
|
||
const newAccountIdLists = [...accountIdLists];
|
||
newAccountIdLists[index] = finalAccounts;
|
||
setAccountIdLists(newAccountIdLists);
|
||
}}
|
||
placeholder="粘贴账户ID，每行一个或用逗号分隔，例如：
|
||
10001,10002,10003
|
||
10004"
|
||
rows={3}
|
||
style={{ borderRadius: 8 }}
|
||
/>
|
||
</div>
|
||
))}
|
||
<Button
|
||
type="dashed"
|
||
block
|
||
onClick={() => {
|
||
setSelectedOauthItems([...selectedOauthItems, undefined]);
|
||
setAccountIdInputs([...accountIdInputs, '']);
|
||
setAccountIdLists([...accountIdLists, []]);
|
||
setOauthSelectOpens([...oauthSelectOpens, false]);
|
||
}}
|
||
style={{ borderRadius: 8, marginBottom: 16 }}
|
||
>
|
||
+ 新增授权账户组
|
||
</Button>
|
||
|
||
{/* 操作按钮 */}
|
||
<div style={{
|
||
display: 'flex',
|
||
gap: 12,
|
||
justifyContent: 'flex-end',
|
||
}}>
|
||
<Button
|
||
onClick={() => {
|
||
setUploadConfigModalVisible(false);
|
||
setAccountIdLists([[]]);
|
||
setAccountIdInputs(['']);
|
||
setSelectedOauthItems([undefined]);
|
||
setMaterialFileNames(new Map());
|
||
setUnifiedFileName('');
|
||
}}
|
||
style={{ borderRadius: 8 }}
|
||
>
|
||
取消
|
||
</Button>
|
||
<Button
|
||
type="primary"
|
||
onClick={handleStartBatchUpload}
|
||
loading={uploading}
|
||
disabled={uploading || accountIdLists.every(list => list.length === 0)}
|
||
style={{ borderRadius: 8 }}
|
||
>
|
||
{uploading ? '上传中...' : '开始上传'}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
|
||
{/* 上传任务历史弹窗 */}
|
||
<Modal
|
||
title="上传任务历史"
|
||
open={uploadHistoryModalVisible}
|
||
onCancel={() => setUploadHistoryModalVisible(false)}
|
||
footer={null}
|
||
width={800}
|
||
style={{ borderRadius: 8 }}
|
||
mask={{ closable: false }}
|
||
>
|
||
<div style={{ marginBottom: 16 }}>
|
||
<Select
|
||
value={uploadHistoryStatus}
|
||
onChange={(value) => setUploadHistoryStatus(value)}
|
||
placeholder="选择状态"
|
||
style={{ width: 200, marginRight: 12 }}
|
||
options={[
|
||
{ value: '1', label: '待上传' },
|
||
{ value: '2', label: '上传中' },
|
||
{ value: '3', label: '上传成功' },
|
||
{ value: '4', label: '上传失败' },
|
||
]}
|
||
allowClear
|
||
/>
|
||
<Button
|
||
type="primary"
|
||
onClick={handleUploadHistorySearch}
|
||
style={{ borderRadius: 8 }}
|
||
>
|
||
查询
|
||
</Button>
|
||
</div>
|
||
<Table
|
||
dataSource={uploadHistoryList}
|
||
columns={[
|
||
{
|
||
title: '素材名称',
|
||
dataIndex: 'fileName',
|
||
key: 'fileName',
|
||
width: 200,
|
||
},
|
||
{
|
||
title: '账户ID',
|
||
dataIndex: 'advertiserId',
|
||
key: 'advertiserId',
|
||
width: 180,
|
||
},
|
||
// {
|
||
// title: '状态',
|
||
// dataIndex: 'status',
|
||
// key: 'status',
|
||
// width: 100,
|
||
// render: (status: number, record: any) => {
|
||
// const statusColorMap: Record<number, string> = {
|
||
// 1: '#f59e0b',
|
||
// 2: '#6366f1',
|
||
// 3: '#10b981',
|
||
// 4: '#ef4444',
|
||
// };
|
||
// return (
|
||
// <Tag color={statusColorMap[status] || '#64748b'} style={{ borderRadius: 4 }}>
|
||
// {record.status_text || status}
|
||
// </Tag>
|
||
// );
|
||
// },
|
||
// },
|
||
{
|
||
title: '状态',
|
||
dataIndex: 'status',
|
||
key: 'status',
|
||
width: 100,
|
||
render: (status: string) => {
|
||
const statusMap: Record<string, string> = {
|
||
'1': '待上传',
|
||
'2': '上传中',
|
||
'3': '上传成功',
|
||
'4': '上传失败',
|
||
};
|
||
const statusColorMap: Record<string, string> = {
|
||
'1': '#f59e0b',
|
||
'2': '#6366f1',
|
||
'3': '#10b981',
|
||
'4': '#ef4444',
|
||
};
|
||
return (
|
||
<Tag color={statusColorMap[status] || '#64748b'} style={{ borderRadius: 4 }}>
|
||
{statusMap[status] || status}
|
||
</Tag>
|
||
);
|
||
},
|
||
},
|
||
{
|
||
title: '备注',
|
||
dataIndex: 'note',
|
||
key: 'note',
|
||
width: 250,
|
||
ellipsis: true,
|
||
render: (note: string) => (
|
||
<span style={{ color: '#94a3b8' }}>
|
||
{note || '-'}
|
||
</span>
|
||
),
|
||
},
|
||
{
|
||
title: '创建时间',
|
||
dataIndex: 'created_at',
|
||
key: 'created_at',
|
||
width: 180,
|
||
render: (date: string) => dayjs(date).format('YYYY-MM-DD HH:mm:ss'),
|
||
},
|
||
|
||
]}
|
||
loading={uploadHistoryLoading}
|
||
scroll={{ x: 'max-content' }}
|
||
pagination={{
|
||
current: uploadHistoryPage,
|
||
pageSize: uploadHistoryPageSize,
|
||
total: uploadHistoryTotal,
|
||
showSizeChanger: true,
|
||
showTotal: (total) => `共 ${total} 条记录`,
|
||
onChange: handleUploadHistoryPageChange,
|
||
}}
|
||
rowKey={(record, index) => record.task_id || record.resource_id || index}
|
||
size="small"
|
||
/>
|
||
</Modal>
|
||
|
||
{/* 预览弹窗 */}
|
||
{previewVisible && previewItem && (
|
||
<div
|
||
style={{
|
||
position: 'fixed',
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
background: 'rgba(0,0,0,0.85)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
zIndex: 1000,
|
||
padding: 16,
|
||
boxSizing: 'border-box',
|
||
overflow: 'auto',
|
||
}}
|
||
onClick={handleClosePreview}
|
||
>
|
||
<div
|
||
style={{
|
||
background: '#fff',
|
||
borderRadius: 16,
|
||
padding: 0,
|
||
width: '100%',
|
||
maxWidth: '1200px',
|
||
maxHeight: '95vh',
|
||
minHeight: '300px',
|
||
overflow: 'hidden',
|
||
position: 'relative',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
|
||
}}
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
{/* 头部 */}
|
||
<div style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
padding: '12px 16px',
|
||
borderBottom: '1px solid #f0f0f0',
|
||
flexShrink: 0,
|
||
}}>
|
||
<Typography.Title level={5} style={{ margin: 0, color: '#1a1a2e', fontSize: 16 }}>
|
||
{previewItem.title || '预览'}
|
||
</Typography.Title>
|
||
<Button
|
||
icon={<XOutlined />}
|
||
onClick={handleClosePreview}
|
||
style={{
|
||
background: 'transparent',
|
||
border: 'none',
|
||
color: '#94a3b8',
|
||
fontSize: 16,
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
{/* 内容区域 */}
|
||
<div style={{
|
||
flex: 1,
|
||
display: 'flex',
|
||
flexWrap: 'wrap',
|
||
height: '500px',
|
||
gap: 20,
|
||
padding: 20,
|
||
overflow: 'auto',
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
}}>
|
||
{/* 媒体预览 */}
|
||
<div style={{
|
||
flex: 1,
|
||
minWidth: '280px',
|
||
maxWidth: '800px',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
minHeight: '200px',
|
||
}}>
|
||
{/* 检查媒体是否过期 */}
|
||
{isMediaExpired(previewItem.videoUrl || previewItem.imageUrl) ? (
|
||
<div style={{ textAlign: 'center', padding: '40px' }}>
|
||
<div style={{ fontSize: 48, marginBottom: 16 }}>⚠️</div>
|
||
<p style={{ fontSize: 16, color: '#ff4d4f', marginBottom: 16 }}>图片/视频资源已过期，请刷新重新加载～</p>
|
||
</div>
|
||
) : filterMedia === 'video' ? (
|
||
<video
|
||
ref={videoRef}
|
||
src={`${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${previewItem.videoUrl}`}
|
||
controls
|
||
autoPlay
|
||
style={{
|
||
maxWidth: '100%',
|
||
maxHeight: '55vh',
|
||
borderRadius: 8,
|
||
objectFit: 'contain',
|
||
}}
|
||
/>
|
||
) : (
|
||
<img
|
||
src={`${import.meta.env.VITE_API_BASE || "http://localhost:8000"}/static${previewItem.imageUrl}&w=300&q=50`}
|
||
alt="预览"
|
||
style={{
|
||
maxWidth: '100%',
|
||
maxHeight: '55vh',
|
||
objectFit: 'contain',
|
||
borderRadius: 8
|
||
}}
|
||
/>
|
||
)}
|
||
</div>
|
||
|
||
{/* 参数信息 */}
|
||
<div style={{
|
||
width: '100%',
|
||
minWidth: '280px',
|
||
maxWidth: '320px',
|
||
background: '#f8fafc',
|
||
borderRadius: 12,
|
||
padding: 20,
|
||
maxHeight: '55vh',
|
||
overflowY: 'auto',
|
||
overflowX: 'hidden',
|
||
}}>
|
||
<Typography.Text strong style={{ fontSize: 14, color: '#475569', display: 'block', marginBottom: 16 }}>
|
||
文件信息
|
||
</Typography.Text>
|
||
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||
{/* ID */}
|
||
{/* <div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||
<span style={{ color: '#94a3b8', fontSize: 13 }}>ID</span>
|
||
<span style={{ color: '#334155', fontSize: 13, fontWeight: 500 }}>
|
||
{previewItem.id || '-'}
|
||
</span>
|
||
</div> */}
|
||
|
||
{/* 类型 */}
|
||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||
<span style={{ color: '#94a3b8', fontSize: 13 }}>类型</span>
|
||
<span style={{ color: '#334155', fontSize: 13, fontWeight: 500 }}>
|
||
{filterMedia === 'video' ? '视频' : '图片'}
|
||
</span>
|
||
</div>
|
||
<div style={{ display: 'flex', gap: 12 }}>
|
||
<span style={{ color: '#94a3b8', fontSize: 13, flexShrink: 0, width: 40 }}>请求</span>
|
||
<span style={{ color: '#334155', fontSize: 13, fontWeight: 500, flex: 1, wordBreak: 'break-all' }}>
|
||
{previewItem.originalPrompt}
|
||
</span>
|
||
</div>
|
||
|
||
{/* 分辨率 */}
|
||
{filterMedia === 'image' && (
|
||
<>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||
<span style={{ color: '#94a3b8', fontSize: 13 }}>比例</span>
|
||
<span style={{ color: '#334155', fontSize: 13, fontWeight: 500 }}>
|
||
{previewItem.imageProportion}
|
||
</span>
|
||
</div>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||
<span style={{ color: '#94a3b8', fontSize: 13 }}>分辨率</span>
|
||
<span style={{ color: '#334155', fontSize: 13, fontWeight: 500 }}>
|
||
{previewItem.imageSize}
|
||
</span>
|
||
</div>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||
<span style={{ color: '#94a3b8', fontSize: 13 }}>尺寸</span>
|
||
<span style={{ color: '#334155', fontSize: 13, fontWeight: 500 }}>
|
||
{previewItem.imagePx}
|
||
</span>
|
||
</div>
|
||
</>
|
||
)}
|
||
{filterMedia === 'video' && (
|
||
<>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||
<span style={{ color: '#94a3b8', fontSize: 13 }}>比例</span>
|
||
<span style={{ color: '#334155', fontSize: 13, fontWeight: 500 }}>
|
||
{previewItem.aspectRatio}
|
||
</span>
|
||
</div>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||
<span style={{ color: '#94a3b8', fontSize: 13 }}>分辨率</span>
|
||
<span style={{ color: '#334155', fontSize: 13, fontWeight: 500 }}>
|
||
{previewItem.resolution}
|
||
</span>
|
||
</div>
|
||
{/* <div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||
<span style={{ color: '#94a3b8', fontSize: 13 }}>尺寸</span>
|
||
<span style={{ color: '#334155', fontSize: 13, fontWeight: 500 }}>
|
||
{previewItem.imagePx}
|
||
</span>
|
||
</div> */}
|
||
</>
|
||
)}
|
||
|
||
{/* 时长（视频） */}
|
||
{filterMedia === 'video' && (
|
||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||
<span style={{ color: '#94a3b8', fontSize: 13 }}>时长</span>
|
||
<span style={{ color: '#334155', fontSize: 13, fontWeight: 500 }}>
|
||
{`${previewItem.duration}秒` || '-'}
|
||
</span>
|
||
</div>
|
||
)}
|
||
|
||
{/* 文件大小 */}
|
||
{/* <div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||
<span style={{ color: '#94a3b8', fontSize: 13 }}>文件大小</span>
|
||
<span style={{ color: '#334155', fontSize: 13, fontWeight: 500 }}>
|
||
{previewItem.size ? formatFileSize(previewItem.size) : '-'}
|
||
</span>
|
||
</div> */}
|
||
|
||
{/* 创建时间 */}
|
||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||
<span style={{ color: '#94a3b8', fontSize: 13 }}>创建时间</span>
|
||
<span style={{ color: '#334155', fontSize: 13, fontWeight: 500 }}>
|
||
{formatDateTime(previewItem.createdAt || previewItem.generatedDate)}
|
||
</span>
|
||
</div>
|
||
|
||
{/* 生成引擎 */}
|
||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||
<span style={{ color: '#94a3b8', fontSize: 13 }}>生成引擎</span>
|
||
<span style={{ color: '#334155', fontSize: 13, fontWeight: 500 }}>
|
||
{previewItem.engine || previewItem.engineName || '-'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 分隔线 */}
|
||
<div style={{ borderTop: '1px dashed #e2e8f0', margin: '16px 0' }} />
|
||
|
||
|
||
{previewItem.mediaReferences && previewItem.mediaReferences.length > 0 && (
|
||
<>
|
||
<Typography.Text strong style={{ fontSize: 14, color: '#475569', display: 'block', marginBottom: 12 }}>
|
||
依靠附件
|
||
</Typography.Text>
|
||
{previewItem.mediaReferences.map((item, index) => (
|
||
<div
|
||
key={item.url}
|
||
onClick={() => {
|
||
// 暂停视频
|
||
if (videoRef.current) {
|
||
videoRef.current.pause();
|
||
}
|
||
const url = `${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${item.url}`;
|
||
window.open(url, '_blank');
|
||
}}
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: 8,
|
||
padding: 8,
|
||
borderRadius: 6,
|
||
cursor: 'pointer',
|
||
backgroundColor: '#f1f5f9',
|
||
marginBottom: 4,
|
||
transition: 'background-color 0.2s',
|
||
}}
|
||
onMouseEnter={(e) => {
|
||
(e.currentTarget as HTMLElement).style.backgroundColor = '#e2e8f0';
|
||
}}
|
||
onMouseLeave={(e) => {
|
||
(e.currentTarget as HTMLElement).style.backgroundColor = '#f1f5f9';
|
||
}}
|
||
>
|
||
{item.type === 'image' ? (
|
||
<PictureOutlined style={{ color: '#3b82f6', fontSize: 14 }} />
|
||
) : (
|
||
<VideoCameraOutlined style={{ color: '#f59e0b', fontSize: 14 }} />
|
||
)}
|
||
<span style={{ color: '#334155', fontSize: 13 }}>
|
||
{item.name || `媒体${index + 1}`}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</>
|
||
)}
|
||
{/* 操作按钮 */}
|
||
<div >
|
||
<div style={{ display: 'flex', gap: 12, marginTop: 20 }}>
|
||
<Button
|
||
type="primary"
|
||
icon={<DownloadOutlined />}
|
||
onClick={() => {
|
||
// 暂停视频
|
||
if (videoRef.current) {
|
||
videoRef.current.pause();
|
||
}
|
||
const url = `${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${previewItem.videoUrl || previewItem.imageUrl}&download=1`;
|
||
window.open(url, '_blank');
|
||
}}
|
||
style={{ flex: 1, borderRadius: 8 }}
|
||
disabled={isMediaExpired(previewItem.videoUrl || previewItem.imageUrl)}
|
||
>
|
||
{isMediaExpired(previewItem.videoUrl || previewItem.imageUrl) ? '资源已过期' : '下载'}
|
||
</Button>
|
||
<Button
|
||
onClick={handleClosePreview}
|
||
style={{ flex: 1, borderRadius: 8 }}
|
||
>
|
||
关闭
|
||
</Button>
|
||
</div>
|
||
<div>
|
||
<Button
|
||
type="primary"
|
||
onClick={handleSinglePushToMedia}
|
||
style={{ width: '100%', borderRadius: 8, marginTop: 20 }}
|
||
disabled={isMediaExpired(previewItem.videoUrl || previewItem.imageUrl)}
|
||
>
|
||
推送媒体后台
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// 文件大小格式化
|
||
function formatFileSize(bytes: number): string {
|
||
if (bytes === 0) return '0 B';
|
||
const k = 1024;
|
||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||
}
|
||
|
||
// 添加旋转动画样式
|
||
const styleSheet = document.createElement('style');
|
||
styleSheet.textContent = `
|
||
@keyframes spin {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
`;
|
||
document.head.appendChild(styleSheet);
|
||
|
||
// 日期格式化（年月日时分秒）
|
||
function formatDateTime(dateString: string): string {
|
||
if (!dateString) return '-';
|
||
const date = new Date(dateString);
|
||
if (isNaN(date.getTime())) return '-';
|
||
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
const hours = String(date.getHours()).padStart(2, '0');
|
||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||
|
||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||
}
|
||
|
||
export default GeneratedRecord;
|