From b67fc03c0177af0618455137b618355d2aac4c0e Mon Sep 17 00:00:00 2001
From: YangQiang <yangqiang@gitea.com>
Date: Fri, 17 Apr 2026 15:49:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=B7=AF=E7=94=B1):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=9C=A8=E7=BA=BF=E5=AD=A6=E4=B9=A0=E7=9B=91=E6=8E=A7=E5=92=8C?=
 =?UTF-8?q?=E5=AD=A6=E4=B9=A0=E6=80=BB=E8=A7=88=E9=A1=B5=E9=9D=A2=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

feat(首页): 新增学习情况总览表入口和在线学习监控卡片

refactor(班级分配): 重构班级分配页面，增加学习官查询功能

chore: 删除无用的Git清理脚本和文档文件

style: 调整样式和图标，优化用户体验
---
 .codebuddy/integration/eop.json              |   10 +-
 GIT_CLEAN_GUIDE.md                           |  107 -
 cleanup-temp.bat                             |   42 -
 git-clean.ps1                                |   60 -
 git-clean.sh                                 |   47 -
 src/components/ClassAllocationPage.vue       |  769 +++-
 src/components/HomePage.vue                  |   10 +-
 src/components/LearningOverviewPage.vue      | 2636 ++++++++++++
 src/components/OnlineLearningMonitorPage.vue | 3905 ++++++++++++++++++
 src/components/PortalHomePage.vue            |   32 +
 src/router/index.js                          |   10 +
 11 files changed, 7225 insertions(+), 403 deletions(-)
 delete mode 100644 GIT_CLEAN_GUIDE.md
 delete mode 100644 cleanup-temp.bat
 delete mode 100644 git-clean.ps1
 delete mode 100644 git-clean.sh
 create mode 100644 src/components/LearningOverviewPage.vue
 create mode 100644 src/components/OnlineLearningMonitorPage.vue

diff --git a/.codebuddy/integration/eop.json b/.codebuddy/integration/eop.json
index 5576e49..7154021 100644
--- a/.codebuddy/integration/eop.json
+++ b/.codebuddy/integration/eop.json
@@ -2,9 +2,9 @@
   "projectName": "aixuediebian-kanban",
   "projectId": "pages-eip23arpzoar",
   "deployUrl": "https://aixuediebian-kanban-3fzkam9s.edgeone.cool",
-  "previewUrl": "https://aixuediebian-kanban-3fzkam9s.edgeone.cool?eo_token=e87d722adbc6936c1429a1f77bba0d71&eo_time=1776139462",
+  "previewUrl": "https://aixuediebian-kanban-3fzkam9s.edgeone.cool?eo_token=500f76b21d03fd0693ba2f52f2757888&eo_time=1776404056",
   "consoleUrl": "https://console.cloud.tencent.com/edgeone/pages/project/pages-eip23arpzoar/index",
-  "deploymentUrl": "https://console.cloud.tencent.com/edgeone/pages/project/pages-eip23arpzoar/deployment/gnpthgy3s1",
-  "deployId": "gnpthgy3s1",
-  "lastDeployTime": 1776139462
-}
+  "deploymentUrl": "https://console.cloud.tencent.com/edgeone/pages/project/pages-eip23arpzoar/deployment/4dxuaw1yre",
+  "deployId": "4dxuaw1yre",
+  "lastDeployTime": 1776404056
+}
\ No newline at end of file
diff --git a/GIT_CLEAN_GUIDE.md b/GIT_CLEAN_GUIDE.md
deleted file mode 100644
index 5c4a72d..0000000
--- a/GIT_CLEAN_GUIDE.md
+++ /dev/null
@@ -1,107 +0,0 @@
-# Git清理命令指南
-
-## 📋 查看和验证命令
-
-### 1. 查看当前状态
-```bash
-git status --short
-```
-
-### 2. 预览将被.gitignore忽略的文件（仅删除临时文件）
-```bash
-git clean -d -X -n
-```
-
-### 3. 预览所有未追踪的文件（包含重要文件）
-```bash
-git clean -d -n
-```
-
-### 4. 查看未追踪的文件（排除.gitignore）
-```bash
-git ls-files --others --exclude-standard
-```
-
-### 5. 查看已被.gitignore排除的文件
-```bash
-git ls-files --others --ignored --exclude-standard
-```
-
-## 🧹 清理命令
-
-### ✅ 推荐：仅删除临时文件（安全）
-```bash
-# 预览
-git clean -d -X -n
-
-# 确认无误后执行
-git clean -d -X -f
-```
-
-### ⚠️ 仅删除未被忽略的未追踪文件（危险！）
-```bash
-# 这会删除你的源代码！仅用于确认
-git clean -d -n
-
-# 不要执行这个，除非你确定
-# git clean -d -f
-```
-
-### ❌ 危险：删除所有未追踪文件
-```bash
-# 这会删除所有文件（包括源代码和临时文件）
-git clean -d -x -f
-```
-
-## 🎯 推荐工作流程
-
-### 步骤1：添加重要文件到Git
-```bash
-# 添加所有重要文件（排除.gitignore中的文件）
-git add .
-
-# 查看已暂存的文件
-git status
-```
-
-### 步骤2：首次提交
-```bash
-git commit -m "Initial commit"
-```
-
-### 步骤3：清理临时文件
-```bash
-# 删除临时文件（node_modules, dist等）
-git clean -d -X -f
-```
-
-### 步骤4：验证状态
-```bash
-git status
-```
-
-## 📝 参数说明
-
-- `-d`: 删除未追踪的目录
-- `-f`: 强制删除
-- `-n`: 预览模式，不实际删除（dry run）
-- `-X`: 仅删除被.gitignore忽略的文件
-- `-x`: 删除所有未追踪文件（忽略.gitignore）
-
-## ⚠️ 重要提示
-
-1. **始终先使用 `-n` 参数预览**
-2. **不要运行 `git clean -d -f`**，除非你确定要删除源代码
-3. **推荐使用 `git clean -d -X -f`** 清理临时文件
-4. **建议先提交重要文件**，再清理临时文件
-
-## 🔄 恢复误删
-
-如果误删了文件，可以使用以下方法恢复：
-```bash
-# 如果文件已提交过
-git checkout HEAD -- <文件路径>
-
-# 如果文件未提交，但还在工作区
-# 可以使用系统回收站或备份恢复
-```
diff --git a/cleanup-temp.bat b/cleanup-temp.bat
deleted file mode 100644
index a4c00d8..0000000
--- a/cleanup-temp.bat
+++ /dev/null
@@ -1,42 +0,0 @@
-@echo off
-chcp 65001 >nul
-echo ==========================================
-echo    Git临时文件清理脚本
-echo ==========================================
-echo.
-
-echo [1/4] 检查Git状态...
-git status --short
-echo.
-
-echo [2/4] 预览将被删除的临时文件...
-echo ==========================================
-git clean -d -X -n
-echo ==========================================
-echo.
-
-set /p confirm="确认删除这些临时文件吗？(Y/N): "
-if /i "%confirm%" neq "Y" (
-    echo 已取消操作
-    pause
-    exit /b 0
-)
-
-echo.
-echo [3/4] 正在删除临时文件...
-git clean -d -X -f
-echo.
-
-echo [4/4] 验证清理结果...
-echo ==========================================
-echo 当前未追踪的文件（应为核心源代码）：
-echo ==========================================
-git ls-files --others --exclude-standard
-echo.
-
-echo ==========================================
-echo 清理完成！
-echo ==========================================
-echo.
-echo 提示：使用 'git add .' 添加源代码到Git
-pause
diff --git a/git-clean.ps1 b/git-clean.ps1
deleted file mode 100644
index 7b998ff..0000000
--- a/git-clean.ps1
+++ /dev/null
@@ -1,60 +0,0 @@
-# Git清理脚本 - PowerShell版本
-# 用于排除未提交且不重要的文件
-
-Write-Host "==========================================" -ForegroundColor Cyan
-Write-Host "  Git清理脚本 - 安全模式" -ForegroundColor Cyan
-Write-Host "==========================================" -ForegroundColor Cyan
-Write-Host ""
-
-# 1. 验证当前状态
-Write-Host "📋 当前Git状态：" -ForegroundColor Green
-Write-Host "----------------------------------------" -ForegroundColor DarkGray
-git status --short
-Write-Host ""
-
-# 2. 预览将被删除的未追踪文件（不遵循.gitignore）
-Write-Host "🔍 预览将删除的未追踪文件（不遵循.gitignore）：" -ForegroundColor Yellow
-Write-Host "----------------------------------------" -ForegroundColor DarkGray
-git clean -d -n
-Write-Host ""
-
-# 3. 预览将被删除的未追踪文件（遵循.gitignore）
-Write-Host "🔍 预览将被删除的未追踪文件（遵循.gitignore）：" -ForegroundColor Yellow
-Write-Host "----------------------------------------" -ForegroundColor DarkGray
-git clean -d -X -n
-Write-Host ""
-
-# 4. 预览将被删除的所有未追踪文件
-Write-Host "🔍 预览将被删除的所有未追踪文件：" -ForegroundColor Yellow
-Write-Host "----------------------------------------" -ForegroundColor DarkGray
-git clean -d -x -n
-Write-Host ""
-
-Write-Host "==========================================" -ForegroundColor Cyan
-Write-Host "  清理选项：" -ForegroundColor Cyan
-Write-Host "==========================================" -ForegroundColor Cyan
-Write-Host ""
-Write-Host "选项1: 删除未被.gitignore忽略的文件（安全）" -ForegroundColor White
-Write-Host "  git clean -d -f" -ForegroundColor Gray
-Write-Host ""
-Write-Host "选项2: 仅删除被.gitignore忽略的文件（清理临时文件）" -ForegroundColor White
-Write-Host "  git clean -d -X -f" -ForegroundColor Gray
-Write-Host ""
-Write-Host "选项3: 删除所有未追踪文件（危险）" -ForegroundColor White
-Write-Host "  git clean -d -x -f" -ForegroundColor Gray
-Write-Host ""
-Write-Host "建议：先运行预览命令（-n参数），确认无误后再执行实际删除" -ForegroundColor Yellow
-Write-Host ""
-
-# 5. 验证哪些文件已被排除
-Write-Host "==========================================" -ForegroundColor Cyan
-Write-Host "  验证排除状态：" -ForegroundColor Cyan
-Write-Host "==========================================" -ForegroundColor Cyan
-Write-Host ""
-Write-Host "查看所有未追踪的文件：" -ForegroundColor Green
-git ls-files --others --exclude-standard
-Write-Host ""
-
-Write-Host "查看已被.gitignore排除的文件：" -ForegroundColor Green
-git ls-files --others --ignored --exclude-standard
-Write-Host ""
diff --git a/git-clean.sh b/git-clean.sh
deleted file mode 100644
index 17a5a9b..0000000
--- a/git-clean.sh
+++ /dev/null
@@ -1,47 +0,0 @@
-#!/bin/bash
-# Git清理脚本 - 用于排除未提交且不重要的文件
-
-echo "=========================================="
-echo "  Git清理脚本 - 安全模式"
-echo "=========================================="
-echo ""
-
-# 1. 验证当前状态
-echo "📋 当前Git状态："
-echo "----------------------------------------"
-git status --short
-echo ""
-
-# 2. 预览将被删除的未追踪文件（不遵循.gitignore）
-echo "🔍 预览将删除的未追踪文件（不遵循.gitignore）："
-echo "----------------------------------------"
-git clean -d -n
-echo ""
-
-# 3. 预览将被删除的未追踪文件（遵循.gitignore）
-echo "🔍 预览将被删除的未追踪文件（遵循.gitignore）："
-echo "----------------------------------------"
-git clean -d -X -n
-echo ""
-
-# 4. 预览将被删除的所有未追踪文件
-echo "🔍 预览将被删除的所有未追踪文件："
-echo "----------------------------------------"
-git clean -d -x -n
-echo ""
-
-echo "=========================================="
-echo "  清理选项："
-echo "=========================================="
-echo ""
-echo "选项1: 删除未被.gitignore忽略的文件（安全）"
-echo "  git clean -d -f"
-echo ""
-echo "选项2: 仅删除被.gitignore忽略的文件（清理临时文件）"
-echo "  git clean -d -X -f"
-echo ""
-echo "选项3: 删除所有未追踪文件（危险）"
-echo "  git clean -d -x -f"
-echo ""
-echo "建议：先运行预览命令（-n参数），确认无误后再执行实际删除"
-echo ""
diff --git a/src/components/ClassAllocationPage.vue b/src/components/ClassAllocationPage.vue
index 4fe4cde..b8c8005 100644
--- a/src/components/ClassAllocationPage.vue
+++ b/src/components/ClassAllocationPage.vue
@@ -2,91 +2,242 @@
   <div class="class-allocation-page">
     <!-- 左侧区域 -->
     <div class="left-panel">
-      <!-- 学校选择下拉框 -->
-      <div class="school-select-wrapper">
-        <a-select
-          v-model:value="selectedSchool"
-          placeholder="请选择学校"
-          show-search
-          :filter-option="filterSchoolOption"
-          @change="handleSchoolChange"
-          class="school-select"
-        >
-          <a-select-option v-for="school in schoolList" :key="school.id" :value="school.id">
-            {{ school.name }}
-          </a-select-option>
-        </a-select>
-      </div>
-
-      <!-- 树形结构控件 -->
-      <div class="tree-wrapper">
-        <a-tree
-          :tree-data="treeData"
-          :expanded-keys="expandedKeys"
-          :selected-keys="selectedKeys"
-          @expand="handleExpand"
-          @select="handleSelect"
-          class="class-tree"
-        >
-          <template #title="{ data }">
-            <div 
-              class="tree-node" 
-              :class="{ 
-                'has-officer': data.hasOfficer, 
-                'no-officer': data.isClass && !data.hasOfficer,
-                'selected': selectedKeys.includes(data.key)
-              }"
-            >
-              <!-- 学校节点图标 -->
-              <template v-if="data.type === 'school'">
-                <span class="node-icon school-icon">
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
-                    <path d="M12 3L1 9L12 15L21 10.09V17H23V9L12 3Z" fill="#1890ff"/>
-                    <path d="M5 13.18V17.18L12 21L19 17.18V13.18L12 17L5 13.18Z" fill="#1890ff"/>
-                  </svg>
-                </span>
-              </template>
-              <!-- 年级节点图标 -->
-              <template v-else-if="data.type === 'grade'">
-                <span class="node-icon grade-icon">
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
-                    <path d="M12 3L1 9L12 15L23 9L12 3Z" stroke="#52c41a" stroke-width="2" stroke-linejoin="round"/>
-                    <path d="M5 13.18V17.18L12 21L19 17.18V13.18" stroke="#52c41a" stroke-width="2" stroke-linejoin="round"/>
-                  </svg>
-                </span>
-              </template>
-              <!-- 班级节点图标 -->
-              <template v-else-if="data.type === 'class'">
-                <span class="node-icon class-icon" :class="{ assigned: data.hasOfficer, unassigned: !data.hasOfficer }">
-                  <svg v-if="data.hasOfficer" width="16" height="16" viewBox="0 0 24 24" fill="none">
-                    <rect x="3" y="4" width="18" height="16" rx="2" stroke="#52c41a" stroke-width="2"/>
-                    <path d="M8 10H16M8 14H12" stroke="#52c41a" stroke-width="2" stroke-linecap="round"/>
-                    <circle cx="17" cy="14" r="2" fill="#52c41a"/>
-                  </svg>
-                  <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none">
-                    <rect x="3" y="4" width="18" height="16" rx="2" stroke="#ff4d4f" stroke-width="2"/>
-                    <path d="M8 10H16M8 14H12" stroke="#ff4d4f" stroke-width="2" stroke-linecap="round"/>
-                  </svg>
-                </span>
-              </template>
-              
-              <span class="node-title">{{ data.title }}</span>
-              
-              <!-- 年级节点显示待分配班级数量 -->
-              <span v-if="data.type === 'grade' && data.unassignedCount > 0" class="unassigned-count-badge">
-                {{ data.unassignedCount }}个班待分配
-              </span>
-              
-              <!-- 班级节点显示学习官信息 -->
-              <span v-if="data.type === 'class' && data.hasOfficer" class="officer-tag">
-                {{ data.officerName }}
-              </span>
-              <span v-else-if="data.type === 'class' && !data.hasOfficer" class="officer-tag unassigned-tag">
-                待分配
-              </span>
+      <!-- 页签切换 -->
+      <div class="tabs-wrapper">
+        <a-tabs v-model:activeKey="activeTabKey" type="card" class="custom-tabs">
+          <a-tab-pane key="school" tab="学校班级">
+            <!-- 学校选择下拉框 -->
+            <div class="school-select-wrapper">
+              <a-select
+                v-model:value="selectedSchool"
+                placeholder="请选择学校"
+                show-search
+                :filter-option="filterSchoolOption"
+                @change="handleSchoolChange"
+                class="school-select"
+              >
+                <a-select-option v-for="school in schoolList" :key="school.id" :value="school.id">
+                  {{ school.name }}
+                </a-select-option>
+              </a-select>
             </div>
-          </template>
-        </a-tree>
+
+            <!-- 树形结构控件 -->
+            <div class="tree-wrapper">
+              <!-- 未选择学校时的提示 -->
+              <div v-if="!selectedSchool" class="tree-placeholder">
+                <div class="placeholder-content">
+                  <div class="placeholder-icon">
+                    <svg width="64" height="64" viewBox="0 0 24 24" fill="none">
+                      <path d="M12 3L1 9L12 15L21 10.09V17H23V9L12 3Z" stroke="#d9d9d9" stroke-width="1.5" stroke-linejoin="round"/>
+                      <path d="M5 13.18V17.18L12 21L19 17.18V13.18" stroke="#d9d9d9" stroke-width="1.5" stroke-linejoin="round"/>
+                    </svg>
+                  </div>
+                  <p class="placeholder-title">请先选择学校</p>
+                  <p class="placeholder-desc">选择学校后将加载相关班级数据</p>
+                  <div class="placeholder-arrow">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                      <path d="M12 5v14M5 12l7 7 7-7" stroke="#1890ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <a-tree
+                v-else
+                :tree-data="treeData"
+                :expanded-keys="expandedKeys"
+                :selected-keys="selectedKeys"
+                @expand="handleExpand"
+                @select="handleSelect"
+                class="class-tree"
+              >
+                <template #title="{ data }">
+                  <div 
+                    class="tree-node" 
+                    :class="{ 
+                      'has-officer': data.hasOfficer, 
+                      'no-officer': data.isClass && !data.hasOfficer,
+                      'selected': selectedKeys.includes(data.key)
+                    }"
+                  >
+                    <!-- 学校节点图标 -->
+                    <template v-if="data.type === 'school'">
+                      <span class="node-icon school-icon">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+                          <path d="M12 3L1 9L12 15L21 10.09V17H23V9L12 3Z" fill="#1890ff"/>
+                          <path d="M5 13.18V17.18L12 21L19 17.18V13.18L12 17L5 13.18Z" fill="#1890ff"/>
+                        </svg>
+                      </span>
+                    </template>
+                    <!-- 年级节点图标 -->
+                    <template v-else-if="data.type === 'grade'">
+                      <span class="node-icon grade-icon">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+                          <path d="M12 3L1 9L12 15L23 9L12 3Z" stroke="#52c41a" stroke-width="2" stroke-linejoin="round"/>
+                          <path d="M5 13.18V17.18L12 21L19 17.18V13.18" stroke="#52c41a" stroke-width="2" stroke-linejoin="round"/>
+                        </svg>
+                      </span>
+                    </template>
+                    <!-- 班级节点图标 -->
+                    <template v-else-if="data.type === 'class'">
+                      <span class="node-icon class-icon" :class="{ assigned: data.hasOfficer, unassigned: !data.hasOfficer }">
+                        <svg v-if="data.hasOfficer" width="16" height="16" viewBox="0 0 24 24" fill="none">
+                          <rect x="3" y="4" width="18" height="16" rx="2" stroke="#52c41a" stroke-width="2"/>
+                          <path d="M8 10H16M8 14H12" stroke="#52c41a" stroke-width="2" stroke-linecap="round"/>
+                          <circle cx="17" cy="14" r="2" fill="#52c41a"/>
+                        </svg>
+                        <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none">
+                          <rect x="3" y="4" width="18" height="16" rx="2" stroke="#ff4d4f" stroke-width="2"/>
+                          <path d="M8 10H16M8 14H12" stroke="#ff4d4f" stroke-width="2" stroke-linecap="round"/>
+                        </svg>
+                      </span>
+                    </template>
+                    
+                    <span class="node-title">{{ data.title }}</span>
+                    
+                    <!-- 年级节点显示待分配班级数量 -->
+                    <span v-if="data.type === 'grade' && data.unassignedCount > 0" class="unassigned-count-badge">
+                      {{ data.unassignedCount }}个班待分配
+                    </span>
+                    
+                    <!-- 班级节点显示学习官信息 -->
+                    <span v-if="data.type === 'class' && data.hasOfficer" class="officer-tag">
+                      {{ data.officerName }}
+                    </span>
+                    <span v-else-if="data.type === 'class' && !data.hasOfficer" class="officer-tag unassigned-tag">
+                      待分配
+                    </span>
+                  </div>
+                </template>
+              </a-tree>
+            </div>
+          </a-tab-pane>
+          
+          <a-tab-pane key="officer" tab="学习官查询">
+            <!-- 学习官查询区域 -->
+            <div class="officer-query-section">
+              <!-- 搜索输入框 -->
+              <div class="query-input-wrapper">
+                <a-input-search
+                  v-model:value="officerQuery.searchText"
+                  placeholder="请输入学习官姓名或手机号"
+                  allow-clear
+                  :loading="officerQuery.loading"
+                  @change="handleOfficerQueryChange"
+                  @search="handleOfficerQuerySearch"
+                  class="officer-query-input"
+                >
+                  <template #prefix>
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+                      <circle cx="11" cy="11" r="8" stroke="#999" stroke-width="2"/>
+                      <path d="M21 21l-4.35-4.35" stroke="#999" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                  </template>
+                </a-input-search>
+              </div>
+              
+              <!-- 加载状态 -->
+              <div v-if="officerQuery.loading" class="query-loading">
+                <a-spin size="large" tip="查询中..." />
+              </div>
+              
+              <!-- 无结果提示 -->
+              <div v-else-if="officerQuery.searched && !officerQuery.hasResults && officerQuery.searchText" class="query-empty">
+                <a-empty description="未找到匹配的学习官">
+                  <template #image>
+                    <svg width="64" height="64" viewBox="0 0 24 24" fill="none">
+                      <circle cx="11" cy="11" r="8" stroke="#d9d9d9" stroke-width="2"/>
+                      <path d="M21 21l-4.35-4.35" stroke="#d9d9d9" stroke-width="2" stroke-linecap="round"/>
+                      <path d="M8 11h6" stroke="#d9d9d9" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                  </template>
+                </a-empty>
+                <p class="empty-hint">请检查输入的姓名或手机号是否正确</p>
+              </div>
+              
+              <!-- 查询结果树 -->
+              <div v-else-if="officerQuery.hasResults" class="query-result-wrapper">
+                <div class="result-header">
+                  <span class="result-count">找到 <strong>{{ officerQuery.resultCount }}</strong> 位学习官</span>
+                </div>
+                <a-tree
+                  :tree-data="officerQuery.treeData"
+                  :expanded-keys="officerQuery.expandedKeys"
+                  :selected-keys="officerQuery.selectedKeys"
+                  @expand="handleOfficerQueryExpand"
+                  @select="handleOfficerQuerySelect"
+                  class="officer-query-tree"
+                >
+                  <template #title="{ data }">
+                    <div 
+                      class="query-tree-node" 
+                      :class="{ 
+                        'officer-node': data.type === 'officer',
+                        'school-node': data.type === 'school',
+                        'grade-node': data.type === 'grade',
+                        'class-node': data.type === 'class'
+                      }"
+                    >
+                      <!-- 学习官节点 -->
+                      <template v-if="data.type === 'officer'">
+                        <span class="node-icon officer-icon">
+                          <div class="officer-avatar-small" :style="{ background: getAvatarColor(data.name) }">
+                            {{ data.name.charAt(0) }}
+                          </div>
+                        </span>
+                        <span class="node-title officer-name">{{ data.title }}</span>
+                        <span class="officer-phone-tag">{{ data.phone }}</span>
+                      </template>
+                      
+                      <!-- 学校节点 -->
+                      <template v-else-if="data.type === 'school'">
+                        <span class="node-icon school-icon">
+                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+                            <path d="M12 3L1 9L12 15L21 10.09V17H23V9L12 3Z" fill="#1890ff"/>
+                            <path d="M5 13.18V17.18L12 21L19 17.18V13.18L12 17L5 13.18Z" fill="#1890ff"/>
+                          </svg>
+                        </span>
+                        <span class="node-title">{{ data.title }}</span>
+                      </template>
+                      
+                      <!-- 年级节点 -->
+                      <template v-else-if="data.type === 'grade'">
+                        <span class="node-icon grade-icon">
+                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+                            <path d="M12 3L1 9L12 15L23 9L12 3Z" stroke="#52c41a" stroke-width="2" stroke-linejoin="round"/>
+                            <path d="M5 13.18V17.18L12 21L19 17.18V13.18" stroke="#52c41a" stroke-width="2" stroke-linejoin="round"/>
+                          </svg>
+                        </span>
+                        <span class="node-title">{{ data.title }}</span>
+                      </template>
+                      
+                      <!-- 班级节点 -->
+                      <template v-else-if="data.type === 'class'">
+                        <span class="node-icon class-icon">
+                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+                            <rect x="3" y="4" width="18" height="16" rx="2" stroke="#52c41a" stroke-width="2"/>
+                            <path d="M8 10H16M8 14H12" stroke="#52c41a" stroke-width="2" stroke-linecap="round"/>
+                          </svg>
+                        </span>
+                        <span class="node-title">{{ data.title }}</span>
+                        <span class="class-student-count">{{ data.studentCount }}人</span>
+                      </template>
+                    </div>
+                  </template>
+                </a-tree>
+              </div>
+              
+              <!-- 初始提示 -->
+              <div v-else class="query-hint">
+                <svg width="48" height="48" viewBox="0 0 24 24" fill="none">
+                  <circle cx="11" cy="11" r="8" stroke="#d9d9d9" stroke-width="2"/>
+                  <path d="M21 21l-4.35-4.35" stroke="#d9d9d9" stroke-width="2" stroke-linecap="round"/>
+                </svg>
+                <p>请输入学习官姓名或手机号进行查询</p>
+              </div>
+            </div>
+          </a-tab-pane>
+        </a-tabs>
       </div>
     </div>
 
