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
parent 7fa345b558
commit 2e73b5a2c6
96 changed files with 26951 additions and 20619 deletions
@@ -1,206 +1,72 @@
-# Design System Master File
+# Beancount Mobile 设计系统（MASTER）

-> **LOGIC:** When building a specific page, first check `design-system/pages/[page-name].md`.
-> If that file exists, its rules **override** this Master file.
-> If not, strictly follow the rules below.
+> 本文件与 `src/theme/presets.ts` 一一对应，是实现的事实描述而非平行标准。
+> 修改配色/字阶/圆角时必须先改 presets.ts，再同步本文件。

---
+## 设计方向：明亮 Bento 现代风

-**Project:** beancount-mobile
-**Generated:** 2026-07-16 16:32:57
-**Category:** Personal Finance Tracker
+浅色为主、大圆角卡片（Bento）、近黑白单色 + 财务语义色点缀。
+品牌感靠排版与财务色表达，不依赖彩色 accent。暗色为 OLED 纯黑完整对等主题。

---
+## 色板（= presets.ts）

-## Global Rules
+### 浅色（默认）
+| 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)` | 遮罩 |

-### Color Palette
+### 暗色（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)` |

-| Role | Hex | CSS Variable |
-|------|-----|--------------|
-| Primary | `#1E40AF` | `--color-primary` |
-| On Primary | `#FFFFFF` | `--color-on-primary` |
-| Secondary | `#3B82F6` | `--color-secondary` |
-| Accent/CTA | `#059669` | `--color-accent` |
-| Background | `#0F172A` | `--color-background` |
-| Foreground | `#FFFFFF` | `--color-foreground` |
-| Muted | `#101A34` | `--color-muted` |
-| Border | `rgba(255,255,255,0.08)` | `--color-border` |
-| Destructive | `#DC2626` | `--color-destructive` |
-| Ring | `#1E40AF` | `--color-ring` |
+分类/标签/渠道颜色见 `src/theme/palette.ts`（分类 12 色循环 + 具名映射、TAG_COLORS、渠道品牌色）。
+其余 token（divider / skeleton / progressBg / success / warning / error / info）见 `presets.ts`。
+全工程颜色字面量只允许存在于 `presets.ts` 与 `palette.ts`。

-**Color Notes:** Trust blue + profit green on dark
+## 字体

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

- **Heading Font:** Caveat
- **Body Font:** Quicksand
- **Mood:** handwritten, personal, friendly, casual, warm, charming
- **Google Fonts:** [Caveat + Quicksand](https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap)
+字阶：display 34/800 · h1 28/700 · h2 22/700 · h3 17/600 · body 16/400 · bodySmall 14/400 · caption 12/400。

-**CSS Import:**
-```css
-@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap');
-```
+## 圆角 / 间距 / 阴影

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

-| Token | Value | Usage |
-|-------|-------|-------|
-| `--space-xs` | `4px` / `0.25rem` | Tight gaps |
-| `--space-sm` | `8px` / `0.5rem` | Icon gaps, inline spacing |
-| `--space-md` | `16px` / `1rem` | Standard padding |
-| `--space-lg` | `24px` / `1.5rem` | Section padding |
-| `--space-xl` | `32px` / `2rem` | Large gaps |
-| `--space-2xl` | `48px` / `3rem` | Section margins |
-| `--space-3xl` | `64px` / `4rem` | Hero padding |
+## 图标

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

