diff --git a/src/assets/styles/variables.css b/src/assets/styles/variables.css
index 7bc7dd5..64826a4 100644
--- a/src/assets/styles/variables.css
+++ b/src/assets/styles/variables.css
@@ -44,7 +44,7 @@
 
   /* 边框色 */
   --border: var(--gray-lighter);
-  --border-light: #e5e7eb;
+  --border-light: var(--gray-lighter);
   --border-dark: var(--gray-light);
 
   /* 间距 */
@@ -78,6 +78,21 @@
   --font-size-xl: 1.25rem;
   --font-size-xxl: 1.5rem;
 
+  /* 图标尺寸 */
+  --icon-size-xs: 12px;
+  --icon-size-sm: 16px;
+  --icon-size-md: 20px;
+  --icon-size-lg: 24px;
+  --icon-size-xl: 32px;
+
+  /* 组件尺寸 */
+  --mini-chart-size: 45px;
+  --pulse-dot-size: 5px;
+  --progress-bar-height: 8px;
+  --avatar-size-sm: 24px;
+  --avatar-size-md: 32px;
+  --avatar-size-lg: 40px;
+
   /* 页面布局 */
   --header-height: 72px;
   --sidebar-width: 280px;
@@ -90,11 +105,11 @@
   --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
   --gradient-brand: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
   --gradient-success: linear-gradient(135deg, var(--success) 0%, var(--success-light) 100%);
