截图补充指南
目的
本页面列出教程中建议补充的所有截图，帮助你完善教程的视觉内容。
如何替换占位图
- 按照下方指南截取对应画面
- 保存到指定路径（覆盖
.svg占位图，或改用.png） - 更新对应 markdown 文件中的图片引用路径
截图清单
1. Zed 首次启动界面
| 项目 | 说明 |
|---|---|
| 截图名称 | zed-first-launch |
| 对应章节 | 安装与首次启动 |
| 截图内容 | Zed 首次启动后的欢迎界面 |
| 操作步骤 | 1. 首次安装后启动 Zed 2. 截取完整窗口 |
| 推荐尺寸 | 1200x800 |
| 保存路径 | docs/public/images/screenshots/zed-first-launch.png |
| 是否必须 | 否 |
| 替代方案 | 使用现有 SVG 占位图 |
2. Zed 主界面
| 项目 | 说明 |
|---|---|
| 截图名称 | zed-interface |
| 对应章节 | 认识主界面 |
| 截图内容 | 打开项目后的主界面，显示左侧文件树、中央编辑区、底部终端 |
| 操作步骤 | 1. 打开一个真实项目 2. 打开一个代码文件 3. 打开底部终端 4. 截取完整窗口 |
| 推荐尺寸 | 1400x900 |
| 保存路径 | docs/public/images/screenshots/zed-interface.png |
| 是否必须 | 是（首页和重要章节使用） |
| 替代方案 | 使用现有 SVG 占位图 |
3. 文件树操作
| 项目 | 说明 |
|---|---|
| 截图名称 | zed-project-panel |
| 对应章节 | 文件与项目管理 |
| 截图内容 | 项目面板显示文件树，Git 状态标记 |
| 操作步骤 | 1. 修改几个文件 2. 查看文件树上的 M/A 标记 3. 截取左侧项目面板 |
| 推荐尺寸 | 300x600 |
| 保存路径 | docs/public/images/screenshots/zed-project-panel.png |
| 是否必须 | 否 |
| 替代方案 | 文字描述 |
4. 命令面板
| 项目 | 说明 |
|---|---|
| 截图名称 | zed-command-palette |
| 对应章节 | 认识主界面 |
| 截图内容 | 命令面板打开状态 |
| 操作步骤 | 1. 按 Ctrl+Shift+P 2. 输入 "theme" 3. 截图 |
| 推荐尺寸 | 600x400 |
| 保存路径 | docs/public/images/screenshots/zed-command-palette.png |
| 是否必须 | 否 |
| 替代方案 | 使用代码块展示 |
5. 搜索面板
| 项目 | 说明 |
|---|---|
| 截图名称 | zed-search-panel |
| 对应章节 | 搜索与替换 |
| 截图内容 | 全局搜索结果 |
| 操作步骤 | 1. Ctrl+Shift+F 打开搜索 2. 输入搜索词 3. 截图 |
| 推荐尺寸 | 800x600 |
| 保存路径 | docs/public/images/screenshots/zed-search-panel.png |
| 是否必须 | 否 |
| 替代方案 | 文字描述 |
6. Git 改动面板
| 项目 | 说明 |
|---|---|
| 截图名称 | zed-git-panel |
| 对应章节 | Git 版本控制 |
| 截图内容 | Git 面板显示 modified 文件列表 |
| 操作步骤 | 1. 修改几个文件 2. Ctrl+Shift+G 打开 Git 面板 3. 截图 |
| 推荐尺寸 | 350x600 |
| 保存路径 | docs/public/images/screenshots/zed-git-panel.png |
| 是否必须 | 是 |
| 替代方案 | 使用现有 SVG 占位图 |
7. Diff 对比界面
| 项目 | 说明 |
|---|---|
| 截图名称 | zed-diff-view |
| 对应章节 | Git 版本控制 |
| 截图内容 | 文件的 diff 视图，显示红色删除和绿色新增 |
| 操作步骤 | 1. 在 Git 面板点击 modified 文件 2. 截取 diff 视图 |
| 推荐尺寸 | 900x500 |
| 保存路径 | docs/public/images/screenshots/zed-diff-view.png |
| 是否必须 | 是 |
| 替代方案 | 使用现有 SVG 占位图 |
8. Commit 输入区域
| 项目 | 说明 |
|---|---|
| 截图名称 | zed-commit-input |
| 对应章节 | Git 版本控制 |
| 截图内容 | Git 面板底部的 commit message 输入框 |
| 操作步骤 | 1. Stage 一些文件 2. 截图 commit 输入区域 |
| 推荐尺寸 | 350x150 |
| 保存路径 | docs/public/images/screenshots/zed-commit-input.png |
| 是否必须 | 否 |
| 替代方案 | 文字描述 |
9. 内置终端
| 项目 | 说明 |
|---|---|
| 截图名称 | zed-terminal |
| 对应章节 | 内置终端 |
| 截图内容 | 底部终端运行开发服务器 |
| 操作步骤 | 1. 打开终端 2. 运行 npm run dev 3. 截取终端区域 |
| 推荐尺寸 | 900x250 |
| 保存路径 | docs/public/images/screenshots/zed-terminal.png |
| 是否必须 | 是 |
| 替代方案 | 使用现有 SVG 占位图 |
10. Settings.json
| 项目 | 说明 |
|---|---|
| 截图名称 | zed-settings |
| 对应章节 | 设置详解 |
| 截图内容 | settings.json 编辑界面 |
| 操作步骤 | 1. Ctrl+Shift+P → open settings 2. 截图 |
| 推荐尺寸 | 800x500 |
| 保存路径 | docs/public/images/screenshots/zed-settings.png |
| 是否必须 | 否 |
| 替代方案 | 使用代码块展示 |
11. 快捷键设置
| 项目 | 说明 |
|---|---|
| 截图名称 | zed-keymap |
| 对应章节 | 快捷键管理 |
| 截图内容 | keymap.json 编辑界面 |
| 操作步骤 | 1. Ctrl+Shift+P → open keymap 2. 截图 |
| 推荐尺寸 | 800x500 |
| 保存路径 | docs/public/images/screenshots/zed-keymap.png |
| 是否必须 | 否 |
| 替代方案 | 使用代码块展示 |
12. 扩展市场
| 项目 | 说明 |
|---|---|
| 截图名称 | zed-extensions |
| 对应章节 | 扩展插件 |
| 截图内容 | 扩展市场界面 |
| 操作步骤 | 1. Ctrl+Shift+P → extensions 2. 截图 |
| 推荐尺寸 | 900x600 |
| 保存路径 | docs/public/images/screenshots/zed-extensions.png |
| 是否必须 | 否 |
| 替代方案 | 文字描述 |
13. AI 面板
| 项目 | 说明 |
|---|---|
| 截图名称 | zed-ai-panel |
| 对应章节 | AI 辅助开发 |
| 截图内容 | Agent 面板对话界面 |
| 操作步骤 | 1. 打开 Agent 面板 2. 进行一次对话 3. 截图 |
| 推荐尺寸 | 400x600 |
| 保存路径 | docs/public/images/screenshots/zed-ai-panel.png |
| 是否必须 | 是 |
| 替代方案 | 使用现有 SVG 占位图 |
14. LSP 诊断提示
| 项目 | 说明 |
|---|---|
| 截图名称 | zed-diagnostics |
| 对应章节 | 代码编辑、LSP |
| 截图内容 | 代码中的错误/警告下划线和浮窗 |
| 操作步骤 | 1. 故意写一个类型错误 2. 鼠标悬停查看浮窗 3. 截图 |
| 推荐尺寸 | 600x300 |
| 保存路径 | docs/public/images/screenshots/zed-diagnostics.png |
| 是否必须 | 否 |
| 替代方案 | 文字描述 |
15. 前端项目运行示例
| 项目 | 说明 |
|---|---|
| 截图名称 | zed-frontend-demo |
| 对应章节 | 前端项目工作流 |
| 截图内容 | Zed 编辑前端代码 + 终端运行 dev server |
| 操作步骤 | 1. 打开 React/Vue 项目 2. 编辑代码 3. 终端运行 dev 4. 截图 |
| 推荐尺寸 | 1200x800 |
| 保存路径 | docs/public/images/screenshots/zed-frontend-demo.png |
| 是否必须 | 否 |
| 替代方案 | 分别截图编辑器和终端 |
16. Windows 常见错误示例
| 项目 | 说明 |
|---|---|
| 截图名称 | zed-windows-error |
| 对应章节 | 常见问题与排错 |
| 截图内容 | 常见的 Windows 错误提示 |
| 操作步骤 | 如遇到错误，截图保存 |
| 推荐尺寸 | 600x400 |
| 保存路径 | docs/public/images/screenshots/zed-windows-error.png |
| 是否必须 | 否 |
| 替代方案 | 文字描述 |
截图操作步骤总结
使用 Windows 截图工具
- 按
Win+Shift+S打开截图工具 - 选择「窗口截图」或「矩形截图」
- 选择 Zed 窗口或区域
- 保存到剪贴板或文件
推荐图片规格
| 属性 | 建议 |
|---|---|
| 格式 | PNG（推荐）或 JPG |
| 宽度 | 800-1400px |
| DPI | 96（屏幕标准） |
| 命名 | zed-<功能>-<状态>.png |
| 大小 | 尽量控制在 500KB 以内 |
图片替换方式
- 将截图保存到
docs/public/images/screenshots/目录 - 在对应的 markdown 文件中，将图片路径从
.svg改为.png
例如：
markdown
<!-- 修改前 -->
<!-- 修改后 -->
图片目录说明文件
已创建 docs/public/images/README.md：
markdown
# 图片目录
## screenshots/
存放 Zed 界面截图。当前使用 SVG 占位图，建议替换为真实截图。
替换步骤：
1. 按截图指南截取对应画面
2. 保存为 PNG 格式到本目录
3. 更新对应文档中的图片路径
## diagrams/
存放 Mermaid 图表导出的 SVG 文件（如需要）。
## 图片规格
- 格式：PNG 优先
- 宽度：800-1400px
- 命名：kebab-case，如 `zed-git-panel.png`