akmon/doc_zhipao/dashboard_loading_fix_guide.md

Dashboard 首次加载问题解决方案 - 简化版

问题描述

教师仪表板首次进入时出现"一直加载中"的问题，用户界面卡在loading状态无法进入正常页面。

问题分析

经过代码分析，发现之前使用了过度复杂的Promise.all和Promise.race机制，实际上对于简单的数据加载场景没有必要。

主要问题：

1. 用户未登录 - 如果getCurrentUserId()返回空值，所有数据加载函数都提前返回
2. 过度复杂的异步逻辑 - Promise.all + Promise.race + 超时控制，增加了出错概率
3. 类型推断问题 - UTS环境下复杂的Promise类型容易出错

解决方案

简化加载逻辑

const loadDashboardData = async (): Promise<void> => {
    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和函数执行状态

const loadTeacherStats = async (): Promise<void> => {
    const currentUser = getCurrentUserId()
    if (currentUser == null || currentUser == '') {
        // 设置默认值后返回，Promise正常resolve
        stats.value = { /* 默认值 */ } as TeacherStats
        return
    }
    // 正常的数据加载逻辑...
}

调试工具

保留了两个调试按钮：

• 测试连接 - 验证Supabase数据库连接
• 测试Promise - 验证Promise机制是否正常工作

使用建议

1. 首先检查控制台日志 - 查看是否显示"用户未登录"
2. 使用调试工具 - 点击测试按钮验证基础功能
3. 观察加载过程 - 日志会显示每个步骤的执行情况

优势

• 简单可靠 - 去除了复杂的Promise控制逻辑
• 易于调试 - 顺序执行，问题更容易定位
• 类型安全 - 避免了复杂Promise类型推断问题
• 健壮性 - 保留了防死锁和错误处理机制

性能说明

虽然改为顺序加载，但由于每个请求都比较轻量（特别是使用HEAD请求的统计查询），总的加载时间差异不大，而稳定性和可维护性大幅提升。