见素起名：前端重构与适配详细开发手册

  本手册涵盖 阶段 2：极简输入页 (home) 与 阶段 3：卡片展示页 (index) 的核心实现步骤。

  🛠 开 发前置准备
   1. 字体加载：确保在 app.wxss 中已通过 @font-face 引入 思源宋体 (Noto Serif SC)，这是「见素」极简审美的基石。     
   2. 全局变量：在 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 增强后的参数一致。

  ---

  ✅ 验收与调试清单
   1. 模式切换：从“宝宝”切到“人设”模式时，姓氏输入框是否自动消失？
   2. 水墨反馈：点击“求名”后，黑色水墨是否能平滑覆盖屏幕并进入加载态？
   3. 数据流转：从 home 输入的姓氏和关键词，是否在 index 顶部的状态栏正确显示？
   4. 审美校准：卡片背面的文字行高是否足够舒展？是否呈现出“见素”要求的文人气息？

  ---