企业官网建设流程全解析

目前的项目进度总结

🌟 项目概述

项目背景

本项目是一个基于AI大模型的考研学习社区平台，旨在为考研学子提供智能化的学习辅助工具。通过整合错题管理、智能推荐、AI分析、社区互动等功能，打造一站式的考研学习生态系统。

核心价值

• 🎯智能化学习：利用AI技术分析学习薄弱环节，提供个性化推荐
• 📚高效错题管理：OCR识别、智能分类、同类题强化练习
• 👥社区互助：考研经验分享、学习交流、好友互动
• 🤖AI助手：RAG知识库支持的自然语言问答
• 📊数据驱动：学习数据分析、知识图谱可视化

目标用户

• 准备硕士研究生入学考试的学生
• 需要系统化复习的考生
• 希望获得个性化学习建议的学习者

🚀 核心功能模块

1️⃣ 智能推荐模块（Recommend）

页面路径：pages/recommend/index.vue（TabBar首页）

核心功能：

• 🤖AI分析报告入口：上传错题图片，智能分析薄弱知识点
• 📅每日推题入口：基于学习历史智能推荐练习题
• 📷OCR识别上传：拍照或相册选择，自动识别题目文字
• 📊智能推荐列表：根据用户画像推荐最适合的题目
  • 难度分级（简单/中等/困难）
  • 准确率统计
  • AI推荐理由

  技术实现：

javascript

// OCR识别流程 uploadQuestion() { uni.chooseImage({ success: async (res) => { const result = await authenticatedRequest({ url: '/ocr/recognize', data: { image: res.tempFilePaths[0] } }) // 自动填充到添加错题页面 } }) }

2️⃣ 错题本模块（Notebooks）

页面数量：8个页面

2.1 错题本列表（notebooks.vue）

• 🔍 搜索错题本
• ➕ 快捷入口：每日推题、添加错题
• 📝 新建错题本
• 🗑️ 左滑删除/编辑

2.2 错题本详情（detail.vue）

• 📖 错题列表展示
• 🔍 按标题/日期筛选
• 📸 图片预览
• ✏️ 左滑编辑/删除

2.3 添加/编辑错题本（add.vue）

• 名称和简介填写
• 新增/编辑模式切换

2.4 添加/编辑错题（add-question.vue）

• 📷OCR智能识别：上传图片自动识别题干
• ✏️手动编辑：完善识别结果
• 🖼️多图支持：题干和答案分别支持最多6张图片
• 🏷️标签系统：自定义分类标签
• ☁️阿里云OSS：图片自动上传云端

2.5 错题详情（topic-detail.vue）

• 📖 完整题目展示
• 👁️查看答案：点击按钮显示答案
• ✅❌答题反馈：标记"做对了"或"做错了"
• 🔀跳转同类题：强化练习
• 🤖AI分析：深度分析报告
• 💾保存错题：编辑后保存

2.6 每日推题（daily-push.vue）✨ 新增

• 🎯智能筛选：知识点、难度、日期范围
• 📊数据统计：总题数、正确率、薄弱点
• 📄翻页控制：上一题/下一题、上一页/下一页
• 🤖AI分析入口：生成分析报告
• 🔀同类题入口：查看同考点题目

2.7 AI分析报告（ai-analysis.vue）✨ 新增

• 📷图片上传：支持拍照或相册选择
• 🤖AI智能分析：
  • ❌ 错题原因分析
  • 📚 知识点分析
  • 🕸️ 知识图谱可视化（Canvas绘制）
  • 🎯 薄弱环节定位（掌握度进度条）
  • 🔀 同类型题推荐
  • 💡 个性化练习建议
• 📊数据可视化：图表展示分析结果

2.8 同类题练习（similar-questions.vue）✨ 新增

• 📚考点信息：显示当前考点和难度
• 📝同类题列表：同考点题目集合
• ✅答题状态：已做对/做错/未作答标记
• 🔍题目详情：点击查看完整题目
• 🤖AI分析：跳转分析报告
• 💾保存错题：添加到错题本

业务流程图：

plaintext

错题本首页 ├─→ 新建错题本 → 返回首页 ├─→ 每日推题 → AI分析/同类题 → 保存错题 └─→ 错题本列表 → 查看错题 → 答题反馈 → ├─→ 同类题 → 保存错题 └─→ AI分析 → 保存错题

3️⃣ 聊天模块（Chat）✨ 全新独立模块

页面数量：3个页面

设计理念：完全独立的模块，与社区功能解耦

3.1 聊天列表（chat-list.vue）

• 🔍搜索聊天记录
• ⋮更多菜单：
  • 添加好友
  • 我的好友
  • 好友请求（带红标）
• 💬会话列表：
  • 头像 + 在线状态
  • 未读数徽章
  • 最后消息预览
  • 时间格式化
• 🔴红点管理：查看后自动清除TabBar红点

3.2 添加好友（add-friend.vue）

• 🔍用户搜索：昵称或ID
• 👥搜索结果：
  • 用户信息展示
  • 好友状态标签
• 🎯智能操作：
  • 已是好友 → 发消息
  • 非好友 → 加好友
  • 已申请 → 等待中

3.3 好友请求（friend-requests.vue）

• 📑双Tab切换：
  • 收到的请求（带数量badge）
  • 发出的请求
• ✅处理请求：同意/拒绝
• 📤管理发出：取消pending请求
• 📊状态显示：等待/已通过/已拒绝

模块优势：

plaintext

✅ 职责清晰：聊天和社区完全分离 ✅ 易于维护：修改不影响其他模块 ✅ 可扩展性：方便添加群聊、语音等功能 ✅ 团队协作：可并行开发

4️⃣ 院校数据模块（School）

页面数量：2个页面

