# Claude VS Code 插件视觉规范提取

- 来源：本机已安装的 `anthropic.claude-code-2.1.296-linux-x64/webview/index.css`（2026-10-22 提取）
- 用途：作为 Playground / chat-ui 的视觉规范依据。只参考设计令牌与布局，不拷贝源码和资源。

## 1. 令牌体系

插件定义了一层 `--app-*` 语义变量，映射到 VS Code 主题变量 `--vscode-*`。我们在独立网页中没有 `--vscode-*`，所以用 VS Code 默认主题的取值填充（下表的"暗/亮"两列为 Dark Modern / Light Modern 的参考值，实现时以主题文件为准）。

| 语义令牌 | 映射到 | 暗 | 亮 |
|---|---|---|---|
| `--app-primary-background` | sideBar.background | `#181818` | `#f8f8f8` |
| `--app-secondary-background` | editor.background | `#1f1f1f` | `#ffffff` |
| `--app-primary-foreground` | foreground | `#cccccc` | `#3b3b3b` |
| `--app-secondary-foreground` | descriptionForeground | `#9d9d9d` | `#717171` |
| `--app-primary-border-color` | sideBarActivityBarTop.border | `#2b2b2b` | `#e5e5e5` |
| `--app-input-background` | input.background | `#313131` | `#ffffff` |
| `--app-input-secondary-background` | menu.background | `#1f1f1f` | `#ffffff` |
| `--app-input-border` | inlineChatInput / input / widget border | `#3c3c3c` | `#cecece` |
| `--app-input-active-border` | inputOption.activeBorder | `#2488db` | `#005fb8` |
| `--app-input-placeholder-foreground` | input.placeholderForeground | `#989898` | `#767676` |
| `--app-code-background` | textCodeBlock.background | `#7f7f7f26` | `#7f7f7f26` |
| `--app-inline-code-background` | textPreformat.background | `#7f7f7f26` | `#7f7f7f26` |
| `--app-link-foreground` | textLink.foreground | `#4daafc` | `#005fb8` |
| `--app-list-hover-background` | list.hoverBackground | `#2a2d2e` | `#f2f2f2` |
| `--app-error-foreground` | errorForeground | `#f85149` | `#f85149` |

## 2. 品牌色（插件中硬编码）

| 令牌 | 值 | 用途 |
|---|---|---|
| `--app-claude-orange` | `#d97757` | 输入框聚焦边框与光晕 |
| `--app-claude-clay-button-orange` | `#c6613f` | 发送按钮背景 |
| `--app-claude-ivory` | `#faf9f5` | 发送按钮图标 |
| `--app-claude-slate` | `#141413` | — |
| 成功 | `#74c991` | 时间线圆点、已连接徽标 |
| 失败 | `#c74e39` | 时间线圆点、失败徽标 |
| 警告/待处理 | `#e1c08d` | 时间线圆点、需登录徽标 |

## 3. 刻度
- 间距：`--app-spacing-small/medium/large/xlarge` = 4 / 8 / 12 / 16px
- 圆角：`--corner-radius-small/medium/large` = 4 / 6 / 8px
- 等宽字号：编辑器字号（默认 12px），小号 −2px
- 列表：项内边距 4px 8px，项间距 2px，圆角 4px

## 4. 关键组件规则（摘录）

```css
/* 时间线：竖线 + 圆点 */
.timelineMessage        { padding-left: 30px; }
.timelineMessage::before{ left: 9px; width: 7px; height: 7px; border-radius: 50%;
                          top: calc(var(--message-padding-top, 8px) + 7px);
                          background: var(--app-secondary-foreground); }
.timelineMessage::after { left: 12px; width: 1px; top: 0; bottom: 0;
                          background: var(--app-primary-border-color); }
.dotSuccess::before { background: #74c991 } .dotFailure::before { background: #c74e39 }
.dotWarning::before { background: #e1c08d }

/* 用户消息 */
.userMessage { border: 1px solid var(--app-input-border); border-radius: 6px;
               background: var(--app-input-background); padding: 4px 6px; white-space: pre-wrap; }

/* 工具行 */
.toolNameText           { font-weight: 700; margin-right: 4px; }
.toolNameTextSecondary  { font-family: monospace; font-size: .85em; }
.toolBodyRow            { display: grid; grid-template-columns: subgrid;
                          border-top: .5px solid var(--app-input-border); padding: 4px; }
.toolBodyRowLabel       { font-family: monospace; opacity: .5; font-size: .85em; }
.toolBodyRowContent     { max-height: 60px; overflow: hidden;
                          mask-image: linear-gradient(to bottom, #000 50px, transparent 60px); }
.toolResult             { background: var(--app-code-background); white-space: pre; overflow-x: auto; }

/* 审批卡片 */
.permissionRequestContainer { background: var(--app-input-secondary-background);
                              border: 1px solid var(--app-input-border); border-radius: 8px;
                              padding: 8px; max-height: 70vh; }
.permissionRequestContainer:focus-within
  { border-color: color-mix(in srgb, var(--app-input-active-border) 65%, transparent); }

/* 输入框 */
.inputContainer { border: 1px solid var(--app-input-border); border-radius: 8px;
                  box-shadow: 0 1px 2px #0000001a; }
.inputContainer:focus-within { border-color: #d97757;
  box-shadow: 0 0 0 3px color-mix(in srgb, #d97757 12%, transparent),
              0 1px 2px color-mix(in srgb, #d97757, transparent 80%); }
.messageInput  { padding: 10px 36px 10px 14px; max-height: 200px; line-height: 1.5; }
.sendButton    { width: 26px; height: 26px; border-radius: 5px;
                 background: #c6613f; color: #faf9f5; }

/* 思考过程 */
.thinkingSummary { color: var(--app-secondary-foreground); opacity: .8; font-style: italic; }

/* 状态徽标 */
.statusBadge { border-radius: 4px; padding: 4px 8px; font-weight: 500; }
```

主容器：时间线和输入框都限制在 `max-width: 680px` 内居中，输入框距底部和左右各 16px。

## 5. 组件清单（按类名出现频次，反映插件的 UI 构成）
timelineMessage、userMessageContainer、toolUse/toolResult/toolBodyRow、permissionRequest*、thinkingSummary、inputContainer/messageInput/sendButton、pill（模型/模式选择）、sessionItem（历史会话）、statusBadge、mcpStatus、subagentRow、menuPopup/menuItem、banner、emptyState、previewPane。

## 6. 升级跟踪
插件升级后可以重新执行提取脚本，比对令牌变化：
```bash
grep -oE -- '--app-[a-zA-Z0-9-]+:[^;]+' ~/.vscode/extensions/anthropic.claude-code-*/webview/index.css | sort -u
```