fix: complete exploration data flow
This commit is contained in:
@@ -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('采集任务仍在后台运行,请稍后刷新')
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user