feat: redesign workspace explore page

apps/senlinai-acro-react/src/pages/workspace-explore.tsx

@@ -1,116 +1,201 @@
-import { Button, Card, Empty, Grid, Space, Tag, Typography } from '@arco-design/web-react'
-import { IconBook, IconCompass, IconLink, IconLoop, IconRefresh, IconStar } from '@arco-design/web-react/icon'
-import type { ProjectWorkspace } from './projects/project-types'
+import { useEffect, useMemo, useState } from 'react'
+import type { ReactNode } from 'react'
+import { Button, Card, Empty, Grid, Space, Typography } from '@arco-design/web-react'
+import {
+  IconBook,
+  IconCheckCircle,
+  IconCompass,
+  IconFire,
+  IconLink,
+  IconMessage,
+  IconRefresh,
+  IconRobot,
+  IconStar,
+} from '@arco-design/web-react/icon'
+import type { InboxItem, Project, ProjectWorkspace } from './projects/project-types'
 
 const { Row, Col } = Grid
 const { Title, Text, Paragraph } = Typography
 
-const rssSources = [
-  { name: '产品更新', url: 'https://example.com/product.xml', status: '运行中', count: 18, color: 'arcoblue' },
-  { name: '行业情报', url: 'https://example.com/market.xml', status: '运行中', count: 24, color: 'green' },
-  { name: '技术博客', url: 'https://example.com/engineering.xml', status: '待同步', count: 9, color: 'orange' },
-]
+type ExploreArticle = InboxItem & {
+  project: Project
+}
 
