2e73b5a2c6
UI 重设计（P1-P5）： - 主题从靛蓝 accent 切换为近黑白单色（#111318），品牌感靠排版与财务语义色 - 暗色模式适配 OLED 纯黑，财务色整体提亮一档保证对比度 - 圆角体系新增 xl(24)，卡片/弹窗统一大圆角 - 移除 Caveat/Quicksand 自定义字体，切换为系统字体 - 新增 display(34/800) 字阶用于净资产等大数字展示 - 分类/标签/渠道颜色统一到 palette.ts 色板（12 色循环 + FNV 哈希） 记一笔 NumpadSheet（P3 录入闭环）： - 全新计算器风格录入面板：方向 chip → 大金额 → 账户 chip → 分类快捷行 → 数字键盘 - 支持表达式输入（20+15-5.5）与字符串十进制求值，避免浮点精度问题 - 高级模式保留多行分录编辑器，简单模式自动推断双腿 - postingLegs.ts 实现 buildPostings 的逆操作（编辑/草稿预填） - 未保存守卫：整页 beforeRemove + modal 脏状态上报 - 全局弹层（NumpadSheetHost）由＋按钮唤起，可通过设置开关 Tab 栏重构： - AppTabBar 替换默认 tab bar，中央＋按钮唤起全局记账面板 - Tab 从 5 个精简为 4 个（首页/交易/报表/设置），＋按钮独立 管理页模板 ManagementScreen： - 统一「列表 + 新增 + 点按编辑 + 长按删除 + FormModal」模式 - 预算/分类/标签/信用卡等管理页消除手写样板 其他： - OCR 模型从 PP-OCRv5 升级到 v6（det/rec/dict 全部替换） - GBK 解码器 import 修复（text-encoding-gbk ESM 兼容） - 批量确认失败数计算修正（用 failedPayees.length 替代 store 快照差值） - 新增 diagnostics 诊断页、TodoStrip 首页待办条、SwipeableTransactionCard 左滑操作 - periodNav.ts 报表周期导航（anchor+period 统一状态管理，本地时区运算） - 测试覆盖 numpadExpression/postingLegs/periodNav/palette/search/transactionGroups/categoryIcons/dateGrid
57 lines
2.4 KiB
TypeScript
57 lines
2.4 KiB
TypeScript
/**
|
||
* 分类占比图（plan.md「5.2 图表与可视化」）。
|
||
* 采用卡片化布局与磨砂感水平胶囊进度条。
|
||
*/
|
||
import React, { useMemo } from 'react';
|
||
import { StyleSheet, Text, View } from 'react-native';
|
||
import { useTheme } from '../../theme';
|
||
import { useT } from '../../i18n';
|
||
import { groupByCategory } from '../../domain/chartStats';
|
||
import type { Transaction } from '../../domain/types';
|
||
|
||
export function CategoryPie({ transactions }: { transactions: Transaction[] }) {
|
||
const { theme } = useTheme();
|
||
const t = useT();
|
||
const data = useMemo(() => groupByCategory(transactions), [transactions]);
|
||
const maxAmount = Math.max(...data.map(d => d.amount), 1);
|
||
|
||
return (
|
||
<View style={[styles.container, { backgroundColor: theme.colors.bgSecondary, borderRadius: theme.radii.lg, padding: theme.spacing.md }]}>
|
||
<Text style={[theme.typography.h3, { color: theme.colors.fgPrimary }]}>
|
||
{t('report.categoryTitle')}
|
||
</Text>
|
||
<View style={styles.list}>
|
||
{data.map(d => (
|
||
<View key={d.category} style={styles.row}>
|
||
<Text
|
||
style={[theme.typography.bodySmall, { color: theme.colors.fgPrimary, flex: 1, fontWeight: '600' }]}
|
||
numberOfLines={1}
|
||
>
|
||
{d.category.replace('Expenses:', '').replace('Income:', '')}
|
||
</Text>
|
||
<View style={[styles.barWrap, { backgroundColor: theme.colors.bgTertiary, borderColor: theme.colors.border, borderWidth: StyleSheet.hairlineWidth }]}>
|
||
<View style={[styles.bar, { width: `${(d.amount / maxAmount) * 100}%`, backgroundColor: theme.colors.accent }]} />
|
||
</View>
|
||
<Text style={[theme.typography.caption, { color: theme.colors.fgSecondary, width: 55, textAlign: 'right', fontVariant: ['tabular-nums'], fontSize: 13 }]}>
|
||
{d.percentage}%
|
||
</Text>
|
||
</View>
|
||
))}
|
||
</View>
|
||
{data.length === 0 && (
|
||
<Text style={[theme.typography.caption, { color: theme.colors.fgSecondary, textAlign: 'center', marginVertical: 15 }]}>
|
||
{t('common.noData')}
|
||
</Text>
|
||
)}
|
||
</View>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
container: { gap: 10 },
|
||
list: { gap: 8 },
|
||
row: { flexDirection: 'row', alignItems: 'center', gap: 10 },
|
||
barWrap: { width: 120, height: 8, borderRadius: 4, overflow: 'hidden' },
|
||
bar: { height: '100%', borderRadius: 4 },
|
||
});
|