From 16802c85e53c2c3d11c95e594e0905b44579a193 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A5=80=E6=A2=A6?= <3501646051@qq.com>
Date: Mon, 22 Dec 2025 21:07:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=AD=A6=E7=94=9F):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=88=90=E7=BB=A9=E5=88=86=E6=9E=90=E5=8A=9F=E8=83=BD=E5=8F=8A?=
 =?UTF-8?q?=E5=AF=86=E7=A0=81=E4=BF=AE=E6=94=B9=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增成绩分析页面，包含GPA趋势图、成绩分布图和学分进度
- 实现学生密码修改功能，包括前端表单和后端验证逻辑
- 添加课程类别分析功能，展示不同类别课程的GPA表现
- 优化学生仪表板和课程页面导航链接
- 增加数据加载状态提示和错误处理
---
 backend/controllers/authController.js      |  20 ++
 backend/controllers/studentController.js   |  14 +
 backend/models/User.js                     |   7 +
 backend/routes/auth.js                     |   2 +
 backend/routes/student.js                  |   1 +
 backend/server.js                          |   3 +
 backend/services/authService.js            |  18 +-
 backend/services/studentService.js         |  95 ++++++
 frontend/public/js/student.js              | 207 ++++++++++++-
 frontend/views/student/dashboard.html      |  58 +++-
 frontend/views/student/grade_analysis.html | 341 +++++++++++++++++++++
 frontend/views/student/my_courses.html     |   5 +-
 frontend/views/student/profile.html        |  62 +++-
 13 files changed, 819 insertions(+), 14 deletions(-)
 create mode 100644 frontend/views/student/grade_analysis.html

diff --git a/backend/controllers/authController.js b/backend/controllers/authController.js
index 5aa9d07..4589135 100644
--- a/backend/controllers/authController.js
+++ b/backend/controllers/authController.js
@@ -65,6 +65,26 @@ class AuthController {
             res.json({ success: false, message: '未登录' });
         }
     }
+
+    static async updatePassword(req, res) {
+        try {
+            const userId = req.session.user.id;
+            const { oldPassword, newPassword } = req.body;
+
+            if (!oldPassword || !newPassword) {
+                return error(res, '请提供原密码和新密码', 400);
+            }
+
+            await AuthService.updatePassword(userId, oldPassword, newPassword);
+            success(res, null, '密码修改成功');
+        } catch (err) {
+            if (err.message === '原密码错误' || err.message === '用户不存在') {
+                return error(res, err.message, 400);
+            }
+            console.error('Update Password Error:', err);
+            error(res, '服务器错误');
+        }
+    }
 }
 
 module.exports = AuthController;
\ No newline at end of file
diff --git a/backend/controllers/studentController.js b/backend/controllers/studentController.js
index ac4f2e9..15c30d5 100644
--- a/backend/controllers/studentController.js
+++ b/backend/controllers/studentController.js
@@ -58,6 +58,20 @@ class StudentController {
             error(res, '服务器错误');
         }
     }
+
+    static async getGradeStatistics(req, res) {
+        try {
+            const userId = req.session.user.id;
+            const data = await StudentService.getGradeStatistics(userId);
+            success(res, data);
+        } catch (err) {
+            if (err.message === '学生信息不存在') {
+                return error(res, err.message, 404);
+            }
+            console.error('Get Grade Statistics Error:', err);
+            error(res, '服务器错误');
+        }
+    }
 }
 
 module.exports = StudentController;
diff --git a/backend/models/User.js b/backend/models/User.js
index e4d5bf9..0177278 100644
--- a/backend/models/User.js
+++ b/backend/models/User.js
@@ -28,6 +28,13 @@ class User {
     static async verifyPassword(plainPassword, hashedPassword) {
         return await bcrypt.compare(plainPassword, hashedPassword);
     }
+
+    static async updatePassword(id, newPassword) {
+        const salt = await bcrypt.genSalt(10);
+        const hashedPassword = await bcrypt.hash(newPassword, salt);
+        await db.query('UPDATE users SET password = ? WHERE id = ?', [hashedPassword, id]);
+        return true;
+    }
 }
 
 module.exports = User;
\ No newline at end of file
diff --git a/backend/routes/auth.js b/backend/routes/auth.js
index b3983d8..a5d57a2 100644
--- a/backend/routes/auth.js
+++ b/backend/routes/auth.js
@@ -1,10 +1,12 @@
 const express = require('express');
 const router = express.Router();
 const AuthController = require('../controllers/authController');
+const { requireAuth } = require('../middleware/auth');
 
 router.post('/login', AuthController.login);
 router.post('/register', AuthController.register);
 router.post('/logout', AuthController.logout);
 router.get('/me', AuthController.getCurrentUser);
