From 89b7b1e82525b560b4df18400ecfe37a09e01375 Mon Sep 17 00:00:00 2001
From: butubb <1422726308@qq.com>
Date: Wed, 7 Oct 2026 15:21:29 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=B0=81=E9=9D=A2=E5=9B=BE=E4=B8=8D?=
 =?UTF-8?q?=E5=86=8D=E8=A2=AB=E5=9B=BE=E5=BA=8A=E6=8B=92=E7=BB=9D=EF=BC=8C?=
 =?UTF-8?q?=E4=BD=9C=E5=93=81=E6=A0=8F=E8=A1=A5=E4=B8=8A=E5=B0=81=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- NoteCover: 新增共用封面组件，核心是 referrerPolicy="no-referrer"。小红书图床对带外部 Referer 的请求一律 403，而浏览器对跨域 <img> 默认就会带上本站源作为 Referer —— 于是封面全显示成破图，而 URL 本身完全正常。实测同一张图：无 Referer 200 / 67968B，Referer 为本站 403 / 0B
- CommentsFeed: 改用 NoteCover，修掉评论栏封面全部加载失败
- NotesTable: 作品栏此前完全没有渲染封面，补上缩略图；封面缺失时用占位块，避免行高随封面陆续到达而跳动

放在一个组件里而不是就地加属性，是为了让下一个显示封面的页面不会漏掉。
---
 webui/src/components/monitor/CommentsFeed.tsx | 19 ++--------
 webui/src/components/monitor/NoteCover.tsx    | 38 +++++++++++++++++++
 webui/src/components/monitor/NotesTable.tsx   | 31 +++++++++------
 3 files changed, 60 insertions(+), 28 deletions(-)
 create mode 100644 webui/src/components/monitor/NoteCover.tsx

diff --git a/webui/src/components/monitor/CommentsFeed.tsx b/webui/src/components/monitor/CommentsFeed.tsx
index d066c6b..af0b199 100644
--- a/webui/src/components/monitor/CommentsFeed.tsx
+++ b/webui/src/components/monitor/CommentsFeed.tsx
@@ -27,6 +27,8 @@ import { monitorApi } from '@/lib/api'
 import { formatRelative } from '@/lib/monitorFormat'
 import type { CommentBucket, MonitorComment } from '@/types/monitor'
 
+import { NoteCover } from './NoteCover'
+
 interface CommentsFeedProps {
   taskId: number | null
 }
@@ -49,22 +51,7 @@ function NoteBadge({
 }) {
   return (
     <div className="flex items-center gap-2 min-w-0">
-      {cover ? (
-        <img
-          src={cover}
-          alt=""
-          loading="lazy"
-          className={`rounded object-cover bg-cyber-bg-tertiary flex-shrink-0 ${
-            compact ? 'w-6 h-8' : 'w-8 h-10'
-          }`}
-        />
-      ) : (
-        <div
-          className={`rounded bg-cyber-bg-tertiary flex-shrink-0 ${
-            compact ? 'w-6 h-8' : 'w-8 h-10'
-          }`}
-        />
-      )}
+      <NoteCover src={cover} size={compact ? 'sm' : 'md'} />
       <span className="truncate text-[10px] font-mono text-cyber-text-secondary" title={title || noteId}>
         {title || noteId}
       </span>
diff --git a/webui/src/components/monitor/NoteCover.tsx b/webui/src/components/monitor/NoteCover.tsx
new file mode 100644
index 0000000..7968292
--- /dev/null
+++ b/webui/src/components/monitor/NoteCover.tsx
@@ -0,0 +1,38 @@
+/**
+ * 作品封面缩略图。
+ *
+ * `referrerPolicy="no-referrer"` 是功能性的，不是装饰。小红书的图床对带**外部
+ * Referer** 的请求一律返回 403，而浏览器对跨域 `<img>` 默认就会带上本站的源作为
+ * Referer —— 于是封面全都显示成破图，而 URL 本身完全正常。实测同一张图：
+ *
+ *     无 Referer          -> 200, 67968 B, image/webp
+ *     Referer 为本站      -> 403, 0 B
+ *
+ * 放在一个组件里，是为了让下一个要显示封面的页面不会漏掉这个属性。
+ */
+
+const SIZES = {
+  sm: 'w-6 h-8',
+  md: 'w-8 h-10',
+  lg: 'w-12 h-16',
+} as const
+
+export function NoteCover({
+  src,
+  size = 'md',
+  className = '',
+}: {
+  src?: string
+  size?: keyof typeof SIZES
+  className?: string
+}) {
+  const base = `rounded object-cover bg-cyber-bg-tertiary flex-shrink-0 ${SIZES[size]} ${className}`
+
+  // 占位块是必要的：作品在首轮采集前没有封面，若此时不占位，行高会随着封面陆续
+  // 到达而跳动。
+  if (!src) return <div className={base} aria-hidden />
+
+  return (
+    <img src={src} alt="" loading="lazy" referrerPolicy="no-referrer" className={base} />
+  )
+}
diff --git a/webui/src/components/monitor/NotesTable.tsx b/webui/src/components/monitor/NotesTable.tsx
index 12e614a..c3a0373 100644
--- a/webui/src/components/monitor/NotesTable.tsx
+++ b/webui/src/components/monitor/NotesTable.tsx
@@ -5,6 +5,7 @@ import { Badge } from '@/components/ui/badge'
 import { useMonitorNotes } from '@/hooks/useMonitor'
 import { formatCount, formatDelta, formatRelative } from '@/lib/monitorFormat'
 import type { MonitorNote, NoteMetrics } from '@/types/monitor'
+import { NoteCover } from './NoteCover'
 import { NoteTrendChart } from './NoteTrendChart'
 
 interface NotesTableProps {
@@ -89,18 +90,24 @@ export function NotesTable({ taskId, onlyNew }: NotesTableProps) {
                     {open ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
                   </td>
                   <td className="py-2 px-2 max-w-[320px]">
-                    <div className="flex items-center gap-1.5">
-                      {note.is_new && (
-                        <Badge variant="success" className="text-[9px] px-1 py-0 flex-shrink-0">
-                          NEW
-                        </Badge>
-                      )}
-                      <span className="truncate text-cyber-text-primary" title={note.title}>
-                        {note.title || note.note_id}
-                      </span>
-                    </div>
-                    <div className="text-[9px] text-cyber-text-muted truncate">
-                      {note.note_id} · {note.snapshot_count} 次快照
+                    <div className="flex items-center gap-2">
+                      <NoteCover src={note.cover} size="md" />
+                      {/* min-w-0 so the title can actually truncate inside the flex row */}
+                      <div className="min-w-0">
+                        <div className="flex items-center gap-1.5">
+                          {note.is_new && (
+                            <Badge variant="success" className="text-[9px] px-1 py-0 flex-shrink-0">
+                              NEW
+                            </Badge>
+                          )}
+                          <span className="truncate text-cyber-text-primary" title={note.title}>
+                            {note.title || note.note_id}
+                          </span>
+                        </div>
+                        <div className="text-[9px] text-cyber-text-muted truncate">
+                          {note.note_id} · {note.snapshot_count} 次快照
+                        </div>
+                      </div>
                     </div>
                   </td>
                   {METRIC_COLUMNS.map((column) => (