489 lines
20 KiB
TypeScript
489 lines
20 KiB
TypeScript
// 作品数据共享组件：作品 Card 网格（分页 + 24h 点赞增速爆品筛选）
|
||
// + 作品 Drawer（作品详情、增长曲线含播放序列、指标采集记录表含播放列、评论列表）。
|
||
// 竞品账号详情页与自有账号详情页共用；数据通道 GET /creator/works?source_id=&source_type=，
|
||
// 指标 GET /creator/works/:id/metrics，评论 GET /creator/comments?work_id=（定时采集由后端调度器维护）。
|
||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||
import { Line } from '@ant-design/charts';
|
||
import { Alert, App, Button, Card, Col, Drawer, Empty, Flex, InputNumber, Pagination, Row, Space, Spin, Table, Typography } from 'antd';
|
||
import { CommentOutlined, EyeOutlined, StarOutlined, FireOutlined, LikeOutlined, ReloadOutlined, ShareAltOutlined } from '@ant-design/icons';
|
||
import { creatorAction, creatorGet, fetchCreatorBinary, getList } from '@/services/api';
|
||
import { conflictMessage, dateTime } from '@/utils/helpers';
|
||
|
||
// 作品封面：从本地缓存接口读取（认证 fetch + blob URL）；缓存缺失时展示占位。
|
||
// 原始 douyinpic URL 带签名会过期，与竞品分析页共用同一条 /works/:id/cover 链路。
|
||
export function WorkCover({ workID, title }: { workID: string; title?: string }) {
|
||
const [src, setSrc] = useState<string | null>(null);
|
||
const [missing, setMissing] = useState(false);
|
||
useEffect(() => {
|
||
let objectURL: string | null = null;
|
||
setSrc(null);
|
||
setMissing(false);
|
||
fetchCreatorBinary(`/creator/works/${encodeURIComponent(workID)}/cover`)
|
||
.then((blob) => {
|
||
objectURL = URL.createObjectURL(blob);
|
||
setSrc(objectURL);
|
||
})
|
||
.catch(() => setMissing(true));
|
||
return () => {
|
||
if (objectURL) URL.revokeObjectURL(objectURL);
|
||
};
|
||
}, [workID]);
|
||
if (src) {
|
||
return <img src={src} alt={title || '作品封面'} style={{ width: '100%', aspectRatio: '3 / 4', objectFit: 'cover' }} />;
|
||
}
|
||
return (
|
||
<Flex align="center" justify="center" style={{ aspectRatio: '3 / 4', background: '#f5f5f5' }}>
|
||
<Typography.Text type="secondary" style={{ fontSize: 12 }}>
|
||
{missing ? '封面未缓存' : '封面加载中'}
|
||
</Typography.Text>
|
||
</Flex>
|
||
);
|
||
}
|
||
|
||
// 竞品突出互动指标；自有账号额外展示观看量。缺失值与 0 保持区分。
|
||
function WorkStatsGrid({ work, showViews }: { work: any; showViews: boolean }) {
|
||
const items = [
|
||
...(showViews ? [{ key: 'play_count', label: '观看', icon: EyeOutlined }] : []),
|
||
{ key: 'likes', label: '点赞', icon: LikeOutlined },
|
||
{ key: 'comments_count', label: '评论', icon: CommentOutlined },
|
||
{ key: 'shares', label: '分享', icon: ShareAltOutlined },
|
||
{ key: 'collect_count', label: '收藏', icon: StarOutlined },
|
||
];
|
||
return (
|
||
<Flex
|
||
style={{
|
||
padding: '6px 0',
|
||
borderTop: '1px solid #f0f0f0',
|
||
borderBottom: '1px solid #f0f0f0',
|
||
}}
|
||
>
|
||
{items.map(({ key, label, icon: Icon }) => (
|
||
<Flex key={key} vertical align="center" gap={0} style={{ flex: 1, minWidth: 0 }}>
|
||
<Typography.Text strong style={{ fontSize: 14, lineHeight: '20px' }}>
|
||
{work[key] ?? '—'}
|
||
</Typography.Text>
|
||
<Typography.Text type="secondary" style={{ fontSize: 11, lineHeight: '16px' }}>
|
||
<Icon /> {label}
|
||
</Typography.Text>
|
||
</Flex>
|
||
))}
|
||
</Flex>
|
||
);
|
||
}
|
||
|
||
const metricSeriesMeta = [
|
||
{ key: 'play_count', label: '播放' },
|
||
{ key: 'likes', label: '点赞' },
|
||
{ key: 'collect_count', label: '收藏' },
|
||
{ key: 'comments_count', label: '评论' },
|
||
{ key: 'shares', label: '转发' },
|
||
] as const;
|
||
|
||
// 增长曲线：把指标时序点展开成长表（时间 × 指标 × 数值）供折线图渲染。
|
||
function GrowthChart({ metrics }: { metrics: any[] }) {
|
||
const data = useMemo(
|
||
() =>
|
||
metrics.flatMap((point) =>
|
||
metricSeriesMeta
|
||
.filter((series) => point[series.key] != null)
|
||
.map((series) => ({
|
||
time: dateTime(point.collected_at),
|
||
metric: series.label,
|
||
value: point[series.key],
|
||
})),
|
||
),
|
||
[metrics],
|
||
);
|
||
if (!data.length) return null;
|
||
return (
|
||
<Line
|
||
data={data}
|
||
xField="time"
|
||
yField="value"
|
||
colorField="metric"
|
||
height={240}
|
||
yAxis={{
|
||
labelFormatter: (v: number) => (v >= 10000 ? `${(v / 10000).toFixed(1)}w` : `${v}`),
|
||
}}
|
||
legend={{ position: 'top' }}
|
||
/>
|
||
);
|
||
}
|
||
|
||
interface CollectionProgress {
|
||
work_count: number;
|
||
aweme_count: number | null;
|
||
works: { status: string; last_error?: string };
|
||
}
|
||
|
||
interface WorksGalleryProps {
|
||
/** 不传则不限定账号；仍按 sourceType 限定来源类型。监控/自有账号详情传具体账号 ID。 */
|
||
sourceId?: string;
|
||
sourceType?: 'owned' | 'competitor';
|
||
emptyHint?: string;
|
||
/** 页面自有筛选与排序条件透传到作品列表查询。 */
|
||
extraFilters?: Record<string, string | number | undefined>;
|
||
/** 分析页在外部筛选卡中统一管理增量筛选，避免重复入口。 */
|
||
showGrowthFilter?: boolean;
|
||
}
|
||
|
||
export default function WorksGallery({ sourceId, sourceType, emptyHint, extraFilters, showGrowthFilter = true }: WorksGalleryProps) {
|
||
const [works, setWorks] = useState<any[]>([]);
|
||
const [pageState, setPageState] = useState({ filterKey: '', page: 1 });
|
||
const [worksRefresh, setWorksRefresh] = useState(0);
|
||
const [workPageInfo, setWorkPageInfo] = useState({ total: 0 });
|
||
const [collectionProgress, setCollectionProgress] = useState<CollectionProgress | null>(null);
|
||
const [progressError, setProgressError] = useState<any>(null);
|
||
const [worksPending, setWorksPending] = useState(true);
|
||
const [worksError, setWorksError] = useState<any>(null);
|
||
const [minGrowth, setMinGrowth] = useState<number | null>(null);
|
||
const filterKey = JSON.stringify([sourceId, sourceType, extraFilters, minGrowth]);
|
||
const workPage = pageState.filterKey === filterKey ? pageState.page : 1;
|
||
const setWorkPage = (page: number) => setPageState({ filterKey, page });
|
||
const [detailWork, setDetailWork] = useState<any>(null);
|
||
const [workMetrics, setWorkMetrics] = useState<any[]>([]);
|
||
const [metricsPending, setMetricsPending] = useState(false);
|
||
const [comments, setComments] = useState<any[]>([]);
|
||
const [commentPage, setCommentPage] = useState(1);
|
||
const [commentPageSize, setCommentPageSize] = useState(10);
|
||
const [commentTotal, setCommentTotal] = useState(0);
|
||
const [commentsPending, setCommentsPending] = useState(false);
|
||
const { message: messageApi } = App.useApp();
|
||
|
||
const loadWorks = () => setWorksRefresh((value) => value + 1);
|
||
useEffect(() => {
|
||
let active = true;
|
||
async function fetchWorks() {
|
||
setWorksPending(true);
|
||
setWorksError(null);
|
||
setProgressError(null);
|
||
setCollectionProgress(null);
|
||
const progressRequest =
|
||
sourceType === 'owned' && sourceId
|
||
? creatorGet(`/creator/accounts/${encodeURIComponent(sourceId)}/collection-status`)
|
||
.then((progress) => {
|
||
if (active) setCollectionProgress(progress);
|
||
})
|
||
.catch((error) => {
|
||
console.error('读取账号作品采集进度失败', {
|
||
sourceId,
|
||
sourceType,
|
||
error,
|
||
});
|
||
if (active) setProgressError(error);
|
||
})
|
||
: Promise.resolve();
|
||
try {
|
||
const filters: Record<string, string | number | undefined> = {
|
||
...extraFilters,
|
||
};
|
||
if (sourceId) filters.source_id = sourceId;
|
||
if (sourceType) filters.source_type = sourceType;
|
||
if (minGrowth !== null) {
|
||
// 爆品筛选：growth_hours 开启后端 24h 点赞增量计算，min_likes_growth 设下限。
|
||
filters.growth_hours = 24;
|
||
filters.min_likes_growth = minGrowth;
|
||
}
|
||
const result = await getList({
|
||
resource: 'creator-works',
|
||
page: workPage,
|
||
pageSize: 25,
|
||
filters,
|
||
});
|
||
if (active) {
|
||
setWorks(result.data);
|
||
setWorkPageInfo({ total: result.total });
|
||
}
|
||
} catch (loadError) {
|
||
console.error('读取作品列表失败', {
|
||
sourceId,
|
||
sourceType,
|
||
page: workPage,
|
||
minGrowth,
|
||
extraFilters,
|
||
error: loadError,
|
||
});
|
||
if (active) setWorksError(loadError);
|
||
} finally {
|
||
await progressRequest;
|
||
if (active) setWorksPending(false);
|
||
}
|
||
}
|
||
fetchWorks();
|
||
return () => {
|
||
active = false;
|
||
};
|
||
}, [sourceId, sourceType, workPage, minGrowth, extraFilters, worksRefresh]);
|
||
|
||
const loadComments = useCallback(async (workID: string, page: number, pageSize = 10) => {
|
||
setCommentsPending(true);
|
||
try {
|
||
const result = await getList({
|
||
resource: 'creator-comments',
|
||
page,
|
||
pageSize,
|
||
filters: { work_id: workID },
|
||
});
|
||
setComments(result.data);
|
||
setCommentTotal(result.total);
|
||
} catch {
|
||
// 评论加载失败不打断 Drawer 主体（指标数据已在上方），清空并提示。
|
||
setComments([]);
|
||
setCommentTotal(0);
|
||
} finally {
|
||
setCommentsPending(false);
|
||
}
|
||
}, []);
|
||
|
||
async function openWorkDetail(work: any) {
|
||
setDetailWork(work);
|
||
setWorkMetrics([]);
|
||
setComments([]);
|
||
setCommentTotal(0);
|
||
setCommentPage(1);
|
||
setMetricsPending(true);
|
||
try {
|
||
setWorkMetrics((await creatorGet(`/creator/works/${encodeURIComponent(work.id)}/metrics`)) || []);
|
||
} catch (actionError) {
|
||
messageApi.error(conflictMessage(actionError, '作品统计读取失败'));
|
||
} finally {
|
||
setMetricsPending(false);
|
||
}
|
||
loadComments(work.id, 1);
|
||
}
|
||
|
||
let progressHint = '采集进度暂不可用';
|
||
if (collectionProgress) {
|
||
const { work_count: collected, aweme_count: total, works: checkpoint } = collectionProgress;
|
||
progressHint = `已采集 ${collected} / 总计 ${total ?? '未知'}`;
|
||
if (total == null) progressHint += '；抖音作品总数未知，暂无法判断是否完整。';
|
||
else if (collected < total) progressHint += '；尚未采集完整，当前仅展示已采集作品。';
|
||
else if (collected > total) progressHint += '；已采集数量与抖音总数不一致，请重新同步确认。';
|
||
else progressHint += '；当前已采集数量与抖音总数一致。';
|
||
if (checkpoint.status === 'running') progressHint += ' 正在采集。';
|
||
if (checkpoint.status === 'failed' || checkpoint.status === 'blocked') progressHint += ` 采集未完成：${checkpoint.last_error || '请查看账号采集状态。'}`;
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<Card title="作品列表" extra={<Button icon={<ReloadOutlined />} size="small" onClick={loadWorks} disabled={worksPending} aria-label="刷新作品" />}>
|
||
<Flex justify="space-between" align="center" style={{ marginBottom: 16 }}>
|
||
<Flex vertical gap={4}>
|
||
{sourceType === 'owned' && sourceId ? <Typography.Text>{progressHint}</Typography.Text> : null}
|
||
<Typography.Text type="secondary">
|
||
{worksError
|
||
? '作品列表暂不可用'
|
||
: `${minGrowth !== null || extraFilters ? '符合筛选' : sourceType === 'owned' ? '当前列表' : '共'} ${workPageInfo.total} 个作品`}
|
||
；作品由系统按采集间隔自动同步。
|
||
</Typography.Text>
|
||
</Flex>
|
||
{showGrowthFilter ? (
|
||
<Flex align="center" gap={8}>
|
||
<FireOutlined style={{ color: 'rgba(0,0,0,0.45)' }} />
|
||
<Typography.Text type="secondary">24h 点赞增量 ≥</Typography.Text>
|
||
<InputNumber
|
||
size="small"
|
||
min={0}
|
||
placeholder="不限"
|
||
style={{ width: 96 }}
|
||
value={minGrowth}
|
||
onChange={(value) => {
|
||
setMinGrowth(value ?? null);
|
||
setWorkPage(1);
|
||
}}
|
||
/>
|
||
</Flex>
|
||
) : null}
|
||
</Flex>
|
||
{progressError ? (
|
||
<Alert
|
||
type="error"
|
||
showIcon
|
||
title={progressError.message}
|
||
style={{ marginBottom: 16 }}
|
||
action={
|
||
<Button size="small" onClick={loadWorks}>
|
||
重试
|
||
</Button>
|
||
}
|
||
/>
|
||
) : null}
|
||
{worksError ? (
|
||
<Alert
|
||
type="error"
|
||
showIcon
|
||
style={{ marginBottom: 16 }}
|
||
title={worksError.message}
|
||
action={
|
||
<Button size="small" onClick={loadWorks}>
|
||
重试
|
||
</Button>
|
||
}
|
||
/>
|
||
) : null}
|
||
<Spin spinning={worksPending}>
|
||
{works.length ? (
|
||
<Row gutter={[16, 16]}>
|
||
{works.map((work) => (
|
||
<Col key={work.id} xs={24} sm={12} lg={8} xl={{ flex: '20%' }}>
|
||
<Card
|
||
hoverable
|
||
style={{ height: '100%' }}
|
||
styles={{ body: { padding: '0 0 12px' } }}
|
||
onClick={() => openWorkDetail(work)}
|
||
cover={<WorkCover workID={work.id} title={work.title} />}
|
||
>
|
||
<WorkStatsGrid work={work} showViews={sourceType !== 'competitor'} />
|
||
<div style={{ padding: '10px 16px 0' }}>
|
||
<Flex vertical gap={8} style={{ minWidth: 0 }}>
|
||
{/* 无标题作品不渲染标题行，避免占位文案增加卡片噪音。 */}
|
||
{work.title ? (
|
||
<Typography.Paragraph strong ellipsis={{ rows: 2, tooltip: true }} style={{ marginBottom: 0 }}>
|
||
{work.title}
|
||
</Typography.Paragraph>
|
||
) : null}
|
||
{work.body ? (
|
||
<Typography.Paragraph type="secondary" ellipsis={{ rows: 2, tooltip: true }} style={{ fontSize: 12, marginBottom: 0 }}>
|
||
{work.body}
|
||
</Typography.Paragraph>
|
||
) : null}
|
||
<Typography.Text type="secondary" style={{ fontSize: 12 }}>
|
||
{work.published_at ? dateTime(work.published_at) : '发布时间待核验'}
|
||
</Typography.Text>
|
||
</Flex>
|
||
</div>
|
||
{work.likes_growth != null || extraFilters?.growth_hours ? (
|
||
<Typography.Text
|
||
type="secondary"
|
||
style={{
|
||
display: 'block',
|
||
padding: '8px 16px 0',
|
||
fontSize: 12,
|
||
}}
|
||
>
|
||
<FireOutlined /> 24h 点赞增量 {work.likes_growth == null ? '—' : `+${work.likes_growth}`}
|
||
{work.likes_growth_coverage === 'partial' ? '（样本不足）' : ''}
|
||
</Typography.Text>
|
||
) : null}
|
||
</Card>
|
||
</Col>
|
||
))}
|
||
</Row>
|
||
) : (
|
||
<Empty description={worksPending ? '加载中…' : emptyHint || '暂无作品；新账号会在下一轮自动采集中拉取作品。'} />
|
||
)}
|
||
</Spin>
|
||
{workPageInfo.total > works.length ? (
|
||
<Flex justify="flex-end" style={{ marginTop: 12 }}>
|
||
<Pagination
|
||
current={workPage}
|
||
pageSize={25}
|
||
total={workPageInfo.total}
|
||
showSizeChanger={false}
|
||
showTotal={(total) => `${sourceType === 'owned' ? '当前列表共' : '共'} ${total} 个作品`}
|
||
disabled={worksPending}
|
||
onChange={(page) => setWorkPage(page)}
|
||
/>
|
||
</Flex>
|
||
) : null}
|
||
</Card>
|
||
<Drawer open={Boolean(detailWork)} onClose={() => setDetailWork(null)} size="large" title="作品统计">
|
||
{detailWork ? (
|
||
<Flex vertical gap={12}>
|
||
<Typography.Text type="secondary" style={{ fontSize: 12 }}>
|
||
ID：{detailWork.work_key || detailWork.id}
|
||
</Typography.Text>
|
||
{detailWork.title ? (
|
||
<Typography.Paragraph strong style={{ marginBottom: 0 }}>
|
||
{detailWork.title}
|
||
</Typography.Paragraph>
|
||
) : null}
|
||
<Typography.Paragraph style={{ whiteSpace: 'pre-wrap', marginBottom: 0 }}>{detailWork.body || '暂无正文'}</Typography.Paragraph>
|
||
<Space wrap>
|
||
<Typography.Text type="secondary">
|
||
发布：
|
||
{detailWork.published_at ? dateTime(detailWork.published_at) : '—'}
|
||
</Typography.Text>
|
||
{detailWork.original_url ? (
|
||
<Typography.Link href={detailWork.original_url} target="_blank">
|
||
打开原文
|
||
</Typography.Link>
|
||
) : null}
|
||
</Space>
|
||
{workMetrics.length >= 2 ? <GrowthChart metrics={workMetrics} /> : null}
|
||
<Table
|
||
rowKey="collected_at"
|
||
size="small"
|
||
loading={metricsPending}
|
||
pagination={false}
|
||
dataSource={workMetrics}
|
||
columns={[
|
||
{
|
||
title: '采集时间',
|
||
dataIndex: 'collected_at',
|
||
render: (value: string) => dateTime(value),
|
||
},
|
||
{
|
||
title: '播放',
|
||
dataIndex: 'play_count',
|
||
render: (v) => v ?? '—',
|
||
},
|
||
{ title: '点赞', dataIndex: 'likes', render: (v) => v ?? '—' },
|
||
{
|
||
title: '收藏',
|
||
dataIndex: 'collect_count',
|
||
render: (v) => v ?? '—',
|
||
},
|
||
{
|
||
title: '评论',
|
||
dataIndex: 'comments_count',
|
||
render: (v) => v ?? '—',
|
||
},
|
||
{ title: '转发', dataIndex: 'shares', render: (v) => v ?? '—' },
|
||
]}
|
||
locale={{ emptyText: '暂无指标记录。' }}
|
||
/>
|
||
<Typography.Title level={5} style={{ marginBottom: 0 }}>
|
||
评论
|
||
</Typography.Title>
|
||
<Table
|
||
rowKey="id"
|
||
size="small"
|
||
loading={commentsPending}
|
||
dataSource={comments}
|
||
pagination={{
|
||
current: commentPage,
|
||
pageSize: commentPageSize,
|
||
total: commentTotal,
|
||
// 受控分页必须同时接住 page 和 pageSize：丢掉 pageSize 会让「条/页」下拉选择后立即回弹。
|
||
onChange: (page: number, pageSize: number) => {
|
||
setCommentPage(page);
|
||
setCommentPageSize(pageSize);
|
||
loadComments(detailWork.id, page, pageSize);
|
||
},
|
||
hideOnSinglePage: true,
|
||
}}
|
||
columns={[
|
||
{
|
||
title: '作者 / 时间',
|
||
width: 160,
|
||
render: (_, record) => (
|
||
<Flex vertical gap={2}>
|
||
<Typography.Text>{record.author_name || '—'}</Typography.Text>
|
||
<Typography.Text type="secondary" style={{ fontSize: 12 }}>
|
||
{record.published_at ? dateTime(record.published_at) : '—'}
|
||
</Typography.Text>
|
||
</Flex>
|
||
),
|
||
},
|
||
{ title: '内容', dataIndex: 'content' },
|
||
]}
|
||
locale={{ emptyText: '暂无评论。' }}
|
||
/>
|
||
</Flex>
|
||
) : null}
|
||
</Drawer>
|
||
</>
|
||
);
|
||
}
|