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

feat: refine workspace explore sources

Browse Source
This commit is contained in:
yanweidong
2026-07-21 11:16:34 +08:00
parent 7a1ee3f17f
commit 465e7bea9b
2 changed files with 191 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;
min-height: 54px;
padding: 12px 14px;
gap: 9px;
min-height: 46px;
padding: 9px 10px;
}
.explore-source-icon {
width: 34px;
height: 34px;
width: 30px;
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;
gap: 2px;
display: flex;
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);
gap: 12px;
grid-template-columns: 30px minmax(0, 1fr);
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;
height: 28px;
width: 26px;
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%;
}

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

@@ -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)) {
setActiveArticleID(articles[0].id)
if (!activeArticleID || !filteredArticles.some((article) => article.id === activeArticleID)) {
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}>
<Card className="compact-card explore-source-card" bordered>
<Col span={6} key={source.id}>
<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>
<Space>
<Button type="text" icon={<IconRefresh />} />
<Button type="text" icon={<IconCheckCircle />} />
</Space>
<Title heading={5}>
<Space size={6}>
<span className={`explore-source-icon mini ${activeSource.color}`}>{activeSource.icon}</span>
<span>{activeSource.name}</span>
</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 }}>
{article.summary || '暂无摘要'}
<Text className="explore-article-summary" type="secondary" ellipsis={{ showTooltip: true }}>
{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>
<Text type="secondary">{sourceName(selected)} - 最新文章</Text>
<span className={`explore-source-logo small ${SOURCE_META[selected.sourceID].color}`}>
{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">
{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>
<Paragraph className="explore-article-content">{selected.summary || '暂无正文'}</Paragraph>
<blockquote>
推荐：将外部文章中的项目机会、风险提示和资料线索归档到对应项目，形成可追踪的计划和知识资产。
</blockquote>
@@ -173,27 +191,31 @@ export function WorkspaceExplorePage({
)
}
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' },
]
function dataSources(articles: ExploreArticle[]): DataSourceCard[] {
const counts = new Map<DataSourceID, number>([
['all', articles.length],
['manual', 0],
['requirements', 0],
['architecture', 0],
])
articles.forEach((article) => counts.set(article.sourceID, (counts.get(article.sourceID) ?? 0) + 1))
return Array.from(counts.entries())
.slice(0, 3)
.map(([name, count], index) => ({
name,
count,
icon: iconSet[index]?.icon ?? <IconLink />,
color: iconSet[index]?.color ?? 'blue',
}))
return (Object.keys(SOURCE_META) as DataSourceID[]).map((id) => ({
id,
...SOURCE_META[id],
count: counts.get(id) ?? 0,
}))
}
function sourceName(article: ExploreArticle) {
return article.meta?.replace(/^来源：/, '') || article.project.name
function detectSource(article: InboxItem): DataSourceID {
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) {