akoo/akmon

Files

akoo 77a2bab985 Initial commit of akmon project

2026-01-20 08:04:15 +08:00

4.9 KiB

Raw Permalink Blame History

教师仪表板数据获取方式升级总结

改进概述

成功将教师仪表板(pages/sport/teacher/dashboard.uvue)的数据获取方式从老式的 supadb 组件模式升级为现代的 supa.executeAs() 直接调用模式，参考了 /pages/msg/ 下面页面的最佳实践。

主要改进

1. 移除旧式组件依赖

❌ 移除了 SupadbComponentPublicInstance 组件引用
❌ 移除了 statsRef 和 activitiesRef 组件引用
❌ 移除了基于组件 refresh() 方法的数据加载方式

2. 引入现代数据服务

✅ 引入 supa from '@/components/supadb/aksupainstance.uts'
✅ 引入 AkReqResponse 类型支持
✅ 使用直接的 supa.executeAs<T>() 调用方式

3. 类型安全改进

// 定义强类型的数据结构
type TeacherStats = {
    total_assignments: number
    completed_assignments: number
    pending_review: number
    total_students: number
}

type Activity = {
    id: string
    title: string
    description: string
    type: string
    created_at: string
    updated_at: string
}

4. 数据获取方法重构

教师统计数据获取

const loadTeacherStats = async (): Promise<void> => {
    // 获取作业统计
    const assignmentStatsResponse = await supa
        .from('ak_assignments')
        .select('id, status', {})
        .eq('teacher_id', currentUser)
        .executeAs<Array<{ id: string, status: string }>>()

    // 获取学生数量统计
    const studentStatsResponse = await supa
        .from('ak_users')
        .select('id', {})
        .eq('role', 'student')
        .executeAs<Array<{ id: string }>>()
}

5. 异步数据加载优化

✅ 使用 Promise.all() 并行加载多个数据源
✅ 统一的加载状态管理
✅ 完善的错误处理和重试机制

6. 用户体验改进

✅ 添加加载状态指示器
✅ 添加错误状态和重试功能
✅ 改进空状态显示
✅ 更好的数据访问函数（移除 UTSJSONObject 依赖）

7. 性能优化

✅ 移除不必要的 safeGet() 调用
✅ 直接访问强类型对象属性
✅ 减少运行时类型检查开销

代码对比

旧版本（组件模式）

// 组件引用
const statsRef = ref<SupadbComponentPublicInstance | null>(null)
const activitiesRef = ref<SupadbComponentPublicInstance | null>(null)

// 数据处理函数
const handleStatsData = (result: UTSJSONObject) => {
    const data = result.get('data')
    if (data != null && Array.isArray(data)) {
        stats.value = data[0] ?? new UTSJSONObject()
    }
}

// 数据加载
const loadDashboardData = () => {
    if (statsRef.value != null) {
        const strefresh = statsRef.value?.refresh
        strefresh?.()
    }
}

新版本（直接调用模式）

// 直接数据服务调用
const loadTeacherStats = async (): Promise<void> => {
    const response = await supa
        .from('ak_assignments')
        .select('id, status', {})
        .eq('teacher_id', currentUser)
        .executeAs<Array<{ id: string, status: string }>>()
        
    if (response.status >= 200 && response.status < 300 && response.data) {
        // 直接处理强类型数据
        stats.value.total_assignments = response.data.length
    }
}

// 异步并行加载
const loadDashboardData = async (): Promise<void> => {
    await Promise.all([
        loadTeacherStats(),
        loadRecentActivities(),
        loadMessageStats()
    ])
}

优势

类型安全: 编译时类型检查，减少运行时错误
性能更好: 直接数据访问，无组件封装开销
代码更清晰: 移除 UTSJSONObject 依赖，代码更易读
错误处理: 统一的异常处理和用户反馈
可维护性: 强类型定义，IDE 支持更好
一致性: 与消息系统等现代模块保持一致的架构

兼容性

✅ uni-app-x 完全兼容
✅ Android 平台测试通过
✅ 类型系统完全支持
✅ 与现有消息系统架构一致

后续建议

考虑将学生仪表板也升级为相同的模式
统一项目中所有数据获取方式
考虑添加数据缓存机制以提升性能
进一步优化数据库查询性能

总结

此次升级成功实现了教师仪表板的现代化改造，不仅提升了代码质量和性能，还为后续的功能扩展奠定了良好的基础。新的架构模式与项目中的消息系统保持一致，有助于维护代码的一致性和可维护性。

4.9 KiB Raw Permalink Blame History Unescape Escape