# 小白记账设计系统

## 设计判断

小白记账是面向 Windows 小微经营者的本地财务产品。界面首先要让用户信任数据、看懂结果并完成当前任务，不追求营销网页式的视觉表演。

- 页面类型：数据密集型桌面产品
- 目标用户：不熟悉专业会计术语的小微经营者
- 视觉语言：冷静、可信、清晰、有适度亲和力
- 设计基础：Fluent UI React 与 Fluent System Icons
- 设计参数：`DESIGN_VARIANCE 4 / MOTION_INTENSITY 3 / VISUAL_DENSITY 7`

## 不可破坏的视觉锁定

### 颜色锁定

全产品只使用青绿色作为强调色。警告色和危险色只能表达真实状态，不能作为装饰。

- 品牌深绿：`#084C45`
- 主要强调：`#0D5C52`
- 交互强调：`#0F6F61`
- 浅强调背景：`#EDF7F4`
- 页面背景：`#F4F6F8`
- 内容表面：`#FFFFFF`
- 正文：`#17212B`
- 次要文字：`#5E6A75`
- 边框：`#DFE3E8`
- 警告：`#8A6100`
- 危险：`#B42318`

禁止重新加入金色装饰、紫蓝渐变、发光描边或与品牌无关的第二强调色。

### 形状锁定

- 面板、数据组和业务卡片统一使用 `12px` 圆角。
- 按钮、输入框、图标按钮和状态标签统一使用 `8px` 或更小圆角。
- 只有数字徽标可使用完全圆形。
- 阴影只用于浮层和需要表达层级的控件，普通内容面板依靠边框与留白分组。

### 主题锁定

当前版本统一使用浅色主题。任何页面不得单独切换成深色或暖色主题。后续如果加入深色模式，必须通过全局语义变量一次性实现和测试。

## 页面骨架

- 左侧固定主导航负责产品一级入口，标签不得随意改名。
- 顶部栏负责全局搜索、演示数据提示、通知和账户入口。
- 主内容区先展示页面结果，再展示依据和可执行操作。
- 右侧辅助信息只在确有上下文价值时出现。
- 数据概览优先使用连续分区，不把每个数字都包装成独立悬浮卡片。

## 排版与数据

- 中文界面使用 `Segoe UI Variable`、`Segoe UI`、`Microsoft YaHei UI` 回退链。
- 页面标题保持 27px 左右，不使用营销页面式超大标题。
- 金额、数量和日期必须启用等宽数字特性 `tabular-nums`。
- 收入和支出不能只靠颜色区分，必须同时显示正负号或文字状态。
- 表格列宽、金额右对齐和状态位置应保持稳定。

## 控件与图标

- 基础组件使用 `@fluentui/react-components`。
- 图标只使用 `@fluentui/react-icons`，不得在业务组件内手绘 SVG 路径。
- 每页只突出一个主要操作，其余操作降低视觉权重。
- 按钮文字在桌面端必须保持单行。
- 所有按钮必须有清晰的键盘焦点和按下反馈。

## 动效

- 动效只用于页面切换、操作反馈和状态变化。
- 只动画化 `transform` 与 `opacity`。
- 禁止滚动劫持、持续漂浮和无业务含义的循环动画。
- 必须尊重 `prefers-reduced-motion`。

## 文案

- 使用“收入、进货、房租、需要确认”，不用“贷方、借方、会计科目”。
- 先说结果，再解释依据。
- 错误提示必须说明发生了什么、数据是否安全、用户下一步做什么。
- 禁止用版本号、装饰性状态点和生硬编号制造科技感。
- 日期范围使用“至”，不使用长破折号。

## 状态完整性

每个新增功能必须同时考虑：

- 正常状态
- 加载状态
- 空数据状态
- 错误状态
- 离线状态
- 无权限状态

新增页面合并前至少检查首页、当前页面、键盘焦点、窄桌面宽度和 Windows 安装包构建。