# 第三章：架构重构与对比分析 (/docs/v2/03)

## 3. 重构 [#3-重构]

### 3.1 会话侧边栏与环境收敛 [#31-会话侧边栏与环境收敛]

#### 1. 1.x vs 2.0 侧边栏交互全景对照表 [#1-1x-vs-20-侧边栏交互全景对照表]

| 维度 / 交互元素 | CDS 1.x 侧边栏基线 | CDS 2.0 侧边栏架构跃迁 |
| :--- | :--- | :--- |
| **组织分类逻辑** | 用户自建多层文件夹树，任意归类 | **四态严格物理源分组 (`None / Status / Date / Environment`)**，单文件夹静默并入统一 `Default` 作用域 |
| **条目行高与视觉密度** | 宽大松散的 38px~40px 对话行 | **28px 紧凑高密度工程行高**，垂直可视条目增加 45% |
| **Git 分支名指示** | 无 | **Monospace 等宽分支徽章**（如 `feat/auth`）直接嵌入行内 |
| **GitHub PR 联动徽标** | 无 | **PR 状态胶囊**（`#123 Open / Merged`）行内实时挂载 |
| **后台任务运行心跳** | 无状态动画 | **`isRunning` 动态呼吸光晕环** 与 `starting` 旋转微图标 |
| **远程调度与桥接标识** | 无 | **Bridge 桥接图标** 与 `permissionMode` 权限模式标识 |
| **侧栏与画布分割边界** | 1px 略重外轮廓 | **0.5px 发丝细边 (`border-0.5 border-border-300`)** |

#### 2. 最新底层实现代码 (编译产物提取) [#2-最新底层实现代码-编译产物提取]

在 `index.chunk-DPv6qSYD.js` 中，分析提取出了左侧边栏会话列表项的完整工程元数据模型：

```typescript
// 提取自 index.chunk-DPv6qSYD.js 会话数据管道
interface SidebarSessionRow {
  sessionId: string;
  title: string;
  cwd: string;               // 本地工作树绝对路径
  branch?: string;           // Git 分支名称 (如 main, feat/login)
  isArchived: boolean;
  isRunning: boolean;        // 后台 Agent 正在执行代码/命令
  starting: boolean;         // 容器或虚拟机正在拉起
  prNumber?: number;         // 关联的 GitHub PR 编号 (如 123)
  prState?: 'OPEN' | 'MERGED' | 'CLOSED';
  lastActivityAt?: string;
  group: string;             // 四态分组作用域归属
  pinned: boolean;           // isStarred 置顶星标
  remoteControlActive: boolean; // 是否处于 Slack / 网页桥接控制
  permissionMode?: 'auto' | 'accept_edits' | 'plan'; // 权限模式
}
```

#### 3. 为什么 Anthropic 要彻底推翻旧侧边栏设计 [#3-为什么-anthropic-要彻底推翻旧侧边栏设计]

* **从“聊天历史翻阅器”向“多智能体任务监控台”转型**：在 1.x 时代，侧边栏只是用来翻翻前天聊了什么的“聊天记录列表”；但在 2.0 中，随着 Claude Code CLI、Worktree 与 Cowork 的深度整合，开发者往往在后台并发运行了 3 到 5 个不同的 Agent（有的在本地 Worktree 跑单元测试，有的在远程 SSH 修复部署脚本，有的在云端容器重构前端）。如果沿用 1.x 宽大的 40px 行高且不展示分支与 PR，开发者必须反复点进每个会话去确认哪个任务跑完了、哪个被速率卡住；2.0 的 28px 高密度工程状态列，让开发者在侧边栏**一眼看尽所有并发 Agent 的分支名称、PR 状态、活跃心跳与权限等级**，真正具备了现代 IDE 任务监控板的工业吞吐力。
* **物理执行源安全防穿透**：取消随意嵌套文件夹，强行以“这台电脑 / Cloud / SSH / Slack”物理源归类，杜绝了用户在不知情的情况下将高危本地执行脚本误放到云端或远程主机执行的安全隐患。

---

### 3.2 工作台画布与底色演进 [#32-工作台画布与底色演进]

#### 1. 1.x vs 2.0 画布基底色彩演变对照表 [#1-1x-vs-20-画布基底色彩演变对照表]

