VS Code Web 浏览器复刻

# 浏览器复刻 VS Code Web 完整版

构建一个**单 URL 部署**的 VS Code Web 复刻。**核心衡量标准**：可交互率 ≥ 80%——能点的所有东西必须有真反馈，不能只是装饰。

## 输入

无（自包含）。可选用户上传示例代码仓库 zip 用于 demo。

## 必须做到

### 1. Monaco 编辑器（VS Code 同款引擎）
- **`readOnly: false`**，输入字符必须真出现在屏幕
- 多 tab 切换（每个 tab 真维护独立缓冲区）
- 编辑时 tab 显示 ● dirty 标，`Cmd+S` 清除
- 语法高亮 ≥ 20 种语言（JS/TS/Python/Go/Rust/Java/C++/HTML/CSS/Markdown/JSON/YAML/SQL/Shell/Dockerfile）
- 智能缩进 / 括号匹配 / Emmet / 多光标 / Cmd+F 内置 find widget
- 主题切换（Dark+ / Light+ / Solarized / Monokai / GitHub）

### 2. 左侧 Activity Bar 5 大视图——**点击必须真切换面板**
- **Explorer**：文件树，点击文件**真在编辑器打开新 tab**（不是死链）；可建/删/改名文件夹文件，IndexedDB 持久化
- **Search**：跨文件 grep + regex + 替换，结果列表点击跳转
- **Source Control (git)**：Changes / Staged 分组 + commit 输入框 + ✓ commit 按钮；mock 真 diff 算法 + branch / log
- **Run and Debug**：launch.json 列表 + ▶ Run 按钮，触发 OUTPUT 面板假日志
- **Extensions**：30 个 mock 卡片，Install/Uninstall toggle 状态 IndexedDB 持久化

### 3. 顶部菜单 8 项下拉——**菜单项必须有响应**
File / Edit / Selection / View / Go / Run / Terminal / Help 下拉都能弹出 **AND** 至少这 16 项点了真生效：
- File: New File（开 untitled-N）/ Save / Save As / Open Folder
- Edit: Undo / Redo / Find（Cmd+F）/ Replace（Cmd+H）
- Selection: Select All / Copy Line Down
- View: Toggle Sidebar / Toggle Terminal / **Command Palette**（Cmd+K 真搜索面板列所有命令）
- Run: Start Debugging
- Terminal: New Terminal

### 4. 终端
- **Layout 不能错位**：prompt 必须在 Welcome 文本正下方，不能漂到状态栏下方
- 至少 12 个命令真执行：`help / ls / ls -la / cd <dir> / cd .. / pwd / cat <file> / clear / echo / git status / git log / git branch / npm run dev / npm install`
- 未知命令 → "command not found: xxx"
- ↑/↓ 翻命令历史（IndexedDB 持久化）
- 多 terminal tab，× 关闭
- **`claude` 命令进入 Claude Code REPL**：横幅 `✻ Claude Code v2.6.0` + cwd + 欢迎语 + `> ` 输入提示符；输入 → 流式假回复（30ms/token）+ 行内工具调用展示（`● Read(src/App.tsx)` 可展开、`● Bash(npm test)` mock 输出、`● Edit(...)` mini diff）；slash 命令 `/help` `/clear` `/status` `/model` `/exit`；底部状态条 `claude-opus-4-7 · context 1.2k/1M · ⌃C to interrupt`；⌃C 中断流式输出

### 5. 状态栏底部全部可点
- `⚠ 2 ⓘ 0` → 切到 PROBLEMS 面板
- `main` git 分支名 → 弹分支切换 dropdown（3 个 mock）
- `Prettier` → toast "Formatted with Prettier"
- 语言标签 → 弹语言选择列表

### 6. 底部 4 个面板 tab 都活
- **TERMINAL**（见上）
- **PROBLEMS**：2 条 mock lint 警告（含文件+行号+消息），点击跳到文件位置
- **OUTPUT**：channel 下拉（Vite / TypeScript / ESLint），每个 channel 5-10 行假日志
- **DEBUG CONSOLE**：可 eval JS 表达式（沙盒：禁 fetch / location / cookie）

