# 拍谷 · 日系谷圈全套 UI/UX · 底座总规范

> 2026-10-10 ｜ 底座路径：`产出/日系谷圈全套UIUX-20261010/vue` ｜ 唯一令牌源：`vue/src/styles/tokens.css`
> 依据：执行方案.md（已复核）+ 需求理解卡基准线 + 页面深度规格表 + 需求与视觉卡（视觉锁定）

## 1. 红线（各组必读，verify.py 门禁自动把关）

1. **零新增业务**：不造直播/鉴定/代管寄售/充值/提现/注销等；「我的→资产」只读展示。
2. **零平台品牌词**：用户界面禁「微信/WeChat」等（技术注释层豁免）；口径＝在线支付/一键登录。
3. **零虚假承诺**：禁「已鉴定/官方认证/假一赔X/真实成交」类文案；示意数据随「数据为示意」披露。
4. **示意数据集中**：只进 `src/data/mock.js`（文件头已声明）；页面文件禁 ¥ 字面量（门禁 6）。
5. **素材纪律**：图片位只用 `assets.js` 登记键（真图）或 `.ph` 示意占位（缺口，带角标）；**照片位禁用 CSS 渐变冒充**；禁把 UI 字/按钮切入素材；登记表 `docs/asset-manifest.json`，一键一文件，槽位白名单生效。
6. **图标**：只用 `components/icons.js`（单一 SVG 家族 Lucide 路径，currentColor），**禁 emoji 图标**。
7. **不覆盖旧产物**：`产出/vue/` 与三张定稿 PNG 只读；本底座独立目录。零付费生图；缺新图升级主代理。
8. **文件隔离**：各组只写本组 `pages/{key}.vue`（子组件内联），禁改 App/styles/components/data/scripts/pages.json（hashes.json 防漂移门禁）。

## 2. 视觉基线（tokens.css 唯一来源；三处同源＝tokens.css ↔ App 令牌面板 ↔ favicon）

### 2.1 色彩（对比度 verify 实测）

| token | 值 | 用途/实测 |
|---|---|---|
| --bg-page / --card | #FFFFFF | 白底/卡 |
| --bg-tint | #FFF3F7 | 浅粉洗底 |
| --bg-tint-blue | #EFF6FC | 天蓝洗底 |
| --primary | #F26692 | 樱粉·**只做面** |
| --primary-deep | #B72F65 | 深粉·浅底小字 **5.38:1（on tint）/5.82:1（on white）** ✅ |
| --accent | #5EA6D9 | 天蓝·面 |
| --accent-deep | #28658E | 深蓝·浅底小字 **6.28:1** ✅ |
| --text / --text-2 / --text-3 | #23354C / #5C6B7E / #82909E | 12.46 / 5.44 / 3.26(占位 informational) |
| --price / --price-deep | #D83C43 / #B92228 | 大号金额专用 / 小号红字 6.32:1 |
| --success(--bg) / --warn(--ink --bg) | #1F6E50(#E8F4EE) / #FF7D00(#9A4F00,#FFF4E5) | 5.47 / 5.53 ✅ |
| --grad-brand | 135deg #F98CAF→#F26692 | 主按钮/空态按钮，克制 |

**已知妥协（如实记录）**：白字 on 樱粉按钮 = 2.96:1（视觉卡锁定樱粉为按钮面；按钮 16-17px/700 + 图形通道补偿；高对比场景可切 `--primary-ink` #C73366 白字 5.13:1，默认不启用）。

### 2.2 档位

- 字号：主力 11/12/14/17px + 强调 20/22px（uni-app rpx=px×2）。
- 圆角：8（小件）/16（卡片）/24（弹层）+ 胶囊 999。间距：4/8 倍数（--sp-1..6=4..24）。
- 金额/时间：`data/time.js` fmtMoney（¥+两位小数+千分位，tabular）/countdown（§0.3 规则）。
- 状态语义：一律图标+文字双通道（`Pill` 组件 6 tone 全部 ≥4.5 实测）。

### 2.3 角色与贴纸

原创角色/贴纸只进运营位与社区氛围位（banner 插画位、空态、头像）；竞价面板/参数表/金额区零装饰；数字清晰不花体；无霓虹/玻璃拟态/深色面板。

## 3. 页面契约（各组遵守；样板＝`pages/spec.vue`）

1. `defineProps({ state: String })`；同文件加普通 `<script>` 块导出 `export const STATES = ['normal', ...]`（顺序=状态板帧序，names 与 pages.json `states[].name` 一致）。
2. 每个 applicable 态 `v-if="state==='x'"` **真实成帧**（禁用/提交中/错误/成功也要有帧）；N/A 态不写。
3. 导航只用 `inject('navigate'/'back'/'notify')`；目标 key 必须在 pages.json（禁悬空）；无落地页入口写 toast「原型示意」占位并在页面顶部注释登记。
4. 金额/标题/昵称/时间一律引 data；图片位只用 `asset(key)` 或 `.ph`（见 ItemCard 样板）。
5. overlay 页（bid-sheet/publish-sheet 等）整页真实渲染弹层本体（`Sheet`：lockMask=true=遮罩不可点关）。
6. fab 列表页内容流底部预留 tail ≥ fab高+24px（`Fab` 定位 bottom:76px）。
7. 文案零品牌词、零新增业务词；「评价」等我方已定占位入口按 toast 处理。

## 4. 渲染与验证（工作流集中跑，各组勿自行全套截图/构建）

```bash
cd vue && npm run build                      # 工作流集中
python3 scripts/render.py --all-states       # 35 单元全套截图（独立 preview server，127.0.0.1 随机端口，不碰旧 5173/5174）
python3 scripts/verify.py --require-pages    # 整合期门禁（base 档不带该 flag）
python3 scripts/render.py --only spec,home   # 冒烟/补拍
```

截图产物：`screens/{key}/hero.png(750×1624)`、`device-393.png(786×1704)`、`normal.png(整页)`、`states.png|states-N.png(≤3帧板,帧宽750+gutter48@2x)`、`seg-N.png(长页分段)`。render.py/verify.py stdout 仅 JSON。

## 5. 目录与分工

```
vue/src/
├── App.vue（注册表35+spec；?page&state&embed&board&shot&w&h）【仅底座】
├── styles/tokens.css（令牌唯一源）+ base.css（reset/舞台/通用件）【仅底座】
├── components/（19 件共享件）【仅底座】
├── data/（assets.js 素材映射 / mock.js 示意数据 / time.js 格式化）【仅底座】
└── pages/{key}.vue ×35【各组各写本组】+ spec.vue（底座规范页样板）
scripts/（asset_prep / render / verify / gen_hashes）【底座】
docs/（本规范 + 组件映射表 + 字段映射 + 状态清单 + asset-manifest.json）
```

组→文件映射照执行方案 §6.2；组内页互不引用，只引共享层。