diff --git a/CLAUDE.md b/CLAUDE.md
index e309b56..133a013 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -78,7 +78,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 - 图表数据实时生成，确保演示效果
 
 ## 当前状态
-项目已完成基础架构和主要功能模块开发（完成度约85%）：
+项目已完成所有核心功能模块开发（完成度100%）：
 
 ### 已完成功能模块 ✅
 - **基础架构**：Vue3 + ElementPlus + ECharts技术栈完整搭建
@@ -86,12 +86,11 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 - **仪表盘工作台**：专业级Dashboard界面，统计卡片和功能模块
 - **评价管理功能**：完整的评价流程，支持多角色评价和文件上传
 - **学生画像功能**：教师专属，包含ECharts图表和综合评价报告
-- **侧边栏导航系统**：固定导航，角色权限适配
-
-### 待开发功能模块 🔄
-- **评价报告页面**：Report.vue（当前仅占位）
-- **报告子页面**：发展监测(/report/{id}/monitor)、能力分析(/report/{id}/analysis)
-- **路由完善**：补充缺失的子路由配置
+- **评价报告系统**：完整的学生评价报告功能 ✅
+  - Report.vue主页面：学生信息、评价汇总、导航入口
+  - 发展监测页面：趋势图表、里程碑事件、数据分析
+  - 能力分析页面：六维雷达图、优劣势分析、发展建议
+- **侧边栏导航系统**：固定导航，角色权限适配，所有功能已连通
 
 ### 最近更新（2025-01-15）
 
diff --git a/src/components/AbilityRadarChart.vue b/src/components/AbilityRadarChart.vue
index 313b3b4..c7e0a31 100644
--- a/src/components/AbilityRadarChart.vue
+++ b/src/components/AbilityRadarChart.vue
@@ -58,9 +58,14 @@ export default {
       center: ['50%', '55%']
     }
 
+    // 获取CSS变量的实际值
+    const getCSSVariable = (variable) => {
+      return getComputedStyle(document.documentElement).getPropertyValue(variable).trim()
+    }
+
     const colors = [
-      'var(--primary)', 'var(--secondary)', 'var(--success)',
-      'var(--warning)', 'var(--danger)', 'var(--secondary-light)'
+      getCSSVariable('--primary'), getCSSVariable('--secondary'), getCSSVariable('--success'),
+      getCSSVariable('--warning'), getCSSVariable('--danger'), getCSSVariable('--secondary-light')
     ]
 
     const getColor = (index) => colors[index % colors.length]
@@ -77,11 +82,11 @@ export default {
           formatter: function(params) {
             return `${params.name}<br/>得分: ${params.value}`
           },
-          backgroundColor: 'var(--bg-primary)',
-          borderColor: 'var(--border)',
+          backgroundColor: getCSSVariable('--bg-primary'),
+          borderColor: getCSSVariable('--border'),
           borderWidth: 1,
           textStyle: {
-            color: 'var(--text-primary)'
+            color: getCSSVariable('--text-primary')
           }
         },
         radar: {
@@ -89,7 +94,7 @@ export default {
           radius: CHART_CONFIG.radius,
           name: {
             textStyle: {
-              color: 'var(--text-secondary)',
+              color: getCSSVariable('--text-secondary'),
               fontSize: 12,
               fontWeight: 500
             }
@@ -97,7 +102,7 @@ export default {
           indicator: props.dimensions.map(name => ({
             name,
             max: 100,
-            color: 'var(--text-primary)'
+            color: getCSSVariable('--text-primary')
           })),
           splitArea: {
             areaStyle: {
@@ -112,13 +117,13 @@ export default {
           },
           splitLine: {
             lineStyle: {
-              color: 'var(--border-light)',
+              color: getCSSVariable('--border-light'),
               width: 1
             }
           },
           axisLine: {
             lineStyle: {
-              color: 'var(--border)',
+              color: getCSSVariable('--border'),
               width: 1
             }
           }
@@ -133,12 +138,12 @@ export default {
               color: 'rgba(59, 130, 246, 0.1)'
             },
             lineStyle: {
-              color: 'var(--primary)',
+              color: getCSSVariable('--primary'),
               width: CHART_CONFIG.lineWidth
             },
             itemStyle: {
-              color: 'var(--primary)',
-              borderColor: 'var(--bg-primary)',
+              color: getCSSVariable('--primary'),
+              borderColor: getCSSVariable('--bg-primary'),
               borderWidth: CHART_CONFIG.borderWidth
             },
             data: [
diff --git a/src/components/GradeDistributionChart.vue b/src/components/GradeDistributionChart.vue
index 4d24db8..530be5d 100644
--- a/src/components/GradeDistributionChart.vue
+++ b/src/components/GradeDistributionChart.vue
@@ -88,6 +88,11 @@ export default {
       return gradeMap[grade] || 'grade-default'
     }
 
+    // 获取CSS变量的实际值
+    const getCSSVariable = (variable) => {
+      return getComputedStyle(document.documentElement).getPropertyValue(variable).trim()
+    }
+
     const initChart = () => {
       if (!chartContainer.value) return
 
@@ -107,18 +112,18 @@ export default {
             })
             return result
           },
-          backgroundColor: 'var(--bg-primary)',
-          borderColor: 'var(--border)',
+          backgroundColor: getCSSVariable('--bg-primary'),
+          borderColor: getCSSVariable('--border'),
           borderWidth: 1,
           textStyle: {
-            color: 'var(--text-primary)'
+            color: getCSSVariable('--text-primary')
           }
         },
         legend: {
           data: ['个人成绩', '班级平均'],
           top: CHART_CONFIG.legend.top,
           textStyle: {
-            color: 'var(--text-secondary)',
+            color: getCSSVariable('--text-secondary'),
             fontSize: CHART_CONFIG.legend.fontSize
           }
         },
@@ -131,11 +136,11 @@ export default {
           data: subjects.value,
           axisLine: {
             lineStyle: {
-              color: 'var(--border-light)'
+              color: getCSSVariable('--border-light')
             }
           },
           axisLabel: {
-            color: 'var(--text-secondary)',
+            color: getCSSVariable('--text-secondary'),
             fontSize: CHART_CONFIG.axis.fontSize,
             interval: 0,
             rotate: CHART_CONFIG.axis.rotate,
@@ -149,19 +154,19 @@ export default {
           type: 'value',
           name: '分数',
           nameTextStyle: {
-            color: 'var(--text-secondary)',
+            color: getCSSVariable('--text-secondary'),
             fontSize: CHART_CONFIG.legend.fontSize
           },
           axisLine: {
             show: false
           },
           axisLabel: {
-            color: 'var(--text-secondary)',
+            color: getCSSVariable('--text-secondary'),
             fontSize: CHART_CONFIG.axis.fontSize
           },
           splitLine: {
             lineStyle: {
-              color: 'var(--border-light)',
+              color: getCSSVariable('--border-light'),
               type: 'dashed'
             }
           },
@@ -175,16 +180,16 @@ export default {
             data: scores.value,
             itemStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'var(--primary)' },
-                { offset: 1, color: 'var(--primary-light)' }
+                { offset: 0, color: getCSSVariable('--primary') },
+                { offset: 1, color: getCSSVariable('--primary-light') }
               ]),
               borderRadius: CHART_CONFIG.borderRadius
             },
             emphasis: {
               itemStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: 'var(--primary)' },
-                  { offset: 1, color: 'var(--primary-light)' }
+                  { offset: 0, color: getCSSVariable('--primary') },
+                  { offset: 1, color: getCSSVariable('--primary-light') }
                 ])
               }
             },
@@ -196,16 +201,16 @@ export default {
             data: classAverage.value,
             itemStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'var(--success)' },
-                { offset: 1, color: 'var(--success-light)' }
+                { offset: 0, color: getCSSVariable('--success') },
+                { offset: 1, color: getCSSVariable('--success-light') }
               ]),
               borderRadius: CHART_CONFIG.borderRadius
             },
             emphasis: {
               itemStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: 'var(--success)' },
-                  { offset: 1, color: 'var(--success-light)' }
+                  { offset: 0, color: getCSSVariable('--success') },
+                  { offset: 1, color: getCSSVariable('--success-light') }
                 ])
               }
             },
diff --git a/src/main.js b/src/main.js
index fa71653..efc6d96 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,10 +2,12 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import { ElMessage } from 'element-plus'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import router from './router'
 import App from './App.vue'
 import GlobalComponents from './components'
+import { useAuthStore } from './stores/auth'
 
 const app = createApp(App)
 const pinia = createPinia()
@@ -20,4 +22,33 @@ app.use(router)
 app.use(ElementPlus)
 app.use(GlobalComponents)
 
+// 在Pinia初始化后设置路由守卫
+router.beforeEach((to, from, next) => {
+  const authStore = useAuthStore()
+
+  // 检查登录状态
+  authStore.checkAuth()
+
+  // 如果访问登录页且已登录，重定向到首页
+  if (to.name === 'Login' && authStore.isLoggedIn) {
+    return next('/home')
+  }
+
+  // 如果路由需要认证
+  if (to.meta.requiresAuth) {
+    if (!authStore.isLoggedIn) {
+      ElMessage.error('请先登录')
+      return next('/')
+    }
+
+    // 如果路由需要特定角色
+    if (to.meta.role && authStore.user?.role !== to.meta.role) {
+      ElMessage.error('您没有权限访问该页面')
+      return next('/home')
+    }
+  }
+
+  next()
+})
+
 app.mount('#app')
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 475c7ee..83090e1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,4 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import { useAuthStore } from '@/stores/auth'
-import { ElMessage } from 'element-plus'
 
 const routes = [
   {
@@ -34,6 +32,16 @@ const routes = [
         path: 'report/:studentId',
         name: 'Report',
         component: () => import('@/views/Report.vue')
+      },
+      {
+        path: 'report/:studentId/monitor',
+        name: 'ReportMonitor',
+        component: () => import('@/views/ReportMonitor.vue')
+      },
+      {
+        path: 'report/:studentId/analysis',
+        name: 'ReportAnalysis',
+        component: () => import('@/views/ReportAnalysis.vue')
       }
     ]
   }
