学瘾圈 – 外语学习平台
一个功能完整、设计简洁实用的外语学习平台
项目简介
学瘾圈是一个基于Vue 2的外语学习平台前端项目，采用低干扰、高聚焦、实用主义的设计理念，完美复刻学瘾圈的功能和风格。
设计风格
视觉设计
- 主色调：浅蓝（#4A90E2）/ 白色
- 背景色：浅灰（#F5F5F5）
- 辅助色：
- 绿色（#52C41A）- 完成状态
- 橙色（#FF9500）- 提醒状态
- 红色（#FF4D4F）- 危险状态
- 字体层级：
- 标题：16-18px，中等权重
- 功能入口：14px，常规权重
- 提示文字：12px，轻量权重
- 图标风格：线性扁平化图标（1-2px线条）
- 布局逻辑：网格状/列表状，间距16-20px，留白充足
设计原则
- ✅ 无冗余视觉元素 – 无背景图、装饰性线条、广告Banner
- ✅ 模块设计克制 – 文字+图标组合，无复杂阴影、渐变
- ✅ 一致性极强 – 所有页面风格统一
- ✅ 信息密度适中 – 排列整齐不拥挤，留白充足
- ✅ 交互简洁 – 仅基础过渡效果
功能模块
核心学习模块
- 登录 (
/login)- 用户名密码登录
- 第三方登录入口（微信、QQ）
- 忘记密码、注册功能
- 首页 (
/home)- 核心功能快捷入口（8大功能图标）
- 学习概览展示
- 今日学习任务推送
- 热门资源推荐
- 学习进度追踪
- 快速单词复习
- 热门活动
- 学习计划 (
/study-plan)- 计划创建、编辑、删除
- 学习目标、周期设置
- 提醒时间设置
- 进度跟踪展示
- 今日任务列表
- 学习统计图表
- 我的收藏 (
/my-collection)- 收藏分类（课程、单词、手账、文章）
- 收藏操作（收藏、取消、分享、删除）
- 批量管理功能
- 搜索筛选功能
- 课程广场 (
/course-square)- 课程分类筛选（年级、科目、类型、难度）
- 课程排序（默认、人气、评分、最新）
- 课程列表展示
- 课程收藏功能
- 课程详情 (
/course-detail/:id)- 课程信息展示
- 课程简介
- 课程目录
- 学员评价
- 单词仓库 (
/vocabulary)- 词汇分类（教材同步、高频考点、拓展词汇）
- 学习模式选择（看词选义、听音辨词、拼写默写、跟读模仿）
- 单词列表展示
- 发音功能
- 词汇测试（词汇量测试、单元测试、专项测试）
- 教材同步 (
/textbook-sync)- 教材筛选（年级、版本、科目）
- 教材列表展示
- 学习进度追踪
- 学习手账 (
/study-journal)- 笔记创建、编辑、删除
- 心情标记（开心、一般、低落）
- 标签分类
- 学习记录
- 排行榜 (
/leaderboard)- 排名维度选择（学习时长、单词量、连续天数）
- 排名范围切换（全国、班级、好友）
- 排行榜展示
- 合伙人计划 (
/partner-plan)- 推广数据统计
- 邀请链接/二维码
- 收益明细
- 提现功能
- 开通会员 (
/vip)- VIP特权展示
- 会员套餐选择（月卡、季卡、年卡、终身卡）
- 支付方式选择
- 价格展示
- 推广奖励 (
/promote-reward)- 奖励规则展示
- 积分展示
- 积分明细
- 积分兑换
- 设置 (
/settings)- 个人资料管理
- 学习设置（发音、倍速、提醒）
- 通用设置（深色模式、字体、通知）
- 账户安全
- 退出登录
核心特性
功能特性
✅ 多模式学习 – 支持单词学习、课程学习、教材同步等多种学习模式 ✅ 学习游戏化 – 练习采用游戏化设计，提升学习趣味性 ✅ 学习计划管理 – 创建、编辑、跟踪学习计划 ✅ 进度追踪 – 实时记录学习进度、连续学习天数、单词量等 ✅ 学习手账 – 记录学习笔记，支持心情标记和标签分类 ✅ 排行榜系统 – 多维度排名，激励学习竞争 ✅ VIP会员体系 – 会员特权、套餐购买、支付功能 ✅ 推广奖励 – 合伙人计划，积分系统和提现功能 ✅ 消息通知 – 系统消息、学习提醒及时推送 ✅ 个性化设置 – 深色模式、字体大小、发音设置等
技术特性
✅ 完全响应式 – 手机端/电脑端自适应布局 ✅ 实用主义设计 – 低干扰、高聚焦的UI设计 ✅ 路由守卫 – 登录验证和权限控制 ✅ 状态管理 – Vuex集中式状态管理 ✅ API封装 – Axios请求封装，统一错误处理 ✅ 表单验证 – 完整的表单验证规则 ✅ 统一样式 – SCSS变量和Mixins，主题可配置 ✅ 模块化设计 – 组件化开发，代码可维护性高 ✅ 性能优化 – 路由懒加载、组件按需加载 ✅ 交互友好 – 流畅的过渡动画和用户反馈
设计特性
✅ 玻璃拟态 – 现代化UI设计风格 ✅ 深色模式 – 支持浅色/深色主题切换 ✅ 渐变设计 – 主色调采用蓝紫渐变（#6772FF → #00F9E5） ✅ 统一视觉 – 全站风格一致，用户体验流畅
浏览器支持
- Chrome >= 60
- Firefox >= 60
- Safari >= 12
- Edge >= 79
- 移动端浏览器
