weichen
411a79d9e2
Why: make material, background work, confirmations and files accessible to nontechnical users across desktop and mobile. Evidence: Dev SELF receipts for Frontend tsc, 190 tests, knip baseline, build, nine fixture browser cases and two real HTTP/browser smoke cases using MockRunner. Impact: existing API and permissions remain authoritative; stale events/queries and duplicate effects are guarded, while one file preview and reading state are preserved. Refs: work-companion-ui design r0.2 and plan r1 U2-U5; UI01-UI13.
218 lines
11 KiB
TypeScript
218 lines
11 KiB
TypeScript
// 右栏（第三栏）：「工作 / 文件」双入口。
|
|
// 工作 = 当前任务卡 + 收件箱（待处理事项、后台任务卡、执行记录）；
|
|
// 文件 = 文件列表（搜索/上传）与多标签预览（预览、编辑、下载）——预览不再是独立第四栏。
|
|
import { store, useStore } from '../store'
|
|
import type { Run } from '../contracts'
|
|
import { InboxList, pendingCount, type ActivityCard, type DocBridge, type InboxFilter } from '@ui'
|
|
import { Icon, SurfaceView } from '@ui'
|
|
import { previewTabsKey } from '../previewtabs'
|
|
import { surfaceKey } from '../surfaceKey'
|
|
import { ArtifactsPanel } from './ArtifactsPanel'
|
|
import { PreviewPane } from './PreviewPane'
|
|
|
|
// 工件解析/打开注入：渲染器纯展示，doc-ref 词汇经此桥接本仓状态（D29）。
|
|
// 打开语义走 requestPreview 唯一入口（第三栏「文件」入口）。
|
|
export const docBridge: DocBridge = {
|
|
resolveDoc: id => store.getState().artifacts.find(a => a.id === id),
|
|
onOpenDoc: id => {
|
|
const art = store.getState().artifacts.find(a => a.id === id)
|
|
if (art) store.requestPreview(art)
|
|
},
|
|
}
|
|
|
|
const inboxCallbacks = {
|
|
onAction: (c: ActivityCard, id: string) => store.cardAction(c, id),
|
|
actionState: (c: ActivityCard) => store.getState().cardActionStates[c.id],
|
|
onPin: (c: ActivityCard, p: boolean) => store.cardPin(c, p),
|
|
onDismiss: (c: ActivityCard) => store.cardDismiss(c),
|
|
onLocate: (c: ActivityCard) => store.locateMessage(c.anchorMessageId),
|
|
onArchive: (c: ActivityCard) => store.cardToProject(c),
|
|
}
|
|
|
|
/** 项目收件箱视图（CF3/D49/D51）：项目级卡片 ∪ 其他会话待办（done 不聚合）。 */
|
|
function ProjectInbox({ cards, filter }: { cards: ActivityCard[]; filter: InboxFilter }) {
|
|
const own = cards.filter(c => !c.conversationId)
|
|
const cross = cards.filter(c => !!c.conversationId)
|
|
if (cards.length === 0) {
|
|
return <div className="inbox-empty">项目收件箱为空——「留档到项目」的产物卡与其他会话的待办会聚合在这里。</div>
|
|
}
|
|
return (
|
|
<>
|
|
<div className="inbox-zone-label">📁 项目级卡片（跨会话可见）</div>
|
|
{own.length > 0
|
|
? <InboxList cards={own} callbacks={inboxCallbacks} docBridge={docBridge} filter={filter} />
|
|
: <div className="inbox-empty" style={{ padding: '4px 14px' }}>暂无——会话卡点 🗂 即留档至此</div>}
|
|
{cross.length > 0 && (
|
|
<>
|
|
<div className="inbox-zone-label">🕓 其他会话待办</div>
|
|
<InboxList cards={cross} callbacks={inboxCallbacks} docBridge={docBridge} showPinnedZone={false} filter={filter} />
|
|
</>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export function Workbench() {
|
|
// Subscribe to shared feedback even when no card object has changed yet.
|
|
useStore(s => s.cardActionStates)
|
|
const rightTab = useStore(s => s.ui.rightTab)
|
|
const cards = useStore(s => s.cards)
|
|
const plan = useStore(s => s.plan)
|
|
const todos = useStore(s => s.todos)
|
|
const inboxScope = useStore(s => s.inboxScope)
|
|
const projectCards = useStore(s => s.projectCards)
|
|
const filter = useStore(s => s.ui.inboxFilter)
|
|
const visible = inboxScope === 'project' ? projectCards : cards
|
|
const pending = pendingCount(visible)
|
|
// 离开文件入口时收回全屏展开，避免出现「工作」铺满主区的怪态。
|
|
const switchTab = (tab: 'work' | 'files') =>
|
|
store.setUI({ rightTab: tab, previewExpanded: tab === 'files' ? store.getState().ui.previewExpanded : false })
|
|
return (
|
|
<>
|
|
<div className="tabs">
|
|
<button className={`tab ${rightTab === 'work' ? 'active' : ''}`} onClick={() => switchTab('work')}
|
|
title="待处理事项、后台任务与执行记录">工作{pending > 0 ? ` ${pending}` : ''}</button>
|
|
<button className={`tab ${rightTab === 'files' ? 'active' : ''}`} onClick={() => switchTab('files')}
|
|
title="文件搜索、预览、编辑与下载">文件</button>
|
|
<span className="spacer" style={{ flex: 1 }} />
|
|
{rightTab === 'work' && (
|
|
<button className="tab tab-action" title="收纳已完成卡（done→关闭；已确认卡留痕不动）" onClick={() => store.tidyCards()}><Icon name="check" size={13} /> 收纳</button>
|
|
)}
|
|
<button className="tab" title="收起右栏" onClick={store.toggleRight}><Icon name="chevron-right" size={14} /></button>
|
|
</div>
|
|
{rightTab === 'files'
|
|
? <FilesTab />
|
|
: <WorkTab plan={plan} todos={todos} filter={filter} inboxScope={inboxScope} projectCards={projectCards} cards={cards} />}
|
|
</>
|
|
)
|
|
}
|
|
|
|
/** 文件入口：有预览标签且处于预览子视图时展示预览；否则展示文件列表（搜索/上传）。 */
|
|
function FilesTab() {
|
|
const previewOpen = useStore(s => (s.previewTabs[previewTabsKey(s.currentConvId)]?.length ?? 0) > 0)
|
|
const filesView = useStore(s => s.ui.filesView)
|
|
if (previewOpen && filesView === 'preview') return <PreviewPane />
|
|
return <div className="tab-body"><ArtifactsPanel /></div>
|
|
}
|
|
|
|
/** U1：同会话存在后台 progress 卡（进行中/待确认）时，progress 为权威对象，隐藏 CurrentTaskCard 避免双标题。 */
|
|
export function hasActiveProgressCard(cards: ActivityCard[]): boolean {
|
|
return cards.some(c => c.kind === 'progress' && (c.status === 'active' || c.status === 'action_required'))
|
|
}
|
|
|
|
function WorkTab({ plan, todos, filter, inboxScope, projectCards, cards }: {
|
|
plan: Parameters<typeof CurrentTaskCard>[0]['plan']
|
|
todos: Parameters<typeof CurrentTaskCard>[0]['todos']
|
|
filter: InboxFilter
|
|
inboxScope: 'conv' | 'project'
|
|
projectCards: ActivityCard[]
|
|
cards: ActivityCard[]
|
|
}) {
|
|
const showCurrentTask = !hasActiveProgressCard(cards)
|
|
return (
|
|
<>
|
|
<div className="tab-body" data-scroll-sync="inbox">
|
|
{showCurrentTask ? <CurrentTaskCard plan={plan} todos={todos} /> : null}
|
|
<div className="inbox-scope" role="tablist" aria-label="收件箱范围与筛选">
|
|
<button className={inboxScope === 'conv' ? 'active' : ''} onClick={() => store.setInboxScope('conv')}>本会话</button>
|
|
<button className={inboxScope === 'project' ? 'active' : ''} onClick={() => store.setInboxScope('project')}>
|
|
项目{pendingCount(projectCards) > 0 ? ` ${pendingCount(projectCards)}` : ''}
|
|
</button>
|
|
<span style={{ flex: 1 }} />
|
|
<button className={filter === 'todo' ? 'active' : ''} title="只看待处理" onClick={() => store.setUI({ inboxFilter: 'todo' })}>待处理</button>
|
|
<button className={filter === 'all' ? 'active' : ''} title="全部卡片" onClick={() => store.setUI({ inboxFilter: 'all' })}>全部</button>
|
|
</div>
|
|
{inboxScope === 'project'
|
|
? <ProjectInbox cards={projectCards} filter={filter} />
|
|
: <InboxList cards={cards} docBridge={docBridge} callbacks={inboxCallbacks} filter={filter} />}
|
|
<WorkspaceSurfaces />
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
/** 当前任务常驻卡（D25 R4）：计划+待办合成一张卡，钉在收件箱顶部——右栏只回答"现在要我做什么"。 */
|
|
export function CurrentTaskCard({ plan, todos }: {
|
|
plan: { title: string; steps: { id: string; text: string; status: string; agentRun?: string }[] } | null
|
|
todos: { items: { id: string; text: string; status: string }[] } | null
|
|
}) {
|
|
const steps = plan?.steps ?? []
|
|
const items = todos?.items ?? []
|
|
if (steps.length === 0 && items.length === 0) return null
|
|
const done = [...steps, ...items].filter(x => x.status === 'done' || x.status === 'completed').length
|
|
const total = steps.length + items.length
|
|
return (
|
|
<div className="current-task" data-testid="current-task">
|
|
<div className="ct-head">
|
|
<span className="lamp lamp-ok">●</span>
|
|
<span className="ct-title">{plan?.title ?? '当前任务'}</span>
|
|
<span className="ct-progress">{done}/{total}</span>
|
|
</div>
|
|
{steps.map(s => (
|
|
<div key={s.id} className={`step ${s.status}`}>
|
|
<StatusIcon status={s.status} />
|
|
<span style={{ flex: 1 }}>{s.text}</span>
|
|
{s.agentRun && <span className="status-dot status-completed" title="子代理执行" />}
|
|
</div>
|
|
))}
|
|
{items.map(t => (
|
|
<div key={t.id} className={`step ${t.status}`}>
|
|
<StatusIcon status={t.status} />
|
|
<span>{t.text}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function StatusIcon({ status }: { status?: string }) {
|
|
if (status === 'done' || status === 'completed') return <span style={{ color: 'var(--ok)' }}>●</span>
|
|
if (status === 'in_progress' || status === 'running') return <span style={{ color: 'var(--accent)' }}>◐</span>
|
|
if (status === 'skipped') return <span>◌</span>
|
|
return <span style={{ color: 'var(--text-faint)' }}>○</span>
|
|
}
|
|
|
|
/** 代理行（工作区弹层复用；点击进 AgentTracker）。 */
|
|
export function AgentRow({ run, depth }: { run: Run; depth: number }) {
|
|
const label = run.kind === 'subagent' ? `🤖 ${run.agentName || '子代理'}` : '💬 对话任务'
|
|
return (
|
|
<div className="agent-row" style={{ paddingLeft: 8 + depth * 18 }} onClick={() => store.openTracker(run.id)}>
|
|
<span className={`status-dot status-${run.status}`} />
|
|
<span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' }}>{label}</span>
|
|
<span style={{ fontSize: 'var(--fs-ui-xs)', color: 'var(--text-faint)' }}>{run.status}</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// U6 工作区任务页容器：会话内页面在"工作"入口的常驻紧凑视图——默认显示最新
|
|
// 一页，固定（pin）后不随新页面抢占；关闭插件后此处自然消失（surfaces 为空），
|
|
// 收件箱/任务卡等原有内容不受影响（禁用回退完整性）。点击标题去文件预览全屏。
|
|
function WorkspaceSurfaces() {
|
|
const surfaces = useStore(s => s.surfaces)
|
|
const pin = useStore(s => s.ui.workspaceSurfacePin)
|
|
const usable = surfaces.filter(x => surfaceKey(x) != null)
|
|
if (usable.length === 0) return null
|
|
const shown = pin ? usable.find(x => surfaceKey(x) === pin) : usable[usable.length - 1]
|
|
if (!shown) return null
|
|
const shownId = surfaceKey(shown)!
|
|
return (
|
|
<div className="workspace-surfaces" data-workspace-surfaces>
|
|
<div className="ws-head">
|
|
<span className="ws-title">任务页面</span>
|
|
<span className="ws-meta">{shown.spec?.title || '（未命名）'} · 修订 {shown.revision}</span>
|
|
<span style={{ flex: 1 }} />
|
|
<button className="icon-btn" title={pin ? '取消固定（跟随最新）' : '固定此页（新页面不抢占）'}
|
|
onClick={() => store.setUI({ workspaceSurfacePin: pin ? null : shownId })}>
|
|
{pin ? '📍' : '📌'}
|
|
</button>
|
|
<button className="icon-btn" title="在文件预览中打开" onClick={() => store.openSurface(shownId)}>
|
|
↗
|
|
</button>
|
|
</div>
|
|
<div className="ws-body">
|
|
<SurfaceView snapshot={shown} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|