diff --git a/public/analysis/icon/分组 106.png b/public/analysis/icon/分组 106.png
new file mode 100644
index 0000000..1a4c470
Binary files /dev/null and b/public/analysis/icon/分组 106.png differ
diff --git a/public/analysis/icon/分组 86.png b/public/analysis/icon/分组 86.png
new file mode 100644
index 0000000..9973582
Binary files /dev/null and b/public/analysis/icon/分组 86.png differ
diff --git a/public/analysis/icon/分组 93.png b/public/analysis/icon/分组 93.png
new file mode 100644
index 0000000..eeda095
Binary files /dev/null and b/public/analysis/icon/分组 93.png differ
diff --git a/public/analysis/icon/切片 21.png b/public/analysis/icon/切片 21.png
new file mode 100644
index 0000000..9227ed2
Binary files /dev/null and b/public/analysis/icon/切片 21.png differ
diff --git a/public/analysis/icon/路径 10.png b/public/analysis/icon/路径 10.png
new file mode 100644
index 0000000..040c25f
Binary files /dev/null and b/public/analysis/icon/路径 10.png differ
diff --git a/public/analysis/icon/路径 11.png b/public/analysis/icon/路径 11.png
new file mode 100644
index 0000000..967d7d1
Binary files /dev/null and b/public/analysis/icon/路径 11.png differ
diff --git a/public/analysis/icon/路径 18.png b/public/analysis/icon/路径 18.png
new file mode 100644
index 0000000..0b75026
Binary files /dev/null and b/public/analysis/icon/路径 18.png differ
diff --git a/public/analysis/icon/路径 19.png b/public/analysis/icon/路径 19.png
new file mode 100644
index 0000000..4884b44
Binary files /dev/null and b/public/analysis/icon/路径 19.png differ
diff --git a/public/analysis/切片 28.png b/public/analysis/切片 28.png
new file mode 100644
index 0000000..2bb64e3
Binary files /dev/null and b/public/analysis/切片 28.png differ
diff --git a/public/analysis/切片 29.png b/public/analysis/切片 29.png
new file mode 100644
index 0000000..4f13004
Binary files /dev/null and b/public/analysis/切片 29.png differ
diff --git a/public/analysis/切片 30.png b/public/analysis/切片 30.png
new file mode 100644
index 0000000..e39887b
Binary files /dev/null and b/public/analysis/切片 30.png differ
diff --git a/public/analysis/切片 31.png b/public/analysis/切片 31.png
new file mode 100644
index 0000000..ae6efce
Binary files /dev/null and b/public/analysis/切片 31.png differ
diff --git a/public/analysis/切片 32.png b/public/analysis/切片 32.png
new file mode 100644
index 0000000..2d53823
Binary files /dev/null and b/public/analysis/切片 32.png differ
diff --git a/public/analysis/切片 33.png b/public/analysis/切片 33.png
new file mode 100644
index 0000000..95eb38b
Binary files /dev/null and b/public/analysis/切片 33.png differ
diff --git a/public/analysis/切片 34.png b/public/analysis/切片 34.png
new file mode 100644
index 0000000..78dd406
Binary files /dev/null and b/public/analysis/切片 34.png differ
diff --git a/public/analysis/切片 35.png b/public/analysis/切片 35.png
new file mode 100644
index 0000000..eac6864
Binary files /dev/null and b/public/analysis/切片 35.png differ
diff --git a/src/components/teacher/ClassManagement.vue b/src/components/teacher/ClassManagement.vue
index 06e14fd..36e723d 100644
--- a/src/components/teacher/ClassManagement.vue
+++ b/src/components/teacher/ClassManagement.vue
@@ -38,7 +38,7 @@
                     </template>
                     管理班级
                 </n-button>
-                <n-button type="primary" ghost @click="showInviteModal = true">
+                <n-button type="primary" ghost @click="openInviteModal(selectedDepartment || props.classId?.toString() || '1')">
                     <template #icon>
                         <NIcon>
                             <QrCode />
@@ -65,7 +65,7 @@
                 <n-button type="primary" @click="openAddModal" v-else-if="props.type === 'student'">
                     添加学员
                 </n-button>
-                <n-button type="primary" ghost v-if="props.type === 'student'">
+                <n-button type="primary" ghost v-if="props.type === 'student'" @click="handleStatisticsAnalysis">
                     统计分析
                 </n-button>
                 <n-button type="primary" ghost @click="showImportModal = true">
@@ -145,50 +145,6 @@
             </n-card>
         </n-modal>
 
-        <!-- 删除确认弹窗 -->
-        <n-modal v-model:show="showDeleteConfirmModal" title="确认删除">
-            <n-card style="width: 400px" title="确认删除" :bordered="false" size="huge" role="dialog" aria-modal="true">
-                <div class="delete-confirm-content">
-                    <p>确定要删除班级“{{ currentDeleteClass?.className }}”吗？</p>
-                    <p class="delete-warning">删除后将无法恢复！</p>
-                </div>
-                <template #footer>
-                    <div class="modal-footer">
-                        <n-button @click="showDeleteConfirmModal = false">取消</n-button>
-                        <n-button type="error" @click="confirmDeleteClass">确认删除</n-button>
-                    </div>
-                </template>
-            </n-card>
-        </n-modal>
-
-        <!-- 批量删除确认弹窗 -->
-        <n-modal v-model:show="showBatchDeleteModal" title="批量移除确认">
-            <n-card style="width: 450px" title="批量移除确认" :bordered="false" size="huge" role="dialog" aria-modal="true">
-                <div class="batch-delete-content">
-                    <p>确定要移除选中的 <strong>{{ selectedRowKeys.length }}</strong> 名学员吗？</p>
-                    <div class="selected-students">
-                        <div class="student-list">
-                            <div 
-                                v-for="student in selectedStudents" 
-                                :key="student.id" 
-                                class="student-item"
-                            >
-                                <span class="student-name">{{ student.studentName }}</span>
-                                <span class="student-account">({{ student.accountNumber }})</span>
-                            </div>
-                        </div>
-                    </div>
-                    <p class="batch-warning">移除后这些学员将无法访问班级资源！</p>
-                </div>
-                <template #footer>
-                    <div class="modal-footer">
-                        <n-button @click="showBatchDeleteModal = false">取消</n-button>
-                        <n-button type="error" @click="confirmBatchDelete">确认移除</n-button>
-                    </div>
-                </template>
-            </n-card>
-        </n-modal>
-
         <!-- 批量调班确认弹窗 -->
         <n-modal v-model:show="showBatchTransferModal" title="批量调班">
             <n-card style="width: 550px" title="批量调班" :bordered="false" size="huge" role="dialog" aria-modal="true">
@@ -329,7 +285,10 @@
             <n-card style="width: 400px" title="邀请码" :bordered="false" size="huge" role="dialog" aria-modal="true">
                 <div class="invite-content">
                     <div class="invite-code-display">
-                        <div class="invite-title">邀请码</div>
+                        <div class="invite-title">班级邀请码</div>
+                        <div class="invite-note" v-if="currentInviteClassId">
+                            班级：{{ masterClassList.find(item => item.id === currentInviteClassId)?.className || '未知班级' }}
+                        </div>
                         <div class="invite-code">{{ inviteCode }}</div>
                         <n-button ghost type="primary" @click="copyInviteCode">复制</n-button>
                     </div>
