# 图片放置指南

## 1. 获取截图

您可以使用以下方法获取VibeVault音乐平台的界面截图：

### 方法一：使用浏览器截图功能
1. 打开http://localhost:3000/（确保前端开发服务器已启动）
2. 访问您需要截图的页面（首页、歌单详情、歌曲播放等）
3. 按键盘快捷键：
   - Windows：`Win + Shift + S`（可选择区域截图）
   - macOS：`Command + Shift + 4`（可选择区域截图）
4. 选择需要截图的区域

### 方法二：使用浏览器开发者工具
1. 打开浏览器开发者工具（F12或右键选择"检查"）
2. 切换到"设备工具栏"（通常是一个手机/平板图标）
3. 选择合适的设备尺寸进行响应式设计查看
4. 点击截图按钮（通常是一个相机图标）

## 2. 保存截图到images目录

1. 将截取的图片保存到以下位置：`c:\Users\23175\2311061106\images\`
2. 确保文件名与FRONTEND.md中引用的一致：
   - 首页：`homepage.png`
   - 歌单详情：`playlist-detail.png`
   - 歌曲播放：`song-playing.png`
   - 用户中心：`user-center.png`
   - 搜索界面：`search.png`

## 3. 验证图片显示

1. 保存图片后，打开FRONTEND.md文件
2. 使用Markdown预览功能查看图片是否正确显示
   - 如果使用VS Code，可以点击右上角的"预览"按钮
   - 或者使用其他Markdown查看器打开文件

## 4. 图片要求

- 图片格式：推荐使用PNG格式，保证清晰度
- 图片尺寸：建议宽度不超过1200px，高度自适应
- 图片质量：确保图片清晰，能清楚展示界面元素

## 5. 示例

如果您已经成功保存了首页截图，FRONTEND.md中的以下代码会显示图片：

```markdown
![首页界面](images/homepage.png)
这是VibeVault音乐平台的首页界面，采用现代化的卡片式布局...
```

## 注意事项

- 请确保图片文件名与FRONTEND.md中的引用完全一致（包括大小写）
- 图片文件必须直接放在images目录下，不要创建子目录
- 如果需要添加新的图片，请先在FRONTEND.md中添加引用，然后再保存图片文件