# VibeVault 期末大作业报告：前端界面与交互设计

> 本报告专门用于说明你实现的前端界面与交互设计，建议 800–1500 字。请与 `REPORT.md` 一起提交。

## 1. 整体概览与使用流程

- 简要说明你的前端技术栈（例如：Vite + React + 某 UI 库等），以及项目目录的基本结构。
- 描述一个典型用户从打开页面到完成核心任务的完整流程，例如：
  - 登录 → 查看歌单列表 → 新建歌单 → 向歌单添加歌曲 → 删除歌曲/歌单。
- 用 2–3 句话概括你的前端设计目标（例如：强调简单易用、突出关键操作、减少页面跳转等）。

## 2. 关键界面截图与说明

请通过 Markdown 语法在本节插入若干张截图（建议 3–6 张），每张截图下方都要有对应说明。示例：

```markdown
![播放列表总览页面](images/playlists-overview.png)
```

建议覆盖以下场景（可按实际实现情况调整）：

1. **播放列表总览页面**
   - 标明页面上最重要的区域（例如：导航栏、歌单列表、主要操作按钮）。
   - 说明用户在该界面可以完成哪些操作，这些操作对应了哪些后端 API（如 `GET /api/playlists`、`POST /api/playlists`）。

2. **创建/编辑歌单页面或对话框**
   - 说明表单字段设计（必填项、可选项）以及你如何做输入校验和错误提示。

3. **歌曲列表/详情页面**
   - 如有实现，说明歌曲列表如何展示、如何添加/删除歌曲。

4. **加载中 / 错误 / 空状态界面**
   - 至少展示一种状态；说明你是如何在 UI 层面向用户反馈"正在加载""出现错误""暂无数据"等信息。

> 要求：每张截图下方必须有简短文字说明，让不运行代码的读者也能理解界面意图与交互流程。

## 3. 组件划分与状态管理

- 描述你是如何划分前端组件层次的：
  - 哪些是页面级组件？哪些是可复用的通用组件（如按钮、卡片、列表项）？
  - 有无"容器组件 + 展示组件"的区分？
- 说明状态（state）主要存放在哪里、如何流动：
  - 是否使用 React 内部 state、Context、Redux 或其他状态管理方案？
  - 如何避免不必要的重新渲染（如使用 `memo`、拆分组件等）？
- 如果你有自定义的 hook 或 API 客户端封装，请简单介绍其职责与好处。

## 4. 与后端的对接与解耦

- 说明你是如何在前端代码中调用后端 API 的：
  - 是否集中封装在某个 `api.ts`/`client.ts` 文件？
  - 错误时如何处理（toast 提示、页面错误组件、控制台日志等）？
- 解释你的环境配置方案：
  - 如使用 `.env` 或 Vite 的环境变量，将后端地址抽离为配置，而不是硬编码在组件内。
- 如有 CORS 或认证（如携带 JWT）的处理，请在此简要说明请求头、拦截器等设计。

## 5. 交互细节与用户体验

- 列举 2–3 个你刻意设计的交互细节，例如：
  - 提交表单前按钮禁用 / loading 状态切换；
  - 删除操作前的确认对话框；
  - 成功/失败后的反馈提示（toast/snackbar/banner 等）。
- 说明你在这些设计中考虑的用户体验因素（如误操作防护、反馈及时性、信息层级清晰度等）。

## 6. 自我评价与改进思路

- 回顾你的前端实现，简要评价：
  - 哪些部分你认为完成得比较满意？（例如结构清晰、交互自然等）
  - 哪些部分你觉得可以做得更好？（例如视觉设计、响应式布局、性能优化等）
- 如果有更多时间，你会优先在哪些方面改进这个前端界面？为什么？