# Dashboard 首次加载问题解决方案 - 简化版 ## 问题描述 教师仪表板首次进入时出现"一直加载中"的问题,用户界面卡在loading状态无法进入正常页面。 ## 问题分析 经过代码分析,发现之前使用了过度复杂的Promise.all和Promise.race机制,实际上对于简单的数据加载场景没有必要。 主要问题: 1. **用户未登录** - 如果getCurrentUserId()返回空值,所有数据加载函数都提前返回 2. **过度复杂的异步逻辑** - Promise.all + Promise.race + 超时控制,增加了出错概率 3. **类型推断问题** - UTS环境下复杂的Promise类型容易出错 ## 解决方案 ### 简化加载逻辑 ```typescript const loadDashboardData = async (): Promise => { if (loading.value) return loading.value = true // 防死锁定时器 const forceStopTimer = setTimeout(() => { loading.value = false }, 45000) try { // 简单的顺序加载 await loadTeacherStats() await loadRecentActivities() await loadMessageStats() } catch (err) { error.value = '数据加载失败,请重试' } finally { clearTimeout(forceStopTimer) loading.value = false } } ``` ### 核心改进 1. **去除复杂Promise逻辑** - 不再使用Promise.all和Promise.race 2. **顺序加载** - 简单的await序列,逻辑清晰 3. **保留防死锁机制** - 45秒强制停止loading 4. **增强日志** - 每个函数都有详细的执行日志 ### 各个数据加载函数的改进 每个函数都确保: - 用户未登录时设置默认值并正常返回 - 有明确的Promise返回类型 - 详细的日志输出,包括用户ID和函数执行状态 ```typescript const loadTeacherStats = async (): Promise => { const currentUser = getCurrentUserId() if (currentUser == null || currentUser == '') { // 设置默认值后返回,Promise正常resolve stats.value = { /* 默认值 */ } as TeacherStats return } // 正常的数据加载逻辑... } ``` ## 调试工具 保留了两个调试按钮: - **测试连接** - 验证Supabase数据库连接 - **测试Promise** - 验证Promise机制是否正常工作 ## 使用建议 1. **首先检查控制台日志** - 查看是否显示"用户未登录" 2. **使用调试工具** - 点击测试按钮验证基础功能 3. **观察加载过程** - 日志会显示每个步骤的执行情况 ## 优势 - **简单可靠** - 去除了复杂的Promise控制逻辑 - **易于调试** - 顺序执行,问题更容易定位 - **类型安全** - 避免了复杂Promise类型推断问题 - **健壮性** - 保留了防死锁和错误处理机制 ## 性能说明 虽然改为顺序加载,但由于每个请求都比较轻量(特别是使用HEAD请求的统计查询),总的加载时间差异不大,而稳定性和可维护性大幅提升。