feat: 完成见素起名小程序核心功能
- 实现 AI 起名功能(Kimi API 接入) - 添加用户收藏功能(MySQL 数据库) - 实现海报生成与分享 - 添加音效和触觉反馈 - 配置生产环境部署(WAR 包 + Nginx) - 支持多种起名模式(经典、诗词、自然、现代) - 实现分批加载优化体验
This commit is contained in:
76
step2_dev.md
Normal file
76
step2_dev.md
Normal file
@@ -0,0 +1,76 @@
|
||||
# 「见素」多模式起名功能开发计划
|
||||
|
||||
## 📝 总体目标
|
||||
实现多模式起名系统,涵盖后端 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 以保持项目整洁。
|
||||
|
||||
---
|
||||
Reference in New Issue
Block a user