fengmengqi 2e73b5a2c6 feat: UI 全面重设计（Bento 明亮风）+ 记一笔 NumpadSheet + 管理页模板 + OCR v5→v6 升级

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

2026-07-22 13:33:29 +08:00

2.8 KiB

Raw Permalink Blame History

Beancount Mobile 设计系统（MASTER）

本文件与 src/theme/presets.ts 一一对应，是实现的事实描述而非平行标准。修改配色/字阶/圆角时必须先改 presets.ts，再同步本文件。

设计方向：明亮 Bento 现代风

浅色为主、大圆角卡片（Bento）、近黑白单色 + 财务语义色点缀。品牌感靠排版与财务色表达，不依赖彩色 accent。暗色为 OLED 纯黑完整对等主题。

色板（= presets.ts）

浅色（默认）

Token	值	用途
bgPrimary	`#F6F7F9`	页面背景
bgSecondary	`#FFFFFF`	卡片
bgTertiary	`#EFF1F4`	输入框 / chip
fgPrimary	`#111318`	主文字
fgSecondary	`#6B7280`	次要文字
fgInverse	`#FFFFFF`	反色文字
accent	`#111318`	按钮 / 选中态（近黑）
accentLight	`rgba(17,19,24,0.08)`	选中高亮底色
accentDark	`#000000`	按压态
financial.income	`#10B981`	收入
financial.expense	`#EF4444`	支出
financial.transfer	`#3B82F6`	转账
border	`#E5E7EB`	边框
overlay	`rgba(17,19,24,0.4)`	遮罩

暗色（OLED）

Token	值
bgPrimary	`#040508`
bgSecondary	`#101218`
bgTertiary	`#1A1D24`
fgPrimary / accent	`#F3F4F6`
fgSecondary	`#9CA3AF`
fgInverse	`#111318`
financial.income	`#34D399`（提亮）
financial.expense	`#F87171`（提亮）
financial.transfer	`#60A5FA`（提亮）
border	`rgba(255,255,255,0.08)`

分类/标签/渠道颜色见 src/theme/palette.ts（分类 12 色循环 + 具名映射、TAG_COLORS、渠道品牌色）。其余 token（divider / skeleton / progressBg / success / warning / error / info）见 presets.ts。全工程颜色字面量只允许存在于 presets.ts 与 palette.ts。

字体

系统字体（iOS SF / Android Roboto），不加载自定义字体。金额数字一律 fontVariant: ['tabular-nums'] 等宽对齐。

字阶：display 34/800 · h1 28/700 · h2 22/700 · h3 17/600 · body 16/400 · bodySmall 14/400 · caption 12/400。

圆角 / 间距 / 阴影

圆角：sm 8 · md 12 · lg 16 · xl 24（弹窗默认；卡片组件 P2 统一升级） · full
间距：xs 4 · sm 8 · md 16 · lg 24 · xl 32
阴影：浅色 4–12px 弥散轻阴影；暗色阴影减重，辅以半透边框

图标

统一 Ionicons（@expo/vector-icons）。禁止用 emoji 充当图标；分类图标 = Ionicon + 圆形彩色底（CategoryIcon 组件，P2 落地）。

反模式

禁止在组件中写颜色字面量（#xxxxxx / rgba(...)），必须走 token
禁止低对比文字（< 4.5:1）
禁止瞬间状态变化，交互反馈 150–300ms
禁止绕过 commonStyles 重复造 input/chip/modal 样式

2.8 KiB Raw Permalink Blame History Unescape Escape