2159 lines
116 KiB
TypeScript
2159 lines
116 KiB
TypeScript
import React, { useEffect, useState, useRef } from 'react';
|
||
import { Button, Empty, Input, Select, Space, Typography, Tag, message, Modal, Table, DatePicker, Tabs, Transfer, Tooltip } from 'antd';
|
||
import dayjs from 'dayjs';
|
||
import JSZip from 'jszip';
|
||
import {
|
||
FilterOutlined,
|
||
VideoCameraOutlined,
|
||
PictureOutlined,
|
||
FolderOpenOutlined,
|
||
FileTextOutlined,
|
||
DownloadOutlined,
|
||
ClockCircleOutlined,
|
||
UploadOutlined,
|
||
ReloadOutlined,
|
||
StarOutlined,
|
||
PlayCircleOutlined,
|
||
|
||
} from '@ant-design/icons';
|
||
import { gethistory, gethistoryItems, getOAuthList, asyncBatchUploadMaterial, updateFilename, getUploadHistory, getAllOAuthAccountList, getOpenTypeAll, getPreTestList, getDefaultPreTest } from '../api';
|
||
|
||
const { Search } = Input;
|
||
const { Text } = Typography;
|
||
|
||
const GeneratedRecord: React.FC = () => {
|
||
const [filterType, setFilterType] = useState<'project' | 'creation' | 'hot_opening_replicate' | 'shot_replicate'>('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<Map<string, ReturnType<typeof setTimeout>>>(new Map());
|
||
|
||
useEffect(() => {
|
||
return () => {
|
||
updateFilenameDebounceRef.current.forEach(timer => clearTimeout(timer));
|
||
updateFilenameDebounceRef.current.clear();
|
||
};
|
||
}, []);
|
||
const [oauthPage, setOauthPage] = useState(1);
|
||
const [oauthPageSize, setOauthPageSize] = useState(10);
|
||
const [oauthSelectOpens, setOauthSelectOpens] = useState<boolean[]>([false]);
|
||
|
||
const [accountTab, setAccountTab] = useState<'new' | 'history'>('new');
|
||
const [historyOAuthList, setHistoryOAuthList] = useState<any[]>([]);
|
||
const [historyOAuthLoading, setHistoryOAuthLoading] = useState(false);
|
||
const [selectedHistoryAccounts, setSelectedHistoryAccounts] = useState<any[]>([]);
|
||
const [openTypeMap, setOpenTypeMap] = useState<Record<number, string>>({});
|
||
|
||
const [isPreTest, setIsPreTest] = useState<string>('2');
|
||
const [preTestTemplate, setPreTestTemplate] = useState<string>('');
|
||
const [preTestTemplates, setPreTestTemplates] = useState<any[]>([]);
|
||
const [preTestTemplatesLoading, setPreTestTemplatesLoading] = useState(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());
|
||
// 从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 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;
|
||
const cleanBase = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
|
||
if (isImage) {
|
||
return `${cleanBase}/static/${cleanPath}&w=300&q=50`;
|
||
}
|
||
return `${cleanBase}/${cleanPath}`;
|
||
};
|
||
// 下载文件
|
||
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 loadPreTestTemplates = async () => {
|
||
setPreTestTemplatesLoading(true);
|
||
try {
|
||
const res = await getPreTestList({ page: 1, pageSize: 100 });
|
||
setPreTestTemplates(res.data?.data || res.data || []);
|
||
} catch (error) {
|
||
console.error('加载前测模板失败:', error);
|
||
} finally {
|
||
setPreTestTemplatesLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleBatchUploadSelected = () => {
|
||
if (selectedItems.size === 0) {
|
||
message.warning('请先选择要推送的媒体');
|
||
return;
|
||
}
|
||
setAccountIdLists([[]]);
|
||
setAccountIdInputs(['']);
|
||
setSelectedOauthItems([undefined]);
|
||
setIsPreTest('2');
|
||
setPreTestTemplate('');
|
||
loadPreTestTemplates();
|
||
setUploadConfigModalVisible(true);
|
||
};
|
||
const handleSinglePushToMedia = () => {
|
||
if (!previewItem) return;
|
||
const resourceId = getItemResourceId(previewItem);
|
||
setSelectedItems(new Set([resourceId]));
|
||
setAccountIdLists([[]]);
|
||
setAccountIdInputs(['']);
|
||
setSelectedOauthItems([undefined]);
|
||
setMaterialFileNames(new Map());
|
||
setUnifiedFileName('');
|
||
setIsPreTest('2');
|
||
setPreTestTemplate('');
|
||
loadPreTestTemplates();
|
||
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 loadHistoryOAuthList = async () => {
|
||
setHistoryOAuthLoading(true);
|
||
try {
|
||
const [oauthRes, openTypeRes] = await Promise.all([
|
||
getAllOAuthAccountList(),
|
||
getOpenTypeAll(),
|
||
]);
|
||
const oauthData = oauthRes?.data || [];
|
||
setHistoryOAuthList(oauthData);
|
||
|
||
const openTypeData = openTypeRes?.data || [];
|
||
const map: Record<number, string> = {};
|
||
openTypeData.forEach((item: any) => {
|
||
map[item.openType] = item.typeName;
|
||
});
|
||
setOpenTypeMap(map);
|
||
} catch (error) {
|
||
console.error('加载历史授权账户列表失败:', error);
|
||
setHistoryOAuthList([]);
|
||
setOpenTypeMap({});
|
||
} finally {
|
||
setHistoryOAuthLoading(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 () => {
|
||
if (selectedItems.size === 0) {
|
||
message.warning('请先选择要推送的媒体');
|
||
return;
|
||
}
|
||
const itemMap = new Map<string, any>();
|
||
recordlist.forEach((group: any) => {
|
||
group.items.forEach((item: any) => {
|
||
const resourceId = getItemResourceId(item);
|
||
itemMap.set(resourceId, item);
|
||
});
|
||
});
|
||
let tasks: {
|
||
advertiser_ids: string[];
|
||
resource_ids: string[];
|
||
is_pre_test: string;
|
||
pre_test_template: string;
|
||
oauth_id: string;
|
||
source_model: string;
|
||
}[] = [];
|
||
if (accountTab === 'new') {
|
||
const validOauthItems = selectedOauthItems.filter(item => item !== undefined);
|
||
if (validOauthItems.length === 0) {
|
||
message.warning('请先选择授权账户');
|
||
return;
|
||
}
|
||
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;
|
||
}
|
||
const sourceModelMap = new Map<string, string[]>();
|
||
for (const itemId of selectedItems) {
|
||
const item = itemMap.get(itemId);
|
||
let sourceModel: string;
|
||
if (item && hasGeneratedResourceId(item)) {
|
||
sourceModel = 'generated_resources';
|
||
}
|
||
// else {
|
||
// sourceModel = filterType === 'project' ? 'generation_records' : 'chat_generation_tasks';
|
||
// }
|
||
if (!sourceModelMap.has(sourceModel)) {
|
||
sourceModelMap.set(sourceModel, []);
|
||
}
|
||
sourceModelMap.get(sourceModel)!.push(itemId);
|
||
}
|
||
sourceModelMap.forEach((resourceIds, sourceModel) => {
|
||
tasks.push({
|
||
advertiser_ids: advertiserIds,
|
||
resource_ids: resourceIds,
|
||
oauth_id: oauthItem.value,
|
||
source_model: sourceModel,
|
||
is_pre_test: isPreTest,
|
||
pre_test_template: preTestTemplate,
|
||
});
|
||
});
|
||
}
|
||
} else {
|
||
if (selectedHistoryAccounts.length === 0) {
|
||
message.warning('请先选择历史账户');
|
||
return;
|
||
}
|
||
for (const account of selectedHistoryAccounts) {
|
||
const sourceModelMap = new Map<string, string[]>();
|
||
for (const itemId of selectedItems) {
|
||
const item = itemMap.get(itemId);
|
||
let sourceModel: string;
|
||
if (item && hasGeneratedResourceId(item)) {
|
||
sourceModel = 'generated_resources';
|
||
} else {
|
||
sourceModel = filterType === 'project' ? 'generation_records' : 'chat_generation_tasks';
|
||
}
|
||
if (!sourceModelMap.has(sourceModel)) {
|
||
sourceModelMap.set(sourceModel, []);
|
||
}
|
||
sourceModelMap.get(sourceModel)!.push(itemId);
|
||
}
|
||
sourceModelMap.forEach((resourceIds, sourceModel) => {
|
||
tasks.push({
|
||
advertiser_ids: [account.advertiserId],
|
||
resource_ids: resourceIds,
|
||
oauth_id: String(account.oauthId),
|
||
source_model: sourceModel,
|
||
is_pre_test: isPreTest,
|
||
pre_test_template: preTestTemplate,
|
||
});
|
||
});
|
||
}
|
||
}
|
||
|
||
setUploading(true);
|
||
try {
|
||
const res = await asyncBatchUploadMaterial({ tasks });
|
||
if (res.errors?.length > 0) {
|
||
message.warning(res.message);
|
||
} else if (res.code === 0) {
|
||
message.success(res.message);
|
||
} else {
|
||
message.error(res.message);
|
||
}
|
||
setIsSelectionMode(false);
|
||
setSelectedItems(new Set());
|
||
setUploadConfigModalVisible(false);
|
||
setAccountIdLists([[]]);
|
||
setAccountIdInputs(['']);
|
||
setSelectedOauthItems([undefined]);
|
||
setSelectedHistoryAccounts([]);
|
||
setMaterialFileNames(new Map());
|
||
setUnifiedFileName('');
|
||
setIsPreTest('2');
|
||
setPreTestTemplate('');
|
||
} 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 historySource = '';
|
||
if (filterType === 'project') {
|
||
historySource = 'generation_record';
|
||
} else if (filterType === 'hot_opening_replicate') {
|
||
historySource = 'hot_opening_replicate';
|
||
} else if (filterType === 'shot_replicate') {
|
||
historySource = 'shot_replicate';
|
||
}
|
||
let parameters = `?gen_type=${filterMedia}&page=${Pagebreak.page}&page_size=${Pagebreak.pageSize}`;
|
||
if (historySource) {
|
||
parameters = `?gen_type=${filterMedia}&history_source=${historySource}&page=${Pagebreak.page}&page_size=${Pagebreak.pageSize}`;
|
||
}
|
||
if (selectedDate) {
|
||
let parameters = `${selectedDate}?gen_type=${filterMedia}&page=${Pagebreak.page}&page_size=${Pagebreak.pageSize}`;
|
||
if (historySource) {
|
||
parameters = `${selectedDate}?gen_type=${filterMedia}&history_source=${historySource}&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 historySource = '';
|
||
if (filterType === 'project') {
|
||
historySource = 'generation_record';
|
||
} else if (filterType === 'hot_opening_replicate') {
|
||
historySource = 'hot_opening_replicate';
|
||
} else if (filterType === 'shot_replicate') {
|
||
historySource = 'shot_replicate';
|
||
}
|
||
let parameters = `${time}?gen_type=${filterMedia}&page=${addpage}&page_size=${Pagebreak.pageSize}`;
|
||
if (historySource) {
|
||
parameters = `${time}?gen_type=${filterMedia}&history_source=${historySource}&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>
|
||
<Button
|
||
type={filterType === 'hot_opening_replicate' ? 'primary' : 'default'}
|
||
onClick={() => {
|
||
setFilterType('hot_opening_replicate');
|
||
setIsSelectionMode(false);
|
||
setSelectedItems(new Set());
|
||
}}
|
||
style={{
|
||
borderRadius: 8,
|
||
background: filterType === 'hot_opening_replicate'
|
||
? 'linear-gradient(135deg, #6366f1, #8b5cf6)'
|
||
: '#f8f9fc',
|
||
border: filterType === 'hot_opening_replicate' ? 'none' : '1px solid #e2e8f0',
|
||
color: filterType === 'hot_opening_replicate' ? '#fff' : '#64748b',
|
||
fontWeight: 600,
|
||
}}
|
||
icon={<StarOutlined />}
|
||
>
|
||
爆款开头复刻
|
||
</Button>
|
||
<Button
|
||
type={filterType === 'shot_replicate' ? 'primary' : 'default'}
|
||
onClick={() => {
|
||
setFilterType('shot_replicate');
|
||
setIsSelectionMode(false);
|
||
setSelectedItems(new Set());
|
||
}}
|
||
style={{
|
||
borderRadius: 8,
|
||
background: filterType === 'shot_replicate'
|
||
? 'linear-gradient(135deg, #6366f1, #8b5cf6)'
|
||
: '#f8f9fc',
|
||
border: filterType === 'shot_replicate' ? 'none' : '1px solid #e2e8f0',
|
||
color: filterType === 'shot_replicate' ? '#fff' : '#64748b',
|
||
fontWeight: 600,
|
||
}}
|
||
icon={<PlayCircleOutlined />}
|
||
>
|
||
拆镜复刻
|
||
</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) => {
|
||
const displayUrl = filterMedia === 'video' && item.videoCoverUrl
|
||
? buildUrl(item.videoCoverUrl, true)
|
||
: buildUrl(filterMedia === 'video' ? item.videoUrl : item.imageUrl, true);
|
||
const hasCover = filterMedia === 'video' && item.videoCoverUrl;
|
||
const showImage = hasCover || filterMedia === 'image';
|
||
const isSelectedItem = selectedItems.has(getItemResourceId(item));
|
||
|
||
return (
|
||
<div
|
||
key={getItemResourceId(item)}
|
||
className="media-card"
|
||
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 ? handleToggleSelect(getItemResourceId(item)) : handlePreview(item)}
|
||
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)';
|
||
}
|
||
}}
|
||
>
|
||
{showImage ? (
|
||
<img
|
||
src={displayUrl}
|
||
alt="预览"
|
||
style={{
|
||
width: '100%',
|
||
height: '100%',
|
||
objectFit: 'cover',
|
||
}}
|
||
/>
|
||
) : (
|
||
<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>
|
||
)}
|
||
|
||
{isSelectionMode && (
|
||
<div
|
||
style={{
|
||
position: 'absolute',
|
||
top: 8,
|
||
left: 8,
|
||
width: 20,
|
||
height: 20,
|
||
borderRadius: '50%',
|
||
backgroundColor: isSelectedItem ? '#10b981' : 'rgba(255,255,255,0.9)',
|
||
border: isSelectedItem ? '2px solid #10b981' : '2px solid #d1d5db',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
cursor: 'pointer',
|
||
zIndex: 10,
|
||
}}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
handleToggleSelect(getItemResourceId(item));
|
||
}}
|
||
>
|
||
{isSelectedItem && (
|
||
<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 && (
|
||
<>
|
||
<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>
|
||
<div
|
||
className="media-download-btn"
|
||
>
|
||
<Tooltip title="下载">
|
||
<div
|
||
style={{
|
||
width: 28,
|
||
height: 28,
|
||
borderRadius: '50%',
|
||
background: 'rgba(0,0,0,0.5)',
|
||
backdropFilter: 'blur(4px)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
cursor: 'pointer',
|
||
transition: 'background 0.15s',
|
||
}}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
const url = `${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${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);
|
||
}}
|
||
>
|
||
<DownloadOutlined style={{ color: '#fff', fontSize: 14 }} />
|
||
</div>
|
||
</Tooltip>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{isSelectionMode && isSelectedItem && (
|
||
<div style={{
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
border: '3px solid #10b981',
|
||
borderRadius: 4,
|
||
pointerEvents: 'none',
|
||
zIndex: 5,
|
||
}} />
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</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="推送任务历史"
|
||
open={uploadHistoryModalVisible}
|
||
onCancel={() => setUploadHistoryModalVisible(false)}
|
||
footer={null}
|
||
width={800}
|
||
style={{ borderRadius: 8 }}
|
||
mask={{ closable: false }}
|
||
>
|
||
<div style={{ marginBottom: 16, display: 'flex', gap: 4 }}>
|
||
<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
|
||
/>
|
||
<div style={{ display: 'flex', gap: 4 }}>
|
||
<Button
|
||
type="primary"
|
||
onClick={handleUploadHistorySearch}
|
||
style={{ borderRadius: 8 }}
|
||
>
|
||
查询
|
||
</Button>
|
||
<Button
|
||
icon={<ReloadOutlined />}
|
||
onClick={handleUploadHistorySearch}
|
||
style={{ borderRadius: 8 }}
|
||
>
|
||
刷新
|
||
</Button>
|
||
</div>
|
||
</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: 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: 160,
|
||
ellipsis: true,
|
||
render: (note: string) => (
|
||
<span style={{ color: '#94a3b8' }}>
|
||
{note || '-'}
|
||
</span>
|
||
),
|
||
},
|
||
{
|
||
title: '创建时间',
|
||
dataIndex: 'createdAt',
|
||
key: 'createdAt',
|
||
width: 180,
|
||
render: (text: string) => formatDateTime(text),
|
||
},
|
||
{
|
||
title: '更新时间',
|
||
dataIndex: 'updatedAt',
|
||
key: 'updatedAt',
|
||
width: 180,
|
||
render: (text: string) => formatDateTime(text),
|
||
},
|
||
|
||
]}
|
||
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 && (
|
||
<Modal
|
||
title={
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||
<div style={{ width: 4, height: 20, background: 'linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%)', borderRadius: 2 }} />
|
||
<span style={{ fontSize: 16, fontWeight: 700, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
|
||
{previewItem.title || '预览'}
|
||
</span>
|
||
</div>
|
||
}
|
||
open={previewVisible}
|
||
onCancel={handleClosePreview}
|
||
width={1200}
|
||
footer={
|
||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12, padding: '16px 24px', background: 'rgba(255,255,255,0.6)', borderTop: '1px solid rgba(99, 102, 241, 0.08)' }}>
|
||
<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`;
|
||
const link = document.createElement('a');
|
||
link.href = url;
|
||
link.download = '';
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
}}
|
||
style={{ borderRadius: 8, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', border: 'none', boxShadow: '0 4px 12px rgba(99, 102, 241, 0.3)' }}
|
||
disabled={isMediaExpired(previewItem.videoUrl || previewItem.imageUrl)}
|
||
>
|
||
{isMediaExpired(previewItem.videoUrl || previewItem.imageUrl) ? '资源已过期' : '下载'}
|
||
</Button>
|
||
<Button
|
||
onClick={handleSinglePushToMedia}
|
||
style={{ borderRadius: 8 }}
|
||
disabled={isMediaExpired(previewItem.videoUrl || previewItem.imageUrl)}
|
||
>
|
||
推送媒体后台
|
||
</Button>
|
||
</div>
|
||
}
|
||
style={{ borderRadius: 20 }}
|
||
styles={{
|
||
body: { height: 460, display: 'flex', flexDirection: 'column', padding: 0 },
|
||
header: { background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(10px)', borderBottom: '1px solid rgba(99, 102, 241, 0.08)', padding: '16px 24px' },
|
||
}}
|
||
>
|
||
{/* 内容区域 */}
|
||
<div style={{
|
||
flex: 1,
|
||
display: 'flex',
|
||
flexWrap: 'wrap',
|
||
height: '460px',
|
||
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>
|
||
</Modal>
|
||
)}
|
||
|
||
{/* 推送配置弹窗 */}
|
||
<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);
|
||
}}
|
||
onBlur={() => {
|
||
const newName = materialFileNames.get(itemId) || item?.fileName || '';
|
||
if (newName.trim()) {
|
||
handleUpdateFileName(itemId, newName);
|
||
}
|
||
}}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter') {
|
||
const newName = materialFileNames.get(itemId) || item?.fileName || '';
|
||
if (newName.trim()) {
|
||
handleUpdateFileName(itemId, newName);
|
||
}
|
||
}
|
||
}}
|
||
placeholder="输入新名称"
|
||
style={{ width: 200, borderRadius: 4 }}
|
||
size="small"
|
||
/>
|
||
</div>
|
||
);
|
||
});
|
||
})()}
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', gap: 16, marginBottom: 16 }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||
<Typography.Text style={{ fontSize: 14, color: '#475569' }}>是否开启前测：</Typography.Text>
|
||
<Select
|
||
value={isPreTest}
|
||
onChange={(value) => {
|
||
setIsPreTest(value);
|
||
if (value !== '1') {
|
||
setPreTestTemplate('');
|
||
} else {
|
||
getDefaultPreTest().then((res) => {
|
||
setPreTestTemplate(res?.data?.id || '');
|
||
}).catch(() => {
|
||
});
|
||
}
|
||
}}
|
||
style={{ width: 120 }}
|
||
options={[
|
||
{ value: '1', label: '是' },
|
||
{ value: '2', label: '否' },
|
||
]}
|
||
/>
|
||
</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||
<Typography.Text style={{ fontSize: 14, color: '#475569' }}>前测模板：</Typography.Text>
|
||
<Select
|
||
value={preTestTemplate}
|
||
onChange={(value) => setPreTestTemplate(value)}
|
||
style={{ width: 200 }}
|
||
disabled={isPreTest !== '1'}
|
||
loading={preTestTemplatesLoading}
|
||
placeholder={isPreTest !== '1' ? '请先开启前测' : '选择前测模板'}
|
||
options={preTestTemplates.map((item) => ({
|
||
value: item.id,
|
||
label: item.name,
|
||
}))}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<Tabs
|
||
size="small"
|
||
activeKey={accountTab}
|
||
onChange={(key) => {
|
||
setAccountTab(key as 'new' | 'history');
|
||
if (key === 'history') {
|
||
loadHistoryOAuthList();
|
||
}
|
||
}}
|
||
items={[
|
||
{
|
||
key: 'new',
|
||
label: '新增账户',
|
||
},
|
||
{
|
||
key: 'history',
|
||
label: '历史账户',
|
||
},
|
||
]}
|
||
/>
|
||
{accountTab === 'new' && (
|
||
<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: '授权账户角色',
|
||
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>,
|
||
},
|
||
{
|
||
title: '授权用户ID',
|
||
dataIndex: 'accountUserid',
|
||
key: 'accountUserid',
|
||
width: 120,
|
||
},
|
||
]}
|
||
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>
|
||
)}
|
||
{accountTab === 'history' && (
|
||
<div style={{ padding: 8 }}>
|
||
{historyOAuthLoading ? (
|
||
<div style={{ textAlign: 'center', padding: 40 }}>加载中...</div>
|
||
) : historyOAuthList.length === 0 ? (
|
||
<Empty description="暂无可选账户" />
|
||
) : (
|
||
<Transfer
|
||
style={{ width: '100%' }}
|
||
dataSource={historyOAuthList
|
||
.filter(item => item.advertiserId)
|
||
.map((item, index) => ({
|
||
key: String(item.advertiserId) || `item-${index}`,
|
||
title: String(item.advertiserId),
|
||
description: item.advertiserName || '',
|
||
...item,
|
||
}))}
|
||
targetKeys={selectedHistoryAccounts
|
||
.filter(item => item.advertiserId)
|
||
.map(item => String(item.advertiserId))}
|
||
onChange={(targetKeys) => {
|
||
const newSelected = historyOAuthList.filter(item =>
|
||
item.advertiserId && targetKeys.includes(String(item.advertiserId))
|
||
);
|
||
setSelectedHistoryAccounts(newSelected);
|
||
}}
|
||
titles={['可选账户列表', '已选账户列表']}
|
||
showSearch
|
||
filterOption={(inputValue, item) =>
|
||
String(item.advertiserId).toLowerCase().includes(inputValue.toLowerCase()) ||
|
||
(item.advertiserName && item.advertiserName.toLowerCase().includes(inputValue.toLowerCase()))
|
||
}
|
||
>
|
||
{({
|
||
direction,
|
||
filteredItems,
|
||
onItemSelect,
|
||
onItemSelectAll,
|
||
selectedKeys: listSelectedKeys,
|
||
disabled: listDisabled,
|
||
}) => {
|
||
const columns = [
|
||
{
|
||
title: '账户ID',
|
||
dataIndex: 'advertiserId',
|
||
key: 'advertiserId',
|
||
width: 120,
|
||
},
|
||
{
|
||
title: '账户名称',
|
||
dataIndex: 'advertiserName',
|
||
key: 'advertiserName',
|
||
width: 150,
|
||
},
|
||
];
|
||
const rowSelection = {
|
||
getCheckboxProps: () => ({ disabled: listDisabled }),
|
||
onChange: (selectedRowKeys: string[]) => {
|
||
onItemSelectAll(selectedRowKeys, 'replace');
|
||
},
|
||
selectedRowKeys: listSelectedKeys,
|
||
selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT, Table.SELECTION_NONE],
|
||
};
|
||
return (
|
||
<Table
|
||
rowSelection={rowSelection}
|
||
columns={columns}
|
||
dataSource={filteredItems}
|
||
size="small"
|
||
style={{ pointerEvents: listDisabled ? 'none' : undefined }}
|
||
pagination={false}
|
||
scroll={{ x: 'max-content', y: 400 }}
|
||
onRow={({ key, disabled: itemDisabled }) => ({
|
||
onClick: () => {
|
||
if (itemDisabled || listDisabled) {
|
||
return;
|
||
}
|
||
onItemSelect(key, !listSelectedKeys.includes(key));
|
||
},
|
||
})}
|
||
/>
|
||
);
|
||
}}
|
||
</Transfer>
|
||
)}
|
||
</div>
|
||
)}
|
||
{/* 操作按钮 */}
|
||
<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 || (accountTab === 'new' ? accountIdLists.every(list => list.length === 0) : selectedHistoryAccounts.length === 0)}
|
||
style={{ borderRadius: 8 }}
|
||
>
|
||
{uploading ? '推送中...' : '开始推送'}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
</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;
|