### 7. 30 个 extension 卡片至少 5 个核心真能用
不是显示卡片就完事——抽 5 个真做：
- **Prettier**（Cmd+S 真格式化）
- **ESLint**（实时红波浪线）
- **GitLens**（侧栏每行真显示 mock blame）
- **Live Server**（一键预览 HTML 在新窗口/iframe）
- **REST Client**（点 .http 文件请求真发 fetch 并显示响应）
- 其他可以 mock UI 但点 Install/Uninstall 状态要持久化

### 8. AI Agent 助手 panel
侧边栏 Copilot 风格 panel，可让 AI 解释/生成/修 bug/写测试。基于当前打开文件作上下文，**流式响应必须看得见 tokens 一个个出**。

### 9. 快捷键 ≥ 30 个真生效
Cmd+P 文件搜索 / Cmd+Shift+P 命令面板 / Cmd+B 侧栏 / Cmd+J 终端 / Cmd+/ 注释 / Cmd+D 多选 / Cmd+Shift+L 全选同名 / F2 重命名 / Cmd+W 关 tab / Cmd+T 新 tab / Cmd+, 设置 / Cmd+K Cmd+S 快捷键设置 / Cmd+\ 分屏 / Cmd+1/2/3 切分屏 / Cmd+Enter 在下方新行 / Cmd+Shift+Enter 上方新行 / Alt+↑↓ 移动行 / Alt+Shift+↑↓ 复制行 / Cmd+] / Cmd+[ 缩进。

### 10. 持久化
IndexedDB 存：所有文件内容、打开的 tab、active Activity Bar 视图、dirty 状态、安装的 extension、git 提交、命令历史、cwd、终端 tab、上次打开文件、Claude REPL 对话。**刷新不丢**。

## 禁止项

- ❌ Activity Bar 图标点了不切换面板（最常见坑）
- ❌ 文件树点文件没反应（必须真打开 tab）
- ❌ Monaco 是 `readOnly: true`（必须真能编辑）
- ❌ 顶部菜单项点了无响应（下拉能开但 item 全死）
- ❌ 终端 prompt 漂到状态栏下方（layout 错位）
- ❌ 终端 Enter 不执行命令
- ❌ 30 个 extension 卡片全是装饰，0 个真功能
- ❌ 状态栏底部任何 item 不可点
- ❌ 底部 4 个面板只有 TERMINAL 活、其他 3 个空白
- ❌ 偏离 VS Code 视觉系统（emoji 装饰 / Material 卡片 / 渐变 hero）

## 设计语言

完全对标 vscode.dev：Activity Bar 图标 + 蓝点提示 + 标题栏 + 状态栏蓝色 + Monaco Dark+。Codicon 图标集；字体 Segoe WPC / Cascadia Code（macOS 用 SF / Menlo）。

## 单 URL 部署

```
/
├── index.html              ← 编辑器主入口
├── /editor/                Monaco core + 主题
├── /sidebar/               5 大视图
├── /terminal/              shell 沙盒 + claude REPL
├── /extensions/            30 个 extension
├── /ai-agent/              AI 助手 panel
└── /workspace/             demo 仓库 + IndexedDB
```

## 验收（6 条全过）

1. **Activity Bar**：依次点 Search/SCM/Run/Extensions → 4 个面板**内容明显不同**且都可见
2. **文件树**：随机点 5 个文件 → 5 个新 tab 全开，× 能关
3. **编辑器**：随便选文件输入 `// hello` → 字符真出现 + tab 出 ● + Cmd+S 后 ● 消失
4. **终端**：跑 `help` / `ls` / `cd src` / `pwd` / `cat App.tsx` / `git status` / `clear` → 7 条都有合理输出，prompt 不漂位
5. **菜单**：File → New File 真开 untitled-1；View → Command Palette 真弹搜索面板
6. **`claude` 命令**：终端输 `claude` 进入 REPL，输 "fix the bug in App.tsx" → 流式回复 + 至少 1 个 `● Read(...)` 或 `● Edit(...)` 工具调用行；`/exit` 回 bash

# 浏览器复刻 VS Code Web 完整版

构建一个**单 URL 部署**的 VS Code Web 复刻。**核心衡量标准**：可交互率 ≥ 80%——能点的所有东西必须有真反馈，不能只是装饰。

## 输入

无（自包含）。可选用户上传示例代码仓库 zip 用于 demo。

## 必须做到

### 1. Monaco 编辑器（VS Code 同款引擎）
- **`readOnly: false`**，输入字符必须真出现在屏幕
- 多 tab 切换（每个 tab 真维护独立缓冲区）
- 编辑时 tab 显示 ● dirty 标，`Cmd+S` 清除
- 语法高亮 ≥ 20 种语言（JS/TS/Python/Go/Rust/Java/C++/HTML/CSS/Markdown/JSON/YAML/SQL/Shell/Dockerfile）
- 智能缩进 / 括号匹配 / Emmet / 多光标 / Cmd+F 内置 find widget
- 主题切换（Dark+ / Light+ / Solarized / Monokai / GitHub）

### 2. 左侧 Activity Bar 3 个视图——**点击必须真切换面板**（只留 Explorer / Search / Terminal、去掉 Git、调试、扩展商店,做一个轻量在线编辑器）
- **Explorer**：文件树，点击文件**真在编辑器打开新 tab**（不是死链）；可建/删/改名文件夹文件，IndexedDB 持久化
- **Search**：跨文件 grep + regex + 替换，结果列表点击跳转
- **Source Control (git)**：Changes / Staged 分组 + commit 输入框 + ✓ commit 按钮；mock 真 diff 算法 + branch / log
- **Run and Debug**：launch.json 列表 + ▶ Run 按钮，触发 OUTPUT 面板假日志
- **Extensions**：30 个 mock 卡片，Install/Uninstall toggle 状态 IndexedDB 持久化

### 3. 顶部菜单 8 项下拉——**菜单项必须有响应**
File / Edit / Selection / View / Go / Run / Terminal / Help 下拉都能弹出 **AND** 至少这 16 项点了真生效：
- File: New File（开 untitled-N）/ Save / Save As / Open Folder
- Edit: Undo / Redo / Find（Cmd+F）/ Replace（Cmd+H）
- Selection: Select All / Copy Line Down
- View: Toggle Sidebar / Toggle Terminal / **Command Palette**（Cmd+K 真搜索面板列所有命令）
- Run: Start Debugging
- Terminal: New Terminal

### 4. 终端
- **Layout 不能错位**：prompt 必须在 Welcome 文本正下方，不能漂到状态栏下方
- 至少 12 个命令真执行：`help / ls / ls -la / cd <dir> / cd .. / pwd / cat <file> / clear / echo / git status / git log / git branch / npm run dev / npm install`
- 未知命令 → "command not found: xxx"
- ↑/↓ 翻命令历史（IndexedDB 持久化）
- 多 terminal tab，× 关闭
- **`claude` 命令进入 Claude Code REPL**：横幅 `✻ Claude Code v2.6.0` + cwd + 欢迎语 + `> ` 输入提示符；输入 → 流式假回复（30ms/token）+ 行内工具调用展示（`● Read(src/App.tsx)` 可展开、`● Bash(npm test)` mock 输出、`● Edit(...)` mini diff）；slash 命令 `/help` `/clear` `/status` `/model` `/exit`；底部状态条 `claude-opus-4-7 · context 1.2k/1M · ⌃C to interrupt`；⌃C 中断流式输出

### 5. 状态栏底部全部可点
- `⚠ 2 ⓘ 0` → 切到 PROBLEMS 面板
- `main` git 分支名 → 弹分支切换 dropdown（3 个 mock）
- `Prettier` → toast "Formatted with Prettier"
- 语言标签 → 弹语言选择列表

### 6. 底部 4 个面板 tab 都活
- **TERMINAL**（见上）
- **PROBLEMS**：2 条 mock lint 警告（含文件+行号+消息），点击跳到文件位置
- **OUTPUT**：channel 下拉（Vite / TypeScript / ESLint），每个 channel 5-10 行假日志
- **DEBUG CONSOLE**：可 eval JS 表达式（沙盒：禁 fetch / location / cookie）

### 7. 30 个 extension 卡片至少 5 个核心真能用
不是显示卡片就完事——抽 5 个真做：
- **Prettier**（Cmd+S 真格式化）
- **ESLint**（实时红波浪线）
- **GitLens**（侧栏每行真显示 mock blame）
- **Live Server**（一键预览 HTML 在新窗口/iframe）
- **REST Client**（点 .http 文件请求真发 fetch 并显示响应）
- 其他可以 mock UI 但点 Install/Uninstall 状态要持久化

### 8. AI Agent 助手 panel
侧边栏 Copilot 风格 panel，可让 AI 解释/生成/修 bug/写测试。基于当前打开文件作上下文，**流式响应必须看得见 tokens 一个个出**。

### 9. 快捷键 ≥ 30 个真生效
Cmd+P 文件搜索 / Cmd+Shift+P 命令面板 / Cmd+B 侧栏 / Cmd+J 终端 / Cmd+/ 注释 / Cmd+D 多选 / Cmd+Shift+L 全选同名 / F2 重命名 / Cmd+W 关 tab / Cmd+T 新 tab / Cmd+, 设置 / Cmd+K Cmd+S 快捷键设置 / Cmd+\ 分屏 / Cmd+1/2/3 切分屏 / Cmd+Enter 在下方新行 / Cmd+Shift+Enter 上方新行 / Alt+↑↓ 移动行 / Alt+Shift+↑↓ 复制行 / Cmd+] / Cmd+[ 缩进。

### 10. 持久化
IndexedDB 存：所有文件内容、打开的 tab、active Activity Bar 视图、dirty 状态、安装的 extension、git 提交、命令历史、cwd、终端 tab、上次打开文件、Claude REPL 对话。**刷新不丢**。

## 禁止项

- ❌ Activity Bar 图标点了不切换面板（最常见坑）
- ❌ 文件树点文件没反应（必须真打开 tab）
- ❌ Monaco 是 `readOnly: true`（必须真能编辑）
- ❌ 顶部菜单项点了无响应（下拉能开但 item 全死）
- ❌ 终端 prompt 漂到状态栏下方（layout 错位）
- ❌ 终端 Enter 不执行命令
- ❌ 30 个 extension 卡片全是装饰，0 个真功能
- ❌ 状态栏底部任何 item 不可点
- ❌ 底部 4 个面板只有 TERMINAL 活、其他 3 个空白
- ❌ 偏离 VS Code 视觉系统（emoji 装饰 / Material 卡片 / 渐变 hero）

## 设计语言

完全对标 vscode.dev：Activity Bar 图标 + 蓝点提示 + 标题栏 + 状态栏蓝色 + Monaco Dark+。Codicon 图标集；字体 Segoe WPC / Cascadia Code（macOS 用 SF / Menlo）。

## 单 URL 部署

```
/
├── index.html              ← 编辑器主入口
├── /editor/                Monaco core + 主题
├── /sidebar/               5 大视图
├── /terminal/              shell 沙盒 + claude REPL
├── /extensions/            30 个 extension
├── /ai-agent/              AI 助手 panel
└── /workspace/             demo 仓库 + IndexedDB
```

## 验收（6 条全过）

1. **Activity Bar**：依次点 Search/SCM/Run/Extensions → 4 个面板**内容明显不同**且都可见
2. **文件树**：随机点 5 个文件 → 5 个新 tab 全开，× 能关
3. **编辑器**：随便选文件输入 `// hello` → 字符真出现 + tab 出 ● + Cmd+S 后 ● 消失
4. **终端**：跑 `help` / `ls` / `cd src` / `pwd` / `cat App.tsx` / `git status` / `clear` → 7 条都有合理输出，prompt 不漂位
5. **菜单**：File → New File 真开 untitled-1；View → Command Palette 真弹搜索面板
6. **`claude` 命令**：终端输 `claude` 进入 REPL，输 "fix the bug in App.tsx" → 流式回复 + 至少 1 个 `● Read(...)` 或 `● Edit(...)` 工具调用行；`/exit` 回 bash