本周继续对前端的UI进行设计，详情如下：

基于AI大模型的考研学习社区 - UI设计方案

1. 项目概述

这是一个基于uni-app开发的考研学习社区应用，集成了AI助手、错题本管理、智能推荐、社区交流、院校数据查询等功能模块。

2. 整体设计风格

• 色彩主题：采用蓝紫色渐变为主色调（#667eea到#764ba2），辅以粉色系（#be185d）和青色（#06b6d4）作为点缀
• 视觉风格：现代简约风，大量使用圆角卡片、渐变背景和阴影效果
• 图标系统：统一使用emoji表情符号作为图标，通过AppIcon组件封装
• 字体规范：标题字体加粗，正文清晰易读，字号层次分明

3. 主要页面UI结构

3.1 登录/注册页面

• 简洁的表单布局，白色输入框配浅灰背景
• 渐变色按钮设计（蓝色主按钮，透明边框副按钮）
• 快速体验功能入口，绿色（普通用户）和紫色（管理员）区分

3.2 底部导航栏(TabBar)

• 5个主要标签：推荐、错题本、院校、社区、我的
• 选中状态为紫色(#667eea)，未选中为灰色(#9ca3af)
• 白色背景，无边框设计

3.3 首页(推荐页)

• 顶部标题区：大号标题+副标题说明
• 上传区域：紫色渐变背景的卡片式上传入口
• 推荐列表：白色卡片展示推荐题目，包含难度标签、准确率等信息
• 悬浮操作按钮(FAB)：红色渐变圆形按钮用于添加内容

3.4 错题本页面

• 搜索栏：半透明蓝色背景的搜索框
• 卡片列表：白色卡片展示错题本，支持左滑编辑/删除
• 浮动添加按钮：右下角红色圆形按钮
• 空状态提示：居中显示提示信息

3.5 社区页面

• 顶部导航：标题+搜索/消息图标
• Tab切换：推荐、最新、关注、精华四个分类
• 帖子卡片：包含作者头像、发布时间、内容摘要、图片预览、互动统计
• 悬浮发布按钮：紫色渐变FAB

3.6 个人中心

• 用户信息卡：圆形头像、用户名、统计数据（错题本数、错题数、学习天数）
• 功能菜单：垂直排列的功能入口，带图标和箭头指示
• 退出登录：红色文字突出显示

3.7 AI助手页面

• 聊天界面：左右对话气泡布局
• 用户消息：右侧蓝色渐变气泡
• AI回复：左侧白色气泡带阴影
• 输入区域：底部固定输入框+发送按钮

3.8 院校数据页面

• 搜索栏：顶部搜索功能
• Tab切换：专业排名、院校详情、分数线、报录比
• 数据卡片：不同类型的数据展示样式
• 排名标识：数字徽章显示排名

4. 组件设计规范

4.1 AppIcon组件

• 统一使用emoji作为图标源
• 四种尺寸：sm(28rpx)、md(36rpx)、lg(48rpx)、xl(64rpx)
• 支持自定义颜色

4.2 卡片组件

• 统一圆角：24-32rpx
• 阴影效果：轻微阴影提升层次感
• 内边距：32rpx标准间距
• 背景色：纯白或浅色渐变

4.3 按钮组件

• 主要按钮：渐变色背景，白色文字
• 次要按钮：透明背景，彩色边框
• 悬浮按钮(FAB)：圆形，渐变色，固定定位

5. 交互设计特点

• 手势操作：错题本支持左滑显示编辑/删除按钮
• 加载状态：统一的loading提示和骨架屏
• 空状态处理：友好的空数据提示
• 滚动加载：支持下拉刷新和上拉加载更多
• 动画过渡：平滑的页面切换和元素动画

6. 响应式设计

• 适配不同屏幕尺寸
• 使用rpx单位确保跨设备一致性
• 弹性布局(flex)为主，网格布局为辅

7. 特色功能UI

• OCR识别：上传图片自动识别文字
• 智能推荐：基于RAG算法的个性化推荐
• 知识图谱：可视化知识点关联
• 数据统计：图表化学习进度展示

这套UI设计注重用户体验，色彩搭配和谐，功能分区明确，符合移动端应用的设计规范，同时突出了AI辅助学习的核心特色。

代码文件如下：

src 源代码目录（核心）

🗂️ src/pages/ - 页面目录（按功能模块划分）

👤 用户端页面

1️⃣ login/ - 登录模块

• login.vue - 用户登录页面
  • 用户名/密码登录
  • 快速体验入口（普通用户/管理员）
  • 跳转到注册页和管理员登录

2️⃣ register/ - 注册模块

• register.vue - 用户注册页面
  • 新用户账号注册

3️⃣ recommend/ - 智能推荐模块

• index.vue - 推荐首页
  • 上传错题图片（OCR识别）
  • AI智能推荐题目列表
  • 基于RAG知识库的个性化推荐

4️⃣ notebooks/ - 错题本模块（核心功能）

• notebooks.vue - 错题本列表页
  • 搜索错题本
  • 左滑编辑/删除
  • 悬浮添加按钮
• add.vue - 添加/编辑错题本
• add-question.vue - 添加错题到错题本
• detail.vue - 错题本详情页（查看错题列表）
• topic-detail.vue - 单道错题详情页

5️⃣ school/ - 院校数据模块

• ranking.vue - 院校数据主页
  • Tab切换：专业排名、院校详情、分数线、报录比
  • 搜索功能
• detail.vue - 院校详情页
• score.vue - 分数线查询
• ratio.vue - 报录比查询

6️⃣ community/ - 社区交流模块

• index.vue - 社区首页
  • Tab切换：推荐、最新、关注、精华
  • 帖子列表（含图片预览）
  • 点赞、评论、收藏、分享
  • 未读消息提示
• post.vue - 发布帖子页面
• detail.vue - 帖子详情页（查看评论、互动）
• friends.vue - 好友管理
  • 好友列表、粉丝、关注
  • 搜索用户、关注/取消关注
  • 拉黑功能

7️⃣ profile/ - 个人中心模块

• profile.vue - 个人主页
  • 用户信息展示（头像、昵称）
  • 统计数据（错题本数、错题数、学习天数）
  • 功能菜单入口
• settings.vue - 账号设置
• history.vue - 学习历史记录
• knowledge-graph.vue - 知识图谱可视化

8️⃣ ai/ - AI助手模块

• assistant.vue - AI对话界面
  • 聊天窗口（左右气泡布局）
  • 实时AI问答
  • 滚动到底部自动定位

9️⃣ words/ - 背单词模块

• words.vue - 背单词功能（待开发，显示"敬请期待"）

🔟 index/ - 首页

• index.vue - 应用首页（可能是启动页或引导页）

1️⃣1️⃣ knowledge/ - 知识库模块

• 具体文件未展开，可能用于知识管理

---

👨‍💼 admin/ - 管理员后台模块

登录与主界面

• login.vue - 管理员登录页面
• dashboard.vue - 管理仪表盘
  • 数据统计概览
  • 快捷操作入口

内容管理

• users.vue - 用户管理
  • 用户列表、搜索、筛选
  • 禁用/启用用户
  • 删除用户
• posts.vue - 帖子管理
  • 帖子列表、审核
  • 置顶/加精操作
  • 批量操作
• comments.vue - 评论管理
  • 评论列表、审核
  • 删除违规评论
• reports.vue - 举报管理
  • 举报列表查看
  • 处理举报（通过/拒绝）

系统管理

• statistics.vue - 数据统计
  • 用户增长统计
  • 活跃度分析
  • 内容数据统计
• settings.vue - 系统设置
  • 系统参数配置
  • 功能开关
• logs.vue - 操作日志
  • 管理员操作记录
  • 系统运行日志

组件目录（admin/components/）

• ai-audit.vue - AI智能审核组件
• comments-management.vue - 评论管理组件
• knowledge-base.vue - 知识库管理组件
• logs-view.vue - 日志查看组件
• posts-management.vue - 帖子管理组件
• reports-management.vue - 举报管理组件
• settings-view.vue - 设置视图组件
• statistics-view.vue - 统计视图组件
• users-management.vue - 用户管理组件

---

🧩 src/components/ - 公共组件目录

common/

• AppIcon.vue - 统一图标组件
  • 使用emoji作为图标源
  • 支持4种尺寸（sm/md/lg/xl）
  • 支持自定义颜色
  • 封装了50+常用图标映射

---

🔌 src/services/ - API服务层

• api.js - 核心API接口文件（960行）

功能模块分类：

1. 基础请求封装
   • request() - 通用请求方法
   • authenticatedRequest() - 需要认证的请求（自动携带token）
   • adminRequest() - 管理员专用请求
2. 用户模块API
   • 登录、注册、获取/更新用户信息
3. 错题本模块API
   • 错题本CRUD（增删改查）
   • 错题CRUD
4. 院校数据API
   • 专业排名、院校详情
   • 分数线、报录比查询
   • 收藏院校
5. 社区模块API
   • 帖子CRUD、评论CRUD
   • 点赞、收藏
   • 好友管理（关注、粉丝、拉黑）
6. AI功能API
   • AI对话聊天
   • OCR图片识别
   • 智能推荐题目
7. 学习功能API
   • 知识图谱数据
   • 学习历史统计
   • 学习记录查询
8. 文件上传API
   • 阿里云OSS上传（获取凭证+上传文件）
9. 管理员API（大量接口）
   • 仪表盘数据
   • 用户/帖子/评论管理
   • 举报处理
   • 系统设置
   • 操作日志
   • AI智能审核
   • 知识库管理（RAG向量库同步）
   • 批量操作（批量删除、置顶、加精等）

---

🎨 src/static/ - 静态资源目录

• logo.png - 应用Logo
• Tab栏图标（png/jpg格式）：
  • tab-ai.jpg / tab-ai-active.png - AI助手图标
  • tab-notebook.jpg / tab-notebook-active.png - 错题本图标
  • tab-profile.png / tab-profile-active.png - 个人中心图标
  • tab-words.jpg / tab-words-active.png - 背单词图标

---

⚙️ src/App.vue - 应用根组件

• 作用：应用生命周期管理
• 生命周期钩子：
  • onLaunch - 应用启动
  • onShow - 应用显示
  • onHide - 应用隐藏
• 全局样式：可在此定义全局CSS

---

🚀 src/main.js - 应用入口文件

javascript

import { createSSRApp } from "vue";
import App from "./App.vue";

export function createApp() {
  const app = createSSRApp(App);
  return { app };
}

效果图：

登陆界面：

管理员端：

（仅放置帖子管理页面作为展示，其他也均已完成）

用户端：