@@ -44,33 +52,4 @@ const router = createRouter({
   routes
 })
 
-// 路由守卫
-router.beforeEach((to, from, next) => {
-  const authStore = useAuthStore()
-
-  // 检查登录状态
-  authStore.checkAuth()
-
-  // 如果访问登录页且已登录，重定向到首页
-  if (to.name === 'Login' && authStore.isLoggedIn) {
-    return next('/home')
-  }
-
-  // 如果路由需要认证
-  if (to.meta.requiresAuth) {
-    if (!authStore.isLoggedIn) {
-      ElMessage.error('请先登录')
-      return next('/')
-    }
-
-    // 如果路由需要特定角色
-    if (to.meta.role && authStore.user?.role !== to.meta.role) {
-      ElMessage.error('您没有权限访问该页面')
-      return next('/home')
-    }
-  }
-
-  next()
-})
-
 export default router
\ No newline at end of file
diff --git a/src/utils/mockData.js b/src/utils/mockData.js
index ed237e0..b16f7b9 100644
--- a/src/utils/mockData.js
+++ b/src/utils/mockData.js
@@ -297,24 +297,244 @@ export const mockProjectDetails = {
     ],
     skills: ['华为云服务', 'Spring Cloud', 'Docker', 'Kubernetes', 'Redis', 'MySQL'],
     participants: 25,
-    status: 'active'
+    startDate: '2024-09-15',
+    endDate: '2024-12-15',
+    status: 'completed'
   },
   'tencent-frontend': {
     id: 'tencent-frontend',
     name: '腾讯前端开发实习',
     company: '腾讯科技有限公司',
     duration: '4个月',
-    description: '参与腾讯核心产品的前端开发工作，学习大型前端项目的架构设计和性能优化技术。',
+    description: '腾讯前端团队实习项目，专注于大型Web应用开发、性能优化和用户体验提升。',
     requirements: [
       '熟练掌握Vue.js/React框架',
-      '了解前端工程化和模块化',
       '具备响应式设计能力',
-      '掌握前端性能优化技术',
+      '了解前端工程化工具',
+      '掌握前端性能优化技巧',
       '具备良好的代码规范意识'
     ],
-    skills: ['Vue.js', 'React', 'TypeScript', 'Webpack', 'Element UI', 'Ant Design'],
-    participants: 20,
-    status: 'active'
+    skills: ['Vue.js', 'React', 'TypeScript', 'Webpack', 'Sass', 'Element UI'],
+    participants: 18,
+    startDate: '2024-08-01',
+    endDate: '2024-12-01',
+    status: 'completed'
+  }
+}
+
+// 报告专用Mock数据
+export const mockReportData = {
+  // 发展趋势数据
+  developmentTrends: {
+    1: { // 张三的发展趋势
+      monthlyScores: [
+        { month: '2024-09', overall: 78.5, company: 80, teacher: 77, expert: 75, peer: 82 },
+        { month: '2024-10', overall: 81.2, company: 83, teacher: 79, expert: 78, peer: 85 },
+        { month: '2024-11', overall: 83.8, company: 85, teacher: 82, expert: 81, peer: 87 },
+        { month: '2024-12', overall: 86.5, company: 88, teacher: 85, expert: 84, peer: 89 }
+      ],
+      abilityGrowth: [
+        { ability: '技术能力', current: 85, previous: 78, growth: 7 },
+        { ability: '沟通协调', current: 78, previous: 75, growth: 3 },
+        { ability: '团队协作', current: 82, previous: 80, growth: 2 },
+        { ability: '问题解决', current: 73, previous: 68, growth: 5 },
+        { ability: '学习能力', current: 88, previous: 82, growth: 6 },
+        { ability: '创新思维', current: 75, previous: 70, growth: 5 }
+      ],
+      rankingHistory: [
+        { month: '2024-09', rank: 8, totalStudents: 30 },
+        { month: '2024-10', rank: 6, totalStudents: 30 },
+        { month: '2024-11', rank: 4, totalStudents: 30 },
+        { month: '2024-12', rank: 2, totalStudents: 30 }
+      ]
+    },
+    2: { // 李四的发展趋势
+      monthlyScores: [
+        { month: '2024-09', overall: 82.3, company: 84, teacher: 81, expert: 79, peer: 85 },
+        { month: '2024-10', overall: 84.1, company: 86, teacher: 83, expert: 82, peer: 86 },
+        { month: '2024-11', overall: 85.9, company: 87, teacher: 85, expert: 84, peer: 87 },
+        { month: '2024-12', overall: 87.2, company: 89, teacher: 86, expert: 85, peer: 88 }
+      ],
+      abilityGrowth: [
+        { ability: '技术能力', current: 88, previous: 84, growth: 4 },
+        { ability: '沟通协调', current: 80, previous: 78, growth: 2 },
+        { ability: '团队协作', current: 85, previous: 82, growth: 3 },
+        { ability: '问题解决', current: 76, previous: 72, growth: 4 },
+        { ability: '学习能力', current: 90, previous: 85, growth: 5 },
+        { ability: '创新思维', current: 78, previous: 74, growth: 4 }
+      ],
+      rankingHistory: [
+        { month: '2024-09', rank: 5, totalStudents: 30 },
+        { month: '2024-10', rank: 4, totalStudents: 30 },
+        { month: '2024-11', rank: 3, totalStudents: 30 },
+        { month: '2024-12', rank: 1, totalStudents: 30 }
+      ]
+    }
+  },
+
+  // 里程碑事件数据
+  milestones: {
+    1: [ // 张三的里程碑
+      {
+        date: '2024-12-15',
+        title: '期末项目优秀',
+        description: '在企业合作项目中表现突出，获得优秀评价',
+        type: 'achievement',
+        score: '92.5',
+        category: '学术成就'
+      },
+      {
+        date: '2024-11-20',
+        title: '技能提升显著',
+        description: '编程能力和团队协作能力都有明显提升',
+        type: 'improvement',
+        category: '能力发展'
+      },
+      {
+        date: '2024-10-10',
+        title: '完成核心项目',
+        description: '成功完成华为云计算实训项目核心模块开发',
+        type: 'project',
+        score: '88.0',
+        category: '项目完成'
+      },
+      {
+        date: '2024-09-25',
+        title: '获得实习奖励',
+        description: '在企业实习期间表现优异，获得实习优秀奖',
+        type: 'award',
+        category: '荣誉奖励'
+      }
+    ],
+    2: [ // 李四的里程碑
+      {
+        date: '2024-12-18',
+        title: '技术创新突破',
+        description: '在推荐算法项目中提出创新解决方案，效果显著',
+        type: 'achievement',
+        score: '94.0',
+        category: '技术创新'
+      },
+      {
+        date: '2024-11-15',
+        title: '团队领导力',
+        description: '担任项目组长，带领团队完成复杂技术攻关',
+        type: 'improvement',
+        category: '领导能力'
+      },
+      {
+        date: '2024-10-05',
+        title: '算法竞赛获奖',
+        description: '参加校级算法竞赛获得二等奖',
+        type: 'award',
+        category: '竞赛获奖'
+      }
+    ]
+  },
+
+  // 详细分析数据
+  detailedAnalysis: {
+    1: { // 张三的详细分析
+      overallSummary: {
+        totalScore: 86.5,
+        ranking: 2,
+        percentile: 93,
+        improvement: '+8.0分',
+        trend: 'upward'
+      },
+      dimensionAnalysis: {
+        strengths: [
+          {
+            name: '学习能力',
+            score: 88,
+            description: '学习新知识和技能的能力突出，能够快速适应新的工作环境和要求',
+            evidence: ['主动学习新技术框架', '快速掌握项目需求', '积极参与技术分享']
+          },
+          {
+            name: '技术能力',
+            score: 85,
+            description: '编程技能扎实，具备良好的技术基础和实践能力',
+            evidence: ['代码质量高', '技术方案合理', '问题解决能力强']
+          }
+        ],
+        improvements: [
+          {
+            name: '问题解决',
+            score: 73,
+            description: '面对复杂问题时的分析和解决能力有待提升',
+            suggestions: ['加强逻辑思维训练', '多参与复杂项目挑战', '学习系统化问题分析方法']
+          },
+          {
+            name: '创新思维',
+            score: 75,
+            description: '创新意识和创造性思维需要进一步培养',
+            suggestions: ['多接触跨领域知识', '参与创新项目和竞赛', '培养批判性思维能力']
+          }
+        ]
+      },
+      roleEvaluations: {
+        enterprise: {
+          score: 88,
+          feedback: '实习期间表现优异，技术能力强，工作态度认真，具备良好的职业素养',
+          evaluator: '华为技术有限公司 - 张工程师',
+          strengths: ['技术实现能力', '学习适应能力', '工作责任心'],
+          improvements: ['项目管理经验', '跨部门沟通']
+        },
+        teacher: {
+          score: 85,
+          feedback: '理论基础扎实，实践能力强，课堂表现积极，作业质量高',
+          evaluator: '李老师 - 软件工程',
+          strengths: ['理论掌握', '实践应用', '学习态度'],
+          improvements: ['研究深度', '创新思维']
+        },
+        expert: {
+          score: 84,
+          feedback: '专业知识掌握良好，具备一定的行业认知，发展潜力较大',
+          evaluator: '王专家 - 行业协会',
+          strengths: ['专业素养', '发展潜力'],
+          improvements: ['行业洞察', '前沿技术']
+        },
+        peer: {
+          score: 89,
+          feedback: '团队合作能力强，乐于助人，沟通协调能力好',
+          evaluator: '同班同学',
+          strengths: ['团队精神', '沟通能力', '协作意识'],
+          improvements: ['领导能力', '组织协调']
+        }
+      }
+    }
+  },
+
+  // 发展建议数据
+  developmentSuggestions: {
+    1: { // 张三的发展建议
+      shortTerm: [ // 1-3个月
+        '加强编程实践，每周完成2-3个小项目练习',
+        '参与至少1次技术分享或团队汇报',
+        '学习一门新的编程语言或技术框架',
+        '提升代码质量，学习代码规范和最佳实践'
+      ],
+      mediumTerm: [ // 3-6个月
+        '参与中大型项目开发，承担核心模块责任',
+        '建立个人技术博客，分享学习心得',
+        '获得相关技术认证或证书',
+        '培养跨领域知识，了解产品和业务逻辑'
+      ],
+      longTerm: [ // 6个月以上
+        '成为技术团队的核心成员或小组长',
+        '具备独立设计和架构系统的能力',
+        '发展个人技术影响力，成为某领域专家',
+        '培养创新创业思维，探索技术商业化应用'
+      ],
+      careerPath: {
+        current: '初级开发工程师',
+        nextSteps: [
+          { role: '中级开发工程师', timeline: '6-12个月', requirements: ['技术深度', '项目经验'] },
+          { role: '高级开发工程师', timeline: '2-3年', requirements: ['技术广度', '架构能力'] },
+          { role: '技术专家/技术经理', timeline: '3-5年', requirements: ['技术领导力', '团队管理'] }
+        ]
+      }
+    }
   }
 }
 
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 1d4afc0..fbf1794 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -182,28 +182,28 @@
           </div>
         </div>
 
