feat: show dataset item thumbnails

apps/web_v1/scripts/visual-check.mjs

@@ -53,13 +53,15 @@ let visualDatasetItems = [
   {
     id: '019b0000-0000-7000-8000-000000000040', sourceId: visualDatasetSources[0].id,
     title: '森林项目体验优化需求', summary: '整理工作台信息层级，并沉淀为可跟进计划。', content: '探索数据条目的正文内容。',
-    url: 'https://example.com/article-1', status: 'unread', starred: false, publishedAt: '2026-07-22T08:00:00Z',
+    url: 'https://example.com/article-1',
+    imageUrl: 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22152%22 height=%22116%22%3E%3Crect width=%22152%22 height=%22116%22 fill=%22%23165DFF%22/%3E%3C/svg%3E',
+    status: 'unread', starred: false, publishedAt: '2026-07-22T08:00:00Z',
     createdAt: '2026-07-22T08:00:00Z', updatedAt: '2026-07-22T08:00:00Z',
   },
   {
     id: '019b0000-0000-7000-8000-000000000041', sourceId: visualDatasetSources[1].id,
     title: '项目资料组织方案', summary: '围绕项目上下文统一组织任务、笔记、资料和 AI 会话。', content: '资料组织方案正文。',
-    url: 'https://example.com/article-2', status: 'read', starred: true, publishedAt: '2026-07-22T07:00:00Z',
+    url: 'https://example.com/article-2', imageUrl: '', status: 'read', starred: true, publishedAt: '2026-07-22T07:00:00Z',
     createdAt: '2026-07-22T07:00:00Z', updatedAt: '2026-07-22T07:00:00Z',
   },
 ]

apps/web_v1/src/App.css

@@ -868,6 +868,19 @@
   cursor: pointer;
 }
 
+.explore-article-item.has-image {
+  grid-template-columns: 30px minmax(0, 1fr) 76px;
+}
+
+.explore-article-thumbnail {
+  width: 76px;
+  height: 58px;
+  align-self: center;
+  border-radius: 8px;
+  background: var(--senlin-panel-muted);
+  object-fit: cover;
+}
+
 .explore-article-item:hover,
 .explore-article-item.active {
   background: color-mix(in srgb, var(--senlin-primary) 8%, var(--senlin-panel));

apps/web_v1/src/pages/workspace-explore.tsx

@@ -391,7 +391,11 @@ export function WorkspaceExplorePage({
                   return (
                     <button
                       key={item.id}
-                      className={item.id === selected.id ? 'explore-article-item active' : 'explore-article-item'}
+                      className={[
+                        'explore-article-item',
+                        item.id === selected.id ? 'active' : '',
+                        item.imageUrl ? 'has-image' : '',
+                      ].filter(Boolean).join(' ')}
                       onClick={() => setActiveItemID(item.id)}
                     >
                       <span className={`explore-source-logo ${itemSource.color}`}>{sourceInitial(itemSource.name)}</span>
@@ -402,6 +406,15 @@ export function WorkspaceExplorePage({
                           {item.summary || '暂无摘要'}
                         </Text>
                       </span>
+                      {item.imageUrl ? (
+                        <img
+                          className="explore-article-thumbnail"
+                          src={item.imageUrl}
+                          alt=""
+                          loading="lazy"
+                          referrerPolicy="no-referrer"
+                        />
+                      ) : null}
                     </button>
                   )
                 })}