f6437b83fe
- 切换到 expo-router 文件路由，删除 App.tsx - 新增 5 个 Expo 原生插件：ppocr (OCR), accessibility (账单抓取), notification-listener, screenshot-monitor, sms-receiver - 实现核心领域逻辑：billPipeline (账单流水), dedup (去重), transferRecognizer (转账识别), ruleEngine + categories (双轨制分类), budgets, creditCards, recurring, sync, ocrProcessor - 增强 ledger.ts：支持 balance assertion, option, pad/note 指令, posting 级 metadata, cost/price 解析 - 新增完整 UI：tabs (首页/报表/设置), 交易详情, 预算, 日历热力图, 分类管理, 信用卡, 定期交易, 规则管理 - 实现 Zustand 状态管理：ledgerStore, importStore, settingsStore, metadataStore, automationStore + 持久化 - 新增 AI 功能：chatAssistant, monthlySummary, voiceInput - 实现多端同步：gitSync, webdavSync, icloudSync - 新增主题系统 (tokens/presets) 和 i18n (zh/en) - 添加 30+ 单元测试覆盖核心逻辑
44 lines
1.9 KiB
TypeScript
44 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 { groupByMonth } from '../../domain/chartStats';
|
||
import type { Transaction } from '../../domain/types';
|
||
|
||
export function MonthlyReport({ transactions }: { transactions: Transaction[] }) {
|
||
const { theme } = useTheme();
|
||
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 }]}>月度报告</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}>
|
||
<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 }]}>暂无数据</Text>
|
||
)}
|
||
</View>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
container: { gap: 6 },
|
||
row: { flexDirection: 'row', alignItems: 'center', gap: 8 },
|
||
barWrap: { flex: 1, height: 12, backgroundColor: 'rgba(0,0,0,0.05)', borderRadius: 6, overflow: 'hidden' },
|
||
bar: { height: '100%', borderRadius: 6 },
|
||
});
|