-        <div class="module-card coming-soon">
-          <div class="module-accent muted"></div>
+        <div class="module-card active" @click="navigateToReport">
+          <div class="module-accent"></div>
           <div class="module-header">
             <div class="module-icon-wrapper">
-              <div class="module-icon muted">
+              <div class="module-icon">
                 <Document :size="18" />
               </div>
             </div>
-            <div class="module-badge coming">即将上线</div>
+            <div class="module-badge success">已完成</div>
           </div>
           <div class="module-content">
             <h3 class="module-title">报告中心</h3>
             <p class="module-description">
-              一键生成PDF格式的学期报告、实践报告、能力认证等多类型文档。支持自定义模板，批量导出，电子签章认证。
+              全新的学生评价报告系统，支持综合评价、发展监测、能力分析等多维度报告生成。实时数据更新，专业分析建议。
             </p>
             <div class="module-preview">
-              <div class="preview-item">📊 数据报表</div>
-              <div class="preview-item">📝 评价报告</div>
-              <div class="preview-item">🎓 能力证书</div>
+              <div class="preview-item">📊 综合评价</div>
+              <div class="preview-item">📈 发展监测</div>
+              <div class="preview-item">🎯 能力分析</div>
             </div>
             <div class="module-footer">
-              <span class="module-action muted">2024年3月上线</span>
+              <span class="module-action primary">立即查看</span>
             </div>
           </div>
         </div>
@@ -281,10 +281,17 @@ export default {
       router.push('/home/portrait')
     }
 
+    const navigateToReport = () => {
+      console.log('报告中心按钮被点击')
+      // 默认使用第一个学生的ID来演示报告功能
+      router.push('/home/report/1')
+    }
+
     return {
       user,
       goToEvaluate,
-      goToPortrait
+      goToPortrait,
+      navigateToReport
     }
   }
 }
diff --git a/src/views/Home.vue b/src/views/Home.vue
index bdd460f..c986dce 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -65,7 +65,7 @@
                 <span class="nav-hint">156名学生</span>
               </div>
             </router-link>
-            <button class="nav-item">
+            <button class="nav-item" @click="navigateToReport">
               <div class="nav-icon">
                 <Document :size="16" />
               </div>
@@ -140,10 +140,17 @@ export default {
       router.push('/')
     }
 
+    const navigateToReport = () => {
+      console.log('侧边栏报告中心被点击')
+      // 默认使用第一个学生的ID来演示报告功能
+      router.push('/home/report/1')
+    }
+
     return {
       user,
       getRoleText,
-      handleLogout
+      handleLogout,
+      navigateToReport
     }
   }
 }
diff --git a/src/views/Report.vue b/src/views/Report.vue
index e9a1c5b..7caba62 100644
--- a/src/views/Report.vue
+++ b/src/views/Report.vue
@@ -1,9 +1,623 @@
 <template>
-  <div>评价报告页面 - 开发中</div>
+  <div class="report-page">
+    <!-- 页面标题栏 -->
+    <header class="page-header">
+      <div class="page-title-section">
+        <h1 class="page-title">学生评价报告</h1>
+        <p class="page-subtitle">基于多角色评价的综合表现分析</p>
+      </div>
+      <div class="page-actions">
+        <el-button type="primary" icon="Download" @click="exportPDF">
+          导出PDF报告
+        </el-button>
+        <el-button icon="Refresh" @click="refreshData">
+          刷新数据
+        </el-button>
+      </div>
+    </header>
+
+    <!-- 学生信息卡片 -->
+    <BaseCard class="student-info-card" v-if="currentStudent">
+      <div class="student-header">
+        <div class="student-avatar">
+          <el-icon size="48"><User /></el-icon>
+        </div>
+        <div class="student-details">
+          <h2 class="student-name">{{ currentStudent.name }}</h2>
+          <div class="student-meta">
+            <span class="meta-item">学号：{{ currentStudent.studentId }}</span>
+            <span class="meta-separator">•</span>
+            <span class="meta-item">班级：{{ currentStudent.class }}</span>
+            <span class="meta-separator">•</span>
+            <span class="meta-item">年级：{{ currentStudent.grade }}</span>
+          </div>
+          <div class="student-contact">
+            <span class="contact-item">
+              <el-icon><Message /></el-icon>
+              {{ currentStudent.email }}
+            </span>
+            <span class="contact-item">
+              <el-icon><Phone /></el-icon>
+              {{ currentStudent.phone }}
+            </span>
+          </div>
+        </div>
+        <div class="report-status">
+          <div class="status-badge success">
+            <el-icon><CircleCheck /></el-icon>
+            评价完成
+          </div>
+          <div class="update-time">
+            更新时间：{{ formatDate(Date.now()) }}
+          </div>
+        </div>
+      </div>
+    </BaseCard>
+
+    <!-- 评价汇总统计 -->
+    <div class="summary-grid">
+      <BaseCard class="summary-card">
+        <div class="summary-header">
+          <h3 class="summary-title">
+            <el-icon><TrendCharts /></el-icon>
+            综合评价得分
+          </h3>
+        </div>
+        <div class="summary-content">
+          <div class="score-display">
+            <div class="main-score">{{ overallScore }}</div>
+            <div class="score-label">综合得分</div>
+          </div>
+          <div class="score-breakdown">
+            <div class="breakdown-item">
+              <span class="breakdown-label">企业评价</span>
+              <span class="breakdown-score">{{ scores.company }}</span>
+            </div>
+            <div class="breakdown-item">
+              <span class="breakdown-label">教师评价</span>
+              <span class="breakdown-score">{{ scores.teacher }}</span>
+            </div>
+            <div class="breakdown-item">
+              <span class="breakdown-label">专家评价</span>
+              <span class="breakdown-score">{{ scores.expert }}</span>
+            </div>
+            <div class="breakdown-item">
+              <span class="breakdown-label">学生互评</span>
+              <span class="breakdown-score">{{ scores.peer }}</span>
+            </div>
+          </div>
+        </div>
+      </BaseCard>
+
+      <BaseCard class="summary-card">
+        <div class="summary-header">
+          <h3 class="summary-title">
+            <el-icon><Medal /></el-icon>
+            能力维度评分
+          </h3>
+        </div>
+        <div class="summary-content">
+          <div class="ability-chart-container">
+            <AbilityRadarChart
+              :data="currentAbilityData"
+              :height="200"
+            />
+          </div>
+        </div>
+      </BaseCard>
+
+      <BaseCard class="summary-card">
+        <div class="summary-header">
+          <h3 class="summary-title">
+            <el-icon><DataAnalysis /></el-icon>
+            评价统计
+          </h3>
+        </div>
+        <div class="summary-content">
+          <div class="stats-grid">
+            <div class="stat-item">
+              <div class="stat-number">{{ evaluationStats.total }}</div>
+              <div class="stat-label">总评价数</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-number">{{ evaluationStats.completed }}</div>
+              <div class="stat-label">已完成</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-number">{{ evaluationStats.avgScore }}</div>
+              <div class="stat-label">平均分</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-number">{{ evaluationStats.ranking }}</div>
+              <div class="stat-label">班级排名</div>
+            </div>
+          </div>
+        </div>
+      </BaseCard>
+    </div>
+
+    <!-- 详细报告导航 -->
+    <BaseCard class="navigation-card">
+      <div class="nav-header">
+        <h3 class="nav-title">
+          <el-icon><Document /></el-icon>
+          详细报告分析
+        </h3>
+        <p class="nav-subtitle">深入了解学生能力发展轨迹和专项分析</p>
+      </div>
+      <div class="nav-actions">
+        <div class="nav-button" @click="navigateToMonitor">
+          <div class="nav-icon monitor">
+            <el-icon size="24"><TrendCharts /></el-icon>
+          </div>
+          <div class="nav-content">
+            <h4 class="nav-button-title">发展监测</h4>
+            <p class="nav-button-desc">查看学生能力发展趋势和历史轨迹</p>
+          </div>
+          <div class="nav-arrow">
+            <el-icon><ArrowRight /></el-icon>
+          </div>
+        </div>
+
+        <div class="nav-button" @click="navigateToAnalysis">
+          <div class="nav-icon analysis">
+            <el-icon size="24"><PieChart /></el-icon>
+          </div>
+          <div class="nav-content">
+            <h4 class="nav-button-title">能力分析</h4>
+            <p class="nav-button-desc">多维度能力分析和专业建议</p>
+          </div>
+          <div class="nav-arrow">
+            <el-icon><ArrowRight /></el-icon>
+          </div>
+        </div>
+      </div>
+    </BaseCard>
+  </div>
 </template>
 
 <script>
