be1f5722ab
- 实现 AI 起名功能（Kimi API 接入） - 添加用户收藏功能（MySQL 数据库） - 实现海报生成与分享 - 添加音效和触觉反馈 - 配置生产环境部署（WAR 包 + Nginx） - 支持多种起名模式（经典、诗词、自然、现代） - 实现分批加载优化体验
77 lines
3.3 KiB
Markdown
77 lines
3.3 KiB
Markdown
# 「见素」多模式起名功能开发计划
|
||
|
||
## 📝 总体目标
|
||
实现多模式起名系统，涵盖后端 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`)
|
||
* **变量定义**：
|
||
```css
|
||
--jiansu-bg: #ffffff;
|
||
--jiansu-text: #2c2c2c;
|
||
--jiansu-accent: #8e8e8e;
|
||
```
|
||
* **字体引入**：全局应用 `Noto Serif SC` (思源宋体)，强化品牌质感。
|
||
|
||
### 4.2 冗余清理
|
||
* **动作**：物理删除 `miniprogram/pages/index/index.wxs`。由于逻辑已迁移至 JS 动画处理，废弃 WXS 以保持项目整洁。
|
||
|
||
---
|