From 37db6c7a6cd90b0f2e494bc7355f380a7b7e3d3f Mon Sep 17 00:00:00 2001 From: sladro Date: Wed, 17 Sep 2025 18:12:50 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84BigScreenPortrait?= =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E5=8A=9F=E8=83=BD=E5=92=8C=E7=95=8C=E9=9D=A2?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - BigScreenPortrait.vue: 添加控制面板、返回按钮，统一字体大小为xl - Dashboard.vue: 为学生角色添加"资料上传"功能卡片 - Home.vue: 为教师角色添加"学生能力画像"导航按钮 - mockData.js: 更新教师姓名为"刘澜涛"，修改能力矩阵维度名称 - variables.css: 新增gray-alpha颜色变量系统 - common.css: 添加Element Plus下拉列表全局样式 - ReportMonitor.vue: 移除重复的getCSSVariable函数定义 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- src/assets/styles/common.css | 23 +++ src/assets/styles/variables.css | 4 + src/utils/mockData.js | 20 +-- src/views/BigScreenPortrait.vue | 238 ++++++++++++++++++++++++++------ src/views/Dashboard.vue | 45 +++++- src/views/Home.vue | 20 ++- src/views/ReportMonitor.vue | 5 - 7 files changed, 295 insertions(+), 60 deletions(-) diff --git a/src/assets/styles/common.css b/src/assets/styles/common.css index 302c82b..3ba3dd4 100644 --- a/src/assets/styles/common.css +++ b/src/assets/styles/common.css @@ -106,4 +106,27 @@ min-height: 100vh; background: var(--bg-secondary); padding: var(--spacing-lg); +} + +/* Element Plus 下拉列表全局样式覆盖 */ +.el-select-dropdown { + background-color: var(--gray-alpha-heavy) !important; + border: 1px solid var(--gray-alpha-medium) !important; + box-shadow: var(--shadow-md) !important; +} + +.el-select-dropdown .el-select-dropdown__item { + color: var(--gray-light) !important; + background-color: transparent !important; +} + +.el-select-dropdown .el-select-dropdown__item:hover { + background-color: var(--gray-alpha-medium) !important; + color: var(--lighter) !important; +} + +.el-select-dropdown .el-select-dropdown__item.selected { + background-color: var(--secondary-alpha-heavy) !important; + color: var(--secondary) !important; + font-weight: 600 !important; } \ No newline at end of file diff --git a/src/assets/styles/variables.css b/src/assets/styles/variables.css index 0e26050..4a32f57 100644 --- a/src/assets/styles/variables.css +++ b/src/assets/styles/variables.css @@ -125,6 +125,10 @@ --secondary-alpha-heavy: rgba(6, 182, 212, var(--opacity-heavy)); + --gray-alpha-light: rgba(107, 114, 128, var(--opacity-light)); + --gray-alpha-medium: rgba(107, 114, 128, var(--opacity-medium)); + --gray-alpha-heavy: rgba(107, 114, 128, var(--opacity-heavy)); + --white-alpha-high: rgba(255, 255, 255, 0.98); --white-alpha-medium: rgba(255, 255, 255, 0.9); --white-alpha-light: rgba(255, 255, 255, 0.6); diff --git a/src/utils/mockData.js b/src/utils/mockData.js index a6e5674..3fcfc0f 100644 --- a/src/utils/mockData.js +++ b/src/utils/mockData.js @@ -1,7 +1,7 @@ // Mock用户数据 export const mockUsers = [ { username: 'student1', password: '123456', role: 'student', name: '张志明', avatar: '/avatar/student1.jpg' }, - { username: 'teacher1', password: '123456', role: 'teacher', name: '李老师', avatar: '/avatar/teacher1.jpg' }, + { username: 'teacher1', password: '123456', role: 'teacher', name: '刘澜涛', avatar: '/avatar/teacher1.jpg' }, { username: 'company1', password: '123456', role: 'company', name: '华为技术有限公司', avatar: '/avatar/company1.jpg' }, { username: 'expert1', password: '123456', role: 'expert', name: '王专家', avatar: '/avatar/expert1.jpg' }, { username: 'student2', password: '123456', role: 'student', name: '李梦瑶', avatar: '/avatar/student2.jpg' }, @@ -124,7 +124,7 @@ export const mockEvaluationData = { courseGrade: 88.5, comments: '该学生理论基础扎实，实践能力良好，建议在创新思维方面多下功夫。', evaluatedAt: '2024-12-08T16:45:00Z', - evaluatorName: '李老师' + evaluatorName: '刘澜涛' }, 2: { theory: 4.7, @@ -134,7 +134,7 @@ export const mockEvaluationData = { courseGrade: 94.5, comments: '优秀学生，各方面表现突出，理论与实践结合能力强，创新意识优秀。', evaluatedAt: '2024-12-09T10:30:00Z', - evaluatorName: '李老师' + evaluatorName: '刘澜涛' }, 3: { theory: 4.6, @@ -144,7 +144,7 @@ export const mockEvaluationData = { courseGrade: 92.0, comments: '表现优异，理论与实践结合能力强，具有良好的创新潜质。', evaluatedAt: '2024-12-07T11:15:00Z', - evaluatorName: '李老师' + evaluatorName: '刘澜涛' }, 4: { theory: 3.9, @@ -382,7 +382,7 @@ export const mockPortraitData = { ], teacherComments: [ { - teacher: '李老师', + teacher: '刘澜涛', course: '软件工程', comment: '张志明同学在项目开发中表现突出，具备良好的工程思维和团队协作能力。', date: '2024-06-15' @@ -419,11 +419,11 @@ export const bigScreenData = { // 能力矩阵数据（三角形雷达图） abilityMatrix: { - dimensions: ['专业基础', '专业综合', '数智应用'], + dimensions: ['量化分析', '风险管理', '创新应用'], students: [ - { name: '张志明', values: [85, 92, 78], color: '#06b6d4' }, - { name: '李梦瑶', values: [90, 88, 95], color: '#3b82f6' }, - { name: '王浩然', values: [82, 85, 88], color: '#10b981' } + { name: 'A', values: [85, 92, 78], color: '#06b6d4' }, + { name: 'B', values: [90, 88, 95], color: '#3b82f6' }, + { name: 'C', values: [82, 85, 88], color: '#10b981' } ] }, @@ -682,7 +682,7 @@ export const mockReportData = { teacher: { score: 85, feedback: '理论基础扎实，实践能力强，课堂表现积极，作业质量高', - evaluator: '李老师 - 软件工程', + evaluator: '刘澜涛 - 软件工程', strengths: ['理论掌握', '实践应用', '学习态度'], improvements: ['研究深度', '创新思维'] }, diff --git a/src/views/BigScreenPortrait.vue b/src/views/BigScreenPortrait.vue index 7bc59f8..ef52f6d 100644 --- a/src/views/BigScreenPortrait.vue +++ b/src/views/BigScreenPortrait.vue @@ -10,6 +10,58 @@