+router.put('/update-password', requireAuth, AuthController.updatePassword);
 
 module.exports = router;
\ No newline at end of file
diff --git a/backend/routes/student.js b/backend/routes/student.js
index ce1ba53..973200d 100644
--- a/backend/routes/student.js
+++ b/backend/routes/student.js
@@ -5,6 +5,7 @@ const { requireAuth, requireRole } = require('../middleware/auth');
 
 router.get('/courses', requireAuth, requireRole(['student']), StudentController.getCourses);
 router.get('/courses/:id', requireAuth, requireRole(['student']), StudentController.getCourseDetails);
+router.get('/statistics', requireAuth, requireRole(['student']), StudentController.getGradeStatistics);
 router.get('/grades', requireAuth, requireRole(['student']), StudentController.getGrades);
 router.get('/grades/:id', requireAuth, requireRole(['student']), StudentController.getGradeDetails);
 
diff --git a/backend/server.js b/backend/server.js
index cd3c47c..abd23d3 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -99,6 +99,9 @@ app.get('/student/dashboard', requirePageAuth, requirePageRole(['student']), (re
 app.get('/student/my-courses', requirePageAuth, requirePageRole(['student']), (req, res) => {
     res.sendFile(path.join(__dirname, '../frontend/views/student/my_courses.html'));
 });
+app.get('/student/grade-analysis', requirePageAuth, requirePageRole(['student']), (req, res) => {
+    res.sendFile(path.join(__dirname, '../frontend/views/student/grade_analysis.html'));
+});
 app.get('/student/profile', requirePageAuth, requirePageRole(['student']), (req, res) => {
     res.sendFile(path.join(__dirname, '../frontend/views/student/profile.html'));
 });
diff --git a/backend/services/authService.js b/backend/services/authService.js
index 9ae8c4d..be818f3 100644
--- a/backend/services/authService.js
+++ b/backend/services/authService.js
@@ -1,5 +1,6 @@
 const User = require('../models/User');
 const Student = require('../models/Student');
+const db = require('../config/database');
 
 class AuthService {
     static async login(id, password, role) {
@@ -55,7 +56,20 @@ class AuthService {
 
         return newUser;
     }
+
+    static async updatePassword(userId, oldPassword, newPassword) {
+        const user = await User.findById(userId);
+        if (!user) {
+            throw new Error('用户不存在');
+        }
+
+        const isValid = await User.verifyPassword(oldPassword, user.password);
+        if (!isValid) {
+            throw new Error('原密码错误');
+        }
+
+        return await User.updatePassword(userId, newPassword);
+    }
 }
 
-const db = require('../config/database'); // 补充引用
-module.exports = AuthService;
\ No newline at end of file
+module.exports = AuthService;
diff --git a/backend/services/studentService.js b/backend/services/studentService.js
index 32da19a..fbdbd17 100644
--- a/backend/services/studentService.js
+++ b/backend/services/studentService.js
@@ -1,6 +1,7 @@
 const Score = require('../models/Score');
 const Student = require('../models/Student');
 const Course = require('../models/Course');
+const db = require('../config/database');
 
 class StudentService {
     static async getStudentCourses(userId) {
@@ -65,6 +66,100 @@ class StudentService {
         }
         return grade;
     }
+
+    static async getGradeStatistics(userId) {
+        const student = await Student.findById(userId);
+        if (!student) {
+            throw new Error('学生信息不存在');
+        }
+
+        const sql = `
+            SELECT g.total_score as score, g.grade_point, g.grade_level, 
+                   c.course_name, CAST(c.credit AS CHAR) as credit, c.semester, c.academic_year, c.category
+            FROM grades g
+            JOIN courses c ON g.course_id = c.id
+            WHERE g.student_id = ?
+            ORDER BY c.semester ASC
+        `;
+        const grades = await db.query(sql, [userId]);
+
+        // 1. 学期 GPA 趋势
+        const semesterGPA = {};
+        // 5. 课程类别分析
+        const categoryStats = {};
+
+        grades.forEach(g => {
+            // console.log('Processing grade:', g);
+            // 学期统计
+            const semester = g.semester || '未知学期';
+            if (!semesterGPA[semester]) {
+                semesterGPA[semester] = { totalGP: 0, totalCredits: 0 };
+            }
+            const credit = parseFloat(g.credit || 0);
+            semesterGPA[semester].totalGP += parseFloat(g.grade_point || 0) * credit;
+            semesterGPA[semester].totalCredits += credit;
+
+            // 类别统计
+            const catName = g.category || '其他';
+            if (!categoryStats[catName]) {
+                categoryStats[catName] = { totalGP: 0, totalCredits: 0 };
+            }
+            categoryStats[catName].totalGP += parseFloat(g.grade_point || 0) * credit;
+            categoryStats[catName].totalCredits += credit;
+        });
+
+        const trend = Object.keys(semesterGPA).map(semester => ({
+            semester,
+            gpa: (semesterGPA[semester].totalGP / semesterGPA[semester].totalCredits).toFixed(2)
+        }));
+
+        const categories = Object.keys(categoryStats).map(cat => {
+            const stats = categoryStats[cat];
+            const gpa = stats.totalCredits > 0 ? (stats.totalGP / stats.totalCredits).toFixed(2) : '0.00';
+            return {
+                category: cat,
+                gpa: gpa,
+                totalCredits: Number(stats.totalCredits) || 0
+            };
+        });
+
+        // 2. 成绩等第分布
+        const distribution = {
+            'A': 0, 'B': 0, 'C': 0, 'D': 0, 'F': 0
+        };
+        grades.forEach(g => {
+            if (distribution[g.grade_level] !== undefined) {
+                distribution[g.grade_level]++;
+            }
+        });
+
+        // 3. 学分进度
+        let earnedCredits = 0;
+        grades.forEach(g => {
+            const score = parseFloat(g.score || 0);
+            const credit = parseFloat(g.credit || 0);
+            if (score >= 60) {
+                earnedCredits += credit;
+            }
+        });
+
+        // 4. 每学期学分详情
+        const semesterCredits = Object.keys(semesterGPA).map(semester => ({
+            semester,
+            credits: semesterGPA[semester].totalCredits
+        }));
+
+        return {
+            trend,
+            distribution,
+            categories,
+            credits: {
+                earned: earnedCredits,
+                target: 160 // 假设目标学分为 160
+            },
+            semesterCredits
+        };
+    }
 }
 
 module.exports = StudentService;
diff --git a/frontend/public/js/student.js b/frontend/public/js/student.js
index 32b924c..d7342ce 100644
--- a/frontend/public/js/student.js
+++ b/frontend/public/js/student.js
@@ -10,6 +10,7 @@ class StudentManager {
     init() {
         this.initDashboard();
         this.initMyCourses();
+        this.initGradeAnalysis();
         this.updateCurrentTime();
         setInterval(() => this.updateCurrentTime(), 1000);
         
@@ -18,6 +19,11 @@ class StudentManager {
         if (refreshBtn) {
             refreshBtn.addEventListener('click', () => this.initMyCourses());
         }
+
+        const refreshTrendBtn = document.getElementById('refreshTrend');
+        if (refreshTrendBtn) {
+            refreshTrendBtn.addEventListener('click', () => this.initGradeAnalysis());
+        }
     }
     
     updateCurrentTime() {
@@ -57,6 +63,16 @@ class StudentManager {
         const tbody = document.getElementById('coursesTableBody');
         if (!tbody) return;
 
+        // 显示加载状态
+        tbody.innerHTML = `
+            <tr>
+                <td colspan="6" class="text-center py-5 text-muted">
+                    <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+                    数据加载中...
+                </td>
+            </tr>
+        `;
+
         try {
             const response = await fetch(`${this.apiBase}/courses`);
             const result = await response.json();
@@ -64,12 +80,28 @@ class StudentManager {
             if (result.success) {
                 this.renderCourses(result.data);
             } else {
+                tbody.innerHTML = `
+                    <tr>
+                        <td colspan="6" class="text-center py-5 text-danger">
+                            <i class="fas fa-exclamation-circle me-2"></i>
+                            ${result.message || '获取课程失败'}
+                        </td>
+                    </tr>
+                `;
                 if (window.authManager) {
                     window.authManager.showNotification(result.message || '获取课程失败', 'error');
                 }
             }
         } catch (error) {
             console.error('Fetch courses data failed:', error);
+            tbody.innerHTML = `
+                <tr>
+                    <td colspan="6" class="text-center py-5 text-danger">
+                        <i class="fas fa-exclamation-triangle me-2"></i>
+                        网络错误，请稍后重试
+                    </td>
+                </tr>
+            `;
         }
     }
 
@@ -113,8 +145,16 @@ class StudentManager {
                 this.updateElement('modalSemester', course.semester || '2023-2024 下学期');
                 this.updateElement('modalTeacherEmail', course.teacher_email || '暂无');
 
-                const modal = new bootstrap.Modal(document.getElementById('courseDetailsModal'));
-                modal.show();
+                const modalEl = document.getElementById('courseDetailsModal');
+                if (modalEl) {
+                    const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
+                    modal.show();
+                } else {
+                    console.error('Course details modal element not found');
+                    if (window.authManager) {
+                        window.authManager.showNotification('无法打开课程详情：模态框组件缺失', 'error');
+                    }
+                }
             } else {
                 if (window.authManager) {
                     window.authManager.showNotification(result.message || '获取课程详情失败', 'error');
@@ -122,6 +162,9 @@ class StudentManager {
             }
         } catch (error) {
             console.error('Fetch course details failed:', error);
+            if (window.authManager) {
+                window.authManager.showNotification('获取课程详情失败：网络错误', 'error');
+            }
         }
     }
     
@@ -214,8 +257,16 @@ class StudentManager {
                     remarkContainer.style.display = 'none';
                 }
 
-                const modal = new bootstrap.Modal(document.getElementById('gradeDetailsModal'));
-                modal.show();
+                const modalEl = document.getElementById('gradeDetailsModal');
+                if (modalEl) {
+                    const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
+                    modal.show();
+                } else {
+                    console.error('Grade details modal element not found');
+                    if (window.authManager) {
+                        window.authManager.showNotification('无法打开成绩详情：模态框组件缺失', 'error');
+                    }
+                }
             } else {
                 if (window.authManager) {
                     window.authManager.showNotification(result.message || '获取成绩详情失败', 'error');
@@ -223,6 +274,154 @@ class StudentManager {
             }
         } catch (error) {
             console.error('Fetch grade details failed:', error);
+            if (window.authManager) {
+                window.authManager.showNotification('获取成绩详情失败：网络错误', 'error');
+            }
+        }
+    }
+
+    async initGradeAnalysis() {
+        if (!document.getElementById('gpaTrendChart')) return;
+
+        try {
+            const response = await fetch(`${this.apiBase}/statistics`);
+            const result = await response.json();
+
+            if (result.success) {
+                this.renderAnalysisCharts(result.data);
+                this.renderCreditsInfo(result.data.credits, result.data.semesterCredits);
+            } else {
+                if (window.authManager) {
+                    window.authManager.showNotification(result.message || '获取统计数据失败', 'error');
+                }
+            }
+        } catch (error) {
+            console.error('Fetch statistics failed:', error);
+        }
+    }
+
+    renderAnalysisCharts(data) {
+        try {
+            // 1. GPA 趋势图
+            const ctxGPA = document.getElementById('gpaTrendChart');
+            if (ctxGPA) {
+                const ctx = ctxGPA.getContext('2d');
+                if (this.gpaChart) this.gpaChart.destroy();
+                this.gpaChart = new Chart(ctx, {
+                    type: 'line',
+                    data: {
+                        labels: (data.trend || []).map(t => t.semester),
+                        datasets: [{
+                            label: '学期 GPA',
+                            data: (data.trend || []).map(t => t.gpa),
+                            borderColor: '#4e73df',
+                            backgroundColor: 'rgba(78, 115, 223, 0.05)',
+                            tension: 0.3,
+                            fill: true
+                        }]
+                    },
+                    options: {
+                        maintainAspectRatio: false,
+                        scales: {
+                            y: { beginAtZero: false, min: 0, max: 4.0 }
+                        }
+                    }
+                });
+            }
+
+            // 2. 成绩分布饼图
+            const ctxDist = document.getElementById('gradeDistributionChart');
+            if (ctxDist) {
+                const ctx = ctxDist.getContext('2d');
+                if (this.distChart) this.distChart.destroy();
+                this.distChart = new Chart(ctx, {
+                    type: 'doughnut',
+                    data: {
+                        labels: ['A (优秀)', 'B (良好)', 'C (中等)', 'D (及格)', 'F (不及格)'],
+                        datasets: [{
+                            data: [
+                                data.distribution.A || 0,
+                                data.distribution.B || 0,
+                                data.distribution.C || 0,
+                                data.distribution.D || 0,
+                                data.distribution.F || 0
+                            ],
+                            backgroundColor: ['#1cc88a', '#36b9cc', '#f6c23e', '#fd7e14', '#e74a3b']
+                        }]
+                    },
+                    options: {
+                        maintainAspectRatio: false,
+                        plugins: { legend: { position: 'bottom' } }
+                    }
+                });
+            }
+        } catch (error) {
+            console.error('Render charts failed:', error);
+        }
+
+        // 3. 课程类别表现 (使用进度条列表展示)
+        this.renderCategoryPerformance(data.categories);
+    }
+
+    renderCategoryPerformance(categories) {
+        const container = document.getElementById('categoryPerformanceList');
+        if (!container || !categories) return;
+
+        container.innerHTML = categories.map(cat => {
+            const gpaValue = parseFloat(cat.gpa);
+            const percentage = (gpaValue / 4.0) * 100;
+            const totalCredits = parseFloat(cat.totalCredits || 0);
+            
+            // 根据绩点选择颜色
+            let bgColor = 'bg-primary';
+            if (gpaValue >= 3.5) bgColor = 'bg-success';
+            else if (gpaValue < 2.0) bgColor = 'bg-danger';
+            else if (gpaValue < 3.0) bgColor = 'bg-warning';
+
+            return `
+                <div class="mb-4">
+                    <div class="d-flex justify-content-between align-items-center mb-1">
+                        <div>
+                            <span class="fw-bold">${cat.category}</span>
+                            <span class="text-muted small ms-2">(${totalCredits.toFixed(1)} 学分)</span>
+                        </div>
+                        <span class="fw-bold text-primary">${cat.gpa} GPA</span>
+                    </div>
+                    <div class="progress" style="height: 10px;">
+                        <div class="progress-bar ${bgColor}" role="progressbar" 
+                             style="width: ${percentage}%" 
+                             aria-valuenow="${percentage}" aria-valuemin="0" aria-valuemax="100">
+                        </div>
+                    </div>
+                </div>
+            `;
+        }).join('');
+    }
+
+    renderCreditsInfo(credits, semesterCredits) {
+        // 总进度
+        const percent = Math.min(100, Math.round((credits.earned / credits.target) * 100));
+        const progressBar = document.getElementById('creditProgressBar');
+        const percentText = document.getElementById('creditPercent');
+        
+        if (progressBar && percentText) {
+            progressBar.style.width = `${percent}%`;
+            percentText.textContent = `${percent}%`;
+            
+            // 更新数值
+            this.updateElement('earnedCredits', credits.earned);
+            this.updateElement('targetCredits', credits.target);
+        }
+
+        // 学期学分列表
+        const listContainer = document.getElementById('semesterCreditsList');
+        if (listContainer) {
+            listContainer.innerHTML = semesterCredits.map(item => `
+                <div class="d-flex justify-content-between align-items-center mb-2">
+                    <span class="text-secondary small">${item.semester}</span>
+                    <span class="fw-bold">${item.credits} 学分</span>
+                </div>
+            `).join('');
         }
     }
 }
diff --git a/frontend/views/student/dashboard.html b/frontend/views/student/dashboard.html
index fbbacbb..3f5831e 100644
--- a/frontend/views/student/dashboard.html
+++ b/frontend/views/student/dashboard.html
@@ -242,7 +242,7 @@
                 </a>
             </div>
             <div class="nav-item">
-                <a href="#stats-section" class="nav-link">
+                <a href="/student/grade-analysis" class="nav-link">
                     <i class="fas fa-chart-line"></i>
                     <span>成绩分析</span>
                 </a>
@@ -485,6 +485,62 @@
         </div>
     </div>
 
+    <!-- 课程详情模态框 -->
+    <div class="modal fade" id="courseDetailsModal" tabindex="-1" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content border-0 shadow">
+                <div class="modal-header bg-primary text-white border-0">
+                    <h5 class="modal-title fw-bold"><i class="fas fa-info-circle me-2"></i>课程详细信息</h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body p-4">
+                    <div class="text-center mb-4">
+                        <div class="display-1 text-primary mb-3">
+                            <i class="fas fa-book-open"></i>
+                        </div>
+                        <h3 class="fw-bold mb-1" id="modalCourseName">-</h3>
+                        <p class="text-muted" id="modalCourseCode">-</p>
+                    </div>
+                    <div class="row g-3">
+                        <div class="col-6">
+                            <div class="p-3 bg-light rounded-3">
+                                <small class="text-muted d-block mb-1">学分</small>
+                                <span class="fw-bold" id="modalCourseCredit">-</span>
+                            </div>
+                        </div>
+                        <div class="col-6">
+                            <div class="p-3 bg-light rounded-3">
+                                <small class="text-muted d-block mb-1">任课教师</small>
+                                <span class="fw-bold" id="modalTeacherName">-</span>
+                            </div>
+                        </div>
+                        <div class="col-12">
+                            <div class="p-3 bg-light rounded-3">
+                                <small class="text-muted d-block mb-1">授课班级</small>
+                                <span class="fw-bold" id="modalClassName">-</span>
+                            </div>
+                        </div>
+                        <div class="col-12">
+                            <div class="p-3 bg-light rounded-3">
+                                <small class="text-muted d-block mb-1">开课学期</small>
+                                <span class="fw-bold" id="modalSemester">-</span>
+                            </div>
+                        </div>
+                        <div class="col-12">
+                            <div class="p-3 bg-light rounded-3">
+                                <small class="text-muted d-block mb-1">教师联系方式</small>
+                                <span class="fw-bold" id="modalTeacherEmail">-</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer border-0 p-4">
+                    <button type="button" class="btn btn-secondary w-100 rounded-pill" data-bs-dismiss="modal">关闭</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Bootstrap 5 JS -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <script src="/public/js/auth.js"></script>
diff --git a/frontend/views/student/grade_analysis.html b/frontend/views/student/grade_analysis.html
new file mode 100644
index 0000000..e0e3d8e
--- /dev/null
+++ b/frontend/views/student/grade_analysis.html
@@ -0,0 +1,341 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>成绩分析 - 成绩管理系统</title>
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
+    <!-- Chart.js -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        :root {
+            --sidebar-width: 260px;
+            --primary-color: #4e73df;
+            --secondary-color: #858796;
+            --success-color: #1cc88a;
+            --info-color: #36b9cc;
+            --warning-color: #f6c23e;
+            --danger-color: #e74a3b;
+            --light-bg: #f8f9fc;
+            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+
+        body {
+            font-family: 'Noto Sans SC', sans-serif;
+            background-color: var(--light-bg);
+            overflow-x: hidden;
+        }
+
+        /* 侧边栏样式 */
+        .sidebar {
+            width: var(--sidebar-width);
+            height: 100vh;
+            position: fixed;
+            left: 0;
+            top: 0;
+            background: var(--primary-gradient);
+            color: white;
+            z-index: 1000;
+            transition: all 0.3s;
+        }
+
+        .sidebar-header {
+            padding: 2rem 1.5rem;
+            text-align: center;
+            border-bottom: 1px solid rgba(255,255,255,0.1);
+        }
+
+        .sidebar-brand {
+            font-size: 1.25rem;
+            font-weight: 700;
+            color: white;
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+        }
+
+        .user-profile {
+            padding: 2rem 1rem;
+            text-align: center;
+        }
+
+        .user-avatar {
+            width: 80px;
+            height: 80px;
+            background: rgba(255,255,255,0.2);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 1rem;
+            font-size: 2rem;
+        }
+
+        .user-info h6 {
+            margin-bottom: 0.25rem;
+            font-weight: 600;
+        }
+
+        .user-info p {
+            font-size: 0.85rem;
+            opacity: 0.8;
+            margin-bottom: 0;
+        }
+
+        .nav-menu {
+            padding: 1rem 0;
+        }
+
+        .nav-item {
+            padding: 0.25rem 1rem;
+        }
+
+        .nav-link {
+            color: rgba(255,255,255,0.8);
+            padding: 0.8rem 1.25rem;
+            border-radius: 0.5rem;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            transition: all 0.2s;
+            text-decoration: none;
+        }
+
+        .nav-link:hover, .nav-link.active {
+            color: white;
+            background: rgba(255,255,255,0.15);
+        }
+
+        .nav-link i {
+            width: 20px;
+            text-align: center;
+        }
+
+        /* 主内容区 */
+        .main-content {
+            margin-left: var(--sidebar-width);
+            padding: 2rem;
+            min-height: 100vh;
+        }
+
+        .top-navbar {
+            background: white;
+            padding: 1rem 2rem;
+            border-radius: 1rem;
+            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
+            margin-bottom: 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .page-heading h4 {
+            margin-bottom: 0;
+            font-weight: 700;
+            color: #333;
+        }
+
+        .stat-card {
+            border: none;
+            border-radius: 1rem;
+            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
+            transition: transform 0.3s;
+        }
+
+        .card-table {
+            border: none;
+            border-radius: 1rem;
+            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
+        }
+
+        .card-header {
+            background-color: white;
+            border-bottom: 1px solid #f1f1f1;
+            padding: 1.25rem 1.5rem;
+            border-radius: 1rem 1rem 0 0 !important;
+        }
+
+        @media (max-width: 992px) {
+            .sidebar {
+                left: -var(--sidebar-width);
+            }
+            .main-content {
+                margin-left: 0;
+            }
+            .sidebar.active {
+                left: 0;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- 侧边栏 -->
+    <div class="sidebar">
+        <div class="sidebar-header">
+            <a href="/dashboard" class="sidebar-brand">
+                <i class="fas fa-graduation-cap"></i>
+                <span>成绩管理系统</span>
+            </a>
+        </div>
+        
+        <div class="user-profile">
+            <div class="user-avatar">
+                <i class="fas fa-user-graduate"></i>
+            </div>
+            <div class="user-info text-white">
+                <h6 id="studentName">加载中...</h6>
+                <p>学生 | <span id="studentClass">加载中...</span></p>
+            </div>
+        </div>
+
+        <nav class="nav-menu">
+            <div class="nav-item">
+                <a href="/student/dashboard" class="nav-link">
+                    <i class="fas fa-tachometer-alt"></i>
+                    <span>仪表板</span>
+                </a>
+            </div>
+            <div class="nav-item">
+                <a href="/student/my-courses" class="nav-link">
+                    <i class="fas fa-book"></i>
+                    <span>我的课程</span>
+                </a>
+            </div>
+            <div class="nav-item">
+                <a href="/student/grade-analysis" class="nav-link active">
+                    <i class="fas fa-chart-line"></i>
+                    <span>成绩分析</span>
+                </a>
+            </div>
+            <div class="nav-item">
+                <a href="/student/profile" class="nav-link">
+                    <i class="fas fa-user"></i>
+                    <span>个人中心</span>
+                </a>
+            </div>
+            <div class="nav-item mt-4">
+                <a href="javascript:void(0)" id="logoutBtn" class="nav-link text-warning">
+                    <i class="fas fa-sign-out-alt"></i>
+                    <span>退出登录</span>
+                </a>
+            </div>
+        </nav>
+    </div>
+
+    <!-- 主内容 -->
+    <div class="main-content">
+        <!-- 顶部导航 -->
+        <div class="top-navbar">
+            <div class="page-heading">
+                <h4>成绩分析</h4>
+            </div>
+            <div class="d-flex align-items-center gap-3">
+                <div class="text-end d-none d-md-block">
+                    <div class="small text-muted" id="currentTime"></div>
+                    <div class="fw-bold" id="userName">加载中...</div>
+                </div>
+                <div class="vr mx-2 d-none d-md-block"></div>
+                <button class="btn btn-sm btn-light border rounded-pill px-3">
+                    <i class="fas fa-bell text-secondary"></i>
+                </button>
+            </div>
+        </div>
+
+        <!-- 分析图表 -->
+        <div class="row g-4 mb-4">
+            <!-- GPA 趋势 -->
+            <div class="col-lg-8">
+                <div class="card card-table h-100">
+                    <div class="card-header d-flex justify-content-between align-items-center">
+                        <h5 class="mb-0 fw-bold"><i class="fas fa-chart-line me-2 text-primary"></i>学期 GPA 趋势</h5>
+                        <button class="btn btn-sm btn-outline-primary" id="refreshTrend">
+                            <i class="fas fa-sync-alt"></i>
+                        </button>
+                    </div>
+                    <div class="card-body">
+                        <div style="height: 300px;">
+                            <canvas id="gpaTrendChart"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 成绩分布 -->
+            <div class="col-lg-4">
+                <div class="card card-table h-100">
+                    <div class="card-header">
+                        <h5 class="mb-0 fw-bold"><i class="fas fa-chart-pie me-2 text-primary"></i>成绩等第分布</h5>
+                    </div>
+                    <div class="card-body">
+                        <div style="height: 300px;">
+                            <canvas id="gradeDistributionChart"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="row g-4 mb-4">
+            <!-- 学分完成进度 -->
+            <div class="col-lg-6">
+                <div class="card card-table h-100">
+                    <div class="card-header">
+                        <h5 class="mb-0 fw-bold"><i class="fas fa-tasks me-2 text-primary"></i>学分完成进度</h5>
+                    </div>
+                    <div class="card-body">
+                        <div class="mb-4">
+                            <div class="d-flex justify-content-between mb-2">
+                                <span class="fw-bold">总学分进度</span>
+                                <span id="creditPercent">0%</span>
+                            </div>
+                            <div class="progress" style="height: 15px;">
+                                <div id="creditProgressBar" class="progress-bar bg-primary progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
+                            </div>
+                            <p class="text-muted small mt-2">已获得 <span id="earnedCredits" class="fw-bold text-primary">0</span> / 目标 <span id="targetCredits">160</span> 学分</p>
+                        </div>
+                        <hr>
+                        <div id="semesterCreditsList">
+                            <!-- 由 JS 动态填充 -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 课程类别分析 (可选，如果后端支持) -->
+            <div class="col-lg-6">
+                <div class="card card-table h-100">
+                    <div class="card-header">
+                        <h5 class="mb-0 fw-bold"><i class="fas fa-layer-group me-2 text-primary"></i>课程类别表现</h5>
+                    </div>
+                    <div class="card-body">
+                    <div id="categoryPerformanceList" class="py-2">
+                        <!-- 由 JS 动态填充 -->
+                        <div class="text-center py-5 text-muted">
+                            <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+                            加载中...
+                        </div>
+                    </div>
+                </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bootstrap 5 JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="/public/js/auth.js"></script>
+    <script src="/public/js/student.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            if (window.studentManager) {
+                window.studentManager.initGradeAnalysis();
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/frontend/views/student/my_courses.html b/frontend/views/student/my_courses.html
index 9aa6ab4..0f9ab55 100644
--- a/frontend/views/student/my_courses.html
+++ b/frontend/views/student/my_courses.html
@@ -217,7 +217,7 @@
                 </a>
             </div>
             <div class="nav-item">
-                <a href="/student/dashboard#stats-section" class="nav-link">
+                <a href="/student/grade-analysis" class="nav-link">
                     <i class="fas fa-chart-line"></i>
                     <span>成绩分析</span>
                 </a>
@@ -261,6 +261,9 @@
             <div class="card-header d-flex justify-content-between align-items-center">
                 <h5 class="mb-0 fw-bold"><i class="fas fa-book me-2 text-primary"></i>本学期课程列表</h5>
                 <div class="d-flex gap-2">
+                    <button class="btn btn-sm btn-outline-primary px-3" id="refreshCourses">
+                        <i class="fas fa-sync-alt me-1"></i> 刷新
+                    </button>
                     <select class="form-select form-select-sm" style="width: 160px;">
                         <option value="all">所有学期</option>
                         <option value="2023-2" selected>2023-2024 下学期</option>
diff --git a/frontend/views/student/profile.html b/frontend/views/student/profile.html
index c75275d..92351ed 100644
--- a/frontend/views/student/profile.html
+++ b/frontend/views/student/profile.html
@@ -201,13 +201,13 @@
                 </a>
             </div>
             <div class="nav-item">
-                <a href="/student/dashboard#stats-section" class="nav-link">
+                <a href="/student/grade-analysis" class="nav-link">
                     <i class="fas fa-chart-line"></i>
                     <span>成绩分析</span>
                 </a>
             </div>
             <div class="nav-item">
-                <a href="#" class="nav-link active">
+                <a href="/student/profile" class="nav-link active">
                     <i class="fas fa-user"></i>
                     <span>个人中心</span>
                 </a>
@@ -285,21 +285,21 @@
                             
                             <div class="mb-3">
                                 <label class="form-label">原密码</label>
-                                <input type="password" class="form-control" placeholder="请输入原密码">
+                                <input type="password" class="form-control" id="oldPassword" placeholder="请输入原密码">
                             </div>
                             <div class="row mb-4">
                                 <div class="col-md-6">
                                     <label class="form-label">新密码</label>
-                                    <input type="password" class="form-control" placeholder="请输入新密码">
+                                    <input type="password" class="form-control" id="newPassword" placeholder="请输入新密码">
                                 </div>
                                 <div class="col-md-6">
                                     <label class="form-label">确认新密码</label>
-                                    <input type="password" class="form-control" placeholder="再次输入新密码">
+                                    <input type="password" class="form-control" id="confirmPassword" placeholder="再次输入新密码">
                                 </div>
                             </div>
                             
                             <div class="text-end">
-                                <button type="button" class="btn btn-primary px-4" onclick="alert('修改密码功能暂未开放')">
+                                <button type="button" class="btn btn-primary px-4" id="savePasswordBtn">
                                     <i class="fas fa-save me-1"></i> 保存更改
                                 </button>
                             </div>
@@ -341,6 +341,56 @@
             };
             updateTime();
             setInterval(updateTime, 1000);
+
+            // 修改密码逻辑
+            const savePasswordBtn = document.getElementById('savePasswordBtn');
+            if (savePasswordBtn) {
+                savePasswordBtn.addEventListener('click', async () => {
+                    const oldPassword = document.getElementById('oldPassword').value;
+                    const newPassword = document.getElementById('newPassword').value;
+                    const confirmPassword = document.getElementById('confirmPassword').value;
+
+                    if (!oldPassword || !newPassword || !confirmPassword) {
+                        alert('请填写所有密码字段');
+                        return;
+                    }
+
+                    if (newPassword !== confirmPassword) {
+                        alert('两次输入的新密码不一致');
+                        return;
+                    }
+
+                    if (newPassword.length < 6) {
+                        alert('新密码长度至少为 6 位');
+                        return;
+                    }
+
+                    try {
+                        const response = await fetch('/api/auth/update-password', {
+                            method: 'PUT',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify({ oldPassword, newPassword })
+                        });
+
+                        const result = await response.json();
+                        if (result.success) {
+                            alert('密码修改成功，请重新登录');
+                            // 登出并跳转到登录页
+                            fetch('/api/auth/logout', { method: 'POST' })
+                                .then(() => {
+                                    window.location.href = '/login';
+                                });
+                        } else {
+                            alert(result.message || '修改失败');
+                        }
+                    } catch (error) {
+                        console.error('Update password error:', error);
+                        alert('网络错误，请稍后再试');
+                    }
+                });
+            }
         });
     </script>
 </body>