feat: use linked covers and account names in comment aggregation

web/src/pages/creator/comments/index.tsx

@@ -14,13 +14,13 @@ import type { TableColumnsType } from "antd";
 import { useEffect, useState } from "react";
 import { creatorGet, getList } from "@/services/api";
 import { conflictMessage } from "@/utils/helpers";
+import { WorkCover } from "@/components/creator/WorksGallery";
 
 type SourceType = "owned" | "competitor";
 type Account = {
   id: string;
   name?: string;
   nickname?: string;
-  platform_account_key?: string;
 };
 type AggregatedComment = {
   id: string;
@@ -28,12 +28,10 @@ type AggregatedComment = {
   author_name: string;
   content: string;
   published_at: string;
-  source_id: string;
   source_name: string;
-  source_account_key: string;
+  work_id: string;
   work_key: string;
   work_title: string;
-  work_url: string;
 };
 const timeOptions = [
   { value: 1, label: "最近 1 小时" },
@@ -69,29 +67,28 @@ const columns: TableColumnsType<AggregatedComment> = [
   { title: "评论内容", dataIndex: "content", width: 320 },
   {
     title: "所属账号",
-    width: 200,
+    width: 180,
     render: (_, item) => (
-      <Flex vertical>
-        <Typography.Text>
-          {item.source_name || item.source_account_key || item.source_id}
-        </Typography.Text>
-        {item.source_account_key && (
-          <Typography.Text type="secondary">{`UID：${item.source_account_key}`}</Typography.Text>
-        )}
-      </Flex>
+      <Typography.Text>{item.source_name || "未命名账号"}</Typography.Text>
     ),
   },
   {
     title: "对应作品",
-    width: 240,
-    render: (_, item) =>
-      item.work_url ? (
-        <Typography.Link href={item.work_url} target="_blank" rel="noreferrer">
-          {item.work_title || item.work_key}
-        </Typography.Link>
-      ) : (
-        <Typography.Text>{item.work_title || item.work_key}</Typography.Text>
-      ),
+    width: 100,
+    render: (_, item) => (
+      <Typography.Link
+        href={`https://www.douyin.com/video/${encodeURIComponent(item.work_key)}`}
+        target="_blank"
+        rel="noreferrer"
+        aria-label={`查看作品：${item.work_title || item.work_key}`}
+        style={{ display: "inline-block", width: 48 }}
+      >
+        <WorkCover
+          workID={item.work_id}
+          title={item.work_title || "作品封面"}
+        />
+      </Typography.Link>
+    ),
   },
 ];
 
@@ -215,7 +212,9 @@ export function CommentAggregationTab({
               value={filters.sourceId}
               options={accounts.map((account) => ({
                 value: account.id,
-                label: `${(sourceType === "owned" ? account.name : account.nickname) || account.platform_account_key || account.id}${account.platform_account_key ? `（${account.platform_account_key}）` : ""}`,
+                label:
+                  (sourceType === "owned" ? account.name : account.nickname) ||
+                  "未命名账号",
               }))}
               onChange={(sourceId) => changeFilters({ ...filters, sourceId })}
             />
@@ -263,7 +262,7 @@ export function CommentAggregationTab({
           columns={columns}
           dataSource={comments}
           loading={pending}
-          scroll={{ x: 1120 }}
+          scroll={{ x: 960 }}
           locale={{
             emptyText: error
               ? "评论读取失败，请点击刷新重试"