@@ -283,58 +434,7 @@
               class="filter-input"
             />
           </div>
-          <div class="filter-item">
-            <span class="filter-label">状态</span>
-            <a-select
-              v-model:value="officerFilter.status"
-              placeholder="全部状态"
-              allowClear
-              class="filter-select-modal"
-            >
-              <a-select-option value="available">空闲</a-select-option>
-              <a-select-option value="busy">忙碌</a-select-option>
-              <a-select-option value="leave">请假</a-select-option>
-            </a-select>
-          </div>
-          <div class="filter-item">
-            <span class="filter-label">区域</span>
-            <a-select
-              v-model:value="officerFilter.area"
-              placeholder="全部区域"
-              allowClear
-              class="filter-select-modal"
-            >
-              <a-select-option value="east">东区</a-select-option>
-              <a-select-option value="west">西区</a-select-option>
-              <a-select-option value="south">南区</a-select-option>
-              <a-select-option value="north">北区</a-select-option>
-              <a-select-option value="central">中心区</a-select-option>
-            </a-select>
-          </div>
-        </div>
-        <div class="filter-row">
-          <div class="filter-item">
-            <span class="filter-label">管理班级数</span>
-            <a-select
-              v-model:value="officerFilter.classCount"
-              placeholder="不限"
-              allowClear
-              class="filter-select-modal"
-            >
-              <a-select-option value="0">无管理班级</a-select-option>
-              <a-select-option value="1-3">1~3个</a-select-option>
-              <a-select-option value="4-6">4~6个</a-select-option>
-              <a-select-option value="7+">7个以上</a-select-option>
-            </a-select>
-          </div>
-          <div class="filter-item">
-            <span class="filter-label">入职时间</span>
-            <a-range-picker
-              v-model:value="officerFilter.dateRange"
-              class="filter-date"
-              format="YYYY-MM-DD"
-            />
-          </div>
+         
           <div class="filter-actions">
             <a-button type="primary" @click="handleFilterOfficers">
               <template #icon>
