diff --git a/CLAUDE.md b/CLAUDE.md index 133a013..5f50f4d 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -105,6 +105,17 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co - **硬编码清理**：所有颜色值改为CSS变量，图表参数提取为常量 - **调试输出移除**：console.error替换为用户友好提示 - **设计系统完善**：100%遵循CSS变量系统，确保视觉一致性 +- **编译错误修复**：JavaScript对象中CSS变量使用getCSSVariable函数 + +#### 🏠 工作台和报告中心优化 +- **报告中心重构**： + - 新增ReportCenter.vue学生列表页面 + - 支持学生搜索、筛选、状态展示 + - 修复硬编码跳转问题，提升用户体验 +- **工作台样式优化**： + - 修复快速访问卡片过大问题 + - 改用flex布局，设置固定宽度避免平分容器 + - 移除"开发中"状态模块，保持功能一致性 #### 📊 功能完成度统计 - 评价管理：100% ✅ diff --git a/src/components/EvaluationDialog.vue b/src/components/EvaluationDialog.vue index 3b57820..db1b767 100644 --- a/src/components/EvaluationDialog.vue +++ b/src/components/EvaluationDialog.vue @@ -28,7 +28,7 @@ @@ -37,7 +37,7 @@ @@ -46,7 +46,7 @@ @@ -55,7 +55,7 @@ @@ -92,7 +92,7 @@ @@ -101,7 +101,7 @@ @@ -110,7 +110,7 @@ @@ -119,7 +119,7 @@ @@ -154,7 +154,7 @@ @@ -163,7 +163,7 @@ @@ -172,7 +172,7 @@ @@ -181,7 +181,7 @@ diff --git a/src/components/SubmissionDialog.vue b/src/components/SubmissionDialog.vue index c0da02b..4002523 100644 --- a/src/components/SubmissionDialog.vue +++ b/src/components/SubmissionDialog.vue @@ -145,7 +145,7 @@ @@ -154,7 +154,7 @@ @@ -163,7 +163,7 @@ diff --git a/src/router/index.js b/src/router/index.js index 83090e1..3cead41 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -28,6 +28,11 @@ const routes = [ component: () => import('@/views/Portrait.vue'), meta: { role: 'teacher' } }, + { + path: 'reports', + name: 'ReportCenter', + component: () => import('@/views/ReportCenter.vue') + }, { path: 'report/:studentId', name: 'Report', diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue index fbf1794..5d07800 100644 --- a/src/views/Dashboard.vue +++ b/src/views/Dashboard.vue @@ -208,31 +208,6 @@ -
-
-
-
-
- -
-
-
开发中
-
-
-

数据统计

-

- 实时数据大屏展示，多维度统计分析，支持数据导出和可视化定制。包含学生表现、教学质量、实践成果等核心指标监控。 -

