背景
概览页(Overview.tsx)在桌面端会渲染「年度活动」热力图卡片(ActivityHeatmapCard + Heatmap.tsx),展示过去 365 天每日听写次数。数据通过 getActivityStats() 独立拉取,与历史保留策略解耦。
当前实现未区分移动端:只要 prefs.showOverviewActivityHeatmap !== false 且活动数据非空,就会在概览页渲染该模块。
问题
在 Android / 窄屏移动端(useMobileLayout())上:
- 性能负担较大:365 格热力图 + Intl 标签计算 + 独立 IPC 请求,对移动 WebView 不必要。
- 布局副作用:热力图横向宽度固定(约 53 周列),在窄屏下容易撑开内容区或产生横向溢出,进而影响整体布局;实测会导致底边栏宽度/对齐异常。
桌面端保留该模块即可;移动端应默认隐藏(或后续再提供轻量替代)。
相关代码
openless-all/app/src/pages/Overview.tsx — getActivityStats() 与 ActivityHeatmapCard 渲染条件(约 L78–210)
openless-all/app/src/components/Heatmap.tsx — 热力图组件
openless-all/app/src/lib/useMobileLayout.ts — 移动端判定(android OS 或 innerWidth < 720)
- 设置开关:
prefs.showOverviewActivityHeatmap(ThemeSection.tsx)
建议方案
- 在
Overview.tsx 中当 mobile === true 时跳过活动数据请求与 ActivityHeatmapCard 渲染;
- 或在
useMobileLayout() 为真时直接不 mount 热力图(避免无意义的 IPC);
- 桌面端行为与设置项保持不变。
验收
背景
概览页(
Overview.tsx)在桌面端会渲染「年度活动」热力图卡片(ActivityHeatmapCard+Heatmap.tsx),展示过去 365 天每日听写次数。数据通过getActivityStats()独立拉取,与历史保留策略解耦。当前实现未区分移动端:只要
prefs.showOverviewActivityHeatmap !== false且活动数据非空,就会在概览页渲染该模块。问题
在 Android / 窄屏移动端(
useMobileLayout())上:桌面端保留该模块即可;移动端应默认隐藏(或后续再提供轻量替代)。
相关代码
openless-all/app/src/pages/Overview.tsx—getActivityStats()与ActivityHeatmapCard渲染条件(约 L78–210)openless-all/app/src/components/Heatmap.tsx— 热力图组件openless-all/app/src/lib/useMobileLayout.ts— 移动端判定(androidOS 或innerWidth < 720)prefs.showOverviewActivityHeatmap(ThemeSection.tsx)建议方案
Overview.tsx中当mobile === true时跳过活动数据请求与ActivityHeatmapCard渲染;useMobileLayout()为真时直接不 mount 热力图(避免无意义的 IPC);验收
getActivityStats()