# 桌面架构与交互 Hook (/docs/components/desktop)

桌面架构与交互 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 红绿灯留位，空白处可拖动窗口，按钮区域不响应拖拽。

<D.Header />

## 会话列表拖拽排序 [#会话列表拖拽排序]

置顶会话可以拖拽重排，也可以用键盘上移、下移。

<D.Sessions />

## 多代理协作看板 [#多代理协作看板]

Cowork 看板显示多个代理的子任务状态和共享产物。

<D.Cowork />

## 流式输出滚动跟随 [#流式输出滚动跟随]

在底部时自动跟随流式输出，用户往上翻就停止跟随。

<D.ScrollPin />

## 漫游焦点 [#漫游焦点]

列表里只有一个可 Tab 聚焦的元素，用方向键在项目之间移动。

<D.Roving />

## 共享元素转场 [#共享元素转场]

用 View Transitions API 让缩略图平滑放大成预览。

<D.SharedElement />

## 限流退避 [#限流退避]

遇到限流时按指数退避等待，倒计时结束自动重试。

<D.Backoff />

## 怎么在项目里使用？ [#怎么在项目里使用]

复制 [code-examples/](https://github.com/Caho1/open-claude-ui/blob/main/code-examples) 里对应的文件，并引入 `cds-theme.css`。例如：

```tsx
import { useClaudeScrollPinning } from './useClaudeScrollPinning';

const { containerRef, isPinned, showJumpControl, handleScroll, scrollToBottom } = useClaudeScrollPinning([messages]);
```

## 相关页面 [#相关页面]

- [多媒体与产物](/docs/components/media)
- [v1 第六篇](/docs/v1/06)
- [分析 Claude 桌面端界面](/reverse-engineering-claude)
- [全部 Open Claude UI 组件演示](/docs/components)