@@ -354,7 +313,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, h, computed } from 'vue'
+import { ref, onMounted, h, computed, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import { AddCircleOutline, SettingsOutline, QrCode } from '@vicons/ionicons5'
 import {
     NDataTable,
@@ -371,6 +331,7 @@ import {
     NCheckbox,
     NDropdown,
     useMessage,
+    useDialog,
     type FormInst,
     type FormRules
 } from 'naive-ui'
@@ -380,11 +341,13 @@ import ImportModal from '@/components/common/ImportModal.vue'
 // 定义 props 类型
 interface Props {
     type: 'course' | 'student'
+    classId?: number | null // 新增班级ID参数
 }
 
 // 接收 props
 const props = withDefaults(defineProps<Props>(), {
-    type: 'student'
+    type: 'student',
+    classId: null
 })
 
 // 定义数据类型
@@ -418,8 +381,11 @@ interface FormData {
 
 const totalStudents = ref(1333)
 const inviteCode = ref('56685222')
+const currentInviteClassId = ref<string | null>(null) // 当前邀请码对应的班级ID
 
 const message = useMessage()
+const dialog = useDialog()
+const router = useRouter()
 
 // 响应式数据
 const selectedDepartment = ref('')
@@ -429,7 +395,6 @@ const showInviteModal = ref(false)
 const showTransferModal = ref(false)
 const showAddClassModal = ref(false)
 const showManageClassModal = ref(false)
-const showDeleteConfirmModal = ref(false)
 const showImportModal = ref(false)
 const selectedTargetClass = ref('')
 const currentTransferStudent = ref<StudentItem | null>(null)
@@ -438,8 +403,6 @@ const classFormRef = ref<FormInst | null>(null)
 const isEditMode = ref(false)
 const currentEditId = ref('')
 const isRenameMode = ref(false)
-const currentDeleteClass = ref<any>(null)
-const showBatchDeleteModal = ref(false)
 const showBatchTransferModal = ref(false)
 const selectedRowKeys = ref<string[]>([]) // 多选行的keys
 
@@ -466,7 +429,7 @@ const rules: FormRules = {
         { required: true, message: '请输入学员学号', trigger: 'blur' }
     ],
     loginPassword: [
-        { required: true, message: '请输入登录密码', trigger: 'blur' },
+        // { required: true, message: '请输入登录密码', trigger: 'blur' },
         { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
     ],
     college: [
@@ -728,12 +691,12 @@ const pagination = ref({
     pageSizes: [10, 20, 50],
     onChange: (page: number) => {
         pagination.value.page = page
-        loadData()
+        loadData(props.classId)
     },
     onUpdatePageSize: (pageSize: number) => {
         pagination.value.pageSize = pageSize
         pagination.value.page = 1
-        loadData()
+        loadData(props.classId)
     }
 })
 
@@ -742,6 +705,11 @@ const handleTransfer = (row: StudentItem) => {
     currentTransferStudent.value = row
     selectedTargetClass.value = ''
     showTransferModal.value = true
+    
+    console.log('打开调班弹窗:', {
+        学员信息: row,
+        可选班级: classOptions.value
+    })
 }
 
 const handleEdit = (row: StudentItem) => {
@@ -764,7 +732,37 @@ const handleBatchDelete = () => {
         message.warning('请先选择要移除的学员')
         return
     }
-    showBatchDeleteModal.value = true
+    
+    const selectedStudentsList = selectedStudents.value
+    const studentNames = selectedStudentsList.map(s => s.studentName).join('、')
+    
+    dialog.info({
+        title: '批量移除确认',
+        content: `确定要移除选中的 ${selectedRowKeys.value.length} 名学员吗？\n\n学员名单：${studentNames}\n\n移除后这些学员将无法访问班级资源！`,
+        positiveText: '确认移除',
+        negativeText: '取消',
+        onPositiveClick: async () => {
+            try {
+                // 这里模拟 API 调用
+                await new Promise(resolve => setTimeout(resolve, 1000))
+                
+                const removedCount = selectedRowKeys.value.length
+                
+                // 从数据中移除选中的学员
+                data.value = data.value.filter(student => !selectedRowKeys.value.includes(student.id))
+                
+                // 清空选中状态
+                selectedRowKeys.value = []
+                
+                message.success(`成功移除 ${removedCount} 名学员`)
+                
+                // 重新加载数据
+                loadData(props.classId)
+            } catch (error) {
+                message.error('批量移除失败，请重试')
+            }
+        }
+    })
 }
 
 // 批量调班处理
@@ -777,32 +775,6 @@ const handleBatchTransfer = () => {
     showBatchTransferModal.value = true
 }
 
-// 确认批量删除
-const confirmBatchDelete = async () => {
-    try {
-        // 这里模拟 API 调用
-        await new Promise(resolve => setTimeout(resolve, 1000))
-        
-        const removedCount = selectedRowKeys.value.length
-        
-        // 从数据中移除选中的学员
-        data.value = data.value.filter(student => !selectedRowKeys.value.includes(student.id))
-        
-        // 清空选中状态
-        selectedRowKeys.value = []
-        
-        // 关闭弹窗
-        showBatchDeleteModal.value = false
-        
-        message.success(`成功移除 ${removedCount} 名学员`)
-        
-        // 重新加载数据
-        loadData()
-    } catch (error) {
-        message.error('批量移除失败，请重试')
-    }
-}
-
 // 确认批量调班
 const confirmBatchTransfer = async () => {
     if (!selectedTargetClass.value) {
@@ -830,7 +802,7 @@ const confirmBatchTransfer = async () => {
         selectedRowKeys.value = []
         
         // 重新加载数据
-        loadData()
+        loadData(props.classId)
     } catch (error) {
         message.error('批量调班失败，请重试')
     }
@@ -842,16 +814,56 @@ const handleDelete = (row: StudentItem) => {
 
 // 查看学习进度处理函数（student 模式）
 const handleViewProgress = (row: StudentItem) => {
-    message.info(`查看 ${row.studentName} 的学习进度`)
-    // TODO: 实现查看学习进度的具体逻辑
-    console.log('查看学习进度:', row)
+    // 跳转到学习进度页面，传递学员信息作为查询参数
+    router.push({
+        name: 'StudentProgress',
+        query: {
+            studentId: row.id,
+            studentName: row.studentName,
+            accountNumber: row.accountNumber,
+            className: row.className
+        }
+    })
+}
+
+// 统计分析处理函数（student 模式）
+const handleStatisticsAnalysis = () => {
+    // 跳转到统计分析页面
+    router.push({
+        name: 'StatisticsAnalysis'
+    })
 }
 
 // 删除学员处理函数（student 模式）
 const handleDeleteStudent = (row: StudentItem) => {
-    message.warning(`删除学员：${row.studentName}`)
-    // TODO: 实现删除学员的具体逻辑
-    console.log('删除学员:', row)
+    dialog.info({
+        title: '确认删除',
+        content: `确定要删除学员"${row.studentName}"吗？\n\n删除后将无法恢复！`,
+        positiveText: '确认删除',
+        negativeText: '取消',
+        onPositiveClick: async () => {
+            try {
+                // 这里模拟 API 调用
+                await new Promise(resolve => setTimeout(resolve, 500))
+                
+                const studentName = row.studentName
+                const studentId = row.id
+                
+                // 从数据中移除学员
+                data.value = data.value.filter(student => student.id !== studentId)
+                
+                // 更新学员总数
+                totalStudents.value = data.value.length
+                
+                message.success(`已删除学员：${studentName}`)
+                
+                // 重新加载数据以确保数据同步
+                loadData(props.classId)
+            } catch (error) {
+                message.error('删除失败，请重试')
+            }
+        }
+    })
 }
 
 const handleConfirmTransfer = async () => {
@@ -884,7 +896,7 @@ const handleConfirmTransfer = async () => {
         selectedTargetClass.value = ''
         
         // 重新加载数据
-        loadData()
+        loadData(props.classId)
     } catch (error) {
         message.error('调班失败，请重试')
     }
@@ -892,14 +904,46 @@ const handleConfirmTransfer = async () => {
 
 // 判断是否为当前班级
 const isCurrentClass = (classValue: string) => {
-    if (!currentTransferStudent.value) return false
+    if (!currentTransferStudent.value) {
+        console.log('调班判断: 未选中学员')
+        return false
+    }
     
     // 根据学员的className匹配班级value
     const studentClassName = currentTransferStudent.value.className
     const classOption = masterClassList.value.find(item => item.className === studentClassName)
+    
+    console.log('调班判断:', {
+        学员姓名: currentTransferStudent.value.studentName,
+        学员班级: studentClassName,
+        待匹配班级ID: classValue,
+        找到的班级: classOption,
+        是否匹配: classOption?.id === classValue
+    })
+    
     return classOption?.id === classValue
 }
 
+// 根据班级ID生成邀请码
+const generateInviteCode = (classId: string) => {
+    // 模拟根据班级ID生成不同的邀请码
+    const baseCode = 56685222
+    const numericClassId = parseInt(classId) || 1
+    return (baseCode + numericClassId * 1000).toString()
+}
+
+// 打开邀请码弹窗
+const openInviteModal = (classId: string) => {
+    currentInviteClassId.value = classId
+    inviteCode.value = generateInviteCode(classId)
+    showInviteModal.value = true
+    
+    console.log('打开邀请码弹窗:', {
+        班级ID: classId,
+        邀请码: inviteCode.value
+    })
+}
+
 const copyInviteCode = () => {
     navigator.clipboard.writeText(inviteCode.value).then(() => {
         message.success('邀请码已复制到剪贴板')
@@ -925,7 +969,7 @@ const handleSubmit = async () => {
         resetForm()
         
         // 重新加载数据
-        loadData()
+        loadData(props.classId)
     } catch (error) {
         message.error('请检查表单信息')
     }
@@ -1040,52 +1084,120 @@ const handleRenameClass = (classItem: any) => {
 
 // 删除班级确认
 const handleDeleteClass = (classItem: any) => {
-    currentDeleteClass.value = classItem
-    showDeleteConfirmModal.value = true
-}
-
-// 确认删除班级
-const confirmDeleteClass = async () => {
-    try {
-        // 这里模拟 API 调用
-        await new Promise(resolve => setTimeout(resolve, 500))
-        
-        message.success(`已删除班级：${currentDeleteClass.value.className}`)
-        
-        // 从主数据源中移除
-        const index = masterClassList.value.findIndex(item => item.id === currentDeleteClass.value.id)
-        if (index > -1) {
-            masterClassList.value.splice(index, 1)
+    dialog.info({
+        title: '确认删除',
+        content: `确定要删除班级"${classItem.className}"吗？\n\n删除后将无法恢复！`,
+        positiveText: '确认删除',
+        negativeText: '取消',
+        onPositiveClick: async () => {
+            try {
+                // 这里模拟 API 调用
+                await new Promise(resolve => setTimeout(resolve, 500))
+                
+                message.success(`已删除班级：${classItem.className}`)
+                
+                // 从主数据源中移除
+                const index = masterClassList.value.findIndex(item => item.id === classItem.id)
+                if (index > -1) {
+                    masterClassList.value.splice(index, 1)
+                }
+                
+            } catch (error) {
+                message.error('删除失败，请重试')
+            }
         }
-        
-        // 关闭确认弹窗
-        showDeleteConfirmModal.value = false
-        currentDeleteClass.value = null
-        
-    } catch (error) {
-        message.error('删除失败，请重试')
-    }
+    })
 }
 
 // 模拟数据加载
-const loadData = async () => {
+const loadData = async (classId?: number | null) => {
     loading.value = true
     try {
         await new Promise(resolve => setTimeout(resolve, 500))
 
-        const mockData: StudentItem[] = Array.from({ length: 3 }, (_, index) => ({
-            id: `student_${index + 1}`,
-            studentName: ['张华', '李明', '王丽'][index],
-            accountNumber: [`${(1660340 + index + 1).toString()}`, `${(1660340 + index + 2).toString()}`, `${(1660340 + index + 3).toString()}`][index],
-            className: '计算机1',
-            college: '清华大学经管学院',
-            loginName: [`${(1660340 + index + 1).toString()}`, `${(1660340 + index + 2).toString()}`, `${(1660340 + index + 3).toString()}`][index],
-            joinTime: '2025.07.25 08:20'
-        }))
+        // 根据班级ID模拟不同的数据
+        let mockData: StudentItem[] = []
+        
+        if (classId === null || classId === undefined) {
+            // 未选择班级时显示空数据或默认数据
+            mockData = []
+        } else {
+            // 根据不同班级ID返回不同的模拟数据
+            const classDataMap: Record<number, StudentItem[]> = {
+                1: [
+                    {
+                        id: 'student_1_1',
+                        studentName: '张华',
+                        accountNumber: '1660341',
+                        className: '软件工程1班',
+                        college: '计算机学院',
+                        loginName: '1660341',
+                        joinTime: '2025.07.25 08:20'
+                    },
+                    {
+                        id: 'student_1_2',
+                        studentName: '李明',
+                        accountNumber: '1660342',
+                        className: '软件工程1班',
+                        college: '计算机学院',
+                        loginName: '1660342',
+                        joinTime: '2025.07.25 09:15'
+                    }
+                ],
+                2: [
+                    {
+                        id: 'student_2_1',
+                        studentName: '王丽',
+                        accountNumber: '1660343',
+                        className: '软件工程2班',
+                        college: '软件学院',
+                        loginName: '1660343',
+                        joinTime: '2025.07.26 10:30'
+                    },
+                    {
+                        id: 'student_2_2',
+                        studentName: '赵强',
+                        accountNumber: '1660344',
+                        className: '软件工程2班',
+                        college: '软件学院',
+                        loginName: '1660344',
+                        joinTime: '2025.07.26 11:45'
+                    },
+                    {
+                        id: 'student_2_3',
+                        studentName: '孙美',
+                        accountNumber: '1660345',
+                        className: '软件工程2班',
+                        college: '软件学院',
+                        loginName: '1660345',
+                        joinTime: '2025.07.26 14:20'
+                    }
+                ],
+                3: [
+                    {
+                        id: 'student_3_1',
+                        studentName: '周杰',
+                        accountNumber: '1660346',
+                        className: '计算机科学1班',
+                        college: '数学学院',
+                        loginName: '1660346',
+                        joinTime: '2025.07.27 08:50'
+                    }
+                ]
+            }
+            
+            mockData = classDataMap[classId] || []
+        }
 
         data.value = mockData
+        
+        // 更新学员总数
+        totalStudents.value = mockData.length
+        
+        console.log(`加载班级 ${classId} 的数据，共 ${mockData.length} 名学员`)
     } catch (error) {
         console.error('加载数据失败:', error)
+        message.error('加载数据失败，请重试')
     } finally {
         loading.value = false
     }
@@ -1097,7 +1209,7 @@ const handleImportSuccess = (result: any) => {
     message.success(`导入完成！成功：${result.details?.success || 0} 条，失败：${result.details?.failed || 0} 条`)
     
     // 重新加载数据
-    loadData()
+    loadData(props.classId)
 }
 
 // 模板下载处理
@@ -1107,8 +1219,46 @@ const handleTemplateDownload = (type?: string) => {
     // TODO: 实现模板下载逻辑
 }
 
+// 监听班级ID变化，重新加载数据
+watch(
+    () => props.classId,
+    (newClassId, oldClassId) => {
+        console.log(`班级ID从 ${oldClassId} 变更为 ${newClassId}`)
+        if (newClassId !== oldClassId) {
+            // 同步更新选择器的状态
+            selectedDepartment.value = newClassId ? newClassId.toString() : ''
+            loadData(newClassId)
+        }
+    },
+    { immediate: false } // 不立即执行，避免与onMounted重复
+)
+
+// 监听部门/班级选择器变化，重新加载数据
+watch(
+    () => selectedDepartment.value,
+    (newDepartmentId, oldDepartmentId) => {
+        console.log(`选择的班级从 ${oldDepartmentId} 变更为 ${newDepartmentId}`)
+        if (newDepartmentId !== oldDepartmentId) {
+            // 当选择器有值时，使用选择器的值；否则使用传入的classId
+            const targetClassId = newDepartmentId ? Number(newDepartmentId) : props.classId
+            loadData(targetClassId)
+        }
+    },
+    { immediate: false }
+)
+
 onMounted(() => {
-    loadData()
+    // 初始加载时，优先使用使用传入的classId，其次使用选择器的值
+    const initialClassId = props.classId ? props.classId : Number(selectedDepartment.value)
+    loadData(initialClassId)
+})
+
+// 暴露方法给父组件
+defineExpose({
+    openAddClassModal,
+    handleRenameClass,
+    handleDeleteClass,
+    openInviteModal
 })
 </script>
 
@@ -1118,7 +1268,7 @@ onMounted(() => {
 }
 
 .toolbar {
-    /* margin: 16px 0; */
+    padding-bottom: 16px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -1341,7 +1491,6 @@ onMounted(() => {
 
 .batch-delete-content {
     text-align: center;
-    padding: 20px 0;
 }
 
 .batch-delete-content p {
@@ -1443,9 +1592,15 @@ onMounted(() => {
     margin-top: 16px;
 }
 
+.delete-warning {
+    color: #ff4d4f;
+    font-weight: 500;
+    margin-top: 8px;
+}
+
 .delete-confirm-content {
     text-align: center;
-    padding: 20px 0;
+    padding: 5px 0;
 }
 
 .delete-confirm-content p {
@@ -1453,16 +1608,6 @@ onMounted(() => {
     font-size: 14px;
 }
 
-.delete-warning {
-    color: #ff4d4f;
-    font-weight: 500;
-}
-
-/* 批量调班样式 */
-.batch-transfer-content {
-    padding: 20px 0;
-}
-
 .batch-transfer-content p {
     margin: 8px 0;
     font-size: 14px;
diff --git a/src/router/index.ts b/src/router/index.ts
index 54fbc7d..a83efc7 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -66,6 +66,8 @@ import HomeworkTemplateImport from '@/views/teacher/course/HomeworkTemplateImpor
 // 学员管理组件
 import StudentLibrary from '@/views/teacher/student/StudentLibrary.vue'
 import ClassManagement from '@/views/teacher/student/ClassManagement.vue'
+import StudentProgress from '@/views/teacher/student/StudentProgress.vue'
+import StatisticsAnalysis from '@/views/teacher/student/StatisticsAnalysis.vue'
 import ExamManagement from '@/views/teacher/ExamPages/ExamPage.vue'
 import ExamQuestionBankManagement from '@/views/teacher/ExamPages/QuestionBankManagement.vue'
 import QuestionManagement from '@/views/teacher/ExamPages/QuestionManagement.vue'
@@ -310,6 +312,18 @@ const routes: RouteRecordRaw[] = [
             name: 'ClassManagement',
             component: ClassManagement,
             meta: { title: '班级管理' }
+          },
+          {
+            path: 'student-progress',
+            name: 'StudentProgress',
+            component: StudentProgress,
+            meta: { title: '学习进度' }
+          },
+          {
+            path: 'statistics-analysis',
+            name: 'StatisticsAnalysis',
+            component: StatisticsAnalysis,
+            meta: { title: '统计分析' }
           }
         ]
       },
diff --git a/src/views/teacher/student/ClassManagement.vue b/src/views/teacher/student/ClassManagement.vue
index e922c94..da5bdc3 100644
--- a/src/views/teacher/student/ClassManagement.vue
+++ b/src/views/teacher/student/ClassManagement.vue
@@ -1,11 +1,185 @@
 <template>
-  <div>
-    课程管理开发中
+  <div class="class-management">
+    <div class="class-left">
+      <span class="class-title">班级管理</span>
+      <n-collapse :default-expanded-names="['1']">
+        <template #header-extra>
+          <n-popselect
+            trigger="hover"
+            placement="bottom-start"
+            :options="classMenuOptions"
+            @update:value="handleClassMenuSelect"
+          >
+            <n-icon style="cursor: pointer;">
+              <EllipsisVertical />
+            </n-icon>
+          </n-popselect>
+        </template>
+        <template #arrow>
+          <n-icon>
+            <CaretForward />
+          </n-icon>
+        </template>
+        <n-collapse-item title="班级管理" name="1">
+          <div 
+            class="class-item" 
+            :class="{ active: activeClassId === value.id }"
+            v-for="value in classList" 
+            :key="value.id"
+            @click="handleClassClick(value.id)"
+          >
+            <div>{{ value.name }}</div>
+            <n-popselect
+              trigger="hover"
+              placement="bottom-start"
+              :options="getClassItemOptions()"
+              @update:value="(selectedValue: string) => handleClassItemMenuSelect(selectedValue, value.id)"
+            >
+              <n-icon style="cursor: pointer;">
+                <EllipsisVertical />
+              </n-icon>
+            </n-popselect>
+          </div>
+        </n-collapse-item>
+      </n-collapse>
+    </div>
+    <div class="class-right">
+      <ClassManagement ref="classManagementRef" :class-id="activeClassId" :class-name="classList.find(item => item.id === activeClassId)?.name" />
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import ClassManagement from '@/components/teacher/ClassManagement.vue'
+import { CaretForward, EllipsisVertical } from '@vicons/ionicons5'
+import { ref } from "vue"
+
+const classList = ref([
+  { id: 1, name: "班级一" },
+  { id: 2, name: "班级二" },
+  { id: 3, name: "班级三" },
+])
+
+// 当前激活的班级ID
+const activeClassId = ref<number | null>(1)
+
+// 引用ClassManagement组件
+const classManagementRef = ref<InstanceType<typeof ClassManagement> | null>(null)
+
+// 班级菜单选项
+const classMenuOptions = [
+  {
+    label: '添加班级',
+    value: 'add-class'
+  }
+]
+
+// 获取班级项菜单选项
+const getClassItemOptions = () => [
+  {
+    label: '编辑名称',
+    value: 'edit-name'
+  },
+  {
+    label: '邀请码',
+    value: 'invite-code'
+  },
+  {
+    label: '删除',
+    value: 'delete'
+  }
+]
+
+// 点击班级项的处理函数
+const handleClassClick = (classId: number) => {
+  activeClassId.value = classId
+}
+
+// 处理班级菜单选择
+const handleClassMenuSelect = (value: string) => {
+  if (value === 'add-class') {
+    // 调用ClassManagement组件内的添加班级弹窗
+    if (classManagementRef.value) {
+      classManagementRef.value.openAddClassModal?.()
+    }
+  }
+}
+
+// 处理班级项菜单选择
+const handleClassItemMenuSelect = (value: string, classId: number) => {
+  if (!classManagementRef.value) return
+  
+  const selectedClass = classList.value.find(item => item.id === classId)
+  if (!selectedClass) return
+  
+  switch (value) {
+    case 'edit-name':
+      // 调用组件内部管理班级下的重命名方法
+      classManagementRef.value.handleRenameClass?.({
+        id: classId.toString(),
+        className: selectedClass.name,
+        studentCount: 0,
+        creator: '王建国',
+        createTime: '2025.09.02 09:11'
+      })
+      break
+    case 'invite-code':
+      // 调用组件内部邀请码弹窗
+      classManagementRef.value.openInviteModal?.(classId.toString())
+      break
+    case 'delete':
+      // 调用组件内部管理班级下的删除方法
+      classManagementRef.value.handleDeleteClass?.({
+        id: classId.toString(),
+        className: selectedClass.name,
+        studentCount: 0,
+        creator: '王建国',
+        createTime: '2025.09.02 09:11'
+      })
+      break
+  }
+}
+
 </script>
 
 <style scoped>
+.class-management {
+  background-color: #fff;
+  border-radius: 4px;
+  display: flex;
+  min-height: 1000px;
+}
+
+.class-left {
+  width: 240px;
+  padding-right: 16px;
+  border-right: 1px solid #eee;
+  padding: 16px;
+}
+
+.class-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 16px;
+  display: block;
+}
+
+.class-right {
+  padding: 16px;
+  flex: 1;
+}
+
+.class-item{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 13px 8px;
+  cursor: pointer;
+  border-radius: 6px;
+}
+
+.active{
+  background-color: #F5F9FC;
+  color: #0288D1;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/teacher/student/StatisticsAnalysis.vue b/src/views/teacher/student/StatisticsAnalysis.vue
new file mode 100644
index 0000000..d814c8f
--- /dev/null
+++ b/src/views/teacher/student/StatisticsAnalysis.vue
@@ -0,0 +1,1751 @@
+<template>
+    <div class="statistics-analysis">
+        <!-- 页面头部 -->
+        <div class="page-header">
+            <div class="header-left">
+                <n-button quaternary circle size="large" @click="goBack" class="back-button">
+                    <template #icon>
+                        <n-icon>
+                            <ArrowBackOutline />
+                        </n-icon>
+                    </template>
+                </n-button>
+                <h1 class="page-title">学员统计分析</h1>
+            </div>
+            <div class="header-right">
+                <!-- <span class="update-time">数据更新时间：2024-09-04 15:30:00</span> -->
+            </div>
+        </div>
+
+        <!-- 统计分析内容区域 -->
+        <div class="content-area">
+            <!-- 第一行 -->
+            <div class="row-container">
+                <!-- 第一个区块：数据概况 -->
+                <div class="block-container">
+                    <n-card class="data-block">
+                        <template #header>
+                            <div class="section-header">
+                                <div class="section-title">
+                                    <div class="title-icon">
+                                        <n-image width="20" src="/analysis/icon/路径 10.png" />
+                                    </div>
+                                    <span class="title-text">数据概况</span>
+                                </div>
+                            </div>
+                        </template>
+                        <!-- 数据概况卡片 -->
+                        <div class="overview-content">
+                            <div class="data-card">
+                                <div class="data-info">
+                                    <div class="data-label">班级数量（个）</div>
+                                    <div class="data-number">{{ overviewData.classCount }}</div>
+                                </div>
+                                <div class="data-icon">
+                                    <n-image width="50" src="/analysis/切片 28.png" />
+                                </div>
+                            </div>
+                            <div class="data-card">
+                                <div class="data-info">
+                                    <div class="data-label">学员总数（人）</div>
+                                    <div class="data-number">{{ overviewData.studentCount }}</div>
+                                </div>
+                                <div class="data-icon">
+                                    <n-image width="50" src="/analysis/切片 29.png" />
+                                </div>
+                            </div>
+                            <div class="data-card">
+                                <div class="data-info">
+                                    <div class="data-label">今日新增（人）</div>
+                                    <div class="data-number">{{ overviewData.todayNew }}</div>
+                                </div>
+                                <div class="data-icon">
+                                    <n-image width="50" src="/analysis/切片 30.png" />
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- 学员增长趋势 -->
+                        <div class="trend-section">
+                            <div class="trend-header">
+                                <div class="trend-title">
+                                    <span>学员增长趋势</span>
+                                </div>
+                                <div class="time-filter">
+                                    <n-button-group size="small">
+                                        <n-button :type="timeFilter === 'week' ? 'primary' : 'default'"
+                                            @click="changeTimeFilter('week')">
+                                            周
+                                        </n-button>
+                                        <n-button :type="timeFilter === 'month' ? 'primary' : 'default'"
+                                            @click="changeTimeFilter('month')">
+                                            月
+                                        </n-button>
+                                        <n-button :type="timeFilter === 'year' ? 'primary' : 'default'"
+                                            @click="changeTimeFilter('year')">
+                                            年
+                                        </n-button>
+                                    </n-button-group>
+                                </div>
+                            </div>
+                            <div class="chart-container">
+                                <v-chart ref="growthChart" class="chart" :option="growthChartOption" autoresize />
+                            </div>
+                        </div>
+                    </n-card>
+                </div>
+
+                <!-- 第二个区块：课程概况 -->
+                <div class="block-container">
+                    <n-card class="data-block">
+                        <template #header>
+                            <div class="section-header">
+                                <div class="section-title">
+                                    <div class="title-icon">
+                                        <n-image width="20" src="/analysis/icon/切片 21.png" />
+                                    </div>
+                                    <span class="title-text">课程概况</span>
+                                </div>
+                            </div>
+                        </template>
+                        <!-- 课程数据卡片 -->
+                        <div class="overview-content">
+                            <div class="data-card">
+                                <div class="data-info">
+                                    <div class="data-label">已完成课程（节）</div>
+                                    <div class="data-number">{{ courseData.completedCourses }}</div>
+                                </div>
+                                <div class="data-icon">
+                                    <n-image width="50" src="/analysis/切片 31.png" />
+                                </div>
+                            </div>
+                            <div class="data-card">
+                                <div class="data-info">
+                                    <div class="data-label">已完成课程（%）</div>
+                                    <div class="data-number">{{ courseData.completionRate }}</div>
+                                </div>
+                                <div class="data-icon">
+                                    <n-image width="50" src="/analysis/切片 32.png" />
+                                </div>
+                            </div>
+                            <div class="data-card">
+                                <div class="data-info">
+                                    <div class="data-label">已获得证书（个）</div>
+                                    <div class="data-number">{{ courseData.certificates }}</div>
+                                </div>
+                                <div class="data-icon">
+                                    <n-image width="50" src="/analysis/切片 33.png" />
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- 课程报名Top排行榜 -->
+                        <div class="ranking-section">
+                            <div class="ranking-header">
+                                <div class="ranking-title">
+                                    <span>课程报名Top排行榜</span>
+                                </div>
+                            </div>
+                            <div class="ranking-list">
+                                <div 
+                                    v-for="(course, index) in topCourses" 
+                                    :key="index" 
+                                    class="ranking-item"
+                                >
+                                    <div class="course-name">{{ course.name }}</div>
+                                    <div class="progress-container">
+                                        <n-progress 
+                                            type="line" 
+                                            :percentage="course.progress" 
+                                            :show-indicator="false"
+                                            :height="10"
+                                            color="linear-gradient(90deg, #3AE8E8 0%, #0288D1 100%)"
+                                            rail-color="#f0f0f0"
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </n-card>
+                </div>
+            </div>
+
+            <!-- 第二行 -->
+            <div class="row-container">
+                <!-- 第三个区块：男女占比 -->
+                <div class="block-container">
+                    <n-card class="data-block">
+                        <template #header>
+                            <div class="section-header">
+                                <div class="section-title">
+                                    <div class="title-icon">
+                                        <n-image width="20" src="/analysis/icon/分组 86.png" />
+                                    </div>
+                                    <span class="title-text">男女占比</span>
+                                </div>
+                            </div>
+                        </template>
+                        
+                        <div class="gender-content">
+                            <!-- 左侧数据卡片 -->
+                            <div class="gender-data">
+                                <div class="gender-card">
+                                    <div class="gender-info">
+                                        <div class="gender-label">男生人数（人）</div>
+                                        <div class="gender-number">{{ genderData.maleCount }}</div>
+                                    </div>
+                                    <div class="gender-icon">
+                                        <n-image width="40" src="/analysis/切片 34.png" />
+                                    </div>
+                                </div>
+                                <div class="gender-card">
+                                    <div class="gender-info">
+                                        <div class="gender-label">女生人数（人）</div>
+                                        <div class="gender-number">{{ genderData.femaleCount }}</div>
+                                    </div>
+                                    <div class="gender-icon">
+                                        <n-image width="40" src="/analysis/切片 35.png" />
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <!-- 右侧饼图 -->
+                            <div class="gender-chart">
+                                <v-chart 
+                                    ref="genderChart"
+                                    class="pie-chart"
+                                    :option="genderChartOption"
+                                    autoresize
+                                />
+                            </div>
+                        </div>
+                    </n-card>
+                </div>
+                <!-- 第四个区块：学校分布 -->
+                <div class="block-container">
+                    <n-card class="data-block">
+                        <template #header>
+                            <div class="section-header">
+                                <div class="section-title">
+                                    <div class="title-icon">
+                                        <n-image width="20" src="/analysis/icon/路径 11.png" />
+                                    </div>
+                                    <span class="title-text">学校分布</span>
+                                </div>
+                            </div>
+                        </template>
+                        
+                        <div class="school-content">
+                            <div class="school-chart">
+                                <v-chart 
+                                    ref="schoolChart"
+                                    class="school-pie-chart"
+                                    :option="schoolChartOption"
+                                    autoresize
+                                />
+                            </div>
+                        </div>
+                    </n-card>
+                </div>
+            </div>
+
+            <!-- 第三行 -->
+            <div class="row-container">
+                <!-- 第五个区块：每日学习时长分析 -->
+                <div class="block-container">
+                    <n-card class="data-block">
+                        <template #header>
+                            <div class="section-header">
+                                <div class="section-title">
+                                    <div class="title-icon">
+                                        <n-image width="20" src="/analysis/icon/路径 18.png" />
+                                    </div>
+                                    <span class="title-text">每日学习时长分析</span>
+                                </div>
+                            </div>
+                        </template>
+                        
+                        <div class="daily-study-content">
+                            <div class="chart-legend">
+                                <div class="legend-item">
+                                    <div class="legend-dot" style="background-color: #3AE8E8;"></div>
+                                    <span class="legend-text">课程</span>
+                                </div>
+                                <div class="legend-item">
+                                    <div class="legend-dot" style="background-color: #FF9066;"></div>
+                                    <span class="legend-text">学习</span>
+                                </div>
+                            </div>
+                            <div class="daily-chart-container">
+                                <v-chart 
+                                    ref="dailyStudyChart"
+                                    class="daily-line-chart"
+                                    :option="dailyStudyChartOption"
+                                    autoresize
+                                />
+                            </div>
+                        </div>
+                    </n-card>
+                </div>
+                <!-- 第六个区块：学员学习时段分布 -->
+                <div class="block-container">
+                    <n-card class="data-block">
+                        <template #header>
+                            <div class="section-header">
+                                <div class="section-title">
+                                    <div class="title-icon">
+                                        <n-image width="20" src="/analysis/icon/分组 93.png" />
+                                    </div>
+                                    <span class="title-text">学员学习时段分布</span>
+                                </div>
+                            </div>
+                        </template>
+                        
+                        <div class="time-period-content">
+                            <div class="chart-container">
+                                <v-chart 
+                                    ref="timePeriodChart"
+                                    class="period-bar-chart"
+                                    :option="timePeriodChartOption"
+                                    autoresize
+                                />
+                            </div>
+                        </div>
+                    </n-card>
+                </div>
+            </div>
+
+            <!-- 第四行 -->
+            <div class="row-container">
+                <!-- 第七个区块：课程完成情况 -->
+                <div class="block-container">
+                    <n-card class="data-block">
+                        <template #header>
+                            <div class="section-header">
+                                <div class="section-title">
+                                    <div class="title-icon">
+                                        <n-image width="20" src="/analysis/icon/分组 106.png" />
+                                    </div>
+                                    <span class="title-text">课程完成情况</span>
+                                </div>
+                            </div>
+                        </template>
+                        
+                        <div class="completion-content">
+                            <div class="completion-chart">
+                                <v-chart 
+                                    ref="completionChart"
+                                    class="funnel-chart"
+                                    :option="completionChartOption"
+                                    autoresize
+                                />
+                            </div>
+                        </div>
+                    </n-card>
+                </div>
+                <!-- 第八个区块：实时动态 -->
+                <div class="block-container">
+                    <n-card class="data-block">
+                        <template #header>
+                            <div class="section-header">
+                                <div class="section-title">
+                                    <div class="title-icon">
+                                        <n-image width="20" src="/analysis/icon/路径 19.png" />
+                                    </div>
+                                    <span class="title-text">实时动态</span>
+                                </div>
+                            </div>
+                        </template>
+                        <div class="activity-content">
+                            <div class="activity-list">
+                                <div 
+                                    v-for="(activity, index) in activityData.slice(0,6)" 
+                                    :key="index" 
+                                    class="activity-item"
+                                >
+                                    <div class="activity-text">
+                                        <span class="student-name">学员 [张三]刚刚完成了《{{ activity.courseName }}》{{ activity.chapterName }}</span>
+                                    </div>
+                                    <div class="activity-time">{{ activity.time }}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </n-card>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import VChart from 'vue-echarts'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { BarChart, PieChart, LineChart, FunnelChart } from 'echarts/charts'
+import { NImage } from 'naive-ui'
+import {
+    TitleComponent,
+    TooltipComponent,
+    LegendComponent,
+    GridComponent
+} from 'echarts/components'
+import {
+    ArrowBackOutline,
+} from '@vicons/ionicons5'
+
+// 注册 ECharts 组件
+use([
+    CanvasRenderer,
+    BarChart,
+    PieChart,
+    LineChart,
+    FunnelChart,
+    TitleComponent,
+    TooltipComponent,
+    LegendComponent,
+    GridComponent
+])
+
+const router = useRouter()
+
+// 数据概况
+const overviewData = ref({
+    classCount: 70,
+    studentCount: 70,
+    todayNew: 70
+})
+
+// 课程概况数据
+const courseData = ref({
+    completedCourses: 70,
+    completionRate: 70,
+    certificates: 70
+})
+
+// 课程排行榜数据
+const topCourses = ref([
+    { name: '课程名称一', progress: 85 },
+    { name: '课程名称二课程名称', progress: 75 },
+    { name: '课程名称一', progress: 65 },
+    { name: '课程名称二课程名称', progress: 60 },
+    { name: '课程名称二课程名称', progress: 55 }
+])
+
+// 男女占比数据
+const genderData = ref({
+    maleCount: 6650,
+    femaleCount: 6650
+})
+
+// 学校分布数据
+const schoolData = ref([
+    { name: '云南师范大学', value: 20, color: ['#FF9066', '#FF6B35'] },
+    { name: '云南师范大学', value: 20, color: ['#9C88FF', '#8B7CF6'] },
+    { name: '云南师范大学', value: 20, color: ['#34D399', '#10B981'] },
+    { name: '云南师范大学', value: 20, color: ['#60A5FA', '#3B82F6'] },
+    { name: '云南师范大学', value: 20, color: ['#A78BFA', '#8B5CF6'] }
+])
+
+// 每日学习时长数据
+const dailyStudyData = ref({
+    categories: ['2.13', '2.14', '2.15', '2.16', '2.17', '2.18', '2.19'],
+    courseData: [120, 150, 180, 250, 200, 180, 220],
+    studyData: [100, 180, 160, 200, 150, 120, 190]
+})
+
+// 学员学习时段分布数据
+const timePeriodData = ref({
+    categories: ['6-9点', '9-12点', '12-15点', '15-18点', '18-21点', '21-24点', '24-6点'],
+    data: [280, 320, 180, 280, 250, 160, 350]
+})
+
+// 课程完成情况数据
+// const completionData = ref([
+//     { name: '报名课程的总人数', value: 5555454, color: '#1890FF' },
+//     { name: '学习了至少一个章节的人数', value: 665995, color: '#3AE8E8' },
+//     { name: '完成所有学习的人数', value: 6656, color: '#FF9066' }
+// ])
+
+// 实时动态数据
+const activityData = ref([
+    { courseName: '数据分析入门', chapterName: '第一章', time: '09:22' },
+    { courseName: '数据分析入门', chapterName: '第一章', time: '09:22' },
+    { courseName: '数据分析入门', chapterName: '第一章', time: '09:22' },
+    { courseName: '数据分析入门', chapterName: '第二章', time: '09:20' },
+    { courseName: 'Python基础教程', chapterName: '第三章', time: '09:18' },
+    { courseName: '机器学习实战', chapterName: '第一章', time: '09:15' }
+])
+
+// 时间筛选类型
+type TimeFilterType = 'week' | 'month' | 'year'
+
+// 时间筛选
+const timeFilter = ref<TimeFilterType>('week')
+
+// 模拟增长趋势数据
+const growthData = ref<Record<TimeFilterType, { categories: string[], data: number[] }>>({
+    week: {
+        categories: ['9.1', '9.2', '9.3', '9.4', '9.5', '9.6', '9.7'],
+        data: [280, 0, 0, 180, 280, 0, 140]
+    },
+    month: {
+        categories: ['8月', '9月', '10月', '11月', '12月'],
+        data: [350, 390, 280, 350, 240]
+    },
+    year: {
+        categories: ['2020', '2021', '2022', '2023', '2024'],
+        data: [1200, 1500, 1800, 2100, 2400]
+    }
+})
+
+// 图表配置
+const growthChartOption = computed(() => {
+    const currentData = growthData.value[timeFilter.value]
+    return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            },
+            formatter: '{b}<br/>{a}: {c}人'
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            data: currentData.categories,
+            axisLine: {
+                lineStyle: {
+                    color: '#e8e8e8'
+                }
+            },
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                color: '#8c8c8c',
+                fontSize: 12
+            }
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                color: '#8c8c8c',
+                fontSize: 12
+            },
+            splitLine: {
+                lineStyle: {
+                    color: '#f0f0f0',
+                    type: 'dashed'
+                }
+            }
+        },
+        series: [{
+            name: '新增学员',
+            type: 'bar',
+            data: currentData.data,
+            itemStyle: {
+                color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [{
+                        offset: 0,
+                        color: '#3AE8E8'
+                    }, {
+                        offset: 1,
+                        color: '#0288D1'
+                    }]
+                },
+                borderRadius: [4, 4, 0, 0]
+            },
+            barWidth: '10px'
+        }]
+    }
+})
+
+// 男女占比饼图配置
+const genderChartOption = computed(() => {
+    // const total = genderData.value.maleCount + genderData.value.femaleCount
+    // const malePercentage = total > 0 ? Math.round((genderData.value.maleCount / total) * 100) : 0
+    // const femalePercentage = total > 0 ? Math.round((genderData.value.femaleCount / total) * 100) : 0
+    
+    return {
+        tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        legend: {
+            orient: 'vertical',
+            right: '10%',
+            top: 'center',
+            itemWidth: 8,
+            itemHeight: 8,
+            textStyle: {
+                fontSize: 12,
+                color: '#595959'
+            },
+            formatter: function(name: any) {
+                const total = genderData.value.maleCount + genderData.value.femaleCount
+                const value = name === '男生' ? genderData.value.maleCount : genderData.value.femaleCount
+                const percentage = total > 0 ? Math.round((value / total) * 100) : 0
+                return name + ' ' + percentage + '%'
+            },
+            data: [
+                {
+                    name: '男生',
+                    icon: 'circle'
+                },
+                {
+                    name: '女生',
+                    icon: 'circle'
+                }
+            ]
+        },
+        series: [{
+            name: '男女占比',
+            type: 'pie',
+            radius: ['55%', '70%'],
+            center: ['35%', '50%'],
+            avoidLabelOverlap: false,
+            label: {
+                show: false
+            },
+            emphasis: {
+                label: {
+                    show: false
+                }
+            },
+            labelLine: {
+                show: false
+            },
+            data: [
+                {
+                    value: genderData.value.maleCount,
+                    name: '男生',
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0,
+                                color: '#3AE8E8'
+                            }, {
+                                offset: 1,
+                                color: '#0288D1'
+                            }]
+                        }
+                    }
+                },
+                {
+                    value: genderData.value.femaleCount,
+                    name: '女生',
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0,
+                                color: '#FF9066'
+                            }, {
+                                offset: 1,
+                                color: '#FF6B35'
+                            }]
+                        }
+                    }
+                }
+            ]
+        }]
+    }
+})
+
+// 学校分布饼图配置
+const schoolChartOption = computed(() => {
+    return {
+        tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b}: {c}%'
+        },
+        series: [{
+            name: '学校分布',
+            type: 'pie',
+            radius: ['45%', '65%'],
+            center: ['50%', '50%'],
+            avoidLabelOverlap: false,
+            label: {
+                show: true,
+                position: 'outside',
+                formatter: '{b}    {c}%',
+                fontSize: 12,
+                color: '#595959',
+                alignTo: 'none',
+                margin: 8
+            },
+            labelLine: {
+                show: true,
+                length: 15,
+                length2: 10,
+                smooth: false,
+                lineStyle: {
+                    width: 1,
+                    color: '#ccc'
+                }
+            },
+            emphasis: {
+                label: {
+                    show: true,
+                    fontSize: 12,
+                    fontWeight: 'bold'
+                }
+            },
+            data: schoolData.value.map((item) => ({
+                value: item.value,
+                name: item.name,
+                itemStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [{
+                            offset: 0,
+                            color: item.color[0]
+                        }, {
+                            offset: 1,
+                            color: item.color[1]
+                        }]
+                    }
+                }
+            }))
+        }]
+    }
+})
+
+// 每日学习时长折线图配置
+const dailyStudyChartOption = computed(() => {
+    return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                label: {
+                    backgroundColor: '#6a7985'
+                }
+            },
+            formatter: function(params: any) {
+                let result = params[0].name + '<br/>'
+                params.forEach(function(param: any) {
+                    result += param.marker + param.seriesName + ': ' + param.value + '分钟<br/>'
+                })
+                return result
+            }
+        },
+        legend: {
+            show: false
+        },
+        grid: {
+            left: '5%',
+            right: '5%',
+            bottom: '8%',
+            top: '10%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: dailyStudyData.value.categories,
+            axisLine: {
+                lineStyle: {
+                    color: '#e8e8e8',
+                    width: 1
+                }
+            },
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                color: '#8c8c8c',
+                fontSize: 12,
+                margin: 12
+            }
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                color: '#8c8c8c',
+                fontSize: 12,
+                formatter: '{value}分钟'
+            },
+            splitLine: {
+                lineStyle: {
+                    color: '#f0f0f0',
+                    type: 'dashed',
+                    width: 1
+                }
+            }
+        },
+        series: [
+            {
+                name: '课程',
+                type: 'line',
+                smooth: 0.4,
+                symbol: 'circle',
+                symbolSize: 8,
+                showSymbol: true,
+                lineStyle: {
+                    color: '#3AE8E8',
+                    width: 4,
+                    shadowColor: 'rgba(58, 232, 232, 0.3)',
+                    shadowBlur: 10,
+                    shadowOffsetY: 3
+                },
+                itemStyle: {
+                    color: '#3AE8E8',
+                    borderColor: '#fff',
+                    borderWidth: 2,
+                    shadowColor: 'rgba(58, 232, 232, 0.5)',
+                    shadowBlur: 8
+                },
+                areaStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [{
+                            offset: 0,
+                            color: 'rgba(58, 232, 232, 0.4)'
+                        }, {
+                            offset: 0.7,
+                            color: 'rgba(58, 232, 232, 0.1)'
+                        }, {
+                            offset: 1,
+                            color: 'rgba(58, 232, 232, 0.02)'
+                        }]
+                    }
+                },
+                emphasis: {
+                    focus: 'series',
+                    lineStyle: {
+                        width: 5
+                    }
+                },
+                data: dailyStudyData.value.courseData
+            },
+            {
+                name: '学习',
+                type: 'line',
+                smooth: 0.4,
+                symbol: 'circle',
+                symbolSize: 8,
+                showSymbol: true,
+                lineStyle: {
+                    color: '#FF9066',
+                    width: 4,
+                    shadowColor: 'rgba(255, 144, 102, 0.3)',
+                    shadowBlur: 10,
+                    shadowOffsetY: 3
+                },
+                itemStyle: {
+                    color: '#FF9066',
+                    borderColor: '#fff',
+                    borderWidth: 2,
+                    shadowColor: 'rgba(255, 144, 102, 0.5)',
+                    shadowBlur: 8
+                },
+                areaStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [{
+                            offset: 0,
+                            color: 'rgba(255, 144, 102, 0.4)'
+                        }, {
+                            offset: 0.7,
+                            color: 'rgba(255, 144, 102, 0.1)'
+                        }, {
+                            offset: 1,
+                            color: 'rgba(255, 144, 102, 0.02)'
+                        }]
+                    }
+                },
+                emphasis: {
+                    focus: 'series',
+                    lineStyle: {
+                        width: 5
+                    }
+                },
+                data: dailyStudyData.value.studyData
+            }
+        ]
+    }
+})
+
+// 学员学习时段分布柱状图配置
+const timePeriodChartOption = computed(() => {
+    return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            },
+            formatter: function(params: any) {
+                return params[0].name + '<br/>' + params[0].marker + '学员数量: ' + params[0].value + '人'
+            }
+        },
+        grid: {
+            left: '5%',
+            right: '5%',
+            bottom: '10%',
+            top: '5%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            data: timePeriodData.value.categories,
+            axisLine: {
+                lineStyle: {
+                    color: '#e8e8e8',
+                    width: 1
+                }
+            },
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                color: '#8c8c8c',
+                fontSize: 12,
+                margin: 12
+            }
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                color: '#8c8c8c',
+                fontSize: 12,
+                formatter: '{value}'
+            },
+            splitLine: {
+                lineStyle: {
+                    color: '#f0f0f0',
+                    type: 'dashed',
+                    width: 1
+                }
+            }
+        },
+        series: [{
+            name: '学员数量',
+            type: 'bar',
+            data: timePeriodData.value.data,
+            itemStyle: {
+                color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [{
+                        offset: 0,
+                        color: '#3AE8E8'
+                    }, {
+                        offset: 1,
+                        color: '#0288D1'
+                    }]
+                },
+                borderRadius: [6, 6, 0, 0],
+                shadowColor: 'rgba(58, 232, 232, 0.3)',
+                shadowBlur: 8,
+                shadowOffsetY: 4
+            },
+            barWidth: '10px',
+            emphasis: {
+                itemStyle: {
+                    shadowColor: 'rgba(58, 232, 232, 0.5)',
+                    shadowBlur: 12,
+                    shadowOffsetY: 6
+                }
+            }
+        }]
+    }
+})
+
+// 课程完成情况漏斗图配置
+const completionChartOption = computed(() => {
+    return {
+        tooltip: {
+            trigger: 'item',
+            formatter: function(params: any) {
+                let actualValue = ''
+                if (params.name === '报名课程的总人数') {
+                    actualValue = '5,555,454'
+                } else if (params.name === '学习了至少一个章节的人数') {
+                    actualValue = '665,995'
+                } else if (params.name === '完成所有学习的人数') {
+                    actualValue = '6,656'
+                }
+                return params.name + '<br/>' + params.marker + '人数: ' + actualValue + '人'
+            }
+        },
+        legend: {
+            orient: 'vertical',
+            left: '5%',
+            top: 'center',
+            itemWidth: 12,
+            itemHeight: 12,
+            textStyle: {
+                fontSize: 13,
+                color: '#595959'
+            },
+            formatter: function(name: any) {
+                // 显示实际人数数据
+                // if (name === '报名课程的总人数') {
+                //     return name + '\n5,555,454人'
+                // } else if (name === '学习了至少一个章节的人数') {
+                //     return name + '\n665,995人'
+                // } else if (name === '完成所有学习的人数') {
+                //     return name + '\n6,656人'
+                // }
+                return name
+            },
+            data: [
+                { name: '报名课程的总人数', icon: 'circle' },
+                { name: '学习了至少一个章节的人数', icon: 'circle' },
+                { name: '完成所有学习的人数', icon: 'circle' }
+            ]
+        },
+        series: [{
+            name: '课程完成情况',
+            type: 'funnel',
+            left: '50%',
+            top: '10%',
+            width: '40%',
+            height: '80%',
+            min: 0,
+            max: 100,
+            minSize: '1%',
+            maxSize: '90%',
+            sort: 'none',
+            gap: 4,
+            funnelAlign: 'center',
+            label: {
+                show: true,
+                position: 'right',
+                formatter: function(params: any) {
+                    if (params.name === '报名课程的总人数') {
+                        return '5,555,454人'
+                    } else if (params.name === '学习了至少一个章节的人数') {
+                        return '665,995人'
+                    } else if (params.name === '完成所有学习的人数') {
+                        return '6,656人'
+                    }
+                    return params.value.toLocaleString() + '人'
+                },
+                fontSize: 14,
+                color: '#262626',
+                fontWeight: 500
+            },
+            labelLine: {
+                length: 20,
+                lineStyle: {
+                    width: 1,
+                    type: 'solid',
+                    color: '#ccc'
+                }
+            },
+            itemStyle: {
+                borderColor: '#fff',
+                borderWidth: 2,
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
+                shadowBlur: 8,
+                shadowOffsetY: 4
+            },
+            emphasis: {
+                label: {
+                    fontSize: 16,
+                    fontWeight: 'bold'
+                },
+                itemStyle: {
+                    shadowColor: 'rgba(0, 0, 0, 0.2)',
+                    shadowBlur: 12,
+                    shadowOffsetY: 6
+                }
+            },
+            data: [
+                {
+                    value: 100,
+                    name: '报名课程的总人数',
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 1,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0,
+                                color: '#1890FF'
+                            }, {
+                                offset: 1,
+                                color: '#0d4ed4'
+                            }]
+                        }
+                    }
+                },
+                {
+                    value: 66,
+                    name: '学习了至少一个章节的人数',
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 1,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0,
+                                color: '#3AE8E8'
+                            }, {
+                                offset: 1,
+                                color: '#0288D1'
+                            }]
+                        }
+                    }
+                },
+                {
+                    value: 33,
+                    name: '完成所有学习的人数',
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 1,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0,
+                                color: '#FF9066'
+                            }, {
+                                offset: 1,
+                                color: '#ff6b35'
+                            }]
+                        }
+                    }
+                }
+            ]
+        }]
+    }
+})
+
+// 切换时间筛选
+const changeTimeFilter = (filter: TimeFilterType) => {
+    timeFilter.value = filter
+}
+
+// 返回上一页
+const goBack = () => {
+    router.go(-1)
+}
+</script>
+
+<style scoped>
+.statistics-analysis {
+    padding: 20px;
+    background-color: #fff;
+    min-height: 100vh;
+}
+
+.page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24px;
+    padding: 0 4px;
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.page-title {
+    margin: 0;
+    font-size: 24px;
+    font-weight: 600;
+    color: #262626;
+}
+
+.header-right {
+    color: #8c8c8c;
+    font-size: 14px;
+}
+
+.content-area {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.row-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+    min-width: 0; /* 允许网格项目缩小 */
+}
+
+.block-container {
+    display: flex;
+    flex-direction: column;
+    min-width: 0; /* 防止内容溢出 */
+}
+
+.data-block {
+    height: 100%;
+    background: linear-gradient(180deg, #F5F8FB 0%, #FCFEFF 100%);
+    border: 0px;
+    min-width: 0; /* 防止内容溢出 */
+}
+
+.data-block :deep(.n-card) {
+    height: 100%;
+    border-radius: 12px;
+    min-width: 0;
+}
+
+.data-block :deep(.n-card__content) {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+/* 数据概况区域 */
+.section-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.title-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.title-text {
+    font-size: 16px;
+    font-weight: 600;
+    color: #262626;
+}
+
+.overview-content {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    margin-bottom: 24px;
+}
+
+.data-card {
+    display: flex;
+    flex: 1;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    border-radius: 8px;
+    background-color: #fff;
+    position: relative;
+}
+
+.data-info {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.data-label {
+    font-size: 14px;
+    color: #595959;
+    font-weight: 400;
+}
+
+.data-number {
+    font-size: 32px;
+    font-weight: 600;
+    color: #262626;
+    line-height: 1;
+}
+
+.data-icon {
+    opacity: 0.8;
+}
+
+/* 学员增长趋势区域 */
+.trend-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.trend-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.trend-title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #262626;
+}
+
+.time-filter :deep(.n-button-group) {
+    border: 1px solid #d9d9d9;
+    border-radius: 6px;
+    overflow: hidden;
+}
+
+.time-filter :deep(.n-button) {
+    border: none;
+    border-radius: 0;
+    font-size: 12px;
+    padding: 4px 12px;
+    height: 28px;
+}
+
+.time-filter :deep(.n-button--primary-type) {
+    background-color: #1890ff;
+    color: white;
+}
+
+.time-filter :deep(.n-button--default-type) {
+    background-color: white;
+    color: #595959;
+}
+
+.chart-container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 240px;
+    width: 100%;
+    overflow: hidden;
+}
+
+.chart {
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+}
+
+/* 课程排行榜区域 */
+.ranking-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.ranking-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.ranking-title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #262626;
+}
+
+.ranking-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    flex: 1;
+    justify-content: space-around;
+}
+
+.ranking-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.course-name {
+    font-size: 12px;
+    color: #595959;
+    min-width: 120px;
+    flex-shrink: 0;
+    text-align: left;
+}
+
+.progress-container {
+    flex: 1;
+}
+
+.progress-container :deep(.n-progress-graph-line-rail) {
+    border-radius: 4px;
+}
+
+.progress-container :deep(.n-progress-graph-line-fill) {
+    border-radius: 4px;
+}
+
+/* 男女占比区域 */
+.gender-content {
+    display: flex;
+    gap: 20px;
+    height: 100%;
+    align-items: center;
+    padding: 0 20px;
+}
+
+.gender-data {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.gender-card {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    border-radius: 8px;
+    background-color: #fff;
+}
+
+.gender-info {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.gender-label {
+    font-size: 14px;
+    color: #595959;
+    font-weight: 400;
+}
+
+.gender-number {
+    font-size: 24px;
+    font-weight: 600;
+    color: #262626;
+    line-height: 1;
+}
+
+.gender-icon {
+    opacity: 0.8;
+}
+
+.gender-chart {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 200px;
+}
+
+.pie-chart {
+    width: 100%;
+    height: 200px;
+    min-width: 0;
+}
+
+/* 学校分布区域 */
+.school-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.school-chart {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 300px;
+}
+
+.school-pie-chart {
+    width: 100%;
+    height: 300px;
+    min-width: 0;
+}
+
+/* 每日学习时长分析区域 */
+.daily-study-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 16px 20px;
+}
+
+.chart-legend {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 32px;
+    margin-bottom: 20px;
+    padding: 12px 0;
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.legend-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.legend-text {
+    font-size: 14px;
+    color: #595959;
+    font-weight: 500;
+}
+
+.daily-chart-container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 320px;
+    border-radius: 8px;
+}
+
+.daily-line-chart {
+    width: 100%;
+    height: 320px;
+    min-width: 0;
+}
+
+/* 学员学习时段分布区域 */
+.time-period-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 20px;
+}
+
+.period-bar-chart {
+    width: 100%;
+    height: 350px;
+    min-width: 0;
+}
+
+/* 课程完成情况区域 */
+.completion-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 15px;
+}
+
+.completion-chart {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 400px;
+    overflow: hidden;
+}
+
+.funnel-chart {
+    width: 100%;
+    height: 400px;
+    min-width: 0;
+}
+
+/* 实时动态区域 */
+.activity-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 20px;
+}
+
+.activity-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.activity-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 0;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.activity-item:last-child {
+    border-bottom: none;
+}
+
+.activity-text {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex: 1;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.student-name {
+    color: #4e4e4e;
+    font-weight: 500;
+}
+
+.activity-desc {
+    color: #8c8c8c;
+}
+
+.chapter-name {
+    color: #262626;
+}
+
+.activity-time {
+    color: #8c8c8c;
+    font-size: 14px;
+    font-weight: 400;
+    min-width: 60px;
+    text-align: right;
+}
+
+/* 占位元素 */
+.placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 400px;
+    color: #8c8c8c;
+    font-size: 16px;
+    background: #fafafa;
+    border-radius: 8px;
+    border: 2px dashed #d9d9d9;
+}
+
+/* 响应式设计 */
+@media (max-width: 900px) {
+    .row-container {
+        grid-template-columns: 1fr;
+        gap: 16px;
+    }
+}
+
+@media (max-width: 768px) {
+    .statistics-analysis {
+        padding: 16px;
+    }
+
+    .page-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 12px;
+        margin-bottom: 20px;
+    }
+
+    .content-area {
+        gap: 16px;
+    }
+
+    .overview-content {
+        flex-direction: column;
+        gap: 12px;
+    }
+
+    .data-card {
+        padding: 12px 16px;
+    }
+
+    .data-number {
+        font-size: 28px;
+    }
+
+    .chart-container {
+        min-height: 200px;
+    }
+
+    .placeholder {
+        min-height: 300px;
+        font-size: 14px;
+    }
+
+    .gender-content {
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    .daily-chart-container {
+        min-height: 250px;
+    }
+
+    .period-bar-chart {
+        height: 250px;
+    }
+
+    .completion-chart {
+        min-height: 300px;
+    }
+
+    .funnel-chart {
+        height: 300px;
+    }
+}
+</style>
diff --git a/src/views/teacher/student/StudentLibrary.vue b/src/views/teacher/student/StudentLibrary.vue
index bec7eef..e7fb1f9 100644
--- a/src/views/teacher/student/StudentLibrary.vue
+++ b/src/views/teacher/student/StudentLibrary.vue
@@ -33,7 +33,8 @@
         </div>
     </div>
     <div class="student-library" v-else>
