218 lines
10 KiB
TypeScript
218 lines
10 KiB
TypeScript
import React, { useCallback, useEffect, useState } from 'react';
|
|
import { Button, Card, DatePicker, Input, Progress, Select, Space, Table, Tag, Tooltip, Typography, message } from 'antd';
|
|
import { CameraOutlined, EyeOutlined, ReloadOutlined, SearchOutlined } from '@ant-design/icons';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { getAdminShotTaskSets } from '../api';
|
|
import type { ShotTaskSetOut } from '../types';
|
|
import { formatDate } from '../utils/formatDate';
|
|
|
|
const PAGE_SIZE = 20;
|
|
|
|
const TASK_STATUS_OPTIONS = [
|
|
{ value: 'pending_analysis', label: '等待分析' },
|
|
{ value: 'analyzing', label: '分析中' },
|
|
{ value: 'analysis_completed', label: '分析完成' },
|
|
{ value: 'analysis_failed', label: '分析失败' },
|
|
{ value: 'splitting', label: '拆镜中' },
|
|
{ value: 'split_completed', label: '拆镜完成' },
|
|
{ value: 'partial_failed', label: '部分失败' },
|
|
{ value: 'failed', label: '失败' },
|
|
];
|
|
|
|
const ANALYSIS_STATUS_OPTIONS = [
|
|
{ value: 'pending', label: '待分析' },
|
|
{ value: 'processing', label: '分析中' },
|
|
{ value: 'completed', label: '分析完成' },
|
|
{ value: 'failed', label: '分析失败' },
|
|
];
|
|
|
|
const SPLIT_STATUS_OPTIONS = [
|
|
{ value: 'none', label: '未拆镜' },
|
|
{ value: 'pending', label: '待拆镜' },
|
|
{ value: 'processing', label: '拆镜中' },
|
|
{ value: 'completed', label: '拆镜完成' },
|
|
{ value: 'failed', label: '拆镜失败' },
|
|
{ value: 'retry_waiting', label: '等待重试' },
|
|
];
|
|
|
|
const STATUS_MAP: Record<string, { color: string; text: string }> = {
|
|
pending_analysis: { color: 'default', text: '等待分析' },
|
|
analyzing: { color: 'processing', text: '分析中' },
|
|
analysis_completed: { color: 'success', text: '分析完成' },
|
|
analysis_failed: { color: 'error', text: '分析失败' },
|
|
splitting: { color: 'warning', text: '拆镜中' },
|
|
split_completed: { color: 'success', text: '拆镜完成' },
|
|
partial_failed: { color: 'orange', text: '部分失败' },
|
|
failed: { color: 'error', text: '失败' },
|
|
none: { color: 'default', text: '未拆镜' },
|
|
pending: { color: 'default', text: '待处理' },
|
|
processing: { color: 'warning', text: '处理中' },
|
|
completed: { color: 'success', text: '完成' },
|
|
retry_waiting: { color: 'orange', text: '等待重试' },
|
|
};
|
|
|
|
const safeDate = (value?: string | null): string => (value ? formatDate(value) : '-');
|
|
const shortId = (value?: string | null): string => (!value ? '-' : value.length > 16 ? `${value.slice(0, 10)}...` : value);
|
|
|
|
const StatusTag: React.FC<{ status?: string | null }> = ({ status }) => {
|
|
if (!status) return <Tag>-</Tag>;
|
|
const meta = STATUS_MAP[status] || { color: 'blue', text: status };
|
|
return <Tag color={meta.color}>{meta.text}</Tag>;
|
|
};
|
|
|
|
const AdminShotReplications: React.FC = () => {
|
|
const navigate = useNavigate();
|
|
const [items, setItems] = useState<ShotTaskSetOut[]>([]);
|
|
const [total, setTotal] = useState(0);
|
|
const [loading, setLoading] = useState(false);
|
|
const [page, setPage] = useState(1);
|
|
|
|
const [status, setStatus] = useState('');
|
|
const [analysisStatus, setAnalysisStatus] = useState('');
|
|
const [splitStatus, setSplitStatus] = useState('');
|
|
const [inputKeyword, setInputKeyword] = useState('');
|
|
const [inputUserId, setInputUserId] = useState('');
|
|
const [inputUserName, setInputUserName] = useState('');
|
|
const [createdRange, setCreatedRange] = useState<any>(null);
|
|
|
|
const [queryKeyword, setQueryKeyword] = useState('');
|
|
const [queryUserId, setQueryUserId] = useState('');
|
|
const [queryUserName, setQueryUserName] = useState('');
|
|
const [queryCreatedRange, setQueryCreatedRange] = useState<any>(null);
|
|
const [reloadKey, setReloadKey] = useState(0);
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await getAdminShotTaskSets({
|
|
status: status || undefined,
|
|
analysisStatus: analysisStatus || undefined,
|
|
splitStatus: splitStatus || undefined,
|
|
keyword: queryKeyword || undefined,
|
|
userId: queryUserId || undefined,
|
|
userName: queryUserName || undefined,
|
|
createdStart: queryCreatedRange?.[0]?.toISOString?.(),
|
|
createdEnd: queryCreatedRange?.[1]?.toISOString?.(),
|
|
page,
|
|
pageSize: PAGE_SIZE,
|
|
});
|
|
setItems(res.items || []);
|
|
setTotal(res.total || 0);
|
|
} catch (e: any) {
|
|
message.error(e?.message || '加载拆镜复刻任务失败');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [analysisStatus, page, queryCreatedRange, queryKeyword, queryUserId, queryUserName, splitStatus, status]);
|
|
|
|
useEffect(() => {
|
|
load();
|
|
}, [load, reloadKey]);
|
|
|
|
const doSearch = () => {
|
|
setQueryKeyword(inputKeyword.trim());
|
|
setQueryUserId(inputUserId.trim());
|
|
setQueryUserName(inputUserName.trim());
|
|
setQueryCreatedRange(createdRange);
|
|
setPage(1);
|
|
};
|
|
|
|
const resetSearch = () => {
|
|
setStatus('');
|
|
setAnalysisStatus('');
|
|
setSplitStatus('');
|
|
setInputKeyword('');
|
|
setInputUserId('');
|
|
setInputUserName('');
|
|
setCreatedRange(null);
|
|
setQueryKeyword('');
|
|
setQueryUserId('');
|
|
setQueryUserName('');
|
|
setQueryCreatedRange(null);
|
|
setPage(1);
|
|
setReloadKey(v => v + 1);
|
|
};
|
|
|
|
return (
|
|
<Card variant="outlined" style={{ borderRadius: 12, border: '1px solid #f0f0f5' }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16, flexWrap: 'wrap', gap: 12 }}>
|
|
<Space>
|
|
<CameraOutlined style={{ fontSize: 18, color: '#6366f1' }} />
|
|
<Typography.Text strong style={{ fontSize: 16 }}>拆镜复刻</Typography.Text>
|
|
<Tag color="purple">{total} 条记录</Tag>
|
|
</Space>
|
|
<Button icon={<ReloadOutlined />} onClick={() => setReloadKey(v => v + 1)}>刷新</Button>
|
|
</div>
|
|
|
|
<Space wrap>
|
|
<Select allowClear placeholder="总任务状态" style={{ width: 150 }} value={status || undefined} onChange={v => { setStatus(v || ''); setPage(1); }} options={TASK_STATUS_OPTIONS} />
|
|
<Select allowClear placeholder="分析状态" style={{ width: 140 }} value={analysisStatus || undefined} onChange={v => { setAnalysisStatus(v || ''); setPage(1); }} options={ANALYSIS_STATUS_OPTIONS} />
|
|
<Select allowClear placeholder="拆镜状态" style={{ width: 140 }} value={splitStatus || undefined} onChange={v => { setSplitStatus(v || ''); setPage(1); }} options={SPLIT_STATUS_OPTIONS} />
|
|
<Input allowClear prefix={<SearchOutlined />} placeholder="关键词：标题/内容/分类/受众" style={{ width: 260 }} value={inputKeyword} onChange={e => setInputKeyword(e.target.value)} onPressEnter={doSearch} />
|
|
<Input allowClear placeholder="用户ID（管理员）" style={{ width: 190 }} value={inputUserId} onChange={e => setInputUserId(e.target.value)} onPressEnter={doSearch} />
|
|
<Input allowClear placeholder="用户名（管理员）" style={{ width: 230 }} value={inputUserName} onChange={e => setInputUserName(e.target.value)} onPressEnter={doSearch} />
|
|
<DatePicker.RangePicker showTime value={createdRange} onChange={setCreatedRange} placeholder={['创建开始', '创建结束']} />
|
|
<Button type="primary" icon={<SearchOutlined />} onClick={doSearch}>搜索</Button>
|
|
<Button onClick={resetSearch}>重置</Button>
|
|
</Space>
|
|
|
|
<Table
|
|
rowKey="id"
|
|
loading={loading}
|
|
dataSource={items}
|
|
pagination={{ current: page, pageSize: PAGE_SIZE, total, showSizeChanger: false, showTotal: value => `共 ${value} 条`, onChange: setPage }}
|
|
scroll={{ x: 1500 }}
|
|
columns={[
|
|
{ title: '任务集ID', dataIndex: 'id', width: 150, render: (v: string) => <Tooltip title={v}>{shortId(v)}</Tooltip> },
|
|
{
|
|
title: '用户',
|
|
width: 180,
|
|
render: (_, record) => (
|
|
<Space direction="vertical" size={0}>
|
|
<Typography.Text>{record.userName || '-'}</Typography.Text>
|
|
<Typography.Text type="secondary" style={{ fontSize: 12 }}>{shortId(record.userId)}</Typography.Text>
|
|
</Space>
|
|
),
|
|
},
|
|
{
|
|
title: '任务信息',
|
|
width: 300,
|
|
render: (_, record) => (
|
|
<Space direction="vertical" size={2}>
|
|
<Typography.Text strong>{record.title || '-'}</Typography.Text>
|
|
<Typography.Text type="secondary" ellipsis style={{ maxWidth: 280 }}>分类：{record.originalVideoCategory || '-'}</Typography.Text>
|
|
<Typography.Text type="secondary" ellipsis style={{ maxWidth: 280 }}>受众：{record.originalVideoAudience || '-'}</Typography.Text>
|
|
</Space>
|
|
),
|
|
},
|
|
{ title: '总状态', dataIndex: 'status', width: 120, render: (v: string) => <StatusTag status={v} /> },
|
|
{ title: '分析状态', dataIndex: 'analysisStatus', width: 110, render: (v: string) => <StatusTag status={v} /> },
|
|
{ title: '拆镜状态', dataIndex: 'splitStatus', width: 110, render: (v: string) => <StatusTag status={v} /> },
|
|
{
|
|
title: '切片进度',
|
|
width: 180,
|
|
render: (_, record) => {
|
|
const totalSegments = record.segmentCount || 0;
|
|
const done = record.completedSegmentCount || 0;
|
|
const percent = totalSegments ? Math.round((done / totalSegments) * 100) : 0;
|
|
return <Progress size="small" percent={percent} format={() => `${done}/${totalSegments}`} />;
|
|
},
|
|
},
|
|
{ title: '失败片段', dataIndex: 'failedSegmentCount', width: 90, render: (v: number) => v ? <Tag color="error">{v}</Tag> : <Tag>0</Tag> },
|
|
{ title: '视频时长', dataIndex: 'videoDurationSeconds', width: 100, render: (v: number) => `${Number(v || 0).toFixed(1)}s` },
|
|
{ title: '创建时间', dataIndex: 'createdAt', width: 170, render: safeDate },
|
|
{ title: '更新时间', dataIndex: 'updatedAt', width: 170, render: safeDate },
|
|
{
|
|
title: '操作',
|
|
fixed: 'right',
|
|
width: 120,
|
|
render: (_, record) => <Button type="link" icon={<EyeOutlined />} onClick={() => navigate(`/shot-replications/task-sets/${record.id}`)}>查看切片</Button>,
|
|
},
|
|
]}
|
|
/>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default AdminShotReplications;
|