Merge branch 'fix/competitor-page-review-20260928'

2026-09-28 11:15:01 +08:00
parent bf4ded45b1 143f3b263e
commit 733b2d4b95
15 changed files with 564 additions and 116 deletions
@@ -139,28 +139,45 @@ export default function Page() {
  return (
    <Flex vertical gap={16}>
      <Card title="账号画像">
-        <Descriptions
-          column={{ xs: 1, sm: 2, md: 3 }}
-          size="small"
-          items={[
-            { key: 'key', label: '平台账号', children: competitor.platform_account_key },
-            { key: 'uid', label: '抖音号', children: competitor.unique_id || '—' },
-            { key: 'follower', label: '粉丝', children: formatCount(competitor.follower_count) },
-            { key: 'following', label: '关注', children: formatCount(competitor.following_count) },
-            { key: 'aweme', label: '作品总数', children: formatCount(competitor.aweme_count) },
-            { key: 'tags', label: '标签', children: competitor.tags?.length ? competitor.tags.join('、') : '无' },
-            { key: 'lastSync', label: '上次同步', children: competitor.last_sync_at ? dateTime(competitor.last_sync_at) : '—' },
-            { key: 'nextSync', label: '下次自动同步', children: competitor.next_sync_at ? dateTime(competitor.next_sync_at) : '—' },
-            {
-              key: 'syncError',
-              label: '同步异常',
-              children: competitor.sync_error ? (
-                <Typography.Text type="danger" style={{ fontSize: 12 }}>{competitor.sync_error}</Typography.Text>
-              ) : (
-                '—'
-              ) },
-          ]}
-        />
+        <Flex gap={24} align="flex-start" wrap="wrap">
+          <Avatar size={100} shape="square" src={competitor.avatar_url || undefined} style={{ flexShrink: 0 }}>
+            {(competitor.nickname || competitor.platform_account_key).slice(0, 1).toUpperCase()}
+          </Avatar>
+          <Flex vertical gap={4} style={{ flex: 1, minWidth: 260 }}>
+            <Flex align="center" gap={8} wrap="wrap">
+              <Typography.Title level={4} style={{ marginBottom: 0 }}>
+                {competitor.nickname || competitor.platform_account_key}
+              </Typography.Title>
+              <Tag color={syncMeta.color}>{syncMeta.label}</Tag>
+            </Flex>
+            <Typography.Text type="secondary">
+              {competitor.unique_id || competitor.platform_account_key} · {platformLabel(competitor.platform)}
+            </Typography.Text>
+            <Descriptions
+              column={{ xs: 1, sm: 2 }}
+              size="small"
+              style={{ marginTop: 8 }}
+              items={[
+                { key: 'key', label: '平台账号', children: competitor.platform_account_key },
+                { key: 'uid', label: '抖音号', children: competitor.unique_id || '—' },
+                { key: 'follower', label: '粉丝', children: formatCount(competitor.follower_count) },
+                { key: 'following', label: '关注', children: formatCount(competitor.following_count) },
+                { key: 'aweme', label: '作品总数', children: formatCount(competitor.aweme_count) },
+                { key: 'tags', label: '标签', children: competitor.tags?.length ? competitor.tags.join('、') : '无' },
+                { key: 'lastSync', label: '上次同步', children: competitor.last_sync_at ? dateTime(competitor.last_sync_at) : '—' },
+                { key: 'nextSync', label: '下次自动同步', children: competitor.next_sync_at ? dateTime(competitor.next_sync_at) : '—' },
+                {
+                  key: 'syncError',
+                  label: '同步异常',
+                  children: competitor.sync_error ? (
+                    <Typography.Text type="danger" style={{ fontSize: 12 }}>{competitor.sync_error}</Typography.Text>
+                  ) : (
+                    '—'
+                  ) },
+              ]}
+            />
+          </Flex>
+        </Flex>
      </Card>
      <WorksGallery sourceId={competitor.id} sourceType="competitor" />
    </Flex>
@@ -1,11 +1,11 @@
 // 竞品分析：作品列表对齐 ant-design-pro card-list——antd Row/Col 响应式栅格 + Card 原样组合；
 // 作品详情与素材处理均走 Drawer；日期筛选用 antd DatePicker；筛选自动刷新、手动翻页不变。
-// 平台筛选已随 migration 038（platform 收敛 douyin）移除。
+// 封面读本地缓存（/works/:id/cover，认证 fetch + blob）；发布时间状态详情见 publishedAtStatusMeta 注释。
 import { useEffect, useState } from 'react';
 import { CommentOutlined, LikeOutlined, ShareAltOutlined } from '@ant-design/icons';
-import { Alert, App, Button, Card, Col, DatePicker, Drawer, Empty, Flex, Input, InputNumber, Modal, Row, Select, Space, Spin, Table, Tag, Typography } from 'antd';
+import { Alert, App, Button, Card, Col, DatePicker, Drawer, Empty, Flex, Input, InputNumber, Modal, Row, Select, Space, Spin, Table, Tag, Tooltip, Typography } from 'antd';
 import type { Dayjs } from 'dayjs';
-import { creatorAction, creatorGet, creatorUpdate, getList } from '@/services/api';
+import { creatorAction, creatorGet, creatorUpdate, fetchCreatorBinary, getList } from '@/services/api';
 import { conflictMessage, dateTime } from '@/utils/helpers';

 const publishedAtStatusOptions = [
@@ -15,11 +15,12 @@ const publishedAtStatusOptions = [
  { value: 'invalid', label: '无效时间' },
 ];

-const publishedAtStatusMeta: Record<string, { color?: string; label: string }> = {
-  verified: { color: 'green', label: '已核验' },
-  future: { color: 'orange', label: '未来时间' },
-  pending_verification: { label: '待核验' },
-  invalid: { color: 'red', label: '无效时间' } };
+const publishedAtStatusMeta: Record<string, { color?: string; label: string; hint?: string }> = {
+  // verified：发布时间从平台原始数据中成功解析且已核验（非未来时间、非无效值）。
+  verified: { color: 'green', label: '已核验', hint: '发布时间已从平台数据成功解析核验' },
+  future: { color: 'orange', label: '未来时间', hint: '发布时间晚于当前时间，可能是定时发布' },
+  pending_verification: { label: '待核验', hint: '平台未返回发布时间，待后续采集补齐' },
+  invalid: { color: 'red', label: '无效时间', hint: '平台返回的发布时间无效（如 0 或负值）' } };

 interface Filters {
  minLikes?: number;
@@ -32,7 +33,36 @@ interface Filters {

 function statusTag(status?: string) {
  const meta = publishedAtStatusMeta[status || ''] || { label: status || '—' };
-  return <Tag color={meta.color}>{meta.label}</Tag>;
+  const tag = <Tag color={meta.color}>{meta.label}</Tag>;
+  return meta.hint ? <Tooltip title={meta.hint}>{tag}</Tooltip> : tag;
+}
+
+// 作品封面：从本地缓存接口读取（认证 fetch + blob URL）；缓存缺失时展示占位。
+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: '16 / 9', objectFit: 'cover' }} />;
+  }
+  return (
+    <Flex align="center" justify="center" style={{ aspectRatio: '16 / 9', background: '#f5f5f5' }}>
+      <Typography.Text type="secondary" style={{ fontSize: 12 }}>{missing ? '封面未缓存' : '封面加载中'}</Typography.Text>
+    </Flex>
+  );
 }

 function stepTag(status: string, label: string) {
@@ -241,13 +271,10 @@ export default function Page() {
            />
          </Space>
        </Card>
-        <Card title="作品与指标">
+        <Card title="作品与指标" extra={<Typography.Text type="secondary">共 {workPageInfo.total} 个作品</Typography.Text>}>
          {error ? (
            <Alert type="error" showIcon style={{ marginBottom: 16 }} title={error.message} action={<Button size="small" onClick={load}>重试</Button>} />
          ) : null}
-          <Flex justify="space-between" align="center" style={{ marginBottom: 16 }}>
-            <Typography.Text type="secondary">共 {workPageInfo.total} 个作品</Typography.Text>
-          </Flex>
          <Spin spinning={pending}>
            {works.length ? (
              <Row gutter={[16, 16]}>
@@ -255,15 +282,8 @@ export default function Page() {
                  <Col key={work.id} xs={24} sm={12} lg={8} xl={6}>
                    <Card
                      style={{ height: '100%' }}
-                      cover={
-                        work.cover_url ? (
-                          <img src={work.cover_url} alt={work.title || '作品封面'} style={{ width: '100%', aspectRatio: '16 / 9', objectFit: 'cover' }} />
-                        ) : (
-                          <Flex align="center" justify="center" style={{ aspectRatio: '16 / 9', background: '#f5f5f5' }}>
-                            <Typography.Text type="secondary" style={{ fontSize: 12 }}>无封面</Typography.Text>
-                          </Flex>
-                        )
-                      }
+                      styles={{ body: { padding: '0 0 12px' } }}
+                      cover={<WorkCover workID={work.id} title={work.title} />}
                      actions={[
                        <Button key="detail" type="link" size="small" onClick={() => openWorkDetail(work.id)} disabled={workDetailPending}>
                          详情
@@ -279,29 +299,27 @@ export default function Page() {
                        ...(work.original_url ? [<Typography.Link key="origin" href={work.original_url} target="_blank">原文</Typography.Link>] : []),
                      ]}
                    >
-                      <Flex vertical gap={8} style={{ minWidth: 0 }}>
-                        <Typography.Paragraph strong ellipsis={{ rows: 2 }} style={{ marginBottom: 0 }}>
-                          {work.title || '无标题'}
-                        </Typography.Paragraph>
-                        <Typography.Text type="secondary" style={{ fontSize: 12 }} ellipsis>
-                          {work.author_name || work.source_id}
-                        </Typography.Text>
-                        <Space size={8} wrap>
-                          {statusTag(work.published_at_status)}
-                          <Typography.Text type="secondary" style={{ fontSize: 12 }}>
-                            {work.published_at ? dateTime(work.published_at) : '—'}
-                          </Typography.Text>
-                        </Space>
-                        <Flex gap={16}>
-                          <Typography.Text style={{ fontSize: 12 }}><LikeOutlined /> {work.likes ?? '—'}</Typography.Text>
-                          <Typography.Text style={{ fontSize: 12 }}><CommentOutlined /> {work.comments_count ?? '—'}</Typography.Text>
-                          <Typography.Text style={{ fontSize: 12 }}><ShareAltOutlined /> {work.shares ?? '—'}</Typography.Text>
-                        </Flex>
-                        {work.next_metric_at || work.metric_stop_reason ? (
+                      <div style={{ padding: '12px 16px 0' }}>
+                        <Flex vertical gap={8} style={{ minWidth: 0 }}>
+                          <Typography.Paragraph strong ellipsis={{ rows: 2 }} style={{ marginBottom: 0 }}>
+                            {work.title || '无标题'}
+                          </Typography.Paragraph>
                          <Typography.Text type="secondary" style={{ fontSize: 12 }} ellipsis>
-                            {work.next_metric_at ? `下次采集 ${dateTime(work.next_metric_at)}` : work.metric_stop_reason}
+                            作者：{work.author_name || '—'}
                          </Typography.Text>
-                        ) : null}
+                          <Space size={8} wrap>
+                            {statusTag(work.published_at_status)}
+                            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+                              {work.published_at ? dateTime(work.published_at) : '—'}
+                            </Typography.Text>
+                          </Space>
+                        </Flex>
+                      </div>
+                      {/* 点赞/评论/分享全宽贴在封面下方（body padding 置 0，本行自带上下边框） */}
+                      <Flex gap={16} justify="space-between" style={{ margin: '10px 0 0', padding: '8px 16px', borderTop: '1px solid #f0f0f0', borderBottom: '1px solid #f0f0f0' }}>
+                        <Typography.Text style={{ fontSize: 12 }}><LikeOutlined /> {work.likes ?? '—'}</Typography.Text>
+                        <Typography.Text style={{ fontSize: 12 }}><CommentOutlined /> {work.comments_count ?? '—'}</Typography.Text>
+                        <Typography.Text style={{ fontSize: 12 }}><ShareAltOutlined /> {work.shares ?? '—'}</Typography.Text>
                      </Flex>
                    </Card>
                  </Col>
@@ -395,9 +413,7 @@ export default function Page() {
      <Drawer open={Boolean(workDetail)} onClose={() => setWorkDetail(null)} size="large" title="作品详情">
        {workDetail ? (
          <Flex vertical gap={12}>
-            {workDetail.cover_url ? (
-              <img src={workDetail.cover_url} alt="作品封面" style={{ maxHeight: 256, borderRadius: 4, border: '1px solid #f0f0f0' }} />
-            ) : null}
+            <WorkCover workID={workDetail.id} title={workDetail.title || '作品封面'} />
            <Typography.Text type="secondary" style={{ fontSize: 12 }}>ID：{workDetail.work_key || workDetail.id}</Typography.Text>
            <Typography.Paragraph style={{ whiteSpace: 'pre-wrap', marginBottom: 0 }}>{workDetail.body || workDetail.title || '暂无正文'}</Typography.Paragraph>
            <Space wrap>
@@ -137,6 +137,20 @@ export function creatorRequest(path: string, options?: RequestInit) {
  return request(path, options);
 }

+// 二进制资源（如作品封面缓存）：与 creatorSubscribe 同样的认证 fetch，返回 Blob 供 objectURL 展示。
+export async function fetchCreatorBinary(path: string): Promise<Blob> {
+  const auth = localStorage.getItem(AUTH_STORAGE_KEY);
+  const headers: Record<string, string> = {};
+  if (auth) headers.Authorization = `Basic ${btoa(auth)}`;
+  const response = await fetch(`/api${path}`, { headers });
+  if (response.status === 401) unauthorized();
+  if (!response.ok) {
+    const body = await response.json().catch(() => ({}));
+    throw new RequestError(body.error || `请求失败 (${response.status})`, response.status, body);
+  }
+  return response.blob();
+}
+
 export function creatorAction(path: string, data?: unknown) {
  return request(path, data === undefined ? { method: 'POST' } : jsonOptions('POST', data));
 }