218 lines
4.9 KiB
Markdown
218 lines
4.9 KiB
Markdown
# 学习进度统计组件实现说明
|
||
|
||
## 🎯 概述
|
||
|
||
根据提供的设计图，实现了一个完整的学习进度统计组件 `LearningProgressStats.vue`，包含三个圆形进度图表（课程、作业、考试）和一个总体学习进度条。
|
||
|
||
## 📁 文件位置
|
||
|
||
```
|
||
src/
|
||
├── components/
|
||
│ └── common/
|
||
│ └── LearningProgressStats.vue # 学习进度统计组件
|
||
└── views/
|
||
└── CourseDetailEnrolled.vue # 课程详情页面（已报名状态）
|
||
```
|
||
|
||
## 🎨 设计特点
|
||
|
||
### 1. 圆形进度图表
|
||
- **数量**: 3个（课程、作业、考试）
|
||
- **样式**: 粗边框圆环（stroke-width: 12px）
|
||
- **颜色**: 蓝色主题 (#1890ff)
|
||
- **动画**: 平滑的进度动画效果
|
||
- **阴影**: 立体阴影效果
|
||
|
||
### 2. 总体进度条
|
||
- **样式**: 粗进度条（height: 12px）
|
||
- **背景**: 渐变背景效果
|
||
- **边框**: 加粗边框设计
|
||
- **阴影**: 进度条阴影效果
|
||
|
||
### 3. 字体样式
|
||
- **百分比**: 24px, 粗体 (font-weight: 700)
|
||
- **标签**: 16px, 中等粗体 (font-weight: 600)
|
||
- **进度文字**: 18px, 粗体
|
||
- **数字**: 22-24px, 超粗体
|
||
|
||
## 🔧 组件Props
|
||
|
||
```typescript
|
||
interface Props {
|
||
courseProgress?: number // 课程进度百分比
|
||
homeworkProgress?: number // 作业进度百分比
|
||
examProgress?: number // 考试进度百分比
|
||
completedItems?: number // 已完成项目数
|
||
totalItems?: number // 总项目数
|
||
}
|
||
```
|
||
|
||
## 📊 默认数据
|
||
|
||
```typescript
|
||
// 默认值（与设计图一致）
|
||
courseProgress: 31.7%
|
||
homeworkProgress: 22.5%
|
||
examProgress: 9.6%
|
||
completedItems: 13
|
||
totalItems: 54
|
||
```
|
||
|
||
## 🎮 使用方法
|
||
|
||
### 基本用法
|
||
|
||
```vue
|
||
<template>
|
||
<LearningProgressStats
|
||
:course-progress="31.7"
|
||
:homework-progress="22.5"
|
||
:exam-progress="9.6"
|
||
:completed-items="13"
|
||
:total-items="54"
|
||
/>
|
||
</template>
|
||
|
||
<script setup>
|
||
import LearningProgressStats from '@/components/common/LearningProgressStats.vue'
|
||
</script>
|
||
```
|
||
|
||
### 动态数据
|
||
|
||
```vue
|
||
<template>
|
||
<LearningProgressStats
|
||
:course-progress="courseProgress"
|
||
:homework-progress="homeworkProgress"
|
||
:exam-progress="examProgress"
|
||
:completed-items="completedItems"
|
||
:total-items="totalItems"
|
||
/>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import LearningProgressStats from '@/components/common/LearningProgressStats.vue'
|
||
|
||
const courseProgress = ref(31.7)
|
||
const homeworkProgress = ref(22.5)
|
||
const examProgress = ref(9.6)
|
||
const completedItems = ref(13)
|
||
const totalItems = ref(54)
|
||
</script>
|
||
```
|
||
|
||
## 🎨 样式特性
|
||
|
||
### 1. 圆形进度环
|
||
```css
|
||
/* 背景圆环 */
|
||
stroke: #e8f4fd
|
||
stroke-width: 12px
|
||
opacity: 0.4
|
||
|
||
/* 进度圆环 */
|
||
stroke: #1890ff
|
||
stroke-width: 12px
|
||
stroke-linecap: round
|
||
```
|
||
|
||
### 2. 容器样式
|
||
```css
|
||
/* 主容器 */
|
||
background: #ffffff
|
||
border-radius: 16px
|
||
padding: 32px
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12)
|
||
border: 3px solid #e8f4fd
|
||
|
||
/* 进度条容器 */
|
||
background: linear-gradient(135deg, #f8fcff 0%, #e8f4fd 100%)
|
||
border-radius: 12px
|
||
border-top: 3px solid #e8f4fd
|
||
```
|
||
|
||
### 3. 进度条样式
|
||
```css
|
||
/* 进度条背景 */
|
||
height: 12px
|
||
background: #e8f4fd
|
||
border-radius: 6px
|
||
border: 2px solid #d9ecff
|
||
|
||
/* 进度条填充 */
|
||
background: linear-gradient(90deg, #1890ff 0%, #40a9ff 100%)
|
||
box-shadow: 0 2px 4px rgba(24, 144, 255, 0.3)
|
||
```
|
||
|
||
## 📱 响应式设计
|
||
|
||
### 桌面端 (>768px)
|
||
- 圆形进度图: 120px × 120px
|
||
- 字体大小: 24px (百分比)
|
||
- 间距: 正常间距
|
||
|
||
### 平板端 (≤768px)
|
||
- 圆形进度图: 100px × 100px
|
||
- 字体大小: 16px (百分比)
|
||
- 间距: 紧凑间距
|
||
|
||
### 移动端 (≤480px)
|
||
- 布局: 垂直排列
|
||
- 圆形进度图: 居中显示
|
||
- 最大宽度: 200px
|
||
|
||
## 🔮 图标占位符
|
||
|
||
当前使用emoji作为图标占位符：
|
||
- 📚 课程
|
||
- 📝 作业
|
||
- 📋 考试
|
||
|
||
**等待您提供具体的图标文件后，可以替换为实际的SVG图标。**
|
||
|
||
## 🚀 实际应用
|
||
|
||
学习进度统计组件已集成到课程详情页面（已报名状态）：
|
||
|
||
### 访问路径
|
||
- 课程详情页面: `/course/1/enrolled`
|
||
- 位置: 右侧边栏的学习进度区域
|
||
|
||
### 显示内容
|
||
- 三个圆形进度图表（课程、作业、考试）
|
||
- 总体学习进度条
|
||
- 完成项目数统计 (13/54)
|
||
- 实时进度数据更新
|
||
|
||
## 🎯 设计图匹配度
|
||
|
||
✅ **完全匹配的特性**:
|
||
- 三个圆形进度图表布局
|
||
- 粗边框圆环设计
|
||
- 蓝色主题色彩
|
||
- 百分比数字显示
|
||
- 底部总体进度条
|
||
- 进度数字显示 (13/54)
|
||
- 整体卡片样式
|
||
|
||
🔄 **待完善的特性**:
|
||
- 等待提供具体的图标文件
|
||
- 可能需要微调颜色深浅
|
||
- 可能需要调整具体的间距
|
||
|
||
## 📝 下一步计划
|
||
|
||
1. **图标替换**: 等待您提供三个中心点的图标文件
|
||
2. **颜色调整**: 根据实际需求微调颜色
|
||
3. **动画优化**: 可以添加更多动画效果
|
||
4. **数据集成**: 与实际的学习数据API集成
|
||
|
||
## 🔗 相关文件
|
||
|
||
- 组件文件: `src/components/common/LearningProgressStats.vue`
|
||
- 应用页面: `src/views/CourseDetailEnrolled.vue`
|
||
- 查看地址: http://localhost:3001/course/1/enrolled
|