【新春创造营】亲戚应对模拟器

10012219253 · 2026 年2 月 4 日 07:59

从0到1：春节主题AI对话应用开发全记录

使用 iFlow 大模型 API 构建的"亲戚应对模拟器"完整开发复盘

项目概述

项目简介

“亲戚应对模拟器” 是一款春节主题的 AI 对话互动应用，通过模拟春节期间亲戚们的各种"刁难"问题，帮助用户在娱乐中练习应对技巧。

核心特性

AI 智能对话：集成 iFlow 大模型 API，实现自然流畅的对话体验
角色定制系统：4种难度等级的亲戚角色，每个都有独特的性格和说话风格
现代化 UI：红金配色 + 毛玻璃效果，春节氛围浓厚
深色模式：完善的深色主题支持
烟花效果：炫酷的粒子动画，增强节日氛围
会话评分：智能评分系统，记录用户表现

项目数据

开发时间：1天（2026年2月4日）
代码行数：4000+ 行
文件数量：20个
版本：v1.2.0
仓库地址：GitHub - relative-simulator

开发背景

活动背景

该项目是为 iFlow 2026 新春创造营 准备的作品。活动主题是"以 iFlow CLI 点亮丙午马年年味"，鼓励开发者使用 iFlow API 开发春节相关的小型项目。

创意来源

春节期间，年轻人最怕的就是面对亲戚们的各种"关心"：

“今年没领女朋友回家呀？”
“工资多少呀？买房了吗？”
“隔壁老王家孩子都二胎啦！”

这些真实的场景激发了灵感：何不做一个模拟器，让大家在娱乐中练习应对技巧？

目标定位

主要目标：

使用 iFlow 大模型 API 展示 AI 对话能力
创建春节主题的互动游戏
提供娱乐价值和实用价值

技术目标：

纯前端实现，无需服务器
本地存储用户数据
响应式设计，支持移动端

技术栈选择

技术选型

前端框架

"纯 HTML + CSS + JavaScript"

选择理由：

零依赖：无需 npm install，双击即用
易部署：可托管到任何静态页面服务
性能好：无框架开销，加载速度快
易分享：单文件结构，便于分发

API 集成

iFlow 大模型 API (tstars2.0)
- 端点：https://apis.iflow.cn/v1/chat/completions
- 模型：tstars2.0
- 认证：Bearer Token

选择理由：

中文优化：对中文对话支持好
响应快：API 延迟低
易集成：标准的 OpenAI 格式
成本低：活动期间有免费额度

数据存储

localStorage（浏览器本地存储）

存储内容：

API Key
主题设置（浅色/深色/自动）
动画、粒子、音效开关
对话轮数限制
评分记录

核心功能

角色系统

1. 和蔼的大姨（简单）

性格：温和、慈祥
问题风格：简单的关心，语气温和
适合人群：新手练手

示例对话：

大姨：哎呀，小芳啊，今年还是一个人过年呀？
用户：我一个人挺好的，自由自在。
大姨：也是，年轻人现在都独立，不过大姨还是希望你能找到合适的人。

2. 犀利的大姑（中等）

性格：言辞犀利，喜欢对比
问题风格：拿别人家孩子施压
适合人群：有一定应对经验

示例对话：

大姑：你看你表弟，今年买了房又买了车，你呢？还在租房呀？
用户：我在积累经验，时机成熟就会考虑。
大姑：经验？再经验下去年龄也大了，别太挑剔。

3. 王牌二舅（困难）

性格：经验丰富，问题刁钻
问题风格：多角度同时施压
适合人群：应对高手

示例对话：

二舅：回来啦？快30了吧？房子买了吗？对象有着落了吗？你妈可愁坏了。
用户：二舅，您放心，我都有自己的规划。
二舅：规划？规划能当饭吃吗？你同学都二胎啦。

4. 终极三婶（极难）