-        <ClassManagement type="student"></ClassManagement>
+        <!-- TODO: 暂时传id为1，来显示模拟数据，对接接口需要去掉 -->
+        <ClassManagement type="student" :class-id="1"></ClassManagement>
     </div>
 </template>
 
diff --git a/src/views/teacher/student/StudentProgress.vue b/src/views/teacher/student/StudentProgress.vue
new file mode 100644
index 0000000..881ef04
--- /dev/null
+++ b/src/views/teacher/student/StudentProgress.vue
@@ -0,0 +1,645 @@
+<template>
+    <div class="student-progress">
+        <!-- 页面头部 -->
+        <div class="page-header">
+            <div class="header-left">
+                <n-button quaternary circle size="large" @click="goBack" class="back-button">
+                    <template #icon>
+                        <n-icon>
+                            <ArrowBackOutline />
+                        </n-icon>
+                    </template>
+                </n-button>
+                <h1 class="page-title">{{ studentInfo.name }}的学习进度明细</h1>
+            </div>
+            <div class="header-right">
+                <!-- <span class="student-info">学号：{{ studentInfo.studentId }} | 班级：{{ studentInfo.className }}</span> -->
+            </div>
+        </div>
+
+        <!-- 统计图表区域 -->
+        <div class="statistics-section">
+            <!-- 图表容器 -->
+            <v-chart class="chart" :option="chartOption" autoresize />
+        </div>
+
+        <!-- 课程进度详情 -->
+        <div class="course-progress-section">
+            <n-card>
+                <template #header>
+                    <div class="section-header">
+                        <div class="header-course-name">课程名称</div>
+                        <div class="header-items">
+                            <span class="header-duration">总时长</span>
+                            <span class="header-status">课程进度</span>
+                            <span class="header-start-time">第一次学习时间</span>
+                            <span class="header-complete-time">学习完成时间</span>
+                            <span class="header-progress">学习进度</span>
+                        </div>
+                    </div>
+                </template>
+
+                <!-- 课程进度列表 -->
+                <div class="course-list">
+                    <div v-for="course in courseProgressData" :key="course.id" class="course-item">
+                        <div class="course-info">
+                            <div class="course-thumbnail">
+                                <n-image width="60" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" />
+                            </div>
+                            <div class="course-details">
+                                <h4 class="course-title">{{ course.courseName }}</h4>
+                                <!-- <p class="course-subtitle">提升您的编程思维和算法能力，高效率学习指南</p> -->
+                            </div>
+                        </div>
+                        <div class="course-stats">
+                            <span class="duration">{{ Math.floor(course.studyTime) }}小时{{ Math.floor((course.studyTime %
+                                1) *
+                                60) }}分钟</span>
+                            <span class="status">{{ course.progress === 100 ? '已完成课时' : '已完成课时' }} {{
+                                course.completedLessons
+                                }}/{{ course.totalLessons }}</span>
+                            <span class="start-time">{{ course.progress > 0 ? '2022.04.01 20：22' : '-' }}</span>
+                            <span class="complete-time">{{ course.progress === 100 ? '2022.04.18 14：00' : '-' }}</span>
+                            <div class="progress-bar-wrapper">
+                                <n-progress :percentage="course.progress" :show-indicator="false" :height="6"
+                                    :color="course.progress === 100 ? '#1890ff' : '#1890ff'" />
+                                <span class="progress-text">进度{{ course.progress }}%</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </n-card>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ArrowBackOutline } from '@vicons/ionicons5'
+import {
+    NCard,
+    NButton,
+    NIcon,
+    NProgress,
+    NImage
+} from 'naive-ui'
+import VChart from 'vue-echarts'
+import { use } from 'echarts/core'
+import {
+    CanvasRenderer
+} from 'echarts/renderers'
+import {
+    LineChart
+} from 'echarts/charts'
+import {
+    TitleComponent,
+    TooltipComponent,
+    GridComponent
+} from 'echarts/components'
+
+use([
+    CanvasRenderer,
+    LineChart,
+    TitleComponent,
+    TooltipComponent,
+    GridComponent
+])
+
+const route = useRoute()
+const router = useRouter()
+
+// 学员信息
+const studentInfo = ref({
+    id: route.query.studentId as string || '1',
+    name: route.query.studentName as string || '张三',
+    studentId: route.query.accountNumber as string || 'ST001',
+    className: route.query.className as string || '软件工程1班'
+})
+
+// 模拟课程进度数据
+const courseProgressData = ref([
+    {
+        id: 1,
+        courseName: 'Python程序设计基础',
+        courseType: '必修课',
+        progress: 100,
+        completedLessons: 15,
+        totalLessons: 15,
+        studyTime: 28.5,
+        lastStudyTime: '2024-09-03 14:30',
+        homeworkProgress: 100,
+        examProgress: 85
+    },
+    {
+        id: 2,
+        courseName: '数据结构与算法',
+        courseType: '必修课',
+        progress: 87,
+        completedLessons: 13,
+        totalLessons: 15,
+        studyTime: 32.2,
+        lastStudyTime: '2024-09-03 10:15',
+        homeworkProgress: 80,
+        examProgress: 90
+    },
+    {
+        id: 3,
+        courseName: 'Web前端开发技术',
+        courseType: '选修课',
+        progress: 73,
+        completedLessons: 11,
+        totalLessons: 15,
+        studyTime: 25.8,
+        lastStudyTime: '2024-09-02 16:45',
+        homeworkProgress: 75,
+        examProgress: 0
+    },
+    {
+        id: 4,
+        courseName: '数据库系统原理',
+        courseType: '必修课',
+        progress: 60,
+        completedLessons: 9,
+        totalLessons: 15,
+        studyTime: 18.5,
+        lastStudyTime: '2024-09-01 09:20',
+        homeworkProgress: 60,
+        examProgress: 78
+    },
+    {
+        id: 5,
+        courseName: '软件工程导论',
+        courseType: '必修课',
+        progress: 40,
+        completedLessons: 6,
+        totalLessons: 15,
+        studyTime: 12.3,
+        lastStudyTime: '2024-08-30 11:10',
+        homeworkProgress: 40,
+        examProgress: 0
+    },
+    {
+        id: 6,
+        courseName: '计算机网络',
+        courseType: '必修课',
+        progress: 27,
+        completedLessons: 4,
+        totalLessons: 15,
+        studyTime: 8.7,
+        lastStudyTime: '2024-08-28 15:30',
+        homeworkProgress: 20,
+        examProgress: 0
+    },
+    {
+        id: 7,
+        courseName: '操作系统原理',
+        courseType: '必修课',
+        progress: 13,
+        completedLessons: 2,
+        totalLessons: 15,
+        studyTime: 4.2,
+        lastStudyTime: '2024-08-25 14:20',
+        homeworkProgress: 10,
+        examProgress: 0
+    },
+    {
+        id: 8,
+        courseName: '人工智能基础',
+        courseType: '选修课',
+        progress: 0,
+        completedLessons: 0,
+        totalLessons: 15,
+        studyTime: 0,
+        lastStudyTime: '未开始',
+        homeworkProgress: 0,
+        examProgress: 0
+    }
+])
+
+// 图表配置
+const chartOption = computed(() => {
+    // 模拟时间序列数据
+    const dateRange = [
+        '2022.04.01', '2022.04.02', '2022.04.03', '2022.04.04', '2022.04.05',
+        '2022.04.06', '2022.04.07', '2022.04.08', '2022.04.09', '2022.04.10', '2022.04.11'
+    ]
+
+    // 模拟学习进度数据（按照图片中的趋势）
+    const progressData = [
+        2000, 3500, 5200, 7800, 9500, 11200, 12000, 11800, 10500, 11600, 8000
+    ]
+
+    return {
+        title: {
+            text: `${studentInfo.value.name}的学习进度明细`,
+            left: 20,
+            top: 20,
+            textStyle: {
+                fontSize: 16,
+                fontWeight: '500',
+                color: '#333'
+            }
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'line',
+                lineStyle: {
+                    color: '#999',
+                    type: 'dashed'
+                }
+            },
+            backgroundColor: '#fff',
+            borderColor: '#ccc',
+            borderWidth: 1,
+            textStyle: {
+                color: '#333'
+            },
+            formatter: function (params: any) {
+                const param = params[0]
+                return `${param.axisValue}<br/>
+                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${param.color};"></span>
+                学习进度: ${param.value} 分钟`
+            }
+        },
+        grid: {
+            left: '5%',
+            right: '5%',
+            bottom: '8%',
+            top: '15%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            data: dateRange,
+            axisLabel: {
+                fontSize: 12,
+                color: '#666',
+                interval: 0,
+                rotate: 0
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#e8e8e8'
+                }
+            },
+            axisTick: {
+                show: false
+            }
+        },
+        yAxis: {
+            type: 'value',
+            min: 0,
+            max: 14000,
+            interval: 2000,
+            axisLabel: {
+                formatter: '{value}',
+                fontSize: 12,
+                color: '#666'
+            },
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            splitLine: {
+                lineStyle: {
+                    color: '#f0f0f0'
+                }
+            }
+        },
+        series: [
+            {
+                name: '学习进度',
+                type: 'line',
+                data: progressData,
+                smooth: true,
+                symbol: 'circle',
+                symbolSize: 6,
+                lineStyle: {
+                    color: '#1890ff',
+                    width: 3
+                },
+                itemStyle: {
+                    color: '#1890ff',
+                    borderColor: '#fff',
+                    borderWidth: 2
+                },
+                areaStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            {
+                                offset: 0,
+                                color: 'rgba(24, 144, 255, 0.3)'
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(24, 144, 255, 0.05)'
+                            }
+                        ]
+                    }
+                },
+                emphasis: {
+                    focus: 'series',
+                    itemStyle: {
+                        color: '#1890ff',
+                        borderColor: '#fff',
+                        borderWidth: 3,
+                        shadowBlur: 10,
+                        shadowColor: 'rgba(24, 144, 255, 0.3)'
+                    }
+                }
+            }
+        ]
+    }
+})
+
+// 返回上一页
+const goBack = () => {
+    router.go(-1)
+}
+</script>
+
+<style scoped>
+.student-progress {
+    padding: 10px;
+    background-color: #fff;
+    min-height: 100vh;
+}
+
+.page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    padding: 0 20px;
+    border-radius: 8px;
+    height: 70px;
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.back-btn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: #1890ff;
+    font-size: 14px;
+}
+
+.page-title {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: #333;
+}
+
+.header-right {
+    color: #666;
+    font-size: 14px;
+}
+
+.statistics-section {
+    margin-bottom: 20px;
+}
+
+.chart-header h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+}
+
+.chart {
+    width: 100%;
+    height: 500px;
+    border-radius: 8px;
+    padding: 20px 0;
+}
+
+.section-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    padding: 0 16px;
+    font-weight: 600;
+    color: #333;
+    border-bottom: 1px solid #f0f0f0;
+    padding-bottom: 12px;
+}
+
+.header-course-name {
+    flex: 1;
+    font-size: 16px;
+}
+
+.header-items {
+    display: flex;
+    font-size: 14px;
+    color: #666;
+}
+
+.header-duration {
+    width: 120px;
+    text-align: center;
+}
+
+.header-status {
+    width: 140px;
+    text-align: center;
+}
+
+.header-start-time {
+    width: 150px;
+    text-align: center;
+}
+
+.header-complete-time {
+    width: 150px;
+    text-align: center;
+}
+
+.header-progress {
+    width: 140px;
+    text-align: center;
+}
+
+.course-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.course-item {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    background: #fff;
+    border: 1px solid #f0f0f0;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+}
+
+.course-info {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    gap: 12px;
+}
+
+.course-thumbnail {
+    width: 60px;
+    height: 40px;
+    border-radius: 4px;
+}
+
+.course-icon {
+    color: white;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.course-thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.course-details {
+    flex: 1;
+}
+
+.course-title {
+    margin: 0 0 4px 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+}
+
+.course-subtitle {
+    margin: 0;
+    font-size: 12px;
+    color: #999;
+}
+
+.course-stats {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: #666;
+}
+
+.duration {
+    width: 120px;
+    text-align: center;
+}
+
+.status {
+    width: 140px;
+    text-align: center;
+}
+
+.start-time {
+    width: 150px;
+    text-align: center;
+}
+
+.complete-time {
+    width: 150px;
+    text-align: center;
+}
+
+.progress-bar-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: 140px;
+}
+
+.progress-bar-wrapper .n-progress {
+    width: 80px;
+}
+
+.progress-text {
+    font-size: 12px;
+    color: #1890ff;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .student-progress {
+        padding: 10px;
+    }
+
+    .page-header {
+        flex-direction: column;
+        height: auto;
+        padding: 15px;
+        gap: 10px;
+    }
+
+    .header-left {
+        width: 100%;
+        justify-content: flex-start;
+    }
+
+    .header-right {
+        width: 100%;
+        text-align: left;
+    }
+
+    .chart-header h3 {
+        font-size: 14px;
+    }
+
+    .section-header {
+        flex-direction: column;
+        gap: 10px;
+        align-items: flex-start;
+        padding: 0 8px;
+    }
+
+    .header-items {
+        display: none;
+        /* 在移动端隐藏表头 */
+    }
+
+    .header-course-name {
+        font-size: 14px;
+    }
+
+    .course-item {
+        flex-direction: column;
+        gap: 12px;
+        padding: 12px;
+    }
+
+    .course-stats {
+        flex-direction: column;
+        gap: 8px;
+        align-items: flex-start;
+        width: 100%;
+    }
+
+    .course-stats>* {
+        width: 100% !important;
+        text-align: left !important;
+    }
+
+    .progress-bar-wrapper {
+        justify-content: flex-start !important;
+    }
+}
+</style>