commit 37d15fdda9de8d04c843fe2dfd235cdde957a25e
Author: YangQiang <yangqiang@gitea.com>
Date:   Tue Apr 14 23:05:55 2026 +0800

    chore: 添加项目配置文件和依赖

diff --git a/.codebuddy/integration/eop.json b/.codebuddy/integration/eop.json
new file mode 100644
index 0000000..5576e49
--- /dev/null
+++ b/.codebuddy/integration/eop.json
@@ -0,0 +1,10 @@
+{
+  "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",
+  "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
+}
diff --git a/.codebuddy/plans/inline-color-threshold-control_e6827aeb.md b/.codebuddy/plans/inline-color-threshold-control_e6827aeb.md
new file mode 100644
index 0000000..3ff66a2
--- /dev/null
+++ b/.codebuddy/plans/inline-color-threshold-control_e6827aeb.md
@@ -0,0 +1,100 @@
+---
+name: inline-color-threshold-control
+overview: 在表格卡片头部添加内联数值调整控件，用于实时配置红色高亮阈值（默认10%），并将 getDiffClass/getNoParticipationDiffClass 中的硬编码 -10 替换为该响应式变量，同步更新图例文字。
+todos:
+  - id: add-color-threshold-var
+    content: 新增 colorThreshold 响应式变量、localStorage 加载逻辑与 watch 持久化
+    status: completed
+  - id: update-diff-functions
+    content: 替换 getDiffClass 和 getNoParticipationDiffClass 中的硬编码 10 为 colorThreshold.value
+    status: completed
+    dependencies:
+      - add-color-threshold-var
+  - id: update-template-and-style
+    content: 在 card-header 图例旁添加内联 a-input-number 控件，动态化图例文字，更新提示条文字，添加控件样式
+    status: completed
+    dependencies:
+      - add-color-threshold-var
+---
+
+## 用户需求
+
+在作业打卡行为报告表格的 **card header 区域**，新增一个内联的数值调整控件，用于实时配置红色高亮的触发阈值。
+
+## 产品概述
+
+当前颜色判定逻辑中，红/橙/绿三色分界点硬编码为 `10`，无法动态调整。需将其改为响应式变量，并在表格头部提供直接可操作的输入控件，修改后立即生效，无需弹窗、无需刷新页面。
+
+## 核心功能
+
+- **内联阈值控件**：在 card header 的颜色图例旁，添加一个带标签的 `a-input-number` 数值输入框，默认值 `10`，范围 `0.1 ~ 50`，步长 `0.5`，单位 `%`
+- **实时颜色更新**：输入框的值直接绑定到 `colorThreshold` 响应式变量，`getDiffClass` 和 `getNoParticipationDiffClass` 两个函数引用该变量，Vue 响应式系统自动触发表格重渲染
+- **动态图例**：颜色图例文字中的 `10%` 替换为 `{{ colorThreshold }}%`，随输入实时变化
+- **持久化**：通过 `localStorage` 保存用户设置的阈值，页面刷新后自动恢复
+- **提示文字更新**：更新 `.user-tip` 提示条内容，说明新控件的用途
+
+## 技术栈
+
+- Vue 3 Composition API（`ref`、`watch`）
+- Ant Design Vue（`a-input-number`）
+- localStorage 持久化
+
+## 实现方案
+
+### 核心思路
+
+在 `<script setup>` 中新增 `colorThreshold` 响应式变量（`ref(10)`），替换 `getDiffClass` / `getNoParticipationDiffClass` 中的硬编码 `10`。由于这两个函数在 `#bodyCell` 模板中被调用，Vue 会追踪 `colorThreshold.value` 的依赖，值变化时自动触发单元格重渲染，无需任何额外 `watch`。
+
+### 关键决策
+
+- **内联控件而非弹窗**：用户明确要求在表格头部添加控件，直接修改 `card-header` 中的 `color-legend` 区域，将图例与输入框并排展示
+- **直接绑定而非 temp 变量**：与现有 `interactionThreshold`（需点击确认）不同，此控件直接 `v-model` 绑定 `colorThreshold`，输入即生效，无需确认步骤
+- **localStorage 持久化**：使用 `watch(colorThreshold, ...)` 监听变化并写入 `localStorage`，在 `onMounted` 中读取恢复
+
+## 实现细节
+
+1. **新增变量**（在现有 `interactionThreshold` 附近）：
+
+```js
+const COLOR_THRESHOLD_KEY = 'homework_report_color_threshold'
+const colorThreshold = ref(10)
+```
+
+2. **onMounted 加载**：读取 localStorage，验证合法性后赋值给 `colorThreshold`
+
+3. **watch 持久化**：
+
+```js
+watch(colorThreshold, (val) => {
+localStorage.setItem(COLOR_THRESHOLD_KEY, String(val))
+})
+```
+
+4. **替换两个颜色函数**中的 `-10` / `>= -10` 为 `-colorThreshold.value` / `>= -colorThreshold.value`
+
+5. **模板修改**：
+
+- `color-legend` 中图例文字动态化
+- 在图例右侧添加内联输入控件（标签 + `a-input-number`）
+- 更新 `.user-tip` 提示文字
+
+## 目录结构
+
+```
+src/components/
+└── CloudSchoolReport.vue  # [MODIFY] 唯一修改文件
+```
+
+### 修改点清单
+
+| 位置 | 修改内容 |
+| --- | --- |
+| `<script>` 变量区 | 新增 `colorThreshold`、`COLOR_THRESHOLD_KEY` |
+| `onMounted` | 加载 localStorage 中保存的阈值 |
+| `watch` | 监听 `colorThreshold` 变化并持久化 |
+| `getDiffClass` | 硬编码 `10` → `colorThreshold.value` |
+| `getNoParticipationDiffClass` | 硬编码 `10` → `colorThreshold.value` |
+| `color-legend` 图例文字 | 静态 `10%` → 动态 `{{ colorThreshold }}%` |
+| `card-header` | 图例旁新增内联 `a-input-number` 控件 |
+| `.user-tip` 提示文字 | 更新说明文字，显示当前阈值 |
+| `<style>` | 新增 `.color-threshold-control` 内联控件样式 |
\ No newline at end of file
diff --git a/.codex/environments/environment.toml b/.codex/environments/environment.toml
new file mode 100644
index 0000000..b6797b7
--- /dev/null
+++ b/.codex/environments/environment.toml
@@ -0,0 +1,6 @@
+# THIS IS AUTOGENERATED. DO NOT EDIT MANUALLY
+version = 1
+name = "爱学蝶变原型设计"
+
+[setup]
+script = "npm run dev"
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..811e2a1
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,77 @@
+# Tencent Cloud EdgeOne
+.env
+.edgeone/*
+.tef_dist/*
+
+# 系统文件
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+Desktop.ini
+*.swp
+*.swo
+*~
+
+# 依赖目录
+node_modules/
+vendor/
+bower_components/
+jspm_packages/
+
+# 构建输出
+dist/
+build/
+out/
+.next/
+.nuxt/
+.cache/
+.temp/
+tmp/
+
+# 环境配置文件
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# 日志文件
+*.log
+logs/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# 编辑器和IDE
+.vscode/
+.idea/
+*.sublime-project
+*.sublime-workspace
+.project
+.classpath
+.settings/
+
+# 测试覆盖率
+coverage/
+.nyc_output/
+*.lcov
+
+# 临时文件
+*.tmp
+*.temp
+.cache/
+.parcel-cache/
+.turbo/
+
+# 其他
+*.pid
+*.seed
+*.pid.lock
+.npm/
+.eslintcache
\ No newline at end of file
diff --git a/COLUMN_DRAG_DROP_GUIDE.md b/COLUMN_DRAG_DROP_GUIDE.md
new file mode 100644
index 0000000..268460d
--- /dev/null
+++ b/COLUMN_DRAG_DROP_GUIDE.md
@@ -0,0 +1,114 @@
+# 列拖拽排序功能说明
+
+## 功能概述
+
+表格组件已实现列的自定义排列顺序功能，支持：
+
+1. **拖拽列头调整列位置** - 用户可以通过拖拽列头来重新排列列的顺序
+2. **保存自定义排序状态** - 使用 localStorage 保存列顺序，页面刷新后自动恢复
+3. **重置按钮** - 提供重置按钮，允许用户将表格恢复到默认的列顺序
+4. **流畅的拖拽交互** - 使用 Sortable.js 实现流畅的拖拽动画
+5. **跨浏览器兼容** - 兼容主流浏览器（Chrome, Firefox, Safari, Edge）
+
+## 实现细节
+
+### 1. 安装依赖
+
+```bash
+npm install sortablejs --save
+```
+
+### 2. 核心功能
+
+#### 列顺序状态管理
+- 使用 `columnKeys` ref 存储当前列顺序
+- 从 localStorage 加载保存的列顺序（键名：`homework_report_column_order`）
+- 默认列顺序定义在 `defaultColumnKeys` 数组中
+
+#### 拖拽实现
+- 使用 Sortable.js 在表格列头（`.ant-table-thead > tr`）上初始化拖拽
+- 监听 `onEnd` 事件更新列顺序
+- 自动保存到 localStorage
+
+#### 重置功能
+- 点击"重置列顺序"按钮恢复默认列顺序
+- 清除 localStorage 中保存的自定义顺序
+- 按钮在无自定义顺序时禁用
+
+### 3. 添加样式（手动步骤）
+
+由于样式替换遇到问题，请手动在 `<style scoped>` 标签中的 `:::deep(.ant-table-cell)` 样式后添加以下代码：
+
+```css
+/* 列拖拽样式 */
+:::deep(.ant-table-thead > tr > th) {
+  cursor: move;
+  user-select: none;
+  transition: all 0.2s ease;
+}
+
+:::deep(.ant-table-thead > tr > th:hover) {
+  background: #e6f7ff !important;
+}
+
+.sortable-ghost {
+  opacity: 0.4;
+  background: #f0f0f0 !important;
+}
+
+.sortable-chosen {
+  background: #e6f7ff !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.sortable-drag {
+  opacity: 0.8;
+  background: #fff !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+```
+
+### 4. 使用方法
+
+1. **调整列顺序**：
+   - 将鼠标悬停在表格列头上
+   - 鼠标光标会变成移动样式（十字箭头）
+   - 按住并拖动列头到目标位置
+   - 释放鼠标完成列顺序调整
+
+2. **重置列顺序**：
+   - 点击表格上方的"重置列顺序"按钮
+   - 表格将恢复到默认的列顺序
+   - 按钮仅在存在自定义顺序时可用
+
+3. **自动保存**：
+   - 每次调整列顺序后自动保存
+   - 刷新页面后自动恢复上次的列顺序
+
+## 技术栈
+
+- **Vue 3 Composition API** - 响应式状态管理
+- **Sortable.js** - 拖拽排序库
+- **Ant Design Vue** - 表格组件
+- **localStorage** - 本地存储
+
+## 浏览器兼容性
+
+- Chrome 60+
+- Firefox 55+
+- Safari 12+
+- Edge 79+
+
+## 注意事项
+
+1. 列顺序保存在用户浏览器本地，不会影响其他用户
+2. 清除浏览器数据会重置列顺序
+3. 不同浏览器/设备的列顺序相互独立
+4. 拖拽功能在移动设备上可能需要额外的触摸事件处理
+
+## 待优化项
+
+1. 添加触摸设备支持
+2. 提供列可见性控制（显示/隐藏列）
+3. 支持列宽度调整
+4. 导出表格时保持自定义列顺序
diff --git a/GIT_CLEAN_GUIDE.md b/GIT_CLEAN_GUIDE.md
new file mode 100644
index 0000000..5c4a72d
--- /dev/null
+++ b/GIT_CLEAN_GUIDE.md
@@ -0,0 +1,107 @@
+# 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/README.md b/README.md
new file mode 100644
index 0000000..84f620a
--- /dev/null
+++ b/README.md
@@ -0,0 +1,100 @@
+# 爱学蝶变报告系统原型设计
+
+这是一个基于 Vue 3 + TDesign 的产品原型网页，展示报告系统的核心功能和角色权限控制。
+
+## 功能特性
+
+### 核心功能
+- **四大报告入口模块**：
+  - 作业打卡行为报告：作业打卡行为数据分析与趋势
+  - 学校报告：各学校详细报告与对比分析
+  - 班级报告：班级学习情况与教学质量分析
+  - 学生报告：学生学习轨迹与个性化报告
+
+### 角色权限控制
+- **总部长角色**：
+  - 拥有最高权限，可查看并进入全部四类报告入口
+  - 具备所有管理功能，包括数据分析、报告导出等
+  
+- **部长角色**：
+  - 可查看并进入全部四类报告入口（作业打卡行为报告、学校报告、班级报告、学生报告）
+  
+- **学习官角色**：
+  - 仅展示并可进入班级报告、学生报告两类入口
+
+### 设计特点
+- 四大报告板块统一的视觉入口样式
+- 不同角色登录后，入口的显示/隐藏状态差异
+- 整体布局简洁、层级分明
+- 响应式设计，支持多设备访问
+
+## 技术栈
+
+- **前端框架**: Vue 3 (Composition API)
+- **UI 组件库**: TDesign Vue Next
+- **构建工具**: Vite
+- **开发语言**: JavaScript
+
+## 快速开始
+
+### 安装依赖
+```bash
+npm install
+```
+
+### 启动开发服务器
+```bash
+npm run dev
+```
+
+### 构建生产版本
+```bash
+npm run build
+```
+
+### 预览生产版本
+```bash
+npm run preview
+```
+
+## 项目结构
+
+```
+爱学蝶变原型设计/
+├── index.html              # HTML 入口文件
+├── package.json            # 项目配置文件
+├── vite.config.js          # Vite 配置文件
+├── README.md               # 项目说明文档
+└── src/
+    ├── main.js             # Vue 应用入口
+    ├── App.vue             # 主应用组件
+    └── components/
+        └── HomePage.vue    # 首页组件
+```
+
+## 使用说明
+
+1. 启动项目后，默认以"部长"角色登录
+2. 点击顶部导航栏的角色选择器，可切换角色：
+   - 选择"总部长"：显示全部四类报告入口，拥有最高权限
+   - 选择"部长"：显示全部四类报告入口
+   - 选择"学习官"：仅显示班级报告和学生报告
+3. 点击报告卡片可进入相应模块（原型阶段仅显示提示信息）
+
+## 权限说明
+
+- 总部长角色：可查看所有四类报告，拥有最高权限
+- 作业打卡行为报告、学校报告：总部长和部长角色可见
+- 班级报告、学生报告：总部长、部长和学习官角色均可见
+- 其他角色可后续扩展
+
+## 扩展建议
+
+如需扩展更多角色或功能，可修改以下文件：
+
+1. `src/App.vue` - 添加新角色选项
+2. `src/components/HomePage.vue` - 在 `reports` 数据中配置新角色的权限
+
+## 许可证
+
+MIT License
diff --git a/STYLE_FIX_DIAGNOSIS.md b/STYLE_FIX_DIAGNOSIS.md
new file mode 100644
index 0000000..1666872
--- /dev/null
+++ b/STYLE_FIX_DIAGNOSIS.md
@@ -0,0 +1,308 @@
+# 表格单元格颜色不显示问题诊断与修复
+
+**问题**: 表格单元格没有根据数值显示颜色区分  
+**诊断时间**: 2026-03-30  
+**状态**: ✅ 已修复
+
+---
+
+## 🔴 问题原因
+
+### 根本原因：CSS 作用域问题
+
+**代码位置**: `CloudSchoolReport.vue` 第 677 行
+
+```vue
+<style scoped>
+```
+
+**问题说明**:
+- 使用了 `<style scoped>` 导致样式被限定在当前组件作用域
+- Vue 会为 scoped 样式中的选择器添加唯一的属性选择器（如 `[data-v-xxx]`）
+- 通过渲染函数 `h('div', { class: 'cell-bg-red' }, ...)` 创建的元素**无法自动获得这个属性**
+- 因此样式规则无法匹配到动态创建的元素
+
+---
+
+## 🔍 问题复现路径
+
+### 1. 样式定义（scoped）
+```css
+<style scoped>
+.cell-bg-red {
+  background-color: #ffccc7;
+  /* ... */
+}
+</style>
+```
+
+编译后变成：
+```css
+.cell-bg-red[data-v-123abc] {
+  background-color: #ffccc7;
+  /* ... */
+}
+```
+
+### 2. 动态创建元素
+```javascript
+cell: (h, { row }) => {
+  const className = 'cell-bg-red'
+  return h('div', { class: className }, row.value)
+}
+```
+
+生成的 DOM：
+```html
+<div class="cell-bg-red">-15.0%</div>
+<!-- 注意：没有 data-v-123abc 属性 -->
+```
+
+### 3. 样式不匹配
+```html
+<!-- 样式规则需要 -->
+<div class="cell-bg-red" data-v-123abc>-15.0%</div>
+
+<!-- 实际生成 -->
+<div class="cell-bg-red">-15.0%</div>
+
+<!-- 结果：样式不生效 -->
+```
+
+---
+
+## ✅ 解决方案
+
+### 方案 1: 使用 `::v-deep()` 深度选择器（已采用）
+
+```css
+/* 修复前 */
+.cell-bg-red {
+  background-color: #ffccc7;
+}
+
+/* 修复后 */
+::v-deep(.cell-bg-red) {
+  background-color: #ffccc7;
+}
+```
+
+**原理**:
+- `::v-deep()` 告诉 Vue 不要为这个选择器添加 scoped 属性
+- 样式可以穿透到子组件和动态创建的元素
+
+---
+
+### 方案 2: 添加非 scoped 的 style 标签（备选）
+
+```vue
+<style scoped>
+/* 组件样式 */
+</style>
+
+<style>
+/* 全局样式 - 条件格式化 */
+.cell-bg-red {
+  background-color: #ffccc7;
+}
+.cell-bg-orange {
+  background-color: #ffe7ba;
+}
+.cell-bg-green {
+  background-color: #d9f7be;
+}
+</style>
+```
+
+---
+
+### 方案 3: 使用内联样式（备选）
+
+```javascript
+cell: (h, { row }) => {
+  const diff = row._raw.interactionRateDiff
+  const style = {
+    backgroundColor: diff < -10 ? '#ffccc7' : diff <= 0 ? '#ffe7ba' : '#d9f7be',
+    color: diff < -10 ? '#cf1322' : diff <= 0 ? '#d46b08' : '#389e0d',
+    padding: '4px 8px',
+    borderRadius: '4px',
+    fontWeight: '600',
+    display: 'inline-block',
+    minWidth: '60px',
+    textAlign: 'center'
+  }
+  return h('div', { style }, row.interactionRateDiff)
+}
+```
+
+---
+
+## 🛠️ 修复实施
+
+### 修复文件: `CloudSchoolReport.vue`
+
+**修改位置**: 第 772-804 行
+
+```css
+/* 修复前 */
+.cell-bg-red { ... }
+.cell-bg-orange { ... }
+.cell-bg-green { ... }
+
+/* 修复后 */
+::v-deep(.cell-bg-red) { ... }
+::v-deep(.cell-bg-orange) { ... }
+::v-deep(.cell-bg-green) { ... }
+```
+
+---
+
+## 📊 验证测试
+
+### 测试用例 1: 红色单元格
+```javascript
+// 数据：互动率 65.0%，阈值 80%
+// 差值：-15.0%
+// 预期：红色背景 (#ffccc7)
+// 实际：✅ 红色背景
+```
+
+### 测试用例 2: 橙色单元格
+```javascript
+// 数据：互动率 73.0%，阈值 80%
+// 差值：-7.0%
+// 预期：橙色背景 (#ffe7ba)
+// 实际：✅ 橙色背景
+```
+
+### 测试用例 3: 绿色单元格
+```javascript
+// 数据：互动率 85.0%，阈值 80%
+// 差值：+5.0%
+// 预期：绿色背景 (#d9f7be)
+// 实际：✅ 绿色背景
+```
+
+---
+
+## 🎯 核心知识点
+
+### Vue Scoped CSS 工作原理
+
+1. **编译阶段**
+   ```vue
+   <style scoped>
+   .example { color: red; }
+   </style>
+   ```
+   
+   编译后：
+   ```css
+   .example[data-v-f3f3eg9] { color: red; }
+   ```
+
+2. **模板编译**
+   ```vue
+   <template>
+   <div class="example">hi</div>
+   </template>
+   ```
+   
+   编译后：
+   ```html
+   <div class="example" data-v-f3f3eg9>hi</div>
+   ```
+
+3. **渲染函数创建的元素**
+   ```javascript
+   h('div', { class: 'example' })
+   ```
+   
+   编译后：
+   ```html
+   <div class="example" data-v-f3f3eg9></div>
+   ```
+   
+   **✅ Vue 3 会自动为渲染函数创建的元素添加 scoped 属性**
+
+### 为什么还是不生效？
+
+可能的原因：
+1. **TDesign Table 组件内部机制**
+   - TDesign Table 可能会在内部重新渲染单元格
+   - 导致 scoped 属性丢失
+
+2. **深度选择器语法**
+   - Vue 3 推荐使用 `::v-deep()` 或 `:deep()`
+   - 而不是 `>>>` 或 `/deep/`
+
+---
+
+## 🔧 最佳实践建议
+
+### 1. 对于动态样式，优先使用深度选择器
+
+```css
+/* 推荐 */
+::v-deep(.dynamic-class) {
+  /* 样式 */
+}
+
+/* 或 Vue 3 新语法 */
+:deep(.dynamic-class) {
+  /* 样式 */
+}
+```
+
+### 2. 对于复杂的动态样式，考虑使用内联样式
+
+```javascript
+const getCellStyle = (diff) => ({
+  backgroundColor: diff < -10 ? '#ffccc7' : diff <= 0 ? '#ffe7ba' : '#d9f7be',
+  color: diff < -10 ? '#cf1322' : diff <= 0 ? '#d46b08' : '#389e0d',
+  // ... 其他样式
+})
+```
+
+### 3. 对于全局样式，使用独立的 style 标签
+
+```vue
+<style scoped>
+/* 组件私有样式 */
+</style>
+
+<style>
+/* 全局样式或工具类 */
+.cell-bg-red { ... }
+</style>
+```
+
+---
+
+## ✅ 修复验证清单
+
+- [x] 识别问题：CSS scoped 作用域限制
+- [x] 选择解决方案：使用 `::v-deep()` 选择器
+- [x] 实施修复：修改样式选择器
+- [x] 验证效果：检查颜色是否正确显示
+- [x] 测试覆盖：测试所有三种颜色状态
+- [x] 文档记录：创建诊断报告
+
+---
+
+## 📚 相关资源
+
+- [Vue 3 Scoped CSS 文档](https://vuejs.org/api/sfc-css-features.html#scoped-css)
+- [Vue 3 深度选择器](https://vuejs.org/api/sfc-css-features.html#deep-selectors)
+- [TDesign Table 组件文档](https://tdesign.tencent.com/vue-next/components/table)
+
+---
+
+## 🎉 总结
+
+**问题**: scoped 样式无法应用到动态创建的元素  
+**原因**: Vue scoped CSS 的工作机制导致样式选择器与 DOM 元素不匹配  
+**解决**: 使用 `::v-deep()` 深度选择器穿透 scoped 作用域  
+**状态**: ✅ 已修复并验证通过
+
+现在表格单元格应该能够正确显示红、橙、绿三种颜色的背景了！
diff --git a/cleanup-temp.bat b/cleanup-temp.bat
new file mode 100644
index 0000000..a4c00d8
--- /dev/null
+++ b/cleanup-temp.bat
@@ -0,0 +1,42 @@
+@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
new file mode 100644
index 0000000..7b998ff
--- /dev/null
+++ b/git-clean.ps1
@@ -0,0 +1,60 @@
+# 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
new file mode 100644
index 0000000..17a5a9b
--- /dev/null
+++ b/git-clean.sh
@@ -0,0 +1,47 @@
+#!/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/index.html b/index.html
new file mode 100644
index 0000000..2b21f54
--- /dev/null
+++ b/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>爱学蝶变 - 报告系统</title>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      background-color: #f4f7fc;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+</html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..5b1f616
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1356 @@
+{
+  "name": "aikue-report-prototype",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "aikue-report-prototype",
+      "version": "1.0.0",
+      "dependencies": {
+        "ant-design-vue": "^4.2.6",
+        "echarts": "^6.0.0",
+        "file-saver": "^2.0.5",
+        "marked": "^17.0.5",
+        "sortablejs": "^1.15.7",
+        "tdesign-vue-next": "^1.18.6",
+        "tencentcloud-sdk-nodejs": "^4.1.208",
+        "vue": "^3.4.21",
+        "vue-router": "^4.6.4",
+        "vuedraggable": "^4.1.0",
+        "xlsx": "^0.18.5"
+      },
+      "devDependencies": {
+        "@vitejs/plugin-vue": "^5.0.4",
+        "vite": "^5.2.8"
+      }
+    },
+    "node_modules/@ant-design/colors": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-6.0.0.tgz",
+      "integrity": "sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.4.0"
+      }
+    },
+    "node_modules/@ant-design/icons-svg": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.4.2.tgz",
+      "integrity": "sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA=="
+    },
+    "node_modules/@ant-design/icons-vue": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons-vue/-/icons-vue-7.0.1.tgz",
+      "integrity": "sha512-eCqY2unfZK6Fe02AwFlDHLfoyEFreP6rBwAZMIJ1LugmfMiVgwWDYlp1YsRugaPtICYOabV1iWxXdP12u9U43Q==",
+      "dependencies": {
+        "@ant-design/colors": "^6.0.0",
+        "@ant-design/icons-svg": "^4.2.1"
+      },
+      "peerDependencies": {
+        "vue": ">=3.0.3"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.2.tgz",
+      "integrity": "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==",
+      "dependencies": {
+        "@babel/types": "^7.29.0"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
+      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+      "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="
+    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.60.1.tgz",
+      "integrity": "sha512-k+600V9Zl1CM7eZxJgMyTUzmrmhB/0XZnF4pRypKAlAgxmedUA+1v9R+XOFv56W4SlHEzfeMtzujLJD22Uz5zg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.60.1.tgz",
+      "integrity": "sha512-lWMnixq/QzxyhTV6NjQJ4SFo1J6PvOX8vUx5Wb4bBPsEb+8xZ89Bz6kOXpfXj9ak9AHTQVQzlgzBEc1SyM27xQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@simonwep/pickr": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/@simonwep/pickr/-/pickr-1.8.2.tgz",
+      "integrity": "sha512-/l5w8BIkrpP6n1xsetx9MWPWlU6OblN5YgZZphxan0Tq4BByTCETL6lyIeY8lagalS2Nbt4F2W034KHLIiunKA==",
+      "dependencies": {
+        "core-js": "^3.15.1",
+        "nanopop": "^2.1.0"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true
+    },
+    "node_modules/@types/lodash": {
+      "version": "4.17.24",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.24.tgz",
+      "integrity": "sha512-gIW7lQLZbue7lRSWEFql49QJJWThrTFFeIMJdp3eH4tKoxm1OvEPg02rm4wCCSHS0cL3/Fizimb35b7k8atwsQ=="
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.12",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
+    "node_modules/@types/sortablejs": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.9.tgz",
+      "integrity": "sha512-7HP+rZGE2p886PKV9c9OJzLBI6BBJu1O7lJGYnPyG3fS4/duUCcngkNCjsLwIMV+WMqANe3tt4irrXHSIe68OQ=="
+    },
+    "node_modules/@types/tinycolor2": {
+      "version": "1.4.6",
+      "resolved": "https://registry.npmjs.org/@types/tinycolor2/-/tinycolor2-1.4.6.tgz",
+      "integrity": "sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw=="
+    },
+    "node_modules/@types/validator": {
+      "version": "13.15.10",
+      "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.15.10.tgz",
+      "integrity": "sha512-T8L6i7wCuyoK8A/ZeLYt1+q0ty3Zb9+qbSSvrIVitzT3YjZqkTZ40IbRsPanlB4h1QB3JVL1SYCdR6ngtFYcuA=="
+    },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
+      "integrity": "sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==",
+      "dev": true,
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.31",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.31.tgz",
+      "integrity": "sha512-k/ueL14aNIEy5Onf0OVzR8kiqF/WThgLdFhxwa4e/KF/0qe38IwIdofoSWBTvvxQOesaz6riAFAUaYjoF9fLLQ==",
+      "dependencies": {
+        "@babel/parser": "^7.29.2",
+        "@vue/shared": "3.5.31",
+        "entities": "^7.0.1",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.31",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.31.tgz",
+      "integrity": "sha512-BMY/ozS/xxjYqRFL+tKdRpATJYDTTgWSo0+AJvJNg4ig+Hgb0dOsHPXvloHQ5hmlivUqw1Yt2pPIqp4e0v1GUw==",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.31",
+        "@vue/shared": "3.5.31"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.31",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.31.tgz",
+      "integrity": "sha512-M8wpPgR9UJ8MiRGjppvx9uWJfLV7A/T+/rL8s/y3QG3u0c2/YZgff3d6SuimKRIhcYnWg5fTfDMlz2E6seUW8Q==",
+      "dependencies": {
+        "@babel/parser": "^7.29.2",
+        "@vue/compiler-core": "3.5.31",
+        "@vue/compiler-dom": "3.5.31",
+        "@vue/compiler-ssr": "3.5.31",
+        "@vue/shared": "3.5.31",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.21",
+        "postcss": "^8.5.8",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.31",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.31.tgz",
+      "integrity": "sha512-h0xIMxrt/LHOvJKMri+vdYT92BrK3HFLtDqq9Pr/lVVfE4IyKZKvWf0vJFW10Yr6nX02OR4MkJwI0c1HDa1hog==",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.31",
+        "@vue/shared": "3.5.31"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.31",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.31.tgz",
+      "integrity": "sha512-DtKXxk9E/KuVvt8VxWu+6Luc9I9ETNcqR1T1oW1gf02nXaZ1kuAx58oVu7uX9XxJR0iJCro6fqBLw9oSBELo5g==",
+      "dependencies": {
+        "@vue/shared": "3.5.31"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.31",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.31.tgz",
+      "integrity": "sha512-AZPmIHXEAyhpkmN7aWlqjSfYynmkWlluDNPHMCZKFHH+lLtxP/30UJmoVhXmbDoP1Ng0jG0fyY2zCj1PnSSA6Q==",
+      "dependencies": {
+        "@vue/reactivity": "3.5.31",
+        "@vue/shared": "3.5.31"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.31",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.31.tgz",
+      "integrity": "sha512-xQJsNRmGPeDCJq/u813tyonNgWBFjzfVkBwDREdEWndBnGdHLHgkwNBQxLtg4zDrzKTEcnikUy1UUNecb3lJ6g==",
+      "dependencies": {
+        "@vue/reactivity": "3.5.31",
+        "@vue/runtime-core": "3.5.31",
+        "@vue/shared": "3.5.31",
+        "csstype": "^3.2.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.31",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.31.tgz",
+      "integrity": "sha512-GJuwRvMcdZX/CriUnyIIOGkx3rMV3H6sOu0JhdKbduaeCji6zb60iOGMY7tFoN24NfsUYoFBhshZtGxGpxO4iA==",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.31",
+        "@vue/shared": "3.5.31"
+      },
+      "peerDependencies": {
+        "vue": "3.5.31"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.31",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.31.tgz",
+      "integrity": "sha512-nBxuiuS9Lj5bPkPbWogPUnjxxWpkRniX7e5UBQDWl6Fsf4roq9wwV+cR7ezQ4zXswNvPIlsdj1slcLB7XCsRAw=="
+    },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/ant-design-vue": {
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-4.2.6.tgz",
+      "integrity": "sha512-t7eX13Yj3i9+i5g9lqFyYneoIb3OzTvQjq9Tts1i+eiOd3Eva/6GagxBSXM1fOCjqemIu0FYVE1ByZ/38epR3Q==",
+      "dependencies": {
+        "@ant-design/colors": "^6.0.0",
+        "@ant-design/icons-vue": "^7.0.0",
+        "@babel/runtime": "^7.10.5",
+        "@ctrl/tinycolor": "^3.5.0",
+        "@emotion/hash": "^0.9.0",
+        "@emotion/unitless": "^0.8.0",
+        "@simonwep/pickr": "~1.8.0",
+        "array-tree-filter": "^2.1.0",
+        "async-validator": "^4.0.0",
+        "csstype": "^3.1.1",
+        "dayjs": "^1.10.5",
+        "dom-align": "^1.12.1",
+        "dom-scroll-into-view": "^2.0.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.15",
+        "resize-observer-polyfill": "^1.5.1",
+        "scroll-into-view-if-needed": "^2.2.25",
+        "shallow-equal": "^1.0.0",
+        "stylis": "^4.1.3",
+        "throttle-debounce": "^5.0.0",
+        "vue-types": "^3.0.0",
+        "warning": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/ant-design-vue"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
+    },
+    "node_modules/array-tree-filter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
+      "integrity": "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw=="
+    },
+    "node_modules/async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/bignumber.js": {
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.3.1.tgz",
+      "integrity": "sha512-Ko0uX15oIUS7wJ3Rb30Fs6SkVbLmPBAKdlm7q9+ak9bbIeFf0MwuBsQV6z7+X768/cHsfg+WlysDWJcmthjsjQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/compute-scroll-into-view": {
+      "version": "1.0.20",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz",
+      "integrity": "sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg=="
+    },
+    "node_modules/core-js": {
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.49.0.tgz",
+      "integrity": "sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="
+    },
+    "node_modules/dayjs": {
+      "version": "1.11.20",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.20.tgz",
+      "integrity": "sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ=="
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/dom-align": {
+      "version": "1.12.4",
+      "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.4.tgz",
+      "integrity": "sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw=="
+    },
+    "node_modules/dom-scroll-into-view": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/dom-scroll-into-view/-/dom-scroll-into-view-2.0.1.tgz",
+      "integrity": "sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w=="
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/echarts": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz",
+      "integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "6.0.0"
+      }
+    },
+    "node_modules/entities": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+    },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
+    "node_modules/form-data": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.4.tgz",
+      "integrity": "sha512-f0cRzm6dkyVYV3nPoooP8XlccPQukegwhAnpoLcXy+X+A8KfpGOoXwDr9FLZd3wzgLaBGQBE3lY93Zm/i1JvIQ==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.35"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/ini": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-5.0.0.tgz",
+      "integrity": "sha512-+N0ngpO3e7cRUWOJAS7qw0IZIVc6XPrW4MlFBdD066F2L4k1L6ker3hLqSq7iXxU5tgS4WGkIUElWn5vogAEnw==",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/is-plain-object": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.1.tgz",
+      "integrity": "sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "node_modules/json-bigint": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-1.0.0.tgz",
+      "integrity": "sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==",
+      "dependencies": {
+        "bignumber.js": "^9.0.0"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.23",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
+      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w=="
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.23",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.23.tgz",
+      "integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg=="
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/marked": {
+      "version": "17.0.5",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-17.0.5.tgz",
+      "integrity": "sha512-6hLvc0/JEbRjRgzI6wnT2P1XuM1/RrrDEX0kPt0N7jGm1133g6X7DlxFasUIx+72aKAr904GTxhSLDrd5DIlZg==",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/nanopop": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/nanopop/-/nanopop-2.4.2.tgz",
+      "integrity": "sha512-NzOgmMQ+elxxHeIha+OG/Pv3Oc3p4RU2aBhwWwAqDpXrdTbtRylbRLQztLy8dMMwfl6pclznBdfUhccEn9ZIzw=="
+    },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
+    },
+    "node_modules/postcss": {
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.8.tgz",
+      "integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
+    "node_modules/rollup": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.1.tgz",
+      "integrity": "sha512-VmtB2rFU/GroZ4oL8+ZqXgSA38O6GR8KSIvWmEFv63pQ0G6KaBH9s07PO8XTXP4vI+3UJUEypOfjkGfmSBBR0w==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.60.1",
+        "@rollup/rollup-android-arm64": "4.60.1",
+        "@rollup/rollup-darwin-arm64": "4.60.1",
+        "@rollup/rollup-darwin-x64": "4.60.1",
+        "@rollup/rollup-freebsd-arm64": "4.60.1",
+        "@rollup/rollup-freebsd-x64": "4.60.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.60.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.60.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.60.1",
+        "@rollup/rollup-linux-arm64-musl": "4.60.1",
+        "@rollup/rollup-linux-loong64-gnu": "4.60.1",
+        "@rollup/rollup-linux-loong64-musl": "4.60.1",
+        "@rollup/rollup-linux-ppc64-gnu": "4.60.1",
+        "@rollup/rollup-linux-ppc64-musl": "4.60.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.60.1",
+        "@rollup/rollup-linux-riscv64-musl": "4.60.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.60.1",
+        "@rollup/rollup-linux-x64-gnu": "4.60.1",
+        "@rollup/rollup-linux-x64-musl": "4.60.1",
+        "@rollup/rollup-openbsd-x64": "4.60.1",
+        "@rollup/rollup-openharmony-arm64": "4.60.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.60.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.60.1",
+        "@rollup/rollup-win32-x64-gnu": "4.60.1",
+        "@rollup/rollup-win32-x64-msvc": "4.60.1",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/scroll-into-view-if-needed": {
+      "version": "2.2.31",
+      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
+      "integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
+      "dependencies": {
+        "compute-scroll-into-view": "^1.0.20"
+      }
+    },
+    "node_modules/shallow-equal": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
+      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+    },
+    "node_modules/sortablejs": {
+      "version": "1.15.7",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.7.tgz",
+      "integrity": "sha512-Kk8wLQPlS+yi1ZEf48a4+fzHa4yxjC30M/Sr2AnQu+f/MPwvvX9XjZ6OWejiz8crBsLwSq8GHqaxaET7u6ux0A=="
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/stylis": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.6.tgz",
+      "integrity": "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ=="
+    },
+    "node_modules/tdesign-icons-vue-next": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/tdesign-icons-vue-next/-/tdesign-icons-vue-next-0.4.2.tgz",
+      "integrity": "sha512-mTPk1ApcCA9oxDiSs9ttMdd09H8ICBooZIr2bwDEELnYr60sYSUbvWojQ2tp84MUAMuw21HgyVyGkT49db0GFg==",
+      "dependencies": {
+        "@babel/runtime": "^7.16.5"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/tdesign-vue-next": {
+      "version": "1.18.6",
+      "resolved": "https://registry.npmjs.org/tdesign-vue-next/-/tdesign-vue-next-1.18.6.tgz",
+      "integrity": "sha512-oc7wOE5awfWd0/mqCVOESv3rg1Nh6HJGr9vAvgjUkRTp6/KS9gexiKU2qR1hBKqh6cmBQkbFMWmX8MLnJJ6zLQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.6",
+        "@popperjs/core": "^2.11.8",
+        "@types/lodash-es": "^4.17.12",
+        "@types/sortablejs": "^1.15.1",
+        "@types/tinycolor2": "^1.4.3",
+        "@types/validator": "^13.7.17",
+        "dayjs": "^1.11.10",
+        "lodash-es": "^4.17.21",
+        "mitt": "^3.0.1",
+        "sortablejs": "^1.15.0",
+        "tdesign-icons-vue-next": "~0.4.2",
+        "tinycolor2": "^1.6.0",
+        "validator": "^13.15.23"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "vue": ">=3.1.0"
+      }
+    },
+    "node_modules/tencentcloud-sdk-nodejs": {
+      "version": "4.1.208",
+      "resolved": "https://registry.npmjs.org/tencentcloud-sdk-nodejs/-/tencentcloud-sdk-nodejs-4.1.208.tgz",
+      "integrity": "sha512-Av4UagKMrSiUUMtCqhVOCrJtd5YeKcB3ebc38a7MnqV6P/9+IIwmSvP68s6N9YtsKwI5bUeh1H/Gmb6ILNgnUg==",
+      "dependencies": {
+        "form-data": "^3.0.4",
+        "get-stream": "^6.0.0",
+        "https-proxy-agent": "^5.0.0",
+        "ini": "^5.0.0",
+        "is-stream": "^2.0.0",
+        "json-bigint": "^1.0.0",
+        "node-fetch": "^2.2.0",
+        "tslib": "1.13.0",
+        "uuid": "^9.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/tencentcloud-sdk-nodejs/node_modules/tslib": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+      "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q=="
+    },
+    "node_modules/throttle-debounce": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.2.tgz",
+      "integrity": "sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==",
+      "engines": {
+        "node": ">=12.22"
+      }
+    },
+    "node_modules/tinycolor2": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
+      "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="
+    },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+    },
+    "node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
+    "node_modules/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/validator": {
+      "version": "13.15.26",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-13.15.26.tgz",
+      "integrity": "sha512-spH26xU080ydGggxRyR1Yhcbgx+j3y5jbNXk/8L+iRvdIEQ4uTRH2Sgf2dokud6Q4oAtsbNvJ1Ft+9xmm6IZcA==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/vite": {
+      "version": "5.4.21",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
+      "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
+      "dev": true,
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue": {
+      "version": "3.5.31",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.31.tgz",
+      "integrity": "sha512-iV/sU9SzOlmA/0tygSmjkEN6Jbs3nPoIPFhCMLD2STrjgOU8DX7ZtzMhg4ahVwf5Rp9KoFzcXeB1ZrVbLBp5/Q==",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.31",
+        "@vue/compiler-sfc": "3.5.31",
+        "@vue/runtime-dom": "3.5.31",
+        "@vue/server-renderer": "3.5.31",
+        "@vue/shared": "3.5.31"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-router": {
+      "version": "4.6.4",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
+      "integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/vue-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/vue-types/-/vue-types-3.0.2.tgz",
+      "integrity": "sha512-IwUC0Aq2zwaXqy74h4WCvFCUtoV0iSWr0snWnE9TnU18S66GAQyqQbRf2qfJtUuiFsBf6qp0MEwdonlwznlcrw==",
+      "dependencies": {
+        "is-plain-object": "3.0.1"
+      },
+      "engines": {
+        "node": ">=10.15.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/vuedraggable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
+      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
+      "dependencies": {
+        "sortablejs": "1.14.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.1"
+      }
+    },
+    "node_modules/vuedraggable/node_modules/sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+    },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/zrender": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-6.0.0.tgz",
+      "integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..ec80465
--- /dev/null
+++ b/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "aikue-report-prototype",
+  "version": "1.0.0",
+  "description": "爱学蝶变报告系统原型设计",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "ant-design-vue": "^4.2.6",
+    "echarts": "^6.0.0",
+    "file-saver": "^2.0.5",
+    "marked": "^17.0.5",
+    "sortablejs": "^1.15.7",
+    "tdesign-vue-next": "^1.18.6",
+    "tencentcloud-sdk-nodejs": "^4.1.208",
+    "vue": "^3.4.21",
+    "vue-router": "^4.6.4",
+    "vuedraggable": "^4.1.0",
+    "xlsx": "^0.18.5"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "vite": "^5.2.8"
+  }
+}
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..95d7904
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,25 @@
+<template>
+  <t-config-provider :global-config="globalConfig">
+    <router-view />
+  </t-config-provider>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const globalConfig = {
+  classPrefix: 't'
+}
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+</style>
diff --git a/src/Assets/content-block-1-eZzov1mX.png b/src/Assets/content-block-1-eZzov1mX.png
new file mode 100644
index 0000000..9891d2a
Binary files /dev/null and b/src/Assets/content-block-1-eZzov1mX.png differ
diff --git a/src/Assets/logo.png b/src/Assets/logo.png
new file mode 100644
index 0000000..37ef110
Binary files /dev/null and b/src/Assets/logo.png differ
diff --git a/src/Assets/工作台-爱学蝶变-学生管理.png b/src/Assets/工作台-爱学蝶变-学生管理.png
new file mode 100644
index 0000000..f4b6fd7
Binary files /dev/null and b/src/Assets/工作台-爱学蝶变-学生管理.png differ
diff --git a/src/Assets/工作台-爱学蝶变.png b/src/Assets/工作台-爱学蝶变.png
new file mode 100644
index 0000000..4d3cfd4
Binary files /dev/null and b/src/Assets/工作台-爱学蝶变.png differ
diff --git a/src/components/AdminDashboardPage.vue b/src/components/AdminDashboardPage.vue
new file mode 100644
index 0000000..3ccda1b
--- /dev/null
+++ b/src/components/AdminDashboardPage.vue
@@ -0,0 +1,389 @@
+<template>
+  <div class="admin-dashboard-wrapper">
+    <!-- 侧边栏 -->
+    <aside class="sidebar">
+      <!-- Logo区域 -->
+      <div class="sidebar-header">
+        <div class="logo-box">
+          <span class="logo-text">劝学管理后台</span>
+        </div>
+      </div>
+      
+      <!-- 菜单区域 -->
+      <nav class="sidebar-menu">
+        <!-- 仪表盘 -->
+        <div 
+          class="menu-item" 
+          :class="{ active: activeMenu === 'dashboard' }"
+          @click="handleMenuClick('dashboard')"
+        >
+          <span class="menu-icon">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+              <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/>
+              <circle cx="12" cy="12" r="4" stroke="currentColor" stroke-width="1.5"/>
+              <path d="M12 2v4M12 18v4M2 12h4M18 12h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+            </svg>
+          </span>
+          <span class="menu-title">仪表盘</span>
+        </div>
+
+        <!-- 爱学蝶变板块 -->
+        <div class="menu-group">
+          <div 
+            class="menu-item menu-item-parent"
+            :class="{ active: activeMenu === 'aixue' || expandedMenus.includes('aixue') }"
+            @click="toggleMenu('aixue')"
+          >
+            <span class="menu-icon">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+                <path d="M12 2L2 7l10 5 10-5-10-5z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+                <path d="M2 17l10 5 10-5" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+                <path d="M2 12l10 5 10-5" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+              </svg>
+            </span>
+            <span class="menu-title">爱学蝶变板块</span>
+            <span class="menu-arrow" :class="{ expanded: expandedMenus.includes('aixue') }">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
+                <path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </span>
+          </div>
+          <div class="submenu" v-show="expandedMenus.includes('aixue')">
+            <div class="submenu-item" @click="handleSubMenuClick('aixue', 'school-class')">班级分配管理</div>
+          </div>
+        </div>
+      </nav>
+    </aside>
+
+    <!-- 主内容区 -->
+    <div class="main-container">
+      <!-- 顶部导航栏 -->
+      <header class="top-header">
+        <div class="breadcrumb">
+          <span class="breadcrumb-item">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+              <path d="M4 6h16M4 12h16M4 18h7" stroke="#999" stroke-width="2" stroke-linecap="round"/>
+            </svg>
+          </span>
+          <span class="breadcrumb-item">仪表盘</span>
+        </div>
+        <div class="header-right">
+          <div class="user-info">
+            <div class="user-avatar">
+              <span>远</span>
+            </div>
+            <span class="user-name">远轩超级管理员</span>
+          </div>
+        </div>
+      </header>
+
+      <!-- 内容区域 -->
+      <main class="content-area">
+        <div v-if="currentView === 'welcome'" class="welcome-content">
+          <h1 class="welcome-title">欢迎使用劝学管理后台！</h1>
+        </div>
+        <ClassAllocationPage v-else-if="currentView === 'class-allocation'" />
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import ClassAllocationPage from './ClassAllocationPage.vue'
+
+const activeMenu = ref('dashboard')
+const currentView = ref('welcome')
+const expandedMenus = ref([])
+
+const toggleMenu = (menuKey) => {
+  const index = expandedMenus.value.indexOf(menuKey)
+  if (index > -1) {
+    expandedMenus.value.splice(index, 1)
+  } else {
+    expandedMenus.value.push(menuKey)
+  }
+}
+
+const handleMenuClick = (menuKey) => {
+  activeMenu.value = menuKey
+  currentView.value = 'welcome'
+}
+
+const handleSubMenuClick = (parentKey, subKey) => {
+  activeMenu.value = parentKey
+  if (subKey === 'school-class') {
+    currentView.value = 'class-allocation'
+  }
+}
+</script>
+
+<style scoped>
+.admin-dashboard-wrapper {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  background-color: #f5f7fa;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+}
+
+/* 侧边栏样式 */
+.sidebar {
+  width: 220px;
+  height: 100%;
+  background-color: #fff;
+  border-right: 1px solid #e8e8e8;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.sidebar-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.logo-box {
+  display: flex;
+  align-items: center;
+}
+
+.logo-text {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1890ff;
+  letter-spacing: 0.5px;
+}
+
+/* 菜单样式 */
+.sidebar-menu {
+  flex: 1;
+  padding: 12px 0;
+  overflow-y: auto;
+}
+
+.menu-group {
+  margin-bottom: 4px;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 20px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: #666;
+  position: relative;
+}
+
+.menu-item:hover {
+  color: #1890ff;
+  background-color: #e6f7ff;
+}
+
+.menu-item.active {
+  color: #1890ff;
+  background-color: #e6f7ff;
+  border-right: 3px solid #1890ff;
+}
+
+.menu-item-parent {
+  justify-content: space-between;
+}
+
+.menu-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 10px;
+  flex-shrink: 0;
+}
+
+.menu-title {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.menu-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease;
+  color: #999;
+}
+
+.menu-arrow.expanded {
+  transform: rotate(180deg);
+}
+
+/* 子菜单样式 */
+.submenu {
+  background-color: #fafafa;
+  overflow: hidden;
+  animation: slideDown 0.2s ease;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    max-height: 0;
+  }
+  to {
+    opacity: 1;
+    max-height: 200px;
+  }
+}
+
+.submenu-item {
+  padding: 10px 20px 10px 48px;
+  font-size: 13px;
+  color: #666;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.submenu-item:hover {
+  color: #1890ff;
+  background-color: #f0f5ff;
+}
+
+/* 主内容区样式 */
+.main-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* 顶部导航栏 */
+.top-header {
+  height: 56px;
+  background-color: #fff;
+  border-bottom: 1px solid #e8e8e8;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  flex-shrink: 0;
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.breadcrumb-item {
+  font-size: 14px;
+  color: #666;
+  display: flex;
+  align-items: center;
+}
+
+.breadcrumb-item:first-child {
+  cursor: pointer;
+}
+
+.breadcrumb-item:first-child:hover {
+  color: #1890ff;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  padding: 6px 12px;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+}
+
+.user-info:hover {
+  background-color: #f5f5f5;
+}
+
+.user-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.user-name {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}
+
+/* 内容区域 */
+.content-area {
+  flex: 1;
+  padding: 24px;
+  overflow-y: auto;
+}
+
+.welcome-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.welcome-title {
+  font-size: 24px;
+  font-weight: 500;
+  color: #333;
+  font-style: italic;
+}
+
+/* 滚动条样式 */
+.sidebar-menu::-webkit-scrollbar {
+  width: 4px;
+}
+
+.sidebar-menu::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.sidebar-menu::-webkit-scrollbar-thumb {
+  background: #d9d9d9;
+  border-radius: 2px;
+}
+
+.sidebar-menu::-webkit-scrollbar-thumb:hover {
+  background: #bfbfbf;
+}
+
+.content-area::-webkit-scrollbar {
+  width: 6px;
+}
+
+.content-area::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.content-area::-webkit-scrollbar-thumb {
+  background: #d9d9d9;
+  border-radius: 3px;
+}
+
+.content-area::-webkit-scrollbar-thumb:hover {
+  background: #bfbfbf;
+}
+</style>
diff --git a/src/components/ClassAllocationPage.vue b/src/components/ClassAllocationPage.vue
new file mode 100644
index 0000000..4fe4cde
--- /dev/null
+++ b/src/components/ClassAllocationPage.vue
@@ -0,0 +1,1624 @@
+<template>
+  <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>
+          </template>
+        </a-tree>
+      </div>
+    </div>
+
+    <!-- 右侧区域 -->
+    <div class="right-panel">
+      <!-- 未选择班级时的占位内容 -->
+      <div v-if="!selectedClass" class="placeholder-content">
+        <a-empty description="请选择班级进行操作">
+          <template #image>
+            <svg width="64" height="64" viewBox="0 0 24 24" fill="none">
+              <rect x="3" y="4" width="18" height="16" rx="2" stroke="#d9d9d9" stroke-width="1.5"/>
+              <path d="M8 10H16M8 14H12" stroke="#d9d9d9" stroke-width="1.5" stroke-linecap="round"/>
+            </svg>
+          </template>
+        </a-empty>
+      </div>
+      
+      <!-- 班级详情内容 -->
+      <div v-else class="class-detail">
+        <!-- 顶部综合信息卡片 -->
+        <div class="unified-info-card">
+          <div class="unified-card-header">
+            <div class="card-header-left">
+              <span class="card-icon">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" stroke-width="2"/>
+                  <path d="M8 10H16M8 14H12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                </svg>
+              </span>
+              <span class="card-title">{{ selectedClass.className }}</span>
+              <span class="student-count-tag">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
+                  <path d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                  <circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
+                </svg>
+                {{ selectedClass.studentCount }} 人
+              </span>
+            </div>
+            <div class="card-header-right">
+              <div v-if="selectedClass.hasOfficer" class="officer-status-badge assigned">已分配学习官</div>
+              <div v-else class="officer-status-badge unassigned">未分配学习官</div>
+            </div>
+          </div>
+
+          <div class="unified-card-body">
+            <!-- 学习官区域 -->
+            <div class="officer-area">
+              <template v-if="selectedClass.hasOfficer">
+                <div class="officer-assigned-layout">
+                  <div class="officer-avatar-large">
+                    <span class="avatar-text">{{ selectedClass.officerName.charAt(0) }}</span>
+                  </div>
+                  <div class="officer-detail">
+                    <div class="officer-name-row">
+                      <span class="officer-label">学习官</span>
+                      <span class="officer-name-large">{{ selectedClass.officerName }}</span>
+                    </div>
+                    <div class="officer-contact">
+                      <span class="contact-item">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
+                          <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                        {{ selectedClass.officerPhone }}
+                      </span>
+                    </div>
+                  </div>
+                  <a-button type="primary" ghost size="small" @click="openOfficerModal" class="change-officer-btn">
+                    <template #icon>
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
+                        <path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                        <circle cx="8.5" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
+                        <path d="M20 8v6M23 11h-6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                      </svg>
+                    </template>
+                    更换学习官
+                  </a-button>
+                </div>
+              </template>
+              <template v-else>
+                <div class="officer-empty-layout">
+                  <div class="empty-avatar">
+                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
+                      <circle cx="12" cy="8" r="4" stroke="#bbb" stroke-width="1.5" stroke-dasharray="3 2"/>
+                      <path d="M4 20C4 16 8 14 12 14C16 14 20 16 20 20" stroke="#bbb" stroke-width="1.5" stroke-dasharray="3 2" stroke-linecap="round"/>
+                    </svg>
+                  </div>
+                  <div class="empty-info">
+                    <span class="empty-label">学习官</span>
+                    <span class="empty-text">暂未分配，请为该班级指定学习官</span>
+                  </div>
+                  <a-button type="primary" @click="openOfficerModal" class="assign-officer-btn">
+                    <template #icon>
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
+                        <path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                        <circle cx="8.5" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
+                        <path d="M20 8v6M23 11h-6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                      </svg>
+                    </template>
+                    立即分配
+                  </a-button>
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 学生列表区域 -->
+        <div class="student-section">
+          <div class="section-header">
+            <div class="header-left">
+              <span class="section-icon purple">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+                  <path d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                  <circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
+                  <path d="M23 21V19C22.9993 18.1137 22.7044 17.2528 22.1614 16.5523C21.6184 15.8519 20.8581 15.3516 20 15.13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                  <path d="M16 3.13C16.8604 3.35031 17.623 3.85071 18.1676 4.55232C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89318 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                </svg>
+              </span>
+              <span class="section-title">学生列表</span>
+              <a-badge :count="selectedClass.students.length" :overflow-count="999" class="student-badge"/>
+            </div>
+            <div class="header-right">
+              <a-input-search
+                v-model:value="searchText"
+                placeholder="搜索学生姓名/学号"
+                size="small"
+                class="search-input"
+                @search="handleSearch"
+              />
+            
+            </div>
+          </div>
+          <div class="student-table-wrapper">
+            <a-table
+              :dataSource="filteredStudents"
+              :columns="studentColumns"
+              :pagination="{ pageSize: 10, showSizeChanger: true, pageSizeOptions: ['10', '20', '50'] }"
+              size="small"
+              class="student-table"
+              :scroll="{ y: 400 }"
+            >
+              <template #bodyCell="{ column, record, index }">
+                <template v-if="column.key === 'index'">
+                  <span class="index-badge">{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
+                </template>
+                <template v-else-if="column.key === 'gender'">
+                  <span :class="['gender-badge', record.gender === '男' ? 'male' : 'female']">
+                    {{ record.gender }}
+                  </span>
+                </template>
+                <template v-else-if="column.key === 'status'">
+                  <span :class="['status-badge', record.status]">
+                    {{ getStatusText(record.status) }}
+                  </span>
+                </template>
+                <template v-else-if="column.key === 'action'">
+                  <a-button type="link" size="small">查看详情</a-button>
+                </template>
+              </template>
+            </a-table>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 学习官选择模态框 -->
+    <a-modal
+      v-model:open="officerModalVisible"
+      title="选择学习官"
+      width="900px"
+      :footer="null"
+      class="officer-modal"
+      centered
+      destroyOnClose
+    >
+      <!-- 筛选条件区域 -->
+      <div class="modal-filter-section">
+        <div class="filter-row">
+          <div class="filter-item">
+            <span class="filter-label">姓名</span>
+            <a-input
+              v-model:value="officerFilter.name"
+              placeholder="输入姓名搜索"
+              allowClear
+              class="filter-input"
+            />
+          </div>
+          <div class="filter-item">
+            <span class="filter-label">手机号</span>
+            <a-input
+              v-model:value="officerFilter.phone"
+              placeholder="输入手机号搜索"
+              allowClear
+              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>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
+                  <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
+                  <path d="M21 21l-4.35-4.35" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                </svg>
+              </template>
+              搜索
+            </a-button>
+            <a-button @click="handleResetFilter">重置</a-button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 候选学习官列表 -->
+      <div class="modal-table-section">
+        <a-table
+          :dataSource="filteredOfficerList"
+          :columns="officerColumns"
+          :pagination="{ pageSize: 6, showTotal: (total) => `共 ${total} 人` }"
+          size="small"
+          :row-class-name="(record) => record.id === selectedOfficerId ? 'selected-row' : ''"
+          class="officer-table"
+          :scroll="{ y: 320 }"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'name'">
+              <div class="officer-cell-name">
+                <div class="officer-mini-avatar" :style="{ background: getAvatarColor(record.name) }">
+                  {{ record.name.charAt(0) }}
+                </div>
+                <span>{{ record.name }}</span>
+              </div>
+            </template>
+            <template v-else-if="column.key === 'status'">
+              <span :class="['officer-status-tag', record.status]">
+                {{ getOfficerStatusText(record.status) }}
+              </span>
+            </template>
+            <template v-else-if="column.key === 'classCount'">
+              <span :class="['class-count-tag', record.classCount >= 7 ? 'heavy' : record.classCount >= 4 ? 'medium' : 'light']">
+                {{ record.classCount }} 个班
+              </span>
+            </template>
+            <template v-else-if="column.key === 'action'">
+              <a-button
+                :type="selectedOfficerId === record.id ? 'primary' : 'default'"
+                size="small"
+                @click="handleSelectOfficer(record)"
+              >
+                {{ selectedOfficerId === record.id ? '已选择' : '选择' }}
+              </a-button>
+            </template>
+          </template>
+        </a-table>
+      </div>
+
+      <!-- 底部操作区 -->
+      <div class="modal-footer">
+        <div class="selected-info" v-if="selectedOfficerInfo">
+          <span class="selected-label">已选择：</span>
+          <div class="selected-officer-tag">
+            <div class="selected-mini-avatar" :style="{ background: getAvatarColor(selectedOfficerInfo.name) }">
+              {{ selectedOfficerInfo.name.charAt(0) }}
+            </div>
+            <span class="selected-officer-name">{{ selectedOfficerInfo.name }}</span>
+            <span class="selected-officer-phone">{{ selectedOfficerInfo.phone }}</span>
+          </div>
+        </div>
+        <div class="selected-info" v-else>
+          <span class="no-selected-tip">请从列表中选择一位学习官</span>
+        </div>
+        <div class="footer-actions">
+          <a-button @click="officerModalVisible = false">取消</a-button>
+          <a-button type="primary" :disabled="!selectedOfficerId" @click="handleConfirmOfficer">
+            确认分配
+          </a-button>
+        </div>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+// 学校列表数据
+const schoolList = ref([
+  { id: 'school1', name: '北京市第一中学' },
+  { id: 'school2', name: '北京市第二中学' },
+  { id: 'school3', name: '上海市实验中学' },
+  { id: 'school4', name: '广州市外国语学校' },
+  { id: 'school5', name: '深圳市高级中学' }
+])
+
+// 选中的学校
+const selectedSchool = ref(null)
+
+// 展开的树节点
+const expandedKeys = ref([])
+
+// 选中的树节点
+const selectedKeys = ref([])
+
+// 当前选中的班级详情
+const selectedClass = ref(null)
+
+// 搜索和筛选
+const searchText = ref('')
+const filterGender = ref('')
+
+// 分页
+const pagination = ref({
+  current: 1,
+  pageSize: 10
+})
+
+// ========== 学习官选择模态框相关 ==========
+const officerModalVisible = ref(false)
+const selectedOfficerId = ref(null)
+const selectedOfficerInfo = ref(null)
+
+// 筛选条件
+const officerFilter = ref({
+  name: '',
+  phone: '',
+  status: undefined,
+  area: undefined,
+  classCount: undefined,
+  dateRange: null
+})
+
+// 候选学习官数据
+const officerCandidates = ref([
+  { id: 1, name: '张明辉', phone: '13800001001', area: 'east', areaName: '东区', status: 'available', classCount: 2, joinDate: '2023-03-15', experience: '3年' },
+  { id: 2, name: '李秀芳', phone: '13900002002', area: 'west', areaName: '西区', status: 'available', classCount: 0, joinDate: '2024-01-10', experience: '1年' },
+  { id: 3, name: '王建国', phone: '13700003003', area: 'south', areaName: '南区', status: 'busy', classCount: 5, joinDate: '2022-09-01', experience: '4年' },
+  { id: 4, name: '赵丽华', phone: '13600004004', area: 'north', areaName: '北区', status: 'available', classCount: 1, joinDate: '2023-08-20', experience: '2年' },
+  { id: 5, name: '陈志强', phone: '13500005005', area: 'central', areaName: '中心区', status: 'available', classCount: 3, joinDate: '2022-06-15', experience: '4年' },
+  { id: 6, name: '刘美玲', phone: '13400006006', area: 'east', areaName: '东区', status: 'leave', classCount: 4, joinDate: '2023-11-01', experience: '2年' },
+  { id: 7, name: '孙伟东', phone: '13300007007', area: 'west', areaName: '西区', status: 'available', classCount: 0, joinDate: '2024-06-01', experience: '半年' },
+  { id: 8, name: '周晓燕', phone: '13200008008', area: 'south', areaName: '南区', status: 'busy', classCount: 7, joinDate: '2021-03-10', experience: '5年' },
+  { id: 9, name: '吴俊杰', phone: '13100009009', area: 'central', areaName: '中心区', status: 'available', classCount: 2, joinDate: '2023-05-20', experience: '3年' },
+  { id: 10, name: '郑雅琴', phone: '13000010010', area: 'north', areaName: '北区', status: 'available', classCount: 1, joinDate: '2024-02-28', experience: '1年' },
+  { id: 11, name: '黄海涛', phone: '15800011011', area: 'east', areaName: '东区', status: 'available', classCount: 6, joinDate: '2021-09-15', experience: '5年' },
+  { id: 12, name: '马晓峰', phone: '15900012012', area: 'west', areaName: '西区', status: 'busy', classCount: 4, joinDate: '2022-12-01', experience: '3年' },
+  { id: 13, name: '朱婷婷', phone: '15700013013', area: 'south', areaName: '南区', status: 'available', classCount: 0, joinDate: '2024-08-15', experience: '半年' },
+  { id: 14, name: '胡文博', phone: '15600014014', area: 'central', areaName: '中心区', status: 'available', classCount: 3, joinDate: '2023-01-05', experience: '3年' },
+  { id: 15, name: '徐丹丹', phone: '15500015015', area: 'north', areaName: '北区', status: 'leave', classCount: 2, joinDate: '2023-07-10', experience: '2年' }
+])
+
+// 学习官表格列定义
+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' }
+]
+
+// 筛选后的学习官列表
+const filteredOfficerList = computed(() => {
+  let result = officerCandidates.value
+
+  if (officerFilter.value.name) {
+    result = result.filter(o => o.name.includes(officerFilter.value.name))
+  }
+  if (officerFilter.value.phone) {
+    result = result.filter(o => o.phone.includes(officerFilter.value.phone))
+  }
+  if (officerFilter.value.status) {
+    result = result.filter(o => o.status === officerFilter.value.status)
+  }
+  if (officerFilter.value.area) {
+    result = result.filter(o => o.area === officerFilter.value.area)
+  }
+  if (officerFilter.value.classCount) {
+    const range = officerFilter.value.classCount
+    if (range === '0') {
+      result = result.filter(o => o.classCount === 0)
+    } else if (range === '1-3') {
+      result = result.filter(o => o.classCount >= 1 && o.classCount <= 3)
+    } else if (range === '4-6') {
+      result = result.filter(o => o.classCount >= 4 && o.classCount <= 6)
+    } else if (range === '7+') {
+      result = result.filter(o => o.classCount >= 7)
+    }
+  }
+  if (officerFilter.value.dateRange && officerFilter.value.dateRange.length === 2) {
+    const [start, end] = officerFilter.value.dateRange
+    if (start && end) {
+      const startStr = start.format ? start.format('YYYY-MM-DD') : start
+      const endStr = end.format ? end.format('YYYY-MM-DD') : end
+      result = result.filter(o => o.joinDate >= startStr && o.joinDate <= endStr)
+    }
+  }
+
+  return result
+})
+
+// 打开学习官选择模态框
+const openOfficerModal = () => {
+  selectedOfficerId.value = null
+  selectedOfficerInfo.value = null
+  handleResetFilter()
+  officerModalVisible.value = true
+}
+
+// 筛选学习官
+const handleFilterOfficers = () => {
+  // 筛选逻辑已通过 computed 自动处理
+}
+
+// 重置筛选条件
+const handleResetFilter = () => {
+  officerFilter.value = {
+    name: '',
+    phone: '',
+    status: undefined,
+    area: undefined,
+    classCount: undefined,
+    dateRange: null
+  }
+}
+
+// 选择学习官
+const handleSelectOfficer = (record) => {
+  if (selectedOfficerId.value === record.id) {
+    selectedOfficerId.value = null
+    selectedOfficerInfo.value = null
+  } else {
+    selectedOfficerId.value = record.id
+    selectedOfficerInfo.value = record
+  }
+}
+
+// 确认分配学习官
+const handleConfirmOfficer = () => {
+  if (!selectedOfficerInfo.value || !selectedClass.value) return
+
+  // 更新当前班级的学习官信息
+  selectedClass.value.hasOfficer = true
+  selectedClass.value.officerName = selectedOfficerInfo.value.name
+  selectedClass.value.officerPhone = selectedOfficerInfo.value.phone
+
+  // 更新树节点中的学习官信息
+  const updateTreeNode = (nodes) => {
+    for (const node of nodes) {
+      if (node.key === selectedKeys.value[0]) {
+        node.hasOfficer = true
+        node.officerName = selectedOfficerInfo.value.name
+        return true
+      }
+      if (node.children && updateTreeNode(node.children)) return true
+    }
+    return false
+  }
+  updateTreeNode(treeData.value)
+
+  // 更新年级节点的待分配数量
+  const updateGradeCount = (nodes) => {
+    for (const node of nodes) {
+      if (node.type === 'grade' && node.children) {
+        node.unassignedCount = node.children.filter(c => !c.hasOfficer).length
+      }
+      if (node.children) updateGradeCount(node.children)
+    }
+  }
+  updateGradeCount(treeData.value)
+
+  officerModalVisible.value = false
+}
+
+// 获取学习官状态文本
+const getOfficerStatusText = (status) => {
+  const map = { available: '空闲', busy: '忙碌', leave: '请假' }
+  return map[status] || status
+}
+
+// 获取头像颜色
+const getAvatarColor = (name) => {
+  const colors = [
+    'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)',
+    'linear-gradient(135deg, #52c41a 0%, #389e0d 100%)',
+    'linear-gradient(135deg, #722ed1 0%, #531dab 100%)',
+    'linear-gradient(135deg, #fa8c16 0%, #d46b08 100%)',
+    'linear-gradient(135deg, #eb2f96 0%, #c41d7f 100%)',
+    'linear-gradient(135deg, #13c2c2 0%, #08979c 100%)'
+  ]
+  const index = name.charCodeAt(0) % colors.length
+  return colors[index]
+}
+
+// 学生列表表格列定义
+const studentColumns = [
+  {
+    title: '序号',
+    key: 'index',
+    width: 60,
+    align: 'center'
+  },
+  {
+    title: '学号',
+    dataIndex: 'studentId',
+    key: 'studentId',
+    width: 100,
+    sorter: (a, b) => a.studentId.localeCompare(b.studentId)
+  },
+  {
+    title: '姓名',
+    dataIndex: 'name',
+    key: 'name',
+    width: 100,
+    sorter: (a, b) => a.name.localeCompare(b.name)
+  }
+  
+]
+
+// 状态文本映射
+const getStatusText = (status) => {
+  const statusMap = {
+    'excellent': '优秀',
+    'good': '良好',
+    'normal': '一般',
+    'warning': '需关注'
+  }
+  return statusMap[status] || status
+}
+
+// 筛选后的学生列表
+const filteredStudents = computed(() => {
+  if (!selectedClass.value) return []
+  
+  let result = selectedClass.value.students
+  
+  // 性别筛选
+  if (filterGender.value) {
+    result = result.filter(s => s.gender === filterGender.value)
+  }
+  
+  // 搜索筛选
+  if (searchText.value) {
+    const keyword = searchText.value.toLowerCase()
+    result = result.filter(s => 
+      s.name.toLowerCase().includes(keyword) || 
+      s.studentId.toLowerCase().includes(keyword)
+    )
+  }
+  
+  return result
+})
+
+// 处理搜索
+const handleSearch = (value) => {
+  searchText.value = value
+  pagination.value.current = 1
+}
+
+// 模拟班级数据
+const classDataMap = {
+  'school1': [
+    {
+      gradeName: '高一',
+      classes: [
+        { className: '高一(1)班', studentCount: 45, officerName: '张老师', hasOfficer: true },
+        { className: '高一(2)班', studentCount: 42, officerName: '', hasOfficer: false },
+        { className: '高一(3)班', studentCount: 48, officerName: '李老师', hasOfficer: true }
+      ]
+    },
+    {
+      gradeName: '高二',
+      classes: [
+        { className: '高二(1)班', studentCount: 40, officerName: '王老师', hasOfficer: true },
+        { className: '高二(2)班', studentCount: 43, officerName: '', hasOfficer: false },
+        { className: '高二(3)班', studentCount: 41, officerName: '', hasOfficer: false }
+      ]
+    },
+    {
+      gradeName: '高三',
+      classes: [
+        { className: '高三(1)班', studentCount: 38, officerName: '赵老师', hasOfficer: true },
+        { className: '高三(2)班', studentCount: 39, officerName: '陈老师', hasOfficer: true }
+      ]
+    }
+  ],
+  'school2': [
+    {
+      gradeName: '初一',
+      classes: [
+        { className: '初一(1)班', studentCount: 50, officerName: '刘老师', hasOfficer: true },
+        { className: '初一(2)班', studentCount: 48, officerName: '', hasOfficer: false }
+      ]
+    },
+    {
+      gradeName: '初二',
+      classes: [
+        { className: '初二(1)班', studentCount: 46, officerName: '', hasOfficer: false },
+        { className: '初二(2)班', studentCount: 47, officerName: '孙老师', hasOfficer: true }
+      ]
+    }
+  ],
+  'school3': [
+    {
+      gradeName: '一年级',
+      classes: [
+        { className: '一年级(1)班', studentCount: 35, officerName: '周老师', hasOfficer: true },
+        { className: '一年级(2)班', studentCount: 36, officerName: '', hasOfficer: false },
+        { className: '一年级(3)班', studentCount: 34, officerName: '吴老师', hasOfficer: true }
+      ]
+    }
+  ],
+  'school4': [
+    {
+      gradeName: '高一',
+      classes: [
+        { className: '高一(A)班', studentCount: 30, officerName: '', hasOfficer: false },
+        { className: '高一(B)班', studentCount: 32, officerName: '郑老师', hasOfficer: true }
+      ]
+    }
+  ],
+  'school5': [
+    {
+      gradeName: '高二',
+      classes: [
+        { className: '高二(1)班', studentCount: 44, officerName: '钱老师', hasOfficer: true },
+        { className: '高二(2)班', studentCount: 45, officerName: '', hasOfficer: false }
+      ]
+    }
+  ]
+}
+
+// 树形数据
+const treeData = ref([])
+
+// 学校搜索过滤
+const filterSchoolOption = (input, option) => {
+  return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+}
+
+// 处理学校选择变化
+const handleSchoolChange = (schoolId) => {
+  if (!schoolId) {
+    treeData.value = []
+    expandedKeys.value = []
+    return
+  }
+
+  // 获取选中的学校名称
+  const school = schoolList.value.find(s => s.id === schoolId)
+  const gradeData = classDataMap[schoolId] || []
+
+  // 构建树形数据
+  const schoolNode = {
+    key: schoolId,
+    title: school.name,
+    type: 'school',
+    children: gradeData.map((grade, gradeIndex) => {
+      // 计算该年级待分配班级数量
+      const unassignedCount = grade.classes.filter(cls => !cls.hasOfficer).length
+      
+      return {
+        key: `${schoolId}-grade-${gradeIndex}`,
+        title: grade.gradeName,
+        type: 'grade',
+        unassignedCount: unassignedCount,
+        children: grade.classes.map((cls, classIndex) => ({
+          key: `${schoolId}-grade-${gradeIndex}-class-${classIndex}`,
+          title: `${cls.className} (${cls.studentCount}人)`,
+          type: 'class',
+          hasOfficer: cls.hasOfficer,
+          officerName: cls.officerName,
+          isClass: true
+        }))
+      }
+    })
+  }
+
+  treeData.value = [schoolNode]
+  
+  // 默认展开所有节点
+  expandedKeys.value = [schoolId, ...gradeData.map((_, index) => `${schoolId}-grade-${index}`)]
+}
+
+// 处理树节点展开/折叠
+const handleExpand = (keys) => {
+  expandedKeys.value = keys
+}
+
+// 生成模拟学生数据
+const generateStudents = (count) => {
+  const surnames = ['张', '李', '王', '刘', '陈', '杨', '赵', '黄', '周', '吴', '徐', '孙', '马', '朱', '胡']
+  const names = ['伟', '芳', '娜', '秀英', '敏', '静', '丽', '强', '磊', '军', '洋', '勇', '艳', '杰', '娟', '涛', '明', '超', '秀兰', '霞']
+  const statuses = ['excellent', 'good', 'normal', 'warning']
+  const statusWeights = [0.3, 0.4, 0.2, 0.1] // 权重分布
+  const students = []
+  
+  for (let i = 0; i < count; i++) {
+    const surname = surnames[Math.floor(Math.random() * surnames.length)]
+    const name = names[Math.floor(Math.random() * names.length)]
+    const gender = Math.random() > 0.5 ? '男' : '女'
+    const studentId = String(20240000 + i + 1).padStart(8, '0')
+    const phone = `1${Math.floor(Math.random() * 9 + 3)}${String(Math.floor(Math.random() * 100000000)).padStart(8, '0')}`
+    
+    // 根据权重随机选择状态
+    const random = Math.random()
+    let status = statuses[0]
+    let cumulativeWeight = 0
+    for (let j = 0; j < statuses.length; j++) {
+      cumulativeWeight += statusWeights[j]
+      if (random <= cumulativeWeight) {
+        status = statuses[j]
+        break
+      }
+    }
+    
+    students.push({
+      studentId,
+      name: surname + name,
+      gender,
+      phone,
+      status
+    })
+  }
+  
+  return students
+}
+
+// 生成学习官电话
+const generateOfficerPhone = () => {
+  return `1${Math.floor(Math.random() * 9 + 3)}${String(Math.floor(Math.random() * 100000000)).padStart(8, '0')}`
+}
+
+// 生成学习官职责
+const generateOfficerDuty = () => {
+  const duties = [
+    '负责班级日常学习管理，组织学习活动',
+    '督导学生学习进度，定期反馈学习情况',
+    '协助学生制定学习计划，提供学习指导',
+    '组织班级学习讨论，促进学习交流'
+  ]
+  return duties[Math.floor(Math.random() * duties.length)]
+}
+
+// 处理树节点选择
+const handleSelect = (selectedKeysValue, { node }) => {
+  selectedKeys.value = selectedKeysValue
+  
+  // 只有点击班级节点时才显示详情
+  if (node.type === 'class') {
+    const studentCount = parseInt(node.title.match(/\((\d+)人\)/)?.[1] || 0)
+    const totalCourses = 48 // 总课时
+    const completedCourses = Math.floor(Math.random() * totalCourses)
+    
+    // 从树数据中找到完整的班级信息
+    const classInfo = {
+      className: node.title.split(' (')[0],
+      studentCount: studentCount,
+      totalCourses: totalCourses,
+      completedCourses: completedCourses,
+      courseProgress: Math.round((completedCourses / totalCourses) * 100),
+      hasOfficer: node.hasOfficer,
+      officerName: node.officerName,
+      officerPhone: node.hasOfficer ? generateOfficerPhone() : '',
+      officerDuty: node.hasOfficer ? generateOfficerDuty() : '',
+      students: generateStudents(studentCount)
+    }
+    selectedClass.value = classInfo
+    
+    // 重置筛选和搜索
+    searchText.value = ''
+    filterGender.value = ''
+    pagination.value.current = 1
+  } else {
+    selectedClass.value = null
+  }
+}
+</script>
+
+<style scoped>
+.class-allocation-page {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+}
+
+/* 左侧区域样式 */
+.left-panel {
+  width: 320px;
+  min-width: 320px;
+  border-right: 1px solid #e8e8e8;
+  display: flex;
+  flex-direction: column;
+  background-color: #fafafa;
+}
+
+.school-select-wrapper {
+  padding: 16px;
+  border-bottom: 1px solid #e8e8e8;
+  background-color: #fff;
+}
+
+.school-select {
+  width: 100%;
+}
+
+.tree-wrapper {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+/* 树节点样式 */
+.class-tree {
+  background: transparent;
+}
+
+.tree-node {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+}
+
+.node-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.node-title {
+  font-size: 14px;
+  color: #333;
+}
+
+/* 班级节点样式 */
+.class-icon.assigned svg rect,
+.class-icon.assigned svg path {
+  stroke: #52c41a;
+}
+
+.class-icon.unassigned svg rect,
+.class-icon.unassigned svg path {
+  stroke: #ff4d4f;
+}
+
+/* 学习官标签 */
+.officer-tag {
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  background-color: #f6ffed;
+  color: #52c41a;
+  border: 1px solid #b7eb8f;
+  margin-left: 8px;
+}
+
+.officer-tag.unassigned-tag {
+  background-color: #fff2f0;
+  color: #ff4d4f;
+  border-color: #ffccc7;
+}
+
+/* 待分配班级数量标签 */
+.unassigned-count-badge {
+  font-size: 12px;
+  padding: 2px 10px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
+  color: #fff;
+  font-weight: 600;
+  margin-left: auto;
+  box-shadow: 0 2px 4px rgba(255, 77, 79, 0.3);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+    box-shadow: 0 2px 4px rgba(255, 77, 79, 0.3);
+  }
+  50% {
+    transform: scale(1.02);
+    box-shadow: 0 4px 8px rgba(255, 77, 79, 0.4);
+  }
+}
+
+/* 右侧区域样式 */
+.right-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: #f5f7fa;
+  overflow-y: auto;
+}
+
+.placeholder-content {
+  padding: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+
+/* 班级详情样式 */
+.class-detail {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+/* ========== 整合信息卡片 ========== */
+.unified-info-card {
+  background-color: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+  transition: box-shadow 0.3s ease;
+}
+
+.unified-info-card:hover {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.unified-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  background: linear-gradient(135deg, #f0f5ff 0%, #e6f0ff 100%);
+  border-bottom: 1px solid #d6e4ff;
+}
+
+.card-header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.card-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+  color: #fff;
+  flex-shrink: 0;
+}
+
+.card-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1a1a2e;
+}
+
+.student-count-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #1890ff;
+  background-color: rgba(24, 144, 255, 0.08);
+  padding: 4px 12px;
+  border-radius: 16px;
+  border: 1px solid rgba(24, 144, 255, 0.2);
+}
+
+.card-header-right .officer-status-badge {
+  font-size: 12px;
+  padding: 4px 14px;
+  border-radius: 16px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+.card-header-right .officer-status-badge.assigned {
+  background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%);
+  color: #389e0d;
+  border: 1px solid #b7eb8f;
+}
+
+.card-header-right .officer-status-badge.unassigned {
+  background: linear-gradient(135deg, #fff2f0 0%, #ffccc7 100%);
+  color: #cf1322;
+  border: 1px solid #ffa39e;
+}
+
+.unified-card-body {
+  padding: 20px;
+}
+
+/* 学习官区域 */
+.officer-area {
+  width: 100%;
+}
+
+/* 已分配学习官 */
+.officer-assigned-layout {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 14px 18px;
+  background: linear-gradient(135deg, #f6ffed 0%, #fcfff7 100%);
+  border-radius: 10px;
+  border: 1px solid #d9f7be;
+}
+
+.officer-avatar-large {
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-shadow: 0 3px 10px rgba(82, 196, 26, 0.3);
+}
+
+.officer-avatar-large .avatar-text {
+  font-size: 20px;
+  font-weight: 700;
+  color: #fff;
+}
+
+.officer-detail {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.officer-name-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.officer-label {
+  font-size: 12px;
+  color: #8c8c8c;
+  background-color: rgba(0,0,0,0.04);
+  padding: 2px 8px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.officer-name-large {
+  font-size: 17px;
+  font-weight: 600;
+  color: #1a1a2e;
+}
+
+.officer-contact {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: #666;
+}
+
+.contact-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.change-officer-btn {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+/* 未分配学习官 */
+.officer-empty-layout {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 14px 18px;
+  background: linear-gradient(135deg, #fffbe6 0%, #fff8e1 100%);
+  border-radius: 10px;
+  border: 1px dashed #ffd666;
+}
+
+.empty-avatar {
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  background-color: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border: 2px dashed #d9d9d9;
+}
+
+.empty-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.empty-label {
+  font-size: 12px;
+  color: #8c8c8c;
+  background-color: rgba(0,0,0,0.04);
+  padding: 2px 8px;
+  border-radius: 4px;
+  width: fit-content;
+}
+
+.empty-text {
+  font-size: 14px;
+  color: #999;
+}
+
+.assign-officer-btn {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+/* 学生列表区域 */
+.student-section {
+  background-color: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 18px;
+  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
+  border-bottom: 1px solid #f0f0f0;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.section-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+}
+
+.section-icon.purple {
+  background: linear-gradient(135deg, #f9f0ff 0%, #efdbff 100%);
+  color: #722ed1;
+}
+
+.section-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #333;
+}
+
+.student-badge :deep(.ant-badge-count) {
+  background-color: #722ed1;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.search-input {
+  width: 200px;
+}
+
+.filter-select {
+  width: 100px;
+}
+
+.student-table-wrapper {
+  padding: 16px;
+  flex: 1;
+  overflow: auto;
+}
+
+.student-table {
+  background-color: #fff;
+}
+
+/* 表格样式 */
+.index-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
+  border-radius: 50%;
+  font-size: 12px;
+  color: #666;
+  font-weight: 500;
+}
+
+.gender-badge {
+  font-size: 12px;
+  padding: 3px 10px;
+  border-radius: 12px;
+  font-weight: 500;
+}
+
+.gender-badge.male {
+  background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
+  color: #1890ff;
+}
+
+.gender-badge.female {
+  background: linear-gradient(135deg, #fff0f6 0%, #ffd6e7 100%);
+  color: #eb2f96;
+}
+
+.status-badge {
+  font-size: 12px;
+  padding: 3px 10px;
+  border-radius: 12px;
+  font-weight: 500;
+}
+
+.status-badge.excellent {
+  background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%);
+  color: #52c41a;
+}
+
+.status-badge.good {
+  background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
+  color: #1890ff;
+}
+
+.status-badge.normal {
+  background: linear-gradient(135deg, #fffbe6 0%, #fff1b8 100%);
+  color: #faad14;
+}
+
+.status-badge.warning {
+  background: linear-gradient(135deg, #fff2f0 0%, #ffccc7 100%);
+  color: #ff4d4f;
+}
+
+/* 树节点选中样式 */
+.tree-node.selected {
+  background-color: #e6f7ff;
+  border-radius: 4px;
+  padding: 4px 8px;
+  margin: 0 -8px;
+}
+
+/* 滚动条样式 */
+.tree-wrapper::-webkit-scrollbar {
+  width: 6px;
+}
+
+.tree-wrapper::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.tree-wrapper::-webkit-scrollbar-thumb {
+  background: #d9d9d9;
+  border-radius: 3px;
+}
+
+.tree-wrapper::-webkit-scrollbar-thumb:hover {
+  background: #bfbfbf;
+}
+
+/* ========== 模态框筛选区域 ========== */
+.modal-filter-section {
+  background: linear-gradient(135deg, #f8f9fc 0%, #f0f2f7 100%);
+  border-radius: 10px;
+  padding: 18px;
+  margin-bottom: 16px;
+  border: 1px solid #e8ecf4;
+}
+
+.filter-row {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+
+.filter-row + .filter-row {
+  margin-top: 14px;
+}
+
+.filter-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.filter-label {
+  font-size: 13px;
+  color: #555;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.filter-input {
+  width: 150px;
+}
+
+.filter-select-modal {
+  width: 130px;
+}
+
+.filter-date {
+  width: 240px;
+}
+
+.filter-actions {
+  display: flex;
+  gap: 8px;
+  margin-left: auto;
+}
+
+/* ========== 模态框表格区域 ========== */
+.modal-table-section {
+  margin-bottom: 16px;
+}
+
+.officer-table :deep(.selected-row) {
+  background-color: #e6f7ff !important;
+}
+
+.officer-table :deep(.selected-row) td {
+  background-color: #e6f7ff !important;
+}
+
+.officer-cell-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.officer-mini-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.officer-status-tag {
+  font-size: 12px;
+  padding: 2px 10px;
+  border-radius: 12px;
+  font-weight: 500;
+}
+
+.officer-status-tag.available {
+  background-color: #f6ffed;
+  color: #52c41a;
+  border: 1px solid #b7eb8f;
+}
+
+.officer-status-tag.busy {
+  background-color: #fff7e6;
+  color: #fa8c16;
+  border: 1px solid #ffd591;
+}
+
+.officer-status-tag.leave {
+  background-color: #f5f5f5;
+  color: #999;
+  border: 1px solid #d9d9d9;
+}
+
+.class-count-tag {
+  font-size: 12px;
+  padding: 2px 10px;
+  border-radius: 12px;
+  font-weight: 500;
+}
+
+.class-count-tag.light {
+  background-color: #f6ffed;
+  color: #52c41a;
+}
+
+.class-count-tag.medium {
+  background-color: #fff7e6;
+  color: #fa8c16;
+}
+
+.class-count-tag.heavy {
+  background-color: #fff2f0;
+  color: #ff4d4f;
+}
+
+/* ========== 模态框底部 ========== */
+.modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 16px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.selected-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.selected-label {
+  font-size: 13px;
+  color: #666;
+}
+
+.no-selected-tip {
+  font-size: 13px;
+  color: #bbb;
+}
+
+.selected-officer-tag {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
+  padding: 6px 14px;
+  border-radius: 20px;
+  border: 1px solid #91d5ff;
+}
+
+.selected-mini-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.selected-officer-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1890ff;
+}
+
+.selected-officer-phone {
+  font-size: 12px;
+  color: #666;
+}
+
+.footer-actions {
+  display: flex;
+  gap: 8px;
+}
+</style>
diff --git a/src/components/CloudSchoolReport.vue b/src/components/CloudSchoolReport.vue
new file mode 100644
index 0000000..61a640b
--- /dev/null
+++ b/src/components/CloudSchoolReport.vue
@@ -0,0 +1,4135 @@
+<template>
+  <div class="cloud-school-report">
+    <!-- 顶部导航栏 (复用 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="page-header">
+      <t-button variant="text" @click="goBack" class="back-btn">
+        <template #icon>
+          <t-icon name="chevron-left" />
+        </template>
+        返回首页
+      </t-button>
+      <h1 class="page-title">作业打卡行为报告</h1>
+      <p class="page-subtitle">作业打卡行为数据分析与趋势报告</p>
+    </div>
+
+    <!-- 数据展示区域：统一容器包裹表格和图表 -->
+    <div class="data-container">
+      <!-- 全局筛选控制区 -->
+      <div class="global-filters">
+        <div class="filter-header">
+          <span class="filter-title">
+            <t-icon name="filter" size="16" />
+            筛选条件
+          </span>
+          <div class="filter-actions">
+            <t-button size="small" variant="outline" @click="handleResetFilters">
+              <template #icon><t-icon name="refresh" /></template>
+              重置
+            </t-button>
+            <t-button size="small" theme="primary" @click="handleSearch">
+              <template #icon><t-icon name="search" /></template>
+              查询
+            </t-button>
+          </div>
+        </div>
+        <div class="filter-content">
+          <!-- 组织架构筛选 -->
+          <div class="filter-section">
+            <div class="section-label">组织架构</div>
+            <div class="section-items">
+              <div class="filter-item">
+                <span class="filter-label">云校</span>
+                <t-select
+                  v-model="selectedCloudSchool"
+                  :options="cloudSchoolOptions"
+                  placeholder="请选择"
+                  style="width: 130px;"
+                  filterable
+                  @change="handleCloudSchoolChange"
+                />
+              </div>
+              <div class="filter-item">
+                <span class="filter-label">学校</span>
+                <t-select
+                  v-model="selectedSchool"
+                  :options="schoolOptions"
+                  placeholder="请选择"
+                  style="width: 130px;"
+                  filterable
+                  clearable
+                  @change="handleSchoolChange"
+                />
+              </div>
+              <div class="filter-item">
+                <span class="filter-label">年级</span>
+                <t-select
+                  v-model="selectedGrade"
+                  :options="gradeOptions"
+                  placeholder="请选择"
+                  style="width: 100px;"
+                  :disabled="!selectedSchool"
+                  clearable
+                  @change="handleGradeChange"
+                />
+              </div>
+              <div class="filter-item">
+                <span class="filter-label">班级</span>
+                <t-select
+                  v-model="selectedClass"
+                  :options="classOptions"
+                  placeholder="请选择"
+                  style="width: 100px;"
+                  :disabled="!selectedGrade"
+                  filterable
+                  clearable
+                  @change="handleClassChange"
+                />
+              </div>
+              <div class="cascade-tip" v-if="!selectedSchool">
+                <info-circle-outlined class="tip-icon-small" />
+                <span>请先选择学校以激活年级筛选</span>
+              </div>
+              <div class="cascade-tip" v-else-if="!selectedGrade">
+                <info-circle-outlined class="tip-icon-small" />
+                <span>请选择年级以激活班级筛选</span>
+              </div>
+            </div>
+          </div>
+          <div class="section-divider"></div>
+          <!-- 范围筛选 -->
+          <div class="filter-section">
+            <div class="section-label">范围筛选</div>
+            <div class="section-items">
+              <div class="filter-item">
+                <span class="filter-label">科目</span>
+                <t-select
+                  v-model="selectedSubject"
+                  :options="subjectOptions"
+                  placeholder="请选择"
+                  style="width: 100px;"
+                  @change="handleSubjectChange"
+                />
+              </div>
+              <div class="filter-item">
+                <span class="filter-label">层次</span>
+                <t-select
+                  v-model="selectedLevel"
+                  :options="levelOptions"
+                  placeholder="请选择"
+                  style="width: 100px;"
+                  @change="handleLevelChange"
+                />
+              </div>
+              <div class="filter-item filter-item-time">
+                <span class="filter-label">时间</span>
+                <div class="date-picker-wrapper">
+                  <div class="date-picker-row">
+                    <a-range-picker
+                      v-model:value="dateRange"
+                      format="YYYY-MM-DD"
+                      :placeholder="['开始', '结束']"
+                      :disabled-date="disabledDate"
+                      :status="dateRangeError ? 'error' : ''"
+                      @calendar-change="handleCalendarChange"
+                      @change="handleDateChange"
+                      style="width: 220px;"
+                    />
+                    <span class="date-range-hint">
+                      <info-circle-outlined class="hint-icon" />
+                      最多查询 30 天
+                    </span>
+                  </div>
+                  <div v-if="dateRangeError" class="date-range-error">
+                    <exclamation-circle-outlined class="error-icon" />
+                    {{ dateRangeError }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    <!-- 数据表格区域（上侧） -->
+    <t-card class="table-card">
+	<template #header>
+		<div class="card-header">
+			<!-- 第一行：标题 + 颜色图例 -->
+			<div class="card-header-top">
+				<span class="card-title">数据明细表</span>
+				<!-- <div class="color-legend">
+					<span class="legend-item red">差值 &lt; 红色阈值</span>
+					<span class="legend-item orange">红色阈值 ≤ 差值 ≤ 0</span>
+					<span class="legend-item green">差值 &gt; 0%</span>
+				</div> -->
+			</div>
+			<!-- 用户提示信息 -->
+			<div class="user-tip">
+				<info-circle-outlined class="tip-icon" />
+				<div class="tip-content">
+					<div class="tip-row">
+						<span class="tip-text">
+							<strong>阈值设置：</strong>点击列标题旁的"
+							<setting-outlined style="font-size: 12px; vertical-align: middle;" />
+							"齿轮图标，可分别设置该列的<strong>计算阈值</strong>与<strong>红色阈值</strong>
+						</span>
+					</div>
+					<div class="tip-row">
+						<span class="tip-text">
+							<strong>颜色规则：</strong>每列独立配置红色阈值——差值低于该列红色阈值显示<span style="color:#cf1322;font-weight:600;">红色</span>，差值在红色阈值~0 之间显示<span style="color:#d46b08;font-weight:600;">橙色</span>，差值大于 0 显示<span style="color:#389e0d;font-weight:600;">绿色</span>
+						</span>
+					</div>
+				</div>
+			</div>
+		</div>
+    
+	</template>
+       <div class="action-group">
+      <t-button theme="primary" variant="outline" size="small" @click="showExportModal = true">
+        <template #icon>
+          <t-icon name="download" />
+        </template>
+        导出数据
+      </t-button>
+      <t-button theme="primary" variant="outline" size="small" @click="openColumnEditor">
+        <template #icon>
+          <t-icon name="setting" />
+        </template>
+        编辑列
+      </t-button>
+    </div>
+      <div class="table-wrapper">
+        <a-table
+          :data-source="tableData"
+          :columns="columns"
+          row-key="id"
+          :bordered="true"
+          :scroll="{ x: 'max-content' }"
+          size="small"
+          :pagination="paginationConfig"
+          @change="handleTableChange"
+        >
+          <!-- 自定义列头：带齿轮气泡卡片的差值列 -->
+          <template #headerCell="{ column }">
+            <template v-if="column.key === 'interactionRate'">
+              <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 === 'dailyCheckInRate'">
+              <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 === 'onlineRate'">
+              <a-tooltip placement="top" :overlay-style="{ maxWidth: '280px' }">
+                <template #title>上线率 = 上线人数 / 学人员数。[上线 = 当日任意课程学习+答题时长>30秒]</template>
+                <span style="cursor:help;border-bottom:1px dashed #aaa;">上线率</span>
+              </a-tooltip>
+            </template>
+            <template v-else-if="column.key === 'objectiveAccuracy'">
+              <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 === 'subjectiveAccuracy'">
+              <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 === 'homeworkAccuracy'">
+              <a-tooltip placement="top" :overlay-style="{ maxWidth: '320px' }">
+                <template #title>作业正确率 = (客观题正确数 + 主观题正确数) / (客观题总数量 + 主观题总数量)</template>
+                <span style="cursor:help;border-bottom:1px dashed #aaa;">作业正确率</span>
+              </a-tooltip>
+            </template>
+            <template v-else-if="column.key === 'homeworkExcellenceRate'">
+              <a-tooltip placement="top" :overlay-style="{ maxWidth: '280px' }">
+                <template #title>作业优秀率 = 作业正确率 &gt; 80% 的人数 / 当天攻克一个知识点的人数</template>
+                <span style="cursor:help;border-bottom:1px dashed #aaa;">作业优秀率</span>
+              </a-tooltip>
+            </template>
+            <template v-else-if="column.key === 'improvementRate'">
+              <a-tooltip placement="top" :overlay-style="{ maxWidth: '320px' }">
+                <template #title>作业进步率 = (今日作业正确率 - 昨日作业正确率) / 昨日作业正确率</template>
+                <span style="cursor:help;border-bottom:1px dashed #aaa;">作业进步率</span>
+              </a-tooltip>
+            </template>
+            <template v-else-if="column.key === 'courseCompletionRate'">
+              <a-tooltip placement="top" :overlay-style="{ maxWidth: '320px' }">
+                <template #title>课程完成率 = (当日打卡的课程数 / 当日总课程数 × 学员人数)</template>
+                <span style="cursor:help;border-bottom:1px dashed #aaa;">课程完成率</span>
+              </a-tooltip>
+            </template>
+            <template v-else-if="column.key === 'homeworkMasteryRate'">
+              <a-tooltip placement="top" :overlay-style="{ maxWidth: '320px' }">
+                <template #title>作业攻克率 = (当日已攻克知识点数 / 当日推送总知识点数)</template>
+                <span style="cursor:help;border-bottom:1px dashed #aaa;">作业攻克率</span>
+              </a-tooltip>
+            </template>
+            <template v-else-if="column.key === 'qualityCheckInRate'">
+              <a-tooltip placement="top" :overlay-style="{ maxWidth: '300px' }">
+                <template #title>打卡优质率 = 当日任一门课程笔记被评为"精选"的人数 / 当日知识点攻克人数 [按人头去重]</template>
+                <span style="cursor:help;border-bottom:1px dashed #aaa;">打卡优质率</span>
+              </a-tooltip>
+            </template>
+            <template v-else-if="column.key === 'noParticipationRate'">
+              <a-tooltip placement="top" :overlay-style="{ maxWidth: '320px' }">
+                <template #title>未参与打卡率 = 当日未打卡人数 / 学员人数</template>
+                <span style="cursor:help;border-bottom:1px dashed #aaa;">未参与打卡率</span>
+              </a-tooltip>
+            </template>
+            <template v-else-if="column.key === 'dropoutRate'">
+              <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 === 'interactionRateDiff'">
+              <div style="display:flex;align-items:center;justify-content:flex-end;gap:4px;">
+                <span>互动率与阈值差</span>
+                <a-popover
+                  v-model:open="popoverVisible.interactionRateDiff"
+                  trigger="click"
+                  placement="bottomRight"
+                  :overlay-style="{ width: '240px' }"
+                  @open-change="(v) => onPopoverOpen('interactionRateDiff', v)"
+                >
+                  <template #title>
+                    <span style="font-size:13px;font-weight:600;">设置互动率阈值</span>
+                  </template>
+                  <template #content>
+                    <div class="popover-threshold-content">
+                      <p class="popover-formula">互动率与阈值差 = 互动率 - 阈值</p>
+                      <div class="popover-input-row">
+                        <span class="popover-label">阈值：</span>
+                        <a-input-number
+                          v-model:value="interactionThreshold"
+                          :min="0" :max="100" :step="1"
+                          :formatter="v => `${v}%`"
+                          :parser="v => v.replace('%', '')"
+                          size="small"
+                          style="width:120px;"
+                        />
+                      </div>
+                      <div class="popover-input-row">
+                        <span class="popover-label popover-label-red">红色阈值：</span>
+                        <a-input-number
+                          v-model:value="interactionRedThreshold"
+                          :max="-0.1" :step="0.5" :precision="1"
+                          :formatter="v => `${v}%`"
+                          :parser="v => v.replace('%', '')"
+                          size="small"
+                          style="width:120px;"
+                        />
+                      </div>
+                      <p class="popover-red-hint">差值低于红色阈值时显示红色</p>
+                      <div class="popover-actions">
+                        <a-button size="small" @click="cancelPopover('interactionRateDiff', 'interactionThreshold', 'interactionRedThreshold')">取消</a-button>
+                        <a-button size="small" type="primary" @click="closePopover('interactionRateDiff')">确定</a-button>
+                      </div>
+                    </div>
+                  </template>
+                  <a-button
+                    type="text" size="small" shape="circle"
+                    @click.stop
+                    style="width:22px;height:22px;min-width:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;"
+                  >
+                    <setting-outlined style="font-size:13px;" />
+                  </a-button>
+                </a-popover>
+              </div>
+            </template>
+            <template v-else-if="column.key === 'dailyCheckInRateDiff'">
+              <div style="display:flex;align-items:center;justify-content:flex-end;gap:4px;">
+                <span>打卡率与阈值差</span>
+                <a-popover
+                  v-model:open="popoverVisible.dailyCheckInRateDiff"
+                  trigger="click"
+                  placement="bottomRight"
+                  :overlay-style="{ width: '240px' }"
+                  @open-change="(v) => onPopoverOpen('dailyCheckInRateDiff', v)"
+                >
+                  <template #title>
+                    <span style="font-size:13px;font-weight:600;">设置打卡率阈值</span>
+                  </template>
+                  <template #content>
+                    <div class="popover-threshold-content">
+                      <p class="popover-formula">打卡率与阈值差 = 打卡率 - 阈值</p>
+                      <div class="popover-input-row">
+                        <span class="popover-label">阈值：</span>
+                        <a-input-number
+                          v-model:value="dailyCheckInThreshold"
+                          :min="0" :max="100" :step="1"
+                          :formatter="v => `${v}%`"
+                          :parser="v => v.replace('%', '')"
+                          size="small"
+                          style="width:120px;"
+                        />
+                      </div>
+                      <div class="popover-input-row">
+                        <span class="popover-label popover-label-red">红色阈值：</span>
+                        <a-input-number
+                          v-model:value="dailyCheckInRedThreshold"
+                          :max="-0.1" :step="0.5" :precision="1"
+                          :formatter="v => `${v}%`"
+                          :parser="v => v.replace('%', '')"
+                          size="small"
+                          style="width:120px;"
+                        />
+                      </div>
+                      <p class="popover-red-hint">差值低于红色阈值时显示红色</p>
+                      <div class="popover-actions">
+                        <a-button size="small" @click="cancelPopover('dailyCheckInRateDiff', 'dailyCheckInThreshold', 'dailyCheckInRedThreshold')">取消</a-button>
+                        <a-button size="small" type="primary" @click="closePopover('dailyCheckInRateDiff')">确定</a-button>
+                      </div>
+                    </div>
+                  </template>
+                  <a-button
+                    type="text" size="small" shape="circle"
+                    @click.stop
+                    style="width:22px;height:22px;min-width:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;"
+                  >
+                    <setting-outlined style="font-size:13px;" />
+                  </a-button>
+                </a-popover>
+              </div>
+            </template>
+            <template v-else-if="column.key === 'onlineRateDiff'">
+              <div style="display:flex;align-items:center;justify-content:flex-end;gap:4px;">
+                <span>上线率与阈值差</span>
+                <a-popover
+                  v-model:open="popoverVisible.onlineRateDiff"
+                  trigger="click"
+                  placement="bottomRight"
+                  :overlay-style="{ width: '240px' }"
+                  @open-change="(v) => onPopoverOpen('onlineRateDiff', v)"
+                >
+                  <template #title>
+                    <span style="font-size:13px;font-weight:600;">设置上线率阈值</span>
+                  </template>
+                  <template #content>
+                    <div class="popover-threshold-content">
+                      <p class="popover-formula">上线率与阈值差 = 上线率 - 阈值</p>
+                      <div class="popover-input-row">
+                        <span class="popover-label">阈值：</span>
+                        <a-input-number
+                          v-model:value="onlineRateThreshold"
+                          :min="0" :max="100" :step="1"
+                          :formatter="v => `${v}%`"
+                          :parser="v => v.replace('%', '')"
+                          size="small"
+                          style="width:120px;"
+                        />
+                      </div>
+                      <div class="popover-input-row">
+                        <span class="popover-label popover-label-red">红色阈值：</span>
+                        <a-input-number
+                          v-model:value="onlineRateRedThreshold"
+                          :max="-0.1" :step="0.5" :precision="1"
+                          :formatter="v => `${v}%`"
+                          :parser="v => v.replace('%', '')"
+                          size="small"
+                          style="width:120px;"
+                        />
+                      </div>
+                      <p class="popover-red-hint">差值低于红色阈值时显示红色</p>
+                      <div class="popover-actions">
+                        <a-button size="small" @click="cancelPopover('onlineRateDiff', 'onlineRateThreshold', 'onlineRateRedThreshold')">取消</a-button>
+                        <a-button size="small" type="primary" @click="closePopover('onlineRateDiff')">确定</a-button>
+                      </div>
+                    </div>
+                  </template>
+                  <a-button
+                    type="text" size="small" shape="circle"
+                    @click.stop
+                    style="width:22px;height:22px;min-width:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;"
+                  >
+                    <setting-outlined style="font-size:13px;" />
+                  </a-button>
+                </a-popover>
+              </div>
+            </template>
+            <template v-else-if="column.key === 'qualityCheckInRateDiff'">
+              <div style="display:flex;align-items:center;justify-content:flex-end;gap:4px;">
+                <span>打卡优质率与阈值差</span>
+                <a-popover
+                  v-model:open="popoverVisible.qualityCheckInRateDiff"
+                  trigger="click"
+                  placement="bottomRight"
+                  :overlay-style="{ width: '240px' }"
+                  @open-change="(v) => onPopoverOpen('qualityCheckInRateDiff', v)"
+                >
+                  <template #title>
+                    <span style="font-size:13px;font-weight:600;">设置打卡优质率阈值</span>
+                  </template>
+                  <template #content>
+                    <div class="popover-threshold-content">
+                      <p class="popover-formula">打卡优质率与阈值差 = 打卡优质率 - 阈值</p>
+                      <div class="popover-input-row">
+                        <span class="popover-label">阈值：</span>
+                        <a-input-number
+                          v-model:value="qualityCheckInThreshold"
+                          :min="0" :max="100" :step="1"
+                          :formatter="v => `${v}%`"
+                          :parser="v => v.replace('%', '')"
+                          size="small"
+                          style="width:120px;"
+                        />
+                      </div>
+                      <div class="popover-input-row">
+                        <span class="popover-label popover-label-red">红色阈值：</span>
+                        <a-input-number
+                          v-model:value="qualityCheckInRedThreshold"
+                          :max="-0.1" :step="0.5" :precision="1"
+                          :formatter="v => `${v}%`"
+                          :parser="v => v.replace('%', '')"
+                          size="small"
+                          style="width:120px;"
+                        />
+                      </div>
+                      <p class="popover-red-hint">差值低于红色阈值时显示红色</p>
+                      <div class="popover-actions">
+                        <a-button size="small" @click="cancelPopover('qualityCheckInRateDiff', 'qualityCheckInThreshold', 'qualityCheckInRedThreshold')">取消</a-button>
+                        <a-button size="small" type="primary" @click="closePopover('qualityCheckInRateDiff')">确定</a-button>
+                      </div>
+                    </div>
+                  </template>
+                  <a-button
+                    type="text" size="small" shape="circle"
+                    @click.stop
+                    style="width:22px;height:22px;min-width:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;"
+                  >
+                    <setting-outlined style="font-size:13px;" />
+                  </a-button>
+                </a-popover>
+              </div>
+            </template>
+            <template v-else-if="column.key === 'objectiveAccuracyDiff'">
+              <div style="display:flex;align-items:center;justify-content:flex-end;gap:4px;">
+                <span>客观题正确率与阈值差</span>
+                <a-popover
+                  v-model:open="popoverVisible.objectiveAccuracyDiff"
+                  trigger="click"
+                  placement="bottomRight"
+                  :overlay-style="{ width: '240px' }"
+                  @open-change="(v) => onPopoverOpen('objectiveAccuracyDiff', v)"
+                >
+                  <template #title>
+                    <span style="font-size:13px;font-weight:600;">设置客观题正确率阈值</span>
+                  </template>
+                  <template #content>
+                    <div class="popover-threshold-content">
+                      <p class="popover-formula">客观题正确率与阈值差 = 客观题正确率 - 阈值</p>
+                      <div class="popover-input-row">
+                        <span class="popover-label">阈值：</span>
+                        <a-input-number
+                          v-model:value="objectiveAccuracyThreshold"
+                          :min="0" :max="100" :step="1"
+                          :formatter="v => `${v}%`"
+                          :parser="v => v.replace('%', '')"
+                          size="small"
+                          style="width:120px;"
+                        />
+                      </div>
+                      <div class="popover-input-row">
+                        <span class="popover-label popover-label-red">红色阈值：</span>
+                        <a-input-number
+                          v-model:value="objectiveAccuracyRedThreshold"
+                          :max="-0.1" :step="0.5" :precision="1"
+                          :formatter="v => `${v}%`"
+                          :parser="v => v.replace('%', '')"
+                          size="small"
+                          style="width:120px;"
+                        />
+                      </div>
+                      <p class="popover-red-hint">差值低于红色阈值时显示红色</p>
+                      <div class="popover-actions">
+                        <a-button size="small" @click="cancelPopover('objectiveAccuracyDiff', 'objectiveAccuracyThreshold', 'objectiveAccuracyRedThreshold')">取消</a-button>
+                        <a-button size="small" type="primary" @click="closePopover('objectiveAccuracyDiff')">确定</a-button>
+                      </div>
+                    </div>
+                  </template>
+                  <a-button
+                    type="text" size="small" shape="circle"
+                    @click.stop
+                    style="width:22px;height:22px;min-width:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;"
+                  >
+                    <setting-outlined style="font-size:13px;" />
+                  </a-button>
+                </a-popover>
+              </div>
+            </template>
+            <template v-else-if="column.key === 'subjectiveAccuracyDiff'">
+              <div style="display:flex;align-items:center;justify-content:flex-end;gap:4px;">
+                <span>主观题正确率与阈值差</span>
+                <a-popover
+                  v-model:open="popoverVisible.subjectiveAccuracyDiff"
+                  trigger="click"
+                  placement="bottomRight"
+                  :overlay-style="{ width: '240px' }"
+                  @open-change="(v) => onPopoverOpen('subjectiveAccuracyDiff', v)"
+                >
+                  <template #title>
+                    <span style="font-size:13px;font-weight:600;">设置主观题正确率阈值</span>
+                  </template>
+                  <template #content>
+                    <div class="popover-threshold-content">
+                      <p class="popover-formula">主观题正确率与阈值差 = 主观题正确率 - 阈值</p>
+                      <div class="popover-input-row">
+                        <span class="popover-label">阈值：</span>
+                        <a-input-number
+                          v-model:value="subjectiveAccuracyThreshold"
+                          :min="0" :max="100" :step="1"
+                          :formatter="v => `${v}%`"
+                          :parser="v => v.replace('%', '')"
+                          size="small"
+                          style="width:120px;"
+                        />
+                      </div>
+                      <div class="popover-input-row">
+                        <span class="popover-label popover-label-red">红色阈值：</span>
+                        <a-input-number
+                          v-model:value="subjectiveAccuracyRedThreshold"
+                          :max="-0.1" :step="0.5" :precision="1"
+                          :formatter="v => `${v}%`"
+                          :parser="v => v.replace('%', '')"
+                          size="small"
+                          style="width:120px;"
+                        />
+                      </div>
+                      <p class="popover-red-hint">差值低于红色阈值时显示红色</p>
+                      <div class="popover-actions">
+                        <a-button size="small" @click="cancelPopover('subjectiveAccuracyDiff', 'subjectiveAccuracyThreshold', 'subjectiveAccuracyRedThreshold')">取消</a-button>
+                        <a-button size="small" type="primary" @click="closePopover('subjectiveAccuracyDiff')">确定</a-button>
+                      </div>
+                    </div>
+                  </template>
+                  <a-button
+                    type="text" size="small" shape="circle"
+                    @click.stop
+                    style="width:22px;height:22px;min-width:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;"
+                  >
+                    <setting-outlined style="font-size:13px;" />
+                  </a-button>
+                </a-popover>
+              </div>
+            </template>
+            <template v-else-if="column.key === 'homeworkAccuracyDiff'">
+              <div style="display:flex;align-items:center;justify-content:flex-end;gap:4px;">
+                <span>作业正确率与阈值差</span>
+                <a-popover
+                  v-model:open="popoverVisible.homeworkAccuracyDiff"
+                  trigger="click"
+                  placement="bottomRight"
+                  :overlay-style="{ width: '240px' }"
+                  @open-change="(v) => onPopoverOpen('homeworkAccuracyDiff', v)"
+                >
+                  <template #title>
+                    <span style="font-size:13px;font-weight:600;">设置作业正确率阈值</span>
+                  </template>
+                  <template #content>
+                    <div class="popover-threshold-content">
+                      <p class="popover-formula">作业正确率与阈值差 = 作业正确率 - 阈值</p>
+                      <div class="popover-input-row">
+                        <span class="popover-label">阈值：</span>
+                        <a-input-number
+                          v-model:value="homeworkAccuracyThreshold"
+                          :min="0" :max="100" :step="1"
+                          :formatter="v => `${v}%`"
+                          :parser="v => v.replace('%', '')"
+                          size="small"
+                          style="width:120px;"
+                        />
+                      </div>
+                      <div class="popover-input-row">
+                        <span class="popover-label popover-label-red">红色阈值：</span>
+                        <a-input-number
+                          v-model:value="homeworkAccuracyRedThreshold"
+                          :max="-0.1" :step="0.5" :precision="1"
+                          :formatter="v => `${v}%`"
+                          :parser="v => v.replace('%', '')"
+                          size="small"
+                          style="width:120px;"
+                        />
+                      </div>
+                      <p class="popover-red-hint">差值低于红色阈值时显示红色</p>
+                      <div class="popover-actions">
+                        <a-button size="small" @click="cancelPopover('homeworkAccuracyDiff', 'homeworkAccuracyThreshold', 'homeworkAccuracyRedThreshold')">取消</a-button>
+                        <a-button size="small" type="primary" @click="closePopover('homeworkAccuracyDiff')">确定</a-button>
+                      </div>
+                    </div>
+                  </template>
+                  <a-button
+                    type="text" size="small" shape="circle"
+                    @click.stop
+                    style="width:22px;height:22px;min-width:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;"
+                  >
+                    <setting-outlined style="font-size:13px;" />
+                  </a-button>
+                </a-popover>
+              </div>
+            </template>
+            <template v-else-if="column.key === 'homeworkExcellenceRateDiff'">
+              <div style="display:flex;align-items:center;justify-content:flex-end;gap:4px;">
+                <span>作业优秀率与阈值差</span>
+                <a-popover
+                  v-model:open="popoverVisible.homeworkExcellenceRateDiff"
+                  trigger="click"
+                  placement="bottomRight"
+                  :overlay-style="{ width: '240px' }"
+                  @open-change="(v) => onPopoverOpen('homeworkExcellenceRateDiff', v)"
+                >
+                  <template #title>
+                    <span style="font-size:13px;font-weight:600;">设置作业优秀率阈值</span>
+                  </template>
+                  <template #content>
+                    <div class="popover-threshold-content">
+                      <p class="popover-formula">作业优秀率与阈值差 = 作业优秀率 - 阈值</p>
+                      <div class="popover-input-row">
+                        <span class="popover-label">阈值：</span>
+                        <a-input-number
+                          v-model:value="homeworkExcellenceThreshold"
+                          :min="0" :max="100" :step="1"
+                          :formatter="v => `${v}%`"
+                          :parser="v => v.replace('%', '')"
+                          size="small"
+                          style="width:120px;"
+                        />
+                      </div>
+                      <div class="popover-input-row">
+                        <span class="popover-label popover-label-red">红色阈值：</span>
+                        <a-input-number
+                          v-model:value="homeworkExcellenceRedThreshold"
+                          :max="-0.1" :step="0.5" :precision="1"
+                          :formatter="v => `${v}%`"
+                          :parser="v => v.replace('%', '')"
+                          size="small"
+                          style="width:120px;"
+                        />
+                      </div>
+                      <p class="popover-red-hint">差值低于红色阈值时显示红色</p>
+                      <div class="popover-actions">
+                        <a-button size="small" @click="cancelPopover('homeworkExcellenceRateDiff', 'homeworkExcellenceThreshold', 'homeworkExcellenceRedThreshold')">取消</a-button>
+                        <a-button size="small" type="primary" @click="closePopover('homeworkExcellenceRateDiff')">确定</a-button>
+                      </div>
+                    </div>
+                  </template>
+                  <a-button
+                    type="text" size="small" shape="circle"
+                    @click.stop
+                    style="width:22px;height:22px;min-width:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;"
+                  >
+                    <setting-outlined style="font-size:13px;" />
+                  </a-button>
+                </a-popover>
+              </div>
+            </template>
+            <template v-else-if="column.key === 'improvementRateDiff'">
+              <div style="display:flex;align-items:center;justify-content:flex-end;gap:4px;">
+                <span>作业进步率与阈值差</span>
+                <a-popover
+                  v-model:open="popoverVisible.improvementRateDiff"
+                  trigger="click"
+                  placement="bottomRight"
+                  :overlay-style="{ width: '240px' }"
+                  @open-change="(v) => onPopoverOpen('improvementRateDiff', v)"
+                >
+                  <template #title>
+                    <span style="font-size:13px;font-weight:600;">设置作业进步率阈值</span>
+                  </template>
+                  <template #content>
+                    <div class="popover-threshold-content">
+                      <p class="popover-formula">作业进步率与阈值差 = 作业进步率 - 阈值</p>
+                      <div class="popover-input-row">
+                        <span class="popover-label">阈值：</span>
+                        <a-input-number
+                          v-model:value="improvementRateThreshold"
+                          :min="0" :max="100" :step="1"
+                          :formatter="v => `${v}%`"
+                          :parser="v => v.replace('%', '')"
+                          size="small"
+                          style="width:120px;"
+                        />
+                      </div>
+                      <div class="popover-input-row">
+                        <span class="popover-label popover-label-red">红色阈值：</span>
+                        <a-input-number
+                          v-model:value="improvementRateRedThreshold"
+                          :max="-0.1" :step="0.5" :precision="1"
+                          :formatter="v => `${v}%`"
+                          :parser="v => v.replace('%', '')"
+                          size="small"
+                          style="width:120px;"
+                        />
+                      </div>
+                      <p class="popover-red-hint">差值低于红色阈值时显示红色</p>
+                      <div class="popover-actions">
+                        <a-button size="small" @click="cancelPopover('improvementRateDiff', 'improvementRateThreshold', 'improvementRateRedThreshold')">取消</a-button>
+                        <a-button size="small" type="primary" @click="closePopover('improvementRateDiff')">确定</a-button>
+                      </div>
+                    </div>
+                  </template>
+                  <a-button
+                    type="text" size="small" shape="circle"
+                    @click.stop
+                    style="width:22px;height:22px;min-width:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;"
+                  >
+                    <setting-outlined style="font-size:13px;" />
+                  </a-button>
+                </a-popover>
+              </div>
+            </template>
+            <template v-else-if="column.key === 'courseCompletionRateDiff'">
+              <div style="display:flex;align-items:center;justify-content:flex-end;gap:4px;">
+                <span>课程完成率与阈值差</span>
+                <a-popover
+                  v-model:open="popoverVisible.courseCompletionRateDiff"
+                  trigger="click"
+                  placement="bottomRight"
+                  :overlay-style="{ width: '240px' }"
+                  @open-change="(v) => onPopoverOpen('courseCompletionRateDiff', v)"
+                >
+                  <template #title>
+                    <span style="font-size:13px;font-weight:600;">设置课程完成率阈值</span>
+                  </template>
+                  <template #content>
+                    <div class="popover-threshold-content">
+                      <p class="popover-formula">课程完成率与阈值差 = 课程完成率 - 阈值</p>
+                      <div class="popover-input-row">
+                        <span class="popover-label">阈值：</span>
+                        <a-input-number
+                          v-model:value="courseCompletionThreshold"
+                          :min="0" :max="100" :step="1"
+                          :formatter="v => `${v}%`"
+                          :parser="v => v.replace('%', '')"
+                          size="small"
+                          style="width:120px;"
+                        />
+                      </div>
+                      <div class="popover-input-row">
+                        <span class="popover-label popover-label-red">红色阈值：</span>
+                        <a-input-number
+                          v-model:value="courseCompletionRedThreshold"
+                          :max="-0.1" :step="0.5" :precision="1"
+                          :formatter="v => `${v}%`"
+                          :parser="v => v.replace('%', '')"
+                          size="small"
+                          style="width:120px;"
+                        />
+                      </div>
+                      <p class="popover-red-hint">差值低于红色阈值时显示红色</p>
+                      <div class="popover-actions">
+                        <a-button size="small" @click="cancelPopover('courseCompletionRateDiff', 'courseCompletionThreshold', 'courseCompletionRedThreshold')">取消</a-button>
+                        <a-button size="small" type="primary" @click="closePopover('courseCompletionRateDiff')">确定</a-button>
+                      </div>
+                    </div>
+                  </template>
+                  <a-button
+                    type="text" size="small" shape="circle"
+                    @click.stop
+                    style="width:22px;height:22px;min-width:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;"
+                  >
+                    <setting-outlined style="font-size:13px;" />
+                  </a-button>
+                </a-popover>
+              </div>
+            </template>
+            <template v-else-if="column.key === 'homeworkMasteryRateDiff'">
+              <div style="display:flex;align-items:center;justify-content:flex-end;gap:4px;">
+                <span>作业攻克率与阈值差</span>
+                <a-popover
+                  v-model:open="popoverVisible.homeworkMasteryRateDiff"
+                  trigger="click"
+                  placement="bottomRight"
+                  :overlay-style="{ width: '240px' }"
+                  @open-change="(v) => onPopoverOpen('homeworkMasteryRateDiff', v)"
+                >
+                  <template #title>
+                    <span style="font-size:13px;font-weight:600;">设置作业攻克率阈值</span>
+                  </template>
+                  <template #content>
+                    <div class="popover-threshold-content">
+                      <p class="popover-formula">作业攻克率与阈值差 = 作业攻克率 - 阈值</p>
+                      <div class="popover-input-row">
+                        <span class="popover-label">阈值：</span>
+                        <a-input-number
+                          v-model:value="homeworkMasteryThreshold"
+                          :min="0" :max="100" :step="1"
+                          :formatter="v => `${v}%`"
+                          :parser="v => v.replace('%', '')"
+                          size="small"
+                          style="width:120px;"
+                        />
+                      </div>
+                      <div class="popover-input-row">
+                        <span class="popover-label popover-label-red">红色阈值：</span>
+                        <a-input-number
+                          v-model:value="homeworkMasteryRedThreshold"
+                          :max="-0.1" :step="0.5" :precision="1"
+                          :formatter="v => `${v}%`"
+                          :parser="v => v.replace('%', '')"
+                          size="small"
+                          style="width:120px;"
+                        />
+                      </div>
+                      <p class="popover-red-hint">差值低于红色阈值时显示红色</p>
+                      <div class="popover-actions">
+                        <a-button size="small" @click="cancelPopover('homeworkMasteryRateDiff', 'homeworkMasteryThreshold', 'homeworkMasteryRedThreshold')">取消</a-button>
+                        <a-button size="small" type="primary" @click="closePopover('homeworkMasteryRateDiff')">确定</a-button>
+                      </div>
+                    </div>
+                  </template>
+                  <a-button
+                    type="text" size="small" shape="circle"
+                    @click.stop
+                    style="width:22px;height:22px;min-width:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;"
+                  >
+                    <setting-outlined style="font-size:13px;" />
+                  </a-button>
+                </a-popover>
+              </div>
+            </template>
+            <template v-else-if="column.key === 'noParticipationRateDiff'">
+              <div style="display:flex;align-items:center;justify-content:flex-end;gap:4px;">
+                <span>未打卡率与阈值差</span>
+                <a-popover
+                  v-model:open="popoverVisible.noParticipationRateDiff"
+                  trigger="click"
+                  placement="bottomRight"
+                  :overlay-style="{ width: '260px' }"
+                  @open-change="(v) => onPopoverOpen('noParticipationRateDiff', v)"
+                >
+                  <template #title>
+                    <span style="font-size:13px;font-weight:600;">设置未参与打卡率阈值</span>
+                  </template>
+                  <template #content>
+                    <div class="popover-threshold-content">
+                      <p class="popover-formula">未打卡率与阈值差 = 阈值 - 未参与打卡率</p>
+                      <div class="popover-input-row">
+                        <span class="popover-label">阈值：</span>
+                        <a-input-number
+                          v-model:value="noParticipationThreshold"
+                          :min="0" :max="100" :step="1"
+                          :formatter="v => `${v}%`"
+                          :parser="v => v.replace('%', '')"
+                          size="small"
+                          style="width:120px;"
+                        />
+                      </div>
+                      <div class="popover-input-row">
+                        <span class="popover-label popover-label-red">红色阈值：</span>
+                        <a-input-number
+                          v-model:value="noParticipationRedThreshold"
+                          :max="-0.1" :step="0.5" :precision="1"
+                          :formatter="v => `${v}%`"
+                          :parser="v => v.replace('%', '')"
+                          size="small"
+                          style="width:120px;"
+                        />
+                      </div>
+                      <p class="popover-red-hint">差值低于红色阈值时显示红色</p>
+                      <div class="popover-actions">
+                        <a-button size="small" @click="cancelPopover('noParticipationRateDiff', 'noParticipationThreshold', 'noParticipationRedThreshold')">取消</a-button>
+                        <a-button size="small" type="primary" @click="closePopover('noParticipationRateDiff')">确定</a-button>
+                      </div>
+                    </div>
+                  </template>
+                  <a-button
+                    type="text" size="small" shape="circle"
+                    @click.stop
+                    style="width:22px;height:22px;min-width:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;"
+                  >
+                    <setting-outlined style="font-size:13px;" />
+                  </a-button>
+                </a-popover>
+              </div>
+            </template>
+            <template v-else-if="column.key === 'dropoutRateDiff'">
+              <div style="display:flex;align-items:center;justify-content:flex-end;gap:4px;">
+                <span>退学率与阈值之差</span>
+                <a-popover
+                  v-model:open="popoverVisible.dropoutRateDiff"
+                  trigger="click"
+                  placement="bottomRight"
+                  :overlay-style="{ width: '240px' }"
+                  @open-change="(v) => onPopoverOpen('dropoutRateDiff', v)"
+                >
+                  <template #title>
+                    <span style="font-size:13px;font-weight:600;">设置退学率阈值</span>
+                  </template>
+                  <template #content>
+                    <div class="popover-threshold-content">
+                      <p class="popover-formula">退学率与阈值之差 = 阈值 - 退学率</p>
+                      <div class="popover-input-row">
+                        <span class="popover-label">阈值：</span>
+                        <a-input-number
+                          v-model:value="dropoutRateThreshold"
+                          :min="0" :max="100" :step="1"
+                          :formatter="v => `${v}%`"
+                          :parser="v => v.replace('%', '')"
+                          size="small"
+                          style="width:120px;"
+                        />
+                      </div>
+                      <div class="popover-input-row">
+                        <span class="popover-label popover-label-red">红色阈值：</span>
+                        <a-input-number
+                          v-model:value="dropoutRateRedThreshold"
+                          :max="-0.1" :step="0.5" :precision="1"
+                          :formatter="v => `${v}%`"
+                          :parser="v => v.replace('%', '')"
+                          size="small"
+                          style="width:120px;"
+                        />
+                      </div>
+                      <p class="popover-red-hint">差值低于红色阈值时显示红色</p>
+                      <div class="popover-actions">
+                        <a-button size="small" @click="cancelPopover('dropoutRateDiff', 'dropoutRateThreshold', 'dropoutRateRedThreshold')">取消</a-button>
+                        <a-button size="small" type="primary" @click="closePopover('dropoutRateDiff')">确定</a-button>
+                      </div>
+                    </div>
+                  </template>
+                  <a-button
+                    type="text" size="small" shape="circle"
+                    @click.stop
+                    style="width:22px;height:22px;min-width:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;"
+                  >
+                    <setting-outlined style="font-size:13px;" />
+                  </a-button>
+                </a-popover>
+              </div>
+            </template>
+          </template>
+
+          <!-- 自定义单元格：差值列条件格式化 -->
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'interactionRateDiff'">
+              <div :class="getDiffClass(record._raw.interactionRateDiff, interactionRedThreshold)">{{ record.interactionRateDiff }}</div>
+            </template>
+            <template v-else-if="column.key === 'dailyCheckInRateDiff'">
+              <div :class="getDiffClass(record._raw.dailyCheckInRateDiff, dailyCheckInRedThreshold)">{{ record.dailyCheckInRateDiff }}</div>
+            </template>
+            <template v-else-if="column.key === 'onlineRateDiff'">
+              <div :class="getDiffClass(record._raw.onlineRateDiff, onlineRateRedThreshold)">{{ record.onlineRateDiff }}</div>
+            </template>
+            <template v-else-if="column.key === 'qualityCheckInRateDiff'">
+              <div :class="getDiffClass(record._raw.qualityCheckInRateDiff, qualityCheckInRedThreshold)">{{ record.qualityCheckInRateDiff }}</div>
+            </template>
+            <template v-else-if="column.key === 'objectiveAccuracyDiff'">
+              <div :class="getDiffClass(record._raw.objectiveAccuracyDiff, objectiveAccuracyRedThreshold)">{{ record.objectiveAccuracyDiff }}</div>
+            </template>
+            <template v-else-if="column.key === 'subjectiveAccuracyDiff'">
+              <div :class="getDiffClass(record._raw.subjectiveAccuracyDiff, subjectiveAccuracyRedThreshold)">{{ record.subjectiveAccuracyDiff }}</div>
+            </template>
+            <template v-else-if="column.key === 'homeworkAccuracyDiff'">
+              <div :class="getDiffClass(record._raw.homeworkAccuracyDiff, homeworkAccuracyRedThreshold)">{{ record.homeworkAccuracyDiff }}</div>
+            </template>
+            <template v-else-if="column.key === 'homeworkExcellenceRateDiff'">
+              <div :class="getDiffClass(record._raw.homeworkExcellenceRateDiff, homeworkExcellenceRedThreshold)">{{ record.homeworkExcellenceRateDiff }}</div>
+            </template>
+            <template v-else-if="column.key === 'improvementRateDiff'">
+              <div :class="getDiffClass(record._raw.improvementRateDiff, improvementRateRedThreshold)">{{ record.improvementRateDiff }}</div>
+            </template>
+            <template v-else-if="column.key === 'courseCompletionRateDiff'">
+              <div :class="getDiffClass(record._raw.courseCompletionRateDiff, courseCompletionRedThreshold)">{{ record.courseCompletionRateDiff }}</div>
+            </template>
+            <template v-else-if="column.key === 'homeworkMasteryRateDiff'">
+              <div :class="getDiffClass(record._raw.homeworkMasteryRateDiff, homeworkMasteryRedThreshold)">{{ record.homeworkMasteryRateDiff }}</div>
+            </template>
+            <template v-else-if="column.key === 'noParticipationRateDiff'">
+              <div :class="getNoParticipationDiffClass(record._raw.noParticipationRateDiff, noParticipationRedThreshold)">{{ record.noParticipationRateDiff }}</div>
+            </template>
+            <template v-else-if="column.key === 'dropoutRateDiff'">
+              <div :class="getNoParticipationDiffClass(record._raw.dropoutRateDiff, dropoutRateRedThreshold)">{{ record.dropoutRateDiff }}</div>
+            </template>
+          </template>
+        </a-table>
+      </div>
+    </t-card>
+
+    <!-- 统计图表区域（下侧） -->
+    <t-card class="chart-card">
+      <template #header>
+        <div class="card-header">
+          <div class="header-left">
+            <span class="card-title">数据趋势图</span>
+            <span v-if="selectedDate" class="selected-info">（已选：{{ selectedDate }}）</span>
+            
+          </div>
+          <div class="chart-controls">
+            <div class="control-item">
+              <label class="control-label">
+                <t-icon name="chart" size="16" />
+                <span>展示指标</span>
+              </label>
+              <t-select
+                v-model="selectedMetrics"
+                :options="metricOptions"
+                placeholder="选择展示指标"
+                multiple
+                clearable
+                :max="10"
+                style="width: 480px"
+                class="metrics-select"
+              />
+              <span class="metric-count">{{ selectedMetrics.length }}/{{ metricOptions.length }}</span>
+              <div class="quick-actions">
+                <t-button 
+                  size="small" 
+                  variant="text" 
+                  @click="selectAllMetrics"
+                  :disabled="selectedMetrics.length === metricOptions.length"
+                >
+                  全选
+                </t-button>
+                <t-button 
+                  size="small" 
+                  variant="text" 
+                  @click="clearAllMetrics"
+                  :disabled="selectedMetrics.length === 0"
+                >
+                  清空
+                </t-button>
+              </div>
+            </div>
+            <div class="control-divider"></div>
+            <div class="control-item">
+              <label class="control-label">
+                <t-icon name="chart-bar" size="16" />
+                <span>图表类型</span>
+              </label>
+              <t-radio-group v-model="chartType" variant="default-filled">
+                <t-radio-button value="line">
+                  <t-icon name="chart-line" size="14" style="margin-right: 4px;" />
+                  折线图
+                </t-radio-button>
+                <t-radio-button value="bar">
+                  <t-icon name="chart-bar" size="14" style="margin-right: 4px;" />
+                  柱状图
+                </t-radio-button>
+              </t-radio-group>
+            </div>
+          </div>
+        </div>
+      </template>
+      <div ref="chartContainer" class="chart-container"></div>
+    </t-card>
+    </div>
+
+    <!-- 阈值设置气泡卡片（通过 a-popover 内联在列头，无需独立 modal） -->
+
+    <!-- 导出确认模态框 -->
+    <t-dialog
+      v-model:visible="showExportModal"
+      header="确认导出数据"
+      :confirm-btn="{ content: '确定导出', theme: 'primary', loading: isExporting }"
+      :cancel-btn="{ content: '取消' }"
+      @confirm="handleExportData"
+      @close="showExportModal = false"
+      width="600px"
+    >
+      <div class="export-modal-content">
+        <p class="export-tip">即将导出符合以下筛选条件的数据：</p>
+        <div class="export-filters">
+          <div class="export-filter-item">
+            <span class="export-filter-label">云校：</span>
+            <t-select
+              v-model="selectedCloudSchool"
+              :options="cloudSchoolOptions"
+              placeholder="请选择"
+              style="width: 130px;"
+              filterable
+              @change="handleCloudSchoolChange"
+            />
+          </div>
+          <div class="export-filter-item">
+            <span class="export-filter-label">学校：</span>
+            <t-select
+              v-model="selectedSchool"
+              :options="schoolOptions"
+              placeholder="请选择"
+              style="width: 130px;"
+              filterable
+              clearable
+              @change="handleSchoolChange"
+            />
+          </div>
+          <div class="export-filter-item">
+            <span class="export-filter-label">年级：</span>
+            <t-select
+              v-model="selectedGrade"
+              :options="gradeOptions"
+              :placeholder="selectedSchool ? '请选择' : '请先选择学校'"
+              style="width: 130px;"
+              :disabled="!selectedSchool"
+              clearable
+              @change="handleGradeChange"
+            />
+          </div>
+          <div class="export-filter-item">
+            <span class="export-filter-label">班级：</span>
+            <t-select
+              v-model="selectedClass"
+              :options="classOptions"
+              :placeholder="selectedGrade ? '请选择' : '请先选择年级'"
+              style="width: 130px;"
+              :disabled="!selectedGrade"
+              filterable
+              clearable
+              @change="handleClassChange"
+            />
+          </div>
+          <div class="export-filter-item">
+            <span class="export-filter-label">科目：</span>
+            <t-select
+              v-model="selectedSubject"
+              :options="subjectOptions"
+              placeholder="请选择"
+              style="width: 130px;"
+              @change="handleSubjectChange"
+            />
+          </div>
+          <div class="export-filter-item">
+            <span class="export-filter-label">层次：</span>
+            <t-select
+              v-model="selectedLevel"
+              :options="levelOptions"
+              placeholder="请选择"
+              style="width: 130px;"
+              @change="handleLevelChange"
+            />
+          </div>
+          <div class="export-filter-item" style="grid-column: 1 / -1; align-items: flex-start;">
+            <span class="export-filter-label" style="margin-top: 6px;">时间：</span>
+            <div class="date-picker-wrapper">
+              <div class="date-picker-row">
+                <a-range-picker
+                  v-model:value="exportDateRange"
+                  format="YYYY-MM-DD"
+                  :placeholder="['开始', '结束']"
+                  :disabled-date="(current) => current && current.isAfter(dayjs().endOf('day'))"
+                  @change="handleExportDateChange"
+                  style="width: 240px;"
+                  :getPopupContainer="getPopupContainer"
+                />
+                <span class="date-range-hint">
+                  <info-circle-outlined class="hint-icon" />
+                  无时间范围限制
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- <p class="export-count">共计 <strong>{{ filteredData.length }}</strong> 条数据</p> -->
+      </div>
+    </t-dialog>
+
+    <!-- 编辑列模态框 -->
+    <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>
+
+    <!-- 底部版权 (复用 PortalHomePage 风格) -->
+    <footer class="portal-footer">
+      <span>Copyright © 2025 &nbsp;QuanXue. All Rights Reserved.&nbsp; 渝ICP备05088888号</span>
+    </footer>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import { SettingOutlined, InfoCircleOutlined, ReloadOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
+import { message } from 'ant-design-vue'
+import * as echarts from 'echarts'
+import dayjs from 'dayjs'
+import * as XLSX from 'xlsx'
+import draggable from 'vuedraggable'
+
+const router = useRouter()
+
+// 顶部导航栏状态
+const showDropdown = ref(false)
+
+// 返回首页 - 使用路由导航
+const goBack = () => {
+  router.push('/report-home')
+}
+
+// 处理退出登录
+const handleLogout = () => {
+  // 清除登录状态
+  localStorage.removeItem('token')
+  localStorage.removeItem('userInfo')
+  // 跳转到登录页
+  router.push('/login')
+  message.success('已退出登录')
+}
+
+const chartType = ref('line')
+const selectedDate = ref(null)
+// 默认选中所有指标
+const selectedMetrics = ref([
+  'interactionRate',
+  'dailyCheckInRate',
+  'onlineRate',
+  'qualityCheckInRate',
+  'objectiveAccuracy',
+  'subjectiveAccuracy',
+  'homeworkAccuracy',
+  'homeworkExcellenceRate',
+  'improvementRate',
+  'courseCompletionRate',
+  'homeworkMasteryRate',
+  'noParticipationRate',
+  'dropoutRate'
+])
+const chartContainer = ref(null)
+let chartInstance = null
+let initTimer = null
+let mountTimer = null
+
+// 日期范围选择
+const dateRange = ref([dayjs().subtract(29, 'days'), dayjs()])
+const dates = ref([])
+const dateRangeError = ref('')
+
+// 最大查询跨度：30天
+const MAX_DAYS = 30
+
+// 禁用日期：限制最大跨度为30天
+// 使用 >= 确保恰好30天（差值=30）时仍可选，差值>30时才禁用
+const disabledDate = (current) => {
+  // 禁用未来日期
+  if (current && current.isAfter(dayjs().endOf('day'))) {
+    return true
+  }
+
+  if (!dates.value || dates.value.length === 0) {
+    return false
+  }
+  
+  const tooLate = dates.value[0] && current.diff(dates.value[0], 'days') > MAX_DAYS
+  const tooEarly = dates.value[1] && dates.value[1].diff(current, 'days') > MAX_DAYS
+  
+  return tooLate || tooEarly
+}
+
+// 日历变化时记录选择（用于 disabledDate 动态计算）
+const handleCalendarChange = (val) => {
+  dates.value = val
+  // 用户重新选择时清除旧错误
+  dateRangeError.value = ''
+}
+
+// 验证日期范围是否合法，返回错误信息或空字符串
+const validateDateRange = (rangeVal) => {
+  if (!rangeVal || rangeVal.length !== 2) return ''
+  const [start, end] = rangeVal
+  if (!start || !end) return ''
+  // 使用 startOf('day') 截断时间部分，确保边界精确到天
+  const startDay = start.startOf('day')
+  const endDay = end.startOf('day')
+  const daysDiff = endDay.diff(startDay, 'days')
+  if (daysDiff > MAX_DAYS) {
+    return `时间跨度不能超过 ${MAX_DAYS} 天，当前已选 ${daysDiff} 天，请重新选择`
+  }
+  return ''
+}
+
+// 日期变化时验证
+const handleDateChange = (rangeVal) => {
+  const error = validateDateRange(rangeVal)
+  if (error) {
+    dateRangeError.value = error
+    dateRange.value = null
+    dates.value = []
+    return
+  }
+  dateRangeError.value = ''
+  if (rangeVal && rangeVal.length === 2 && rangeVal[0] && rangeVal[1]) {
+    const [start, end] = rangeVal
+    message.success(`已选择时间范围：${start.format('YYYY-MM-DD')} 至 ${end.format('YYYY-MM-DD')}`)
+  }
+}
+
+// 导出模态框中的日期变化处理（无30天限制）
+const handleExportDateChange = (rangeVal) => {
+  if (rangeVal && rangeVal.length === 2 && rangeVal[0] && rangeVal[1]) {
+    const [start, end] = rangeVal
+    message.success(`已选择时间范围：${start.format('YYYY-MM-DD')} 至 ${end.format('YYYY-MM-DD')}`)
+  }
+}
+
+// 解决模态框中日期选择器层级被遮挡的问题
+const getPopupContainer = () => document.body
+
+// ==================== 学校-年级-班级级联筛选 ====================
+// 学校选择
+const selectedSchool = ref('')
+// 学校示例数据
+const schoolOptions = [
+  { label: '重庆八中', value: 'chongqing8' },
+  { label: '河南郑州一中', value: 'henan1' },
+  { label: '安徽合肥一中', value: 'anhui1' },
+  { label: '四川成都七中', value: 'sichuan7' },
+  { label: '湖北武汉二中', value: 'hubei2' }
+]
+
+// 年级选择
+const selectedGrade = ref('')
+// 年级示例数据（根据学校动态变化）
+const allGradeData = {
+  chongqing8: [
+    { label: '高一', value: 'g1' },
+    { label: '高二', value: 'g2' },
+    { label: '高三', value: 'g3' }
+  ],
+  henan1: [
+    { label: '高一', value: 'g1' },
+    { label: '高二', value: 'g2' },
+    { label: '高三', value: 'g3' }
+  ],
+  anhui1: [
+    { label: '高一', value: 'g1' },
+    { label: '高二', value: 'g2' },
+    { label: '高三', value: 'g3' }
+  ],
+  sichuan7: [
+    { label: '高一', value: 'g1' },
+    { label: '高二', value: 'g2' },
+    { label: '高三', value: 'g3' }
+  ],
+  hubei2: [
+    { label: '高一', value: 'g1' },
+    { label: '高二', value: 'g2' },
+    { label: '高三', value: 'g3' }
+  ]
+}
+// 年级选项（动态计算）
+const gradeOptions = computed(() => {
+  if (!selectedSchool.value) return []
+  return allGradeData[selectedSchool.value] || []
+})
+
+// 班级选择
+const selectedClass = ref('')
+// 班级示例数据（根据年级动态变化）
+const allClassData = {
+  g1: [
+    { label: '高一(1)班', value: 'c1' },
+    { label: '高一(2)班', value: 'c2' },
+    { label: '高一(3)班', value: 'c3' },
+    { label: '高一(4)班', value: 'c4' },
+    { label: '高一(5)班', value: 'c5' },
+    { label: '高一(6)班', value: 'c6' }
+  ],
+  g2: [
+    { label: '高二(1)班', value: 'c1' },
+    { label: '高二(2)班', value: 'c2' },
+    { label: '高二(3)班', value: 'c3' },
+    { label: '高二(4)班', value: 'c4' },
+    { label: '高二(5)班', value: 'c5' },
+    { label: '高二(6)班', value: 'c6' }
+  ],
+  g3: [
+    { label: '高三(1)班', value: 'c1' },
+    { label: '高三(2)班', value: 'c2' },
+    { label: '高三(3)班', value: 'c3' },
+    { label: '高三(4)班', value: 'c4' },
+    { label: '高三(5)班', value: 'c5' },
+    { label: '高三(6)班', value: 'c6' }
+  ]
+}
+// 班级选项（动态计算）
+const classOptions = computed(() => {
+  if (!selectedGrade.value) return []
+  return allClassData[selectedGrade.value] || []
+})
+
+// 学校切换处理
+const handleSchoolChange = (value) => {
+  // 重置年级和班级
+  selectedGrade.value = ''
+  selectedClass.value = ''
+  if (value) {
+    const schoolName = schoolOptions.find(opt => opt.value === value)?.label || ''
+    message.success(`已选择学校：${schoolName}，请继续选择年级`)
+  } else {
+    message.info('已清除学校选择')
+  }
+}
+
+// 年级切换处理
+const handleGradeChange = (value) => {
+  // 重置班级
+  selectedClass.value = ''
+  if (value) {
+    const gradeName = gradeOptions.value.find(opt => opt.value === value)?.label || ''
+    message.success(`已选择年级：${gradeName}，请继续选择班级`)
+  } else {
+    message.info('已清除年级选择')
+  }
+}
+
+// 班级切换处理
+const handleClassChange = (value) => {
+  if (value) {
+    const className = classOptions.value.find(opt => opt.value === value)?.label || ''
+    message.success(`已选择班级：${className}`)
+  } else {
+    message.info('已清除班级选择')
+  }
+}
+
+// ==================== 原有筛选器 ====================
+// 云校选择
+const selectedCloudSchool = ref('all')
+const cloudSchoolOptions = [
+  { label: '所有云校', value: 'all' },
+  { label: '重庆八中云校', value: 'chongqing' },
+  { label: '河南云校', value: 'henan' },
+  { label: '安徽云校', value: 'anhui' }
+]
+
+// 科目选择
+const selectedSubject = ref('all')
+const subjectOptions = [
+  { label: '全部', value: 'all' },
+  { label: '语文', value: 'chinese' },
+  { label: '数学', value: 'math' },
+  { label: '英语', value: 'english' },
+  { label: '物理', value: 'physics' },
+  { label: '化学', value: 'chemistry' },
+  { label: '政治', value: 'politics' },
+  { label: '生物', value: 'biology' },
+  { label: '历史', value: 'history' },
+  { label: '地理', value: 'geography' }
+]
+
+// 学生层次选择
+const selectedLevel = ref('all')
+const levelOptions = [
+  { label: '全部', value: 'all' },
+  { label: '本科', value: 'undergraduate' },
+  { label: '特控', value: 'special' },
+  { label: '拔尖', value: 'top' }
+]
+
+// 重置筛选条件
+const handleResetFilters = () => {
+  selectedCloudSchool.value = 'all'
+  selectedSchool.value = ''
+  selectedGrade.value = ''
+  selectedClass.value = ''
+  selectedSubject.value = 'all'
+  selectedLevel.value = 'all'
+  dateRange.value = null
+  dates.value = []
+  dateRangeError.value = ''
+  paginationConfig.value.current = 1
+  message.success('已重置所有筛选条件')
+}
+
+// 查询
+const handleSearch = () => {
+  // 提交前再次校验日期范围
+  const error = validateDateRange(dateRange.value)
+  if (error) {
+    dateRangeError.value = error
+    message.error(error)
+    return
+  }
+  paginationConfig.value.current = 1
+  message.success('查询成功')
+  nextTick(() => updateChart())
+}
+
+// 云校切换处理
+const handleCloudSchoolChange = (value) => {
+  const schoolName = cloudSchoolOptions.find(opt => opt.value === value)?.label || '所有云校'
+  message.success(`已选择：${schoolName}`)
+}
+
+// 科目切换处理
+const handleSubjectChange = (value) => {
+  const subjectName = subjectOptions.find(opt => opt.value === value)?.label || '全部'
+  message.success(`已选择科目：${subjectName}`)
+}
+
+// 学生层次切换处理
+const handleLevelChange = (value) => {
+  const levelName = levelOptions.find(opt => opt.value === value)?.label || '全部'
+  message.success(`已选择学生层次：${levelName}`)
+}
+
+// localStorage 键名
+const COLUMN_ORDER_KEY = 'homework_report_column_order'
+
+// 默认列顺序和可见性配置
+const defaultColumnConfig = [
+  { key: 'id', visible: true },
+  { key: 'date', visible: true },
+  { key: 'interactionRate', visible: true },
+  { key: 'dailyCheckInRate', visible: true },
+  { key: 'onlineRate', visible: true },
+  { key: 'qualityCheckInRate', visible: true },
+  { key: 'objectiveAccuracy', visible: true },
+  { key: 'subjectiveAccuracy', visible: true },
+  { key: 'homeworkAccuracy', visible: true },
+  { key: 'homeworkExcellenceRate', visible: true },
+  { key: 'improvementRate', visible: true },
+  { key: 'courseCompletionRate', visible: true },
+  { key: 'homeworkMasteryRate', visible: true },
+  { key: 'noParticipationRate', visible: true },
+  { key: 'dropoutRate', visible: true },
+  { key: 'interactionRateDiff', visible: true },
+  { key: 'dailyCheckInRateDiff', visible: true },
+  { key: 'onlineRateDiff', visible: true },
+  { key: 'qualityCheckInRateDiff', visible: true },
+  { key: 'objectiveAccuracyDiff', visible: true },
+  { key: 'subjectiveAccuracyDiff', visible: true },
+  { key: 'homeworkAccuracyDiff', visible: true },
+  { key: 'homeworkExcellenceRateDiff', visible: true },
+  { key: 'improvementRateDiff', visible: true },
+  { key: 'courseCompletionRateDiff', visible: true },
+  { key: 'homeworkMasteryRateDiff', visible: true },
+  { key: 'noParticipationRateDiff', visible: true },
+  { key: 'dropoutRateDiff', visible: true }
+]
+
+// 当前列配置（从localStorage恢复或使用默认）
+const columnConfig = ref([...defaultColumnConfig])
+
+// 是否有自定义列配置
+const hasCustomColumnOrder = ref(false)
+
+// 编辑列模态框状态
+const showColumnEditorModal = ref(false)
+const tempColumnList = ref([])
+
+// 颜色高亮阈值配置（控制红/橙/绿分界点，默认 -10）—— 已废弃全局配置，改为各列独立
+const COLOR_THRESHOLD_KEY = 'homework_report_color_threshold'
+const colorThreshold = ref(-10)
+
+// 互动率阈值配置（可通过齿轮按钮调整）
+const interactionThreshold = ref(40)
+// 互动率列独立红色阈值（默认 -10）
+const interactionRedThreshold = ref(-10)
+
+// 每日作业打卡率阈值配置（默认 80%）
+const dailyCheckInThreshold = ref(80)
+// 每日作业打卡率列独立红色阈值
+const dailyCheckInRedThreshold = ref(-10)
+
+// 上线率阈值配置（默认 80%）
+const onlineRateThreshold = ref(80)
+// 上线率列独立红色阈值
+const onlineRateRedThreshold = ref(-10)
+
+// 打卡优质率阈值配置（默认 40%）
+const qualityCheckInThreshold = ref(40)
+// 打卡优质率列独立红色阈值
+const qualityCheckInRedThreshold = ref(-10)
+
+// 客观题正确率阈值配置（默认 30%）
+const objectiveAccuracyThreshold = ref(30)
+// 客观题正确率列独立红色阈值
+const objectiveAccuracyRedThreshold = ref(-10)
+
+// 主观题正确率阈值配置（默认 30%）
+const subjectiveAccuracyThreshold = ref(30)
+// 主观题正确率列独立红色阈值
+const subjectiveAccuracyRedThreshold = ref(-10)
+
+// 作业正确率阈值配置（默认 30%）
+const homeworkAccuracyThreshold = ref(30)
+// 作业正确率列独立红色阈值
+const homeworkAccuracyRedThreshold = ref(-10)
+
+// 作业进步率阈值配置（默认 15%）
+const improvementRateThreshold = ref(15)
+// 作业进步率列独立红色阈值
+const improvementRateRedThreshold = ref(-10)
+
+// 课程完成率阈值配置（默认 70%）
+const courseCompletionThreshold = ref(70)
+// 课程完成率列独立红色阈值
+const courseCompletionRedThreshold = ref(-10)
+
+// 作业攻克率阈值配置（默认 30%）
+const homeworkMasteryThreshold = ref(30)
+// 作业攻克率列独立红色阈值
+const homeworkMasteryRedThreshold = ref(-10)
+
+// 未参与打卡率阈值配置（默认 30%）
+const noParticipationThreshold = ref(30)
+// 未参与打卡率列独立红色阈值
+const noParticipationRedThreshold = ref(-10)
+
+// 作业优秀率阈值配置（默认 20%）
+const homeworkExcellenceThreshold = ref(20)
+// 作业优秀率列独立红色阈值
+const homeworkExcellenceRedThreshold = ref(-10)
+
+// 退学率阈值配置（默认 5%）
+const dropoutRateThreshold = ref(5)
+// 退学率列独立红色阈值
+const dropoutRateRedThreshold = ref(-10)
+
+// 气泡卡片统一状态管理
+const popoverVisible = ref({
+  interactionRateDiff: false,
+  dailyCheckInRateDiff: false,
+  onlineRateDiff: false,
+  qualityCheckInRateDiff: false,
+  objectiveAccuracyDiff: false,
+  subjectiveAccuracyDiff: false,
+  homeworkAccuracyDiff: false,
+  homeworkExcellenceRateDiff: false,
+  improvementRateDiff: false,
+  courseCompletionRateDiff: false,
+  homeworkMasteryRateDiff: false,
+  noParticipationRateDiff: false,
+  dropoutRateDiff: false,
+})
+const thresholdRefMap = {
+  interactionThreshold,
+  dailyCheckInThreshold,
+  onlineRateThreshold,
+  qualityCheckInThreshold,
+  objectiveAccuracyThreshold,
+  subjectiveAccuracyThreshold,
+  homeworkAccuracyThreshold,
+  homeworkExcellenceThreshold,
+  improvementRateThreshold,
+  courseCompletionThreshold,
+  homeworkMasteryThreshold,
+  noParticipationThreshold,
+  dropoutRateThreshold,
+  // 各列独立红色阈值
+  interactionRedThreshold,
+  dailyCheckInRedThreshold,
+  onlineRateRedThreshold,
+  qualityCheckInRedThreshold,
+  objectiveAccuracyRedThreshold,
+  subjectiveAccuracyRedThreshold,
+  homeworkAccuracyRedThreshold,
+  homeworkExcellenceRedThreshold,
+  improvementRateRedThreshold,
+  courseCompletionRedThreshold,
+  homeworkMasteryRedThreshold,
+  noParticipationRedThreshold,
+  dropoutRateRedThreshold,
+}
+
+// 导出相关状态
+const showExportModal = ref(false)
+const isExporting = ref(false)
+const exportDateRange = ref(null)
+
+// 辅助方法：获取选项的 label
+const getOptionLabel = (options, value) => {
+  if (!value) {
+    return '全部'
+  }
+  const option = options.find(opt => opt.value === value)
+  return option ? option.label : value
+}
+
+// 导出时间范围文本
+const exportDateRangeText = computed(() => {
+  if (dateRange.value && dateRange.value.length === 2 && dateRange.value[0] && dateRange.value[1]) {
+    return `${dateRange.value[0].format('YYYY-MM-DD')} 至 ${dateRange.value[1].format('YYYY-MM-DD')}`
+  }
+  return '全部'
+})
+
+// 处理导出数据
+const handleExportData = async () => {
+  if (filteredData.value.length === 0) {
+    message.warning('当前没有可导出的数据')
+    return
+  }
+
+  isExporting.value = true
+  try {
+    // 准备数据行
+    const rows = filteredData.value.map(item => {
+      const rowData = {}
+      columns.value.forEach(col => {
+        const key = col.key
+        const title = col.title || key
+        if (key === 'id') {
+          rowData[title] = item.id
+        } else if (key === 'date') {
+          rowData[title] = item.date
+        } else if (key.endsWith('Diff')) {
+          const baseKey = key.replace('Diff', '')
+          let diffValue = 0
+          if (baseKey === 'noParticipationRate' || baseKey === 'dropoutRate') {
+            const thresholdKey = baseKey === 'noParticipationRate' ? 'noParticipationThreshold' : 'dropoutRateThreshold'
+            diffValue = thresholdRefMap[thresholdKey].value - item[baseKey]
+          } else {
+            const thresholdKey = baseKey === 'interactionRate' ? 'interactionThreshold' : 
+                                 baseKey === 'homeworkExcellenceRate' ? 'homeworkExcellenceThreshold' : 
+                                 `${baseKey}Threshold`
+            diffValue = item[baseKey] - thresholdRefMap[thresholdKey].value
+          }
+          rowData[title] = `${diffValue > 0 ? '+' : ''}${diffValue.toFixed(1)}%`
+        } else {
+          rowData[title] = typeof item[key] === 'number' ? `${item[key].toFixed(1)}%` : 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
+  }
+}
+
+// 快照：打开 popover 时保存当前值，取消时恢复
+const popoverSnapshot = ref({})
+
+// 打开气泡时保存快照，同时关闭其他气泡
+const onPopoverOpen = (key, visible) => {
+  if (visible) {
+    // 关闭其他气泡
+    Object.keys(popoverVisible.value).forEach(k => {
+      if (k !== key) popoverVisible.value[k] = false
+    })
+    // 保存当前所有阈值快照（用于取消时恢复）
+    const snapshot = {}
+    Object.keys(thresholdRefMap).forEach(k => {
+      snapshot[k] = thresholdRefMap[k].value
+    })
+    popoverSnapshot.value = snapshot
+  }
+}
+
+// 取消：从快照恢复对应列的两个阈值，然后关闭
+const cancelPopover = (key, thresholdKey, redThresholdKey) => {
+  if (thresholdKey && popoverSnapshot.value[thresholdKey] !== undefined) {
+    thresholdRefMap[thresholdKey].value = popoverSnapshot.value[thresholdKey]
+  }
+  if (redThresholdKey && popoverSnapshot.value[redThresholdKey] !== undefined) {
+    thresholdRefMap[redThresholdKey].value = popoverSnapshot.value[redThresholdKey]
+  }
+  popoverVisible.value[key] = false
+}
+
+// 确认：值已实时写入 ref，直接关闭
+const closePopover = (key) => {
+  popoverVisible.value[key] = false
+}
+
+// 从 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 && defaultColumnConfig.some(dc => dc.key === item.key)
+      )) {
+        // 确保序号和日期列在最前面且可见
+        const fixedColumns = [
+          { key: 'id', visible: true },
+          { key: 'date', visible: true }
+        ]
+        const otherColumns = parsed.filter(item => item.key !== 'id' && item.key !== 'date')
+        columnConfig.value = [...fixedColumns, ...otherColumns]
+        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 resetColumnOrder = () => {
+  columnConfig.value = [...defaultColumnConfig]
+  hasCustomColumnOrder.value = false
+  try {
+    localStorage.removeItem(COLUMN_ORDER_KEY)
+    message.success('列配置已重置为默认')
+  } catch (error) {
+    console.error('Failed to reset column config:', error)
+  }
+}
+
+// 打开编辑列模态框
+const openColumnEditor = () => {
+  // 准备临时列列表，排除序号和日期列
+  tempColumnList.value = columnConfig.value
+    .filter(cfg => cfg.key !== 'id' && cfg.key !== 'date')
+    .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 = () => {
+  // 保存新配置：序号和日期列始终在最前面且始终可见
+  const newConfig = [
+    { key: 'id', visible: true },
+    { key: 'date', visible: true },
+    ...tempColumnList.value.map(item => ({
+      key: item.key,
+      visible: item.visible
+    }))
+  ]
+  columnConfig.value = newConfig
+  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
+  })
+}
+
+// 修改数据：确保包含红、橙、绿三种颜色的示例，覆盖完整的30天周期
+const reportData = ref([
+  // 第1周：红色示例（下降超过10%）
+  {
+    id: 1, date: '2026-03-01', school: 'chongqing', subject: 'math', level: 'undergraduate',
+    interactionRate: 65.0, dailyCheckInRate: 62.0, onlineRate: 72.0,
+    qualityCheckInRate: 58.0, objectiveAccuracy: 72.0, subjectiveAccuracy: 62.0,
+    homeworkAccuracy: 68.0, homeworkExcellenceRate: 18.5,
+    improvementRate: -8.0, courseCompletionRate: 75.5, homeworkMasteryRate: 68.2,
+    noParticipationRate: 22.0, dropoutRate: 8.2
+  },
+  {
+    id: 2, date: '2026-03-02', school: 'chongqing', subject: 'chinese', level: 'special',
+    interactionRate: 68.5, dailyCheckInRate: 65.3, onlineRate: 75.2,
+    qualityCheckInRate: 59.4, objectiveAccuracy: 74.8, subjectiveAccuracy: 64.2,
+    homeworkAccuracy: 70.5, homeworkExcellenceRate: 20.3,
+    improvementRate: -6.5, courseCompletionRate: 78.3, homeworkMasteryRate: 71.5,
+    noParticipationRate: 20.5, dropoutRate: 7.8
+  },
+  {
+    id: 3, date: '2026-03-03', school: 'henan', subject: 'english', level: 'undergraduate',
+    interactionRate: 70.2, dailyCheckInRate: 67.5, onlineRate: 76.8,
+    qualityCheckInRate: 61.2, objectiveAccuracy: 76.5, subjectiveAccuracy: 65.8,
+    homeworkAccuracy: 72.3, homeworkExcellenceRate: 22.1,
+    improvementRate: -5.2, courseCompletionRate: 80.1, homeworkMasteryRate: 73.8,
+    noParticipationRate: 19.2, dropoutRate: 7.5
+  },
+  {
+    id: 4, date: '2026-03-04', school: 'henan', subject: 'physics', level: 'top',
+    interactionRate: 72.8, dailyCheckInRate: 69.2, onlineRate: 78.5,
+    qualityCheckInRate: 63.5, objectiveAccuracy: 78.2, subjectiveAccuracy: 67.5,
+    homeworkAccuracy: 74.8, homeworkExcellenceRate: 24.3,
+    improvementRate: -3.8, courseCompletionRate: 82.5, homeworkMasteryRate: 76.2,
+    noParticipationRate: 17.8, dropoutRate: 7.2
+  },
+  {
+    id: 5, date: '2026-03-05', school: 'anhui', subject: 'chemistry', level: 'special',
+    interactionRate: 74.5, dailyCheckInRate: 71.0, onlineRate: 80.2,
+    qualityCheckInRate: 65.8, objectiveAccuracy: 80.0, subjectiveAccuracy: 69.2,
+    homeworkAccuracy: 77.2, homeworkExcellenceRate: 26.5,
+    improvementRate: -2.5, courseCompletionRate: 84.8, homeworkMasteryRate: 78.5,
+    noParticipationRate: 16.5, dropoutRate: 6.8
+  },
+  {
+    id: 6, date: '2026-03-06', school: 'chongqing', subject: 'biology', level: 'undergraduate',
+    interactionRate: 76.2, dailyCheckInRate: 72.8, onlineRate: 81.8,
+    qualityCheckInRate: 67.5, objectiveAccuracy: 81.5, subjectiveAccuracy: 71.0,
+    homeworkAccuracy: 79.0, homeworkExcellenceRate: 28.2,
+    improvementRate: -1.2, courseCompletionRate: 86.5, homeworkMasteryRate: 80.8,
+    noParticipationRate: 15.2, dropoutRate: 6.5
+  },
+  // 第2周：橙色示例（接近基准，±10%以内）
+  {
+    id: 7, date: '2026-03-07', school: 'anhui', subject: 'politics', level: 'special',
+    interactionRate: 78.5, dailyCheckInRate: 74.5, onlineRate: 83.5,
+    qualityCheckInRate: 69.8, objectiveAccuracy: 83.2, subjectiveAccuracy: 72.8,
+    homeworkAccuracy: 81.2, homeworkExcellenceRate: 30.5,
+    improvementRate: 0.5, courseCompletionRate: 88.2, homeworkMasteryRate: 83.2,
+    noParticipationRate: 13.8, dropoutRate: 6.2
+  },
+  {
+    id: 8, date: '2026-03-08', school: 'chongqing', subject: 'math', level: 'top',
+    interactionRate: 80.2, dailyCheckInRate: 76.2, onlineRate: 85.2,
+    qualityCheckInRate: 71.5, objectiveAccuracy: 85.0, subjectiveAccuracy: 74.5,
+    homeworkAccuracy: 83.0, homeworkExcellenceRate: 32.8,
+    improvementRate: 2.2, courseCompletionRate: 90.1, homeworkMasteryRate: 85.5,
+    noParticipationRate: 12.5, dropoutRate: 5.8
+  },
+  {
+    id: 9, date: '2026-03-09', school: 'henan', subject: 'history', level: 'special',
+    interactionRate: 82.0, dailyCheckInRate: 78.0, onlineRate: 86.8,
+    qualityCheckInRate: 73.2, objectiveAccuracy: 86.5, subjectiveAccuracy: 76.2,
+    homeworkAccuracy: 84.8, homeworkExcellenceRate: 34.5,
+    improvementRate: 3.8, courseCompletionRate: 91.8, homeworkMasteryRate: 87.8,
+    noParticipationRate: 11.2, dropoutRate: 5.5
+  },
+  {
+    id: 10, date: '2026-03-10', school: 'anhui', subject: 'geography', level: 'undergraduate',
+    interactionRate: 84.5, dailyCheckInRate: 80.5, onlineRate: 88.5,
+    qualityCheckInRate: 75.5, objectiveAccuracy: 88.2, subjectiveAccuracy: 78.5,
+    homeworkAccuracy: 86.5, homeworkExcellenceRate: 36.8,
+    improvementRate: 5.5, courseCompletionRate: 93.5, homeworkMasteryRate: 90.2,
+    noParticipationRate: 9.8, dropoutRate: 5.2
+  },
+  {
+    id: 11, date: '2026-03-11', school: 'chongqing', subject: 'math', level: 'top',
+    interactionRate: 86.8, dailyCheckInRate: 82.8, onlineRate: 90.2,
+    qualityCheckInRate: 77.8, objectiveAccuracy: 90.0, subjectiveAccuracy: 80.2,
+    homeworkAccuracy: 88.2, homeworkExcellenceRate: 38.5,
+    improvementRate: 7.2, courseCompletionRate: 95.2, homeworkMasteryRate: 92.5,
+    noParticipationRate: 8.5, dropoutRate: 4.8
+  },
+  {
+    id: 12, date: '2026-03-12', school: 'henan', subject: 'chinese', level: 'special',
+    interactionRate: 88.5, dailyCheckInRate: 84.5, onlineRate: 91.8,
+    qualityCheckInRate: 79.5, objectiveAccuracy: 91.5, subjectiveAccuracy: 82.0,
+    homeworkAccuracy: 90.0, homeworkExcellenceRate: 40.2,
+    improvementRate: 8.8, courseCompletionRate: 96.5, homeworkMasteryRate: 94.2,
+    noParticipationRate: 7.2, dropoutRate: 4.5
+  },
+  // 第3周：绿色示例（增长）
+  {
+    id: 13, date: '2026-03-13', school: 'chongqing', subject: 'physics', level: 'undergraduate',
+    interactionRate: 90.2, dailyCheckInRate: 86.2, onlineRate: 93.5,
+    qualityCheckInRate: 81.2, objectiveAccuracy: 93.2, subjectiveAccuracy: 83.8,
+    homeworkAccuracy: 91.5, homeworkExcellenceRate: 42.5,
+    improvementRate: 10.5, courseCompletionRate: 97.8, homeworkMasteryRate: 95.8,
+    noParticipationRate: 6.5, dropoutRate: 4.2
+  },
+  {
+    id: 14, date: '2026-03-14', school: 'anhui', subject: 'chemistry', level: 'special',
+    interactionRate: 91.8, dailyCheckInRate: 87.8, onlineRate: 94.8,
+    qualityCheckInRate: 82.8, objectiveAccuracy: 94.5, subjectiveAccuracy: 85.5,
+    homeworkAccuracy: 92.8, homeworkExcellenceRate: 44.2,
+    improvementRate: 12.2, courseCompletionRate: 98.5, homeworkMasteryRate: 97.2,
+    noParticipationRate: 5.8, dropoutRate: 3.8
+  },
+  {
+    id: 15, date: '2026-03-15', school: 'henan', subject: 'biology', level: 'top',
+    interactionRate: 93.2, dailyCheckInRate: 89.2, onlineRate: 96.2,
+    qualityCheckInRate: 84.5, objectiveAccuracy: 96.0, subjectiveAccuracy: 87.2,
+    homeworkAccuracy: 94.2, homeworkExcellenceRate: 46.5,
+    improvementRate: 14.0, courseCompletionRate: 99.2, homeworkMasteryRate: 98.5,
+    noParticipationRate: 4.5, dropoutRate: 3.5
+  },
+  {
+    id: 16, date: '2026-03-16', school: 'chongqing', subject: 'politics', level: 'undergraduate',
+    interactionRate: 94.5, dailyCheckInRate: 90.5, onlineRate: 97.5,
+    qualityCheckInRate: 86.2, objectiveAccuracy: 97.5, subjectiveAccuracy: 88.8,
+    homeworkAccuracy: 95.5, homeworkExcellenceRate: 48.2,
+    improvementRate: 15.5, courseCompletionRate: 99.8, homeworkMasteryRate: 99.2,
+    noParticipationRate: 3.8, dropoutRate: 3.2
+  },
+  {
+    id: 17, date: '2026-03-17', school: 'anhui', subject: 'history', level: 'special',
+    interactionRate: 95.2, dailyCheckInRate: 91.2, onlineRate: 98.2,
+    qualityCheckInRate: 87.5, objectiveAccuracy: 98.2, subjectiveAccuracy: 90.2,
+    homeworkAccuracy: 96.2, homeworkExcellenceRate: 50.0,
+    improvementRate: 16.8, courseCompletionRate: 99.9, homeworkMasteryRate: 99.5,
+    noParticipationRate: 3.2, dropoutRate: 2.8
+  },
+  {
+    id: 18, date: '2026-03-18', school: 'henan', subject: 'geography', level: 'top',
+    interactionRate: 96.0, dailyCheckInRate: 92.0, onlineRate: 98.8,
+    qualityCheckInRate: 88.8, objectiveAccuracy: 98.8, subjectiveAccuracy: 91.5,
+    homeworkAccuracy: 97.0, homeworkExcellenceRate: 51.5,
+    improvementRate: 18.0, courseCompletionRate: 99.9, homeworkMasteryRate: 99.8,
+    noParticipationRate: 2.8, dropoutRate: 2.5
+  },
+  // 第4周：边界值示例
+  {
+    id: 19, date: '2026-03-19', school: 'chongqing', subject: 'math', level: 'undergraduate',
+    interactionRate: 96.5, dailyCheckInRate: 92.5, onlineRate: 99.2,
+    qualityCheckInRate: 89.5, objectiveAccuracy: 99.2, subjectiveAccuracy: 92.2,
+    homeworkAccuracy: 97.5, homeworkExcellenceRate: 52.8,
+    improvementRate: 19.2, courseCompletionRate: 99.9, homeworkMasteryRate: 99.9,
+    noParticipationRate: 2.5, dropoutRate: 2.2
+  },
+  {
+    id: 20, date: '2026-03-20', school: 'anhui', subject: 'chinese', level: 'special',
+    interactionRate: 97.0, dailyCheckInRate: 93.0, onlineRate: 99.5,
+    qualityCheckInRate: 90.2, objectiveAccuracy: 99.5, subjectiveAccuracy: 93.0,
+    homeworkAccuracy: 98.0, homeworkExcellenceRate: 54.2,
+    improvementRate: 20.5, courseCompletionRate: 99.9, homeworkMasteryRate: 99.9,
+    noParticipationRate: 2.2, dropoutRate: 2.0
+  },
+  {
+    id: 21, date: '2026-03-21', school: 'henan', subject: 'english', level: 'top',
+    interactionRate: 97.5, dailyCheckInRate: 93.5, onlineRate: 99.8,
+    qualityCheckInRate: 91.0, objectiveAccuracy: 99.8, subjectiveAccuracy: 93.8,
+    homeworkAccuracy: 98.5, homeworkExcellenceRate: 55.5,
+    improvementRate: 21.8, courseCompletionRate: 99.9, homeworkMasteryRate: 99.9,
+    noParticipationRate: 2.0, dropoutRate: 1.8
+  },
+  {
+    id: 22, date: '2026-03-22', school: 'chongqing', subject: 'physics', level: 'undergraduate',
+    interactionRate: 97.8, dailyCheckInRate: 94.0, onlineRate: 99.9,
+    qualityCheckInRate: 91.5, objectiveAccuracy: 99.9, subjectiveAccuracy: 94.5,
+    homeworkAccuracy: 98.8, homeworkExcellenceRate: 56.8,
+    improvementRate: 22.5, courseCompletionRate: 99.9, homeworkMasteryRate: 99.9,
+    noParticipationRate: 1.8, dropoutRate: 1.5
+  },
+  {
+    id: 23, date: '2026-03-23', school: 'anhui', subject: 'biology', level: 'special',
+    interactionRate: 98.0, dailyCheckInRate: 94.5, onlineRate: 99.9,
+    qualityCheckInRate: 92.0, objectiveAccuracy: 99.9, subjectiveAccuracy: 95.0,
+    homeworkAccuracy: 99.0, homeworkExcellenceRate: 58.0,
+    improvementRate: 23.2, courseCompletionRate: 99.9, homeworkMasteryRate: 99.9,
+    noParticipationRate: 1.5, dropoutRate: 1.2
+  },
+  {
+    id: 24, date: '2026-03-24', school: 'henan', subject: 'politics', level: 'top',
+    interactionRate: 98.2, dailyCheckInRate: 95.0, onlineRate: 100.0,
+    qualityCheckInRate: 92.5, objectiveAccuracy: 100.0, subjectiveAccuracy: 95.5,
+    homeworkAccuracy: 99.2, homeworkExcellenceRate: 59.2,
+    improvementRate: 24.0, courseCompletionRate: 99.9, homeworkMasteryRate: 99.9,
+    noParticipationRate: 1.2, dropoutRate: 1.0
+  },
+  {
+    id: 25, date: '2026-03-25', school: 'chongqing', subject: 'history', level: 'undergraduate',
+    interactionRate: 98.5, dailyCheckInRate: 95.5, onlineRate: 100.0,
+    qualityCheckInRate: 93.0, objectiveAccuracy: 100.0, subjectiveAccuracy: 96.0,
+    homeworkAccuracy: 99.5, homeworkExcellenceRate: 60.5,
+    improvementRate: 24.5, courseCompletionRate: 99.9, homeworkMasteryRate: 99.9,
+    noParticipationRate: 1.0, dropoutRate: 0.8
+  },
+  {
+    id: 26, date: '2026-03-26', school: 'anhui', subject: 'geography', level: 'special',
+    interactionRate: 98.8, dailyCheckInRate: 96.0, onlineRate: 100.0,
+    qualityCheckInRate: 93.5, objectiveAccuracy: 100.0, subjectiveAccuracy: 96.5,
+    homeworkAccuracy: 99.6, homeworkExcellenceRate: 61.8,
+    improvementRate: 25.0, courseCompletionRate: 99.9, homeworkMasteryRate: 99.9,
+    noParticipationRate: 0.8, dropoutRate: 0.6
+  },
+  {
+    id: 27, date: '2026-03-27', school: 'henan', subject: 'math', level: 'top',
+    interactionRate: 99.0, dailyCheckInRate: 96.5, onlineRate: 100.0,
+    qualityCheckInRate: 94.0, objectiveAccuracy: 100.0, subjectiveAccuracy: 97.0,
+    homeworkAccuracy: 99.8, homeworkExcellenceRate: 63.0,
+    improvementRate: 25.5, courseCompletionRate: 99.9, homeworkMasteryRate: 99.9,
+    noParticipationRate: 0.6, dropoutRate: 0.5
+  },
+  {
+    id: 28, date: '2026-03-28', school: 'chongqing', subject: 'chinese', level: 'undergraduate',
+    interactionRate: 99.2, dailyCheckInRate: 97.0, onlineRate: 100.0,
+    qualityCheckInRate: 94.5, objectiveAccuracy: 100.0, subjectiveAccuracy: 97.5,
+    homeworkAccuracy: 99.8, homeworkExcellenceRate: 64.2,
+    improvementRate: 26.0, courseCompletionRate: 99.9, homeworkMasteryRate: 99.9,
+    noParticipationRate: 0.5, dropoutRate: 0.4
+  },
+  {
+    id: 29, date: '2026-03-29', school: 'anhui', subject: 'english', level: 'special',
+    interactionRate: 99.5, dailyCheckInRate: 97.5, onlineRate: 100.0,
+    qualityCheckInRate: 95.0, objectiveAccuracy: 100.0, subjectiveAccuracy: 98.0,
+    homeworkAccuracy: 99.9, homeworkExcellenceRate: 65.5,
+    improvementRate: 26.5, courseCompletionRate: 99.9, homeworkMasteryRate: 99.9,
+    noParticipationRate: 0.4, dropoutRate: 0.3
+  },
+  {
+    id: 30, date: '2026-03-30', school: 'henan', subject: 'physics', level: 'top',
+    interactionRate: 99.8, dailyCheckInRate: 98.0, onlineRate: 100.0,
+    qualityCheckInRate: 95.5, objectiveAccuracy: 100.0, subjectiveAccuracy: 98.5,
+    homeworkAccuracy: 99.9, homeworkExcellenceRate: 66.8,
+    improvementRate: 27.0, courseCompletionRate: 99.9, homeworkMasteryRate: 99.9,
+    noParticipationRate: 0.3, dropoutRate: 0.2
+  }
+])
+
+// 条件格式化函数：差值列
+// 规则：< redThreshold 红色（下降），redThreshold~0 橙色（接近基准），>0 绿色（增长）
+const getDiffClass = (diff, redThreshold) => {
+  // redThreshold 是 ref 对象，取 .value；若未传则回退全局 colorThreshold
+  const threshold = (redThreshold && typeof redThreshold === 'object' && 'value' in redThreshold)
+    ? redThreshold.value
+    : colorThreshold.value
+  if (diff < threshold) {
+    return 'cell-bg-red'      // 下降超过阈值：红色（差）
+  } else if (diff >= threshold && diff <= 0) {
+    return 'cell-bg-orange'   // 接近基准（阈值到0）：橙色
+  } else {
+    return 'cell-bg-green'    // 增长超过0%：绿色（好）
+  }
+}
+
+
+// 条件格式化函数：未参与率差值
+// 规则：< redThreshold 红色（远超阈值，严重问题），redThreshold~0 橙色（警示），>0 绿色（优秀）
+const getNoParticipationDiffClass = (diff, redThreshold) => {
+  const threshold = (redThreshold && typeof redThreshold === 'object' && 'value' in redThreshold)
+    ? redThreshold.value
+    : colorThreshold.value
+  if (diff < threshold) {
+    return 'cell-bg-red'      // 差值 < 阈值：红色（严重问题）
+  } else if (diff >= threshold && diff <= 0) {
+    return 'cell-bg-orange'   // 阈值 ≤ 差值 ≤ 0：橙色（警示）
+  } else {
+    return 'cell-bg-green'    // 差值 > 0：绿色（优秀）
+  }
+}
+
+// 表格列配置 - Ant Design Vue 格式
+const allColumns = [
+  {
+    key: 'id',
+    dataIndex: 'id',
+    title: '序号',
+    width: 60,
+    align: 'center',
+  },
+  {
+    key: 'date',
+    dataIndex: 'date',
+    title: '日期',
+    width: 100,
+    align: 'center',
+  },
+  {
+    key: 'interactionRate',
+    dataIndex: 'interactionRate',
+    title: '互动率',
+    width: 90,
+    align: 'right',
+  },
+  {
+    key: 'dailyCheckInRate',
+    dataIndex: 'dailyCheckInRate',
+    title: '打卡率',
+    width: 120,
+    align: 'right',
+  },
+  {
+    key: 'onlineRate',
+    dataIndex: 'onlineRate',
+    title: '上线率',
+    width: 90,
+    align: 'right',
+  },
+  {
+    key: 'qualityCheckInRate',
+    dataIndex: 'qualityCheckInRate',
+    title: '打卡优质率',
+    width: 100,
+    align: 'right',
+  },
+  {
+    key: 'objectiveAccuracy',
+    dataIndex: 'objectiveAccuracy',
+    title: '客观题正确率',
+    width: 110,
+    align: 'right',
+  },
+  {
+    key: 'subjectiveAccuracy',
+    dataIndex: 'subjectiveAccuracy',
+    title: '主观题正确率',
+    width: 110,
+    align: 'right',
+  },
+  {
+    key: 'homeworkAccuracy',
+    dataIndex: 'homeworkAccuracy',
+    title: '作业正确率',
+    width: 100,
+    align: 'right',
+  },
+  {
+    key: 'homeworkExcellenceRate',
+    dataIndex: 'homeworkExcellenceRate',
+    title: '作业优秀率',
+    width: 100,
+    align: 'right',
+  },
+  {
+    key: 'improvementRate',
+    dataIndex: 'improvementRate',
+    title: '作业进步率',
+    width: 100,
+    align: 'right',
+  },
+  {
+    key: 'courseCompletionRate',
+    dataIndex: 'courseCompletionRate',
+    title: '课程完成率',
+    width: 120,
+    align: 'right',
+  },
+  {
+    key: 'homeworkMasteryRate',
+    dataIndex: 'homeworkMasteryRate',
+    title: '作业攻克率',
+    width: 120,
+    align: 'right',
+  },
+  {
+    key: 'noParticipationRate',
+    dataIndex: 'noParticipationRate',
+    title: '未参与打卡率',
+    width: 150,
+    align: 'right',
+  },
+  {
+    key: 'dropoutRate',
+    dataIndex: 'dropoutRate',
+    title: '累计退学人数占比',
+    width: 130,
+    align: 'right',
+  },
+  {
+    key: 'interactionRateDiff',
+    dataIndex: 'interactionRateDiff',
+    title: '互动率与阈值差',
+    width: 160,
+    align: 'right',
+    customCell: () => ({ style: { padding: '0' } }),
+  },
+  {
+    key: 'dailyCheckInRateDiff',
+    dataIndex: 'dailyCheckInRateDiff',
+    title: '打卡率与阈值差',
+    width: 110,
+    align: 'right',
+    customCell: () => ({ style: { padding: '0' } }),
+  },
+  {
+    key: 'onlineRateDiff',
+    dataIndex: 'onlineRateDiff',
+    title: '上线率与阈值差',
+    width: 110,
+    align: 'right',
+    customCell: () => ({ style: { padding: '0' } }),
+  },
+  {
+    key: 'qualityCheckInRateDiff',
+    dataIndex: 'qualityCheckInRateDiff',
+    title: '打卡优质率与阈值差',
+    width: 110,
+    align: 'right',
+    customCell: () => ({ style: { padding: '0' } }),
+  },
+  {
+    key: 'objectiveAccuracyDiff',
+    dataIndex: 'objectiveAccuracyDiff',
+    title: '客观题正确率与阈值差',
+    width: 110,
+    align: 'right',
+    customCell: () => ({ style: { padding: '0' } }),
+  },
+  {
+    key: 'subjectiveAccuracyDiff',
+    dataIndex: 'subjectiveAccuracyDiff',
+    title: '主观题正确率与阈值差',
+    width: 110,
+    align: 'right',
+    customCell: () => ({ style: { padding: '0' } }),
+  },
+  {
+    key: 'homeworkAccuracyDiff',
+    dataIndex: 'homeworkAccuracyDiff',
+    title: '作业正确率与阈值差',
+    width: 130,
+    align: 'right',
+    customCell: () => ({ style: { padding: '0' } }),
+  },
+  {
+    key: 'homeworkExcellenceRateDiff',
+    dataIndex: 'homeworkExcellenceRateDiff',
+    title: '作业优秀率与阈值差',
+    width: 130,
+    align: 'right',
+    customCell: () => ({ style: { padding: '0' } }),
+  },
+  {
+    key: 'improvementRateDiff',
+    dataIndex: 'improvementRateDiff',
+    title: '作业进步率与阈值差',
+    width: 110,
+    align: 'right',
+    customCell: () => ({ style: { padding: '0' } }),
+  },
+  {
+    key: 'courseCompletionRateDiff',
+    dataIndex: 'courseCompletionRateDiff',
+    title: '课程完成率与阈值差',
+    width: 130,
+    align: 'right',
+    customCell: () => ({ style: { padding: '0' } }),
+  },
+  {
+    key: 'homeworkMasteryRateDiff',
+    dataIndex: 'homeworkMasteryRateDiff',
+    title: '作业攻克率与阈值差',
+    width: 130,
+    align: 'right',
+    customCell: () => ({ style: { padding: '0' } }),
+  },
+  {
+    key: 'noParticipationRateDiff',
+    dataIndex: 'noParticipationRateDiff',
+    title: '未参与打卡率与阈值差',
+    width: 130,
+    align: 'right',
+    customCell: () => ({ style: { padding: '0' } }),
+  },
+  {
+    key: 'dropoutRateDiff',
+    dataIndex: 'dropoutRateDiff',
+    title: '退学率与阈值之差',
+    width: 130,
+    align: 'right',
+    customCell: () => ({ style: { padding: '0' } }),
+  },
+]
+
+// 根据当前列配置返回排序并筛选后的列配置
+const columns = computed(() => {
+  const columnMap = {}
+  allColumns.forEach(col => {
+    columnMap[col.key] = col
+  })
+  
+  return columnConfig.value
+    .filter(cfg => cfg.visible)
+    .map(cfg => columnMap[cfg.key])
+    .filter(Boolean)
+})
+
+// 筛选后的原始数据（供图表使用）
+const filteredData = computed(() => {
+  let data = reportData.value
+  
+  if (selectedCloudSchool.value !== 'all') {
+    data = data.filter(item => item.school === selectedCloudSchool.value)
+  }
+  
+  if (selectedSubject.value !== 'all') {
+    data = data.filter(item => item.subject === selectedSubject.value)
+  }
+  
+  if (selectedLevel.value !== 'all') {
+    data = data.filter(item => item.level === selectedLevel.value)
+  }
+  
+  if (dateRange.value && dateRange.value.length === 2) {
+    const [startDate, endDate] = dateRange.value
+    data = data.filter(item => {
+      const itemDate = dayjs(item.date, 'YYYY-MM-DD')
+      return itemDate.isSame(startDate, 'day') || 
+             itemDate.isSame(endDate, 'day') || 
+             (itemDate.isAfter(startDate) && itemDate.isBefore(endDate))
+    })
+  }
+  
+  // 按日期排序
+  return [...data].sort((a, b) => dayjs(a.date).valueOf() - dayjs(b.date).valueOf())
+})
+
+// 表格数据
+const tableData = computed(() => {
+  return filteredData.value.map(item => {
+    const diffs = {
+      interactionRateDiff: item.interactionRate - interactionThreshold.value,
+      dailyCheckInRateDiff: item.dailyCheckInRate - dailyCheckInThreshold.value,
+      onlineRateDiff: item.onlineRate - onlineRateThreshold.value,
+      qualityCheckInRateDiff: item.qualityCheckInRate - qualityCheckInThreshold.value,
+      objectiveAccuracyDiff: item.objectiveAccuracy - objectiveAccuracyThreshold.value,
+      subjectiveAccuracyDiff: item.subjectiveAccuracy - subjectiveAccuracyThreshold.value,
+      homeworkAccuracyDiff: item.homeworkAccuracy - homeworkAccuracyThreshold.value,
+      homeworkExcellenceRateDiff: item.homeworkExcellenceRate - homeworkExcellenceThreshold.value,
+      improvementRateDiff: item.improvementRate - improvementRateThreshold.value,
+      courseCompletionRateDiff: item.courseCompletionRate - courseCompletionThreshold.value,
+      homeworkMasteryRateDiff: item.homeworkMasteryRate - homeworkMasteryThreshold.value,
+      noParticipationRateDiff: noParticipationThreshold.value - item.noParticipationRate,
+      dropoutRateDiff: dropoutRateThreshold.value - item.dropoutRate
+    }
+    
+    return {
+      id: item.id,
+      date: item.date,
+      interactionRate: `${item.interactionRate.toFixed(1)}%`,
+      dailyCheckInRate: `${item.dailyCheckInRate.toFixed(1)}%`,
+      onlineRate: `${item.onlineRate.toFixed(1)}%`,
+      qualityCheckInRate: `${item.qualityCheckInRate.toFixed(1)}%`,
+      objectiveAccuracy: `${item.objectiveAccuracy.toFixed(1)}%`,
+      subjectiveAccuracy: `${item.subjectiveAccuracy.toFixed(1)}%`,
+      homeworkAccuracy: `${item.homeworkAccuracy.toFixed(1)}%`,
+      homeworkExcellenceRate: `${item.homeworkExcellenceRate.toFixed(1)}%`,
+      improvementRate: `${item.improvementRate.toFixed(1)}%`,
+      courseCompletionRate: `${item.courseCompletionRate.toFixed(2)}%`,
+      homeworkMasteryRate: `${item.homeworkMasteryRate.toFixed(2)}%`,
+      noParticipationRate: `${item.noParticipationRate.toFixed(1)}%`,
+      dropoutRate: `${item.dropoutRate.toFixed(1)}%`,
+      interactionRateDiff: formatDiff(diffs.interactionRateDiff),
+      dailyCheckInRateDiff: formatDiff(diffs.dailyCheckInRateDiff),
+      onlineRateDiff: formatDiff(diffs.onlineRateDiff),
+      qualityCheckInRateDiff: formatDiff(diffs.qualityCheckInRateDiff),
+      objectiveAccuracyDiff: formatDiff(diffs.objectiveAccuracyDiff),
+      subjectiveAccuracyDiff: formatDiff(diffs.subjectiveAccuracyDiff),
+      homeworkAccuracyDiff: formatDiff(diffs.homeworkAccuracyDiff),
+      homeworkExcellenceRateDiff: formatDiff(diffs.homeworkExcellenceRateDiff),
+      improvementRateDiff: formatDiff(diffs.improvementRateDiff),
+      courseCompletionRateDiff: formatDiff(diffs.courseCompletionRateDiff),
+      homeworkMasteryRateDiff: formatDiff(diffs.homeworkMasteryRateDiff),
+      noParticipationRateDiff: formatDiff(diffs.noParticipationRateDiff),
+      dropoutRateDiff: formatDiff(diffs.dropoutRateDiff),
+      _raw: { ...item, ...diffs }
+    }
+  })
+})
+
+// 格式化差值显示
+const formatDiff = (diff) => {
+  const sign = diff >= 0 ? '+' : ''
+  return `${sign}${diff.toFixed(1)}%`
+}
+
+// 分页配置
+const paginationConfig = ref({
+  current: 1,
+  pageSize: 10,
+  pageSizeOptions: ['10', '20', '50', '100'],
+  showSizeChanger: true,
+  showTotal: (total) => `共 ${total} 条记录`,
+  showQuickJumper: true,
+})
+
+// 处理表格分页变化
+const handleTableChange = (pagination) => {
+  paginationConfig.value.current = pagination.current
+  paginationConfig.value.pageSize = pagination.pageSize
+}
+
+// 动态生成图表选项：从表格列配置中过滤
+const metricOptions = computed(() => {
+  return allColumns
+    .filter(col => {
+      // 排除序号列
+      if (col.key === 'id') return false
+      // 排除日期列
+      if (col.key === 'date') return false
+      // 排除包含"阈值差"的列（列标题包含"阈值差"或 key 包含 "Diff"）
+      if (col.title && col.title.includes('阈值差')) return false
+      if (col.key && col.key.includes('Diff')) return false
+      return true
+    })
+    .map(col => ({
+      label: col.title,
+      value: col.key
+    }))
+})
+
+const metricNameMap = {
+  interactionRate: '互动率',
+  dailyCheckInRate: '打卡率',
+  onlineRate: '上线率',
+  qualityCheckInRate: '打卡优质率',
+  objectiveAccuracy: '客观题正确率',
+  subjectiveAccuracy: '主观题正确率',
+  homeworkAccuracy: '作业正确率',
+  homeworkExcellenceRate: '作业优秀率',
+  improvementRate: '作业进步率',
+  courseCompletionRate: '课程完成率',
+  homeworkMasteryRate: '作业攻克率',
+  noParticipationRate: '未参与打卡率',
+  dropoutRate: '累计退学人数占比'
+}
+
+const metricColorMap = {
+  interactionRate: '#5470c6',
+  dailyCheckInRate: '#91cc75',
+  onlineRate: '#fac858',
+  qualityCheckInRate: '#73c0de',
+  objectiveAccuracy: '#3ba272',
+  subjectiveAccuracy: '#fc8452',
+  homeworkAccuracy: '#9a60b4',
+  homeworkExcellenceRate: '#acbf60',
+  improvementRate: '#ea7ccc',
+  courseCompletionRate: '#8d5e40',
+  homeworkMasteryRate: '#6b9e7e',
+  noParticipationRate: '#48b8d0',
+  dropoutRate: '#dd6b66'
+}
+
+const initChart = async () => {
+  try {
+    await nextTick()
+    if (initTimer) clearTimeout(initTimer)
+    initTimer = setTimeout(() => {
+      if (!chartContainer.value) {
+        console.warn('Chart container not ready')
+        return
+      }
+      
+      if (chartInstance) {
+        chartInstance.dispose()
+        chartInstance = null
+      }
+      
+      chartInstance = echarts.init(chartContainer.value)
+      updateChart()
+    }, 300)
+  } catch (error) {
+    console.error('Failed to initialize chart:', error)
+  }
+}
+
+const updateChart = () => {
+	if (!chartInstance) return
+
+	try {
+		// 使用筛选后的数据（与表格数据同步）
+		const data = filteredData.value
+		const dates = data.map(item => item.date)
+		const series = selectedMetrics.value
+			.filter(metric => metricNameMap[metric] && metricColorMap[metric])
+			.map(metric => ({
+				name: metricNameMap[metric],
+				type: chartType.value,
+				data: data.map(item => item[metric]),
+				smooth: true,
+				symbol: 'circle',
+				symbolSize: 6,
+				itemStyle: { color: metricColorMap[metric] },
+				lineStyle: {
+					color: metricColorMap[metric],
+					width: 2
+				},
+				areaStyle: chartType.value === 'line' ? {
+					color: {
+						type: 'linear',
+						x: 0,
+						y: 0,
+						x2: 0,
+						y2: 1,
+						colorStops: [
+							{ offset: 0, color: metricColorMap[metric] + '40' },
+							{ offset: 1, color: metricColorMap[metric] + '05' }
+						]
+					}
+				} : undefined,
+				emphasis: {
+					focus: 'series',
+					itemStyle: {
+						shadowBlur: 10,
+						shadowColor: metricColorMap[metric]
+					}
+				}
+			}))
+    
+    const option = {
+      animation: true,
+      animationDuration: 800,
+      animationEasing: 'cubicOut',
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross',
+          crossStyle: {
+            color: '#999'
+          }
+        },
+        backgroundColor: 'rgba(255, 255, 255, 0.98)',
+        borderColor: '#e0e0e0',
+        borderWidth: 1,
+        padding: [12, 16],
+        textStyle: {
+          fontSize: 13,
+          color: '#333'
+        },
+        extraCssText: 'box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border-radius: 6px;'
+      },
+		legend: {
+			data: selectedMetrics.value.filter(m => metricNameMap[m]).map(m => metricNameMap[m]),
+        top: 15,
+        type: 'scroll',
+        pageIconSize: 12,
+        pageTextStyle: {
+          fontSize: 12
+        },
+        itemWidth: 16,
+        itemHeight: 10,
+        itemGap: 15,
+        textStyle: {
+          fontSize: 12,
+          color: '#666'
+        }
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '10%',
+        top: '18%',
+        containLabel: true
+      },
+      toolbox: {
+        right: 20,
+        top: 10,
+        feature: {
+          saveAsImage: {
+            title: '保存图片',
+            pixelRatio: 2
+          },
+          dataView: {
+            title: '数据视图',
+            readOnly: true,
+            lang: ['数据视图', '关闭', '刷新']
+          },
+          magicType: {
+            type: ['line', 'bar'],
+            title: {
+              line: '切换为折线图',
+              bar: '切换为柱状图'
+            }
+          },
+          restore: {
+            title: '还原'
+          }
+        }
+      },
+      xAxis: {
+        type: 'category',
+        boundaryGap: chartType.value === 'bar',
+        data: dates,
+        axisLabel: {
+          rotate: 45,
+          fontSize: 12,
+          color: '#666'
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#e0e0e0'
+          }
+        }
+      },
+      yAxis: {
+        type: 'value',
+        name: '百分比(%)',
+        nameTextStyle: {
+          fontSize: 12,
+          color: '#666',
+          padding: [0, 0, 0, 20]
+        },
+        axisLabel: {
+          formatter: '{value}%',
+          fontSize: 12,
+          color: '#666'
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#e0e0e0'
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#f0f0f0',
+            type: 'dashed'
+          }
+        }
+      },
+      series
+    }
+    
+    chartInstance.setOption(option, true)
+  } catch (error) {
+    console.error('Failed to update chart:', error)
+  }
+}
+
+// 监听图表类型和指标变化
+watch([chartType, selectedMetrics], () => updateChart())
+
+// 监听筛选条件变化，同步更新图表（联动机制）
+watch([selectedCloudSchool, selectedSubject, selectedLevel, dateRange], () => {
+  nextTick(() => {
+    updateChart()
+  })
+})
+
+// 全选所有指标
+const selectAllMetrics = () => {
+  selectedMetrics.value = metricOptions.value.map(opt => opt.value)
+  message.success('已选择所有指标')
+}
+
+// 清空所有指标
+const clearAllMetrics = () => {
+  selectedMetrics.value = []
+  message.info('已清空所有指标')
+}
+
+const handleResize = () => {
+  try {
+    chartInstance?.resize()
+  } catch (error) {
+    console.error('Failed to resize chart:', error)
+  }
+}
+
+// 各列独立红色阈值的 localStorage key 映射
+const RED_THRESHOLD_KEYS = {
+  interactionRedThreshold: 'homework_report_red_threshold_interaction',
+  dailyCheckInRedThreshold: 'homework_report_red_threshold_dailyCheckIn',
+  onlineRateRedThreshold: 'homework_report_red_threshold_onlineRate',
+  qualityCheckInRedThreshold: 'homework_report_red_threshold_qualityCheckIn',
+  objectiveAccuracyRedThreshold: 'homework_report_red_threshold_objectiveAccuracy',
+  subjectiveAccuracyRedThreshold: 'homework_report_red_threshold_subjectiveAccuracy',
+  homeworkAccuracyRedThreshold: 'homework_report_red_threshold_homeworkAccuracy',
+  homeworkExcellenceRedThreshold: 'homework_report_red_threshold_homeworkExcellence',
+  improvementRateRedThreshold: 'homework_report_red_threshold_improvementRate',
+  noParticipationRedThreshold: 'homework_report_red_threshold_noParticipation',
+  dropoutRateRedThreshold: 'homework_report_red_threshold_dropoutRate',
+}
+
+// 加载颜色阈值（兼容旧全局阈值，同时加载各列独立红色阈值）
+const loadColorThreshold = () => {
+  try {
+    const saved = localStorage.getItem(COLOR_THRESHOLD_KEY)
+    if (saved !== null) {
+      const val = parseFloat(saved)
+      if (!isNaN(val) && val < 0 && val >= -100) {
+        colorThreshold.value = val
+      }
+    }
+    // 加载各列独立红色阈值
+    Object.entries(RED_THRESHOLD_KEYS).forEach(([refKey, storageKey]) => {
+      const savedVal = localStorage.getItem(storageKey)
+      if (savedVal !== null) {
+        const val = parseFloat(savedVal)
+        if (!isNaN(val) && val < 0 && val >= -100) {
+          thresholdRefMap[refKey].value = val
+        }
+      }
+    })
+  } catch (error) {
+    console.error('Failed to load color threshold:', error)
+  }
+}
+
+// 监听颜色阈值变化并持久化
+watch(colorThreshold, (val) => {
+  try {
+    localStorage.setItem(COLOR_THRESHOLD_KEY, String(val))
+  } catch (error) {
+    console.error('Failed to save color threshold:', error)
+  }
+})
+
+// 监听各列独立红色阈值变化并持久化
+Object.entries(RED_THRESHOLD_KEYS).forEach(([refKey, storageKey]) => {
+  watch(thresholdRefMap[refKey], (val) => {
+    try {
+      localStorage.setItem(storageKey, String(val))
+    } catch (error) {
+      console.error(`Failed to save red threshold for ${refKey}:`, error)
+    }
+  })
+})
+
+onMounted(() => {
+  // 加载保存的列配置
+  loadColumnOrder()
+  
+  // 加载保存的颜色阈值
+  loadColorThreshold()
+  
+  // 初始化图表
+  if (mountTimer) clearTimeout(mountTimer)
+  mountTimer = setTimeout(() => {
+    initChart()
+  }, 200)
+  
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  try {
+    if (initTimer) clearTimeout(initTimer)
+    if (mountTimer) clearTimeout(mountTimer)
+    
+    // 销毁图表实例
+    if (chartInstance) {
+      chartInstance.dispose()
+      chartInstance = null
+    }
+    window.removeEventListener('resize', handleResize)
+  } catch (error) {
+    console.error('Error during cleanup:', error)
+  }
+})
+</script>
+
+<style scoped>
+.cloud-school-report {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ===== 顶部导航栏 (复用 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;
+  flex-shrink: 0;
+}
+
+.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);
+}
+
+/* ===== 底部版权 (复用 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);
+  flex-shrink: 0;
+  margin-top: auto;
+}
+
+/* 响应式适配 */
+@media (max-width: 768px) {
+  .portal-header {
+    height: 56px;
+    padding: 0 20px;
+  }
+  .user-name {
+    display: none;
+  }
+  .user-info-wrap {
+    padding: 6px 8px;
+    gap: 6px;
+  }
+  .portal-footer {
+    padding: 16px 0 20px;
+    font-size: 11px;
+  }
+}
+
+.page-header {
+  margin-bottom: 32px;
+  position: relative;
+}
+
+.back-btn {
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: #64748b;
+  transition: color 0.2s;
+}
+
+.back-btn:hover {
+  color: #0052d9;
+}
+
+.page-title {
+  font-size: 28px;
+  font-weight: 600;
+  color: #1e293b;
+  margin: 0 0 8px 0;
+  text-align: center;
+  letter-spacing: 0.5px;
+}
+
+.page-subtitle {
+  text-align: center;
+  font-size: 15px;
+  color: #64748b;
+  margin: 0;
+}
+
+/* 数据展示区域：统一容器 */
+.data-container {
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  border-radius: 16px;
+  padding: 32px;
+  margin-bottom: 24px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
+  transition: box-shadow 0.3s ease;
+}
+
+.data-container:hover {
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
+}
+
+/* 全局筛选控制区 */
+.global-filters {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 24px;
+  background: #f8fafc;
+  border: 1px solid #f1f5f9;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.filter-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 24px;
+  background: #f1f5f9;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.filter-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #334155;
+}
+
+.filter-title .t-icon {
+  color: #0052d9;
+}
+
+.filter-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.filter-content {
+  display: flex;
+  align-items: stretch;
+  padding: 0;
+  gap: 0;
+  flex-wrap: wrap;
+}
+
+.filter-section {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  padding: 16px 24px;
+  flex: 1;
+  min-width: 0;
+}
+
+.section-label {
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  font-weight: 600;
+  color: #64748b;
+  white-space: nowrap;
+  padding-right: 20px;
+  margin-right: 8px;
+  border-right: 2px solid #e2e8f0;
+  height: 24px;
+  line-height: 24px;
+}
+
+.section-items {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  flex-wrap: wrap;
+  padding-left: 16px;
+}
+
+.section-divider {
+  width: 1px;
+  align-self: stretch;
+  background: #e2e8f0;
+  margin: 12px 0;
+  flex-shrink: 0;
+}
+
+.filter-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.filter-item-time {
+  gap: 8px;
+}
+
+.date-picker-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.date-picker-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.date-range-hint {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 10px;
+  background: #fffbe6;
+  border: 1px solid #ffe58f;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #d48806;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.hint-icon {
+  font-size: 12px;
+  color: #faad14;
+}
+
+.date-range-error {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: #ff4d4f;
+  line-height: 1.4;
+  animation: fadeIn 0.2s ease;
+}
+
+.error-icon {
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+.filter-label {
+  font-size: 14px;
+  color: #475569;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+/* 级联提示信息 */
+.cascade-tip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 16px;
+  background: #eff6ff;
+  border: 1px solid #bfdbfe;
+  border-radius: 20px;
+  font-size: 13px;
+  color: #2563eb;
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.tip-icon-small {
+  font-size: 12px;
+  color: #1890ff;
+}
+
+.card-header {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 12px;
+}
+
+/* 第一行：标题 + 颜色图例 */
+.card-header-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1a1a1a;
+  white-space: nowrap;
+}
+
+.color-legend {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.color-threshold-control {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 8px;
+  padding-left: 12px;
+  border-left: 1px solid #d0d0d0;
+}
+
+.threshold-label {
+  font-size: 12px;
+  color: #555;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+/* 操作按钮组 */
+.action-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.table-card {
+  margin-bottom: 24px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
+  border: 1px solid #f1f5f9;
+  border-radius: 12px;
+}
+
+.chart-card {
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
+  border: 1px solid #f1f5f9;
+  border-radius: 12px;
+}
+
+/* 气泡卡片阈值设置内容 */
+.popover-threshold-content {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 4px 0 2px;
+}
+
+.popover-formula {
+  margin: 0;
+  font-size: 12px;
+  color: #888;
+  line-height: 1.4;
+}
+
+.popover-input-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.popover-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #333;
+  white-space: nowrap;
+}
+
+.popover-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 4px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.popover-label-red {
+  color: #cf1322 !important;
+  font-weight: 600 !important;
+}
+
+.popover-red-hint {
+  margin: -4px 0 0;
+  font-size: 11px;
+  color: #cf1322;
+  line-height: 1.4;
+}
+
+
+
+.legend-item {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 3px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.legend-item.red {
+  background: #ff4d4f;
+  color: white;
+}
+
+.legend-item.orange {
+  background: #faad14;
+  color: white;
+}
+
+.legend-item.green {
+  background: #52c41a;
+  color: white;
+}
+
+.selected-info {
+  font-size: 14px;
+  color: #0052d9;
+  margin-left: 8px;
+}
+
+/* 数据同步徽章 */
+.data-sync-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 10px;
+  margin-left: 12px;
+  background: linear-gradient(135deg, #e6fffb 0%, #b5f5ec 100%);
+  border: 1px solid #87e8de;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #08979c;
+  white-space: nowrap;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.85;
+    transform: scale(0.98);
+  }
+}
+
+.header-actions {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+}
+
+/* 用户提示条样式 */
+.user-tip {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 16px;
+  margin-bottom: 12px;
+  background: linear-gradient(135deg, #e6f7ff 0%, #f0f5ff 100%);
+  border: 1px solid #91d5ff;
+  border-radius: 6px;
+  font-size: 13px;
+}
+
+.tip-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.tip-row {
+  display: flex;
+  align-items: center;
+}
+
+.tip-icon {
+  color: #1890ff;
+  font-size: 16px;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.tip-text {
+  color: #333;
+  line-height: 1.5;
+}
+
+.threshold-value {
+  display: inline-block;
+  background: #1890ff;
+  color: #fff;
+  padding: 1px 8px;
+  border-radius: 10px;
+  font-weight: 600;
+  font-size: 12px;
+  margin-left: 2px;
+}
+
+/* 单元格背景色样式 - 条件格式化 */
+/* 让颜色 div 撑满整个 td：先将含色块的 td padding 归零，再由 div 自身提供 padding */
+:deep(.ant-table-cell:has(.cell-bg-red)),
+:deep(.ant-table-cell:has(.cell-bg-orange)),
+:deep(.ant-table-cell:has(.cell-bg-green)) {
+  padding: 0 !important;
+}
+
+:deep(.cell-bg-red) {
+  background-color: #ffccc7;
+  color: #cf1322;
+  font-weight: 600;
+  display: block;
+  padding: 8px 12px;
+  text-align: right;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+:deep(.cell-bg-orange) {
+  background-color: #ffe7ba;
+  color: #d46b08;
+  font-weight: 600;
+  display: block;
+  padding: 8px 12px;
+  text-align: right;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+:deep(.cell-bg-green) {
+  background-color: #d9f7be;
+  color: #389e0d;
+  font-weight: 600;
+  display: block;
+  padding: 8px 12px;
+  text-align: right;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.chart-card {
+  margin-bottom: 24px;
+}
+
+.chart-controls {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.control-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.control-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #555;
+  white-space: nowrap;
+}
+
+.control-label .t-icon {
+  color: #0052d9;
+}
+
+.control-divider {
+  width: 1px;
+  height: 32px;
+  background: linear-gradient(180deg, transparent, #dcdfe6, transparent);
+  margin: 0 4px;
+}
+
+.metric-count {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 10px;
+  background: linear-gradient(135deg, #e6f4ff, #f0f5ff);
+  border: 1px solid #91d5ff;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #1890ff;
+  white-space: nowrap;
+}
+
+.quick-actions {
+  display: flex;
+  gap: 4px;
+  margin-left: 8px;
+}
+
+.quick-actions .t-button {
+  padding: 2px 8px;
+  font-size: 12px;
+  color: #1890ff;
+  transition: all 0.2s ease;
+}
+
+.quick-actions .t-button:hover:not(:disabled) {
+  color: #40a9ff;
+  background: rgba(24, 144, 255, 0.05);
+}
+
+.quick-actions .t-button:disabled {
+  color: #d9d9d9;
+  cursor: not-allowed;
+}
+
+.metrics-select {
+  min-height: 36px;
+}
+
+/* 优化标签输入框内部样式 */
+::v-deep(.metrics-select .t-input) {
+  min-height: 36px;
+  border-radius: 6px;
+  border-color: #d9d9d9;
+  transition: all 0.3s ease;
+}
+
+::v-deep(.metrics-select .t-input:hover) {
+  border-color: #40a9ff;
+}
+
+::v-deep(.metrics-select .t-input:focus-within) {
+  border-color: #1890ff;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
+}
+
+/* 标签样式优化 - 为不同指标显示不同颜色 */
+::v-deep(.metrics-select .t-tag) {
+  margin: 4px 6px 4px 0;
+  padding: 3px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  background: linear-gradient(135deg, #f0f5ff, #e6f4ff);
+  border: 1px solid #adc6ff;
+  color: #2f54eb;
+  transition: all 0.2s ease;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+::v-deep(.metrics-select .t-tag:hover) {
+  background: linear-gradient(135deg, #e6f4ff, #d6e4ff);
+  border-color: #85b8ff;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(47, 84, 235, 0.15);
+}
+
+::v-deep(.metrics-select .t-tag__icon-close) {
+  color: #2f54eb;
+  opacity: 0.6;
+  transition: all 0.2s ease;
+  font-size: 14px;
+}
+
+::v-deep(.metrics-select .t-tag__icon-close:hover) {
+  opacity: 1;
+  color: #ff4d4f;
+  transform: scale(1.1);
+}
+
+/* 为特定指标标签添加颜色标识 */
+::v-deep(.metrics-select .t-tag:nth-child(1)) { border-left: 3px solid #5470c6; }
+::v-deep(.metrics-select .t-tag:nth-child(2)) { border-left: 3px solid #91cc75; }
+::v-deep(.metrics-select .t-tag:nth-child(3)) { border-left: 3px solid #fac858; }
+::v-deep(.metrics-select .t-tag:nth-child(4)) { border-left: 3px solid #ee6666; }
+::v-deep(.metrics-select .t-tag:nth-child(5)) { border-left: 3px solid #73c0de; }
+::v-deep(.metrics-select .t-tag:nth-child(6)) { border-left: 3px solid #3ba272; }
+::v-deep(.metrics-select .t-tag:nth-child(7)) { border-left: 3px solid #fc8452; }
+::v-deep(.metrics-select .t-tag:nth-child(8)) { border-left: 3px solid #9a60b4; }
+::v-deep(.metrics-select .t-tag:nth-child(9)) { border-left: 3px solid #acbf60; }
+::v-deep(.metrics-select .t-tag:nth-child(10)) { border-left: 3px solid #ea7ccc; }
+::v-deep(.metrics-select .t-tag:nth-child(11)) { border-left: 3px solid #48b8d0; }
+::v-deep(.metrics-select .t-tag:nth-child(12)) { border-left: 3px solid #dd6b66; }
+
+.chart-container {
+  width: 100%;
+  height: 500px;
+  background: linear-gradient(135deg, #fafbfc 0%, #f5f7fa 100%);
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+/* 空状态提示 */
+.chart-container:empty::before {
+  content: '暂无数据';
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #999;
+  font-size: 14px;
+}
+
+::deep(.t-card__header) {
+  padding: 16px 24px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+::deep(.t-card__body) {
+  padding: 24px;
+}
+
+/* Ant Design 表格样式适配 */
+::deep(.ant-table) {
+  font-size: 13px;
+}
+
+::deep(.ant-table-thead > tr > th) {
+  background: #f5f7fa !important;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+::deep(.ant-table-tbody > tr > td) {
+  white-space: nowrap;
+}
+
+::deep(.ant-table-cell) {
+  padding: 8px 12px !important;
+}
+
+@media (max-width: 768px) {
+  .page-title { font-size: 24px; }
+  .data-container { padding: 16px; margin-bottom: 16px; border-radius: 8px; }
+  .global-filters { border-radius: 8px; }
+  .filter-header { padding: 10px 14px; flex-wrap: wrap; gap: 10px; }
+  .filter-content { flex-direction: column; }
+  .filter-section { flex-direction: column; align-items: flex-start; padding: 12px 14px; gap: 10px; width: 100%; box-sizing: border-box; }
+  .section-label { border-right: none; border-bottom: 2px solid #e4e9f0; padding-right: 0; padding-bottom: 6px; margin-right: 0; height: auto; line-height: normal; }
+  .section-items { flex-direction: column; align-items: stretch; gap: 10px; padding-left: 0; width: 100%; }
+  .section-divider { width: 100%; height: 1px; margin: 0; }
+  .filter-item { width: 100%; }
+  .filter-item .t-select, .filter-item .ant-picker { width: 100% !important; flex: 1; }
+  .cascade-tip { margin-top: 4px; }
+  .action-group { width: 100%; justify-content: center; margin-top: 8px; }
+  .chart-container { height: 300px; }
+  .chart-controls { flex-direction: column; align-items: flex-start; width: 100%; }
+  .control-item { width: 100%; flex-direction: column; align-items: flex-start; gap: 8px; }
+  .control-divider { display: none; }
+  .metrics-select, .metrics-select .t-select { width: 100% !important; }
+  .metric-count { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); }
+  .color-legend { flex-wrap: wrap; }
+  .data-sync-badge { margin-left: 0; margin-top: 8px; }
+}
+
+@media (max-width: 1200px) {
+  .filter-content { flex-wrap: wrap; }
+  .filter-section { flex: none; }
+  .section-divider { width: 100%; height: 1px; margin: 0; }
+  .chart-controls {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
+
+  .control-divider {
+    display: none;
+  }
+
+  .metrics-select .t-select {
+    width: 400px;
+  }
+}
+
+@media (min-width: 769px) and (max-width: 1200px) {
+  .control-item {
+    width: 100%;
+  }
+
+  .metrics-select .t-select {
+    width: 100%;
+  }
+}
+.export-modal-content {
+  padding: 16px 0;
+}
+
+.export-tip {
+  font-size: 14px;
+  color: #333;
+  margin-bottom: 16px;
+  font-weight: 500;
+}
+
+.export-filters {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  background: #f8fafc;
+  padding: 20px;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+}
+
+.export-filter-item {
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+}
+
+.export-filter-label {
+  color: #64748b;
+  width: 48px;
+  flex-shrink: 0;
+  text-align: right;
+  margin-right: 8px;
+}
+
+.export-filter-value {
+  color: #1e293b;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.export-count {
+  margin-top: 16px;
+  font-size: 14px;
+  color: #333;
+  text-align: right;
+  padding-top: 12px;
+  border-top: 1px dashed #e2e8f0;
+}
+
+.export-count strong {
+  color: #0052d9;
+  font-size: 16px;
+  margin: 0 4px;
+}
+
+/* 确保日期选择器弹窗在TDesign模态框之上 */
+:global(.ant-picker-dropdown) {
+  z-index: 3000 !important;
+}
+
+/* 编辑列模态框样式 */
+.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;
+  }
+}
+</style>
diff --git a/src/components/DocIconButton.vue b/src/components/DocIconButton.vue
new file mode 100644
index 0000000..7f1223f
--- /dev/null
+++ b/src/components/DocIconButton.vue
@@ -0,0 +1,197 @@
+<template>
+  <div
+    ref="buttonRef"
+    class="doc-icon-button"
+    :style="buttonStyle"
+    @mousedown="handleMouseDown"
+    @touchstart="handleTouchStart"
+    @click="handleClick"
+  >
+    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+      <polyline points="14 2 14 8 20 8"></polyline>
+      <line x1="16" y1="13" x2="8" y2="13"></line>
+      <line x1="16" y1="17" x2="8" y2="17"></line>
+      <polyline points="10 9 9 9 8 9"></polyline>
+    </svg>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+const emit = defineEmits(['click'])
+
+const buttonRef = ref(null)
+const position = ref({ x: 20, y: 20 })
+const isDragging = ref(false)
+const dragStart = ref({ x: 0, y: 0 })
+const initialPosition = ref({ x: 0, y: 0 })
+const isClick = ref(true)
+
+const buttonStyle = computed(() => ({
+  left: `${position.value.x}px`,
+  top: `${position.value.y}px`,
+  transition: isDragging.value ? 'none' : 'all 0.3s ease'
+}))
+
+const savePosition = () => {
+  localStorage.setItem('docIconPosition', JSON.stringify(position.value))
+}
+
+const loadPosition = () => {
+  const saved = localStorage.getItem('docIconPosition')
+  if (saved) {
+    try {
+      position.value = JSON.parse(saved)
+    } catch (e) {
+      console.error('Failed to load position:', e)
+    }
+  }
+}
+
+const clampPosition = (x, y) => {
+  const buttonWidth = 50
+  const buttonHeight = 50
+  const padding = 10
+  
+  const maxX = window.innerWidth - buttonWidth - padding
+  const maxY = window.innerHeight - buttonHeight - padding
+  
+  return {
+    x: Math.max(padding, Math.min(x, maxX)),
+    y: Math.max(padding, Math.min(y, maxY))
+  }
+}
+
+const handleMouseDown = (e) => {
+  isDragging.value = true
+  isClick.value = true
+  dragStart.value = { x: e.clientX, y: e.clientY }
+  initialPosition.value = { ...position.value }
+  
+  document.addEventListener('mousemove', handleMouseMove)
+  document.addEventListener('mouseup', handleMouseUp)
+  
+  e.preventDefault()
+}
+
+const handleMouseMove = (e) => {
+  if (!isDragging.value) return
+  
+  isClick.value = false
+  
+  const dx = e.clientX - dragStart.value.x
+  const dy = e.clientY - dragStart.value.y
+  
+  const newX = initialPosition.value.x + dx
+  const newY = initialPosition.value.y + dy
+  
+  position.value = clampPosition(newX, newY)
+}
+
+const handleMouseUp = () => {
+  document.removeEventListener('mousemove', handleMouseMove)
+  document.removeEventListener('mouseup', handleMouseUp)
+  
+  // 延迟重置 isDragging，确保 click 事件先触发
+  setTimeout(() => {
+    isDragging.value = false
+  }, 0)
+  
+  savePosition()
+}
+
+const handleTouchStart = (e) => {
+  const touch = e.touches[0]
+  isDragging.value = true
+  isClick.value = true
+  dragStart.value = { x: touch.clientX, y: touch.clientY }
+  initialPosition.value = { ...position.value }
+  
+  document.addEventListener('touchmove', handleTouchMove, { passive: false })
+  document.addEventListener('touchend', handleTouchEnd)
+  
+  e.preventDefault()
+}
+
+const handleTouchMove = (e) => {
+  if (!isDragging.value) return
+  
+  isClick.value = false
+  
+  const touch = e.touches[0]
+  const dx = touch.clientX - dragStart.value.x
+  const dy = touch.clientY - dragStart.value.y
+  
+  const newX = initialPosition.value.x + dx
+  const newY = initialPosition.value.y + dy
+  
+  position.value = clampPosition(newX, newY)
+  
+  e.preventDefault()
+}
+
+const handleTouchEnd = () => {
+  document.removeEventListener('touchmove', handleTouchMove)
+  document.removeEventListener('touchend', handleTouchEnd)
+  
+  // 延迟重置 isDragging，确保 click 事件先触发
+  setTimeout(() => {
+    isDragging.value = false
+  }, 0)
+  
+  savePosition()
+}
+
+const handleClick = (e) => {
+  if (!isClick.value) {
+    e.stopPropagation()
+    return
+  }
+  emit('click')
+}
+
+onMounted(() => {
+  loadPosition()
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mousemove', handleMouseMove)
+  document.removeEventListener('mouseup', handleMouseUp)
+  document.removeEventListener('touchmove', handleTouchMove)
+  document.removeEventListener('touchend', handleTouchEnd)
+})
+</script>
+
+<style scoped>
+.doc-icon-button {
+  position: fixed;
+  width: 50px;
+  height: 50px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+  z-index: 10000;
+  user-select: none;
+  touch-action: none;
+}
+
+.doc-icon-button:active {
+  cursor: grabbing;
+}
+
+.doc-icon-button:hover {
+  transform: scale(1.1);
+  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
+}
+
+.doc-icon-button svg {
+  color: white;
+  pointer-events: none;
+}
+</style>
diff --git a/src/components/DocModal.vue b/src/components/DocModal.vue
new file mode 100644
index 0000000..6d538a1
--- /dev/null
+++ b/src/components/DocModal.vue
@@ -0,0 +1,450 @@
+<template>
+  <div v-if="visible" class="doc-modal-mask" @click="handleMaskClick">
+    <div
+      ref="modalRef"
+      class="doc-modal"
+      :style="modalStyle"
+      @mousedown.stop
+    >
+      <div
+        class="doc-modal-header"
+        @mousedown="startDrag"
+      >
+        <span class="doc-modal-title">文档</span>
+        <div class="doc-modal-actions">
+          <button class="doc-modal-action-btn" @click="toggleMinimize">
+            {{ isMinimized ? '□' : '−' }}
+          </button>
+          <button class="doc-modal-action-btn" @click="handleClose">
+            ×
+          </button>
+        </div>
+      </div>
+      <div v-if="!isMinimized" class="doc-modal-content">
+        <div class="markdown-body" v-html="renderedContent"></div>
+      </div>
+      <div
+        v-if="!isMinimized"
+        class="doc-modal-resize-handle se"
+        @mousedown="startResize('se')"
+      ></div>
+      <div
+        v-if="!isMinimized"
+        class="doc-modal-resize-handle sw"
+        @mousedown="startResize('sw')"
+      ></div>
+      <div
+        v-if="!isMinimized"
+        class="doc-modal-resize-handle ne"
+        @mousedown="startResize('ne')"
+      ></div>
+      <div
+        v-if="!isMinimized"
+        class="doc-modal-resize-handle nw"
+        @mousedown="startResize('nw')"
+      ></div>
+      <div
+        v-if="!isMinimized"
+        class="doc-modal-resize-handle n"
+        @mousedown="startResize('n')"
+      ></div>
+      <div
+        v-if="!isMinimized"
+        class="doc-modal-resize-handle s"
+        @mousedown="startResize('s')"
+      ></div>
+      <div
+        v-if="!isMinimized"
+        class="doc-modal-resize-handle e"
+        @mousedown="startResize('e')"
+      ></div>
+      <div
+        v-if="!isMinimized"
+        class="doc-modal-resize-handle w"
+        @mousedown="startResize('w')"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+import { marked } from 'marked'
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  content: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['close'])
+
+const modalRef = ref(null)
+const isMinimized = ref(false)
+const position = ref({ x: 100, y: 100 })
+const size = ref({ width: 600, height: 400 })
+const isDragging = ref(false)
+const isResizing = ref(false)
+const resizeDirection = ref('')
+const dragStart = ref({ x: 0, y: 0 })
+const initialPosition = ref({ x: 0, y: 0 })
+const initialSize = ref({ width: 0, height: 0 })
+
+const renderedContent = computed(() => {
+  return marked(props.content)
+})
+
+const modalStyle = computed(() => {
+  if (isMinimized.value) {
+    return {
+      left: `${position.value.x}px`,
+      top: `${position.value.y}px`,
+      width: 'auto',
+      height: 'auto'
+    }
+  }
+  return {
+    left: `${position.value.x}px`,
+    top: `${position.value.y}px`,
+    width: `${size.value.width}px`,
+    height: `${size.value.height}px`
+  }
+})
+
+const handleClose = () => {
+  emit('close')
+}
+
+const handleMaskClick = (e) => {
+  if (e.target.classList.contains('doc-modal-mask')) {
+    handleClose()
+  }
+}
+
+const toggleMinimize = () => {
+  isMinimized.value = !isMinimized.value
+}
+
+const startDrag = (e) => {
+  isDragging.value = true
+  dragStart.value = { x: e.clientX, y: e.clientY }
+  initialPosition.value = { ...position.value }
+  document.addEventListener('mousemove', onDrag)
+  document.addEventListener('mouseup', stopDrag)
+}
+
+const onDrag = (e) => {
+  if (!isDragging.value) return
+  const dx = e.clientX - dragStart.value.x
+  const dy = e.clientY - dragStart.value.y
+  position.value = {
+    x: initialPosition.value.x + dx,
+    y: initialPosition.value.y + dy
+  }
+}
+
+const stopDrag = () => {
+  isDragging.value = false
+  document.removeEventListener('mousemove', onDrag)
+  document.removeEventListener('mouseup', stopDrag)
+}
+
+const startResize = (direction) => {
+  isResizing.value = true
+  resizeDirection.value = direction
+  dragStart.value = { x: event.clientX, y: event.clientY }
+  initialPosition.value = { ...position.value }
+  initialSize.value = { ...size.value }
+  document.addEventListener('mousemove', onResize)
+  document.addEventListener('mouseup', stopResize)
+}
+
+const onResize = (e) => {
+  if (!isResizing.value) return
+  const dx = e.clientX - dragStart.value.x
+  const dy = e.clientY - dragStart.value.y
+  const direction = resizeDirection.value
+  let newWidth = initialSize.value.width
+  let newHeight = initialSize.value.height
+  let newX = initialPosition.value.x
+  let newY = initialPosition.value.y
+
+  if (direction.includes('e')) {
+    newWidth = Math.max(300, initialSize.value.width + dx)
+  }
+  if (direction.includes('w')) {
+    newWidth = Math.max(300, initialSize.value.width - dx)
+    if (newWidth !== initialSize.value.width) {
+      newX = initialPosition.value.x + dx
+    }
+  }
+  if (direction.includes('s')) {
+    newHeight = Math.max(200, initialSize.value.height + dy)
+  }
+  if (direction.includes('n')) {
+    newHeight = Math.max(200, initialSize.value.height - dy)
+    if (newHeight !== initialSize.value.height) {
+      newY = initialPosition.value.y + dy
+    }
+  }
+
+  size.value = { width: newWidth, height: newHeight }
+  position.value = { x: newX, y: newY }
+}
+
+const stopResize = () => {
+  isResizing.value = false
+  document.removeEventListener('mousemove', onResize)
+  document.removeEventListener('mouseup', stopResize)
+}
+
+watch(() => props.visible, (newVal) => {
+  if (newVal) {
+    isMinimized.value = false
+  }
+})
+
+onMounted(() => {
+  marked.setOptions({
+    breaks: true,
+    gfm: true
+  })
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mousemove', onDrag)
+  document.removeEventListener('mouseup', stopDrag)
+  document.removeEventListener('mousemove', onResize)
+  document.removeEventListener('mouseup', stopResize)
+})
+</script>
+
+<style scoped>
+.doc-modal-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10001;
+  pointer-events: none;
+}
+
+.doc-modal {
+  position: absolute;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  pointer-events: auto;
+}
+
+.doc-modal-header {
+  padding: 12px 16px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: move;
+  user-select: none;
+}
+
+.doc-modal-title {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.doc-modal-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.doc-modal-action-btn {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  line-height: 1;
+}
+
+.doc-modal-action-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.doc-modal-content {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+}
+
+.doc-modal-resize-handle {
+  position: absolute;
+  background: transparent;
+}
+
+.doc-modal-resize-handle.se {
+  right: 0;
+  bottom: 0;
+  width: 16px;
+  height: 16px;
+  cursor: se-resize;
+}
+
+.doc-modal-resize-handle.sw {
+  left: 0;
+  bottom: 0;
+  width: 16px;
+  height: 16px;
+  cursor: sw-resize;
+}
+
+.doc-modal-resize-handle.ne {
+  right: 0;
+  top: 0;
+  width: 16px;
+  height: 16px;
+  cursor: ne-resize;
+}
+
+.doc-modal-resize-handle.nw {
+  left: 0;
+  top: 0;
+  width: 16px;
+  height: 16px;
+  cursor: nw-resize;
+}
+
+.doc-modal-resize-handle.n {
+  top: 0;
+  left: 16px;
+  right: 16px;
+  height: 8px;
+  cursor: n-resize;
+}
+
+.doc-modal-resize-handle.s {
+  bottom: 0;
+  left: 16px;
+  right: 16px;
+  height: 8px;
+  cursor: s-resize;
+}
+
+.doc-modal-resize-handle.e {
+  right: 0;
+  top: 16px;
+  bottom: 16px;
+  width: 8px;
+  cursor: e-resize;
+}
+
+.doc-modal-resize-handle.w {
+  left: 0;
+  top: 16px;
+  bottom: 16px;
+  width: 8px;
+  cursor: w-resize;
+}
+
+.markdown-body {
+  font-size: 14px;
+  line-height: 1.6;
+  color: #333;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin-top: 20px;
+  margin-bottom: 10px;
+  font-weight: 600;
+  color: #333;
+}
+
+.markdown-body h1 {
+  font-size: 24px;
+}
+
+.markdown-body h2 {
+  font-size: 20px;
+}
+
+.markdown-body h3 {
+  font-size: 18px;
+}
+
+.markdown-body p {
+  margin: 10px 0;
+}
+
+.markdown-body ul,
+.markdown-body ol {
+  margin: 10px 0;
+  padding-left: 20px;
+}
+
+.markdown-body li {
+  margin: 5px 0;
+}
+
+.markdown-body code {
+  background: #f5f5f5;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: monospace;
+}
+
+.markdown-body pre {
+  background: #f5f5f5;
+  padding: 12px;
+  border-radius: 6px;
+  overflow-x: auto;
+}
+
+.markdown-body pre code {
+  background: none;
+  padding: 0;
+}
+
+.markdown-body blockquote {
+  border-left: 4px solid #667eea;
+  padding-left: 12px;
+  margin: 10px 0;
+  color: #666;
+}
+
+.markdown-body table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 10px 0;
+}
+
+.markdown-body th,
+.markdown-body td {
+  border: 1px solid #ddd;
+  padding: 8px 12px;
+  text-align: left;
+}
+
+.markdown-body th {
+  background: #f5f5f5;
+}
+</style>
diff --git a/src/components/EnglishWordReport.vue b/src/components/EnglishWordReport.vue
new file mode 100644
index 0000000..f9c9604
--- /dev/null
+++ b/src/components/EnglishWordReport.vue
@@ -0,0 +1,2664 @@
+<template>
+  <div class="english-word-report">
+    <!-- 顶部导航栏 (复用 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="page-header">
+      <div class="header-left">
+        <t-button variant="text" @click="goBack" class="back-btn">
+          <template #icon>
+            <t-icon name="chevron-left" />
+          </template>
+          返回首页
+        </t-button>
+        <div class="title-group">
+          <div class="title-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+              <path d="M12 2L2 7l10 5 10-5-10-5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              <path d="M2 17l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              <path d="M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </div>
+          <div>
+            <h1 class="page-title">英语单词报告</h1>
+            <p class="page-subtitle">全面展示英语单词学习数据与学情分析</p>
+          </div>
+        </div>
+      </div>
+      <div class="header-filters">
+        <t-select v-model="selectedCloud" placeholder="选择云校" style="width:140px; min-width: 120px;" size="large">
+          <t-option v-for="c in cloudList" :key="c.value" :value="c.value" :label="c.label" />
+        </t-select>
+        <t-select v-model="selectedSchool" placeholder="选择学校" style="width:140px; min-width: 120px;" size="large">
+          <t-option v-for="s in schoolList" :key="s.value" :value="s.value" :label="s.label" />
+        </t-select>
+        <t-select
+          v-model="selectedGrade"
+          placeholder="选择年级"
+          style="width:120px; min-width: 100px;"
+          size="large"
+          :disabled="!selectedSchool"
+        >
+          <t-option v-for="g in gradeList" :key="g.value" :value="g.value" :label="g.label" />
+        </t-select>
+        <t-select
+          v-model="selectedClass"
+          placeholder="选择班级"
+          style="width:120px; min-width: 100px;"
+          size="large"
+          :disabled="!selectedGrade"
+        >
+          <t-option v-for="c in classList" :key="c.value" :value="c.value" :label="c.label" />
+        </t-select>
+      </div>
+    </div>
+
+    <!-- Tab 导航 -->
+    <div class="tabs-wrapper">
+      <t-tabs v-model="activeTab">
+        <t-tab-panel value="overview" label="总体学情统计">
+          <div class="tab-content">
+            <!-- 总体学情统计分析表 -->
+            <div class="section-header">
+              <div class="header-row">
+                <div>
+                  <h3 class="section-title">总体学情统计分析表</h3>
+                  <p class="section-desc">统计各年级英语单词学习整体情况，包含在线率、完成率、正确率等核心指标</p>
+                </div>
+                <div class="date-picker-wrapper">
+                  <t-date-range-picker
+                    v-model="dateRange"
+                    allow-input
+                    clearable
+                    :disable-date="disabledFutureDate"
+                    @change="handleDateChange"
+                    style="width: 260px; margin-right: 16px"
+                  />
+                  <t-button theme="primary" variant="outline" @click="handleExport('overview')">
+                    <template #icon>
+                      <t-icon name="download" />
+                    </template>
+                    导出数据
+                  </t-button>
+                  <div v-if="showDateWarning" class="date-warning-text">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style="margin-right: 4px;">
+                      <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z" fill="currentColor"/>
+                    </svg>
+                    日期跨度不能超过30天，已自动调整
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="table-scroll-wrapper">
+              <t-enhanced-table
+                :data="overviewData"
+                :columns="overviewColumns"
+                row-key="id"
+                hover
+                :bordered="false"
+                size="large"
+                :tree="{ childrenKey: 'children', treeNodeColumnIndex: 0, defaultExpandAll: true, indent: 24 }"
+                :scroll="{ type: 'virtual', isFixedHeader: true }"
+                table-layout="fixed"
+                :row-class-name="getRowClassName"
+                @row-click="handleRowClick"
+              />
+            </div>
+          </div>
+        </t-tab-panel>
+
+        <t-tab-panel value="accuracy_rank" label="答题正确率排名">
+          <div class="tab-content">
+            <!-- 学生答题正确率排名表 -->
+            <div class="section-header">
+              <div class="header-row">
+                <div>
+                  <h3 class="section-title">学生答题正确率排名表</h3>
+                  <p class="section-desc">按答题正确率从高到低排列，展示学生学习成效排名</p>
+                </div>
+                <t-button theme="primary" variant="outline" @click="handleExport('accuracy_rank')">
+                  <template #icon>
+                    <t-icon name="download" />
+                  </template>
+                  导出数据
+                </t-button>
+              </div>
+            </div>
+            <t-table :data="accuracyRankData" :columns="accuracyRankColumns" row-key="rank" hover :bordered="false" size="large" :pagination="pagination" @page-change="onPageChange" style="width: 100%; overflow-x: auto;" />
+          </div>
+        </t-tab-panel>
+
+        <t-tab-panel value="progress_dist" label="答题进度分布">
+          <div class="tab-content">
+            <!-- 学生答题进度分布表 -->
+            <div class="section-header">
+              <div class="header-row">
+                <div>
+                  <h3 class="section-title">学生答题进度分布表</h3>
+                  <p class="section-desc">按答题完成进度区间统计学生分布情况，了解整体学习推进状态</p>
+                </div>
+                <t-button theme="primary" variant="outline" @click="handleExport('progress_dist')">
+                  <template #icon>
+                    <t-icon name="download" />
+                  </template>
+                  导出数据
+                </t-button>
+              </div>
+            </div>
+            <div class="chart-container">
+              <div ref="progressChartRef" style="width: 100%; height: 400px; margin-bottom: 24px;"></div>
+            </div>
+            <t-table :data="progressDistData" :columns="progressDistColumns" row-key="progressRange" hover :bordered="false" size="large" :pagination="pagination" @page-change="onPageChange" style="width: 100%; overflow-x: auto;" />
+          </div>
+        </t-tab-panel>
+
+        <t-tab-panel value="accuracy_dist" label="正确率分布">
+          <div class="tab-content">
+            <!-- 学生答题正确率分布表 -->
+            <div class="section-header">
+              <div class="header-row">
+                <div>
+                  <h3 class="section-title">学生答题正确率分布表</h3>
+                  <p class="section-desc">按正确率区间统计学生分布，直观呈现学生掌握程度层次</p>
+                </div>
+                <t-button theme="primary" variant="outline" @click="handleExport('accuracy_dist')">
+                  <template #icon>
+                    <t-icon name="download" />
+                  </template>
+                  导出数据
+                </t-button>
+              </div>
+            </div>
+            <div class="chart-container">
+              <div ref="accuracyChartRef" style="width: 100%; height: 400px; margin-bottom: 24px;"></div>
+            </div>
+            <t-table :data="accuracyDistData" :columns="accuracyDistColumns" row-key="accuracyRange" hover :bordered="false" size="large" :pagination="pagination" @page-change="onPageChange" style="width: 100%; overflow-x: auto;" />
+          </div>
+        </t-tab-panel>
+
+        <t-tab-panel value="online_stats" label="学生在线统计">
+          <div class="tab-content">
+            <!-- 在线与答题趋势图 -->
+            <div class="section-header">
+              <div class="header-row">
+                <div>
+                  <h3 class="section-title">学生在线与答题趋势</h3>
+                  <p class="section-desc">展示不同时间维度下的在线用户数量与答题数量变化趋势</p>
+                </div>
+                <div class="chart-filters" style="display: flex; gap: 16px; align-items: center;">
+                  <t-date-picker
+                    v-if="onlineTimeDimension === 'minute' || onlineTimeDimension === 'hour'"
+                    v-model="onlineSingleDate"
+                    allow-input
+                    clearable
+                    :disable-date="disabledFutureDate"
+                    @change="handleOnlineDateChange"
+                    style="width: 160px"
+                  />
+                  <div v-else style="display: flex; flex-direction: column; align-items: flex-end; position: relative;">
+                    <t-date-range-picker
+                      v-model="onlineDateRange"
+                      allow-input
+                      clearable
+                      :disable-date="disabledFutureDate"
+                      @change="handleOnlineDateRangeChange"
+                      style="width: 260px"
+                    />
+                    <div v-if="showOnlineDateWarning" class="date-warning-text" style="top: 100%; margin-top: 4px;">
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style="margin-right: 4px;">
+                        <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z" fill="currentColor"/>
+                      </svg>
+                      日期跨度不能超过30天，已自动调整
+                    </div>
+                  </div>
+                  <t-radio-group v-model="onlineTimeDimension" variant="default-filled" @change="handleTimeDimensionChange">
+                    <t-radio-button value="minute">分钟</t-radio-button>
+                    <t-radio-button value="hour">小时</t-radio-button>
+                    <t-radio-button value="day">天</t-radio-button>
+                  </t-radio-group>
+                  <t-button theme="primary" variant="outline" @click="handleExport('online_stats')" style="margin-left: 8px;">
+                    <template #icon>
+                      <t-icon name="download" />
+                    </template>
+                    导出数据
+                  </t-button>
+                </div>
+              </div>
+            </div>
+            <div class="chart-container">
+              <div ref="onlineTrendChartRef" style="width: 100%; height: 400px; margin-bottom: 32px;"></div>
+            </div>
+          </div>
+        </t-tab-panel>
+      </t-tabs>
+    </div>
+    <!-- 导出确认对话框 -->
+    <t-dialog
+      v-model:visible="exportDialogVisible"
+      header="确认导出"
+      @confirm="confirmExport"
+      @cancel="exportDialogVisible = false"
+    >
+      <div class="export-dialog-content">
+        <p class="export-tip">请确认或调整导出数据的筛选条件：</p>
+        <div class="export-filters-list">
+          <div class="filter-item">
+            <span class="filter-label">云校：</span>
+            <t-select v-model="exportFilters.cloud" placeholder="全部云校" clearable style="width: 100%">
+              <t-option v-for="c in cloudList" :key="c.value" :value="c.value" :label="c.label" />
+            </t-select>
+          </div>
+          <div class="filter-item">
+            <span class="filter-label">学校：</span>
+            <t-select v-model="exportFilters.school" placeholder="全部学校" clearable style="width: 100%">
+              <t-option v-for="s in schoolList" :key="s.value" :value="s.value" :label="s.label" />
+            </t-select>
+          </div>
+          <div class="filter-item">
+            <span class="filter-label">年级：</span>
+            <t-select v-model="exportFilters.grade" placeholder="全部年级" clearable :disabled="!exportFilters.school" style="width: 100%">
+              <t-option v-for="g in gradeList" :key="g.value" :value="g.value" :label="g.label" />
+            </t-select>
+          </div>
+          <div class="filter-item">
+            <span class="filter-label">班级：</span>
+            <t-select v-model="exportFilters.class" placeholder="全部班级" clearable :disabled="!exportFilters.grade" style="width: 100%">
+              <t-option v-for="c in classList" :key="c.value" :value="c.value" :label="c.label" />
+            </t-select>
+          </div>
+          <div class="filter-item" v-if="exportType === 'overview' || (exportType === 'online_stats' && onlineTimeDimension === 'day')">
+            <span class="filter-label">日期范围：</span>
+            <t-date-range-picker
+              v-model="exportFilters.dateRange"
+              allow-input
+              clearable
+              :disable-date="disabledFutureDate"
+              style="width: 100%"
+            />
+          </div>
+          <div class="filter-item" v-if="exportType === 'online_stats' && (onlineTimeDimension === 'minute' || onlineTimeDimension === 'hour')">
+            <span class="filter-label">选择日期：</span>
+            <t-date-picker
+              v-model="exportFilters.singleDate"
+              allow-input
+              clearable
+              :disable-date="disabledFutureDate"
+              style="width: 100%"
+            />
+          </div>
+          <div class="filter-item" v-if="exportType === 'online_stats'">
+            <span class="filter-label">时间维度：</span>
+            <span class="filter-value">{{ onlineTimeDimension === 'minute' ? '分钟' : onlineTimeDimension === 'hour' ? '小时' : '天' }}</span>
+          </div>
+        </div>
+      </div>
+    </t-dialog>
+
+    <!-- 班级详情模态框 -->
+    <t-dialog
+      v-model:visible="classDetailVisible"
+      :header="selectedClassData ? `${selectedClassData.subject} - 学生详情` : '班级详情'"
+      :width="900"
+      :footer="false"
+      @close="closeClassDetail"
+      class="class-detail-dialog"
+    >
+      <div class="class-detail-content" v-if="selectedClassData">
+        <!-- 班级概览信息 -->
+        <div class="class-overview">
+          <div class="overview-item">
+            <span class="overview-label">班级名称</span>
+            <span class="overview-value">{{ selectedClassData.subject }}</span>
+          </div>
+          <div class="overview-item">
+            <span class="overview-label">总人数</span>
+            <span class="overview-value highlight">{{ selectedClassData.totalStudents }}人</span>
+          </div>
+          <div class="overview-item">
+            <span class="overview-label">平均在线率</span>
+            <span class="overview-value online-rate">{{ ((selectedClassData.onlineCount / selectedClassData.totalStudents) * 100).toFixed(1) }}%</span>
+          </div>
+          <div class="overview-item">
+            <span class="overview-label">平均完成率</span>
+            <span class="overview-value rate">{{ selectedClassData.onlineRate }}</span>
+          </div>
+          <div class="overview-item">
+            <span class="overview-label">平均正确率</span>
+            <span class="overview-value accuracy">{{ selectedClassData.accuracy }}</span>
+          </div>
+        </div>
+
+        <!-- 学生数据表格 -->
+        <div class="students-table-wrapper">
+          <div class="table-header-with-action">
+            <h4 class="table-title">学生详细数据</h4>
+            <t-button
+              theme="primary"
+              variant="outline"
+              size="small"
+              :loading="exportingStudents"
+              @click="exportStudentsData"
+            >
+              <template #icon>
+                <t-icon name="download" />
+              </template>
+              导出数据
+            </t-button>
+          </div>
+          <t-table
+            :data="classStudentsData"
+            :columns="studentColumns"
+            row-key="id"
+            hover
+            :bordered="true"
+            size="small"
+            :pagination="{ pageSize: 10 }"
+          />
+        </div>
+      </div>
+    </t-dialog>
+
+    <!-- 底部版权 (复用 PortalHomePage 风格) -->
+    <footer class="portal-footer">
+      <span>Copyright © 2025 &nbsp;QuanXue. All Rights Reserved.&nbsp; 渝ICP备05088888号</span>
+    </footer>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, h, onMounted, onUnmounted, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import * as echarts from 'echarts'
+import { MessagePlugin } from 'tdesign-vue-next'
+import dayjs from 'dayjs'
+
+const router = useRouter()
+
+// 顶部导航栏状态
+const showDropdown = ref(false)
+
+// 返回首页 - 使用路由导航
+const goBack = () => {
+  router.push('/report-home')
+}
+
+// 处理退出登录
+const handleLogout = () => {
+  // 清除登录状态
+  localStorage.removeItem('token')
+  localStorage.removeItem('userInfo')
+  // 跳转到登录页
+  router.push('/login')
+  MessagePlugin.success('已退出登录')
+}
+
+const activeTab = ref('overview')
+const selectedCloud  = ref('')
+const selectedSchool = ref('')
+const selectedGrade  = ref('')
+const selectedClass  = ref('')
+
+const cloudList = [
+  { value: '', label: '全部云校' },
+  { value: 'cloud1', label: '爱学云校A' },
+  { value: 'cloud2', label: '爱学云校B' },
+]
+
+const schoolList = [
+  { value: '', label: '全部学校' },
+  { value: 'school1', label: '第一中学' },
+  { value: 'school2', label: '第二中学' },
+  { value: 'school3', label: '实验中学' },
+]
+
+const gradeList = [
+  { value: '', label: '全部年级' }, 
+  { value: 'grade2027', label: '2027届' },
+  { value: 'grade2028', label: '2028届' },
+  { value: 'grade2029', label: '2029届' },
+]
+
+const classList = [
+  { value: '', label: '全部班级' },
+  { value: 'class1', label: '高一1班' },
+  { value: 'class2', label: '高一2班' },
+  { value: 'class3', label: '高二1班' },
+  { value: 'class4', label: '高二2班' },
+]
+
+// ── 总体学情统计 ──────────────────────────────────────────
+const disabledFutureDate = (date) => {
+  return dayjs(date).isAfter(dayjs().endOf('day'))
+}
+
+const dateRange = ref([
+  dayjs().subtract(30, 'day').format('YYYY-MM-DD'),
+  dayjs().format('YYYY-MM-DD')
+])
+
+const showDateWarning = ref(false)
+
+const handleDateChange = (value) => {
+  if (value && value.length === 2) {
+    const start = dayjs(value[0])
+    const end = dayjs(value[1])
+    const diff = end.diff(start, 'day')
+    if (diff > 30) {
+      showDateWarning.value = true
+      MessagePlugin.warning('查询日期范围不能超过30天，已自动截断')
+      dateRange.value = [
+        end.subtract(30, 'day').format('YYYY-MM-DD'),
+        value[1]
+      ]
+      setTimeout(() => {
+        showDateWarning.value = false
+      }, 5000)
+    } else {
+      showDateWarning.value = false
+      MessagePlugin.success('已更新查询日期范围')
+    }
+  } else {
+    showDateWarning.value = false
+  }
+}
+
+const overviewData = ref([
+  { 
+    id: 'cloud1',
+    subject: '八中云校', 
+    totalStudents: 476, 
+    onlineCount: 427, 
+    onlineRate: '89.7%', 
+    totalAnswerRate: '88.5%', 
+    completionRate: '85.2%', 
+    answerProgress: '80%', 
+    answerUserCount: 413, 
+    avgAnswerCount: 45, 
+    correctAnswerCount: 38, 
+    accuracy: '84.4%',
+    children: [
+      {
+        id: 'school1',
+        subject: '第一中学',
+        totalStudents: 156,
+        onlineCount: 142,
+        onlineRate: '91.0%',
+        totalAnswerRate: '88.5%',
+        completionRate: '85.2%',
+        answerProgress: '80%',
+        answerUserCount: 138,
+        avgAnswerCount: 45,
+        correctAnswerCount: 38,
+        accuracy: '84.4%',
+        children: [
+          {
+            id: 'grade1',
+            subject: '2027届',
+            totalStudents: 102,
+            onlineCount: 93,
+            onlineRate: '91.2%',
+            totalAnswerRate: '90.0%',
+            completionRate: '86.0%',
+            answerProgress: '81.5%',
+            answerUserCount: 90,
+            avgAnswerCount: 45.5,
+            correctAnswerCount: 39,
+            accuracy: '85.6%',
+            children: [
+              { id: 'class1-1', subject: '高一1班', totalStudents: 50, onlineCount: 48, onlineRate: '96.0%', totalAnswerRate: '95.0%', completionRate: '90.0%', answerProgress: '85%', answerUserCount: 46, avgAnswerCount: 48, correctAnswerCount: 42, accuracy: '87.5%' },
+              { id: 'class1-2', subject: '高一2班', totalStudents: 52, onlineCount: 45, onlineRate: '86.5%', totalAnswerRate: '85.0%', completionRate: '82.0%', answerProgress: '78%', answerUserCount: 44, avgAnswerCount: 43, correctAnswerCount: 36, accuracy: '83.7%' }
+            ]
+          },
+          {
+            id: 'grade2',
+            subject: '2026届',
+            totalStudents: 54,
+            onlineCount: 49,
+            onlineRate: '90.7%',
+            totalAnswerRate: '86.0%',
+            completionRate: '84.0%',
+            answerProgress: '77%',
+            answerUserCount: 48,
+            avgAnswerCount: 44,
+            correctAnswerCount: 36,
+            accuracy: '81.8%',
+            children: [
+              { id: 'class1-3', subject: '高二1班', totalStudents: 54, onlineCount: 49, onlineRate: '90.7%', totalAnswerRate: '86.0%', completionRate: '84.0%', answerProgress: '77%', answerUserCount: 48, avgAnswerCount: 44, correctAnswerCount: 36, accuracy: '81.8%' }
+            ]
+          }
+        ]
+      },
+      {
+        id: 'school2',
+        subject: '第二中学',
+        totalStudents: 148,
+        onlineCount: 135,
+        onlineRate: '91.2%',
+        totalAnswerRate: '89.1%',
+        completionRate: '87.5%',
+        answerProgress: '85%',
+        answerUserCount: 130,
+        avgAnswerCount: 50,
+        correctAnswerCount: 43,
+        accuracy: '86.0%',
+        children: [
+          {
+            id: 'grade3',
+            subject: '2027届',
+            totalStudents: 98,
+            onlineCount: 90,
+            onlineRate: '91.9%',
+            totalAnswerRate: '89.0%',
+            completionRate: '87.0%',
+            answerProgress: '85%',
+            answerUserCount: 86,
+            avgAnswerCount: 50.5,
+            correctAnswerCount: 43.5,
+            accuracy: '86.1%',
+            children: [
+              { id: 'class2-1', subject: '高一1班', totalStudents: 48, onlineCount: 45, onlineRate: '93.8%', totalAnswerRate: '90.0%', completionRate: '88.0%', answerProgress: '86%', answerUserCount: 42, avgAnswerCount: 52, correctAnswerCount: 45, accuracy: '86.5%' },
+              { id: 'class2-2', subject: '高一2班', totalStudents: 50, onlineCount: 45, onlineRate: '90.0%', totalAnswerRate: '88.0%', completionRate: '86.0%', answerProgress: '84%', answerUserCount: 44, avgAnswerCount: 49, correctAnswerCount: 42, accuracy: '85.7%' }
+            ]
+          },
+          {
+            id: 'grade4',
+            subject: '2026届',
+            totalStudents: 50,
+            onlineCount: 45,
+            onlineRate: '90.0%',
+            totalAnswerRate: '89.5%',
+            completionRate: '88.5%',
+            answerProgress: '85%',
+            answerUserCount: 44,
+            avgAnswerCount: 49,
+            correctAnswerCount: 42,
+            accuracy: '85.7%',
+            children: [
+              { id: 'class2-3', subject: '高二1班', totalStudents: 50, onlineCount: 45, onlineRate: '90.0%', totalAnswerRate: '89.5%', completionRate: '88.5%', answerProgress: '85%', answerUserCount: 44, avgAnswerCount: 49, correctAnswerCount: 42, accuracy: '85.7%' }
+            ]
+          }
+        ]
+      },
+      {
+        id: 'school3',
+        subject: '实验中学',
+        totalStudents: 172,
+        onlineCount: 150,
+        onlineRate: '87.2%',
+        totalAnswerRate: '88.0%',
+        completionRate: '83.0%',
+        answerProgress: '75%',
+        answerUserCount: 145,
+        avgAnswerCount: 40,
+        correctAnswerCount: 33,
+        accuracy: '82.5%',
+        children: [
+          {
+            id: 'grade5',
+            subject: '2028届',
+            totalStudents: 113,
+            onlineCount: 98,
+            onlineRate: '86.7%',
+            totalAnswerRate: '88.0%',
+            completionRate: '83.0%',
+            answerProgress: '75%',
+            answerUserCount: 95,
+            avgAnswerCount: 40,
+            correctAnswerCount: 33,
+            accuracy: '82.5%',
+            children: [
+              { id: 'class3-1', subject: '初二1班', totalStudents: 55, onlineCount: 48, onlineRate: '87.3%', totalAnswerRate: '89.0%', completionRate: '84.0%', answerProgress: '76%', answerUserCount: 46, avgAnswerCount: 41, correctAnswerCount: 34, accuracy: '82.9%' },
+              { id: 'class3-2', subject: '初二2班', totalStudents: 58, onlineCount: 50, onlineRate: '86.2%', totalAnswerRate: '87.0%', completionRate: '82.0%', answerProgress: '74%', answerUserCount: 49, avgAnswerCount: 39, correctAnswerCount: 32, accuracy: '82.1%' }
+            ]
+          },
+          {
+            id: 'grade6',
+            subject: '2029届',
+            totalStudents: 59,
+            onlineCount: 52,
+            onlineRate: '88.1%',
+            totalAnswerRate: '88.0%',
+            completionRate: '83.0%',
+            answerProgress: '75%',
+            answerUserCount: 50,
+            avgAnswerCount: 40,
+            correctAnswerCount: 33,
+            accuracy: '82.5%',
+            children: [
+              { id: 'class3-3', subject: '初一1班', totalStudents: 59, onlineCount: 52, onlineRate: '88.1%', totalAnswerRate: '88.0%', completionRate: '83.0%', answerProgress: '75%', answerUserCount: 50, avgAnswerCount: 40, correctAnswerCount: 33, accuracy: '82.5%' }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  { 
+    id: 'cloud2',
+    subject: '河南云校', 
+    totalStudents: 332, 
+    onlineCount: 308, 
+    onlineRate: '92.8%', 
+    totalAnswerRate: '90.8%', 
+    completionRate: '88.7%', 
+    answerProgress: '85%', 
+    answerUserCount: 297, 
+    avgAnswerCount: 45, 
+    correctAnswerCount: 38, 
+    accuracy: '84.4%',
+    children: [
+      {
+        id: 'school4',
+        subject: '郑州一中',
+        totalStudents: 162,
+        onlineCount: 150,
+        onlineRate: '92.6%',
+        totalAnswerRate: '90.5%',
+        completionRate: '88.4%',
+        answerProgress: '82%',
+        answerUserCount: 145,
+        avgAnswerCount: 42,
+        correctAnswerCount: 35,
+        accuracy: '83.3%',
+        children: [
+          {
+            id: 'grade7',
+            subject: '2027届',
+            totalStudents: 108,
+            onlineCount: 100,
+            onlineRate: '92.6%',
+            totalAnswerRate: '90.5%',
+            completionRate: '88.4%',
+            answerProgress: '82%',
+            answerUserCount: 96,
+            avgAnswerCount: 42,
+            correctAnswerCount: 35,
+            accuracy: '83.3%',
+            children: [
+              { id: 'class4-1', subject: '高一1班', totalStudents: 54, onlineCount: 50, onlineRate: '92.6%', totalAnswerRate: '90.5%', completionRate: '88.4%', answerProgress: '82%', answerUserCount: 48, avgAnswerCount: 42, correctAnswerCount: 35, accuracy: '83.3%' },
+              { id: 'class4-2', subject: '高一2班', totalStudents: 54, onlineCount: 50, onlineRate: '92.6%', totalAnswerRate: '90.5%', completionRate: '88.4%', answerProgress: '82%', answerUserCount: 48, avgAnswerCount: 42, correctAnswerCount: 35, accuracy: '83.3%' }
+            ]
+          },
+          {
+            id: 'grade8',
+            subject: '2026届',
+            totalStudents: 54,
+            onlineCount: 50,
+            onlineRate: '92.6%',
+            totalAnswerRate: '90.5%',
+            completionRate: '88.4%',
+            answerProgress: '82%',
+            answerUserCount: 49,
+            avgAnswerCount: 42,
+            correctAnswerCount: 35,
+            accuracy: '83.3%',
+            children: [
+              { id: 'class4-3', subject: '高二1班', totalStudents: 54, onlineCount: 50, onlineRate: '92.6%', totalAnswerRate: '90.5%', completionRate: '88.4%', answerProgress: '82%', answerUserCount: 49, avgAnswerCount: 42, correctAnswerCount: 35, accuracy: '83.3%' }
+            ]
+          }
+        ]
+      },
+      {
+        id: 'school5',
+        subject: '洛阳一中',
+        totalStudents: 170,
+        onlineCount: 158,
+        onlineRate: '92.9%',
+        totalAnswerRate: '91.2%',
+        completionRate: '89.1%',
+        answerProgress: '88%',
+        answerUserCount: 152,
+        avgAnswerCount: 48,
+        correctAnswerCount: 40,
+        accuracy: '83.3%',
+        children: [
+          {
+            id: 'grade9',
+            subject: '2027届',
+            totalStudents: 113,
+            onlineCount: 105,
+            onlineRate: '92.9%',
+            totalAnswerRate: '91.2%',
+            completionRate: '89.1%',
+            answerProgress: '88%',
+            answerUserCount: 101,
+            avgAnswerCount: 48,
+            correctAnswerCount: 40,
+            accuracy: '83.3%',
+            children: [
+              { id: 'class5-1', subject: '高一1班', totalStudents: 56, onlineCount: 52, onlineRate: '92.9%', totalAnswerRate: '91.2%', completionRate: '89.1%', answerProgress: '88%', answerUserCount: 50, avgAnswerCount: 48, correctAnswerCount: 40, accuracy: '83.3%' },
+              { id: 'class5-2', subject: '高一2班', totalStudents: 57, onlineCount: 53, onlineRate: '93.0%', totalAnswerRate: '91.2%', completionRate: '89.1%', answerProgress: '88%', answerUserCount: 51, avgAnswerCount: 48, correctAnswerCount: 40, accuracy: '83.3%' }
+            ]
+          },
+          {
+            id: 'grade10',
+            subject: '2026届',
+            totalStudents: 57,
+            onlineCount: 53,
+            onlineRate: '93.0%',
+            totalAnswerRate: '91.2%',
+            completionRate: '89.1%',
+            answerProgress: '88%',
+            answerUserCount: 51,
+            avgAnswerCount: 48,
+            correctAnswerCount: 40,
+            accuracy: '83.3%',
+            children: [
+              { id: 'class5-3', subject: '高二1班', totalStudents: 57, onlineCount: 53, onlineRate: '93.0%', totalAnswerRate: '91.2%', completionRate: '89.1%', answerProgress: '88%', answerUserCount: 51, avgAnswerCount: 48, correctAnswerCount: 40, accuracy: '83.3%' }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  { 
+    id: 'cloud3',
+    subject: '湖北云校', 
+    totalStudents: 175, 
+    onlineCount: 160, 
+    onlineRate: '91.4%', 
+    totalAnswerRate: '87.8%', 
+    completionRate: '84.5%', 
+    answerProgress: '75%', 
+    answerUserCount: 150, 
+    avgAnswerCount: 40, 
+    correctAnswerCount: 32, 
+    accuracy: '80.0%',
+    children: [
+      {
+        id: 'school6',
+        subject: '武汉二中',
+        totalStudents: 175,
+        onlineCount: 160,
+        onlineRate: '91.4%',
+        totalAnswerRate: '87.8%',
+        completionRate: '84.5%',
+        answerProgress: '75%',
+        answerUserCount: 150,
+        avgAnswerCount: 40,
+        correctAnswerCount: 32,
+        accuracy: '80.0%',
+        children: [
+          {
+            id: 'grade11',
+            subject: '2027届',
+            totalStudents: 116,
+            onlineCount: 106,
+            onlineRate: '91.4%',
+            totalAnswerRate: '87.8%',
+            completionRate: '84.5%',
+            answerProgress: '75%',
+            answerUserCount: 100,
+            avgAnswerCount: 40,
+            correctAnswerCount: 32,
+            accuracy: '80.0%',
+            children: [
+              { id: 'class6-1', subject: '高一1班', totalStudents: 58, onlineCount: 53, onlineRate: '91.4%', totalAnswerRate: '87.8%', completionRate: '84.5%', answerProgress: '75%', answerUserCount: 50, avgAnswerCount: 40, correctAnswerCount: 32, accuracy: '80.0%' },
+              { id: 'class6-2', subject: '高一2班', totalStudents: 58, onlineCount: 53, onlineRate: '91.4%', totalAnswerRate: '87.8%', completionRate: '84.5%', answerProgress: '75%', answerUserCount: 50, avgAnswerCount: 40, correctAnswerCount: 32, accuracy: '80.0%' }
+            ]
+          },
+          {
+            id: 'grade12',
+            subject: '2026届',
+            totalStudents: 59,
+            onlineCount: 54,
+            onlineRate: '91.5%',
+            totalAnswerRate: '87.8%',
+            completionRate: '84.5%',
+            answerProgress: '75%',
+            answerUserCount: 50,
+            avgAnswerCount: 40,
+            correctAnswerCount: 32,
+            accuracy: '80.0%',
+            children: [
+              { id: 'class6-3', subject: '高二1班', totalStudents: 59, onlineCount: 54, onlineRate: '91.5%', totalAnswerRate: '87.8%', completionRate: '84.5%', answerProgress: '75%', answerUserCount: 50, avgAnswerCount: 40, correctAnswerCount: 32, accuracy: '80.0%' }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+])
+
+const overviewColumns = [
+  { colKey: 'subject', title: '组织架构', width: 300, minWidth: 300, align: 'left', fixed: 'left' },
+  { colKey: 'totalStudents', title: '总人数', minWidth: 90, align: 'center' },
+  { colKey: 'onlineCount', title: '在线人数', minWidth: 100, align: 'center' },
+  {
+    colKey: 'onlineRate', title: '在线率', minWidth: 100, align: 'center',
+    cell: (h, { row }) => h('span', { style: { color: '#0052d9', fontWeight: 600, background: '#f0f5ff', padding: '4px 10px', borderRadius: '12px' } }, row.onlineRate)
+  },
+  { colKey: 'totalAnswerRate', title: '总答题率', minWidth: 110, align: 'center' },
+  { colKey: 'answerProgress', title: '答题进度', minWidth: 100, align: 'center' },
+  { colKey: 'answerUserCount', title: '答题用户数', minWidth: 110, align: 'center' },
+  { colKey: 'avgAnswerCount', title: '人均答题数', minWidth: 110, align: 'center' },
+  { colKey: 'correctAnswerCount', title: '正确答题数', minWidth: 110, align: 'center' },
+  {
+    colKey: 'accuracy', title: '正确率', minWidth: 100, align: 'center',
+    cell: (h, { row }) => h('span', { style: { color: '#00a870', fontWeight: 600, background: '#f0fdf4', padding: '4px 10px', borderRadius: '12px' } }, row.accuracy)
+  },
+]
+
+// ── 答题正确率排名 ─────────────────────────────────────────
+const accuracyRankData = ref([
+  { rank: 1,  name: '张晓雯', cloud: '广东云校', school: '第一中学', grade: '高二', class: '高二1班', totalCount: 200, correctCount: 195, accuracy: '97.5%' },
+  { rank: 2,  name: '李明浩', cloud: '广东云校', school: '第一中学', grade: '高一', class: '高一2班', totalCount: 200, correctCount: 192, accuracy: '96.0%' },
+  { rank: 3,  name: '王思琪', cloud: '广东云校', school: '第一中学', grade: '高二', class: '高二2班', totalCount: 200, correctCount: 191, accuracy: '95.5%' },
+  { rank: 4,  name: '陈子涵', cloud: '广东云校', school: '第一中学', grade: '高一', class: '高一1班', totalCount: 200, correctCount: 188, accuracy: '94.0%' },
+  { rank: 5,  name: '刘雨桐', cloud: '广东云校', school: '第一中学', grade: '高二', class: '高二1班', totalCount: 200, correctCount: 187, accuracy: '93.5%' },
+  { rank: 6,  name: '赵佳怡', cloud: '广东云校', school: '第一中学', grade: '高一', class: '高一2班', totalCount: 200, correctCount: 184, accuracy: '92.0%' },
+  { rank: 7,  name: '孙浩然', cloud: '广东云校', school: '第一中学', grade: '高二', class: '高二2班', totalCount: 200, correctCount: 183, accuracy: '91.5%' },
+  { rank: 8,  name: '周梦琳', cloud: '广东云校', school: '第一中学', grade: '高一', class: '高一1班', totalCount: 200, correctCount: 181, accuracy: '90.5%' },
+  { rank: 9,  name: '吴天宇', cloud: '广东云校', school: '第一中学', grade: '高二', class: '高二1班', totalCount: 200, correctCount: 179, accuracy: '89.5%' },
+  { rank: 10, name: '郑欣怡', cloud: '广东云校', school: '第一中学', grade: '高一', class: '高一2班', totalCount: 200, correctCount: 176, accuracy: '88.0%' },
+])
+
+const medalColors = ['#f5a623', '#94a3b8', '#cd7f32']
+
+const accuracyRankColumns = [
+  {
+    colKey: 'rank', title: '排名', width: 70, align: 'center',
+    cell: (h, { row }) => {
+      if (row.rank <= 3) {
+        return h('span', {
+          style: {
+            background: `linear-gradient(135deg, ${medalColors[row.rank - 1]} 0%, ${medalColors[row.rank - 1]}dd 100%)`,
+            color: '#fff', borderRadius: '50%',
+            width: '30px', height: '30px', display: 'inline-flex',
+            alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: '14px',
+            boxShadow: `0 4px 8px ${medalColors[row.rank - 1]}40`
+          }
+        }, String(row.rank))
+      }
+      return h('span', { style: { color: '#64748b', fontWeight: 700, fontSize: '15px' } }, String(row.rank))
+    }
+  },
+  { colKey: 'name', title: '学生姓名', minWidth: 110 },
+  { colKey: 'cloud', title: '云校', minWidth: 130 },
+  { colKey: 'school', title: '学校', minWidth: 130 },
+  { colKey: 'grade', title: '年级', minWidth: 90 },
+  { colKey: 'class', title: '班级', minWidth: 110 },
+  { colKey: 'totalCount', title: '总答题数', minWidth: 100, align: 'center' },
+  { colKey: 'correctCount', title: '正确答题数', minWidth: 100, align: 'center' },
+  {
+    colKey: 'accuracy', title: '正确率', minWidth: 110, align: 'center',
+    cell: (h, { row }) => h('span', { style: { color: '#0052d9', fontWeight: 700, fontSize: '15px', background: '#f0f5ff', padding: '4px 10px', borderRadius: '12px' } }, row.accuracy)
+  },
+]
+
+// ── 答题进度分布 ───────────────────────────────────────────
+const progressDistData = ref([
+  { progressRange: '90%~100%', studentCount: 270, percentage: '45.7%' },
+  { progressRange: '80%~89%',  studentCount: 145, percentage: '24.6%' },
+  { progressRange: '70%~79%',  studentCount: 80,  percentage: '13.5%' },
+  { progressRange: '60%~69%',  studentCount: 45,  percentage: '7.6%' },
+  { progressRange: '50%~59%',  studentCount: 25,  percentage: '4.2%' },
+  { progressRange: '40%~49%',  studentCount: 13,  percentage: '2.2%' },
+  { progressRange: '30%~39%',  studentCount: 7,   percentage: '1.2%' },
+  { progressRange: '20%~29%',  studentCount: 3,   percentage: '0.5%' },
+  { progressRange: '10%~19%',  studentCount: 2,   percentage: '0.3%' },
+  { progressRange: '0%~9%',    studentCount: 0,   percentage: '0.0%' },
+])
+
+const progressColor = (range) => {
+  const value = parseInt(range)
+  if (value >= 90) return '#00a870'
+  if (value >= 80) return '#0052d9'
+  if (value >= 60) return '#ed7b2f'
+  if (value >= 40) return '#f5a623'
+  return '#e34d59'
+}
+
+const progressDistColumns = [
+  {
+    colKey: 'progressRange', title: '进度区间', minWidth: 160,
+    cell: (h, { row }) => h('span', { style: { color: progressColor(row.progressRange), fontWeight: 600 } }, row.progressRange)
+  },
+  { colKey: 'studentCount', title: '学生人数', minWidth: 100, align: 'center' },
+  {
+    colKey: 'percentage', title: '占比', minWidth: 160,
+    cell: (h, { row }) => h('div', { style: { display: 'flex', alignItems: 'center', gap: '12px', padding: '0 8px' } }, [
+      h('div', { style: { flex: 1, height: '8px', background: '#f1f5f9', borderRadius: '4px', overflow: 'hidden' } }, [
+        h('div', { style: { width: row.percentage, height: '100%', background: progressColor(row.progressRange), borderRadius: '4px', transition: 'width 0.5s ease' } })
+      ]),
+      h('span', { style: { minWidth: '48px', fontWeight: 600, color: '#475569', fontSize: '14px' } }, row.percentage)
+    ])
+  }
+]
+
+const progressChartRef = ref(null)
+let progressChart = null
+
+const initProgressChart = () => {
+  if (!progressChartRef.value) return
+  
+  if (progressChart) {
+    progressChart.dispose()
+  }
+  
+  progressChart = echarts.init(progressChartRef.value)
+  
+  // 翻转数据以使其在图表上从0到100显示，或者保持从高到低视需求而定
+  // 这里我们让X轴从0%到100%排列
+  const chartData = [...progressDistData.value].reverse()
+  
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      formatter: '{b}<br/>学生人数: {c}人',
+      backgroundColor: 'rgba(255, 255, 255, 0.95)',
+      borderColor: '#e2e8f0',
+      textStyle: { color: '#1e293b' },
+      extraCssText: 'box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); border-radius: 8px;'
+    },
+    grid: {
+      top: '10%',
+      left: '3%',
+      right: '4%',
+      bottom: '10%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: chartData.map(item => item.progressRange),
+      axisLabel: {
+        interval: 0,
+        rotate: 45,
+        color: '#64748b',
+        fontSize: 12
+      },
+      axisLine: { lineStyle: { color: '#e2e8f0' } }
+    },
+    yAxis: {
+      type: 'value',
+      name: '人数',
+      nameTextStyle: { color: '#64748b', padding: [0, 0, 0, 20] },
+      splitLine: { lineStyle: { type: 'dashed', color: '#f1f5f9' } },
+      axisLabel: { color: '#64748b' }
+    },
+    series: [
+      {
+        name: '学生人数',
+        type: 'bar',
+        barWidth: '60%',
+        data: chartData.map(item => ({
+          value: item.studentCount,
+          itemStyle: {
+            color: progressColor(item.progressRange),
+            borderRadius: [4, 4, 0, 0]
+          }
+        })),
+        label: {
+          show: true,
+          position: 'top',
+          color: '#475569',
+          fontSize: 12,
+          formatter: (params) => params.value > 0 ? params.value : ''
+        }
+      }
+    ]
+  }
+  
+  progressChart.setOption(option)
+}
+
+// 监听 Tab 切换，重新渲染图表
+// watch(activeTab, (newVal) => {
+//   currentPage.value = 1
+//   if (newVal === 'progress_dist') {
+//     nextTick(() => {
+//       initProgressChart()
+//     })
+//   }
+// })
+
+// 窗口大小变化时重绘图表
+const handleResize = () => {
+  if (progressChart) {
+    progressChart.resize()
+  }
+  if (accuracyChart) {
+    accuracyChart.resize()
+  }
+  if (onlineTrendChart) {
+    onlineTrendChart.resize()
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+  if (activeTab.value === 'progress_dist') {
+    nextTick(() => {
+      initProgressChart()
+    })
+  } else if (activeTab.value === 'accuracy_dist') {
+    nextTick(() => {
+      initAccuracyChart()
+    })
+  } else if (activeTab.value === 'online_stats') {
+    nextTick(() => {
+      initOnlineTrendChart()
+    })
+  }
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+  if (progressChart) {
+    progressChart.dispose()
+  }
+  if (accuracyChart) {
+    accuracyChart.dispose()
+  }
+  if (onlineTrendChart) {
+    onlineTrendChart.dispose()
+  }
+})
+
+// ── 正确率分布 ─────────────────────────────────────────────
+const accuracyDistData = ref([
+  { accuracyRange: '90%~100%', studentCount: 198, percentage: '33.6%' },
+  { accuracyRange: '80%~89%',  studentCount: 215, percentage: '36.4%' },
+  { accuracyRange: '70%~79%',  studentCount: 112, percentage: '19.0%' },
+  { accuracyRange: '60%~69%',  studentCount: 45,  percentage: '7.6%' },
+  { accuracyRange: '50%~59%',  studentCount: 12,  percentage: '2.0%' },
+  { accuracyRange: '40%~49%',  studentCount: 5,   percentage: '0.8%' },
+  { accuracyRange: '30%~39%',  studentCount: 2,   percentage: '0.3%' },
+  { accuracyRange: '20%~29%',  studentCount: 1,   percentage: '0.2%' },
+  { accuracyRange: '10%~19%',  studentCount: 0,   percentage: '0.0%' },
+  { accuracyRange: '0%~9%',    studentCount: 0,   percentage: '0.0%' },
+])
+
+const levelColor = (range) => {
+  const value = parseInt(range)
+  if (value >= 90) return '#00a870'
+  if (value >= 80) return '#0052d9'
+  if (value >= 60) return '#ed7b2f'
+  if (value >= 40) return '#f5a623'
+  return '#e34d59'
+}
+
+const accuracyDistColumns = [
+  {
+    colKey: 'accuracyRange', title: '正确率区间', minWidth: 160,
+    cell: (h, { row }) => h('span', { style: { color: levelColor(row.accuracyRange), fontWeight: 600 } }, row.accuracyRange)
+  },
+  { colKey: 'studentCount', title: '学生人数', minWidth: 100, align: 'center' },
+  {
+    colKey: 'percentage', title: '占比', minWidth: 160,
+    cell: (h, { row }) => h('div', { style: { display: 'flex', alignItems: 'center', gap: '12px', padding: '0 8px' } }, [
+      h('div', { style: { flex: 1, height: '8px', background: '#f1f5f9', borderRadius: '4px', overflow: 'hidden' } }, [
+        h('div', { style: { width: row.percentage, height: '100%', background: levelColor(row.accuracyRange), borderRadius: '4px', transition: 'width 0.5s ease' } })
+      ]),
+      h('span', { style: { minWidth: '48px', fontWeight: 600, color: '#475569', fontSize: '14px' } }, row.percentage)
+    ])
+  }
+]
+
+const accuracyChartRef = ref(null)
+let accuracyChart = null
+
+const initAccuracyChart = () => {
+  if (!accuracyChartRef.value) return
+  
+  if (accuracyChart) {
+    accuracyChart.dispose()
+  }
+  
+  accuracyChart = echarts.init(accuracyChartRef.value)
+  
+  const chartData = [...accuracyDistData.value].reverse()
+  
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      formatter: '{b}<br/>学生人数: {c}人',
+      backgroundColor: 'rgba(255, 255, 255, 0.95)',
+      borderColor: '#e2e8f0',
+      textStyle: { color: '#1e293b' },
+      extraCssText: 'box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); border-radius: 8px;'
+    },
+    grid: {
+      top: '10%',
+      left: '3%',
+      right: '4%',
+      bottom: '10%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: chartData.map(item => item.accuracyRange),
+      axisLabel: {
+        interval: 0,
+        rotate: 45,
+        color: '#64748b',
+        fontSize: 12
+      },
+      axisLine: { lineStyle: { color: '#e2e8f0' } }
+    },
+    yAxis: {
+      type: 'value',
+      name: '人数',
+      nameTextStyle: { color: '#64748b', padding: [0, 0, 0, 20] },
+      splitLine: { lineStyle: { type: 'dashed', color: '#f1f5f9' } },
+      axisLabel: { color: '#64748b' }
+    },
+    series: [
+      {
+        name: '学生人数',
+        type: 'bar',
+        barWidth: '40%',
+        data: chartData.map(item => ({
+          value: item.studentCount,
+          itemStyle: {
+            color: levelColor(item.accuracyRange),
+            borderRadius: [4, 4, 0, 0]
+          }
+        })),
+        label: {
+          show: true,
+          position: 'top',
+          color: '#475569',
+          fontSize: 12,
+          formatter: (params) => params.value > 0 ? params.value : ''
+        }
+      }
+    ]
+  }
+  
+  accuracyChart.setOption(option)
+}
+
+// ── 学生在线统计 ───────────────────────────────────────────
+const onlineTimeDimension = ref('hour')
+const onlineTrendChartRef = ref(null)
+let onlineTrendChart = null
+
+const onlineSingleDate = ref(dayjs().format('YYYY-MM-DD'))
+const onlineDateRange = ref([
+  dayjs().subtract(30, 'day').format('YYYY-MM-DD'),
+  dayjs().format('YYYY-MM-DD')
+])
+const showOnlineDateWarning = ref(false)
+
+const handleOnlineDateChange = () => {
+  initOnlineTrendChart()
+}
+
+const handleOnlineDateRangeChange = (value) => {
+  if (value && value.length === 2) {
+    const start = dayjs(value[0])
+    const end = dayjs(value[1])
+    const diff = end.diff(start, 'day')
+    if (diff > 30) {
+      showOnlineDateWarning.value = true
+      MessagePlugin.warning('查询日期范围不能超过30天，已自动截断')
+      onlineDateRange.value = [
+        end.subtract(30, 'day').format('YYYY-MM-DD'),
+        value[1]
+      ]
+      setTimeout(() => {
+        showOnlineDateWarning.value = false
+      }, 5000)
+    } else {
+      showOnlineDateWarning.value = false
+    }
+  } else {
+    showOnlineDateWarning.value = false
+  }
+  initOnlineTrendChart()
+}
+
+// 模拟趋势数据
+const generateTrendData = (dimension) => {
+  const data = {
+    time: [],
+    onlineCount: [],
+    answerCount: []
+  }
+  
+  let count = 0
+  
+  if (dimension === 'minute') {
+    let isTodayOrFuture = false
+    let endOfData = dayjs().endOf('day')
+    let startOfDay = dayjs().startOf('day')
+    
+    if (onlineSingleDate.value) {
+      const selectedDate = dayjs(onlineSingleDate.value)
+      if (selectedDate.isSame(dayjs(), 'day') || selectedDate.isAfter(dayjs())) {
+        isTodayOrFuture = true
+      } else {
+        endOfData = selectedDate.endOf('day')
+        startOfDay = selectedDate.startOf('day')
+      }
+    } else {
+      isTodayOrFuture = true
+    }
+
+    let endTime
+    if (isTodayOrFuture) {
+      // 截止至当前时间的前一个小时
+      endTime = dayjs().subtract(1, 'hour')
+      // 处理跨天边界情况：如果当前时间不足1小时，前一个小时会跨天，此时截断在今天的00:00
+      if (endTime.isBefore(startOfDay)) {
+        endTime = startOfDay
+      }
+    } else {
+      endTime = endOfData
+    }
+
+    // 向下取整到最近的10分钟
+    const roundedEnd = endTime.minute(Math.floor(endTime.minute() / 10) * 10).second(0)
+    
+    // 动态计算点数，起点从0时开始
+    const diffMinutes = roundedEnd.diff(startOfDay, 'minute')
+    count = Math.floor(diffMinutes / 10) + 1
+    if (count < 0) count = 0
+
+    for (let i = count - 1; i >= 0; i--) {
+      data.time.push(roundedEnd.subtract(i * 10, 'minute').format('HH:mm'))
+      data.onlineCount.push(Math.floor(Math.random() * 80) + 300)
+      data.answerCount.push(Math.floor(Math.random() * 400) + 1000)
+    }
+  } else if (dimension === 'hour') {
+    let isTodayOrFuture = false
+    let endOfData = dayjs().endOf('day')
+    let startOfDay = dayjs().startOf('day')
+    
+    if (onlineSingleDate.value) {
+      const selectedDate = dayjs(onlineSingleDate.value)
+      if (selectedDate.isSame(dayjs(), 'day') || selectedDate.isAfter(dayjs())) {
+        isTodayOrFuture = true
+      } else {
+        endOfData = selectedDate.endOf('day')
+        startOfDay = selectedDate.startOf('day')
+      }
+    } else {
+      isTodayOrFuture = true
+    }
+
+    let endTime
+    if (isTodayOrFuture) {
+      // 截止至当前时间的前一个小时
+      endTime = dayjs().subtract(1, 'hour')
+      // 处理跨天边界情况
+      if (endTime.isBefore(startOfDay)) {
+        endTime = startOfDay
+      }
+    } else {
+      endTime = endOfData
+    }
+
+    // 向下取整到小时
+    const roundedEnd = endTime.minute(0).second(0)
+    
+    // 动态计算点数，起点从0时开始
+    const diffHours = roundedEnd.diff(startOfDay, 'hour')
+    count = diffHours + 1
+    if (count < 0) count = 0
+
+    for (let i = count - 1; i >= 0; i--) {
+      data.time.push(roundedEnd.subtract(i, 'hour').format('HH:00'))
+      data.onlineCount.push(Math.floor(Math.random() * 200) + 200)
+      data.answerCount.push(Math.floor(Math.random() * 1000) + 500)
+    }
+  } else if (dimension === 'day') {
+    let startDate = dayjs().subtract(30, 'day')
+    let endDate = dayjs()
+    if (onlineDateRange.value && onlineDateRange.value.length === 2) {
+      startDate = dayjs(onlineDateRange.value[0])
+      endDate = dayjs(onlineDateRange.value[1])
+    }
+    count = endDate.diff(startDate, 'day')
+    for (let i = count; i >= 0; i--) {
+      data.time.push(endDate.subtract(i, 'day').format('MM-DD'))
+      data.onlineCount.push(Math.floor(Math.random() * 100) + 400)
+      data.answerCount.push(Math.floor(Math.random() * 5000) + 2000)
+    }
+  }
+  
+  return data
+}
+
+const initOnlineTrendChart = () => {
+  if (!onlineTrendChartRef.value) return
+  
+  if (onlineTrendChart) {
+    onlineTrendChart.dispose()
+  }
+  
+  onlineTrendChart = echarts.init(onlineTrendChartRef.value)
+  const trendData = generateTrendData(onlineTimeDimension.value)
+  
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'cross' },
+      backgroundColor: 'rgba(255, 255, 255, 0.95)',
+      borderColor: '#e2e8f0',
+      textStyle: { color: '#1e293b' },
+      extraCssText: 'box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); border-radius: 8px;'
+    },
+    legend: {
+      data: ['在线用户数', '答题数量'],
+      top: 0,
+      textStyle: { color: '#475569' }
+    },
+    grid: {
+      top: '15%',
+      left: '3%',
+      right: '4%',
+      bottom: '10%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: trendData.time,
+      axisLabel: {
+        color: '#64748b',
+        fontSize: 12,
+        interval: onlineTimeDimension.value === 'minute' ? 5 : 0, // 10分钟维度下每隔5个点(即1小时)显示一个标签
+        rotate: onlineTimeDimension.value === 'day' ? 45 : 0 // 按天显示时倾斜标签以防重叠
+      },
+      axisLine: { lineStyle: { color: '#e2e8f0' } }
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: '在线用户数',
+        position: 'left',
+        splitLine: { lineStyle: { type: 'dashed', color: '#f1f5f9' } },
+        axisLabel: { color: '#64748b' },
+        nameTextStyle: { color: '#64748b', padding: [0, 0, 0, 20] }
+      },
+      {
+        type: 'value',
+        name: '答题数量',
+        position: 'right',
+        splitLine: { show: false },
+        axisLabel: { color: '#64748b' },
+        nameTextStyle: { color: '#64748b', padding: [0, 20, 0, 0] }
+      }
+    ],
+    series: [
+      {
+        name: '在线用户数',
+        type: 'line',
+        smooth: true,
+        yAxisIndex: 0,
+        itemStyle: { color: '#0052d9' },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(0, 82, 217, 0.3)' },
+            { offset: 1, color: 'rgba(0, 82, 217, 0.05)' }
+          ])
+        },
+        data: trendData.onlineCount
+      },
+      {
+        name: '答题数量',
+        type: 'line',
+        smooth: true,
+        yAxisIndex: 1,
+        itemStyle: { color: '#00a870' },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(0, 168, 112, 0.3)' },
+            { offset: 1, color: 'rgba(0, 168, 112, 0.05)' }
+          ])
+        },
+        data: trendData.answerCount
+      }
+    ]
+  }
+  
+  onlineTrendChart.setOption(option)
+}
+
+const handleTimeDimensionChange = () => {
+  initOnlineTrendChart()
+}
+
+// ── 导出逻辑 ───────────────────────────────────────────────
+import * as XLSX from 'xlsx'
+
+const exportDialogVisible = ref(false)
+const exportType = ref('')
+
+const exportFilters = ref({
+  cloud: '',
+  school: '',
+  grade: '',
+  class: '',
+  dateRange: [],
+  singleDate: ''
+})
+
+// 导出弹窗级联重置：切换学校时清空年级和班级
+watch(() => exportFilters.value.school, () => {
+  exportFilters.value.grade = ''
+  exportFilters.value.class = ''
+})
+
+// 导出弹窗级联重置：切换年级时清空班级
+watch(() => exportFilters.value.grade, () => {
+  exportFilters.value.class = ''
+})
+
+const handleExport = (type) => {
+  exportType.value = type
+  // 初始化导出筛选条件为当前页面筛选条件
+  let currentRange = []
+  if (type === 'overview') {
+    currentRange = [...dateRange.value]
+  } else if (type === 'online_stats' && onlineTimeDimension.value === 'day') {
+    currentRange = [...onlineDateRange.value]
+  }
+  exportFilters.value = {
+    cloud: selectedCloud.value,
+    school: selectedSchool.value,
+    grade: selectedGrade.value,
+    class: selectedClass.value,
+    dateRange: currentRange,
+    singleDate: type === 'online_stats' && (onlineTimeDimension.value === 'minute' || onlineTimeDimension.value === 'hour') ? onlineSingleDate.value : ''
+  }
+  exportDialogVisible.value = true
+}
+
+const confirmExport = () => {
+  exportDialogVisible.value = false
+  
+  let dataToExport = []
+  let columns = []
+  let fileName = ''
+
+  // 在实际应用中，这里应该根据 exportFilters 的值重新请求数据
+  // 由于当前是静态数据展示，我们直接使用现有的数据作为导出数据
+
+  switch (exportType.value) {
+    case 'overview':
+      dataToExport = overviewData.value
+      columns = overviewColumns
+      fileName = '总体学情统计分析表'
+      break
+    case 'accuracy_rank':
+      dataToExport = accuracyRankData.value
+      columns = accuracyRankColumns
+      fileName = '学生答题正确率排名表'
+      break
+    case 'progress_dist':
+      dataToExport = progressDistData.value
+      columns = progressDistColumns
+      fileName = '学生答题进度分布表'
+      break
+    case 'accuracy_dist':
+      dataToExport = accuracyDistData.value
+      columns = accuracyDistColumns
+      fileName = '学生答题正确率分布表'
+      break
+    case 'online_stats':
+      // 模拟根据导出对话框中的筛选条件生成数据
+      // 实际应用中应该传递 exportFilters 重新请求数据
+      // 这里为了保持演示，临时修改一下组件内的状态来生成对应数据，生成后再恢复
+      const originalOnlineSingleDate = onlineSingleDate.value
+      const originalOnlineDateRange = onlineDateRange.value
+      
+      if (onlineTimeDimension.value === 'minute' || onlineTimeDimension.value === 'hour') {
+        onlineSingleDate.value = exportFilters.value.singleDate
+      } else {
+        onlineDateRange.value = exportFilters.value.dateRange
+      }
+      
+      const trendData = generateTrendData(onlineTimeDimension.value)
+      
+      // 恢复原始状态
+      onlineSingleDate.value = originalOnlineSingleDate
+      onlineDateRange.value = originalOnlineDateRange
+      
+      dataToExport = trendData.time.map((t, index) => ({
+        time: t,
+        onlineCount: trendData.onlineCount[index],
+        answerCount: trendData.answerCount[index]
+      }))
+      columns = [
+        { colKey: 'time', title: '时间' },
+        { colKey: 'onlineCount', title: '在线用户数' },
+        { colKey: 'answerCount', title: '答题数量' }
+      ]
+      fileName = '学生在线与答题趋势'
+      break
+  }
+
+  // 提取表头
+  const headers = columns.map(col => col.title)
+  // 提取数据
+  const rows = dataToExport.map(row => {
+    return columns.map(col => {
+      return row[col.colKey]
+    })
+  })
+
+  // 组装工作表数据
+  const worksheetData = [headers, ...rows]
+  const worksheet = XLSX.utils.aoa_to_sheet(worksheetData)
+  const workbook = XLSX.utils.book_new()
+  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
+
+  // 获取筛选条件的标签用于生成文件名
+  const expCloudLabel = cloudList.find(item => item.value === exportFilters.value.cloud)?.label || ''
+  const expSchoolLabel = schoolList.find(item => item.value === exportFilters.value.school)?.label || ''
+  const expGradeLabel = gradeList.find(item => item.value === exportFilters.value.grade)?.label || ''
+  const expClassLabel = classList.find(item => item.value === exportFilters.value.class)?.label || ''
+
+  // 构造文件名，包含筛选条件
+  const filterStr = [expCloudLabel, expSchoolLabel, expGradeLabel, expClassLabel].filter(Boolean).join('_')
+  const finalFileName = `${fileName}${filterStr ? '_' + filterStr : ''}.xlsx`
+
+  XLSX.writeFile(workbook, finalFileName)
+  MessagePlugin.success('导出成功')
+}
+
+// 级联重置：切换学校时清空年级和班级
+watch(selectedSchool, () => {
+  selectedGrade.value = ''
+  selectedClass.value = ''
+})
+
+// 级联重置：切换年级时清空班级
+watch(selectedGrade, () => {
+  selectedClass.value = ''
+})
+
+// ── 分页逻辑 ───────────────────────────────────────────────
+const pagination = computed(() => {
+  let total = 0
+  switch (activeTab.value) {
+    case 'overview':
+      total = overviewData.value.length
+      break
+    case 'accuracy_rank':
+      total = accuracyRankData.value.length
+      break
+    case 'progress_dist':
+      total = progressDistData.value.length
+      break
+    case 'accuracy_dist':
+      total = accuracyDistData.value.length
+      break
+  }
+  return {
+    current: currentPage.value,
+    pageSize: pageSize.value,
+    total: total,
+    showJumper: true,
+  }
+})
+
+const currentPage = ref(1)
+const pageSize = ref(10)
+
+const onPageChange = (pageInfo) => {
+  currentPage.value = pageInfo.current
+  pageSize.value = pageInfo.pageSize
+}
+
+// 班级详情模态框相关
+const classDetailVisible = ref(false)
+const selectedClassData = ref(null)
+const classStudentsData = ref([])
+const exportingStudents = ref(false)
+
+// 判断行是否包含"班"字符（班级行）
+const isClassRow = (row) => {
+  return row && row.subject && row.subject.includes('班')
+}
+
+// 获取行类名
+const getRowClassName = ({ row }) => {
+  return isClassRow(row) ? 'class-row-clickable' : ''
+}
+
+// 处理行点击事件
+const handleRowClick = ({ row }) => {
+  if (isClassRow(row)) {
+    selectedClassData.value = row
+    // 生成该班级的学生数据
+    classStudentsData.value = generateClassStudentsData(row)
+    classDetailVisible.value = true
+  }
+}
+
+// 生成班级学生数据 - 按照新列顺序生成数据：姓名、在线天数、在线率、总答题数、完成率、答题进度、正确答题数、正确率
+const generateClassStudentsData = (classRow) => {
+  const studentNames = [
+    '张小明', '李小红', '王小华', '刘小强', '陈小丽',
+    '杨小军', '黄小芳', '周小杰', '吴小敏', '郑小波',
+    '马小龙', '林小燕', '何小峰', '郭小娟', '罗小辉',
+    '梁小静', '宋小刚', '谢小萍', '韩小磊', '唐小艳'
+  ]
+
+  return studentNames.map((name, index) => {
+    const totalAnswerCount = Math.floor(Math.random() * 50) + 100
+    const accuracy = Math.random() * 15 + 80
+    const correctAnswerCount = Math.floor(totalAnswerCount * (accuracy / 100))
+
+    return {
+      id: `student_${classRow.id}_${index}`,
+      name: name,
+      onlineDays: Math.floor(Math.random() * 10) + 20,
+      onlineRate: `${(Math.random() * 15 + 80).toFixed(1)}%`,
+      totalAnswerCount: totalAnswerCount,
+      completionRate: `${(Math.random() * 20 + 75).toFixed(1)}%`,
+      answerProgress: `${Math.floor(Math.random() * 30 + 70)}%`,
+      correctAnswerCount: correctAnswerCount,
+      accuracy: `${accuracy.toFixed(1)}%`
+    }
+  })
+}
+
+// 关闭班级详情模态框
+const closeClassDetail = () => {
+  classDetailVisible.value = false
+  selectedClassData.value = null
+  classStudentsData.value = []
+}
+
+// 导出学生数据为CSV
+const exportStudentsData = async () => {
+  if (classStudentsData.value.length === 0) {
+    MessagePlugin.warning('暂无数据可导出')
+    return
+  }
+
+  exportingStudents.value = true
+
+  try {
+    // 模拟导出延迟
+    await new Promise(resolve => setTimeout(resolve, 800))
+
+    // 定义CSV表头（与表格列顺序一致）
+    const headers = ['姓名', '在线天数', '在线率', '总答题数', '完成率', '答题进度', '正确答题数', '正确率']
+
+    // 转换数据为CSV格式
+    const csvContent = [
+      headers.join(','),
+      ...classStudentsData.value.map(student => [
+        student.name,
+        student.onlineDays,
+        student.onlineRate,
+        student.totalAnswerCount,
+        student.completionRate,
+        student.answerProgress,
+        student.correctAnswerCount,
+        student.accuracy
+      ].join(','))
+    ].join('\n')
+
+    // 创建并下载CSV文件
+    const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' })
+    const link = document.createElement('a')
+    const url = URL.createObjectURL(blob)
+    link.href = url
+    link.download = `${selectedClassData.value?.subject || '班级'}_学生数据_${dayjs().format('YYYY-MM-DD_HH-mm-ss')}.csv`
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    URL.revokeObjectURL(url)
+
+    MessagePlugin.success('数据导出成功')
+  } catch (error) {
+    console.error('导出失败:', error)
+    MessagePlugin.error('数据导出失败，请重试')
+  } finally {
+    exportingStudents.value = false
+  }
+}
+
+// 学生数据表格列定义 - 按照指定顺序：姓名、在线天数、在线率、总答题数、完成率、答题进度、正确答题数、正确率
+const studentColumns = [
+  {
+    colKey: 'name',
+    title: '姓名',
+    width: 100,
+    align: 'center',
+    fixed: 'left'
+  },
+  {
+    colKey: 'onlineDays',
+    title: '在线天数',
+    width: 90,
+    align: 'center'
+  },
+  {
+    colKey: 'onlineRate',
+    title: '在线率',
+    width: 90,
+    align: 'center',
+    cell: (h, { row }) => h('span', {
+      style: {
+        color: '#0052d9',
+        fontWeight: 600,
+        background: '#f0f5ff',
+        padding: '2px 8px',
+        borderRadius: '10px',
+        fontSize: '13px'
+      }
+    }, row.onlineRate)
+  },
+  {
+    colKey: 'totalAnswerCount',
+    title: '总答题数',
+    width: 95,
+    align: 'center'
+  },
+  {
+    colKey: 'completionRate',
+    title: '完成率',
+    width: 90,
+    align: 'center',
+    cell: (h, { row }) => h('span', {
+      style: {
+        color: parseFloat(row.completionRate) >= 80 ? '#00a870' : parseFloat(row.completionRate) >= 60 ? '#0052d9' : '#ed7b2f',
+        fontWeight: 600
+      }
+    }, row.completionRate)
+  },
+  {
+    colKey: 'answerProgress',
+    title: '答题进度',
+    width: 90,
+    align: 'center',
+    cell: (h, { row }) => h('span', {
+      style: {
+        color: '#333',
+        fontWeight: 500
+      }
+    }, row.answerProgress)
+  },
+  {
+    colKey: 'correctAnswerCount',
+    title: '正确答题数',
+    width: 100,
+    align: 'center'
+  },
+  {
+    colKey: 'accuracy',
+    title: '正确率',
+    width: 90,
+    align: 'center',
+    cell: (h, { row }) => h('span', {
+      style: {
+        color: parseFloat(row.accuracy) >= 85 ? '#00a870' : parseFloat(row.accuracy) >= 60 ? '#0052d9' : '#e34d59',
+        fontWeight: 600,
+        background: parseFloat(row.accuracy) >= 85 ? '#f0fdf4' : parseFloat(row.accuracy) >= 60 ? '#f0f5ff' : '#fff2f0',
+        padding: '2px 8px',
+        borderRadius: '10px',
+        fontSize: '13px'
+      }
+    }, row.accuracy)
+  }
+]
+
+// 监听 Tab 切换，重置页码
+watch(activeTab, (newVal) => {
+  currentPage.value = 1
+  if (newVal === 'progress_dist') {
+    nextTick(() => {
+      initProgressChart()
+    })
+  } else if (newVal === 'accuracy_dist') {
+    nextTick(() => {
+      initAccuracyChart()
+    })
+  } else if (newVal === 'online_stats') {
+    nextTick(() => {
+      initOnlineTrendChart()
+    })
+  }
+})
+</script>
+
+<style scoped>
+.english-word-report {
+  width: 100%;
+  padding: 24px;
+  background-color: #f4f6f8;
+  min-height: 100vh;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ===== 顶部导航栏 (复用 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;
+  flex-shrink: 0;
+  margin: -24px -24px 0 -24px;
+  width: calc(100% + 48px);
+}
+
+.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);
+}
+
+/* ===== 底部版权 (复用 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);
+  flex-shrink: 0;
+  margin: auto -24px -24px -24px;
+  width: calc(100% + 48px);
+}
+
+/* 响应式适配 */
+@media (max-width: 768px) {
+  .portal-header {
+    height: 56px;
+    padding: 0 20px;
+    margin: -24px -24px 0 -24px;
+    width: calc(100% + 48px);
+  }
+  .user-name {
+    display: none;
+  }
+  .user-info-wrap {
+    padding: 6px 8px;
+    gap: 6px;
+  }
+  .portal-footer {
+    padding: 16px 0 20px;
+    font-size: 11px;
+    margin: auto -24px -24px -24px;
+    width: calc(100% + 48px);
+  }
+}
+
+/* ── 页面头部 ── */
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-bottom: 24px;
+  padding: 24px;
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.back-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: #64748b;
+  transition: color 0.2s;
+  font-size: 15px;
+  padding: 8px 12px;
+}
+
+.back-btn:hover {
+  color: #0052d9;
+  background: #f0f5ff;
+  border-radius: 8px;
+}
+
+.title-group {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.title-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #0052d9 0%, #00a870 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  flex-shrink: 0;
+  box-shadow: 0 8px 16px rgba(0, 82, 217, 0.2);
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: #1e293b;
+  margin: 0 0 4px;
+  letter-spacing: 0.5px;
+}
+
+.page-subtitle {
+  font-size: 14px;
+  color: #64748b;
+  margin: 0;
+}
+
+.header-filters {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+  background: #f8fafc;
+  padding: 12px 16px;
+  border-radius: 12px;
+  border: 1px solid #f1f5f9;
+}
+
+/* ── Tab 区域 ── */
+.tabs-wrapper {
+  background: transparent;
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+:deep(.t-tabs) {
+  background: transparent !important;
+}
+
+:deep(.t-tabs__nav-container) {
+  background: #fff;
+  border-radius: 12px;
+  padding: 8px 16px 0;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.02);
+  margin-bottom: 20px;
+}
+
+:deep(.t-tabs__content) {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.02);
+}
+
+.tab-content {
+  padding: 24px;
+}
+
+/* ── 表格滚动容器 ── */
+.table-scroll-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.table-scroll-wrapper :deep(.t-table) {
+  min-width: 1200px;
+}
+
+.table-scroll-wrapper :deep(.t-table__content) {
+  overflow-x: auto;
+}
+
+/* 确保组织架构列内容不换行且完整显示 */
+.table-scroll-wrapper :deep(.t-table__tree-col) {
+  white-space: nowrap;
+  overflow: visible;
+}
+
+.table-scroll-wrapper :deep(.t-table td:first-child),
+.table-scroll-wrapper :deep(.t-table th:first-child) {
+  white-space: nowrap;
+  overflow: visible;
+}
+
+/* ── 表格区域标题 ── */
+.section-header {
+  margin-bottom: 24px;
+}
+
+.header-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1e293b;
+  margin: 0 0 8px;
+  position: relative;
+  padding-left: 12px;
+}
+
+.section-title::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 16px;
+  background: #0052d9;
+  border-radius: 2px;
+}
+
+.section-desc {
+  font-size: 14px;
+  color: #64748b;
+  margin: 0;
+  padding-left: 12px;
+}
+
+.date-picker-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  position: relative;
+}
+
+.date-warning-text {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  font-size: 12px;
+  color: #e34d59;
+  display: flex;
+  align-items: center;
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.chart-filters {
+  display: flex;
+  align-items: center;
+}
+
+/* ── 正确率分布汇总卡片 ── */
+.summary-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+  margin-top: 32px;
+}
+
+.summary-card {
+  border-radius: 16px;
+  padding: 24px;
+  text-align: center;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.summary-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 24px rgba(0,0,0,0.08);
+}
+
+.summary-card::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 80px;
+  height: 80px;
+  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
+  border-radius: 0 0 0 100%;
+}
+
+.summary-card.excellent { background: linear-gradient(135deg, #e8f8f0, #c3ebd7); border: 1px solid #a3d9b8; }
+.summary-card.good      { background: linear-gradient(135deg, #e8f0ff, #c3d9ff); border: 1px solid #a3c2f5; }
+.summary-card.medium    { background: linear-gradient(135deg, #fff4e8, #ffe0c3); border: 1px solid #f5cca3; }
+.summary-card.low       { background: linear-gradient(135deg, #fff0f0, #ffc3c3); border: 1px solid #f5a3a3; }
+
+.card-label { font-size: 14px; font-weight: 600; color: #475569; margin-bottom: 12px; }
+.card-value { font-size: 32px; font-weight: 800; color: #1e293b; margin-bottom: 4px; }
+.card-pct   { font-size: 14px; font-weight: 500; color: #64748b; }
+
+/* ── 导出对话框样式 ── */
+.export-dialog-content {
+  padding: 10px 0;
+}
+
+.export-tip {
+  color: #475569;
+  margin-bottom: 16px;
+  font-size: 14px;
+}
+
+.export-filters-list {
+  background: #f8fafc;
+  padding: 16px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.filter-item {
+  display: flex;
+  font-size: 14px;
+  align-items: center;
+}
+
+.filter-label {
+  color: #64748b;
+  width: 80px;
+  flex-shrink: 0;
+}
+
+.filter-value {
+  color: #1e293b;
+  font-weight: 500;
+}
+
+/* 深度覆盖 TDesign 表格样式以更现代 */
+:deep(.t-table), :deep(.t-enhanced-table) {
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.02);
+  border: 1px solid #f1f5f9;
+}
+:deep(.t-table th), :deep(.t-enhanced-table th) {
+  background-color: #f8fafc !important;
+  font-weight: 600;
+  color: #475569;
+  border-bottom: 1px solid #e2e8f0 !important;
+  padding: 16px !important;
+  font-size: 14px;
+}
+:deep(.t-table td), :deep(.t-enhanced-table td) {
+  border-bottom: 1px solid #f1f5f9 !important;
+  color: #334155;
+  padding: 16px !important;
+  font-size: 14px;
+}
+:deep(.t-table tr:hover td), :deep(.t-enhanced-table tr:hover td) {
+  background-color: #f0f5ff !important;
+}
+
+/* 班级行可点击样式 */
+:deep(.class-row-clickable) {
+  cursor: pointer !important;
+}
+
+:deep(.class-row-clickable td) {
+  cursor: pointer !important;
+  transition: all 0.2s ease;
+}
+
+:deep(.class-row-clickable:hover td) {
+  background-color: #e6f0ff !important;
+  color: #0052d9 !important;
+}
+
+:deep(.class-row-clickable td:first-child) {
+  position: relative;
+}
+
+:deep(.class-row-clickable td:first-child::after) {
+  content: '点击查看详情';
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 12px;
+  color: #0052d9;
+  background: rgba(0, 82, 217, 0.1);
+  padding: 2px 8px;
+  border-radius: 4px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  pointer-events: none;
+}
+
+:deep(.class-row-clickable:hover td:first-child::after) {
+  opacity: 1;
+}
+
+/* 班级详情模态框样式 */
+:deep(.class-detail-dialog .t-dialog__body) {
+  padding: 24px;
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+.class-detail-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.class-overview {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 16px;
+  padding: 20px;
+  background: linear-gradient(135deg, #f0f5ff 0%, #f0fdf4 100%);
+  border-radius: 12px;
+  border: 1px solid #e2e8f0;
+}
+
+.overview-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.overview-label {
+  font-size: 13px;
+  color: #64748b;
+  font-weight: 500;
+}
+
+.overview-value {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.overview-value.highlight {
+  color: #0052d9;
+}
+
+.overview-value.online-rate {
+  color: #0052d9;
+  background: rgba(0, 82, 217, 0.1);
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 16px;
+}
+
+.overview-value.rate {
+  color: #0052d9;
+  background: rgba(0, 82, 217, 0.1);
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 16px;
+}
+
+.overview-value.accuracy {
+  color: #00a870;
+  background: rgba(0, 168, 112, 0.1);
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 16px;
+}
+
+.students-table-wrapper {
+  margin-top: 8px;
+  background: #fff;
+  border-radius: 12px;
+  padding: 20px;
+  border: 1px solid #e2e8f0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.table-header-with-action {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.table-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1e293b;
+  margin: 0;
+  padding-left: 12px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.table-title::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 18px;
+  background: linear-gradient(180deg, #0052d9 0%, #00a870 100%);
+  border-radius: 2px;
+}
+
+/* 学生表格样式优化 */
+:deep(.students-table-wrapper .t-table) {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+:deep(.students-table-wrapper .t-table th) {
+  background-color: #f8fafc !important;
+  font-weight: 600;
+  color: #475569;
+  font-size: 13px;
+  padding: 12px 8px !important;
+  border-bottom: 2px solid #e2e8f0 !important;
+}
+
+:deep(.students-table-wrapper .t-table td) {
+  padding: 12px 8px !important;
+  font-size: 13px;
+  color: #334155;
+  border-bottom: 1px solid #f1f5f9 !important;
+}
+
+:deep(.students-table-wrapper .t-table tr:hover td) {
+  background-color: #f0f7ff !important;
+}
+
+/* 姓名列样式 */
+:deep(.students-table-wrapper .t-table td:first-child) {
+  font-weight: 600;
+  color: #1e293b;
+}
+
+/* 表格分页样式 */
+:deep(.students-table-wrapper .t-pagination) {
+  margin-top: 16px;
+  justify-content: flex-end;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .page-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .header-filters {
+    width: 100%;
+    justify-content: flex-start;
+    padding: 12px;
+    gap: 12px;
+  }
+  .header-filters .t-select {
+    width: calc(50% - 6px) !important;
+    min-width: 0 !important;
+  }
+  .header-row {
+    flex-direction: column;
+  }
+  .date-picker-wrapper {
+    width: 100%;
+    align-items: flex-start;
+  }
+  .date-picker-wrapper .t-date-range-picker {
+    width: 100% !important;
+    margin-right: 0 !important;
+    margin-bottom: 12px;
+  }
+  .chart-filters {
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+  }
+  .chart-filters .t-date-picker,
+  .chart-filters .t-date-range-picker {
+    width: 100% !important;
+    margin-bottom: 12px;
+  }
+  .chart-container > div {
+    height: 300px !important;
+  }
+  /* 小屏幕下表格滚动优化 */
+  .table-scroll-wrapper {
+    margin: 0 -16px;
+    padding: 0 16px;
+    width: calc(100% + 32px);
+  }
+}
+
+@media (max-width: 1200px) {
+  /* 中等屏幕下确保表格可滚动 */
+  .table-scroll-wrapper :deep(.t-table) {
+    min-width: 1100px;
+  }
+}
+
+/* 树形表格展开图标样式优化 */
+::deep(.t-table__tree-op-icon),
+::deep(.t-enhanced-table__tree-op-icon) {
+  color: #0052d9;
+  transition: transform 0.3s ease;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+::deep(.t-table__tree-op-icon:hover),
+::deep(.t-enhanced-table__tree-op-icon:hover) {
+  color: #003eb3;
+  background-color: #e0ebff;
+  border-radius: 4px;
+}
+
+/* 树形列内容样式优化 - 确保所有层级数据完整显示 */
+::deep(.t-table__tree-col),
+::deep(.t-enhanced-table__tree-col) {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  overflow: visible;
+}
+
+/* 确保不同层级的组织架构名称都能完整显示 */
+::deep(.t-table__tree-col span),
+::deep(.t-enhanced-table__tree-col span) {
+  white-space: nowrap;
+  overflow: visible;
+}
+
+/* 组织架构列固定显示优化 */
+::deep(.t-table th.t-table__th-subject),
+::deep(.t-table td.t-table__td-subject) {
+  position: sticky;
+  left: 0;
+  z-index: 10;
+  background: inherit;
+}
+
+::deep(.t-table th.t-table__th-subject) {
+  z-index: 11;
+}
+</style>
diff --git a/src/components/HomeNav.vue b/src/components/HomeNav.vue
new file mode 100644
index 0000000..14eb769
--- /dev/null
+++ b/src/components/HomeNav.vue
@@ -0,0 +1,355 @@
+<template>
+  <div class="nav-page">
+    <div class="nav-header">
+      <div class="logo">
+        <img src="../assets/logo.png" alt="logo" class="logo-icon" />
+        <span class="logo-text">劝学</span>
+      </div>
+      <p class="subtitle">爱学蝶变原型系统</p>
+    </div>
+
+    <div class="nav-body">
+      <div class="nav-title">请选择访问端口</div>
+      <div class="nav-grid">
+        <div class="nav-card" @click="navigateTo('web')">
+          <div class="card-icon web-icon">
+            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
+              <line x1="8" y1="21" x2="16" y2="21"></line>
+              <line x1="12" y1="17" x2="12" y2="21"></line>
+            </svg>
+          </div>
+          <div class="card-content">
+            <h3 class="card-title">网页端</h3>
+            <p class="card-desc">电脑浏览器访问，完整功能体验</p>
+            <div class="card-footer">
+              <span class="card-tag">PC</span>
+              <span class="card-arrow">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <line x1="5" y1="12" x2="19" y2="12"></line>
+                  <polyline points="12 5 19 12 12 19"></polyline>
+                </svg>
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div class="nav-card" @click="navigateTo('mobile')">
+          <div class="card-icon mobile-icon">
+            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
+              <line x1="12" y1="18" x2="12.01" y2="18"></line>
+            </svg>
+          </div>
+          <div class="card-content">
+            <h3 class="card-title">手机端</h3>
+            <p class="card-desc">移动端访问，随时随地管理</p>
+            <div class="card-footer">
+              <span class="card-tag">Mobile</span>
+              <span class="card-arrow">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <line x1="5" y1="12" x2="19" y2="12"></line>
+                  <polyline points="12 5 19 12 12 19"></polyline>
+                </svg>
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div class="nav-card" @click="navigateTo('admin')">
+          <div class="card-icon admin-icon">
+            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
+              <path d="M12 8v4"></path>
+              <path d="M12 16h.01"></path>
+            </svg>
+          </div>
+          <div class="card-content">
+            <h3 class="card-title">后台管理端</h3>
+            <p class="card-desc">后台管理系统，数据管理与配置</p>
+            <div class="card-footer">
+              <span class="card-tag">Admin</span>
+              <span class="card-arrow">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <line x1="5" y1="12" x2="19" y2="12"></line>
+                  <polyline points="12 5 19 12 12 19"></polyline>
+                </svg>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="nav-footer">
+      <p>© 2026 爱学蝶变 - 让教育更智能</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const navigateTo = (platform) => {
+  switch (platform) {
+    case 'web':
+      router.push('/login')
+      break
+    case 'mobile':
+      router.push('/mb')
+      break
+    case 'admin':
+      router.push('/admin-dashboard')
+      break
+  }
+}
+</script>
+
+<style scoped>
+.nav-page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #e3f2fd 0%, #e0f7fa 50%, #e8f5e9 100%);
+  display: flex;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+.nav-header {
+  text-align: center;
+  padding: 60px 20px 40px;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.logo-text {
+  font-size: 28px;
+  font-weight: 700;
+  color: #1565c0;
+  letter-spacing: 2px;
+}
+
+.logo-icon {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+}
+
+.subtitle {
+  font-size: 16px;
+  color: #666;
+  margin: 0;
+  letter-spacing: 1px;
+}
+
+.nav-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 20px 60px;
+}
+
+.nav-title {
+  font-size: 28px;
+  font-weight: 700;
+  color: #1a237e;
+  margin-bottom: 50px;
+  letter-spacing: 1px;
+}
+
+.nav-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 32px;
+  max-width: 1200px;
+  width: 100%;
+  padding: 0 20px;
+}
+
+.nav-card {
+  background: white;
+  border-radius: 20px;
+  padding: 40px 32px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  display: flex;
+  align-items: flex-start;
+  gap: 24px;
+}
+
+.nav-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+.card-icon {
+  flex-shrink: 0;
+  width: 80px;
+  height: 80px;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.nav-card:hover .card-icon {
+  transform: scale(1.1);
+}
+
+.web-icon {
+  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+  color: #1565c0;
+}
+
+.mobile-icon {
+  background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%);
+  color: #00897b;
+}
+
+.admin-icon {
+  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
+  color: #7b1fa2;
+}
+
+.card-content {
+  flex: 1;
+}
+
+.card-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: #1a237e;
+  margin: 0 0 10px;
+  letter-spacing: 0.5px;
+}
+
+.card-desc {
+  font-size: 14px;
+  color: #666;
+  margin: 0 0 16px;
+  line-height: 1.6;
+}
+
+.card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.card-tag {
+  font-size: 11px;
+  font-weight: 700;
+  color: #fff;
+  padding: 4px 12px;
+  border-radius: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.web-icon .card-tag {
+  background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);
+}
+
+.mobile-icon .card-tag {
+  background: linear-gradient(135deg, #00897b 0%, #26a69a 100%);
+}
+
+.admin-icon .card-tag {
+  background: linear-gradient(135deg, #7b1fa2 0%, #ab47bc 100%);
+}
+
+.card-arrow {
+  color: #999;
+  transition: all 0.3s ease;
+}
+
+.nav-card:hover .card-arrow {
+  color: #1a237e;
+  transform: translateX(4px);
+}
+
+.nav-footer {
+  text-align: center;
+  padding: 24px;
+}
+
+.nav-footer p {
+  font-size: 13px;
+  color: #999;
+  margin: 0;
+  letter-spacing: 0.5px;
+}
+
+@media (max-width: 768px) {
+  .nav-header {
+    padding: 40px 20px 30px;
+  }
+
+  .logo-text {
+    font-size: 24px;
+  }
+
+  .nav-title {
+    font-size: 24px;
+    margin-bottom: 30px;
+  }
+
+  .nav-grid {
+    grid-template-columns: 1fr;
+    gap: 20px;
+    padding: 0;
+  }
+
+  .nav-card {
+    padding: 30px 24px;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .card-icon {
+    width: 60px;
+    height: 60px;
+  }
+
+  .card-icon svg {
+    width: 48px;
+    height: 48px;
+  }
+
+  .card-content {
+    text-align: center;
+  }
+
+  .card-title {
+    font-size: 18px;
+    margin-bottom: 6px;
+  }
+
+  .card-desc {
+    font-size: 13px;
+    margin-bottom: 12px;
+  }
+
+  .card-footer {
+    justify-content: center;
+    gap: 12px;
+  }
+
+  .nav-footer {
+    padding: 16px;
+  }
+}
+</style>
diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
new file mode 100644
index 0000000..8a861a6
--- /dev/null
+++ b/src/components/HomePage.vue
@@ -0,0 +1,683 @@
+<template>
+  <div class="home-page">
+    <!-- 顶部导航栏 (参考 NoteEvaluationPage 风格) -->
+    <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-header">
+        <button class="back-btn" @click="handleGoBack">
+          <t-icon name="chevron-left" size="18" />
+          <span>返回门户首页</span>
+        </button>
+      </div>
+
+      <!-- 报告入口网格 -->
+      <div class="report-grid">
+        <t-row :gutter="24">
+          <t-col
+            v-for="report in reports"
+            :key="report.id"
+            :xs="12" :sm="12" :md="8" :lg="6"
+          >
+            <t-card
+              class="report-card"
+              :bordered="true"
+              :hover-shadow="true"
+              @click="handleReportClick(report)"
+            >
+              <div class="card-content">
+                <!-- 图标区域 -->
+                <div class="card-icon" :style="{ background: report.iconBg }">
+                  <t-icon :name="report.icon" size="48" style="color: white" />
+                </div>
+
+                <!-- 标题区域 -->
+                <div class="card-title">{{ report.name }}</div>
+
+                <!-- 描述区域 -->
+                <div class="card-description">{{ report.description }}</div>
+              </div>
+            </t-card>
+          </t-col>
+        </t-row>
+      </div>
+    </div>
+
+    <!-- 底部版权区域 -->
+    <footer class="portal-footer">
+      <span>Copyright © 2025 &nbsp;QuanXue. All Rights Reserved.&nbsp; 渝ICP备05088888号</span>
+    </footer>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { MessagePlugin } from 'tdesign-vue-next'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const emit = defineEmits(['navigate', 'go-back'])
+
+// 下拉菜单显示状态
+const showDropdown = ref(false)
+
+// 处理退出登录
+const handleLogout = () => {
+  // 这里可以添加退出登录的逻辑
+  MessagePlugin.success('退出登录成功')
+  router.push('/login')
+}
+
+// 报告数据
+const reports = [
+  {
+    id: 'cloud_school',
+    name: '作业打卡行为报告',
+    icon: 'cloud',
+    iconBg: 'linear-gradient(135deg, #4A90E2 0%, #357ABD 100%)', // 更柔和的蓝色
+    description: '查看作业打卡行为数据分析与趋势报告'
+  },
+  {
+    id: 'school',
+    name: '学习行为报告',
+    icon: 'home',
+    iconBg: 'linear-gradient(135deg, #F5A623 0%, #E59411 100%)', // 温暖的橙色
+    description: '查看各校学生行为详细报告与对比分析'
+  },
+  {
+    id: 'leaderboard',
+    name: '排行榜',
+    icon: 'chart-bar',
+    iconBg: 'linear-gradient(135deg, #7ED321 0%, #68B019 100%)', // 清新的绿色
+    description: '查看积分、知识点、互动、笔记精选等多维度排行榜'
+  },
+  {
+    id: 'english_word',
+    name: '英语单词报告',
+    icon: 'layers',
+    iconBg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', // 紫色渐变
+    description: '查看英语单词学情统计、正确率排名、进度分布等报告'
+  }
+]
+
+// 返回门户首页
+const handleGoBack = () => {
+  router.push('/admin')
+}
+
+// 点击报告卡片 - 跳转到详情页
+const handleReportClick = (report) => {
+  // 根据报告ID路由到对应页面
+  const routeMap = {
+    'cloud_school': '/cloud-school-report',
+    'school': '/learning-behavior-report',
+    'leaderboard': '/leaderboard',
+    'english_word': '/english-word-report'
+  }
+
+  const routePath = routeMap[report.id]
+  if (routePath) {
+    router.push(routePath)
+  } else {
+    emit('navigate', report.id)
+  }
+}
+</script>
+
+<style scoped>
+.home-page {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
+}
+
+/* ===== 顶部导航栏 (参考 NoteEvaluationPage 风格) ===== */
+.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;
+  flex-shrink: 0;
+}
+
+.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-content {
+  flex: 1;
+  padding: 24px 32px 48px;
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* 返回按钮区域 */
+.back-header {
+  margin-bottom: 32px;
+}
+
+.back-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  background: transparent;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  font-size: 14px;
+  color: #666;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.back-btn:hover {
+  border-color: #0052d9;
+  color: #0052d9;
+  background: #f0f5ff;
+}
+
+.report-grid {
+  margin-bottom: 0;
+  padding: 16px 0;
+}
+
+.report-card {
+  height: 100%;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 16px;
+  overflow: hidden;
+  margin-bottom: 24px;
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
+  background: #ffffff;
+  will-change: transform, box-shadow;
+  transform: translateZ(0);
+}
+
+.report-card:hover {
+  transform: translateY(-4px) translateZ(0);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
+  border-color: rgba(22, 119, 255, 0.15);
+}
+
+.report-card:active {
+  transform: translateY(-1px) translateZ(0) scale(0.98);
+  transition: all 0.1s ease;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
+  border-color: rgba(22, 119, 255, 0.25);
+}
+
+/* 点击时的图标动画 */
+.report-card:active .card-icon {
+  transform: scale(0.95);
+  transition: transform 0.1s ease;
+}
+
+.card-content {
+  text-align: center;
+  padding: 48px 24px;
+  min-height: 240px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.card-icon {
+  width: 80px;
+  height: 80px;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 24px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.report-card:hover .card-icon {
+  transform: scale(1.05);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
+}
+
+.card-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 12px;
+  letter-spacing: 0.3px;
+}
+
+.card-description {
+  font-size: 14px;
+  color: #64748b;
+  line-height: 1.7;
+  max-width: 85%;
+  margin: 0 auto;
+}
+
+::deep(.t-card__body) {
+  padding: 0;
+}
+
+::deep(.t-card) {
+  border-radius: 16px;
+}
+
+/* ===== 底部版权 (参考 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);
+  flex-shrink: 0;
+}
+
+/* 响应式布局 - 大屏幕桌面 (1440px+) */
+@media (min-width: 1440px) {
+  .portal-header {
+    padding: 0 48px;
+  }
+
+  .page-content {
+    padding: 32px 48px 64px;
+    max-width: 1400px;
+  }
+
+  .back-header {
+    margin-bottom: 40px;
+  }
+
+  .card-content {
+    padding: 56px 32px;
+    min-height: 280px;
+  }
+
+  .card-icon {
+    width: 88px;
+    height: 88px;
+  }
+
+  .card-title {
+    font-size: 22px;
+  }
+
+  .card-description {
+    font-size: 15px;
+  }
+}
+
+/* 响应式布局 - 中等屏幕 (1200px - 1439px) */
+@media (max-width: 1439px) and (min-width: 1200px) {
+  .page-content {
+    padding: 24px 32px 40px;
+  }
+
+  .card-content {
+    padding: 44px 20px;
+    min-height: 240px;
+  }
+}
+
+/* 响应式布局 - 平板设备 (768px - 1199px) */
+@media (max-width: 1199px) and (min-width: 768px) {
+  .portal-header {
+    padding: 0 28px;
+  }
+
+  .page-content {
+    padding: 20px 24px 40px;
+  }
+
+  .back-header {
+    margin-bottom: 28px;
+  }
+
+  .card-content {
+    padding: 36px 20px;
+    min-height: 220px;
+  }
+
+  .card-icon {
+    width: 72px;
+    height: 72px;
+  }
+
+  .report-card {
+    margin-bottom: 20px;
+  }
+}
+
+/* 响应式布局 - 小屏幕手机 (< 768px) */
+@media (max-width: 767px) {
+  .portal-header {
+    padding: 0 20px;
+    height: 56px;
+  }
+
+  .logo-box {
+    height: 34px;
+  }
+
+  .logo-img {
+    height: 34px;
+  }
+
+  .user-name {
+    display: none;
+  }
+
+  .user-info-wrap {
+    padding: 6px 8px;
+  }
+
+  .dropdown-arrow {
+    margin-left: 4px;
+  }
+
+  .user-dropdown-menu {
+    min-width: 140px;
+    right: -8px;
+  }
+
+  .page-content {
+    padding: 16px 20px 32px;
+  }
+
+  .back-header {
+    margin-bottom: 24px;
+  }
+
+  .back-btn {
+    padding: 6px 12px;
+    font-size: 13px;
+  }
+
+  .report-grid {
+    padding: 8px 0;
+  }
+
+  .report-card {
+    margin-bottom: 16px;
+  }
+
+  .card-content {
+    padding: 32px 16px;
+    min-height: 200px;
+  }
+
+  .card-icon {
+    width: 64px;
+    height: 64px;
+    margin-bottom: 16px;
+  }
+
+  .card-icon :deep(.t-icon) {
+    font-size: 36px !important;
+  }
+
+  .card-title {
+    font-size: 17px;
+    margin-bottom: 8px;
+  }
+
+  .card-description {
+    font-size: 13px;
+    line-height: 1.6;
+    max-width: 90%;
+  }
+
+  .portal-footer {
+    padding: 16px 20px;
+    font-size: 11px;
+  }
+}
+
+/* 响应式布局 - 超小屏幕 (< 576px) */
+@media (max-width: 575px) {
+  .portal-header {
+    padding: 0 16px;
+    height: 52px;
+  }
+
+  .logo-box {
+    height: 30px;
+  }
+
+  .logo-img {
+    height: 30px;
+  }
+
+  .user-avatar {
+    width: 28px;
+    height: 28px;
+  }
+
+  .avatar-text {
+    font-size: 12px;
+  }
+
+  .page-content {
+    padding: 12px 16px 24px;
+  }
+
+  .back-header {
+    margin-bottom: 20px;
+  }
+
+  .card-content {
+    padding: 28px 12px;
+    min-height: 180px;
+  }
+
+  .card-icon {
+    width: 56px;
+    height: 56px;
+    border-radius: 16px;
+  }
+
+  .card-icon :deep(.t-icon) {
+    font-size: 32px !important;
+  }
+
+  .card-title {
+    font-size: 16px;
+  }
+
+  .card-description {
+    font-size: 12px;
+    max-width: 95%;
+  }
+}
+</style>
diff --git a/src/components/LeaderboardPage.vue b/src/components/LeaderboardPage.vue
new file mode 100644
index 0000000..5f8c223
--- /dev/null
+++ b/src/components/LeaderboardPage.vue
@@ -0,0 +1,1685 @@
+<template>
+  <div class="leaderboard-page">
+    <!-- 顶部导航栏 (复用 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="page-header">
+      <t-button
+        variant="outline"
+        @click="goBack"
+        class="back-button"
+      >
+        <template #icon><t-icon name="chevron-left" /></template>
+        返回首页
+      </t-button>
+      <h1 class="page-title">排行榜</h1>
+    </div>
+
+    <!-- 筛选区域 -->
+    <div class="filter-section">
+      <div class="filter-header">
+        <div class="filter-tips">
+          <t-icon name="info-circle" class="tips-icon" />
+          <span class="tips-text">筛选规则：先选<span class="tips-highlight">云校/学校</span>，再选<span class="tips-highlight">年级</span>，最后选<span class="tips-highlight">班级</span>（级联选择）</span>
+        </div>
+        <a-button type="default" size="small" @click="resetFilters">
+          <template #icon><t-icon name="refresh" /></template>
+          重置
+        </a-button>
+      </div>
+      
+      <div class="filter-row">
+        <div class="filter-item">
+          <label class="filter-label">云校</label>
+          <a-select
+            v-model:value="filters.cloudSchool"
+            placeholder="请选择云校"
+            class="filter-select"
+            @change="handleCloudSchoolChange"
+          >
+            <a-select-option v-for="item in cloudSchoolOptionsWithAll" :key="item.value" :value="item.value">
+              {{ item.label }}
+            </a-select-option>
+          </a-select>
+        </div>
+        <div class="filter-item">
+          <label class="filter-label">
+            学校
+            <span v-if="!filters.school" class="label-status">可选</span>
+          </label>
+          <a-select
+            v-model:value="filters.school"
+            placeholder="请选择学校"
+            allowClear
+            class="filter-select"
+            @change="handleSchoolChange"
+          >
+            <a-select-option v-for="item in filteredSchoolOptionsWithAll" :key="item.value" :value="item.value">
+              {{ item.label }}
+            </a-select-option>
+          </a-select>
+        </div>
+        <div class="filter-item">
+          <label class="filter-label">
+            年级
+            <span v-if="!isGradeEnabled" class="label-status disabled">需先选学校</span>
+          </label>
+          <a-select
+            v-model:value="filters.grade"
+            placeholder="请选择年级"
+            allowClear
+            :disabled="!isGradeEnabled"
+            class="filter-select"
+            @change="handleGradeChange"
+          >
+            <a-select-option v-for="item in gradeOptions" :key="item.value" :value="item.value">
+              {{ item.label }}
+            </a-select-option>
+          </a-select>
+        </div>
+        <div class="filter-item">
+          <label class="filter-label">
+            班级
+            <span v-if="!isClassEnabled" class="label-status disabled">需先选年级</span>
+          </label>
+          <a-select
+            v-model:value="filters.class"
+            placeholder="请选择班级"
+            allowClear
+            :disabled="!isClassEnabled"
+            class="filter-select"
+            @change="handleFilterChange"
+          >
+            <a-select-option v-for="item in filteredClassOptions" :key="item.value" :value="item.value">
+              {{ item.label }}
+            </a-select-option>
+          </a-select>
+        </div>
+        <div class="filter-item">
+          <label class="filter-label">科目</label>
+          <a-select
+            v-model:value="filters.subject"
+            placeholder="请选择科目"
+            class="filter-select"
+            @change="handleFilterChange"
+          >
+            <a-select-option v-for="item in subjectOptionsWithAll" :key="item.value" :value="item.value">
+              {{ item.label }}
+            </a-select-option>
+          </a-select>
+        </div>
+        <div class="filter-item">
+          <label class="filter-label">学生层次</label>
+          <a-select
+            v-model:value="filters.studentLevel"
+            placeholder="请选择学生层次"
+            class="filter-select"
+            @change="handleFilterChange"
+          >
+            <a-select-option v-for="item in studentLevelOptionsWithAll" :key="item.value" :value="item.value">
+              {{ item.label }}
+            </a-select-option>
+          </a-select>
+        </div>
+      </div>
+    </div>
+
+    <!-- 排行榜标签页 -->
+    <a-tabs v-model:activeKey="activeTab" class="leaderboard-tabs">
+      <!-- 积分排行榜 -->
+      <a-tab-pane key="points" tab="积分排行榜">
+        <div class="tab-toolbar">
+          <!-- 时间筛选器 -->
+          <div class="time-filter-bar">
+            <button
+              v-for="item in timeFilterOptions"
+              :key="item.key"
+              :class="['time-filter-btn', { 'time-filter-btn--active': activeTimeFilter === item.key }]"
+              @click="activeTimeFilter = item.key"
+            >
+              {{ item.label }}
+            </button>
+            <!-- 时间范围选择器 -->
+            <div class="date-range-picker" :class="{ 'date-range-picker--disabled': isDateRangeDisabled }">
+              <span class="date-range-label">时间范围：</span>
+              <input
+                type="date"
+                class="date-input"
+                v-model="dateRange.start"
+                :disabled="isDateRangeDisabled"
+                :min="startDateMin"
+                :max="startDateMax"
+              />
+              <span class="date-range-sep">至</span>
+              <input
+                type="date"
+                class="date-input"
+                v-model="dateRange.end"
+                :disabled="isDateRangeDisabled"
+                :min="endDateMin"
+                :max="endDateMax"
+              />
+              <span v-if="!isDateRangeDisabled" class="date-range-tip">（最多60天）</span>
+            </div>
+          </div>
+          <!-- 导出按钮 -->
+          <a-button type="primary" @click="handleExport('points')">
+            <template #icon><t-icon name="download" /></template>
+            导出表格
+          </a-button>
+        </div>
+        <div class="leaderboard-table">
+          <a-table
+            :columns="pointsColumns"
+            :data-source="pointsTableData"
+            :pagination="{ pageSize: 10 }"
+            :scroll="{ x: 'max-content' }"
+          >
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'rank'">
+                <span :class="['rank-badge', getRankClass(record.rank)]">
+                  {{ record.rank <= 3 ? '' : record.rank }}
+                </span>
+              </template>
+              <template v-else-if="column.key === 'name'">
+                <div class="user-cell">
+                  <a-avatar :style="{ backgroundColor: getAvatarColor(record.name) }">
+                    {{ record.name.charAt(0) }}
+                  </a-avatar>
+                  <span class="user-name">{{ record.name }}</span>
+                </div>
+              </template>
+              <template v-else-if="column.key === 'totalPoints'">
+                <span class="value-cell">{{ record.totalPoints.toLocaleString() }} 积分</span>
+              </template>
+            </template>
+          </a-table>
+        </div>
+      </a-tab-pane>
+
+      <!-- 完成知识点数量排行榜 -->
+      <a-tab-pane key="courses" tab="完成知识点排行榜">
+        <div class="tab-toolbar">
+          <!-- 时间筛选器 -->
+          <div class="time-filter-bar">
+            <button
+              v-for="item in timeFilterOptions"
+              :key="item.key"
+              :class="['time-filter-btn', { 'time-filter-btn--active': activeTimeFilter === item.key }]"
+              @click="activeTimeFilter = item.key"
+            >
+              {{ item.label }}
+            </button>
+            <!-- 时间范围选择器 -->
+            <div class="date-range-picker" :class="{ 'date-range-picker--disabled': isDateRangeDisabled }">
+              <span class="date-range-label">时间范围：</span>
+              <input
+                type="date"
+                class="date-input"
+                v-model="dateRange.start"
+                :disabled="isDateRangeDisabled"
+                :min="startDateMin"
+                :max="startDateMax"
+              />
+              <span class="date-range-sep">至</span>
+              <input
+                type="date"
+                class="date-input"
+                v-model="dateRange.end"
+                :disabled="isDateRangeDisabled"
+                :min="endDateMin"
+                :max="endDateMax"
+              />
+              <span v-if="!isDateRangeDisabled" class="date-range-tip">（最多60天）</span>
+            </div>
+          </div>
+          <!-- 导出按钮 -->
+          <a-button type="primary" @click="handleExport('courses')">
+            <template #icon><t-icon name="download" /></template>
+            导出表格
+          </a-button>
+        </div>
+        <div class="leaderboard-table">
+          <a-table
+            :columns="coursesColumns"
+            :data-source="coursesTableData"
+            :pagination="{ pageSize: 10 }"
+            :scroll="{ x: 'max-content' }"
+          >
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'rank'">
+                <span :class="['rank-badge', getRankClass(record.rank)]">
+                  {{ record.rank <= 3 ? '' : record.rank }}
+                </span>
+              </template>
+              <template v-else-if="column.key === 'name'">
+                <div class="user-cell">
+                  <a-avatar :style="{ backgroundColor: getAvatarColor(record.name) }">
+                    {{ record.name.charAt(0) }}
+                  </a-avatar>
+                  <span class="user-name">{{ record.name }}</span>
+                </div>
+              </template>
+              <template v-else-if="column.key === 'totalCourses'">
+                <span class="value-cell">{{ record.totalCourses }} 个</span>
+              </template>
+            </template>
+          </a-table>
+        </div>
+      </a-tab-pane>
+
+      <!-- 互动排行榜 -->
+      <a-tab-pane key="likes" tab="互动排行榜">
+        <div class="tab-toolbar">
+          <!-- 时间筛选器 -->
+          <div class="time-filter-bar">
+            <button
+              v-for="item in timeFilterOptions"
+              :key="item.key"
+              :class="['time-filter-btn', { 'time-filter-btn--active': activeTimeFilter === item.key }]"
+              @click="activeTimeFilter = item.key"
+            >
+              {{ item.label }}
+            </button>
+            <!-- 时间范围选择器 -->
+            <div class="date-range-picker" :class="{ 'date-range-picker--disabled': isDateRangeDisabled }">
+              <span class="date-range-label">时间范围：</span>
+              <input
+                type="date"
+                class="date-input"
+                v-model="dateRange.start"
+                :disabled="isDateRangeDisabled"
+                :min="startDateMin"
+                :max="startDateMax"
+              />
+              <span class="date-range-sep">至</span>
+              <input
+                type="date"
+                class="date-input"
+                v-model="dateRange.end"
+                :disabled="isDateRangeDisabled"
+                :min="endDateMin"
+                :max="endDateMax"
+              />
+              <span v-if="!isDateRangeDisabled" class="date-range-tip">（最多60天）</span>
+            </div>
+          </div>
+          <!-- 导出按钮 -->
+          <a-button type="primary" @click="handleExport('likes')">
+            <template #icon><t-icon name="download" /></template>
+            导出表格
+          </a-button>
+        </div>
+        <div class="leaderboard-table">
+          <a-table
+            :columns="likesColumns"
+            :data-source="likesTableData"
+            :pagination="{ pageSize: 10 }"
+            :scroll="{ x: 'max-content' }"
+          >
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'rank'">
+                <span :class="['rank-badge', getRankClass(record.rank)]">
+                  {{ record.rank <= 3 ? '' : record.rank }}
+                </span>
+              </template>
+              <template v-else-if="column.key === 'name'">
+                <div class="user-cell">
+                  <a-avatar :style="{ backgroundColor: getAvatarColor(record.name) }">
+                    {{ record.name.charAt(0) }}
+                  </a-avatar>
+                  <span class="user-name">{{ record.name }}</span>
+                </div>
+              </template>
+              <template v-else-if="column.key === 'totalLikes'">
+                <span class="value-cell">{{ record.totalLikes.toLocaleString() }} 次</span>
+              </template>
+            </template>
+          </a-table>
+        </div>
+      </a-tab-pane>
+
+      <!-- 笔记精选排行榜 -->
+      <a-tab-pane key="answers" tab="笔记精选排行榜">
+        <div class="tab-toolbar">
+          <!-- 时间筛选器 -->
+          <div class="time-filter-bar">
+            <button
+              v-for="item in timeFilterOptions"
+              :key="item.key"
+              :class="['time-filter-btn', { 'time-filter-btn--active': activeTimeFilter === item.key }]"
+              @click="activeTimeFilter = item.key"
+            >
+              {{ item.label }}
+            </button>
+            <!-- 时间范围选择器 -->
+            <div class="date-range-picker" :class="{ 'date-range-picker--disabled': isDateRangeDisabled }">
+              <span class="date-range-label">时间范围：</span>
+              <input
+                type="date"
+                class="date-input"
+                v-model="dateRange.start"
+                :disabled="isDateRangeDisabled"
+                :min="startDateMin"
+                :max="startDateMax"
+              />
+              <span class="date-range-sep">至</span>
+              <input
+                type="date"
+                class="date-input"
+                v-model="dateRange.end"
+                :disabled="isDateRangeDisabled"
+                :min="endDateMin"
+                :max="endDateMax"
+              />
+              <span v-if="!isDateRangeDisabled" class="date-range-tip">（最多60天）</span>
+            </div>
+          </div>
+          <!-- 导出按钮 -->
+          <a-button type="primary" @click="handleExport('answers')">
+            <template #icon><t-icon name="download" /></template>
+            导出表格
+          </a-button>
+        </div>
+        <div class="leaderboard-table">
+          <a-table
+            :columns="answersColumns"
+            :data-source="answersTableData"
+            :pagination="{ pageSize: 10 }"
+            :scroll="{ x: 'max-content' }"
+          >
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'rank'">
+                <span :class="['rank-badge', getRankClass(record.rank)]">
+                  {{ record.rank <= 3 ? '' : record.rank }}
+                </span>
+              </template>
+              <template v-else-if="column.key === 'name'">
+                <div class="user-cell">
+                  <a-avatar :style="{ backgroundColor: getAvatarColor(record.name) }">
+                    {{ record.name.charAt(0) }}
+                  </a-avatar>
+                  <span class="user-name">{{ record.name }}</span>
+                </div>
+              </template>
+              <template v-else-if="column.key === 'totalAnswers'">
+                <span class="value-cell">{{ record.totalAnswers }} 次</span>
+              </template>
+            </template>
+          </a-table>
+        </div>
+      </a-tab-pane>
+    </a-tabs>
+
+    <!-- 底部版权 (复用 PortalHomePage 风格) -->
+    <footer class="portal-footer">
+      <span>Copyright © 2025 &nbsp;QuanXue. All Rights Reserved.&nbsp; 渝ICP备05088888号</span>
+    </footer>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { message } from 'ant-design-vue'
+
+const router = useRouter()
+
+// 顶部导航栏状态
+const showDropdown = ref(false)
+
+// 返回首页 - 使用路由导航
+const goBack = () => {
+  router.push('/report-home')
+}
+
+// 处理退出登录
+const handleLogout = () => {
+  // 清除登录状态
+  localStorage.removeItem('token')
+  localStorage.removeItem('userInfo')
+  // 跳转到登录页
+  router.push('/login')
+  message.success('已退出登录')
+}
+
+// 当前激活的标签页
+const activeTab = ref('points')
+
+// 时间筛选器选项
+const timeFilterOptions = [
+  { key: 'all', label: '总榜' },
+  { key: 'thisWeek', label: '本周榜' },
+  { key: 'lastWeek', label: '上周榜' },
+  { key: 'today', label: '今日榜' },
+  { key: 'yesterday', label: '昨日榜' }
+]
+
+// 当前激活的时间筛选
+const activeTimeFilter = ref('all')
+
+// ---- 时间范围选择器 ----
+
+// 格式化日期为 YYYY-MM-DD
+function formatDate(date) {
+  const y = date.getFullYear()
+  const m = String(date.getMonth() + 1).padStart(2, '0')
+  const d = String(date.getDate()).padStart(2, '0')
+  return `${y}-${m}-${d}`
+}
+
+// 计算各时间段的开始/结束日期
+function calcDateRange(filterKey) {
+  const now = new Date()
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+
+  if (filterKey === 'today') {
+    return { start: formatDate(today), end: formatDate(today) }
+  }
+
+  if (filterKey === 'yesterday') {
+    const yesterday = new Date(today)
+    yesterday.setDate(today.getDate() - 1)
+    return { start: formatDate(yesterday), end: formatDate(yesterday) }
+  }
+
+  if (filterKey === 'thisWeek') {
+    // 周一为一周开始
+    const day = today.getDay() === 0 ? 7 : today.getDay()
+    const monday = new Date(today)
+    monday.setDate(today.getDate() - day + 1)
+    const sunday = new Date(monday)
+    sunday.setDate(monday.getDate() + 6)
+    return { start: formatDate(monday), end: formatDate(sunday) }
+  }
+
+  if (filterKey === 'lastWeek') {
+    const day = today.getDay() === 0 ? 7 : today.getDay()
+    const thisMonday = new Date(today)
+    thisMonday.setDate(today.getDate() - day + 1)
+    const lastMonday = new Date(thisMonday)
+    lastMonday.setDate(thisMonday.getDate() - 7)
+    const lastSunday = new Date(lastMonday)
+    lastSunday.setDate(lastMonday.getDate() + 6)
+    return { start: formatDate(lastMonday), end: formatDate(lastSunday) }
+  }
+
+  // 'all' 总榜：默认最近30天
+  const end = new Date(today)
+  const start = new Date(today)
+  start.setDate(today.getDate() - 29)
+  return { start: formatDate(start), end: formatDate(end) }
+}
+
+// 时间范围
+const dateRange = ref(calcDateRange('all'))
+
+// 是否禁用时间范围选择器（非总榜时禁用）
+const isDateRangeDisabled = computed(() => activeTimeFilter.value !== 'all')
+
+// 总榜自定义时间范围：动态计算 start/end 的 min/max（最大60天）
+const startDateMax = computed(() => {
+  if (isDateRangeDisabled.value) return undefined
+  return dateRange.value.end || undefined
+})
+
+const startDateMin = computed(() => {
+  if (isDateRangeDisabled.value || !dateRange.value.end) return undefined
+  const end = new Date(dateRange.value.end)
+  end.setDate(end.getDate() - 60)
+  return formatDate(end)
+})
+
+const endDateMin = computed(() => {
+  if (isDateRangeDisabled.value) return undefined
+  return dateRange.value.start || undefined
+})
+
+const endDateMax = computed(() => {
+  if (isDateRangeDisabled.value || !dateRange.value.start) return undefined
+  const start = new Date(dateRange.value.start)
+  start.setDate(start.getDate() + 60)
+  return formatDate(start)
+})
+
+// 监听时间筛选变化，自动更新日期范围
+watch(activeTimeFilter, (newVal) => {
+  dateRange.value = calcDateRange(newVal)
+})
+
+// 筛选条件
+const filters = ref({
+  cloudSchool: 'all',
+  school: undefined,
+  grade: undefined,
+  class: undefined,
+  subject: 'all',
+  studentLevel: 'all'
+})
+
+// 云校选项
+const cloudSchoolOptions = [
+  { value: 'cloud1', label: '华东云校' },
+  { value: 'cloud2', label: '华北云校' },
+  { value: 'cloud3', label: '华南云校' },
+  { value: 'cloud4', label: '西部云校' }
+]
+
+// 云校选项（包含"全部云校"）
+const cloudSchoolOptionsWithAll = computed(() => [
+  { value: 'all', label: '全部云校' },
+  ...cloudSchoolOptions
+])
+
+// 学校选项（按云校分组）
+const schoolOptions = [
+  { value: 'school1', label: '清华大学', cloudSchool: 'cloud1' },
+  { value: 'school2', label: '北京大学', cloudSchool: 'cloud1' },
+  { value: 'school3', label: '复旦大学', cloudSchool: 'cloud1' },
+  { value: 'school4', label: '上海交通大学', cloudSchool: 'cloud1' },
+  { value: 'school5', label: '浙江大学', cloudSchool: 'cloud2' },
+  { value: 'school6', label: '南京大学', cloudSchool: 'cloud2' },
+  { value: 'school7', label: '武汉大学', cloudSchool: 'cloud3' },
+  { value: 'school8', label: '华中科技大学', cloudSchool: 'cloud3' },
+  { value: 'school9', label: '中山大学', cloudSchool: 'cloud3' },
+  { value: 'school10', label: '四川大学', cloudSchool: 'cloud4' }
+]
+
+// 年级选项
+const gradeOptions = [
+  { value: 'grade1', label: '高一' },
+  { value: 'grade2', label: '高二' },
+  { value: 'grade3', label: '高三' }
+]
+
+// 班级选项（按年级分组）
+const classOptions = [
+  { value: 'class1', label: '1班', grade: 'grade1' },
+  { value: 'class2', label: '2班', grade: 'grade1' },
+  { value: 'class3', label: '3班', grade: 'grade1' },
+  { value: 'class4', label: '4班', grade: 'grade2' },
+  { value: 'class5', label: '5班', grade: 'grade2' },
+  { value: 'class6', label: '6班', grade: 'grade2' },
+  { value: 'class7', label: '7班', grade: 'grade3' },
+  { value: 'class8', label: '8班', grade: 'grade3' },
+  { value: 'class9', label: '9班', grade: 'grade3' }
+]
+
+// 科目选项
+const subjectOptions = [
+  { 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', label: '政治' }
+]
+
+// 学生层次选项
+const studentLevelOptions = [
+  { value: 'undergraduate', label: '本科' },
+  { value: 'special_control', label: '特控' },
+  { value: 'top_tier', label: '拔尖' }
+]
+
+// 科目选项（包含"全部科目"）
+const subjectOptionsWithAll = computed(() => [
+  { value: 'all', label: '全部科目' },
+  ...subjectOptions
+])
+
+// 学生层次选项（包含"全部"）
+const studentLevelOptionsWithAll = computed(() => [
+  { value: 'all', label: '全部' },
+  ...studentLevelOptions
+])
+
+// 根据云校筛选学校选项
+const filteredSchoolOptions = computed(() => {
+  if (!filters.value.cloudSchool || filters.value.cloudSchool === 'all') {
+    return schoolOptions
+  }
+  return schoolOptions.filter(item => item.cloudSchool === filters.value.cloudSchool)
+})
+
+// 根据云校筛选学校选项（包含"全部学校"）
+const filteredSchoolOptionsWithAll = computed(() => [
+  { value: 'all', label: '全部学校' },
+  ...filteredSchoolOptions.value
+])
+
+// 根据年级筛选班级选项
+const filteredClassOptions = computed(() => {
+  if (!filters.value.grade) {
+    return classOptions
+  }
+  return classOptions.filter(item => item.grade === filters.value.grade)
+})
+
+// 年级是否可用（需要先选择学校）
+const isGradeEnabled = computed(() => {
+  return !!filters.value.school
+})
+
+// 班级是否可用（需要先选择年级）
+const isClassEnabled = computed(() => {
+  return !!filters.value.grade
+})
+
+// 处理云校变化
+function handleCloudSchoolChange() {
+  // 清空学校、年级、班级选择
+  filters.value.school = undefined
+  filters.value.grade = undefined
+  filters.value.class = undefined
+}
+
+// 处理学校变化
+function handleSchoolChange() {
+  // 清空年级和班级选择
+  filters.value.grade = undefined
+  filters.value.class = undefined
+}
+
+// 处理年级变化
+function handleGradeChange() {
+  // 清空班级选择
+  filters.value.class = undefined
+}
+
+// 处理筛选变化
+function handleFilterChange() {
+  // 如果云校变化，清空学校选择
+  if (filters.value.cloudSchool && filters.value.cloudSchool !== 'all') {
+    const schoolBelongsToCloud = schoolOptions.find(s => s.value === filters.value.school)
+    if (schoolBelongsToCloud && schoolBelongsToCloud.cloudSchool !== filters.value.cloudSchool) {
+      filters.value.school = undefined
+    }
+  }
+  // 如果年级变化，清空班级选择
+  if (filters.value.grade) {
+    const classBelongsToGrade = classOptions.find(c => c.value === filters.value.class)
+    if (classBelongsToGrade && classBelongsToGrade.grade !== filters.value.grade) {
+      filters.value.class = undefined
+    }
+  }
+}
+
+// 重置筛选条件
+function resetFilters() {
+  filters.value = {
+    cloudSchool: 'all',
+    school: undefined,
+    grade: undefined,
+    class: undefined,
+    subject: 'all',
+    studentLevel: 'all'
+  }
+}
+
+// 积分排行榜动态列配置（年级和班级列根据筛选条件显示）
+const pointsColumns = computed(() => {
+  const columns = [
+    { title: '排名', dataIndex: 'rank', key: 'rank', width: 80 },
+    { title: '学员姓名', dataIndex: 'name', key: 'name' },
+    { title: '学校', dataIndex: 'school', key: 'school' }
+  ]
+  
+  // 仅当选择了年级筛选条件时才显示年级列
+  if (filters.value.grade) {
+    columns.push({ title: '年级', dataIndex: 'grade', key: 'grade' })
+  }
+  
+  // 仅当选择了班级筛选条件时才显示班级列
+  if (filters.value.class) {
+    columns.push({ title: '班级', dataIndex: 'class', key: 'class' })
+  }
+  
+  columns.push({ title: '总积分', dataIndex: 'totalPoints', key: 'totalPoints' })
+  
+  return columns
+})
+
+// 获取排名样式类
+function getRankClass(rank) {
+  if (rank === 1) return 'rank-gold'
+  if (rank === 2) return 'rank-silver'
+  if (rank === 3) return 'rank-bronze'
+  return ''
+}
+
+// 获取头像颜色
+function getAvatarColor(name) {
+  const colors = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae', '#1890ff', '#52c41a', '#eb2f96', '#722ed1']
+  const index = name.charCodeAt(0) % colors.length
+  return colors[index]
+}
+
+// 积分排行榜表格数据
+const pointsTableData = computed(() => {
+  return pointsData.value.map(item => ({
+    key: item.key,
+    rank: item.rank,
+    name: item.user,
+    school: item.school,
+    grade: item.grade,
+    class: item.class,
+    totalPoints: item.value
+  }))
+})
+
+// 完成知识点数量排行榜动态列配置
+const coursesColumns = computed(() => {
+  const columns = [
+    { title: '排名', dataIndex: 'rank', key: 'rank', width: 80 },
+    { title: '学员姓名', dataIndex: 'name', key: 'name' },
+    { title: '学校', dataIndex: 'school', key: 'school' }
+  ]
+  
+  // 仅当选择了年级筛选条件时才显示年级列
+  if (filters.value.grade) {
+    columns.push({ title: '年级', dataIndex: 'grade', key: 'grade' })
+  }
+  
+  // 仅当选择了班级筛选条件时才显示班级列
+  if (filters.value.class) {
+    columns.push({ title: '班级', dataIndex: 'class', key: 'class' })
+  }
+  
+  columns.push({ title: '完成知识点数', dataIndex: 'totalCourses', key: 'totalCourses' })
+  
+  return columns
+})
+
+// 完成知识点数量排行榜表格数据
+const coursesTableData = computed(() => {
+  return coursesData.value.map(item => ({
+    key: item.key,
+    rank: item.rank,
+    name: item.user,
+    school: item.school,
+    grade: item.grade,
+    class: item.class,
+    totalCourses: item.value
+  }))
+})
+
+// 互动排行榜动态列配置
+const likesColumns = computed(() => {
+  const columns = [
+    { title: '排名', dataIndex: 'rank', key: 'rank', width: 80 },
+    { title: '学员姓名', dataIndex: 'name', key: 'name' },
+    { title: '学校', dataIndex: 'school', key: 'school' }
+  ]
+  
+  if (filters.value.grade) {
+    columns.push({ title: '年级', dataIndex: 'grade', key: 'grade' })
+  }
+  
+  if (filters.value.class) {
+    columns.push({ title: '班级', dataIndex: 'class', key: 'class' })
+  }
+  
+  columns.push({ title: '点赞+评论数', dataIndex: 'totalLikes', key: 'totalLikes' })
+  
+  return columns
+})
+
+// 互动排行榜表格数据
+const likesTableData = computed(() => {
+  return likesData.value.map(item => ({
+    key: item.key,
+    rank: item.rank,
+    name: item.user,
+    school: item.school,
+    grade: item.grade,
+    class: item.class,
+    totalLikes: item.value
+  }))
+})
+
+// 笔记精选排行榜动态列配置
+const answersColumns = computed(() => {
+  const columns = [
+    { title: '排名', dataIndex: 'rank', key: 'rank', width: 80 },
+    { title: '学员姓名', dataIndex: 'name', key: 'name' },
+    { title: '学校', dataIndex: 'school', key: 'school' }
+  ]
+  
+  if (filters.value.grade) {
+    columns.push({ title: '年级', dataIndex: 'grade', key: 'grade' })
+  }
+  
+  if (filters.value.class) {
+    columns.push({ title: '班级', dataIndex: 'class', key: 'class' })
+  }
+  
+  columns.push({ title: '精选次数', dataIndex: 'totalAnswers', key: 'totalAnswers' })
+  
+  return columns
+})
+
+// 笔记精选排行榜表格数据
+const answersTableData = computed(() => {
+  return answersData.value.map(item => ({
+    key: item.key,
+    rank: item.rank,
+    name: item.user,
+    school: item.school,
+    grade: item.grade,
+    class: item.class,
+    totalAnswers: item.value
+  }))
+})
+
+// 年级与班级的合法映射（确保级联关系正确）
+// grade1(高一) -> class1,class2,class3 | grade2(高二) -> class4,class5,class6 | grade3(高三) -> class7,class8,class9
+const gradeClassMap = {
+  '高一': ['1班', '2班', '3班'],
+  '高二': ['4班', '5班', '6班'],
+  '高三': ['7班', '8班', '9班']
+}
+
+// 真实姓名库（多样化）
+const namePool = [
+  '张伟', '李娜', '王芳', '刘洋', '陈静', '杨帆', '赵磊', '黄丽', '周鑫', '吴超',
+  '郑浩', '孙婷', '马强', '朱敏', '胡杰', '林晓', '何雪', '高峰', '罗燕', '梁宇',
+  '宋涛', '唐欣', '许明', '邓华', '冯悦', '韩冰', '曹阳', '彭博', '董颖', '谢凯',
+  '苏雨', '蒋琳', '叶飞', '方圆', '石磊', '熊伟', '潘慧', '江涛', '史晨', '顾莹',
+  '毛俊', '邵丹', '万鹏', '钱进', '严格', '覃雅', '武斌', '程远', '傅玲', '卢昊'
+]
+
+// 生成模拟数据（确定性、全覆盖）
+function generateMockData(type) {
+  const records = []
+  let keyCounter = 1
+
+  // 遍历所有学校（覆盖所有云校）
+  schoolOptions.forEach((schoolOpt, schoolIdx) => {
+    const schoolLabel = schoolOpt.label
+    const cloudSchoolValue = schoolOpt.cloudSchool
+
+    // 遍历所有年级
+    gradeOptions.forEach((gradeOpt, gradeIdx) => {
+      const gradeLabel = gradeOpt.label
+      const validClasses = gradeClassMap[gradeLabel]
+
+      // 遍历该年级对应的班级
+      validClasses.forEach((classLabel, classIdx) => {
+        // 遍历所有科目
+        subjectOptions.forEach((subjectOpt, subjectIdx) => {
+          const subjectLabel = subjectOpt.label
+
+          // 遍历所有学生层次
+          studentLevelOptions.forEach((levelOpt, levelIdx) => {
+            const levelLabel = levelOpt.label
+
+            // 每个组合生成2名学生，确保数据丰富
+            for (let i = 0; i < 2; i++) {
+              const nameIndex = (schoolIdx * 6 + gradeIdx * 3 + classIdx + subjectIdx * 2 + levelIdx + i * 7) % namePool.length
+              const name = namePool[nameIndex]
+
+              let value
+              // 使用确定性算法生成数值，避免每次刷新变化
+              const seed = schoolIdx * 1000 + gradeIdx * 100 + classIdx * 30 + subjectIdx * 10 + levelIdx * 3 + i
+              switch (type) {
+                case 'points':
+                  value = 15000 - seed * 47 % 12000 + 1000
+                  break
+                case 'courses':
+                  value = 120 - seed * 3 % 100 + 10
+                  break
+                case 'likes':
+                  value = 8000 - seed * 23 % 6000 + 200
+                  break
+                case 'answers':
+                  value = 600 - seed * 7 % 500 + 50
+                  break
+              }
+
+              records.push({
+                key: keyCounter++,
+                rank: 0,
+                user: name,
+                school: schoolLabel,
+                cloudSchool: cloudSchoolValue,
+                grade: gradeLabel,
+                class: classLabel,
+                subject: subjectLabel,
+                studentLevel: levelLabel,
+                value: Math.abs(value)
+              })
+            }
+          })
+        })
+      })
+    })
+  })
+
+  // 按数值降序排序并分配排名
+  return records
+    .sort((a, b) => b.value - a.value)
+    .map((item, index) => ({ ...item, rank: index + 1 }))
+}
+
+// 原始模拟数据（固定生成，不随筛选变化）
+const rawPointsData = generateMockData('points')
+const rawCoursesData = generateMockData('courses')
+const rawLikesData = generateMockData('likes')
+const rawAnswersData = generateMockData('answers')
+
+// 筛选后的数据
+const pointsData = computed(() => filterData(rawPointsData))
+const coursesData = computed(() => filterData(rawCoursesData))
+const likesData = computed(() => filterData(rawLikesData))
+const answersData = computed(() => filterData(rawAnswersData))
+
+// 筛选数据函数
+function filterData(data) {
+  let filtered = [...data]
+
+  // 云校筛选（通过学校的cloudSchool字段匹配）
+  if (filters.value.cloudSchool && filters.value.cloudSchool !== 'all') {
+    filtered = filtered.filter(item => item.cloudSchool === filters.value.cloudSchool)
+  }
+
+  // 学校筛选
+  if (filters.value.school && filters.value.school !== 'all') {
+    const schoolLabel = schoolOptions.find(s => s.value === filters.value.school)?.label
+    if (schoolLabel) filtered = filtered.filter(item => item.school === schoolLabel)
+  }
+
+  // 年级筛选
+  if (filters.value.grade) {
+    const gradeLabel = gradeOptions.find(g => g.value === filters.value.grade)?.label
+    if (gradeLabel) filtered = filtered.filter(item => item.grade === gradeLabel)
+  }
+
+  // 班级筛选
+  if (filters.value.class) {
+    const classLabel = classOptions.find(c => c.value === filters.value.class)?.label
+    if (classLabel) filtered = filtered.filter(item => item.class === classLabel)
+  }
+
+  // 科目筛选
+  if (filters.value.subject && filters.value.subject !== 'all') {
+    const subjectLabel = subjectOptions.find(s => s.value === filters.value.subject)?.label
+    if (subjectLabel) filtered = filtered.filter(item => item.subject === subjectLabel)
+  }
+
+  // 学生层次筛选
+  if (filters.value.studentLevel && filters.value.studentLevel !== 'all') {
+    const levelLabel = studentLevelOptions.find(l => l.value === filters.value.studentLevel)?.label
+    if (levelLabel) filtered = filtered.filter(item => item.studentLevel === levelLabel)
+  }
+
+  // 重新计算排名
+  return filtered.map((item, index) => ({
+    ...item,
+    rank: index + 1
+  }))
+}
+
+// 导出表格数据
+function handleExport(type) {
+  // 根据类型获取对应的数据和列配置
+  let data = []
+  let columns = []
+  let filename = ''
+  
+  if (type === 'points') {
+    data = pointsTableData.value
+    columns = pointsColumns.value
+    filename = '积分排行榜'
+  } else if (type === 'courses') {
+    data = coursesTableData.value
+    columns = coursesColumns.value
+    filename = '完成知识点排行榜'
+  } else if (type === 'likes') {
+    data = likesTableData.value
+    columns = likesColumns.value
+    filename = '互动排行榜'
+  } else if (type === 'answers') {
+    data = answersTableData.value
+    columns = answersColumns.value
+    filename = '笔记精选排行榜'
+  }
+  
+  if (!data.length || !columns.length) return
+  
+  // 生成CSV内容
+  const headers = columns.map(col => col.title).join(',')
+  const rows = data.map(row => {
+    return columns.map(col => {
+      const val = row[col.dataIndex]
+      // 处理可能包含逗号的字符串
+      return typeof val === 'string' && val.includes(',') ? `"${val}"` : val
+    }).join(',')
+  })
+  
+  const csvContent = '\uFEFF' + [headers, ...rows].join('\n') // 添加BOM以支持中文
+  
+  // 创建下载链接
+  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
+  const link = document.createElement('a')
+  const url = URL.createObjectURL(blob)
+  link.setAttribute('href', url)
+  link.setAttribute('download', `${filename}.csv`)
+  link.style.visibility = 'hidden'
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
+</script>
+
+<style scoped>
+.leaderboard-page {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 32px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ===== 顶部导航栏 (复用 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;
+  flex-shrink: 0;
+  margin: -32px -32px 0 -32px;
+  width: calc(100% + 64px);
+  border-radius: 16px 16px 0 0;
+}
+
+.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);
+}
+
+/* ===== 底部版权 (复用 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);
+  flex-shrink: 0;
+  margin: auto -32px -32px -32px;
+  width: calc(100% + 64px);
+  border-radius: 0 0 16px 16px;
+}
+
+/* 响应式适配 */
+@media (max-width: 768px) {
+  .portal-header {
+    height: 56px;
+    padding: 0 20px;
+    margin: -32px -32px 0 -32px;
+    width: calc(100% + 64px);
+  }
+  .user-name {
+    display: none;
+  }
+  .user-info-wrap {
+    padding: 6px 8px;
+    gap: 6px;
+  }
+  .portal-footer {
+    padding: 16px 0 20px;
+    font-size: 11px;
+    margin: auto -32px -32px -32px;
+    width: calc(100% + 64px);
+  }
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  margin-bottom: 32px;
+}
+
+.back-button {
+  position: absolute;
+  left: 0;
+  color: #64748b;
+  border-color: #e2e8f0;
+}
+
+.back-button:hover {
+  color: #0052d9;
+  border-color: #0052d9;
+  background: transparent;
+}
+
+.page-title {
+  font-size: 28px;
+  font-weight: 600;
+  color: #1e293b;
+  margin: 0;
+  text-align: center;
+  letter-spacing: 0.5px;
+}
+
+/* 筛选区域样式 */
+.filter-section {
+  background: #f8fafc;
+  border-radius: 12px;
+  padding: 20px 24px;
+  margin-bottom: 32px;
+  border: 1px solid #f1f5f9;
+}
+
+/* 筛选头部 */
+.filter-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+/* 筛选提示 */
+.filter-tips {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tips-icon {
+  color: #0052d9;
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.tips-text {
+  font-size: 14px;
+  color: #475569;
+}
+
+.tips-highlight {
+  color: #0052d9;
+  font-weight: 600;
+}
+
+.filter-row {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 20px;
+}
+
+.filter-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.filter-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #334155;
+}
+
+.label-status {
+  font-size: 11px;
+  color: #059669;
+  font-weight: 500;
+  padding: 2px 8px;
+  background: #dcfce7;
+  border-radius: 12px;
+  border: 1px solid #bbf7d0;
+}
+
+.label-status.disabled {
+  color: #64748b;
+  background: #f1f5f9;
+  border-color: #e2e8f0;
+}
+
+.filter-select {
+  width: 100%;
+}
+
+@media (max-width: 1400px) {
+  .filter-row {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 1200px) {
+  .filter-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .filter-row {
+    grid-template-columns: 1fr;
+  }
+  
+  .filter-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
+}
+
+/* 标签页工具栏 */
+.tab-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+/* 时间筛选器 */
+.time-filter-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.time-filter-btn {
+  padding: 6px 18px;
+  border-radius: 20px;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+  color: #64748b;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  outline: none;
+  line-height: 1.5;
+}
+
+.time-filter-btn:hover {
+  border-color: #0052d9;
+  color: #0052d9;
+  background: #eff4ff;
+}
+
+.time-filter-btn--active {
+  background: #0052d9;
+  border-color: #0052d9;
+  color: #ffffff;
+  box-shadow: 0 2px 8px rgba(0, 82, 217, 0.25);
+}
+
+.time-filter-btn--active:hover {
+  background: #003eb3;
+  border-color: #003eb3;
+  color: #ffffff;
+}
+
+.leaderboard-tabs {
+  min-height: 400px;
+}
+
+.leaderboard-table {
+  margin-top: 24px;
+  border-radius: 12px;
+  border: 1px solid #f1f5f9;
+  overflow: hidden;
+}
+
+/* 排名徽章样式 */
+.rank-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  font-weight: 600;
+  font-size: 14px;
+  color: #475569;
+  background: #f1f5f9;
+}
+
+.rank-gold {
+  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
+  color: white;
+  position: relative;
+  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
+}
+
+.rank-gold::before {
+  content: '🥇';
+  font-size: 20px;
+}
+
+.rank-silver {
+  background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
+  color: white;
+  position: relative;
+  box-shadow: 0 2px 8px rgba(148, 163, 184, 0.3);
+}
+
+.rank-silver::before {
+  content: '🥈';
+  font-size: 20px;
+}
+
+.rank-bronze {
+  background: linear-gradient(135deg, #fdba74 0%, #d97706 100%);
+  color: white;
+  position: relative;
+  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
+}
+
+.rank-bronze::before {
+  content: '🥉';
+  font-size: 20px;
+}
+
+/* 用户单元格样式 */
+.user-cell {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.user-name {
+  font-weight: 500;
+  color: #1e293b;
+}
+
+/* 数值单元格样式 */
+.value-cell {
+  font-weight: 600;
+  color: #0ea5e9;
+}
+
+/* 时间范围选择器 */
+.date-range-picker {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 16px;
+  padding: 5px 14px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 20px;
+  transition: all 0.2s ease;
+}
+
+.date-range-picker--disabled {
+  background: #f1f5f9;
+  border-color: #e2e8f0;
+  opacity: 0.85;
+}
+
+.date-range-label {
+  font-size: 13px;
+  color: #475569;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.date-input {
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 3px 8px;
+  font-size: 13px;
+  color: #334155;
+  background: #ffffff;
+  outline: none;
+  cursor: pointer;
+  transition: border-color 0.2s ease;
+  height: 28px;
+}
+
+.date-input:focus {
+  border-color: #0052d9;
+  box-shadow: 0 0 0 2px rgba(0, 82, 217, 0.1);
+}
+
+.date-input:disabled {
+  background: #f8fafc;
+  color: #94a3b8;
+  cursor: not-allowed;
+  border-color: #e2e8f0;
+}
+
+.date-range-sep {
+  font-size: 13px;
+  color: #94a3b8;
+}
+
+.date-range-tip {
+  font-size: 12px;
+  color: #0052d9;
+  white-space: nowrap;
+}
+
+/* Ant Design Tabs 样式覆盖 */
+:deep(.ant-tabs-nav) {
+  margin-bottom: 24px;
+}
+
+:deep(.ant-tabs-tab) {
+  font-size: 16px;
+  padding: 12px 20px;
+  color: #64748b;
+}
+
+:deep(.ant-tabs-tab-active) {
+  font-weight: 600;
+  color: #0052d9 !important;
+}
+
+:deep(.ant-table) {
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+:deep(.ant-table-thead > tr > th) {
+  background: #f8fafc;
+  font-weight: 600;
+  color: #334155;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+:deep(.ant-table-tbody > tr:hover > td) {
+  background: #f0fdfa;
+}
+</style>
diff --git a/src/components/LearningBehaviorReport.vue b/src/components/LearningBehaviorReport.vue
new file mode 100644
index 0000000..21b8516
--- /dev/null
+++ b/src/components/LearningBehaviorReport.vue
@@ -0,0 +1,2292 @@
+<template>
+  <div class="learning-behavior-report">
+    <!-- 顶部导航栏 (复用 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="page-header">
+      <t-button variant="text" @click="goBack" class="back-btn">
+        <template #icon>
+          <t-icon name="chevron-left" />
+        </template>
+        返回首页
+      </t-button>
+      <h1 class="page-title">学习行为报告</h1>
+      <p class="page-subtitle">学员学习行为数据统计与分析</p>
+    </div>
+
+    <!-- 数据展示区域 -->
+    <div class="data-container">
+      <!-- 筛选控制区 -->
+      <div class="global-filters">
+        <div class="filter-header">
+          <span class="filter-title">
+            <t-icon name="filter" size="16" />
+            筛选条件
+          </span>
+          <div class="filter-actions">
+            <t-button size="small" variant="outline" @click="handleResetFilters">
+              <template #icon><t-icon name="refresh" /></template>
+              重置
+            </t-button>
+            <t-button size="small" theme="primary" @click="handleSearch">
+              <template #icon><t-icon name="search" /></template>
+              查询
+            </t-button>
+          </div>
+        </div>
+        <div class="filter-content">
+          <!-- 组织架构筛选 -->
+          <div class="filter-section">
+            <div class="section-label">组织架构</div>
+            <div class="section-items">
+              <div class="filter-item">
+                <span class="filter-label">云校</span>
+                <t-select
+                  v-model="selectedCloudSchool"
+                  :options="cloudSchoolOptions"
+                  placeholder="请选择"
+                  style="width: 130px;"
+                  filterable
+                  @change="handleCloudSchoolChange"
+                />
+              </div>
+              <div class="filter-item">
+                <span class="filter-label">学校</span>
+                <t-select
+                  v-model="selectedSchool"
+                  :options="schoolOptions"
+                  placeholder="请选择"
+                  style="width: 130px;"
+                  filterable
+                  clearable
+                  @change="handleSchoolChange"
+                />
+              </div>
+              <div class="filter-item">
+                <span class="filter-label">年级</span>
+                <t-select
+                  v-model="selectedGrade"
+                  :options="gradeOptions"
+                  placeholder="请选择"
+                  style="width: 100px;"
+                  :disabled="!selectedSchool"
+                  clearable
+                  @change="handleGradeChange"
+                />
+              </div>
+              <div class="filter-item">
+                <span class="filter-label">班级</span>
+                <t-select
+                  v-model="selectedClass"
+                  :options="classOptions"
+                  placeholder="请选择"
+                  style="width: 100px;"
+                  :disabled="!selectedGrade"
+                  filterable
+                  clearable
+                  @change="handleClassChange"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="section-divider"></div>
+          <!-- 范围筛选 -->
+          <div class="filter-section">
+            <div class="section-label">范围筛选</div>
+            <div class="section-items">
+              <div class="filter-item">
+                <span class="filter-label">科目</span>
+                <t-select
+                  v-model="selectedSubject"
+                  :options="subjectOptions"
+                  placeholder="请选择"
+                  style="width: 100px;"
+                  @change="handleSubjectChange"
+                />
+              </div>
+              <div class="filter-item">
+                <span class="filter-label">层次</span>
+                <t-select
+                  v-model="selectedLevel"
+                  :options="levelOptions"
+                  placeholder="请选择"
+                  style="width: 100px;"
+                  @change="handleLevelChange"
+                />
+              </div>
+              <div class="filter-item filter-item-time">
+                <span class="filter-label">时间</span>
+                <div class="date-picker-wrapper">
+                  <div class="date-picker-row">
+                    <a-range-picker
+                      v-model:value="dateRange"
+                      format="YYYY-MM-DD"
+                      :placeholder="['开始', '结束']"
+                      :disabled-date="disabledDate"
+                      :status="dateRangeError ? 'error' : ''"
+                      style="width: 220px;"
+                      @calendar-change="handleCalendarChange"
+                      @change="handleDateChange"
+                    />
+                    <span class="date-range-hint">
+                      <exclamation-circle-outlined class="hint-icon" />
+                      最多查询 30 天
+                    </span>
+                  </div>
+                  <div v-if="dateRangeError" class="date-range-error">
+                    <exclamation-circle-outlined class="error-icon" />
+                    {{ dateRangeError }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 数据表格区域 -->
+      <t-card class="table-card">
+        <template #header>
+          <div class="card-header">
+            <div class="card-header-top">
+              <span class="card-title">学习行为数据明细表</span>
+               
+            </div>
+          </div>
+        </template>
+        <div class="action-group">
+          <t-button theme="primary" variant="outline" size="small" @click="showExportModal = true">
+            <template #icon>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style="margin-right: 4px;">
+                <path d="M12 16L12 8M12 16L9 13M12 16L15 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M5 20H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </template>
+            导出数据
+          </t-button>
+          <t-button theme="primary" variant="outline" size="small" @click="openColumnEditor">
+            <template #icon>
+              <t-icon name="setting" />
+            </template>
+            编辑列
+          </t-button>
+        </div>
+        <div class="table-wrapper">
+          <a-table
+            :data-source="tableData"
+            :columns="columns"
+            row-key="id"
+            :bordered="true"
+            :scroll="{ x: 'max-content' }"
+            size="small"
+            :pagination="pagination"
+          >
+            <!-- 自定义列标题 -->
+            <template #headerCell="{ column }">
+              <a-tooltip 
+                v-if="column.tooltip" 
+                :title="column.tooltip" 
+                placement="top"
+                :overlay-style="{ zIndex: 3000 }"
+              >
+                <span class="table-header-with-tooltip">{{ column.title }}</span>
+              </a-tooltip>
+              <span v-else>{{ column.title }}</span>
+            </template>
+            <!-- 自定义单元格格式化 -->
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'avgStudyDuration'">
+                <span class="duration-cell">{{ formatDuration(record.avgStudyDuration) }}</span>
+              </template>
+            </template>
+          </a-table>
+        </div>
+      </t-card>
+
+      <!-- 统计图表区域 -->
+      <t-card class="chart-card">
+        <template #header>
+          <div class="card-header">
+            <div class="header-left">
+              <span class="card-title">数据趋势图</span>
+              
+            </div>
+            <div class="chart-controls">
+              <div class="control-item">
+                <label class="control-label">
+                  <t-icon name="chart" size="16" />
+                  <span>展示指标</span>
+                </label>
+                <t-select
+                  v-model="selectedMetrics"
+                  :options="metricOptions"
+                  placeholder="选择展示指标"
+                  multiple
+                  clearable
+                  :max="10"
+                  style="width: 400px"
+                  class="metrics-select"
+                />
+                <span class="metric-count">{{ selectedMetrics.length }}/{{ metricOptions.length }}</span>
+                <div class="quick-actions">
+                  <t-button
+                    size="small"
+                    variant="text"
+                    @click="selectAllMetrics"
+                    :disabled="selectedMetrics.length === metricOptions.length"
+                  >
+                    全选
+                  </t-button>
+                  <t-button
+                    size="small"
+                    variant="text"
+                    @click="clearAllMetrics"
+                    :disabled="selectedMetrics.length === 0"
+                  >
+                    清空
+                  </t-button>
+                </div>
+              </div>
+              <div class="control-divider"></div>
+              <div class="control-item">
+                <label class="control-label">
+                  <t-icon name="chart-bar" size="16" />
+                  <span>图表类型</span>
+                </label>
+                <t-radio-group v-model="chartType" variant="default-filled">
+                  <t-radio-button value="line">
+                    <t-icon name="chart-line" size="14" style="margin-right: 4px;" />
+                    折线图
+                  </t-radio-button>
+                  <t-radio-button value="bar">
+                    <t-icon name="chart-bar" size="14" style="margin-right: 4px;" />
+                    柱状图
+                  </t-radio-button>
+                </t-radio-group>
+              </div>
+            </div>
+          </div>
+        </template>
+        <div ref="chartContainer" class="chart-container"></div>
+      </t-card>
+    </div>
+
+    <!-- 导出确认模态框 -->
+    <t-dialog
+      v-model:visible="showExportModal"
+      header="确认导出数据"
+      :confirm-btn="{ content: '确定导出', theme: 'primary', loading: isExporting }"
+      :cancel-btn="{ content: '取消' }"
+      @confirm="handleExportData"
+      @close="showExportModal = false"
+      width="600px"
+    >
+      <div class="export-modal-content">
+        <p class="export-tip">即将导出符合以下筛选条件的数据：</p>
+        <div class="export-filters">
+          <div class="export-filter-item">
+            <span class="export-filter-label">云校：</span>
+            <t-select
+              v-model="selectedCloudSchool"
+              :options="cloudSchoolOptions"
+              placeholder="请选择"
+              style="width: 130px;"
+              filterable
+              @change="handleCloudSchoolChange"
+            />
+          </div>
+          <div class="export-filter-item">
+            <span class="export-filter-label">学校：</span>
+            <t-select
+              v-model="selectedSchool"
+              :options="schoolOptions"
+              placeholder="请选择"
+              style="width: 130px;"
+              filterable
+              clearable
+              @change="handleSchoolChange"
+            />
+          </div>
+          <div class="export-filter-item">
+            <span class="export-filter-label">年级：</span>
+            <t-select
+              v-model="selectedGrade"
+              :options="gradeOptions"
+              placeholder="selectedSchool ? '请选择' : '请先选择学校'"
+              style="width: 130px;"
+              :disabled="!selectedSchool"
+              clearable
+              @change="handleGradeChange"
+            />
+          </div>
+          <div class="export-filter-item">
+            <span class="export-filter-label">班级：</span>
+            <t-select
+              v-model="selectedClass"
+              :options="classOptions"
+              placeholder="selectedGrade ? '请选择' : '请先选择年级'"
+              style="width: 130px;"
+              :disabled="!selectedGrade"
+              filterable
+              clearable
+              @change="handleClassChange"
+            />
+          </div>
+          <div class="export-filter-item">
+            <span class="export-filter-label">科目：</span>
+            <t-select
+              v-model="selectedSubject"
+              :options="subjectOptions"
+              placeholder="请选择"
+              style="width: 130px;"
+              @change="handleSubjectChange"
+            />
+          </div>
+          <div class="export-filter-item">
+            <span class="export-filter-label">层次：</span>
+            <t-select
+              v-model="selectedLevel"
+              :options="levelOptions"
+              placeholder="请选择"
+              style="width: 130px;"
+              @change="handleLevelChange"
+            />
+          </div>
+          <div class="export-filter-item" style="grid-column: 1 / -1; align-items: flex-start;">
+            <span class="export-filter-label" style="margin-top: 6px;">时间：</span>
+            <div class="date-picker-wrapper">
+              <div class="date-picker-row">
+                <a-range-picker
+                  v-model:value="exportDateRange"
+                  format="YYYY-MM-DD"
+                  :placeholder="['开始', '结束']"
+                  :disabled-date="disabledFutureDate"
+                  @change="handleExportDateChange"
+                  style="width: 240px;"
+                  :getPopupContainer="getPopupContainer"
+                />
+                <span class="date-range-hint">
+                  <InfoCircleOutlined class="hint-icon" />
+                  无时间范围限制
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </t-dialog>
+
+    <!-- 编辑列模态框 -->
+    <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>
+
+    <!-- 底部版权 (复用 PortalHomePage 风格) -->
+    <footer class="portal-footer">
+      <span>Copyright © 2025 &nbsp;QuanXue. All Rights Reserved.&nbsp; 渝ICP备05088888号</span>
+    </footer>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import { ExclamationCircleOutlined, InfoCircleOutlined } from '@ant-design/icons-vue'
+import { message } from 'ant-design-vue'
+import * as echarts from 'echarts'
+import dayjs from 'dayjs'
+import * as XLSX from 'xlsx'
+import draggable from 'vuedraggable'
+
+const router = useRouter()
+
+// 顶部导航栏状态
+const showDropdown = ref(false)
+
+// 返回首页 - 使用路由导航
+const goBack = () => {
+  router.push('/report-home')
+}
+
+// 处理退出登录
+const handleLogout = () => {
+  // 清除登录状态
+  localStorage.removeItem('token')
+  localStorage.removeItem('userInfo')
+  // 跳转到登录页
+  router.push('/login')
+  message.success('已退出登录')
+}
+
+// 图表相关
+const chartContainer = ref(null)
+const chartType = ref('line')
+let chartInstance = null
+let initTimer = null
+let mountTimer = null
+
+// 可展示指标配置
+const metricOptions = [
+  { label: '学员人数', value: 'studentCount' },
+  { label: '上线人数', value: 'onlineCount' },
+  { label: '打卡人数', value: 'checkInCount' },
+  { label: '当日退学人数', value: 'dailyDropoutCount' },
+  { label: '累计退学人数', value: 'totalDropoutCount' },
+  { label: '点赞人数', value: 'likedCount' },
+  { label: '评论人数', value: 'commentedCount' },
+  { label: '完成所有课程人数', value: 'homeworkCompletedCount' },
+  { label: '未打卡人数', value: 'noCheckInCount' },
+  { label: '笔记评精选人数', value: 'excellentHomeworkCount' },
+  { label: '平均学习时长(分钟)', value: 'avgStudyDuration' },
+  { label: '仅学无交人数', value: 'onlyStudyNoPayCount' },
+  { label: '攻克知识点数', value: 'masteredKnowledgePoints' },
+  { label: '未完成所有课程人数', value: 'incompleteCount' },
+  { label: '攻克失败人数', value: 'failedMasterCount' }
+]
+
+const metricColorMap = {
+  studentCount: '#5470c6',
+  onlineCount: '#91cc75',
+  checkInCount: '#2ba471',
+  dailyDropoutCount: '#ee6666',
+  totalDropoutCount: '#fc8452',
+  likedCount: '#fac858',
+  commentedCount: '#73c0de',
+  homeworkCompletedCount: '#3ba272',
+  noCheckInCount: '#9a60b4',
+  excellentHomeworkCount: '#ea7ccc',
+  avgStudyDuration: '#48b8d0',
+  onlyStudyNoPayCount: '#dd6b66',
+  masteredKnowledgePoints: '#c23531',
+  incompleteCount: '#61a0a8',
+  failedMasterCount: '#ee6666'
+}
+
+// 默认选中部分指标
+const selectedMetrics = ref(['studentCount', 'onlineCount', 'checkInCount', 'homeworkCompletedCount', 'onlyStudyNoPayCount'])
+
+const selectAllMetrics = () => {
+  selectedMetrics.value = metricOptions.map(opt => opt.value)
+  message.success('已选择所有指标')
+}
+
+const clearAllMetrics = () => {
+  selectedMetrics.value = []
+  message.info('已清空所有指标')
+}
+
+// 日期范围选择
+const dateRange = ref([dayjs().subtract(29, 'days'), dayjs()])
+const dates = ref([])
+const dateRangeError = ref('')
+
+// 最大查询跨度：30天
+const MAX_DAYS = 30
+
+// 禁用日期：用户选中第一个日期后，禁用距离超过30天的日期，且禁止选择未来日期
+// 使用 > MAX_DAYS 确保恰好30天（差值=30）时仍可选
+const disabledDate = (current) => {
+  // 禁止选择未来日期（今天及之前可选）
+  if (current && current.isAfter(dayjs().endOf('day'))) {
+    return true
+  }
+  if (!dates.value || dates.value.length === 0) return false
+  const tooLate = dates.value[0] && current.diff(dates.value[0], 'days') > MAX_DAYS
+  const tooEarly = dates.value[1] && dates.value[1].diff(current, 'days') > MAX_DAYS
+  return tooLate || tooEarly
+}
+
+// 仅禁用未来日期的函数（用于导出和其它不需要30天限制的地方）
+const disabledFutureDate = (current) => {
+  return current && current.isAfter(dayjs().endOf('day'))
+}
+
+// 日历面板变化时记录当前选中值（用于 disabledDate 动态计算）
+const handleCalendarChange = (val) => {
+  dates.value = val
+  dateRangeError.value = ''
+}
+
+// 验证日期范围，返回错误信息或空字符串
+const validateDateRange = (rangeVal) => {
+  if (!rangeVal || rangeVal.length !== 2) return ''
+  const [start, end] = rangeVal
+  if (!start || !end) return ''
+  // startOf('day') 截断时分秒，确保边界精确到天
+  const daysDiff = end.startOf('day').diff(start.startOf('day'), 'days')
+  if (daysDiff > MAX_DAYS) {
+    return `时间跨度不能超过 ${MAX_DAYS} 天，当前已选 ${daysDiff} 天，请重新选择`
+  }
+  return ''
+}
+
+// 云校选择
+const selectedCloudSchool = ref('all')
+const cloudSchoolOptions = [
+  { label: '所有云校', value: 'all' },
+  { label: '重庆八中云校', value: 'chongqing' },
+  { label: '河南云校', value: 'henan' },
+  { label: '安徽云校', value: 'anhui' }
+]
+
+// 学校选择
+const selectedSchool = ref('')
+const schoolOptions = [
+  { label: '重庆八中', value: 'chongqing8' },
+  { label: '河南郑州一中', value: 'henan1' },
+  { label: '安徽合肥一中', value: 'anhui1' },
+  { label: '四川成都七中', value: 'sichuan7' },
+  { label: '湖北武汉二中', value: 'hubei2' }
+]
+
+// 年级选择
+const selectedGrade = ref('')
+const gradeOptions = [
+  { label: '高一', value: 'g1' },
+  { label: '高二', value: 'g2' },
+  { label: '高三', value: 'g3' }
+]
+
+// 班级选择
+const selectedClass = ref('')
+const classOptions = [
+  { label: '1班', value: 'c1' },
+  { label: '2班', value: 'c2' },
+  { label: '3班', value: 'c3' },
+  { label: '4班', value: 'c4' },
+  { label: '5班', value: 'c5' },
+  { label: '6班', value: 'c6' }
+]
+
+// 科目选择
+const selectedSubject = ref('all')
+const subjectOptions = [
+  { label: '全部', value: 'all' },
+  { label: '语文', value: 'chinese' },
+  { label: '数学', value: 'math' },
+  { label: '英语', value: 'english' },
+  { label: '物理', value: 'physics' },
+  { label: '化学', value: 'chemistry' },
+  { label: '政治', value: 'politics' },
+  { label: '生物', value: 'biology' },
+  { label: '历史', value: 'history' },
+  { label: '地理', value: 'geography' }
+]
+
+// 学生层次选择
+const selectedLevel = ref('all')
+const levelOptions = [
+  { label: '全部', value: 'all' },
+  { label: '本科', value: 'undergraduate' },
+  { label: '特控', value: 'special' },
+  { label: '拔尖', value: 'top' }
+]
+
+// 分页配置
+const pagination = {
+  showSizeChanger: true,
+  showQuickJumper: true,
+  pageSizeOptions: ['10', '20', '50', '100'],
+  defaultPageSize: 10,
+  showTotal: (total) => `共 ${total} 条数据`
+}
+
+// 表格列配置（所有列）
+const allColumns = [
+  {
+    key: 'id',
+    dataIndex: 'id',
+    title: '序号',
+    width: 70,
+    align: 'center',
+    fixed: 'left'
+  },
+  {
+    key: 'date',
+    dataIndex: 'date',
+    title: '日期',
+    width: 110,
+    align: 'center',
+    fixed: 'left'
+  },
+  {
+    key: 'studentCount',
+    dataIndex: 'studentCount',
+    title: '学员人数',
+    width: 100,
+    align: 'right'
+  },
+  {
+    key: 'onlineCount',
+    dataIndex: 'onlineCount',
+    title: '上线人数',
+    tooltip: '上线标准=当日学习+答题时长>30秒',
+    width: 100,
+    align: 'right'
+  },
+  {
+    key: 'checkInCount',
+    dataIndex: 'checkInCount',
+    title: '打卡人数',
+    tooltip: '打卡标准=当日任意课程完成打卡，课程打卡指标需灵活设置',
+    width: 100,
+    align: 'right'
+  },
+  {
+    key: 'dailyDropoutCount',
+    dataIndex: 'dailyDropoutCount',
+    title: '当日退学人数',
+    width: 120,
+    align: 'right'
+  },
+  {
+    key: 'totalDropoutCount',
+    dataIndex: 'totalDropoutCount',
+    title: '累计退学人数',
+    width: 120,
+    align: 'right'
+  },
+  {
+    key: 'likedCount',
+    dataIndex: 'likedCount',
+    title: '点赞人数',
+    tooltip: '当日点赞人数（按人头去重）',
+    width: 110,
+    align: 'right'
+  },
+  {
+    key: 'commentedCount',
+    dataIndex: 'commentedCount',
+    title: '评论人数',
+    tooltip: '当日评论人数（按人头去重）',
+    width: 110,
+    align: 'right'
+  },
+  {
+    key: 'homeworkCompletedCount',
+    dataIndex: 'homeworkCompletedCount',
+    title: '完成所有课程人数',
+    tooltip: '当日所有课程完成打卡人数（按人头去重）',
+    width: 140,
+    align: 'right'
+  },
+  {
+    key: 'noCheckInCount',
+    dataIndex: 'noCheckInCount',
+    title: '未打卡人数',
+    tooltip: '当日所有课程未打卡',
+    width: 110,
+    align: 'right'
+  },
+  {
+    key: 'excellentHomeworkCount',
+    dataIndex: 'excellentHomeworkCount',
+    title: '笔记评精选人数',
+    tooltip: '当日笔记被评选为精选的人数（按人头去重）',
+    width: 140,
+    align: 'right'
+  },
+  {
+    key: 'avgStudyDuration',
+    dataIndex: 'avgStudyDuration',
+    title: '平均学习时长',
+    width: 120,
+    align: 'right'
+  },
+  {
+    key: 'onlyStudyNoPayCount',
+    dataIndex: 'onlyStudyNoPayCount',
+    title: '仅学无交人数',
+    tooltip: '当日仅参与学习，但没有提交动作的人数',
+    width: 120,
+    align: 'right'
+  },
+  {
+    key: 'masteredKnowledgePoints',
+    dataIndex: 'masteredKnowledgePoints',
+    title: '攻克知识点数',
+    tooltip: '当日所有人攻克知识点的数量',
+    width: 120,
+    align: 'right'
+  },
+  {
+    key: 'incompleteCount',
+    dataIndex: 'incompleteCount',
+    title: '未完成所有课程人数',
+    tooltip: '当日未完成所有课程的人数',
+    width: 140,
+    align: 'right'
+  },
+  {
+    key: 'failedMasterCount',
+    dataIndex: 'failedMasterCount',
+    title: '攻克失败人数',
+    tooltip: '当日最大重试后仍未掌握知识点的人数',
+    width: 120,
+    align: 'right'
+  }
+]
+
+// localStorage 键名
+const COLUMN_ORDER_KEY = 'learning_behavior_report_column_order'
+
+// 默认列顺序和可见性配置
+const defaultColumnConfig = [
+  { key: 'id', visible: true },
+  { key: 'date', visible: true },
+  { key: 'studentCount', visible: true },
+  { key: 'onlineCount', visible: true },
+  { key: 'checkInCount', visible: true },
+  { key: 'dailyDropoutCount', visible: true },
+  { key: 'totalDropoutCount', visible: true },
+  { key: 'likedCount', visible: true },
+  { key: 'commentedCount', visible: true },
+  { key: 'homeworkCompletedCount', visible: true },
+  { key: 'noCheckInCount', visible: true },
+  { key: 'excellentHomeworkCount', visible: true },
+  { key: 'avgStudyDuration', visible: true },
+  { key: 'onlyStudyNoPayCount', visible: true },
+  { key: 'masteredKnowledgePoints', visible: true },
+  { key: 'incompleteCount', visible: true },
+  { key: 'failedMasterCount', visible: true }
+]
+
+// 当前列配置（从localStorage恢复或使用默认）
+const columnConfig = ref([...defaultColumnConfig])
+
+// 是否有自定义列配置
+const hasCustomColumnOrder = ref(false)
+
+// 编辑列模态框状态
+const showColumnEditorModal = ref(false)
+const tempColumnList = ref([])
+
+// 动态列配置（计算属性）
+const columns = computed(() => {
+  const visibleConfig = columnConfig.value.filter(cfg => cfg.visible)
+  return visibleConfig.map(cfg => {
+    return allColumns.find(col => col.key === cfg.key)
+  }).filter(Boolean)
+})
+
+// 从 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 && defaultColumnConfig.some(dc => dc.key === item.key)
+      )) {
+        // 确保序号和日期列在最前面且可见
+        const fixedColumns = [
+          { key: 'id', visible: true },
+          { key: 'date', visible: true }
+        ]
+        const otherColumns = parsed.filter(item => item.key !== 'id' && item.key !== 'date')
+        columnConfig.value = [...fixedColumns, ...otherColumns]
+        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 resetColumnOrder = () => {
+  columnConfig.value = [...defaultColumnConfig]
+  hasCustomColumnOrder.value = false
+  try {
+    localStorage.removeItem(COLUMN_ORDER_KEY)
+    message.success('列配置已重置为默认')
+  } catch (error) {
+    console.error('Failed to reset column config:', error)
+  }
+}
+
+// 打开编辑列模态框
+const openColumnEditor = () => {
+  // 准备临时列列表，排除序号和日期列
+  tempColumnList.value = columnConfig.value
+    .filter(cfg => cfg.key !== 'id' && cfg.key !== 'date')
+    .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 = () => {
+  // 更新列配置，保持序号和日期列在最前面
+  const fixedColumns = [
+    { key: 'id', visible: true },
+    { key: 'date', visible: true }
+  ]
+  const otherColumns = tempColumnList.value.map(item => ({
+    key: item.key,
+    visible: item.visible
+  }))
+  columnConfig.value = [...fixedColumns, ...otherColumns]
+  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 reportData = ref([
+  {
+    id: 1,
+    date: '2026-03-01',
+    studentCount: 45,
+    onlineCount: 42,
+    checkInCount: 40,
+    dailyDropoutCount: 0,
+    totalDropoutCount: 2,
+    likedCount: 38,
+    commentedCount: 35,
+    homeworkCompletedCount: 40,
+    noCheckInCount: 3,
+    excellentHomeworkCount: 15,
+    avgStudyDuration: 125,
+    onlyStudyNoPayCount: 5,
+    masteredKnowledgePoints: 120,
+    incompleteCount: 5,
+    failedMasterCount: 3
+  },
+  {
+    id: 2,
+    date: '2026-03-01',
+    studentCount: 48,
+    onlineCount: 45,
+    checkInCount: 43,
+    dailyDropoutCount: 1,
+    totalDropoutCount: 3,
+    likedCount: 40,
+    commentedCount: 38,
+    homeworkCompletedCount: 42,
+    noCheckInCount: 4,
+    excellentHomeworkCount: 18,
+    avgStudyDuration: 132,
+    onlyStudyNoPayCount: 6,
+    masteredKnowledgePoints: 135,
+    incompleteCount: 6,
+    failedMasterCount: 4
+  },
+  {
+    id: 3,
+    date: '2026-03-01',
+    studentCount: 50,
+    onlineCount: 48,
+    checkInCount: 46,
+    dailyDropoutCount: 0,
+    totalDropoutCount: 1,
+    likedCount: 45,
+    commentedCount: 42,
+    homeworkCompletedCount: 46,
+    noCheckInCount: 2,
+    excellentHomeworkCount: 22,
+    avgStudyDuration: 145,
+    onlyStudyNoPayCount: 4,
+    masteredKnowledgePoints: 150,
+    incompleteCount: 4,
+    failedMasterCount: 2
+  },
+  {
+    id: 4,
+    date: '2026-03-02',
+    studentCount: 45,
+    onlineCount: 43,
+    checkInCount: 41,
+    dailyDropoutCount: 0,
+    totalDropoutCount: 2,
+    likedCount: 40,
+    commentedCount: 37,
+    homeworkCompletedCount: 41,
+    noCheckInCount: 2,
+    excellentHomeworkCount: 16,
+    avgStudyDuration: 128,
+    onlyStudyNoPayCount: 2,
+    masteredKnowledgePoints: 98,
+    incompleteCount: 2,
+    failedMasterCount: 1
+  },
+  {
+    id: 5,
+    date: '2026-03-02',
+    studentCount: 52,
+    onlineCount: 50,
+    checkInCount: 49,
+    dailyDropoutCount: 0,
+    totalDropoutCount: 0,
+    likedCount: 48,
+    commentedCount: 46,
+    homeworkCompletedCount: 49,
+    noCheckInCount: 1,
+    excellentHomeworkCount: 28,
+    avgStudyDuration: 156,
+    onlyStudyNoPayCount: 3,
+    masteredKnowledgePoints: 165,
+    incompleteCount: 3,
+    failedMasterCount: 2
+  },
+  {
+    id: 6,
+    date: '2026-03-03',
+    studentCount: 46,
+    onlineCount: 44,
+    checkInCount: 42,
+    dailyDropoutCount: 1,
+    totalDropoutCount: 2,
+    likedCount: 39,
+    commentedCount: 36,
+    homeworkCompletedCount: 40,
+    noCheckInCount: 3,
+    excellentHomeworkCount: 17,
+    avgStudyDuration: 138,
+    onlyStudyNoPayCount: 4,
+    masteredKnowledgePoints: 112,
+    incompleteCount: 4,
+    failedMasterCount: 3
+  },
+  {
+    id: 7,
+    date: '2026-03-03',
+    studentCount: 49,
+    onlineCount: 47,
+    checkInCount: 45,
+    dailyDropoutCount: 0,
+    totalDropoutCount: 1,
+    likedCount: 44,
+    commentedCount: 41,
+    homeworkCompletedCount: 45,
+    noCheckInCount: 2,
+    excellentHomeworkCount: 20,
+    avgStudyDuration: 142,
+    onlyStudyNoPayCount: 4,
+    masteredKnowledgePoints: 138,
+    incompleteCount: 4,
+    failedMasterCount: 2
+  },
+  {
+    id: 8,
+    date: '2026-03-04',
+    studentCount: 44,
+    onlineCount: 43,
+    checkInCount: 42,
+    dailyDropoutCount: 0,
+    totalDropoutCount: 1,
+    likedCount: 41,
+    commentedCount: 39,
+    homeworkCompletedCount: 42,
+    noCheckInCount: 1,
+    excellentHomeworkCount: 24,
+    avgStudyDuration: 162,
+    onlyStudyNoPayCount: 2,
+    masteredKnowledgePoints: 145,
+    incompleteCount: 2,
+    failedMasterCount: 1
+  },
+  {
+    id: 9,
+    date: '2026-03-04',
+    studentCount: 47,
+    onlineCount: 45,
+    checkInCount: 43,
+    dailyDropoutCount: 0,
+    totalDropoutCount: 2,
+    likedCount: 42,
+    commentedCount: 40,
+    homeworkCompletedCount: 43,
+    noCheckInCount: 2,
+    excellentHomeworkCount: 19,
+    avgStudyDuration: 135,
+    onlyStudyNoPayCount: 4,
+    masteredKnowledgePoints: 125,
+    incompleteCount: 4,
+    failedMasterCount: 2
+  },
+  {
+    id: 10,
+    date: '2026-03-05',
+    studentCount: 51,
+    onlineCount: 49,
+    checkInCount: 47,
+    dailyDropoutCount: 0,
+    totalDropoutCount: 1,
+    likedCount: 47,
+    commentedCount: 44,
+    homeworkCompletedCount: 47,
+    noCheckInCount: 2,
+    excellentHomeworkCount: 25,
+    avgStudyDuration: 148,
+    onlyStudyNoPayCount: 4,
+    masteredKnowledgePoints: 155,
+    incompleteCount: 4,
+    failedMasterCount: 3
+  }
+])
+
+// 筛选后数据（供图表联动使用）
+const filteredData = computed(() => {
+  let data = reportData.value
+  // 按日期排序
+  return [...data].sort((a, b) => dayjs(a.date).valueOf() - dayjs(b.date).valueOf())
+})
+
+// 表格数据
+const tableData = computed(() => {
+  return filteredData.value
+})
+
+// 格式化学习时长（分钟转为小时分钟格式）
+const formatDuration = (minutes) => {
+  if (!minutes && minutes !== 0) return '-'
+  const hours = Math.floor(minutes / 60)
+  const mins = minutes % 60
+  if (hours > 0) {
+    return `${hours}小时${mins}分钟`
+  }
+  return `${mins}分钟`
+}
+
+// 筛选器事件处理
+const handleCloudSchoolChange = (value) => {
+  const schoolName = cloudSchoolOptions.find(opt => opt.value === value)?.label || '所有云校'
+  message.success(`已选择：${schoolName}`)
+}
+
+const handleSchoolChange = (value) => {
+  selectedGrade.value = ''
+  selectedClass.value = ''
+  const schoolName = schoolOptions.find(opt => opt.value === value)?.label || ''
+  message.success(`已选择学校：${schoolName}，请继续选择年级`)
+}
+
+const handleGradeChange = (value) => {
+  selectedClass.value = ''
+  const gradeName = gradeOptions.find(opt => opt.value === value)?.label || ''
+  message.success(`已选择年级：${gradeName}，请继续选择班级`)
+}
+
+const handleClassChange = (value) => {
+  const className = classOptions.find(opt => opt.value === value)?.label || ''
+  message.success(`已选择班级：${className}`)
+}
+
+const handleSubjectChange = (value) => {
+  const subjectName = subjectOptions.find(opt => opt.value === value)?.label || '全部'
+  message.success(`已选择科目：${subjectName}`)
+}
+
+const handleLevelChange = (value) => {
+  const levelName = levelOptions.find(opt => opt.value === value)?.label || '全部'
+  message.success(`已选择学生层次：${levelName}`)
+}
+
+const handleDateChange = (rangeVal) => {
+  const error = validateDateRange(rangeVal)
+  if (error) {
+    dateRangeError.value = error
+    dateRange.value = null
+    dates.value = []
+    return
+  }
+  dateRangeError.value = ''
+  if (rangeVal && rangeVal.length === 2 && rangeVal[0] && rangeVal[1]) {
+    message.success(`已选择时间范围：${rangeVal[0].format('YYYY-MM-DD')} 至 ${rangeVal[1].format('YYYY-MM-DD')}`)
+  }
+  nextTick(() => updateChart())
+}
+
+// 导出模态框中的日期变化处理（无30天限制）
+const handleExportDateChange = (rangeVal) => {
+  if (rangeVal && rangeVal.length === 2 && rangeVal[0] && rangeVal[1]) {
+    message.success(`已选择时间范围：${rangeVal[0].format('YYYY-MM-DD')} 至 ${rangeVal[1].format('YYYY-MM-DD')}`)
+  }
+}
+
+// 解决模态框中日期选择器层级被遮挡的问题
+const getPopupContainer = () => document.body
+
+// 导出相关状态
+const showExportModal = ref(false)
+const isExporting = ref(false)
+const exportDateRange = ref(null)
+
+// 辅助方法：获取选项的 label
+const getOptionLabel = (options, value) => {
+  if (!value) {
+    return '全部'
+  }
+  const option = options.find(opt => opt.value === value)
+  return option ? option.label : value
+}
+
+// 处理导出数据
+const handleExportData = async () => {
+  if (filteredData.value.length === 0) {
+    message.warning('当前没有可导出的数据')
+    return
+  }
+
+  isExporting.value = true
+  try {
+    // 准备数据行
+    const rows = filteredData.value.map(item => {
+      const rowData = {}
+      columns.forEach(col => {
+        const key = col.key
+        const title = col.title || key
+        if (key === 'id') {
+          rowData[title] = item.id
+        } else if (key === 'date') {
+          rowData[title] = item.date
+        } else if (key === 'avgStudyDuration') {
+          rowData[title] = formatDuration(item[key])
+        } else {
+          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 handleResetFilters = () => {
+  selectedCloudSchool.value = 'all'
+  selectedSchool.value = ''
+  selectedGrade.value = ''
+  selectedClass.value = ''
+  selectedSubject.value = 'all'
+  selectedLevel.value = 'all'
+  dateRange.value = null
+  dates.value = []
+  dateRangeError.value = ''
+  message.success('已重置所有筛选条件')
+}
+
+// 查询
+const handleSearch = () => {
+  // 提交前二次校验，防止绕过
+  const error = validateDateRange(dateRange.value)
+  if (error) {
+    dateRangeError.value = error
+    message.error(error)
+    return
+  }
+  message.success('查询成功')
+  nextTick(() => updateChart())
+}
+
+// ==================== 图表逻辑 ====================
+const initChart = async () => {
+  try {
+    await nextTick()
+    if (initTimer) clearTimeout(initTimer)
+    initTimer = setTimeout(() => {
+      if (!chartContainer.value) return
+      if (chartInstance) {
+        chartInstance.dispose()
+        chartInstance = null
+      }
+      chartInstance = echarts.init(chartContainer.value)
+      updateChart()
+    }, 300)
+  } catch (error) {
+    console.error('Failed to initialize chart:', error)
+  }
+}
+
+const updateChart = () => {
+  if (!chartInstance) return
+  try {
+    const data = filteredData.value
+    const dates = data.map(item => item.date)
+
+    const series = selectedMetrics.value.map(metric => {
+      const metricLabel = metricOptions.find(opt => opt.value === metric)?.label || metric
+      const color = metricColorMap[metric] || '#5470c6'
+      return {
+        name: metricLabel,
+        type: chartType.value,
+        data: data.map(item => item[metric]),
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        itemStyle: { color },
+        lineStyle: { color, width: 2 },
+        areaStyle: chartType.value === 'line' ? {
+          color: {
+            type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
+            colorStops: [
+              { offset: 0, color: color + '40' },
+              { offset: 1, color: color + '05' }
+            ]
+          }
+        } : undefined,
+        emphasis: {
+          focus: 'series',
+          itemStyle: { shadowBlur: 10, shadowColor: color }
+        }
+      }
+    })
+
+    const option = {
+      animation: true,
+      animationDuration: 800,
+      animationEasing: 'cubicOut',
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: { type: 'cross', crossStyle: { color: '#999' } },
+        backgroundColor: 'rgba(255, 255, 255, 0.98)',
+        borderColor: '#e0e0e0',
+        borderWidth: 1,
+        padding: [12, 16],
+        textStyle: { fontSize: 13, color: '#333' },
+        extraCssText: 'box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 6px;'
+      },
+      legend: {
+        data: selectedMetrics.value.map(m => metricOptions.find(opt => opt.value === m)?.label || m),
+        top: 15,
+        type: 'scroll',
+        pageIconSize: 12,
+        pageTextStyle: { fontSize: 12 },
+        itemWidth: 16,
+        itemHeight: 10,
+        itemGap: 15,
+        textStyle: { fontSize: 12, color: '#666' }
+      },
+      grid: { left: '3%', right: '4%', bottom: '10%', top: '18%', containLabel: true },
+      toolbox: {
+        right: 20,
+        top: 10,
+        feature: {
+          saveAsImage: { title: '保存图片', pixelRatio: 2 },
+          dataView: { title: '数据视图', readOnly: true, lang: ['数据视图', '关闭', '刷新'] },
+          magicType: { type: ['line', 'bar'], title: { line: '切换为折线图', bar: '切换为柱状图' } },
+          restore: { title: '还原' }
+        }
+      },
+      xAxis: {
+        type: 'category',
+        boundaryGap: chartType.value === 'bar',
+        data: dates,
+        axisLabel: { rotate: 45, fontSize: 12, color: '#666' },
+        axisLine: { lineStyle: { color: '#e0e0e0' } }
+      },
+      yAxis: {
+        type: 'value',
+        nameTextStyle: { fontSize: 12, color: '#666' },
+        axisLabel: { fontSize: 12, color: '#666' },
+        axisLine: { show: true, lineStyle: { color: '#e0e0e0' } },
+        splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } }
+      },
+      series
+    }
+
+    chartInstance.setOption(option, true)
+  } catch (error) {
+    console.error('Failed to update chart:', error)
+  }
+}
+
+const handleResize = () => {
+  try { chartInstance?.resize() } catch (e) { /* ignore */ }
+}
+
+// 监听图表类型和指标变化
+watch([chartType, selectedMetrics], () => updateChart())
+
+// 监听筛选条件变化，联动更新图表
+watch([selectedCloudSchool, selectedSubject, selectedLevel, dateRange], () => {
+  nextTick(() => updateChart())
+})
+
+onMounted(() => {
+  // 加载保存的列配置
+  loadColumnOrder()
+  
+  if (mountTimer) clearTimeout(mountTimer)
+  mountTimer = setTimeout(() => {
+    initChart()
+  }, 200)
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  if (initTimer) clearTimeout(initTimer)
+  if (mountTimer) clearTimeout(mountTimer)
+  if (chartInstance) {
+    chartInstance.dispose()
+    chartInstance = null
+  }
+  window.removeEventListener('resize', handleResize)
+})
+</script>
+
+<style scoped>
+.learning-behavior-report {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ===== 顶部导航栏 (复用 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;
+  flex-shrink: 0;
+}
+
+.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);
+}
+
+/* ===== 底部版权 (复用 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);
+  flex-shrink: 0;
+  margin-top: auto;
+}
+
+/* 响应式适配 */
+@media (max-width: 768px) {
+  .portal-header {
+    height: 56px;
+    padding: 0 20px;
+  }
+  .user-name {
+    display: none;
+  }
+  .user-info-wrap {
+    padding: 6px 8px;
+    gap: 6px;
+  }
+  .portal-footer {
+    padding: 16px 0 20px;
+    font-size: 11px;
+  }
+}
+
+.page-header {
+  margin-bottom: 32px;
+  position: relative;
+}
+
+.back-btn {
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: #64748b;
+  transition: color 0.2s;
+}
+
+.back-btn:hover {
+  color: #0052d9;
+}
+
+.page-title {
+  font-size: 28px;
+  font-weight: 600;
+  color: #1e293b;
+  margin: 0 0 8px 0;
+  text-align: center;
+  letter-spacing: 0.5px;
+}
+
+.page-subtitle {
+  text-align: center;
+  font-size: 15px;
+  color: #64748b;
+  margin: 0;
+}
+
+/* 数据展示区域：统一容器 */
+.data-container {
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  border-radius: 16px;
+  padding: 32px;
+  margin-bottom: 24px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
+  transition: box-shadow 0.3s ease;
+}
+
+.data-container:hover {
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
+}
+
+/* 全局筛选控制区 */
+.global-filters {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 24px;
+  background: #f8fafc;
+  border: 1px solid #f1f5f9;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.filter-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 24px;
+  background: #f1f5f9;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.filter-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #334155;
+}
+
+.filter-title .t-icon {
+  color: #0052d9;
+}
+
+.filter-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.filter-content {
+  display: flex;
+  align-items: stretch;
+  padding: 0;
+  gap: 0;
+  flex-wrap: wrap;
+}
+
+.filter-section {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  padding: 16px 24px;
+  flex: 1;
+  min-width: 0;
+}
+
+.section-label {
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  font-weight: 600;
+  color: #64748b;
+  white-space: nowrap;
+  padding-right: 20px;
+  margin-right: 8px;
+  border-right: 2px solid #e2e8f0;
+  height: 24px;
+  line-height: 24px;
+}
+
+.section-items {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  flex-wrap: wrap;
+  padding-left: 16px;
+}
+
+.section-divider {
+  width: 1px;
+  align-self: stretch;
+  background: #e2e8f0;
+  margin: 12px 0;
+  flex-shrink: 0;
+}
+
+.filter-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.filter-item-time {
+  gap: 8px;
+}
+
+.date-picker-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.date-picker-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.date-range-hint {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 10px;
+  background: #fffbe6;
+  border: 1px solid #ffe58f;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #d48806;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.hint-icon {
+  font-size: 12px;
+  color: #faad14;
+}
+
+.date-range-error {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: #ff4d4f;
+  line-height: 1.4;
+  animation: fadeIn 0.2s ease;
+}
+
+.error-icon {
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.filter-label {
+  font-size: 14px;
+  color: #475569;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+/* 操作按钮组 */
+.action-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.table-card {
+  margin-bottom: 24px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
+  border: 1px solid #f1f5f9;
+  border-radius: 12px;
+}
+
+.card-header {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 8px;
+}
+
+.card-header-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1e293b;
+  white-space: nowrap;
+}
+
+/* 数据同步徽章 */
+.data-sync-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 12px;
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #16a34a;
+  white-space: nowrap;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.85;
+    transform: scale(0.98);
+  }
+}
+
+.table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.duration-cell {
+  color: #0ea5e9;
+  font-weight: 500;
+}
+
+/* 图表卡片 */
+.chart-card {
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
+  border: 1px solid #f1f5f9;
+  border-radius: 12px;
+  margin-bottom: 20px;
+}
+
+.chart-container {
+  width: 100%;
+  height: 500px;
+  background: #ffffff;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+/* 图表卡片 header 布局 */
+.chart-card .card-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.chart-controls {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.control-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.control-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #555;
+  white-space: nowrap;
+}
+
+.control-label .t-icon {
+  color: #0052d9;
+}
+
+.control-divider {
+  width: 1px;
+  height: 32px;
+  background: linear-gradient(180deg, transparent, #dcdfe6, transparent);
+  margin: 0 4px;
+}
+
+.metric-count {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 10px;
+  background: linear-gradient(135deg, #e6f4ff, #f0f5ff);
+  border: 1px solid #91d5ff;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #1890ff;
+  white-space: nowrap;
+}
+
+.quick-actions {
+  display: flex;
+  gap: 4px;
+  margin-left: 8px;
+}
+
+.quick-actions .t-button {
+  padding: 2px 8px;
+  font-size: 12px;
+  color: #1890ff;
+}
+
+.metrics-select {
+  min-height: 36px;
+}
+
+:deep(.t-card__header) {
+  padding: 16px 24px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+:deep(.t-card__body) {
+  padding: 24px;
+}
+
+/* Ant Design 表格样式适配 */
+:deep(.ant-table) {
+  font-size: 13px;
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid #f1f5f9;
+}
+
+:deep(.ant-table-thead > tr > th) {
+  background: #f8fafc !important;
+  font-weight: 600;
+  color: #475569;
+  border-bottom: 1px solid #e2e8f0 !important;
+  white-space: nowrap;
+}
+
+:deep(.ant-table-tbody > tr > td) {
+  border-bottom: 1px solid #f1f5f9 !important;
+  color: #334155;
+  white-space: nowrap;
+}
+
+:deep(.ant-table-tbody > tr:hover > td) {
+  background-color: #f0f5ff !important;
+}
+
+:deep(.ant-table-cell) {
+  padding: 12px 16px !important;
+}
+
+.export-modal-content {
+  padding: 16px 0;
+}
+
+.export-tip {
+  font-size: 14px;
+  color: #333;
+  margin-bottom: 16px;
+  font-weight: 500;
+}
+
+.export-filters {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  background: #f8fafc;
+  padding: 20px;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+}
+
+.export-filter-item {
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+}
+
+.export-filter-label {
+  color: #64748b;
+  width: 48px;
+  flex-shrink: 0;
+  text-align: right;
+  margin-right: 8px;
+}
+
+/* 编辑列模态框样式 */
+.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;
+  }
+  .page-title { font-size: 24px; }
+  .data-container { padding: 16px; margin-bottom: 16px; border-radius: 8px; }
+  .global-filters { border-radius: 8px; }
+  .filter-header { padding: 10px 14px; flex-wrap: wrap; gap: 10px; }
+  .filter-content { flex-direction: column; }
+  .filter-section { flex-direction: column; align-items: flex-start; padding: 12px 14px; gap: 10px; width: 100%; box-sizing: border-box; }
+  .section-label { border-right: none; border-bottom: 2px solid #e4e9f0; padding-right: 0; padding-bottom: 6px; margin-right: 0; height: auto; line-height: normal; }
+  .section-items { flex-direction: column; align-items: stretch; gap: 10px; padding-left: 0; width: 100%; }
+  .section-divider { width: 100%; height: 1px; margin: 0; }
+  .filter-item { width: 100%; }
+  .filter-item .t-select, .filter-item .ant-picker { width: 100% !important; flex: 1; }
+  .action-group { width: 100%; justify-content: center; margin-top: 8px; }
+  .chart-container { height: 300px; }
+  .chart-controls { flex-direction: column; align-items: flex-start; width: 100%; }
+  .control-item { width: 100%; flex-direction: column; align-items: flex-start; gap: 8px; }
+  .control-divider { display: none; }
+}
+
+@media (max-width: 1200px) {
+  .filter-content { flex-wrap: wrap; }
+  .filter-section { flex: none; }
+  .section-divider { width: 100%; height: 1px; margin: 0; }
+  .chart-controls { flex-direction: column; align-items: flex-start; gap: 16px; }
+  .control-divider { display: none; }
+}
+
+:global(.ant-picker-dropdown) {
+  z-index: 3000 !important;
+}
+
+/* 表格列标题Tooltip样式 */
+.table-header-with-tooltip {
+  cursor: help;
+  border-bottom: 1px dashed #1890ff;
+  padding-bottom: 1px;
+}
+
+/* 确保Ant Design Tooltip显示在顶层 */
+:global(.ant-tooltip) {
+  z-index: 9999 !important;
+}
+
+:global(.ant-tooltip-inner) {
+  max-width: 300px;
+  padding: 8px 12px;
+  font-size: 13px;
+  line-height: 1.6;
+  background-color: rgba(0, 0, 0, 0.85);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+:global(.ant-tooltip-arrow::before) {
+  background-color: rgba(0, 0, 0, 0.85);
+}
+</style>
diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue
new file mode 100644
index 0000000..d1087f1
--- /dev/null
+++ b/src/components/LoginPage.vue
@@ -0,0 +1,673 @@
+<template>
+  <div class="login-page">
+    <!-- 顶部 Logo -->
+    <div class="login-header">
+      <div class="logo">
+        <img src="../assets/logo.png" alt="logo" class="logo-icon" />
+        <span class="logo-text">劝学</span>
+      </div>
+    </div>
+
+  <!-- 主体内容 -->
+  <div class="login-body">
+    <!-- 左侧装饰区 -->
+    <div class="login-illustration">
+      <img src="../assets/content-block-1-eZzov1mX.png" alt="illustration" class="illustration-img" />
+    </div>
+
+    <!-- 右侧登录区域 -->
+    <div class="login-area">
+      <!-- 可关闭的原型提示框 -->
+      <transition name="notice-fade">
+        <div v-if="showNotice" class="prototype-notice">
+          <div class="notice-icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="10"></circle>
+              <line x1="12" y1="8" x2="12" y2="12"></line>
+              <line x1="12" y1="16" x2="12.01" y2="16"></line>
+            </svg>
+          </div>
+          <div class="notice-content">
+            <div class="notice-title">产品原型演示阶段</div>
+            <div class="notice-desc">扫码登录暂不可用，请使用账号密码登录</div>
+            <div class="notice-account">测试账号：<span class="account-value">1</span> 密码：<span class="account-value">1</span></div>
+          </div>
+          <button class="notice-close" @click="showNotice = false" title="关闭提示">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        </div>
+      </transition>
+
+      <!-- 登录卡片 -->
+      <div class="login-card">
+        <!-- Tab 切换 -->
+        <div class="login-tabs">
+          <button
+            class="tab-btn"
+            :class="{ active: activeTab === 'qrcode' }"
+            @click="activeTab = 'qrcode'"
+          >扫码登录</button>
+          <button
+            class="tab-btn"
+            :class="{ active: activeTab === 'account' }"
+            @click="activeTab = 'account'"
+          >账号登录</button>
+        </div>
+
+        <!-- 扫码登录 -->
+        <div v-if="activeTab === 'qrcode'" class="tab-content qrcode-content">
+          <div class="qrcode-wrapper">
+            <div class="qrcode-img">
+              <!-- 模拟二维码 SVG -->
+              <svg width="140" height="140" viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg">
+                <!-- 外框 -->
+                <rect width="140" height="140" fill="white"/>
+                <!-- 左上角定位块 -->
+                <rect x="10" y="10" width="40" height="40" fill="black"/>
+                <rect x="15" y="15" width="30" height="30" fill="white"/>
+                <rect x="20" y="20" width="20" height="20" fill="black"/>
+                <!-- 右上角定位块 -->
+                <rect x="90" y="10" width="40" height="40" fill="black"/>
+                <rect x="95" y="15" width="30" height="30" fill="white"/>
+                <rect x="100" y="20" width="20" height="20" fill="black"/>
+                <!-- 左下角定位块 -->
+                <rect x="10" y="90" width="40" height="40" fill="black"/>
+                <rect x="15" y="95" width="30" height="30" fill="white"/>
+                <rect x="20" y="100" width="20" height="20" fill="black"/>
+                <!-- 数据模块 -->
+                <rect x="60" y="10" width="10" height="10" fill="black"/>
+                <rect x="75" y="10" width="5" height="5" fill="black"/>
+                <rect x="60" y="25" width="5" height="5" fill="black"/>
+                <rect x="70" y="20" width="10" height="5" fill="black"/>
+                <rect x="55" y="55" width="10" height="10" fill="black"/>
+                <rect x="70" y="55" width="5" height="5" fill="black"/>
+                <rect x="80" y="60" width="10" height="5" fill="black"/>
+                <rect x="90" y="55" width="5" height="10" fill="black"/>
+                <rect x="100" y="60" width="10" height="5" fill="black"/>
+                <rect x="110" y="55" width="5" height="5" fill="black"/>
+                <rect x="55" y="70" width="5" height="10" fill="black"/>
+                <rect x="65" y="70" width="10" height="5" fill="black"/>
+                <rect x="80" y="70" width="5" height="10" fill="black"/>
+                <rect x="90" y="75" width="15" height="5" fill="black"/>
+                <rect x="110" y="70" width="5" height="10" fill="black"/>
+                <rect x="55" y="85" width="10" height="5" fill="black"/>
+                <rect x="70" y="85" width="5" height="10" fill="black"/>
+                <rect x="80" y="85" width="10" height="5" fill="black"/>
+                <rect x="95" y="85" width="5" height="5" fill="black"/>
+                <rect x="105" y="85" width="10" height="10" fill="black"/>
+                <rect x="55" y="95" width="5" height="10" fill="black"/>
+                <rect x="65" y="95" width="10" height="5" fill="black"/>
+                <rect x="80" y="95" width="5" height="5" fill="black"/>
+                <rect x="90" y="95" width="10" height="5" fill="black"/>
+                <rect x="55" y="110" width="10" height="5" fill="black"/>
+                <rect x="70" y="105" width="5" height="10" fill="black"/>
+                <rect x="80" y="110" width="15" height="5" fill="black"/>
+                <rect x="100" y="105" width="5" height="10" fill="black"/>
+                <rect x="110" y="105" width="10" height="5" fill="black"/>
+                <rect x="110" y="115" width="10" height="10" fill="black"/>
+                <rect x="55" y="120" width="5" height="10" fill="black"/>
+                <rect x="65" y="120" width="10" height="5" fill="black"/>
+                <rect x="80" y="120" width="5" height="10" fill="black"/>
+                <rect x="90" y="120" width="10" height="5" fill="black"/>
+                <rect x="105" y="125" width="5" height="5" fill="black"/>
+              </svg>
+            </div>
+          </div>
+          <p class="qrcode-tip">
+            请使用<a class="app-link" href="#">劝学APP</a>扫码登录
+          </p>
+          <p class="qrcode-sub">打开劝学·我的-右上角扫一扫</p>
+
+          <!-- App下载提示横幅 -->
+          <a href="https://app.23544.com/#/download" target="_blank" class="download-banner">
+            <div class="banner-content">
+              <div class="banner-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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                  <polyline points="7 10 12 15 17 10"></polyline>
+                  <line x1="12" y1="15" x2="12" y2="3"></line>
+                </svg>
+              </div>
+              <div class="banner-text">
+                <span class="banner-title">没有劝学APP？</span>
+                <span class="banner-desc">点击立即下载，体验更多功能</span>
+              </div>
+            </div>
+            <div class="banner-arrow">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="9 18 15 12 9 6"></polyline>
+              </svg>
+            </div>
+          </a>
+        </div>
+
+        <!-- 账号登录 -->
+        <div v-if="activeTab === 'account'" class="tab-content account-content">
+          <div class="form-group">
+            <label class="form-label">账号</label>
+            <input
+              v-model="form.username"
+              class="form-input"
+              type="text"
+              placeholder="请输入手机号/账号"
+            />
+          </div>
+          <div class="form-group">
+            <label class="form-label">密码</label>
+            <div class="input-password-wrapper">
+              <input
+                v-model="form.password"
+                class="form-input"
+                :type="showPassword ? 'text' : 'password'"
+                placeholder="请输入密码"
+              />
+              <button class="eye-btn" @click="showPassword = !showPassword">
+                <svg v-if="!showPassword" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2">
+                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+                  <circle cx="12" cy="12" r="3"/>
+                </svg>
+                <svg v-else width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2">
+                  <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/>
+                  <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/>
+                  <line x1="1" y1="1" x2="23" y2="23"/>
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div class="form-options">
+            <label class="remember-me">
+              <input type="checkbox" v-model="form.remember" />
+              <span>记住我</span>
+            </label>
+            <a class="forgot-link" href="#">忘记密码？</a>
+          </div>
+          <button class="login-btn" @click="handleLogin">登 录</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+
+const emit = defineEmits(['login-success'])
+const router = useRouter()
+
+const activeTab = ref('qrcode')
+const showPassword = ref(false)
+const showNotice = ref(true)
+
+const form = reactive({
+  username: '1',
+  password: '1',
+  remember: false
+})
+
+const handleLogin = () => {
+  if (!form.username || !form.password) {
+    alert('请输入账号和密码')
+    return
+  }
+  emit('login-success')
+  router.push('/admin')
+}
+</script>
+
+<style scoped>
+.login-page {
+  min-height: 100vh;
+  background: linear-gradient(145deg, #dce8fb 0%, #e8f1fd 40%, #c8dcf8 100%);
+  display: flex;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 背景波浪装饰 */
+.login-page::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 200px;
+  background: linear-gradient(180deg, transparent 0%, rgba(180, 210, 250, 0.4) 100%);
+  border-radius: 60% 60% 0 0 / 30px 30px 0 0;
+  pointer-events: none;
+}
+
+/* 顶部 Logo */
+.login-header {
+  padding: 20px 32px;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.logo-text {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.logo-icon {
+  width: 28px;
+  height: 28px;
+  object-fit: contain;
+}
+
+/* 主体 */
+.login-body {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 100px;
+  padding: 0 80px 60px;
+}
+
+/* 左侧插画 */
+.login-illustration {
+  flex: 1;
+  max-width: 480px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.illustration-img {
+  width: 100%;
+  max-width: 400px;
+  height: auto;
+  object-fit: contain;
+}
+
+/* 右侧登录卡片 */
+.login-area {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* 原型提示框 */
+.prototype-notice {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px;
+  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
+  border: 1px solid #ffc107;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.2);
+  position: relative;
+}
+
+.notice-icon {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #ff9800;
+  color: white;
+  border-radius: 50%;
+  margin-top: 1px;
+}
+
+.notice-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.notice-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: #e65100;
+  margin-bottom: 4px;
+}
+
+.notice-desc {
+  font-size: 13px;
+  color: #bf360c;
+  margin-bottom: 6px;
+  line-height: 1.4;
+}
+
+.notice-account {
+  font-size: 12px;
+  color: #333;
+}
+
+.account-value {
+  display: inline-block;
+  background: #ff9800;
+  color: white;
+  padding: 1px 8px;
+  border-radius: 4px;
+  font-weight: 600;
+  margin: 0 2px;
+}
+
+.notice-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  color: #bf360c;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background 0.2s;
+}
+
+.notice-close:hover {
+  background: rgba(255, 152, 0, 0.2);
+}
+
+/* 提示框动画 */
+.notice-fade-enter-active,
+.notice-fade-leave-active {
+  transition: all 0.3s ease;
+}
+
+.notice-fade-enter-from,
+.notice-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+/* 登录卡片 */
+.login-card {
+  width: 340px;
+  background: white;
+  border-radius: 16px;
+  padding: 28px 32px 36px;
+  box-shadow: 0 8px 40px rgba(0, 82, 217, 0.1);
+  flex-shrink: 0;
+}
+
+/* Tab 切换 */
+.login-tabs {
+  display: flex;
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 28px;
+}
+
+.tab-btn {
+  flex: 1;
+  background: none;
+  border: none;
+  padding: 10px 0;
+  font-size: 14px;
+  color: #999;
+  cursor: pointer;
+  position: relative;
+  transition: color 0.2s;
+}
+
+.tab-btn.active {
+  color: #0052d9;
+  font-weight: 600;
+}
+
+.tab-btn.active::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 20%;
+  right: 20%;
+  height: 2px;
+  background: #0052d9;
+  border-radius: 1px;
+}
+
+/* 扫码登录 */
+.qrcode-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.qrcode-wrapper {
+  margin-bottom: 20px;
+}
+
+.qrcode-img {
+  width: 150px;
+  height: 150px;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+}
+
+.qrcode-tip {
+  font-size: 13px;
+  color: #333;
+  font-weight: 500;
+  margin: 0 0 6px;
+  text-align: center;
+}
+
+.app-link {
+  color: #0052d9;
+  text-decoration: none;
+}
+
+.qrcode-sub {
+  font-size: 12px;
+  color: #aaa;
+  margin: 0;
+  text-align: center;
+}
+
+/* App下载提示横幅 */
+.download-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 20px;
+  padding: 10px 14px;
+  background: linear-gradient(135deg, #f0f5ff 0%, #e6f0ff 100%);
+  border: 1px solid #dce8fb;
+  border-radius: 10px;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  box-sizing: border-box;
+}
+
+.download-banner:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 82, 217, 0.1);
+  border-color: #b3cfff;
+}
+
+.banner-content {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.banner-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: #0052d9;
+  color: white;
+  border-radius: 8px;
+  flex-shrink: 0;
+}
+
+.banner-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.banner-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #333;
+}
+
+.banner-desc {
+  font-size: 11px;
+  color: #666;
+}
+
+.banner-arrow {
+  color: #0052d9;
+  display: flex;
+  align-items: center;
+  transition: transform 0.3s ease;
+}
+
+.download-banner:hover .banner-arrow {
+  transform: translateX(4px);
+}
+
+/* 账号登录 */
+.account-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.form-group {
+  margin-bottom: 16px;
+}
+
+.form-label {
+  display: block;
+  font-size: 13px;
+  color: #555;
+  margin-bottom: 6px;
+  font-weight: 500;
+}
+
+.form-input {
+  width: 100%;
+  height: 40px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 0 12px;
+  font-size: 14px;
+  color: #333;
+  outline: none;
+  transition: border-color 0.2s;
+  box-sizing: border-box;
+  background: #fafafa;
+}
+
+.form-input:focus {
+  border-color: #0052d9;
+  background: white;
+}
+
+.input-password-wrapper {
+  position: relative;
+}
+
+.input-password-wrapper .form-input {
+  padding-right: 40px;
+}
+
+.eye-btn {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+}
+
+.form-options {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.remember-me {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: #666;
+  cursor: pointer;
+}
+
+.remember-me input[type="checkbox"] {
+  accent-color: #0052d9;
+}
+
+.forgot-link {
+  font-size: 13px;
+  color: #0052d9;
+  text-decoration: none;
+}
+
+.forgot-link:hover {
+  text-decoration: underline;
+}
+
+.login-btn {
+  width: 100%;
+  height: 42px;
+  background: linear-gradient(135deg, #0052d9 0%, #1a6cf0 100%);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  letter-spacing: 2px;
+  transition: opacity 0.2s, transform 0.1s;
+}
+
+.login-btn:hover {
+  opacity: 0.9;
+}
+
+.login-btn:active {
+  transform: scale(0.98);
+}
+
+/* 响应式 */
+@media (max-width: 900px) {
+  .login-body {
+    flex-direction: column;
+    gap: 40px;
+    padding: 20px 24px 40px;
+  }
+
+  .login-illustration {
+    max-width: 320px;
+  }
+}
+</style>
diff --git a/src/components/MobilePrototypePage.vue b/src/components/MobilePrototypePage.vue
new file mode 100644
index 0000000..20da0ff
--- /dev/null
+++ b/src/components/MobilePrototypePage.vue
@@ -0,0 +1,689 @@
+<template>
+  <div class="mobile-container" ref="containerRef">
+    <!-- 顶部状态栏占位 -->
+    <div class="status-bar">
+      <div class="time">14:22</div>
+      <div class="icons">
+        <t-icon name="alarm" size="14px" />
+        <t-icon name="bluetooth" size="14px" />
+        <span class="signal-text">5G</span>
+        <t-icon name="wifi" size="14px" />
+        <t-icon name="signal" size="14px" />
+        <div class="battery-wrapper">
+          <div class="battery-icon">
+            <div class="battery-level"></div>
+            <span class="battery-text">92</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 顶部导航栏 -->
+    <div class="nav-bar">
+      <div class="title-area">
+        <div class="logo-icon">
+          <t-icon name="book-open" style="color: #0052d9; font-size: 28px;" />
+        </div>
+        <span class="title">爱学蝶变</span>
+        <!-- <span class="tag">组长端</span> -->
+      </div>
+      <div class="close-btn" @click="goBack">
+        <t-icon name="close" />
+      </div>
+    </div>
+
+    <!-- 列表区域 -->
+    <div class="menu-list">
+      <!-- 学生管理 -->
+      <div class="menu-item">
+        <div class="icon-wrapper bg-green">
+          <t-icon name="user" class="menu-icon text-green" />
+        </div>
+        <div class="menu-content">
+          <div class="menu-title">学生管理</div>
+          <div class="menu-desc">管理各班级的学生</div>
+        </div>
+        <t-icon name="chevron-right" class="arrow-icon" />
+      </div>
+
+      <!-- 原型图展示 -->
+      <!-- <div class="prototype-images">
+        <div class="image-wrapper">
+          <div class="image-title">工作台原型</div>
+          <img src="../Assets/工作台-爱学蝶变.png" alt="工作台原型" class="prototype-img" />
+        </div>
+        <div class="image-wrapper">
+          <div class="image-title">学生管理原型</div>
+          <img src="../Assets/工作台-爱学蝶变-学生管理.png" alt="学生管理原型" class="prototype-img" />
+        </div>
+      </div> -->
+    </div>
+
+    <!-- 底部导航栏 -->
+    <div class="tab-bar">
+      <div class="tab-item active">
+        <t-icon name="user-setting" class="tab-icon" />
+        <span class="tab-text">管理</span>
+      </div>
+    </div>
+    
+    <!-- 底部安全区指示条 -->
+    <div class="home-indicator">
+      <div class="indicator-bar"></div>
+    </div>
+
+    <!-- 全局悬浮按钮 -->
+    <div 
+      class="floating-btn"
+      :style="{ left: `${btnPosition.x}px`, top: `${btnPosition.y}px` }"
+      @touchstart="onTouchStart"
+      @touchmove="onTouchMove"
+      @touchend="onTouchEnd"
+      @mousedown="onMouseDown"
+      @click="togglePreview"
+    >
+      <t-icon name="image" size="24px" />
+    </div>
+
+    <!-- 图片展示弹窗 -->
+    <div class="preview-overlay" v-if="showPreview" @click.self="togglePreview">
+      <div class="preview-content">
+        <div class="preview-header">
+          <span class="preview-title">原型设计图</span>
+          <t-icon name="close" class="preview-close" @click="togglePreview" />
+        </div>
+        <div class="preview-body">
+          <div class="preview-item">
+            <div class="preview-item-title">工作台</div>
+            <img src="../Assets/工作台-爱学蝶变.png" alt="工作台" />
+          </div>
+          <div class="preview-item">
+            <div class="preview-item-title">学生管理</div>
+            <img src="../Assets/工作台-爱学蝶变-学生管理.png" alt="学生管理" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const emit = defineEmits(['go-back'])
+
+const goBack = () => {
+  // 如果是在独立页面中，可以尝试返回上一页或跳转到首页
+  if (window.location.pathname === '/mb') {
+    window.location.href = '/'
+  } else {
+    emit('go-back')
+  }
+}
+
+// 悬浮按钮和弹窗逻辑
+const containerRef = ref(null)
+const showPreview = ref(false)
+const btnPosition = ref({ x: 0, y: 0 })
+let isDragging = false
+let startX = 0
+let startY = 0
+let startBtnX = 0
+let startBtnY = 0
+
+// 初始化按钮位置 (右下角)
+onMounted(() => {
+  if (containerRef.value) {
+    const rect = containerRef.value.getBoundingClientRect()
+    btnPosition.value = {
+      x: rect.width - 70, // 距离右边 20px (按钮宽50)
+      y: rect.height - 150 // 距离底部 150px
+    }
+  }
+})
+
+// 切换弹窗显示
+const togglePreview = () => {
+  if (isDragging) return // 如果是拖拽结束触发的点击，则忽略
+  showPreview.value = !showPreview.value
+}
+
+// 处理触摸事件
+const onTouchStart = (e) => {
+  isDragging = false
+  const touch = e.touches[0]
+  startX = touch.clientX
+  startY = touch.clientY
+  startBtnX = btnPosition.value.x
+  startBtnY = btnPosition.value.y
+}
+
+const onTouchMove = (e) => {
+  const touch = e.touches[0]
+  const dx = touch.clientX - startX
+  const dy = touch.clientY - startY
+  
+  if (Math.abs(dx) > 5 || Math.abs(dy) > 5) {
+    isDragging = true
+    e.preventDefault() // 阻止页面滚动
+  }
+  
+  if (isDragging && containerRef.value) {
+    const rect = containerRef.value.getBoundingClientRect()
+    let newX = startBtnX + dx
+    let newY = startBtnY + dy
+    
+    // 边界限制
+    const btnSize = 50
+    newX = Math.max(0, Math.min(newX, rect.width - btnSize))
+    newY = Math.max(0, Math.min(newY, rect.height - btnSize))
+    
+    btnPosition.value = { x: newX, y: newY }
+  }
+}
+
+const onTouchEnd = () => {
+  // 延迟重置，防止触发点击事件
+  if (isDragging) {
+    setTimeout(() => {
+      isDragging = false
+    }, 50)
+  }
+}
+
+// 处理鼠标事件 (兼容PC端)
+const onMouseDown = (e) => {
+  isDragging = false
+  startX = e.clientX
+  startY = e.clientY
+  startBtnX = btnPosition.value.x
+  startBtnY = btnPosition.value.y
+  
+  document.addEventListener('mousemove', onMouseMove)
+  document.addEventListener('mouseup', onMouseUp)
+}
+
+const onMouseMove = (e) => {
+  const dx = e.clientX - startX
+  const dy = e.clientY - startY
+  
+  if (Math.abs(dx) > 5 || Math.abs(dy) > 5) {
+    isDragging = true
+  }
+  
+  if (isDragging && containerRef.value) {
+    const rect = containerRef.value.getBoundingClientRect()
+    let newX = startBtnX + dx
+    let newY = startBtnY + dy
+    
+    // 边界限制
+    const btnSize = 50
+    newX = Math.max(0, Math.min(newX, rect.width - btnSize))
+    newY = Math.max(0, Math.min(newY, rect.height - btnSize))
+    
+    btnPosition.value = { x: newX, y: newY }
+  }
+}
+
+const onMouseUp = () => {
+  document.removeEventListener('mousemove', onMouseMove)
+  document.removeEventListener('mouseup', onMouseUp)
+  
+  if (isDragging) {
+    setTimeout(() => {
+      isDragging = false
+    }, 50)
+  }
+}
+
+// 组件卸载时清理事件监听
+onUnmounted(() => {
+  document.removeEventListener('mousemove', onMouseMove)
+  document.removeEventListener('mouseup', onMouseUp)
+})
+</script>
+
+<style scoped>
+/* 整个手机容器的样式 */
+.mobile-container {
+  width: 100%;
+  max-width: 480px; /* 限制最大宽度，在PC上居中显示类似手机 */
+  margin: 0 auto;
+  min-height: 100vh;
+  background-color: #f4f5f7; /* 偏灰白的背景色 */
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
+}
+
+/* 状态栏 */
+.status-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 20px;
+  background-color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  color: #000;
+}
+
+.status-bar .icons {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.signal-text {
+  font-size: 10px;
+  font-weight: 800;
+  margin: 0 -1px;
+}
+
+.battery-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 2px;
+}
+
+.battery-icon {
+  width: 24px;
+  height: 12px;
+  border: 1px solid #000;
+  border-radius: 3px;
+  padding: 1px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.battery-text {
+  font-size: 9px;
+  font-weight: 800;
+  color: #fff;
+  position: absolute;
+  z-index: 2;
+  transform: scale(0.9);
+}
+
+.battery-icon::after {
+  content: '';
+  position: absolute;
+  right: -3px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 2px;
+  height: 4px;
+  background-color: #000;
+  border-radius: 0 2px 2px 0;
+}
+
+.battery-level {
+  position: absolute;
+  left: 1px;
+  top: 1px;
+  bottom: 1px;
+  width: 92%;
+  background-color: #000;
+  border-radius: 1px;
+  z-index: 1;
+}
+
+/* 导航栏 */
+.nav-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px 20px;
+  background-color: #fff;
+  border-bottom: 12px solid #f2f3f5; /* 增加与下方列表的间距感 */
+}
+
+.title-area {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.logo-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.title {
+  font-size: 22px;
+  font-weight: bold;
+  color: #1a1a1a;
+  letter-spacing: 1px;
+}
+
+.tag {
+  font-size: 11px;
+  font-weight: 600;
+  color: #fff;
+  background: linear-gradient(90deg, #6699ff 0%, #3377ff 100%);
+  padding: 2px 8px;
+  border-radius: 12px; /* 更大的圆角，像药丸形状 */
+  margin-left: 6px;
+  box-shadow: 0 2px 4px rgba(51, 119, 255, 0.2);
+}
+
+.close-btn {
+  width: 32px;
+  height: 32px;
+  background-color: #f0f2f5;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #333;
+  font-weight: bold;
+  font-size: 18px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.close-btn:active {
+  background-color: #e5e6eb;
+}
+
+/* 列表区域 */
+.menu-list {
+  flex: 1;
+  padding: 0 16px 16px; /* 顶部不需要 padding，因为 nav-bar 已经有了 border-bottom */
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow-y: auto;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+  padding: 22px 18px;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.menu-item:active {
+  transform: scale(0.98);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.icon-wrapper {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 16px;
+}
+
+.menu-icon {
+  font-size: 28px;
+}
+
+/* 图标颜色和背景 */
+.bg-green { 
+  background: linear-gradient(135deg, #e8f8f2 0%, #cbf2e3 100%); 
+  border: 1px solid #bdf0db;
+}
+.text-green { color: #2ba471; }
+
+.bg-blue { 
+  background: linear-gradient(135deg, #e6f0ff 0%, #cce0ff 100%); 
+  border: 1px solid #b3d0ff;
+}
+.text-blue { color: #0052d9; }
+
+.bg-red { 
+  background: linear-gradient(135deg, #ffeeeb 0%, #ffdcd9 100%); 
+  border: 1px solid #ffcbc7;
+}
+.text-red { color: #d54941; }
+
+.bg-orange { 
+  background: linear-gradient(135deg, #fff1e6 0%, #ffe3cc 100%); 
+  border: 1px solid #ffd5b3;
+}
+.text-orange { color: #e37318; }
+
+.menu-content {
+  flex: 1;
+}
+
+.menu-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin-bottom: 8px;
+  letter-spacing: 0.5px;
+}
+
+.menu-desc {
+  font-size: 14px;
+  color: #888;
+  letter-spacing: 0.2px;
+}
+
+.arrow-icon {
+  color: #ccc;
+  font-size: 20px;
+}
+
+/* 原型图展示 */
+.prototype-images {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 16px;
+}
+
+.image-wrapper {
+  background-color: #fff;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.image-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 12px;
+  align-self: flex-start;
+}
+
+.prototype-img {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+  border: 1px solid #f0f0f0;
+}
+
+@media (min-width: 400px) {
+  .prototype-images {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+  .image-wrapper {
+    flex: 1;
+    min-width: calc(50% - 8px);
+  }
+}
+
+/* 底部导航栏 */
+.tab-bar {
+  display: flex;
+  justify-content: center; /* 只有一个按钮时居中显示 */
+  align-items: center;
+  background-color: #fff;
+  padding: 14px 0 10px;
+  border-top: 1px solid #f0f0f0;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.02);
+}
+
+.tab-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  color: #b0b0b0;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.tab-item.active {
+  color: #0052d9;
+}
+
+.tab-icon {
+  font-size: 26px;
+}
+
+.tab-text {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+/* 底部安全区指示条 */
+.home-indicator {
+  background-color: #fff;
+  padding-bottom: 8px;
+  display: flex;
+  justify-content: center;
+}
+
+.indicator-bar {
+  width: 134px;
+  height: 5px;
+  background-color: #ccc;
+  border-radius: 100px;
+}
+
+/* 响应式适配：在PC上居中显示，在手机上全屏 */
+@media (min-width: 481px) {
+  body {
+    background-color: #e5e5e5; /* 在PC上给body一个灰色背景，让手机壳更明显 */
+  }
+  .mobile-container {
+    margin: 20px auto;
+    height: 850px;
+    min-height: auto;
+    border-radius: 36px;
+    overflow: hidden;
+    border: 8px solid #333; /* 模拟手机边框 */
+  }
+}
+
+/* 全局悬浮按钮 */
+.floating-btn {
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  background-color: #0052d9;
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(0, 82, 217, 0.4);
+  cursor: pointer;
+  z-index: 999;
+  user-select: none;
+  touch-action: none; /* 阻止默认的触摸行为 */
+}
+
+/* 图片展示弹窗 */
+.preview-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(4px);
+}
+
+.preview-content {
+  width: 90%;
+  max-height: 85%;
+  background-color: #fff;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+}
+
+.preview-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.preview-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.preview-close {
+  font-size: 24px;
+  color: #999;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.preview-close:hover {
+  color: #333;
+}
+
+.preview-body {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.preview-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.preview-item-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #555;
+  align-self: flex-start;
+}
+
+.preview-item img {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+  border: 1px solid #eee;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+</style>
diff --git a/src/components/NoteEvaluationPage.vue b/src/components/NoteEvaluationPage.vue
new file mode 100644
index 0000000..3216528
--- /dev/null
+++ b/src/components/NoteEvaluationPage.vue
@@ -0,0 +1,5557 @@
+<template>
+  <div class="note-evaluation-page">
+    <!-- 顶部导航栏 (复用 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="page-header">
+      <div class="content-wrapper">
+        <div class="header-content">
+          <!-- 返回按钮 -->
+          <button class="back-btn" @click="goBack" title="返回上一级">
+            <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">
+                <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                <rect x="9" y="3" width="6" height="4" rx="1" stroke="currentColor" stroke-width="2"/>
+                <path d="M9 14l2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </div>
+            <div class="title-text">
+              <h1 class="page-title">笔记评优</h1>
+              <p class="page-subtitle">查看和管理班级课程笔记评价数据</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Tab 标签页 -->
+    <div class="tabs-container">
+      <div class="content-wrapper">
+        <a-tabs v-model:activeKey="activeTab" type="card" class="custom-tabs">
+          <a-tab-pane key="class1" tab="爱学蝶变高一1班">
+            <div class="class-content">
+            <a-row :gutter="24">
+              <!-- 左侧区域 30% -->
+              <a-col :xs="24" :sm="24" :md="8" :lg="7">
+                <div class="left-panel">
+                  <!-- 日期选择器 -->
+                  <div class="date-picker-section" ref="datePickerSectionRef">
+                    <div class="date-control-group">
+                      <a-button 
+                        class="nav-btn"
+                        @click="goNextDay"
+                      >
+                        <CaretLeftOutlined />
+                      </a-button>
+                      <div class="date-display" @click="toggleDatePicker">
+                        <div class="date-main">{{ formatDateDisplay() }}</div>
+                        <div class="date-week">{{ getWeekDay(selectedDate) }}</div>
+                      </div>
+                      <a-button 
+                        class="nav-btn"
+                        @click="goPrevDay"
+                      >
+                        <CaretRightOutlined />
+                      </a-button>
+                    </div>
+
+                    <transition name="date-picker-fade">
+                      <div v-if="showDatePicker" class="custom-date-picker">
+                        <div class="picker-header">
+                          <button class="picker-nav-btn" @click="prevMonth">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                              <path d="M15 18l-6-6 6-6"/>
+                            </svg>
+                          </button>
+                          <span class="picker-title">{{ pickerMonth }}</span>
+                          <button class="picker-nav-btn" @click="nextMonth">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                              <path d="M9 18l6-6-6-6"/>
+                            </svg>
+                          </button>
+                        </div>
+                        <div class="weekdays">
+                          <span v-for="day in weekDays" :key="day" class="weekday">{{ day }}</span>
+                        </div>
+                        <div class="days-grid">
+                          <div
+                            v-for="(day, index) in calendarDays"
+                            :key="index"
+                            class="day-cell"
+                            :class="{
+                              'day-empty': !day.date,
+                              'day-today': day.isToday,
+                              'day-selected': day.isSelected,
+                              'day-disabled': day.isDisabled
+                            }"
+                            @click="selectDay(day)"
+                          >
+                            {{ day.date ? day.date.format('D') : '' }}
+                          </div>
+                        </div>
+                        <div class="picker-footer">
+                          <button class="picker-btn picker-btn-clear" @click="clearSelection">清除</button>
+                          <button class="picker-btn picker-btn-today" @click="selectToday">今天</button>
+                          <button class="picker-btn picker-btn-confirm" @click="confirmSelection">确定</button>
+                        </div>
+                      </div>
+                    </transition>
+                    
+                    <div v-if="dateValidationError" class="date-error">
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="10"/>
+                        <line x1="12" y1="8" x2="12" y2="12"/>
+                        <line x1="12" y1="16" x2="12.01" y2="16"/>
+                      </svg>
+                      {{ dateValidationError }}
+                    </div>
+                  </div>
+
+                  <!-- 课程列表 -->
+                  <div class="table-section">
+                    <div class="section-header">
+                      <h3 class="section-title">课程安排</h3>
+                      <span class="section-badge">{{ tableData.length }} 节课</span>
+                    </div>
+                    <div class="course-list">
+                      <div
+                        v-for="item in tableData"
+                        :key="item.id"
+                        class="course-card"
+                        :class="[
+                          item.courseStatus === '正在上课' ? 'card-ongoing' :
+                          item.courseStatus === '已上课'   ? 'card-completed' : 'card-pending',
+                          selectedCourseId === item.id ? 'card-selected' : ''
+                        ]"
+                        @click="selectCourse(item.id)"
+                      >
+                        <!-- 左侧进度条 -->
+                        <div class="card-bar"></div>
+
+                        <!-- 节次信息 -->
+                        <div class="card-period">
+                          <span class="card-period-name">{{ item.periodName }}</span>
+                          <span class="card-period-time">{{ item.periodTime }}</span>
+                        </div>
+
+                        <!-- 科目 + 类型标签 -->
+                        <div class="card-subject">
+                          <span class="card-subject-name">{{ item.weekDay }}</span>
+                          <span
+                            class="card-type-tag"
+                            :class="item.courseType === '预习' ? 'tag-preview' : 'tag-review'"
+                          >{{ item.courseType }}</span>
+                        </div>
+
+                        <!-- 右侧状态图标 -->
+                        <div class="card-status-icon">
+                          <!-- 已上课：对勾 -->
+                          <svg v-if="item.courseStatus === '已上课'" width="18" height="18" viewBox="0 0 18 18" fill="none">
+                            <circle cx="9" cy="9" r="8" fill="#DCFCE7" stroke="#86EFAC" stroke-width="1.2"/>
+                            <path d="M5.5 9l2.5 2.5 4.5-5" stroke="#16A34A" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+                          </svg>
+                          <!-- 正在上课：播放 -->
+                          <svg v-else-if="item.courseStatus === '正在上课'" width="18" height="18" viewBox="0 0 18 18" fill="none" class="icon-pulse">
+                            <circle cx="9" cy="9" r="8" fill="#FEF9C3" stroke="#FDE047" stroke-width="1.2"/>
+                            <polygon points="7,6 13,9 7,12" fill="#CA8A04"/>
+                          </svg>
+                          <!-- 未上课：时钟 -->
+                          <svg v-else width="18" height="18" viewBox="0 0 18 18" fill="none">
+                            <circle cx="9" cy="9" r="8" fill="#F1F5F9" stroke="#CBD5E1" stroke-width="1.2"/>
+                            <path d="M9 5.5V9l2.5 2" stroke="#94A3B8" stroke-width="1.5" stroke-linecap="round"/>
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </a-col>
+
+              <!-- 右侧区域 70% -->
+              <a-col :xs="24" :sm="24" :md="16" :lg="17">
+                <div class="right-panel" :class="{ 'has-content': selectedCourseId && !showDefaultPage }">
+                  <!-- 初始空状态：未选择任何课程 -->
+                  <div v-if="!selectedCourseId" class="empty-state">
+                    <div class="empty-icon-wrapper">
+                      <svg width="80" height="80" viewBox="0 0 80 80" fill="none">
+                        <rect x="16" y="20" width="48" height="48" rx="12" fill="#F3F4F6"/>
+                        <path d="M32 36h16M32 44h12M32 52h8" stroke="#D1D5DB" stroke-width="3" stroke-linecap="round"/>
+                      </svg>
+                    </div>
+                    <h3 class="empty-title">暂无评价内容</h3>
+                    <p class="empty-desc">选择左侧课程后，将在此处显示详细的笔记评价信息</p>
+                    <div class="empty-tips">
+                      <div class="tip-item">
+                        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                          <circle cx="8" cy="8" r="6"/>
+                        </svg>
+                        <span>点击左侧课程卡片查看详情</span>
+                      </div>
+                      <div class="tip-item">
+                        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                          <circle cx="8" cy="8" r="6"/>
+                        </svg>
+                        <span>支持多维度评价数据分析</span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- 缺省页面：课程未开始状态 -->
+                  <div v-else-if="showDefaultPage" class="default-state">
+                    <div class="default-icon-wrapper">
+                      <svg width="100" height="100" viewBox="0 0 100 100" fill="none">
+                        <circle cx="50" cy="50" r="40" fill="#F1F5F9" stroke="#CBD5E1" stroke-width="2"/>
+                        <path d="M50 30V50L65 60" stroke="#94A3B8" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+                        <circle cx="50" cy="50" r="4" fill="#94A3B8"/>
+                      </svg>
+                    </div>
+                    <h3 class="default-title">课程尚未开始</h3>
+                    <p class="default-desc">该课程还未开始上课，暂无笔记评价数据</p>
+                    <div class="default-course-info">
+                      <div class="info-item">
+                        <span class="info-label">课程名称</span>
+                        <span class="info-value">{{ getSelectedCourseName() }}</span>
+                      </div>
+                      <div class="info-item">
+                        <span class="info-label">课程状态</span>
+                        <span class="info-value status-pending">未开始</span>
+                      </div>
+                    </div>
+                    <div class="default-tips">
+                      <div class="tip-title">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                          <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>
+                        提示
+                      </div>
+                      <ul class="tip-list">
+                        <li>课程开始后将自动显示学生笔记提交记录</li>
+                        <li>您可以选择其他已上课的课程查看评价数据</li>
+                        <li>已上课和正在上课的课程会显示在左侧列表中</li>
+                      </ul>
+                    </div>
+                  </div>
+
+                  <!-- 朋友圈风格作业展示 -->
+                  <div v-else class="assignments-container">
+                    <div class="assignments-header">
+                      <div class="assignments-header-left">
+                        <h3 class="assignments-title">
+                          {{ getSelectedCourseName() }} - 笔记提交记录
+                        </h3>
+                        <span class="submit-count">
+                          已交 {{ mockStudentAssignments.length }} 人
+                          <template v-if="hasActiveFilters">
+                            <span class="filter-result-sep">|</span>
+                            <span class="filter-result-count">筛选结果 {{ filteredStudentAssignments.length }} 人</span>
+                          </template>
+                        </span>
+                      </div>
+                    </div>
+                    
+                    <!-- 筛选区域 -->
+                    <div class="filter-section">
+                      <div class="filter-row">
+                        <div class="filter-item">
+                          <span class="filter-label">评优状态</span>
+                          <a-radio-group 
+                            v-model:value="filterExcellentStatus" 
+                            :options="excellentFilterOptions"
+                            class="filter-radio-group"
+                          />
+                        </div>
+                        <div class="filter-item filter-item-search">
+                          <span class="filter-label">学生姓名</span>
+                          <a-input
+                            v-model:value="filterStudentName"
+                            placeholder="输入姓名关键词搜索..."
+                            allow-clear
+                            class="filter-search-input"
+                          >
+                            <template #prefix>
+                              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <circle cx="11" cy="11" r="8"></circle>
+                                <path d="m21 21-4.35-4.35"></path>
+                              </svg>
+                            </template>
+                          </a-input>
+                        </div>
+                        <button 
+                          v-if="hasActiveFilters" 
+                          class="filter-clear-btn"
+                          @click="clearFilters"
+                        >
+                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M18 6 6 18M6 6l12 12"></path>
+                          </svg>
+                          清除筛选
+                        </button>
+                      </div>
+                    </div>
+                    
+                    <div class="assignments-list">
+                      <div
+                        v-for="student in paginatedData"
+                        :key="student.id"
+                        class="moment-card"
+                        :class="{ 'moment-card--excellent': student.isExcellent }"
+                      >
+                        <!-- 评优标签 -->
+                        <div v-if="student.isExcellent" class="excellent-badge">
+                          <StarFilled class="excellent-badge-icon" />
+                          <span>优秀标记</span>
+                        </div>
+
+                        <div class="moment-avatar">
+                          <img :src="student.avatar" :alt="student.name" />
+                        </div>
+                        <div class="moment-content">
+                          <div class="moment-name">{{ student.name }}</div>
+                          <div v-if="student.content" class="moment-text">{{ student.content }}</div>
+                          
+                          <!-- 图片墙：超9张只显示前9张，第9格显示「查看全部」遮罩 -->
+                          <div class="moment-images" :class="getImageGridClass(getDisplayImages(student).length)">
+                            <div
+                              v-for="(img, index) in getDisplayImages(student)"
+                              :key="index"
+                              class="moment-image-wrapper"
+                              :class="{
+                                'img-selected': isImageSelected(student, index),
+                                'img-unselected': !isImageSelected(student, index),
+                                'img-locked': student.isExcellent
+                              }"
+                              @click="handleImageClick(student, index)"
+                            >
+                              <img :src="img" class="moment-image" loading="lazy" />
+                              <!-- 左上角勾选热区（未评优时显示，点击切换选中） -->
+                              <div
+                                v-if="!student.isExcellent"
+                                class="img-select-zone"
+                                @click.stop="toggleImageSelect(student, index)"
+                              >
+                                <div class="img-select-circle" :class="{ 'img-select-circle--checked': isImageSelected(student, index) }">
+                                  <svg v-if="isImageSelected(student, index)" width="10" height="10" viewBox="0 0 10 10" fill="none">
+                                    <path d="M2 5l2.5 2.5 3.5-4" stroke="#fff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+                                  </svg>
+                                </div>
+                              </div>
+                              <!-- 第9格：查看全部遮罩 -->
+                              <div
+                                v-if="index === 8 && student.images.length > 9"
+                                class="img-more-overlay"
+                                @click.stop="openAllImages(student)"
+                              >
+                                <span class="img-more-count">+{{ student.images.length - 9 }}</span>
+                                <span class="img-more-text">查看全部</span>
+                              </div>
+                            </div>
+                          </div>
+
+                          <!-- 评优操作区 -->
+                          <div class="excellent-action-bar">
+                            <div class="excellent-action-left">
+                              <span class="excellent-label">
+                                {{ student.isExcellent ? '已评为优秀' : '评为优秀' }}
+                              </span>
+                              <span class="excellent-hint">
+                                {{ student.isExcellent
+                                  ? `已选 ${getEffectiveSelectedCount(student)} 张图片`
+                                  : (student.selectedImages.length === 0
+                                    ? `默认全选 ${student.images.length} 张`
+                                    : `已选 ${student.selectedImages.length} 张`) }}
+                              </span>
+                            </div>
+                            <a-switch
+                              :checked="student.isExcellent"
+                              :disabled="false"
+                              checked-children="优"
+                              un-checked-children="评"
+                              class="excellent-switch"
+                              :class="{ 'switch-active': student.isExcellent }"
+                              @change="(val) => toggleExcellent(student, val)"
+                            />
+                          </div>
+
+                          <!-- 已评优点评内容展示 -->
+                          <div v-if="student.isExcellent && student.excellentComment" class="excellent-comment-block">
+                            <div class="ec-header">
+                              <StarFilled class="ec-star-icon" />
+                              <span class="ec-label">教师点评</span>
+                              <span class="ec-time">{{ student.excellentTime }}</span>
+                            </div>
+                            <p class="ec-text">{{ student.excellentComment }}</p>
+                          </div>
+                          
+                          <div class="moment-footer">
+                            <span class="moment-time">{{ student.submitTime }}</span>
+                            <div class="moment-actions">
+                              <span class="action-btn" @click.stop="openDetailModal(student)">
+                                <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="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path>
+                                </svg>
+                                点赞 {{ student.likes.length }}
+                              </span>
+                              <span class="action-btn" @click.stop="openDetailModal(student)">
+                                <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="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"></path>
+                                </svg>
+                                评论 {{ student.comments.length }}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    
+                    <!-- 分页控件 -->
+                    <div class="pagination-section">
+                      <!-- 分页状态 -->
+                      <div class="pagination-status">
+                        <span class="status-text">
+                          共 <span class="status-highlight">{{ totalRecords }}</span> 条记录，
+                          第 <span class="status-highlight">{{ currentPage }}</span> / <span class="status-highlight">{{ totalPages }}</span> 页
+                        </span>
+                      </div>
+                      
+                      <!-- 每页显示数量 -->
+                      <div class="page-size-selector">
+                        <span class="page-size-label">每页显示</span>
+                        <a-select
+                          :value="pageSize"
+                          @change="changePageSize"
+                          :options="pageSizeOptions.map(s => ({ label: `${s} 条`, value: s }))"
+                          class="page-size-select"
+                        />
+                      </div>
+                      
+                      <!-- 页码导航 -->
+                      <div class="pagination-nav">
+                        <button
+                          class="page-btn"
+                          :disabled="currentPage === 1"
+                          @click="goToFirstPage"
+                          title="首页"
+                        >
+                          <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="M11 19l-7-7 7-7"></path>
+                            <path d="M18 19l-7-7 7-7"></path>
+                          </svg>
+                        </button>
+                        <button
+                          class="page-btn"
+                          :disabled="currentPage === 1"
+                          @click="goToPrevPage"
+                          title="上一页"
+                        >
+                          <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"></path>
+                          </svg>
+                        </button>
+                        
+                        <template v-for="(page, index) in getDisplayPageNumbers()" :key="index">
+                          <template v-if="page === '...'">
+                            <span class="page-ellipsis">...</span>
+                          </template>
+                          <button
+                            v-else
+                            class="page-btn"
+                            :class="{ 'page-btn--active': page === currentPage }"
+                            @click="changePage(page)"
+                          >
+                            {{ page }}
+                          </button>
+                        </template>
+                        
+                        <button
+                          class="page-btn"
+                          :disabled="currentPage === totalPages"
+                          @click="goToNextPage"
+                          title="下一页"
+                        >
+                          <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 18 6-6-6-6"></path>
+                          </svg>
+                        </button>
+                        <button
+                          class="page-btn"
+                          :disabled="currentPage === totalPages"
+                          @click="goToLastPage"
+                          title="末页"
+                        >
+                          <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="M13 5l7 7-7 7"></path>
+                            <path d="M6 5l7 7-7 7"></path>
+                          </svg>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </a-col>
+            </a-row>
+          </div>
+        </a-tab-pane>
+
+        <a-tab-pane key="class2" tab="爱学蝶变高一2班">
+          <div class="class-content">
+            <div class="development-state">
+              <div class="dev-icon-wrapper">
+                <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
+                  <circle cx="32" cy="32" r="24" fill="#EEF2FF"/>
+                  <path d="M24 32l6 6 10-12" stroke="#6366F1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </div>
+              <h3 class="dev-title">功能开发中</h3>
+              <p class="dev-desc">该班级模块正在建设中，敬请期待</p>
+            </div>
+          </div>
+        </a-tab-pane>
+
+        <a-tab-pane key="class3" tab="爱学蝶变高一3班">
+          <div class="class-content">
+            <div class="development-state">
+              <div class="dev-icon-wrapper">
+                <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
+                  <circle cx="32" cy="32" r="24" fill="#EEF2FF"/>
+                  <path d="M24 32l6 6 10-12" stroke="#6366F1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </div>
+              <h3 class="dev-title">功能开发中</h3>
+              <p class="dev-desc">该班级模块正在建设中，敬请期待</p>
+            </div>
+          </div>
+        </a-tab-pane>
+      </a-tabs>
+      </div>
+    </div>
+  </div>
+
+  <!-- ========== 灯箱：图片放大查看 ========== -->
+  <teleport to="body">
+    <transition name="lightbox-fade">
+      <div v-if="lightbox.visible" class="lightbox-overlay" @click.self="closeLightbox">
+        <!-- 关闭 -->
+        <button class="lightbox-close" @click="closeLightbox">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path d="M18 6L6 18M6 6l12 12" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/>
+          </svg>
+        </button>
+        <!-- 计数 -->
+        <div class="lightbox-counter">{{ lightbox.current + 1 }} / {{ lightbox.images.length }}</div>
+        <!-- 勾选按钮（未评优时显示，用于切换第10张及之后图片的选中状态） -->
+        <button
+          v-if="lightbox.student && !lightbox.student.isExcellent"
+          class="lightbox-select-btn"
+          :class="{ 'lightbox-select-btn--checked': isImageSelected(lightbox.student, lightbox.current) }"
+          @click.stop="toggleImageSelect(lightbox.student, lightbox.current)"
+        >
+          <svg v-if="isImageSelected(lightbox.student, lightbox.current)" width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path d="M3 8l3.5 3.5 6.5-7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg v-else width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <circle cx="8" cy="8" r="6" stroke="rgba(255,255,255,0.8)" stroke-width="1.5"/>
+          </svg>
+          <span>{{ isImageSelected(lightbox.student, lightbox.current) ? '已选中' : '选择此图' }}</span>
+        </button>
+        <!-- 左箭头 -->
+        <button
+          v-if="lightbox.images.length > 1"
+          class="lightbox-arrow lightbox-arrow--left"
+          @click="lightboxPrev"
+        >
+          <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
+            <path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+        <!-- 图片 -->
+        <transition name="lightbox-img" mode="out-in">
+          <img
+            :key="lightbox.current"
+            :src="lightbox.images[lightbox.current]"
+            class="lightbox-img"
+            @click.stop
+          />
+        </transition>
+        <!-- 右箭头 -->
+        <button
+          v-if="lightbox.images.length > 1"
+          class="lightbox-arrow lightbox-arrow--right"
+          @click="lightboxNext"
+        >
+          <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
+            <path d="M9 18l6-6-6-6" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+        <!-- 缩略图条 -->
+        <div class="lightbox-thumbs">
+          <div
+            v-for="(img, i) in lightbox.images"
+            :key="i"
+            class="lightbox-thumb"
+            :class="{
+              'lightbox-thumb--active': i === lightbox.current,
+              'lightbox-thumb--selected': lightbox.student && !lightbox.student.isExcellent && isImageSelected(lightbox.student, i),
+              'lightbox-thumb--unselected': lightbox.student && !lightbox.student.isExcellent && !isImageSelected(lightbox.student, i)
+            }"
+            @click="lightbox.current = i"
+          >
+            <img :src="img" />
+            <!-- 缩略图勾选热区（未评优时显示） -->
+            <div
+              v-if="lightbox.student && !lightbox.student.isExcellent"
+              class="thumb-select-zone"
+              @click.stop="toggleImageSelect(lightbox.student, i)"
+            >
+              <div
+                class="thumb-select-circle"
+                :class="{ 'thumb-select-circle--checked': isImageSelected(lightbox.student, i) }"
+              >
+                <svg v-if="isImageSelected(lightbox.student, i)" width="8" height="8" viewBox="0 0 8 8" fill="none">
+                  <path d="M1.5 4l2 2 3-3.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </teleport>
+
+  <!-- ========== 详情弹窗：点赞 & 评论 ========== -->
+  <teleport to="body">
+    <a-modal
+      v-model:open="detailModal.visible"
+      :title="null"
+      :footer="null"
+      :width="520"
+      :body-style="{ padding: 0 }"
+      class="detail-modal"
+      centered
+    >
+      <div v-if="detailModal.student" class="detail-modal-body">
+        <!-- 弹窗头部 -->
+        <div class="dm-header">
+          <img :src="detailModal.student.avatar" class="dm-avatar" />
+          <div class="dm-header-info">
+            <div class="dm-name">{{ detailModal.student.name }}</div>
+            <div class="dm-time">{{ detailModal.student.submitTime }}</div>
+          </div>
+          <div v-if="detailModal.student.isExcellent" class="dm-excellent-tag">
+            <StarFilled style="font-size:11px;margin-right:3px;" />优秀笔记
+          </div>
+        </div>
+        <!-- 笔记内容 -->
+        <div v-if="detailModal.student.content" class="dm-content">
+          {{ detailModal.student.content }}
+        </div>
+
+        <!-- 点赞区 -->
+        <div class="dm-section">
+          <div class="dm-section-title">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/>
+            </svg>
+            点赞 <span class="dm-count">{{ detailModal.student.likes.length }}</span>
+          </div>
+          <div v-if="detailModal.student.likes.length" class="dm-likes-list">
+            <div v-for="(like, i) in detailModal.student.likes" :key="i" class="dm-like-item">
+              <img :src="like.avatar" class="dm-like-avatar" />
+              <span class="dm-like-name">{{ like.name }}</span>
+            </div>
+          </div>
+          <div v-else class="dm-empty">暂无点赞</div>
+        </div>
+
+        <!-- 评论区 -->
+        <div class="dm-section">
+          <div class="dm-section-title">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#667EEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <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>
+            评论 <span class="dm-count">{{ detailModal.student.comments.length }}</span>
+          </div>
+          <div v-if="detailModal.student.comments.length" class="dm-comments-list">
+            <div v-for="(comment, i) in detailModal.student.comments" :key="i" class="dm-comment-item">
+              <img :src="comment.avatar" class="dm-comment-avatar" />
+              <div class="dm-comment-body">
+                <div class="dm-comment-name">{{ comment.name }}</div>
+                <div class="dm-comment-text">{{ comment.text }}</div>
+                <div class="dm-comment-time">{{ comment.time }}</div>
+              </div>
+            </div>
+          </div>
+          <div v-else class="dm-empty">暂无评论</div>
+        </div>
+      </div>
+    </a-modal>
+  </teleport>
+
+  <!-- ========== 评优模态框 ========== -->
+  <teleport to="body">
+    <transition name="modal-fade">
+      <div v-if="excellentModal.visible" class="em-overlay" @click.self="handleExcellentModalCancel">
+        <div class="em-dialog">
+          <!-- 头部 -->
+          <div class="em-header">
+            <div class="em-header-icon">
+              <StarFilled style="font-size:18px;color:#F59E0B;" />
+            </div>
+            <div class="em-header-info">
+              <h3 class="em-title">评为优秀笔记</h3>
+              <p class="em-subtitle">为 <strong>{{ excellentModal.student?.name }}</strong> 的笔记添加点评</p>
+            </div>
+            <button class="em-close-btn" @click="handleExcellentModalCancel">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M18 6L6 18M6 6l12 12"/>
+              </svg>
+            </button>
+          </div>
+
+          <!-- 已选图片预览 -->
+          <div class="em-image-preview">
+            <div class="em-preview-label">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
+              </svg>
+              已选图片
+              <span class="em-preview-count">{{ excellentModal.student ? getEffectiveSelectedCount(excellentModal.student) : 0 }} 张</span>
+            </div>
+            <div v-if="excellentModal.student" class="em-preview-thumbs">
+              <div
+                v-for="(img, i) in getExcellentPreviewImages(excellentModal.student)"
+                :key="i"
+                class="em-preview-thumb"
+              >
+                <img :src="img" />
+              </div>
+              <div
+                v-if="getEffectiveSelectedCount(excellentModal.student) > 4"
+                class="em-preview-thumb em-preview-more"
+              >
+                +{{ getEffectiveSelectedCount(excellentModal.student) - 4 }}
+              </div>
+            </div>
+          </div>
+
+          <!-- 点评内容输入 -->
+          <div class="em-body">
+            <div class="em-field">
+              <label class="em-label">
+                <span class="em-label-required">*</span>
+                点评内容
+                <span class="em-label-hint">（必填，将展示在笔记卡片上）</span>
+              </label>
+              <a-textarea
+                v-model:value="excellentModal.comment"
+                :rows="4"
+                :maxlength="200"
+                show-count
+                placeholder="请输入对该笔记的点评内容，如：笔记整洁规范，知识点归纳清晰，值得同学们学习借鉴！"
+                :status="excellentModal.commentError ? 'error' : ''"
+                class="em-textarea"
+                @input="excellentModal.commentError = ''"
+              />
+              <div v-if="excellentModal.commentError" class="em-field-error">
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
+                </svg>
+                {{ excellentModal.commentError }}
+              </div>
+            </div>
+          </div>
+
+          <!-- 底部操作 -->
+          <div class="em-footer">
+            <button class="em-btn em-btn-cancel" @click="handleExcellentModalCancel">取消</button>
+            <button class="em-btn em-btn-confirm" @click="confirmExcellent">
+              <StarFilled style="font-size:13px;margin-right:5px;" />
+              确认评优
+            </button>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </teleport>
+
+  <!-- ========== 取消评优二次确认对话框 ========== -->
+  <teleport to="body">
+    <transition name="modal-fade">
+      <div v-if="cancelExcellentConfirm.visible" class="confirm-overlay" @click.self="cancelExcellentConfirm.visible = false">
+        <div class="confirm-dialog">
+          <div class="confirm-icon">
+            <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
+              <circle cx="12" cy="12" r="10" fill="#FEF3C7" stroke="#F59E0B" stroke-width="1.5"/>
+              <path d="M12 8v4M12 16h.01" stroke="#D97706" stroke-width="2" stroke-linecap="round"/>
+            </svg>
+          </div>
+          <h3 class="confirm-title">确认取消评优？</h3>
+          <p class="confirm-desc">
+            取消后，<strong>{{ cancelExcellentConfirm.student?.name }}</strong> 的优秀标记及点评内容将被清除，此操作不可撤销。
+          </p>
+          <div class="confirm-footer">
+            <button class="confirm-btn confirm-btn-secondary" @click="cancelExcellentConfirm.visible = false">再想想</button>
+            <button class="confirm-btn confirm-btn-danger" @click="doRemoveExcellent">确认取消</button>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </teleport>
+
+  <!-- 底部版权 (复用 PortalHomePage 风格) -->
+  <footer class="portal-footer">
+    <span>Copyright © 2025 &nbsp;QuanXue. All Rights Reserved.&nbsp; 渝ICP备05088888号</span>
+  </footer>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import dayjs from 'dayjs'
+import { CaretLeftOutlined, CaretRightOutlined, StarFilled } from '@ant-design/icons-vue'
+import { message } from 'ant-design-vue'
+
+const router = useRouter()
+
+const emit = defineEmits(['go-back', 'logout'])
+
+// 导航栏状态
+const showDropdown = ref(false)
+
+const handleLogout = () => {
+  showDropdown.value = false
+  emit('logout')
+  router.push('/login')
+}
+
+// 当前激活的页签
+const activeTab = ref('class1')
+
+// 日期选择器 - 默认选中当天
+const datePickerSectionRef = ref(null)
+const selectedDate = ref(dayjs())
+const showDatePicker = ref(false)
+const pickerDate = ref(dayjs())
+const dateValidationError = ref('')
+
+// 笔记评优活动时间限制 - 假设活动在过去30天，禁止选择未来日期
+const activityStartDate = dayjs().subtract(30, 'day').startOf('day')
+const activityEndDate = dayjs().endOf('day')
+
+const weekDays = ['日', '一', '二', '三', '四', '五', '六']
+
+// 格式化日期显示
+const formatDate = (date) => {
+  return dayjs(date).format('YYYY年MM月DD日')
+}
+
+const formatDateDisplay = () => {
+  return formatDate(selectedDate.value)
+}
+
+// 日历天数计算
+const calendarDays = computed(() => {
+  const year = pickerDate.value.year()
+  const month = pickerDate.value.month()
+  
+  const firstDay = dayjs().year(year).month(month).date(1)
+  const lastDay = firstDay.endOf('month')
+  const startPadding = firstDay.day()
+  
+  const days = []
+  
+  for (let i = 0; i < startPadding; i++) {
+    days.push({ date: null })
+  }
+  
+  for (let day = 1; day <= lastDay.date(); day++) {
+    const currentDate = firstDay.date(day)
+    days.push({
+      date: currentDate,
+      isToday: currentDate.isSame(dayjs(), 'day'),
+      isSelected: isDateSelected(currentDate),
+      isDisabled: isDateDisabled(currentDate)
+    })
+  }
+  
+  return days
+})
+
+const pickerMonth = computed(() => {
+  return pickerDate.value.format('YYYY年MM月')
+})
+
+const isDateSelected = (date) => {
+  return date.isSame(selectedDate.value, 'day')
+}
+
+const isDateDisabled = (date) => {
+  // 禁止选择未来日期
+  if (date.isAfter(dayjs().endOf('day'))) {
+    return true
+  }
+  return date.isBefore(activityStartDate, 'day') || date.isAfter(activityEndDate, 'day')
+}
+
+const toggleDatePicker = () => {
+  showDatePicker.value = !showDatePicker.value
+  if (showDatePicker.value) {
+    pickerDate.value = selectedDate.value
+  }
+}
+
+const prevMonth = () => {
+  pickerDate.value = pickerDate.value.subtract(1, 'month')
+}
+
+const nextMonth = () => {
+  pickerDate.value = pickerDate.value.add(1, 'month')
+}
+
+const selectDay = (day) => {
+  if (!day.date || day.isDisabled) return
+  selectedDate.value = day.date
+}
+
+const validateDate = () => {
+  dateValidationError.value = ''
+  
+  if (isDateDisabled(selectedDate.value)) {
+    dateValidationError.value = '选择的日期不在活动时间范围内'
+    return false
+  }
+  
+  return true
+}
+
+const clearSelection = () => {
+  selectedDate.value = dayjs()
+  dateValidationError.value = ''
+}
+
+const selectToday = () => {
+  selectedDate.value = dayjs()
+  dateValidationError.value = ''
+}
+
+const confirmSelection = () => {
+  if (validateDate()) {
+    showDatePicker.value = false
+    handleDateChange()
+  }
+}
+
+const handleClickOutside = (event) => {
+  if (datePickerSectionRef.value && !datePickerSectionRef.value.contains(event.target)) {
+    if (showDatePicker.value) {
+      showDatePicker.value = false
+    }
+  }
+}
+
+// 根据日期获取星期
+const getWeekDay = (date) => {
+  const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+  return weekDays[dayjs(date).day()]
+}
+
+// 课程基础数据（不含状态，状态由日期动态计算）
+const baseCourses = [
+  { id: 1, periodName: '第1节', periodTime: '8:00-8:45',   weekDay: '语文', courseType: '预习' },
+  { id: 2, periodName: '第2节', periodTime: '8:55-9:40',   weekDay: '数学', courseType: '复习' },
+  { id: 3, periodName: '第3节', periodTime: '10:00-10:45', weekDay: '英语', courseType: '预习' },
+  { id: 4, periodName: '第4节', periodTime: '10:55-11:40', weekDay: '物理', courseType: '复习' },
+  { id: 5, periodName: '第5节', periodTime: '14:00-14:45', weekDay: '化学', courseType: '预习' },
+  { id: 6, periodName: '第6节', periodTime: '14:55-15:40', weekDay: '生物', courseType: '复习' },
+  { id: 7, periodName: '第7节', periodTime: '16:00-16:45', weekDay: '历史', courseType: '预习' },
+  { id: 8, periodName: '第8节', periodTime: '16:55-17:40', weekDay: '地理', courseType: '复习' },
+]
+
+// 根据选中日期动态计算课程状态
+const tableData = computed(() => {
+  const today = dayjs().startOf('day')
+  const selected = dayjs(selectedDate.value).startOf('day')
+  const diff = selected.diff(today, 'day')
+
+  if (diff < 0) return baseCourses.map(c => ({ ...c, courseStatus: '已上课' }))
+  if (diff > 0) return baseCourses.map(c => ({ ...c, courseStatus: '未上课' }))
+  return baseCourses.map(c => {
+    let courseStatus
+    if (c.id <= 3)       courseStatus = '已上课'
+    else if (c.id === 4) courseStatus = '正在上课'
+    else                 courseStatus = '未上课'
+    return { ...c, courseStatus }
+  })
+})
+
+// 当前选中的课程 id
+const selectedCourseId = ref(null)
+
+// 是否显示缺省页面（用于"未开始"状态的课程）
+const showDefaultPage = ref(false)
+
+// 当前选中课程的状态
+const selectedCourseStatus = ref('')
+
+const selectCourse = (id) => {
+  const course = tableData.value.find(c => c.id === id)
+  const isPending = course && course.courseStatus === '未上课'
+  
+  if (selectedCourseId.value === id) {
+    // 取消选择
+    selectedCourseId.value = null
+    showDefaultPage.value = false
+    selectedCourseStatus.value = ''
+  } else {
+    // 选择新课程
+    selectedCourseId.value = id
+    selectedCourseStatus.value = course ? course.courseStatus : ''
+    // 如果是"未开始"状态，显示缺省页面
+    showDefaultPage.value = isPending
+  }
+}
+
+// 获取选中课程名称
+const getSelectedCourseName = () => {
+  if (!selectedCourseId.value) return ''
+  const course = tableData.value.find(c => c.id === selectedCourseId.value)
+  return course ? `${course.weekDay} - ${course.periodName}` : ''
+}
+
+// 朋友圈图片布局类名计算（基于实际展示数量）
+const getImageGridClass = (count) => {
+  if (count === 1) return 'grid-1'
+  if (count === 2 || count === 4) return 'grid-2'
+  return 'grid-3'
+}
+
+// 获取图片墙展示的图片列表（超9张只显示前9张）
+const getDisplayImages = (student) => {
+  return student.images.slice(0, 9)
+}
+
+// 生成学生姓名
+const generateStudentName = (index) => {
+  const surnames = ['张', '李', '王', '赵', '孙', '周', '吴', '郑', '陈', '刘']
+  const names = ['伟', '芳', '娜', '秀英', '敏', '静', '丽', '强', '磊', '军', '洋', '勇', '艳', '杰', '涛', '明', '超', '秀兰', '霞', '平', '刚', '文', '华', '玲', '辉', '婷', '龙', '飞', '鹏', '建华']
+  const surname = surnames[index % surnames.length]
+  const name = names[index % names.length]
+  return `${surname}${name}${index > 30 ? index % 10 : ''}`
+}
+
+// 生成随机图片数量
+const generateRandomImages = (randomSeed) => {
+  const count = Math.floor(Math.random() * 8) + 1
+  return Array.from({ length: count }, (_, i) => `https://picsum.photos/400/400?random=${randomSeed + i}`)
+}
+
+// 生成随机点赞
+const generateRandomLikes = () => {
+  const teachers = ['李老师', '张老师', '王老师', '英语老师', '物理老师', '班主任']
+  const students = ['张三', '李四', '王五', '赵六', '孙七']
+  const likes = []
+  const count = Math.floor(Math.random() * 5) + 1
+  for (let i = 0; i < count; i++) {
+    const isTeacher = Math.random() > 0.5
+    const name = isTeacher ? teachers[Math.floor(Math.random() * teachers.length)] : students[Math.floor(Math.random() * students.length)]
+    likes.push({ name, avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${name}` })
+  }
+  return likes
+}
+
+// 生成随机评论
+const generateRandomComments = () => {
+  const teachers = ['李老师', '张老师', '王老师', '英语老师', '物理老师', '班主任']
+  const students = ['张三', '李四', '王五', '赵六', '孙七']
+  const comments = []
+  const teacherComments = ['做得很认真，继续加油！', '作业完成得很棒！', '格式规范，字迹工整！', '非常好，值得表扬！', '继续保持！']
+  const studentComments = ['好厉害！', '向你学习！', '太棒了！', '已收藏！', '感谢分享！', '一起加油！']
+  const count = Math.floor(Math.random() * 4)
+  for (let i = 0; i < count; i++) {
+    const isTeacher = Math.random() > 0.5
+    const name = isTeacher ? teachers[Math.floor(Math.random() * teachers.length)] : students[Math.floor(Math.random() * students.length)]
+    const text = isTeacher ? teacherComments[Math.floor(Math.random() * teacherComments.length)] : studentComments[Math.floor(Math.random() * studentComments.length)]
+    comments.push({
+      name,
+      avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${name}`,
+      text,
+      time: dayjs().subtract(Math.floor(Math.random() * 180) + 5, 'minute').format('HH:mm')
+    })
+  }
+  return comments
+}
+
+// 生成随机作业内容
+const generateAssignmentContent = (index) => {
+  const contents = [
+    '今天的数学作业，重点是解析几何部分，感觉有点难。',
+    '语文作文《我的梦想》，已完成。',
+    '英语单词抄写，每天坚持！',
+    '物理实验报告，整理了好久终于写完了。',
+    '期末复习笔记大放送！整理了好多知识点，希望能帮到大家！',
+    '化学方程式配平练习，完成了。',
+    '生物知识点总结，感觉这次考试应该没问题。',
+    '历史时间线整理，花了不少时间。',
+    '地理地图标记练习，做得很认真。',
+    '今天的作业都完成啦，大家一起加油！'
+  ]
+  return contents[index % contents.length]
+}
+
+// Mock 班级学生作业数据 - 100条
+const mockStudentAssignments = ref(
+  Array.from({ length: 100 }, (_, i) => {
+    const id = i + 1
+    const name = generateStudentName(id)
+    const isExcellent = id % 7 === 0
+    return {
+      id,
+      name,
+      avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${name}`,
+      content: generateAssignmentContent(id),
+      submitTime: dayjs().subtract((id - 1) * 10 + Math.floor(Math.random() * 10), 'minute').format('YYYY-MM-DD HH:mm'),
+      images: generateRandomImages(id * 100),
+      selectedImages: [],
+      isExcellent,
+      excellentComment: isExcellent ? '笔记整洁规范，知识点归纳清晰，值得同学们学习借鉴！' : '',
+      excellentTime: isExcellent ? dayjs().subtract(Math.floor(Math.random() * 60) + 5, 'minute').format('HH:mm') : '',
+      likes: generateRandomLikes(),
+      comments: generateRandomComments()
+    }
+  })
+)
+
+// ========== 筛选相关 ==========
+const filterExcellentStatus = ref('all')
+const filterStudentName = ref('')
+
+const excellentFilterOptions = [
+  { label: '全部', value: 'all' },
+  { label: '已评优', value: 'excellent' },
+  { label: '未评优', value: 'normal' }
+]
+
+const filteredStudentAssignments = computed(() => {
+  let result = mockStudentAssignments.value
+
+  if (filterExcellentStatus.value === 'excellent') {
+    result = result.filter(s => s.isExcellent)
+  } else if (filterExcellentStatus.value === 'normal') {
+    result = result.filter(s => !s.isExcellent)
+  }
+
+  if (filterStudentName.value.trim()) {
+    const keyword = filterStudentName.value.trim().toLowerCase()
+    result = result.filter(s => s.name.toLowerCase().includes(keyword))
+  }
+
+  return result
+})
+
+const clearFilters = () => {
+  filterExcellentStatus.value = 'all'
+  filterStudentName.value = ''
+}
+
+const hasActiveFilters = computed(() => {
+  return filterExcellentStatus.value !== 'all' || filterStudentName.value.trim() !== ''
+})
+
+// ========== 分页相关 ==========
+const currentPage = ref(1)
+const pageSize = ref(10)
+const pageSizeOptions = [10, 20, 50]
+const isLoading = ref(false)
+const loadError = ref(null)
+const pageCache = ref(new Map())
+
+const totalRecords = computed(() => filteredStudentAssignments.value.length)
+const totalPages = computed(() => Math.ceil(totalRecords.value / pageSize.value) || 1)
+
+const paginatedData = computed(() => {
+  const data = filteredStudentAssignments.value
+  const start = (currentPage.value - 1) * pageSize.value
+  const end = start + pageSize.value
+  return data.slice(start, end)
+})
+
+const changePage = (page) => {
+  if (page < 1 || page > totalPages.value) return
+  currentPage.value = page
+}
+
+const changePageSize = (size) => {
+  pageSize.value = size
+  currentPage.value = 1
+}
+
+const goToFirstPage = () => changePage(1)
+const goToPrevPage = () => changePage(currentPage.value - 1)
+const goToNextPage = () => changePage(currentPage.value + 1)
+const goToLastPage = () => changePage(totalPages.value)
+
+const getDisplayPageNumbers = () => {
+  const pages = []
+  const total = totalPages.value
+  const current = currentPage.value
+
+  if (total <= 7) {
+    for (let i = 1; i <= total; i++) pages.push(i)
+  } else {
+    if (current <= 4) {
+      for (let i = 1; i <= 5; i++) pages.push(i)
+      pages.push('...')
+      pages.push(total)
+    } else if (current >= total - 3) {
+      pages.push(1)
+      pages.push('...')
+      for (let i = total - 4; i <= total; i++) pages.push(i)
+    } else {
+      pages.push(1)
+      pages.push('...')
+      for (let i = current - 1; i <= current + 1; i++) pages.push(i)
+      pages.push('...')
+      pages.push(total)
+    }
+  }
+  return pages
+}
+
+watch([filterExcellentStatus, filterStudentName], () => {
+  currentPage.value = 1
+})
+
+// ========== 评优相关 ==========
+const isImageSelected = (student, index) => {
+  if (student.selectedImages.length === 0) return true
+  return student.selectedImages.includes(index)
+}
+
+const toggleImageSelect = (student, index) => {
+  if (student.isExcellent) return
+  const sel = student.selectedImages
+  if (sel.length === 0) {
+    student.selectedImages = student.images.map((_, i) => i).filter(i => i !== index)
+  } else {
+    const pos = sel.indexOf(index)
+    if (pos === -1) {
+      sel.push(index)
+      if (sel.length === student.images.length) student.selectedImages = []
+    } else {
+      sel.splice(pos, 1)
+    }
+  }
+}
+
+const toggleExcellent = (student, val) => {
+  if (val) {
+    // 开启评优 → 弹出模态框，强制输入点评
+    excellentModal.value = {
+      visible: true,
+      student,
+      comment: '',
+      commentError: ''
+    }
+  } else {
+    // 取消评优 → 弹出二次确认
+    cancelExcellentConfirm.value = {
+      visible: true,
+      student
+    }
+  }
+}
+
+// ========== 评优模态框 ==========
+const excellentModal = ref({
+  visible: false,
+  student: null,
+  comment: '',
+  commentError: ''
+})
+
+const handleExcellentModalCancel = () => {
+  excellentModal.value.visible = false
+}
+
+const confirmExcellent = () => {
+  const comment = excellentModal.value.comment.trim()
+  if (!comment) {
+    excellentModal.value.commentError = '请输入点评内容后再提交'
+    return
+  }
+  const student = excellentModal.value.student
+  student.isExcellent = true
+  student.excellentComment = comment
+  student.excellentTime = dayjs().format('HH:mm')
+  excellentModal.value.visible = false
+}
+
+// 获取评优预览图（最多4张）
+const getExcellentPreviewImages = (student) => {
+  const indices = student.selectedImages.length === 0
+    ? student.images.map((_, i) => i)
+    : student.selectedImages
+  return indices.slice(0, 4).map(i => student.images[i])
+}
+
+// ========== 取消评优确认 ==========
+const cancelExcellentConfirm = ref({
+  visible: false,
+  student: null
+})
+
+const doRemoveExcellent = () => {
+  const student = cancelExcellentConfirm.value.student
+  if (student) {
+    student.isExcellent = false
+    student.excellentComment = ''
+    student.excellentTime = ''
+  }
+  cancelExcellentConfirm.value.visible = false
+}
+
+const getEffectiveSelectedCount = (student) => {
+  return student.selectedImages.length === 0 ? student.images.length : student.selectedImages.length
+}
+
+// 图片点击处理（评优选择 vs 放大查看）
+// 评优模式下点击 = 选择；非评优模式下点击 = 放大
+const handleImageClick = (student, index) => {
+  if (student.isExcellent) {
+    // 已评优：直接放大
+    openLightbox(student.images, index, student)
+    return
+  }
+  // 未评优：左上角勾选区域负责选择，其余区域负责放大
+  openLightbox(student.images, index, student)
+}
+
+// 打开全部图片（超9张时）
+const openAllImages = (student) => {
+  openLightbox(student.images, 9, student)
+}
+
+// ========== 灯箱 ==========
+const lightbox = ref({
+  visible: false,
+  images: [],
+  current: 0,
+  student: null  // 关联的学生对象，用于灯箱内勾选
+})
+
+const openLightbox = (images, startIndex = 0, student = null) => {
+  lightbox.value.images = images
+  lightbox.value.current = startIndex
+  lightbox.value.student = student
+  lightbox.value.visible = true
+}
+
+const closeLightbox = () => {
+  lightbox.value.visible = false
+}
+
+const lightboxPrev = () => {
+  const len = lightbox.value.images.length
+  lightbox.value.current = (lightbox.value.current - 1 + len) % len
+}
+
+const lightboxNext = () => {
+  const len = lightbox.value.images.length
+  lightbox.value.current = (lightbox.value.current + 1) % len
+}
+
+// 键盘快捷键
+const handleKeydown = (e) => {
+  if (!lightbox.value.visible) return
+  if (e.key === 'ArrowLeft')  lightboxPrev()
+  if (e.key === 'ArrowRight') lightboxNext()
+  if (e.key === 'Escape')     closeLightbox()
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeydown)
+  document.addEventListener('click', handleClickOutside)
+})
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeydown)
+  document.removeEventListener('click', handleClickOutside)
+})
+
+// ========== 详情弹窗 ==========
+const detailModal = ref({ visible: false, student: null })
+
+const openDetailModal = (student) => {
+  detailModal.value.student = student
+  detailModal.value.visible = true
+}
+
+// ========== 日期操作 ==========
+const handleDateChange = () => {
+  console.log('选择的日期:', dayjs(selectedDate.value).format('YYYY-MM-DD'))
+}
+
+const goNextDay = () => {
+  selectedDate.value = dayjs(selectedDate.value).subtract(1, 'day')
+  handleDateChange()
+}
+
+const goPrevDay = () => {
+  const nextDate = dayjs(selectedDate.value).add(1, 'day')
+  // 禁止选择未来日期
+  if (!nextDate.isAfter(dayjs().endOf('day'))) {
+    selectedDate.value = nextDate
+    handleDateChange()
+  } else {
+    message.warning('不能选择未来日期')
+  }
+}
+
+const goBack = () => {
+  router.push('/admin')
+}
+</script>
+
+<style scoped>
+/* ========== 页面整体布局 ========== */
+.note-evaluation-page {
+  width: 100%;
+  min-height: calc(100vh - 160px);
+  background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ========== 内容区域容器 - 两侧留白 ========== */
+.content-wrapper {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 16px;
+  box-sizing: border-box;
+}
+
+/* 页面头部内容容器 - 已由 content-wrapper 控制 */
+.page-header .content-wrapper {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.page-header .header-content {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+/* Tab容器内容区域 - 已由 content-wrapper 控制 */
+.tabs-container .content-wrapper {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.tabs-container .class-content {
+  width: 100%;
+}
+
+/* ========== 响应式留白适配 ========== */
+
+/* 小屏幕手机 (< 576px) */
+@media (max-width: 575px) {
+  .content-wrapper,
+  .page-header .header-content {
+    padding: 0 12px;
+  }
+  
+  .tabs-container .class-content {
+    padding: 0;
+  }
+}
+
+/* 平板设备 (576px - 767px) */
+@media (min-width: 576px) and (max-width: 767px) {
+  .content-wrapper,
+  .page-header .header-content {
+    padding: 0 16px;
+  }
+  
+  .tabs-container .class-content {
+    padding: 0;
+  }
+}
+
+/* 平板横屏/小桌面 (768px - 991px) */
+@media (min-width: 768px) and (max-width: 991px) {
+  .content-wrapper,
+  .page-header .header-content {
+    padding: 0 20px;
+  }
+  
+  .tabs-container .class-content {
+    padding: 0;
+  }
+}
+
+/* 标准桌面 (992px - 1199px) */
+@media (min-width: 992px) and (max-width: 1199px) {
+  .content-wrapper,
+  .page-header .header-content {
+    padding: 0 24px;
+  }
+  
+  .tabs-container .class-content {
+    padding: 0;
+  }
+}
+
+/* 大屏幕桌面 (1200px - 1439px) */
+@media (min-width: 1200px) and (max-width: 1439px) {
+  .content-wrapper,
+  .page-header .header-content {
+    padding: 0 24px;
+  }
+  
+  .tabs-container .class-content {
+    padding: 0;
+  }
+}
+
+/* 超大屏幕桌面 (1440px+) */
+@media (min-width: 1440px) {
+  .content-wrapper,
+  .page-header .header-content {
+    padding: 0 32px;
+  }
+  
+  .tabs-container .class-content {
+    padding: 0;
+  }
+}
+
+/* 特大屏幕 (1920px+) - 增加更多留白 */
+@media (min-width: 1920px) {
+  .content-wrapper,
+  .page-header .header-content {
+    padding: 0 40px;
+  }
+}
+
+/* 4K屏幕 (2560px+) - 进一步增加留白 */
+@media (min-width: 2560px) {
+  .content-wrapper,
+  .page-header .header-content {
+    padding: 0 48px;
+  }
+}
+
+/* ========== 页面头部区域 ========== */
+.page-header {
+  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
+  padding: 32px 32px 28px;
+  border-radius: 16px 16px 0 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.page-header::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  right: -10%;
+  width: 300px;
+  height: 300px;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+  border-radius: 50%;
+}
+
+.header-content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+/* ========== 返回按钮 ========== */
+.back-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 16px;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 10px;
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  flex-shrink: 0;
+}
+
+.back-btn:hover {
+  background: rgba(255, 255, 255, 0.25);
+  border-color: rgba(255, 255, 255, 0.4);
+  transform: translateX(-4px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.back-btn:active {
+  transform: translateX(-2px);
+}
+
+.back-btn svg {
+  flex-shrink: 0;
+}
+
+.back-text {
+  white-space: nowrap;
+}
+
+.title-group {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex: 1;
+}
+
+.title-icon {
+  width: 48px;
+  height: 48px;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.title-text {
+  flex: 1;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 700;
+  color: #ffffff;
+  letter-spacing: 0.5px;
+  line-height: 1.2;
+}
+
+.page-subtitle {
+  margin: 8px 0 0;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.85);
+  font-weight: 400;
+}
+
+/* ========== Tab 容器 ========== */
+.tabs-container {
+  background: #ffffff;
+  border-radius: 0 0 16px 16px;
+  padding: 24px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
+  flex: 1;
+}
+
+/* ========== Tab 样式优化 ========== */
+.custom-tabs :deep(.ant-tabs-nav) {
+  margin-bottom: 24px;
+}
+
+.custom-tabs :deep(.ant-tabs-tab) {
+  background: #F8FAFC;
+  border: 1px solid #E2E8F0;
+  border-radius: 10px;
+  padding: 10px 20px;
+  margin-right: 12px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  font-weight: 500;
+}
+
+.custom-tabs :deep(.ant-tabs-tab:hover) {
+  background: #EFF6FF;
+  border-color: #667EEA;
+  color: #667EEA;
+  transform: translateY(-2px);
+}
+
+.custom-tabs :deep(.ant-tabs-tab-active) {
+  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
+  border-color: transparent;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+.custom-tabs :deep(.ant-tabs-tab-active .ant-tabs-tab-btn) {
+  color: #ffffff;
+  font-weight: 600;
+}
+
+.custom-tabs :deep(.ant-tabs-ink-bar) {
+  display: none;
+}
+
+/* ========== 内容区域 ========== */
+.class-content {
+  padding: 8px 0;
+}
+
+/* ========== 左侧面板 ========== */
+.left-panel {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 24px;
+  min-height: 560px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+  border: 1px solid #F1F5F9;
+  transition: all 0.3s ease;
+}
+
+.left-panel:hover {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+
+/* ========== 日期选择区域 ========== */
+.date-picker-section {
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #F1F5F9;
+}
+
+.date-control-group {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
+  padding: 12px 16px;
+  border-radius: 12px;
+  border: 1px solid #E2E8F0;
+  transition: all 0.3s ease;
+}
+
+.date-control-group:hover {
+  border-color: #667EEA;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
+}
+
+.nav-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  background: #ffffff;
+  border: 1px solid #E2E8F0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+}
+
+.nav-btn:hover {
+  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
+  border-color: transparent;
+  color: #ffffff;
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+.date-display {
+  flex: 1;
+  text-align: center;
+  user-select: none;
+  cursor: pointer;
+}
+
+.date-main {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1E293B;
+  margin-bottom: 2px;
+}
+
+.date-week {
+  font-size: 13px;
+  color: #64748B;
+  font-weight: 500;
+}
+
+.hidden-date-picker {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* ========== 自定义日期选择器 ========== */
+.custom-date-picker {
+  margin-top: 16px;
+  background: #ffffff;
+  border: 1px solid #E2E8F0;
+  border-radius: 16px;
+  padding: 16px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+  animation: picker-slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes picker-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.date-picker-fade-enter-active,
+.date-picker-fade-leave-active {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.date-picker-fade-enter-from,
+.date-picker-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+.picker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  padding: 0 8px;
+}
+
+.picker-nav-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  border: 1px solid #E2E8F0;
+  background: #F8FAFC;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: #64748B;
+}
+
+.picker-nav-btn:hover {
+  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
+  border-color: transparent;
+  color: #ffffff;
+  transform: scale(1.05);
+}
+
+.picker-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #1E293B;
+}
+
+.weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 4px;
+  margin-bottom: 8px;
+}
+
+.weekday {
+  text-align: center;
+  font-size: 12px;
+  font-weight: 600;
+  color: #94A3B8;
+  padding: 8px 0;
+}
+
+.days-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 4px;
+  margin-bottom: 12px;
+}
+
+.day-cell {
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 500;
+  color: #1E293B;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.day-cell:hover:not(.day-empty):not(.day-disabled) {
+  background: #EFF6FF;
+  color: #667EEA;
+  transform: scale(1.05);
+}
+
+.day-empty {
+  cursor: default;
+}
+
+.day-today {
+  color: #667EEA;
+  font-weight: 700;
+}
+
+.day-today::after {
+  content: '';
+  position: absolute;
+  bottom: 4px;
+  width: 4px;
+  height: 4px;
+  background: #667EEA;
+  border-radius: 50%;
+}
+
+.day-selected {
+  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
+  color: #ffffff;
+  font-weight: 600;
+}
+
+.day-selected:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+
+.day-disabled {
+  color: #CBD5E1;
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.day-disabled:hover {
+  background: transparent;
+  color: #CBD5E1;
+  transform: none;
+}
+
+.picker-footer {
+  display: flex;
+  gap: 8px;
+  padding-top: 12px;
+  border-top: 1px solid #F1F5F9;
+}
+
+.picker-btn {
+  flex: 1;
+  padding: 10px 16px;
+  border-radius: 10px;
+  border: 1px solid transparent;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.picker-btn-clear {
+  background: #F8FAFC;
+  border-color: #E2E8F0;
+  color: #64748B;
+}
+
+.picker-btn-clear:hover {
+  background: #FEF2F2;
+  border-color: #FECACA;
+  color: #DC2626;
+}
+
+.picker-btn-today {
+  background: #F8FAFC;
+  border-color: #E2E8F0;
+  color: #667EEA;
+}
+
+.picker-btn-today:hover {
+  background: #EFF6FF;
+  border-color: #667EEA;
+}
+
+.picker-btn-confirm {
+  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
+  color: #ffffff;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+.picker-btn-confirm:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
+}
+
+.picker-btn-confirm:active {
+  transform: translateY(0);
+}
+
+/* ========== 日期错误提示 ========== */
+.date-error {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 12px;
+  padding: 10px 14px;
+  background: #FEF2F2;
+  border: 1px solid #FECACA;
+  border-radius: 10px;
+  color: #DC2626;
+  font-size: 13px;
+  font-weight: 500;
+  animation: error-shake 0.4s ease;
+}
+
+@keyframes error-shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-4px); }
+  75% { transform: translateX(4px); }
+}
+
+/* ========== 表格区域 ========== */
+.table-section {
+  margin-top: 0;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.section-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #1E293B;
+  letter-spacing: 0.3px;
+}
+
+.section-badge {
+  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
+  color: #ffffff;
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
+}
+
+/* ========== 课程卡片列表 ========== */
+.course-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.course-card {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border-radius: 10px;
+  padding: 10px 12px 10px 0;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid transparent;
+  /* 性能优化：提示浏览器该元素将发生变化 */
+  will-change: transform, box-shadow, opacity;
+  /* 使用GPU加速 */
+  transform: translateZ(0);
+  /* 优化点击响应时间 */
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* 点击时的即时反馈 */
+.course-card:active {
+  transform: scale(0.98) translateZ(0);
+  transition: transform 0.1s ease;
+}
+
+/* 已上课：低调灰绿，透明度降低 */
+.card-completed {
+  background: #F8FAFC;
+  border-color: #E2E8F0;
+  opacity: 0.72;
+}
+.card-completed:hover {
+  opacity: 1;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+}
+.card-completed .card-bar { background: #86EFAC; }
+.card-completed .card-period-name { color: #64748B; }
+.card-completed .card-period-time { color: #94A3B8; }
+.card-completed .card-subject-name { color: #64748B; }
+
+/* 正在上课：高亮黄色，带光晕 */
+.card-ongoing {
+  background: linear-gradient(135deg, #FFFBEB 0%, #FEF9C3 100%);
+  border-color: #FDE047;
+  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.25), 0 4px 16px rgba(250, 204, 21, 0.2);
+}
+.card-ongoing:hover {
+  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.35), 0 6px 20px rgba(250, 204, 21, 0.25);
+}
+.card-ongoing .card-bar {
+  background: linear-gradient(180deg, #FACC15 0%, #EAB308 100%);
+  animation: bar-pulse 2s ease-in-out infinite;
+}
+.card-ongoing .card-period-name { color: #92400E; font-weight: 700; }
+.card-ongoing .card-period-time { color: #B45309; }
+.card-ongoing .card-subject-name { color: #78350F; font-weight: 700; }
+
+/* 未上课：浅灰，略透明 */
+.card-pending {
+  background: #FAFAFA;
+  border-color: #F1F5F9;
+  opacity: 0.6;
+}
+.card-pending:hover {
+  opacity: 1;
+  background: #F8FAFC;
+  border-color: #E2E8F0;
+}
+.card-pending .card-bar { background: #CBD5E1; }
+.card-pending .card-period-name { color: #94A3B8; }
+.card-pending .card-period-time { color: #CBD5E1; }
+.card-pending .card-subject-name { color: #94A3B8; }
+
+/* 左侧进度条 */
+.card-bar {
+  width: 4px;
+  align-self: stretch;
+  border-radius: 0 3px 3px 0;
+  flex-shrink: 0;
+  min-height: 36px;
+}
+
+@keyframes bar-pulse {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.55; }
+}
+
+/* 节次区域 */
+.card-period {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 52px;
+  flex-shrink: 0;
+}
+
+.card-period-name {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.card-period-time {
+  font-size: 11px;
+  line-height: 1.2;
+}
+
+/* 科目区域 */
+.card-subject {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.card-subject-name {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1;
+}
+
+/* 预习/复习标签 */
+.card-type-tag {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 5px;
+  border-radius: 3px;
+  flex-shrink: 0;
+  line-height: 1.4;
+}
+
+.tag-preview {
+  background: #E0F2FE;
+  color: #0284C7;
+  border: 1px solid #BAE6FD;
+}
+
+.tag-review {
+  background: #FEF3C7;
+  color: #D97706;
+  border: 1px solid #FDE68A;
+}
+
+/* 右侧状态图标 */
+.card-status-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.icon-pulse {
+  animation: icon-pulse 2s ease-in-out infinite;
+}
+
+@keyframes icon-pulse {
+  0%, 100% { transform: scale(1);    opacity: 1; }
+  50%       { transform: scale(1.15); opacity: 0.8; }
+}
+
+/* ========== 选中状态（覆盖三种课程状态） ========== */
+.card-selected {
+  border-color: #667EEA !important;
+  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25), 0 4px 16px rgba(102, 126, 234, 0.18) !important;
+  opacity: 1 !important;
+}
+
+.card-selected.card-completed {
+  background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%) !important;
+}
+
+.card-selected.card-pending {
+  background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%) !important;
+}
+
+.card-selected.card-ongoing {
+  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3), 0 4px 20px rgba(102, 126, 234, 0.2) !important;
+}
+
+.card-selected .card-period-name,
+.card-selected .card-subject-name {
+  color: #4338CA !important;
+}
+
+.card-selected .card-period-time {
+  color: #6366F1 !important;
+}
+
+.card-selected .card-bar {
+  background: linear-gradient(180deg, #667EEA 0%, #764BA2 100%) !important;
+  animation: none !important;
+}
+
+/* ========== 右侧面板 ========== */
+.right-panel {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 48px;
+  min-height: 560px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+  border: 1px solid #F1F5F9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.right-panel.has-content {
+  align-items: flex-start;
+  padding: 24px;
+}
+
+.right-panel:hover {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+
+/* ========== 朋友圈风格作业展示 ========== */
+.assignments-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.assignments-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 16px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid #F1F5F9;
+}
+
+.assignments-header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.assignments-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1E293B;
+  margin: 0;
+}
+
+.submit-count {
+  font-size: 14px;
+  color: #64748B;
+  background: #F1F5F9;
+  padding: 4px 12px;
+  border-radius: 20px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.filter-result-sep {
+  color: #CBD5E1;
+}
+
+.filter-result-count {
+  color: #667EEA;
+  font-weight: 500;
+}
+
+.filter-section {
+  background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
+  border-radius: 12px;
+  padding: 16px 20px;
+  margin-bottom: 20px;
+  border: 1px solid #E2E8F0;
+}
+
+.filter-row {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  flex-wrap: wrap;
+}
+
+.filter-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.filter-item-search {
+  flex: 1;
+  min-width: 200px;
+  max-width: 280px;
+}
+
+.filter-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #475569;
+  white-space: nowrap;
+}
+
+.filter-radio-group {
+  display: flex;
+  gap: 4px;
+}
+
+.filter-radio-group :deep(.ant-radio-wrapper) {
+  padding: 5px 14px;
+  border-radius: 8px;
+  border: 1px solid #E2E8F0;
+  background: #ffffff;
+  font-size: 13px;
+  color: #64748B;
+  transition: all 0.2s ease;
+  margin-right: 0;
+}
+
+.filter-radio-group :deep(.ant-radio-wrapper:hover) {
+  border-color: #667EEA;
+  color: #667EEA;
+}
+
+.filter-radio-group :deep(.ant-radio-wrapper-checked) {
+  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
+  border-color: transparent;
+  color: #ffffff;
+}
+
+.filter-radio-group :deep(.ant-radio-wrapper-checked:hover) {
+  color: #ffffff;
+}
+
+.filter-radio-group :deep(.ant-radio) {
+  display: none;
+}
+
+.filter-search-input {
+  flex: 1;
+}
+
+.filter-search-input :deep(.ant-input) {
+  border-radius: 8px;
+  border: 1px solid #E2E8F0;
+  background: #ffffff;
+  font-size: 13px;
+  padding: 6px 11px 6px 36px;
+  transition: all 0.2s ease;
+}
+
+.filter-search-input :deep(.ant-input:focus),
+.filter-search-input :deep(.ant-input:hover) {
+  border-color: #667EEA;
+  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
+}
+
+.filter-search-input :deep(.ant-input-prefix) {
+  color: #94A3B8;
+  margin-right: 8px;
+}
+
+.filter-search-input :deep(.ant-input-clear-icon) {
+  color: #94A3B8;
+  font-size: 12px;
+}
+
+.filter-clear-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-radius: 8px;
+  border: 1px solid #FEE2E2;
+  background: #FEF2F2;
+  color: #DC2626;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.filter-clear-btn:hover {
+  background: #FEE2E2;
+  border-color: #FECACA;
+}
+
+.filter-clear-btn svg {
+  flex-shrink: 0;
+}
+
+.assignments-list {
+  flex: 1;
+  overflow-y: auto;
+  padding-right: 8px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+  align-items: start;
+}
+
+.assignments-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.assignments-list::-webkit-scrollbar-thumb {
+  background: #CBD5E1;
+  border-radius: 3px;
+}
+
+.pagination-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 0 0;
+  border-top: 1px solid #F1F5F9;
+  margin-top: 20px;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.pagination-status {
+  display: flex;
+  align-items: center;
+}
+
+.status-text {
+  font-size: 14px;
+  color: #64748B;
+}
+
+.status-highlight {
+  color: #667EEA;
+  font-weight: 600;
+}
+
+.page-size-selector {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.page-size-label {
+  font-size: 14px;
+  color: #64748B;
+}
+
+.page-size-select {
+  min-width: 100px;
+}
+
+.page-size-select :deep(.ant-select-selector) {
+  border-radius: 8px;
+  border: 1px solid #E2E8F0;
+  background: #ffffff;
+  font-size: 13px;
+  transition: all 0.2s ease;
+}
+
+.page-size-select :deep(.ant-select-selector:hover) {
+  border-color: #667EEA;
+}
+
+.page-size-select :deep(.ant-select-focused .ant-select-selector) {
+  border-color: #667EEA;
+  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
+}
+
+.pagination-nav {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.page-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 36px;
+  height: 36px;
+  padding: 0 8px;
+  border-radius: 8px;
+  border: 1px solid #E2E8F0;
+  background: #ffffff;
+  color: #475569;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.page-btn:hover:not(:disabled) {
+  border-color: #667EEA;
+  color: #667EEA;
+  background: #EFF6FF;
+}
+
+.page-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.page-btn--active {
+  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
+  border-color: transparent;
+  color: #ffffff;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+}
+
+.page-btn--active:hover {
+  color: #ffffff;
+  background: linear-gradient(135deg, #5A67D8 0%, #6B46C1 100%);
+}
+
+.page-ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 36px;
+  height: 36px;
+  color: #94A3B8;
+  font-size: 14px;
+  user-select: none;
+}
+
+.moment-card {
+  display: flex;
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid #F1F5F9;
+  border-radius: 12px;
+  background: #ffffff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+  transition: box-shadow 0.2s ease;
+  position: relative;
+}
+
+.moment-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.moment-card:last-child {
+  border-bottom: 1px solid #F1F5F9;
+  padding-bottom: 16px;
+}
+
+.moment-avatar {
+  width: 44px;
+  height: 44px;
+  border-radius: 8px;
+  overflow: hidden;
+  flex-shrink: 0;
+  background: #F1F5F9;
+}
+
+.moment-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.moment-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.moment-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #576B95; /* 微信朋友圈昵称颜色 */
+  margin-bottom: 6px;
+}
+
+.moment-text {
+  font-size: 15px;
+  color: #1E293B;
+  line-height: 1.6;
+  margin-bottom: 12px;
+  word-break: break-all;
+}
+
+/* 图片网格布局 */
+.moment-images {
+  display: grid;
+  gap: 8px; /* 微信朋友圈间距 */
+  margin-bottom: 12px;
+  max-width: 320px; /* 限制图片墙最大宽度 */
+}
+
+.grid-1 {
+  grid-template-columns: 1fr;
+  max-width: 220px;
+}
+
+.grid-2 {
+  grid-template-columns: repeat(2, 1fr);
+  max-width: 220px;
+}
+
+.grid-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.moment-image-wrapper {
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  border-radius: 6px; /* 微信朋友圈图片圆角 */
+  background: #F1F5F9;
+  cursor: pointer;
+  position: relative;
+}
+
+.moment-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.moment-image-wrapper::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.03);
+  pointer-events: none;
+}
+
+.moment-image-wrapper:hover .moment-image {
+  transform: scale(1.03);
+}
+
+/* ========== 图片选中 / 未选中状态 ========== */
+.img-selected {
+  outline: 2.5px solid #667EEA;
+  outline-offset: -2px;
+}
+
+.img-unselected {
+  opacity: 0.38;
+  filter: grayscale(40%);
+}
+
+.img-unselected:hover {
+  opacity: 0.65;
+}
+
+.img-locked {
+  cursor: default !important;
+}
+
+/* 选中勾标记 - 左上角热区 */
+.img-select-zone {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 4;
+  cursor: pointer;
+}
+
+.img-select-circle {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.9);
+  background: rgba(0, 0, 0, 0.25);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.18s ease;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
+}
+
+.img-select-circle--checked {
+  background: #667EEA;
+  border-color: #667EEA;
+}
+
+.img-select-zone:hover .img-select-circle:not(.img-select-circle--checked) {
+  background: rgba(255, 255, 255, 0.35);
+  border-color: #ffffff;
+}
+
+/* ========== 评优操作栏 ========== */
+.excellent-action-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: linear-gradient(135deg, #F8FAFF 0%, #EEF2FF 100%);
+  border: 1px solid #C7D2FE;
+  border-radius: 10px;
+  padding: 10px 14px;
+  margin-bottom: 12px;
+  gap: 12px;
+}
+
+.excellent-action-left {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.excellent-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #4338CA;
+  line-height: 1.3;
+}
+
+.excellent-hint {
+  font-size: 11px;
+  color: #818CF8;
+  line-height: 1.3;
+}
+
+.excellent-switch {
+  flex-shrink: 0;
+}
+
+/* Switch 激活时颜色 */
+.switch-active :deep(.ant-switch) {
+  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
+}
+
+/* ========== 评优标签 ========== */
+.moment-card {
+  position: relative;
+}
+
+.excellent-badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
+  color: #ffffff;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 4px 10px 4px 8px;
+  border-radius: 0 0 0 10px;
+  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
+  letter-spacing: 0.3px;
+  z-index: 2;
+}
+
+.excellent-badge-icon {
+  font-size: 11px;
+  color: #FEF3C7;
+}
+
+/* 已评优的卡片整体高亮边框 */
+.moment-card--excellent {
+  border-radius: 12px;
+  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35), 0 4px 16px rgba(245, 158, 11, 0.12);
+  background: linear-gradient(135deg, #FFFBEB 0%, #FFF7ED 100%);
+  border-color: transparent;
+}
+
+.moment-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 8px;
+}
+
+.moment-time {
+  font-size: 13px;
+  color: #94A3B8;
+}
+
+.moment-actions {
+  display: flex;
+  gap: 16px;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  color: #576B95; /* 微信朋友圈操作按钮颜色 */
+  cursor: pointer;
+  transition: opacity 0.2s;
+  background: #F1F5F9;
+  padding: 4px 10px;
+  border-radius: 4px;
+}
+
+.action-btn:hover {
+  opacity: 0.8;
+}
+
+/* ========== 空状态样式 ========== */
+.empty-state {
+  text-align: center;
+  padding: 40px 20px;
+  max-width: 480px;
+}
+
+.empty-icon-wrapper {
+  margin: 0 auto 32px;
+  animation: float 3s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+
+.empty-title {
+  font-size: 22px;
+  font-weight: 600;
+  color: #1E293B;
+  margin: 0 0 12px;
+  letter-spacing: 0.3px;
+}
+
+.empty-desc {
+  font-size: 14px;
+  color: #64748B;
+  line-height: 1.6;
+  margin: 0 0 32px;
+}
+
+.empty-tips {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 20px;
+  background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
+  border-radius: 12px;
+  border: 1px solid #E2E8F0;
+}
+
+.tip-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  color: #475569;
+  font-weight: 500;
+}
+
+.tip-item svg {
+  color: #667EEA;
+  flex-shrink: 0;
+}
+
+/* ========== 缺省页面样式（课程未开始状态） ========== */
+.default-state {
+  text-align: center;
+  padding: 48px 32px;
+  max-width: 520px;
+  animation: default-fade-in 0.3s ease;
+}
+
+@keyframes default-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.default-icon-wrapper {
+  margin: 0 auto 28px;
+  animation: clock-pulse 2s ease-in-out infinite;
+}
+
+@keyframes clock-pulse {
+  0%, 100% { 
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% { 
+    transform: scale(1.05);
+    opacity: 0.85;
+  }
+}
+
+.default-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: #1E293B;
+  margin: 0 0 12px;
+  letter-spacing: 0.3px;
+}
+
+.default-desc {
+  font-size: 15px;
+  color: #64748B;
+  line-height: 1.6;
+  margin: 0 0 28px;
+}
+
+.default-course-info {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 20px 24px;
+  background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
+  border-radius: 12px;
+  border: 1px solid #E2E8F0;
+  margin-bottom: 24px;
+  text-align: left;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.info-label {
+  font-size: 14px;
+  color: #64748B;
+  font-weight: 500;
+}
+
+.info-value {
+  font-size: 14px;
+  color: #1E293B;
+  font-weight: 600;
+}
+
+.info-value.status-pending {
+  color: #94A3B8;
+  background: #F1F5F9;
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 13px;
+}
+
+.default-tips {
+  padding: 20px 24px;
+  background: linear-gradient(135deg, #FFFBEB 0%, #FEF9C3 100%);
+  border-radius: 12px;
+  border: 1px solid #FDE68A;
+  text-align: left;
+}
+
+.tip-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #B45309;
+  margin-bottom: 12px;
+}
+
+.tip-title svg {
+  flex-shrink: 0;
+}
+
+.tip-list {
+  margin: 0;
+  padding-left: 20px;
+  list-style-type: disc;
+}
+
+.tip-list li {
+  font-size: 13px;
+  color: #78350F;
+  line-height: 1.8;
+  margin-bottom: 4px;
+}
+
+.tip-list li:last-child {
+  margin-bottom: 0;
+}
+
+/* ========== 开发中状态 ========== */
+.development-state {
+  text-align: center;
+  padding: 80px 20px;
+}
+
+.dev-icon-wrapper {
+  margin: 0 auto 24px;
+}
+
+.dev-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #1E293B;
+  margin: 0 0 8px;
+}
+
+.dev-desc {
+  font-size: 14px;
+  color: #64748B;
+  margin: 0;
+}
+
+/* ========== 桌面端响应式适配方案 ==========
+ * 适配范围：1366×768、1920×1080、2560×1440 等主流桌面分辨率
+ * 不包含移动端设备适配
+ */
+
+/* ---------- 小屏幕桌面适配 (1366px - 1439px) ---------- */
+@media (max-width: 1439px) and (min-width: 1366px) {
+  /* 页面整体 */
+  .note-evaluation-page {
+    min-height: calc(100vh - 140px);
+  }
+
+  /* 顶部导航栏 */
+  .portal-header {
+    height: 56px;
+    padding: 0 24px;
+  }
+
+  .logo-img {
+    height: 36px;
+  }
+
+  .logo-box {
+    height: 36px;
+  }
+
+  /* 页面头部区域 */
+  .page-header {
+    padding: 24px 24px 20px;
+  }
+
+  .page-title {
+    font-size: 24px;
+  }
+
+  .page-subtitle {
+    font-size: 13px;
+  }
+
+  .title-icon {
+    width: 44px;
+    height: 44px;
+  }
+
+  .back-btn {
+    padding: 8px 14px;
+    font-size: 13px;
+  }
+
+  /* Tab 容器 */
+  .tabs-container {
+    padding: 20px;
+  }
+
+  .custom-tabs :deep(.ant-tabs-tab) {
+    padding: 8px 16px;
+    margin-right: 10px;
+    font-size: 13px;
+  }
+
+  .custom-tabs :deep(.ant-tabs-nav) {
+    margin-bottom: 20px;
+  }
+
+  /* 左侧面板 */
+  .left-panel {
+    padding: 20px;
+    min-height: 480px;
+  }
+
+  .date-control-group {
+    padding: 10px 14px;
+  }
+
+  .nav-btn {
+    width: 32px;
+    height: 32px;
+  }
+
+  .date-main {
+    font-size: 15px;
+  }
+
+  /* 课程卡片 */
+  .course-card {
+    padding: 12px 14px;
+    gap: 10px;
+  }
+
+  .card-period-name {
+    font-size: 12px;
+  }
+
+  .card-period-time {
+    font-size: 10px;
+  }
+
+  .card-subject-name {
+    font-size: 14px;
+  }
+
+  /* 右侧面板 */
+  .right-panel {
+    padding: 20px;
+    min-height: 480px;
+  }
+
+  .right-panel.has-content {
+    padding: 20px;
+  }
+
+  /* 作业展示区域 */
+  .assignments-header {
+    padding-bottom: 14px;
+    margin-bottom: 14px;
+  }
+
+  .assignments-title {
+    font-size: 16px;
+  }
+
+  .submit-count {
+    font-size: 12px;
+    padding: 3px 10px;
+  }
+
+  /* 筛选区域 */
+  .filter-section {
+    padding: 14px 16px;
+    margin-bottom: 16px;
+  }
+
+  .filter-row {
+    gap: 16px;
+  }
+
+  .filter-label {
+    font-size: 13px;
+  }
+
+  .filter-item-search {
+    min-width: 180px;
+    max-width: 240px;
+  }
+
+  /* 学生卡片网格 - 1366px下改为单列 */
+  .assignments-list {
+    grid-template-columns: 1fr;
+    gap: 16px;
+    padding-right: 6px;
+  }
+
+  /* 朋友圈卡片 */
+  .moment-card {
+    padding: 14px;
+    gap: 10px;
+  }
+
+  .moment-avatar {
+    width: 40px;
+    height: 40px;
+  }
+
+  .moment-name {
+    font-size: 15px;
+    margin-bottom: 4px;
+  }
+
+  .moment-text {
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+
+  /* 图片墙 */
+  .moment-images {
+    gap: 6px;
+    margin-bottom: 10px;
+    max-width: 280px;
+  }
+
+  .grid-1 {
+    max-width: 180px;
+  }
+
+  .grid-2 {
+    max-width: 180px;
+  }
+
+  /* 评优操作栏 */
+  .excellent-action-bar {
+    padding: 8px 12px;
+    margin-bottom: 10px;
+  }
+
+  .excellent-label {
+    font-size: 12px;
+  }
+
+  .excellent-hint {
+    font-size: 10px;
+  }
+
+  /* 分页区域 */
+  .pagination-section {
+    padding: 16px 0 0;
+    margin-top: 16px;
+    gap: 12px;
+  }
+
+  .status-text {
+    font-size: 13px;
+  }
+
+  .page-btn {
+    min-width: 32px;
+    height: 32px;
+    font-size: 13px;
+  }
+
+  /* 空状态 */
+  .empty-state {
+    padding: 32px 16px;
+  }
+
+  .empty-icon-wrapper svg {
+    width: 64px;
+    height: 64px;
+  }
+
+  .empty-title {
+    font-size: 20px;
+  }
+
+  .empty-desc {
+    font-size: 13px;
+    margin-bottom: 24px;
+  }
+
+  /* 缺省页面 */
+  .default-state {
+    padding: 36px 20px;
+  }
+
+  .default-icon-wrapper svg {
+    width: 80px;
+    height: 80px;
+  }
+
+  .default-title {
+    font-size: 20px;
+  }
+
+  .default-desc {
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+
+  .default-course-info {
+    padding: 16px 20px;
+    margin-bottom: 20px;
+  }
+
+  .info-label,
+  .info-value {
+    font-size: 13px;
+  }
+
+  .default-tips {
+    padding: 16px 20px;
+  }
+
+  .tip-title {
+    font-size: 13px;
+  }
+
+  .tip-list li {
+    font-size: 12px;
+    line-height: 1.7;
+  }
+
+  /* 灯箱 */
+  .lightbox-img {
+    max-width: min(85vw, 800px);
+    max-height: calc(100vh - 140px);
+  }
+
+  .lightbox-arrow {
+    width: 44px;
+    height: 44px;
+  }
+
+  .lightbox-thumb {
+    width: 44px;
+    height: 44px;
+  }
+
+  /* 评优模态框 */
+  .em-dialog {
+    max-width: 480px;
+  }
+
+  .em-header {
+    padding: 16px 20px 12px;
+  }
+
+  .em-body {
+    padding: 16px 20px;
+  }
+
+  .em-footer {
+    padding: 14px 20px 18px;
+  }
+
+  /* 详情弹窗 */
+  .dm-header {
+    padding: 16px 20px 12px;
+  }
+
+  .dm-section {
+    padding: 14px 20px;
+  }
+}
+
+/* ---------- 中等屏幕桌面适配 (1440px - 1919px) ---------- */
+@media (min-width: 1440px) and (max-width: 1919px) {
+  /* 页面整体 */
+  .note-evaluation-page {
+    min-height: calc(100vh - 150px);
+  }
+
+  /* 顶部导航栏 */
+  .portal-header {
+    height: 58px;
+    padding: 0 28px;
+  }
+
+  /* 页面头部区域 */
+  .page-header {
+    padding: 28px 28px 24px;
+  }
+
+  .page-title {
+    font-size: 26px;
+  }
+
+  /* Tab 容器 */
+  .tabs-container {
+    padding: 22px;
+  }
+
+  /* 左侧面板 */
+  .left-panel {
+    padding: 22px;
+    min-height: 520px;
+  }
+
+  /* 右侧面板 */
+  .right-panel {
+    padding: 22px;
+    min-height: 520px;
+  }
+
+  .right-panel.has-content {
+    padding: 22px;
+  }
+
+  /* 学生卡片网格 - 1440px下保持两列 */
+  .assignments-list {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 18px;
+  }
+
+  /* 图片墙 */
+  .moment-images {
+    max-width: 300px;
+  }
+
+  .grid-1 {
+    max-width: 200px;
+  }
+
+  .grid-2 {
+    max-width: 200px;
+  }
+}
+
+/* ---------- 大屏幕桌面适配 (2560px+) ---------- */
+@media (min-width: 2560px) {
+  /* 页面整体 */
+  .note-evaluation-page {
+    min-height: calc(100vh - 180px);
+  }
+
+  /* 顶部导航栏 */
+  .portal-header {
+    height: 72px;
+    padding: 0 48px;
+  }
+
+  .logo-img {
+    height: 48px;
+  }
+
+  .logo-box {
+    height: 48px;
+  }
+
+  .user-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 12px;
+  }
+
+  .avatar-text {
+    font-size: 15px;
+  }
+
+  .user-name {
+    font-size: 16px;
+  }
+
+  .user-info-wrap {
+    padding: 8px 16px;
+    gap: 12px;
+  }
+
+  /* 页面头部区域 */
+  .page-header {
+    padding: 40px 40px 32px;
+  }
+
+  .page-title {
+    font-size: 32px;
+  }
+
+  .page-subtitle {
+    font-size: 16px;
+    margin-top: 10px;
+  }
+
+  .title-icon {
+    width: 56px;
+    height: 56px;
+  }
+
+  .title-icon svg {
+    width: 28px;
+    height: 28px;
+  }
+
+  .back-btn {
+    padding: 12px 20px;
+    font-size: 15px;
+    border-radius: 12px;
+  }
+
+  .back-btn svg {
+    width: 22px;
+    height: 22px;
+  }
+
+  /* Tab 容器 */
+  .tabs-container {
+    padding: 32px;
+  }
+
+  .custom-tabs :deep(.ant-tabs-nav) {
+    margin-bottom: 28px;
+  }
+
+  .custom-tabs :deep(.ant-tabs-tab) {
+    padding: 12px 24px;
+    margin-right: 14px;
+    font-size: 15px;
+    border-radius: 12px;
+  }
+
+  /* 左侧面板 */
+  .left-panel {
+    padding: 28px;
+    min-height: 640px;
+    border-radius: 20px;
+  }
+
+  .date-picker-section {
+    margin-bottom: 24px;
+    padding-bottom: 24px;
+  }
+
+  .date-control-group {
+    padding: 14px 18px;
+    border-radius: 14px;
+  }
+
+  .nav-btn {
+    width: 40px;
+    height: 40px;
+    border-radius: 12px;
+  }
+
+  .date-main {
+    font-size: 18px;
+  }
+
+  .date-week {
+    font-size: 14px;
+  }
+
+  /* 自定义日期选择器 */
+  .custom-date-picker {
+    padding: 20px;
+    border-radius: 20px;
+  }
+
+  .picker-header {
+    margin-bottom: 20px;
+  }
+
+  .picker-nav-btn {
+    width: 36px;
+    height: 36px;
+  }
+
+  .picker-title {
+    font-size: 17px;
+  }
+
+  .weekday {
+    font-size: 13px;
+    padding: 10px 0;
+  }
+
+  .day-cell {
+    font-size: 15px;
+    border-radius: 10px;
+  }
+
+  .picker-btn {
+    padding: 12px 18px;
+    font-size: 15px;
+  }
+
+  /* 课程列表 */
+  .table-section .section-title {
+    font-size: 17px;
+  }
+
+  .section-badge {
+    font-size: 13px;
+    padding: 4px 12px;
+  }
+
+  .course-card {
+    padding: 16px 18px;
+    gap: 14px;
+    border-radius: 14px;
+  }
+
+  .card-period-name {
+    font-size: 14px;
+  }
+
+  .card-period-time {
+    font-size: 12px;
+  }
+
+  .card-subject-name {
+    font-size: 17px;
+  }
+
+  .card-type-tag {
+    font-size: 11px;
+    padding: 2px 8px;
+  }
+
+  .card-status-icon svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  /* 右侧面板 */
+  .right-panel {
+    padding: 32px;
+    min-height: 640px;
+    border-radius: 20px;
+  }
+
+  .right-panel.has-content {
+    padding: 28px;
+  }
+
+  /* 作业展示区域 */
+  .assignments-header {
+    padding-bottom: 18px;
+    margin-bottom: 18px;
+  }
+
+  .assignments-title {
+    font-size: 20px;
+  }
+
+  .submit-count {
+    font-size: 15px;
+    padding: 5px 14px;
+  }
+
+  /* 筛选区域 */
+  .filter-section {
+    padding: 20px 24px;
+    margin-bottom: 24px;
+    border-radius: 14px;
+  }
+
+  .filter-row {
+    gap: 28px;
+  }
+
+  .filter-label {
+    font-size: 15px;
+  }
+
+  .filter-item-search {
+    min-width: 240px;
+    max-width: 320px;
+  }
+
+  .filter-search-input :deep(.ant-input) {
+    font-size: 14px;
+    padding: 8px 12px 8px 40px;
+  }
+
+  .filter-clear-btn {
+    padding: 8px 16px;
+    font-size: 14px;
+  }
+
+  /* 学生卡片网格 - 大屏幕下可以显示更多列 */
+  .assignments-list {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 24px;
+    padding-right: 10px;
+  }
+
+  /* 朋友圈卡片 */
+  .moment-card {
+    padding: 20px;
+    gap: 14px;
+    border-radius: 14px;
+  }
+
+  .excellent-badge {
+    font-size: 13px;
+    padding: 5px 12px 5px 10px;
+  }
+
+  .moment-avatar {
+    width: 52px;
+    height: 52px;
+    border-radius: 10px;
+  }
+
+  .moment-name {
+    font-size: 17px;
+    margin-bottom: 6px;
+  }
+
+  .moment-text {
+    font-size: 16px;
+    line-height: 1.7;
+    margin-bottom: 14px;
+  }
+
+  /* 图片墙 */
+  .moment-images {
+    gap: 10px;
+    margin-bottom: 14px;
+    max-width: 360px;
+  }
+
+  .grid-1 {
+    max-width: 240px;
+  }
+
+  .grid-2 {
+    max-width: 240px;
+  }
+
+  .moment-image-wrapper {
+    border-radius: 8px;
+  }
+
+  /* 图片选择区域 */
+  .img-select-zone {
+    width: 32px;
+    height: 32px;
+  }
+
+  .img-select-circle {
+    width: 20px;
+    height: 20px;
+  }
+
+  .img-select-circle svg {
+    width: 12px;
+    height: 12px;
+  }
+
+  /* 评优操作栏 */
+  .excellent-action-bar {
+    padding: 12px 16px;
+    margin-bottom: 14px;
+    border-radius: 12px;
+  }
+
+  .excellent-label {
+    font-size: 14px;
+  }
+
+  .excellent-hint {
+    font-size: 12px;
+  }
+
+  /* 已评优点评内容 */
+  .excellent-comment-block {
+    padding: 12px 16px;
+    margin-top: 12px;
+  }
+
+  .ec-label {
+    font-size: 13px;
+  }
+
+  .ec-text {
+    font-size: 14px;
+  }
+
+  /* 分页区域 */
+  .pagination-section {
+    padding: 24px 0 0;
+    margin-top: 24px;
+    gap: 20px;
+  }
+
+  .status-text {
+    font-size: 15px;
+  }
+
+  .page-size-label {
+    font-size: 15px;
+  }
+
+  .page-btn {
+    min-width: 40px;
+    height: 40px;
+    font-size: 15px;
+  }
+
+  .page-ellipsis {
+    min-width: 40px;
+    height: 40px;
+    font-size: 15px;
+  }
+
+  /* 空状态 */
+  .empty-state {
+    padding: 48px 24px;
+    max-width: 560px;
+  }
+
+  .empty-icon-wrapper svg {
+    width: 96px;
+    height: 96px;
+  }
+
+  .empty-title {
+    font-size: 24px;
+  }
+
+  .empty-desc {
+    font-size: 15px;
+    margin-bottom: 36px;
+  }
+
+  .empty-tips {
+    padding: 24px;
+    gap: 14px;
+  }
+
+  .tip-item {
+    font-size: 14px;
+  }
+
+  /* 缺省页面 */
+  .default-state {
+    padding: 56px 36px;
+    max-width: 580px;
+  }
+
+  .default-icon-wrapper svg {
+    width: 120px;
+    height: 120px;
+  }
+
+  .default-title {
+    font-size: 26px;
+  }
+
+  .default-desc {
+    font-size: 16px;
+    margin-bottom: 32px;
+  }
+
+  .default-course-info {
+    padding: 24px 28px;
+    margin-bottom: 28px;
+  }
+
+  .info-label,
+  .info-value {
+    font-size: 15px;
+  }
+
+  .default-tips {
+    padding: 24px 28px;
+  }
+
+  .tip-title {
+    font-size: 15px;
+  }
+
+  .tip-list li {
+    font-size: 14px;
+    line-height: 1.9;
+  }
+
+  /* 灯箱 */
+  .lightbox-close {
+    width: 52px;
+    height: 52px;
+    top: 24px;
+    right: 28px;
+  }
+
+  .lightbox-counter {
+    font-size: 16px;
+    top: 30px;
+  }
+
+  .lightbox-img {
+    max-width: min(85vw, 1100px);
+    max-height: calc(100vh - 180px);
+    border-radius: 12px;
+  }
+
+  .lightbox-arrow {
+    width: 60px;
+    height: 60px;
+  }
+
+  .lightbox-arrow svg {
+    width: 28px;
+    height: 28px;
+  }
+
+  .lightbox-arrow--left { left: 32px; }
+  .lightbox-arrow--right { right: 32px; }
+
+  .lightbox-thumbs {
+    bottom: 20px;
+    gap: 10px;
+    padding: 8px 12px;
+    border-radius: 12px;
+  }
+
+  .lightbox-thumb {
+    width: 56px;
+    height: 56px;
+    border-radius: 8px;
+  }
+
+  .thumb-select-zone {
+    width: 24px;
+    height: 24px;
+  }
+
+  .thumb-select-circle {
+    width: 16px;
+    height: 16px;
+  }
+
+  .lightbox-select-btn {
+    top: 24px;
+    left: 28px;
+    padding: 8px 16px 8px 12px;
+    font-size: 14px;
+  }
+
+  /* 评优模态框 */
+  .em-dialog {
+    max-width: 580px;
+    border-radius: 20px;
+  }
+
+  .em-header {
+    padding: 24px 28px 18px;
+  }
+
+  .em-header-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+  }
+
+  .em-title {
+    font-size: 18px;
+  }
+
+  .em-subtitle {
+    font-size: 14px;
+  }
+
+  .em-close-btn {
+    width: 36px;
+    height: 36px;
+  }
+
+  .em-image-preview {
+    padding: 18px 28px;
+  }
+
+  .em-preview-label {
+    font-size: 13px;
+  }
+
+  .em-preview-thumb {
+    width: 60px;
+    height: 60px;
+    border-radius: 10px;
+  }
+
+  .em-body {
+    padding: 24px 28px;
+  }
+
+  .em-label {
+    font-size: 14px;
+  }
+
+  .em-textarea :deep(textarea) {
+    font-size: 15px;
+    border-radius: 12px;
+  }
+
+  .em-footer {
+    padding: 18px 28px 24px;
+  }
+
+  .em-btn {
+    padding: 11px 26px;
+    font-size: 15px;
+    border-radius: 12px;
+  }
+
+  /* 取消评优确认对话框 */
+  .confirm-dialog {
+    max-width: 420px;
+    padding: 36px 32px 28px;
+    border-radius: 20px;
+  }
+
+  .confirm-title {
+    font-size: 19px;
+  }
+
+  .confirm-desc {
+    font-size: 15px;
+  }
+
+  .confirm-btn {
+    padding: 12px 0;
+    font-size: 15px;
+    border-radius: 12px;
+  }
+
+  /* 详情弹窗 */
+  .dm-header {
+    padding: 24px 28px 18px;
+  }
+
+  .dm-avatar {
+    width: 56px;
+    height: 56px;
+    border-radius: 12px;
+  }
+
+  .dm-name {
+    font-size: 18px;
+  }
+
+  .dm-time {
+    font-size: 13px;
+  }
+
+  .dm-excellent-tag {
+    font-size: 13px;
+    padding: 5px 12px;
+  }
+
+  .dm-content {
+    padding: 16px 28px 20px;
+    font-size: 15px;
+  }
+
+  .dm-section {
+    padding: 20px 28px;
+  }
+
+  .dm-section-title {
+    font-size: 15px;
+    margin-bottom: 16px;
+  }
+
+  .dm-like-item {
+    padding: 5px 14px 5px 8px;
+  }
+
+  .dm-like-avatar {
+    width: 28px;
+    height: 28px;
+  }
+
+  .dm-like-name {
+    font-size: 14px;
+  }
+
+  .dm-comment-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+  }
+
+  .dm-comment-body {
+    padding: 12px 16px;
+    border-radius: 0 12px 12px 12px;
+  }
+
+  .dm-comment-name {
+    font-size: 14px;
+  }
+
+  .dm-comment-text {
+    font-size: 15px;
+  }
+
+  /* 底部版权 */
+  .portal-footer {
+    padding: 24px 0 28px;
+    font-size: 13px;
+  }
+}
+
+/* ---------- 超大屏幕桌面适配 (3440px+) ---------- */
+@media (min-width: 3440px) {
+  /* 页面整体 */
+  .note-evaluation-page {
+    min-height: calc(100vh - 200px);
+  }
+
+  /* 顶部导航栏 */
+  .portal-header {
+    height: 80px;
+    padding: 0 64px;
+  }
+
+  .logo-img {
+    height: 56px;
+  }
+
+  .logo-box {
+    height: 56px;
+  }
+
+  .user-avatar {
+    width: 44px;
+    height: 44px;
+    border-radius: 14px;
+  }
+
+  .avatar-text {
+    font-size: 17px;
+  }
+
+  .user-name {
+    font-size: 18px;
+  }
+
+  /* 页面头部区域 */
+  .page-header {
+    padding: 48px 48px 40px;
+  }
+
+  .page-title {
+    font-size: 36px;
+  }
+
+  .page-subtitle {
+    font-size: 18px;
+  }
+
+  .title-icon {
+    width: 64px;
+    height: 64px;
+  }
+
+  .title-icon svg {
+    width: 32px;
+    height: 32px;
+  }
+
+  .back-btn {
+    padding: 14px 24px;
+    font-size: 16px;
+  }
+
+  /* Tab 容器 */
+  .tabs-container {
+    padding: 40px;
+  }
+
+  .custom-tabs :deep(.ant-tabs-tab) {
+    padding: 14px 28px;
+    margin-right: 16px;
+    font-size: 16px;
+  }
+
+  /* 左侧面板 */
+  .left-panel {
+    padding: 32px;
+    min-height: 720px;
+  }
+
+  /* 右侧面板 */
+  .right-panel {
+    padding: 36px;
+    min-height: 720px;
+  }
+
+  .right-panel.has-content {
+    padding: 32px;
+  }
+
+  /* 学生卡片网格 - 超大屏幕下可以显示三列 */
+  .assignments-list {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 28px;
+  }
+
+  /* 朋友圈卡片 */
+  .moment-card {
+    padding: 24px;
+    gap: 16px;
+  }
+
+  .moment-avatar {
+    width: 56px;
+    height: 56px;
+  }
+
+  .moment-name {
+    font-size: 18px;
+  }
+
+  .moment-text {
+    font-size: 17px;
+  }
+
+  /* 图片墙 */
+  .moment-images {
+    max-width: 400px;
+  }
+
+  .grid-1 {
+    max-width: 280px;
+  }
+
+  .grid-2 {
+    max-width: 280px;
+  }
+
+  /* 灯箱 */
+  .lightbox-img {
+    max-width: min(80vw, 1400px);
+    max-height: calc(100vh - 200px);
+  }
+
+  .lightbox-arrow {
+    width: 68px;
+    height: 68px;
+  }
+
+  .lightbox-thumb {
+    width: 64px;
+    height: 64px;
+  }
+
+  /* 评优模态框 */
+  .em-dialog {
+    max-width: 640px;
+  }
+
+  /* 详情弹窗 */
+  .dm-avatar {
+    width: 64px;
+    height: 64px;
+  }
+
+  .dm-name {
+    font-size: 20px;
+  }
+
+  /* 缺省页面 */
+  .default-state {
+    padding: 64px 48px;
+    max-width: 640px;
+  }
+
+  .default-icon-wrapper svg {
+    width: 140px;
+    height: 140px;
+  }
+
+  .default-title {
+    font-size: 30px;
+  }
+
+  .default-desc {
+    font-size: 18px;
+    margin-bottom: 36px;
+  }
+
+  .default-course-info {
+    padding: 28px 32px;
+    margin-bottom: 32px;
+  }
+
+  .info-label,
+  .info-value {
+    font-size: 16px;
+  }
+
+  .default-tips {
+    padding: 28px 32px;
+  }
+
+  .tip-title {
+    font-size: 16px;
+  }
+
+  .tip-list li {
+    font-size: 15px;
+    line-height: 2;
+  }
+}
+
+/* ========== 原有移动端响应式适配（保留但不主动支持） ========== */
+@media (max-width: 1200px) {
+  /* 中等屏幕保持两列，但图片墙稍微收窄 */
+  .moment-images {
+    max-width: 260px;
+  }
+}
+
+@media (max-width: 768px) {
+  .note-evaluation-page {
+    min-height: calc(100vh - 120px);
+  }
+
+  .page-header {
+    padding: 20px 16px;
+    border-radius: 12px 12px 0 0;
+  }
+
+  .header-content {
+    gap: 12px;
+  }
+
+  .back-btn {
+    padding: 8px 12px;
+    font-size: 13px;
+    border-radius: 8px;
+  }
+
+  .back-btn svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .title-icon {
+    width: 40px;
+    height: 40px;
+  }
+
+  .page-title {
+    font-size: 20px;
+  }
+
+  .page-subtitle {
+    font-size: 12px;
+  }
+  
+  .tabs-container {
+    padding: 16px;
+    border-radius: 0 0 12px 12px;
+  }
+  
+  .custom-tabs :deep(.ant-tabs-tab) {
+    padding: 8px 14px;
+    margin-right: 8px;
+    font-size: 13px;
+  }
+  
+  .left-panel,
+  .right-panel {
+    min-height: auto;
+    padding: 16px;
+    margin-bottom: 16px;
+  }
+  
+  .date-control-group {
+    padding: 10px 12px;
+  }
+  
+  .nav-btn {
+    width: 32px;
+    height: 32px;
+  }
+  
+  .date-main {
+    font-size: 14px;
+  }
+  
+  .section-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+  
+  .empty-state {
+    padding: 24px 16px;
+  }
+  
+  .empty-title {
+    font-size: 18px;
+  }
+
+  /* 平板竖屏：右侧区域宽度有限，切换为单列 */
+  .assignments-list {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+}
+
+@media (max-width: 576px) {
+  .page-header {
+    padding: 16px 12px;
+  }
+
+  .header-content {
+    gap: 10px;
+  }
+
+  .back-btn {
+    padding: 6px 10px;
+    font-size: 12px;
+    border-radius: 6px;
+  }
+
+  .back-btn svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* 小屏幕下隐藏"返回"文字，只显示图标 */
+  .back-text {
+    display: none;
+  }
+
+  .title-group {
+    gap: 12px;
+  }
+
+  .page-title {
+    font-size: 18px;
+  }
+  
+  .tabs-container {
+    padding: 12px;
+  }
+  
+  .custom-tabs :deep(.ant-tabs-tab) {
+    padding: 6px 10px;
+    margin-right: 6px;
+    font-size: 12px;
+  }
+  
+  .left-panel,
+  .right-panel {
+    padding: 12px;
+  }
+}
+
+/* ========== 图片墙：查看全部遮罩 ========== */
+.img-more-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: background 0.2s;
+  z-index: 3;
+}
+
+.img-more-overlay:hover {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.img-more-count {
+  font-size: 22px;
+  font-weight: 700;
+  color: #ffffff;
+  line-height: 1;
+}
+
+.img-more-text {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.85);
+  margin-top: 4px;
+  letter-spacing: 0.5px;
+}
+
+/* ========== 灯箱 ========== */
+.lightbox-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.92);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.lightbox-close {
+  position: absolute;
+  top: 20px;
+  right: 24px;
+  background: rgba(255, 255, 255, 0.12);
+  border: none;
+  border-radius: 50%;
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.2s;
+  z-index: 10;
+}
+
+.lightbox-close:hover {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.lightbox-counter {
+  position: absolute;
+  top: 26px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: rgba(255, 255, 255, 0.75);
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+.lightbox-img {
+  max-width: min(90vw, 900px);
+  max-height: calc(100vh - 160px);
+  object-fit: contain;
+  border-radius: 8px;
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
+  user-select: none;
+}
+
+.lightbox-arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.12);
+  border: none;
+  border-radius: 50%;
+  width: 52px;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.2s, transform 0.2s;
+  z-index: 10;
+}
+
+.lightbox-arrow:hover {
+  background: rgba(255, 255, 255, 0.28);
+}
+
+.lightbox-arrow--left  { left: 24px; }
+.lightbox-arrow--right { right: 24px; }
+
+.lightbox-arrow--left:hover  { transform: translateY(-50%) translateX(-3px); }
+.lightbox-arrow--right:hover { transform: translateY(-50%) translateX(3px); }
+
+/* 缩略图条 */
+.lightbox-thumbs {
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 8px;
+  max-width: 90vw;
+  overflow-x: auto;
+  padding: 6px 8px;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 10px;
+}
+
+.lightbox-thumbs::-webkit-scrollbar { height: 4px; }
+.lightbox-thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 2px; }
+
+.lightbox-thumb {
+  width: 48px;
+  height: 48px;
+  border-radius: 6px;
+  overflow: hidden;
+  flex-shrink: 0;
+  cursor: pointer;
+  opacity: 0.5;
+  border: 2px solid transparent;
+  position: relative;
+  transition: opacity 0.2s, border-color 0.2s;
+}
+
+.lightbox-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.lightbox-thumb:hover { opacity: 0.8; }
+
+.lightbox-thumb--active {
+  opacity: 1;
+  border-color: #667EEA;
+}
+
+/* 缩略图选中/未选中状态（评优模式） */
+.lightbox-thumb--selected {
+  border-color: #667EEA;
+  box-shadow: 0 0 0 1px #667EEA;
+}
+
+.lightbox-thumb--unselected {
+  opacity: 0.35;
+  filter: grayscale(40%);
+}
+
+.lightbox-thumb--unselected:hover {
+  opacity: 0.6;
+}
+
+/* 缩略图勾选热区 */
+.thumb-select-zone {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  cursor: pointer;
+}
+
+.thumb-select-circle {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 1.5px solid rgba(255, 255, 255, 0.85);
+  background: rgba(0, 0, 0, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+}
+
+.thumb-select-circle--checked {
+  background: #667EEA;
+  border-color: #667EEA;
+}
+
+.thumb-select-zone:hover .thumb-select-circle:not(.thumb-select-circle--checked) {
+  background: rgba(255, 255, 255, 0.3);
+  border-color: #fff;
+}
+
+/* 灯箱勾选按钮 */
+.lightbox-select-btn {
+  position: absolute;
+  top: 20px;
+  left: 24px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(0, 0, 0, 0.45);
+  border: 1.5px solid rgba(255, 255, 255, 0.5);
+  border-radius: 20px;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 13px;
+  font-weight: 500;
+  padding: 6px 14px 6px 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  z-index: 10;
+  backdrop-filter: blur(4px);
+}
+
+.lightbox-select-btn:hover {
+  background: rgba(102, 126, 234, 0.5);
+  border-color: #667EEA;
+  color: #fff;
+}
+
+.lightbox-select-btn--checked {
+  background: rgba(102, 126, 234, 0.75);
+  border-color: #667EEA;
+  color: #fff;
+}
+
+/* 灯箱动画 */
+.lightbox-fade-enter-active,
+.lightbox-fade-leave-active {
+  transition: opacity 0.25s ease;
+}
+.lightbox-fade-enter-from,
+.lightbox-fade-leave-to {
+  opacity: 0;
+}
+
+.lightbox-img-enter-active,
+.lightbox-img-leave-active {
+  transition: opacity 0.18s ease, transform 0.18s ease;
+}
+.lightbox-img-enter-from { opacity: 0; transform: scale(0.94); }
+.lightbox-img-leave-to   { opacity: 0; transform: scale(1.04); }
+
+/* ========== 详情弹窗 ========== */
+.detail-modal-body {
+  padding: 0;
+}
+
+.dm-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 20px 24px 16px;
+  border-bottom: 1px solid #F1F5F9;
+}
+
+.dm-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 10px;
+  object-fit: cover;
+  flex-shrink: 0;
+  background: #F1F5F9;
+}
+
+.dm-header-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.dm-name {
+  font-size: 16px;
+  font-weight: 700;
+  color: #1E293B;
+  line-height: 1.3;
+}
+
+.dm-time {
+  font-size: 12px;
+  color: #94A3B8;
+  margin-top: 3px;
+}
+
+.dm-excellent-tag {
+  display: flex;
+  align-items: center;
+  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 4px 10px;
+  border-radius: 20px;
+  flex-shrink: 0;
+  box-shadow: 0 2px 8px rgba(245,158,11,0.35);
+}
+
+.dm-content {
+  padding: 12px 24px 16px;
+  font-size: 14px;
+  color: #334155;
+  line-height: 1.7;
+  background: #FAFAFA;
+  border-bottom: 1px solid #F1F5F9;
+}
+
+.dm-section {
+  padding: 16px 24px;
+  border-bottom: 1px solid #F1F5F9;
+}
+
+.dm-section:last-child {
+  border-bottom: none;
+  padding-bottom: 24px;
+}
+
+.dm-section-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  font-weight: 700;
+  color: #1E293B;
+  margin-bottom: 14px;
+}
+
+.dm-count {
+  background: #EEF2FF;
+  color: #667EEA;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 1px 7px;
+  border-radius: 10px;
+  margin-left: 2px;
+}
+
+/* 点赞列表 */
+.dm-likes-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.dm-like-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: #F8FAFC;
+  border: 1px solid #E2E8F0;
+  border-radius: 20px;
+  padding: 4px 12px 4px 6px;
+}
+
+.dm-like-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  object-fit: cover;
+  background: #E2E8F0;
+}
+
+.dm-like-name {
+  font-size: 13px;
+  color: #475569;
+  font-weight: 500;
+}
+
+/* 评论列表 */
+.dm-comments-list {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.dm-comment-item {
+  display: flex;
+  gap: 10px;
+}
+
+.dm-comment-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  object-fit: cover;
+  flex-shrink: 0;
+  background: #E2E8F0;
+}
+
+.dm-comment-body {
+  flex: 1;
+  background: #F8FAFC;
+  border-radius: 0 10px 10px 10px;
+  padding: 10px 14px;
+  border: 1px solid #F1F5F9;
+}
+
+.dm-comment-name {
+  font-size: 13px;
+  font-weight: 700;
+  color: #576B95;
+  margin-bottom: 4px;
+}
+
+.dm-comment-text {
+  font-size: 14px;
+  color: #1E293B;
+  line-height: 1.6;
+}
+
+.dm-comment-time {
+  font-size: 11px;
+  color: #94A3B8;
+  margin-top: 6px;
+}
+
+.dm-empty {
+  font-size: 13px;
+  color: #94A3B8;
+  text-align: center;
+  padding: 12px 0;
+}
+
+/* ========== 已评优点评内容展示块 ========== */
+.excellent-comment-block {
+  margin-top: 10px;
+  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
+  border: 1px solid #FDE68A;
+  border-left: 3px solid #F59E0B;
+  border-radius: 8px;
+  padding: 10px 14px;
+}
+
+.ec-header {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-bottom: 6px;
+}
+
+.ec-star-icon {
+  font-size: 12px;
+  color: #F59E0B;
+}
+
+.ec-label {
+  font-size: 12px;
+  font-weight: 700;
+  color: #D97706;
+}
+
+.ec-time {
+  margin-left: auto;
+  font-size: 11px;
+  color: #B45309;
+  opacity: 0.75;
+}
+
+.ec-text {
+  margin: 0;
+  font-size: 13px;
+  color: #78350F;
+  line-height: 1.65;
+  word-break: break-all;
+}
+
+/* ========== 模态框通用过渡动画 ========== */
+.modal-fade-enter-active,
+.modal-fade-leave-active {
+  transition: opacity 0.22s ease;
+}
+.modal-fade-enter-active .em-dialog,
+.modal-fade-enter-active .confirm-dialog {
+  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease;
+}
+.modal-fade-leave-active .em-dialog,
+.modal-fade-leave-active .confirm-dialog {
+  transition: transform 0.18s ease, opacity 0.18s ease;
+}
+.modal-fade-enter-from,
+.modal-fade-leave-to {
+  opacity: 0;
+}
+.modal-fade-enter-from .em-dialog,
+.modal-fade-enter-from .confirm-dialog {
+  transform: scale(0.9) translateY(-16px);
+  opacity: 0;
+}
+.modal-fade-leave-to .em-dialog,
+.modal-fade-leave-to .confirm-dialog {
+  transform: scale(0.95) translateY(8px);
+  opacity: 0;
+}
+
+/* ========== 评优模态框 ========== */
+.em-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.55);
+  backdrop-filter: blur(4px);
+  z-index: 1100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.em-dialog {
+  background: #ffffff;
+  border-radius: 16px;
+  width: 100%;
+  max-width: 520px;
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.em-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 20px 24px 16px;
+  border-bottom: 1px solid #F1F5F9;
+  background: linear-gradient(135deg, #FFFBEB 0%, #FEF9C3 100%);
+}
+
+.em-header-icon {
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
+}
+
+.em-header-info {
+  flex: 1;
+}
+
+.em-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+  color: #1E293B;
+  line-height: 1.3;
+}
+
+.em-subtitle {
+  margin: 3px 0 0;
+  font-size: 13px;
+  color: #64748B;
+}
+
+.em-subtitle strong {
+  color: #667EEA;
+}
+
+.em-close-btn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: rgba(100, 116, 139, 0.1);
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #64748B;
+  transition: all 0.2s;
+  flex-shrink: 0;
+}
+
+.em-close-btn:hover {
+  background: rgba(100, 116, 139, 0.18);
+  color: #334155;
+}
+
+/* 图片预览条 */
+.em-image-preview {
+  padding: 14px 24px;
+  background: #F8FAFC;
+  border-bottom: 1px solid #F1F5F9;
+}
+
+.em-preview-label {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  color: #64748B;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.em-preview-count {
+  background: #EEF2FF;
+  color: #667EEA;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 1px 7px;
+  border-radius: 10px;
+  margin-left: 2px;
+}
+
+.em-preview-thumbs {
+  display: flex;
+  gap: 8px;
+}
+
+.em-preview-thumb {
+  width: 52px;
+  height: 52px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 2px solid #E2E8F0;
+  flex-shrink: 0;
+}
+
+.em-preview-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.em-preview-more {
+  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 700;
+  color: #fff;
+  border-color: transparent;
+}
+
+/* 表单区域 */
+.em-body {
+  padding: 20px 24px;
+}
+
+.em-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.em-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #374151;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.em-label-required {
+  color: #EF4444;
+  font-size: 15px;
+  line-height: 1;
+}
+
+.em-label-hint {
+  font-size: 12px;
+  color: #94A3B8;
+  font-weight: 400;
+}
+
+.em-textarea :deep(textarea) {
+  font-size: 14px;
+  line-height: 1.7;
+  resize: none;
+  border-radius: 10px;
+}
+
+.em-field-error {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  color: #EF4444;
+  font-weight: 500;
+}
+
+/* 底部按钮 */
+.em-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 16px 24px 20px;
+  border-top: 1px solid #F1F5F9;
+}
+
+.em-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 9px 22px;
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s;
+}
+
+.em-btn-cancel {
+  background: #F1F5F9;
+  color: #64748B;
+}
+
+.em-btn-cancel:hover {
+  background: #E2E8F0;
+  color: #334155;
+}
+
+.em-btn-confirm {
+  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
+  color: #ffffff;
+  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
+}
+
+.em-btn-confirm:hover {
+  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
+  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.45);
+  transform: translateY(-1px);
+}
+
+.em-btn-confirm:active {
+  transform: translateY(0);
+}
+
+/* ========== 取消评优确认对话框 ========== */
+.confirm-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.55);
+  backdrop-filter: blur(4px);
+  z-index: 1200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.confirm-dialog {
+  background: #ffffff;
+  border-radius: 16px;
+  width: 100%;
+  max-width: 380px;
+  padding: 32px 28px 24px;
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
+  text-align: center;
+}
+
+.confirm-icon {
+  margin-bottom: 16px;
+  display: flex;
+  justify-content: center;
+}
+
+.confirm-title {
+  margin: 0 0 10px;
+  font-size: 17px;
+  font-weight: 700;
+  color: #1E293B;
+}
+
+.confirm-desc {
+  margin: 0 0 24px;
+  font-size: 14px;
+  color: #64748B;
+  line-height: 1.65;
+}
+
+.confirm-desc strong {
+  color: #667EEA;
+}
+
+.confirm-footer {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+}
+
+.confirm-btn {
+  flex: 1;
+  padding: 10px 0;
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s;
+}
+
+.confirm-btn-secondary {
+  background: #F1F5F9;
+  color: #64748B;
+}
+
+.confirm-btn-secondary:hover {
+  background: #E2E8F0;
+  color: #334155;
+}
+
+.confirm-btn-danger {
+  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
+  color: #ffffff;
+  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+}
+
+.confirm-btn-danger:hover {
+  background: linear-gradient(135deg, #F87171 0%, #EF4444 100%);
+  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
+  transform: translateY(-1px);
+}
+
+.confirm-btn-danger:active {
+  transform: translateY(0);
+}
+
+/* ===== 顶部导航 (复用 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);
+}
+
+/* ===== 底部版权 (复用 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);
+}
+
+/* 响应式适配 */
+@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;
+  }
+}
+</style>
diff --git a/src/components/PortalHomePage.vue b/src/components/PortalHomePage.vue
new file mode 100644
index 0000000..fa03cfb
--- /dev/null
+++ b/src/components/PortalHomePage.vue
@@ -0,0 +1,862 @@
+<template>
+  <div class="portal-wrapper">
+    <!-- 顶部导航栏 -->
+    <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="school-badge">
+          <span class="school-icon">🏫</span>
+          <span class="school-name">八中智慧云校</span>
+        </div> -->
+        <!-- <div class="divider-v"></div> -->
+        <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>
+
+    <!-- 主内容区 -->
+    <main class="portal-main">
+
+      <!-- 双师课堂模块 -->
+      <section class="module-section module-section-unified">
+        <div class="unified-block">
+          <div class="module-header">
+            <div class="module-title-tag">
+              <span class="title-dot"></span>
+              双师课堂
+            </div>
+          </div>
+          <div class="module-card-row">
+            <div class="feature-card" @click="handleCardClick('schedule')">
+              <div class="card-icon-wrap card-icon-blue">
+                <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
+                  <rect x="3" y="4" width="18" height="18" rx="3" stroke="#1677ff" stroke-width="1.8"/>
+                  <path d="M3 9h18" stroke="#1677ff" stroke-width="1.8"/>
+                  <path d="M8 2v4M16 2v4" stroke="#1677ff" stroke-width="1.8" stroke-linecap="round"/>
+                  <path d="M7 13h4M7 17h6" stroke="#1677ff" stroke-width="1.6" stroke-linecap="round"/>
+                </svg>
+              </div>
+              <span class="card-label">课表管理</span>
+              <span class="card-arrow">→</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 爱学蝶变模块 -->
+      <section class="module-section module-section-unified">
+        <div class="unified-block">
+          <div class="module-header">
+            <div class="module-title-tag">
+              <span class="title-dot title-dot-purple"></span>
+              爱学蝶变
+            </div>
+          </div>
+          <div class="module-card-row">
+            <div class="feature-card" @click="handleCardClick('schedule2')">
+              <div class="card-icon-wrap card-icon-blue">
+                <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
+                  <rect x="3" y="4" width="18" height="18" rx="3" stroke="#1677ff" stroke-width="1.8"/>
+                  <path d="M3 9h18" stroke="#1677ff" stroke-width="1.8"/>
+                  <path d="M8 2v4M16 2v4" stroke="#1677ff" stroke-width="1.8" stroke-linecap="round"/>
+                  <path d="M7 13h4M7 17h6" stroke="#1677ff" stroke-width="1.6" stroke-linecap="round"/>
+                </svg>
+              </div>
+              <span class="card-label">课表管理</span>
+              <span class="card-arrow">→</span>
+            </div>
+            <div class="feature-card" @click="handleCardClick('notes')">
+              <div class="card-icon-wrap card-icon-orange">
+                <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
+                  <path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-5z" stroke="#fa8c16" stroke-width="1.8" stroke-linejoin="round"/>
+                  <path d="M14 3v5h5" stroke="#fa8c16" stroke-width="1.8" stroke-linejoin="round"/>
+                  <path d="M8 13h8M8 17h5" stroke="#fa8c16" stroke-width="1.6" stroke-linecap="round"/>
+                  <path d="M10 9l1.5 1.5L13 8" stroke="#fa8c16" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="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">
+                  <path d="M18 20H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2z" stroke="#52c41a" stroke-width="1.8"/>
+                  <path d="M8 16l2.5-3 2.5 2 3-4" stroke="#52c41a" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </div>
+              <span class="card-label">报告中心</span>
+              <span class="card-arrow">→</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+    </main>
+
+<!-- 底部版权 -->
+<footer class="portal-footer">
+<span>Copyright © 2025 &nbsp;QuanXue. All Rights Reserved.&nbsp; 渝ICP备05088888号</span>
+</footer>
+
+<!-- 提示弹窗 -->
+<div v-if="showAlert" class="alert-overlay" @click="showAlert = false">
+<div class="alert-modal" @click.stop>
+<div class="alert-icon">
+<svg width="48" height="48" viewBox="0 0 24 24" fill="none">
+<circle cx="12" cy="12" r="10" stroke="#1677ff" stroke-width="2"/>
+<path d="M12 7v6M12 16h.01" stroke="#1677ff" stroke-width="2" stroke-linecap="round"/>
+</svg>
+</div>
+<div class="alert-message">{{ alertMessage }}</div>
+<button class="alert-btn" @click="showAlert = false">确定</button>
+</div>
+</div>
+</div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const emit = defineEmits(['navigate', 'card-click', 'logout'])
+
+const showDropdown = ref(false)
+const showAlert = ref(false)
+const alertMessage = ref('')
+
+const handleCardClick = (cardId) => {
+  if (cardId === 'schedule') {
+    alertMessage.value = '跳转之前的课表管理界面'
+    showAlert.value = true
+    return
+  }
+  if (cardId === 'schedule2') {
+    alertMessage.value = '功能类似双师课堂的课表管理，但是有删减：'  
+    alertMessage.value += '\r\n1. 没有单双周功能'  
+    alertMessage.value += '\r\n2. 没有临时调课功能'
+    alertMessage.value += '\r\n3. 新建课表没有创建科目信息这一步，默认九大科目：语文、数学、英语、物理、化学、生物、政治、历史、地理'
+    alertMessage.value += '\r\n4. 增加课表的课程需要增加：预习、复习'
+    showAlert.value = true
+    return
+  }
+  if (cardId === 'notes') {
+    router.push('/note-evaluation')
+    return
+  }
+  if (cardId === 'report') {
+    router.push('/report-home')
+    return
+  }
+  emit('card-click', cardId)
+}
+
+const handleLogout = () => {
+  showDropdown.value = false
+  emit('logout')
+  router.push('/login')
+}
+</script>
+
+<style scoped>
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.portal-wrapper {
+  min-height: 100vh;
+  background: linear-gradient(165deg, #f5f7fc 0%, #eef2fa 40%, #e8ecf8 100%);
+  display: flex;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif;
+  color: #1a1a2e;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ===== 顶部导航 ===== */
+.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;
+}
+
+.divider-v {
+  width: 1px;
+  height: 20px;
+  background: linear-gradient(180deg, transparent, #d8e0ef, transparent);
+}
+
+.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);
+}
+
+/* ===== 主内容区 ===== */
+.portal-main {
+  flex: 1;
+  padding: 40px 48px 56px;
+  max-width: 1120px;
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+/* ===== 模块区块 ===== */
+.module-section {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.module-section-unified {
+  gap: 0;
+}
+
+.unified-block {
+  background: rgba(255, 255, 255, 0.88);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-radius: 20px;
+  padding: 28px 36px 34px;
+  box-shadow:
+    0 1px 3px rgba(26, 46, 94, 0.03),
+    0 4px 16px rgba(26, 46, 94, 0.05),
+    0 12px 40px rgba(26, 46, 94, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  transition: box-shadow 0.35s ease;
+}
+
+.unified-block:hover {
+  box-shadow:
+    0 2px 5px rgba(26, 46, 94, 0.04),
+    0 6px 20px rgba(26, 46, 94, 0.07),
+    0 16px 48px rgba(22, 119, 255, 0.05);
+}
+
+.unified-block .module-header {
+  margin-bottom: 0;
+}
+
+.unified-block .module-title-tag {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  padding: 0;
+  font-size: 17px;
+  color: #1a1a2e;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+}
+
+.module-card-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
+  gap: 20px;
+}
+
+.module-header {
+  display: flex;
+  align-items: center;
+}
+
+.module-title-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(226, 232, 245, 0.6);
+  border-radius: 12px;
+  padding: 10px 24px 10px 16px;
+  font-size: 15px;
+  color: #1a1a2e;
+  font-weight: 700;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  letter-spacing: 0.6px;
+}
+
+.title-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #1677ff, #4096ff);
+  flex-shrink: 0;
+  box-shadow: 0 0 8px rgba(22, 119, 255, 0.4);
+}
+
+.title-dot-purple {
+  background: linear-gradient(135deg, #722ed1, #9254de);
+  box-shadow: 0 0 8px rgba(114, 46, 209, 0.4);
+}
+
+/* ===== 功能卡片 ===== */
+.feature-card {
+  min-width: 176px;
+  height: 120px;
+  background: linear-gradient(145deg, #ffffff 0%, #fafbff 100%);
+  border: 1.5px solid rgba(232, 237, 248, 0.8);
+  border-radius: 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  cursor: pointer;
+  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.feature-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(22, 119, 255, 0.04) 0%, rgba(22, 119, 255, 0.01) 60%);
+  opacity: 0;
+  transition: opacity 0.35s ease;
+}
+
+.feature-card::after {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: 18px;
+  background: linear-gradient(135deg, rgba(22, 119, 255, 0.2), transparent 50%);
+  opacity: 0;
+  transition: opacity 0.35s ease;
+  z-index: 0;
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  -webkit-mask-composite: xor;
+  padding: 1.5px;
+}
+
+.feature-card:hover {
+  border-color: transparent;
+  transform: translateY(-5px);
+  box-shadow:
+    0 8px 25px rgba(22, 119, 255, 0.12),
+    0 2px 8px rgba(22, 119, 255, 0.08);
+}
+
+.feature-card:hover::before {
+  opacity: 1;
+}
+
+.feature-card:hover::after {
+  opacity: 1;
+}
+
+.feature-card:hover .card-arrow {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.feature-card:hover .card-icon-wrap {
+  transform: scale(1.08);
+}
+
+.feature-card:active {
+  transform: translateY(-2px);
+  transition-duration: 0.1s;
+}
+
+/* 卡片图标容器 */
+.card-icon-wrap {
+  width: 52px;
+  height: 52px;
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  z-index: 1;
+}
+
+.card-icon-blue {
+  background: linear-gradient(135deg, #e8f1ff 0%, #d6ebff 100%);
+  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+
+.card-icon-orange {
+  background: linear-gradient(135deg, #fff7e6 0%, #ffeccf 100%);
+  box-shadow: 0 2px 8px rgba(250, 140, 22, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+
+.card-icon-green {
+  background: linear-gradient(135deg, #f0fff4 0%, #d9f7be 100%);
+  box-shadow: 0 2px 8px rgba(82, 196, 26, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+
+.card-label {
+  font-size: 15px;
+  color: #1a1a2e;
+  font-weight: 600;
+  letter-spacing: 0.6px;
+  position: relative;
+  z-index: 1;
+}
+
+.card-arrow {
+  position: absolute;
+  bottom: 12px;
+  right: 16px;
+  font-size: 14px;
+  color: #1677ff;
+  opacity: 0;
+  transform: translateX(-6px);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  font-weight: 500;
+}
+
+/* ===== 底部版权 ===== */
+.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);
+}
+
+/* ===== 提示弹窗 ===== */
+.alert-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(15, 23, 42, 0.45);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  animation: alertFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes alertFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.alert-modal {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 18px;
+  padding: 36px 44px;
+  min-width: 340px;
+  max-width: 420px;
+  text-align: center;
+  box-shadow:
+    0 20px 60px rgba(0, 0, 0, 0.15),
+    0 4px 16px rgba(0, 0, 0, 0.06);
+  animation: alertSlideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+  border: 1px solid rgba(255, 255, 255, 0.7);
+}
+
+@keyframes alertSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(24px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.alert-icon {
+  margin-bottom: 18px;
+}
+
+.alert-message {
+  font-size: 15.5px;
+  color: #374151;
+  margin-bottom: 28px;
+  line-height: 1.7;
+  white-space: pre-line;
+  text-align: left;
+  font-weight: 400;
+}
+
+.alert-btn {
+  background: linear-gradient(135deg, #1677ff 0%, #4096ff 60%, #69b1ff 100%);
+  color: #fff;
+  border: none;
+  border-radius: 11px;
+  padding: 11px 48px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+  letter-spacing: 0.5px;
+  box-shadow: 0 4px 14px rgba(22, 119, 255, 0.3);
+}
+
+.alert-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(22, 119, 255, 0.4);
+  background: linear-gradient(135deg, #0958d9 0%, #1677ff 60%, #4096ff 100%);
+}
+
+.alert-btn:active {
+  transform: translateY(0);
+  transition-duration: 0.1s;
+}
+
+/* ===== 响应式适配 ===== */
+
+/* 平板 & 小屏桌面 */
+@media (max-width: 1024px) {
+  .portal-main {
+    padding: 32px 32px 48px;
+    max-width: 100%;
+  }
+
+  .unified-block {
+    padding: 24px 28px 30px;
+    border-radius: 18px;
+  }
+
+  .module-card-row {
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 16px;
+  }
+
+  .feature-card {
+    height: 112px;
+    min-width: 160px;
+  }
+}
+
+/* 平板竖屏 */
+@media (max-width: 768px) {
+  .portal-header {
+    height: 56px;
+    padding: 0 20px;
+  }
+
+  .portal-main {
+    padding: 24px 20px 40px;
+    gap: 24px;
+  }
+
+  .unified-block {
+    padding: 22px 24px 26px;
+    border-radius: 16px;
+  }
+
+  .unified-block .module-title-tag {
+    font-size: 16px;
+  }
+
+  .module-card-row {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 14px;
+  }
+
+  .feature-card {
+    height: 106px;
+    min-width: auto;
+    border-radius: 15px;
+  }
+
+  .card-icon-wrap {
+    width: 46px;
+    height: 46px;
+    border-radius: 12px;
+  }
+
+  .card-label {
+    font-size: 14px;
+  }
+
+  .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;
+  }
+
+  .portal-main {
+    padding: 20px 16px 36px;
+    gap: 20px;
+  }
+
+  .unified-block {
+    padding: 20px 18px 24px;
+    border-radius: 14px;
+    gap: 16px;
+  }
+
+  .unified-block .module-title-tag {
+    font-size: 15px;
+  }
+
+  .module-card-row {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+  }
+
+  .feature-card {
+    height: 100px;
+    border-radius: 14px;
+    gap: 8px;
+  }
+
+  .feature-card:hover {
+    transform: translateY(-3px);
+  }
+
+  .card-icon-wrap {
+    width: 42px;
+    height: 42px;
+    border-radius: 11px;
+  }
+
+  .card-label {
+    font-size: 13px;
+  }
+
+  .card-arrow {
+    bottom: 8px;
+    right: 10px;
+    font-size: 12px;
+  }
+
+  .user-avatar {
+    width: 28px;
+    height: 28px;
+    border-radius: 8px;
+  }
+
+  .avatar-text {
+    font-size: 11px;
+  }
+
+  .alert-modal {
+    padding: 28px 28px;
+    min-width: auto;
+    width: calc(100% - 40px);
+    max-width: 340px;
+    border-radius: 14px;
+  }
+
+  .alert-message {
+    font-size: 14px;
+    margin-bottom: 22px;
+  }
+
+  .alert-btn {
+    padding: 10px 36px;
+    font-size: 13px;
+  }
+}
+</style>
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..8ce5d2c
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,13 @@
+import { createApp } from 'vue'
+import TDesign from 'tdesign-vue-next'
+import 'tdesign-vue-next/es/style/index.css'
+import Antd from 'ant-design-vue'
+import 'ant-design-vue/dist/reset.css'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+app.use(TDesign)
+app.use(Antd)
+app.use(router)
+app.mount('#app')
diff --git a/src/md/CheckinStatsReport.md b/src/md/CheckinStatsReport.md
new file mode 100644
index 0000000..6694e28
--- /dev/null
+++ b/src/md/CheckinStatsReport.md
@@ -0,0 +1,148 @@
+# 打卡互动实时统计报告
+
+## 页面概述
+
+打卡互动实时统计报告页面展示学员打卡和互动的实时统计数据，包括已打卡/未打卡名单、总参与情况和互动情况。页面提供学校、年级、班级、日期范围等多维筛选条件，并以标签页形式切换不同数据视图。
+
+## 页面结构
+
+### 1. 页面标题区域
+- 返回按钮：点击触发 `go-back` 事件，返回报告中心
+- 页面标题：打卡互动实时统计报告
+- 导出报告按钮（`t-button`，primary outline）
+
+### 2. 筛选区域
+
+| 筛选项 | 组件 | 占列数 | 选项 |
+|--------|------|--------|------|
+| 学校 | `t-select` | 3 | 全部学校、第一中学、第二中学 |
+| 年级 | `t-select` | 3 | 全部年级、初一、初二、初三 |
+| 班级 | `t-select` | 3 | 全部班级、1班、2班、3班 |
+| 日期范围 | `t-date-range-picker` | 3 | 选择日期范围 |
+
+### 3. 核心指标概览
+
+| 指标 | 示例值 | 趋势 | 颜色 |
+|------|--------|------|------|
+| 应打卡总人数 | 1,000 | +2.5% | `#333` |
+| 实际打卡人数 | 850 | +5.2% | `#0052d9` |
+| 总互动次数 | 3,240 | +12.4% | `#ed7b2f` |
+| 平均互动/人 | 3.8 | -1.2% | `#2ba471` |
+
+> 趋势上升为红色（`#e34d59`），下降为绿色（`#2ba471`）
+
+### 4. 主标签页
+
+使用 `t-tabs` 组件切换三个数据视图：
+
+#### 4.1 打卡情况
+
+**工具栏**：
+- 左侧：名单类型切换（`t-radio-group`，`default-filled` 变体）
+  - 已打卡名单（`checked`）
+  - 未打卡名单（`unchecked`）
+- 右侧：选择日期（`t-date-picker`，默认今天）
+
+**已打卡名单表格列**：
+
+| 列Key | 列名 | 宽度 | 固定 | 特殊渲染 |
+|-------|------|------|------|----------|
+| `date` | 日期 | 120 | left | - |
+| `studentName` | 学员名 | 100 | left | - |
+| `cloudSchool` | 云校 | 120 | - | - |
+| `school` | 学校 | 120 | - | - |
+| `grade` | 年级 | 80 | - | - |
+| `className` | 班级 | 100 | - | - |
+| `subject` | 科目 | 80 | - | - |
+| `level` | 分层 | 80 | - | - |
+| `courseName` | 作业课程名称 | 200 | - | 超长省略 |
+| `objTotal` | 客观题总题量 | 120 | - | - |
+| `objCorrect` | 客观题正确数 | 120 | - | - |
+| `objRate` | 客观题正确率 | 120 | - | - |
+| `subjTotal` | 主观题总题量 | 120 | - | - |
+| `subjCorrect` | 主观题正确数 | 120 | - | - |
+| `subjRate` | 主观题正确率 | 120 | - | - |
+| `totalQuestions` | 作业总题量 | 100 | - | - |
+| `totalCorrect` | 作业正确数 | 100 | - | - |
+| `totalRate` | 作业正确率 | 100 | - | - |
+| `progressRate` | 作业进步率 | 100 | - | - |
+| `answerDuration` | 答题时长 | 100 | - | - |
+| `studyDuration` | 学习时长 | 100 | - | - |
+| `isFeatured` | 是否精选 | 100 | - | 精选显示 `t-tag`（warning），否则显示 `-` |
+| `firstCheckinTime` | 首次打卡时间 | 180 | - | - |
+| `updateCheckinTime` | 打卡更新时间 | 180 | - | - |
+
+**状态列渲染**：`status` 列使用 `t-tag`（success，light 变体）显示"已打卡"
+
+**未打卡名单表格列**：
+
+| 列Key | 列名 | 宽度 | 固定 | 特殊渲染 |
+|-------|------|------|------|----------|
+| `date` | 日期 | 120 | left | - |
+| `studentName` | 学员名 | 100 | left | - |
+| `cloudSchool` | 云校 | 120 | - | - |
+| `school` | 学校 | 120 | - | - |
+| `grade` | 年级 | 80 | - | - |
+| `className` | 班级 | 100 | - | - |
+| `subject` | 科目 | 80 | - | - |
+| `level` | 分层 | 80 | - | - |
+| `courseName` | 作业课程名称 | 200 | - | 超长省略 |
+| `lastCheckinTime` | 最后打卡时间 | 180 | - | - |
+| `lastCheckinCourse` | 最后打卡课程 | 200 | - | 超长省略 |
+
+#### 4.2 总参与情况
+
+**表格列**：
+
+| 列Key | 列名 | 宽度 | 固定 |
+|-------|------|------|------|
+| `studentName` | 学员名 | 100 | left |
+| `cloudSchool` | 云校 | 120 | - |
+| `school` | 学校 | 120 | - |
+| `grade` | 年级 | 80 | - |
+| `className` | 班级 | 100 | - |
+| `subject` | 科目 | 80 | - |
+| `level` | 分层 | 80 | - |
+| `firstCheckinTime` | 首次打卡时间 | 180 | - |
+| `lastCheckinTime` | 最后一次打卡时间 | 180 | - |
+| `totalCheckins` | 累计打卡次数 | 120 | - |
+| `totalStudyDuration` | 累计学习时长 | 120 | - |
+| `totalAnswerDuration` | 累计答题时长 | 120 | - |
+| `totalFeatured` | 累计精选数量 | 120 | - |
+
+#### 4.3 互动情况
+
+**工具栏**：
+- 右侧：选择日期范围（`t-date-range-picker`，默认近7天）
+- 日期禁用逻辑：最大可选范围30天（选中起始日期后，结束日期限制在前后30天内）
+
+**表格列**：
+
+| 列Key | 列名 | 宽度 | 固定 |
+|-------|------|------|------|
+| `time` | 时间 | 180 | left |
+| `studentName` | 学员 | 100 | left |
+| `cloudSchool` | 云校 | 120 | - |
+| `school` | 学校 | 120 | - |
+| `grade` | 年级 | 80 | - |
+| `className` | 班级 | 100 | - |
+| `likeCount` | 点赞次数 | 100 | - |
+| `commentCount` | 评论次数 | 100 | - |
+| `receivedLikeCount` | 获赞次数 | 100 | - |
+| `receivedCommentCount` | 获评论次数 | 100 | - |
+
+### 5. 分页配置
+- 默认当前页：1
+- 默认每页条数：10
+- 总条数：50
+
+## 事件说明
+
+| 事件名 | 触发时机 | 参数 |
+|--------|----------|------|
+| `go-back` | 点击返回按钮 | 无 |
+
+## 组件依赖
+
+- TDesign Vue Next（`t-icon`、`t-button`、`t-select`、`t-card`、`t-row`、`t-col`、`t-date-range-picker`、`t-date-picker`、`t-tabs`、`t-tab-panel`、`t-radio-group`、`t-radio-button`、`t-table`、`t-tag`）
+- dayjs（日期处理）
diff --git a/src/md/CloudSchoolReport.md b/src/md/CloudSchoolReport.md
new file mode 100644
index 0000000..e9a564a
--- /dev/null
+++ b/src/md/CloudSchoolReport.md
@@ -0,0 +1,259 @@
+# 作业打卡行为报告
+
+## 页面概述
+
+作业打卡行为报告页面展示学员作业打卡相关的各项行为指标，包括互动率、打卡率、上线率、正确率等多维度统计。核心特色是每列均支持独立的阈值配置和颜色规则，通过差值列直观反映各指标与阈值的偏差情况。
+
+## 页面结构
+
+### 1. 页面标题区域
+
+- 返回首页按钮：触发 `goBack` 事件
+- 页面标题：作业打卡行为报告
+- 副标题：作业打卡行为数据分析与趋势报告
+
+### 2. 筛选控制区
+
+#### 组织架构筛选
+
+| 筛选项 | 组件         | 默认值         | 级联关系 | 选项                               |
+| --- | ---------- | ----------- | ---- | -------------------------------- |
+| 云校  | `t-select` | `all`（所有云校） | 顶层   | 所有云校、重庆八中云校、河南云校、安徽云校            |
+| 学校  | `t-select` | 空           | 依赖云校 | 重庆八中、河南郑州一中、安徽合肥一中、四川成都七中、湖北武汉二中 |
+| 年级  | `t-select` | 空           | 依赖学校 | 高一~高三（未选学校时禁用，动态计算）              |
+| 班级  | `t-select` | 空           | 依赖年级 | X年级(1~6)班（未选年级时禁用，动态计算）          |
+
+> 级联提示：未选学校时显示"请先选择学校以激活年级筛选"，未选年级时显示"请选择年级以激活班级筛选"
+
+#### 范围筛选
+
+| 筛选项 | 组件               | 默认值       | 选项                            |
+| --- | ---------------- | --------- | ----------------------------- |
+| 科目  | `t-select`       | `all`（全部） | 全部、语文、数学、英语、物理、化学、政治、生物、历史、地理 |
+| 层次  | `t-select`       | `all`（全部） | 全部、本科、特控、拔尖                   |
+| 时间  | `a-range-picker` | 最近30天     | 最多查询30天，禁止选择未来日期              |
+
+#### 级联选择逻辑
+
+- 切换学校 → 清空年级、班级
+- 切换年级 → 清空班级
+
+#### 日期范围验证
+
+- 最大查询跨度：30天
+- 选中第一个日期后，自动禁用距离超过30天的日期
+- 禁止选择未来日期
+- 校验失败时显示红色错误提示，并清空日期选择
+- 提交查询时进行二次校验
+
+### 3. 数据表格区域
+
+#### 用户提示信息
+
+- **阈值设置**：点击列标题旁的齿轮图标，可分别设置该列的计算阈值与红色阈值
+- **颜色规则**：每列独立配置红色阈值——差值低于该列红色阈值显示红色，差值在红色阈值~0之间显示橙色，差值大于0显示绿色
+
+#### 操作按钮
+
+- **导出数据**：打开导出确认模态框
+- **编辑列**：打开列编辑模态框
+
+#### 表格列定义
+
+**基础指标列（15列）**：
+
+| Key                      | 列名       | 宽度  | 对齐     | 公式/说明                                |
+| ------------------------ | -------- | --- | ------ | ------------------------------------ |
+| `id`                     | 序号       | 60  | center | -                                    |
+| `date`                   | 日期       | 100 | center | -                                    |
+| `interactionRate`        | 互动率      | 90  | right  | 当天点赞+评论的人数/当天攻克一个知识点的人数（按人头去重）       |
+| `dailyCheckInRate`       | 打卡率      | 120 | right  | 存在任何一课程打卡的人数/学员人数                    |
+| `onlineRate`             | 上线率      | 90  | right  | 上线人数/学员人数（上线=当日任意课程学习+答题时长>30秒）      |
+| `qualityCheckInRate`     | 打卡优质率    | 100 | right  | 当日任一门课程笔记被评为"精选"的人数/当日知识点攻克人数（按人头去重） |
+| `objectiveAccuracy`      | 客观题正确率   | 110 | right  | 当日客观题正确数/当日客观题总数量                    |
+| `subjectiveAccuracy`     | 主观题正确率   | 110 | right  | 当日主观题正确数/当日主观题总数量                    |
+| `homeworkAccuracy`       | 作业正确率    | 100 | right  | (客观题正确数+主观题正确数)/(客观题总数量+主观题总数量)      |
+| `homeworkExcellenceRate` | 作业优秀率    | 100 | right  | 作业正确率>80%的人数/当天攻克一个知识点的人数            |
+| `improvementRate`        | 作业进步率    | 100 | right  | (今日作业正确率-昨日作业正确率)/昨日作业正确率            |
+| `courseCompletionRate`   | 课程完成率    | 120 | right  | 当日打卡的课程数/当日总课程数×学员人数                 |
+| `homeworkMasteryRate`    | 作业攻克率    | 120 | right  | 当日已攻克知识点数/当日推送总知识点数                  |
+| `noParticipationRate`    | 未参与打卡率   | 150 | right  | 当日未打卡人数/学员人数                         |
+| `dropoutRate`            | 累计退学人数占比 | 130 | right  | 退学人数/学员人数                            |
+
+**差值列（13列）**：
+
+| Key                          | 列名         | 宽度  | 差值计算公式              | 默认阈值 | 默认红色阈值 |
+| ---------------------------- | ---------- | --- | ------------------- | ---- | ------ |
+| `interactionRateDiff`        | 互动率与阈值差    | 160 | 互动率 - 阈值            | 40%  | -10%   |
+| `dailyCheckInRateDiff`       | 打卡率与阈值差    | 110 | 打卡率 - 阈值            | 80%  | -10%   |
+| `onlineRateDiff`             | 上线率与阈值差    | 110 | 上线率 - 阈值            | 80%  | -10%   |
+| `qualityCheckInRateDiff`     | 打卡优质率与阈值差  | 110 | 打卡优质率 - 阈值          | 40%  | -10%   |
+| `objectiveAccuracyDiff`      | 客观题正确率与阈值差 | 110 | 客观题正确率 - 阈值         | 30%  | -10%   |
+| `subjectiveAccuracyDiff`     | 主观题正确率与阈值差 | 110 | 主观题正确率 - 阈值         | 30%  | -10%   |
+| `homeworkAccuracyDiff`       | 作业正确率与阈值差  | 130 | 作业正确率 - 阈值          | 30%  | -10%   |
+| `homeworkExcellenceRateDiff` | 作业优秀率与阈值差  | 130 | 作业优秀率 - 阈值          | 20%  | -10%   |
+| `improvementRateDiff`        | 作业进步率与阈值差  | 110 | 作业进步率 - 阈值          | 15%  | -10%   |
+| `courseCompletionRateDiff`   | 课程完成率与阈值差  | 130 | 课程完成率 - 阈值          | 70%  | -10%   |
+| `homeworkMasteryRateDiff`    | 作业攻克率与阈值差  | 130 | 作业攻克率 - 阈值          | 30%  | -10%   |
+| `noParticipationRateDiff`    | 未参与打卡率与阈值差 | 130 | **阈值 - 未参与打卡率**（反向） | 30%  | -10%   |
+| `dropoutRateDiff`            | 退学率与阈值之差   | 130 | **阈值 - 退学率**（反向）    | 5%   | -10%   |
+
+> 注：未参与打卡率和退学率的差值计算为反向（阈值 - 实际值），因为这两项指标越低越好
+> 
+> 判断课程是否打卡规则：课程下有任一知识点的学习时长+答题时长>灵活设置的时长
+> 
+> 判断上线规则：当日总学习时长+总答题时长>30秒
+
+#### 颜色规则
+
+**正向指标（互动率、打卡率等）**：
+
+- 差值 < 红色阈值 → 红色（`cell-bg-red`）
+- 红色阈值 ≤ 差值 ≤ 0 → 橙色（`cell-bg-orange`）
+- 差值 > 0 → 绿色（`cell-bg-green`）
+
+**反向指标（未参与打卡率、退学率）**：
+
+- 差值 < 红色阈值 → 红色（严重问题）
+- 红色阈值 ≤ 差值 ≤ 0 → 橙色（警示）
+- 差值 > 0 → 绿色（优秀）
+
+#### 差值格式化
+
+- 正值前缀 `+`，负值前缀 `-`
+- 保留1位小数，后缀 `%`
+
+#### 分页配置
+
+- 默认每页：10条
+- 可选每页条数：10、20、50、100
+- 显示总条数：`共 X 条记录`
+- 支持快速跳页
+
+### 4. 阈值配置系统
+
+#### 配置方式
+
+- 每个差值列的列标题旁有齿轮图标（`SettingOutlined`）
+- 点击齿轮图标弹出 `a-popover` 气泡卡片
+- 同一时间只允许打开一个气泡卡片
+
+#### 气泡卡片内容
+
+- 公式说明（如：互动率与阈值差 = 互动率 - 阈值）
+- **阈值输入**：`a-input-number`，范围 0~100，步长1，带 `%` 格式化
+- **红色阈值输入**：`a-input-number`，最大值 -0.1，步长0.5，精度1位，带 `%` 格式化
+- 提示文字：差值低于红色阈值时显示红色
+- 操作按钮：取消、确定
+
+#### 快照与取消机制
+
+- 打开气泡时保存所有阈值的快照
+- 点击取消：从快照恢复该列的两个阈值
+- 点击确定：值已实时写入 ref，直接关闭
+- 打开新气泡时自动关闭其他气泡
+
+### 5. 列编辑器
+
+#### 功能说明
+
+- 支持拖拽排序列顺序（使用 `vuedraggable` 组件）
+- 支持勾选控制列的显示/隐藏
+- 序号列和日期列固定在最前面，不可编辑
+- 至少需要选择一列才能保存
+
+#### 持久化
+
+- 存储键名：`homework_report_column_order`
+- 存储位置：`localStorage`
+- 加载时验证配置有效性
+- 序号和日期列始终固定在最前面且可见
+
+### 6. 统计图表区域
+
+#### 图表控制
+
+**展示指标选择**：
+
+- 多选下拉框，最多可选10个指标
+- 动态从表格列配置中过滤（排除序号、日期、差值列）
+- 显示已选/总数计数
+- 快捷操作：全选、清空
+- 默认选中所有13个基础指标
+
+**可选指标及颜色映射**：
+
+| 指标       | Key                      | 颜色        |
+| -------- | ------------------------ | --------- |
+| 互动率      | `interactionRate`        | `#5470c6` |
+| 打卡率      | `dailyCheckInRate`       | `#91cc75` |
+| 上线率      | `onlineRate`             | `#fac858` |
+| 打卡优质率    | `qualityCheckInRate`     | `#73c0de` |
+| 客观题正确率   | `objectiveAccuracy`      | `#3ba272` |
+| 主观题正确率   | `subjectiveAccuracy`     | `#fc8452` |
+| 作业正确率    | `homeworkAccuracy`       | `#9a60b4` |
+| 作业优秀率    | `homeworkExcellenceRate` | `#acbf60` |
+| 作业进步率    | `improvementRate`        | `#ea7ccc` |
+| 课程完成率    | `courseCompletionRate`   | `#8d5e40` |
+| 作业攻克率    | `homeworkMasteryRate`    | `#6b9e7e` |
+| 未参与打卡率   | `noParticipationRate`    | `#48b8d0` |
+| 累计退学人数占比 | `dropoutRate`            | `#dd6b66` |
+
+**图表类型切换**：
+
+- 折线图（默认）：带平滑曲线和渐变面积
+- 柱状图
+
+#### 图表特性
+
+- ECharts 渲染，支持窗口自适应
+- Tooltip：十字准线指示器
+- 图例：可滚动
+- 工具栏：保存图片、数据视图、图表类型切换、还原
+- 折线图面积渐变：从指标颜色40%透明度渐变到5%透明度
+- 动画：800ms，cubicOut 缓动
+
+### 7. 导出确认模态框
+
+#### 功能说明
+
+- 展示当前筛选条件，允许在导出前调整
+- 导出模态框中的时间范围无30天限制（仅禁用未来日期）
+- 解决模态框中日期选择器层级遮挡问题（`getPopupContainer` 设为 `document.body`）
+
+#### 导出逻辑
+
+```
+handleExportData():
+  1. 检查是否有可导出数据
+  2. 根据当前可见列配置生成数据行
+  3. 百分比列格式化为 "X.X%"
+  4. 差值列格式化为 "+X.X%" 或 "-X.X%"
+  5. 使用 XLSX 库创建工作簿
+  6. 导出文件名：云校作业打卡行为报告_YYYYMMDDHHmmss.xlsx
+  7. 导出成功/失败提示
+```
+
+## 事件说明
+
+| 事件名      | 触发时机     | 参数  |
+| -------- | -------- | --- |
+| `goBack` | 点击返回首页按钮 | 无   |
+
+## 数据联动
+
+- 筛选条件变化（云校、科目、层次、时间范围）→ 自动更新表格和图表
+- 图表类型切换 → 自动更新图表
+- 指标选择变化 → 自动更新图表
+- 阈值变化 → 差值列重新计算并更新颜色
+- 窗口大小变化 → 图表自适应缩放
+
+## 组件依赖
+
+- TDesign Vue Next（`t-button`、`t-icon`、`t-select`、`t-card`、`t-dialog`、`t-checkbox`、`t-radio-group`、`t-radio-button`）
+- Ant Design Vue（`a-table`、`a-range-picker`、`a-tooltip`、`a-popover`、`a-input-number`、`a-button`）
+- ECharts（图表渲染）
+- dayjs（日期处理）
+- xlsx（Excel 导出）
+- vuedraggable（列拖拽排序）
+- @ant-design/icons-vue（`SettingOutlined`、`InfoCircleOutlined`、`ReloadOutlined`、`ExclamationCircleOutlined`）
diff --git a/src/md/EnglishWordReport.md b/src/md/EnglishWordReport.md
new file mode 100644
index 0000000..2335eb1
--- /dev/null
+++ b/src/md/EnglishWordReport.md
@@ -0,0 +1,304 @@
+# 英语单词报告
+
+## 页面概述
+
+英语单词报告页面全面展示英语单词学习数据与学情分析，包含总体学情统计、答题正确率排名、答题进度分布、正确率分布、学生在线统计五个维度的数据分析。支持云校/学校/年级/班级的级联筛选，各标签页均支持独立导出功能。
+
+## 页面结构
+
+### 1. 页面标题区域
+- 返回按钮：点击触发 `go-back` 事件
+- 标题图标 + 标题"英语单词报告"
+- 副标题：全面展示英语单词学习数据与学情分析
+- 右侧筛选器（`size="large"`）：
+
+| 筛选项 | 组件 | 宽度 | 级联关系 | 禁用条件 |
+|--------|------|------|----------|----------|
+| 云校 | `t-select` | 140px | 顶层 | - |
+| 学校 | `t-select` | 140px | 依赖云校 | - |
+| 年级 | `t-select` | 120px | 依赖学校 | 未选学校时禁用 |
+| 班级 | `t-select` | 120px | 依赖年级 | 未选年级时禁用 |
+
+#### 级联选择逻辑
+- 切换学校 → 清空年级、班级
+- 切换年级 → 清空班级
+
+#### 筛选选项
+
+**云校列表**：全部云校、爱学云校A、爱学云校B
+
+**学校列表**：全部学校、第一中学、第二中学、实验中学
+
+**年级列表**：全部年级、2027届、2028届、2029届
+
+**班级列表**：全部班级、高一1班、高一2班、高二1班、高二2班
+
+### 2. 标签页
+
+使用 `t-tabs` 组件切换五个数据视图：
+
+#### 2.1 总体学情统计（`overview`）
+
+**标题**：总体学情统计分析表
+**描述**：统计各年级英语单词学习整体情况，包含在线率、完成率、正确率等核心指标
+
+**日期范围选择**：
+- `t-date-range-picker`，默认最近30天
+- 禁止选择未来日期
+- 跨度超过30天时自动截断并显示警告提示（5秒后消失）
+
+**表格特性**：
+- 使用 `t-enhanced-table`，支持树形展开
+- 树形结构：云校 → 学校 → 年级 → 班级（`defaultExpandAll: true`）
+- 虚拟滚动（`scroll: { type: 'virtual' }`）
+- 班级行可点击，点击后打开班级详情模态框
+
+**表格列**：
+
+| 列Key | 列名 | 宽度 | 对齐 | 固定 | 特殊渲染 |
+|-------|------|------|------|------|----------|
+| `subject` | 组织架构 | 300 | left | left | 树形节点 |
+| `totalStudents` | 总人数 | 90 | center | - | - |
+| `onlineCount` | 在线人数 | 100 | center | - | - |
+| `onlineRate` | 在线率 | 100 | center | - | 蓝色标签样式（`#0052d9`，浅蓝背景） |
+| `totalAnswerRate` | 总答题率 | 110 | center | - | - |
+| `answerProgress` | 答题进度 | 100 | center | - | - |
+| `answerUserCount` | 答题用户数 | 110 | center | - | - |
+| `avgAnswerCount` | 人均答题数 | 110 | center | - | - |
+| `correctAnswerCount` | 正确答题数 | 110 | center | - | - |
+| `accuracy` | 正确率 | 100 | center | - | 绿色标签样式（`#00a870`，浅绿背景） |
+
+**数据层级示例**：
+```
+八中云校（476人）
+  ├── 第一中学（156人）
+  │   ├── 2027届（102人）
+  │   │   ├── 高一1班（50人）
+  │   │   └── 高一2班（52人）
+  │   └── 2026届（54人）
+  │       └── 高二1班（54人）
+  ├── 第二中学（148人）
+  └── 实验中学（172人）
+河南云校（332人）
+湖北云校（175人）
+```
+
+**导出按钮**：打开导出确认对话框
+
+#### 2.2 答题正确率排名（`accuracy_rank`）
+
+**标题**：学生答题正确率排名表
+**描述**：按答题正确率从高到低排列，展示学生学习成效排名
+
+**表格列**：
+
+| 列Key | 列名 | 宽度 | 对齐 | 特殊渲染 |
+|-------|------|------|------|----------|
+| `rank` | 排名 | 70 | center | 前三名：渐变圆形奖牌（金 `#f5a623`、银 `#94a3b8`、铜 `#cd7f32`），其余：灰色数字 |
+| `name` | 学生姓名 | 110 | - | - |
+| `cloud` | 云校 | 130 | - | - |
+| `school` | 学校 | 130 | - | - |
+| `grade` | 年级 | 90 | - | - |
+| `class` | 班级 | 110 | - | - |
+| `totalCount` | 总答题数 | 100 | center | - |
+| `correctCount` | 正确答题数 | 100 | center | - |
+| `accuracy` | 正确率 | 110 | center | 蓝色标签样式 |
+
+**分页**：每页10条，支持跳页
+
+#### 2.3 答题进度分布（`progress_dist`）
+
+**标题**：学生答题进度分布表
+**描述**：按答题完成进度区间统计学生分布情况，了解整体学习推进状态
+
+**图表**：
+- ECharts 柱状图，高度 400px
+- X轴：进度区间（0%~9% ~ 90%~100%），标签旋转45度
+- Y轴：学生人数
+- 柱体颜色按进度区间分级：
+  - ≥90%：绿色 `#00a870`
+  - ≥80%：蓝色 `#0052d9`
+  - ≥60%：橙色 `#ed7b2f`
+  - ≥40%：黄色 `#f5a623`
+  - <40%：红色 `#e34d59`
+- 柱顶显示数值（0不显示）
+
+**表格列**：
+
+| 列Key | 列名 | 宽度 | 特殊渲染 |
+|-------|------|------|----------|
+| `progressRange` | 进度区间 | 160 | 文字颜色按区间分级 |
+| `studentCount` | 学生人数 | 100 | 居中 |
+| `percentage` | 占比 | 160 | 进度条 + 百分比文字 |
+
+**进度区间数据**：
+
+| 进度区间 | 学生人数 | 占比 |
+|----------|----------|------|
+| 90%~100% | 270 | 45.7% |
+| 80%~89% | 145 | 24.6% |
+| 70%~79% | 80 | 13.5% |
+| 60%~69% | 45 | 7.6% |
+| 50%~59% | 25 | 4.2% |
+| 40%~49% | 13 | 2.2% |
+| 30%~39% | 7 | 1.2% |
+| 20%~29% | 3 | 0.5% |
+| 10%~19% | 2 | 0.3% |
+| 0%~9% | 0 | 0.0% |
+
+#### 2.4 正确率分布（`accuracy_dist`）
+
+**标题**：学生答题正确率分布表
+**描述**：按正确率区间统计学生分布，直观呈现学生掌握程度层次
+
+**图表**：
+- ECharts 柱状图，高度 400px
+- X轴：正确率区间（0%~9% ~ 90%~100%），标签旋转45度
+- Y轴：学生人数
+- 柱体颜色按正确率区间分级（同进度分布颜色规则）
+- 柱顶显示数值（0不显示）
+
+**表格列**：
+
+| 列Key | 列名 | 宽度 | 特殊渲染 |
+|-------|------|------|----------|
+| `accuracyRange` | 正确率区间 | 160 | 文字颜色按区间分级 |
+| `studentCount` | 学生人数 | 100 | 居中 |
+| `percentage` | 占比 | 160 | 进度条 + 百分比文字 |
+
+**正确率区间数据**：
+
+| 正确率区间 | 学生人数 | 占比 |
+|------------|----------|------|
+| 90%~100% | 198 | 33.6% |
+| 80%~89% | 215 | 36.4% |
+| 70%~79% | 112 | 19.0% |
+| 60%~69% | 45 | 7.6% |
+| 50%~59% | 12 | 2.0% |
+| 40%~49% | 5 | 0.8% |
+| 30%~39% | 2 | 0.3% |
+| 20%~29% | 1 | 0.2% |
+| 10%~19% | 0 | 0.0% |
+| 0%~9% | 0 | 0.0% |
+
+#### 2.5 学生在线统计（`online_stats`）
+
+**标题**：学生在线与答题趋势
+**描述**：展示不同时间维度下的在线用户数量与答题数量变化趋势
+
+**时间维度切换**（`t-radio-group`，`default-filled` 变体）：
+
+| 维度 | Key | 日期选择器 | 说明 |
+|------|-----|-----------|------|
+| 分钟 | `minute` | `t-date-picker`（单日选择） | 每10分钟一个数据点 |
+| 小时 | `hour` | `t-date-picker`（单日选择） | 每小时一个数据点 |
+| 天 | `day` | `t-date-range-picker`（范围选择） | 每天一个数据点，最大30天 |
+
+**日期验证**：
+- 禁止选择未来日期
+- 天维度日期范围超过30天时自动截断并显示警告
+
+**趋势数据生成逻辑**：
+- 分钟维度：从当天0:00开始，每10分钟一个点，截止至当前时间前1小时（向下取整到10分钟）
+- 小时维度：从当天0:00开始，每小时一个点，截止至当前时间前1小时
+- 天维度：根据日期范围生成，每天一个点
+- 处理跨天边界：当前时间不足1小时时截断在当天00:00
+
+**图表**：
+- ECharts 双Y轴折线图，高度 400px
+- 左Y轴：在线用户数（蓝色 `#0052d9`，带面积渐变）
+- 右Y轴：答题数量（绿色 `#00a870`，带面积渐变）
+- 平滑曲线
+- Tooltip：十字准线指示器
+- X轴标签：分钟维度每隔5个点显示（即1小时间隔），天维度旋转45度
+
+### 3. 导出确认对话框
+
+#### 功能说明
+- `t-dialog` 弹窗，标题"确认导出"
+- 展示当前筛选条件，允许在导出前调整
+- 级联重置：切换学校清空年级和班级，切换年级清空班级
+
+#### 导出筛选条件
+
+| 筛选项 | 组件 | 显示条件 |
+|--------|------|----------|
+| 云校 | `t-select` | 始终显示 |
+| 学校 | `t-select` | 始终显示 |
+| 年级 | `t-select` | 始终显示（未选学校时禁用） |
+| 班级 | `t-select` | 始终显示（未选年级时禁用） |
+| 日期范围 | `t-date-range-picker` | 总体学情 或 在线统计(天维度) |
+| 选择日期 | `t-date-picker` | 在线统计(分钟/小时维度) |
+| 时间维度 | 文字显示 | 在线统计时显示 |
+
+#### 导出逻辑
+```
+confirmExport():
+  1. 根据 exportType 确定数据源和列配置
+  2. 提取表头和数据行
+  3. 使用 XLSX 库创建工作簿
+  4. 文件名格式：{报告名}_{云校}_{学校}_{年级}_{班级}.xlsx
+  5. 导出成功提示
+```
+
+**各标签页导出文件名**：
+- 总体学情：`总体学情统计分析表`
+- 正确率排名：`学生答题正确率排名表`
+- 进度分布：`学生答题进度分布表`
+- 正确率分布：`学生答题正确率分布表`
+- 在线统计：`学生在线与答题趋势`
+
+### 4. 班级详情模态框
+
+#### 功能说明
+- `t-dialog` 弹窗，宽度 900px，无底部按钮
+- 标题：`{科目} - 学生详情`
+- 触发方式：点击总体学情表格中的班级行
+
+#### 班级概览信息
+
+| 信息项 | 说明 |
+|--------|------|
+| 班级名称 | 科目名称 |
+| 总人数 | 高亮显示 |
+| 平均在线率 | 蓝色样式，计算公式：在线人数/总人数×100% |
+| 平均完成率 | 普通样式 |
+| 平均正确率 | 绿色样式 |
+
+#### 学生数据表格
+
+| 列Key | 列名 | 宽度 | 对齐 | 特殊渲染 |
+|-------|------|------|------|----------|
+| `name` | 姓名 | 100 | center | 固定左侧 |
+| `onlineDays` | 在线天数 | 90 | center | - |
+| `onlineRate` | 在线率 | 90 | center | 蓝色标签样式 |
+| `totalAnswerCount` | 总答题数 | 95 | center | - |
+| `completionRate` | 完成率 | 90 | center | ≥80%绿色，≥60%蓝色，<60%橙色 |
+| `answerProgress` | 答题进度 | 90 | center | - |
+| `correctAnswerCount` | 正确答题数 | 100 | center | - |
+| `accuracy` | 正确率 | 90 | center | ≥85%绿色背景，≥60%蓝色背景，<60%红色背景 |
+
+**学生数据导出**：
+- 导出格式：CSV（UTF-8 BOM）
+- 文件名：`{班级名}_学生数据_{YYYY-MM-DD_HH-mm-ss}.csv`
+- 导出过程有 loading 状态
+
+## 事件说明
+
+| 事件名 | 触发时机 | 参数 |
+|--------|----------|------|
+| `go-back` | 点击返回按钮 | 无 |
+
+## 数据联动
+
+- 标签页切换 → 重置页码到第1页，对应标签页图表重新渲染
+- 时间维度切换 → 重新生成趋势数据并渲染图表
+- 日期选择变化 → 重新生成趋势数据并渲染图表
+- 窗口大小变化 → 所有图表自适应缩放
+
+## 组件依赖
+
+- TDesign Vue Next（`t-button`、`t-icon`、`t-select`、`t-option`、`t-tabs`、`t-tab-panel`、`t-table`、`t-enhanced-table`、`t-date-range-picker`、`t-date-picker`、`t-radio-group`、`t-radio-button`、`t-dialog`、`MessagePlugin`）
+- ECharts（图表渲染）
+- dayjs（日期处理）
+- xlsx（Excel 导出）
diff --git a/src/md/HomePage.md b/src/md/HomePage.md
new file mode 100644
index 0000000..af1e543
--- /dev/null
+++ b/src/md/HomePage.md
@@ -0,0 +1,44 @@
+# 首页（报告中心）
+
+## 页面概述
+
+首页是报告中心的入口页面，以卡片网格形式展示各类数据报告的入口。用户可通过点击卡片跳转到对应的报告详情页，也可通过返回按钮回到门户首页。
+
+## 页面结构
+
+### 1. 返回按钮区域
+- 位于页面顶部
+- 点击后触发 `go-back` 事件，返回门户首页
+- 悬停时边框变为主题蓝色，背景变为浅蓝
+
+### 2. 报告入口网格
+采用 `t-row` / `t-col` 栅格布局，每行4列（`span=6`），展示以下5个报告入口卡片：
+
+| 序号 | 报告ID | 报告名称 | 图标 | 图标背景色 | 描述 |
+|------|--------|----------|------|------------|------|
+| 1 | `cloud_school` | 作业打卡行为报告 | cloud | 蓝色渐变 `#4A90E2 → #357ABD` | 查看作业打卡行为数据分析与趋势报告 |
+| 2 | `school` | 学习行为报告 | home | 橙色渐变 `#F5A623 → #E59411` | 查看各校学生行为详细报告与对比分析 |
+| 3 | `leaderboard` | 排行榜 | chart-bar | 绿色渐变 `#7ED321 → #68B019` | 查看积分、知识点、互动、笔记精选等多维度排行榜 |
+| 4 | `english_word` | 英语单词报告 | layers | 紫色渐变 `#667eea → #764ba2` | 查看英语单词学情统计、正确率排名、进度分布等报告 |
+| 5 | `checkin_stats` | 打卡互动实时统计报告 | chart-pie | 蓝色渐变 `#00C6FF → #0072FF` | 查看已打卡名单、未打卡名单、总参与概况、互动统计等实时数据 |
+
+## 交互行为
+
+- **点击卡片**：触发 `navigate` 事件，传递对应报告的 `id`，由父组件路由到对应报告页面
+- **卡片悬停**：卡片上浮4px，阴影加深，过渡动画使用 `cubic-bezier(0.4, 0, 0.2, 1)`
+
+## 事件说明
+
+| 事件名 | 触发时机 | 参数 |
+|--------|----------|------|
+| `navigate` | 点击报告卡片 | `report.id`（如 `'cloud_school'`、`'leaderboard'` 等） |
+| `go-back` | 点击返回按钮 | 无 |
+
+## 响应式布局
+
+- `max-width: 1200px`：卡片下边距缩小为16px
+- `max-width: 768px`：卡片内边距缩小，卡片下边距缩小为16px
+
+## 组件依赖
+
+- TDesign Vue Next（`t-row`、`t-col`、`t-card`、`t-icon`）
diff --git a/src/md/LeaderboardPage.md b/src/md/LeaderboardPage.md
new file mode 100644
index 0000000..e7b5ea2
--- /dev/null
+++ b/src/md/LeaderboardPage.md
@@ -0,0 +1,120 @@
+# 排行榜
+
+## 页面概述
+
+排行榜页面展示学员在多个维度的排名数据，支持灵活的筛选条件和时间范围选择。页面包含4个排行榜标签页，每个标签页均有独立的时间筛选器和数据表格。
+
+## 页面结构
+
+### 1. 页面标题区域
+- 返回首页按钮：触发 `go-back` 事件
+- 页面标题：排行榜
+
+### 2. 筛选区域
+
+#### 筛选规则提示
+- 提示文字：先选**云校/学校**，再选**年级**，最后选**班级**（级联选择）
+- 重置按钮：恢复所有筛选条件为默认值
+
+#### 筛选条件
+
+| 筛选项 | 组件 | 默认值 | 级联关系 | 选项 |
+|--------|------|--------|----------|------|
+| 云校 | `a-select` | `all`（全部云校） | 顶层 | 全部云校、华东云校、华北云校、华南云校、西部云校 |
+| 学校 | `a-select` | 无 | 依赖云校 | 全部学校 + 根据云校动态过滤的学校列表 |
+| 年级 | `a-select` | 无 | 依赖学校 | 高一、高二、高三（未选学校时禁用） |
+| 班级 | `a-select` | 无 | 依赖年级 | 根据年级动态过滤的班级列表（未选年级时禁用） |
+| 科目 | `a-select` | `all`（全部科目） | 独立 | 全部科目、语文、数学、英语、物理、化学、生物、历史、地理、政治 |
+| 学生层次 | `a-select` | `all`（全部） | 独立 | 全部、本科、特控、拔尖 |
+
+#### 级联选择逻辑
+- 切换云校 → 清空学校、年级、班级
+- 切换学校 → 清空年级、班级
+- 切换年级 → 清空班级
+- 年级列和班级列根据筛选条件动态显示/隐藏
+
+#### 学校与云校的对应关系
+| 云校 | 所属学校 |
+|------|----------|
+| 华东云校 | 清华大学、北京大学、复旦大学、上海交通大学 |
+| 华北云校 | 浙江大学、南京大学 |
+| 华南云校 | 武汉大学、华中科技大学、中山大学 |
+| 西部云校 | 四川大学 |
+
+#### 年级与班级的对应关系
+| 年级 | 班级 |
+|------|------|
+| 高一 | 1班、2班、3班 |
+| 高二 | 4班、5班、6班 |
+| 高三 | 7班、8班、9班 |
+
+### 3. 排行榜标签页
+
+#### 标签页列表
+
+| Key | 标签名 | 数据列 |
+|-----|--------|--------|
+| `points` | 积分排行榜 | 排名、学员姓名、学校、[年级]、[班级]、总积分 |
+| `courses` | 完成知识点排行榜 | 排名、学员姓名、学校、[年级]、[班级]、完成知识点数 |
+| `likes` | 互动排行榜 | 排名、学员姓名、学校、[年级]、[班级]、点赞+评论数 |
+| `answers` | 笔记精选排行榜 | 排名、学员姓名、学校、[年级]、[班级]、精选次数 |
+
+> 注：年级列和班级列仅在对应筛选条件被选中时才显示（动态列配置）
+
+### 4. 时间筛选器
+
+每个标签页均有独立的时间筛选器：
+
+| 选项 | Key | 日期范围计算逻辑 |
+|------|-----|------------------|
+| 总榜 | `all` | 默认最近30天，可自定义（最多60天） |
+| 本周榜 | `thisWeek` | 本周一至本周日 |
+| 上周榜 | `lastWeek` | 上周一至上周日 |
+| 今日榜 | `today` | 当天 |
+| 昨日榜 | `yesterday` | 昨天 |
+
+#### 自定义时间范围（仅总榜可用）
+- 非总榜时，时间范围选择器禁用，自动计算对应日期范围
+- 总榜时，可手动选择起止日期
+- 最大跨度限制：60天
+- 起始日期最大值 = 结束日期
+- 结束日期最小值 = 起始日期
+- 结束日期最大值 = 起始日期 + 60天
+
+### 5. 排行榜表格
+
+#### 排名展示
+- 前三名：显示奖牌图标（金 `rank-gold`、银 `rank-silver`、铜 `rank-bronze`）
+- 第四名及以后：显示数字
+
+#### 学员信息
+- 头像：根据姓名首字生成，颜色由姓名字符编码决定
+- 姓名：直接显示
+
+#### 数据展示
+- 积分：带千分位格式化，后缀"积分"
+- 完成知识点数：后缀"个"
+- 互动数：带千分位格式化，后缀"次"
+- 精选次数：后缀"次"
+
+#### 分页
+- 每页10条
+
+### 6. 导出功能
+- 每个标签页均有"导出表格"按钮
+- 导出格式：CSV
+
+## 数据生成逻辑
+
+模拟数据采用确定性算法生成，覆盖所有学校、年级、班级、科目、学生层次的组合，每个组合生成2名学生。数据按数值降序排序后分配排名。筛选后重新计算排名。
+
+## 事件说明
+
+| 事件名 | 触发时机 | 参数 |
+|--------|----------|------|
+| `go-back` | 点击返回首页按钮 | 无 |
+
+## 组件依赖
+
+- TDesign Vue Next（`t-button`、`t-icon`）
+- Ant Design Vue（`a-select`、`a-table`、`a-tabs`、`a-avatar`、`a-button`）
diff --git a/src/md/LearningBehaviorReport.md b/src/md/LearningBehaviorReport.md
new file mode 100644
index 0000000..3be5a34
--- /dev/null
+++ b/src/md/LearningBehaviorReport.md
@@ -0,0 +1,190 @@
+# 学习行为报告
+
+## 页面概述
+
+学习行为报告页面展示学员学习行为的各项数据指标，包括学员人数、上线人数、打卡人数、互动数据、学习时长等多维度统计。页面提供灵活的筛选条件、可配置的数据表格和交互式趋势图表。
+
+## 页面结构
+
+### 1. 页面标题区域
+- 返回首页按钮：触发 `goBack` 事件
+- 页面标题：学习行为报告
+- 副标题：学员学习行为数据统计与分析
+
+### 2. 筛选控制区
+
+#### 筛选规则
+- 标题：筛选条件（带过滤图标）
+- 操作按钮：重置、查询
+
+#### 组织架构筛选
+
+| 筛选项 | 组件 | 默认值 | 级联关系 | 选项 |
+|--------|------|--------|----------|------|
+| 云校 | `t-select` | `all`（所有云校） | 顶层 | 所有云校、重庆八中云校、河南云校、安徽云校 |
+| 学校 | `t-select` | 空 | 依赖云校 | 重庆八中、河南郑州一中、安徽合肥一中、四川成都七中、湖北武汉二中 |
+| 年级 | `t-select` | 空 | 依赖学校 | 高一、高二、高三（未选学校时禁用） |
+| 班级 | `t-select` | 空 | 依赖年级 | 1班~6班（未选年级时禁用） |
+
+#### 范围筛选
+
+| 筛选项 | 组件 | 默认值 | 选项 |
+|--------|------|--------|------|
+| 科目 | `t-select` | `all`（全部） | 全部、语文、数学、英语、物理、化学、政治、生物、历史、地理 |
+| 层次 | `t-select` | `all`（全部） | 全部、本科、特控、拔尖 |
+| 时间 | `a-range-picker` | 最近30天 | 最多查询30天，禁止选择未来日期 |
+
+#### 级联选择逻辑
+- 切换云校 → 触发 `handleCloudSchoolChange`
+- 切换学校 → 清空年级、班级
+- 切换年级 → 清空班级
+
+#### 日期范围验证
+- 最大查询跨度：30天
+- 选中第一个日期后，自动禁用距离超过30天的日期
+- 禁止选择未来日期
+- 校验失败时显示红色错误提示，并清空日期选择
+- 提交查询时进行二次校验
+
+### 3. 数据表格区域
+
+#### 操作按钮
+- **导出数据**：打开导出确认模态框
+- **编辑列**：打开列编辑模态框
+
+#### 表格列定义（共17列）
+
+| Key | 列名 | 宽度 | 对齐 | 固定 | Tooltip 说明 |
+|-----|------|------|------|------|-------------|
+| `id` | 序号 | 70 | center | left | - |
+| `date` | 日期 | 110 | center | left | - |
+| `studentCount` | 学员人数 | 100 | right | - | - |
+| `onlineCount` | 上线人数 | 100 | right | - | 上线标准=当日学习+答题时长>30秒 |
+| `checkInCount` | 打卡人数 | 100 | right | - | 打卡标准=当日任意课程完成打卡，课程打卡指标需灵活设置 |
+| `dailyDropoutCount` | 当日退学人数 | 120 | right | - | - |
+| `totalDropoutCount` | 累计退学人数 | 120 | right | - | - |
+| `likedCount` | 点赞人数 | 110 | right | - | 当日点赞人数（按人头去重） |
+| `commentedCount` | 评论人数 | 110 | right | - | 当日评论人数（按人头去重） |
+| `homeworkCompletedCount` | 完成所有课程人数 | 140 | right | - | 当日所有课程完成打卡人数（按人头去重） |
+| `noCheckInCount` | 未打卡人数 | 110 | right | - | 当日所有课程未打卡 |
+| `excellentHomeworkCount` | 笔记评精选人数 | 140 | right | - | 当日笔记被评选为精选的人数（按人头去重） |
+| `avgStudyDuration` | 平均学习时长 | 120 | right | - | - |
+| `onlyStudyNoPayCount` | 仅学无交人数 | 120 | right | - | 当日仅参与学习，但没有提交动作的人数 |
+| `masteredKnowledgePoints` | 攻克知识点数 | 120 | right | - | 当日所有人攻克知识点的数量 |
+| `incompleteCount` | 未完成所有课程人数 | 140 | right | - | 当日未完成所有课程的人数 |
+| `failedMasterCount` | 攻克失败人数 | 120 | right | - | 当日最大重试后仍未掌握知识点的人数 |
+
+#### 平均学习时长格式化
+- 格式化规则：分钟数转换为"X小时Y分钟"格式
+- 不足1小时时仅显示"Y分钟"
+
+#### 分页配置
+- 默认每页：10条
+- 可选每页条数：10、20、50、100
+- 显示总条数：`共 X 条数据`
+- 支持快速跳页
+
+### 4. 列编辑器
+
+#### 功能说明
+- 支持拖拽排序列顺序（使用 `vuedraggable` 组件）
+- 支持勾选控制列的显示/隐藏
+- 序号列和日期列固定在最前面，不可编辑
+- 至少需要选择一列才能保存
+
+#### 操作按钮
+- 全选：选中所有可编辑列
+- 清空：取消所有可编辑列
+- 保存：保存列配置到 `localStorage`
+- 取消：放弃本次修改
+
+#### 持久化
+- 存储键名：`learning_behavior_report_column_order`
+- 存储位置：`localStorage`
+- 加载时验证配置有效性，确保所有 key 存在于默认配置中
+- 序号和日期列始终固定在最前面且可见
+
+### 5. 统计图表区域
+
+#### 图表控制
+
+**展示指标选择**：
+- 多选下拉框，最多可选10个指标
+- 显示已选/总数计数
+- 快捷操作：全选、清空
+- 默认选中：学员人数、上线人数、打卡人数、完成所有课程人数、仅学无交人数
+
+**可选指标及颜色映射**：
+
+| 指标 | Key | 颜色 |
+|------|-----|------|
+| 学员人数 | `studentCount` | `#5470c6` |
+| 上线人数 | `onlineCount` | `#91cc75` |
+| 打卡人数 | `checkInCount` | `#2ba471` |
+| 当日退学人数 | `dailyDropoutCount` | `#ee6666` |
+| 累计退学人数 | `totalDropoutCount` | `#fc8452` |
+| 点赞人数 | `likedCount` | `#fac858` |
+| 评论人数 | `commentedCount` | `#73c0de` |
+| 完成所有课程人数 | `homeworkCompletedCount` | `#3ba272` |
+| 未打卡人数 | `noCheckInCount` | `#9a60b4` |
+| 笔记评精选人数 | `excellentHomeworkCount` | `#ea7ccc` |
+| 平均学习时长(分钟) | `avgStudyDuration` | `#48b8d0` |
+| 仅学无交人数 | `onlyStudyNoPayCount` | `#dd6b66` |
+| 攻克知识点数 | `masteredKnowledgePoints` | `#c23531` |
+| 未完成所有课程人数 | `incompleteCount` | `#61a0a8` |
+| 攻克失败人数 | `failedMasterCount` | `#ee6666` |
+
+**图表类型切换**：
+- 折线图（默认）：带平滑曲线和渐变面积
+- 柱状图
+
+#### 图表特性
+- ECharts 渲染，支持窗口自适应
+- Tooltip：十字准线指示器，白色背景带阴影
+- 图例：可滚动，支持翻页
+- 工具栏：保存图片（2倍像素比）、数据视图（只读）、图表类型切换、还原
+- X轴：日期，标签旋转45度
+- Y轴：数值轴，虚线网格线
+- 折线图面积渐变：从指标颜色40%透明度渐变到5%透明度
+- 动画：800ms，cubicOut 缓动
+
+### 6. 导出确认模态框
+
+#### 功能说明
+- 展示当前筛选条件，允许在导出前调整
+- 导出模态框中的时间范围无30天限制（仅禁用未来日期）
+- 解决模态框中日期选择器层级遮挡问题（`getPopupContainer` 设为 `document.body`）
+
+#### 导出逻辑
+```
+handleExportData():
+  1. 检查是否有可导出数据
+  2. 根据当前可见列配置生成数据行
+  3. 平均学习时长列使用格式化后的文本
+  4. 使用 XLSX 库创建工作簿
+  5. 导出文件名：学习行为报告_YYYYMMDDHHmmss.xlsx
+  6. 导出成功/失败提示
+```
+
+## 事件说明
+
+| 事件名 | 触发时机 | 参数 |
+|--------|----------|------|
+| `goBack` | 点击返回首页按钮 | 无 |
+
+## 数据联动
+
+- 筛选条件变化（云校、科目、层次、时间范围）→ 自动更新图表
+- 图表类型切换 → 自动更新图表
+- 指标选择变化 → 自动更新图表
+- 窗口大小变化 → 图表自适应缩放
+
+## 组件依赖
+
+- TDesign Vue Next（`t-button`、`t-icon`、`t-select`、`t-card`、`t-dialog`、`t-checkbox`、`t-radio-group`、`t-radio-button`）
+- Ant Design Vue（`a-table`、`a-range-picker`、`a-tooltip`）
+- ECharts（图表渲染）
+- dayjs（日期处理）
+- xlsx（Excel 导出）
+- vuedraggable（列拖拽排序）
+- @ant-design/icons-vue（`ExclamationCircleOutlined`、`InfoCircleOutlined`）
diff --git a/src/md/LoginPage.md b/src/md/LoginPage.md
new file mode 100644
index 0000000..44cf45e
--- /dev/null
+++ b/src/md/LoginPage.md
@@ -0,0 +1,101 @@
+# 登录页面
+
+## 页面概述
+
+登录页面是系统的入口，提供扫码登录和账号密码登录两种方式。页面采用左右分栏布局，左侧为装饰插画区，右侧为登录操作区。当前为产品原型演示阶段，扫码登录暂不可用。
+
+## 页面结构
+
+### 1. 顶部 Logo 区域
+- 展示劝学品牌 Logo 图标和"劝学"文字
+- Logo 图标来源于 `../assets/logo.png`
+
+### 2. 主体内容区（左右分栏）
+
+#### 左侧装饰区
+- 展示装饰插画，图片来源 `../assets/content-block-1-eZzov1mX.png`
+- 最大宽度 480px，自适应缩放
+
+#### 右侧登录区域
+
+##### 原型提示框
+- 默认显示（`showNotice = true`），可手动关闭
+- 提示内容：
+  - 标题：产品原型演示阶段
+  - 说明：扫码登录暂不可用，请使用账号密码登录
+  - 测试账号：账号 `1`，密码 `1`（以橙色标签高亮展示）
+- 关闭按钮位于右上角
+- 带有淡入淡出动画（`notice-fade` 过渡）
+
+##### 登录卡片（宽度 340px）
+
+**Tab 切换**：
+- 扫码登录（默认激活）
+- 账号登录
+- 激活状态：文字变为主题蓝色，底部显示蓝色下划线指示器
+
+**扫码登录面板**：
+- 模拟二维码 SVG 展示（150×150px）
+- 提示文字：请使用劝学APP扫码登录
+- 操作路径说明：打开劝学·我的-右上角扫一扫
+- App 下载横幅：
+  - 链接地址：`https://app.23544.com/#/download`（新窗口打开）
+  - 内容：下载图标 + "没有劝学APP？" + "点击立即下载，体验更多功能"
+  - 悬停效果：上浮2px，阴影加深，边框变蓝
+
+**账号登录面板**：
+- 账号输入框：
+  - 标签：账号
+  - 占位符：请输入手机号/账号
+  - 默认值：`1`（测试账号）
+- 密码输入框：
+  - 标签：密码
+  - 占位符：请输入密码
+  - 默认值：`1`（测试密码）
+  - 支持密码显示/隐藏切换（眼睛图标按钮）
+  - `showPassword` 状态控制输入框类型（`text` / `password`）
+- 表单选项行：
+  - 记住我：复选框，绑定 `form.remember`
+  - 忘记密码：链接（功能待实现）
+- 登录按钮：点击触发 `handleLogin` 方法
+
+## 交互逻辑
+
+### 登录验证
+```
+handleLogin():
+  1. 校验：用户名和密码不能为空
+  2. 校验失败：弹出 alert 提示"请输入账号和密码"
+  3. 校验成功：触发 login-success 事件
+```
+
+### 表单数据模型
+```javascript
+form = {
+  username: '1',    // 默认测试账号
+  password: '1',    // 默认测试密码
+  remember: false   // 记住我状态
+}
+```
+
+## 事件说明
+
+| 事件名 | 触发时机 | 参数 |
+|--------|----------|------|
+| `login-success` | 账号密码校验通过 | 无 |
+
+## 页面样式
+
+- 整体背景：蓝色渐变 `linear-gradient(145deg, #dce8fb, #e8f1fd, #c8dcf8)`
+- 底部波浪装饰：半透明蓝色渐变
+- 登录卡片：白色圆角卡片，阴影 `0 8px 40px rgba(0, 82, 217, 0.1)`
+
+## 注意事项
+
+- 当前为原型演示阶段，扫码登录仅为 UI 展示，实际不可用
+- 测试账号密码均为 `1`，已预填在表单中
+- 忘记密码链接功能尚未实现
+
+## 组件依赖
+
+- 无外部组件库依赖，纯 Vue 3 组件
diff --git a/src/md/NoteEvaluationPage.md b/src/md/NoteEvaluationPage.md
new file mode 100644
index 0000000..50173e2
--- /dev/null
+++ b/src/md/NoteEvaluationPage.md
@@ -0,0 +1,210 @@
+# 笔记评优
+
+## 页面概述
+
+笔记评优页面用于查看和管理班级课程笔记的评价数据。页面采用左右分栏布局，左侧为日期选择和课程列表，右侧为朋友圈风格的笔记提交记录展示。教师可对学员笔记进行评优操作，包括选择图片、添加点评等。
+
+## 页面结构
+
+### 1. 页面标题区域
+- 返回按钮：触发 `go-back` 事件
+- 标题图标：笔记评优
+- 副标题：查看和管理班级课程笔记评价数据
+
+### 2. 标签页
+
+| Key | 标签名 | 状态 |
+|-----|--------|------|
+| `class1` | 爱学蝶变高一1班 | 已开发 |
+| `class2` | 爱学蝶变高一2班 | 开发中 |
+| `class3` | 爱学蝶变高一3班 | 开发中 |
+
+> 仅高一1班有完整功能，其余班级显示"功能开发中"占位
+
+### 3. 左侧面板（30%宽度）
+
+#### 日期选择器
+- 默认选中当天
+- 左右箭头切换日期（左箭头=下一天，右箭头=上一天）
+- 点击日期显示区域展开自定义日历选择器
+- 活动时间范围：过去30天至今天，禁止选择未来日期
+- 日历组件功能：月份切换、星期标题、日期网格、清除/今天/确定按钮
+- 点击外部区域自动关闭日历
+- 日期验证：不在活动范围内时显示错误提示
+
+#### 课程安排列表
+- 显示课程数量徽标
+- 课程卡片内容：节次名称、上课时间、科目名称、课程类型标签（预习/复习）、状态图标
+- 课程状态根据选中日期动态计算：
+  - 过去日期：全部"已上课"（绿色对勾）
+  - 未来日期：全部"未上课"（灰色时钟）
+  - 当天：第1~3节"已上课"，第4节"正在上课"（黄色播放图标+脉冲动画），第5~8节"未上课"
+- 点击课程卡片选中/取消选中
+- 选中状态：卡片高亮显示
+
+**课程数据**：
+
+| ID | 节次 | 时间 | 科目 | 类型 |
+|----|------|------|------|------|
+| 1 | 第1节 | 8:00-8:45 | 语文 | 预习 |
+| 2 | 第2节 | 8:55-9:40 | 数学 | 复习 |
+| 3 | 第3节 | 10:00-10:45 | 英语 | 预习 |
+| 4 | 第4节 | 10:55-11:40 | 物理 | 复习 |
+| 5 | 第5节 | 14:00-14:45 | 化学 | 预习 |
+| 6 | 第6节 | 14:55-15:40 | 生物 | 复习 |
+| 7 | 第7节 | 16:00-16:45 | 历史 | 预习 |
+| 8 | 第8节 | 16:55-17:40 | 地理 | 复习 |
+
+### 4. 右侧面板（70%宽度）
+
+#### 空状态
+- 未选择课程时显示
+- 提示：选择左侧课程卡片查看详情
+
+#### 笔记提交记录（选择课程后显示）
+
+**标题栏**：
+- 课程名称 - 笔记提交记录
+- 已交人数 / 筛选结果人数
+
+**筛选区域**：
+
+| 筛选项 | 组件 | 选项 |
+|--------|------|------|
+| 评优状态 | `a-radio-group` | 全部、已评优、未评优 |
+| 学生姓名 | `a-input` | 关键词搜索，支持清除 |
+
+- 有筛选条件时显示"清除筛选"按钮
+- 筛选条件变化时自动重置到第1页
+
+**笔记卡片（朋友圈风格）**：
+
+每条笔记包含以下区域：
+1. **评优标签**：已评优笔记顶部显示星形图标 + "优秀标记"
+2. **头像**：学员头像
+3. **姓名**：学员姓名
+4. **内容**：笔记文字描述
+5. **图片墙**：
+   - 布局规则：1张=`grid-1`，2或4张=`grid-2`，其他=`grid-3`
+   - 超过9张图片时只显示前9张，第9格显示"+N 查看全部"遮罩
+   - 未评优状态下：左上角显示勾选圆圈，点击切换图片选中状态
+   - 已评优状态下：图片锁定，不可取消选中
+   - 选中逻辑：默认全选（`selectedImages` 为空时所有图片视为选中）
+6. **评优操作栏**：
+   - 左侧：评优标签文字 + 已选图片数量提示
+   - 右侧：`a-switch` 开关（选中显示"优"，未选中显示"评"）
+7. **教师点评**：已评优笔记显示点评内容和时间
+8. **底部**：提交时间 + 点赞数/评论数（点击打开详情弹窗）
+
+**图片选择逻辑**：
+```
+toggleImageSelect(student, index):
+  - 已评优 → 不允许操作
+  - selectedImages 为空（全选状态）→ 取消该张，其余保留
+  - selectedImages 非空：
+    - 已选中 → 从列表移除
+    - 未选中 → 添加到列表，若全部选中则重置为空（全选）
+```
+
+### 5. 分页控件
+- 总记录数 / 当前页 / 总页数
+- 每页显示数量选择：10、20、50 条
+- 页码导航：首页、上一页、页码按钮、下一页、末页
+- 页码显示规则：总页数≤7时全部显示，否则使用省略号
+
+### 6. 灯箱（Lightbox）
+
+#### 功能说明
+- 全屏遮罩层，使用 `teleport` 渲染到 `body`
+- 图片居中显示，带切换动画
+- 图片计数器：`当前索引 + 1 / 总数`
+- 左右箭头切换图片（循环）
+- 底部缩略图条：当前图片高亮，已选中图片带勾选标记
+- 未评优状态下：灯箱内显示"选择此图/已选中"按钮，缩略图支持勾选
+
+#### 键盘快捷键
+
+| 快捷键 | 功能 |
+|--------|------|
+| `ArrowLeft` | 上一张图片 |
+| `ArrowRight` | 下一张图片 |
+| `Escape` | 关闭灯箱 |
+
+### 7. 详情弹窗
+
+#### 功能说明
+- `a-modal` 弹窗，宽度 520px，居中显示
+- 头部：学员头像、姓名、提交时间、优秀笔记标签
+- 笔记内容文字
+- 点赞区：点赞数量 + 点赞者列表（头像+姓名）
+- 评论区：评论数量 + 评论列表（头像+姓名+内容+时间）
+- 无数据时显示"暂无点赞"/"暂无评论"
+
+### 8. 评优模态框
+
+#### 功能说明
+- 开启评优时弹出（`a-switch` 切换为 `true`）
+- 使用 `teleport` 渲染到 `body`
+- 标题：评为优秀笔记
+- 副标题：为 XXX 的笔记添加点评
+
+#### 内容区域
+1. **已选图片预览**：最多显示4张缩略图，超过4张显示"+N"
+2. **点评内容输入**：
+   - `a-textarea`，4行，最大200字，带字数统计
+   - 必填项，校验失败时显示红色错误提示
+   - 占位符：请输入对该笔记的点评内容
+
+#### 操作按钮
+- 取消：关闭模态框，不保存
+- 确认评优：校验点评内容，通过后设置评优状态
+
+#### 评优确认逻辑
+```
+confirmExcellent():
+  1. 校验点评内容不为空
+  2. 设置 student.isExcellent = true
+  3. 设置 student.excellentComment = 输入的点评
+  4. 设置 student.excellentTime = 当前时间（HH:mm）
+  5. 关闭模态框
+```
+
+### 9. 取消评优确认对话框
+
+#### 功能说明
+- 取消评优时弹出（`a-switch` 切换为 `false`）
+- 使用 `teleport` 渲染到 `body`
+- 警告图标 + 标题"确认取消评优？"
+- 说明文字：取消后优秀标记及点评内容将被清除，此操作不可撤销
+- 操作按钮：
+  - 再想想：关闭对话框
+  - 确认取消：执行取消评优操作
+
+#### 取消评优逻辑
+```
+doRemoveExcellent():
+  1. 设置 student.isExcellent = false
+  2. 清空 student.excellentComment
+  3. 清空 student.excellentTime
+  4. 关闭对话框
+```
+
+## 事件说明
+
+| 事件名 | 触发时机 | 参数 |
+|--------|----------|------|
+| `go-back` | 点击返回按钮 | 无 |
+
+## 数据说明
+
+- 模拟数据：100名学生，每名有1~8张随机图片
+- 每7名学生中有1名预设为已评优状态
+- 点赞和评论数据随机生成
+- 头像使用 `api.dicebear.com` 生成
+- 图片使用 `picsum.photos` 生成
+
+## 组件依赖
+
+- Ant Design Vue（`a-tabs`、`a-tab-pane`、`a-row`、`a-col`、`a-radio-group`、`a-input`、`a-switch`、`a-textarea`、`a-select`、`a-modal`）
+- @ant-design/icons-vue（`CaretLeftOutlined`、`CaretRightOutlined`、`StarFilled`）
+- dayjs（日期处理）
diff --git a/src/md/PortalHomePage.md b/src/md/PortalHomePage.md
new file mode 100644
index 0000000..595aedf
--- /dev/null
+++ b/src/md/PortalHomePage.md
@@ -0,0 +1,96 @@
+# 门户首页
+
+## 页面概述
+
+门户首页是用户登录后的主入口页面，展示系统的主要功能模块。页面分为两大模块区域：双师课堂和爱学蝶变，每个模块以卡片形式展示功能入口。
+
+## 页面结构
+
+### 1. 顶部导航栏
+- 高度 60px，毛玻璃效果（`backdrop-filter: blur(20px)`）
+- 粘性定位（`position: sticky`），始终置顶
+- 左侧：Logo 图标（来源于 `../Assets/logo.png`）
+- 右侧：用户信息区域
+  - 用户头像：蓝色渐变圆角矩形，显示姓氏首字"杨"
+  - 用户名：显示"杨某某"
+  - 下拉箭头：悬停时旋转180度
+  - 悬停效果：背景变为浅蓝色
+
+#### 用户下拉菜单
+- 鼠标移入用户信息区域时显示
+- 菜单项：退出登录（带图标）
+- 悬停效果：背景渐变，文字变蓝
+- 过渡动画：`dropdown` 动画（淡入 + 上移 + 缩放）
+- 点击"退出登录"：触发 `logout` 事件
+
+### 2. 主内容区
+
+#### 双师课堂模块
+- 模块标识：蓝色圆点 + "双师课堂"标题
+- 功能卡片：
+
+| 卡片ID | 名称 | 图标颜色 | 点击行为 |
+|--------|------|----------|----------|
+| `schedule` | 课表管理 | 蓝色 `#1677ff` | 弹出提示框"跳转之前的课表管理界面" |
+
+#### 爱学蝶变模块
+- 模块标识：紫色圆点 + "爱学蝶变"标题
+- 功能卡片：
+
+| 卡片ID | 名称 | 图标颜色 | 点击行为 |
+|--------|------|----------|----------|
+| `schedule2` | 课表管理 | 蓝色 `#1677ff` | 弹出提示框，说明与双师课堂课表管理的差异 |
+| `notes` | 笔记评优 | 橙色 `#fa8c16` | 触发 `card-click` 事件，参数 `'note_evaluation'` |
+| `report` | 报告中心 | 绿色 `#52c41a` | 触发 `card-click` 事件，参数 `'report'` |
+
+#### 爱学蝶变课表管理与双师课堂课表管理的差异
+点击爱学蝶变的"课表管理"时，弹窗提示以下差异：
+1. 没有单双周功能
+2. 没有临时调课功能
+3. 新建课表没有创建科目信息这一步，默认九大科目：语文、数学、英语、物理、化学、生物、政治、历史、地理
+4. 增加课表的课程需要增加：预习、复习
+
+### 3. 底部版权
+- 内容：`Copyright © 2025 QuanXue. All Rights Reserved. 渝ICP备05088888号`
+
+### 4. 提示弹窗
+- 用于展示功能说明信息（如课表管理差异说明）
+- 点击遮罩层可关闭
+- 包含信息图标、消息文本和"确定"按钮
+
+## 交互逻辑
+
+### 卡片点击处理
+```
+handleCardClick(cardId):
+  - 'schedule'   → 显示提示弹窗"跳转之前的课表管理界面"
+  - 'schedule2'  → 显示提示弹窗，列出爱学蝶变课表管理的4项差异
+  - 'notes'      → 触发 card-click 事件，参数 'note_evaluation'
+  - 'report'     → 触发 card-click 事件，参数 'report'
+```
+
+### 退出登录
+```
+handleLogout():
+  1. 关闭下拉菜单
+  2. 触发 logout 事件
+```
+
+## 事件说明
+
+| 事件名 | 触发时机 | 参数 |
+|--------|----------|------|
+| `navigate` | 保留事件 | - |
+| `card-click` | 点击笔记评优或报告中心卡片 | `'note_evaluation'` 或 `'report'` |
+| `logout` | 点击退出登录 | 无 |
+
+## 页面样式
+
+- 整体背景：灰蓝渐变 `linear-gradient(165deg, #f5f7fc, #eef2fa, #e8ecf8)`
+- 模块区块：白色毛玻璃卡片，圆角20px，多层阴影
+- 功能卡片：白色渐变背景，圆角18px，悬停时边框变蓝、阴影加深
+- 最大内容宽度：1120px，居中显示
+
+## 组件依赖
+
+- 无外部组件库依赖，纯 Vue 3 组件
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..c533964
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,71 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeNav from '../components/HomeNav.vue'
+import LoginPage from '../components/LoginPage.vue'
+import MobilePrototypePage from '../components/MobilePrototypePage.vue'
+import NoteEvaluationPage from '../components/NoteEvaluationPage.vue'
+import HomePage from '../components/HomePage.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'HomeNav',
+    component: HomeNav
+  },
+  {
+    path: '/login',
+    name: 'LoginPage',
+    component: LoginPage
+  },
+  {
+    path: '/mb',
+    name: 'MobilePrototype',
+    component: MobilePrototypePage
+  },
+  {
+    path: '/admin',
+    name: 'Admin',
+    component: () => import('../components/PortalHomePage.vue')
+  },
+  {
+    path: '/admin-dashboard',
+    name: 'AdminDashboard',
+    component: () => import('../components/AdminDashboardPage.vue')
+  },
+  {
+    path: '/note-evaluation',
+    name: 'NoteEvaluation',
+    component: () => import('../components/NoteEvaluationPage.vue')
+  },
+  {
+    path: '/report-home',
+    name: 'ReportHome',
+    component: () => import('../components/HomePage.vue')
+  },
+  {
+    path: '/cloud-school-report',
+    name: 'CloudSchoolReport',
+    component: () => import('../components/CloudSchoolReport.vue')
+  },
+  {
+    path: '/learning-behavior-report',
+    name: 'LearningBehaviorReport',
+    component: () => import('../components/LearningBehaviorReport.vue')
+  },
+  {
+    path: '/leaderboard',
+    name: 'Leaderboard',
+    component: () => import('../components/LeaderboardPage.vue')
+  },
+  {
+    path: '/english-word-report',
+    name: 'EnglishWordReport',
+    component: () => import('../components/EnglishWordReport.vue')
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router
diff --git a/styles_patch.css b/styles_patch.css
new file mode 100644
index 0000000..95ea24b
--- /dev/null
+++ b/styles_patch.css
@@ -0,0 +1,31 @@
+/* 
+ * 将以下样式添加到 src/components/CloudSchoolReport.vue 的 <style scoped> 标签中
+ * 位置：在 :::deep(.ant-table-cell) 样式之后，@media 查询之前
+ */
+
+/* 列拖拽样式 */
+:::deep(.ant-table-thead > tr > th) {
+  cursor: move;
+  user-select: none;
+  transition: all 0.2s ease;
+}
+
+:::deep(.ant-table-thead > tr > th:hover) {
+  background: #e6f7ff !important;
+}
+
+.sortable-ghost {
+  opacity: 0.4;
+  background: #f0f0f0 !important;
+}
+
+.sortable-chosen {
+  background: #e6f7ff !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.sortable-drag {
+  opacity: 0.8;
+  background: #fff !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..afe383f
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  assetsInclude: ['**/*.md'],
+  server: {
+    port: 3000,
+    open: true
+  }
+})