265 lines
14 KiB
TypeScript
265 lines
14 KiB
TypeScript
import React, { useEffect, useMemo, useState } from 'react';
|
|
import { Button, Card, Image, Input, Select, Space, Statistic, Table, Tag, Tooltip, Typography, message } from 'antd';
|
|
import type { ColumnsType } from 'antd/es/table';
|
|
import { CopyOutlined, PlayCircleOutlined, ReloadOutlined, SearchOutlined } from '@ant-design/icons';
|
|
import { adminGetPrivatePortraitAssets, adminGetPrivatePortraitProjects } from '../api';
|
|
import type { PrivatePortraitAsset, PrivatePortraitProject } from '../types';
|
|
import { formatDate } from '../utils/formatDate';
|
|
import { apiUrl } from '../utils/resourceUrl';
|
|
|
|
const { Title, Text } = Typography;
|
|
|
|
const PAGE_SIZE = 20;
|
|
|
|
const LIBRARY_OPTIONS = [
|
|
{ label: '全部素材库', value: '' },
|
|
{ label: '真人认证', value: 'real_person' },
|
|
{ label: '虚拟人像', value: 'aigc_virtual' },
|
|
];
|
|
|
|
const ASSET_TYPE_OPTIONS = [
|
|
{ label: '全部类型', value: '' },
|
|
{ label: '图片', value: 'Image' },
|
|
{ label: '视频', value: 'Video' },
|
|
];
|
|
|
|
const PROJECT_STATUS_OPTIONS = [
|
|
{ label: '全部项目状态', value: '' },
|
|
{ label: '可用', value: 'active' },
|
|
{ label: '认证中', value: 'validating' },
|
|
{ label: '认证失败', value: 'validate_failed' },
|
|
{ label: '创建远端组中', value: 'creating_remote_group' },
|
|
{ label: '创建远端组失败', value: 'create_group_failed' },
|
|
{ label: '已删除', value: 'deleted' },
|
|
];
|
|
|
|
const ASSET_STATUS_OPTIONS = [
|
|
{ label: '全部素材状态', value: '' },
|
|
{ label: '创建中', value: 'creating' },
|
|
{ label: '处理中', value: 'Processing' },
|
|
{ label: '可用', value: 'Active' },
|
|
{ label: '失败', value: 'Failed' },
|
|
{ label: '本地已删', value: 'local_deleted' },
|
|
{ label: '远端已删', value: 'remote_deleted' },
|
|
{ label: '删除失败', value: 'delete_failed' },
|
|
];
|
|
|
|
const libraryLabel = (value?: string | null) => {
|
|
if (value === 'real_person') return '真人认证';
|
|
if (value === 'aigc_virtual') return '虚拟人像';
|
|
return value || '-';
|
|
};
|
|
|
|
const libraryColor = (value?: string | null) => {
|
|
if (value === 'real_person') return 'purple';
|
|
if (value === 'aigc_virtual') return 'cyan';
|
|
return 'default';
|
|
};
|
|
|
|
const statusColor = (status?: string) => {
|
|
if (status === 'Active' || status === 'active') return 'green';
|
|
if (status === 'Processing' || status === 'creating_remote_group' || status === 'validating' || status === 'creating') return 'blue';
|
|
if (status === 'Failed' || status === 'failed' || status === 'delete_failed' || status === 'validate_failed' || status === 'create_group_failed') return 'red';
|
|
if (status?.includes('deleted')) return 'default';
|
|
return 'default';
|
|
};
|
|
|
|
const assetTypeLabel = (value?: string | null) => {
|
|
if (value === 'Image') return '图片';
|
|
if (value === 'Video') return '视频';
|
|
return value || '-';
|
|
};
|
|
|
|
const shortId = (value?: string | null, keep = 10) => {
|
|
if (!value) return '-';
|
|
if (value.length <= keep * 2 + 3) return value;
|
|
return `${value.slice(0, keep)}...${value.slice(-keep)}`;
|
|
};
|
|
|
|
const copyText = async (value?: string | null) => {
|
|
if (!value) return;
|
|
await navigator.clipboard?.writeText(value);
|
|
message.success('已复制');
|
|
};
|
|
|
|
const toPreviewUrl = (value?: string | null) => {
|
|
if (!value) return '';
|
|
const trimmed = String(value).trim();
|
|
if (!trimmed || trimmed.startsWith('asset://')) return '';
|
|
return apiUrl(trimmed);
|
|
};
|
|
|
|
const PreviewCell: React.FC<{ asset: PrivatePortraitAsset }> = ({ asset }) => {
|
|
const url = toPreviewUrl(asset.displayUrl || asset.previewUrl || asset.remoteUrl || asset.sourceUrl);
|
|
const cover = toPreviewUrl(asset.videoCoverUrl || asset.previewUrl || asset.displayUrl || asset.sourceUrl);
|
|
if (asset.assetType === 'Video') {
|
|
return (
|
|
<div style={{ width: 72, height: 52, borderRadius: 10, overflow: 'hidden', background: '#f5f3ff', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
|
|
{cover ? <img src={cover} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : <PlayCircleOutlined style={{ fontSize: 24, color: '#8b5cf6' }} />}
|
|
{url ? <a href={url} target="_blank" rel="noreferrer" style={{ position: 'absolute', inset: 0 }} /> : null}
|
|
<PlayCircleOutlined style={{ position: 'absolute', color: '#fff', fontSize: 22, filter: 'drop-shadow(0 1px 3px rgba(0,0,0,.45))' }} />
|
|
</div>
|
|
);
|
|
}
|
|
if (url) return <Image width={72} height={52} src={url} style={{ objectFit: 'cover', borderRadius: 10 }} />;
|
|
return <div style={{ width: 72, height: 52, borderRadius: 10, background: '#f5f5f5' }} />;
|
|
};
|
|
|
|
const AdminPrivatePortraitProjects: React.FC = () => {
|
|
const [projects, setProjects] = useState<PrivatePortraitProject[]>([]);
|
|
const [assets, setAssets] = useState<PrivatePortraitAsset[]>([]);
|
|
const [projectTotal, setProjectTotal] = useState(0);
|
|
const [assetTotal, setAssetTotal] = useState(0);
|
|
const [loadingProjects, setLoadingProjects] = useState(false);
|
|
const [loadingAssets, setLoadingAssets] = useState(false);
|
|
const [keyword, setKeyword] = useState('');
|
|
const [libraryType, setLibraryType] = useState('');
|
|
const [assetType, setAssetType] = useState('');
|
|
const [projectStatus, setProjectStatus] = useState('');
|
|
const [assetStatus, setAssetStatus] = useState('');
|
|
const [selectedProjectId, setSelectedProjectId] = useState<string | undefined>();
|
|
const [projectPage, setProjectPage] = useState(1);
|
|
const [assetPage, setAssetPage] = useState(1);
|
|
|
|
const filters = useMemo(() => ({
|
|
keyword: keyword.trim() || undefined,
|
|
libraryType: libraryType || undefined,
|
|
assetType: assetType || undefined,
|
|
projectStatus: projectStatus || undefined,
|
|
assetStatus: assetStatus || undefined,
|
|
}), [keyword, libraryType, assetType, projectStatus, assetStatus]);
|
|
|
|
const loadProjects = async () => {
|
|
setLoadingProjects(true);
|
|
try {
|
|
const res = await adminGetPrivatePortraitProjects({
|
|
keyword: filters.keyword,
|
|
libraryType: filters.libraryType,
|
|
status: filters.projectStatus,
|
|
page: projectPage,
|
|
pageSize: PAGE_SIZE,
|
|
});
|
|
setProjects(res.items || []);
|
|
setProjectTotal(res.total || 0);
|
|
} catch (err: any) {
|
|
message.error(err?.message || '加载私域人像素材项目失败');
|
|
} finally {
|
|
setLoadingProjects(false);
|
|
}
|
|
};
|
|
|
|
const loadAssets = async () => {
|
|
setLoadingAssets(true);
|
|
try {
|
|
const res = await adminGetPrivatePortraitAssets({
|
|
projectId: selectedProjectId,
|
|
keyword: filters.keyword,
|
|
libraryType: filters.libraryType,
|
|
assetType: filters.assetType,
|
|
status: filters.assetStatus,
|
|
page: assetPage,
|
|
pageSize: PAGE_SIZE,
|
|
});
|
|
setAssets(res.items || []);
|
|
setAssetTotal(res.total || 0);
|
|
} catch (err: any) {
|
|
message.error(err?.message || '加载私域人像素材失败');
|
|
} finally {
|
|
setLoadingAssets(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => { loadProjects(); }, [projectPage, filters.libraryType, filters.projectStatus]);
|
|
useEffect(() => { loadAssets(); }, [selectedProjectId, assetPage, filters.libraryType, filters.assetType, filters.assetStatus]);
|
|
|
|
const searchAll = () => {
|
|
setProjectPage(1);
|
|
setAssetPage(1);
|
|
setTimeout(() => { loadProjects(); loadAssets(); }, 0);
|
|
};
|
|
|
|
const resetFilters = () => {
|
|
setKeyword('');
|
|
setLibraryType('');
|
|
setAssetType('');
|
|
setProjectStatus('');
|
|
setAssetStatus('');
|
|
setSelectedProjectId(undefined);
|
|
setProjectPage(1);
|
|
setAssetPage(1);
|
|
};
|
|
|
|
const projectSummary = useMemo(() => {
|
|
return projects.reduce((acc, item) => {
|
|
acc.asset += item.assetCount || 0;
|
|
acc.image += item.imageAssetCount || 0;
|
|
acc.video += item.videoAssetCount || 0;
|
|
acc.active += item.activeAssetCount || 0;
|
|
return acc;
|
|
}, { asset: 0, image: 0, video: 0, active: 0 });
|
|
}, [projects]);
|
|
|
|
const projectColumns: ColumnsType<PrivatePortraitProject> = [
|
|
{ title: '项目名称', dataIndex: 'name', width: 200, fixed: 'left', render: (v, r) => <Button type="link" onClick={() => { setSelectedProjectId(r.id); setAssetPage(1); }}>{v}</Button> },
|
|
{ title: '类型', dataIndex: 'libraryType', width: 110, render: (v) => <Tag color={libraryColor(v)}>{libraryLabel(v)}</Tag> },
|
|
{ title: '用户ID', dataIndex: 'userId', width: 170, render: (v) => <Text code copyable={!!v}>{v || '-'}</Text> },
|
|
{ title: '状态', dataIndex: 'status', width: 130, render: (v) => <Tag color={statusColor(v)}>{v}</Tag> },
|
|
{ title: '素材', width: 170, render: (_, r) => <Space size={4}><Tag>总 {r.assetCount || 0}</Tag><Tag color="blue">图 {r.imageAssetCount || 0}</Tag><Tag color="geekblue">视 {r.videoAssetCount || 0}</Tag></Space> },
|
|
{ title: 'Active', dataIndex: 'activeAssetCount', width: 90 },
|
|
{ title: 'ProjectName', dataIndex: 'remoteProjectName', width: 180, render: (v) => <Text code copyable={!!v}>{v || '-'}</Text> },
|
|
{ title: '创建时间', dataIndex: 'createdAt', width: 170, render: formatDate },
|
|
{ title: '更新时间', dataIndex: 'updatedAt', width: 170, render: formatDate },
|
|
];
|
|
|
|
const assetColumns: ColumnsType<PrivatePortraitAsset> = [
|
|
{ title: '预览', width: 100, fixed: 'left', render: (_, r) => <PreviewCell asset={r} /> },
|
|
{ title: '素材名称', dataIndex: 'name', width: 180, render: (v, r) => <div><Text strong>{v || '未命名素材'}</Text><br /><Text type="secondary">{assetTypeLabel(r.assetType)}</Text></div> },
|
|
{ title: '库类型', dataIndex: 'libraryType', width: 110, render: (v) => <Tag color={libraryColor(v)}>{libraryLabel(v)}</Tag> },
|
|
{ title: '用户ID', dataIndex: 'userId', width: 170, render: (v) => <Text code copyable={!!v}>{v || '-'}</Text> },
|
|
{ title: '本地项目', dataIndex: 'projectName', width: 160, render: (v) => v || '-' },
|
|
{ title: '状态', dataIndex: 'status', width: 120, render: (v) => <Tag color={statusColor(v)}>{v}</Tag> },
|
|
{ title: 'AssetId', dataIndex: 'remoteAssetId', width: 190, render: (v) => <Space><Text code>{shortId(v)}</Text>{v ? <Button size="small" type="text" icon={<CopyOutlined />} onClick={() => copyText(v)} /> : null}</Space> },
|
|
{ title: 'GroupId', dataIndex: 'remoteGroupId', width: 190, render: (v) => <Space><Text code>{shortId(v)}</Text>{v ? <Button size="small" type="text" icon={<CopyOutlined />} onClick={() => copyText(v)} /> : null}</Space> },
|
|
{ title: '轮询', width: 160, render: (_, r) => <div><Text>次数：{r.pollCount || 0}</Text><br /><Text type="secondary">下次：{formatDate((r as any).nextPollAt)}</Text></div> },
|
|
{ title: '错误', dataIndex: 'errorMessage', width: 240, ellipsis: true, render: (v) => v ? <Tooltip title={v}><Text type="danger">{v}</Text></Tooltip> : '-' },
|
|
{ title: '创建时间', dataIndex: 'createdAt', width: 170, render: formatDate },
|
|
];
|
|
|
|
return (
|
|
<div style={{ padding: 24, background: '#f7f7fb', minHeight: '100%' }}>
|
|
<Space style={{ width: '100%', justifyContent: 'space-between', marginBottom: 16 }} align="start">
|
|
<div>
|
|
<Title level={3} style={{ margin: 0 }}>私域人像素材库</Title>
|
|
<Text type="secondary">统一查看真人认证素材与虚拟人像素材，支持图片/视频资产状态排查。</Text>
|
|
</div>
|
|
<Space wrap>
|
|
<Input allowClear prefix={<SearchOutlined />} placeholder="搜索项目/素材" value={keyword} onChange={(e) => setKeyword(e.target.value)} onPressEnter={searchAll} style={{ width: 240 }} />
|
|
<Select value={libraryType} onChange={(v) => { setLibraryType(v); setProjectPage(1); setAssetPage(1); }} options={LIBRARY_OPTIONS} style={{ width: 150 }} />
|
|
<Select value={assetType} onChange={(v) => { setAssetType(v); setAssetPage(1); }} options={ASSET_TYPE_OPTIONS} style={{ width: 130 }} />
|
|
<Button icon={<SearchOutlined />} type="primary" onClick={searchAll}>查询</Button>
|
|
<Button onClick={resetFilters}>重置</Button>
|
|
<Button icon={<ReloadOutlined />} onClick={() => { loadProjects(); loadAssets(); }}>刷新</Button>
|
|
</Space>
|
|
</Space>
|
|
|
|
<Space size={16} wrap style={{ marginBottom: 16 }}>
|
|
<Card style={{ width: 180 }}><Statistic title="项目数" value={projectTotal} /></Card>
|
|
<Card style={{ width: 180 }}><Statistic title="当前页素材" value={projectSummary.asset} /></Card>
|
|
<Card style={{ width: 180 }}><Statistic title="图片" value={projectSummary.image} /></Card>
|
|
<Card style={{ width: 180 }}><Statistic title="视频" value={projectSummary.video} /></Card>
|
|
<Card style={{ width: 180 }}><Statistic title="Active" value={projectSummary.active} /></Card>
|
|
</Space>
|
|
|
|
<Card title="项目组" style={{ marginBottom: 16, borderRadius: 14 }} extra={<Select value={projectStatus} onChange={(v) => { setProjectStatus(v); setProjectPage(1); }} options={PROJECT_STATUS_OPTIONS} style={{ width: 180 }} />}>
|
|
<Table rowKey="id" columns={projectColumns} dataSource={projects} loading={loadingProjects} pagination={{ current: projectPage, pageSize: PAGE_SIZE, total: projectTotal, onChange: setProjectPage }} size="small" scroll={{ x: 1350 }} />
|
|
</Card>
|
|
|
|
<Card title={selectedProjectId ? '项目素材明细' : '全部素材明细'} style={{ borderRadius: 14 }} extra={<Space><Select value={assetStatus} onChange={(v) => { setAssetStatus(v); setAssetPage(1); }} options={ASSET_STATUS_OPTIONS} style={{ width: 170 }} />{selectedProjectId ? <Button size="small" onClick={() => setSelectedProjectId(undefined)}>查看全部</Button> : null}</Space>}>
|
|
<Table rowKey="id" columns={assetColumns} dataSource={assets} loading={loadingAssets} pagination={{ current: assetPage, pageSize: PAGE_SIZE, total: assetTotal, onChange: setAssetPage }} size="small" scroll={{ x: 1700 }} />
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AdminPrivatePortraitProjects;
|