-| Level | Value | Usage |
-|-------|-------|-------|
-| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` | Subtle lift |
-| `--shadow-md` | `0 4px 6px rgba(0,0,0,0.1)` | Cards, buttons |
-| `--shadow-lg` | `0 10px 15px rgba(0,0,0,0.1)` | Modals, dropdowns |
-| `--shadow-xl` | `0 20px 25px rgba(0,0,0,0.15)` | Hero images, featured cards |
+## 反模式

---
-
-## Component Specs
-
-### Buttons
-
-```css
-/* Primary Button */
-.btn-primary {
-  background: #059669;
-  color: white;
-  padding: 12px 24px;
-  border-radius: 8px;
-  font-weight: 600;
-  transition: all 200ms ease;
-  cursor: pointer;
-}
-
-.btn-primary:hover {
-  opacity: 0.9;
-  transform: translateY(-1px);
-}
-
-/* Secondary Button */
-.btn-secondary {
-  background: transparent;
-  color: #1E40AF;
-  border: 2px solid #1E40AF;
-  padding: 12px 24px;
-  border-radius: 8px;
-  font-weight: 600;
-  transition: all 200ms ease;
-  cursor: pointer;
-}
-```
-
-### Cards
-
-```css
-.card {
-  background: #0F172A;
-  border-radius: 12px;
-  padding: 24px;
-  box-shadow: var(--shadow-md);
-  transition: all 200ms ease;
-  cursor: pointer;
-}
-
-.card:hover {
-  box-shadow: var(--shadow-lg);
-  transform: translateY(-2px);
-}
-```
-
-### Inputs
-
-```css
-.input {
-  padding: 12px 16px;
-  border: 1px solid #E2E8F0;
-  border-radius: 8px;
-  font-size: 16px;
-  transition: border-color 200ms ease;
-}
-
-.input:focus {
-  border-color: #1E40AF;
-  outline: none;
-  box-shadow: 0 0 0 3px #1E40AF20;
-}
-```
-
-### Modals
-
-```css
-.modal-overlay {
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(4px);
-}
-
-.modal {
-  background: white;
-  border-radius: 16px;
-  padding: 32px;
-  box-shadow: var(--shadow-xl);
-  max-width: 500px;
-  width: 90%;
-}
-```
-
---
-
-## Style Guidelines
-
-**Style:** Dark Mode (OLED)
-
-**Keywords:** Dark theme, low light, high contrast, deep black, midnight blue, eye-friendly, OLED, night mode, power efficient
-
-**Best For:** Night-mode apps, coding platforms, entertainment, eye-strain prevention, OLED devices, low-light
-
-**Key Effects:** Minimal glow (text-shadow: 0 0 10px), dark-to-light transitions, low white emission, high readability, visible focus
-
-### Page Pattern
-
-**Pattern Name:** Interactive Product Demo
-
- **CTA Placement:** Above fold
- **Section Order:** Hero > Features > CTA
-
---
-
-## Anti-Patterns (Do NOT Use)
-
- ❌ Pure white backgrounds
-
-### Additional Forbidden Patterns
-
- ❌ **Emojis as icons** — Use SVG icons (Heroicons, Lucide, Simple Icons)
- ❌ **Missing cursor:pointer** — All clickable elements must have cursor:pointer
- ❌ **Layout-shifting hovers** — Avoid scale transforms that shift layout
- ❌ **Low contrast text** — Maintain 4.5:1 minimum contrast ratio
- ❌ **Instant state changes** — Always use transitions (150-300ms)
- ❌ **Invisible focus states** — Focus states must be visible for a11y
-
---
-
-## Pre-Delivery Checklist
-
-Before delivering any UI code, verify:
-
- [ ] No emojis used as icons (use SVG instead)
- [ ] All icons from consistent icon set (Heroicons/Lucide)
- [ ] `cursor-pointer` on all clickable elements
- [ ] Hover states with smooth transitions (150-300ms)
- [ ] Light mode: text contrast 4.5:1 minimum
- [ ] Focus states visible for keyboard navigation
- [ ] `prefers-reduced-motion` respected
- [ ] Responsive: 375px, 768px, 1024px, 1440px
- [ ] No content hidden behind fixed navbars
- [ ] No horizontal scroll on mobile
+- 禁止在组件中写颜色字面量（`#xxxxxx` / `rgba(...)`），必须走 token
+- 禁止低对比文字（< 4.5:1）
+- 禁止瞬间状态变化，交互反馈 150–300ms
+- 禁止绕过 commonStyles 重复造 input/chip/modal 样式