121 lines
4.3 KiB
Markdown
121 lines
4.3 KiB
Markdown
一、 后端设计：多模式分流架构
|
||
核心逻辑是根据前端传来的 mode，动态拼接不同的 System Prompt。
|
||
|
||
1. API 接口定义
|
||
Endpoint: /api/names/generate
|
||
|
||
Method: POST
|
||
|
||
Params:
|
||
|
||
keyword: 用户输入的意象（如：清冷、自由）。
|
||
|
||
mode: 模式枚举 (baby | persona | classic)。
|
||
|
||
surname: 可选，用户姓氏（用于声韵分析）。
|
||
|
||
2. 核心 Prompt 引擎逻辑
|
||
在后端代码中通过一个 switch 或 Map 来管理 Prompt 模版：
|
||
|
||
JavaScript
|
||
const prompts = {
|
||
baby: "你现在是【见素·婴儿起名】导师。风格：端庄、温润。避开所有网红叠字。要求名字具备经得起时间考验的厚重感。",
|
||
persona: "你现在是【见素·人设起名】导师。风格：冷冽、张力、赛博。意象可以偏向孤傲、破败或极致的浪漫。",
|
||
classic: "你现在是【见素·诗词拾遗】导师。风格：考古学美感。专门寻找《全唐诗》中极少被现代人使用的冷门生僻字词。"
|
||
};
|
||
|
||
// 拼接最终发送给 minimax 的消息
|
||
const finalPrompt = `${prompts[mode]} \n
|
||
当前关键词：${keyword}。${surname ? '姓氏：' + surname : ''} \n
|
||
输出格式：严格 JSON 数组...`;
|
||
二、 小程序页面设计：从“输入”到“感悟”
|
||
我们要把传统的“表单填写”变成一种**“交互仪式”**。
|
||
|
||
1. 首页 (Input Page)：极简选择
|
||
视觉： 全白背景，中心是一个极细的输入框。
|
||
|
||
模式切换： 底部放置三个极简的标签（Tag），选中的标签下方有一个小黑点。
|
||
|
||
[ 宝宝 ] [ 人设 ] [ 拾遗 ]
|
||
|
||
交互： * 用户输入关键词后，点击下方的“求名”按钮。
|
||
|
||
按钮点击后，文字变为“见素感悟中...”，并触发一个类似墨水滴入水中慢慢晕开的动画（CSS 实现）。
|
||
|
||
2. 卡片页 (Swipe Page)：氛围渲染
|
||
头部： 展示当前的模式和关键词（如：见素 · 宝宝 · 清冷）。
|
||
|
||
卡片： * 正面： 巨大的宋体名字，垂直居中。右下方有一个淡淡的灰色印章。
|
||
|
||
反面： 解读文字不再是段落，而是散文诗般的排版（增加行间距）。
|
||
|
||
操作栏： 底部只有两个圆圈按钮（× 和 ♥），以及一个“返回”小图标。
|
||
|
||
三、 前端页面完整代码建议 (index.wxml 增强版)
|
||
在你的基础上，增加了模式选择和视觉氛围感。
|
||
|
||
XML
|
||
<wxs module="handler" src="./handler.wxs"></wxs>
|
||
|
||
<view class="container">
|
||
<view class="mode-selector" wx:if="{{!isSwiping}}">
|
||
<view
|
||
wx:for="{{modes}}"
|
||
wx:key="id"
|
||
class="mode-item {{activeMode === item.id ? 'active' : ''}}"
|
||
bindtap="selectMode"
|
||
data-id="{{item.id}}"
|
||
>{{item.name}}</view>
|
||
</view>
|
||
|
||
<view class="input-section" wx:if="{{!isSwiping}}">
|
||
<input
|
||
class="main-input"
|
||
placeholder="输入意象，如：孤鸿、冷月"
|
||
bindinput="onInput"
|
||
placeholder-style="color: #ccc;"
|
||
/>
|
||
<button class="submit-btn" bindtap="startGenerate">求名</button>
|
||
</view>
|
||
|
||
<view class="card-stack" wx:if="{{isSwiping && nameList.length > 0}}">
|
||
<view
|
||
class="card {{draggingClass}} {{isFlipped ? 'flipped' : ''}}"
|
||
wx:key="{{cardKey}}"
|
||
bindtap="onFlip"
|
||
bindtouchstart="{{handler.touchstart}}"
|
||
bindtouchmove="{{handler.touchmove}}"
|
||
bindtouchend="{{handler.touchend}}"
|
||
>
|
||
</view>
|
||
|
||
<view class="hint">左滑无感 · 右滑收录</view>
|
||
</view>
|
||
</view>
|
||
四、 关键 CSS 变量 (app.wxss)
|
||
为了保证“见素”的 Vibe，建议在全局定义这些变量：
|
||
|
||
CSS
|
||
page {
|
||
--jiansu-bg: #ffffff;
|
||
--jiansu-text: #2c2c2c;
|
||
--jiansu-accent: #8e8e8e;
|
||
--jiansu-font: "Noto Serif SC", serif; /* 记得引入思源宋体 */
|
||
background-color: var(--jiansu-bg);
|
||
color: var(--jiansu-text);
|
||
}
|
||
|
||
.submit-btn {
|
||
background: var(--jiansu-text);
|
||
color: #fff;
|
||
border-radius: 0; /* 极致方正 */
|
||
font-weight: 300;
|
||
letter-spacing: 4rpx;
|
||
margin-top: 60rpx;
|
||
}
|
||
五、 后期优化的建议
|
||
后端缓存： 同一个模式+同一能个关键词，缓存 24 小时。因为 Gemini API 出来的结果会有随机性，但好的意象是有限的。
|
||
|
||
姓氏平仄： 如果是“宝宝起名”模式，一定要让用户填姓氏。然后在后端加入逻辑：“如果姓氏是平声，第一个名优先选仄声”。
|
||
|
||
分享海报： 名字一定要足够大，背景一定要留/白。这是「见素」的核心竞争力。 |