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
73 lines
2.8 KiB
Markdown
73 lines
2.8 KiB
Markdown
# 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 样式
|