-export function WorkspaceExplorePage({ workspaces, onSelectItem }: { workspaces: ProjectWorkspace[]; onSelectItem: (title: string) => void }) {
-  const articles = workspaces.flatMap((workspace) => workspace.inbox.map((item) => ({ ...item, project: workspace.project })))
-  const selected = articles[0]
-  const pendingCount = articles.filter((item) => item.status === 'open').length
-  const sourceCount = rssSources.length
+type DataSource = {
+  name: string
+  count: number
+  icon: ReactNode
+  color: string
+}
+
+export function WorkspaceExplorePage({
+  workspaces,
+  onSelectItem,
+}: {
+  workspaces: ProjectWorkspace[]
+  onSelectItem: (title: string) => void
+}) {
+  const articles = useMemo(
+    () =>
+      workspaces.flatMap((workspace) =>
+        workspace.inbox.map((item) => ({
+          ...item,
+          project: workspace.project,
+        })),
+      ),
+    [workspaces],
+  )
+  const sources = useMemo(() => dataSources(articles), [articles])
+  const [activeArticleID, setActiveArticleID] = useState<string | null>(articles[0]?.id ?? null)
+
+  useEffect(() => {
+    if (articles.length === 0) {
+      setActiveArticleID(null)
+      return
+    }
+    if (!activeArticleID || !articles.some((article) => article.id === activeArticleID)) {
+      setActiveArticleID(articles[0].id)
+    }
+  }, [activeArticleID, articles])
+
+  const selected = articles.find((article) => article.id === activeArticleID) ?? articles[0]
 
   return (
     <div className="workspace-explore-page overview-page">
       <div className="overview-head">
         <div>
           <Title heading={4}>探索</Title>
-          <Text type="secondary">集中管理多个 RSS 源，采集外部内容、沉淀线索，并分发到对应项目。</Text>
+          <Text type="secondary">多个外部数据源的集中阅读页，采集文章、AI 总结并沉淀到项目。</Text>
         </div>
         <Space>
-          <Button icon={<IconRefresh />}>同步 RSS</Button>
-          <Button type="primary" icon={<IconLink />}>添加源</Button>
+          <Button icon={<IconRefresh />}>同步数据源</Button>
+          <Button type="primary" icon={<IconLink />}>
+            添加数据源
+          </Button>
         </Space>
       </div>
 
-      <Row gutter={12}>
-        <Col span={8}>
-          <Card className="compact-card" bordered>
-            <Space><Tag color="arcoblue">{sourceCount}</Tag><Text>RSS 源</Text></Space>
-          </Card>
-        </Col>
-        <Col span={8}>
-          <Card className="compact-card" bordered>
-            <Space><Tag color="red">{pendingCount}</Tag><Text>待处理采集</Text></Space>
-          </Card>
-        </Col>
-        <Col span={8}>
-          <Card className="compact-card" bordered>
-            <Space><Tag color="green">{articles.length}</Tag><Text>采集条目</Text></Space>
-          </Card>
-        </Col>
+      <Row gutter={12} className="explore-source-row">
+        {sources.map((source) => (
+          <Col span={8} key={source.name}>
+            <Card className="compact-card explore-source-card" bordered>
+              <span className={`explore-source-icon ${source.color}`}>{source.icon}</span>
+              <span className="explore-source-copy">
+                <Text className="explore-source-name">{source.name}</Text>
+                <Text type="secondary">{source.count} 条</Text>
+              </span>
+            </Card>
+          </Col>
+        ))}
       </Row>
 
-      <Card className="queue-section" bordered>
-        <div className="section-header">
-          <Title heading={6}>RSS 源</Title>
-          <Button type="text" size="mini">按最近同步排序</Button>
-        </div>
-        {rssSources.map((source) => (
-          <button className="data-row rss-source-row" key={source.url} onClick={() => onSelectItem(source.name)}>
-            <span className="row-title"><IconLink /> {source.name}</span>
-            <Tag color={source.color}>{source.status}</Tag>
-            <span>{source.url}</span>
-            <span>{source.count} 条</span>
-          </button>
-        ))}
-      </Card>
-
-      {articles.length ? (
-        <div className="mail-layout">
-          <Card className="mail-list queue-section" bordered>
-            <div className="section-header">
-              <Title heading={6}>采集队列</Title>
-              <Button type="text" size="mini">全部标记已读</Button>
+      {selected ? (
+        <section className="explore-reader-layout">
+          <Card className="explore-article-list queue-section" bordered>
+            <div className="explore-list-header">
+              <Title heading={5}>{sourceName(selected)} - 最新文章</Title>
+              <Space>
+                <Button type="text" icon={<IconRefresh />} />
+                <Button type="text" icon={<IconCheckCircle />} />
+              </Space>
+            </div>
+            <div className="explore-list-body">
+              {articles.map((article) => (
+                <button
+                  key={`${article.project.id}-${article.id}`}
+                  className={article.id === selected.id ? 'explore-article-item active' : 'explore-article-item'}
+                  onClick={() => {
+                    setActiveArticleID(article.id)
+                    onSelectItem(article.title)
+                  }}
+                >
+                  <span className="explore-source-logo">{sourceInitial(sourceName(article))}</span>
+                  <span className="explore-article-copy">
+                    <Text type="secondary">
+                      {sourceName(article)} · {article.time}
+                    </Text>
+                    <Text className="explore-article-title">{article.title}</Text>
+                    <Text type="secondary" ellipsis={{ showTooltip: true }}>
+                      {article.summary || '暂无摘要'}
+                    </Text>
+                  </span>
+                </button>
+              ))}
             </div>
-            {articles.map((item, index) => (
-              <button
-                className={index === 0 ? 'mail-item active' : 'mail-item'}
-                key={`${item.project.id}-${item.id}`}
-                onClick={() => onSelectItem(item.title)}
-              >
-                <span><IconCompass /> {item.title}</span>
-                <Text type="secondary">{item.meta}</Text>
-                <div>
-                  <Tag color={item.project.urgent ? 'red' : 'arcoblue'}>{item.project.name}</Tag>
-                  <time>{item.time}</time>
-                </div>
-              </button>
-            ))}
           </Card>
 
-          <Card className="mail-detail queue-section" bordered>
-            <div className="section-header">
-              <Title heading={6}>{selected.title}</Title>
+          <Card className="explore-article-detail queue-section" bordered>
+            <div className="explore-detail-toolbar">
               <Space>
+                <Button type="text" icon={<IconCheckCircle />} />
                 <Button type="text" icon={<IconStar />} />
-                <Button type="text" icon={<IconLoop />} />
+                <Button type="text" icon={<IconBook />} />
+                <Button type="text" icon={<IconMessage />} />
               </Space>
             </div>
-            <Text type="secondary">{selected.meta} · {selected.project.name}</Text>
-            <Paragraph>{selected.summary || '暂无采集正文'}</Paragraph>
-            <div className="reply-box">
-              <Text type="secondary">归档到项目</Text>
-              <Space>
-                <Button icon={<IconBook />}>转为资料</Button>
-                <Button>生成任务</Button>
-                <Button type="primary">加入项目</Button>
+            <article className="explore-article-body">
+              <Title heading={2}>{selected.title}</Title>
+              <Space className="explore-article-meta" wrap>
+                <span className="explore-source-logo small">{sourceInitial(sourceName(selected))}</span>
+                <Text type="secondary">{sourceName(selected)} - 最新文章</Text>
+                <Text type="secondary">{selected.time}</Text>
               </Space>
-            </div>
+              <div className="explore-avatar-strip">
+                {workspaces.slice(0, 8).map((workspace) => (
+                  <span key={workspace.project.id} style={{ background: workspace.project.color }}>
+                    {workspace.project.short}
+                  </span>
+                ))}
+                <span>+{Math.max(workspaces.length - 8, 0)}</span>
+              </div>
+              <Card className="explore-ai-summary" bordered>
+                <Space>
+                  <IconRobot />
+                  <Text>AI 总结</Text>
+                </Space>
+                <Paragraph>
+                  {selected.summary ||
+                    '暂无正文摘要。同步数据源后，系统会在这里沉淀文章核心观点、风险点和可转化为项目计划的线索。'}
+                </Paragraph>
+              </Card>
+              <blockquote>
+                推荐：将外部文章中的项目机会、风险提示和资料线索归档到对应项目，形成可追踪的计划和知识资产。
+              </blockquote>
+            </article>
           </Card>
-        </div>
+        </section>
       ) : (
         <Card className="queue-section" bordered>
-          <Empty description="暂无 RSS 采集条目" />
+          <Empty description="暂无数据源文章" />
         </Card>
       )}
     </div>
   )
 }
+
+function dataSources(articles: ExploreArticle[]): DataSource[] {
+  const counts = new Map<string, number>()
+  articles.forEach((article) => counts.set(sourceName(article), (counts.get(sourceName(article)) ?? 0) + 1))
+  const iconSet = [
+    { icon: <IconFire />, color: 'blue' },
+    { icon: <IconCompass />, color: 'green' },
+    { icon: <IconBook />, color: 'orange' },
+  ]
+
+  return Array.from(counts.entries())
+    .slice(0, 3)
+    .map(([name, count], index) => ({
+      name,
+      count,
+      icon: iconSet[index]?.icon ?? <IconLink />,
+      color: iconSet[index]?.color ?? 'blue',
+    }))
+}
+
+function sourceName(article: ExploreArticle) {
+  return article.meta?.replace(/^来源：/, '') || article.project.name
+}
+
+function sourceInitial(name: string) {
+  return name.trim().slice(0, 1) || '源'
+}