网站设计
多模块全栈架构
原本挤在一个 index.html 里的页面，已重构为 Next.js 多模块工程：展示、接口、数据、组件各司其职。后端用 SQLite 存储引导练习，前端可流畅播放并记录进度。
前端展示层 app/
基于 Next.js App Router 的页面与路由：首页、引导练习列表、练习详情、网站设计说明页，天然支持 SSR 与服务端取数。
app/page.jsx
app/videos/page.jsx
app/videos/[id]/page.jsx
app/studio/page.jsx后端接口层 app/api/
以 Next.js Route Handlers 充当后端，对外提供引导练习的查询、新增与删除接口，前后端同仓、同语言。
app/api/videos/route.js (GET 列表 / POST 新增)
app/api/videos/[id]/route.js (GET 单条 / DELETE 删除)数据访问层 lib/
使用 Node 内置的 node:sqlite 作为数据库，无需额外原生编译。封装建表、列表、详情、新增、删除等数据操作。
lib/db.js (连接 + 建表 + 轻量迁移)
lib/videos.js (查询助手)交互与音频引擎 lib/ + components/
呼吸节拍器、环境音合成、练习记录、语录库、图库数据各自独立成模块；环境音全部由 Web Audio 实时合成，不加载音频文件。
lib/patterns.js 呼吸节奏定义
lib/audio.js Web Audio 环境音合成
lib/stats.js 练习记录(localStorage)
lib/quotes.js 每日一句
lib/photos.js 自然意境图库当前数据库里共有 5 条引导练习。 下面的面板会真的调用后端接口，可以直接看到返回结果。
接口调试面板
下面三个按钮会真的去请求本项目的后端接口，并把返回结果显示出来。新增的记录可以一键删掉，不会留垃圾数据。
还没有请求记录，点上面任意一个按钮试试。