forked from wangziqi/gongxue-base
feat: add student learning report dashboard
This commit is contained in:
Codex
@@ -3,17 +3,86 @@ import Taro from '@tarojs/taro';
|
||||
import { Button, Input, Text, View } from '@tarojs/components';
|
||||
import { logout } from '@/services/auth';
|
||||
import { checkActivationCode, loadEntitlements, loadOrders, loadSvipPlans, redeemActivationCode, type OrderItem, type SvipPlan } from '@/services/commerce';
|
||||
import { loadLeaderboard } from '@/services/learning';
|
||||
import {
|
||||
loadLeaderboard,
|
||||
loadLearningStats,
|
||||
loadLearningTrend,
|
||||
loadPracticeHistory,
|
||||
type LeaderboardItem,
|
||||
type LearningStats,
|
||||
type LearningTrendItem,
|
||||
type PracticeHistoryItem,
|
||||
} from '@/services/learning';
|
||||
import { checkIn, loadBadges, loadExamCountdowns, loadProfile, type StudentProfile } from '@/services/profile';
|
||||
import '../student.css';
|
||||
|
||||
function percent(value?: number | null) {
|
||||
return `${Math.round((value || 0) * 100)}%`;
|
||||
}
|
||||
|
||||
function shortDate(value?: string | null) {
|
||||
if (!value) return '';
|
||||
return value.slice(5, 10);
|
||||
}
|
||||
|
||||
function dateText(value?: string | null) {
|
||||
if (!value) return '暂无记录';
|
||||
return value.slice(0, 10);
|
||||
}
|
||||
|
||||
function practiceTitle(item: PracticeHistoryItem) {
|
||||
return item.blueprintName || item.collectionName || item.contentNodeName || item.entryName || modeLabel(item.mode);
|
||||
}
|
||||
|
||||
function modeLabel(mode?: string | null) {
|
||||
const normalized = String(mode || '');
|
||||
if (normalized === 'mock_exam') return '全真模拟';
|
||||
if (normalized === 'random') return '随机练习';
|
||||
if (normalized === 'wrong_review') return '错题复习';
|
||||
if (normalized === 'favorites') return '收藏练习';
|
||||
return '顺序练习';
|
||||
}
|
||||
|
||||
function maxTrendAnswers(items: LearningTrendItem[]) {
|
||||
return Math.max(1, ...items.map(item => item.answeredCount || 0));
|
||||
}
|
||||
|
||||
function trendBucket(value: number, maxValue: number) {
|
||||
if (value <= 0) return 'h-bucket-0';
|
||||
const ratio = maxValue ? value / maxValue : 0;
|
||||
const bucket = Math.max(1, Math.min(12, Math.ceil(ratio * 12)));
|
||||
return `h-bucket-${bucket}`;
|
||||
}
|
||||
|
||||
function progressBucket(value: number) {
|
||||
const ratio = Math.max(0, Math.min(1, value || 0));
|
||||
const bucket = Math.max(0, Math.min(10, Math.round(ratio * 10)));
|
||||
return `w-bucket-${bucket}`;
|
||||
}
|
||||
|
||||
function sessionStatusLabel(status?: string | null) {
|
||||
if (status === 'active') return '进行中';
|
||||
if (status === 'expired') return '已过期';
|
||||
return '已完成';
|
||||
}
|
||||
|
||||
function sessionStatusClass(status?: string | null) {
|
||||
if (status === 'active') return 'warning';
|
||||
if (status === 'expired') return 'danger';
|
||||
return '';
|
||||
}
|
||||
|
||||
export default function StudentProfilePage() {
|
||||
const [profile, setProfile] = useState<StudentProfile | null>(null);
|
||||
const [plans, setPlans] = useState<SvipPlan[]>([]);
|
||||
const [orders, setOrders] = useState<OrderItem[]>([]);
|
||||
const [badges, setBadges] = useState<Record<string, unknown>[]>([]);
|
||||
const [countdowns, setCountdowns] = useState<Record<string, unknown>[]>([]);
|
||||
const [leaderboard, setLeaderboard] = useState<Record<string, unknown>[]>([]);
|
||||
const [leaderboard, setLeaderboard] = useState<LeaderboardItem[]>([]);
|
||||
const [currentRank, setCurrentRank] = useState<LeaderboardItem | null>(null);
|
||||
const [learningStats, setLearningStats] = useState<LearningStats | null>(null);
|
||||
const [learningTrend, setLearningTrend] = useState<LearningTrendItem[]>([]);
|
||||
const [practiceHistory, setPracticeHistory] = useState<PracticeHistoryItem[]>([]);
|
||||
const [activationCode, setActivationCode] = useState('');
|
||||
const [message, setMessage] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
@@ -25,15 +94,32 @@ export default function StudentProfilePage() {
|
||||
loadOrders().catch(() => ({ items: [] })),
|
||||
loadBadges().catch(() => ({ items: [] })),
|
||||
loadExamCountdowns().catch(() => ({ items: [] })),
|
||||
loadLeaderboard('questions').catch(() => ({ items: [] })),
|
||||
loadLeaderboard('questions').catch(() => ({ items: [], currentUser: null })),
|
||||
loadLearningStats(30).catch(() => ({ item: undefined })),
|
||||
loadLearningTrend(14).catch(() => ({ items: [] })),
|
||||
loadPracticeHistory({ limit: 6 }).catch(() => ({ items: [] })),
|
||||
loadEntitlements().catch(() => ({ summary: {} })),
|
||||
]).then(([profilePayload, planPayload, orderPayload, badgePayload, countdownPayload, leaderboardPayload]) => {
|
||||
]).then(([
|
||||
profilePayload,
|
||||
planPayload,
|
||||
orderPayload,
|
||||
badgePayload,
|
||||
countdownPayload,
|
||||
leaderboardPayload,
|
||||
statsPayload,
|
||||
trendPayload,
|
||||
historyPayload,
|
||||
]) => {
|
||||
setProfile(profilePayload.item || null);
|
||||
setPlans(planPayload.items || []);
|
||||
setOrders(orderPayload.items || []);
|
||||
setBadges(badgePayload.items || []);
|
||||
setCountdowns(countdownPayload.items || []);
|
||||
setLeaderboard(leaderboardPayload.items || []);
|
||||
setCurrentRank(leaderboardPayload.currentUser || null);
|
||||
setLearningStats(statsPayload.item || null);
|
||||
setLearningTrend(trendPayload.items || []);
|
||||
setPracticeHistory(historyPayload.items || []);
|
||||
}).catch(nextError => setError(nextError instanceof Error ? nextError.message : '个人中心加载失败'));
|
||||
}
|
||||
|
||||
@@ -68,6 +154,14 @@ export default function StudentProfilePage() {
|
||||
Taro.redirectTo({ url: '/pages/student/login/index' });
|
||||
}
|
||||
|
||||
const maxAnswers = maxTrendAnswers(learningTrend);
|
||||
const answerStats = learningStats?.answers;
|
||||
const reportStats = learningStats?.reports;
|
||||
const wrongBook = learningStats?.wrongBook;
|
||||
const favoriteStats = learningStats?.favorites;
|
||||
const questionTypes = learningStats?.questionTypes || [];
|
||||
const bestPlan = plans[0];
|
||||
|
||||
return (
|
||||
<View className='student-page'>
|
||||
<View className='student-topbar'>
|
||||
@@ -80,10 +174,104 @@ export default function StudentProfilePage() {
|
||||
</View>
|
||||
|
||||
<View className='grid-two'>
|
||||
<View className='metric'><Text className='metric-value'>{String((profile?.stats?.answers as Record<string, unknown> | undefined)?.totalAnswered ?? 0)}</Text><Text className='metric-label'>累计答题</Text></View>
|
||||
<View className='metric'><Text className='metric-value'>{String(answerStats?.totalAnswered ?? (profile?.stats?.answers as Record<string, unknown> | undefined)?.totalAnswered ?? 0)}</Text><Text className='metric-label'>累计答题</Text></View>
|
||||
<View className='metric'><Text className='metric-value'>{String((profile?.stats?.vocabulary as Record<string, unknown> | undefined)?.masteredWords ?? 0)}</Text><Text className='metric-label'>掌握单词</Text></View>
|
||||
</View>
|
||||
|
||||
<View className='section-block'>
|
||||
<Text className='section-heading'>学习报告</Text>
|
||||
<View className='report-panel learning-report-panel'>
|
||||
<View className='grid-two'>
|
||||
<View className='metric compact-metric'>
|
||||
<Text className='metric-value'>{percent(answerStats?.accuracy)}</Text>
|
||||
<Text className='metric-label'>累计正确率</Text>
|
||||
</View>
|
||||
<View className='metric compact-metric'>
|
||||
<Text className='metric-value'>{String(answerStats?.todayAnswered ?? 0)}</Text>
|
||||
<Text className='metric-label'>今日答题</Text>
|
||||
</View>
|
||||
<View className='metric compact-metric'>
|
||||
<Text className='metric-value'>{String(wrongBook?.unresolvedWrong ?? 0)}</Text>
|
||||
<Text className='metric-label'>待解决错题</Text>
|
||||
</View>
|
||||
<View className='metric compact-metric'>
|
||||
<Text className='metric-value'>{String(reportStats?.bestScore ?? 0)}</Text>
|
||||
<Text className='metric-label'>模考/练习最高分</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text className='row-meta report-summary-line'>
|
||||
近 {String(learningStats?.windowDays || 30)} 天题型统计 · 最近答题 {dateText(answerStats?.latestAnsweredAt)} · 已完成报告 {String(reportStats?.reportCount || 0)} 份
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className='section-block'>
|
||||
<Text className='section-heading'>14 天趋势</Text>
|
||||
{learningTrend.length ? (
|
||||
<View className='trend-chart'>
|
||||
{learningTrend.map(item => {
|
||||
return (
|
||||
<View className='trend-column' key={item.date}>
|
||||
<Text className='trend-value'>{String(item.answeredCount || 0)}</Text>
|
||||
<View className='trend-bar-track'>
|
||||
<View className={`trend-bar-fill ${trendBucket(item.answeredCount || 0, maxAnswers)}`} />
|
||||
</View>
|
||||
<Text className='trend-label'>{shortDate(item.date)}</Text>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
) : <View className='empty-state'>暂无趋势数据，完成练习后会自动生成。</View>}
|
||||
</View>
|
||||
|
||||
<View className='section-block'>
|
||||
<Text className='section-heading'>题型表现</Text>
|
||||
{questionTypes.length ? (
|
||||
<View className='list-stack'>
|
||||
{questionTypes.slice(0, 6).map(item => (
|
||||
<View className='list-row' key={item.questionType}>
|
||||
<View className='split-row'>
|
||||
<Text className='row-main'>{item.typeLabel || item.questionType}</Text>
|
||||
<Text className='status-badge'>{percent(item.accuracy)}</Text>
|
||||
</View>
|
||||
<Text className='row-meta'>已答 {String(item.answeredCount)} · 正确 {String(item.correctCount)} · 错误 {String(item.wrongCount)}</Text>
|
||||
<View className='progress-track'>
|
||||
<View className={`progress-fill ${progressBucket(item.accuracy)}`} />
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
) : <View className='empty-state'>暂无题型统计，开始刷题后这里会显示强弱项。</View>}
|
||||
</View>
|
||||
|
||||
<View className='section-block'>
|
||||
<Text className='section-heading'>最近练习</Text>
|
||||
{practiceHistory.length ? (
|
||||
<View className='list-stack'>
|
||||
{practiceHistory.map(item => (
|
||||
<View className='list-row' key={item.id}>
|
||||
<View className='split-row'>
|
||||
<Text className='row-main'>{practiceTitle(item)}</Text>
|
||||
<Text className={`status-badge ${sessionStatusClass(item.status)}`}>{sessionStatusLabel(item.status)}</Text>
|
||||
</View>
|
||||
<Text className='row-meta'>
|
||||
{modeLabel(item.mode)} · 已答 {String(item.answeredCount || 0)} / {String(item.questionCount || 0)} · 正确率 {percent(item.accuracy)}
|
||||
</Text>
|
||||
<Text className='row-meta'>开始 {dateText(item.startedAt)}{item.submittedAt ? ` · 交卷 ${dateText(item.submittedAt)}` : ''}</Text>
|
||||
<View className='toolbar compact-toolbar'>
|
||||
{item.status === 'active' ? (
|
||||
<Button className='primary-button' onClick={() => Taro.navigateTo({ url: `/pages/student/practice/index?practiceSessionId=${item.id}` })}>继续</Button>
|
||||
) : null}
|
||||
{item.reportId ? (
|
||||
<Button className='secondary-button' onClick={() => Taro.navigateTo({ url: `/pages/student/reports/index?practiceSessionId=${item.id}` })}>报告</Button>
|
||||
) : null}
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
) : <View className='empty-state'>还没有练习历史，可以先从题库入口开始。</View>}
|
||||
</View>
|
||||
|
||||
<View className='section-block'>
|
||||
<Text className='section-heading'>目标与考试</Text>
|
||||
<View className='list-stack'>
|
||||
@@ -117,7 +305,7 @@ export default function StudentProfilePage() {
|
||||
))}
|
||||
</View>
|
||||
<View className='toolbar wrap'>
|
||||
<Button className='primary-button' onClick={() => Taro.navigateTo({ url: `/pages/student/checkout/index${profile?.target?.regionId ? `?regionId=${encodeURIComponent(profile.target.regionId)}` : ''}` })}>开通会员</Button>
|
||||
<Button className='primary-button' onClick={() => Taro.navigateTo({ url: `/pages/student/checkout/index${bestPlan?.id ? `?planId=${encodeURIComponent(bestPlan.id)}` : profile?.target?.regionId ? `?regionId=${encodeURIComponent(profile.target.regionId)}` : ''}` })}>开通会员</Button>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@@ -142,14 +330,16 @@ export default function StudentProfilePage() {
|
||||
</View>
|
||||
|
||||
<View className='section-block'>
|
||||
<Text className='section-heading'>运营数据</Text>
|
||||
<Text className='section-heading'>成长数据</Text>
|
||||
<View className='toolbar'>
|
||||
<Button className='primary-button' onClick={handleCheckIn}>签到</Button>
|
||||
<Button className='secondary-button' onClick={() => Taro.navigateTo({ url: '/pages/student/catalog/index' })}>刷题</Button>
|
||||
</View>
|
||||
<View className='grid-two'>
|
||||
<View className='metric'><Text className='metric-value'>{String(badges.length)}</Text><Text className='metric-label'>勋章</Text></View>
|
||||
<View className='metric'><Text className='metric-value'>{String(leaderboard.length)}</Text><Text className='metric-label'>排行榜样本</Text></View>
|
||||
<View className='metric'><Text className='metric-value'>{currentRank ? `第${String(currentRank.rank)}` : String(leaderboard.length)}</Text><Text className='metric-label'>{currentRank ? `7 日答题榜 · ${String(currentRank.value)} 题` : '排行榜样本'}</Text></View>
|
||||
<View className='metric'><Text className='metric-value'>{String(favoriteStats?.favoriteQuestions ?? 0)}</Text><Text className='metric-label'>收藏题目</Text></View>
|
||||
<View className='metric'><Text className='metric-value'>{percent(reportStats?.avgAccuracy)}</Text><Text className='metric-label'>报告平均正确率</Text></View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user