VS Code Web 浏览器复刻
在浏览器里复刻一个能真用的 VS Code:Monaco 编辑器可输入，左侧五大视图点了真切换，终端跑得动命令，可交互率要求八成以上。
正在加载预览…
65091 views
在浏览器里复刻一个能真用的 VS Code:Monaco 编辑器可输入，左侧五大视图点了真切换，终端跑得动命令，可交互率要求八成以上。
单 URL 部署的 VS Code Web 复刻，以可交互率八成为硬指标：Monaco 编辑器真能输入和多 tab，左侧五大视图点击真切换，终端跑得动十几条命令，状态栏每个条目都可点。
试用 Agent 集群# 浏览器复刻 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 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 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 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