feat: refine workspace explore sources

apps/senlinai-acro-react/src/App.css

@@ -644,22 +644,45 @@
   min-width: 0;
 }
 
+.explore-source-card.arco-card {
+  cursor: pointer;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
+}
+
+.explore-source-card.arco-card:hover,
+.explore-source-card.arco-card.active {
+  border-color: color-mix(in srgb, var(--senlin-primary) 52%, var(--senlin-border));
+  box-shadow: 0 8px 20px color-mix(in srgb, var(--senlin-primary) 10%, transparent);
+}
+
+.explore-source-card.arco-card.active {
+  background: color-mix(in srgb, var(--senlin-primary) 7%, var(--senlin-panel));
+}
+
 .explore-source-card .arco-card-body {
-  display: flex;
+  display: grid;
+  grid-template-columns: 30px minmax(0, 1fr) auto;
   align-items: center;
-  gap: 12px;
+  gap: 9px;
-  min-height: 54px;
+  min-height: 46px;
-  padding: 12px 14px;
+  padding: 9px 10px;
 }
 
 .explore-source-icon {
-  width: 34px;
+  width: 30px;
-  height: 34px;
+  height: 30px;
   flex: 0 0 auto;
   display: inline-grid;
   place-items: center;
   border-radius: 8px;
-  font-size: 18px;
+  font-size: 16px;
+}
+
+.explore-source-icon.mini {
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  font-size: 13px;
 }
 
 .explore-source-icon.blue {
@@ -677,10 +700,16 @@
   color: rgb(var(--orange-6));
 }
 
+.explore-source-icon.purple {
+  background: rgb(var(--purple-1));
+  color: rgb(var(--purple-6));
+}
+
 .explore-source-copy {
   min-width: 0;
-  display: grid;
+  display: flex;
-  gap: 2px;
+  align-items: baseline;
+  gap: 8px;
 }
 
 .explore-source-name {
@@ -690,6 +719,20 @@
   white-space: nowrap;
 }
 
+.explore-source-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.16s ease;
+}
+
+.explore-source-card:hover .explore-source-actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 .explore-reader-layout {
   min-height: 0;
   display: grid;
@@ -704,7 +747,7 @@
 }
 
 .explore-list-header {
-  height: 54px;
+  height: 46px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -739,13 +782,13 @@
 .explore-article-item {
   width: 100%;
   display: grid;
-  grid-template-columns: 34px minmax(0, 1fr);
+  grid-template-columns: 30px minmax(0, 1fr);
-  gap: 12px;
+  gap: 10px;
   border: 0;
   border-bottom: 1px solid var(--senlin-border);
   background: transparent;
   color: var(--senlin-text);
-  padding: 14px 12px;
+  padding: 9px 12px;
   text-align: left;
   cursor: pointer;
 }
@@ -756,8 +799,8 @@
 }
 
 .explore-source-logo {
-  width: 28px;
+  width: 26px;
-  height: 28px;
+  height: 26px;
   display: inline-grid;
   place-items: center;
   border-radius: 6px;
@@ -767,6 +810,22 @@
   font-weight: 800;
 }
 