-
-
📈 趋势分析
-
🎯 目标达成
-
📱 移动大屏
-
-
- 2024年4月上线 -
-
-
@@ -262,7 +237,6 @@ export default { Clock, TrendCharts, Document, - DataAnalysis, ArrowRight, Search, Bell @@ -282,9 +256,8 @@ export default { } const navigateToReport = () => { - console.log('报告中心按钮被点击') - // 默认使用第一个学生的ID来演示报告功能 - router.push('/home/report/1') + // 导航到报告中心列表页面 + router.push('/home/reports') } return { @@ -619,9 +592,9 @@ export default { } .modules-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + display: flex; gap: var(--spacing-lg); + flex-wrap: wrap; } .module-card { @@ -635,7 +608,8 @@ export default { position: relative; overflow: hidden; animation: slideInUp 0.7s ease-out backwards; - min-height: 260px; + flex: 0 0 280px; + height: 220px; display: flex; flex-direction: column; } @@ -665,8 +639,8 @@ export default { .module-card:nth-child(4) { animation-delay: 0.4s; } .module-card:hover { - transform: translateY(-8px); - box-shadow: var(--shadow-xl); + transform: translateY(-4px); + box-shadow: var(--shadow-lg); border-color: var(--primary-light); } @@ -686,11 +660,11 @@ export default { display: flex; justify-content: space-between; align-items: center; - padding: var(--spacing-md) var(--spacing-lg) 0; + padding: var(--spacing-md) var(--spacing-md) 0; } .module-content { - padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg); + padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md); flex: 1; display: flex; flex-direction: column; @@ -725,8 +699,8 @@ export default { } .module-card:hover .module-icon { - transform: scale(1.1) rotate(5deg); - box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); + transform: scale(1.05) rotate(3deg); + box-shadow: var(--shadow-md); } .module-badge { @@ -753,26 +727,26 @@ export default { } .module-title { - font-size: calc(var(--font-size-lg) * 1.2); - font-weight: 700; + font-size: var(--font-size-lg); + font-weight: 600; color: var(--text-primary); - margin-bottom: var(--spacing-md); - letter-spacing: -0.3px; + margin-bottom: var(--spacing-sm); + letter-spacing: -0.2px; } .module-description { color: var(--text-secondary); font-size: var(--font-size-sm); - line-height: 1.6; - margin-bottom: var(--spacing-lg); + line-height: 1.5; + margin-bottom: var(--spacing-md); flex: 1; } .module-stats { display: flex; - gap: var(--spacing-lg); - margin-bottom: var(--spacing-lg); - padding: var(--spacing-md) 0; + gap: var(--spacing-md); + margin-bottom: var(--spacing-md); + padding: var(--spacing-sm) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } diff --git a/src/views/Home.vue b/src/views/Home.vue index c986dce..8a614c2 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -141,9 +141,8 @@ export default { } const navigateToReport = () => { - console.log('侧边栏报告中心被点击') - // 默认使用第一个学生的ID来演示报告功能 - router.push('/home/report/1') + // 导航到报告中心列表页面 + router.push('/home/reports') } return { @@ -234,11 +233,11 @@ export default { } .sidebar::-webkit-scrollbar-track { - background: rgba(255, 255, 255, 0.05); + background: var(--glass-bg); } .sidebar::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.2); + background: var(--glass-border); border-radius: 3px; } @@ -262,7 +261,7 @@ export default { right: -50%; width: 300px; height: 300px; - background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); + background: radial-gradient(circle, var(--glass-bg) 0%, transparent 70%); border-radius: 50%; filter: blur(40px); } @@ -288,7 +287,7 @@ export default { left: -50%; width: 200%; height: 200%; - background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent); + background: linear-gradient(45deg, transparent, var(--glass-bg), transparent); transform: rotate(45deg); transition: 0.5s; opacity: 0; @@ -315,7 +314,7 @@ export default { .user-profile:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.15); - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow-lg); } .avatar-wrapper { @@ -465,7 +464,7 @@ export default { } .nav-badge.hot { - background: linear-gradient(135deg, #ff6b6b 0%, #ff8787 100%); + background: var(--gradient-card-warning); text-transform: uppercase; font-size: 10px; padding: 3px 6px; @@ -504,7 +503,7 @@ export default { } .nav-item.active .nav-icon { - background: rgba(255, 255, 255, 0.2); + background: var(--glass-border); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); } @@ -536,7 +535,7 @@ export default { } .footer-btn:hover { - background: rgba(255, 255, 255, 0.05); + background: var(--glass-bg); color: white; } @@ -1156,11 +1155,11 @@ export default { } .module-icon.muted { - background: linear-gradient(135deg, #9ca3af 0%, #d1d5db 100%); + background: linear-gradient(135deg, var(--gray-light) 0%, var(--gray-lighter) 100%); } .module-icon.muted::after { - background: linear-gradient(135deg, #9ca3af 0%, #d1d5db 100%); + background: linear-gradient(135deg, var(--gray-light) 0%, var(--gray-lighter) 100%); } .module-badge { diff --git a/src/views/Portrait.vue b/src/views/Portrait.vue index 7b37122..837ecda 100644 --- a/src/views/Portrait.vue +++ b/src/views/Portrait.vue @@ -176,7 +176,7 @@ v-model="currentReportData.industryFeedback.rating" disabled show-score - text-color="#ff9900" + text-color="var(--warning)" score-template="{value}" /> @@ -205,7 +205,7 @@ :image-size="200" > diff --git a/src/views/ReportAnalysis.vue b/src/views/ReportAnalysis.vue index d561983..a62f1f3 100644 --- a/src/views/ReportAnalysis.vue +++ b/src/views/ReportAnalysis.vue @@ -200,12 +200,17 @@ import * as echarts from 'echarts' import BaseCard from '@/components/BaseCard.vue' import { mockStudents, mockPortraitData, mockReportData } from '@/utils/mockData' +// 获取CSS变量值的工具函数 +const getCSSVariable = (variable) => { + return getComputedStyle(document.documentElement).getPropertyValue(variable).trim() +} + const ABILITY_COLORS = [ - '#1e3a8a', - '#06b6d4', - '#10b981', - '#f59e0b', - '#ef4444', + getCSSVariable('--primary'), + getCSSVariable('--secondary'), + getCSSVariable('--success'), + getCSSVariable('--warning'), + getCSSVariable('--danger'), '#8b5cf6' ] @@ -359,12 +364,12 @@ export default { splitNumber: 4, shape: 'polygon', axisName: { - color: '#4b5563', + color: getCSSVariable('--gray'), fontSize: 12 }, splitLine: { lineStyle: { - color: '#e5e7eb' + color: getCSSVariable('--border-light') } }, splitArea: { @@ -375,7 +380,7 @@ export default { }, axisLine: { lineStyle: { - color: '#e5e7eb' + color: getCSSVariable('--border-light') } } }, @@ -393,12 +398,12 @@ export default { ]) }, lineStyle: { - color: '#1e3a8a', + color: getCSSVariable('--primary'), width: 2 }, itemStyle: { - color: '#1e3a8a', - borderColor: '#ffffff', + color: getCSSVariable('--primary'), + borderColor: getCSSVariable('--white'), borderWidth: 2 } } diff --git a/src/views/ReportCenter.vue b/src/views/ReportCenter.vue new file mode 100644 index 0000000..2834ae0 --- /dev/null +++ b/src/views/ReportCenter.vue @@ -0,0 +1,488 @@ + + + + + \ No newline at end of file diff --git a/src/views/ReportMonitor.vue b/src/views/ReportMonitor.vue index 066ac54..dfda75f 100644 --- a/src/views/ReportMonitor.vue +++ b/src/views/ReportMonitor.vue @@ -153,6 +153,11 @@ import * as echarts from 'echarts' import BaseCard from '@/components/BaseCard.vue' import { mockStudents, mockReportData } from '@/utils/mockData' +// 获取CSS变量值的工具函数 +const getCSSVariable = (variable) => { + return getComputedStyle(document.documentElement).getPropertyValue(variable).trim() +} + const TIME_PERIODS = { semester: '2024-2025学年第1学期', year: '2024-2025学年', @@ -226,7 +231,7 @@ export default { type: 'category', data: trendData.value.map(item => item.month), axisLine: { - lineStyle: { color: '#e0e6ed' } + lineStyle: { color: getCSSVariable('--border-light') } } }, yAxis: { @@ -234,10 +239,10 @@ export default { min: 60, max: 100, axisLine: { - lineStyle: { color: '#e0e6ed' } + lineStyle: { color: getCSSVariable('--border-light') } }, splitLine: { - lineStyle: { color: '#f0f2f5' } + lineStyle: { color: getCSSVariable('--bg-secondary') } } }, series: [ @@ -246,8 +251,8 @@ export default { type: 'line', data: trendData.value.map(item => item.score), smooth: true, - lineStyle: { width: 3, color: '#1e3a8a' }, - itemStyle: { color: '#1e3a8a' }, + lineStyle: { width: 3, color: getCSSVariable('--primary') }, + itemStyle: { color: getCSSVariable('--primary') }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(30, 58, 138, 0.3)' }, @@ -260,28 +265,28 @@ export default { type: 'line', data: trendData.value.map(item => item.company), smooth: true, - lineStyle: { color: '#06b6d4' } + lineStyle: { color: getCSSVariable('--secondary') } }, { name: '教师评价', type: 'line', data: trendData.value.map(item => item.teacher), smooth: true, - lineStyle: { color: '#10b981' } + lineStyle: { color: getCSSVariable('--success') } }, { name: '专家评价', type: 'line', data: trendData.value.map(item => item.expert), smooth: true, - lineStyle: { color: '#f59e0b' } + lineStyle: { color: getCSSVariable('--warning') } }, { name: '学生互评', type: 'line', data: trendData.value.map(item => item.peer), smooth: true, - lineStyle: { color: '#ef4444' } + lineStyle: { color: getCSSVariable('--danger') } } ] } @@ -335,8 +340,8 @@ export default { data: currentData, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: '#3b82f6' }, - { offset: 1, color: '#1e3a8a' } + { offset: 0, color: getCSSVariable('--primary-light') }, + { offset: 1, color: getCSSVariable('--primary') } ]) } }, @@ -346,8 +351,8 @@ export default { data: previousData, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: '#94a3b8' }, - { offset: 1, color: '#64748b' } + { offset: 0, color: getCSSVariable('--gray-light') }, + { offset: 1, color: getCSSVariable('--gray') } ]) } } @@ -399,12 +404,12 @@ export default { smooth: true, lineStyle: { width: 3, - color: '#10b981' + color: getCSSVariable('--success') }, itemStyle: { - color: '#10b981', + color: getCSSVariable('--success'), borderWidth: 2, - borderColor: '#ffffff' + borderColor: getCSSVariable('--white') }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [