会员充值修改
This commit is contained in:
Vendored
+1
-1
File diff suppressed because one or more lines are too long
+102
-102
File diff suppressed because one or more lines are too long
Vendored
+2
-2
@@ -27,8 +27,8 @@
|
|||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
||||||
<title>民众智创</title>
|
<title>民众智创</title>
|
||||||
<script type="module" crossorigin src="/assets/index-ruYs83m_.js"></script>
|
<script type="module" crossorigin src="/assets/index-xGZWod_P.js"></script>
|
||||||
<link rel="stylesheet" crossorigin href="/assets/index-DtYH0-uL.css">
|
<link rel="stylesheet" crossorigin href="/assets/index-DSYnuUvx.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
@@ -0,0 +1,542 @@
|
|||||||
|
import React, { useState, useEffect, useCallback } from 'react';
|
||||||
|
import { Modal, Tabs, Button, Input, Spin, Empty, message } from 'antd';
|
||||||
|
import {
|
||||||
|
FolderOpenOutlined,
|
||||||
|
FileTextOutlined,
|
||||||
|
StarOutlined,
|
||||||
|
PlayCircleOutlined,
|
||||||
|
UploadOutlined,
|
||||||
|
VideoCameraOutlined,
|
||||||
|
PictureOutlined,
|
||||||
|
DownloadOutlined,
|
||||||
|
SearchOutlined,
|
||||||
|
} from '@ant-design/icons';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { gethistory, gethistoryItems } from '../api';
|
||||||
|
import { buildImagePreviewUrl } from '../utils/previewUrl';
|
||||||
|
|
||||||
|
type FilterType = 'project' | 'creation' | 'hot_opening_replicate' | 'shot_replicate' | 'upload_resource';
|
||||||
|
|
||||||
|
interface CreationRecordPickerProps {
|
||||||
|
open: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
mediaType?: 'video' | 'image';
|
||||||
|
}
|
||||||
|
|
||||||
|
const TAB_ITEMS = [
|
||||||
|
{ key: 'project', label: <span><FolderOpenOutlined /> 项目记录</span> },
|
||||||
|
{ key: 'creation', label: <span><FileTextOutlined /> 创作记录</span> },
|
||||||
|
{ key: 'hot_opening_replicate', label: <span><StarOutlined /> 爆款复刻</span> },
|
||||||
|
{ key: 'shot_replicate', label: <span><PlayCircleOutlined /> 拆镜复刻</span> },
|
||||||
|
{ key: 'upload_resource', label: <span><UploadOutlined /> 历史素材</span> },
|
||||||
|
];
|
||||||
|
|
||||||
|
const CreationRecordPicker: React.FC<CreationRecordPickerProps> = ({ open, onClose, mediaType = 'video' }) => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [filterType, setFilterType] = useState<FilterType>('project');
|
||||||
|
const [filterMedia, setFilterMedia] = useState<'video' | 'image'>(mediaType);
|
||||||
|
const [recordList, setRecordList] = useState<any[]>([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [loadingGroups, setLoadingGroups] = useState<Set<string>>(new Set());
|
||||||
|
const [page, setPage] = useState(1);
|
||||||
|
const [pageSize] = useState(10);
|
||||||
|
const [totalDays, setTotalDays] = useState(0);
|
||||||
|
const [searchKeyword, setSearchKeyword] = useState('');
|
||||||
|
const [selectedDate, setSelectedDate] = useState('');
|
||||||
|
const [previewItem, setPreviewItem] = useState<any>(null);
|
||||||
|
const [previewVisible, setPreviewVisible] = useState(false);
|
||||||
|
const [mediaLoadStatus, setMediaLoadStatus] = useState<Map<string, string>>(new Map());
|
||||||
|
|
||||||
|
const buildUrl = useCallback((path: string, isImage: boolean = false): string => {
|
||||||
|
const baseUrl = import.meta.env.VITE_API_BASE || 'http://localhost:8000';
|
||||||
|
const cleanBase = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
|
||||||
|
if (isImage) {
|
||||||
|
return `${cleanBase}${buildImagePreviewUrl(path)}`;
|
||||||
|
}
|
||||||
|
return `${cleanBase}${path}`;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const getItemResourceId = (item: any): string => {
|
||||||
|
return item.generatedResourceId || item.id;
|
||||||
|
};
|
||||||
|
|
||||||
|
const isMediaExpired = (url: string): boolean => {
|
||||||
|
try {
|
||||||
|
const urlObj = new URL(url, window.location.origin);
|
||||||
|
const exp = urlObj.searchParams.get('exp');
|
||||||
|
if (!exp) return false;
|
||||||
|
return Math.floor(Date.now() / 1000) > parseInt(exp);
|
||||||
|
} catch {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadRecordList = useCallback(() => {
|
||||||
|
if (filterType === 'upload_resource') {
|
||||||
|
setLoading(false);
|
||||||
|
setRecordList([]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
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=${page}&page_size=${pageSize}`;
|
||||||
|
if (historySource) {
|
||||||
|
parameters = `?gen_type=${filterMedia}&history_source=${historySource}&page=${page}&page_size=${pageSize}`;
|
||||||
|
}
|
||||||
|
if (searchKeyword.trim()) {
|
||||||
|
parameters += `&keyword=${encodeURIComponent(searchKeyword.trim())}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (selectedDate) {
|
||||||
|
let dateParams = `${selectedDate}?gen_type=${filterMedia}&page=${page}&page_size=${pageSize}`;
|
||||||
|
if (historySource) {
|
||||||
|
dateParams = `${selectedDate}?gen_type=${filterMedia}&history_source=${historySource}&page=${page}&page_size=${pageSize}`;
|
||||||
|
}
|
||||||
|
if (searchKeyword.trim()) {
|
||||||
|
dateParams += `&keyword=${encodeURIComponent(searchKeyword.trim())}`;
|
||||||
|
}
|
||||||
|
gethistoryItems(dateParams).then((res: any) => {
|
||||||
|
console.log('[CreationRecordPicker] gethistoryItems response:', res);
|
||||||
|
const data = Array.isArray(res) ? res : (res?.items || []);
|
||||||
|
const list = [{
|
||||||
|
generatedDate: res?.generated_date || res?.generatedDate || '',
|
||||||
|
items: data,
|
||||||
|
total: res?.total ?? data.length,
|
||||||
|
page: res?.page ?? 1,
|
||||||
|
}];
|
||||||
|
setRecordList(list && list[0].items.length > 0 ? list : []);
|
||||||
|
setTotalDays(res?.totalDays || res?.total_days || 0);
|
||||||
|
}).catch((err) => {
|
||||||
|
console.error('[CreationRecordPicker] gethistoryItems error:', err);
|
||||||
|
setRecordList([]);
|
||||||
|
}).finally(() => setLoading(false));
|
||||||
|
} else {
|
||||||
|
const apiCall = historySource || filterType === 'creation'
|
||||||
|
? gethistory(parameters)
|
||||||
|
: gethistory(parameters);
|
||||||
|
|
||||||
|
apiCall.then((res: any) => {
|
||||||
|
console.log('[CreationRecordPicker] gethistory response:', res);
|
||||||
|
let data: any[] = [];
|
||||||
|
if (Array.isArray(res)) {
|
||||||
|
data = res;
|
||||||
|
} else if (res?.groups) {
|
||||||
|
// groups 可能是数组也可能是单个对象
|
||||||
|
const groups = Array.isArray(res.groups) ? res.groups : [res.groups];
|
||||||
|
data = groups.map((g: any) => ({
|
||||||
|
generatedDate: g.generated_date || g.generatedDate || '',
|
||||||
|
items: g.items || [],
|
||||||
|
total: g.total ?? 0,
|
||||||
|
page: g.page ?? 1,
|
||||||
|
}));
|
||||||
|
} else if (res?.items) {
|
||||||
|
// gethistoryItems 格式
|
||||||
|
data = [{
|
||||||
|
generatedDate: res.generated_date || res.generatedDate || '',
|
||||||
|
items: res.items,
|
||||||
|
total: res.total ?? res.items.length,
|
||||||
|
page: res.page ?? 1,
|
||||||
|
}];
|
||||||
|
} else if (res && typeof res === 'object') {
|
||||||
|
// 可能是其他格式，尝试包装
|
||||||
|
data = [{
|
||||||
|
generatedDate: res.generated_date || res.generatedDate || '',
|
||||||
|
items: [res],
|
||||||
|
total: res.total ?? 1,
|
||||||
|
page: 1,
|
||||||
|
}];
|
||||||
|
}
|
||||||
|
data.forEach((group: any) => {
|
||||||
|
if (group.page === undefined) group.page = 1;
|
||||||
|
if (group.total === undefined) group.total = group.items?.length || 0;
|
||||||
|
});
|
||||||
|
setRecordList(page === 1 ? data : (prev: any[]) => [...prev, ...data]);
|
||||||
|
// 保存 totalDays 用于底部加载更多判断
|
||||||
|
setTotalDays(res?.totalDays || res?.total_days || 0);
|
||||||
|
}).catch((err) => {
|
||||||
|
console.error('[CreationRecordPicker] gethistory error:', err);
|
||||||
|
if (page === 1) setRecordList([]);
|
||||||
|
}).finally(() => setLoading(false));
|
||||||
|
}
|
||||||
|
}, [filterType, filterMedia, page, pageSize, searchKeyword, selectedDate]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (open) {
|
||||||
|
loadRecordList();
|
||||||
|
}
|
||||||
|
}, [open, filterType, filterMedia, page, selectedDate]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (open) {
|
||||||
|
setFilterMedia(mediaType);
|
||||||
|
setPage(1);
|
||||||
|
setSearchKeyword('');
|
||||||
|
setSelectedDate('');
|
||||||
|
}
|
||||||
|
}, [open, mediaType]);
|
||||||
|
|
||||||
|
const handlePreview = (item: any) => {
|
||||||
|
setPreviewItem(item);
|
||||||
|
setPreviewVisible(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClosePreview = () => {
|
||||||
|
setPreviewVisible(false);
|
||||||
|
setPreviewItem(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleGoEdit = () => {
|
||||||
|
if (!previewItem) return;
|
||||||
|
const mediaUrl = previewItem.videoUrl || previewItem.imageUrl || '';
|
||||||
|
if (!mediaUrl) {
|
||||||
|
message.warning('无法获取媒体地址');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (isMediaExpired(mediaUrl)) {
|
||||||
|
message.warning('资源已过期，无法编辑');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const type = previewItem.videoUrl ? 'video' : 'image';
|
||||||
|
const baseUrl = import.meta.env.VITE_API_BASE || 'http://localhost:8000';
|
||||||
|
const fullUrl = mediaUrl.startsWith('http') ? mediaUrl : `${baseUrl}${mediaUrl}`;
|
||||||
|
const name = previewItem.title || previewItem.id || '导入素材';
|
||||||
|
handleClosePreview();
|
||||||
|
onClose();
|
||||||
|
navigate(`/videoediting?mediaUrl=${encodeURIComponent(fullUrl)}&mediaType=${type}&mediaName=${encodeURIComponent(name)}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSearch = () => {
|
||||||
|
setPage(1);
|
||||||
|
loadRecordList();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleGroupLoadMore = async (time: string, currentPage: number) => {
|
||||||
|
if (loadingGroups.has(time)) return;
|
||||||
|
setLoadingGroups(prev => new Set([...prev, time]));
|
||||||
|
const addpage = currentPage + 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=${pageSize}`;
|
||||||
|
if (historySource) {
|
||||||
|
parameters = `${time}?gen_type=${filterMedia}&history_source=${historySource}&page=${addpage}&page_size=${pageSize}`;
|
||||||
|
}
|
||||||
|
if (searchKeyword.trim()) {
|
||||||
|
parameters += `&keyword=${encodeURIComponent(searchKeyword.trim())}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res: any = await gethistoryItems(parameters);
|
||||||
|
const newItems: any[] = res?.items || [];
|
||||||
|
if (newItems.length > 0) {
|
||||||
|
setRecordList(prev => prev.map(group => {
|
||||||
|
if (group.generatedDate === time) {
|
||||||
|
return {
|
||||||
|
...group,
|
||||||
|
items: [...group.items, ...newItems],
|
||||||
|
page: addpage,
|
||||||
|
total: res?.total ?? group.total,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return group;
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('[CreationRecordPicker] handleGroupLoadMore error:', err);
|
||||||
|
} finally {
|
||||||
|
setLoadingGroups(prev => {
|
||||||
|
const next = new Set(prev);
|
||||||
|
next.delete(time);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderItemCard = (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 resourceId = getItemResourceId(item);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={resourceId}
|
||||||
|
style={{
|
||||||
|
width: 140,
|
||||||
|
height: 100,
|
||||||
|
position: 'relative',
|
||||||
|
borderRadius: 6,
|
||||||
|
cursor: 'pointer',
|
||||||
|
overflow: 'hidden',
|
||||||
|
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
|
||||||
|
transition: 'transform 0.2s, box-shadow 0.2s',
|
||||||
|
}}
|
||||||
|
onClick={() => handlePreview(item)}
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
e.currentTarget.style.transform = 'scale(1.05)';
|
||||||
|
e.currentTarget.style.boxShadow = '0 4px 16px rgba(0,0,0,0.2)';
|
||||||
|
}}
|
||||||
|
onMouseLeave={(e) => {
|
||||||
|
e.currentTarget.style.transform = 'scale(1)';
|
||||||
|
e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{showImage ? (
|
||||||
|
<img
|
||||||
|
src={displayUrl}
|
||||||
|
alt="预览"
|
||||||
|
loading="lazy"
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
objectFit: 'cover',
|
||||||
|
opacity: mediaLoadStatus.get(resourceId) === 'loaded' ? 1 : 0,
|
||||||
|
transition: 'opacity 0.3s',
|
||||||
|
}}
|
||||||
|
onLoad={() => {
|
||||||
|
setMediaLoadStatus(prev => {
|
||||||
|
const newMap = new Map(prev);
|
||||||
|
newMap.set(resourceId, 'loaded');
|
||||||
|
return newMap;
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<video
|
||||||
|
src={buildUrl(item.videoUrl)}
|
||||||
|
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||||
|
preload="metadata"
|
||||||
|
muted
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{filterMedia === 'video' && (
|
||||||
|
<div style={{
|
||||||
|
position: 'absolute', bottom: 4, right: 4,
|
||||||
|
background: 'rgba(0,0,0,0.6)', color: '#fff',
|
||||||
|
borderRadius: 4, padding: '1px 6px', fontSize: 10,
|
||||||
|
}}>
|
||||||
|
<VideoCameraOutlined style={{ marginRight: 2 }} />
|
||||||
|
视频
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Modal
|
||||||
|
title={
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||||
|
<FileTextOutlined style={{ color: '#6366f1' }} />
|
||||||
|
<span style={{ fontWeight: 600 }}>选择创作记录</span>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
open={open}
|
||||||
|
onCancel={onClose}
|
||||||
|
width={900}
|
||||||
|
footer={null}
|
||||||
|
styles={{ body: { maxHeight: '70vh', overflow: 'auto' } }}
|
||||||
|
>
|
||||||
|
{/* 视频/图片切换 */}
|
||||||
|
<div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
|
||||||
|
<Button
|
||||||
|
type={filterMedia === 'video' ? 'primary' : 'default'}
|
||||||
|
icon={<VideoCameraOutlined />}
|
||||||
|
onClick={() => { setFilterMedia('video'); setPage(1); }}
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
视频
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type={filterMedia === 'image' ? 'primary' : 'default'}
|
||||||
|
icon={<PictureOutlined />}
|
||||||
|
onClick={() => { setFilterMedia('image'); setPage(1); }}
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
图片
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tab 切换 */}
|
||||||
|
<Tabs
|
||||||
|
activeKey={filterType}
|
||||||
|
onChange={(key) => {
|
||||||
|
setFilterType(key as FilterType);
|
||||||
|
setPage(1);
|
||||||
|
setSelectedDate('');
|
||||||
|
}}
|
||||||
|
items={TAB_ITEMS}
|
||||||
|
size="small"
|
||||||
|
style={{ marginBottom: 12 }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{filterType === 'upload_resource' ? (
|
||||||
|
<div style={{ textAlign: 'center', padding: '40px 0', color: '#94a3b8' }}>
|
||||||
|
<UploadOutlined style={{ fontSize: 32, marginBottom: 8 }} />
|
||||||
|
<div>历史素材请在历史素材页面查看</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{/* 搜索栏 */}
|
||||||
|
<div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
|
||||||
|
<Input
|
||||||
|
placeholder="搜索关键词..."
|
||||||
|
value={searchKeyword}
|
||||||
|
onChange={(e) => setSearchKeyword(e.target.value)}
|
||||||
|
onPressEnter={handleSearch}
|
||||||
|
prefix={<SearchOutlined style={{ color: '#94a3b8' }} />}
|
||||||
|
style={{ flex: 1 }}
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
<Button type="primary" size="small" onClick={handleSearch}>搜索</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 列表 */}
|
||||||
|
<Spin spinning={loading}>
|
||||||
|
{recordList.length === 0 && !loading ? (
|
||||||
|
<Empty description="暂无记录" style={{ padding: '40px 0' }} />
|
||||||
|
) : (
|
||||||
|
<div>
|
||||||
|
{recordList.map((group: any, gIdx: number) => (
|
||||||
|
<div key={gIdx} style={{ marginBottom: 16 }}>
|
||||||
|
{group.generatedDate && (
|
||||||
|
<div style={{
|
||||||
|
fontSize: 13, fontWeight: 600, color: '#64748b',
|
||||||
|
marginBottom: 8, display: 'flex', alignItems: 'center', gap: 4,
|
||||||
|
}}>
|
||||||
|
{group.generatedDate}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
|
||||||
|
{group.items?.map((item: any) => renderItemCard(item))}
|
||||||
|
</div>
|
||||||
|
{/* 分组内加载更多 */}
|
||||||
|
{group.total != null && group.total > (group.items?.length || 0) && (
|
||||||
|
<div style={{ padding: '12px 0', textAlign: 'left' }}>
|
||||||
|
<Button
|
||||||
|
onClick={() => handleGroupLoadMore(group.generatedDate, group.page || 1)}
|
||||||
|
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.generatedDate) ? '加载中...' : `加载更多 (${group.items?.length || 0}/${group.total})`}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{/* 底部整体加载更多 */}
|
||||||
|
{recordList.length > 0 && totalDays > recordList.length && (
|
||||||
|
<div style={{ padding: '16px 0 8px', textAlign: 'center' }}>
|
||||||
|
<Button
|
||||||
|
onClick={() => setPage(prev => prev + 1)}
|
||||||
|
loading={loading}
|
||||||
|
disabled={loading}
|
||||||
|
size="small"
|
||||||
|
style={{
|
||||||
|
borderRadius: 6,
|
||||||
|
background: 'transparent',
|
||||||
|
border: '1px dashed #cbd5e1',
|
||||||
|
color: '#64748b',
|
||||||
|
fontSize: 12,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{loading ? '加载中...' : `加载更多 (${recordList.length}/${totalDays})`}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Spin>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
{/* 预览弹窗 */}
|
||||||
|
<Modal
|
||||||
|
title={
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||||
|
<span style={{ fontSize: 15, fontWeight: 600 }}>
|
||||||
|
{previewItem?.title || '预览'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
open={previewVisible}
|
||||||
|
onCancel={handleClosePreview}
|
||||||
|
width={800}
|
||||||
|
footer={
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12 }}>
|
||||||
|
<Button onClick={handleClosePreview}>关闭</Button>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
icon={<DownloadOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
if (!previewItem) return;
|
||||||
|
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);
|
||||||
|
}}
|
||||||
|
disabled={isMediaExpired(previewItem?.videoUrl || previewItem?.imageUrl || '')}
|
||||||
|
>
|
||||||
|
{isMediaExpired(previewItem?.videoUrl || previewItem?.imageUrl || '') ? '资源已过期' : '下载'}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
onClick={handleGoEdit}
|
||||||
|
disabled={isMediaExpired(previewItem?.videoUrl || previewItem?.imageUrl || '')}
|
||||||
|
style={{
|
||||||
|
background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
|
||||||
|
border: 'none',
|
||||||
|
fontWeight: 600,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
去编辑
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
styles={{ body: { height: 400, display: 'flex', flexDirection: 'column', padding: 0 } }}
|
||||||
|
>
|
||||||
|
{previewItem && (
|
||||||
|
<div style={{ width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: '#000' }}>
|
||||||
|
{previewItem.videoUrl ? (
|
||||||
|
<video
|
||||||
|
src={buildUrl(previewItem.videoUrl)}
|
||||||
|
controls
|
||||||
|
autoPlay
|
||||||
|
style={{ maxWidth: '100%', maxHeight: '100%' }}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<img
|
||||||
|
src={buildUrl(previewItem.imageUrl, true)}
|
||||||
|
alt="预览"
|
||||||
|
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CreationRecordPicker;
|
||||||
@@ -264,3 +264,58 @@
|
|||||||
margin: 16px !important;
|
margin: 16px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.recharge-fullscreen-modal .ant-modal-body::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recharge-fullscreen-modal .ant-modal-body {
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recharge-fullscreen-modal .ant-modal-content::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recharge-fullscreen-modal .ant-modal-content {
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recharge-fullscreen-modal .ant-modal-content {
|
||||||
|
padding: 0 !important;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recharge-fullscreen-modal .ant-modal-close {
|
||||||
|
top: 16px;
|
||||||
|
right: 16px;
|
||||||
|
z-index: 1000;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recharge-fullscreen-modal .ant-modal-close:hover {
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recharge-fullscreen-modal .ant-modal-close-x {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #64748b;
|
||||||
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -20,7 +20,7 @@ import {
|
|||||||
CheckOutlined,
|
CheckOutlined,
|
||||||
ClearOutlined,
|
ClearOutlined,
|
||||||
} from '@ant-design/icons';
|
} from '@ant-design/icons';
|
||||||
import { useSearchParams } from 'react-router-dom';
|
import { useSearchParams, useNavigate } from 'react-router-dom';
|
||||||
import { PrivatePortraitLibraryPanel } from '../components/privatePortrait';
|
import { PrivatePortraitLibraryPanel } from '../components/privatePortrait';
|
||||||
import { UploadResourceHistoryPanel } from '../components/uploadResource';
|
import { UploadResourceHistoryPanel } from '../components/uploadResource';
|
||||||
import { gethistory, gethistoryItems, getOAuthList, asyncBatchUploadMaterial, updateFilename, getUploadHistory, getAllOAuthAccountList, getOpenTypeAll, getPreTestList, getDefaultPreTest, deleteHistory, deleteResourcesMaterial } from '../api';
|
import { gethistory, gethistoryItems, getOAuthList, asyncBatchUploadMaterial, updateFilename, getUploadHistory, getAllOAuthAccountList, getOpenTypeAll, getPreTestList, getDefaultPreTest, deleteHistory, deleteResourcesMaterial } from '../api';
|
||||||
@@ -56,6 +56,7 @@ const GeneratedRecord: React.FC = () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const [searchParams] = useSearchParams();
|
const [searchParams] = useSearchParams();
|
||||||
|
const navigate = useNavigate();
|
||||||
const initialFilterType = searchParams.get('filterType') === 'private_portrait' ? 'private_portrait' : searchParams.get('filterType') === 'upload_resource' ? 'upload_resource' : 'project';
|
const initialFilterType = searchParams.get('filterType') === 'private_portrait' ? 'private_portrait' : searchParams.get('filterType') === 'upload_resource' ? 'upload_resource' : 'project';
|
||||||
const [filterType, setFilterType] = useState<'project' | 'creation' | 'hot_opening_replicate' | 'shot_replicate' | 'private_portrait' | 'upload_resource'>(initialFilterType);
|
const [filterType, setFilterType] = useState<'project' | 'creation' | 'hot_opening_replicate' | 'shot_replicate' | 'private_portrait' | 'upload_resource'>(initialFilterType);
|
||||||
const [filterMedia, setFilterMedia] = useState<'video' | 'image'>('video');
|
const [filterMedia, setFilterMedia] = useState<'video' | 'image'>('video');
|
||||||
@@ -1627,6 +1628,31 @@ const GeneratedRecord: React.FC = () => {
|
|||||||
>
|
>
|
||||||
推送媒体后台
|
推送媒体后台
|
||||||
</Button>
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
if (!previewItem) return;
|
||||||
|
const mediaUrl = previewItem.videoUrl || previewItem.imageUrl || '';
|
||||||
|
if (!mediaUrl) {
|
||||||
|
message.warning('无法获取媒体地址');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (isMediaExpired(mediaUrl)) {
|
||||||
|
message.warning('资源已过期，无法编辑');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const mediaType = previewItem.videoUrl ? 'video' : 'image';
|
||||||
|
const baseUrl = import.meta.env.VITE_API_BASE || 'http://localhost:8000';
|
||||||
|
const fullUrl = mediaUrl.startsWith('http') ? mediaUrl : `${baseUrl}${mediaUrl}`;
|
||||||
|
const name = previewItem.title || previewItem.id || '导入素材';
|
||||||
|
handleClosePreview();
|
||||||
|
navigate(`/videoediting?mediaUrl=${encodeURIComponent(fullUrl)}&mediaType=${mediaType}&mediaName=${encodeURIComponent(name)}`);
|
||||||
|
}}
|
||||||
|
style={{ borderRadius: 8, background: 'linear-gradient(135deg, #6366f1, #8b5cf6)', border: 'none', color: '#fff', fontWeight: 600, padding: '8px 24px' }}
|
||||||
|
disabled={isMediaExpired(previewItem.videoUrl || previewItem.imageUrl)}
|
||||||
|
>
|
||||||
|
去编辑
|
||||||
|
</Button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
style={{ borderRadius: 16, overflow: 'hidden' }}
|
style={{ borderRadius: 16, overflow: 'hidden' }}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState, useRef } from 'react';
|
||||||
import { Table, Tag, Empty, Spin, Pagination, Button, Typography, Modal, Form, Input, Radio, message, Space, DatePicker } from 'antd';
|
import { Table, Tag, Empty, Spin, Pagination, Button, Typography, Modal, Form, Input, Radio, message, Space, DatePicker } from 'antd';
|
||||||
import { FileTextOutlined, PlusOutlined, CloseOutlined, AlipayCircleOutlined, WechatOutlined } from '@ant-design/icons';
|
import { FileTextOutlined, PlusOutlined, CloseOutlined, AlipayCircleOutlined, WechatOutlined } from '@ant-design/icons';
|
||||||
import {
|
import {
|
||||||
@@ -109,6 +109,7 @@ const InvoicePage: React.FC = () => {
|
|||||||
const [invoicePage, setInvoicePage] = useState(1);
|
const [invoicePage, setInvoicePage] = useState(1);
|
||||||
const [invoicePageSize] = useState(10);
|
const [invoicePageSize] = useState(10);
|
||||||
const [invoiceTotal, setInvoiceTotal] = useState(0);
|
const [invoiceTotal, setInvoiceTotal] = useState(0);
|
||||||
|
const invoicePageMountedRef = useRef(false);
|
||||||
|
|
||||||
// 加载发票记录
|
// 加载发票记录
|
||||||
const loadInvoices = async () => {
|
const loadInvoices = async () => {
|
||||||
@@ -145,9 +146,11 @@ const InvoicePage: React.FC = () => {
|
|||||||
|
|
||||||
// 分页切换时重新加载发票记录
|
// 分页切换时重新加载发票记录
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (invoicePage > 1) {
|
if (!invoicePageMountedRef.current) {
|
||||||
loadInvoices();
|
invoicePageMountedRef.current = true;
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
loadInvoices();
|
||||||
}, [invoicePage]);
|
}, [invoicePage]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|||||||
@@ -26,8 +26,10 @@ import {
|
|||||||
ArrowUpOutlined,
|
ArrowUpOutlined,
|
||||||
ArrowDownOutlined,
|
ArrowDownOutlined,
|
||||||
LeftOutlined,
|
LeftOutlined,
|
||||||
|
PlayCircleFilled,
|
||||||
} from '@ant-design/icons';
|
} from '@ant-design/icons';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||||||
|
import CreationRecordPicker from '../components/CreationRecordPicker';
|
||||||
|
|
||||||
const { TextArea } = Input;
|
const { TextArea } = Input;
|
||||||
|
|
||||||
@@ -85,6 +87,7 @@ const trackColors: Record<TrackType, { bg: string; bgActive: string; border: str
|
|||||||
const VideovEditing: React.FC = () => {
|
const VideovEditing: React.FC = () => {
|
||||||
// ========== 路由 ==========
|
// ========== 路由 ==========
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
// ========== 状态管理 ==========
|
// ========== 状态管理 ==========
|
||||||
const [activeTab, setActiveTab] = useState<MediaTab>('video');
|
const [activeTab, setActiveTab] = useState<MediaTab>('video');
|
||||||
const [mediaLibrary, setMediaLibrary] = useState<MediaItem[]>([]);
|
const [mediaLibrary, setMediaLibrary] = useState<MediaItem[]>([]);
|
||||||
@@ -103,6 +106,9 @@ const VideovEditing: React.FC = () => {
|
|||||||
const [textModalOpen, setTextModalOpen] = useState(false);
|
const [textModalOpen, setTextModalOpen] = useState(false);
|
||||||
const [textModalValue, setTextModalValue] = useState('');
|
const [textModalValue, setTextModalValue] = useState('');
|
||||||
const [textModalType, setTextModalType] = useState<'text' | 'watermark'>('text');
|
const [textModalType, setTextModalType] = useState<'text' | 'watermark'>('text');
|
||||||
|
// 导入选择弹窗 & 创作记录选择器
|
||||||
|
const [importPickerOpen, setImportPickerOpen] = useState(false);
|
||||||
|
const [recordPickerOpen, setRecordPickerOpen] = useState(false);
|
||||||
|
|
||||||
// ========== Ref引用 ==========
|
// ========== Ref引用 ==========
|
||||||
const videoRef = useRef<HTMLVideoElement>(null);
|
const videoRef = useRef<HTMLVideoElement>(null);
|
||||||
@@ -203,6 +209,29 @@ const VideovEditing: React.FC = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 从路由参数接收创作记录导入的媒体
|
||||||
|
*/
|
||||||
|
useEffect(() => {
|
||||||
|
const mediaUrl = searchParams.get('mediaUrl');
|
||||||
|
const mediaType = searchParams.get('mediaType') as TrackType | null;
|
||||||
|
const mediaName = searchParams.get('mediaName') || '导入素材';
|
||||||
|
if (mediaUrl && mediaType) {
|
||||||
|
const itemType: TrackType = mediaType === 'image' ? 'image' : 'video';
|
||||||
|
const newItem: MediaItem = {
|
||||||
|
id: `${Date.now()}-${Math.random()}`,
|
||||||
|
type: itemType,
|
||||||
|
name: mediaName,
|
||||||
|
url: mediaUrl,
|
||||||
|
};
|
||||||
|
setMediaLibrary(prev => [...prev, newItem]);
|
||||||
|
setActiveTab(itemType);
|
||||||
|
message.success(`已导入创作记录素材：${mediaName}`);
|
||||||
|
// 清除 URL 参数
|
||||||
|
navigate('/videoediting', { replace: true });
|
||||||
|
}
|
||||||
|
}, [searchParams]);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 打开文本/水印输入弹窗
|
* 打开文本/水印输入弹窗
|
||||||
*/
|
*/
|
||||||
@@ -243,7 +272,8 @@ const VideovEditing: React.FC = () => {
|
|||||||
} else if (activeTab === 'watermark') {
|
} else if (activeTab === 'watermark') {
|
||||||
openTextModal('watermark');
|
openTextModal('watermark');
|
||||||
} else {
|
} else {
|
||||||
fileInputRef.current?.click();
|
// 弹出选择：本地上传 or 创作记录
|
||||||
|
setImportPickerOpen(true);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -1138,7 +1168,7 @@ const VideovEditing: React.FC = () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 素材列表网格 */}
|
{/* 素材列表 */}
|
||||||
<div style={{ flex: 1, overflowY: 'auto', padding: '0 12px', minHeight: 0 }}>
|
<div style={{ flex: 1, overflowY: 'auto', padding: '0 12px', minHeight: 0 }}>
|
||||||
{filteredMedia.length === 0 ? (
|
{filteredMedia.length === 0 ? (
|
||||||
<div style={{ textAlign: 'center', padding: '40px 12px', color: '#94a3b8' }}>
|
<div style={{ textAlign: 'center', padding: '40px 12px', color: '#94a3b8' }}>
|
||||||
@@ -1148,7 +1178,7 @@ const VideovEditing: React.FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||||
{filteredMedia.map(item => (
|
{filteredMedia.map(item => (
|
||||||
<div
|
<div
|
||||||
key={item.id}
|
key={item.id}
|
||||||
@@ -1157,11 +1187,12 @@ const VideovEditing: React.FC = () => {
|
|||||||
background: '#f8fafc',
|
background: '#f8fafc',
|
||||||
border: '1px solid #e2e8f0',
|
border: '1px solid #e2e8f0',
|
||||||
borderRadius: 8,
|
borderRadius: 8,
|
||||||
padding: 10,
|
padding: 8,
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
transition: 'all 0.2s',
|
transition: 'all 0.2s',
|
||||||
textAlign: 'center',
|
display: 'flex',
|
||||||
fontSize: 12,
|
alignItems: 'center',
|
||||||
|
gap: 10,
|
||||||
}}
|
}}
|
||||||
onMouseEnter={e => {
|
onMouseEnter={e => {
|
||||||
(e.currentTarget as HTMLDivElement).style.borderColor = '#c7d2fe';
|
(e.currentTarget as HTMLDivElement).style.borderColor = '#c7d2fe';
|
||||||
@@ -1172,34 +1203,57 @@ const VideovEditing: React.FC = () => {
|
|||||||
(e.currentTarget as HTMLDivElement).style.background = '#f8fafc';
|
(e.currentTarget as HTMLDivElement).style.background = '#f8fafc';
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* 图片/水印图片显示缩略图 */}
|
{/* 视频/图片/水印显示缩略图 */}
|
||||||
{(item.type === 'image' || item.type === 'watermark') && item.url ? (
|
{(item.type === 'video') && item.url ? (
|
||||||
<div style={{
|
<div style={{
|
||||||
width: '100%', height: 48, borderRadius: 6, overflow: 'hidden',
|
width: 72, height: 44, borderRadius: 6, overflow: 'hidden',
|
||||||
background: '#e2e8f0', marginBottom: 6, display: 'flex',
|
background: '#1e293b', flexShrink: 0, position: 'relative',
|
||||||
alignItems: 'center', justifyContent: 'center',
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||||
|
}}>
|
||||||
|
<video
|
||||||
|
src={item.url}
|
||||||
|
muted
|
||||||
|
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||||
|
onError={(e) => {
|
||||||
|
(e.currentTarget as HTMLVideoElement).style.display = 'none';
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div style={{
|
||||||
|
position: 'absolute', inset: 0,
|
||||||
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||||
|
color: 'rgba(255,255,255,0.9)', fontSize: 18, pointerEvents: 'none',
|
||||||
|
}}>
|
||||||
|
<PlayCircleFilled />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : ((item.type === 'image' || item.type === 'watermark') && item.url) ? (
|
||||||
|
<div style={{
|
||||||
|
width: 48, height: 48, borderRadius: 6, overflow: 'hidden',
|
||||||
|
background: '#e2e8f0', flexShrink: 0,
|
||||||
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||||
}}>
|
}}>
|
||||||
<img
|
<img
|
||||||
src={item.url}
|
src={item.url}
|
||||||
alt={item.name}
|
alt={item.name}
|
||||||
draggable={false}
|
draggable={false}
|
||||||
style={{
|
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
objectFit: 'cover',
|
|
||||||
display: 'block',
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div style={{ fontSize: 22, marginBottom: 6 }}>
|
<div style={{
|
||||||
|
width: 48, height: 48, borderRadius: 6, flexShrink: 0,
|
||||||
|
background: '#e2e8f0', display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||||
|
fontSize: 20,
|
||||||
|
}}>
|
||||||
{getMediaIcon(item.type)}
|
{getMediaIcon(item.type)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
<div style={{ flex: 1, minWidth: 0 }}>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
color: '#334155',
|
color: '#1e293b',
|
||||||
fontSize: 11,
|
fontSize: 13,
|
||||||
|
fontWeight: 500,
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
textOverflow: 'ellipsis',
|
textOverflow: 'ellipsis',
|
||||||
whiteSpace: 'nowrap',
|
whiteSpace: 'nowrap',
|
||||||
@@ -1208,6 +1262,10 @@ const VideovEditing: React.FC = () => {
|
|||||||
>
|
>
|
||||||
{item.text || item.name}
|
{item.text || item.name}
|
||||||
</div>
|
</div>
|
||||||
|
<div style={{ fontSize: 11, color: '#94a3b8', marginTop: 2 }}>
|
||||||
|
{item.type === 'video' ? '视频' : item.type === 'image' ? '图片' : item.type === 'watermark' ? '水印' : '文本'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@@ -2152,6 +2210,69 @@ const VideovEditing: React.FC = () => {
|
|||||||
onPressEnter={handleTextModalOk}
|
onPressEnter={handleTextModalOk}
|
||||||
/>
|
/>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
||||||
|
{/* 导入选择弹窗：本地上传 or 创作记录 */}
|
||||||
|
<Modal
|
||||||
|
title="选择导入方式"
|
||||||
|
open={importPickerOpen}
|
||||||
|
onCancel={() => setImportPickerOpen(false)}
|
||||||
|
footer={null}
|
||||||
|
width={400}
|
||||||
|
>
|
||||||
|
<div style={{ display: 'flex', gap: 16, padding: '12px 0' }}>
|
||||||
|
<div
|
||||||
|
onClick={() => {
|
||||||
|
setImportPickerOpen(false);
|
||||||
|
fileInputRef.current?.click();
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
flex: 1, padding: '24px 12px', textAlign: 'center', cursor: 'pointer',
|
||||||
|
borderRadius: 12, border: '2px solid #f0f0f5', transition: 'all 0.2s',
|
||||||
|
}}
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
e.currentTarget.style.borderColor = '#6366f1';
|
||||||
|
e.currentTarget.style.background = 'rgba(99,102,241,0.04)';
|
||||||
|
}}
|
||||||
|
onMouseLeave={(e) => {
|
||||||
|
e.currentTarget.style.borderColor = '#f0f0f5';
|
||||||
|
e.currentTarget.style.background = 'transparent';
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ImportOutlined style={{ fontSize: 32, color: '#6366f1', marginBottom: 8 }} />
|
||||||
|
<div style={{ fontWeight: 600, fontSize: 14, marginBottom: 4 }}>本地上传</div>
|
||||||
|
<div style={{ fontSize: 12, color: '#94a3b8' }}>从电脑选择文件</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
onClick={() => {
|
||||||
|
setImportPickerOpen(false);
|
||||||
|
setRecordPickerOpen(true);
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
flex: 1, padding: '24px 12px', textAlign: 'center', cursor: 'pointer',
|
||||||
|
borderRadius: 12, border: '2px solid #f0f0f5', transition: 'all 0.2s',
|
||||||
|
}}
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
e.currentTarget.style.borderColor = '#6366f1';
|
||||||
|
e.currentTarget.style.background = 'rgba(99,102,241,0.04)';
|
||||||
|
}}
|
||||||
|
onMouseLeave={(e) => {
|
||||||
|
e.currentTarget.style.borderColor = '#f0f0f5';
|
||||||
|
e.currentTarget.style.background = 'transparent';
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FileTextOutlined style={{ fontSize: 32, color: '#8b5cf6', marginBottom: 8 }} />
|
||||||
|
<div style={{ fontWeight: 600, fontSize: 14, marginBottom: 4 }}>创作记录</div>
|
||||||
|
<div style={{ fontSize: 12, color: '#94a3b8' }}>从历史记录导入</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
{/* 创作记录选择器 */}
|
||||||
|
<CreationRecordPicker
|
||||||
|
open={recordPickerOpen}
|
||||||
|
onClose={() => setRecordPickerOpen(false)}
|
||||||
|
mediaType={activeTab === 'image' ? 'image' : 'video'}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user