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

IntMainJhy

77人浏览 · 2026-07-05 22:46:29

IntMainJhy · 2026-07-05 22:46:29 发布

【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 和用户状态；
统计卡片展示关键数据；
今日目标展示学习进度；
学习数据展示更细的行为指标；
设置和反馈入口提供管理能力。

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

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

卡片构建函数：

@Builder
buildStatCard(
  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 {
  const stats = AppState.challengeStats
  if (stats.totalQuestions === 0) return '—'
  const rate: number =
    Math.round((stats.totalCorrect / stats.totalQuestions) * 100)
  return rate + '%'
}

这里用到的数据是：

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：报告项的统一呈现

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

@Builder
buildDataRow(
  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 来说，端侧分析本身就是智能能力：

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

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

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

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

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

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

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

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

const stats = AppState.challengeStats
const data = AppState.studyData

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

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

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

场景	展示内容
桌面卡片	今日进度、连续学习
元服务	本周正确率、今日目标
平板页面	完整学习报告
实况窗结束态	本次挑战分数与用时