docs: 更新 README 文档以全面描述系统功能和架构
更新 README.md 文档，详细描述系统功能模块、技术架构、使用指南和开发规范 新增系统架构图、业务流程图和项目结构说明 完善安装部署指南和常见问题解答 补充权限控制逻辑和角色定义说明
This commit is contained in:
YangQiang
parent
b67fc03c01
commit
ae36b314e2
754
README.md
754
README.md
|
|
@ -1,100 +1,714 @@
|
|||
# 爱学蝶变报告系统原型设计
|
||||
# 爱学蝶变报告系统
|
||||
|
||||
这是一个基于 Vue 3 + TDesign 的产品原型网页，展示报告系统的核心功能和角色权限控制。
|
||||
> 一款面向教育机构的智能化学习数据分析与报告管理平台，为教育管理者提供全方位的学习行为洞察、教学质量评估和学生成长追踪能力。
|
||||
|
||||
## 功能特性
|
||||
## 项目概述
|
||||
|
||||
### 核心功能
|
||||
- **四大报告入口模块**：
|
||||
- 作业打卡行为报告：作业打卡行为数据分析与趋势
|
||||
- 学校报告：各学校详细报告与对比分析
|
||||
- 班级报告：班级学习情况与教学质量分析
|
||||
- 学生报告：学生学习轨迹与个性化报告
|
||||
### 业务价值
|
||||
|
||||
### 角色权限控制
|
||||
- **总部长角色**：
|
||||
- 拥有最高权限，可查看并进入全部四类报告入口
|
||||
- 具备所有管理功能，包括数据分析、报告导出等
|
||||
|
||||
- **部长角色**：
|
||||
- 可查看并进入全部四类报告入口（作业打卡行为报告、学校报告、班级报告、学生报告）
|
||||
|
||||
- **学习官角色**：
|
||||
- 仅展示并可进入班级报告、学生报告两类入口
|
||||
爱学蝶变报告系统是一款专为教育管理机构设计的智能化学习数据分析平台。系统通过采集、分析和可视化展示学生学习过程中的多维度数据，帮助教育管理者：
|
||||
|
||||
### 设计特点
|
||||
- 四大报告板块统一的视觉入口样式
|
||||
- 不同角色登录后，入口的显示/隐藏状态差异
|
||||
- 整体布局简洁、层级分明
|
||||
- 响应式设计，支持多设备访问
|
||||
- **精准掌握学习动态**：实时监控学生作业打卡、在线学习、知识点攻克等核心学习行为
|
||||
- **科学评估教学质量**：通过班级、学校、云校多层级数据对比分析，评估教学效果
|
||||
- **优化教学资源配置**：基于数据洞察合理分配学习官、优化课程安排
|
||||
- **促进学生成长**：通过排行榜、笔记评优等激励机制，激发学生学习积极性
|
||||
|
||||
### 应用场景
|
||||
|
||||
本系统主要服务于以下教育管理场景：
|
||||
|
||||
1. **区域教育管理**：总部长可跨区域查看所有云校数据，进行宏观教育决策
|
||||
2. **学校管理**：部长可管理单一云校下的学校、年级、班级数据
|
||||
3. **班级管理**：学习官可查看和管理所负责班级的学生学习情况
|
||||
4. **教学质量评估**：通过多维度报告分析教学效果和学生成长轨迹
|
||||
5. **学生激励机制**：通过排行榜、笔记评优等功能激励学生学习
|
||||
|
||||
### 系统架构概览
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ 爱学蝶变报告系统 │
|
||||
├─────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
|
||||
│ │ 网页端 │ │ 手机端 │ │ 后台管理端 │ │
|
||||
│ │ (PC Browser)│ │ (Mobile) │ │ (Admin) │ │
|
||||
│ └──────┬───────┘ └──────┬───────┘ └──────┬───────┘ │
|
||||
│ │ │ │ │
|
||||
│ ┌──────┴─────────────────┴─────────────────┴───────┐ │
|
||||
│ │ Vue 3 前端应用层 │ │
|
||||
│ │ ┌──────────────────────────────────────────┐ │ │
|
||||
│ │ │ Vue Router 路由层 │ │ │
|
||||
│ │ └──────────────────────────────────────────┘ │ │
|
||||
│ │ ┌────────────┐ ┌────────────┐ ┌────────────┐ │ │
|
||||
│ │ │ TDesign UI │ │ Ant Design │ │ ECharts │ │ │
|
||||
│ │ │ 组件库 │ │ Vue 4 │ │ 图表库 │ │ │
|
||||
│ │ └────────────┘ └────────────┘ └────────────┘ │ │
|
||||
│ └──────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## 核心功能
|
||||
|
||||
### 一、报告中心模块
|
||||
|
||||
报告中心是系统的核心功能模块，提供五大维度的数据分析报告：
|
||||
|
||||
#### 1. 作业打卡行为报告
|
||||
|
||||
**功能描述**：全面分析学生作业打卡行为数据，追踪学习趋势。
|
||||
|
||||
**核心指标**：
|
||||
- 打卡率：存在任何一课程打卡的人数 / 学员人数
|
||||
- 上线率：上线人数 / 学员人数（上线 = 当日任意课程学习+答题时长>30秒）
|
||||
- 互动率：当天点赞+评论的人数 / 当天攻克一个知识点的人数（按人头去重）
|
||||
- 客观题正确率：当日客观题正确数 / 当日客观题总数量
|
||||
- 主观题正确率：当日主观题正确数 / 当日主观题总数量
|
||||
- 作业正确率：(客观题正确数 + 主观题正确数) / (客观题总数量 + 主观题总数量)
|
||||
- 作业优秀率：作业正确率 > 80% 的人数 / 当天攻克一个知识点的人数
|
||||
- 作业进步率：(今日作业正确率 - 昨日作业正确率) / 昨日作业正确率
|
||||
|
||||
**功能特性**：
|
||||
- 多维度筛选：云校、学校、年级、班级、科目、层次、时间范围
|
||||
- 数据明细表：支持列编辑、数据导出
|
||||
- 数据趋势图：支持多指标折线图/柱状图切换
|
||||
- 阈值颜色标识：每列独立配置红色阈值，低于阈值显示红色，阈值~0显示橙色，大于0显示绿色
|
||||
|
||||
#### 2. 学习行为报告
|
||||
|
||||
**功能描述**：分析学员学习行为数据，包括学习时长、在线情况等。
|
||||
|
||||
**核心指标**：
|
||||
- 平均学习时长
|
||||
- 上线人数统计
|
||||
- 学习行为趋势分析
|
||||
|
||||
**功能特性**：
|
||||
- 级联筛选：云校 → 学校 → 年级 → 班级
|
||||
- 数据明细表：支持自定义列显示
|
||||
- 趋势图表：支持多指标展示，可切换折线图/柱状图
|
||||
|
||||
#### 3. 排行榜
|
||||
|
||||
**功能描述**：多维度展示学生排名，激励学生学习积极性。
|
||||
|
||||
**排行榜类型**：
|
||||
- **积分排行榜**：按学生总积分排名，支持时间范围筛选（最多60天）
|
||||
- **完成知识点排行榜**：按完成知识点数量排名
|
||||
- **互动排行榜**：按互动行为（点赞、评论）排名
|
||||
- **笔记精选排行榜**：按笔记被精选数量排名
|
||||
|
||||
**功能特性**：
|
||||
- 多时间维度：今日、本周、本月、自定义时间范围
|
||||
- 多维度筛选：云校、学校、年级、班级、科目、学生层次
|
||||
- 排名徽章：前三名显示金/银/铜牌标识
|
||||
- 数据导出：支持导出排行榜数据
|
||||
|
||||
#### 4. 英语单词报告
|
||||
|
||||
**功能描述**：全面展示英语单词学习数据与学情分析。
|
||||
|
||||
**分析维度**：
|
||||
- **总体学情统计**：在线率、完成率、正确率等核心指标，支持树形表格展示
|
||||
- **答题正确率排名**：按正确率从高到低排列学生排名
|
||||
- **答题进度分布**：按答题完成进度区间统计学生分布
|
||||
- **正确率分布**：按正确率区间统计学生分布
|
||||
- **学生在线统计**：展示在线用户与答题数量趋势，支持分钟/小时/天多维度查看
|
||||
|
||||
**功能特性**：
|
||||
- ECharts 图表可视化
|
||||
- 树形表格展示层级数据
|
||||
- 多维度数据导出
|
||||
|
||||
#### 5. 学习情况总览表
|
||||
|
||||
**功能描述**：全面查看学生学习数据统计与分析的综合性报表。
|
||||
|
||||
**核心指标**：
|
||||
- 首次打卡时间 / 最后打卡时间
|
||||
- 打卡次数（累计打卡课程总次数）
|
||||
- 学习时长（累计学习总时长）
|
||||
- 精选笔记数量（笔记被精选的总数量）
|
||||
- 打卡率（打卡课程数量 / 该时段总课程数）
|
||||
|
||||
**功能特性**：
|
||||
- 多维度筛选：云校、学校、年级、班级、科目、层次、学生姓名、时间范围（最多90天）
|
||||
- 列编辑：支持自定义显示列
|
||||
- 数据导出：支持 Excel 格式导出
|
||||
- 进度条可视化：打卡率以进度条形式展示
|
||||
|
||||
### 二、笔记评优模块
|
||||
|
||||
**功能描述**：查看和管理班级课程笔记评价数据，支持教师对学生笔记进行评优管理。
|
||||
|
||||
**核心功能**：
|
||||
- **课程选择**：按日期查看课程安排，选择具体课程查看笔记提交记录
|
||||
- **笔记展示**：朋友圈风格的作业展示，支持图片墙浏览（最多显示9张，第9格显示「查看全部」遮罩）
|
||||
- **评优管理**：
|
||||
- 支持标记优秀笔记
|
||||
- 支持多选图片进行评优
|
||||
- 已评优笔记锁定，不可修改
|
||||
- **筛选功能**：
|
||||
- 按评优状态筛选（全部/已评优/未评优）
|
||||
- 按学生姓名关键词搜索
|
||||
- **日期选择**：自定义日期选择器，支持快速切换日期
|
||||
|
||||
> **权限说明**：笔记评优功能仅对**学习官**角色开放访问权限。
|
||||
|
||||
### 三、在线学习监控模块
|
||||
|
||||
**功能描述**：实时监控班级在线学习情况，提供课程维度的学习数据监控。
|
||||
|
||||
**核心功能**：
|
||||
- **课表展示**：按日期展示班级课程安排，显示课程状态（未开始/正在上课/已结束）
|
||||
- **学习监控**：
|
||||
- 学生打卡状态
|
||||
- 学生上线状态
|
||||
- 学无交状态（有学习无提交）
|
||||
- 学习时长统计
|
||||
- 答题数据统计
|
||||
- **数据筛选**：支持按打卡状态、上线状态、学无交状态筛选
|
||||
- **精选笔记**：课程结束后可查看精选笔记列表
|
||||
- **今日数据汇总**：查看当日课程数据汇总
|
||||
|
||||
**数据更新机制**：课程结束后数据每30分钟更新一次。
|
||||
|
||||
### 四、课表管理模块
|
||||
|
||||
**功能描述**：管理双师课堂课表，支持课程创建、排课、调课等操作。
|
||||
|
||||
**功能特性**：
|
||||
- 课表创建：支持九大科目（语文、数学、英语、物理、化学、生物、政治、历史、地理）
|
||||
- 课程类型：支持预习、复习课程类型
|
||||
- 单双周管理：支持单双周课表配置
|
||||
- 临时调课：支持临时调课操作
|
||||
|
||||
> **权限说明**：课表管理功能仅对**学习官**角色开放访问权限。
|
||||
|
||||
### 五、后台管理模块
|
||||
|
||||
**功能描述**：提供班级管理、学习官分配等后台管理功能。
|
||||
|
||||
**核心功能**：
|
||||
- **班级分配管理**：
|
||||
- 学校班级树形展示
|
||||
- 学习官分配/解绑
|
||||
- 按学习官查询班级
|
||||
- **学习官查询**：
|
||||
- 按姓名/手机号搜索学习官
|
||||
- 查看学习官负责班级列表
|
||||
|
||||
### 六、移动端模块
|
||||
|
||||
**功能描述**：适配移动设备的管理界面，支持随时随地管理。
|
||||
|
||||
**核心功能**：
|
||||
- 学生管理
|
||||
- 原型设计图预览（悬浮按钮拖拽交互）
|
||||
|
||||
## 权限控制逻辑
|
||||
|
||||
### 角色定义
|
||||
|
||||
系统定义三种核心角色，各角色具有不同的功能访问权限和数据查询范围：
|
||||
|
||||
| 角色 | 功能描述 |
|
||||
|------|----------|
|
||||
| **总部长** | 最高权限角色，可查看所有云校数据 |
|
||||
| **部长** | 学校管理角色，仅可查看其关联的单个云校数据 |
|
||||
| **学习官** | 班级管理角色，仅可查看与账号关联权限的班级数据 |
|
||||
|
||||
### 功能模块访问权限
|
||||
|
||||
| 功能模块 | 总部长 | 部长 | 学习官 |
|
||||
|----------|:------:|:----:|:------:|
|
||||
| 作业打卡行为报告 | ✓ | ✓ | ✗ |
|
||||
| 学习行为报告 | ✓ | ✓ | ✗ |
|
||||
| 排行榜 | ✓ | ✓ | ✗ |
|
||||
| 英语单词报告 | ✓ | ✓ | ✗ |
|
||||
| 学习情况总览表 | ✓ | ✓ | ✗ |
|
||||
| **笔记评优** | ✗ | ✗ | ✓ |
|
||||
| **课表管理** | ✗ | ✗ | ✓ |
|
||||
| 在线学习监控 | ✓ | ✓ | ✓ |
|
||||
| 后台管理 | ✓ | ✓ | ✓ |
|
||||
|
||||
> **特别说明**：
|
||||
> - **笔记评优**和**课表管理**功能模块**仅对学习官角色**开放访问权限
|
||||
> - 其他功能模块对**部长**、**总部长**和**学习官**角色均开放访问权限
|
||||
|
||||
### 数据查询范围权限差异
|
||||
|
||||
| 角色 | 数据查询范围 |
|
||||
|------|-------------|
|
||||
| **总部长** | 可查询**所有云校**数据，无数据范围限制 |
|
||||
| **部长** | 仅可查询其**关联的单个云校**数据 |
|
||||
| **学习官** | 仅可查看与账号**关联权限的班级**数据 |
|
||||
|
||||
**数据筛选级联规则**：
|
||||
```
|
||||
总部长：云校(全部) → 学校(全部) → 年级 → 班级
|
||||
部长： 云校(固定) → 学校(全部) → 年级 → 班级
|
||||
学习官：云校(固定) → 学校(固定) → 年级(固定) → 班级(关联班级)
|
||||
```
|
||||
|
||||
## 技术栈
|
||||
|
||||
- **前端框架**: Vue 3 (Composition API)
|
||||
- **UI 组件库**: TDesign Vue Next
|
||||
- **构建工具**: Vite
|
||||
- **开发语言**: JavaScript
|
||||
### 核心技术
|
||||
|
||||
## 快速开始
|
||||
| 技术 | 版本 | 用途 |
|
||||
|------|------|------|
|
||||
| Vue | 3.4.21+ | 前端核心框架（Composition API） |
|
||||
| Vue Router | 4.6.4+ | 前端路由管理 |
|
||||
| Vite | 5.2.8+ | 前端构建工具 |
|
||||
|
||||
### 安装依赖
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
### UI 组件库
|
||||
|
||||
### 启动开发服务器
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
| 技术 | 版本 | 用途 |
|
||||
|------|------|------|
|
||||
| TDesign Vue Next | 1.18.6+ | 腾讯开源企业级 UI 组件库 |
|
||||
| Ant Design Vue | 4.2.6+ | 蚂蚁集团开源 UI 组件库 |
|
||||
|
||||
### 构建生产版本
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
### 数据处理与可视化
|
||||
|
||||
### 预览生产版本
|
||||
```bash
|
||||
npm run preview
|
||||
```
|
||||
| 技术 | 版本 | 用途 |
|
||||
|------|------|------|
|
||||
| ECharts | 6.0.0+ | 数据可视化图表库 |
|
||||
| XLSX | 0.18.5+ | Excel 文件读写库 |
|
||||
| FileSaver | 2.0.5+ | 文件下载库 |
|
||||
|
||||
### 其他依赖
|
||||
|
||||
| 技术 | 版本 | 用途 |
|
||||
|------|------|------|
|
||||
| Marked | 17.0.5+ | Markdown 解析库 |
|
||||
| SortableJS | 1.15.7+ | 拖拽排序库 |
|
||||
| VueDraggable | 4.1.0+ | Vue 拖拽组件（基于 SortableJS） |
|
||||
| TencentCloud SDK | 4.1.208+ | 腾讯云 SDK |
|
||||
|
||||
### 开发工具
|
||||
|
||||
| 技术 | 版本 | 用途 |
|
||||
|------|------|------|
|
||||
| @vitejs/plugin-vue | 5.0.4+ | Vite Vue 插件 |
|
||||
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
爱学蝶变原型设计/
|
||||
├── index.html # HTML 入口文件
|
||||
├── package.json # 项目配置文件
|
||||
├── vite.config.js # Vite 配置文件
|
||||
├── README.md # 项目说明文档
|
||||
aixuediebian_report/
|
||||
├── index.html # HTML 入口文件
|
||||
├── package.json # 项目依赖配置
|
||||
├── package-lock.json # 依赖锁定文件
|
||||
├── vite.config.js # Vite 构建配置
|
||||
├── styles_patch.css # 样式补丁文件
|
||||
├── .gitignore # Git 忽略配置
|
||||
├── README.md # 项目说明文档
|
||||
├── COLUMN_DRAG_DROP_GUIDE.md # 列拖拽操作指南
|
||||
├── STYLE_FIX_DIAGNOSIS.md # 样式修复诊断文档
|
||||
│
|
||||
└── src/
|
||||
├── main.js # Vue 应用入口
|
||||
├── App.vue # 主应用组件
|
||||
└── components/
|
||||
└── HomePage.vue # 首页组件
|
||||
├── main.js # Vue 应用入口
|
||||
├── App.vue # 根组件（全局配置）
|
||||
│
|
||||
├── router/
|
||||
│ └── index.js # 路由配置
|
||||
│
|
||||
├── assets/ # 静态资源
|
||||
│ ├── logo.png # 系统 Logo
|
||||
│ ├── content-block-1-eZzov1mX.png # 登录页插画
|
||||
│ ├── 工作台-爱学蝶变.png # 原型图
|
||||
│ └── 工作台-爱学蝶变-学生管理.png # 原型图
|
||||
│
|
||||
├── components/ # Vue 组件
|
||||
│ ├── HomeNav.vue # 导航首页（端口选择）
|
||||
│ ├── LoginPage.vue # 登录页面
|
||||
│ ├── PortalHomePage.vue # 后台门户首页
|
||||
│ ├── AdminDashboardPage.vue # 后台管理仪表盘
|
||||
│ ├── HomePage.vue # 报告中心首页
|
||||
│ ├── MobilePrototypePage.vue # 移动端原型页
|
||||
│ │
|
||||
│ ├── CloudSchoolReport.vue # 作业打卡行为报告
|
||||
│ ├── LearningBehaviorReport.vue # 学习行为报告
|
||||
│ ├── LeaderboardPage.vue # 排行榜
|
||||
│ ├── EnglishWordReport.vue # 英语单词报告
|
||||
│ ├── LearningOverviewPage.vue # 学习情况总览表
|
||||
│ │
|
||||
│ ├── NoteEvaluationPage.vue # 笔记评优
|
||||
│ ├── OnlineLearningMonitorPage.vue # 在线学习监控
|
||||
│ ├── ClassAllocationPage.vue # 班级分配管理
|
||||
│ │
|
||||
│ ├── DocIconButton.vue # 文档图标按钮组件
|
||||
│ └── DocModal.vue # 文档弹窗组件
|
||||
│
|
||||
└── md/ # Markdown 文档资源
|
||||
├── CheckinStatsReport.md
|
||||
├── CloudSchoolReport.md
|
||||
├── EnglishWordReport.md
|
||||
├── HomePage.md
|
||||
├── LeaderboardPage.md
|
||||
├── LearningBehaviorReport.md
|
||||
├── LoginPage.md
|
||||
├── NoteEvaluationPage.md
|
||||
└── PortalHomePage.md
|
||||
```
|
||||
|
||||
## 使用说明
|
||||
## 业务流程图
|
||||
|
||||
1. 启动项目后，默认以"部长"角色登录
|
||||
2. 点击顶部导航栏的角色选择器，可切换角色：
|
||||
- 选择"总部长"：显示全部四类报告入口，拥有最高权限
|
||||
- 选择"部长"：显示全部四类报告入口
|
||||
- 选择"学习官"：仅显示班级报告和学生报告
|
||||
3. 点击报告卡片可进入相应模块（原型阶段仅显示提示信息）
|
||||
### 用户登录流程
|
||||
|
||||
## 权限说明
|
||||
```
|
||||
┌─────────┐ ┌──────────────┐ ┌──────────────┐ ┌────────────┐
|
||||
│ 访问系统 │ ──> │ 选择访问端口 │ ──> │ 登录页面 │ ──> │ 验证登录 │
|
||||
└─────────┘ └──────────────┘ └──────────────┘ └─────┬──────┘
|
||||
│ │ │ │
|
||||
│ ┌────┴─────┐ ┌─────┴─────┐ ┌─────┴──────┐
|
||||
│ │ 网页端 │ │ 扫码登录 │ │ 验证成功 │
|
||||
│ │ 手机端 │ │ 账号登录 │ │ 验证失败 │
|
||||
│ │ 后台管理 │ └───────────┘ └─────┬──────┘
|
||||
│ └──────────┘ │
|
||||
│ │
|
||||
│ ┌──────┴──────┐
|
||||
│ │ 进入对应端口 │
|
||||
│ │ 首页 │
|
||||
│ └─────────────┘
|
||||
```
|
||||
|
||||
- 总部长角色：可查看所有四类报告，拥有最高权限
|
||||
- 作业打卡行为报告、学校报告：总部长和部长角色可见
|
||||
- 班级报告、学生报告：总部长、部长和学习官角色均可见
|
||||
- 其他角色可后续扩展
|
||||
### 报告查询流程
|
||||
|
||||
## 扩展建议
|
||||
```
|
||||
┌────────────┐ ┌──────────────┐ ┌──────────────┐ ┌────────────┐
|
||||
│ 进入报告中心│ ──> │ 选择报告类型 │ ──> │ 设置筛选条件 │ ──> │ 查询数据 │
|
||||
└────────────┘ └──────────────┘ └──────────────┘ └─────┬──────┘
|
||||
│
|
||||
┌────────┴────────┐
|
||||
│ │
|
||||
┌──────┴──────┐ ┌──────┴──────┐
|
||||
│ 数据表格 │ │ 趋势图表 │
|
||||
│ - 明细展示 │ │ - 折线图 │
|
||||
│ - 列编辑 │ │ - 柱状图 │
|
||||
│ - 分页 │ │ - 多指标 │
|
||||
└──────┬──────┘ └──────┬──────┘
|
||||
│ │
|
||||
└────────┬───────┘
|
||||
│
|
||||
┌──────┴──────┐
|
||||
│ 导出数据 │
|
||||
│ (Excel) │
|
||||
└─────────────┘
|
||||
```
|
||||
|
||||
如需扩展更多角色或功能，可修改以下文件：
|
||||
### 权限控制流程
|
||||
|
||||
1. `src/App.vue` - 添加新角色选项
|
||||
2. `src/components/HomePage.vue` - 在 `reports` 数据中配置新角色的权限
|
||||
```
|
||||
┌────────────┐ ┌──────────────┐ ┌──────────────┐
|
||||
│ 用户登录 │ ──> │ 识别用户角色 │ ──> │ 加载对应功能 │
|
||||
└────────────┘ └──────────────┘ └──────┬───────┘
|
||||
│
|
||||
┌────────────────┼────────────────┐
|
||||
│ │ │
|
||||
┌──────┴──────┐ ┌──────┴──────┐ ┌──────┴──────┐
|
||||
│ 总部长 │ │ 部长 │ │ 学习官 │
|
||||
│ │ │ │ │ │
|
||||
│ 所有云校数据 │ │ 单个云校数据 │ │ 关联班级数据 │
|
||||
│ 全部报告 │ │ 全部报告 │ │ 笔记评优 │
|
||||
│ │ │ │ │ 课表管理 │
|
||||
└─────────────┘ └─────────────┘ └─────────────┘
|
||||
```
|
||||
|
||||
## 安装部署
|
||||
|
||||
### 环境要求
|
||||
|
||||
| 环境 | 最低版本 | 推荐版本 |
|
||||
|------|----------|----------|
|
||||
| Node.js | 18.0.0 | 20.x LTS |
|
||||
| npm | 9.0.0 | 10.x |
|
||||
| 浏览器 | Chrome 90+ / Edge 90+ / Firefox 88+ | 最新版本 |
|
||||
|
||||
### 安装步骤
|
||||
|
||||
#### 1. 克隆项目
|
||||
|
||||
```bash
|
||||
git clone <repository-url>
|
||||
cd aixuediebian_report
|
||||
```
|
||||
|
||||
#### 2. 安装依赖
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
#### 3. 启动开发服务器
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
启动成功后，浏览器将自动打开 `http://localhost:3000`。
|
||||
|
||||
#### 4. 构建生产版本
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
构建产物将输出到 `dist/` 目录。
|
||||
|
||||
#### 5. 预览生产版本
|
||||
|
||||
```bash
|
||||
npm run preview
|
||||
```
|
||||
|
||||
### 环境配置
|
||||
|
||||
#### Vite 配置
|
||||
|
||||
项目使用 Vite 作为构建工具，主要配置位于 `vite.config.js`：
|
||||
|
||||
```javascript
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
assetsInclude: ['**/*.md'], // 支持 Markdown 文件作为静态资源
|
||||
server: {
|
||||
port: 3000, // 开发服务器端口
|
||||
open: true // 自动打开浏览器
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
#### 样式配置
|
||||
|
||||
项目使用 TDesign 和 Ant Design Vue 两套 UI 组件库，样式已在 `src/main.js` 中全局引入：
|
||||
|
||||
```javascript
|
||||
import TDesign from 'tdesign-vue-next'
|
||||
import 'tdesign-vue-next/es/style/index.css'
|
||||
import Antd from 'ant-design-vue'
|
||||
import 'ant-design-vue/dist/reset.css'
|
||||
```
|
||||
|
||||
### 部署建议
|
||||
|
||||
#### 静态资源部署
|
||||
|
||||
构建后的 `dist/` 目录可直接部署到任意静态文件服务器：
|
||||
|
||||
**Nginx 配置示例**：
|
||||
|
||||
```nginx
|
||||
server {
|
||||
listen 80;
|
||||
server_name your-domain.com;
|
||||
root /path/to/dist;
|
||||
index index.html;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Docker 部署示例**：
|
||||
|
||||
```dockerfile
|
||||
FROM node:20-alpine AS builder
|
||||
WORKDIR /app
|
||||
COPY package*.json ./
|
||||
RUN npm install
|
||||
COPY . .
|
||||
RUN npm run build
|
||||
|
||||
FROM nginx:alpine
|
||||
COPY --from=builder /app/dist /usr/share/nginx/html
|
||||
EXPOSE 80
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
```
|
||||
|
||||
## 使用指南
|
||||
|
||||
### 快速开始
|
||||
|
||||
#### 1. 访问系统
|
||||
|
||||
打开浏览器访问系统地址，进入端口选择页面：
|
||||
|
||||
- **网页端**：PC 浏览器访问，获得完整功能体验
|
||||
- **手机端**：移动端访问，随时随地管理
|
||||
- **后台管理端**：后台管理系统，数据管理与配置
|
||||
|
||||
#### 2. 登录系统
|
||||
|
||||
**测试账号**：
|
||||
- 账号：`1`
|
||||
- 密码：`1`
|
||||
|
||||
**登录方式**：
|
||||
- **扫码登录**：使用劝学 APP 扫码登录（原型阶段暂不可用）
|
||||
- **账号登录**：输入账号密码登录
|
||||
|
||||
#### 3. 进入后台管理
|
||||
|
||||
登录成功后，进入后台门户首页，可访问以下功能模块：
|
||||
|
||||
- **双师课堂**：课表管理
|
||||
- **爱学蝶变**：课表管理、笔记评优、在线学习监控、报告中心
|
||||
|
||||
### 报告中心使用
|
||||
|
||||
#### 查看报告
|
||||
|
||||
1. 点击门户首页的「报告中心」卡片，进入报告中心首页
|
||||
2. 选择需要查看的报告类型：
|
||||
- 作业打卡行为报告
|
||||
- 学习行为报告
|
||||
- 排行榜
|
||||
- 英语单词报告
|
||||
- 学习情况总览表
|
||||
|
||||
#### 筛选数据
|
||||
|
||||
各报告页面均提供筛选功能：
|
||||
|
||||
1. **组织架构筛选**：按云校 → 学校 → 年级 → 班级级联选择
|
||||
2. **范围筛选**：按科目、层次、时间范围筛选
|
||||
3. 点击「查询」按钮获取筛选结果
|
||||
4. 点击「重置」按钮恢复默认筛选条件
|
||||
|
||||
#### 数据操作
|
||||
|
||||
- **列编辑**：点击「编辑列」按钮，自定义显示列
|
||||
- **数据导出**：点击「导出数据」按钮，导出 Excel 文件
|
||||
- **图表切换**：在趋势图区域切换折线图/柱状图，选择展示指标
|
||||
|
||||
### 笔记评优使用
|
||||
|
||||
1. 从门户首页点击「笔记评优」卡片进入
|
||||
2. 选择日期，查看当日课程安排
|
||||
3. 点击课程卡片，查看该课程的笔记提交记录
|
||||
4. 浏览学生提交的笔记（朋友圈风格展示）
|
||||
5. 勾选需要评优的笔记图片
|
||||
6. 点击「标记优秀」完成评优
|
||||
|
||||
### 在线学习监控使用
|
||||
|
||||
1. 从门户首页点击「在线学习监控」卡片进入
|
||||
2. 选择云校、学校、年级、班级
|
||||
3. 选择日期，查看当日课表
|
||||
4. 点击课程，查看该课程的学习监控数据
|
||||
5. 使用筛选条件筛选学生数据
|
||||
6. 课程结束后可查看「精选笔记列表」
|
||||
|
||||
### 后台管理使用
|
||||
|
||||
1. 从端口选择页面进入「后台管理端」
|
||||
2. 进入管理后台仪表盘
|
||||
3. 展开「爱学蝶变板块」菜单
|
||||
4. 点击「班级分配管理」进行班级学习官分配
|
||||
|
||||
## 常见问题
|
||||
|
||||
### Q1: 项目启动后无法访问？
|
||||
|
||||
**解决方案**：
|
||||
1. 确认 Node.js 版本 >= 18.0.0：`node -v`
|
||||
2. 确认依赖已正确安装：`npm install`
|
||||
3. 确认端口 3000 未被占用
|
||||
4. 尝试手动访问 `http://localhost:3000`
|
||||
|
||||
### Q2: 扫码登录不可用？
|
||||
|
||||
**说明**：当前为产品原型演示阶段，扫码登录功能暂不可用。请使用账号密码登录：
|
||||
- 测试账号：`1`
|
||||
- 测试密码：`1`
|
||||
|
||||
### Q3: 如何切换角色查看不同权限？
|
||||
|
||||
**说明**：当前原型版本中，角色权限逻辑已内置。不同角色登录后将自动加载对应的功能模块和数据范围。
|
||||
|
||||
### Q4: 数据导出失败？
|
||||
|
||||
**解决方案**：
|
||||
1. 确认已选择有效的筛选条件
|
||||
2. 确认浏览器允许文件下载
|
||||
3. 检查控制台是否有错误信息
|
||||
|
||||
### Q5: 图表显示异常？
|
||||
|
||||
**解决方案**：
|
||||
1. 确认已选择有效的筛选条件并点击查询
|
||||
2. 确认浏览器支持 Canvas 渲染
|
||||
3. 尝试刷新页面重新加载图表
|
||||
|
||||
### Q6: 构建生产版本时报错？
|
||||
|
||||
**解决方案**：
|
||||
1. 清理缓存后重新构建：
|
||||
```bash
|
||||
rm -rf dist node_modules/.vite
|
||||
npm run build
|
||||
```
|
||||
2. 确认 Node.js 版本兼容性
|
||||
3. 检查是否有未提交的代码冲突
|
||||
|
||||
### Q7: 如何自定义阈值颜色？
|
||||
|
||||
**操作说明**：
|
||||
1. 在报告页面点击「编辑列」按钮
|
||||
2. 在列编辑弹窗中找到目标列
|
||||
3. 点击列标题旁的齿轮图标
|
||||
4. 设置该列的计算阈值与红色阈值
|
||||
5. 颜色规则：
|
||||
- 差值低于红色阈值：显示红色
|
||||
- 差值在红色阈值~0 之间：显示橙色
|
||||
- 差值大于 0：显示绿色
|
||||
|
||||
### Q8: 笔记评优功能谁可以使用？
|
||||
|
||||
**权限说明**：笔记评优功能**仅对学习官角色**开放。部长和总部长角色无法访问此功能。
|
||||
|
||||
### Q9: 课表管理功能谁可以使用？
|
||||
|
||||
**权限说明**：课表管理功能**仅对学习官角色**开放。部长和总部长角色无法访问此功能。
|
||||
|
||||
### Q10: 不同角色的数据查询范围有什么区别？
|
||||
|
||||
**权限说明**：
|
||||
- **总部长**：可查询所有云校数据，无数据范围限制
|
||||
- **部长**：仅可查询其关联的单个云校数据
|
||||
- **学习官**：仅可查看与账号关联权限的班级数据
|
||||
|
||||
## 开发指南
|
||||
|
||||
### 添加新报告模块
|
||||
|
||||
1. 在 `src/components/` 目录下创建新的 Vue 组件
|
||||
2. 在 `src/router/index.js` 中添加路由配置
|
||||
3. 在 `src/components/HomePage.vue` 的 `reports` 数组中添加报告入口
|
||||
|
||||
### 添加新角色
|
||||
|
||||
1. 在登录逻辑中添加新角色选项
|
||||
2. 在各组件中根据角色控制功能模块的显示/隐藏
|
||||
3. 根据角色控制数据查询范围
|
||||
|
||||
### 样式开发
|
||||
|
||||
项目使用 scoped CSS 进行样式隔离，遵循以下规范：
|
||||
- 组件样式使用 `<style scoped>`
|
||||
- 全局样式在 `App.vue` 中定义
|
||||
- 使用 CSS 变量管理主题色
|
||||
- 响应式设计支持多设备适配
|
||||
|
||||
## 许可证
|
||||
|
||||
MIT License
|
||||
|
||||
Copyright © 2025 QuanXue. All Rights Reserved.
|
||||
|
||||
渝ICP备05088888号
|
||||
|
|
|
|||
Loading…
Reference in New Issue