Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 sjy
|
1ee3722a6e | ||
|
sjy
|
5d2c63ced1 |
@@ -0,0 +1,573 @@
|
||||
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 UploadResourceHistoryPanel from './uploadResource/UploadResourceHistoryPanel';
|
||||
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';
|
||||
onSelect?: (item: any) => void;
|
||||
}
|
||||
|
||||
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', onSelect }) => {
|
||||
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) {
|
||||
setRecordList([]);
|
||||
setMediaLoadStatus(new Map());
|
||||
loadRecordList();
|
||||
}
|
||||
}, [open, filterType, filterMedia, page, selectedDate]);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setFilterMedia(mediaType);
|
||||
setPage(1);
|
||||
setSearchKeyword('');
|
||||
setSelectedDate('');
|
||||
setRecordList([]);
|
||||
setMediaLoadStatus(new Map());
|
||||
}
|
||||
}, [open, mediaType]);
|
||||
|
||||
const handleItemClick = (item: any) => {
|
||||
if (onSelect) {
|
||||
onSelect(item);
|
||||
onClose();
|
||||
} else {
|
||||
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={() => handleItemClick(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"
|
||||
ref={(imgEl) => {
|
||||
if (imgEl && imgEl.complete && mediaLoadStatus.get(resourceId) !== 'loaded') {
|
||||
setMediaLoadStatus(prev => {
|
||||
if (prev.get(resourceId) === 'loaded') return prev;
|
||||
const newMap = new Map(prev);
|
||||
newMap.set(resourceId, 'loaded');
|
||||
return newMap;
|
||||
});
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
opacity: mediaLoadStatus.get(resourceId) === 'loaded' ? 1 : 0,
|
||||
transition: 'opacity 0.3s',
|
||||
}}
|
||||
onLoad={() => {
|
||||
setMediaLoadStatus(prev => {
|
||||
if (prev.get(resourceId) === 'loaded') return prev;
|
||||
const newMap = new Map(prev);
|
||||
newMap.set(resourceId, 'loaded');
|
||||
return newMap;
|
||||
});
|
||||
}}
|
||||
onError={() => {
|
||||
setMediaLoadStatus(prev => {
|
||||
if (prev.get(resourceId) === 'loaded') return 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}
|
||||
destroyOnHidden
|
||||
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' ? (
|
||||
<UploadResourceHistoryPanel />
|
||||
) : (
|
||||
<>
|
||||
{/* 搜索栏 */}
|
||||
<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;
|
||||
@@ -18,10 +18,6 @@ import {
|
||||
App,
|
||||
} from 'antd';
|
||||
|
||||
import bg1 from '../assets/bg1.png';
|
||||
import bg2 from '../assets/bg2.png';
|
||||
import bg3 from '../assets/bg3.png';
|
||||
import text from '../assets/testb.png';
|
||||
|
||||
import UploadSelector from '../components/UploadSelector';
|
||||
import GenerationTaskResourceGrid from '../components/generation/GenerationTaskResourceGrid';
|
||||
@@ -313,8 +309,7 @@ const AIChatPage: React.FC = () => {
|
||||
}
|
||||
}, [previewVisible, previewType]);
|
||||
|
||||
// 提示词展开状态
|
||||
const [expandedPrompts, setExpandedPrompts] = useState<Set<string>>(new Set());
|
||||
|
||||
|
||||
// 从URL中提取exp时间戳（支持相对路径和完整URL）
|
||||
const extractExpTimestamp = (url: string): number | null => {
|
||||
@@ -947,56 +942,6 @@ const AIChatPage: React.FC = () => {
|
||||
setLastFrame(null);
|
||||
};
|
||||
|
||||
// ==================== 事处理函数 ====================
|
||||
|
||||
const handleNewChat = () => {
|
||||
// 生成唯一ID（使用时间戳）
|
||||
const newId = Date.now().toString();
|
||||
const newConversation: Conversation = {
|
||||
id: newId,
|
||||
title: '新对话',
|
||||
lastMessage: '',
|
||||
timestamp: new Date().toLocaleString('zh-CN'),
|
||||
messages: [],
|
||||
};
|
||||
|
||||
// 将新对话插入到列表顶部
|
||||
setConversations((prev) => [newConversation, ...prev]);
|
||||
// 切换到新对话
|
||||
setCurrentConversationId(newId);
|
||||
// 清空输入框和已上传媒体
|
||||
setInputValue('');
|
||||
setCurrentMedia([]);
|
||||
setFirstFrame(null);
|
||||
setLastFrame(null);
|
||||
// 显示提示消息
|
||||
antdMessage.info('已开启新对话');
|
||||
|
||||
};
|
||||
|
||||
|
||||
const handleDeleteChat = (conversationId: string) => {
|
||||
// 过滤掉要删除的对话
|
||||
setConversations((prev) => prev.filter((c) => c.id !== conversationId));
|
||||
// 如果删除的是当前选中的对话，切换到其他对话
|
||||
if (currentConversationId === conversationId) {
|
||||
setCurrentConversationId(
|
||||
conversations[0]?.id === conversationId
|
||||
? conversations[1]?.id || null
|
||||
: conversations[0]?.id || null
|
||||
);
|
||||
}
|
||||
// 显示成功提示
|
||||
antdMessage.success('对话已删除');
|
||||
};
|
||||
|
||||
|
||||
const handleSelectChat = (conversationId: string) => {
|
||||
setCurrentConversationId(conversationId);
|
||||
setCurrentMedia([]);
|
||||
setFirstFrame(null);
|
||||
setLastFrame(null);
|
||||
};
|
||||
|
||||
|
||||
const handleSend = async () => {
|
||||
@@ -1873,12 +1818,60 @@ const AIChatPage: React.FC = () => {
|
||||
return false;
|
||||
};
|
||||
|
||||
// 检测文本是否包含中文字符
|
||||
const isChineseText = (text: string): boolean => {
|
||||
return /[\u4e00-\u9fa5]/.test(text);
|
||||
};
|
||||
|
||||
// 统计字数：中文按字符计数，英文按单词计数
|
||||
const countInput = (text: string): number => {
|
||||
if (!text.trim()) return 0;
|
||||
if (isChineseText(text)) {
|
||||
// 中文：按字符数（不含空白）
|
||||
return text.replace(/\s/g, '').length;
|
||||
} else {
|
||||
// 英文：按单词数
|
||||
const words = text.trim().split(/\s+/);
|
||||
return words[0] === '' ? 0 : words.length;
|
||||
}
|
||||
};
|
||||
|
||||
// 获取最大限制，默认显示500
|
||||
const getMaxLimit = (text: string): number => {
|
||||
if (!text.trim()) return 500;
|
||||
return isChineseText(text) ? 500 : 1000;
|
||||
};
|
||||
|
||||
// 输入框变化处理
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
const value = e.target.value;
|
||||
setInputValue(value);
|
||||
const textarea = e.target;
|
||||
checkMention(textarea, value);
|
||||
const maxLimit = getMaxLimit(value);
|
||||
const count = countInput(value);
|
||||
if (count <= maxLimit) {
|
||||
setInputValue(value);
|
||||
checkMention(e.target, value);
|
||||
} else {
|
||||
// 截断到限制内
|
||||
if (isChineseText(value)) {
|
||||
let trimmed = value;
|
||||
let cjkCount = 0;
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
if (/\s/.test(value[i])) continue;
|
||||
cjkCount++;
|
||||
if (cjkCount > maxLimit) {
|
||||
trimmed = value.slice(0, i);
|
||||
break;
|
||||
}
|
||||
}
|
||||
setInputValue(trimmed);
|
||||
checkMention(e.target, trimmed);
|
||||
} else {
|
||||
const words = value.trim().split(/\s+/);
|
||||
const limited = words.slice(0, maxLimit).join(' ');
|
||||
setInputValue(limited);
|
||||
checkMention(e.target, limited);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 键盘事件处理（ESC 关闭提及、Tab/Enter 选择）
|
||||
@@ -2414,60 +2407,7 @@ const AIChatPage: React.FC = () => {
|
||||
</Popconfirm>
|
||||
</div>
|
||||
|
||||
{/* 文本内容 */}
|
||||
{/* <div
|
||||
style={{
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
margin: '8px 0',
|
||||
padding: '12px 16px',
|
||||
backgroundColor: 'rgba(139, 92, 246, 0.04)',
|
||||
borderRadius: 10,
|
||||
border: '1px solid rgba(139, 92, 246, 0.08)',
|
||||
fontSize: 13,
|
||||
color: '#475467',
|
||||
lineHeight: 1.6,
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s ease',
|
||||
boxShadow: '0 1px 3px rgba(47, 52, 64, 0.035)',
|
||||
}}
|
||||
onMouseEnter={() => {
|
||||
setExpandedPrompts(prev => {
|
||||
const newSet = new Set(prev);
|
||||
newSet.add(msg.id);
|
||||
return newSet;
|
||||
});
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
setExpandedPrompts(prev => {
|
||||
const newSet = new Set(prev);
|
||||
newSet.delete(msg.id);
|
||||
return newSet;
|
||||
});
|
||||
}}
|
||||
>
|
||||
默认显示：一行省略
|
||||
<div style={{
|
||||
width: '100%',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
display: expandedPrompts.has(msg.id) ? 'none' : 'block',
|
||||
}}>
|
||||
{msg.originalPrompt}
|
||||
</div>
|
||||
|
||||
鼠标移入显示：完整内容
|
||||
<div style={{
|
||||
width: '100%',
|
||||
maxHeight: 200,
|
||||
overflowY: 'auto',
|
||||
display: expandedPrompts.has(msg.id) ? 'block' : 'none',
|
||||
wordBreak: 'break-word',
|
||||
}}>
|
||||
{msg.originalPrompt}
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
|
||||
{/* 根据 status 显示不同内容 */}
|
||||
{(msg.status === 'generating' || msg.status === 'failed' || msg.status === 'completed') && (
|
||||
@@ -3304,6 +3244,19 @@ const AIChatPage: React.FC = () => {
|
||||
disabled={loading}
|
||||
/>
|
||||
|
||||
{/* 字数统计 */}
|
||||
<div style={{
|
||||
display: 'flex', justifyContent: 'flex-end',
|
||||
paddingRight: 10, marginTop: 2,
|
||||
}}>
|
||||
<span style={{
|
||||
fontSize: 11,
|
||||
color: countInput(inputValue) > getMaxLimit(inputValue) ? '#ef4444' : '#9ca3af',
|
||||
}}>
|
||||
{countInput(inputValue)} / {getMaxLimit(inputValue)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* @ 提及下拉列表 */}
|
||||
{mentionVisible && currentMedia.length > 0 && referenceMode === 'universal' && (
|
||||
<div
|
||||
@@ -4736,7 +4689,7 @@ const AIChatPage: React.FC = () => {
|
||||
width={800}
|
||||
footer={
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12, padding: '16px 24px', background: 'rgba(255,255,255,0.6)', borderTop: '1px solid rgba(139, 92, 246, 0.08)' }}>
|
||||
<Button
|
||||
{/* <Button
|
||||
type="primary"
|
||||
icon={<DownloadOutlined />}
|
||||
onClick={() => {
|
||||
@@ -4751,7 +4704,7 @@ const AIChatPage: React.FC = () => {
|
||||
style={{ borderRadius: 10, background: 'linear-gradient(135deg, #8b5cf6 0%, #ddd6fe 100%)', border: 'none', boxShadow: '0 8px 18px rgba(47, 52, 64, 0.15)' }}
|
||||
>
|
||||
下载
|
||||
</Button>
|
||||
</Button> */}
|
||||
</div>
|
||||
}
|
||||
centered
|
||||
@@ -4769,7 +4722,7 @@ const AIChatPage: React.FC = () => {
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}>
|
||||
{attachmentPreviewType === 'image' ? (
|
||||
<img
|
||||
src={buildPreviewUrl(attachmentPreviewUrl)}
|
||||
src={buildPreviewUrl(`/static${attachmentPreviewUrl}?w=300&q=50`)}
|
||||
alt="预览"
|
||||
style={{ width: '100%', maxHeight: '400px', objectFit: 'contain' }}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user