JianSu-Naming/muti-mode-feature.md

「见素」多模式起名功能开发计划

📝 总体目标

实现多模式起名系统，涵盖后端 Prompt 引擎增强、前端极简输入页重构、以及卡片页的交互适配。

---

🏗️ 第一阶段：后端 API 增强 (Prompt 引擎)

1.1 模型层检查 (NameCard.java)

• 目标：确认字段兼容性。
• 状态：无需修改。确保 name, origin, description, score, tone 字段能承载 AI 返回的结构化数据。

1.2 逻辑层增强 (MiniMaxService.java)

• 动作：
  1. 方法重载：修改 generateNames 签名，新增 mode 和 surname 参数。
  2. 模板管理：维护 Map<String, String> promptTemplates，预置 baby (宝宝), persona (人设), classic (拾遗) 的 Prompt。
  3. 动态构建：根据 mode 选取模板，注入 keyword 和 surname 生成最终 Prompt。
  4. 后门保留：维持 test 关键字逻辑，便于快速联调前端 UI。

1.3 接口层更新 (NamingController.java)

• 动作：更新 @GetMapping 接口，通过 @RequestParam 接收 mode 与 surname（均为 required = false），并透传至 Service 层。

---

🎨 第二阶段：前端重设计 - 输入页 (home)

2.1 结构重构 (home.wxml)

• 新增模式选择：<view class="mode-selector">，通过 wx:for 渲染模式标签。
• 动画容器：预留 loading-ink 容器，用于存放“墨水晕开”动画。
• 表单保持：保留 keyword 输入框与 generate-btn。

2.2 视觉优化 (home.wxss)

• 极简风格：
  • .mode-item：默认灰色，选中态 (.active) 加黑并显示下划点。
  • .generate-btn：极致方正，无圆角，高字间距。
• 动效实现：定义 @keyframes ink-spread，模拟水墨滴入的径向扩张效果。

2.3 交互逻辑 (home.js)

• 状态管理：定义 activeMode (默认 baby)，isGenerating (控制动画)。
• 路由跳转：startGenerate 组装 URL 参数，携带 mode 跳转至 index 页面。

---

🃏 第三阶段：前端适配 - 卡片页 (index)

3.1 界面调整 (index.wxml)

• 顶部标题：显示 见素 · {{modeName}} · {{keyword}}。
• 操作栏：底部新增 action-bar，包含 × (Dislike), ♥ (Like) 两个圆形按钮及一个“返回”图标。
• 移除冗余：删除旧版的滑动提示文字。

3.2 样式适配 (index.wxss)

• 散文诗排版：增加 .desc 的 line-height，设置 white-space: pre-wrap 保持 AI 返回的换行格式。
• 圆形按钮：设计极简线条风格的圆形交互元素。

3.3 数据联调 (index.js)

• 参数接收：在 onLoad 中解析 URL 参数，存储当前模式并调用后端接口。
• 导航控制：实现 onBack 返回首页，确保返回后重置首页的加载状态。

---

🧩 第四阶段：全局规范与清理

4.1 全局变量 (app.wxss)

• 变量定义：

  --jiansu-bg: #ffffff;
  --jiansu-text: #2c2c2c;
  --jiansu-accent: #8e8e8e;
  

• 字体引入：全局应用 Noto Serif SC (思源宋体)，强化品牌质感。

4.2 冗余清理

• 动作：物理删除 miniprogram/pages/index/index.wxs。由于逻辑已迁移至 JS 动画处理，废弃 WXS 以保持项目整洁。

---