# Lull app

**Repository Path**: renqi-su/lull-app

## Basic Information

- **Project Name**: Lull app
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-09
- **Last Updated**: 2026-08-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Lull · 移动端 App 高保真原型

Lull「AI 沉浸式助眠助手」的 **移动端可点击原型**（iPhone 15 Pro · 393×852pt @3x）。
与网页端完全独立：本目录 `phone/` 只含移动端高保真原型，**不影响** `lull-demo.html` 等网页端资料。

## 如何查看

```bash
start D:\workspace\sleep\phone\index.html   # Windows 直接打开
# 或复用项目 live-server（已在 3000 端口）：
#   http://localhost:3000/phone/index.html
```

桌面浏览器中会以 **居中手机画布** 显示（393px 宽）；在手机上全屏即为 App 形态。
点击 ▶ 播放**真实音频**：预置合成音与真实录音播放 `../music/` 下的 mp3，双耳节拍（α/θ/δ）与白噪音（粉红/布朗/风扇）用 Web Audio 实时合成。

## 交付内容

| 文件 | 说明 |
|------|------|
| `index.html` | 应用外壳 + 全部页面骨架（约 24 屏） |
| `style.css` | 移动端设计系统（主题变量 / 组件库 / 毛玻璃 / 触摸反馈） |
| `app.js` | 路由 + 数据 + 渲染 + 交互逻辑 |
| `README.md` | 本说明 |

## 页面清单（25 屏）

**底部 Tab（3 个 · 精简后）**：首页 / 数据 ★ / 我的
- **右上角 ☰ 汉堡抽屉**：听觉助眠 / 视觉助眠 / 睡眠图鉴（二级入口，从顶部下滑毛玻璃抽屉）
- 一级页右上角均常驻 ☰；抽屉内进入的二级页返回后落回原底部 Tab

**首页 `sc-home`**
- 三段式：问候+日期 → 今日助眠推荐（深夜档推荐卡）→ 快捷入口（视觉 / 枕头钟）
- 最近播放、我的收藏

**数据 `sc-data`**（新建一级页 ★ 睡眠检测数据）
- 顶部统计卡（总时长 / 入睡时长 / 深睡占比）
- 近 7 天睡眠时长柱状图（设备=实心渐变柱，手动=暖橙斜纹柱，图例区分）
- 本周睡眠质量热力图（lv1–lv4 深浅）
- 设备互联中心 / 数据手动录入入口（原「图鉴」内图表整体迁入）

**听觉助眠 `sc-audio`**（抽屉二级页）→ 子页：
- `sc-audio` 主卡：今夜声音日记（常驻当前播放卡下方）——停播/切歌自动弹出「听感反馈」轻量 Sheet（心情 😌😴😰🥱🤩 + 入睡自评 🌙1-5 + 一句感受），保存后写 `localStorage(lull_diary_v1)`，每夜首次保存 🛏️ +1 枕头，卡内显示连续记录天数与当晚迷你时间轴（α/θ/δ 色点）
- `sc-audio` 场景声景专辑流：横向卡片流（8 张预置 + 我的专辑），封面纯 CSS 渐变 + emoji；点 ▶ 一键多轨播放（复用 S.mixer ≤5 轨，迷你播放器显示专辑名），点卡进 `sc-aval` 详情页（整张播放/单曲试听/收藏/分享）；AI 混音结果可「存为我的专辑」，收藏落在收藏页「我的声景」
- `sc-workshop` 音效工坊：预置音效库（与网页端对齐：22 预置合成音 + 63 条真实录音，6 类筛选，真实录音带「真实」徽标；点 ＋ 加入混音台、再点移出、音轨满只提示不改图标）+ 自定义混音台（4 轨，可选预置/本地上传，循环/音量/进度/整体播放）
- `sc-binaural` 双耳节拍：α / θ / δ 波程序化引导 + AI 智能推荐（按睡眠数据 / 日记最近心情 / 临时 chip，GLM-4-Flash）
- `sc-ritual` 睡前仪式组合：套装保存 / 加载 / 编辑
- `sc-ambient` 环境噪音（粉红/布朗/风扇白噪）& 呼吸同步（4-7-8 / 盒式 / 谐振）
- `sc-prefs` 个性化设置：偏好 / 默认音效 / 默认呼吸法 / 通知