学生能力评价画像系统

STUDENT CAPABILITY EVALUATION PORTRAIT
{{ currentTime }}
+
+ + 返回 +
+ + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
@@ -44,7 +96,7 @@
- 参与实习学生人数 + 参与实践学生人数
实时 @@ -177,7 +229,7 @@
- 实习数据统计 + 实践数据统计
实时更新
@@ -190,7 +242,7 @@
24
-
实习课程
+
实践课程
+5% @@ -370,12 +422,16 @@ import { ref, onMounted, onUnmounted, reactive } from 'vue' import * as echarts from 'echarts' import { useRouter } from 'vue-router' import { ElMessage } from 'element-plus' +import { ArrowLeft } from '@element-plus/icons-vue' import { useAuthStore } from '@/stores/auth' -import { mockStudents, mockPortraitData, generateChartData, generateStatsData, bigScreenData } from '@/utils/mockData' +import { mockStudents, mockPortraitData, generateChartData, generateStatsData, bigScreenData, mockOptions } from '@/utils/mockData' import { getCSSVariable, getChartColors, BIG_SCREEN_CONFIG, buildEChartsGradient } from '@/utils/cssHelper' export default { name: 'BigScreenPortrait', + components: { + ArrowLeft + }, setup() { const router = useRouter() const authStore = useAuthStore() @@ -383,6 +439,12 @@ export default { const studentCount = ref(156) const studentList = ref([]) const practiceStats = ref([]) + + // 控制面板数据 + const selectedSemester = ref(mockOptions.semesters[2]) // 默认选择最新学期 + const selectedGrade = ref(mockOptions.grades[0]) // 默认选择第一个年级 + const selectedClass = ref(mockOptions.classes[0]) // 默认选择第一个班级 + const selectedProject = ref(mockOptions.projects[0]) // 默认选择第一个项目 // 图表实例 const gradeChart = ref(null) @@ -770,6 +832,11 @@ export default { gaugeChart, trendChart, authStore, + mockOptions, + selectedSemester, + selectedGrade, + selectedClass, + selectedProject, viewReport, analyzeDimension, generateReport, @@ -814,6 +881,69 @@ export default { 50% { transform: translateY(-20px) rotate(180deg); } } +/* 控制面板样式 */ +.control-panel { + position: absolute; + top: var(--spacing-sm); + left: var(--spacing-sm); + z-index: 20; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--spacing-sm); + background: var(--gray-alpha-medium); + backdrop-filter: var(--glass-blur); + border-radius: var(--radius-md); + padding: var(--spacing-sm); + min-width: 520px; +} + +.control-item { + display: flex; + flex-direction: column; + gap: var(--spacing-xs); + align-items: stretch; +} + +.control-label { + font-size: var(--font-size-xl); + color: var(--gray-light); + font-weight: 500; + white-space: nowrap; + text-align: center; + margin-bottom: var(--spacing-xs); +} + +.control-panel .el-select { + width: 100%; +} + +.control-panel :deep(.el-input__wrapper) { + background-color: var(--gray-alpha-medium); + border: 1px solid var(--gray-alpha-light); + border-radius: var(--radius-sm); + box-shadow: none; +} + +.control-panel :deep(.el-input__wrapper:hover) { + border-color: var(--gray); + background-color: var(--gray-alpha-heavy); +} + +.control-panel :deep(.el-input__wrapper.is-focus) { + border-color: var(--secondary); + background-color: var(--gray-alpha-heavy); +} + +.control-panel :deep(.el-input__inner) { + color: var(--gray-light); + font-size: var(--font-size-lg); + font-weight: 500; +} + +.control-panel :deep(.el-input__suffix) { + color: var(--gray-light); +} + /* 标题区域 */ .header-section { position: relative; @@ -847,8 +977,7 @@ export default { .current-time { position: absolute; right: var(--spacing-lg); - top: 50%; - transform: translateY(-50%); + top: var(--spacing-sm); font-size: var(--font-size-xs); color: var(--lighter); background: var(--primary-alpha-heavy); @@ -857,6 +986,29 @@ export default { border: 1px solid var(--primary-alpha-light); } +.back-button { + position: absolute; + right: var(--spacing-lg); + bottom: var(--spacing-sm); + display: flex; + align-items: center; + gap: var(--spacing-xs); + font-size: var(--font-size-xs); + color: var(--lighter); + background: var(--gray-alpha-medium); + padding: var(--spacing-xs) var(--spacing-sm); + border-radius: var(--radius-xl); + border: 1px solid var(--gray-alpha-light); + cursor: pointer; + transition: var(--transition); +} + +.back-button:hover { + background: var(--gray-alpha-heavy); + border-color: var(--gray); + transform: translateY(-1px); +} + /* 主内容区域 - 优化间距和布局 */ .main-content { display: grid; @@ -870,8 +1022,8 @@ export default { /* 模块容器 - 减少内边距 */ .module-container { - background: var(--primary-alpha-light); - border: 1px solid var(--primary-alpha-medium); + background: rgba(30, 58, 138, 0.3); + border: 1px solid rgba(59, 130, 246, 0.4); border-radius: var(--radius-md); padding: var(--spacing-md); backdrop-filter: var(--glass-blur); @@ -902,7 +1054,7 @@ export default { gap: var(--spacing-xs); margin-bottom: var(--spacing-md); color: var(--lighter); - font-size: var(--font-size-lg); + font-size: var(--font-size-xl); font-weight: 600; } @@ -1020,7 +1172,7 @@ export default { } .stat-icon { - font-size: 12px; + font-size: var(--font-size-sm); opacity: 0.9; } @@ -1031,13 +1183,13 @@ export default { } .stat-data .stat-value { - font-size: var(--font-size-xs); + font-size: var(--font-size-lg); font-weight: 600; color: var(--lighter); } .stat-data .stat-label { - font-size: 9px; + font-size: var(--font-size-sm); color: var(--gray-light); opacity: 0.8; } @@ -1049,7 +1201,7 @@ export default { .metrics-layout { display: grid; - grid-template-columns: 1.4fr 1fr; + grid-template-columns: 1.8fr 1fr; gap: 12px; height: 100%; } @@ -1097,7 +1249,7 @@ export default { } .main-metric-header span { - font-size: 16px; + font-size: var(--font-size-xl); color: #e2e8f0; font-weight: 500; } @@ -1107,7 +1259,7 @@ export default { align-items: center; gap: 4px; margin-left: auto; - font-size: 10px; + font-size: var(--font-size-sm); color: var(--success); background: var(--success-alpha-medium); padding: 3px 6px; @@ -1229,8 +1381,8 @@ export default { } .wall-card { - background: var(--primary-alpha-light); - border: 1px solid var(--primary-alpha-light); + background: rgba(30, 58, 138, 0.3); + border: 1px solid rgba(59, 130, 246, 0.4); border-radius: var(--radius-sm); padding: var(--spacing-xs); display: flex; @@ -1239,6 +1391,8 @@ export default { position: relative; overflow: hidden; transition: var(--transition); + backdrop-filter: var(--glass-blur); + box-shadow: var(--shadow-sm); } .wall-card:hover { @@ -1282,7 +1436,7 @@ export default { } .wall-label { - font-size: var(--font-size-xs); + font-size: var(--font-size-sm); color: var(--gray-light); margin-bottom: 3px; opacity: 0.9; @@ -1294,7 +1448,7 @@ export default { } .wall-trend { - font-size: 11px; + font-size: var(--font-size-sm); font-weight: 500; } @@ -1491,7 +1645,7 @@ export default { } .card-subtitle { - font-size: 9px; + font-size: var(--font-size-xs); color: var(--gray-light); opacity: 0.8; } @@ -1777,7 +1931,7 @@ export default { } .update-time { - font-size: 11px; + font-size: var(--font-size-sm); color: var(--gray-light); background: var(--primary-alpha-heavy); padding: 3px 6px; @@ -1837,7 +1991,7 @@ export default { } .overview-label { - font-size: 11px; + font-size: var(--font-size-sm); color: var(--gray-light); margin-bottom: 2px; } @@ -1846,7 +2000,7 @@ export default { display: flex; align-items: center; gap: 3px; - font-size: 11px; + font-size: var(--font-size-sm); color: var(--success); } @@ -2000,15 +2154,16 @@ export default { display: grid; grid-template-columns: 1.5fr 1fr 1fr 0.8fr; gap: var(--spacing-xs); - padding: var(--spacing-xs) var(--spacing-md); - margin: 2px 0; + padding: 4px var(--spacing-sm); + margin: 1px 0; border-radius: var(--radius-sm); color: var(--lighter); - font-size: 11px; + font-size: var(--font-size-sm); align-items: center; transition: var(--transition); background: var(--primary-alpha-light); border: 1px solid transparent; + min-height: 32px; } .table-row-enhanced:hover { @@ -2025,15 +2180,15 @@ export default { } .student-avatar { - width: 20px; - height: 20px; + width: 24px; + height: 24px; border-radius: 50%; background: var(--secondary); color: white; display: flex; align-items: center; justify-content: center; - font-size: 10px; + font-size: var(--font-size-xs); font-weight: 600; } @@ -2048,16 +2203,17 @@ export default { .student-status { display: flex; - flex-direction: column; - gap: 2px; + align-items: center; + gap: var(--spacing-xs); } .status-badge { padding: 2px 6px; border-radius: var(--radius-lg); - font-size: 9px; + font-size: var(--font-size-sm); font-weight: 500; text-align: center; + white-space: nowrap; } .status-badge.completed { @@ -2067,9 +2223,9 @@ export default { } .grade-indicator { - font-size: 8px; + font-size: var(--font-size-sm); color: var(--gray-light); - text-align: center; + white-space: nowrap; } .action-group { @@ -2079,8 +2235,8 @@ export default { } .action-btn { - width: 20px; - height: 20px; + width: 24px; + height: 24px; border-radius: var(--radius-sm); border: none; display: flex; @@ -2088,7 +2244,7 @@ export default { justify-content: center; cursor: pointer; transition: var(--transition); - font-size: 10px; + font-size: var(--font-size-xs); } .action-btn.primary { @@ -2271,7 +2427,7 @@ export default { /* 模块标题紧凑模式 */ .module-header.compact { margin-bottom: 10px; - font-size: 14px; + font-size: var(--font-size-xl); font-weight: 600; } @@ -2284,7 +2440,7 @@ export default { align-items: center; justify-content: space-between; margin-bottom: 8px; - font-size: 13px; + font-size: var(--font-size-xl); font-weight: 600; } @@ -2297,7 +2453,7 @@ export default { color: var(--success); padding: 2px 6px; border-radius: var(--radius-lg); - font-size: 10px; + font-size: var(--font-size-sm); font-weight: 500; border: 1px solid rgba(16, 185, 129, 0.2); } @@ -2306,7 +2462,7 @@ export default { display: flex; align-items: center; gap: 4px; - font-size: 10px; + font-size: var(--font-size-sm); color: var(--success); } diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue index 8e37472..34fbed2 100644 --- a/src/views/Dashboard.vue +++ b/src/views/Dashboard.vue @@ -186,7 +186,7 @@
-
+
@@ -208,6 +208,37 @@
+
+
+
+
+
+ +
+
+
学生专属
+
+
+

资料上传

+

+ 影像、音频、文字等多种格式资料上传，支持实践成果、学习记录、项目文档等各类材料提交。 +

+
+ 影像资料 + 音频记录 + 文字文档 +
+
+ 上传资料 + +
+
+
+
@@ -226,7 +257,8 @@ import { DataAnalysis, ArrowRight, Search, - Bell + Bell, + Upload } from '@element-plus/icons-vue' export default { @@ -239,7 +271,8 @@ export default { Document, ArrowRight, Search, - Bell + Bell, + Upload }, setup() { const router = useRouter() @@ -260,10 +293,16 @@ export default { router.push('/home/reports') } + const goToUpload = () => { + // 导航到资料上传页面 + router.push('/home/upload') + } + return { user, goToEvaluate, goToPortrait, + goToUpload, navigateToReport } } diff --git a/src/views/Home.vue b/src/views/Home.vue index bfacade..785f0f7 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -80,6 +80,14 @@
+