066eb8f820
Music Creation Page: - Vinyl 3D flip to view lyrics, tonearm animation, glow rotation effect - Circular SVG progress ring, speech bubble feedback, confirm dialog - Playlist modal, free creation input, lyrics formatting optimization - MiniMax API real music generation with SSE streaming progress Backend: - FastAPI proxy server.py for MiniMax API calls - Music + lyrics file persistence to Capybara music/ directory - GET /api/playlist endpoint for auto-building playlist from files UI/UX Refinements: - frontend-design skill compliance across all pages - Glassmorphism effects, modal interactions, scroll tap prevention - iPhone 12 Pro responsive layout (390x844) Flutter Development Preparation: - Installed flutter-expert skill with 6 reference docs - Added 5 Cursor Rules: official Flutter, clean architecture, UI performance, testing, Dart standards Assets: - 9 Capybara music MP3 files + lyrics TXT files - MiniMax API documentation Co-authored-by: Cursor <cursoragent@cursor.com>
80 lines
4.2 KiB
Markdown
80 lines
4.2 KiB
Markdown
# 阶段性工作总结：水豚灵感电台
|
||
|
||
## 1. 项目概况
|
||
本项目核心为 **Airhub 智能家居控制中心** 的子模块 —— **「水豚灵感电台 (Water Capybara Music Workshop)」**。这是一个基于心情生成音乐的互动页面，结合了拟物化设计（黑胶唱片）与 AI 生成概念。
|
||
|
||
## 2. 已完成核心功能
|
||
|
||
### 2.1 视觉与动画
|
||
* **黑胶唱片播放器**：
|
||
* 中心为水豚头像（Capybara Icon）。
|
||
* 实现了播放时的旋转动画 (`animation: spin`)。
|
||
* **优化**：外圈旋转，内圈头像保持静止（分离层设计）。
|
||
* **状态**：暂停/播放状态切换，带有遮罩层显示的播放/暂停图标。
|
||
* **氛围卡片网格**：
|
||
* 最初设计为 4 张卡片，后扩展为 **6 张卡片布局**。
|
||
* 包括：Chill (松弛), Happy (快乐), Sleep (助眠), Focus (心流), Mystery (盲盒), Custom (自由创作)。
|
||
* **交互**：点击卡片即触发高亮并自动开始生成流程。
|
||
* **界面布局优化**：
|
||
* 头部：依照 `device-control.html` 样式重构，左侧返回，右侧唱片架。
|
||
* 适配：针对移动端视口进行了全方位优化，缩小了唱片尺寸，调整了间距，修复了水平溢出问题。
|
||
|
||
### 2.2 交互逻辑重构 (Input to Card)
|
||
为了提升移动端体验，我们废弃了底部的常驻输入栏，改为“全卡片”交互：
|
||
* **自由创作卡片**：新增了第 6 张卡片“自由创作”。
|
||
* **输入弹窗**：点击“自由创作”后，底部升起输入弹窗。
|
||
* **逻辑**：输入文字 -> 确认 -> 触发 `custom` 模式的生成逻辑。
|
||
|
||
### 2.3 弹窗系统进化 (Modal to Bottom Sheet)
|
||
经历了从居中弹窗到底部抽屉的迭代：
|
||
* **样式**：宽度 100%，贴底显示，顶部圆角 (32px)，磨砂玻璃效果。
|
||
* **适配**：增加了底部安全区 (`safe-area-inset-bottom`) 支持。
|
||
* **组件**：
|
||
* **输入弹窗**：用于自由创作。
|
||
* **唱片架弹窗**：用于展示历史生成记录（Playlist）。
|
||
|
||
### 2.4 播放与列表逻辑
|
||
* **模拟生成**：点击卡片后，经过 3 秒 Loading 动画，模拟生成音乐。
|
||
* **播放控制**：支持播放/暂停，进度条拖拽（UI层），时间显示。
|
||
* **播放列表**：生成成功的音乐会自动加入顶部“唱片架”，支持点击列表回放。
|
||
|
||
## 3. 关键技术修复 (Technical Fixes)
|
||
|
||
在此开发过程中，我们解决了一些顽固的 UI/交互问题，这些经验值得记录：
|
||
|
||
### 3.1 弹窗自动弹出 (Auto-Popup) 修复
|
||
* **问题**：页面刷新时，弹窗会自动闪现或保持打开状态。
|
||
* **原因**：单纯依赖 CSS `opacity` 结合 JS `classList` 切换在某些加载时序下不够稳健。
|
||
* **解决方案 (双保险)**：
|
||
1. **HTML 层**：默认设置为 `style="display: none;"`。
|
||
2. **JS 初始化**：`DOMContentLoaded` 事件中强制执行关闭逻辑：
|
||
```javascript
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const modal = document.getElementById('inputModal');
|
||
if (modal) {
|
||
modal.classList.remove('active');
|
||
modal.style.display = 'none';
|
||
}
|
||
});
|
||
```
|
||
3. **动画逻辑**：切换时显式处理 `display: flex` -> `requestAnimationFrame` -> `opacity: 1` 的时序。
|
||
|
||
### 3.2 布局对齐 (Alignment)
|
||
* **问题**：弹窗在宽屏或特定分辨率下未居中，或右侧有留白。
|
||
* **解决方案**：
|
||
* 容器统一使用 `width: 100%`。
|
||
* 外层 Overlay 使用 `justify-content: center`。
|
||
* 内层容器使用 `margin: 0` (底部抽屉模式) 消除干扰。
|
||
* 显式设置 `box-sizing: border-box` 防止 padding 导致的溢出。
|
||
|
||
## 4. 遗留/待办事项 (Next Steps)
|
||
* **API 对接**：目前使用的是模拟数据，需接入真实的 MiniMax Music API。
|
||
* **播放列表持久化**：目前刷新后列表重置，需对接 LocalStorage 或后端数据库。
|
||
* **多端适配**：目前专注于移动端竖屏体验，桌面端暂未专门适配。
|
||
|
||
## 5. 文件清单
|
||
* `music-creation.html`: 核心页面。
|
||
* `styles.css`: 全局样式表。
|
||
* `design_system.md`: 设计规范文档。
|
||
* `task.md`: 任务追踪表。
|