**视觉助眠 `sc-visual`**（抽屉二级页）
- Gooey 流体光影（6 球融化动画）：配色切换（淡雾蓝 / 柔 Baby 蓝 / 奶白）、流速/大小滑块、呼吸同步（4-7-8 节奏直接驱动流体——吸气舒展·呼气收缩，光晕上浮显相位标签）

**睡眠图鉴 `sc-atlas`**（抽屉二级页 · 仅收集向内容）
- 眠兽三栏预览（左选日期 → 中预览 → 右筛选周期）
- `sc-felt` 限定毛毡动物（数据 AI 生成，3D 植绒质感）——**Agnes AI 在线文生图**：像盲盒一样随机抽取眠兽，有睡眠数据时按状态加权偏向（焦虑→安抚夜枭 / 放松→云朵棉花兔 / 记录3晚→记夜蜜梦熊…），失败自动回退手绘 SVG；生成图**点开可查看全屏大图**
- `sc-album` 图鉴收集册（点卡片看当日详情）
- ⚠️ 睡眠数据图表已迁至「数据」页；设备/手动录入入口移至「数据」页下

**我的 `sc-me`** → 子页：
- `sc-pillow` 枕头钟：积分卡（枕头数/进度 ring）+ 缓息计时器（倒/正计时、主/短/长间歇滑块、启动联动助眠/结束关音频）+ 今日任务 + 本周统计（donut + 表）
- `sc-store` 枕头兑换商城（限定图鉴小卡，6 枚起兑）
- `sc-favs` 我的收藏（音效 / 套装）
- `sc-profile` 个人中心（登录/账户）
- `sc-notify` 消息通知
- `sc-help` 帮助客服（使用流程指引）
- `sc-settings` 系统设置（主题切换 · 版本 v0.7.0）

**全局组件**
- 底部 **Mini 播放条**：任意页常驻，显示当前音效 + 播放/暂停 + 停止
- 收藏 ❤️（音效/套装）、主题深/浅切换、toast 反馈、底部抽屉弹层

## 移动端 vs Web 版 差异点

| 维度 | Web 版（lull-demo.html） | 移动端原型（phone/） |
|------|--------------------------|----------------------|
| 导航 | 顶部双行标签 + 左侧栏 | 底部 Tab Bar（3 Tab：首页/数据/我的）+ 右上角 ☰ 抽屉（听觉/视觉/图鉴）+ 子页返回栈 |
| 睡眠数据层级 | 埋在「图鉴」页次级 | 升级为一级「数据」Tab，图表独立成页 |
| 画布 | 响应式网页，多列网格 | 393×852 单栏，安全区（状态栏 + Home 条） |
| 全局播放控制 | 页面内混音面板 | 常驻 Mini 播放条（任意页可控制） |
| 播放触发 | 音效卡按钮 | 同，全部显式触发（点击 ▶/⏸ 才出声） |
| 混音 | 独立"多轨道混音系统"面板（已移除） | 「自定义混音台」承载多通道叠加（4 轨，可预置/本地上传） |
| 数据录入 | 网页表单 | 全屏子页 + 触屏时间选择 |
| 图表 | Chart.js 渲染 | 手写 SVG（柱状/热力图/环形 ring）轻量自绘 |
| 视觉页 | 页面内 Blob | 全屏沉浸 + 呼吸同步光晕 |
| 收藏 | 卡片 ❤️ | 长按/点击 ❤️ + 独立收藏页 |

## 移动端交互约定

- **显式触发**：所有音频仅点击 ▶/⏸ 才播放，避免误播。
- **状态全局可见**：Mini 播放条常驻，方案卡 / 混音台内均有独立控制。
- **个性化**：收藏、套装与最近播放记忆你的偏好。
- **游戏化**：枕头积分（60 分钟 = 1 枚，日上限 5）+ 眠兽收集增强留存。
- 手势占位：左右滑 Tab/分类、下拉刷新、点卡片进详情、长按收藏（原型中以点击替代）。

## 品牌与配色

- 名称：**Lull** · 定位"AI 沉浸式助眠助手"
- 深蓝紫渐变：`#1a1a2e → #16213e`（--bg0 / --bg1）
- 主色柔紫 `#8b7fd6`（--accent）· 雾蓝 `#6ea8d8`（--accent2）
- 强调暖橙 `#e8a87c`（--cta，播放/CTA）· 文字雾白 `#e8e8f0`（--text）· 辅助灰 `#9a9ab0`（--t3）
- 浅色主题经 `data-theme="light"` 一键切换