🎯 项目背景
在快节奏的现代生活中，很多人面临着职业困惑、人生方向迷茫和关系沟通障碍。市面上的 AI 聊天工具大多提供直接答案或情绪安慰，但很少有人帮助用户问出真正该问的问题。
"深渊回声"就是这样一个不一样的 AI 对话应用——它不喂鸡汤，不附和情绪，而是通过三个可行性路径（职业困惑、人生方向、关系沟通）帮助用户照见自己的盲区。
🛠️ 技术栈选择
前端框架
• React 19 - 最新稳定版，性能优化显著
• Vite 7.3.7 - 极速构建工具，开发体验极佳
• TanStack Router - 类型安全的路由方案
• shadcn/ui - 可定制的 UI 组件库
样式系统
• Tailwind CSS v4 - 使用 oklch 色值定义设计令牌
• 深色主题设计，符合哲思应用的调性
AI 服务
• 扣子 (Coze) API - 提供高质量的对话能力
• 支持上下文连贯的多轮对话
💡 核心功能实现
- 三路径引导系统
当用户提出问题时，AI 不会直接给出单一答案，而是提供三个不同维度的可行性方案：

interface ChatOption {
title: string; // 方案标题
description: string; // 详细描述
path: 'career' | 'life' | 'relationship'; // 路径分类
}
这种设计让用户从多个角度思考问题，而不是被动接受建议。 - 会员订阅模式
采用每日免费 + 会员无限的混合模式：
• 非会员：每天5次免费对话
• 会员：无限畅聊，有效期30天
• 纯前端实现，无需后端云函数

// 会员状态管理
interface UserSubscription {
isMember: boolean;
dailyFreeUsed: number;
lastResetDate: string;
memberExpiry?: string;
} - 个人收款码集成
对于独立开发者来说，接入正规支付渠道成本高、门槛高。我们采用了更轻量级的方案：
• 点击"升级会员"弹出收款码弹窗
• 用户扫码支付后手动确认
• 前端验证后解锁会员权限
这种方式虽然需要用户主动确认，但对于早期产品验证和小规模运营来说，是最简单可靠的变现方式。
🔧 关键技术点
模拟数据与真实 API 的双模式架构

async function sendMessage(req: ChatRequest): Promise {
try {
// 尝试调用真实 Edge Function
const result = await callEdgeFunction('chat', req);
return result;
} catch (error) {
if (error.message === 'CLOUD_NOT_ENABLED') {
// Fallback 到模拟数据
return getMockResponse(req);
}
throw error;
}
}
这种设计让应用可以在没有云服务的情况下也能正常运行，降低了部署复杂度。
上下文连贯的对话
通过维护对话历史数组，AI 能够记住之前的对话内容，并根据对话进展给出更有针对性的回复：

interface ConversationHistory {
messages: Array<{ role: 'user' | 'assistant'; content: string }>;
}
响应式设计
使用 Tailwind CSS 的响应式工具类，确保应用在 PC 和移动端都有良好的体验：

{/ 内容区域 /}
📊 项目成果
• ✅ 完整的 AI 对话功能
• ✅ 三路径引导系统
• ✅ 会员订阅变现
• ✅ 个人收款码集成
• ✅ 响应式设计
• ✅ 纯前端实现，零后端依赖
🚀 部署与运维
项目使用 Meoo Cloud 平台进行部署，配置简单：

[meoo.deploy]
type = "web"
mode = "static"
build = "pnpm run build"
output = "dist"
💭 经验总结
什么做得好 - 产品设计差异化 - 不提供答案，而是帮助用户问对问题
- 技术选型务实 - 纯前端实现，降低运维成本
- 变现模式简单 - 个人收款码适合早期验证
可以改进的地方 - 支付体验 - 手动确认不够优雅，后续可接入正规支付
- 数据安全 - localStorage 存储容易被清除，需要考虑云端同步
- AI 质量 - 模拟回复有限，需要接入真实 AI 服务
🎁 开源与分享
这个项目展示了如何用现代前端技术快速构建一个有特色的 AI 应用。如果你也在探索 AI 应用的商业化路径，希望这个案例能给你一些启发。
技术栈总结：React 19 + Vite + Tailwind CSS + shadcn/ui + 扣子 API
核心亮点：三路径引导 + 会员订阅 + 个人收款码
适用场景：独立开发者、小型团队、AI 应用创业
