2c47fb8f65
- 添加收藏锦囊功能，支持查看和删除收藏 - 实现积分系统，每日赠送5次灵感次数 - 添加静心阅读功能，阅读15秒可获得额外次数 - 实现灵感广场，展示用户分享的名字 - 添加字源溯源组件，长按汉字查看详情 - 优化空状态和结语卡片样式统一 - 添加音频控制（静音/风铃/雨落/古琴/白噪音/森林/溪流） - 优化名字生成逻辑，确保每次返回5个不重复名字 - 修复卡片翻转样式问题 - 移除首页动态提醒气泡
103 lines
4.3 KiB
Markdown
103 lines
4.3 KiB
Markdown
阶段 5 开发实施方案：五感交互与内容生态 (step6_dev.md)
|
||
|
||
🛠 准 备工作
|
||
1. 资源包准备：
|
||
* 搜集 3-5 段 30s 左右的无缝循环白噪音（MP3/M4A 格式，建议采样率 44.1kHz，单声道以减小体积）。
|
||
* 准备 2 个极简音效：水滴声（入墨）、纸张摩擦声（翻转）。
|
||
2. 后端扩展：
|
||
* 在 NameCard 模型中增加 public_shared 字段。
|
||
* 准备一个新的 SquareController 用于处理广场流数据。
|
||
|
||
---
|
||
|
||
第一部分：五感体验优化 (Sensory)
|
||
|
||
1.1 环境白噪音管理 (Soundscape)
|
||
* 实现方式：在 app.js 或全局自定义组件中封装 AudioContextManager。
|
||
* 代码要点：
|
||
|
||
1 // utils/audio.js
|
||
2 const bgm = wx.getBackgroundAudioManager(); // 或 createInnerAudioContext
|
||
3 export const playAmbience = (type) => {
|
||
4 bgm.title = '见素-环境音';
|
||
5 bgm.src = `https://your-cdn.com/audio/${type}.mp3`;
|
||
6 bgm.loop = true;
|
||
7 };
|
||
* UI 交互：在卡片详情页右上角增加一个极其隐蔽的“音符”图标，点击弹出切换菜单（静音/风铃/雨落/古琴）。
|
||
|
||
1.2 触感与音效反馈 (Haptics)
|
||
* 触感反馈：在 AI 生成状态变更时调用 wx.vibrateShort({ type: 'light' })。
|
||
* 呼吸震动：模仿冥想 App，在名字逐字显现时，配合 setInterval 产生极微弱的节奏震动。
|
||
|
||
---
|
||
|
||
第二部分：智能解析增强 (AI Deep Dive)
|
||
|
||
2.1 字源溯源组件
|
||
* 功能：长按卡片上的某个汉字，触发弹窗。
|
||
* 数据来源：
|
||
* 方案 A (静态)：内置常用起名汉字库（约 3000 字）的解析。
|
||
* 方案 B (动态)：调用后端接口，利用 AI 实时生成该字的“意象分析”。
|
||
* UI 设计：弹窗采用透明磨砂玻璃效果，背景展示该字的篆书或隶书位图（可从开源书法库爬取）。
|
||
|
||
2.2 AI 对话解析
|
||
* 前端逻辑：在卡片底部增加“问问 AI”按钮。
|
||
* 后端逻辑：
|
||
|
||
1 // NamingController.java 扩展
|
||
2 @PostMapping("/explain")
|
||
3 public String explainDetail(@RequestBody ExplainRequest req) {
|
||
4 // Prompt: "作为起名专家，请深度解析名字'墨染'对于'从事艺术行业'的职场暗示..."
|
||
5 return kimiService.ask(req.getPrompt());
|
||
6 }
|
||
|
||
---
|
||
|
||
第三部分：灵感广场 (Social Square)
|
||
|
||
3.1 匿名分享流
|
||
* 数据库设计：创建 SquarePost 表，存储 name_card_id, image_url, tags, like_count。
|
||
* 前端展示：使用小程序瀑布流组件（Masonry Layout），展示用户生成的精美海报缩略图。
|
||
* 交互：点击海报进入详情，由于是“见素”风格，评论功能建议弱化，仅保留“共鸣”（点赞）。
|
||
|
||
3.2 “同款”跳转逻辑
|
||
* 核心逻辑：点击“同款意境” -> 携带 keyword 和 mode 参数跳转回 home 页面。
|
||
|
||
1 // square.js
|
||
2 copyInspiration(e) {
|
||
3 const { keyword, mode } = e.currentTarget.dataset;
|
||
4 wx.reLaunch({
|
||
5 url: `/pages/home/home?keyword=${keyword}&mode=${mode}`
|
||
6 });
|
||
7 }
|
||
|
||
---
|
||
|
||
第四部分：技术预研与优化
|
||
|
||
4.1 积分/激励系统
|
||
* 逻辑：
|
||
* 每日赠送 5 次“灵感”。
|
||
* 消耗完后，引导用户点击“静心阅读”（观看 15 秒极简视频或精美画报）增加次数。
|
||
* 注意：UI 必须极其克制，不能有任何弹窗干扰，建议放在“个人中心”的角落。
|
||
|
||
4.2 高级模型接入 (Premium Path)
|
||
* 策略模式：在后端 KimiService 中根据用户等级（或请求类型）切换 Model ID。
|
||
* 普通：moonshot-v1-8k
|
||
* 大师：moonshot-v1-32k 或 gemini-1.5-pro (更强的逻辑推理)。
|
||
|
||
---
|
||
|
||
📅 任务排期 (WBS)
|
||
|
||
1. Day 1-2: 音频/触感系统重构。解决音频在页面切换时的平滑过渡问题。
|
||
2. Day 3-4: 广场后端 API 开发及小程序瀑布流页面实现。
|
||
3. Day 5: 字源数据库集成与 AI 对话解析 Prompt 调优。
|
||
4. Day 6: 性能专项优化（音频资源 CDN 加速、广场图懒加载）。
|
||
5. Day 7: 整体回归测试与上线准备。
|
||
|
||
---
|
||
|
||
💡 开发提示：
|
||
对于“见素”这样追求极致体验的产品，音效的淡入淡出 (Fade In/Out)
|
||
至关重要。请务必在切换音频时手动实现音量平滑曲线，避免突兀。 |