| 色彩令牌 / 属性 | CDS 1.x 原始基线 | CDS 2.0 迭代演进 | 视觉物理体验与色相感受 |
| :--- | :--- | :--- | :--- |
| **浅色模式主底色 `--claude-background-color`** | `#FAF8F5` / `#FBF9F4` | **`#FCFCFB`** (`gray-10`) | **彻底剥离旧版明显偏黄偏暖的旧羊皮纸感**，转变为去黄纯净的冷调雪花白（Alabaster），更明亮通透 |
| **深色模式主底色 `--claude-background-color`** | `#1A1915` / `#1E1E1E` | **`#151515`** (`gray-850`) | **由灰褐暖暗色深潜为纯粹黑曜石墨黑**，暗部对比度提升 30%，代码高亮色彩边缘更锐利 |
| **页面底色绑定 `--cds-page-bg`** | 静态颜色变量 | `var(--cds-surface-0)` 动态穿透 | 在 Pulse/动画状态下自动降解为 `transparent` 避免重绘混色 |

#### 2. 为什么 Anthropic 要将暖陶土纸质转变为现代冷调雪花白 [#2-为什么-anthropic-要将暖陶土纸质转变为现代冷调雪花白]

* **消除代码语法高亮与 Git Diff 的色相干扰**：旧版泛黄的纸张底色虽然具备文学质感，但在开发者高强度阅读大量语法高亮代码（TypeScript 浅青、Rust 橙红、Python 翠绿）以及 Git Diff 行级红/绿底色时，黄色基底会与冷色高亮产生物理混色，使文字边缘呈现“发脏发糊”的疲劳感。`#FCFCFB` 提供了无色偏的视网膜中性基底，让代码着色与 Diff 状态一目了然。
* **对齐现代极客生产力工具审美**：Linear、VS Code、Cursor 等现代顶级开发者工具普遍采用了冷性高对比的中性底色体系。2.0 的底色位移标志着 Claude 正式确立了“高强度极客工程控制台”的视觉定位。

---

### 3.3 基础圆角与密度系统 [#33-基础圆角与密度系统]

#### 1. 1.x vs 2.0 圆角与尺寸物理量演进全量对照表 [#1-1x-vs-20-圆角与尺寸物理量演进全量对照表]

| 物理量 / 设计令牌 | CDS 1.x 原始基线 | CDS 2.0 紧凑模式 (Default Compact) | CDS 2.0 舒适模式 (Comfortable) | 演进特征与视觉体验 |
| :--- | :--- | :--- | :--- | :--- |
| **输入框圆角 `--cds-radius-composer`** | `20px` (`rounded-[20px]`) | **`12px`** (`calc(.75rem * scale)`) | **`14px`** (`calc(.875rem * scale)`) | **平直化收敛 40%**，彻底摆脱玩具胶囊感 |
| **基础控件圆角 `--cds-radius`** | `8px` (`rounded-lg`) | **`6px`** (`calc(.375rem * scale)`) | **`8px`** (`calc(.5rem * scale)`) | 默认紧凑模式下更锋利整齐 |
| **子面板/卡片圆角 `--cds-panel-radius`** | `10px` | `10px` | **`12px`** (`calc(.75rem * scale)`) | 大尺寸卡片外轮廓微弧平滑过渡 |
| **复选框圆角 `--cds-checkbox-radius`** | `4px` | `4px` | **`5px`** (`calc(.3125rem * scale)`) | 像素级优化打勾几何同心感 |
| **基准控件高度 `--cds-h-control`** | `32px` (`2rem`) | **`24px`** (`calc(1.5rem * scale)`) | **`32px`** (`calc(2rem * scale)`) | **默认高度压缩 25%**，大幅提升信息密度 |
| **嵌套内联控件高 `--cds-h-control-nested`** | 未独立规范 | **`18px`** (`calc(1.125rem * scale)`) | **`22px`** (`calc(1.375rem * scale)`) | 输入框内胶囊与小按钮专属高度 |
| **基准图标尺寸 `--cds-icon`** | `20px` | **`16px`** (`calc(1rem * scale)`) | **`20px`** (`calc(1.25rem * scale)`) | 紧凑模式全面对齐 16px 视网膜点阵 |
| **组件外间隙 (`--cds-gap-*`)** | `4/8/12/16/24px` | **`6/8/12/20/32px`** 物理序列 | **`8/12/16/28/40px`** 物理序列 | 引入全新 `--cds-gap-xl` 宏观间距阶梯 |