4.1 院校排名（ranking.vue）

• 🏛️ 院校列表展示
• 📊 排名数据
• 🔍 搜索筛选

4.2 院校详情（detail.vue）

• 📋 详细信息
• 📈 历年数据
• 💬 相关讨论

5️⃣ 社区模块（Community）

页面数量：4个页面

5.1 社区首页（index.vue）

• 📑 Tab切换：推荐/最新/关注/精华
• 📝 帖子列表
• ❤️ 点赞、评论、收藏
• 📤 分享功能
• 🔔 未读消息提示

5.2 帖子详情（detail.vue）

• 📖 完整内容展示
• 💬 评论互动
• 👍 点赞收藏
• 📤 分享转发

5.3 发布帖子（post.vue）

• ✏️ 富文本编辑
• 🖼️ 图片上传
• 🏷️ 话题标签

5.4 好友管理（friends.vue）

• 👥 好友列表
• 📊 粉丝/关注
• 🔍 搜索好友
• 💬 私信入口

6️⃣ 个人中心模块（Profile）

页面数量：4个页面

6.1 个人中心（profile.vue）

• 👤 用户信息
• 📊 学习统计
• ⚙️ 设置入口
• 📜 历史记录

6.2 账号设置（settings.vue）

• 🔐 修改密码
• 📱 绑定手机
• 📧 邮箱设置
• 🔔 通知设置

6.3 个人历史（history.vue）

• 📚 浏览历史
• 💬 评论历史
• ❤️ 点赞历史

6.4 知识图谱（knowledge-graph.vue）

• 🕸️ 知识点关联图
• 📊 掌握程度可视化
• 🎯 薄弱点标识

7️⃣ AI助手模块（AI）

页面数量：1个页面

7.1 AI助手（assistant.vue）

• 🤖 RAG知识库问答
• 💬 自然语言交互
• 📚 学习资料推荐
• ❓ 常见问题解答

8️⃣ 背单词模块（Words）

页面数量：1个页面

8.1 背单词（words.vue）

• 📖 单词卡片
• ✅ 认识/不认识
• 📊 记忆曲线
• 🎯 每日任务

9️⃣ 管理员模块（Admin）

页面数量：9个页面

• 🔐 管理员登录
• 📊 管理仪表盘
• 👥 用户管理
• 📝 帖子管理
• 💬 评论管理
• 🚩 举报管理
• 📈 数据统计
• ⚙️ 系统设置
• 📋 操作日志

🏗️ 技术架构

前端技术栈

核心依赖

json

{ "@dcloudio/uni-app": "latest", "@dcloudio/uni-h5": "latest", "@dcloudio/uni-mp-weixin": "latest", "vue": "^3.x" }

项目结构

plaintext

based-ai-learning-com-develop-client/ ├── src/ │ ├── pages/ # 页面目录 │ │ ├── recommend/ # 智能推荐模块 │ │ ├── notebooks/ # 错题本模块（8个页面） │ │ ├── chat/ # 聊天模块（3个页面）✨ │ │ ├── school/ # 院校模块 │ │ ├── community/ # 社区模块 │ │ ├── profile/ # 个人中心模块 │ │ ├── ai/ # AI助手模块 │ │ ├── words/ # 背单词模块 │ │ └── admin/ # 管理员模块 │ ├── components/ │ │ └── common/ │ │ ├── AppIcon.vue # 图标组件（150+图标） │ │ └── CustomTabBar.vue # 自定义TabBar │ ├── services/ │ │ └── api.js # API服务层（960行） │ ├── static/ # 静态资源 │ ├── App.vue # 应用入口 │ ├── main.js # 主文件 │ ├── pages.json # 页面配置 │ └── manifest.json # 应用配置 ├── package.json ├── vite.config.js └── index.html

API架构

认证机制：Bearer Token (JWT)

javascript

// 统一的认证请求封装 export const authenticatedRequest = async (options) => { const token = uni.getStorageSync('token') return uni.request({ ...options, header: { ...options.header, 'Authorization': `Bearer ${token}` } }) }

API分类：

• 用户认证：登录、注册、Token刷新
• 错题本：CRUD操作、列表查询
• 题目管理：添加、编辑、删除、详情
• AI服务：OCR识别、智能分析、RAG问答
• 社交功能：好友、聊天、社区
• 文件服务：阿里云OSS上传

🎨 UI/UX设计

设计规范

颜色方案

圆角规范

• 小圆角：12rpx- 标签、徽章
• 中圆角：24rpx- 卡片、输入框
• 大圆角：36rpx- 按钮、搜索框
• 圆形：50%- 头像、图标容器

阴影规范

css

/* 轻阴影 */ box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.08); /* 中阴影 */ box-shadow: 0 10rpx 26rpx rgba(102, 126, 234, 0.12); /* 重阴影 */ box-shadow: 0 12rpx 24rpx rgba(102, 126, 234, 0.3);

字体大小

• 超大标题：48rpx- 页面主标题
• 大标题：36rpx- 卡片标题
• 中标题：32rpx- 小节标题
• 正文：28rpx- 主要内容
• 辅助文字：24-26rpx- 说明、时间
• 小字：22rpx- 标签、徽章

组件库

AppIcon 图标组件

特性：

• 🎨 150+ Emoji图标
• 📏 6种尺寸：xs/sm/md/lg/xl/xxl
• 🌈 渐变色支持
• ✨ 动画效果：bounce/pulse/rotate/shake
• 🔄 旋转角度自定义

使用示例：

vue

<AppIcon name="ai" size="lg" color="#667eea" /> <AppIcon name="add" size="md" gradient :gradientColors="['#667eea', '#764ba2']" /> <AppIcon name="loading" size="xl" animated animationType="rotate" />

CustomTabBar 自定义导航栏