Open Claude UI 组件演示
桌面架构与交互 Hook
Open Claude UI 组件演示：桌面顶栏、会话拖拽、多代理看板和几个交互 Hook（手册 v1 第六篇）。每个演示附规格和源码出处。
View as Markdown最后更新：
桌面架构与交互 Hook 讲的是 Claude Desktop 作为 Electron 应用特有的部分：可拖拽的窗口顶栏、会话列表排序、多代理（Cowork）协作看板，以及滚动跟随、漫游焦点、共享元素转场和限流退避这几个 React Hook。本页 7 个演示对应手册 v1 第六篇。
关键数值
| 项目 | 数值 | 出处 |
|---|---|---|
| macOS 红绿灯预留 | 74px | v1/06 §6.1 |
| 顶栏拖拽带 | 45px | v1/06 §6.1 |
| 拖拽判定阈值 | 移动 4px 以内不算拖拽 | v1/06 §6.2 |
| 代理任务状态 | idle → running → waiting_review → completed / errored | v1/06 §6.3 |
| 限流退避 | 基准 5 秒，指数翻倍，封顶 10 分钟 | v1/06 §6.7 |
桌面顶栏
顶栏左侧给 macOS 红绿灯留位，空白处可拖动窗口，按钮区域不响应拖拽。
新会话
会话列表拖拽排序
置顶会话可以拖拽重排，也可以用键盘上移、下移。
多代理协作看板
Cowork 看板显示多个代理的子任务状态和共享产物。
Claude Cowork 多智能体协同空间
多 Agent 并发任务分派、实时状态拓扑与共享工件网格
4 个活动 Agent
协作团队成员
系统架构师● 运行中
Lead Architect
编排并分发前端工程拓扑任务
分析取证专家● 运行中
Reverse Engineer
提取 /Applications/Claude.app 生产混淆源码
CDS 组件开发工程师○ 空闲
Design System Engineer
等待新的组件规范任务
质量验收专家△ 待复核
Verification Agent
等待人工确认 Git commit 与 push 结果
当前活跃委派任务 (Task Delegation)已达成 8 个里程碑
编排并分发前端工程拓扑任务
团队共享产物 (Artifacts Pool)共 4 个产物
docv2.4
Claude Design System (CDS).md
更新于 刚刚查看预览 ↗
codev1.0
RichComposerWithMentions.tsx
更新于 5分钟前查看预览 ↗
codev1.0
DraggableSessionList.tsx
更新于 8分钟前查看预览 ↗
audiov1.2
AudioSinkWorklet.js
更新于 20分钟前查看预览 ↗
流式输出滚动跟随
在底部时自动跟随流式输出，用户往上翻就停止跟随。
开始输出…
漫游焦点
列表里只有一个可 Tab 聚焦的元素，用方向键在项目之间移动。
共享元素转场
用 View Transitions API 让缩略图平滑放大成预览。
限流退避
遇到限流时按指数退避等待，倒计时结束自动重试。
空闲 · 自动重试 0 次
怎么在项目里使用？
复制 code-examples/ 里对应的文件，并引入 cds-theme.css。例如：
import { useClaudeScrollPinning } from './useClaudeScrollPinning';
const { containerRef, isPinned, showJumpControl, handleScroll, scrollToBottom } = useClaudeScrollPinning([messages]);