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