fix: complete exploration data flow

This commit is contained in:
2026-07-23 22:25:12 +08:00
parent 55ff320cec
commit 5a1b04c4ed
12 changed files with 952 additions and 189 deletions

View File

@@ -1,6 +1,6 @@
import { useEffect, useMemo, useState } from 'react'
import type { ReactNode } from 'react'
import { Alert, Button, Card, Empty, Grid, Input, Message, Modal, Select, Space, Spin, Switch, Typography } from '@arco-design/web-react'
import { Alert, Button, Card, Empty, Grid, Input, Message, Modal, Space, Spin, Switch, Typography } from '@arco-design/web-react'
import {
IconBook,
IconCheckCircle,
@@ -15,7 +15,9 @@ import {
} from '@arco-design/web-react/icon'
import type {
DatasetCronDTO,
DatasetDepositDTO,
DatasetItemDTO,
DatasetItemPageDTO,
DatasetItemUpdate,
DatasetSourceDTO,
DatasetSourceInput,
@@ -25,6 +27,7 @@ import type {
const { Row, Col } = Grid
const { Title, Text, Paragraph } = Typography
const { TextArea } = Input
const ITEM_PAGE_SIZE = 50
type DataSourceCard = DatasetSourceDTO & {
icon: ReactNode
@@ -42,7 +45,7 @@ type SourceDraft = {
const EMPTY_SOURCE_DRAFT: SourceDraft = {
name: '',
kind: 'link',
kind: 'rss',
url: '',
iconUrl: '',
description: '',
@@ -50,7 +53,8 @@ const EMPTY_SOURCE_DRAFT: SourceDraft = {
}
export function WorkspaceExplorePage({
onSelectItem,
activeProjectID,
activeProjectName,
onListSources,
onListItems,
onCreateSource,
@@ -58,18 +62,24 @@ export function WorkspaceExplorePage({
onDeleteSource,
onUpdateItem,
onQueueSync,
onListCrons,
onDepositItem,
}: {
onSelectItem: (title: string) => void
activeProjectID: string
activeProjectName: string
onListSources: (signal?: AbortSignal) => Promise<DatasetSourceDTO[]>
onListItems: (signal?: AbortSignal) => Promise<DatasetItemDTO[]>
onListItems: (sourceId?: string, offset?: number, limit?: number, signal?: AbortSignal) => Promise<DatasetItemPageDTO>
onCreateSource: (input: DatasetSourceInput) => Promise<DatasetSourceDTO>
onUpdateSource: (sourceId: string, input: DatasetSourceInput) => Promise<DatasetSourceDTO>
onDeleteSource: (sourceId: string) => Promise<void>
onUpdateItem: (itemId: string, input: DatasetItemUpdate) => Promise<DatasetItemDTO>
onQueueSync: () => Promise<DatasetCronDTO[]>
onListCrons: (signal?: AbortSignal) => Promise<DatasetCronDTO[]>
onDepositItem: (itemId: string, projectId: string) => Promise<DatasetDepositDTO & { refreshFailed?: boolean }>
}) {
const [sourceRecords, setSourceRecords] = useState<DatasetSourceDTO[]>([])
const [items, setItems] = useState<DatasetItemDTO[]>([])
const [itemTotal, setItemTotal] = useState(0)
const [activeSourceID, setActiveSourceID] = useState('all')
const [activeItemID, setActiveItemID] = useState<string | null>(null)
const [sourceModalMode, setSourceModalMode] = useState<'add' | 'edit' | null>(null)
@@ -78,17 +88,18 @@ export function WorkspaceExplorePage({
const [sourceError, setSourceError] = useState('')
const [loadError, setLoadError] = useState('')
const [loading, setLoading] = useState(true)
const [itemsLoading, setItemsLoading] = useState(true)
const [saving, setSaving] = useState(false)
const [syncing, setSyncing] = useState(false)
const [depositingItemID, setDepositingItemID] = useState<string | null>(null)
useEffect(() => {
const controller = new AbortController()
setLoading(true)
setLoadError('')
Promise.all([onListSources(controller.signal), onListItems(controller.signal)])
.then(([nextSources, nextItems]) => {
onListSources(controller.signal)
.then((nextSources) => {
setSourceRecords(nextSources)
setItems(nextItems)
})
.catch((error: unknown) => {
if (!controller.signal.aborted) {
@@ -99,7 +110,31 @@ export function WorkspaceExplorePage({
if (!controller.signal.aborted) setLoading(false)
})
return () => controller.abort()
}, [onListItems, onListSources])
}, [onListSources])
useEffect(() => {
const controller = new AbortController()
setItemsLoading(true)
setLoadError('')
setItems([])
setItemTotal(0)
setActiveItemID(null)
const sourceID = activeSourceID === 'all' ? undefined : activeSourceID
onListItems(sourceID, 0, ITEM_PAGE_SIZE, controller.signal)
.then((page) => {
setItems(page.items)
setItemTotal(page.total)
})
.catch((error: unknown) => {
if (!controller.signal.aborted) {
setLoadError(error instanceof Error ? error.message : '探索内容加载失败')
}
})
.finally(() => {
if (!controller.signal.aborted) setItemsLoading(false)
})
return () => controller.abort()
}, [activeSourceID, onListItems])
const sources = useMemo<DataSourceCard[]>(() => {
const allSource: DataSourceCard = {
@@ -110,8 +145,9 @@ export function WorkspaceExplorePage({
iconUrl: '',
description: '全部探索内容',
enabled: true,
builtIn: true,
lastSyncedAt: null,
itemCount: items.length,
itemCount: sourceRecords.reduce((total, source) => total + source.itemCount, 0),
createdAt: '',
updatedAt: '',
icon: <IconStorage />,
@@ -127,12 +163,9 @@ export function WorkspaceExplorePage({
color: sourceColor(source.kind),
})),
]
}, [items.length, sourceRecords])
}, [sourceRecords])
const filteredItems = useMemo(
() => activeSourceID === 'all' ? items : items.filter((item) => item.sourceId === activeSourceID),
[activeSourceID, items],
)
const filteredItems = items
useEffect(() => {
if (filteredItems.length === 0) {
@@ -147,6 +180,9 @@ export function WorkspaceExplorePage({
const selected = filteredItems.find((item) => item.id === activeItemID) ?? filteredItems[0]
const activeSource = sourceByID(sources, activeSourceID)
const selectedSource = selected ? sourceByID(sources, selected.sourceId) : activeSource
const editingSource = editingSourceID
? sourceRecords.find((source) => source.id === editingSourceID)
: undefined
function openAddSource() {
setEditingSourceID(null)
@@ -174,7 +210,7 @@ export function WorkspaceExplorePage({
name: sourceDraft.name.trim(),
kind: sourceDraft.kind,
url: sourceDraft.url.trim(),
iconUrl: sourceDraft.iconUrl,
iconUrl: sourceDraft.iconUrl.trim(),
description: sourceDraft.description.trim(),
enabled: sourceDraft.enabled,
}
@@ -182,8 +218,8 @@ export function WorkspaceExplorePage({
setSourceError('请输入数据源名称')
return
}
if (input.kind !== 'manual' && !input.url) {
setSourceError('链接和 RSS 数据源必须填写地址')
if (input.kind === 'rss' && !input.url) {
setSourceError('RSS 数据源必须填写地址')
return
}
setSaving(true)
@@ -229,14 +265,21 @@ export function WorkspaceExplorePage({
async function syncSources() {
setSyncing(true)
try {
const crons = await onQueueSync()
if (crons.length === 0) {
const queued = await onQueueSync()
if (queued.length === 0) {
Message.info('暂无已启用的 RSS 数据源')
} else {
const failed = crons.filter((cron) => cron.status === 'failed').length
const [nextSources, nextItems] = await Promise.all([onListSources(), onListItems()])
Message.info(`已提交 ${queued.length} 个采集任务`)
const crons = await waitForDatasetRuns(queued, onListCrons)
const sourceID = activeSourceID === 'all' ? undefined : activeSourceID
const [nextSources, nextPage] = await Promise.all([
onListSources(),
onListItems(sourceID, 0, ITEM_PAGE_SIZE),
])
setSourceRecords(nextSources)
setItems(nextItems)
setItems(nextPage.items)
setItemTotal(nextPage.total)
const failed = crons.filter((cron) => cron.status === 'failed').length
if (failed > 0) {
Message.warning(`${crons.length - failed} 个数据源采集完成,${failed} 个失败`)
} else {
@@ -250,6 +293,21 @@ export function WorkspaceExplorePage({
}
}
async function loadMoreItems() {
if (itemsLoading || items.length >= itemTotal) return
setItemsLoading(true)
try {
const sourceID = activeSourceID === 'all' ? undefined : activeSourceID
const page = await onListItems(sourceID, items.length, ITEM_PAGE_SIZE)
setItems((current) => [...current, ...page.items])
setItemTotal(page.total)
} catch (error) {
Message.error(error instanceof Error ? error.message : '更多探索内容加载失败')
} finally {
setItemsLoading(false)
}
}
async function updateSelected(input: DatasetItemUpdate) {
if (!selected) return
try {
@@ -260,6 +318,23 @@ export function WorkspaceExplorePage({
}
}
async function depositSelected() {
if (!selected || !activeProjectID) return
setDepositingItemID(selected.id)
try {
const result = await onDepositItem(selected.id, activeProjectID)
if (result.refreshFailed) {
Message.warning(`笔记已沉淀到项目“${activeProjectName}”,但项目数据刷新失败`)
} else {
Message.success(`已沉淀到项目“${activeProjectName}”的笔记资料`)
}
} catch (error) {
Message.error(error instanceof Error ? error.message : '沉淀到项目失败')
} finally {
setDepositingItemID(null)
}
}
return (
<div className="workspace-explore-page overview-page">
<div className="overview-head">
@@ -275,7 +350,7 @@ export function WorkspaceExplorePage({
{loadError ? <Alert type="error" content={loadError} /> : null}
<Spin loading={loading} style={{ width: '100%' }}>
<Spin loading={loading || (itemsLoading && items.length === 0)} style={{ width: '100%' }}>
<Row gutter={10} className="explore-source-row">
{sources.map((source) => (
<Col span={6} key={source.id}>
@@ -287,12 +362,14 @@ export function WorkspaceExplorePage({
<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.itemCount} </Text>
<Text type="secondary">{sourceSubtitle(source)}</Text>
</span>
{source.id !== 'all' ? (
<span className="explore-source-actions" onClick={(event) => event.stopPropagation()}>
<Button aria-label={`编辑${source.name}`} type="text" size="mini" icon={<IconEdit />} onClick={() => openEditSource(source)} />
<Button aria-label={`删除${source.name}`} type="text" size="mini" status="danger" icon={<IconDelete />} onClick={() => deleteSource(source)} />
{!source.builtIn ? (
<Button aria-label={`删除${source.name}`} type="text" size="mini" status="danger" icon={<IconDelete />} onClick={() => deleteSource(source)} />
) : null}
</span>
) : null}
</Card>
@@ -319,10 +396,7 @@ export function WorkspaceExplorePage({
<button
key={item.id}
className={item.id === selected.id ? 'explore-article-item active' : 'explore-article-item'}
onClick={() => {
setActiveItemID(item.id)
onSelectItem(item.title)
}}
onClick={() => setActiveItemID(item.id)}
>
<span className={`explore-source-logo ${itemSource.color}`}>{sourceInitial(itemSource.name)}</span>
<span className="explore-article-copy">
@@ -335,6 +409,11 @@ export function WorkspaceExplorePage({
</button>
)
})}
{items.length < itemTotal ? (
<Button long type="text" loading={itemsLoading} onClick={() => void loadMoreItems()}>
{items.length}/{itemTotal}
</Button>
) : null}
</div>
</Card>
@@ -354,7 +433,13 @@ export function WorkspaceExplorePage({
icon={<IconStar />}
onClick={() => void updateSelected({ status: selected.status, starred: !selected.starred })}
/>
<Button type="text" icon={<IconBook />} onClick={() => onSelectItem(selected.title)} />
<Button
aria-label={`沉淀到项目${activeProjectName}`}
type="text"
icon={<IconBook />}
loading={depositingItemID === selected.id}
onClick={() => void depositSelected()}
/>
{selected.url ? <Button type="text" icon={<IconLaunch />} href={selected.url} target="_blank" /> : null}
</Space>
</div>
@@ -393,18 +478,25 @@ export function WorkspaceExplorePage({
</label>
<label>
<Text></Text>
<Select
value={sourceDraft.kind}
onChange={(kind) => setSourceDraft((current) => ({ ...current, kind: kind as DatasetSourceKind }))}
>
<Select.Option value="link"></Select.Option>
<Select.Option value="rss">RSS </Select.Option>
<Select.Option value="manual"></Select.Option>
</Select>
<Input value={sourceDraft.kind === 'rss' ? 'RSS 订阅' : '历史数据源(仅维护)'} disabled />
</label>
<label>
<Text></Text>
<Input value={sourceDraft.url} placeholder="https://example.com/feed" onChange={(url) => setSourceDraft((current) => ({ ...current, url }))} />
<Input
value={sourceDraft.url}
disabled={Boolean(editingSource?.builtIn || (editingSource && editingSource.kind !== 'rss'))}
placeholder="https://example.com/feed"
onChange={(url) => setSourceDraft((current) => ({ ...current, url }))}
/>
</label>
<label>
<Text></Text>
<Input
value={sourceDraft.iconUrl}
disabled={Boolean(editingSource?.builtIn || (editingSource && editingSource.kind !== 'rss'))}
placeholder="https://example.com/icon.png"
onChange={(iconUrl) => setSourceDraft((current) => ({ ...current, iconUrl }))}
/>
</label>
<label>
<Text></Text>
@@ -448,3 +540,26 @@ function itemTime(item: DatasetItemDTO) {
if (Number.isNaN(parsed.getTime())) return ''
return new Intl.DateTimeFormat('zh-CN', { dateStyle: 'medium' }).format(parsed)
}
function sourceSubtitle(source: DatasetSourceDTO) {
if (!source.lastSyncedAt) return `${source.itemCount}`
const parsed = new Date(source.lastSyncedAt)
if (Number.isNaN(parsed.getTime())) return `${source.itemCount}`
return `${source.itemCount} 条 · ${new Intl.DateTimeFormat('zh-CN', { dateStyle: 'short', timeStyle: 'short' }).format(parsed)}`
}
async function waitForDatasetRuns(
queued: DatasetCronDTO[],
listRuns: (signal?: AbortSignal) => Promise<DatasetCronDTO[]>,
) {
const queuedIDs = new Set(queued.map((run) => run.id))
const deadline = Date.now() + 10 * 60 * 1000
while (Date.now() < deadline) {
const runs = (await listRuns()).filter((run) => queuedIDs.has(run.id))
if (runs.length === queuedIDs.size && runs.every((run) => run.status === 'completed' || run.status === 'failed')) {
return runs
}
await new Promise((resolve) => setTimeout(resolve, 1500))
}
throw new Error('采集任务仍在后台运行,请稍后刷新')
}