- Demo 简介
是什么
语航者 是一款基于 Web 的多语种在线学习平台（App 形态），支持英语、日语、韩语等主流语言学习，集成了智能学习计划、AI 学习助手、互动学习模块、社交社区、进度追踪等核心能力的一站式学习应用。
面向谁
准备自学第二外语的大学生和职场人士
有系统学习需求但缺乏规划的学习者
希望通过社区互动提升学习动力的语言爱好者
主要功能
功能模块 说明
AI 智能学习助手 支持自然语言对话，可智能生成个性化学习计划，一键添加到今日任务；支持消息删除、引用回复等完整聊天体验
互动学习模块 单词闪卡（3D翻转动画）、听力训练（波形可视化）、错题本（分类筛选+沉浸复习模式），三合一整合在「互动学习」页面
智能日历与日程 首页连续打卡与日历合并展示，点击展开完整日历；支持自主修改年月，可添加学习日程（含提醒开关），当日日程自动同步到今日任务
社交中心 好友列表管理、群聊功能（支持聊天背景设置、消息免打扰等）、社区广场（类朋友圈发帖、点赞限制、评论回复）
进度追踪 能力雷达图（渐变填充）、学习趋势折线图、今日任务进度环，数据可视化呈现学习成果
知识百科 涵盖政治、经济、文学、理学、工学等多领域知识模块，支持查询浏览
技术栈
React 18 + TypeScript + Vite + Tailwind CSS + Zustand + Framer Motion + Recharts + Lucide React
设计风格
深翠绿（#0D3B3B）+ 琥珀（#D4A373）+ 米白（#F7F5F0）配色方案，桌面端左侧固定侧边栏 + 移动端底部 Tab 导航，全响应式适配。
- Demo 创作思路
灵感来源
作为一名日语学习者，我深刻体会到自学语言时的三大痛点：缺乏系统规划（今天学什么完全随机）、缺乏即时反馈（不知道学得怎么样）、缺乏学习氛围（一个人学容易放弃）。市面上的语言学习 App 要么功能单一，要么社交属性弱，因此想打造一款「智能规划 + 互动学习 + 社区激励」三位一体的学习平台。
想解决的问题
学习规划混乱 → AI 助手根据用户输入的需求自动生成每日学习任务，并支持一键添加到今日任务列表
错题难以管理 → 听力练习答错的题目自动收入错题本，支持分类筛选和沉浸复习模式
学习孤独感 → 社区广场类似朋友圈的功能，好友可以互相点赞（每日限5次）、评论互动，增强学习动力
进度不透明 → 雷达图+折线图+进度环多维度可视化展示学习数据
为什么做这个方向
语言学习是终身学习的重要部分，全球有数亿人在自学外语。现有的头部产品多聚焦于单一语言（如英语），对日语、韩语等小语种支持不够深入；且大多数产品重内容轻社交，用户粘性不足。「语航者」希望通过 AI 降低规划门槛、通过社交提升坚持率，打造差异化的多语种学习体验。
- Demo 体验地址
本项目为纯前端应用，所有数据存储在浏览器 LocalStorage 中，无需后端即可完整体验。
体验方式：下载项目源码后运行 npm install && npm run dev 即可本地启动。
或访问部署链接（如已部署）：http://localhost:5173/
核心页面截图：
首页：连续打卡日历 + 今日任务进度 + AI 助手入口 + 语法阅读快捷入口
互动学习：单词闪卡 / 听力训练 / 错题本 三标签切换
AI 对话：智能生成学习计划，一键添加任务
社区广场：发帖、点赞、评论互动
进度追踪：雷达图 + 折线图数据可视化
4. TRAE 实践过程
开发流程概述
整个「语航者」项目从零到完整可用，全程使用 TRAE IDE 进行开发。开发周期约 3 天，累计完成 30+ 页面/组件，代码量超过 5000 行。以下是关键开发步骤：
Step 1：项目初始化与架构搭建
使用 TRAE 的 Agent 模式，通过自然语言描述需求，自动生成项目骨架。TRAE 协助完成了：
Vite + React 18 + TypeScript 项目初始化
Tailwind CSS 配置（自定义主题色、字体、阴影等）
Zustand 状态管理架构（用户、学习、社交、UI 四个 Store）
React Router 路由配置（30+ 路由页面）
基础布局组件（Sidebar、TopBar、BottomNav、Layout）
23521955418456:c5579772b082498f39c8ac6b01d8cd17_6a4c9ed8032a87d837f8fd12.6a4c9ed8032a87d837f8fd15.6a4c9ed8032a87d837f8fd13:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/7 14:38:16)
Step 2：核心页面开发
通过 TRAE 的交互式开发，逐页实现功能：
首页：连续打卡模块、今日任务列表（单击完成/双击取消）、AI 助手快捷入口、语法阅读模块
互动学习：单词闪卡（Framer Motion 3D 翻转动画）、听力训练（波形可视化）、错题本（筛选+复习模式）
AI 聊天：消息气泡、删除消息、引用回复、学习计划生成与一键添加
社交中心：好友列表、群聊界面、社区广场发帖与互动
个人中心：头像更换、昵称修改、会员界面、设置、隐私、帮助等
23521955418456:577610562d04afb3bb8a811b020329c7_6a4c9ed8032a87d837f8fd12.6a4cabdd032a87d837f8fdf3.6a4cabdd032a87d837f8fdf1:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/7 15:33:49)
Step 3：交互优化与细节打磨
使用 TRAE 的浏览器元素选择功能，精确选中页面元素进行批量优化：
调整全局颜色、字体大小、间距
统一按钮交互反馈（hover 上浮 + active 按压）
优化页面转场动画（Framer Motion AnimatePresence）
增强日历模态框（年月选择器、日程设置功能）
优化雷达图颜色（渐变填充、加粗边框）
23521955418456:a3e8c2a7c9c9f2992e943de66a48935a_6a4c9ed8032a87d837f8fd12.6a4ccef3032a87d837f90019.6a4ccef3032a87d837f90017:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/7 18:03:31)
Step 4：功能整合与重构
基于用户反馈进行模块整合：
将错题本从 Sidebar 独立入口移入「互动学习」模块作为第三标签页
将首页连续打卡模块与日历合并，点击展开完整日历
将四个快捷入口合并为「语法阅读」模块
为日历添加日程设置功能，支持提醒时间，当日日程自动添加到今日任务
关键任务对话 Session ID
以下 Session ID 可用于证明作品由 TRAE 开发完成：
Session ID 开发内容
6a4c9ed8032a87d837f8fd12 项目核心开发阶段，完成首页、学习计划、互动学习、错题本、进度追踪、社交中心、AI 对话、社区广场、个人中心等全部核心页面
6a4c9ed8032a87d837f8fd12 交互优化阶段：全局样式调整（颜色、字体、间距）、按钮交互增强、日历模态框升级、AI 聊天功能增强
6a4c9ed8032a87d837f8fd12 功能整合阶段：错题本移入互动学习、打卡与日历合并、快捷入口合并、日历日程设置功能开发
注：以上均为同一会话中的不同阶段，Session ID 为 6a4c9ed8032a87d837f8fd12。该会话累计完成超过 30 个文件的新建/修改，完整记录了从需求描述到功能实现的全部对话过程。
5. 开发心得
TRAE 带来的效率提升
自然语言驱动开发：无需手动写大量样板代码，通过描述需求即可生成完整组件，开发效率提升 3 倍以上
交互式元素修改：通过浏览器元素选择器精确选中要修改的元素，批量调整样式和交互，比传统开发更直观
AI 辅助架构设计：TRAE 在项目初期给出了合理的技术选型和目录结构建议，避免了后期重构
实时预览反馈：修改代码后立即在预览窗口看到效果，快速迭代
技术亮点
状态管理：使用 Zustand + persist 中间件实现 LocalStorage 持久化，无需后端即可保存用户数据
动画体验：Framer Motion 实现页面转场、卡片翻转、模态框弹出等流畅动画
响应式设计：一套代码同时适配桌面端（侧边栏导航）和移动端（底部 Tab 导航）
组件化设计：所有组件严格控制在 300 行以内，高内聚低耦合
社区报名帖链接： 学习工作赛道 + AI 提示词迭代训练系统