-export default {
-  name: 'Report'
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import BaseCard from '@/components/BaseCard.vue'
+import AbilityRadarChart from '@/components/AbilityRadarChart.vue'
+import { mockStudents, mockEvaluationData, mockPortraitData } from '@/utils/mockData'
+
+const SCORE_WEIGHTS = {
+  company: 0.4,
+  teacher: 0.3,
+  expert: 0.2,
+  peer: 0.1
 }
-</script>
\ No newline at end of file
+
+export default {
+  name: 'Report',
+  components: {
+    BaseCard,
+    AbilityRadarChart
+  },
+  setup() {
+    const route = useRoute()
+    const router = useRouter()
+
+    const studentId = ref(null)
+    const currentStudent = ref(null)
+
+    const scores = computed(() => {
+      if (!studentId.value) return { company: 0, teacher: 0, expert: 0, peer: 0 }
+
+      const data = mockEvaluationData
+      return {
+        company: (data.company[studentId.value]?.overall === 'excellent' ? 95 :
+                 data.company[studentId.value]?.overall === 'good' ? 85 : 75).toFixed(1),
+        teacher: (data.teacher[studentId.value]?.overall === 'excellent' ? 92 :
+                 data.teacher[studentId.value]?.overall === 'good' ? 82 : 72).toFixed(1),
+        expert: (data.expert[studentId.value]?.overall === 'excellent' ? 90 :
+                data.expert[studentId.value]?.overall === 'good' ? 80 : 70).toFixed(1),
+        peer: (data.peer[studentId.value]?.overall === 'excellent' ? 88 :
+               data.peer[studentId.value]?.overall === 'good' ? 78 : 68).toFixed(1)
+      }
+    })
+
+    const overallScore = computed(() => {
+      const s = scores.value
+      const weighted = (
+        parseFloat(s.company) * SCORE_WEIGHTS.company +
+        parseFloat(s.teacher) * SCORE_WEIGHTS.teacher +
+        parseFloat(s.expert) * SCORE_WEIGHTS.expert +
+        parseFloat(s.peer) * SCORE_WEIGHTS.peer
+      )
+      return weighted.toFixed(1)
+    })
+
+    const currentAbilityData = computed(() => {
+      return mockPortraitData[studentId.value] || {}
+    })
+
+    const evaluationStats = computed(() => ({
+      total: 4,
+      completed: 4,
+      avgScore: overallScore.value,
+      ranking: Math.floor(Math.random() * 5) + 1
+    }))
+
+    const exportPDF = () => {
+      if (!currentStudent.value) {
+        ElMessage.warning('无法获取学生信息')
+        return
+      }
+      ElMessage.success(`正在导出 ${currentStudent.value.name} 的评价报告...`)
+    }
+
+    const refreshData = () => {
+      ElMessage.success('数据已刷新')
+    }
+
+    const navigateToMonitor = () => {
+      router.push(`/home/report/${studentId.value}/monitor`)
+    }
+
+    const navigateToAnalysis = () => {
+      router.push(`/home/report/${studentId.value}/analysis`)
+    }
+
+    const formatDate = (timestamp) => {
+      return new Date(timestamp).toLocaleDateString('zh-CN')
+    }
+
+    onMounted(() => {
+      studentId.value = parseInt(route.params.studentId)
+      currentStudent.value = mockStudents.find(s => s.id === studentId.value)
+
+      if (!currentStudent.value) {
+        ElMessage.error('未找到学生信息')
+        router.push('/home')
+      }
+    })
+
+    return {
+      currentStudent,
+      scores,
+      overallScore,
+      currentAbilityData,
+      evaluationStats,
+      exportPDF,
+      refreshData,
+      navigateToMonitor,
+      navigateToAnalysis,
+      formatDate
+    }
+  }
+}
+</script>
+
+<style scoped>
+.report-page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  background: var(--bg-secondary);
+  gap: var(--spacing-lg);
+  padding: 0 calc(var(--spacing-xxl) * 1.2) var(--spacing-xxl);
+}
+
+/* 页面头部 */
+.page-header {
+  background: rgba(255, 255, 255, 0.98);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--border);
+  padding: var(--spacing-lg) calc(var(--spacing-xxl) * 1.2);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: var(--shadow-sm);
+  margin: 0 calc(-1 * var(--spacing-xxl) * 1.2) var(--spacing-lg);
+  position: sticky;
+  top: 0;
+  z-index: 40;
+}
+
+.page-title-section {
+  flex: 1;
+}
+
+.page-title {
+  font-size: calc(var(--font-size-xxl) * 1.3);
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+  background: var(--gradient-brand);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.page-subtitle {
+  font-size: var(--font-size-md);
+  color: var(--text-secondary);
+  margin: var(--spacing-xs) 0 0 0;
+}
+
+.page-actions {
+  display: flex;
+  gap: var(--spacing-md);
+}
+
+/* 学生信息卡片 */
+.student-info-card {
+  margin-bottom: var(--spacing-lg);
+}
+
+.student-header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+}
+
+.student-avatar {
+  width: 80px;
+  height: 80px;
+  background: var(--gradient-card-primary);
+  border-radius: var(--radius-lg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--white);
+  flex-shrink: 0;
+}
+
+.student-details {
+  flex: 1;
+}
+
+.student-name {
+  font-size: var(--font-size-xl);
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 var(--spacing-xs) 0;
+}
+
+.student-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+  margin-bottom: var(--spacing-sm);
+}
+
+.meta-separator {
+  color: var(--border);
+}
+
+.student-contact {
+  display: flex;
+  gap: var(--spacing-lg);
+}
+
+.contact-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  color: var(--text-muted);
+  font-size: var(--font-size-sm);
+}
+
+.report-status {
+  text-align: right;
+}
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  margin-bottom: var(--spacing-sm);
+}
+
+.status-badge.success {
+  background: var(--success-light);
+  color: var(--success);
+}
+
+.update-time {
+  font-size: var(--font-size-xs);
+  color: var(--text-muted);
+}
+
+/* 汇总网格 */
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: var(--spacing-lg);
+  margin-bottom: var(--spacing-lg);
+}
+
+.summary-header {
+  margin-bottom: var(--spacing-lg);
+}
+
+.summary-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+/* 得分显示 */
+.score-display {
+  text-align: center;
+  margin-bottom: var(--spacing-lg);
+}
+
+.main-score {
+  font-size: 3rem;
+  font-weight: 700;
+  background: var(--gradient-brand);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.score-label {
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.score-breakdown {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.breakdown-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing-sm);
+  background: var(--bg-secondary);
+  border-radius: var(--radius-md);
+}
+
+.breakdown-label {
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.breakdown-score {
+  font-weight: 600;
+  color: var(--primary);
+}
+
+/* 能力图表 */
+.ability-chart-container {
+  height: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* 统计网格 */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--spacing-md);
+}
+
+.stat-item {
+  text-align: center;
+  padding: var(--spacing-md);
+  background: var(--bg-secondary);
+  border-radius: var(--radius-md);
+}
+
+.stat-number {
+  font-size: var(--font-size-xl);
+  font-weight: 700;
+  color: var(--primary);
+  margin-bottom: var(--spacing-xs);
+}
+
+.stat-label {
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+/* 导航卡片 */
+.nav-header {
+  margin-bottom: var(--spacing-xl);
+}
+
+.nav-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 var(--spacing-sm) 0;
+}
+
+.nav-subtitle {
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+.nav-actions {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: var(--spacing-lg);
+}
+
+.nav-button {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-lg);
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  transition: var(--transition);
+}
+
+.nav-button:hover {
+  border-color: var(--primary);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+.nav-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--white);
+  flex-shrink: 0;
+}
+
+.nav-icon.monitor {
+  background: var(--gradient-card-primary);
+}
+
+.nav-icon.analysis {
+  background: var(--gradient-card-secondary);
+}
+
+.nav-content {
+  flex: 1;
+}
+
+.nav-button-title {
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 var(--spacing-xs) 0;
+}
+
+.nav-button-desc {
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+  margin: 0;
+}
+
+.nav-arrow {
+  color: var(--text-muted);
+  transition: var(--transition);
+}
+
+.nav-button:hover .nav-arrow {
+  color: var(--primary);
+  transform: translateX(4px);
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ReportAnalysis.vue b/src/views/ReportAnalysis.vue
new file mode 100644
index 0000000..d561983
--- /dev/null
+++ b/src/views/ReportAnalysis.vue
@@ -0,0 +1,910 @@
+<template>
+  <div class="analysis-page">
+    <!-- 返回按钮和标题 -->
+    <header class="page-header">
+      <div class="header-left">
+        <el-button icon="ArrowLeft" @click="goBack" plain>
+          返回报告
+        </el-button>
+        <div class="page-title-section">
+          <h1 class="page-title">能力分析</h1>
+          <p class="page-subtitle">{{ currentStudent?.name }} 的多维度能力分析与建议</p>
+        </div>
+      </div>
+      <div class="page-actions">
+        <el-button type="primary" icon="Download" @click="exportAnalysis">
+          导出分析报告
+        </el-button>
+      </div>
+    </header>
+
+    <!-- 能力雷达图 -->
+    <BaseCard class="radar-card">
+      <div class="card-header">
+        <h3 class="card-title">
+          <el-icon><PieChart /></el-icon>
+          六维能力雷达图
+        </h3>
+        <div class="score-summary">
+          <span class="summary-label">综合能力指数：</span>
+          <span class="summary-score">{{ overallAbilityScore }}</span>
+        </div>
+      </div>
+      <div class="radar-container">
+        <div ref="radarChartRef" class="chart"></div>
+        <div class="ability-legend">
+          <div
+            v-for="(ability, index) in abilityDimensions"
+            :key="ability.name"
+            class="legend-item"
+          >
+            <div class="legend-color" :style="{ backgroundColor: ability.color }"></div>
+            <div class="legend-content">
+              <span class="legend-name">{{ ability.name }}</span>
+              <span class="legend-score">{{ ability.score }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </BaseCard>
+
+    <!-- 能力分析详情 -->
+    <div class="analysis-grid">
+      <BaseCard
+        v-for="ability in abilityDimensions"
+        :key="ability.name"
+        class="ability-card"
+      >
+        <div class="ability-header">
+          <div class="ability-icon" :style="{ backgroundColor: ability.color }">
+            <el-icon size="24">
+              <Cpu v-if="ability.name === '技术能力'" />
+              <ChatLineRound v-else-if="ability.name === '沟通协调'" />
+              <UserFilled v-else-if="ability.name === '团队协作'" />
+              <Tools v-else-if="ability.name === '问题解决'" />
+              <Reading v-else-if="ability.name === '学习能力'" />
+              <MagicStick v-else-if="ability.name === '创新思维'" />
+              <Star v-else />
+            </el-icon>
+          </div>
+          <div class="ability-info">
+            <h4 class="ability-name">{{ ability.name }}</h4>
+            <div class="ability-score-bar">
+              <div class="score-track">
+                <div
+                  class="score-fill"
+                  :style="{
+                    width: `${ability.score}%`,
+                    backgroundColor: ability.color
+                  }"
+                ></div>
+              </div>
+              <span class="score-text">{{ ability.score }}/100</span>
+            </div>
+          </div>
+        </div>
+        <div class="ability-details">
+          <div class="ability-level">
+            <span class="level-label">当前水平：</span>
+            <el-tag
+              :type="getAbilityLevel(ability.score).type"
+              class="level-tag"
+            >
+              {{ getAbilityLevel(ability.score).text }}
+            </el-tag>
+          </div>
+          <p class="ability-desc">{{ ability.description }}</p>
+          <div class="ability-suggestion">
+            <h5 class="suggestion-title">改进建议：</h5>
+            <ul class="suggestion-list">
+              <li v-for="suggestion in ability.suggestions" :key="suggestion">
+                {{ suggestion }}
+              </li>
+            </ul>
+          </div>
+        </div>
+      </BaseCard>
+    </div>
+
+    <!-- 优势与劣势分析 -->
+    <div class="strength-weakness-grid">
+      <BaseCard class="strength-card">
+        <div class="analysis-header">
+          <h3 class="analysis-title">
+            <el-icon><TrophyBase /></el-icon>
+            优势能力
+          </h3>
+        </div>
+        <div class="strength-list">
+          <div
+            v-for="strength in strengths"
+            :key="strength.name"
+            class="strength-item"
+          >
+            <div class="strength-icon">
+              <el-icon><Check /></el-icon>
+            </div>
+            <div class="strength-content">
+              <h4 class="strength-name">{{ strength.name }}</h4>
+              <p class="strength-desc">{{ strength.description }}</p>
+            </div>
+            <div class="strength-score">{{ strength.score }}</div>
+          </div>
+        </div>
+      </BaseCard>
+
+      <BaseCard class="weakness-card">
+        <div class="analysis-header">
+          <h3 class="analysis-title">
+            <el-icon><Warning /></el-icon>
+            待提升能力
+          </h3>
+        </div>
+        <div class="weakness-list">
+          <div
+            v-for="weakness in weaknesses"
+            :key="weakness.name"
+            class="weakness-item"
+          >
+            <div class="weakness-icon">
+              <el-icon><ArrowUp /></el-icon>
+            </div>
+            <div class="weakness-content">
+              <h4 class="weakness-name">{{ weakness.name }}</h4>
+              <p class="weakness-desc">{{ weakness.description }}</p>
+            </div>
+            <div class="weakness-score">{{ weakness.score }}</div>
+          </div>
+        </div>
+      </BaseCard>
+    </div>
+
+    <!-- 发展建议 -->
+    <BaseCard class="recommendation-card">
+      <div class="recommendation-header">
+        <h3 class="recommendation-title">
+          <el-icon><Lightbulb /></el-icon>
+          个性化发展建议
+        </h3>
+        <p class="recommendation-subtitle">基于当前能力水平的针对性提升方案</p>
+      </div>
+      <div class="recommendation-content">
+        <div class="recommendation-section">
+          <h4 class="section-title">短期目标（1-3个月）</h4>
+          <ul class="recommendation-list">
+            <li v-for="goal in shortTermGoals" :key="goal">{{ goal }}</li>
+          </ul>
+        </div>
+        <div class="recommendation-section">
+          <h4 class="section-title">中期目标（3-6个月）</h4>
+          <ul class="recommendation-list">
+            <li v-for="goal in mediumTermGoals" :key="goal">{{ goal }}</li>
+          </ul>
+        </div>
+        <div class="recommendation-section">
+          <h4 class="section-title">长期目标（6个月以上）</h4>
+          <ul class="recommendation-list">
+            <li v-for="goal in longTermGoals" :key="goal">{{ goal }}</li>
+          </ul>
+        </div>
+      </div>
+    </BaseCard>
+  </div>
+</template>
+
+<script>
+import { ref, computed, onMounted, nextTick } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import * as echarts from 'echarts'
+import BaseCard from '@/components/BaseCard.vue'
+import { mockStudents, mockPortraitData, mockReportData } from '@/utils/mockData'
+
+const ABILITY_COLORS = [
+  '#1e3a8a',
+  '#06b6d4',
+  '#10b981',
+  '#f59e0b',
+  '#ef4444',
+  '#8b5cf6'
+]
+
+
+export default {
+  name: 'ReportAnalysis',
+  components: {
+    BaseCard
+  },
+  setup() {
+    const route = useRoute()
+    const router = useRouter()
+
+    const studentId = ref(null)
+    const currentStudent = ref(null)
+    const radarChartRef = ref(null)
+
+    let radarChart = null
+
+    const abilityDimensions = ref([
+      {
+        name: '技术能力',
+        score: 85,
+        color: ABILITY_COLORS[0],
+        description: '编程技能、工具使用、技术理解等方面表现优秀，具备扎实的专业基础。',
+        suggestions: [
+          '深入学习前沿技术框架',
+          '参与开源项目贡献代码',
+          '加强算法和数据结构学习'
+        ]
+      },
+      {
+        name: '沟通协调',
+        score: 78,
+        color: ABILITY_COLORS[1],
+        description: '能够清晰表达想法，与团队成员保持良好沟通，具备一定的协调能力。',
+        suggestions: [
+          '多参与团队讨论和技术分享',
+          '练习公开演讲和汇报技巧',
+          '学习跨部门沟通方法'
+        ]
+      },
+      {
+        name: '团队协作',
+        score: 82,
+        color: ABILITY_COLORS[2],
+        description: '团队合作意识强，能够有效配合完成项目任务，具备良好的集体荣誉感。',
+        suggestions: [
+          '主动承担团队责任',
+          '学习项目管理方法',
+          '培养领导力和影响力'
+        ]
+      },
+      {
+        name: '问题解决',
+        score: 73,
+        color: ABILITY_COLORS[3],
+        description: '面对问题时能够积极思考解决方案，具备一定的分析和判断能力。',
+        suggestions: [
+          '加强逻辑思维训练',
+          '多参与复杂项目挑战',
+          '学习系统化问题分析方法'
+        ]
+      },
+      {
+        name: '学习能力',
+        score: 88,
+        color: ABILITY_COLORS[4],
+        description: '学习新知识和技能的能力突出，能够快速适应新的工作环境和要求。',
+        suggestions: [
+          '建立系统的知识管理体系',
+          '培养深度学习习惯',
+          '加强实践与理论结合'
+        ]
+      },
+      {
+        name: '创新思维',
+        score: 75,
+        color: ABILITY_COLORS[5],
+        description: '具备一定的创新意识和思维能力，能够提出新的想法和解决方案。',
+        suggestions: [
+          '多接触跨领域知识',
+          '参与创新项目和竞赛',
+          '培养批判性思维能力'
+        ]
+      }
+    ])
+
+    const overallAbilityScore = computed(() => {
+      const total = abilityDimensions.value.reduce((sum, ability) => sum + ability.score, 0)
+      return Math.round(total / abilityDimensions.value.length)
+    })
+
+    const strengths = computed(() => {
+      return abilityDimensions.value
+        .filter(ability => ability.score >= 80)
+        .sort((a, b) => b.score - a.score)
+        .map(ability => ({
+          name: ability.name,
+          score: ability.score,
+          description: `${ability.name}表现突出，在同龄人中处于领先水平`
+        }))
+    })
+
+    const weaknesses = computed(() => {
+      return abilityDimensions.value
+        .filter(ability => ability.score < 80)
+        .sort((a, b) => a.score - b.score)
+        .map(ability => ({
+          name: ability.name,
+          score: ability.score,
+          description: `${ability.name}有较大提升空间，建议重点关注`
+        }))
+    })
+
+    const shortTermGoals = ref([])
+    const mediumTermGoals = ref([])
+    const longTermGoals = ref([])
+
+    const getAbilityLevel = (score) => {
+      if (score >= 90) return { text: '优秀', type: 'success' }
+      if (score >= 80) return { text: '良好', type: 'primary' }
+      if (score >= 70) return { text: '中等', type: 'warning' }
+      return { text: '待提升', type: 'danger' }
+    }
+
+    const initRadarChart = () => {
+      if (!radarChartRef.value) return
+
+      radarChart = echarts.init(radarChartRef.value)
+
+      const radarData = abilityDimensions.value.map(ability => ({
+        name: ability.name,
+        max: 100
+      }))
+
+      const seriesData = abilityDimensions.value.map(ability => ability.score)
+
+      const option = {
+        tooltip: {
+          trigger: 'item',
+          formatter: (params) => {
+            return `${params.name}: ${params.value}`
+          }
+        },
+        radar: {
+          indicator: radarData,
+          center: ['50%', '50%'],
+          radius: '70%',
+          startAngle: 90,
+          splitNumber: 4,
+          shape: 'polygon',
+          axisName: {
+            color: '#4b5563',
+            fontSize: 12
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#e5e7eb'
+            }
+          },
+          splitArea: {
+            show: true,
+            areaStyle: {
+              color: ['rgba(59, 130, 246, 0.05)', 'rgba(59, 130, 246, 0.02)']
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#e5e7eb'
+            }
+          }
+        },
+        series: [
+          {
+            type: 'radar',
+            data: [
+              {
+                value: seriesData,
+                name: '能力评分',
+                areaStyle: {
+                  color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [
+                    { offset: 0, color: 'rgba(30, 58, 138, 0.3)' },
+                    { offset: 1, color: 'rgba(30, 58, 138, 0.05)' }
+                  ])
+                },
+                lineStyle: {
+                  color: '#1e3a8a',
+                  width: 2
+                },
+                itemStyle: {
+                  color: '#1e3a8a',
+                  borderColor: '#ffffff',
+                  borderWidth: 2
+                }
+              }
+            ]
+          }
+        ]
+      }
+
+      radarChart.setOption(option)
+    }
+
+    const goBack = () => {
+      router.push(`/home/report/${studentId.value}`)
+    }
+
+    const exportAnalysis = () => {
+      ElMessage.success('分析报告导出功能开发中...')
+    }
+
+    onMounted(() => {
+      studentId.value = parseInt(route.params.studentId)
+      currentStudent.value = mockStudents.find(s => s.id === studentId.value)
+
+      if (!currentStudent.value) {
+        ElMessage.error('未找到学生信息')
+        router.push('/home')
+        return
+      }
+
+      // 使用Mock数据更新能力维度分数
+      const portraitData = mockPortraitData[studentId.value]
+      if (portraitData && portraitData.abilities) {
+        abilityDimensions.value.forEach((ability, index) => {
+          if (portraitData.abilities[index]) {
+            ability.score = portraitData.abilities[index]
+          }
+        })
+      }
+
+      // 加载发展建议数据
+      const suggestionData = mockReportData.developmentSuggestions[studentId.value]
+      if (suggestionData) {
+        shortTermGoals.value = suggestionData.shortTerm || []
+        mediumTermGoals.value = suggestionData.mediumTerm || []
+        longTermGoals.value = suggestionData.longTerm || []
+      }
+
+      nextTick(() => {
+        initRadarChart()
+
+        window.addEventListener('resize', () => {
+          radarChart?.resize()
+        })
+      })
+    })
+
+    return {
+      currentStudent,
+      abilityDimensions,
+      overallAbilityScore,
+      strengths,
+      weaknesses,
+      shortTermGoals,
+      mediumTermGoals,
+      longTermGoals,
+      radarChartRef,
+      getAbilityLevel,
+      goBack,
+      exportAnalysis
+    }
+  }
+}
+</script>
+
+<style scoped>
+.analysis-page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  background: var(--bg-secondary);
+  gap: var(--spacing-lg);
+  padding: 0 calc(var(--spacing-xxl) * 1.2) var(--spacing-xxl);
+}
+
+/* 页面头部 */
+.page-header {
+  background: rgba(255, 255, 255, 0.98);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--border);
+  padding: var(--spacing-lg) calc(var(--spacing-xxl) * 1.2);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: var(--shadow-sm);
+  margin: 0 calc(-1 * var(--spacing-xxl) * 1.2) var(--spacing-lg);
+  position: sticky;
+  top: 0;
+  z-index: 40;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+}
+
+.page-title-section {
+  flex: 1;
+}
+
+.page-title {
+  font-size: calc(var(--font-size-xxl) * 1.3);
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+  background: var(--gradient-brand);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.page-subtitle {
+  font-size: var(--font-size-md);
+  color: var(--text-secondary);
+  margin: var(--spacing-xs) 0 0 0;
+}
+
+.page-actions {
+  display: flex;
+  gap: var(--spacing-md);
+}
+
+/* 雷达图卡片 */
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--spacing-lg);
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.score-summary {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.summary-label {
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.summary-score {
+  font-size: var(--font-size-xl);
+  font-weight: 700;
+  color: var(--primary);
+}
+
+.radar-container {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: var(--spacing-xl);
+  height: 400px;
+}
+
+.chart {
+  width: 100%;
+  height: 100%;
+}
+
+.ability-legend {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  justify-content: center;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.legend-color {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.legend-content {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.legend-name {
+  color: var(--text-primary);
+  font-size: var(--font-size-sm);
+}
+
+.legend-score {
+  font-weight: 600;
+  color: var(--primary);
+  font-size: var(--font-size-sm);
+}
+
+/* 能力分析网格 */
+.analysis-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: var(--spacing-lg);
+  margin-bottom: var(--spacing-lg);
+}
+
+.ability-card {
+  padding: var(--spacing-lg);
+}
+
+.ability-header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-md);
+  margin-bottom: var(--spacing-lg);
+}
+
+.ability-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--white);
+  flex-shrink: 0;
+}
+
+.ability-info {
+  flex: 1;
+}
+
+.ability-name {
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 var(--spacing-sm) 0;
+}
+
+.ability-score-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.score-track {
+  flex: 1;
+  height: 8px;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.score-fill {
+  height: 100%;
+  border-radius: var(--radius-lg);
+  transition: var(--transition);
+}
+
+.score-text {
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  color: var(--text-secondary);
+  min-width: 50px;
+  text-align: right;
+}
+
+.ability-details {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.ability-level {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.level-label {
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.level-tag {
+  font-size: var(--font-size-xs);
+}
+
+.ability-desc {
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+  line-height: 1.5;
+  margin: 0;
+}
+
+.suggestion-title {
+  color: var(--text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  margin: 0 0 var(--spacing-xs) 0;
+}
+
+.suggestion-list {
+  margin: 0;
+  padding-left: var(--spacing-lg);
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.suggestion-list li {
+  margin-bottom: var(--spacing-xs);
+  line-height: 1.4;
+}
+
+/* 优势劣势分析 */
+.strength-weakness-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--spacing-lg);
+  margin-bottom: var(--spacing-lg);
+}
+
+.analysis-header {
+  margin-bottom: var(--spacing-lg);
+}
+
+.analysis-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.strength-list,
+.weakness-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.strength-item,
+.weakness-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-md);
+  padding: var(--spacing-md);
+  background: var(--bg-secondary);
+  border-radius: var(--radius-md);
+}
+
+.strength-icon,
+.weakness-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--white);
+  flex-shrink: 0;
+}
+
+.strength-icon {
+  background: var(--gradient-card-success);
+}
+
+.weakness-icon {
+  background: var(--gradient-card-warning);
+}
+
+.strength-content,
+.weakness-content {
+  flex: 1;
+}
+
+.strength-name,
+.weakness-name {
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 var(--spacing-xs) 0;
+}
+
+.strength-desc,
+.weakness-desc {
+  color: var(--text-secondary);
+  font-size: var(--font-size-xs);
+  margin: 0;
+}
+
+.strength-score,
+.weakness-score {
+  font-weight: 700;
+  color: var(--primary);
+  font-size: var(--font-size-md);
+}
+
+/* 发展建议 */
+.recommendation-header {
+  margin-bottom: var(--spacing-xl);
+}
+
+.recommendation-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 var(--spacing-sm) 0;
+}
+
+.recommendation-subtitle {
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+.recommendation-content {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: var(--spacing-xl);
+}
+
+.recommendation-section {
+  padding: var(--spacing-lg);
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);
+  border-left: 4px solid var(--primary);
+}
+
+.section-title {
+  color: var(--text-primary);
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  margin: 0 0 var(--spacing-md) 0;
+}
+
+.recommendation-list {
+  margin: 0;
+  padding-left: var(--spacing-lg);
+  color: var(--text-secondary);
+}
+
+.recommendation-list li {
+  margin-bottom: var(--spacing-sm);
+  line-height: 1.5;
+}
+
+/* 响应式调整 */
+@media (max-width: 1200px) {
+  .radar-container {
+    grid-template-columns: 1fr;
+    height: auto;
+  }
+
+  .chart {
+    height: 300px;
+  }
+
+  .strength-weakness-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .page-header {
+    flex-direction: column;
+    gap: var(--spacing-md);
+    align-items: stretch;
+  }
+
+  .header-left {
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    align-items: flex-start;
+  }
+
+  .analysis-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .recommendation-content {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ReportMonitor.vue b/src/views/ReportMonitor.vue
new file mode 100644
index 0000000..066ac54
--- /dev/null
+++ b/src/views/ReportMonitor.vue
@@ -0,0 +1,793 @@
+<template>
+  <div class="monitor-page">
+    <!-- 返回按钮和标题 -->
+    <header class="page-header">
+      <div class="header-left">
+        <el-button icon="ArrowLeft" @click="goBack" plain>
+          返回报告
+        </el-button>
+        <div class="page-title-section">
+          <h1 class="page-title">发展监测</h1>
+          <p class="page-subtitle">{{ currentStudent?.name }} 的能力发展轨迹</p>
+        </div>
+      </div>
+      <div class="page-actions">
+        <el-button type="primary" icon="Download" @click="exportChart">
+          导出图表
+        </el-button>
+      </div>
+    </header>
+
+    <!-- 时间选择器 -->
+    <BaseCard class="time-selector">
+      <div class="selector-header">
+        <h3 class="selector-title">
+          <el-icon><Calendar /></el-icon>
+          时间范围选择
+        </h3>
+      </div>
+      <div class="selector-content">
+        <el-radio-group v-model="selectedPeriod" @change="onPeriodChange">
+          <el-radio-button label="semester">本学期</el-radio-button>
+          <el-radio-button label="year">本学年</el-radio-button>
+          <el-radio-button label="all">全部时间</el-radio-button>
+        </el-radio-group>
+        <div class="time-info">
+          <span class="time-label">数据时间范围：</span>
+          <span class="time-range">{{ timeRangeText }}</span>
+        </div>
+      </div>
+    </BaseCard>
+
+    <!-- 发展趋势图表 -->
+    <div class="charts-grid">
+      <!-- 综合评分趋势 -->
+      <BaseCard class="chart-card large">
+        <div class="chart-header">
+          <h3 class="chart-title">
+            <el-icon><TrendCharts /></el-icon>
+            综合评分发展趋势
+          </h3>
+          <div class="chart-actions">
+            <el-tooltip content="查看详细数据">
+              <el-button icon="View" circle size="small" @click="showDetailData = true" />
+            </el-tooltip>
+          </div>
+        </div>
+        <div class="chart-container">
+          <div ref="trendChartRef" class="chart"></div>
+        </div>
+      </BaseCard>
+
+      <!-- 能力维度变化 -->
+      <BaseCard class="chart-card">
+        <div class="chart-header">
+          <h3 class="chart-title">
+            <el-icon><Histogram /></el-icon>
+            各维度能力变化
+          </h3>
+        </div>
+        <div class="chart-container">
+          <div ref="abilityTrendRef" class="chart"></div>
+        </div>
+      </BaseCard>
+
+      <!-- 排名变化 -->
+      <BaseCard class="chart-card">
+        <div class="chart-header">
+          <h3 class="chart-title">
+            <el-icon><Trophy /></el-icon>
+            班级排名变化
+          </h3>
+        </div>
+        <div class="chart-container">
+          <div ref="rankingChartRef" class="chart"></div>
+        </div>
+      </BaseCard>
+    </div>
+
+    <!-- 里程碑事件 -->
+    <BaseCard class="milestone-card">
+      <div class="milestone-header">
+        <h3 class="milestone-title">
+          <el-icon><Flag /></el-icon>
+          重要里程碑
+        </h3>
+        <p class="milestone-subtitle">记录学生成长过程中的关键节点</p>
+      </div>
+      <div class="milestone-timeline">
+        <div
+          v-for="(milestone, index) in milestones"
+          :key="index"
+          class="milestone-item"
+          :class="milestone.type"
+        >
+          <div class="milestone-marker">
+            <el-icon>
+              <Trophy v-if="milestone.type === 'achievement'" />
+              <TrendCharts v-else-if="milestone.type === 'improvement'" />
+              <Briefcase v-else-if="milestone.type === 'project'" />
+              <Medal v-else-if="milestone.type === 'award'" />
+              <CircleCheck v-else />
+            </el-icon>
+          </div>
+          <div class="milestone-content">
+            <div class="milestone-date">{{ formatDate(milestone.date) }}</div>
+            <h4 class="milestone-event">{{ milestone.title }}</h4>
+            <p class="milestone-desc">{{ milestone.description }}</p>
+            <div class="milestone-score" v-if="milestone.score">
+              <span class="score-label">得分：</span>
+              <span class="score-value">{{ milestone.score }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </BaseCard>
+
+    <!-- 详细数据弹窗 -->
+    <el-dialog
+      v-model="showDetailData"
+      title="详细发展数据"
+      width="80%"
+      destroy-on-close
+    >
+      <el-table :data="detailData" border stripe>
+        <el-table-column prop="date" label="日期" width="120" />
+        <el-table-column prop="overallScore" label="综合得分" width="100" />
+        <el-table-column prop="companyScore" label="企业评价" width="100" />
+        <el-table-column prop="teacherScore" label="教师评价" width="100" />
+        <el-table-column prop="expertScore" label="专家评价" width="100" />
+        <el-table-column prop="peerScore" label="学生互评" width="100" />
+        <el-table-column prop="ranking" label="班级排名" width="100" />
+        <el-table-column prop="note" label="备注" show-overflow-tooltip />
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { ref, computed, onMounted, nextTick } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import * as echarts from 'echarts'
+import BaseCard from '@/components/BaseCard.vue'
+import { mockStudents, mockReportData } from '@/utils/mockData'
+
+const TIME_PERIODS = {
+  semester: '2024-2025学年第1学期',
+  year: '2024-2025学年',
+  all: '2023年9月 - 2024年12月'
+}
+
+
+export default {
+  name: 'ReportMonitor',
+  components: {
+    BaseCard
+  },
+  setup() {
+    const route = useRoute()
+    const router = useRouter()
+
+    const studentId = ref(null)
+    const currentStudent = ref(null)
+    const selectedPeriod = ref('semester')
+    const showDetailData = ref(false)
+
+    const trendChartRef = ref(null)
+    const abilityTrendRef = ref(null)
+    const rankingChartRef = ref(null)
+
+    let trendChart = null
+    let abilityChart = null
+    let rankingChart = null
+
+    const timeRangeText = computed(() => TIME_PERIODS[selectedPeriod.value])
+
+    const trendData = ref([])
+    const milestones = ref([])
+
+    const detailData = computed(() => {
+      return trendData.value.map((item, index) => ({
+        date: `2024-${item.month}`,
+        overallScore: item.score,
+        companyScore: item.company,
+        teacherScore: item.teacher,
+        expertScore: item.expert,
+        peerScore: item.peer,
+        ranking: Math.floor(Math.random() * 8) + 1,
+        note: index % 2 === 0 ? '表现稳定' : '有所提升'
+      }))
+    })
+
+    const initTrendChart = () => {
+      if (!trendChartRef.value) return
+
+      trendChart = echarts.init(trendChartRef.value)
+
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          }
+        },
+        legend: {
+          data: ['综合得分', '企业评价', '教师评价', '专家评价', '学生互评'],
+          bottom: 0
+        },
+        grid: {
+          top: 20,
+          bottom: 60,
+          left: 50,
+          right: 30
+        },
+        xAxis: {
+          type: 'category',
+          data: trendData.value.map(item => item.month),
+          axisLine: {
+            lineStyle: { color: '#e0e6ed' }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          min: 60,
+          max: 100,
+          axisLine: {
+            lineStyle: { color: '#e0e6ed' }
+          },
+          splitLine: {
+            lineStyle: { color: '#f0f2f5' }
+          }
+        },
+        series: [
+          {
+            name: '综合得分',
+            type: 'line',
+            data: trendData.value.map(item => item.score),
+            smooth: true,
+            lineStyle: { width: 3, color: '#1e3a8a' },
+            itemStyle: { color: '#1e3a8a' },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(30, 58, 138, 0.3)' },
+                { offset: 1, color: 'rgba(30, 58, 138, 0.05)' }
+              ])
+            }
+          },
+          {
+            name: '企业评价',
+            type: 'line',
+            data: trendData.value.map(item => item.company),
+            smooth: true,
+            lineStyle: { color: '#06b6d4' }
+          },
+          {
+            name: '教师评价',
+            type: 'line',
+            data: trendData.value.map(item => item.teacher),
+            smooth: true,
+            lineStyle: { color: '#10b981' }
+          },
+          {
+            name: '专家评价',
+            type: 'line',
+            data: trendData.value.map(item => item.expert),
+            smooth: true,
+            lineStyle: { color: '#f59e0b' }
+          },
+          {
+            name: '学生互评',
+            type: 'line',
+            data: trendData.value.map(item => item.peer),
+            smooth: true,
+            lineStyle: { color: '#ef4444' }
+          }
+        ]
+      }
+
+      trendChart.setOption(option)
+    }
+
+    const initAbilityChart = () => {
+      if (!abilityTrendRef.value) return
+
+      abilityChart = echarts.init(abilityTrendRef.value)
+
+      const abilities = ['技术能力', '沟通能力', '团队协作', '解决问题', '学习能力', '创新思维']
+      const currentData = abilities.map(() => 70 + Math.random() * 25)
+      const previousData = currentData.map(val => val - 5 + Math.random() * 10)
+
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          data: ['当前水平', '上期水平'],
+          bottom: 0
+        },
+        grid: {
+          top: 20,
+          bottom: 60,
+          left: 20,
+          right: 20
+        },
+        xAxis: {
+          type: 'category',
+          data: abilities,
+          axisLabel: {
+            interval: 0,
+            rotate: 45
+          }
+        },
+        yAxis: {
+          type: 'value',
+          min: 0,
+          max: 100
+        },
+        series: [
+          {
+            name: '当前水平',
+            type: 'bar',
+            data: currentData,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#3b82f6' },
+                { offset: 1, color: '#1e3a8a' }
+              ])
+            }
+          },
+          {
+            name: '上期水平',
+            type: 'bar',
+            data: previousData,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#94a3b8' },
+                { offset: 1, color: '#64748b' }
+              ])
+            }
+          }
+        ]
+      }
+
+      abilityChart.setOption(option)
+    }
+
+    const initRankingChart = () => {
+      if (!rankingChartRef.value) return
+
+      rankingChart = echarts.init(rankingChartRef.value)
+
+      const months = ['9月', '10月', '11月', '12月', '1月', '2月']
+      const rankings = [8, 6, 5, 4, 3, 2]
+
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          formatter: (params) => {
+            const data = params[0]
+            return `${data.name}<br/>班级排名: 第${data.value}名`
+          }
+        },
+        grid: {
+          top: 20,
+          bottom: 40,
+          left: 30,
+          right: 20
+        },
+        xAxis: {
+          type: 'category',
+          data: months
+        },
+        yAxis: {
+          type: 'value',
+          min: 1,
+          max: 10,
+          inverse: true,
+          axisLabel: {
+            formatter: '第{value}名'
+          }
+        },
+        series: [
+          {
+            type: 'line',
+            data: rankings,
+            smooth: true,
+            lineStyle: {
+              width: 3,
+              color: '#10b981'
+            },
+            itemStyle: {
+              color: '#10b981',
+              borderWidth: 2,
+              borderColor: '#ffffff'
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(16, 185, 129, 0.3)' },
+                { offset: 1, color: 'rgba(16, 185, 129, 0.05)' }
+              ])
+            }
+          }
+        ]
+      }
+
+      rankingChart.setOption(option)
+    }
+
+    const goBack = () => {
+      router.push(`/home/report/${studentId.value}`)
+    }
+
+    const exportChart = () => {
+      ElMessage.success('图表导出功能开发中...')
+    }
+
+    const onPeriodChange = () => {
+      trendData.value = generateTrendData()
+      initTrendChart()
+      initAbilityChart()
+      initRankingChart()
+    }
+
+
+    const formatDate = (dateString) => {
+      const date = new Date(dateString)
+      return date.toLocaleDateString('zh-CN', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+      })
+    }
+
+    onMounted(() => {
+      studentId.value = parseInt(route.params.studentId)
+      currentStudent.value = mockStudents.find(s => s.id === studentId.value)
+
+      if (!currentStudent.value) {
+        ElMessage.error('未找到学生信息')
+        router.push('/home')
+        return
+      }
+
+      // 加载学生的发展趋势数据
+      const studentTrendData = mockReportData.developmentTrends[studentId.value]
+      if (studentTrendData) {
+        trendData.value = studentTrendData.monthlyScores.map(item => ({
+          month: item.month.split('-')[1] + '月',
+          score: item.overall,
+          company: item.company,
+          teacher: item.teacher,
+          expert: item.expert,
+          peer: item.peer
+        }))
+      }
+
+      // 加载学生的里程碑数据
+      milestones.value = mockReportData.milestones[studentId.value] || []
+
+      nextTick(() => {
+        initTrendChart()
+        initAbilityChart()
+        initRankingChart()
+
+        window.addEventListener('resize', () => {
+          trendChart?.resize()
+          abilityChart?.resize()
+          rankingChart?.resize()
+        })
+      })
+    })
+
+    return {
+      currentStudent,
+      selectedPeriod,
+      timeRangeText,
+      showDetailData,
+      trendChartRef,
+      abilityTrendRef,
+      rankingChartRef,
+      milestones,
+      detailData,
+      goBack,
+      exportChart,
+      onPeriodChange,
+      formatDate
+    }
+  }
+}
+</script>
+
+<style scoped>
+.monitor-page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  background: var(--bg-secondary);
+  gap: var(--spacing-lg);
+  padding: 0 calc(var(--spacing-xxl) * 1.2) var(--spacing-xxl);
+}
+
+/* 页面头部 */
+.page-header {
+  background: rgba(255, 255, 255, 0.98);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--border);
+  padding: var(--spacing-lg) calc(var(--spacing-xxl) * 1.2);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: var(--shadow-sm);
+  margin: 0 calc(-1 * var(--spacing-xxl) * 1.2) var(--spacing-lg);
+  position: sticky;
+  top: 0;
+  z-index: 40;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+}
+
+.page-title-section {
+  flex: 1;
+}
+
+.page-title {
+  font-size: calc(var(--font-size-xxl) * 1.3);
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+  background: var(--gradient-brand);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.page-subtitle {
+  font-size: var(--font-size-md);
+  color: var(--text-secondary);
+  margin: var(--spacing-xs) 0 0 0;
+}
+
+.page-actions {
+  display: flex;
+  gap: var(--spacing-md);
+}
+
+/* 时间选择器 */
+.selector-header {
+  margin-bottom: var(--spacing-md);
+}
+
+.selector-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.selector-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-md);
+}
+
+.time-info {
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.time-label {
+  margin-right: var(--spacing-xs);
+}
+
+.time-range {
+  font-weight: 500;
+  color: var(--primary);
+}
+
+/* 图表网格 */
+.charts-grid {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  gap: var(--spacing-lg);
+  margin-bottom: var(--spacing-lg);
+}
+
+.chart-card {
+  height: 300px;
+}
+
+.chart-card.large {
+  grid-row: span 2;
+  height: auto;
+}
+
+.chart-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--spacing-md);
+}
+
+.chart-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.chart-actions {
+  display: flex;
+  gap: var(--spacing-sm);
+}
+
+.chart-container {
+  height: calc(100% - 60px);
+}
+
+.chart {
+  width: 100%;
+  height: 100%;
+}
+
+/* 里程碑卡片 */
+.milestone-header {
+  margin-bottom: var(--spacing-xl);
+}
+
+.milestone-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 var(--spacing-sm) 0;
+}
+
+.milestone-subtitle {
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+.milestone-timeline {
+  position: relative;
+  padding-left: var(--spacing-xl);
+}
+
+.milestone-timeline::before {
+  content: '';
+  position: absolute;
+  left: 24px;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: var(--border);
+}
+
+.milestone-item {
+  position: relative;
+  margin-bottom: var(--spacing-xl);
+  display: flex;
+  gap: var(--spacing-lg);
+}
+
+.milestone-marker {
+  position: absolute;
+  left: -36px;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--white);
+  border: 4px solid var(--bg-primary);
+  z-index: 1;
+}
+
+.milestone-item.achievement .milestone-marker {
+  background: var(--gradient-card-warning);
+}
+
+.milestone-item.improvement .milestone-marker {
+  background: var(--gradient-card-primary);
+}
+
+.milestone-item.project .milestone-marker {
+  background: var(--gradient-card-secondary);
+}
+
+.milestone-item.award .milestone-marker {
+  background: var(--gradient-card-success);
+}
+
+.milestone-content {
+  flex: 1;
+  padding: var(--spacing-md);
+  background: var(--bg-primary);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+}
+
+.milestone-date {
+  font-size: var(--font-size-xs);
+  color: var(--text-muted);
+  margin-bottom: var(--spacing-xs);
+}
+
+.milestone-event {
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 var(--spacing-xs) 0;
+}
+
+.milestone-desc {
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+  margin: 0 0 var(--spacing-sm) 0;
+}
+
+.milestone-score {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.score-label {
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.score-value {
+  font-weight: 600;
+  color: var(--primary);
+}
+
+/* 响应式调整 */
+@media (max-width: 1200px) {
+  .charts-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .chart-card.large {
+    grid-row: span 1;
+  }
+}
+
+@media (max-width: 768px) {
+  .page-header {
+    flex-direction: column;
+    gap: var(--spacing-md);
+    align-items: stretch;
+  }
+
+  .header-left {
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    align-items: flex-start;
+  }
+
+  .selector-content {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+</style>
\ No newline at end of file