be1f5722ab
- 实现 AI 起名功能（Kimi API 接入） - 添加用户收藏功能（MySQL 数据库） - 实现海报生成与分享 - 添加音效和触觉反馈 - 配置生产环境部署（WAR 包 + Nginx） - 支持多种起名模式（经典、诗词、自然、现代） - 实现分批加载优化体验
3.7 KiB
3.7 KiB
见素起名：前端重构与适配详细开发手册
本手册涵盖 阶段 2：极简输入页 (home) 与 阶段 3：卡片展示页 (index) 的核心实现步骤。
🛠 开 发前置准备
- 字体加载：确保在 app.wxss 中已通过 @font-face 引入 思源宋体 (Noto Serif SC)，这是「见素」极简审美的基石。
- 全局变量：在 app.wxss 中定义好颜色变量：
1 :root { 2 --jiansu-text: #1a1a1a; /* 墨色 / 3 --jiansu-accent: #888888; / 远山灰 / 4 --jiansu-bg: #ffffff; / 宣纸白 */ 5 }
阶段 2：前端极简输入页 (home) 重构
第一步：构建多模式选择器 (Structure) 在 pages/home/home.wxml 中实现。
- 创建模式容器 .mode-selector。
- 使用 wx:for 渲染模式标签（宝宝、人设、拾遗）。
- 底部设置微小动效点 .dot，仅在 active 状态下展示。
第二步：智能输入组逻辑 (Interaction)
- 实现姓氏输入框 .surname-input 的显隐逻辑：仅在 activeMode === 'baby' 时展示。
- 实现关键词输入框 .keyword-input，其 placeholder 需随模式动态变化。
- 绑定输入事件 bindinput，实时同步数据到 Page.data。
第三步：水墨仪式感动效 (Animation) 在 pages/home/home.wxss 中实现。
- 设计按钮 .generate-btn：全黑背景、无圆角、加宽字间距。
- 创建全屏遮罩 .ink-overlay。
- 核心 CSS 动画：编写 @keyframes inkSpread。
- 使用 clip-path: circle(0% at 50% 50%) 模拟墨滴中心。
- 50% 时扩散至全屏，背景保持黑色。
- 100% 时切回白色，配合页面平滑跳转。
第四步：跳转与数据组装 (Logic) 在 pages/home/home.js 中实现。
- 完善 startGenerate 函数：添加 keyword 非空校验。
- 设置 isGenerating: true 触发水墨动画。
- 使用 setTimeout 延迟 1000ms 执行 wx.navigateTo，确保仪式感完整。
- 对 URL 参数进行 encodeURIComponent 转码。
阶段 3：前端卡片页 (index) 适配
第五步：顶部状态信息流 (Header) 在 pages/index/index.wxml 中实现。
- 增加 .header-info 区域。
- 动态显示“品牌名 · 模式 · 关键词”三个标签，中间用中点间隔。
第六步：卡片排版“散文诗”化 (Visual) 在 pages/index/index.wxss 中实现。
- 行间距调整：设置 .description 的 line-height: 1.8。
- 对齐方式：使用 text-align: justify 提升阅读质感。
- 换行处理：设置 white-space: pre-wrap，确保后端返回的诗句分行正确。
第七步：悬浮操作栏重构 (Action Bar)
- 实现底部固定悬浮栏 .action-bar。
- 设计圆形按钮 .circle-btn：利用 box-shadow 制造轻微的悬浮感。
- 增加 active 缩放态，提供点击物理反馈。
- 使用简单的 CSS 线条绘制“返回”图标。
第八步：多模式接口对接 (Network) 在 pages/index/index.js 中实现。
- 在 onLoad 中通过 options 接收 mode、keyword 和 surname。
- 建立 modeMap 将模式 ID 映射为中文展示名称。
- 修改 fetchNames 请求参数，确保与后端 API 增强后的参数一致。
✅ 验收与调试清单
- 模式切换：从“宝宝”切到“人设”模式时，姓氏输入框是否自动消失？
- 水墨反馈：点击“求名”后，黑色水墨是否能平滑覆盖屏幕并进入加载态？
- 数据流转：从 home 输入的姓氏和关键词，是否在 index 顶部的状态栏正确显示？
- 审美校准：卡片背面的文字行高是否足够舒展？是否呈现出“见素”要求的文人气息？