senlinai/agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign workspace explore page

Browse Source
This commit is contained in:
yanweidong
2026-07-21 11:05:20 +08:00
parent 1c58825a7b
commit 7a1ee3f17f
2 changed files with 457 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

290
apps/senlinai-acro-react/src/App.css
View File

@@ -636,6 +636,296 @@
padding: 12px;
}
.workspace-explore-page {
min-height: 0;
}
.explore-source-row {
min-width: 0;
}
.explore-source-card .arco-card-body {
display: flex;
align-items: center;
gap: 12px;
min-height: 54px;
padding: 12px 14px;
}
.explore-source-icon {
width: 34px;
height: 34px;
flex: 0 0 auto;
display: inline-grid;
place-items: center;
border-radius: 8px;
font-size: 18px;
}
.explore-source-icon.blue {
background: rgb(var(--arcoblue-1));
color: rgb(var(--arcoblue-6));
}
.explore-source-icon.green {
background: rgb(var(--green-1));
color: rgb(var(--green-6));
}
.explore-source-icon.orange {
background: rgb(var(--orange-1));
color: rgb(var(--orange-6));
}
.explore-source-copy {
min-width: 0;
display: grid;
gap: 2px;
}
.explore-source-name {
overflow: hidden;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.explore-reader-layout {
min-height: 0;
display: grid;
grid-template-columns: minmax(320px, 34%) minmax(520px, 1fr);
gap: 12px;
}
.explore-article-list.queue-section .arco-card-body,
.explore-article-detail.queue-section .arco-card-body {
min-height: 620px;
padding: 0;
}
.explore-list-header {
height: 54px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 0 12px;
border-bottom: 1px solid var(--senlin-border);
}
.explore-list-header h5 {
margin: 0;
}
.explore-list-body {
max-height: calc(100vh - 252px);
overflow: auto;
scrollbar-width: none;
}
.explore-list-body:hover {
scrollbar-width: thin;
}
.explore-list-body::-webkit-scrollbar {
width: 0;
height: 0;
}
.explore-list-body:hover::-webkit-scrollbar {
width: 8px;
}
.explore-article-item {
width: 100%;
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 12px;
border: 0;
border-bottom: 1px solid var(--senlin-border);
background: transparent;
color: var(--senlin-text);
padding: 14px 12px;
text-align: left;
cursor: pointer;
}
.explore-article-item:hover,
.explore-article-item.active {
background: color-mix(in srgb, var(--senlin-primary) 8%, var(--senlin-panel));
}
.explore-source-logo {
width: 28px;
height: 28px;
display: inline-grid;
place-items: center;
border-radius: 6px;
background: #1f2a63;
color: #fff;
font-size: 14px;
font-weight: 800;
}
.explore-source-logo.small {
width: 20px;
height: 20px;
border-radius: 5px;
font-size: 12px;
}
.explore-article-copy {
min-width: 0;
display: grid;
gap: 4px;
}
.explore-article-title {
display: -webkit-box;
overflow: hidden;
color: var(--senlin-text);
font-size: 15px;
font-weight: 700;
line-height: 1.45;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.explore-detail-toolbar {
height: 54px;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 18px;
border-bottom: 1px solid var(--senlin-border);
}
.explore-article-body {
max-width: 780px;
margin: 0 auto;
padding: 54px 28px 72px;
}
.explore-article-body h2 {
margin: 0;
color: var(--senlin-text);
font-size: 28px;
line-height: 1.35;
}
.explore-article-meta {
margin-top: 20px;
}
.explore-avatar-strip {
display: flex;
align-items: center;
margin-top: 20px;
padding-left: 8px;
}
.explore-avatar-strip span {
width: 26px;
height: 26px;
display: inline-grid;
place-items: center;
margin-left: -8px;
border: 2px solid var(--senlin-panel);
border-radius: 999px;
background: var(--senlin-soft-blue);
color: #fff;
font-size: 11px;
font-weight: 700;
}
.explore-avatar-strip span:last-child {
color: var(--senlin-muted);
}
.explore-ai-summary.arco-card {
margin-top: 34px;
border-color: color-mix(in srgb, var(--senlin-primary) 14%, var(--senlin-border));
border-radius: 8px;
box-shadow: 0 8px 24px rgba(29, 33, 41, 0.06);
}
.explore-ai-summary .arco-card-body {
display: grid;
gap: 22px;
padding: 24px 28px;
}
.explore-ai-summary .arco-space {
color: #a855f7;
font-size: 16px;
font-weight: 700;
}
.explore-ai-summary .arco-typography {
margin: 0;
color: var(--senlin-text);
font-size: 15px;
line-height: 1.8;
}
.explore-article-body blockquote {
margin: 38px 0 0;
border-left: 4px solid var(--senlin-border);
color: var(--senlin-text);
padding: 4px 0 4px 18px;
font-size: 17px;
font-style: italic;
line-height: 1.9;
}
.theme-dark .explore-source-icon.blue,
.theme-dark .explore-source-icon.green,
.theme-dark .explore-source-icon.orange {
background: color-mix(in srgb, currentcolor 18%, transparent);
}
.theme-dark .explore-ai-summary.arco-card {
box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}
@media (max-width: 960px) {
.workspace-explore-page .overview-head {
align-items: flex-start;
flex-direction: column;
gap: 10px;
}
.workspace-explore-page .arco-col-8 {
flex: 0 0 100%;
max-width: 100%;
}
.explore-source-row {
row-gap: 10px;
}
.explore-reader-layout {
grid-template-columns: minmax(0, 1fr);
}
.explore-article-list.queue-section .arco-card-body,
.explore-article-detail.queue-section .arco-card-body {
min-height: 0;
}
.explore-list-body {
max-height: 360px;
}
.explore-article-body {
padding: 28px 18px 40px;
}
.explore-article-body h2 {
font-size: 22px;
}
}
.section-header {
display: flex;
align-items: center;

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

@@ -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>
<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>
{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>
{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>
</div>
{articles.map((item, index) => (
<div className="explore-list-body">
{articles.map((article) => (
<button
className={index === 0 ? 'mail-item active' : 'mail-item'}
key={`${item.project.id}-${item.id}`}
onClick={() => onSelectItem(item.title)}
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><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>
<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>
</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>
<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 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>
<Button icon={<IconBook />}>转为资料</Button>
<Button>生成任务</Button>
<Button type="primary">加入项目</Button>
<IconRobot />
<Text>AI 总结</Text>
</Space>
</div>
<Paragraph>
{selected.summary ||
'暂无正文摘要。同步数据源后，系统会在这里沉淀文章核心观点、风险点和可转化为项目计划的线索。'}
</Paragraph>
</Card>
</div>
<blockquote>
推荐：将外部文章中的项目机会、风险提示和资料线索归档到对应项目，形成可追踪的计划和知识资产。
</blockquote>
</article>
</Card>
</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) || '源'
}