diff --git a/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image1.png b/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image1.png new file mode 100644 index 0000000..d89d5d0 Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image1.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image10.png b/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image10.png new file mode 100644 index 0000000..a36a2ef Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image10.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image11.png b/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image11.png new file mode 100644 index 0000000..2c82c80 Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image11.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image2.png b/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image2.png new file mode 100644 index 0000000..e7e4b10 Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image2.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image3.png b/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image3.png new file mode 100644 index 0000000..e9d372c Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image3.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image4.png b/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image4.png new file mode 100644 index 0000000..586d396 Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image4.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image5.png b/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image5.png new file mode 100644 index 0000000..f6e423d Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image5.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image6.png b/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image6.png new file mode 100644 index 0000000..1b5c0e9 Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image6.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image7.png b/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image7.png new file mode 100644 index 0000000..38b96f5 Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image7.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image8.png b/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image8.png new file mode 100644 index 0000000..bb14de3 Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image8.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image9.png b/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image9.png new file mode 100644 index 0000000..86249a7 Binary files /dev/null and b/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/images/image9.png differ diff --git a/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/index.md b/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/index.md index bfb2006..9655cab 100644 --- a/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/index.md +++ b/docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/index.md @@ -26,6 +26,7 @@ VS Code 插件可以做的事情远比你想象的多： * **接入 AI 能力**：通过 Chat Participant API 创建 AI 对话助手，通过 Language Model API 调用大模型 +![VS Code 插件生态示意图，展示插件可以扩展的各个区域：侧边栏、编辑器、状态栏、命令面板、Chat 面板](images/image1.png) ## 1.2 VS Code 插件的核心架构 @@ -53,6 +54,7 @@ VS Code 编辑器 ``` +![VS Code 插件架构图，展示 Extension Host 进程与编辑器主进程的关系](images/image2.png) ## 1.3 我们要做什么插件？ @@ -67,6 +69,7 @@ VS Code 编辑器 | 快捷键 | 自定义快捷键快速触发常用操作 | +![AI Project Bot 插件效果预览图，展示侧边栏模板列表、Chat 面板中的 @project-bot 对话、右键菜单](images/image3.png) ## 1.4 本教程的路线图 @@ -145,6 +148,7 @@ ai-project-bot/ | `contributes` | 插件贡献的所有功能（命令、菜单、快捷键、视图等） | +![package.json 文件在编辑器中的截图，高亮 contributes 字段](images/image4.png) ## 2.3 理解 extension.ts——插件的"大脑" @@ -185,6 +189,7 @@ export function deactivate() {} 在新窗口中按 **Ctrl+Shift+P**，输入 "Hello World"，你会看到右下角弹出一条消息。这说明你的插件已经在运行了。 +![VS Code 调试插件的截图，展示 Extension Development Host 窗口和 Hello World 消息](images/image5.png) > **调试技巧**：修改代码后，在 Extension Development Host 窗口中按 **Ctrl+Shift+P** → **"Developer: Reload Window"** 即可重新加载插件，不需要重启调试。 @@ -268,6 +273,7 @@ export function deactivate() {} 3. 在视图标题栏添加了一个 "+" 按钮用于创建项目 +![VS Code 侧边栏中显示 AI Project Bot 图标和项目模板列表的截图](images/image6.png) ## 3.3 实现 TreeDataProvider @@ -394,6 +400,7 @@ export function activate(context: vscode.ExtensionContext) { 现在按 F5 调试，你会在左侧活动栏看到 AI Project Bot 图标，点击后展开模板列表，点击任意模板即可创建项目。 +![点击模板后弹出项目名称输入框和文件夹选择对话框的截图](images/image7.png) # 第 4 章：实现 AI Chat 参与者（5 分钟） @@ -531,6 +538,7 @@ export function activate(context: vscode.ExtensionContext) { 现在在 Chat 面板中输入 `@project-bot /explain 这段代码是做什么的？`，你的插件就会调用大模型生成解释。 +![VS Code Chat 面板中 @project-bot 对话的截图，展示 /explain 命令的使用和流式回复](images/image8.png) # 第 5 章：文件/段落 Chat 与多文件问答（5 分钟） @@ -632,6 +640,7 @@ export function registerSelectionCommands(context: vscode.ExtensionContext) { ``` +![VS Code Chat 面板中 @project-bot 对话的截图，展示 /explain 命令的使用和流式回复](images/image9.png) ## 5.3 多文件问答：批量分析文件关系 @@ -731,6 +740,7 @@ export function registerMultiFileCommands(context: vscode.ExtensionContext) { 使用方式：在资源管理器中按住 Ctrl（Mac 上是 Cmd）多选文件，右键选择 "AI: 分析选中文件的关系"，AI 就会读取所有文件内容并给出分析报告。 +![资源管理器中多选文件后右键菜单显示 AI 分析选项的截图](images/image10.png) # 第 6 章：快捷键与 UX 优化（3 分钟） @@ -801,6 +811,7 @@ export function createStatusBarItem(context: vscode.ExtensionContext) { `$(hubot)` 是 VS Code 内置的图标语法，你可以在 [Codicon 图标库](https://microsoft.github.io/vscode-codicons/dist/codicon.html) 中找到所有可用图标。 +![VS Code 状态栏中显示 AI Bot 图标的截图](images/image11.png) # 第 7 章：发布到插件市场（可选）