+.explore-source-logo.green {
+  background: rgb(var(--green-6));
+}
+
+.explore-source-logo.orange {
+  background: rgb(var(--orange-6));
+}
+
+.explore-source-logo.purple {
+  background: rgb(var(--purple-6));
+}
+
+.explore-source-logo.blue {
+  background: rgb(var(--arcoblue-6));
+}
+
 .explore-source-logo.small {
   width: 20px;
   height: 20px;
@@ -777,33 +836,47 @@
 .explore-article-copy {
   min-width: 0;
   display: grid;
-  gap: 4px;
+  gap: 2px;
 }
 
 .explore-article-title {
   display: -webkit-box;
   overflow: hidden;
   color: var(--senlin-text);
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 700;
-  line-height: 1.45;
+  line-height: 1.35;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
 
+.explore-article-summary {
+  font-size: 12px;
+}
+
 .explore-detail-toolbar {
-  height: 54px;
+  min-height: 46px;
   display: flex;
   align-items: center;
+  gap: 16px;
   justify-content: flex-end;
-  padding: 0 18px;
+  padding: 8px 14px 8px 18px;
   border-bottom: 1px solid var(--senlin-border);
 }
 
+.explore-detail-toolbar h5 {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  margin: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .explore-article-body {
   max-width: 780px;
   margin: 0 auto;
-  padding: 54px 28px 72px;
+  padding: 30px 28px 72px;
 }
 
 .explore-article-body h2 {
@@ -814,7 +887,14 @@
 }
 
 .explore-article-meta {
-  margin-top: 20px;
+  margin-bottom: 24px;
+}
+
+.explore-article-content {
+  margin: 0;
+  color: var(--senlin-text);
+  font-size: 16px;
+  line-height: 1.9;
 }
 
 .explore-avatar-strip {
@@ -880,7 +960,8 @@
 
 .theme-dark .explore-source-icon.blue,
 .theme-dark .explore-source-icon.green,
-.theme-dark .explore-source-icon.orange {
+.theme-dark .explore-source-icon.orange,
+.theme-dark .explore-source-icon.purple {
   background: color-mix(in srgb, currentcolor 18%, transparent);
 }
 
@@ -895,7 +976,7 @@
     gap: 10px;
   }
 
-  .workspace-explore-page .arco-col-8 {
+  .workspace-explore-page .arco-col-6 {
     flex: 0 0 100%;
     max-width: 100%;
   }

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

@@ -5,29 +5,41 @@ import {
   IconBook,
   IconCheckCircle,
   IconCompass,
-  IconFire,
+  IconDelete,
+  IconEdit,
+  IconFile,
   IconLink,
-  IconMessage,
   IconRefresh,
-  IconRobot,
   IconStar,
+  IconStorage,
 } from '@arco-design/web-react/icon'
 import type { InboxItem, Project, ProjectWorkspace } from './projects/project-types'
 
 const { Row, Col } = Grid
 const { Title, Text, Paragraph } = Typography
 
+type DataSourceID = 'all' | 'manual' | 'requirements' | 'architecture'
+
 type ExploreArticle = InboxItem & {
   project: Project
+  sourceID: DataSourceID
 }
 
-type DataSource = {
+type DataSourceCard = {
+  id: DataSourceID
   name: string
   count: number
   icon: ReactNode
   color: string
 }
 
+const SOURCE_META: Record<DataSourceID, { name: string; icon: ReactNode; color: string }> = {
+  all: { name: '全部', icon: <IconStorage />, color: 'blue' },
+  manual: { name: '手动收集', icon: <IconCompass />, color: 'green' },
+  requirements: { name: '需求文档', icon: <IconFile />, color: 'orange' },
+  architecture: { name: '架构讨论', icon: <IconBook />, color: 'purple' },
+}
+
 export function WorkspaceExplorePage({
   workspaces,
   onSelectItem,
@@ -41,31 +53,38 @@ export function WorkspaceExplorePage({
         workspace.inbox.map((item) => ({
           ...item,
           project: workspace.project,
+          sourceID: detectSource(item),
         })),
       ),
     [workspaces],
   )
+  const [activeSourceID, setActiveSourceID] = useState<DataSourceID>('all')
+  const filteredArticles = useMemo(
+    () => (activeSourceID === 'all' ? articles : articles.filter((article) => article.sourceID === activeSourceID)),
+    [activeSourceID, articles],
+  )
   const sources = useMemo(() => dataSources(articles), [articles])
-  const [activeArticleID, setActiveArticleID] = useState<string | null>(articles[0]?.id ?? null)
+  const [activeArticleID, setActiveArticleID] = useState<string | null>(filteredArticles[0]?.id ?? null)
 
   useEffect(() => {
-    if (articles.length === 0) {
+    if (filteredArticles.length === 0) {
       setActiveArticleID(null)
       return
     }
-    if (!activeArticleID || !articles.some((article) => article.id === activeArticleID)) {
+    if (!activeArticleID || !filteredArticles.some((article) => article.id === activeArticleID)) {
-      setActiveArticleID(articles[0].id)
+      setActiveArticleID(filteredArticles[0].id)
     }
-  }, [activeArticleID, articles])
+  }, [activeArticleID, filteredArticles])
 
-  const selected = articles.find((article) => article.id === activeArticleID) ?? articles[0]
+  const selected = filteredArticles.find((article) => article.id === activeArticleID) ?? filteredArticles[0]
+  const activeSource = SOURCE_META[activeSourceID]
 
   return (
     <div className="workspace-explore-page overview-page">
       <div className="overview-head">
         <div>
           <Title heading={4}>探索</Title>
-          <Text type="secondary">多个外部数据源的集中阅读页，采集文章、AI 总结并沉淀到项目。</Text>
+          <Text type="secondary">多个外部数据源的集中阅读页，采集文章并沉淀到项目。</Text>
         </div>
         <Space>
           <Button icon={<IconRefresh />}>同步数据源</Button>
@@ -75,15 +94,25 @@ export function WorkspaceExplorePage({
         </Space>
       </div>
 
-      <Row gutter={12} className="explore-source-row">
+      <Row gutter={10} className="explore-source-row">
         {sources.map((source) => (
-          <Col span={8} key={source.name}>
+          <Col span={6} key={source.id}>
-            <Card className="compact-card explore-source-card" bordered>
+            <Card
+              className={activeSourceID === source.id ? 'compact-card explore-source-card active' : 'compact-card explore-source-card'}
+              bordered
+              onClick={() => setActiveSourceID(source.id)}
+            >
               <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>
+              {source.id !== 'all' ? (
+                <span className="explore-source-actions" onClick={(event) => event.stopPropagation()}>
+                  <Button type="text" size="mini" icon={<IconEdit />} />
+                  <Button type="text" size="mini" status="danger" icon={<IconDelete />} />
+                </span>
+              ) : null}
             </Card>
           </Col>
         ))}
@@ -93,14 +122,16 @@ export function WorkspaceExplorePage({
         <section className="explore-reader-layout">
           <Card className="explore-article-list queue-section" bordered>
             <div className="explore-list-header">
-              <Title heading={5}>{sourceName(selected)} - 最新文章</Title>
+              <Title heading={5}>
-              <Space>
+                <Space size={6}>
-                <Button type="text" icon={<IconRefresh />} />
+                  <span className={`explore-source-icon mini ${activeSource.color}`}>{activeSource.icon}</span>
-                <Button type="text" icon={<IconCheckCircle />} />
+                  <span>{activeSource.name}</span>
-              </Space>
+                </Space>
+              </Title>
+              <Button type="text" icon={<IconRefresh />} />
             </div>
             <div className="explore-list-body">
-              {articles.map((article) => (
+              {filteredArticles.map((article) => (
                 <button
                   key={`${article.project.id}-${article.id}`}
                   className={article.id === selected.id ? 'explore-article-item active' : 'explore-article-item'}
@@ -109,14 +140,16 @@ export function WorkspaceExplorePage({
                     onSelectItem(article.title)
                   }}
                 >
-                  <span className="explore-source-logo">{sourceInitial(sourceName(article))}</span>
+                  <span className={`explore-source-logo ${SOURCE_META[article.sourceID].color}`}>
+                    {sourceInitial(SOURCE_META[article.sourceID].name)}
+                  </span>
                   <span className="explore-article-copy">
                     <Text type="secondary">
-                      {sourceName(article)} · {article.time}
+                      {SOURCE_META[article.sourceID].name} · {article.time}
                     </Text>
                     <Text className="explore-article-title">{article.title}</Text>
-                    <Text type="secondary" ellipsis={{ showTooltip: true }}>
+                    <Text className="explore-article-summary" type="secondary" ellipsis={{ showTooltip: true }}>
-                      {article.summary || '暂无摘要'}
+                      {article.summary || '暂无正文'}
                     </Text>
                   </span>
                 </button>
@@ -126,38 +159,23 @@ export function WorkspaceExplorePage({
 
           <Card className="explore-article-detail queue-section" bordered>
             <div className="explore-detail-toolbar">
+              <Title heading={5}>{selected.title}</Title>
               <Space>
                 <Button type="text" icon={<IconCheckCircle />} />
                 <Button type="text" icon={<IconStar />} />
                 <Button type="text" icon={<IconBook />} />
-                <Button type="text" icon={<IconMessage />} />
               </Space>
             </div>
             <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>
+                <span className={`explore-source-logo small ${SOURCE_META[selected.sourceID].color}`}>
-                <Text type="secondary">{sourceName(selected)} - 最新文章</Text>
+                  {sourceInitial(SOURCE_META[selected.sourceID].name)}
+                </span>
+                <Text type="secondary">{SOURCE_META[selected.sourceID].name}</Text>
+                <Text type="secondary">{selected.project.name}</Text>
                 <Text type="secondary">{selected.time}</Text>
               </Space>
-              <div className="explore-avatar-strip">
+              <Paragraph className="explore-article-content">{selected.summary || '暂无正文'}</Paragraph>
-                {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>
@@ -173,27 +191,31 @@ export function WorkspaceExplorePage({
   )
 }
 
-function dataSources(articles: ExploreArticle[]): DataSource[] {
+function dataSources(articles: ExploreArticle[]): DataSourceCard[] {
-  const counts = new Map<string, number>()
+  const counts = new Map<DataSourceID, number>([
-  articles.forEach((article) => counts.set(sourceName(article), (counts.get(sourceName(article)) ?? 0) + 1))
+    ['all', articles.length],
-  const iconSet = [
+    ['manual', 0],
-    { icon: <IconFire />, color: 'blue' },
+    ['requirements', 0],
-    { icon: <IconCompass />, color: 'green' },
+    ['architecture', 0],
-    { icon: <IconBook />, color: 'orange' },
+  ])
-  ]
+  articles.forEach((article) => counts.set(article.sourceID, (counts.get(article.sourceID) ?? 0) + 1))
 
-  return Array.from(counts.entries())
+  return (Object.keys(SOURCE_META) as DataSourceID[]).map((id) => ({
-    .slice(0, 3)
+    id,
-    .map(([name, count], index) => ({
+    ...SOURCE_META[id],
-      name,
+    count: counts.get(id) ?? 0,
-      count,
+  }))
-      icon: iconSet[index]?.icon ?? <IconLink />,
-      color: iconSet[index]?.color ?? 'blue',
-    }))
 }
 
-function sourceName(article: ExploreArticle) {
+function detectSource(article: InboxItem): DataSourceID {
-  return article.meta?.replace(/^来源：/, '') || article.project.name
+  const text = `${article.title} ${article.meta} ${article.tag} ${article.summary}`
+  if (/架构|技术方案|系统设计|architecture/i.test(text)) {
+    return 'architecture'
+  }
+  if (/需求|PRD|产品文档|requirement/i.test(text)) {
+    return 'requirements'
+  }
+  return 'manual'
 }
 
 function sourceInitial(name: string) {