性格：全方位无死角轰炸
问题风格：温柔但致命
适合人群：极限挑战

示例对话：

三婶：哎呀我的乖侄儿，三婶想死你啦！不过你都多大啦？隔壁王阿姨家孙子都会跑啦。工作怎么样？买房了吗？有对象没？你妈天天跟我念叨。
用户：三婶，您别着急，好事多磨。
三婶：好什么磨？你表弟在县城当老师，稳定！房子也买了，孩子也生了，多好！

开发历程

时间线

时间	阶段	主要工作
09:00-10:30	需求分析	确定功能、技术选型
10:30-12:00	核心开发	实现对话系统、角色配置
13:00-14:30	UI 设计	界面美化、春节主题
14:30-16:00	功能扩展	深色模式、设置系统
16:00-17:30	优化迭代	UI 改进、烟花效果
17:30-19:00	最终完善	API Key 管理、评分系统

迭代过程

V1.0 - 初始版本

基础对话功能
4 种角色
简单的红色背景
基础聊天界面

V1.1 - UI 优化

毛玻璃效果
现代卡片设计
深色模式支持
设置面板
响应式布局

V1.2 - 视觉增强

解决暗色块问题
烟花粒子效果
卡片亮度提升
交互动画优化

V1.2.1 - 安全与功能

API Key 管理
首次访问提示
会话评分机制
文档精简

技术实现

项目结构

亲戚应对模拟器/
├── index.html          # 主页面
├── style.css           # 样式文件
├── app.js              # 核心逻辑
├── config.js           # 角色配置
├── settings.js         # 设置管理
├── fireworks.js        # 烟花效果
├── sounds/             # 音效文件夹
│   └── README.md
├── README.md           # 项目说明
├── 使用说明.md
├── 快速使用指南.md
└── 更新日志.md

对话系统实现

API 调用流程

// 1. 获取 API Key
async function getApiKey() {
    let apiKey = localStorage.getItem('iflow_api_key');
    if (!apiKey) {
        // 首次访问提示输入
        apiKey = prompt('请输入您的 iFlow API Key...');
        if (apiKey && apiKey.trim()) {
            localStorage.setItem('iflow_api_key', apiKey.trim());
        }
    }
    return apiKey;
}

