232 lines
9.9 KiB
TypeScript
232 lines
9.9 KiB
TypeScript
import { useMemo, useRef, useState } from 'react'
|
||
import { Alert, Button, Card, Checkbox, Empty, Space, Tag, Typography } from '@arco-design/web-react'
|
||
import { IconCheckCircle, IconRobot } from '@arco-design/web-react/icon'
|
||
import { ApiError } from '../../api/client'
|
||
import type { InboxSuggestionDTO } from '../../api/inbox'
|
||
import type { InboxConfirmationOutcome, InboxItem, ProjectWorkspace } from './project-types'
|
||
|
||
const { Title, Text, Paragraph } = Typography
|
||
|
||
type ProjectInboxProps = {
|
||
activeWorkspace: ProjectWorkspace
|
||
onAnalyze: (inboxId: string) => Promise<InboxSuggestionDTO[]>
|
||
onConfirm: (inboxId: string, suggestionIds: string[]) => Promise<InboxConfirmationOutcome>
|
||
}
|
||
|
||
export function ProjectInbox({ activeWorkspace, onAnalyze, onConfirm }: ProjectInboxProps) {
|
||
const [selectedItemId, setSelectedItemId] = useState(activeWorkspace.inbox[0]?.id ?? '')
|
||
const [draftSuggestions, setDraftSuggestions] = useState<InboxSuggestionDTO[]>([])
|
||
const [selectedSuggestionIds, setSelectedSuggestionIds] = useState<string[]>([])
|
||
const [analyzing, setAnalyzing] = useState(false)
|
||
const [confirming, setConfirming] = useState(false)
|
||
const [error, setError] = useState('')
|
||
const [success, setSuccess] = useState('')
|
||
const [refreshWarning, setRefreshWarning] = useState('')
|
||
const [locallyConfirmedItemIds, setLocallyConfirmedItemIds] = useState<string[]>([])
|
||
const analysisGeneration = useRef(0)
|
||
const selectedItem = useMemo(
|
||
() => activeWorkspace.inbox.find((item) => item.id === selectedItemId) ?? activeWorkspace.inbox[0],
|
||
[activeWorkspace.inbox, selectedItemId],
|
||
)
|
||
|
||
function selectItem(item: InboxItem) {
|
||
analysisGeneration.current += 1
|
||
setSelectedItemId(item.id)
|
||
setDraftSuggestions([])
|
||
setSelectedSuggestionIds([])
|
||
setError('')
|
||
setSuccess('')
|
||
setRefreshWarning('')
|
||
setAnalyzing(false)
|
||
}
|
||
|
||
async function analyzeSelectedItem() {
|
||
if (!selectedItem || selectedItem.status !== 'open') return
|
||
setAnalyzing(true)
|
||
setError('')
|
||
setSuccess('')
|
||
setRefreshWarning('')
|
||
const generation = analysisGeneration.current + 1
|
||
analysisGeneration.current = generation
|
||
const analyzedItemId = selectedItem.id
|
||
try {
|
||
const suggestions = await onAnalyze(analyzedItemId)
|
||
if (analysisGeneration.current !== generation || selectedItemId !== analyzedItemId) return
|
||
setDraftSuggestions(suggestions)
|
||
setSelectedSuggestionIds(suggestions.map((suggestion) => suggestion.id))
|
||
} catch (reason) {
|
||
if (analysisGeneration.current !== generation) return
|
||
setError(reason instanceof Error ? reason.message : '分析失败，请稍后重试')
|
||
} finally {
|
||
if (analysisGeneration.current === generation) setAnalyzing(false)
|
||
}
|
||
}
|
||
|
||
async function confirmSelectedSuggestions() {
|
||
if (!selectedItem) return
|
||
if (selectedSuggestionIds.length === 0) {
|
||
setError('请至少勾选一条建议')
|
||
return
|
||
}
|
||
setConfirming(true)
|
||
setError('')
|
||
setSuccess('')
|
||
try {
|
||
const outcome = await onConfirm(selectedItem.id, selectedSuggestionIds)
|
||
setLocallyConfirmedItemIds((current) => current.includes(selectedItem.id) ? current : [...current, selectedItem.id])
|
||
setSuccess(`已创建 ${outcome.createdCount} 个对象`)
|
||
setRefreshWarning(outcome.refreshError ?? '')
|
||
} catch (reason) {
|
||
setError(confirmationErrorMessage(reason))
|
||
} finally {
|
||
setConfirming(false)
|
||
}
|
||
}
|
||
|
||
function toggleSuggestion(identity: string, checked: boolean) {
|
||
setSelectedSuggestionIds((current) => checked
|
||
? current.includes(identity) ? current : [...current, identity]
|
||
: current.filter((value) => value !== identity))
|
||
}
|
||
|
||
return (
|
||
<div className="project-channel-page project-inbox-page overview-page">
|
||
<div className="overview-head">
|
||
<div>
|
||
<Title heading={4}>Inbox 消息流</Title>
|
||
<Text type="secondary">查看原始内容，分析为候选草稿，并在确认后创建正式对象。</Text>
|
||
</div>
|
||
</div>
|
||
|
||
{activeWorkspace.inbox.length === 0 ? (
|
||
<Card className="queue-section" bordered>
|
||
<Empty description="当前没有待处理的 Inbox 内容" />
|
||
</Card>
|
||
) : (
|
||
<div className="mail-layout inbox-workspace">
|
||
<Card className="queue-section mail-list" bordered>
|
||
<div className="section-header">
|
||
<Title heading={6}>收集内容（{activeWorkspace.inbox.length}）</Title>
|
||
</div>
|
||
{activeWorkspace.inbox.map((item) => (
|
||
<button
|
||
key={item.id}
|
||
type="button"
|
||
className={selectedItem?.id === item.id ? 'mail-item active' : 'mail-item'}
|
||
disabled={confirming}
|
||
onClick={() => selectItem(item)}
|
||
>
|
||
<span>{item.title}</span>
|
||
<Text type="secondary" ellipsis={{ showTooltip: true }}>{item.summary || '暂无内容'}</Text>
|
||
<div>
|
||
<Tag color={isInboxItemProcessed(item, locallyConfirmedItemIds) ? 'green' : 'orange'}>{isInboxItemProcessed(item, locallyConfirmedItemIds) ? '已处理' : '待处理'}</Tag>
|
||
<time>{item.time}</time>
|
||
</div>
|
||
</button>
|
||
))}
|
||
</Card>
|
||
|
||
<Card className="queue-section mail-detail inbox-detail" bordered>
|
||
{selectedItem ? (
|
||
<>
|
||
<div className="inbox-detail-head">
|
||
<div>
|
||
<Space size={8}>
|
||
<Title heading={5}>{selectedItem.title}</Title>
|
||
<Tag color={isInboxItemProcessed(selectedItem, locallyConfirmedItemIds) ? 'green' : 'orange'}>
|
||
{isInboxItemProcessed(selectedItem, locallyConfirmedItemIds) ? '已处理' : '待处理'}
|
||
</Tag>
|
||
</Space>
|
||
<Text type="secondary">{selectedItem.meta} · {selectedItem.time}</Text>
|
||
</div>
|
||
<Button
|
||
icon={<IconRobot />}
|
||
loading={analyzing}
|
||
disabled={confirming || isInboxItemProcessed(selectedItem, locallyConfirmedItemIds)}
|
||
onClick={() => void analyzeSelectedItem()}
|
||
>
|
||
分析内容
|
||
</Button>
|
||
</div>
|
||
|
||
<section className="inbox-content" aria-label="Inbox 原始内容">
|
||
<Text className="inbox-section-label">原始内容</Text>
|
||
<Paragraph>{selectedItem.summary || '暂无内容'}</Paragraph>
|
||
</section>
|
||
|
||
<section className="inbox-draft-section" aria-label="分析建议">
|
||
<div className="section-header">
|
||
<Title heading={6}>分析建议</Title>
|
||
<Text type="secondary">仅勾选内容会在确认后创建</Text>
|
||
</div>
|
||
{draftSuggestions.length === 0 ? (
|
||
<Text type="secondary">点击“分析内容”生成候选草稿，分析不会创建正式对象。</Text>
|
||
) : (
|
||
<div className="inbox-suggestion-list">
|
||
{draftSuggestions.map((suggestion) => (
|
||
<Checkbox
|
||
key={suggestion.id}
|
||
checked={selectedSuggestionIds.includes(suggestion.id)}
|
||
disabled={confirming || isInboxItemProcessed(selectedItem, locallyConfirmedItemIds)}
|
||
onChange={(checked) => toggleSuggestion(suggestion.id, checked)}
|
||
>
|
||
<span className="inbox-suggestion-copy">
|
||
<span>
|
||
<Tag color={suggestionColor(suggestion.kind)}>{suggestionLabel(suggestion.kind)}</Tag>
|
||
<strong>{suggestion.title}</strong>
|
||
</span>
|
||
<Text type="secondary">{suggestion.body || '暂无补充内容'}</Text>
|
||
</span>
|
||
</Checkbox>
|
||
))}
|
||
</div>
|
||
)}
|
||
</section>
|
||
|
||
{error && <Alert className="inbox-feedback" type="error" content={error} />}
|
||
{success && <Alert className="inbox-feedback" type="success" content={success} icon={<IconCheckCircle />} />}
|
||
{refreshWarning && <Alert className="inbox-feedback" type="warning" content={refreshWarning} />}
|
||
|
||
<div className="inbox-confirm-bar">
|
||
<Text type="secondary">正式写入前请核对勾选项</Text>
|
||
<Button
|
||
type="primary"
|
||
loading={confirming}
|
||
disabled={confirming || analyzing || isInboxItemProcessed(selectedItem, locallyConfirmedItemIds) || draftSuggestions.length === 0}
|
||
onClick={() => void confirmSelectedSuggestions()}
|
||
>
|
||
确认创建
|
||
</Button>
|
||
</div>
|
||
</>
|
||
) : null}
|
||
</Card>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function confirmationErrorMessage(reason: unknown) {
|
||
if (reason instanceof ApiError && (reason.code === 'network_error' || reason.code === 'invalid_response')) {
|
||
return '确认结果未知，服务端支持幂等处理，可安全重试'
|
||
}
|
||
return reason instanceof Error ? reason.message : '确认创建失败，请稍后重试'
|
||
}
|
||
|
||
function isInboxItemProcessed(item: InboxItem, locallyConfirmedItemIds: string[]) {
|
||
return item.status !== 'open' || locallyConfirmedItemIds.includes(item.id)
|
||
}
|
||
|
||
function suggestionLabel(kind: InboxSuggestionDTO['kind']) {
|
||
if (kind === 'task') return '任务'
|
||
if (kind === 'note') return '笔记'
|
||
return '资料'
|
||
}
|
||
|
||
function suggestionColor(kind: InboxSuggestionDTO['kind']) {
|
||
if (kind === 'task') return 'arcoblue'
|
||
if (kind === 'note') return 'green'
|
||
return 'purple'
|
||
}
|