@@ -420,7 +520,172 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
+
+// 当前激活的页签
+const activeTabKey = ref('school')
+
+// ========== 学习官查询相关 ==========
+const officerQuery = ref({
+  searchText: '',
+  loading: false,
+  searched: false,
+  hasResults: false,
+  resultCount: 0,
+  treeData: [],
+  expandedKeys: [],
+  selectedKeys: []
+})
+
+let queryTimeout = null
+
+// 处理学习官查询输入变化（500ms防抖）
+const handleOfficerQueryChange = () => {
+  // 清除之前的定时器
+  if (queryTimeout) {
+    clearTimeout(queryTimeout)
+  }
+
+  const searchText = officerQuery.value.searchText?.trim()
+
+  if (!searchText) {
+    officerQuery.value.searched = false
+    officerQuery.value.hasResults = false
+    officerQuery.value.treeData = []
+    return
+  }
+
+  // 设置新的定时器，500ms防抖
+  queryTimeout = setTimeout(() => {
+    performOfficerQuery(searchText)
+  }, 500)
+}
+
+// 执行查询
+const performOfficerQuery = (searchText) => {
+  officerQuery.value.loading = true
+  officerQuery.value.searched = true
+
+  // 模拟异步查询
+  setTimeout(() => {
+    // 生成模拟查询结果
+    const results = generateOfficerQueryResults(searchText)
+
+    officerQuery.value.treeData = results
+    officerQuery.value.hasResults = results.length > 0
+    officerQuery.value.resultCount = results.length
+    officerQuery.value.expandedKeys = results.map(r => r.key)
+    officerQuery.value.loading = false
+  }, 300)
+}
+
+// 生成查询结果（模拟数据）
+const generateOfficerQueryResults = (searchText) => {
+  const results = []
+  const surnames = ['张', '李', '王', '刘', '陈', '杨', '赵', '黄', '周', '吴']
+  const names = ['明', '华', '强', '伟', '磊', '静', '敏', '丽', '婷', '娜']
+
+  // 根据搜索文本生成匹配的学习官
+  for (let i = 1; i <= 5; i++) {
+    const surname = surnames[Math.floor(Math.random() * surnames.length)]
+    const name = names[Math.floor(Math.random() * names.length)]
+    const fullName = surname + name
+    const phone = `138${String(Math.floor(Math.random() * 100000000)).padStart(8, '0')}`
+
+    // 检查是否匹配
+    const nameMatch = fullName.includes(searchText)
+    const phoneMatch = phone.includes(searchText)
+
+    if (nameMatch || phoneMatch || searchText.length < 2) {
+      // 生成该学习官的学校班级层级数据
+      const officerNode = {
+        key: `officer-${i}`,
+        title: fullName,
+        name: fullName,
+        phone: phone,
+        type: 'officer',
+        children: generateOfficerSchoolTree(i)
+      }
+      results.push(officerNode)
+    }
+  }
+
+  return results
+}
+
+// 生成学习官的学校班级树
+const generateOfficerSchoolTree = (officerId) => {
+  const schools = []
+  const schoolCount = Math.floor(Math.random() * 2) + 1
+
+  for (let s = 0; s < schoolCount; s++) {
+    const school = schoolList.value[Math.floor(Math.random() * schoolList.value.length)]
+    const schoolData = classDataMap[school.id]
+
+    if (schoolData) {
+      const schoolNode = {
+        key: `officer-${officerId}-school-${s}`,
+        title: school.name,
+        type: 'school',
+        children: []
+      }
+
+      // 添加年级和班级
+      schoolData.forEach((grade, gradeIdx) => {
+        const gradeNode = {
+          key: `officer-${officerId}-school-${s}-grade-${gradeIdx}`,
+          title: grade.gradeName,
+          type: 'grade',
+          children: []
+        }
+
+        // 随机选择1-3个班级
+        const classCount = Math.min(Math.floor(Math.random() * 3) + 1, grade.classes.length)
+        const shuffled = [...grade.classes].sort(() => Math.random() - 0.5)
+
+        shuffled.slice(0, classCount).forEach((cls, classIdx) => {
+          gradeNode.children.push({
+            key: `officer-${officerId}-school-${s}-grade-${gradeIdx}-class-${classIdx}`,
+            title: cls.className,
+            type: 'class',
+            studentCount: cls.studentCount,
+            isLeaf: true
+          })
+        })
+
+        if (gradeNode.children.length > 0) {
+          schoolNode.children.push(gradeNode)
+        }
+      })
+
+      if (schoolNode.children.length > 0) {
+        schools.push(schoolNode)
+      }
+    }
+  }
+
+  return schools
+}
+
+// 处理查询搜索按钮
+const handleOfficerQuerySearch = () => {
+  handleOfficerQueryChange()
+}
+
+// 处理查询结果树展开/折叠
+const handleOfficerQueryExpand = (keys) => {
+  officerQuery.value.expandedKeys = keys
+}
+
+// 处理查询结果树选择
+const handleOfficerQuerySelect = (selectedKeysValue, { node }) => {
+  officerQuery.value.selectedKeys = selectedKeysValue
+
+  // 如果选中的是班级节点，可以在这里处理选中逻辑
+  if (node.type === 'class') {
+    // 可以添加选中班级的逻辑
+  }
+}
 
 // 学校列表数据
 const schoolList = ref([
@@ -491,11 +756,9 @@ const officerCandidates = ref([
 const officerColumns = [
   { title: '姓名', dataIndex: 'name', key: 'name', width: 140 },
   { title: '手机号', dataIndex: 'phone', key: 'phone', width: 130 },
-  { title: '区域', dataIndex: 'areaName', key: 'areaName', width: 90 },
-  { title: '状态', dataIndex: 'status', key: 'status', width: 90, align: 'center' },
+  
   { title: '管理班级', dataIndex: 'classCount', key: 'classCount', width: 100, align: 'center', sorter: (a, b) => a.classCount - b.classCount },
-  { title: '入职时间', dataIndex: 'joinDate', key: 'joinDate', width: 110, sorter: (a, b) => a.joinDate.localeCompare(b.joinDate) },
-  { title: '经验', dataIndex: 'experience', key: 'experience', width: 80 },
+  
   { title: '操作', key: 'action', width: 90, align: 'center', fixed: 'right' }
 ]
 
@@ -935,6 +1198,167 @@ const handleSelect = (selectedKeysValue, { node }) => {
   background-color: #fafafa;
 }
 
+/* 页签样式 */
+.tabs-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.custom-tabs {
+  height: 100%;
+}
+
+.custom-tabs :deep(.ant-tabs-nav) {
+  margin-bottom: 0;
+  background-color: #fff;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.custom-tabs :deep(.ant-tabs-content) {
+  height: calc(100% - 46px);
+}
+
+.custom-tabs :deep(.ant-tabs-tabpane) {
+  height: 100%;
+  overflow-y: auto;
+}
+
+/* 学习官查询区域样式 */
+.officer-query-section {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #fafafa;
+}
+
+.query-input-wrapper {
+  padding: 16px;
+  background-color: #fff;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.officer-query-input {
+  width: 100%;
+}
+
+.query-loading {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+}
+
+.query-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+}
+
+.empty-hint {
+  margin-top: 8px;
+  font-size: 13px;
+  color: #999;
+}
+
+.query-hint {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  color: #999;
+}
+
+.query-hint p {
+  margin-top: 16px;
+  font-size: 14px;
+}
+
+.query-result-wrapper {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+}
+
+.result-header {
+  padding: 8px 12px;
+  margin-bottom: 12px;
+  background: linear-gradient(135deg, #e6f7ff 0%, #f0f5ff 100%);
+  border-radius: 6px;
+  border: 1px solid #d6e4ff;
+}
+
+.result-count {
+  font-size: 13px;
+  color: #666;
+}
+
+.result-count strong {
+  color: #1890ff;
+  font-weight: 600;
+}
+
+.officer-query-tree {
+  background: transparent;
+}
+
+.query-tree-node {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+}
+
+.query-tree-node.officer-node {
+  background: linear-gradient(135deg, #f6ffed 0%, #fcfff7 100%);
+  border-radius: 6px;
+  padding: 8px 12px;
+  margin: 4px 0;
+  border: 1px solid #d9f7be;
+}
+
+.officer-avatar-small {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.officer-name {
+  font-weight: 600;
+  color: #333;
+}
+
+.officer-phone-tag {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background-color: #f0f0f0;
+  color: #666;
+  margin-left: auto;
+}
+
+.class-student-count {
+  font-size: 11px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  color: #999;
+  margin-left: auto;
+}
+
 .school-select-wrapper {
   padding: 16px;
   border-bottom: 1px solid #e8e8e8;
@@ -949,6 +1373,69 @@ const handleSelect = (selectedKeysValue, { node }) => {
   flex: 1;
   overflow-y: auto;
   padding: 8px;
+  position: relative;
+}
+
+/* 未选择学校时的提示样式 */
+.tree-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 300px;
+}
+
+.placeholder-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 40px 20px;
+}
+
+.placeholder-icon {
+  width: 80px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
+  border-radius: 50%;
+  margin-bottom: 20px;
+  border: 2px dashed #e8e8e8;
+}
+
+.placeholder-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin: 0 0 8px 0;
+}
+
+.placeholder-desc {
+  font-size: 13px;
+  color: #999;
+  margin: 0 0 20px 0;
+}
+
+.placeholder-arrow {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #e6f7ff 0%, #f0f5ff 100%);
+  border-radius: 50%;
+  animation: bounce 2s infinite;
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
 }
 
 /* 树节点样式 */
diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
index 8a861a6..2d1499a 100644
--- a/src/components/HomePage.vue
+++ b/src/components/HomePage.vue
@@ -136,6 +136,13 @@ const reports = [
     icon: 'layers',
     iconBg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', // 紫色渐变
     description: '查看英语单词学情统计、正确率排名、进度分布等报告'
+  },
+  {
+    id: 'learning_overview',
+    name: '学习情况总览表',
+    icon: 'table',
+    iconBg: 'linear-gradient(135deg, #722ed1 0%, #531dab 100%)', // 深紫色渐变
+    description: '全面查看学生学习数据统计与分析'
   }
 ]
 
@@ -151,7 +158,8 @@ const handleReportClick = (report) => {
     'cloud_school': '/cloud-school-report',
     'school': '/learning-behavior-report',
     'leaderboard': '/leaderboard',
-    'english_word': '/english-word-report'
+    'english_word': '/english-word-report',
+    'learning_overview': '/learning-overview'
   }
 
   const routePath = routeMap[report.id]
diff --git a/src/components/LearningOverviewPage.vue b/src/components/LearningOverviewPage.vue
new file mode 100644
index 0000000..5636198
--- /dev/null
+++ b/src/components/LearningOverviewPage.vue
@@ -0,0 +1,2636 @@
+<template>
+  <div class="learning-overview-page">
+    <!-- 顶部导航栏 -->
+    <header class="portal-header">
+      <div class="header-left">
+        <div class="logo-box">
+          <img src="../Assets/logo.png" alt="优学" class="logo-img" />
+        </div>
+      </div>
+      <div class="header-right">
+        <div 
+          class="user-info-wrap" 
+          @mouseenter="showDropdown = true"
+          @mouseleave="showDropdown = false"
+        >
+          <div class="user-avatar">
+            <span class="avatar-text">杨</span>
+          </div>
+          <span class="user-name">杨某某</span>
+          <span class="dropdown-arrow" :class="{ 'arrow-rotate': showDropdown }">
+            <svg width="10" height="6" viewBox="0 0 10 6" fill="none">
+              <path d="M1 1L5 5L9 1" stroke="#999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </span>
+          
+          <Transition name="dropdown">
+            <div class="user-dropdown-menu" v-show="showDropdown">
+              <div class="dropdown-item" @click.stop="handleLogout">
+                <svg class="logout-icon" width="16" height="16" viewBox="0 0 24 24" fill="none">
+                  <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                  <polyline points="16,17 21,12 16,7" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                  <line x1="21" y1="12" x2="9" y2="12" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                <span>退出登录</span>
+              </div>
+            </div>
+          </Transition>
+        </div>
+      </div>
+    </header>
+
+    <!-- 页面主体 -->
+    <div class="page-content">
+      <!-- 返回按钮区域 -->
+      <div class="back-section">
+        <button class="back-btn" @click="goBack">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M19 12H5M5 12L12 19M5 12L12 5"/>
+          </svg>
+          <span>返回</span>
+        </button>
+      </div>
+
+      <!-- 页面标题 -->
+      <div class="page-header">
+        <div class="title-wrapper">
+          <div class="title-icon">
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="3" y="3" width="18" height="18" rx="2"/>
+              <path d="M3 9h18M9 21V9"/>
+            </svg>
+          </div>
+          <div class="title-text">
+            <h1>学习情况总览表</h1>
+            <p>全面查看学生学习数据统计与分析</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- 筛选区域 -->
+      <div class="filter-section">
+        <div class="filter-row">
+          <div class="filter-item">
+            <span class="filter-label">云校:</span>
+            <t-select 
+              v-model="filters.cloudSchool" 
+              :options="cloudSchoolOptions" 
+              placeholder="请选择云校" 
+              class="filter-select" 
+              filterable 
+              clearable
+              @change="handleCloudSchoolChange" 
+            />
+          </div>
+          <div class="filter-item">
+            <span class="filter-label">学校:</span>
+            <t-select 
+              v-model="filters.school" 
+              :options="schoolOptions" 
+              placeholder="请选择学校" 
+              :disabled="!filters.cloudSchool" 
+              class="filter-select" 
+              filterable 
+              clearable
+              @change="handleSchoolChange" 
+            />
+          </div>
+          <div class="filter-item">
+            <span class="filter-label">年级:</span>
+            <t-select 
+              v-model="filters.grade" 
+              :options="gradeOptions" 
+              placeholder="请选择年级" 
+              :disabled="!filters.school" 
+              class="filter-select" 
+              filterable 
+              clearable
+              @change="handleGradeChange" 
+            />
+          </div>
+          <div class="filter-item">
+            <span class="filter-label">班级:</span>
+            <t-select 
+              v-model="filters.class" 
+              :options="classOptions" 
+              placeholder="请选择班级" 
+              :disabled="!filters.grade" 
+              class="filter-select" 
+              filterable 
+              clearable
+            />
+          </div>
+        </div>
+        <div class="filter-row">
+          <div class="filter-item">
+            <span class="filter-label">科目:</span>
+            <t-select 
+              v-model="filters.subject" 
+              :options="subjectOptions" 
+              placeholder="请选择科目" 
+              class="filter-select" 
+              filterable 
+              clearable
+            />
+          </div>
+          <div class="filter-item">
+            <span class="filter-label">层次:</span>
+            <t-select 
+              v-model="filters.level" 
+              :options="levelOptions" 
+              placeholder="请选择层次" 
+              class="filter-select" 
+              filterable 
+              clearable
+            />
+          </div>
+          <div class="filter-item">
+            <span class="filter-label">学生姓名:</span>
+            <t-input 
+              v-model="filters.studentName" 
+              placeholder="请输入学生姓名" 
+              class="filter-input"
+              clearable
+            />
+          </div>
+          <div class="filter-item date-range-item">
+            <span class="filter-label">时间范围:</span>
+            <div class="date-range-wrapper">
+              <a-range-picker
+                v-model:value="filters.dateRange"
+                :disabled-date="disabledDateWithRange"
+                :show-time="false"
+                format="YYYY-MM-DD"
+                :placeholder="['开始时间', '结束时间']"
+                class="date-range-picker"
+                @change="handleDateRangeChange"
+                @calendarChange="handleCalendarChange"
+              />
+              <div class="date-range-hint-wrapper">
+                <span class="date-range-hint-icon">!</span>
+                <span class="date-range-hint">最多只能选择90天</span>
+              </div>
+            </div>
+          </div>
+          <div class="filter-actions">
+            <t-button theme="primary" @click="handleSearch" :loading="loading">
+              <template #icon>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <circle cx="11" cy="11" r="8"/>
+                  <path d="M21 21l-4.35-4.35"/>
+                </svg>
+              </template>
+              查询
+            </t-button>
+            <t-button theme="default" @click="handleReset">
+              重置
+            </t-button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 数据表格 -->
+      <div class="table-section">
+        <div class="table-toolbar">
+          <button class="export-btn" @click="exportData" :disabled="exporting">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+              <polyline points="7 10 12 15 17 10"/>
+              <line x1="12" y1="15" x2="12" y2="3"/>
+            </svg>
+            <span>导出数据</span>
+          </button>
+          <button class="edit-column-btn" @click="openColumnEditor">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="3"/>
+              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+            </svg>
+            <span>编辑列</span>
+          </button>
+        </div>
+       
+        <div
+          ref="tableBodyRef"
+          class="table-drag-container"
+          @mousedown="handleMouseDown"
+          @mousemove="handleMouseMove"
+          @mouseup="handleMouseUp"
+          @mouseleave="handleMouseLeave"
+        >
+          <a-table
+            :columns="columns"
+            :data-source="tableData"
+            :pagination="pagination"
+            :loading="loading"
+            :scroll="{ x: 1500 }"
+            size="middle"
+            row-key="id"
+            @change="handleTableChange"
+          >
+            <template #headerCell="{ column }">
+              <template v-if="column.key === 'firstCheckIn'">
+                <a-tooltip placement="top" :overlay-style="{ maxWidth: '280px' }">
+                  <template #title>该时段首次打卡时间</template>
+                  <span style="cursor:help;border-bottom:1px dashed #aaa;">首次打卡</span>
+                </a-tooltip>
+              </template>
+              <template v-else-if="column.key === 'lastCheckIn'">
+                <a-tooltip placement="top" :overlay-style="{ maxWidth: '280px' }">
+                  <template #title>该时段最后打卡时间</template>
+                  <span style="cursor:help;border-bottom:1px dashed #aaa;">最后打卡</span>
+                </a-tooltip>
+              </template>
+              <template v-else-if="column.key === 'totalCheckIns'">
+                <a-tooltip placement="top" :overlay-style="{ maxWidth: '280px' }">
+                  <template #title>该时段累计打卡课程总次数</template>
+                  <span style="cursor:help;border-bottom:1px dashed #aaa;">打卡次数</span>
+                </a-tooltip>
+              </template>
+              <template v-else-if="column.key === 'totalStudyTime'">
+                <a-tooltip placement="top" :overlay-style="{ maxWidth: '280px' }">
+                  <template #title>该时段累计学习总时长</template>
+                  <span style="cursor:help;border-bottom:1px dashed #aaa;">学习时长</span>
+                </a-tooltip>
+              </template>
+              <template v-else-if="column.key === 'totalFeatured'">
+                <a-tooltip placement="top" :overlay-style="{ maxWidth: '280px' }">
+                  <template #title>笔记被精选的总数量</template>
+                  <span style="cursor:help;border-bottom:1px dashed #aaa;">精选笔记</span>
+                </a-tooltip>
+              </template>
+              <template v-else-if="column.key === 'checkInRate'">
+                <a-tooltip placement="top" :overlay-style="{ maxWidth: '280px' }">
+                  <template #title>打卡课程数量/该时段总课程数</template>
+                  <span style="cursor:help;border-bottom:1px dashed #aaa;">打卡率</span>
+                </a-tooltip>
+              </template>
+              <template v-else>
+                <span>{{ column.title }}</span>
+              </template>
+            </template>
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'studentName'">
+                <span class="student-name">{{ record.studentName }}</span>
+              </template>
+              <template v-else-if="column.key === 'level'">
+                <t-tag :theme="getLevelTheme(record.level)" variant="light" size="small">
+                  {{ record.level }}
+                </t-tag>
+              </template>
+              <template v-else-if="column.key === 'subjectLevel'">
+                <t-tag :theme="getLevelTheme(record.subjectLevel)" variant="light" size="small">
+                  {{ record.subjectLevel }}
+                </t-tag>
+              </template>
+              <template v-else-if="column.key === 'checkInRate'">
+                <a-tooltip title="打卡课程数量/该时段总课程数">
+                  <div class="checkin-rate-cell">
+                    <t-progress 
+                      :percentage="record.checkInRate" 
+                      :color="getCheckInRateColor(record.checkInRate)"
+                      size="small"
+                      theme="line"
+                      :label="false"
+                    />
+                    <span class="rate-text">{{ record.checkInRate }}%</span>
+                  </div>
+                </a-tooltip>
+              </template>
+              <template v-else-if="column.key === 'totalCheckIns'">
+                <span class="number-cell">{{ record.totalCheckIns }}</span>
+              </template>
+              <template v-else-if="column.key === 'totalFeatured'">
+                <span class="number-cell" :class="{ 'highlight': record.totalFeatured > 0 }">
+                  {{ record.totalFeatured }}
+                </span>
+              </template>
+            </template>
+          </a-table>
+        </div>
+      </div>
+    </div>
+
+    <!-- 编辑列模态框 -->
+    <t-dialog
+      v-model:visible="showColumnEditorModal"
+      header="编辑列"
+      confirm-btn="保存"
+      cancel-btn="取消"
+      :confirm-btn-props="{ disabled: !hasSelectedEditableColumn }"
+      @confirm="handleSaveColumnEditor"
+      @close="handleCancelColumnEditor"
+      width="500px"
+    >
+      <div class="column-editor-content">
+        <p class="column-editor-tip">拖动调整列顺序，勾选控制列显示：</p>
+        <div v-if="!hasSelectedEditableColumn" class="column-editor-warning">
+          <t-icon name="error-circle" />
+          <span>请至少选择一列</span>
+        </div>
+        <div class="column-list-wrapper">
+          <draggable
+            v-model="tempColumnList"
+            item-key="key"
+            animation="200"
+            ghost-class="draggable-ghost"
+            chosen-class="draggable-chosen"
+            drag-class="draggable-drag"
+          >
+            <template #item="{ element }">
+              <div class="column-item">
+                <span class="drag-handle">
+                  <t-icon name="menu" />
+                </span>
+                <t-checkbox v-model="element.visible" @click.stop />
+                <span class="column-label">{{ element.title }}</span>
+              </div>
+            </template>
+          </draggable>
+        </div>
+        <div class="column-editor-actions">
+          <t-button size="small" variant="text" @click="selectAllColumns">
+            全选
+          </t-button>
+          <t-button size="small" variant="text" @click="clearAllColumns">
+            清空
+          </t-button>
+        </div>
+      </div>
+    </t-dialog>
+
+    <!-- 导出确认模态框 -->
+    <t-dialog
+      v-model:visible="showExportModal"
+      header="导出数据"
+      :confirm-btn="{ content: '确定导出', theme: 'primary', loading: isExporting }"
+      :cancel-btn="{ content: '取消' }"
+      @confirm="handleExportData"
+      @close="showExportModal = false"
+      width="580px"
+    >
+      <div class="export-modal-content">
+        <!-- 提示横幅 -->
+        <div class="export-banner">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10"/>
+            <line x1="12" y1="16" x2="12" y2="12"/>
+            <line x1="12" y1="8" x2="12.01" y2="8"/>
+          </svg>
+          <span>将导出符合以下筛选条件的数据，未选择的字段默认导出全部</span>
+        </div>
+
+        <!-- 分组：机构范围 -->
+        <div class="export-group">
+          <div class="export-group-title">
+            <span class="export-group-dot"></span>
+            机构范围
+          </div>
+          <div class="export-fields-grid export-fields-grid--3col">
+            <div class="export-field">
+              <label class="export-field-label">云校</label>
+              <t-select
+                v-model="exportFilters.cloudSchool"
+                :options="cloudSchoolOptions"
+                placeholder="全部云校"
+                filterable
+                clearable
+                @change="handleExportCloudSchoolChange"
+              />
+            </div>
+            <div class="export-field">
+              <label class="export-field-label">学校</label>
+              <t-select
+                v-model="exportFilters.school"
+                :options="schoolOptions"
+                placeholder="全部学校"
+                filterable
+                clearable
+                :disabled="!exportFilters.cloudSchool"
+                @change="handleExportSchoolChange"
+              />
+            </div>
+            <div class="export-field">
+              <label class="export-field-label">年级</label>
+              <t-select
+                v-model="exportFilters.grade"
+                :options="gradeOptions"
+                :placeholder="exportFilters.school ? '全部年级' : '请先选择学校'"
+                clearable
+                :disabled="!exportFilters.school"
+                @change="handleExportGradeChange"
+              />
+            </div>
+            <div class="export-field">
+              <label class="export-field-label">班级</label>
+              <t-select
+                v-model="exportFilters.class"
+                :options="classOptions"
+                :placeholder="exportFilters.grade ? '全部班级' : '请先选择年级'"
+                filterable
+                clearable
+                :disabled="!exportFilters.grade"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- 分割线 -->
+        <div class="export-divider"></div>
+
+        <!-- 分组：筛选条件 -->
+        <div class="export-group">
+          <div class="export-group-title">
+            <span class="export-group-dot"></span>
+            筛选条件
+          </div>
+          <div class="export-fields-grid export-fields-grid--2col">
+            <div class="export-field">
+              <label class="export-field-label">科目</label>
+              <t-select
+                v-model="exportFilters.subject"
+                :options="subjectOptions"
+                placeholder="全部科目"
+                clearable
+              />
+            </div>
+            <div class="export-field">
+              <label class="export-field-label">层次</label>
+              <t-select
+                v-model="exportFilters.level"
+                :options="levelOptions"
+                placeholder="全部层次"
+                clearable
+              />
+            </div>
+          </div>
+          <div class="export-field export-field--full">
+            <label class="export-field-label">时间范围</label>
+            <div class="export-date-row">
+              <a-range-picker
+                v-model:value="exportFilters.dateRange"
+                format="YYYY-MM-DD"
+                :placeholder="['开始日期', '结束日期']"
+                :disabled-date="disabledDate"
+              />
+              <span class="export-date-hint">不选则不限时间</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </t-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { message, DatePicker } from 'ant-design-vue'
+import dayjs from 'dayjs'
+import draggable from 'vuedraggable'
+import * as XLSX from 'xlsx'
+
+const router = useRouter()
+
+// 获取层次标签主题色
+const getLevelTheme = (level) => {
+  const themeMap = {
+    '拔尖': 'danger',
+    '特控': 'warning',
+    '本科': 'success'
+  }
+  return themeMap[level] || 'default'
+}
+
+// 获取打卡率进度条颜色
+const getCheckInRateColor = (rate) => {
+  if (rate >= 80) return '#52c41a'
+  if (rate >= 60) return '#faad14'
+  return '#f5222d'
+}
+
+// 用户下拉菜单状态
+const showDropdown = ref(false)
+
+// 加载状态
+const loading = ref(false)
+const exporting = ref(false)
+const showScrollHint = ref(true)
+const isExporting = ref(false)
+const showExportModal = ref(false)
+
+// 导出筛选条件
+const exportFilters = reactive({
+  cloudSchool: undefined,
+  school: undefined,
+  grade: undefined,
+  class: undefined,
+  subject: undefined,
+  level: undefined,
+  dateRange: []
+})
+
+// 表格拖动滚动状态
+const isDragging = ref(false)
+const startX = ref(0)
+const scrollLeft = ref(0)
+const tableBodyRef = ref(null)
+
+// 临时日期变量（用于限制90天范围选择）
+const tempStartDate = ref(null)
+const tempMaxEndDate = ref(null)
+const tempEndDate = ref(null)
+const tempMinStartDate = ref(null)
+
+// 筛选条件
+const filters = reactive({
+  cloudSchool: undefined,
+  school: undefined,
+  grade: undefined,
+  class: undefined,
+  subject: undefined,
+  level: undefined,
+  studentName: '',
+  dateRange: []
+})
+
+// 下拉选项
+const cloudSchoolOptions = ref([
+  { label: '全部云校', value: 'all' },
+  { label: '华东云校', value: 'huadong' },
+  { label: '华北云校', value: 'huabei' },
+  { label: '华南云校', value: 'huanan' },
+  { label: '西南云校', value: 'xinan' }
+])
+
+const schoolOptions = ref([])
+const gradeOptions = ref([])
+const classOptions = ref([])
+
+const subjectOptions = ref([
+  { label: '语文', value: 'chinese' },
+  { label: '数学', value: 'math' },
+  { label: '英语', value: 'english' },
+  { label: '物理', value: 'physics' },
+  { label: '化学', value: 'chemistry' },
+  { label: '生物', value: 'biology' },
+  { label: '历史', value: 'history' },
+  { label: '地理', value: 'geography' },
+  { label: '政治', value: 'politics' }
+])
+
+const levelOptions = ref([
+  { label: '本科', value: 'undergraduate' },
+  { label: '特控', value: 'special' },
+  { label: '拔尖', value: 'top' }
+])
+
+// localStorage 键名
+const COLUMN_ORDER_KEY = 'learning_overview_column_order'
+
+// 所有表格列定义
+const allColumns = [
+  {
+    title: '学生姓名',
+    dataIndex: 'studentName',
+    key: 'studentName',
+    width: 90,
+    fixed: 'left', 
+    align: 'center',
+    description: '学生的姓名'
+  },
+  {
+    title: '云校',
+    dataIndex: 'cloudSchool',
+    key: 'cloudSchool',
+    width: 100, 
+    align: 'center',
+    description: '所属云校区域'
+  },
+  {
+    title: '学校',
+    dataIndex: 'school',
+    key: 'school',
+    width: 140, 
+    ellipsis: true,
+    description: '学生所在学校'
+  },
+  {
+    title: '年级',
+    dataIndex: 'grade',
+    key: 'grade',
+    width: 70, 
+    align: 'center',
+    description: '学生所在年级'
+  },
+  {
+    title: '班级',
+    dataIndex: 'class',
+    key: 'class',
+    width: 70, 
+    align: 'center',
+    description: '学生所在班级'
+  },
+  {
+    title: '科目',
+    dataIndex: 'subject',
+    key: 'subject',
+    width: 70, 
+    align: 'center',
+    description: '学习科目'
+  },
+  {
+    title: '综合层次',
+    dataIndex: 'level',
+    key: 'level',
+    width: 90, 
+    align: 'center',
+    description: '学生综合层次划分'
+  },
+  {
+    title: '科目层次',
+    dataIndex: 'subjectLevel',
+    key: 'subjectLevel',
+    width: 90, 
+    align: 'center',
+    description: '科目层次划分'
+  },
+  {
+    title: '首次打卡',
+    dataIndex: 'firstCheckIn',
+    key: 'firstCheckIn',
+    width: 140, 
+    align: 'center',
+    description: '当天首次打卡时间'
+  },
+  {
+    title: '最后打卡',
+    dataIndex: 'lastCheckIn',
+    key: 'lastCheckIn',
+    width: 140, 
+    align: 'center',
+    description: '当天最后打卡时间'
+  },
+  {
+    title: '打卡次数',
+    dataIndex: 'totalCheckIns',
+    key: 'totalCheckIns',
+    width: 90, 
+    align: 'center',
+    description: '该时段累计打卡课程总次数'
+  },
+  {
+    title: '学习时长',
+    dataIndex: 'totalStudyTime',
+    key: 'totalStudyTime',
+    width: 110, 
+    align: 'center',
+    description: '该时段累计学习总时长'
+  },
+  {
+    title: '精选笔记',
+    dataIndex: 'totalFeatured',
+    key: 'totalFeatured',
+    width: 90, 
+    align: 'center',
+    description: '笔记被精选的数量'
+  },
+  {
+    title: '打卡率',
+    dataIndex: 'checkInRate',
+    key: 'checkInRate',
+    width: 90, 
+    align: 'center',
+    description: '打卡课程数量/该时段总课程数'
+  }
+]
+
+// 默认列顺序和可见性配置
+const defaultColumnConfig = allColumns.map(col => ({
+  key: col.key,
+  visible: true
+}))
+
+// 当前列配置（从localStorage恢复或使用默认）
+const columnConfig = ref([...defaultColumnConfig])
+
+// 是否有自定义列配置
+const hasCustomColumnOrder = ref(false)
+
+// 编辑列模态框状态
+const showColumnEditorModal = ref(false)
+const tempColumnList = ref([])
+
+// 从 localStorage 加载列配置
+const loadColumnOrder = () => {
+  try {
+    const savedConfig = localStorage.getItem(COLUMN_ORDER_KEY)
+    if (savedConfig) {
+      const parsed = JSON.parse(savedConfig)
+      // 验证保存的列配置是否有效
+      if (Array.isArray(parsed) && parsed.every(item =>
+        item.key && allColumns.some(dc => dc.key === item.key)
+      )) {
+        columnConfig.value = parsed
+        hasCustomColumnOrder.value = true
+      }
+    }
+  } catch (error) {
+    console.error('Failed to load column config:', error)
+  }
+}
+
+// 保存列配置到 localStorage
+const saveColumnOrder = () => {
+  try {
+    localStorage.setItem(COLUMN_ORDER_KEY, JSON.stringify(columnConfig.value))
+    hasCustomColumnOrder.value = true
+  } catch (error) {
+    console.error('Failed to save column config:', error)
+  }
+}
+
+// 打开编辑列模态框
+const openColumnEditor = () => {
+  // 准备临时列列表
+  tempColumnList.value = columnConfig.value.map(cfg => {
+    const column = allColumns.find(col => col.key === cfg.key)
+    return {
+      key: cfg.key,
+      title: column?.title || cfg.key,
+      visible: cfg.visible
+    }
+  })
+  showColumnEditorModal.value = true
+}
+
+// 计算是否至少有一个可编辑列被选中
+const hasSelectedEditableColumn = computed(() => {
+  return tempColumnList.value.some(item => item.visible)
+})
+
+// 保存编辑列
+const handleSaveColumnEditor = () => {
+  // 保存新配置
+  columnConfig.value = tempColumnList.value.map(item => ({
+    key: item.key,
+    visible: item.visible
+  }))
+  saveColumnOrder()
+  showColumnEditorModal.value = false
+  message.success('列配置已保存')
+}
+
+// 取消编辑列
+const handleCancelColumnEditor = () => {
+  showColumnEditorModal.value = false
+}
+
+// 全选列
+const selectAllColumns = () => {
+  tempColumnList.value.forEach(item => {
+    item.visible = true
+  })
+}
+
+// 清空列选择
+const clearAllColumns = () => {
+  tempColumnList.value.forEach(item => {
+    item.visible = false
+  })
+}
+
+// 根据当前列配置返回排序并筛选后的列配置
+const columns = computed(() => {
+  const columnMap = {}
+  allColumns.forEach(col => {
+    columnMap[col.key] = col
+  })
+
+  // 按照 columnConfig 的顺序和可见性返回列
+  const result = []
+  columnConfig.value.forEach(cfg => {
+    if (cfg.visible && columnMap[cfg.key]) {
+      result.push(columnMap[cfg.key])
+    }
+  })
+
+  // 如果有新列不在配置中，添加到末尾
+  allColumns.forEach(col => {
+    if (!columnConfig.value.find(cfg => cfg.key === col.key)) {
+      result.push(col)
+    }
+  })
+
+  return result
+})
+
+// 表格数据
+const tableData = ref([])
+
+// 分页配置
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+  showSizeChanger: true,
+  showQuickJumper: true,
+  showTotal: (total) => `共 ${total} 条记录`,
+  pageSizeOptions: ['10', '20', '50', '100']
+})
+
+// 生成模拟数据
+const generateMockData = () => {
+  const data = []
+  const cloudSchools = ['华东云校', '华北云校', '华南云校', '西南云校']
+  const schools = ['第一中学', '第二中学', '实验中学', '外国语学校', '师范大学附属中学']
+  const grades = ['高一', '高二', '高三']
+  const classes = ['1 班', '2 班', '3 班', '4 班', '5 班']
+  const subjects = ['语文', '数学', '英语', '物理', '化学', '生物', '历史', '地理', '政治']
+  const levels = ['本科', '特控', '拔尖']
+  const subjectLevels = ['本科', '特控', '拔尖']
+  const firstNames = ['王', '李', '张', '刘', '陈', '杨', '黄', '赵', '周', '吴', '徐', '孙', '马', '朱', '胡', '郭', '林', '何', '高', '罗']
+  const lastNames = ['伟', '芳', '娜', '敏', '静', '丽', '强', '磊', '军', '洋', '勇', '艳', '杰', '娟', '涛', '明', '超', '秀英', '华', '鹏', '飞', '婷', '宇', '浩', '欣', '雨', '晨', '轩', '昊', '瑞']
+  
+  // 生成更真实的日期范围（最近3个月内）
+  const now = dayjs()
+  const threeMonthsAgo = now.subtract(3, 'month')
+  
+  for (let i = 1; i <= 100; i++) {
+    // 生成学生姓名
+    const firstName = firstNames[Math.floor(Math.random() * firstNames.length)]
+    const lastName = lastNames[Math.floor(Math.random() * lastNames.length)]
+    const studentName = firstName + lastName
+    
+    // 选择年级并确保数据逻辑一致性
+    const grade = grades[Math.floor(Math.random() * grades.length)]
+    const gradeLevelMap = { '高一': 0, '高二': 1, '高三': 2 }
+    const gradeIndex = gradeLevelMap[grade]
+    
+    // 综合层次与科目层次保持逻辑一致性
+    const level = levels[Math.floor(Math.random() * levels.length)]
+    const subjectLevel = Math.random() > 0.3 ? level : levels[Math.floor(Math.random() * levels.length)]
+    
+    // 生成合理的首次打卡和最后一次打卡时间
+    const firstCheckInDate = threeMonthsAgo.add(Math.floor(Math.random() * 30), 'day')
+    const lastCheckInDate = firstCheckInDate.add(Math.floor(Math.random() * 60) + 1, 'day')
+    
+    // 确保最后一次打卡不超过今天
+    const finalLastCheckInDate = lastCheckInDate.isAfter(now) ? now : lastCheckInDate
+    
+    // 生成打卡次数（基于时间跨度）
+    const daysDiff = finalLastCheckInDate.diff(firstCheckInDate, 'day')
+    const maxPossibleCheckIns = Math.min(daysDiff + 1, 60)
+    const checkInCount = Math.floor(Math.random() * maxPossibleCheckIns * 0.7) + Math.floor(maxPossibleCheckIns * 0.1)
+    
+    // 生成学习时长（基于打卡次数）
+    const avgStudyTimePerDay = 30 + Math.floor(Math.random() * 90) // 每天30-120分钟
+    const totalStudyMinutes = checkInCount * avgStudyTimePerDay
+    const totalStudyHours = Math.floor(totalStudyMinutes / 60)
+    const remainingMinutes = totalStudyMinutes % 60
+    
+    // 生成精选笔记数量（基于学习时长）
+    const noteRate = 0.1 + Math.random() * 0.2 // 10%-30%的转化率
+    const totalFeatured = Math.floor(checkInCount * noteRate)
+    
+    // 计算打卡率
+    const totalCourses = 60
+    const checkInRate = Math.min(Math.round((checkInCount / totalCourses) * 100), 100)
+    
+    data.push({
+      id: i,
+      studentName: studentName,
+      cloudSchool: cloudSchools[Math.floor(Math.random() * cloudSchools.length)],
+      school: schools[Math.floor(Math.random() * schools.length)],
+      grade: grade,
+      class: classes[Math.floor(Math.random() * classes.length)],
+      subject: subjects[Math.floor(Math.random() * subjects.length)],
+      level: level,
+      subjectLevel: subjectLevel,
+      firstCheckIn: firstCheckInDate.format('YYYY-MM-DD HH:mm'),
+      lastCheckIn: finalLastCheckInDate.format('YYYY-MM-DD HH:mm'),
+      totalCheckIns: checkInCount,
+      totalStudyTime: `${totalStudyHours}小时${remainingMinutes}分钟`,
+      totalFeatured: totalFeatured,
+      checkInRate: checkInRate
+    })
+  }
+  
+  // 按最后打卡时间倒序排序
+  return data.sort((a, b) => dayjs(b.lastCheckIn).valueOf() - dayjs(a.lastCheckIn).valueOf())
+}
+
+// 加载数据
+const loadData = async () => {
+  loading.value = true
+  try {
+    // 模拟API请求
+    await new Promise(resolve => setTimeout(resolve, 500))
+    const mockData = generateMockData()
+    tableData.value = mockData
+    pagination.total = mockData.length
+  } finally {
+    loading.value = false
+  }
+}
+
+// 筛选条件变化处理
+const handleCloudSchoolChange = (value) => {
+  filters.school = undefined
+  filters.grade = undefined
+  filters.class = undefined
+  // 模拟加载学校数据
+  schoolOptions.value = [
+    { label: '第一中学', value: 'school1' },
+    { label: '第二中学', value: 'school2' },
+    { label: '实验中学', value: 'school3' }
+  ]
+}
+
+const handleSchoolChange = (value) => {
+  filters.grade = undefined
+  filters.class = undefined
+  // 模拟加载年级数据
+  gradeOptions.value = [
+    { label: '高一', value: 'grade1' },
+    { label: '高二', value: 'grade2' },
+    { label: '高三', value: 'grade3' }
+  ]
+}
+
+const handleGradeChange = (value) => {
+  filters.class = undefined
+  // 模拟加载班级数据
+  classOptions.value = [
+    { label: '1班', value: 'class1' },
+    { label: '2班', value: 'class2' },
+    { label: '3班', value: 'class3' },
+    { label: '4班', value: 'class4' }
+  ]
+}
+
+// 日期限制：结束时间最晚只能选择昨天，且最多只能选择90天
+const disabledDate = (current) => {
+  // 禁止选择今天及以后的日期
+  return current && current > dayjs().subtract(1, 'day').endOf('day')
+}
+
+// 日历变化时动态禁用超出90天的日期
+const handleCalendarChange = (dates) => {
+  if (dates && dates.length === 1) {
+    const selectedDate = dates[0]
+    
+    // 获取当前日期选择器的值
+    const currentRange = filters.dateRange || []
+    const currentStart = currentRange[0]
+    const currentEnd = currentRange[1]
+    
+    // 判断用户正在选择开始日期还是结束日期
+    // 如果当前没有选择任何日期，或者只选择了开始日期，则用户正在选择开始日期
+    // 如果已经选择了开始日期且selectedDate在开始日期之后，则用户正在选择结束日期
+    
+    const isSelectingEndDate = currentStart && 
+                               !currentEnd && 
+                               selectedDate.isAfter(currentStart, 'day')
+    
+    if (isSelectingEndDate) {
+      // 用户正在选择结束日期，限制开始日期的最小值（结束日期往前90天）
+      const minStartDate = selectedDate.subtract(90, 'day')
+      
+      tempEndDate.value = selectedDate
+      tempMinStartDate.value = minStartDate
+      tempStartDate.value = null
+      tempMaxEndDate.value = null
+    } else {
+      // 用户正在选择开始日期，限制结束日期的最大值（开始日期往后90天）
+      const maxEndDate = selectedDate.add(90, 'day')
+      // 实际的结束日期限制是90天后和昨天中较早的那个
+      const actualMaxEndDate = maxEndDate.isBefore(yesterdayCache.value, 'day') ? maxEndDate : yesterdayCache.value
+      
+      tempStartDate.value = selectedDate
+      tempMaxEndDate.value = actualMaxEndDate
+      tempEndDate.value = null
+      tempMinStartDate.value = null
+    }
+  }
+}
+
+// 缓存昨天的日期，避免重复计算
+const yesterdayCache = computed(() => dayjs().subtract(1, 'day').endOf('day'))
+
+// 动态禁用日期（用于限制90天范围）
+const disabledDateWithRange = (current) => {
+  if (!current) return false
+  
+  // 基础限制：禁止选择今天及以后的日期
+  if (current.isAfter(yesterdayCache.value, 'day')) {
+    return true
+  }
+  
+  // 如果有临时开始日期，限制结束日期在90天内（从startDate开始往后90天）
+  if (tempStartDate.value && tempMaxEndDate.value) {
+    if (current.isBefore(tempStartDate.value, 'day') || current.isAfter(tempMaxEndDate.value, 'day')) {
+      return true
+    }
+  }
+  
+  // 如果有临时结束日期，限制开始日期在90天内（从endDate往前90天）
+  if (tempEndDate.value && tempMinStartDate.value) {
+    if (current.isBefore(tempMinStartDate.value, 'day') || current.isAfter(tempEndDate.value, 'day')) {
+      return true
+    }
+  }
+  
+  return false
+}
+
+// 日期范围变化处理
+const handleDateRangeChange = (dates) => {
+  // 清除临时日期限制
+  tempStartDate.value = null
+  tempMaxEndDate.value = null
+  tempEndDate.value = null
+  tempMinStartDate.value = null
+  
+  if (dates && dates.length === 2) {
+    const [startDate, endDate] = dates
+    
+    // 验证结束时间是否早于开始时间
+    if (endDate.isBefore(startDate, 'day')) {
+      message.error('结束时间不能早于开始时间')
+      filters.dateRange = []
+      return
+    }
+    
+    // 验证结束时间是否超过昨天
+    const yesterday = dayjs().subtract(1, 'day').endOf('day')
+    if (endDate.isAfter(yesterday, 'day')) {
+      message.error('结束时间最晚只能选择昨天')
+      filters.dateRange = []
+      return
+    }
+    
+    // 验证时间范围是否超过90天
+    const daysDiff = endDate.diff(startDate, 'day') + 1
+    if (daysDiff > 90) {
+      message.error(`时间范围最多只能选择90天，您选择的范围是${daysDiff}天。请重新选择。`)
+      filters.dateRange = []
+      return
+    }
+  }
+}
+
+// 查询
+const handleSearch = () => {
+  pagination.current = 1
+  loadData()
+}
+
+// 重置
+const handleReset = () => {
+  filters.cloudSchool = undefined
+  filters.school = undefined
+  filters.grade = undefined
+  filters.class = undefined
+  filters.subject = undefined
+  filters.level = undefined
+  filters.studentName = ''
+  filters.dateRange = []
+  pagination.current = 1
+  loadData()
+}
+
+// 表格变化处理
+const handleTableChange = (pag, filters, sorter) => {
+  pagination.current = pag.current
+  pagination.pageSize = pag.pageSize
+  loadData()
+}
+
+// 表格拖动滚动相关方法
+const handleMouseDown = (e) => {
+  // 获取表格的滚动容器
+  const tableWrapper = e.currentTarget
+  const tableBody = tableWrapper.querySelector('.ant-table-body')
+  if (!tableBody) return
+
+  isDragging.value = true
+  startX.value = e.pageX
+  scrollLeft.value = tableBody.scrollLeft
+
+  // 设置拖动样式
+  tableWrapper.classList.add('is-dragging')
+  document.body.style.userSelect = 'none'
+}
+
+const handleMouseMove = (e) => {
+  if (!isDragging.value) return
+  e.preventDefault()
+
+  const tableWrapper = e.currentTarget
+  const tableBody = tableWrapper.querySelector('.ant-table-body')
+  if (!tableBody) return
+
+  const x = e.pageX
+  const walk = (x - startX.value) * 1.2 // 拖动速度系数
+  tableBody.scrollLeft = scrollLeft.value - walk
+}
+
+const handleMouseUp = (e) => {
+  if (!isDragging.value) return
+  isDragging.value = false
+
+  const tableWrapper = e.currentTarget
+  tableWrapper.classList.remove('is-dragging')
+  document.body.style.userSelect = ''
+}
+
+const handleMouseLeave = (e) => {
+  if (!isDragging.value) return
+  isDragging.value = false
+
+  const tableWrapper = e.currentTarget
+  tableWrapper.classList.remove('is-dragging')
+  document.body.style.userSelect = ''
+}
+
+// 打开导出模态框
+const exportData = () => {
+  // 将当前筛选条件同步到导出筛选条件
+  exportFilters.cloudSchool = filters.cloudSchool
+  exportFilters.school = filters.school
+  exportFilters.grade = filters.grade
+  exportFilters.class = filters.class
+  exportFilters.subject = filters.subject
+  exportFilters.level = filters.level
+  exportFilters.dateRange = filters.dateRange
+  showExportModal.value = true
+}
+
+// 处理导出数据
+const handleExportData = async () => {
+  if (tableData.value.length === 0) {
+    message.warning('当前没有可导出的数据')
+    return
+  }
+
+  isExporting.value = true
+  try {
+    // 准备数据行
+    const rows = tableData.value.map(item => {
+      const rowData = {}
+      columns.value.forEach(col => {
+        const key = col.key
+        const title = col.title || key
+        rowData[title] = item[key]
+      })
+      return rowData
+    })
+
+    // 创建工作簿
+    const wb = XLSX.utils.book_new()
+    const ws = XLSX.utils.json_to_sheet(rows)
+    XLSX.utils.book_append_sheet(wb, ws, '学习情况总览数据')
+
+    // 导出文件
+    const fileName = `学习情况总览表_${dayjs().format('YYYYMMDDHHmmss')}.xlsx`
+    XLSX.writeFile(wb, fileName)
+
+    message.success('导出成功')
+    showExportModal.value = false
+  } catch (error) {
+    console.error('Export error:', error)
+    message.error('导出失败，请重试')
+  } finally {
+    isExporting.value = false
+  }
+}
+
+// 导出模态框级联筛选处理
+const handleExportCloudSchoolChange = (value) => {
+  exportFilters.school = undefined
+  exportFilters.grade = undefined
+  exportFilters.class = undefined
+  // 模拟加载学校数据
+  if (value) {
+    schoolOptions.value = [
+      { label: '第一中学', value: 'school1' },
+      { label: '第二中学', value: 'school2' },
+      { label: '实验中学', value: 'school3' }
+    ]
+  }
+}
+
+const handleExportSchoolChange = (value) => {
+  exportFilters.grade = undefined
+  exportFilters.class = undefined
+  // 模拟加载年级数据
+  if (value) {
+    gradeOptions.value = [
+      { label: '高一', value: 'grade1' },
+      { label: '高二', value: 'grade2' },
+      { label: '高三', value: 'grade3' }
+    ]
+  }
+}
+
+const handleExportGradeChange = (value) => {
+  exportFilters.class = undefined
+  // 模拟加载班级数据
+  if (value) {
+    classOptions.value = [
+      { label: '1班', value: 'class1' },
+      { label: '2班', value: 'class2' },
+      { label: '3班', value: 'class3' },
+      { label: '4班', value: 'class4' }
+    ]
+  }
+}
+
+// 返回
+const goBack = () => {
+  router.back()
+}
+
+// 退出登录
+const handleLogout = () => {
+  router.push('/login')
+}
+
+// 初始化
+onMounted(() => {
+  loadColumnOrder()
+  // 设置默认时间范围为最近90天
+  const yesterday = dayjs().subtract(1, 'day').endOf('day')
+  const ninetyDaysAgo = dayjs().subtract(90, 'day').startOf('day')
+  filters.dateRange = [ninetyDaysAgo, yesterday]
+  loadData()
+})
+</script>
+
+<style scoped>
+.learning-overview-page {
+  min-height: 100vh;
+  background: #f5f7fa;
+}
+
+/* 顶部导航栏 */
+.portal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 24px;
+  height: 64px;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.logo-box {
+  display: flex;
+  align-items: center;
+}
+
+.logo-img {
+  height: 36px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.back-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  background: #f5f5f5;
+  border: none;
+  border-radius: 6px;
+  color: #666;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.back-btn:hover {
+  background: #e8e8e8;
+  color: #333;
+}
+
+.user-info-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  padding: 6px 12px;
+  border-radius: 6px;
+  transition: background 0.3s;
+  position: relative;
+}
+
+.user-info-wrap:hover {
+  background: #f5f5f5;
+}
+
+.user-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.avatar-text {
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.user-name {
+  font-size: 14px;
+  color: #333;
+}
+
+.dropdown-arrow {
+  transition: transform 0.3s;
+}
+
+.dropdown-arrow.arrow-rotate {
+  transform: rotate(180deg);
+}
+
+.user-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 8px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  padding: 8px 0;
+  min-width: 140px;
+  z-index: 1000;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  font-size: 14px;
+  color: #666;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.dropdown-item:hover {
+  background: #f5f5f5;
+  color: #333;
+}
+
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: all 0.2s;
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+/* 页面内容 */
+.page-content {
+  padding: 24px;
+  max-width: 1600px;
+  margin: 0 auto;
+}
+
+/* 返回按钮区域 */
+.back-section {
+  margin-bottom: 16px;
+}
+
+.back-section .back-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  background: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  color: #666;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.back-section .back-btn:hover {
+  border-color: #1677ff;
+  color: #1677ff;
+  background: #f0f5ff;
+}
+
+/* 页面标题 */
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.title-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.title-icon {
+  width: 56px;
+  height: 56px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}
+
+.title-text h1 {
+  margin: 0 0 4px 0;
+  font-size: 24px;
+  color: #333;
+  font-weight: 600;
+}
+
+.title-text p {
+  margin: 0;
+  font-size: 14px;
+  color: #999;
+}
+
+.export-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
+  border: none;
+  border-radius: 8px;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.export-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
+}
+
+/* 筛选区域 - 现代化设计 */
+.filter-section {
+  background: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%);
+  border-radius: 16px;
+  padding: 24px 28px;
+  margin-bottom: 24px;
+  box-shadow: 
+    0 4px 20px rgba(0, 0, 0, 0.04),
+    0 1px 3px rgba(0, 0, 0, 0.02),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  border: 1px solid rgba(229, 231, 235, 0.6);
+  position: relative;
+  overflow: hidden;
+}
+
+/* 顶部装饰线 */
+.filter-section::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #1677ff 0%, #36cfc9 50%, #52c41a 100%);
+  border-radius: 16px 16px 0 0;
+}
+
+.filter-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+  flex-wrap: wrap;
+  position: relative;
+}
+
+.filter-row + .filter-row {
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px dashed rgba(229, 231, 235, 0.8);
+}
+
+.filter-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 140px;
+}
+
+.filter-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #374151;
+  white-space: nowrap;
+  letter-spacing: 0.3px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.filter-label::before {
+  content: '';
+  width: 3px;
+  height: 12px;
+  background: linear-gradient(180deg, #1677ff 0%, #36cfc9 100%);
+  border-radius: 2px;
+}
+
+/* 下拉选择框样式优化 */
+.filter-select {
+  width: 150px;
+}
+
+.filter-select :deep(.t-select-input) {
+  border-radius: 10px;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.filter-select :deep(.t-input) {
+  border-radius: 10px;
+  border: 1.5px solid #e5e7eb;
+  background: #ffffff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.filter-select :deep(.t-input:hover) {
+  border-color: #1677ff;
+  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.08);
+}
+
+.filter-select :deep(.t-input.t-is-focused) {
+  border-color: #1677ff;
+  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12);
+}
+
+/* 输入框样式优化 */
+.filter-input {
+  width: 150px;
+}
+
+.filter-input :deep(.t-input) {
+  border-radius: 10px;
+  border: 1.5px solid #e5e7eb;
+  background: #ffffff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.filter-input :deep(.t-input:hover) {
+  border-color: #1677ff;
+  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.08);
+}
+
+.filter-input :deep(.t-input.t-is-focused) {
+  border-color: #1677ff;
+  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12);
+}
+
+/* 日期范围选择器样式 */
+.date-range-item {
+  min-width: 280px;
+}
+
+.date-range-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.date-range-item .date-range-picker {
+  width: 100%;
+}
+
+.date-range-item :deep(.ant-picker) {
+  border-radius: 10px;
+  border: 1.5px solid #e5e7eb;
+  background: #ffffff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  padding: 6px 12px;
+}
+
+.date-range-item :deep(.ant-picker:hover) {
+  border-color: #1677ff;
+  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.08);
+}
+
+.date-range-item :deep(.ant-picker-focused) {
+  border-color: #1677ff;
+  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12);
+}
+
+.date-range-item :deep(.ant-picker-input > input) {
+  font-size: 13px;
+  color: #374151;
+}
+
+.date-range-item :deep(.ant-picker-suffix) {
+  color: #9ca3af;
+}
+
+/* 禁用日期样式优化 - 使超出90天的日期视觉区分更明显 */
+.date-range-item :deep(.ant-picker-cell-disabled) {
+  color: #d9d9d9 !important;
+  background: #f5f5f5 !important;
+  cursor: not-allowed;
+}
+
+.date-range-item :deep(.ant-picker-cell-disabled .ant-picker-cell-inner) {
+  color: #bfbfbf !important;
+  text-decoration: line-through;
+  background: transparent !important;
+}
+
+/* 日期范围提示文本样式 */
+.date-range-hint-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding-left: 8px;
+  margin-top: 2px;
+}
+
+.date-range-hint-icon {
+  width: 14px;
+  height: 14px;
+  background: #faad14;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: bold;
+  color: #fff;
+  flex-shrink: 0;
+}
+
+.date-range-hint {
+  font-size: 11px;
+  color: #fa8c16;
+  font-weight: 500;
+}
+
+/* 操作按钮区域 */
+.filter-actions {
+  margin-left: auto;
+  display: flex;
+  gap: 12px;
+  align-items: flex-end;
+  padding-top: 19px;
+}
+
+.filter-actions :deep(.t-button) {
+  border-radius: 10px;
+  font-weight: 500;
+  font-size: 13px;
+  padding: 8px 20px;
+  height: 38px;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.filter-actions :deep(.t-button--theme-primary) {
+  background: linear-gradient(135deg, #1677ff 0%, #36cfc9 100%);
+  border: none;
+  box-shadow: 0 4px 14px rgba(22, 119, 255, 0.25);
+}
+
+.filter-actions :deep(.t-button--theme-primary:hover) {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(22, 119, 255, 0.35);
+}
+
+.filter-actions :deep(.t-button--theme-primary:active) {
+  transform: translateY(0);
+}
+
+.filter-actions :deep(.t-button--theme-default) {
+  background: #ffffff;
+  border: 1.5px solid #e5e7eb;
+  color: #6b7280;
+}
+
+.filter-actions :deep(.t-button--theme-default:hover) {
+  border-color: #1677ff;
+  color: #1677ff;
+  background: rgba(22, 119, 255, 0.04);
+}
+
+/* 禁用状态优化 */
+.filter-select :deep(.t-input.t-is-disabled),
+.filter-input :deep(.t-input.t-is-disabled) {
+  background: #f3f4f6;
+  border-color: #e5e7eb;
+  color: #9ca3af;
+}
+
+/* 下拉菜单动画 */
+.filter-select :deep(.t-select__dropdown) {
+  border-radius: 12px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
+  border: 1px solid rgba(229, 231, 235, 0.8);
+}
+
+.filter-select :deep(.t-select-option) {
+  transition: all 0.15s ease;
+}
+
+.filter-select :deep(.t-select-option:hover) {
+  background: rgba(22, 119, 255, 0.06);
+}
+
+.filter-select :deep(.t-select-option.t-is-selected) {
+  background: rgba(22, 119, 255, 0.1);
+  color: #1677ff;
+  font-weight: 500;
+}
+
+/* 表格区域 */
+.table-section {
+  background: #fff;
+  border-radius: 12px;
+  padding: 20px 24px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  position: relative;
+}
+
+/* 表格容器 - 添加滚动提示 */
+.table-section ::v-deep(.ant-table-wrapper) {
+  position: relative;
+}
+
+/* 右侧渐变阴影提示 */
+.table-section ::v-deep(.ant-table-wrapper)::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 40px;
+  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.08));
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  z-index: 10;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+.table-section ::v-deep(.ant-table-wrapper.has-scroll-right)::after {
+  opacity: 1;
+}
+
+/* 表格拖动容器 */
+.table-drag-container {
+  cursor: grab;
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.table-drag-container:active {
+  cursor: grabbing;
+}
+
+.table-drag-container.is-dragging {
+  cursor: grabbing;
+}
+
+.table-drag-container.is-dragging ::v-deep(.ant-table) {
+  opacity: 0.95;
+  transform: scale(0.998);
+  transition: all 0.2s ease;
+}
+
+/* 水平滚动条样式优化 */
+.table-section ::v-deep(.ant-table-body) {
+  overflow-x: auto !important;
+  scrollbar-width: thin;
+  scrollbar-color: #c0c4cc transparent;
+  cursor: grab;
+}
+
+.table-section ::v-deep(.ant-table-body:active) {
+  cursor: grabbing;
+}
+
+.table-section ::v-deep(.ant-table-body::-webkit-scrollbar) {
+  height: 8px;
+}
+
+.table-section ::v-deep(.ant-table-body::-webkit-scrollbar-track) {
+  background: #f5f5f5;
+  border-radius: 4px;
+}
+
+.table-section ::v-deep(.ant-table-body::-webkit-scrollbar-thumb) {
+  background: #c0c4cc;
+  border-radius: 4px;
+  transition: background 0.3s;
+}
+
+.table-section ::v-deep(.ant-table-body::-webkit-scrollbar-thumb:hover) {
+  background: #909399;
+}
+
+/* 滚动指示器 */
+.scroll-indicator {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 32px;
+  height: 32px;
+  background: rgba(22, 119, 255, 0.9);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  cursor: pointer;
+  opacity: 0;
+  transition: all 0.3s ease;
+  z-index: 20;
+  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.3);
+}
+
+.table-section:hover .scroll-indicator {
+  opacity: 1;
+}
+
+.scroll-indicator:hover {
+  background: rgba(22, 119, 255, 1);
+  transform: translateY(-50%) scale(1.1);
+}
+
+/* 表格边缘悬停反馈 */
+.table-section ::v-deep(.ant-table) {
+  position: relative;
+}
+
+.table-section ::v-deep(.ant-table)::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 4px;
+  background: linear-gradient(to right, transparent, rgba(22, 119, 255, 0.1));
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+  z-index: 5;
+}
+
+.table-section:hover ::v-deep(.ant-table)::before {
+  opacity: 1;
+}
+
+/* 固定列阴影 */
+.table-section ::v-deep(.ant-table-cell-fix-right) {
+  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
+}
+
+/* 表头滚动提示 */
+.table-section ::v-deep(.ant-table-header) {
+  position: relative;
+}
+
+.table-section ::v-deep(.ant-table-header)::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 30px;
+  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.05));
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.table-section:hover ::v-deep(.ant-table-header)::after {
+  opacity: 1;
+}
+
+.table-toolbar {
+  display: flex;
+  justify-content: flex-start;
+  gap: 12px;
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.table-toolbar .export-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
+  border: none;
+  border-radius: 6px;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.table-toolbar .export-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
+}
+
+.table-toolbar .export-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* 表格滚动提示 - 居中优化 */
+.table-scroll-hint {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 16px 0;
+  padding: 12px 24px;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #dbeafe 100%);
+  border-radius: 12px;
+  border: 1px solid #7dd3fc;
+  box-shadow: 
+    0 4px 6px -1px rgba(14, 165, 233, 0.1),
+    0 2px 4px -1px rgba(14, 165, 233, 0.06),
+    inset 0 1px 0 rgba(255, 255, 255, 0.6);
+  animation: fadeInHint 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+/* 装饰性背景光效 */
+.table-scroll-hint::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.4),
+    transparent
+  );
+  animation: shimmer 3s infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    left: -100%;
+  }
+  50%, 100% {
+    left: 100%;
+  }
+}
+
+@keyframes fadeInHint {
+  from {
+    opacity: 0;
+    transform: translateY(-10px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.scroll-hint-content {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: #0369a1;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  position: relative;
+  z-index: 1;
+}
+
+.hint-icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
+  border-radius: 50%;
+  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
+}
+
+.hint-icon-wrapper svg {
+  color: white;
+  animation: bounceRight 1.5s ease-in-out infinite;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
+}
+
+@keyframes bounceRight {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(5px);
+  }
+}
+
+.student-name {
+  color: #1677ff;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.student-name:hover {
+  color: #4096ff;
+  text-decoration: underline;
+}
+
+/* 打卡率单元格样式 */
+.checkin-rate-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 100px;
+}
+
+.checkin-rate-cell :deep(.t-progress__inner) {
+  border-radius: 4px;
+}
+
+.checkin-rate-cell :deep(.t-progress__bar) {
+  border-radius: 4px;
+  background: #f0f0f0;
+}
+
+.rate-text {
+  font-weight: 600;
+  font-size: 13px;
+  color: #333;
+  min-width: 36px;
+  text-align: right;
+}
+
+/* 数字单元格样式 */
+.number-cell {
+  font-weight: 500;
+  color: #333;
+  font-variant-numeric: tabular-nums;
+}
+
+.number-cell.highlight {
+  color: #1677ff;
+  font-weight: 600;
+}
+
+/* 层次标签样式优化 */
+:deep(.t-tag) {
+  font-weight: 500;
+  font-size: 12px;
+}
+
+/* 表格行悬停效果 */
+:deep(.ant-table-tbody > tr:hover > td) {
+  background: #f0f7ff !important;
+}
+
+/* 表格表头样式优化 */
+:deep(.ant-table-thead > tr > th) {
+  background: #fafafa;
+  font-weight: 600;
+  color: #333;
+  border-bottom: 2px solid #e8e8e8;
+}
+
+/* 隐藏排序提示文本 */
+:deep(.ant-table-column-sorter-tooltip),
+:deep(.ant-table-column-sorter-tooltip-content) {
+  display: none !important;
+  visibility: hidden !important;
+  opacity: 0 !important;
+}
+
+/* 固定列样式 */
+:deep(.ant-table-cell-fix-left) {
+  background: #fff;
+}
+
+:deep(.ant-table-tbody > tr:hover .ant-table-cell-fix-left) {
+  background: #f0f7ff !important;
+}
+
+/* 响应式 - 筛选区域 */
+@media (max-width: 1400px) {
+  .filter-section {
+    padding: 20px 24px;
+  }
+  
+  .filter-row {
+    gap: 16px;
+  }
+  
+  .filter-select,
+  .filter-input {
+    width: 140px;
+  }
+  
+  .date-range-item {
+    min-width: 260px;
+  }
+}
+
+@media (max-width: 1200px) {
+  .filter-section {
+    padding: 18px 20px;
+  }
+  
+  .filter-row {
+    gap: 14px;
+  }
+  
+  .filter-row + .filter-row {
+    margin-top: 16px;
+    padding-top: 16px;
+  }
+  
+  .filter-item {
+    min-width: 130px;
+  }
+  
+  .filter-select,
+  .filter-input {
+    width: 130px;
+  }
+  
+  .date-range-item {
+    min-width: 240px;
+  }
+  
+  .filter-actions {
+    padding-top: 17px;
+  }
+  
+  .filter-actions :deep(.t-button) {
+    padding: 7px 16px;
+    height: 36px;
+  }
+}
+
+@media (max-width: 992px) {
+  .filter-section {
+    padding: 16px;
+    border-radius: 12px;
+  }
+  
+  .filter-section::before {
+    border-radius: 12px 12px 0 0;
+  }
+  
+  .filter-row {
+    gap: 12px;
+  }
+  
+  .filter-item {
+    min-width: calc(50% - 6px);
+    flex: 1;
+  }
+  
+  .filter-select,
+  .filter-input {
+    width: 100%;
+  }
+  
+  .date-range-item {
+    min-width: 100%;
+    flex-basis: 100%;
+  }
+  
+  .filter-actions {
+    width: 100%;
+    margin-left: 0;
+    padding-top: 8px;
+    justify-content: flex-end;
+  }
+}
+
+@media (max-width: 768px) {
+  .page-content {
+    padding: 16px;
+  }
+  
+  .page-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
+  
+  .filter-section {
+    padding: 16px 14px;
+    margin-bottom: 16px;
+  }
+  
+  .filter-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+  
+  .filter-row + .filter-row {
+    margin-top: 12px;
+    padding-top: 12px;
+  }
+  
+  .filter-item {
+    width: 100%;
+    min-width: 100%;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+  }
+  
+  .filter-label {
+    min-width: 70px;
+    font-size: 12px;
+  }
+  
+  .filter-select,
+  .filter-input {
+    width: 100%;
+    flex: 1;
+  }
+  
+  .date-range-item {
+    min-width: 100%;
+    flex-direction: row;
+    align-items: center;
+  }
+  
+  .date-range-item .date-range-picker {
+    flex: 1;
+  }
+  
+  .filter-actions {
+    margin-left: 0;
+    padding-top: 8px;
+    justify-content: center;
+    gap: 16px;
+  }
+  
+  .filter-actions :deep(.t-button) {
+    flex: 1;
+    max-width: 140px;
+  }
+}
+
+@media (max-width: 480px) {
+  .filter-section {
+    padding: 14px 12px;
+    border-radius: 10px;
+  }
+  
+  .filter-section::before {
+    border-radius: 10px 10px 0 0;
+    height: 2px;
+  }
+  
+  .filter-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+  
+  .filter-label {
+    min-width: auto;
+  }
+  
+  .filter-actions {
+    flex-direction: column;
+    gap: 10px;
+  }
+  
+  .filter-actions :deep(.t-button) {
+    max-width: 100%;
+    width: 100%;
+  }
+}
+
+/* 编辑列按钮样式 */
+.edit-column-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  background: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  color: #595959;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.edit-column-btn:hover {
+  border-color: #40a9ff;
+  color: #40a9ff;
+}
+
+.edit-column-btn svg {
+  flex-shrink: 0;
+}
+
+/* 编辑列模态框样式 */
+.column-editor-content {
+  padding: 8px 0;
+}
+
+.column-editor-tip {
+  font-size: 14px;
+  color: #333;
+  margin-bottom: 16px;
+  font-weight: 500;
+}
+
+.column-editor-warning {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  margin-bottom: 16px;
+  background: #fff2f0;
+  border: 1px solid #ffccc7;
+  border-radius: 6px;
+  color: #cf1322;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.column-editor-warning .t-icon {
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.column-list-wrapper {
+  max-height: 400px;
+  overflow-y: auto;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: #f8fafc;
+  padding: 8px;
+}
+
+.column-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  margin-bottom: 4px;
+  background: white;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+  cursor: grab;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  user-select: none;
+}
+
+.column-item:last-child {
+  margin-bottom: 0;
+}
+
+.column-item:hover {
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  border-color: #94a3b8;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  transform: translateY(-1px);
+}
+
+.column-item:active {
+  cursor: grabbing;
+}
+
+.drag-handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: #94a3b8;
+  flex-shrink: 0;
+  transition: color 0.2s ease;
+}
+
+.column-item:hover .drag-handle {
+  color: #64748b;
+}
+
+.column-label {
+  flex: 1;
+  font-size: 14px;
+  color: #334155;
+}
+
+.column-editor-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid #e2e8f0;
+}
+
+.draggable-ghost {
+  opacity: 0.4;
+  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
+  border: 2px dashed #3b82f6 !important;
+  border-radius: 8px !important;
+}
+
+.draggable-chosen {
+  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
+  border-color: #3b82f6 !important;
+  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.25);
+  transform: scale(1.02) !important;
+}
+
+.draggable-drag {
+  opacity: 0.9;
+  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
+  border-color: #60a5fa !important;
+  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3) !important;
+  cursor: grabbing !important;
+}
+
+/* 编辑列模态框响应式样式 */
+@media (max-width: 768px) {
+  .column-list-wrapper {
+    max-height: 300px;
+  }
+  .column-item {
+    padding: 8px 10px;
+  }
+}
+
+/* ===== 导出模态框样式 ===== */
+.export-modal-content {
+  padding: 4px 0 8px;
+}
+
+/* 提示横幅 */
+.export-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  background: #f0f7ff;
+  border: 1px solid #d0e8ff;
+  border-radius: 6px;
+  margin-bottom: 20px;
+  font-size: 13px;
+  color: #4a7fc1;
+  line-height: 1.5;
+}
+
+.export-banner svg {
+  flex-shrink: 0;
+  color: #4a7fc1;
+}
+
+/* 分组容器 */
+.export-group {
+  margin-bottom: 4px;
+}
+
+.export-group-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 12px;
+}
+
+.export-group-dot {
+  display: inline-block;
+  width: 3px;
+  height: 14px;
+  background: #0052d9;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+/* 字段网格 */
+.export-fields-grid {
+  display: grid;
+  gap: 12px 16px;
+}
+
+.export-fields-grid--3col {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.export-fields-grid--2col {
+  grid-template-columns: repeat(2, 1fr);
+  margin-bottom: 12px;
+}
+
+/* 单个字段 */
+.export-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.export-field--full {
+  grid-column: 1 / -1;
+}
+
+.export-field-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: #666;
+  line-height: 1;
+}
+
+/* 时间范围行 */
+.export-date-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.export-date-hint {
+  font-size: 12px;
+  color: #aaa;
+  white-space: nowrap;
+}
+
+/* 分割线 */
+.export-divider {
+  height: 1px;
+  background: #f0f0f0;
+  margin: 16px 0;
+}
+
+/* 导出模态框响应式样式 */
+@media (max-width: 768px) {
+  .export-fields-grid--3col {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .export-fields-grid--2col {
+    grid-template-columns: 1fr;
+  }
+
+  .date-picker-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+}
+
+@media (max-width: 480px) {
+  .export-filters {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/src/components/OnlineLearningMonitorPage.vue b/src/components/OnlineLearningMonitorPage.vue
new file mode 100644
index 0000000..b9c1275
--- /dev/null
+++ b/src/components/OnlineLearningMonitorPage.vue
@@ -0,0 +1,3905 @@
+<template>
+  <div class="monitor-layout">
+    <!-- 顶部导航栏 (复用 PortalHomePage 风格) -->
+    <header class="portal-header">
+      <div class="header-left">
+        <div class="logo-box">
+          <img src="../Assets/logo.png" alt="优学" class="logo-img" />
+        </div>
+      </div>
+      <div class="header-right">
+        <div 
+          class="user-info-wrap" 
+          @mouseenter="showDropdown = true"
+          @mouseleave="showDropdown = false"
+        >
+          <div class="user-avatar">
+            <span class="avatar-text">杨</span>
+          </div>
+          <span class="user-name">杨某某</span>
+          <span class="dropdown-arrow" :class="{ 'arrow-rotate': showDropdown }">
+            <svg width="10" height="6" viewBox="0 0 10 6" fill="none">
+              <path d="M1 1L5 5L9 1" stroke="#999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </span>
+          
+          <!-- 下拉菜单 -->
+          <Transition name="dropdown">
+            <div class="user-dropdown-menu" v-show="showDropdown">
+              <div class="dropdown-item" @click.stop="handleLogout">
+                <svg class="logout-icon" width="16" height="16" viewBox="0 0 24 24" fill="none">
+                  <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                  <polyline points="16,17 21,12 16,7" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                  <line x1="21" y1="12" x2="9" y2="12" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                <span>退出登录</span>
+              </div>
+            </div>
+          </Transition>
+        </div>
+      </div>
+    </header>
+
+    <div class="monitor-page-content">
+      <!-- 页面标题区域 -->
+      <div class="page-header">
+        <div class="content-wrapper">
+          <div class="header-content">
+            <!-- 返回按钮 -->
+            <button class="back-btn" @click="goBack" title="返回上一级" type="button">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                <path d="M19 12H5M5 12L12 19M5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              <span class="back-text">返回</span>
+            </button>
+            <div class="title-group">
+              <div class="title-icon">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                  <rect x="2" y="3" width="20" height="14" rx="2" stroke="currentColor" stroke-width="2"/>
+                  <path d="M8 21h8M12 17v4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                  <circle cx="12" cy="10" r="2" stroke="currentColor" stroke-width="2"/>
+                  <path d="M9 7.5a4.5 4.5 0 0 1 6 0" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                  <path d="M7 5.5a7 7 0 0 1 10 0" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                </svg>
+              </div>
+              <div class="title-text">
+                <h1 class="page-title">在线学习监控</h1>
+                <p class="page-subtitle">实时监控班级在线学习情况</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 顶部筛选区 -->
+      <div class="monitor-header">
+      <div class="filter-bar">
+        <t-space align="center" :size="16">
+          <span class="filter-label">云校:</span>
+          <t-select v-model="filters.cloudSchool" :options="cloudSchoolOptions" placeholder="请选择云校" class="filter-select" filterable @change="handleCloudSchoolChange" />
+          
+          <span class="filter-label">学校:</span>
+          <t-select v-model="filters.school" :options="schoolOptions" placeholder="请选择学校" :disabled="!filters.cloudSchool" class="filter-select" filterable @change="handleSchoolChange" />
+          
+          <span class="filter-label">年级:</span>
+          <t-select v-model="filters.grade" :options="gradeOptions" placeholder="请选择年级" :disabled="!filters.school" class="filter-select" filterable @change="handleGradeChange" />
+          
+          <span class="filter-label">班级:</span>
+          <t-select v-model="filters.class" :options="classOptions" placeholder="请选择班级" :disabled="!filters.grade" class="filter-select" filterable />
+        </t-space>
+      </div>
+      
+    </div>
+
+    <div class="monitor-content">
+      <!-- 左侧课表区 -->
+      <div class="monitor-sidebar">
+        <!-- 日期控制区 -->
+        <div class="sidebar-date-control">
+          <t-button variant="text" shape="square" @click="goPrevDay">
+            <template #icon>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M15 18l-6-6 6-6"/>
+              </svg>
+            </template>
+          </t-button>
+          
+          <div class="date-picker-wrapper">
+            <t-date-picker 
+              v-model="filters.date" 
+              :disable-date="disableFutureDates"
+              :clearable="false"
+              format="YYYY年MM月DD日"
+              class="sidebar-date-picker"
+            />
+          </div>
+          
+          <t-button 
+            variant="text" 
+            shape="square" 
+            @click="goNextDay"
+            :disabled="isToday(filters.date)"
+          >
+            <template #icon>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M9 18l6-6-6-6"/>
+              </svg>
+            </template>
+          </t-button>
+        </div>
+
+        <div class="sidebar-title">
+          <h3>当日课表</h3>
+          <span v-if="filters.class" class="course-count">共 {{ courseList.length }} 节</span>
+        </div>
+        
+        <!-- 未选择班级时显示提示 -->
+        <div v-if="!filters.class" class="course-list-empty">
+          <div class="empty-icon">
+            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#d9d9d9" stroke-width="1.5">
+              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
+              <line x1="16" y1="2" x2="16" y2="6"/>
+              <line x1="8" y1="2" x2="8" y2="6"/>
+              <line x1="3" y1="10" x2="21" y2="10"/>
+            </svg>
+          </div>
+          <p class="empty-text">请先选择班级</p>
+          <p class="empty-desc">选择班级后可查看当日课程安排</p>
+        </div>
+        
+        <!-- 已选择班级时显示课程列表 -->
+        <div v-else class="course-list">
+          <div
+            v-for="(course, index) in courseList"
+            :key="index"
+            class="course-item"
+            :class="{ 'is-active': currentCourseIndex === index }"
+            @click="handleCourseSelect(index)"
+          >
+            <div class="course-time">
+              {{ course.startTime }} - {{ course.endTime }}
+            </div>
+            <div class="course-info">
+              <div class="course-main">
+                <span class="course-subject">{{ course.subject }}</span>
+                <t-tag :theme="getCourseTagTheme(course.tag)" variant="light" size="small">{{ course.tag }}</t-tag>
+              </div>
+              <div class="course-status" :class="getCourseStatusClass(course.status)">
+                <span class="status-dot"></span>
+                {{ course.status }}
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 今日数据汇总按钮 -->
+        <div v-if="filters.class" class="summary-button-wrapper">
+          <button class="summary-button" @click="openSummaryModal">
+            <svg class="summary-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="3" y="3" width="18" height="18" rx="2"/>
+              <path d="M8 12h8M12 8v8"/>
+            </svg>
+            <span>今日数据汇总</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- 右侧主区域 -->
+      <div class="monitor-main">
+        <!-- 未选择班级时显示缺省页 -->
+        <div class="main-placeholder" v-if="!filters.class">
+          <div class="placeholder-content">
+            <div class="placeholder-icon">
+              <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#d9d9d9" stroke-width="1.5">
+                <rect x="2" y="3" width="20" height="14" rx="2" stroke="#d9d9d9"/>
+                <path d="M8 21h8M12 17v4" stroke="#d9d9d9"/>
+                <circle cx="12" cy="10" r="2" stroke="#d9d9d9"/>
+                <path d="M9 7.5a4.5 4.5 0 0 1 6 0" stroke="#d9d9d9"/>
+                <path d="M7 5.5a7 7 0 0 1 10 0" stroke="#d9d9d9"/>
+              </svg>
+            </div>
+            <h3 class="placeholder-title">请选择班级</h3>
+            <p class="placeholder-desc">选择班级后可查看课程学习监控数据</p>
+          </div>
+        </div>
+        <div class="main-placeholder" v-else-if="courseList.length === 0">
+          <t-empty description="暂无课程数据" />
+        </div>
+        <div class="main-placeholder" v-else-if="currentCourseIndex === -1">
+          <div class="placeholder-content">
+            <div class="placeholder-icon">
+              <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#d9d9d9" stroke-width="1.5">
+                <rect x="2" y="3" width="20" height="14" rx="2" stroke="#d9d9d9"/>
+                <path d="M8 21h8M12 17v4" stroke="#d9d9d9"/>
+                <circle cx="12" cy="10" r="2" stroke="#d9d9d9"/>
+                <path d="M9 7.5a4.5 4.5 0 0 1 6 0" stroke="#d9d9d9"/>
+                <path d="M7 5.5a7 7 0 0 1 10 0" stroke="#d9d9d9"/>
+              </svg>
+            </div>
+            <h3 class="placeholder-title">请选择课程</h3>
+            <p class="placeholder-desc">点击左侧课程列表查看班级学习监控数据</p>
+          </div>
+        </div>
+        <div class="main-content" v-else>
+          <div class="content-header">
+            <h2>{{ courseList[currentCourseIndex]?.subject }} - {{ courseList[currentCourseIndex]?.tag }}</h2>
+            <div class="content-header-actions">
+              <button v-if="isCourseEnded" class="featured-notes-btn" @click="openFeaturedNotesModal">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+                  <polyline points="14 2 14 8 20 8"/>
+                  <line x1="16" y1="13" x2="8" y2="13"/>
+                  <line x1="16" y1="17" x2="8" y2="17"/>
+                  <polyline points="10 9 9 9 8 9"/>
+                </svg>
+                <span>精选笔记列表</span>
+              </button>
+              <div class="content-status">
+                课程状态：<span :class="getCourseStatusClass(courseList[currentCourseIndex]?.status)">{{ courseList[currentCourseIndex]?.status }}</span>
+              </div>
+            </div>
+          </div>
+          <!-- 数据更新提示 -->
+          <div v-if="isCourseEnded" class="data-update-notice">
+            <div class="notice-content">
+              <svg class="notice-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="12" r="10"/>
+                <path d="M12 6v6l4 2"/>
+              </svg>
+              <span class="notice-text">数据每30分钟更新一次</span>
+              <span class="notice-divider">|</span>
+              <span class="notice-time">最后更新：{{ lastUpdateTime }}</span>
+            </div>
+          </div>
+          <div class="content-body">
+            <!-- 课程未结束时的提示 -->
+            <div v-if="!isCourseEnded" class="course-not-ready">
+              <div class="not-ready-icon">
+                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#1677ff" stroke-width="1.5">
+                  <circle cx="12" cy="12" r="10"/>
+                  <path d="M12 6v6l4 2"/>
+                </svg>
+              </div>
+              <h3 class="not-ready-title">课程数据暂未生成</h3>
+              <p class="not-ready-desc">当前课程状态为"{{ courseList[currentCourseIndex]?.status }}"，课程结束20分钟后可查看详细学习数据</p>
+            </div>
+            <!-- 课程结束后的表格数据 -->
+            <template v-else>
+              <!-- 筛选控件区域 -->
+              <div class="table-filters">
+                <a-space :size="16">
+                  <a-select
+                    v-model:value="tableFilters.isCheckIn"
+                    placeholder="是否打卡"
+                    style="width: 120px"
+                    allowClear
+                    @change="handleTableFilterChange"
+                  >
+                    <a-select-option value="yes">已打卡</a-select-option>
+                    <a-select-option value="no">未打卡</a-select-option>
+                  </a-select>
+                  <a-select
+                    v-model:value="tableFilters.isOnline"
+                    placeholder="是否上线"
+                    style="width: 120px"
+                    allowClear
+                    @change="handleTableFilterChange"
+                  >
+                    <a-select-option value="yes">已上线</a-select-option>
+                    <a-select-option value="no">未上线</a-select-option>
+                  </a-select>
+                  <a-select
+                    v-model:value="tableFilters.hasStudyNoSubmit"
+                    placeholder="是否有学无交"
+                    style="width: 140px"
+                    allowClear
+                    @change="handleTableFilterChange"
+                  >
+                    <a-select-option value="yes">是</a-select-option>
+                    <a-select-option value="no">否</a-select-option>
+                  </a-select>
+                  <a-input-search
+                    v-model:value="tableFilters.name"
+                    placeholder="请输入姓名搜索"
+                    style="width: 200px"
+                    @search="handleTableFilterChange"
+                    @pressEnter="handleTableFilterChange"
+                  />
+                </a-space>
+              </div>
+              <!-- 学生数据表格 -->
+              <a-table
+                :columns="studentColumns"
+                :data-source="filteredStudentData"
+                :pagination="{ pageSize: 10 }"
+                :scroll="{ x: 1200 }"
+                size="middle"
+                row-key="id"
+                class="student-table"
+                :custom-row="customRow"
+              >
+                <template #bodyCell="{ column, record }">
+                  <template v-if="column.key === 'name' && record.isOnline === '是'">
+                    <span class="clickable-name" @click.stop="openStudentDetailModal(record)">
+                      <span class="name-text">{{ record.name }}</span>
+                      <svg class="detail-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M9 18l6-6-6-6"/>
+                      </svg>
+                    </span>
+                  </template>
+                  <template v-else-if="column.key === 'name'">
+                    <span class="name-text">{{ record.name }}</span>
+                  </template>
+                  <template v-else-if="column.key === 'comprehensiveLevel'">
+                    <t-tag :theme="getLevelTheme(record.comprehensiveLevel)" variant="light" size="small">
+                      {{ record.comprehensiveLevel }}
+                    </t-tag>
+                  </template>
+                  <template v-else-if="column.key === 'subjectLevel'">
+                    <t-tag :theme="getLevelTheme(record.subjectLevel)" variant="light" size="small">
+                      {{ record.subjectLevel }}
+                    </t-tag>
+                  </template>
+                  <template v-else-if="column.key === 'isCheckIn'">
+                    <t-tag :theme="record.isCheckIn === '是' ? 'success' : 'danger'" variant="light" size="small">
+                      {{ record.isCheckIn === '是' ? '已打卡' : '未打卡' }}
+                    </t-tag>
+                  </template>
+                  <template v-else-if="column.key === 'isOnline'">
+                    <t-tag :theme="record.isOnline === '是' ? 'success' : 'default'" variant="light" size="small">
+                      {{ record.isOnline === '是' ? '已上线' : '未上线' }}
+                    </t-tag>
+                  </template>
+                  <template v-else-if="column.key === 'hasStudyNoSubmit'">
+                    <t-tag :theme="record.hasStudyNoSubmit === '是' ? 'warning' : 'default'" variant="light" size="small">
+                      {{ record.hasStudyNoSubmit === '是' ? '是' : '否' }}
+                    </t-tag>
+                  </template>
+                  <template v-else-if="column.key === 'objectiveCorrectRate' && record.objectiveCorrectRate !== '-'">
+                    <div class="rate-cell">
+                      <t-progress 
+                        :percentage="parseFloat(record.objectiveCorrectRate)" 
+                        :color="getCorrectRateColor(record.objectiveCorrectRate)"
+                        size="small"
+                        theme="line"
+                        :label="false"
+                      />
+                      <span class="rate-value">{{ record.objectiveCorrectRate }}</span>
+                    </div>
+                  </template>
+                  <template v-else-if="column.key === 'subjectiveCorrectRate' && record.subjectiveCorrectRate !== '-'">
+                    <div class="rate-cell">
+                      <t-progress 
+                        :percentage="parseFloat(record.subjectiveCorrectRate)" 
+                        :color="getCorrectRateColor(record.subjectiveCorrectRate)"
+                        size="small"
+                        theme="line"
+                        :label="false"
+                      />
+                      <span class="rate-value">{{ record.subjectiveCorrectRate }}</span>
+                    </div>
+                  </template>
+                  <template v-else-if="column.key === 'overallCorrectRate' && record.overallCorrectRate !== '-'">
+                    <div class="rate-cell">
+                      <t-progress 
+                        :percentage="parseFloat(record.overallCorrectRate)" 
+                        :color="getCorrectRateColor(record.overallCorrectRate)"
+                        size="small"
+                        theme="line"
+                        :label="false"
+                      />
+                      <span class="rate-value">{{ record.overallCorrectRate }}</span>
+                    </div>
+                  </template>
+                </template>
+              </a-table>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+    </div>
+
+    <!-- 数据汇总模态框 -->
+    <div v-if="showSummaryModal" class="modal-overlay" @click.self="closeSummaryModal">
+      <div class="modal-container">
+        <div class="modal-header">
+          <div class="modal-title-wrapper">
+            <h3 class="modal-title">今日数据汇总</h3>
+            <div class="modal-update-notice">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="12" r="10"/>
+                <path d="M12 6v6l4 2"/>
+              </svg>
+              <span>数据每30分钟更新一次</span>
+              <span class="update-time">| 最后更新：{{ lastUpdateTime }}</span>
+            </div>
+          </div>
+          <button class="modal-close" @click="closeSummaryModal">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M18 6L6 18M6 6l12 12"/>
+            </svg>
+          </button>
+        </div>
+        <div class="modal-body">
+          <a-tabs v-model:activeKey="activeTab" class="summary-tabs">
+            <a-tab-pane key="checkin">
+              <template #tab>
+                <a-tooltip title="今日打卡一节课以上的人数">
+                  <span class="tab-label">打卡人数</span>
+                  <svg class="tab-tip-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="10"/>
+                    <path d="M12 16v-4M12 8h.01"/>
+                  </svg>
+                </a-tooltip>
+              </template>
+              <div class="tab-content">
+                <div class="stat-header">
+                  <div class="stat-info">今日打卡人数：<strong>{{ checkInStudents.length }}</strong> 人</div>
+                  <button class="tab-export-button" @click="exportData">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                      <polyline points="7 10 12 15 17 10"/>
+                      <line x1="12" y1="15" x2="12" y2="3"/>
+                    </svg>
+                    <span>导出</span>
+                  </button>
+                </div>
+                <a-table
+                  :columns="summaryColumns"
+                  :data-source="checkInStudents"
+                  :pagination="{ pageSize: 8 }"
+                  size="small"
+                  row-key="id"
+                  class="summary-table"
+                />
+              </div>
+            </a-tab-pane>
+            <a-tab-pane key="online">
+              <template #tab>
+                <a-tooltip title="今日参与过课程的人数">
+                  <span class="tab-label">上线人数</span>
+                  <svg class="tab-tip-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="10"/>
+                    <path d="M12 16v-4M12 8h.01"/>
+                  </svg>
+                </a-tooltip>
+              </template>
+              <div class="tab-content">
+                <div class="stat-header">
+                  <div class="stat-info">今日上线人数：<strong>{{ onlineStudents.length }}</strong> 人</div>
+                  <button class="tab-export-button" @click="exportData">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                      <polyline points="7 10 12 15 17 10"/>
+                      <line x1="12" y1="15" x2="12" y2="3"/>
+                    </svg>
+                    <span>导出</span>
+                  </button>
+                </div>
+                <a-table
+                  :columns="summaryColumns"
+                  :data-source="onlineStudents"
+                  :pagination="{ pageSize: 8 }"
+                  size="small"
+                  row-key="id"
+                  class="summary-table"
+                />
+              </div>
+            </a-tab-pane>
+            <a-tab-pane key="noSubmit">
+              <template #tab>
+                <a-tooltip title="今日仅参与学习无提交作业的人数">
+                  <span class="tab-label">仅学无交人数</span>
+                  <svg class="tab-tip-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="10"/>
+                    <path d="M12 16v-4M12 8h.01"/>
+                  </svg>
+                </a-tooltip>
+              </template>
+              <div class="tab-content">
+                <div class="stat-header">
+                  <div class="stat-info">仅学无交人数：<strong>{{ noSubmitStudents.length }}</strong> 人</div>
+                  <button class="tab-export-button" @click="exportData">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                      <polyline points="7 10 12 15 17 10"/>
+                      <line x1="12" y1="15" x2="12" y2="3"/>
+                    </svg>
+                    <span>导出</span>
+                  </button>
+                </div>
+                <a-table
+                  :columns="summaryColumns"
+                  :data-source="noSubmitStudents"
+                  :pagination="{ pageSize: 8 }"
+                  size="small"
+                  row-key="id"
+                  class="summary-table"
+                />
+              </div>
+            </a-tab-pane>
+            <a-tab-pane key="allCheckin">
+              <template #tab>
+                <a-tooltip title="今日完成所有课程打卡的人数">
+                  <span class="tab-label">完成所有课程打卡人数</span>
+                  <svg class="tab-tip-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="10"/>
+                    <path d="M12 16v-4M12 8h.01"/>
+                  </svg>
+                </a-tooltip>
+              </template>
+              <div class="tab-content">
+                <div class="stat-header">
+                  <div class="stat-info">完成所有课程打卡人数：<strong>{{ allCheckInStudents.length }}</strong> 人</div>
+                  <button class="tab-export-button" @click="exportData">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                      <polyline points="7 10 12 15 17 10"/>
+                      <line x1="12" y1="15" x2="12" y2="3"/>
+                    </svg>
+                    <span>导出</span>
+                  </button>
+                </div>
+                <a-table
+                  :columns="summaryColumns"
+                  :data-source="allCheckInStudents"
+                  :pagination="{ pageSize: 8 }"
+                  size="small"
+                  row-key="id"
+                  class="summary-table"
+                />
+              </div>
+            </a-tab-pane>
+          </a-tabs>
+        </div>
+      </div>
+    </div>
+
+    <!-- 精选笔记列表模态框 -->
+    <div v-if="showFeaturedNotesModal" class="modal-overlay featured-notes-modal" @click.self="closeFeaturedNotesModal">
+      <div class="modal-container">
+        <div class="modal-header">
+          <div class="modal-title-wrapper">
+            <h3 class="modal-title">精选笔记列表</h3>
+            <div class="modal-update-notice">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="12" r="10"/>
+                <path d="M12 6v6l4 2"/>
+              </svg>
+              <span>数据每30分钟更新一次</span>
+              <span class="update-time">| 最后更新：{{ lastUpdateTime }}</span>
+            </div>
+          </div>
+          <button class="modal-close" @click="closeFeaturedNotesModal">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M18 6L6 18M6 6l12 12"/>
+            </svg>
+          </button>
+        </div>
+        <div class="modal-body">
+          <!-- 加载状态 -->
+          <div v-if="featuredNotesLoading" class="loading-state">
+            <div class="loading-spinner">
+              <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="12" r="10" stroke-dasharray="60" stroke-dashoffset="10" class="spinner-circle"/>
+              </svg>
+            </div>
+            <p class="loading-text">正在加载精选笔记...</p>
+          </div>
+          
+          <!-- 空状态 -->
+          <div v-else-if="featuredNotes.length === 0" class="empty-state">
+            <div class="empty-icon">
+              <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#d9d9d9" stroke-width="1.5">
+                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+                <polyline points="14 2 14 8 20 8"/>
+                <line x1="16" y1="13" x2="8" y2="13"/>
+                <line x1="16" y1="17" x2="8" y2="17"/>
+                <polyline points="10 9 9 9 8 9"/>
+              </svg>
+            </div>
+            <h4 class="empty-title">暂无精选笔记</h4>
+            <p class="empty-desc">当前班级暂未有精选笔记数据</p>
+          </div>
+          
+          <!-- 笔记列表 -->
+          <div v-else class="featured-notes-container">
+            <!-- 筛选和统计区域 -->
+            <div class="featured-notes-toolbar">
+              <div class="featured-notes-stats">
+                <span class="stats-label">精选笔记总数：</span>
+                <span class="stats-value">{{ featuredNotes.length }}</span>
+                <span class="stats-unit">人</span>
+                <span v-if="featuredNotesFilter.name" class="stats-filtered">
+                  (筛选后 {{ filteredFeaturedNotes.length }} 人)
+                </span>
+              </div>
+              <div class="featured-notes-filter">
+                <a-input-search
+                  v-model:value="featuredNotesFilter.name"
+                  placeholder="请输入姓名搜索"
+                  style="width: 200px"
+                  allowClear
+                  @search="handleFeaturedNotesFilterChange"
+                  @pressEnter="handleFeaturedNotesFilterChange"
+                />
+              </div>
+            </div>
+            
+            <!-- 筛选后无数据提示 -->
+            <div v-if="filteredFeaturedNotes.length === 0" class="empty-state filter-empty">
+              <div class="empty-icon">
+                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#d9d9d9" stroke-width="1.5">
+                  <circle cx="11" cy="11" r="8"/>
+                  <path d="m21 21-4.35-4.35"/>
+                </svg>
+              </div>
+              <h4 class="empty-title">未找到匹配结果</h4>
+              <p class="empty-desc">没有找到姓名为 "{{ featuredNotesFilter.name }}" 的笔记</p>
+            </div>
+            
+            <!-- 笔记列表 -->
+            <div v-else class="featured-notes-list">
+              <div
+                v-for="note in paginatedFeaturedNotes"
+                :key="note.id"
+                class="featured-note-card note-excellent"
+              >
+              <!-- 评优标签 -->
+              <div class="excellent-badge">
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
+                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
+                </svg>
+                <span>优秀</span>
+              </div>
+              
+              <div class="note-header">
+                <div class="note-avatar">
+                  <img :src="note.avatar" :alt="note.studentName" />
+                </div>
+                <div class="note-info">
+                  <div class="note-name">{{ note.studentName }}</div>
+                  <div class="note-meta">
+                    <span class="note-time">{{ note.submitTime }}</span>
+                  </div>
+                </div>
+              </div>
+              
+              <div v-if="note.content" class="note-content-text">{{ note.content }}</div>
+              
+              <!-- 图片展示 -->
+              <div v-if="note.images && note.images.length > 0" class="note-images-grid grid-9">
+                <div
+                  v-for="(img, index) in note.images.slice(0, 9)"
+                  :key="index"
+                  class="note-image-wrapper"
+                  @click="previewImage(img, note.images, index)"
+                >
+                  <img :src="img" class="note-image" loading="lazy" />
+                  <div v-if="index === 8 && note.images.length > 9" class="more-images-overlay">
+                    <span>+{{ note.images.length - 9 }}</span>
+                  </div>
+                </div>
+              </div>
+              
+              <div class="note-footer">
+                <div class="note-course">{{ currentCourseName }}</div>
+                <div class="note-stats">
+                  <span class="stat-item">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
+                    </svg>
+                    {{ note.likeCount || 0 }}
+                  </span>
+                  <span class="stat-item">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                      <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
+                    </svg>
+                    {{ note.commentCount || 0 }}
+                  </span>
+                </div>
+              </div>
+            </div>
+            </div>
+            
+            <!-- 分页控件 -->
+            <div v-if="filteredFeaturedNotes.length > 0" class="featured-notes-pagination">
+              <div class="pagination-info">
+                共 {{ filteredFeaturedNotes.length }} 条记录，第 {{ featuredNotesPagination.current }} / {{ featuredNotesTotalPages }} 页
+              </div>
+              <div class="pagination-controls">
+                <button
+                  class="pagination-btn"
+                  :disabled="featuredNotesPagination.current === 1"
+                  @click="goToFeaturedNotesPage(featuredNotesPagination.current - 1)"
+                >
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="15 18 9 12 15 6"/>
+                  </svg>
+                </button>
+                
+                <div class="pagination-pages">
+                  <button
+                    v-for="page in featuredNotesVisiblePages"
+                    :key="page"
+                    class="pagination-page-btn"
+                    :class="{ 'is-active': page === featuredNotesPagination.current }"
+                    @click="goToFeaturedNotesPage(page)"
+                  >
+                    {{ page }}
+                  </button>
+                </div>
+                
+                <button
+                  class="pagination-btn"
+                  :disabled="featuredNotesPagination.current === featuredNotesTotalPages"
+                  @click="goToFeaturedNotesPage(featuredNotesPagination.current + 1)"
+                >
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="9 18 15 12 9 6"/>
+                  </svg>
+                </button>
+              </div>
+              <div class="pagination-size">
+                <span>每页显示：</span>
+                <a-select
+                  v-model:value="featuredNotesPagination.pageSize"
+                  style="width: 80px"
+                  @change="handleFeaturedNotesPageSizeChange"
+                >
+                  <a-select-option :value="5">5条</a-select-option>
+                  <a-select-option :value="10">10条</a-select-option>
+                  <a-select-option :value="20">20条</a-select-option>
+                  <a-select-option :value="50">50条</a-select-option>
+                </a-select>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 图片预览模态框 -->
+    <div v-if="showImagePreview" class="image-preview-overlay" @click.self="closeImagePreview">
+      <div class="image-preview-container">
+        <!-- 关闭按钮 -->
+        <button class="preview-close-btn" @click="closeImagePreview">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M18 6L6 18M6 6l12 12"/>
+          </svg>
+        </button>
+        
+        <!-- 图片计数器 -->
+        <div class="preview-counter">{{ currentImageIndex + 1 }} / {{ currentImageList.length }}</div>
+        
+        <!-- 上一张按钮 -->
+        <button 
+          v-if="currentImageIndex > 0" 
+          class="preview-nav-btn preview-prev-btn" 
+          @click="prevImage"
+        >
+          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="15 18 9 12 15 6"/>
+          </svg>
+        </button>
+        
+        <!-- 图片展示区域 -->
+        <div class="preview-image-wrapper">
+          <img 
+            :src="currentImageList[currentImageIndex]" 
+            class="preview-image" 
+            @click.stop
+          />
+        </div>
+        
+        <!-- 下一张按钮 -->
+        <button 
+          v-if="currentImageIndex < currentImageList.length - 1" 
+          class="preview-nav-btn preview-next-btn" 
+          @click="nextImage"
+        >
+          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="9 18 15 12 9 6"/>
+          </svg>
+        </button>
+        
+        <!-- 缩略图导航 -->
+        <div class="preview-thumbnails">
+          <div
+            v-for="(img, index) in currentImageList"
+            :key="index"
+            class="preview-thumbnail"
+            :class="{ 'thumbnail-active': index === currentImageIndex }"
+            @click="goToImage(index)"
+          >
+            <img :src="img" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 学生学习详情模态框 -->
+    <div v-if="showStudentDetailModal" class="student-detail-modal" @click.self="closeStudentDetailModal">
+      <div class="student-detail-container">
+        <!-- 模态框头部 -->
+        <div class="student-detail-header">
+          <h3 class="student-detail-title">{{ currentStudentDetail?.name }} - 本节课学习情况</h3>
+          <button class="student-detail-close" @click="closeStudentDetailModal">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M18 6L6 18M6 6l12 12"/>
+            </svg>
+          </button>
+        </div>
+        
+        <!-- 模态框内容 -->
+        <div class="student-detail-body">
+          <div class="student-detail-info">
+            <div class="info-item">
+              <span class="info-label">姓名：</span>
+              <span class="info-value">{{ currentStudentDetail?.name }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">班级：</span>
+              <span class="info-value">{{ currentStudentDetail?.className || '爱学蝶变高一1班' }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">课程：</span>
+              <span class="info-value">{{ currentCourseName }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">学习时长：</span>
+              <span class="info-value">{{ currentStudentDetail?.studyDuration }}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">整体正确率：</span>
+              <span class="info-value">{{ currentStudentDetail?.overallCorrectRate }}</span>
+            </div>
+          </div>
+          
+          <!-- 知识点学习情况表格 -->
+          <div class="knowledge-table-section">
+            <h4 class="section-title">知识点学习情况</h4>
+            <a-table
+              :columns="knowledgeColumns"
+              :data-source="knowledgeData"
+              :pagination="false"
+              size="middle"
+              bordered
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部版权 (复用 PortalHomePage 风格) -->
+    <footer class="portal-footer">
+      <span>Copyright © 2025 &nbsp;QuanXue. All Rights Reserved.&nbsp; 渝ICP备05088888号</span>
+    </footer>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, h } from 'vue';
+import { useRouter } from 'vue-router';
+import { message } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+const router = useRouter();
+
+// 导航栏状态
+const showDropdown = ref(false);
+
+const handleLogout = () => {
+  showDropdown.value = false;
+  router.push('/login');
+};
+
+const goBack = () => {
+  console.log('goBack clicked');
+  router.push('/admin');
+};
+
+// 筛选条件状态
+const filters = reactive({
+  cloudSchool: '',
+  school: '',
+  grade: '',
+  class: '',
+  date: dayjs().format('YYYY-MM-DD')
+});
+
+// 限制只能选择今天及以前的日期
+const disableFutureDates = (date) => {
+  return dayjs(date).isAfter(dayjs(), 'day');
+};
+
+// 判断是否为今天
+const isToday = (dateStr) => {
+  return dayjs(dateStr).isSame(dayjs(), 'day');
+};
+
+// 前一天
+const goPrevDay = () => {
+  filters.date = dayjs(filters.date).subtract(1, 'day').format('YYYY-MM-DD');
+  currentCourseIndex.value = -1; // 日期变化重置课程选择
+  handleSearch(); // 日期改变触发查询
+};
+
+// 后一天
+const goNextDay = () => {
+  if (isToday(filters.date)) return;
+  filters.date = dayjs(filters.date).add(1, 'day').format('YYYY-MM-DD');
+  currentCourseIndex.value = -1; // 日期变化重置课程选择
+  handleSearch(); // 日期改变触发查询
+};
+
+// 模拟选项数据
+const cloudSchoolOptions = [
+  { label: '全部云校', value: 'all' },
+  { label: '北京云校', value: 'bj' },
+  { label: '上海云校', value: 'sh' },
+  { label: '广州云校', value: 'gz' }
+];
+
+const schoolOptions = [
+  { label: '第一中学', value: '1' },
+  { label: '第二中学', value: '2' },
+  { label: '第三中学', value: '3' }
+];
+
+const gradeOptions = [
+  { label: '高一', value: 'g1' },
+  { label: '高二', value: 'g2' },
+  { label: '高三', value: 'g3' }
+];
+
+const classOptions = [
+  { label: '1班', value: 'c1' },
+  { label: '2班', value: 'c2' },
+  { label: '3班', value: 'c3' }
+];
+
+// 当前选中的课程索引，-1 表示未选择任何课程
+const currentCourseIndex = ref(-1);
+
+// 当前课程名称
+const currentCourseName = computed(() => {
+  const course = courseList.value[currentCourseIndex.value];
+  return course ? `${course.subject} - ${course.tag}` : '';
+});
+
+// 模拟课表数据
+const courseList = ref([
+  {
+    startTime: '08:00',
+    endTime: '08:45',
+    subject: '语文',
+    tag: '预习',
+    status: '已结束'
+  },
+  {
+    startTime: '09:00',
+    endTime: '09:45',
+    subject: '数学',
+    tag: '复习',
+    status: '已结束'
+  },
+  {
+    startTime: '10:00',
+    endTime: '10:45',
+    subject: '英语',
+    tag: '预习',
+    status: '进行中'
+  },
+  {
+    startTime: '11:00',
+    endTime: '11:45',
+    subject: '物理',
+    tag: '复习',
+    status: '未开始'
+  },
+  {
+    startTime: '14:00',
+    endTime: '14:45',
+    subject: '化学',
+    tag: '预习',
+    status: '未开始'
+  }
+]);
+
+// 获取课程标签颜色主题
+const getCourseTagTheme = (tag) => {
+  if (tag === '预习') return 'primary';
+  if (tag === '复习') return 'warning';
+  return 'default';
+};
+
+// 获取课程状态样式类
+const getCourseStatusClass = (status) => {
+  if (status === '已结束') return 'status-ended';
+  if (status === '进行中') return 'status-ongoing';
+  if (status === '未开始') return 'status-not-started';
+  return '';
+};
+
+// 获取层次标签主题色
+const getLevelTheme = (level) => {
+  const themeMap = {
+    'A': 'success',
+    'B': 'primary',
+    'C': 'warning',
+    'D': 'danger'
+  }
+  return themeMap[level] || 'default'
+};
+
+// 获取正确率进度条颜色
+const getCorrectRateColor = (rate) => {
+  const numRate = parseFloat(rate);
+  if (numRate >= 85) return '#52c41a';
+  if (numRate >= 70) return '#1677ff';
+  if (numRate >= 60) return '#faad14';
+  return '#f5222d';
+};
+
+// 查询和重置操作
+const handleSearch = () => {
+  console.log('查询条件:', filters);
+  // 这里可以触发数据重新加载
+};
+
+const handleReset = () => {
+  filters.cloudSchool = '';
+  filters.school = '';
+  filters.grade = '';
+  filters.class = '';
+  filters.date = dayjs().format('YYYY-MM-DD');
+  currentCourseIndex.value = -1;
+};
+
+const handleCloudSchoolChange = () => {
+  filters.school = '';
+  filters.grade = '';
+  filters.class = '';
+  currentCourseIndex.value = -1;
+};
+
+const handleSchoolChange = () => {
+  filters.grade = '';
+  filters.class = '';
+  currentCourseIndex.value = -1;
+};
+
+const handleGradeChange = () => {
+  filters.class = '';
+  currentCourseIndex.value = -1;
+};
+
+// 选择课程处理函数
+const handleCourseSelect = (index) => {
+  currentCourseIndex.value = index;
+  // 可以在这里添加选择课程后的其他逻辑，如加载课程数据等
+  console.log('选择了课程:', courseList.value[index]);
+};
+
+// 判断当前课程是否已结束
+const isCourseEnded = computed(() => {
+  const currentCourse = courseList.value[currentCourseIndex.value];
+  return currentCourse?.status === '已结束';
+});
+
+// 最后更新时间
+const lastUpdateTime = ref(dayjs().format('MM-DD HH:mm'));
+
+// 表格筛选条件
+const tableFilters = reactive({
+  isCheckIn: undefined,
+  isOnline: undefined,
+  hasStudyNoSubmit: undefined,
+  name: ''
+});
+
+// 学生表格列定义 - 使用计算属性动态更新
+const studentColumns = computed(() => [
+  {
+    title: '姓名',
+    dataIndex: 'name',
+    key: 'name',
+    width: 90,
+    fixed: 'left',
+    align: 'center'
+  },
+  {
+    title: '综合层次',
+    dataIndex: 'comprehensiveLevel',
+    key: 'comprehensiveLevel',
+    width: 90,
+    align: 'center'
+  },
+  {
+    title: courseList.value[currentCourseIndex.value]?.subject ? `${courseList.value[currentCourseIndex.value].subject}层次` : '科目层次',
+    dataIndex: 'subjectLevel',
+    key: 'subjectLevel',
+    width: 90,
+    align: 'center'
+  },
+  {
+    title: '打卡状态',
+    dataIndex: 'isCheckIn',
+    key: 'isCheckIn',
+    width: 90,
+    align: 'center'
+  },
+  {
+    title: '在线状态',
+    dataIndex: 'isOnline',
+    key: 'isOnline',
+    width: 90,
+    align: 'center'
+  },
+  {
+    title: '学无交',
+    dataIndex: 'hasStudyNoSubmit',
+    key: 'hasStudyNoSubmit',
+    width: 80,
+    align: 'center'
+  },
+  {
+    title: '进课时间',
+    dataIndex: 'enterTime',
+    key: 'enterTime',
+    width: 90,
+    align: 'center'
+  },
+  {
+    title: '最后在线',
+    dataIndex: 'exitTime',
+    key: 'exitTime',
+    width: 90,
+    align: 'center'
+  },
+  {
+    title: '学习时长',
+    dataIndex: 'studyDuration',
+    key: 'studyDuration',
+    width: 90,
+    align: 'center'
+  },
+  {
+    title: '答题时长',
+    dataIndex: 'answerDuration',
+    key: 'answerDuration',
+    width: 90,
+    align: 'center'
+  },
+  {
+    title: '客观题正确率',
+    dataIndex: 'objectiveCorrectRate',
+    key: 'objectiveCorrectRate',
+    width: 110,
+    align: 'center'
+  },
+  {
+    title: '主观题正确率',
+    dataIndex: 'subjectiveCorrectRate',
+    key: 'subjectiveCorrectRate',
+    width: 110,
+    align: 'center'
+  },
+  {
+    title: '整体正确率',
+    dataIndex: 'overallCorrectRate',
+    key: 'overallCorrectRate',
+    width: 100,
+    align: 'center'
+  }
+]);
+
+// 生成模拟学生数据
+const generateStudentData = (courseIndex) => {
+  const names = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十', '郑十一', '陈十二', '刘明', '黄强', '林娜', '杨帆', '何静'];
+  const levels = ['A', 'B', 'C', 'D'];
+  const data = [];
+  
+  for (let i = 0; i < 25; i++) {
+    const isCheckIn = Math.random() > 0.2 ? '是' : '否';
+    const isOnline = isCheckIn === '是' ? (Math.random() > 0.1 ? '是' : '否') : '否';
+    const hasStudyNoSubmit = isOnline === '是' ? (Math.random() > 0.7 ? '是' : '否') : '否';
+    
+    data.push({
+      id: `${courseIndex}-${i}`,
+      name: names[i % names.length] + (i >= names.length ? i : ''),
+      comprehensiveLevel: levels[Math.floor(Math.random() * levels.length)],
+      subjectLevel: levels[Math.floor(Math.random() * levels.length)],
+      isCheckIn,
+      isOnline,
+      hasStudyNoSubmit,
+      enterTime: isOnline === '是' ? `08:${String(Math.floor(Math.random() * 30) + 10).padStart(2, '0')}` : '-',
+      exitTime: isOnline === '是' ? `08:${String(Math.floor(Math.random() * 15) + 40).padStart(2, '0')}` : '-',
+      studyDuration: isOnline === '是' ? `${Math.floor(Math.random() * 20) + 25}分钟` : '-',
+      answerDuration: isOnline === '是' ? `${Math.floor(Math.random() * 15) + 10}分钟` : '-',
+      objectiveCorrectRate: isOnline === '是' ? `${Math.floor(Math.random() * 40) + 60}%` : '-',
+      subjectiveCorrectRate: isOnline === '是' ? `${Math.floor(Math.random() * 40) + 50}%` : '-',
+      overallCorrectRate: isOnline === '是' ? `${Math.floor(Math.random() * 35) + 55}%` : '-'
+    });
+  }
+  return data;
+};
+
+// 所有课程的学生数据
+const allStudentData = ref({});
+
+// 获取当前课程的学生数据
+const currentStudentData = computed(() => {
+  const index = currentCourseIndex.value;
+  if (!allStudentData.value[index]) {
+    allStudentData.value[index] = generateStudentData(index);
+  }
+  return allStudentData.value[index];
+});
+
+// 筛选后的学生数据
+const filteredStudentData = computed(() => {
+  let data = currentStudentData.value;
+  
+  if (tableFilters.isCheckIn) {
+    data = data.filter(item => tableFilters.isCheckIn === 'yes' ? item.isCheckIn === '是' : item.isCheckIn === '否');
+  }
+  
+  if (tableFilters.isOnline) {
+    data = data.filter(item => tableFilters.isOnline === 'yes' ? item.isOnline === '是' : item.isOnline === '否');
+  }
+  
+  if (tableFilters.hasStudyNoSubmit) {
+    data = data.filter(item => tableFilters.hasStudyNoSubmit === 'yes' ? item.hasStudyNoSubmit === '是' : item.hasStudyNoSubmit === '否');
+  }
+  
+  if (tableFilters.name) {
+    data = data.filter(item => item.name.includes(tableFilters.name));
+  }
+  
+  return data;
+});
+
+// 表格筛选变化处理
+const handleTableFilterChange = () => {
+  // 筛选条件变化会自动触发 computed 更新
+};
+
+// 模态框相关
+const showSummaryModal = ref(false);
+const activeTab = ref('checkin');
+
+// 打开模态框
+const openSummaryModal = () => {
+  showSummaryModal.value = true;
+  activeTab.value = 'checkin';
+};
+
+// 关闭模态框
+const closeSummaryModal = () => {
+  showSummaryModal.value = false;
+};
+
+// 精选笔记模态框相关
+const showFeaturedNotesModal = ref(false);
+const featuredNotesLoading = ref(false);
+const featuredNotes = ref([]);
+
+// 精选笔记筛选条件
+const featuredNotesFilter = ref({
+  name: ''
+});
+
+// 精选笔记分页配置
+const featuredNotesPagination = ref({
+  current: 1,
+  pageSize: 10
+});
+
+// 筛选后的精选笔记列表
+const filteredFeaturedNotes = computed(() => {
+  let data = featuredNotes.value;
+  
+  if (featuredNotesFilter.value.name) {
+    const keyword = featuredNotesFilter.value.name.toLowerCase();
+    data = data.filter(item => item.studentName.toLowerCase().includes(keyword));
+  }
+  
+  return data;
+});
+
+// 分页后的精选笔记列表
+const paginatedFeaturedNotes = computed(() => {
+  const start = (featuredNotesPagination.value.current - 1) * featuredNotesPagination.value.pageSize;
+  const end = start + featuredNotesPagination.value.pageSize;
+  return filteredFeaturedNotes.value.slice(start, end);
+});
+
+// 精选笔记总页数
+const featuredNotesTotalPages = computed(() => {
+  return Math.ceil(filteredFeaturedNotes.value.length / featuredNotesPagination.value.pageSize) || 1;
+});
+
+// 精选笔记可见页码（最多显示5个页码）
+const featuredNotesVisiblePages = computed(() => {
+  const total = featuredNotesTotalPages.value;
+  const current = featuredNotesPagination.value.current;
+  const pages = [];
+  
+  let start = Math.max(1, current - 2);
+  let end = Math.min(total, start + 4);
+  
+  if (end - start < 4) {
+    start = Math.max(1, end - 4);
+  }
+  
+  for (let i = start; i <= end; i++) {
+    pages.push(i);
+  }
+  
+  return pages;
+});
+
+// 精选笔记筛选变化处理
+const handleFeaturedNotesFilterChange = () => {
+  // 重置到第一页
+  featuredNotesPagination.value.current = 1;
+};
+
+// 跳转到指定页
+const goToFeaturedNotesPage = (page) => {
+  if (page >= 1 && page <= featuredNotesTotalPages.value) {
+    featuredNotesPagination.value.current = page;
+  }
+};
+
+// 每页显示数量变化处理
+const handleFeaturedNotesPageSizeChange = () => {
+  // 重置到第一页
+  featuredNotesPagination.value.current = 1;
+};
+
+// 图片预览相关
+const showImagePreview = ref(false);
+const currentImageList = ref([]);
+const currentImageIndex = ref(0);
+
+// 学生学习详情模态框相关
+const showStudentDetailModal = ref(false);
+const currentStudentDetail = ref(null);
+const knowledgeData = ref([]);
+
+// 知识点表格列定义 - 支持一对多关系展示
+const knowledgeColumns = [
+  {
+    title: '知识点名称',
+    dataIndex: 'knowledgeName',
+    key: 'knowledgeName',
+    width: 140,
+    align: 'center',
+    customRender: ({ record }) => {
+      if (record.knowledgeRowSpan) {
+        return {
+          children: record.knowledgeName,
+          props: { rowSpan: record.knowledgeRowSpan }
+        };
+      }
+      return {
+        children: '',
+        props: { rowSpan: 0 }
+      };
+    }
+  },
+  {
+    title: '达标正确率',
+    dataIndex: 'targetRate',
+    key: 'targetRate',
+    width: 100,
+    align: 'center',
+    customRender: ({ record }) => {
+      if (record.knowledgeRowSpan) {
+        return {
+          children: record.targetRate,
+          props: { rowSpan: record.knowledgeRowSpan }
+        };
+      }
+      return {
+        children: '',
+        props: { rowSpan: 0 }
+      };
+    }
+  },
+  {
+    title: '攻坚次数',
+    dataIndex: 'attemptNumber',
+    key: 'attemptNumber',
+    width: 80,
+    align: 'center',
+    customRender: ({ text }) => `第${text}次`
+  },
+  {
+    title: '学习时长',
+    dataIndex: 'studyDuration',
+    key: 'studyDuration',
+    width: 120,
+    align: 'center'
+  },
+  {
+    title: '答题时长',
+    dataIndex: 'answerDuration',
+    key: 'answerDuration',
+    width: 120,
+    align: 'center'
+  },
+  {
+    title: '本次正确率',
+    dataIndex: 'correctRate',
+    key: 'correctRate',
+    width: 100,
+    align: 'center'
+  },
+  {
+    title: '当前状态',
+    dataIndex: 'status',
+    key: 'status',
+    width: 100,
+    align: 'center',
+    customRender: ({ text }) => {
+      const statusMap = {
+        '成功': { color: '#52c41a', text: '✓ 成功' },
+        '失败': { color: '#ff4d4f', text: '✗ 失败' },
+        '进行中': { color: '#faad14', text: '◐ 进行中' }
+      };
+      const status = statusMap[text] || { color: '#999', text };
+      return h('span', { style: { color: status.color, fontWeight: 500 } }, status.text);
+    }
+  }
+];
+
+// 生成知识点数据 - 一对多关系：每个知识点对应多条攻坚记录
+// 逻辑：正确率>=达标正确率时状态为"成功"，成功后后续攻坚不再记录数据
+const generateKnowledgeData = (student) => {
+  const knowledges = [
+    { name: '函数的概念与性质', id: 1 },
+    { name: '二次函数图像', id: 2 },
+    { name: '不等式求解', id: 3 },
+    { name: '三角函数基础', id: 4 }
+  ];
+  const data = [];
+  
+  knowledges.forEach((knowledge, knowledgeIndex) => {
+    const attemptCount = Math.floor(Math.random() * 2) + 3; // 3-4次攻坚
+    const targetRateNum = Math.floor(Math.random() * 20 + 70); // 70-90%达标率
+    const targetRate = `${targetRateNum}%`;
+    let hasSuccess = false; // 标记是否已成功
+    
+    for (let i = 0; i < attemptCount; i++) {
+      // 如果已经成功，后续所有数据为空
+      if (hasSuccess) {
+        data.push({
+          key: `${knowledgeIndex}-${i}`,
+          knowledgeName: knowledge.name,
+          knowledgeId: knowledge.id,
+          knowledgeRowSpan: i === 0 ? attemptCount : null,
+          targetRate: targetRate,
+          attemptNumber: i + 1,
+          studyDuration: '-',
+          answerDuration: '-',
+          correctRate: '-',
+          status: '-'
+        });
+        continue;
+      }
+      
+      // 生成本次正确率
+      const correctRateNum = Math.floor(Math.random() * 60 + 30); // 30-90%本次正确率
+      const correctRate = `${correctRateNum}%`;
+      
+      // 根据正确率判断状态
+      const isSuccess = correctRateNum >= targetRateNum;
+      const status = isSuccess ? '成功' : (Math.random() > 0.3 ? '失败' : '进行中');
+      
+      // 如果成功，标记并记录数据
+      if (isSuccess) {
+        hasSuccess = true;
+      }
+      
+      data.push({
+        key: `${knowledgeIndex}-${i}`,
+        knowledgeName: knowledge.name,
+        knowledgeId: knowledge.id,
+        knowledgeRowSpan: i === 0 ? attemptCount : null,
+        targetRate: targetRate,
+        attemptNumber: i + 1,
+        studyDuration: `${Math.floor(Math.random() * 10 + 5)}分钟${String(Math.floor(Math.random() * 60)).padStart(2, '0')}秒`,
+        answerDuration: `${Math.floor(Math.random() * 8 + 3)}分钟${String(Math.floor(Math.random() * 60)).padStart(2, '0')}秒`,
+        correctRate: correctRate,
+        status: status
+      });
+    }
+  });
+  
+  return data;
+};
+
+// 打开学生学习详情模态框
+const openStudentDetailModal = (student) => {
+  currentStudentDetail.value = student;
+  knowledgeData.value = generateKnowledgeData(student);
+  showStudentDetailModal.value = true;
+};
+
+// 关闭学生学习详情模态框
+const closeStudentDetailModal = () => {
+  showStudentDetailModal.value = false;
+  currentStudentDetail.value = null;
+  knowledgeData.value = [];
+};
+
+// 生成精选笔记数据
+const generateFeaturedNotes = () => {
+  const names = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十'];
+  const contents = [
+    '这节课的内容非常有意思，老师讲得很清楚，笔记整理得很详细。',
+    '重点记录了课堂上的关键知识点，方便复习。',
+    '通过思维导图的方式整理了本节课的内容，逻辑清晰。',
+    '详细记录了例题和解题思路，对理解知识点很有帮助。',
+    ''
+  ];
+  const courses = ['语文 - 预习', '数学 - 复习', '英语 - 预习', '物理 - 复习'];
+  
+  return Array.from({ length: 12 }, (_, i) => ({
+    id: i + 1,
+    studentName: names[i % names.length],
+    avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${i}`,
+    className: '爱学蝶变高一1班',
+    courseName: courses[i % courses.length],
+    content: contents[i % contents.length],
+    images: Array.from({ length: 10 }, (_, j) =>
+      `https://picsum.photos/400/300?random=${i * 10 + j}`
+    ),
+    submitTime: dayjs().subtract(Math.floor(Math.random() * 7), 'day').format('MM-DD HH:mm'),
+    isExcellent: i % 3 === 0,
+    likeCount: Math.floor(Math.random() * 50),
+    commentCount: Math.floor(Math.random() * 20)
+  }));
+};
+
+// 打开精选笔记模态框
+const openFeaturedNotesModal = () => {
+  showFeaturedNotesModal.value = true;
+  featuredNotesLoading.value = true;
+  featuredNotes.value = [];
+  
+  // 重置筛选和分页
+  featuredNotesFilter.value.name = '';
+  featuredNotesPagination.value.current = 1;
+  featuredNotesPagination.value.pageSize = 10;
+  
+  // 模拟加载延迟
+  setTimeout(() => {
+    featuredNotes.value = generateFeaturedNotes();
+    featuredNotesLoading.value = false;
+  }, 800);
+};
+
+// 关闭精选笔记模态框
+const closeFeaturedNotesModal = () => {
+  showFeaturedNotesModal.value = false;
+};
+
+// 预览图片
+const previewImage = (img, images, index) => {
+  currentImageList.value = images;
+  currentImageIndex.value = index;
+  showImagePreview.value = true;
+};
+
+// 关闭图片预览
+const closeImagePreview = () => {
+  showImagePreview.value = false;
+};
+
+// 上一张图片
+const prevImage = () => {
+  if (currentImageIndex.value > 0) {
+    currentImageIndex.value--;
+  }
+};
+
+// 下一张图片
+const nextImage = () => {
+  if (currentImageIndex.value < currentImageList.value.length - 1) {
+    currentImageIndex.value++;
+  }
+};
+
+// 跳转到指定图片
+const goToImage = (index) => {
+  currentImageIndex.value = index;
+};
+
+// 键盘导航
+const handlePreviewKeydown = (e) => {
+  if (!showImagePreview.value) return;
+  
+  switch (e.key) {
+    case 'ArrowLeft':
+      prevImage();
+      break;
+    case 'ArrowRight':
+      nextImage();
+      break;
+    case 'Escape':
+      closeImagePreview();
+      break;
+  }
+};
+
+// 汇总表格列定义
+const summaryColumns = [
+  {
+    title: '序号',
+    dataIndex: 'index',
+    key: 'index',
+    width: 70,
+    customRender: ({ index }) => index + 1
+  },
+  {
+    title: '姓名',
+    dataIndex: 'name',
+    key: 'name',
+    width: 100
+  },
+  {
+    title: '班级',
+    dataIndex: 'className',
+    key: 'className',
+    width: 100
+  },
+  {
+    title: '学号',
+    dataIndex: 'studentNo',
+    key: 'studentNo',
+    width: 120
+  }
+];
+
+// 生成汇总数据
+const generateSummaryData = () => {
+  const names = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十', '郑十一', '陈十二', '刘明', '黄强', '林娜', '杨帆', '何静', '王芳', '李华', '张强', '刘伟', '陈静'];
+  const data = [];
+  
+  for (let i = 0; i < 20; i++) {
+    data.push({
+      id: `student-${i}`,
+      name: names[i],
+      className: '高一(1)班',
+      studentNo: `2025${String(i + 1).padStart(3, '0')}`
+    });
+  }
+  return data;
+};
+
+// 各类型学生数据
+const checkInStudents = ref(generateSummaryData().slice(0, 18));
+const onlineStudents = ref(generateSummaryData().slice(0, 15));
+const noSubmitStudents = ref(generateSummaryData().slice(0, 5));
+const allCheckInStudents = ref(generateSummaryData().slice(0, 12));
+
+// 导出数据
+const exportData = () => {
+  const tabNames = {
+    checkin: '打卡人数',
+    online: '上线人数',
+    noSubmit: '仅学无交人数',
+    allCheckin: '完成所有课程打卡人数'
+  };
+  
+  const currentTab = activeTab.value;
+  const tabName = tabNames[currentTab];
+  
+  let data = [];
+  switch (currentTab) {
+    case 'checkin':
+      data = checkInStudents.value;
+      break;
+    case 'online':
+      data = onlineStudents.value;
+      break;
+    case 'noSubmit':
+      data = noSubmitStudents.value;
+      break;
+    case 'allCheckin':
+      data = allCheckInStudents.value;
+      break;
+  }
+  
+  // 构建CSV内容
+  const headers = ['序号', '姓名', '班级', '学号'];
+  const rows = data.map((item, index) => [index + 1, item.name, item.className, item.studentNo]);
+  const csvContent = [headers.join(','), ...rows.map(row => row.join(','))].join('\n');
+  
+  // 创建下载链接
+  const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
+  const link = document.createElement('a');
+  const date = dayjs().format('YYYY-MM-DD');
+  link.href = URL.createObjectURL(blob);
+  link.download = `今日数据汇总_${tabName}_${date}.csv`;
+  link.click();
+  URL.revokeObjectURL(link.href);
+};
+
+// ESC键关闭模态框
+const handleEscKey = (e) => {
+  if (e.key === 'Escape' && showSummaryModal.value) {
+    closeSummaryModal();
+  }
+  if (e.key === 'Escape' && showStudentDetailModal.value) {
+    closeStudentDetailModal();
+  }
+};
+
+// 自定义行点击事件
+const customRow = (record) => {
+  return {
+    onClick: () => {
+      if (record.isOnline === '是') {
+        openStudentDetailModal(record);
+      } else {
+        message.info('该学生未上线，暂无详情数据');
+      }
+    },
+    class: record.isOnline === '是' ? 'clickable-row' : 'non-clickable-row',
+    style: {
+      cursor: record.isOnline === '是' ? 'pointer' : 'default'
+    }
+  };
+};
+
+// 监听ESC键
+if (typeof window !== 'undefined') {
+  window.addEventListener('keydown', handleEscKey);
+  window.addEventListener('keydown', handlePreviewKeydown);
+}
+</script>
+
+<style scoped>
+.monitor-layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background-color: #f5f7fa;
+}
+
+/* ===== 顶部导航 (复用 PortalHomePage) ===== */
+.portal-header {
+  height: 60px;
+  background: rgba(255, 255, 255, 0.82);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 36px;
+  border-bottom: 1px solid rgba(22, 119, 255, 0.06);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 4px 16px rgba(22, 119, 255, 0.04);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 100%;
+}
+
+.logo-box {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+}
+
+.logo-img {
+  height: 40px;
+  width: auto;
+  object-fit: contain;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.user-info-wrap {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  padding: 6px 12px;
+  border-radius: 12px;
+  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+}
+
+.user-info-wrap:hover {
+  background: rgba(22, 119, 255, 0.06);
+}
+
+.user-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #1677ff 0%, #69b1ff 50%, #a0d2ff 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.28);
+  transition: box-shadow 0.28s ease;
+}
+
+.user-info-wrap:hover .user-avatar {
+  box-shadow: 0 4px 14px rgba(22, 119, 255, 0.38);
+}
+
+.avatar-text {
+  font-size: 13px;
+  color: #fff;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+}
+
+.user-name {
+  font-size: 14px;
+  color: #2c3e5a;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+}
+
+.dropdown-arrow {
+  display: flex;
+  align-items: center;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.dropdown-arrow.arrow-rotate {
+  transform: rotate(180deg);
+}
+
+.user-dropdown-menu {
+  position: absolute;
+  top: calc(100% + 10px);
+  right: 0;
+  min-width: 156px;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-radius: 14px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(22, 119, 255, 0.08);
+  padding: 8px 0;
+  z-index: 200;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 11px 18px;
+  cursor: pointer;
+  transition: all 0.22s ease;
+  color: #4a5568;
+  font-size: 14px;
+  border-radius: 8px;
+  margin: 2px 6px;
+}
+
+.dropdown-item:hover {
+  background: linear-gradient(135deg, rgba(22, 119, 255, 0.07), rgba(22, 119, 255, 0.03));
+  color: #1677ff;
+}
+
+.dropdown-item:hover .logout-icon path,
+.dropdown-item:hover .logout-icon polyline,
+.dropdown-item:hover .logout-icon line {
+  stroke: #1677ff;
+}
+
+.logout-icon {
+  flex-shrink: 0;
+}
+
+/* 下拉菜单过渡动画 */
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-10px) scale(0.96);
+}
+
+/* ===== 页面标题区域 ===== */
+.page-header {
+  background: #ffffff;
+  padding: 24px 0;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
+  margin-bottom: 20px;
+  position: relative;
+  z-index: 10;
+}
+
+.content-wrapper {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 32px;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
+.back-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border: 1px solid #E2E8F0;
+  background: #ffffff;
+  border-radius: 8px;
+  color: #475569;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.back-btn:hover {
+  background: #F8FAFC;
+  color: #1E293B;
+  border-color: #CBD5E1;
+  transform: translateX(-2px);
+}
+
+.title-group {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  border-left: 1px solid #E2E8F0;
+  padding-left: 24px;
+}
+
+.title-icon {
+  width: 48px;
+  height: 48px;
+  background: linear-gradient(135deg, #13c2c2 0%, #b5f5ec 100%);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  box-shadow: 0 4px 12px rgba(19, 194, 194, 0.2);
+}
+
+.title-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 700;
+  color: #1E293B;
+  line-height: 1.2;
+}
+
+.page-subtitle {
+  margin: 0;
+  font-size: 13px;
+  color: #64748B;
+}
+
+/* ===== 底部版权 (复用 PortalHomePage) ===== */
+.portal-footer {
+  text-align: center;
+  padding: 20px 0 24px;
+  font-size: 12px;
+  color: #a0aab8;
+  letter-spacing: 0.5px;
+  border-top: 1px solid rgba(232, 237, 245, 0.5);
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  margin-top: auto;
+}
+
+/* ===== 精选笔记模态框样式 ===== */
+.featured-notes-modal .modal-container {
+  max-width: 800px;
+  width: 90%;
+  max-height: 85vh;
+}
+
+.featured-notes-modal .modal-body {
+  padding: 0;
+  overflow-y: auto;
+  max-height: calc(85vh - 80px);
+}
+
+/* 精选笔记工具栏（筛选和统计） */
+.featured-notes-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  background: linear-gradient(135deg, #f6ffed 0%, #f0f5ff 100%);
+  border-bottom: 1px solid #e8f5e9;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.featured-notes-stats {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+}
+
+.stats-label {
+  color: #666;
+  font-weight: 500;
+}
+
+.stats-value {
+  color: #52c41a;
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.stats-unit {
+  color: #666;
+  font-size: 14px;
+}
+
+.stats-filtered {
+  color: #999;
+  font-size: 13px;
+  margin-left: 8px;
+  padding: 2px 8px;
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+}
+
+.featured-notes-filter {
+  display: flex;
+  align-items: center;
+}
+
+/* 筛选后空状态 */
+.filter-empty {
+  padding: 40px 20px;
+  background: #fafafa;
+  margin: 20px;
+  border-radius: 12px;
+}
+
+/* 精选笔记容器 */
+.featured-notes-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 400px;
+}
+
+/* 分页控件样式 */
+.featured-notes-pagination {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  background: #fff;
+  border-top: 1px solid #f0f0f0;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.pagination-info {
+  font-size: 13px;
+  color: #666;
+  white-space: nowrap;
+}
+
+.pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pagination-btn {
+  width: 32px;
+  height: 32px;
+  border: 1px solid #d9d9d9;
+  background: #fff;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #666;
+  transition: all 0.2s ease;
+}
+
+.pagination-btn:hover:not(:disabled) {
+  border-color: #1677ff;
+  color: #1677ff;
+}
+
+.pagination-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.pagination-pages {
+  display: flex;
+  gap: 4px;
+}
+
+.pagination-page-btn {
+  min-width: 32px;
+  height: 32px;
+  padding: 0 8px;
+  border: 1px solid #d9d9d9;
+  background: #fff;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+  color: #666;
+  transition: all 0.2s ease;
+}
+
+.pagination-page-btn:hover {
+  border-color: #1677ff;
+  color: #1677ff;
+}
+
+.pagination-page-btn.is-active {
+  background: #1677ff;
+  border-color: #1677ff;
+  color: #fff;
+  font-weight: 500;
+}
+
+.pagination-size {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: #666;
+  white-space: nowrap;
+}
+
+/* 加载状态 */
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+}
+
+.loading-spinner {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.spinner-circle {
+  stroke: #1677ff;
+}
+
+.loading-text {
+  margin-top: 16px;
+  font-size: 14px;
+  color: #999;
+}
+
+/* 空状态 */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  text-align: center;
+}
+
+.empty-icon {
+  margin-bottom: 16px;
+}
+
+.empty-title {
+  margin: 0 0 8px;
+  font-size: 16px;
+  color: #333;
+  font-weight: 500;
+}
+
+.empty-desc {
+  margin: 0;
+  font-size: 14px;
+  color: #999;
+}
+
+/* 笔记列表 */
+.featured-notes-list {
+  padding: 20px;
+}
+
+.featured-note-card {
+  position: relative;
+  background: linear-gradient(135deg, #fffbe6 0%, #fff 100%);
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 16px;
+  border: 2px solid #ffd666;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 2px 8px rgba(255, 214, 102, 0.15);
+}
+
+.featured-note-card:hover {
+  box-shadow: 0 8px 24px rgba(255, 214, 102, 0.25);
+  transform: translateY(-2px);
+  border-color: #ffc53d;
+}
+
+.note-excellent {
+  border-color: #ffd666;
+  background: linear-gradient(135deg, #fffbe6 0%, #fff 100%);
+}
+
+.excellent-badge {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  background: linear-gradient(135deg, #ffd666 0%, #ffc53d 100%);
+  color: #874d00;
+  border-radius: 20px;
+  font-size: 11px;
+  font-weight: 600;
+  box-shadow: 0 2px 4px rgba(255, 197, 61, 0.3);
+}
+
+.note-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.note-avatar {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  overflow: hidden;
+  background: linear-gradient(135deg, #ffd666 0%, #ffc53d 100%);
+  border: 2px solid #fff;
+  box-shadow: 0 2px 8px rgba(255, 214, 102, 0.4);
+}
+
+.note-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.note-info {
+  flex: 1;
+}
+
+.note-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.note-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: #874d00;
+  font-weight: 500;
+}
+
+.note-class {
+  padding: 2px 8px;
+  background: linear-gradient(135deg, #fff7e6 0%, #fffbe6 100%);
+  color: #874d00;
+  border-radius: 4px;
+  border: 1px solid #ffd666;
+  font-weight: 500;
+}
+
+.note-content-text {
+  font-size: 14px;
+  color: #333;
+  line-height: 1.8;
+  margin-bottom: 12px;
+  padding: 12px;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 8px;
+  border-left: 3px solid #ffd666;
+}
+
+/* 图片网格 */
+.note-images-grid {
+  display: grid;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+/* 九宫格布局 */
+.note-images-grid.grid-9 {
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+}
+
+.note-images-grid.grid-9 .note-image-wrapper {
+  aspect-ratio: 1;
+}
+
+/* 单张图片大展示 */
+.note-images-grid:has(.note-image-wrapper:only-child) {
+  grid-template-columns: 1fr;
+  max-width: 300px;
+}
+
+.note-images-grid:has(.note-image-wrapper:only-child) .note-image-wrapper {
+  aspect-ratio: 4/3;
+}
+
+.note-image-wrapper {
+  position: relative;
+  aspect-ratio: 4/3;
+  border-radius: 10px;
+  overflow: hidden;
+  cursor: pointer;
+  background: linear-gradient(135deg, #fffbe6 0%, #fff 100%);
+  border: 2px solid #ffd666;
+  box-shadow: 0 2px 8px rgba(255, 214, 102, 0.2);
+  transition: all 0.3s ease;
+}
+
+.note-image-wrapper:hover {
+  border-color: #ffc53d;
+  box-shadow: 0 4px 12px rgba(255, 214, 102, 0.4);
+}
+
+.note-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.note-image-wrapper:hover .note-image {
+  transform: scale(1.08);
+}
+
+.more-images-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 214, 102, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #874d00;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.note-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 12px;
+  border-top: 2px dashed #ffd666;
+}
+
+.note-course {
+  font-size: 13px;
+  color: #874d00;
+  font-weight: 600;
+  padding: 4px 12px;
+  background: linear-gradient(135deg, #fffbe6 0%, #fff7e6 100%);
+  border-radius: 20px;
+  border: 1px solid #ffd666;
+}
+
+.note-stats {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: #874d00;
+  font-weight: 500;
+  padding: 4px 10px;
+  background: rgba(255, 214, 102, 0.15);
+  border-radius: 12px;
+}
+
+/* 可点击的学生姓名 */
+.clickable-name {
+  color: #1677ff;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  padding: 4px 8px;
+  border-radius: 6px;
+  position: relative;
+}
+
+.clickable-name::before {
+  content: '';
+  position: absolute;
+  bottom: 4px;
+  left: 8px;
+  right: 26px;
+  height: 1px;
+  background: linear-gradient(90deg, #1677ff, #4096ff);
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.clickable-name:hover {
+  color: #0958d9;
+  background: rgba(22, 119, 255, 0.06);
+}
+
+.clickable-name:hover::before {
+  transform: scaleX(1);
+}
+
+.name-text {
+  font-weight: 500;
+  position: relative;
+}
+
+.detail-icon {
+  opacity: 0.6;
+  transform: translateX(-2px);
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.clickable-name:hover .detail-icon {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* 表格行悬停效果 */
+:deep(.student-table .ant-table-row) {
+  transition: background-color 0.2s ease;
+}
+
+:deep(.student-table .ant-table-row:hover) {
+  background-color: #f0f7ff;
+}
+
+/* 学生学习详情模态框样式 */
+.student-detail-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.student-detail-container {
+  background: #fff;
+  border-radius: 12px;
+  width: 900px;
+  max-width: 95vw;
+  max-height: 90vh;
+  overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+  animation: modalSlideIn 0.3s ease;
+}
+
+@keyframes modalSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.student-detail-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #f0f0f0;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.student-detail-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #fff;
+  margin: 0;
+}
+
+.student-detail-close {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  transition: all 0.2s ease;
+}
+
+.student-detail-close:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.student-detail-body {
+  padding: 20px;
+  overflow-y: auto;
+  max-height: calc(90vh - 65px);
+}
+
+.student-detail-info {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px 32px;
+  padding: 16px;
+  background: #f8fafc;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.info-label {
+  font-size: 14px;
+  color: #666;
+  font-weight: 400;
+}
+
+.info-value {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}
+
+.knowledge-table-section {
+  margin-top: 20px;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 12px;
+  padding-left: 8px;
+  border-left: 4px solid #1677ff;
+}
+
+/* 图片预览模态框样式 */
+.image-preview-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.9);
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-preview-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px 100px;
+}
+
+.preview-close-btn {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  width: 44px;
+  height: 44px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  transition: all 0.2s ease;
+  z-index: 10;
+}
+
+.preview-close-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.preview-counter {
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #fff;
+  font-size: 14px;
+  padding: 8px 16px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 20px;
+}
+
+.preview-nav-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 50px;
+  height: 50px;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  transition: all 0.2s ease;
+  z-index: 10;
+}
+
+.preview-nav-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.preview-prev-btn {
+  left: 20px;
+}
+
+.preview-next-btn {
+  right: 20px;
+}
+
+.preview-image-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 90%;
+  max-height: calc(100% - 120px);
+}
+
+.preview-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 8px;
+}
+
+.preview-thumbnails {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 8px;
+  padding: 10px;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 8px;
+  max-width: 90%;
+  overflow-x: auto;
+}
+
+.preview-thumbnail {
+  width: 60px;
+  height: 60px;
+  border-radius: 4px;
+  overflow: hidden;
+  cursor: pointer;
+  border: 2px solid transparent;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.preview-thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.preview-thumbnail:hover {
+  border-color: rgba(255, 255, 255, 0.5);
+}
+
+.preview-thumbnail.thumbnail-active {
+  border-color: #1677ff;
+}
+
+/* 响应式适配 */
+@media (max-width: 768px) {
+  .featured-notes-modal .modal-container {
+    width: 95%;
+    max-height: 90vh;
+  }
+  
+  .featured-notes-toolbar {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 12px 16px;
+    gap: 12px;
+  }
+  
+  .featured-notes-stats {
+    justify-content: center;
+  }
+  
+  .featured-notes-filter {
+    width: 100%;
+  }
+  
+  .featured-notes-filter :deep(.ant-input-search) {
+    width: 100% !important;
+  }
+  
+  .featured-notes-list {
+    padding: 12px;
+  }
+  
+  .featured-note-card {
+    padding: 12px;
+  }
+  
+  /* 分页控件移动端适配 */
+  .featured-notes-pagination {
+    flex-direction: column;
+    padding: 12px 16px;
+    gap: 12px;
+  }
+  
+  .pagination-info {
+    order: 2;
+    text-align: center;
+  }
+  
+  .pagination-controls {
+    order: 1;
+  }
+  
+  .pagination-size {
+    order: 3;
+  }
+  
+  /* 九宫格在移动端保持3列 */
+  .note-images-grid.grid-9 {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 4px;
+  }
+  
+  /* 图片预览移动端适配 */
+  .image-preview-container {
+    padding: 50px 10px 80px;
+  }
+  
+  .preview-close-btn {
+    top: 10px;
+    right: 10px;
+    width: 40px;
+    height: 40px;
+  }
+  
+  .preview-counter {
+    top: 10px;
+    font-size: 12px;
+    padding: 6px 12px;
+  }
+  
+  .preview-nav-btn {
+    width: 40px;
+    height: 40px;
+  }
+  
+  .preview-prev-btn {
+    left: 10px;
+  }
+  
+  .preview-next-btn {
+    right: 10px;
+  }
+  
+  .preview-thumbnails {
+    bottom: 10px;
+    gap: 6px;
+    padding: 8px;
+  }
+  
+  .preview-thumbnail {
+    width: 50px;
+    height: 50px;
+  }
+}
+
+/* 响应式适配 */
+@media (max-width: 768px) {
+  .portal-header {
+    height: 56px;
+    padding: 0 20px;
+  }
+  .user-name {
+    display: none;
+  }
+  .user-info-wrap {
+    padding: 6px 8px;
+    gap: 6px;
+  }
+}
+
+@media (max-width: 480px) {
+  .portal-header {
+    height: 52px;
+    padding: 0 16px;
+  }
+  .logo-img {
+    height: 34px;
+  }
+  .logo-box {
+    height: 34px;
+  }
+  .user-avatar {
+    width: 28px;
+    height: 28px;
+    border-radius: 8px;
+  }
+  .avatar-text {
+    font-size: 11px;
+  }
+}
+
+/* 页面主体内容区 */
+.monitor-page-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 顶部筛选区 */
+.monitor-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #fff;
+  padding: 16px 24px;
+  border-radius: 8px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  margin: 0 32px 16px;
+  max-width: 1336px;
+  align-self: center;
+  width: calc(100% - 64px);
+}
+
+.filter-bar {
+  flex: 1;
+}
+
+.filter-label {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}
+
+.filter-select {
+  width: 140px;
+}
+
+.filter-date {
+  width: 160px;
+}
+
+.header-actions {
+  display: flex;
+  gap: 12px;
+  margin-left: 24px;
+}
+
+/* 主体内容区 */
+.monitor-content {
+  display: flex;
+  flex: 1;
+  gap: 16px;
+  overflow: hidden;
+  margin: 0 32px 24px;
+  max-width: 1336px;
+  align-self: center;
+  width: calc(100% - 64px);
+  min-height: 500px;
+}
+
+/* 左侧课表区 */
+.monitor-sidebar {
+  width: 280px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* 日期控制区 */
+.sidebar-date-control {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background-color: #f8faff;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.date-picker-wrapper {
+  flex: 1;
+  margin: 0 8px;
+}
+
+.sidebar-date-picker {
+  width: 100%;
+}
+.sidebar-date-picker :deep(.t-input) {
+  border: none;
+  background-color: transparent;
+  font-weight: 500;
+  color: #333;
+  text-align: center;
+}
+.sidebar-date-picker :deep(.t-input:hover) {
+  background-color: rgba(22, 119, 255, 0.05);
+}
+.sidebar-date-picker :deep(.t-input__inner) {
+  text-align: center;
+}
+.sidebar-date-picker :deep(.t-input__suffix) {
+  display: none; /* 隐藏日期图标，让文字居中更美观 */
+}
+
+.sidebar-title {
+  padding: 16px 20px;
+  border-bottom: 1px solid #f0f0f0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sidebar-title h3 {
+  margin: 0;
+  font-size: 16px;
+  color: #333;
+}
+
+.course-count {
+  font-size: 12px;
+  color: #999;
+  background-color: #f5f5f5;
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+
+.course-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+}
+
+.course-list-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  text-align: center;
+}
+
+.course-list-empty .empty-icon {
+  margin-bottom: 16px;
+  opacity: 0.6;
+}
+
+.course-list-empty .empty-text {
+  font-size: 15px;
+  color: #666;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.course-list-empty .empty-desc {
+  font-size: 13px;
+  color: #999;
+}
+
+.course-item {
+  padding: 12px 16px;
+  border: 1px solid #ebeef5;
+  border-radius: 6px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.course-item:hover {
+  border-color: #c0c4cc;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.course-item.is-active {
+  border-color: #1677ff;
+  background-color: #f0f5ff;
+}
+
+.course-time {
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 8px;
+  font-family: monospace;
+}
+
+.course-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.course-main {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.course-subject {
+  font-size: 15px;
+  font-weight: 600;
+  color: #333;
+}
+
+.course-status {
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+
+.status-ended {
+  color: #999;
+}
+.status-ended .status-dot {
+  background-color: #999;
+}
+
+.status-ongoing {
+  color: #52c41a;
+}
+.status-ongoing .status-dot {
+  background-color: #52c41a;
+  box-shadow: 0 0 4px rgba(82, 196, 26, 0.5);
+}
+
+.status-not-started {
+  color: #faad14;
+}
+.status-not-started .status-dot {
+  background-color: #faad14;
+}
+
+/* 右侧主区域 */
+.monitor-main {
+  flex: 1;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.main-placeholder {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.main-placeholder .placeholder-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 40px;
+}
+
+.main-placeholder .placeholder-icon {
+  margin-bottom: 24px;
+  opacity: 0.5;
+}
+
+.main-placeholder .placeholder-title {
+  font-size: 18px;
+  color: #666;
+  font-weight: 500;
+  margin: 0 0 12px 0;
+}
+
+.main-placeholder .placeholder-desc {
+  font-size: 14px;
+  color: #999;
+  margin: 0;
+}
+
+.main-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.content-header {
+  padding: 20px 24px;
+  border-bottom: 1px solid #f0f0f0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.content-header h2 {
+  margin: 0;
+  font-size: 18px;
+  color: #333;
+}
+
+.content-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.featured-notes-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  background: linear-gradient(135deg, #1677ff 0%, #69c0ff 100%);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.featured-notes-btn:hover {
+  background: linear-gradient(135deg, #4096ff 0%, #85d6ff 100%);
+  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.3);
+}
+
+.featured-notes-btn:active {
+  transform: scale(0.98);
+}
+
+.content-status {
+  font-size: 14px;
+  color: #666;
+}
+
+.content-body {
+  flex: 1;
+  padding: 24px;
+  overflow-y: auto;
+}
+
+.placeholder-box {
+  height: 100%;
+  border: 2px dashed #e8e8e8;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #fafafa;
+  color: #999;
+}
+
+.placeholder-box p {
+  margin: 0;
+  font-size: 16px;
+}
+
+.placeholder-box .sub-text {
+  margin-top: 8px;
+  font-size: 13px;
+  color: #bfbfbf;
+}
+
+/* 表格筛选区域 */
+.table-filters {
+  margin-bottom: 20px;
+  padding: 16px 20px;
+  background: linear-gradient(145deg, #ffffff 0%, #f8faff 100%);
+  border-radius: 10px;
+  border: 1px solid #e8e8e8;
+  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.04);
+}
+
+.table-filters :deep(.ant-space) {
+  flex-wrap: wrap;
+}
+
+.table-filters :deep(.ant-select) {
+  border-radius: 8px;
+}
+
+.table-filters :deep(.ant-select-selector) {
+  border-radius: 8px;
+  border-color: #d9d9d9;
+  transition: all 0.3s ease;
+}
+
+.table-filters :deep(.ant-select:hover .ant-select-selector) {
+  border-color: #40a9ff;
+  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
+}
+
+.table-filters :deep(.ant-select-focused .ant-select-selector) {
+  border-color: #1677ff !important;
+  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.15) !important;
+}
+
+.table-filters :deep(.ant-input-search) {
+  border-radius: 8px;
+}
+
+.table-filters :deep(.ant-input) {
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.table-filters :deep(.ant-input:hover) {
+  border-color: #40a9ff;
+}
+
+.table-filters :deep(.ant-input:focus) {
+  border-color: #1677ff;
+  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.15);
+}
+
+/* 学生数据表格 */
+.student-table {
+  width: 100%;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+}
+
+.student-table :deep(.ant-table) {
+  font-size: 13px;
+}
+
+.student-table :deep(.ant-table-thead > tr > th) {
+  background: linear-gradient(to bottom, #f0f5ff 0%, #e6f0ff 100%);
+  color: #333;
+  font-weight: 600;
+  padding: 14px 10px;
+  border-bottom: 2px solid #d6e4ff;
+  font-size: 13px;
+}
+
+.student-table :deep(.ant-table-tbody > tr > td) {
+  padding: 12px 10px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.student-table :deep(.ant-table-tbody > tr:hover > td) {
+  background-color: #f5f9ff !important;
+  transition: background-color 0.2s ease;
+}
+
+/* 可点击行样式 - 已上线学生（蓝色系） */
+.student-table :deep(.ant-table-tbody > tr.clickable-row > td) {
+  background-color: #f0f7ff;
+  transition: background-color 0.2s ease;
+}
+
+.student-table :deep(.ant-table-tbody > tr.clickable-row:hover > td) {
+  background-color: #d6e9ff !important;
+}
+
+/* 不可点击行样式 - 未上线学生（灰色系） */
+.student-table :deep(.ant-table-tbody > tr.non-clickable-row > td) {
+  background-color: #fafafa;
+  opacity: 0.85;
+  transition: background-color 0.2s ease;
+}
+
+.student-table :deep(.ant-table-tbody > tr.non-clickable-row:hover > td) {
+  background-color: #f0f0f0 !important;
+}
+
+.student-table :deep(.ant-table-cell-fix-left) {
+  background: #fff;
+}
+
+.student-table :deep(.ant-table-tbody > tr:hover .ant-table-cell-fix-left) {
+  background: #f5f9ff !important;
+}
+
+.student-table :deep(.ant-table-tbody > tr.clickable-row .ant-table-cell-fix-left) {
+  background: #f0f7ff;
+}
+
+.student-table :deep(.ant-table-tbody > tr.clickable-row:hover .ant-table-cell-fix-left) {
+  background: #d6e9ff !important;
+}
+
+.student-table :deep(.ant-table-tbody > tr.non-clickable-row .ant-table-cell-fix-left) {
+  background: #fafafa;
+}
+
+.student-table :deep(.ant-table-tbody > tr.non-clickable-row:hover .ant-table-cell-fix-left) {
+  background: #f0f0f0 !important;
+}
+
+/* 层次标签样式 */
+.student-table :deep(.t-tag) {
+  font-weight: 500;
+  font-size: 12px;
+}
+
+/* 正确率单元格样式 */
+.rate-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 100px;
+}
+
+.rate-cell :deep(.t-progress__inner) {
+  border-radius: 4px;
+}
+
+.rate-cell :deep(.t-progress__bar) {
+  border-radius: 4px;
+  background: #f0f0f0;
+}
+
+.rate-value {
+  font-weight: 600;
+  font-size: 13px;
+  color: #333;
+  min-width: 36px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+/* 可点击姓名样式 */
+.clickable-name {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  transition: all 0.2s ease;
+}
+
+.clickable-name:hover {
+  color: #1677ff;
+}
+
+.clickable-name:hover .detail-icon {
+  opacity: 1;
+  transform: translateX(2px);
+}
+
+.name-text {
+  color: #1677ff;
+  font-weight: 500;
+}
+
+.detail-icon {
+  opacity: 0;
+  transition: all 0.2s ease;
+  color: #1677ff;
+}
+
+/* 课程未就绪提示 */
+.course-not-ready {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 400px;
+  text-align: center;
+  padding: 40px 20px;
+}
+
+.not-ready-icon {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #e6f4ff 0%, #f0f5ff 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 24px;
+}
+
+.not-ready-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  margin: 0 0 12px 0;
+}
+
+.not-ready-desc {
+  font-size: 14px;
+  color: #666;
+  margin: 0;
+  max-width: 400px;
+  line-height: 1.6;
+}
+
+/* 数据更新提示 */
+.data-update-notice {
+  background: linear-gradient(135deg, #f6ffed 0%, #f0f5ff 100%);
+  border-bottom: 1px solid #d9f7be;
+  padding: 8px 24px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.notice-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: #52c41a;
+}
+
+.notice-icon {
+  flex-shrink: 0;
+}
+
+.notice-text {
+  font-weight: 500;
+}
+
+.notice-divider {
+  color: #b7eb8f;
+  margin: 0 4px;
+}
+
+.notice-time {
+  color: #73d13d;
+}
+
+/* 响应式布局 */
+@media (max-width: 1200px) {
+  .monitor-content {
+    flex-direction: column;
+  }
+  
+  .monitor-sidebar {
+    width: 100%;
+    max-height: 300px;
+  }
+  
+  .monitor-main {
+    min-height: 400px;
+  }
+}
+
+@media (max-width: 768px) {
+  .monitor-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+  
+  .filter-bar {
+    width: 100%;
+  }
+  
+  .table-filters {
+    padding: 12px;
+  }
+  
+  .table-filters :deep(.ant-space) {
+    flex-wrap: wrap;
+    gap: 8px !important;
+  }
+  
+  .table-filters :deep(.ant-select) {
+    width: 100% !important;
+    min-width: 120px;
+  }
+  
+  .table-filters :deep(.ant-input-search) {
+    width: 100% !important;
+  }
+  
+  .content-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+  
+  .data-update-notice {
+    padding: 8px 16px;
+    justify-content: center;
+  }
+  
+  .notice-content {
+    flex-wrap: wrap;
+    justify-content: center;
+    text-align: center;
+  }
+  
+  .notice-divider {
+    display: none;
+  }
+  
+  .content-body {
+    padding: 16px;
+  }
+}
+
+/* 今日数据汇总按钮 */
+.summary-button-wrapper {
+  padding: 16px;
+  border-top: 1px solid #f0f0f0;
+  background-color: #fff;
+}
+
+.summary-button {
+  width: 100%;
+  padding: 12px 20px;
+  background: linear-gradient(135deg, #1677ff 0%, #69b1ff 100%);
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.25);
+}
+
+.summary-button:hover {
+  background: linear-gradient(135deg, #4096ff 0%, #8cc8ff 100%);
+  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.35);
+  transform: translateY(-1px);
+}
+
+.summary-button:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 6px rgba(22, 119, 255, 0.25);
+}
+
+.summary-icon {
+  flex-shrink: 0;
+}
+
+/* 模态框样式 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 20px;
+}
+
+.modal-container {
+  background-color: #fff;
+  border-radius: 12px;
+  width: 100%;
+  max-width: 800px;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  animation: modalSlideIn 0.3s ease;
+}
+
+@keyframes modalSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 24px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.modal-title-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.modal-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.modal-update-notice {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  color: #52c41a;
+}
+
+.modal-update-notice .update-time {
+  color: #999;
+}
+
+.modal-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.export-button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  background: linear-gradient(135deg, #52c41a 0%, #95de64 100%);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.export-button:hover {
+  background: linear-gradient(135deg, #73d13d 0%, #b7eb8f 100%);
+  box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
+}
+
+.export-button:active {
+  transform: scale(0.98);
+}
+
+.modal-close {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+  transition: all 0.2s ease;
+}
+
+.modal-close:hover {
+  background-color: #f5f5f5;
+  color: #666;
+}
+
+.modal-body {
+  padding: 20px 24px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+/* 汇总页签样式 */
+.summary-tabs :deep(.ant-tabs-nav) {
+  margin-bottom: 16px;
+}
+
+.summary-tabs :deep(.ant-tabs-tab) {
+  padding: 8px 12px;
+  font-size: 14px;
+}
+
+.tab-label {
+  cursor: help;
+}
+
+.tab-tip-icon {
+  margin-left: 4px;
+  vertical-align: middle;
+  color: #999;
+  cursor: help;
+}
+
+.tab-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.stat-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.stat-info {
+  font-size: 14px;
+  color: #666;
+  padding: 12px 16px;
+  background-color: #f6ffed;
+  border-radius: 6px;
+  border-left: 3px solid #52c41a;
+  flex: 1;
+  min-width: 200px;
+}
+
+.stat-info strong {
+  color: #52c41a;
+  font-size: 18px;
+  margin: 0 4px;
+}
+
+.tab-export-button {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 14px;
+  background: linear-gradient(135deg, #52c41a 0%, #95de64 100%);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.tab-export-button:hover {
+  background: linear-gradient(135deg, #73d13d 0%, #b7eb8f 100%);
+  box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
+}
+
+.tab-export-button:active {
+  transform: scale(0.98);
+}
+
+.summary-table :deep(.ant-table) {
+  font-size: 13px;
+}
+
+.summary-table :deep(.ant-table-thead > tr > th) {
+  background-color: #f0f5ff;
+  color: #333;
+  font-weight: 600;
+  padding: 10px 8px;
+}
+
+.summary-table :deep(.ant-table-tbody > tr > td) {
+  padding: 8px;
+}
+
+/* 模态框响应式 */
+@media (max-width: 768px) {
+  .modal-overlay {
+    padding: 10px;
+  }
+  
+  .modal-container {
+    max-height: 95vh;
+    border-radius: 8px;
+  }
+  
+  .modal-header {
+    padding: 16px 20px;
+  }
+  
+  .modal-body {
+    padding: 16px 20px;
+  }
+  
+  .summary-tabs :deep(.ant-tabs-tab) {
+    padding: 6px 12px;
+    font-size: 13px;
+  }
+  
+  .stat-info {
+    font-size: 13px;
+    padding: 10px 12px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/PortalHomePage.vue b/src/components/PortalHomePage.vue
index fa03cfb..57860dc 100644
--- a/src/components/PortalHomePage.vue
+++ b/src/components/PortalHomePage.vue
@@ -108,6 +108,20 @@
               <span class="card-label">笔记评优</span>
               <span class="card-arrow">→</span>
             </div>
+            
+            <div class="feature-card" @click="handleCardClick('online-monitor')">
+              <div class="card-icon-wrap card-icon-cyan">
+                <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
+                  <rect x="2" y="3" width="20" height="14" rx="2" stroke="#13c2c2" stroke-width="1.8"/>
+                  <path d="M8 21h8M12 17v4" stroke="#13c2c2" stroke-width="1.8" stroke-linecap="round"/>
+                  <circle cx="12" cy="10" r="2" stroke="#13c2c2" stroke-width="1.6"/>
+                  <path d="M9 7.5a4.5 4.5 0 0 1 6 0" stroke="#13c2c2" stroke-width="1.5" stroke-linecap="round"/>
+                  <path d="M7 5.5a7 7 0 0 1 10 0" stroke="#13c2c2" stroke-width="1.5" stroke-linecap="round"/>
+                </svg>
+              </div>
+              <span class="card-label">在线学习监控</span>
+              <span class="card-arrow">→</span>
+            </div>
             <div class="feature-card" @click="handleCardClick('report')">
               <div class="card-icon-wrap card-icon-green">
                 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
@@ -180,6 +194,14 @@ const handleCardClick = (cardId) => {
     router.push('/report-home')
     return
   }
+  if (cardId === 'online-monitor') {
+    router.push('/online-learning-monitor')
+    return
+  }
+  if (cardId === 'learning-overview') {
+    router.push('/learning-overview')
+    return
+  }
   emit('card-click', cardId)
 }
 
@@ -571,6 +593,16 @@ const handleLogout = () => {
   box-shadow: 0 2px 8px rgba(82, 196, 26, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
 }
 
+.card-icon-cyan {
+  background: linear-gradient(135deg, #e6fffb 0%, #b5f5ec 100%);
+  box-shadow: 0 2px 8px rgba(19, 194, 194, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+
+.card-icon-purple {
+  background: linear-gradient(135deg, #f9f0ff 0%, #efdbff 100%);
+  box-shadow: 0 2px 8px rgba(114, 46, 209, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+
 .card-label {
   font-size: 15px;
   color: #1a1a2e;
diff --git a/src/router/index.js b/src/router/index.js
index c533964..48bc602 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -60,6 +60,16 @@ const routes = [
     path: '/english-word-report',
     name: 'EnglishWordReport',
     component: () => import('../components/EnglishWordReport.vue')
+  },
+  {
+    path: '/online-learning-monitor',
+    name: 'OnlineLearningMonitor',
+    component: () => import('../components/OnlineLearningMonitorPage.vue')
+  },
+  {
+    path: '/learning-overview',
+    name: 'LearningOverview',
+    component: () => import('../components/LearningOverviewPage.vue')
   }
 ]