企业官网建设流程全解析

【OpenHarmony/HarmonyOs 】数学学习报告页：本地统计卡片、正确率与隐私友好学习画像

项目类型：OpenHarmony / HarmonyOS ArkTS 数学学习应用
项目名称：数学视界
对应主题：端侧 AI、隐私保护方案、全场景智慧生活
关键词：ArkTS、学习报告、本地统计、正确率、学习画像、隐私保护 📊

一、为什么学习报告页要本地化？

学习报告很有价值，但也很敏感。它可能包含：

• 学习天数；
• 连续学习记录；
• 挑战次数；
• 正确率；
• 计算次数；
• 公式浏览；
• 学习时长；
• 历史最高分；
• 答题数量。

这些数据能够反映用户的学习习惯和薄弱环节。如果每次生成报告都上传到服务器，就会带来隐私风险。

数学视界项目选择的是本地统计：所有报告数据都来自AppState，在端侧生成，在本地展示。

二、我的页面：学习报告的入口

MyPage.ets中的页面结构如下：

build() { Stack() { Scroll() { Column() {this.buildHeader()this.buildStatsCards()this.buildGoalSection()this.buildDataSection()this.buildSettingsSection()this.buildFeedbackSection()this.buildVersionInfo() } } } }

可以看到，“我的”页面不仅是设置页，也承担了学习报告功能：

• 顶部展示 App 和用户状态；
• 统计卡片展示关键数据；
• 今日目标展示学习进度；
• 学习数据展示更细的行为指标；
• 设置和反馈入口提供管理能力。

三、统计卡片：让用户快速看到学习状态

统计卡片包括学习天数、连续学习、挑战次数、正确率、计算次数、公式浏览等。

卡片构建函数：

@BuilderbuildStatCard(emoji: string,label: string,value: string,bgColor: string,textColor: string ) { Column() { Text(emoji).fontSize(20) Text(value).fontSize(20).fontWeight(FontWeight.Bold).fontColor(textColor) Text(label).fontSize(11).fontColor(this.getColor('#95A5A6', '#888888')) } }

这种设计适合移动端：每张卡片只展示一个指标，用户扫一眼就能理解。

四、正确率：端侧统计，不上传答案

正确率通过挑战统计计算：

getAccuracyRate():string{conststats = AppState.challengeStatsif(stats.totalQuestions ===0)return'—'constrate:number= Math.round((stats.totalCorrect / stats.totalQuestions) *100)returnrate +'%'}

这里用到的数据是：

• totalCorrect：累计正确题数；
• totalQuestions：累计答题数。

它不需要把每道题上传到云端，只要本地累计即可生成整体正确率。

五、学习数据区：从工具行为到学习画像

学习数据区展示更细指标：

this.buildDataRow('🧩','趣味百科已读', AppState.studyData.funFactsViewed +' 篇','#EBF5FF','#3498DB')this.buildDataRow('📐','单位换算次数', AppState.studyData.totalUnitsConverted +' 次','#F5EEF8','#9B59B6')this.buildDataRow('⏱️','累计学习时长',this.formatTotalTime(AppState.challengeStats.totalTimeSpent),'#FEF9E7','#E67E22')this.buildDataRow('🏆','历史最高分', AppState.challengeStats.bestScore >0? AppState.challengeStats.bestScore +' 分':'—','#EAFAF1','#2ECC71')this.buildDataRow('🔢','累计答题数', AppState.challengeStats.totalQuestions +' 题','#FDECEA','#E74C3C')

这些指标把不同模块串起来：

• 趣味百科阅读；
• 单位换算；
• 挑战答题；
• 学习时长；
• 历史最高分。

也就是说，报告页不是单一题库报表，而是整个数学学习行为的总览。

六、DataRow：报告项的统一呈现

每一行学习数据通过统一组件展示：

@BuilderbuildDataRow(emoji: string,label: string,value: string,bgColor: string,accentColor: string ) { Row() { Text(emoji).fontSize(16).width(32) Text(label).fontSize(14).fontColor(this.getColor('#34495E', '#FFFFFF')).flexGrow(1) Text(value).fontSize(13).fontWeight(FontWeight.Medium).fontColor(accentColor) } }

统一组件的好处是：

• 后续新增指标很方便；
• 视觉风格保持一致；
• 深色模式适配集中处理；
• 数据项不会显得杂乱。

七、学习报告和端侧 AI 的关系

“端侧 AI”不一定等于大模型。对学习 App 来说，端侧分析本身就是智能能力：

• 计算正确率；
• 统计学习时长；
• 分析连续学习；
• 判断目标是否完成；
• 识别最近学习行为；
• 生成学习建议。

例如可以基于正确率生成建议：

functionbuildReportSuggestion(rate: number): string {if(rate <60)return'建议优先复习错题和基础知识'if(rate <80)return'掌握不错，可以继续专项练习'return'表现优秀，可以尝试更高难度挑战'}

这类逻辑完全可以在本地完成，解释性也更强。

八、隐私保护：学习画像不出端

学习报告中最敏感的不是姓名，而是行为数据：

• 哪些题错了；
• 学习多久；
• 正确率多少；
• 有没有坚持；
• 哪些模块用得多。

数学视界当前通过AppState本地管理：

conststats = AppState.challengeStatsconstdata= AppState.studyData

报告页只是读取这些本地对象，不需要网络，也不需要用户登录。这样就能降低隐私风险。

九、全场景扩展：报告页可以拆成小卡片

学习报告很适合全场景展示，但不一定要展示完整页面。可以拆成轻量卡片：

这样不同设备看到的是不同粒度的数据，而不是简单复制页面。

十、总结

这篇文章围绕数学视界的学习报告页展开，重点是本地统计和隐私友好学习画像。

核心实现包括：

• 📊 用buildStatsCards()展示关键学习指标；
• 🎯 用getGoalProgress()展示今日目标进度；
• ✅ 用getAccuracyRate()计算整体正确率；
• 📈 用buildDataSection()汇总阅读、换算、答题、时长等数据；
• 🧩 用统一buildDataRow()保持报告项风格一致；
• 🔐 学习报告全部从本地AppState读取，不上传学习画像；
• 🚀 后续可扩展为桌面卡片、元服务和实况窗结束态。

学习报告不是为了制造焦虑，而是帮助用户看到自己的积累。对教育类 App 来说，本地化报告是一条更稳、更可信的路线。✨