feat: connect inbox confirmation workflow

This commit is contained in:
2026-07-21 18:24:15 +08:00
parent 8cc130244b
commit 85a25ca017
15 changed files with 1069 additions and 123 deletions

View File

@@ -7,6 +7,7 @@ const requiredFiles = [
'src/pages/workspace-home.tsx',
'src/pages/workspace-explore.tsx',
'src/pages/projects/project-overview.tsx',
'src/pages/projects/project-inbox.tsx',
'src/pages/projects/project-channel-page.tsx',
'src/pages/projects/project-tasks.tsx',
'src/pages/projects/project-ai.tsx',
@@ -94,12 +95,17 @@ const inboxSource = readFileSync('src/api/inbox.ts', 'utf8')
for (const path of ['/api/v1/projects/', '/api/v1/inbox/']) {
if (!inboxSource.includes(path)) failures.push(`inbox API must use ${path}`)
}
if (inboxSource.includes('body: { suggestions }')) failures.push('inbox confirm must not send client-authored suggestion content')
if (!inboxSource.includes('body: { suggestionIds }')) failures.push('inbox confirm must send only saved suggestion identities')
const inboxPageSource = readFileSync('src/pages/projects/project-inbox.tsx', 'utf8')
if (!inboxPageSource.includes('确认创建')) failures.push('project inbox must expose the single confirmation action')
if (existsSync('src/App.tsx')) {
failures.push('legacy src/App.tsx should be removed after page split')
}
for (const removed of ['src/pages/projects/project-data.tsx', 'src/pages/projects/project-inspector.tsx', 'src/pages/projects/project-inbox.tsx']) {
for (const removed of ['src/pages/projects/project-data.tsx', 'src/pages/projects/project-inspector.tsx']) {
if (existsSync(removed)) {
failures.push(`${removed} should be removed; frontend data must come from backend APIs`)
}

View File

@@ -1437,6 +1437,99 @@
text-overflow: ellipsis;
}
.inbox-detail .arco-card-body {
display: grid;
align-content: start;
gap: var(--space-4);
}
.inbox-detail-head,
.inbox-confirm-bar {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
}
.inbox-detail-head h5,
.inbox-draft-section h6 {
margin: 0;
}
.inbox-content,
.inbox-draft-section {
display: grid;
gap: var(--space-2);
border-top: 1px solid var(--color-border);
padding-top: var(--space-3);
}
.inbox-content p {
margin: 0;
color: var(--color-text);
line-height: 1.7;
}
.inbox-section-label {
font-weight: 700;
}
.inbox-suggestion-list {
display: grid;
gap: var(--space-2);
}
.inbox-suggestion-list .arco-checkbox {
width: 100%;
align-items: flex-start;
border: 1px solid var(--color-border);
border-radius: var(--radius-control);
padding: 10px 12px;
}
.inbox-suggestion-copy {
min-width: 0;
display: grid;
gap: 5px;
}
.inbox-suggestion-copy > span:first-child {
display: flex;
align-items: center;
gap: var(--space-2);
}
.inbox-feedback {
margin: 0;
}
.inbox-confirm-bar {
align-items: center;
border-top: 1px solid var(--color-border);
padding-top: var(--space-3);
}
@media (max-width: 960px) {
.inbox-workspace {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 560px) {
.project-inbox-page .overview-head,
.inbox-detail-head,
.inbox-confirm-bar {
align-items: stretch;
flex-direction: column;
}
.inbox-detail-head .arco-btn,
.inbox-confirm-bar .arco-btn {
width: 100%;
min-height: 40px;
}
}
.agent-chat-shell {
min-height: calc(100vh - 170px);
display: grid;

View File

@@ -12,6 +12,7 @@ export type InboxItemDTO = {
}
export type InboxSuggestionDTO = {
id: string
kind: 'task' | 'note' | 'source'
title: string
body: string
@@ -21,6 +22,10 @@ export type AnalyzeInboxResponseDTO = {
suggestions: InboxSuggestionDTO[]
}
export type ConfirmInboxResponseDTO = {
createdCount: number
}
export type CaptureInboxInput = {
sourceType: string
title: string
@@ -42,11 +47,10 @@ export async function analyzeInboxItem(session: ApiSession, inboxId: string) {
})
}
export async function confirmInboxItem(session: ApiSession, inboxId: string, suggestions: InboxSuggestionDTO[]) {
return apiRequest<void>(`/api/v1/inbox/${inboxId}/confirm`, {
export async function confirmInboxItem(session: ApiSession, inboxId: string, suggestionIds: string[]) {
return apiRequest<ConfirmInboxResponseDTO>(`/api/v1/inbox/${inboxId}/confirm`, {
method: 'POST',
token: session.token,
body: { suggestions },
responseType: 'void',
body: { suggestionIds },
})
}

View File

@@ -28,7 +28,7 @@ export function mapWorkspace(payload: ProjectWorkspaceDTO, index = 0): ProjectWo
return {
project,
channels: payload.channels.filter((channel) => channel.type !== 'inbox').map(mapChannel),
channels: payload.channels.map(mapChannel),
tags: payload.tags.map((tag) => tag.name),
recentSessions: payload.recentSessions.map(mapAISession),
inbox: payload.inbox.map(mapInbox),

View File

@@ -3,6 +3,7 @@ import { ConfigProvider, Message, Spin } from '@arco-design/web-react'
import '@arco-design/web-react/dist/css/arco.css'
import '../App.css'
import { login, setApiBaseUrl, type ApiSession } from '../api/client'
import { analyzeInboxItem, confirmInboxItem } from '../api/inbox'
import { mapWorkspace } from '../api/mappers'
import {
createCronPlan,
@@ -229,6 +230,24 @@ function App() {
Message.success('项目设置已更新')
}
async function handleAnalyzeInbox(inboxId: string) {
const response = await analyzeInboxItem(requireSession(), inboxId)
return response.suggestions
}
async function handleConfirmInbox(inboxId: string, suggestionIds: string[]) {
const response = await confirmInboxItem(requireSession(), inboxId, suggestionIds)
try {
await refreshAfterAction()
return { createdCount: response.createdCount }
} catch {
return {
createdCount: response.createdCount,
refreshError: '对象已创建,但工作区刷新失败,请稍后重新进入项目',
}
}
}
function handleSelectSearchResult(result: SearchResultDTO) {
const target = searchResultTarget(result.type)
if (!target) {
@@ -296,6 +315,8 @@ function App() {
onSearchQueryChange={workspaceSearch.onQueryChange}
onSearch={() => void workspaceSearch.onSearch()}
onSelectSearchResult={handleSelectSearchResult}
onAnalyzeInbox={handleAnalyzeInbox}
onConfirmInbox={handleConfirmInbox}
/>
) : (
<Spin loading />

View File

@@ -1,11 +1,13 @@
import { ProjectAi } from './project-ai'
import { ProjectCron } from './project-cron'
import { ProjectInbox } from './project-inbox'
import { ProjectNewChannel } from './project-new-channel'
import { ProjectNotes } from './project-notes'
import { ProjectOverview } from './project-overview'
import type { ProjectTaskUpdate } from './project-task-edit-modal'
import { ProjectTasks } from './project-tasks'
import type { ChannelKey, ProjectWorkspace } from './project-types'
import type { ChannelKey, InboxConfirmationOutcome, ProjectWorkspace } from './project-types'
import type { InboxSuggestionDTO } from '../../api/inbox'
export function ProjectChannelPage({
activeChannel,
@@ -19,6 +21,8 @@ export function ProjectChannelPage({
onCreateCronPlan,
onCreateProjectTag,
onUpdateTask,
onAnalyzeInbox,
onConfirmInbox,
}: {
activeChannel: ChannelKey
activeWorkspace: ProjectWorkspace
@@ -31,8 +35,12 @@ export function ProjectChannelPage({
onCreateCronPlan: () => void
onCreateProjectTag: (name: string) => void
onUpdateTask: (update: ProjectTaskUpdate) => void
onAnalyzeInbox: (inboxId: string) => Promise<InboxSuggestionDTO[]>
onConfirmInbox: (inboxId: string, suggestionIds: string[]) => Promise<InboxConfirmationOutcome>
}) {
switch (activeChannel) {
case 'inbox':
return <ProjectInbox key={activeWorkspace.project.id} activeWorkspace={activeWorkspace} onAnalyze={onAnalyzeInbox} onConfirm={onConfirmInbox} />
case 'tasks':
return <ProjectTasks activeWorkspace={activeWorkspace} activeTaskID={activeTaskID} onOpenTask={onOpenTask} onCloseTask={onCloseTask} onSelectItem={onSelectItem} onCreateTask={onCreateTask} onCreateProjectTag={onCreateProjectTag} onUpdateTask={onUpdateTask} />
case 'ai':

View File

@@ -0,0 +1,223 @@
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 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(reason instanceof Error ? reason.message : '确认创建失败,请稍后重试')
} 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={analyzing || isInboxItemProcessed(selectedItem, locallyConfirmedItemIds) || draftSuggestions.length === 0}
onClick={() => void confirmSelectedSuggestions()}
>
</Button>
</div>
</>
) : null}
</Card>
</div>
)}
</div>
)
}
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'
}

View File

@@ -39,6 +39,11 @@ export type InboxItem = {
status: string
}
export type InboxConfirmationOutcome = {
createdCount: number
refreshError?: string
}
export type TaskItem = {
id: string
title: string

View File

@@ -8,7 +8,8 @@ import { ProjectSidebar, type ProjectSettingsUpdate } from './projects/project-s
import { ProjectStatusbar } from './projects/project-statusbar'
import { ProjectTopbar } from './projects/project-topbar'
import type { SearchResultDTO } from '../api/search'
import type { ChannelKey, Project, ProjectWorkspace, Theme, WorkbenchView } from './projects/project-types'
import type { InboxSuggestionDTO } from '../api/inbox'
import type { ChannelKey, InboxConfirmationOutcome, Project, ProjectWorkspace, Theme, WorkbenchView } from './projects/project-types'
const { Content } = Layout
@@ -41,6 +42,8 @@ export function ProjectPage({
onSearchQueryChange,
onSearch,
onSelectSearchResult,
onAnalyzeInbox,
onConfirmInbox,
}: {
activeView: WorkbenchView
activeWorkspace: ProjectWorkspace
@@ -70,6 +73,8 @@ export function ProjectPage({
onSearchQueryChange: (value: string) => void
onSearch: () => void
onSelectSearchResult: (result: SearchResultDTO) => void
onAnalyzeInbox: (inboxId: string) => Promise<InboxSuggestionDTO[]>
onConfirmInbox: (inboxId: string, suggestionIds: string[]) => Promise<InboxConfirmationOutcome>
}) {
const isProject = activeView === 'project'
const projects = workspaces.map((workspace) => workspace.project)
@@ -139,6 +144,8 @@ export function ProjectPage({
onCreateCronPlan={onCreateCronPlan}
onCreateProjectTag={onCreateProjectTag}
onUpdateTask={updateActiveProjectTask}
onAnalyzeInbox={onAnalyzeInbox}
onConfirmInbox={onConfirmInbox}
/>
)}
</Content>