akmon/doc_zhipao/ANALYTICS_CHAIN_CALL_CONVERSION.md

Analytics 页面链式调用转换完成

📋 转换概述

成功将 pages/sport/teacher/analytics.uvue 页面的 RPC 调用从基于 supadb 组件的方式转换为链式调用方式。

🔄 主要变更

1. 移除组件依赖

<!-- 之前：使用 supadb 组件 -->
<supadb id="statisticsRef" ref="statisticsRef" rpc="get_teacher_analytics" :params="analyticsParams"
    @process-data="processStatisticsData" @error="handleError" />

<!-- 现在：无需组件，直接链式调用 -->
<template>
    <view class="analytics-container">
        <!-- Header -->

2. 引入 supa 实例

// 新增导入
import supa from '@/components/supadb/aksupainstance.uts'

3. 重构数据加载方法

之前：组件方式

const loadAnalyticsData = () => {
    loading.value = true
    error.value = null
    // 触发数据加载
    statisticsRef.value?.refresh()
    performersRef.value?.refresh()
    chartDataRef.value?.refresh()
}

现在：链式调用

const loadTeacherAnalytics = async () => {
    try {
        loading.value = true
        error.value = null
        
        const params = new UTSJSONObject()
        params.set('teacher_id', teacherId.value == 'current_teacher_id' ? null : teacherId.value)
        params.set('start_date', startDate.value || null)
        params.set('end_date', endDate.value || null)
        
        const result = await supa.from('').rpc('get_teacher_analytics', params).execute()
        
        if (result.error) {
            throw new Error(result.error.toString())
        }
        
        if (result.data) {
            statisticsData.value = [result.data]
            updateOverviewCards()
        }
    } catch (err: any) {
        console.error('获取教师统计数据失败:', err)
        error.value = `获取统计数据失败: ${err.message || err.toString()}`
    } finally {
        loading.value = false
    }
}

4. 并发数据加载

const loadAnalyticsData = async () => {
    loading.value = true
    error.value = null
    
    // 并发加载所有数据
    await Promise.all([
        loadTeacherAnalytics(),
        loadTopPerformers(),
        loadChartData(),
        loadRecentActivities()
    ])
    
    // 生成模拟性能分布数据
    generateMockData()
    loading.value = false
}

🎯 RPC 函数调用结构

教师统计数据

const result = await supa.from('').rpc('get_teacher_analytics', {
    teacher_id: null,
    start_date: '2024-06-01',
    end_date: '2024-06-12'
}).execute()

优秀学员排行

const result = await supa.from('').rpc('get_top_performers', {
    teacher_id: null,
    start_date: null,
    end_date: null,
    limit: 10
}).execute()

图表数据

const result = await supa.from('').rpc('get_chart_data', {
    teacher_id: null,
    start_date: null,
    end_date: null,
    type: 'completion_rate'
}).execute()

近期活动

const result = await supa.from('').rpc('get_recent_activities', {
    teacher_id: null,
    limit: 20
}).execute()

✅ 优势

1. 更好的控制 - 直接控制异步调用时机和错误处理
2. 并发加载 - 使用 Promise.all() 并发加载多个数据源
3. 简化代码 - 减少组件依赖和事件处理
4. 更好的错误处理 - 每个 RPC 调用都有独立的错误处理
5. 更灵活的参数传递 - 直接构建参数对象

🔧 参数管理简化

之前：多个参数对象

const analyticsParams = ref({
    teacher_id: 'current_teacher_id',
    start_date: '',
    end_date: ''
})
const performersParams = ref({
    teacher_id: 'current_teacher_id',
    limit: 10
})
const chartParams = ref({
    teacher_id: 'current_teacher_id',
    type: 'completion_rate'
})

现在：统一参数管理

const teacherId = ref('current_teacher_id')
const startDate = ref('')
const endDate = ref('')

// 在每个函数中按需构建参数
const params = new UTSJSONObject()
params.set('teacher_id', teacherId.value == 'current_teacher_id' ? null : teacherId.value)
params.set('start_date', startDate.value || null)
params.set('end_date', endDate.value || null)

🎨 容错处理

• 主要数据失败 - 显示错误信息给用户
• 次要数据失败 - 静默失败，使用模拟数据
• 活动数据失败 - 自动回退到模拟活动数据

📝 总结

链式调用转换成功完成！页面现在使用更现代的异步/等待模式，提供了：

• 更好的性能（并发加载）
• 更清晰的代码结构
• 更灵活的错误处理
• 更简洁的参数管理

页面功能保持不变，但底层实现更加高效和可维护。