#### 2. 最新底层实现代码 (编译产物提取) [#2-最新底层实现代码-编译产物提取-1]

```css
/* 默认紧凑模式 (Compact Density) */
.cds-root {
  --cds-radius: calc(.375rem * var(--cds-rem-scale, 1));          /* 6px */
  --cds-radius-composer: calc(.75rem * var(--cds-rem-scale, 1));  /* 12px */
  --cds-h-control: calc(1.5rem * var(--cds-rem-scale, 1));        /* 24px */
  --cds-h-control-nested: calc(1.125rem * var(--cds-rem-scale, 1)); /* 18px */
  --cds-icon: calc(1rem * var(--cds-rem-scale, 1));               /* 16px */
}

/* 舒适宽适模式 (Comfortable Density) */
.cds-root[data-density=comfortable] {
  --cds-radius: calc(.5rem * var(--cds-rem-scale, 1));           /* 8px */
  --cds-radius-composer: calc(.875rem * var(--cds-rem-scale, 1)); /* 14px */
  --cds-h-control: calc(2rem * var(--cds-rem-scale, 1));         /* 32px */
  --cds-h-control-nested: calc(1.375rem * var(--cds-rem-scale, 1)); /* 22px */
  --cds-icon: calc(1.25rem * var(--cds-rem-scale, 1));          /* 20px */
}
```

#### 3. 为什么 Anthropic 要把 20px 胶囊改为 12px/14px 平直圆角 [#3-为什么-anthropic-要把-20px-胶囊改为-12px14px-平直圆角]

* **去玩具感与专业工程工作站确立**：1.x 的 20px 椭圆大胶囊属于早期类 iMessage / WhatsApp 等消费级对话产品的遗存；而在 2.0 中，ChatComposer 已升级为承载 Worktree 分支选择器、5 阶算力调节器、提示词暂存、多行代码 Diff、文件列表的复合工业工作坞。20px 的大圆角会导致矩形四角产生巨大的“死角区域（Corner Dead Zones）”，遮挡长行代码缩进或裁剪底栏按钮热区。
* **最大化矩形空间利用率**：12px（紧凑）与 14px（舒适）的平直微圆角不仅保留了温润亲和的工业美感，还最大化榨取了内部矩形有效可用面积，让矮底栏能在紧凑视觉下水平排布更多工具，实现向专业 IDE 级生产力工具的质变。

---

### 3.4 模型选择器与用量感知 [#34-模型选择器与用量感知]

#### 1. 1.x vs 2.0 对比 [#1-1x-vs-20-对比]

* **1.x 基准**：模型选择器旁显示简单的静态标签；上下文大小滑块在会话中途随时可拖动。
* **2.0 迭代**：选择器升级为实时 Token 消耗仪表（Token Gauge）；上下文设置彻底移出主聊天流，收拢至新建会话抽屉 `NewSessionDrawer`。

#### 2. 为什么 Anthropic 要这样改 [#2-为什么-anthropic-要这样改]

* **Prompt Caching 命中率最大化**：中途修改上下文大小会导致底层 KV Cache 彻底失效，使后续轮次推理延迟激增 5 倍以上，成本增加 90%。在建联前一次性锁定上下文，是保障流式吞吐率的核心工程前置条件。

---

### 3.5 骨架屏与胶囊微交互 [#35-骨架屏与胶囊微交互]

#### 1. Pill 胶囊物理过冲弹性形变 [#1-pill-胶囊物理过冲弹性形变]

* **1.x 基准**：简单的颜色加深与微弱平移；
* **2.0 迭代**：引入两段式组合物理形变（1.32 倍放大 + 过冲回弹平抑）：
  ```css
  .cds-root .cds-pill-pop {
    animation: cds-pill-pop-up calc(var(--cds-dur-base) * .4) var(--cds-ease-out),
               cds-pill-pop-down calc(var(--cds-dur-base) * .6) var(--cds-ease-overshoot) calc(var(--cds-dur-base) * .4);
  }
  ```