-  --gradient-sidebar: linear-gradient(180deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%);
-  --gradient-card-primary: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
-  --gradient-card-secondary: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%);
-  --gradient-card-success: linear-gradient(135deg, #10b981 0%, #34d399 100%);
-  --gradient-card-warning: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
+  --gradient-sidebar: linear-gradient(180deg, var(--primary) 0%, var(--primary-light) 50%, var(--primary-light) 100%);
+  --gradient-card-primary: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-lighter) 100%);
+  --gradient-card-secondary: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-light) 100%);
+  --gradient-card-success: linear-gradient(135deg, var(--success) 0%, var(--success-light) 100%);
+  --gradient-card-warning: linear-gradient(135deg, var(--warning) 0%, var(--warning-light) 100%);
   --gradient-mesh: radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
                    radial-gradient(circle at 80% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
                    radial-gradient(circle at 40% 20%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);
@@ -118,8 +133,13 @@
   --primary-alpha-medium: rgba(30, 58, 138, var(--opacity-medium));
   --primary-alpha-heavy: rgba(30, 58, 138, var(--opacity-heavy));
   --primary-alpha-strong: rgba(30, 58, 138, var(--opacity-strong));
+  --primary-light-alpha-light: rgba(59, 130, 246, 0.1);
+  --primary-light-alpha-heavy: rgba(59, 130, 246, var(--opacity-heavy));
+  --primary-light-alpha-medium: rgba(59, 130, 246, 0.3);
+  --primary-light-alpha-shadow: rgba(59, 130, 246, var(--opacity-heavy));
 
   --success-alpha-light: rgba(16, 185, 129, var(--opacity-light));
+  --success-alpha-border: rgba(16, 185, 129, 0.25);
   --success-alpha-medium: rgba(16, 185, 129, var(--opacity-medium));
   --success-alpha-heavy: rgba(16, 185, 129, var(--opacity-heavy));
 
@@ -127,6 +147,7 @@
   --danger-alpha-heavy: rgba(239, 68, 68, var(--opacity-heavy));
 
   --secondary-alpha-heavy: rgba(6, 182, 212, var(--opacity-heavy));
+  --secondary-alpha-ultra-light: rgba(6, 182, 212, 0.05);
 
   --gray-alpha-light: rgba(107, 114, 128, var(--opacity-light));
   --gray-alpha-medium: rgba(107, 114, 128, var(--opacity-medium));
@@ -140,6 +161,14 @@
   --black-alpha-light: rgba(0, 0, 0, 0.08);
   --black-alpha-medium: rgba(0, 0, 0, 0.15);
 
+  /* 响应式断点 */
+  --breakpoint-xs: 480px;
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-xxl: 1536px;
+
   /* 动画 */
   --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
diff --git a/src/components/AbilityRadarChart.vue b/src/components/AbilityRadarChart.vue
index 836370d..bd34568 100644
--- a/src/components/AbilityRadarChart.vue
+++ b/src/components/AbilityRadarChart.vue
@@ -27,6 +27,7 @@ import * as echarts from 'echarts'
 import { TrendCharts } from '@element-plus/icons-vue'
 import { useRoute } from 'vue-router'
 import { mockPortraitData } from '@/utils/mockData'
+import { getCSSVariable } from '@/utils/cssHelper'
 
 export default {
   name: 'AbilityRadarChart',
@@ -70,10 +71,7 @@ export default {
       center: ['50%', '55%']
     }
 
-    // 获取CSS变量的实际值
-    const getCSSVariable = (variable) => {
-      return getComputedStyle(document.documentElement).getPropertyValue(variable).trim()
-    }
+    // 使用统一的CSS变量工具函数
 
     const colors = [
       getCSSVariable('--primary'), getCSSVariable('--secondary'), getCSSVariable('--success'),
@@ -214,7 +212,6 @@ export default {
       scores,
       averageScore,
       rankInfo,
-      dimensions: props.dimensions,
       getColor
     }
   }
diff --git a/src/components/EvaluationDialog.vue b/src/components/EvaluationDialog.vue
index 18d0655..a8ca360 100644
--- a/src/components/EvaluationDialog.vue
+++ b/src/components/EvaluationDialog.vue
@@ -131,7 +131,7 @@
               :max="100"
               :precision="1"
               placeholder="请输入课程成绩"
-              style="width: 200px"
+              class="score-input"
             />
             <span class="unit">分</span>
           </el-form-item>
@@ -486,4 +486,9 @@ export default {
   border-top: 1px solid var(--border-light);
   border-radius: 0 0 var(--radius-lg) var(--radius-lg);
 }
+
+/* 评分输入框 */
+.score-input {
+  width: 200px;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/BigScreenPortrait.vue b/src/views/BigScreenPortrait.vue
index 15aaf99..70add2e 100644
--- a/src/views/BigScreenPortrait.vue
+++ b/src/views/BigScreenPortrait.vue
@@ -98,7 +98,7 @@
               </div>
               <div class="card-indicator">
                 <div class="progress-ring small">
-                  <div class="progress-fill" style="--progress: 85%"></div>
+                  <div class="progress-fill" :style="{ '--progress': progressData.video }"></div>
                 </div>
               </div>
             </div>
@@ -112,7 +112,7 @@
               </div>
               <div class="card-indicator">
                 <div class="progress-ring small">
-                  <div class="progress-fill" style="--progress: 72%"></div>
+                  <div class="progress-fill" :style="{ '--progress': progressData.audio }"></div>
                 </div>
               </div>
             </div>
@@ -126,7 +126,7 @@
               </div>
               <div class="card-indicator">
                 <div class="progress-ring small">
-                  <div class="progress-fill" style="--progress: 94%"></div>
+                  <div class="progress-fill" :style="{ '--progress': progressData.text }"></div>
                 </div>
               </div>
             </div>
@@ -201,7 +201,7 @@
                   </div>
                   <div class="wall-progress mini">
                     <div class="progress-ring">
-                      <div class="progress-fill" style="--progress: 87.5%"></div>
+                      <div class="progress-fill" :style="{ '--progress': progressData.overall }"></div>
                     </div>
                   </div>
                 </div>
@@ -452,7 +452,15 @@ export default {
     const abilityChart = ref(null)
     const gaugeChart = ref(null)
     const trendChart = ref(null)
-    
+
+    // 进度条数据（消除内联样式）
+    const progressData = ref({
+      video: '85%',
+      audio: '72%',
+      text: '94%',
+      overall: '87.5%'
+    })
+
     let chartInstances = []
     let timer = null
     
@@ -752,8 +760,8 @@ export default {
           },
           areaStyle: {
             color: buildEChartsGradient(
-              colors.secondaryAlphaHeavy.replace('var(--secondary-alpha-heavy)', 'rgba(6, 182, 212, 0.3)'),
-              'rgba(6, 182, 212, 0.05)'
+              'var(--secondary-alpha-heavy)',
+              'var(--secondary-alpha-ultra-light)'
             )
           },
           symbol: 'circle',
@@ -841,7 +849,8 @@ export default {
       viewReport,
       analyzeDimension,
       generateReport,
-      viewHistory
+      viewHistory,
+      progressData
     }
   }
 }
@@ -1023,8 +1032,8 @@ export default {
 
 /* 模块容器 - 减少内边距 */
 .module-container {
-  background: rgba(30, 58, 138, 0.3);
-  border: 1px solid rgba(59, 130, 246, 0.4);
+  background: var(--primary-alpha-strong);
+  border: 1px solid var(--primary-light-alpha-heavy);
   border-radius: var(--radius-md);
   padding: var(--spacing-md);
   backdrop-filter: var(--glass-blur);
@@ -1142,8 +1151,8 @@ export default {
 }
 
 .gauge-mini {
-  width: 45px;
-  height: 45px;
+  width: var(--mini-chart-size);
+  height: var(--mini-chart-size);
   position: relative;
   flex-shrink: 0;
 }
@@ -1208,8 +1217,8 @@ export default {
 }
 
 .metric-main-area {
-  background: rgba(30, 58, 138, 0.2);
-  border: 1px solid rgba(59, 130, 246, 0.3);
+  background: var(--primary-alpha-heavy);
+  border: 1px solid var(--primary-light-alpha-medium);
   border-radius: var(--radius-md);
   padding: 15px;
   position: relative;
@@ -1226,13 +1235,13 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
+  background: linear-gradient(135deg, var(--primary-light-alpha-light) 0%, transparent 50%);
   pointer-events: none;
 }
 
 .metric-main-area:hover {
   transform: translateY(-2px);
-  box-shadow: 0 12px 40px rgba(59, 130, 246, 0.2);
+  box-shadow: 0 12px 40px var(--primary-light-alpha-shadow);
 }
 
 .main-metric-header {
@@ -1245,13 +1254,13 @@ export default {
 }
 
 .main-metric-header .el-icon {
-  font-size: 20px;
-  color: #06b6d4;
+  font-size: var(--icon-size-md);
+  color: var(--secondary);
 }
 
 .main-metric-header span {
   font-size: var(--font-size-xl);
-  color: #e2e8f0;
+  color: var(--gray-lighter);
   font-weight: 500;
 }
 
@@ -1265,12 +1274,12 @@ export default {
   background: var(--success-alpha-medium);
   padding: 3px 6px;
   border-radius: var(--radius-lg);
-  border: 1px solid rgba(16, 185, 129, 0.25);
+  border: 1px solid var(--success-alpha-border);
 }
 
 .pulse-dot {
-  width: 5px;
-  height: 5px;
+  width: var(--pulse-dot-size);
+  height: var(--pulse-dot-size);
   background: var(--success);
   border-radius: 50%;
   animation: pulse 1.5s infinite;
@@ -1339,7 +1348,7 @@ export default {
   display: flex;
   align-items: center;
   gap: 6px;
-  font-size: 12px;
+  font-size: var(--font-size-xs);
 }
 
 .stat-label {
@@ -1382,8 +1391,8 @@ export default {
 }
 
 .wall-card {
-  background: rgba(30, 58, 138, 0.3);
-  border: 1px solid rgba(59, 130, 246, 0.4);
+  background: var(--primary-alpha-strong);
+  border: 1px solid var(--primary-light-alpha-heavy);
   border-radius: var(--radius-sm);
   padding: var(--spacing-xs);
   display: flex;
@@ -1415,7 +1424,7 @@ export default {
 }
 
 .wall-card.compact .wall-icon {
-  font-size: 12px;
+  font-size: var(--font-size-xs);
   margin-bottom: 2px;
 }
 
@@ -1511,8 +1520,8 @@ export default {
   right: 0;
   bottom: 0;
   border: 3px solid transparent;
-  border-top: 3px solid #06b6d4;
-  border-right: 3px solid #06b6d4;
+  border-top: 3px solid var(--secondary);
+  border-right: 3px solid var(--secondary);
   border-radius: 50%;
   transform: rotate(-45deg);
   animation: rotateProgress 2s linear infinite;
@@ -1543,13 +1552,13 @@ export default {
 }
 
 .stars {
-  color: #f59e0b;
+  color: var(--warning);
   font-size: 18px;
 }
 
 .rating-text {
   font-size: 10px;
-  color: #94a3b8;
+  color: var(--gray-light);
 }
 
 /* 多维度检测按钮优化 */
@@ -1592,7 +1601,7 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
+  background: linear-gradient(135deg, var(--primary-light-alpha-light) 0%, transparent 50%);
   pointer-events: none;
 }
 
@@ -1621,7 +1630,7 @@ export default {
 }
 
 .card-icon.audio {
-  background: linear-gradient(135deg, var(--purple), #a855f7);
+  background: var(--gradient-primary);
   color: var(--text-inverse);
 }
 
@@ -1669,7 +1678,7 @@ export default {
   left: 2px;
   right: 2px;
   bottom: 2px;
-  border: 1px solid rgba(59, 130, 246, 0.3);
+  border: 1px solid var(--primary-light-alpha-medium);
   border-radius: 50%;
 }
 
@@ -1757,7 +1766,7 @@ export default {
 }
 
 .action-btn-large .el-icon {
-  font-size: 12px;
+  font-size: var(--font-size-xs);
 }
 
 .action-btn-large span {
@@ -1796,7 +1805,7 @@ export default {
   background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(6, 182, 212, 0.15) 100%);
   border: 1px solid rgba(59, 130, 246, 0.25);
   border-radius: var(--radius-sm);
-  color: #e2e8f0;
+  color: var(--gray-lighter);
   cursor: pointer;
   transition: var(--transition);
   font-size: 11px;
@@ -1811,7 +1820,7 @@ export default {
 }
 
 .dimension-btn .el-icon {
-  font-size: 12px;
+  font-size: var(--font-size-xs);
   color: var(--secondary);
   opacity: 0.9;
 }
@@ -1829,7 +1838,7 @@ export default {
 
 .bar {
   width: 4px;
-  background: linear-gradient(to top, #06b6d4, #3b82f6);
+  background: linear-gradient(to top, var(--secondary), var(--primary-light));
   border-radius: 2px;
   animation: barGrow 1s ease-out;
 }
@@ -1850,13 +1859,13 @@ export default {
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #06b6d4, #3b82f6);
+  background: var(--gradient-brand);
   border: 1px solid rgba(255, 255, 255, 0.3);
 }
 
 .avatar-more {
   font-size: 10px;
-  color: #94a3b8;
+  color: var(--gray-light);
   background: rgba(147, 197, 253, 0.2);
   padding: 2px 4px;
   border-radius: 8px;
@@ -1887,12 +1896,12 @@ export default {
 }
 
 .status-item.completed {
-  color: #10b981;
+  color: var(--success);
   background: rgba(16, 185, 129, 0.2);
 }
 
 .status-item.pending {
-  color: #f59e0b;
+  color: var(--warning);
   background: rgba(245, 158, 11, 0.2);
 }
 
@@ -1987,7 +1996,7 @@ export default {
 }
 
 .overview-icon {
-  font-size: 20px;
+  font-size: var(--icon-size-md);
   color: var(--secondary);
   background: var(--secondary-alpha-heavy);
   padding: 6px;
@@ -1995,9 +2004,9 @@ export default {
 }
 
 .overview-number {
-  font-size: 20px;
+  font-size: var(--icon-size-md);
   font-weight: 600;
-  color: #e2e8f0;
+  color: var(--gray-lighter);
   margin-bottom: 1px;
 }
 
@@ -2067,9 +2076,9 @@ export default {
   gap: 10px;
   padding: 12px 16px;
   background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(6, 182, 212, 0.2) 100%);
-  border: 1px solid rgba(59, 130, 246, 0.3);
+  border: 1px solid var(--primary-light-alpha-medium);
   border-radius: 8px;
-  color: #e2e8f0;
+  color: var(--gray-lighter);
   cursor: pointer;
   transition: all 0.3s ease;
   font-size: 14px;
@@ -2084,7 +2093,7 @@ export default {
 
 .dimension-btn .el-icon {
   font-size: 16px;
-  color: #06b6d4;
+  color: var(--secondary);
 }
 
 /* 操作按钮 */
@@ -2096,7 +2105,7 @@ export default {
 
 .action-buttons .el-button {
   flex: 1;
-  background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
+  background: var(--gradient-brand);
   border: none;
   color: white;
   font-weight: bold;
@@ -2286,7 +2295,7 @@ export default {
   padding: 8px 10px;
   background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(6, 182, 212, 0.2) 100%);
   font-weight: 600;
-  color: #e2e8f0;
+  color: var(--gray-lighter);
   font-size: 11px;
   flex: 0 0 auto;
   border-bottom: 1px solid rgba(59, 130, 246, 0.3);
@@ -2310,7 +2319,7 @@ export default {
   padding: 8px 10px;
   margin: 2px 4px;
   border-radius: var(--radius-sm);
-  color: #e2e8f0;
+  color: var(--gray-lighter);
   font-size: 11px;
   align-items: center;
   transition: var(--transition);
@@ -2367,9 +2376,9 @@ export default {
   gap: 10px;
   padding: 12px 16px;
   background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(6, 182, 212, 0.2) 100%);
-  border: 1px solid rgba(59, 130, 246, 0.3);
+  border: 1px solid var(--primary-light-alpha-medium);
   border-radius: 8px;
-  color: #e2e8f0;
+  color: var(--gray-lighter);
   cursor: pointer;
   transition: all 0.3s ease;
   font-size: 14px;
@@ -2384,7 +2393,7 @@ export default {
 
 .dimension-btn .el-icon {
   font-size: 16px;
-  color: #06b6d4;
+  color: var(--secondary);
 }
 
 /* 操作按钮 */
@@ -2396,7 +2405,7 @@ export default {
 
 .action-buttons .el-button {
   flex: 1;
-  background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
+  background: var(--gradient-brand);
   border: none;
   color: white;
   font-weight: bold;
@@ -2423,7 +2432,7 @@ export default {
   }
   
   .dimension-btn {
-    font-size: 12px;
+    font-size: var(--font-size-xs);
     padding: 8px 10px;
   }
   
@@ -2532,7 +2541,7 @@ export default {
   }
 
   .wall-card.compact .wall-number {
-    font-size: 20px;
+    font-size: var(--icon-size-md);
   }
 }
 
@@ -2565,7 +2574,7 @@ export default {
   }
 
   .wall-card.compact .wall-label {
-    font-size: 12px;
+    font-size: var(--font-size-xs);
   }
 
   .metrics-layout {
@@ -2647,7 +2656,7 @@ export default {
   }
 
   .number-unit {
-    font-size: 12px;
+    font-size: var(--font-size-xs);
   }
 
   .gauge-mini {
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index fb21b0c..dab0f87 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -216,7 +216,7 @@
           <div class="module-accent warning"></div>
           <div class="module-header">
             <div class="module-icon-wrapper">
-              <div class="module-icon" style="background: var(--gradient-card-warning);">
+              <div class="module-icon warning">
                 <Upload :size="18" />
               </div>
             </div>
@@ -246,7 +246,7 @@
           <div class="module-accent success"></div>
           <div class="module-header">
             <div class="module-icon-wrapper">
-              <div class="module-icon" style="background: var(--gradient-card-success);">
+              <div class="module-icon success">
                 <FolderAdd :size="18" />
               </div>
             </div>
@@ -784,6 +784,14 @@ export default {
   background: var(--gray-light);
 }
 
+.module-icon.warning {
+  background: var(--gradient-card-warning);
+}
+
+.module-icon.success {
+  background: var(--gradient-card-success);
+}
+
 .module-card:hover .module-icon {
   transform: scale(1.05) rotate(3deg);
   box-shadow: var(--shadow-md);
diff --git a/src/views/EnterpriseMentor.vue b/src/views/EnterpriseMentor.vue
index 035cc46..3c3e4ac 100644
--- a/src/views/EnterpriseMentor.vue
+++ b/src/views/EnterpriseMentor.vue
@@ -251,7 +251,7 @@
             <div class="module-accent warning"></div>
             <div class="module-header">
               <div class="module-icon-wrapper">
-                <div class="module-icon" style="background: var(--gradient-card-warning);">
+                <div class="module-icon warning">
                   <Upload :size="18" />
                 </div>
               </div>
@@ -278,7 +278,7 @@
             <div class="module-accent success"></div>
             <div class="module-header">
               <div class="module-icon-wrapper">
-                <div class="module-icon" style="background: var(--gradient-card-success);">
+                <div class="module-icon success">
                   <FolderAdd :size="18" />
                 </div>
               </div>
@@ -973,6 +973,14 @@ export default {
   background: var(--gradient-card-secondary);
 }
 
+.module-icon.warning {
+  background: var(--gradient-card-warning);
+}
+
+.module-icon.success {
+  background: var(--gradient-card-success);
+}
+
 .module-card:hover .module-icon {
   transform: scale(1.05) rotate(3deg);
   box-shadow: var(--shadow-md);
diff --git a/src/views/Portrait.vue b/src/views/Portrait.vue
index d4d6070..350ff3b 100644
--- a/src/views/Portrait.vue
+++ b/src/views/Portrait.vue
@@ -268,7 +268,7 @@ export default {
     const currentPortraitData = computed(() => {
       if (!selectedStudentId.value) return null
       const data = mockPortraitData.abilityRadar.students[selectedStudentId.value]
-      console.log('currentPortraitData computed:', selectedStudentId.value, data)
+      // Portrait data computed for selectedStudentId
       return data
     })
 
diff --git a/src/views/ReportCenter.vue b/src/views/ReportCenter.vue
index 002058d..1e08a6e 100644
--- a/src/views/ReportCenter.vue
+++ b/src/views/ReportCenter.vue
@@ -13,7 +13,7 @@
           v-model="searchKeyword"
           placeholder="搜索学生姓名或学号"
           prefix-icon="Search"
-          style="width: 300px;"
+          class="search-input"
           clearable
         />
       </div>
@@ -473,6 +473,11 @@ export default {
   color: var(--primary);
 }
 
+/* 搜索输入框 */
+.search-input {
+  width: 300px;
+}
+
 /* 操作按钮 */
 .card-actions {
   display: flex;
diff --git a/src/views/ReportMonitor.vue b/src/views/ReportMonitor.vue
index 49c5945..060754c 100644
--- a/src/views/ReportMonitor.vue
+++ b/src/views/ReportMonitor.vue
@@ -448,6 +448,22 @@ export default {
       ElMessage.success('图表导出功能开发中...')
     }
 
+    const generateTrendData = () => {
+      // 根据选择的时间周期生成趋势数据
+      const studentTrendData = mockReportData.developmentTrends[studentId.value]
+      if (studentTrendData) {
+        return studentTrendData.monthlyScores.map(item => ({
+          month: item.month.split('-')[1] + '月',
+          score: item.overall,
+          company: item.company,
+          teacher: item.teacher,
+          expert: item.expert,
+          peer: item.peer
+        }))
+      }
+      return []
+    }
+
     const onPeriodChange = () => {
       trendData.value = generateTrendData()
       initTrendChart()