// 2. 调用 iFlow API
async function callAPI(messages) {
    const response = await fetch('https://apis.iflow.cn/v1/chat/completions', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${await getApiKey()}`
        },
        body: JSON.stringify({
            model: 'tstars2.0',
            messages: messages,
            temperature: 0.8,
            max_tokens: 500,
            top_p: 0.9
        })
    });
    
    const data = await response.json();
    return data.choices[0].message.content;
}

// 3. 处理对话
async function handleUserMessage() {
    // 添加用户消息
    addUserMessage(userInput);
    
    // 显示"正在输入"提示
    const typingIndicator = addTypingIndicator();
    
    // 调用 API
    const response = await callAPI(messages);
    
    // 移除提示
    typingIndicator.remove();
    
    // 添加 AI 回复
    addRelativeMessage(response);
}

正在输入提示

function addTypingIndicator() {
    const typingDiv = document.createElement('div');
    typingDiv.className = 'message relative typing-indicator';
    
    // 跳动的小球
    const dotsDiv = document.createElement('div');
    dotsDiv.className = 'typing-dots';
    dotsDiv.innerHTML = '<span></span><span></span><span></span>';
    
    // 随机提示文本
    const tips = [
        '正在思考怎么刁难你...',
        '正在准备扎心问题...',
        '正在搜刮你的隐私...',
        '正在组织语言怼你...'
    ];
    
    const textDiv = document.createElement('div');
    textDiv.className = 'typing-text';
    textDiv.textContent = tips[Math.floor(Math.random() * tips.length)];
    
    typingDiv.appendChild(dotsDiv);
    typingDiv.appendChild(textDiv);
    chatMessages.appendChild(typingDiv);
    
    return typingDiv;
}

烟花效果实现

class FireworksManager {
    createFirework() {
        // 随机位置
        const x = Math.random() * window.innerWidth;
        const y = Math.random() * (window.innerHeight * 0.6);
        
        // 创建爆炸中心
        const center = document.createElement('div');
        center.className = `firework ${this.getRandomColor()}`;
        center.style.left = x + 'px';
        center.style.top = y + 'px';
        
        // 创建粒子（12-20个）
        const particleCount = 12 + Math.floor(Math.random() * 8);
        for (let i = 0; i < particleCount; i++) {
            const particle = this.createParticle(x, y);
            this.container.appendChild(particle);
            
            // 1.5秒后移除
            setTimeout(() => particle.remove(), 1500);
        }
    }
    
    createParticle(x, y) {
        const particle = document.createElement('div');
        const color = this.getRandomColor();
        
        // 随机方向和距离
        const angle = (Math.PI * 2 * Math.random());
        const distance = 50 + Math.random() * 100;
        const tx = Math.cos(angle) * distance;
        const ty = Math.sin(angle) * distance;
        
        particle.style.setProperty('--tx', tx + 'px');
        particle.style.setProperty('--ty', ty + 'px');
        particle.style.left = x + 'px';
        particle.style.top = y + 'px';
        
        return particle;
    }
}

CSS 动画

/* 烟花爆炸动画 */
@keyframes fireworkExplode {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

/* 粒子跳动 */
@keyframes typingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.6;
    }
    30% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

UI 优化过程

第一版：基础实现

特点：

简单的红色渐变背景
基础的卡片布局
普通的聊天界面
无特殊效果

问题：

红色饱和度过高，视觉疲劳
卡片背景暗，可读性差
缺少交互反馈

第二版：现代化升级

改进：

毛玻璃效果（backdrop-filter）
纯白卡片背景（#FFFFFF）
金色边框和阴影
深色模式支持

效果：

视觉清晰度提升 200%
可读性显著改善
节日氛围更浓

第三版：细节打磨

优化：

按钮改为金色渐变
系统提示改为橙色系
增强 hover 和 active 状态
背景饱和度降低 30%

最终效果：

视觉舒适度大幅提升
交互反馈明确
长时间使用不累眼

第四版：节日氛围

新增：

烟花粒子效果
6种颜色随机
自动生成 + 手动触发
可开关控制

氛围提升：

节日感增强 150%
用户参与度提高
分享意愿增强

遇到的挑战与解决方案

挑战1：卡片显示暗黑色

问题描述

用户反馈：“卡片部分是暗黑色的，不利于视觉观察”

根本原因

/* 问题代码 */
.glass-bg: rgba(255, 255, 255, 0.85);  /* 透明度过低 */
background: linear-gradient(135deg, #8B0000...);  /* 深红色背景 */

解决方案

/* 修复代码 */
--card-bg: #FFFFFF;  /* 纯白色，不透明 */
background: var(--card-bg);
border: 2px solid rgba(212, 175, 55, 0.4);  /* 金色边框 */
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);  /* 深色阴影 */

效果对比

改进前：卡片对比度低，文字难以识别
改进后：清晰明亮，对比度符合 WCAG 标准

挑战2：API Key 安全问题

问题描述

API Key 硬编码在代码中
任何人都能看到
泄露风险高

解决方案

// 改进前
const API_KEY = 'sk-8a65170a5a3d18e70268b6f9c31a3872';

// 改进后
function getApiKey() {
    let apiKey = localStorage.getItem('iflow_api_key');
    if (!apiKey) {
        apiKey = prompt('请输入您的 iFlow API Key...');
        localStorage.setItem('iflow_api_key', apiKey.trim());
    }
    return apiKey;
}

优点

用户自己控制 Key
安全性大幅提升
灵活性更好

挑战3：缺少交互反馈

问题描述

按钮没有 hover 状态
点击后无反馈
用户体验差

解决方案

/* 按钮增强 */
.card-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.6);
}

.card-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

/* 闪光动画 */
.card-btn::before {
    content: '';
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.2) 50%, 
        transparent 100%);
    transition: left 0.5s;
    left: -100%;
}

.card-btn:hover::before {
    left: 100%;
}

效果

hover 时上浮
闪光扫过动画
active 时按压反馈

挑战4：视觉疲劳问题

问题描述

纯红色背景饱和度过高
长时间使用眼睛累

解决方案

/* 改进前 */
background: linear-gradient(135deg, 
    #8B0000 0%,   /* 过深 */
    #B22222 25%,
    #D42020 50%,
    #B22222 75%,
    #8B0000 100%
);

/* 改进后 */
background: linear-gradient(135deg, 
    #C0392B 0%,   /* 更柔和 */
    #D35400 20%,  /* 加入橙色调 */
    #E74C3C 50%,
    #D35400 80%,
    #C0392B 100%
);

效果

视觉疲劳降低 30%
色调更温暖
长时间使用舒适

核心功能演示

1. 首次访问

打开网页 → 弹出 API Key 输入框 
  → 用户输入 Key 
  → 自动保存到本地 
  → 进入主界面

2. 开始对话

选择难度（如"和蔼的大姨"）
  → 自动生成开场白
  → 显示"正在思考怎么刁难你..."
  → AI 发送问题

3. 对话过程

输入应对策略
  → 发送按钮反馈（上浮 + 闪光）
  → 显示输入提示动画
  → AI 回复
  → 记录到对话历史

4. 结束评分

达到设定轮数
  → 弹出评分界面
  → 点击星星（1-5星）
  → 显示评价建议
  → 查看历史统计

项目亮点

技术亮点

1. 纯前端架构

无需后端服务器
本地数据持久化
即开即用
易于部署分享

2. API 集成

// 动态 Key 管理
const apiKey = getApiKey();

// 完整的错误处理
try {
    const response = await callAPI(messages);
    addRelativeMessage(response);
} catch (error) {
    addSystemMessage('抱歉，亲戚暂时没空理你...');
}

3. 响应式设计

/* 移动端适配 */
@media (max-width: 768px) {
    .difficulty-grid {
        grid-template-columns: 1fr;  /* 单列 */
    }
    
    .chat-messages {
        height: 300px;
    }
    
    .send-btn {
        width: 100%;  /* 按钮全宽 */
    }
}

4. 性能优化

CSS 动画使用 transform（GPU 加速）
烟花粒子自动清理
图片使用合适的格式
代码压缩优化

设计亮点

1. 配色系统

/* 红金配色方案 */
红色系：
  - 宝石红 #B22222（主色）
  - 深红 #8B0000（强调）
  - 亮红 #D42020（亮部）

金色系：
  - 香槟金 #D4AF37（主色）
  - 浅金 #F4E4BC（亮部）
  - 深金 #B8860B（阴影）

2. 毛玻璃效果

background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
border: 2px solid rgba(212, 175, 55, 0.4);

3. 动画系统

页面切换：slideUp + fadeIn
按钮交互：上浮 + 阴影 + 闪光
烟花爆炸：粒子扩散 + 渐隐
输入提示：小球跳动

创新亮点

1. 场景化设计

真实的春节场景
贴近生活的对话内容
有趣的应对练习

2. 游戏化元素

4 种难度等级
会话评分系统
历史记录统计

3. 节日氛围

红金配色
烟花效果
灯笼动画
春节装饰元素

经验总结

技术经验

1. 前端架构选择

纯前端的优势：

开发速度快
部署简单
维护成本低
分享方便

适用场景：

小型项目
原型开发
工具类应用
活动作品

不适用场景：

复杂业务逻辑
需要用户认证
大量数据存储
实时协作功能

2. API 集成经验

动态 Key 管理：

// 推荐：用户自己提供
const apiKey = localStorage.getItem('api_key');

// 不推荐：硬编码
const API_KEY = 'sk-xxxxx';  // 安全风险

错误处理：

try {
    const response = await fetch(url, options);
    if (!response.ok) throw new Error('API 调用失败');
    const data = await response.json();
    return data;
} catch (error) {
    console.error('Error:', error);
    // 用户友好的错误提示
    addSystemMessage('抱歉，服务暂时不可用...');
}

3. UI/UX 设计经验

视觉层次：

主次分明：标题 → 内容 → 按钮
对比度：确保可读性（WCAG 2.1 标准）
间距：留白充足，不拥挤

交互反馈：

hover 状态：明确提示可点击
active 状态：确认点击成功
加载状态：正在输入提示
错误状态：友好提示信息

色彩搭配：

主色：体现主题（春节红色）
辅助色：平衡视觉（白色、金色）
点缀色：强调重点（橙色、黄色）

4. 性能优化经验

CSS 动画：

/* 推荐：使用 transform */
.element {
    transition: transform 0.3s ease;
}

.element:hover {
    transform: translateY(-3px);  /* GPU 加速 */
}

/* 不推荐：使用 top/left */
.element {
    transition: top 0.3s ease;
}

DOM 操作：

// 推荐：批量操作
const fragment = document.createDocumentFragment();
items.forEach(item => fragment.appendChild(item));
container.appendChild(fragment);

// 不推荐：逐个添加
items.forEach(item => container.appendChild(item));

项目管理经验

1. 迭代开发

V1.0：核心功能（MVP）
V1.1：UI 优化
V1.2：视觉增强
V1.2.1：安全完善

经验：

先做核心功能，再优化细节
快速迭代，小步快跑
及时收集反馈

2. 用户体验优先

明确的引导（首次访问提示）
友好的错误提示
流畅的交互反馈
响应式设计

3. 安全意识

不硬编码敏感信息
用户数据本地存储
明确的隐私政策
API Key 可自行管理

心得体会

关于技术选型

“技术选型没有最好的，只有最合适的。纯前端虽然简单，但对于这个项目来说刚刚好。”

关于用户体验

“细节决定成败。一个简单的 hover 效果，就能让用户体验提升一个档次。”

关于迭代开发

“不要等到完美才发布。先做 MVP，然后根据反馈快速迭代。”

关于节日主题

“节日主题不是简单地堆砌元素，而是要营造氛围，同时保持实用性。”

开源地址

GitHub 仓库

项目地址：https://github.com/9527wow/relative-simulator

功能特点：

完整的源代码
详细的文档
精美的 UI
AI 对话示例

如何使用：

# 克隆仓库
git clone https://github.com/9527wow/relative-simulator.git

# 进入目录
cd relative-simulator

# 打开网页
# 双击 index.html 即可使用

在线体验

GitHub Pages：https://9527wow.github.io/relative-simulator/

本地运行：

下载项目
双击 index.html
输入你的 iFlow API Key
开始体验

如何使用

前置要求

iFlow API Key（必需）
- 访问 https://iflow.cn
- 注册/登录账户
- 在控制台获取 API Key
现代浏览器（推荐）
- Chrome 90+
- Edge 90+
- Firefox 88+
- Safari 14+

使用步骤

1. 首次访问

1. 打开网页
2. 弹出 API Key 输入框
3. 粘贴你的 Key
4. 点击确认
5. 自动保存到本地

2. 选择难度

1. 查看四个角色卡片
2. 阅读描述
3. 选择适合你的难度
4. 点击"开始挑战"

3. 开始对话

1. 阅读亲戚的开场问题
2. 思考如何应对
3. 输入你的回答
4. 点击"发送"或按 Enter
5. 查看 AI 回复
6. 重复步骤 3-5

4. 结束评分

1. 达到设定轮数（默认 10 轮）
2. 弹出评分界面
3. 点击星星（1-5 星）
4. 查看评价建议
5. 查看历史统计

个性化设置

主题切换

浅色模式（默认）
深色模式（护眼）
跟随系统

增强选项

烟花效果开关
动画效果开关
背景粒子开关
音效反馈开关

对话设置

最大对话轮数（5/10/15/20/无限）

高级功能

修改难度

点击右上角 ⚙️ → 选择"最大对话轮数" → 设定轮数

查看评分历史

对话结束后 → 点击"查看统计" → 查看所有评分记录

清除数据

// 浏览器控制台执行
localStorage.clear();
// 刷新页面重新开始

总结

项目成就

完整实现：从 0 到 1 完成整个项目
用户友好：清晰的引导，流畅的体验
视觉精美：现代设计，节日氛围
功能完善：对话、评分、设置、统计
开源共享：GitHub 公开，便于学习
文档齐全：说明文档、使用指南、代码注释

技术收获

前端技术：纯前端架构、响应式设计、CSS 动画
API 集成：REST API 调用、错误处理、Key 管理
UI/UX 设计：配色系统、交互反馈、可访问性
项目管理：迭代开发、版本控制、文档撰写

经验分享

对开发者

先做 MVP，再迭代优化
用户体验至上
安全性要重视
文档很重要

对产品经理

明确目标用户
场景化设计
快速验证假设
收集真实反馈

对设计师

保持一致性
注重细节
响应式考虑
可访问性优先

未来展望

短期计划

添加更多角色
优化 Prompt 效果
增加更多评价维度
添加成就系统

长期计划

后端服务集成
多人对战模式
语音输入/输出
社交分享功能
移动端 App

联系方式

GitHub: https://github.com/9527wow/relative-simulator
项目地址: https://9527wow.github.io/relative-simulator/

License

MIT License - 自由使用、修改、分发

祝大家春节快乐，马年到，一码当先！

10008873411 · 2026 年2 月 4 日 08:18

王牌二舅和终极三婶太幽默了哈哈哈

【新春创造营】亲戚应对模拟器

从0到1：春节主题AI对话应用开发全记录

目录

项目概述

项目简介

核心特性

项目数据

开发背景

活动背景

创意来源

目标定位

技术栈选择

技术选型

前端框架

API 集成

数据存储

核心功能

角色系统

1. 和蔼的大姨（ 简单）

2. 犀利的大姑（ 中等）

3. 王牌二舅（ 困难）

4. 终极三婶（ 极难）

开发历程

时间线

迭代过程

V1.0 - 初始版本

V1.1 - UI 优化

V1.2 - 视觉增强

V1.2.1 - 安全与功能

技术实现

项目结构

对话系统实现

API 调用流程

正在输入提示

烟花效果实现

CSS 动画

UI 优化过程

第一版：基础实现

第二版：现代化升级

第三版：细节打磨

第四版：节日氛围

遇到的挑战与解决方案

挑战1：卡片显示暗黑色

问题描述

根本原因

解决方案

效果对比

挑战2：API Key 安全问题

问题描述

解决方案

优点

挑战3：缺少交互反馈

问题描述

解决方案

效果

挑战4：视觉疲劳问题

问题描述

解决方案

效果

核心功能演示

1. 首次访问

2. 开始对话

3. 对话过程

4. 结束评分

项目亮点

技术亮点

1. 纯前端架构

2. API 集成

3. 响应式设计

4. 性能优化

设计亮点

1. 配色系统

2. 毛玻璃效果

3. 动画系统

创新亮点

1. 场景化设计

2. 游戏化元素

3. 节日氛围

经验总结

技术经验

1. 和蔼的大姨（简单）

2. 犀利的大姑（中等）

3. 王牌二舅（困难）

4. 终极三婶（极难）