#### 2. Skeleton 骨架屏双模协同 [#2-skeleton-骨架屏双模协同]

* **同步呼吸模态 (`[data-motion=lockstep]`)**：以 2.0s 为周期整体变暗至 60% 后复原，适用于结构密集的列表；
* **波浪级联流光模态 (`[data-motion=wave]`)**：每个骨架块偏移 `var(--cds-skel-i) * 90ms`，配合 105° 倾角线性高光扫光带（`cds-skeleton-sweep`），适用于大卡片载入。

---

### 3.6 运行时并发与环境隔离 [#36-运行时并发与环境隔离]

#### 1. 十大关键并发与隔离缺陷修复剖析 [#1-十大关键并发与隔离缺陷修复剖析]

1. **大仓库 Worktree 并发克隆死锁**：重构 Git 锁队列，实现串行排队隔离；
2. **Linux SSH Worktree 越界渗透**：修复软链接路径穿透导致修改意外写回宿主机器工作目录的高危漏洞；
3. **Mac 睡眠断连同步**：合盖休眠唤醒后自动基于 Git SHA 对账增量补漏；
4. **超大 Prompt 截断容灾**：超长上下文时温和展示卡片横幅，不再整屏报错；
5. **工具前置引导文本丢失**：修复 AST 提取节点打包折叠的顺序 Bug；
6. **5 小时速率上限后台自愈**：额度耗尽自动挂起，倒计时结束后调度器自动唤醒任务；
7. **Windows 异常退出归因**：区分真实崩溃与 Session Interrupted 假象；
8. **特殊字符路径初始化失败**：支持任意路径编码解析；
9. **Haiku Auto 权限误降级**：修复 Auto 模式置灰落入 Accept edits 的问题；
10. **代码面板 800ms 防抖自动落盘**：新增文件自动保存开关。

#### 2. Windows OpenSSH 路径硬锁定与证书轮换 [#2-windows-openssh-路径硬锁定与证书轮换]

* **路径硬锁定**：彻底写死仅允许调用 `C:\Windows\System32\OpenSSH\ssh.exe`，禁止通过 `PATH` 模糊检索，阻断 `.bat`/`.cmd`/`.ps1` 脚本提权劫持；
* **新签名证书**：Windows 安装包换发新证书，锁定 Thumbprint 的企业策略需添加新指纹。

---

### 3.7 章节图钉界面泄漏 [#37-章节图钉界面泄漏]

* **分析事实**：解包审查证实，界面上偶现的“Pin as chapter”按钮并非前端假 UI，而是 Anthropic 内部用于多步任务切分的工具 **`mcp__ccd_session__mark_chapter`**；
* **内部源码证据**：
  ```javascript
  // 分析提取于 index.chunk-DPv6qSYD.js
  "Two or more at once: call 'mcp__ccd_session__mark_chapter' first with a short batch title."
  ```
* **结论**：系内部开发人员在联调长程 Agent 任务流时的调试动作，因缺乏生产环境 Feature Flag 门禁误泄露至生产包，官方正通过热补丁剥离。

---

### 3.8 动效纯 CSS 合成器化 [#38-动效纯-css-合成器化]

在 2.0 中，Anthropic 做出了一项重大的底层工程决断：**将几乎所有的微交互动效从 JavaScript 动画库迁移为纯 CSS 关键帧与合成器驱动**。

* **为什么 Anthropic 要这样改**：在大模型桌面客户端中，最核心的高负载场景是 **LLM 高速流式吐字（Streaming: 80~120 tokens/sec）**。在 1.x 时代，大量微动效采用 JavaScript 驱动的 Framer Motion 循环计算。当大量 Token 连续更新 DOM 时，主线程（Main Thread）会发生严重的执行帧锁死，导致界面掉帧、卡顿并急剧消耗 MacBook 电池电量。2.0 将动效全部降解为 **现代 CSS 原生选择器、Scroll-Driven 与合成器线程（Compositor Thread）GPU 加速**，即便主线程正在高速处理流式文本，动效依然能锁定在 120Hz 丝滑流畅。

---