76a5853ab6
核心重构 — 去除 channel 字段，引入 sourceAccount 模型： - 从 ImportedEvent、Rule、EnhancedRule、OcrRule 等接口中彻底移除 channel 字段 - rules.ts 中 resolveChannelAccount → resolveSourceAccount，规则匹配与账户解析不再依赖渠道概念 - dedup.ts 重写去重逻辑：从基于渠道匹配改为基于交易对手(counterparty)匹配，支持相同金额/交易对手/时间窗口的多级置信度判断 - transferRecognizer.ts 增加资产负债表账户校验，确保转账双方均为 Assets/Liabilities 类账户 - 全局替换影响：types、rules、ocr、adapters、adapters-migrations、所有服务层和测试 新增基础设施： - domain/constants.ts — 统一常量定义（支付包名、截图关键词、去重参数、方向检测函数 detectDirection()），消除 OCR/SMS/截图等模块的重复定义 - domain/channelConfig.ts — 渠道配置系统（支付宝/微信/银行），支持按包名和名称查找 - domain/pipelineSingleton.ts — 共享 BillPipeline 单例，解决 importStore/automationStore 的互斥锁共享问题 - domain/transactionBuilder.ts — 统一交易构建入口 buildAndSaveTransaction()，同时服务手动录入和无障碍监听 OCR 增强： - 新增账单详情页解析（parseDetailPageBill），支持支付宝/微信详情页结构化提取 - checkIsDetailPage() 识别详情页特征词，防止误提取（如"消费1次"被误读为金额） - 金额正则支持千分位逗号分隔，商户名正则改用 lookahead 边界匹配 - 时间解析支持中文格式（年月日）和跨年推断 - OcrProcessor 新增详情页路由，跳过 Layer 1 规则匹配 UI 全面升级： - 主题重设计：accent 色从绿色改为靛蓝(#4F46E5)，深色模式适配 OLED 纯黑，引入 Quicksand/Caveat 字体 - 新增 commonStyles.ts 统一 chip/input/modal 等通用样式 - 首页 Bento 网格布局：净资产英雄卡片 + 定期账单/月度统计并排展示 - 报表新增周报标签页，月报整合日历视图（支持点击查看当日交易明细） - TrendLine 图表从 View 条形图重写为 SVG 贝塞尔曲线 - CategoryPicker 从水平滚动改为 4 列网格 + emoji 图标 - Button/Card 增加 press 缩放动画 管道与自动化改进： - automationPipeline.ts 新增 handleIncomingBillEvent() 实时账单处理（悬浮账单卡片 + 前台 Alert 确认） - 新增无障碍文本直解析 parseAndProcessAccessibilityTexts()，微信/支付宝详情页绕过 OCR - rules.ts 新增智能还款检测（花呗/信用卡还款自动路由）和退款视为收入处理 - metadataStore 默认规则精简为 6 条通用规则，移除约 20 条个人化硬编码规则 存储与同步： - storePersistence.ts 原子写入 + 崩溃恢复 + 重试机制 - 备份升级到 v2 格式，包含 settings 和 metadata - 同步路径统一从 mobile.bean 改为 main.bean - _layout.tsx 启动时自动迁移旧 mobile.bean 到 main.bean 其他： - 删除独立日历页面，功能合并到报表月报标签 - i18n 清理：移除渠道相关翻译，新增 50+ 翻译键 - docs/android-build-guide.md 重写为 APK 体积优化指南 - 新增 design-system/beancount-mobile/MASTER.md 设计系统文档 - 测试全面更新覆盖以上所有变更
46 lines
1.9 KiB
TypeScript
46 lines
1.9 KiB
TypeScript
/**
|
||
* 月度报告图表（plan.md「5.2 图表与可视化」）。
|
||
* 数据计算为纯函数，图表渲染用简单 RN 组件（避免重图表库依赖）。
|
||
*/
|
||
import React from 'react';
|
||
import { StyleSheet, Text, View } from 'react-native';
|
||
import { useTheme } from '../../theme';
|
||
import { useT } from '../../i18n';
|
||
import { groupByMonth } from '../../domain/chartStats';
|
||
import type { Transaction } from '../../domain/types';
|
||
|
||
export function MonthlyReport({ transactions }: { transactions: Transaction[] }) {
|
||
const { theme } = useTheme();
|
||
const t = useT();
|
||
const data = groupByMonth(transactions);
|
||
const maxExpense = Math.max(...data.map(d => d.expense), 1);
|
||
|
||
return (
|
||
<View style={[styles.container, { backgroundColor: theme.colors.bgSecondary, borderRadius: theme.radii.md, padding: theme.spacing.md }]}>
|
||
<Text style={[theme.typography.h3, { color: theme.colors.fgPrimary }]}>{t('report.monthlyTitle')}</Text>
|
||
{data.map(d => (
|
||
<View key={d.month} style={styles.row}>
|
||
<Text style={[theme.typography.caption, { color: theme.colors.fgSecondary, width: 60 }]}>{d.month.slice(5)}</Text>
|
||
<View style={[styles.barWrap, { backgroundColor: theme.colors.progressBg }]}>
|
||
<View style={[styles.bar, {
|
||
width: `${(d.expense / maxExpense) * 100}%`,
|
||
backgroundColor: theme.colors.financial.expense,
|
||
}]} />
|
||
</View>
|
||
<Text style={[theme.typography.caption, { color: theme.colors.financial.expense }]}>{d.expense.toFixed(0)}</Text>
|
||
</View>
|
||
))}
|
||
{data.length === 0 && (
|
||
<Text style={[theme.typography.caption, { color: theme.colors.fgSecondary }]}>{t('common.noData')}</Text>
|
||
)}
|
||
</View>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
container: { gap: 6 },
|
||
row: { flexDirection: 'row', alignItems: 'center', gap: 8 },
|
||
barWrap: { flex: 1, height: 12, borderRadius: 6, overflow: 'hidden' },
|
||
bar: { height: '100%', borderRadius: 6 },
|
||
});
|