# 吴晓记 · 原型设计规范（所有页面必须遵守）
依据 `/Users/morya/ws/clac/README.md` 设计文档 v0.1 口径生成 HTML 原型。
## 文件组织
```
prototype/
├── index.html # 导航目录
├── DESIGN.md # 本规范
├── assets/base.css # 共享设计系统（必须 引用，禁止重复造轮子）
└── pages/*.html # 每页一个独立完整 HTML
```
## 页面骨架（固定结构）
```html
页面名 · 吴晓记
```
## 设计令牌（base.css 已提供，用 var()）
- 主色 `--c-primary:#2F7E5E`（账本绿）；背景 `--c-bg:#F7F4EE`（纸色）；卡片白；文字 `--c-text/#c-sub`
- 状态色：草稿=灰 `--c-gray`、对账中=蓝 `--c-blue`、有异议=橙 `--c-orange`、已确认=绿 `--c-green`
- 金额红色仅用于逾期/欠款 `--c-red`；`--c-gold` 用于会员标识
## 共享组件（class 名固定）
- `.tabbar`：5 tab＝首页 / 账单 / **记账(中央凸起圆钮 .tab-center)** / 客户 / 我的
- `.card` `.list-item` `.tag.tag-{draft|reconciling|disputed|confirmed}` `.btn .btn-primary .btn-ghost .btn-danger`
- `.seg`（分段筛选器）`.field-row`（表单行）`.avatar` `.sheet`（底部弹层）`.badge-dot` `.empty`（空态）
- `.back`：二级页返回链接（相对路径）；页内示意数据用中文（客户"王建国/李记水果"、商品"A4 复印纸 箱"等）
## Tab 页导航互通（href 固定，不要改名）
| tab | 文件 |
| --- | --- |
| 首页 | tab-home.html |
| 账单 | tab-bills.html |
| 记账 | tab-book.html（点击中央按钮直达此页） |
| 客户 | tab-customers.html |
| 我的 | tab-mine.html |
## 关键业务规则（页面必须体现）
1. **账单状态机**：草稿 → 对账中 → 待我方确认 → 已确认(锁定)；异议可从"对账中/已确认"进入。已确认账单**必须双方同意才能修改**（修改申请按钮 → 待对方同意）。
2. **仅两方对账**，不做三方；v0.1 只有微信小程序端，单商户。
3. **分享必微信授权、查看必留痕**：无匿名/免授权路径；被分享方看到的是「账目 + 授权身份」。
4. **AI 永远是草稿**：识别 → 草稿确认页 → 落账。低置信字段标黄；客户/商品自动模糊匹配（"老王→王建国"）。
5. **计费口径（3.6，暂定）**：每条落库记录 0.1 元、推广/会员 7 折 0.07 元；AI 批量转发可拆多条、逐条计量；草稿/取消/确认操作不计费。草稿确认页要有「本次将计费 N 条 · ¥0.0N」提示条。
6. **手机号 = 用户主动授权，永不强制**。会员仅 7 折权益（v0.1）。
7. 提醒入口：逾期应收、待确认账单、待关联发票（首页待办区）。
## 完成标准
- 浏览器直接打开即渲染，无外部依赖（无 CDN 字体/图标，图标用 emoji 或纯 CSS）
- 视觉为 375px 手机壳、居中灰底，可作评审原型；中文文案专业、无占位符残留（禁止 Lorem ipsum）