# 同行会 v0.2 设计系统

视觉真值为用户确认的第二版五屏方向，以及 `prototypes/full/v0.2/` 下二次确认通过的四张全量关键页面总览板。此文档负责把图片转换成可维护的生产规则；代码不直接逐页猜图。

## 批准的视觉来源

| 来源 | 负责范围 |
| --- | --- |
| `board-a-core-public.png` | 四个主 Tab、首页信息层级、公开浏览和会员购买入口 |
| `board-b-identity-profile-v2.png` | 场景内手机号快捷登录、我的未完善状态、资料编辑和成员权限状态 |
| `board-c-event-lifecycle.png` | 活动详情、报名确认、凭证、我的活动和取消确认 |
| `board-d-membership-payment.png` | 会员方案、有效权益、支付结果、订单和售后 |

ImageGen 中的价格、日期、人物、TabBar 层级和示例状态不拥有业务事实；具体修正以原型目录的 `logic-review.md` 和页面规格为准。

## 产品气质

- 关键词：可信、克制、真实、城市感、可参与。
- 内容优先级：正在发生的活动 > 真实成员 > 当前会员状态 > 资料完善。
- 普通用户先浏览公开内容；身份资料只在“我的”或需要报名、支付、会员专属能力时出现。
- 禁止在用户界面出现 CloudBase、Harness、回调、同步、测试模式、身份已连接、内部方案 ID 等开发者语言。
- 体验方案可以显示价格和期限，但不显示“仅用于开发环境验证”等内部说明。
- 测试支付方案仍使用正常产品文案，例如“会员体验卡”；测试环境和回调目的只写入运维文档，不进入数据库展示字段。

## 视觉令牌

| 语义 | 值 | 用途 |
| --- | --- | --- |
| Canvas | `#F6F4EE` | 页面背景 |
| Surface | `#FFFEFA` | 卡片与表单 |
| Surface muted | `#F0EEE7` | 输入框、次级区块 |
| Ink | `#1D2A23` | 主文本 |
| Muted | `#69726B` | 次级文本 |
| Brand | `#285E46` | 主按钮、选中态、会员卡 |
| Brand active | `#1E4936` | 按压态 |
| Brand soft | `#E2EEE7` | 浅标签、进度背景 |
| Accent | `#E77745` | 价格、余位、提醒 |
| Accent soft | `#FFF1E9` | 温和提示 |
| Line | `#DDD9CF` | 边框与分隔线 |
| Danger | `#B84A43` | 注销、取消和失败 |
| Success | `#2F7758` | 已生效、已报名、支付成功 |

- 页面水平边距固定 `32rpx`，紧凑列表可使用 `24rpx` 内边距。
- 基准间距为 `8rpx`；同组 `12–24rpx`，区块 `32–48rpx`。
- 卡片圆角 `20–28rpx`；会员卡 `30rpx`；输入控件 `16rpx`；不使用泛滥的胶囊卡片。
- 主标题 `36–40rpx`，区块标题 `30–34rpx`，正文 `26rpx`，辅助 `22–24rpx`。不再使用 `44–48rpx` 营销口号作为所有页面首屏。
- 普通卡片只使用 `1rpx` 边框；阴影仅用于支付结果浮层等真正悬浮元素。
- 图片：活动主卡 `16:9`，活动列表 `4:3`，成员卡 `1:1`。全部 `aspectFill`，禁止拉伸。

## 公共页面结构

- 主 Tab：原生导航栏标题 + 内容区 + 自定义 TDesign TabBar。四项为首页、认识、活动、我的。
- 二级页：原生返回导航，不重复 TabBar，不在页面内伪造返回按钮。
- 首页：一张紧凑的本周活动摘要、会员状态条、热门活动、新成员；资料提醒不进入首页。
- 我的：个人头部、资料完成度、四个快捷入口、分组列表；所有资料完善和账号能力集中在这里。
- 手机号登录：不设置首次登录墙，也不展示“先微信登录、再绑定手机号”的双步骤。报名/支付等动作缺少手机号时，在当前页面展示一个紧凑 Bottom Sheet；只保留场景标题、一行用途、原生手机号快捷登录按钮、协议链接和关闭操作。
- 表单：标签在输入框上方；输入框、textarea 使用 `box-border block w-full max-w-full`；非自适应 textarea 必须给明确高度，不能依赖微信原生默认高度；底部主操作始终在安全区上方。
- 列表：包含自定义组件的纵向列表使用 `flex flex-col gap-*` 和可查询的包装节点，不使用依赖子选择器的 `space-y-*`。紧凑活动卡与其中的原生 `image` 使用同一明确高度，避免原生图片默认高度把卡片撑开。
- 成员发现：只要卡片同时显示昵称、城市、介绍和标签，就使用单列信息卡；双列只用于以图片为主且每张卡最多一行辅助信息的浏览场景。不能为了接近生图而把真实资料挤进半屏。
- 原生输入：单行 `input` 使用明确的 `88rpx` 高度与水平内边距，不用上下 padding 撑高；placeholder 需要可读对比度。textarea 独立设置高度、内边距和计数区域。
- 反馈：动作 loading 只作用于触发按钮；后台刷新不覆盖现有内容；成功使用 toast + 页面状态，不使用长时间全屏遮罩。
- 页面级筛选：统一使用 TDesign line tabs，选中态为品牌文字与短下划线；不用脱离内容层级的大圆角容器、高对比 tag 或自绘深色胶囊。
- “我的”快捷入口：活动与订单采用全宽设置行，固定圆形图标容器、标题/说明和右箭头；不使用两个半宽卡片承载多行导航信息。
- FAQ：只回答修改资料、会员权益、活动报名、订单售后和隐私等真实任务，不解释延迟授权、无感身份或支付收敛等产品实现策略。

## 业务组件

- `event-card`：封面、时间、标题、地点、余位、会员价/状态和一个主动作。
- `member-card`：头像、昵称、城市/职业摘要、最多三个兴趣标签；锁定状态用“会员可查看完整资料”，不能伪装错误。
- `membership-pass`：头像、会员状态、有效期和权益入口；非会员时为紧凑购买入口。
- `profile-progress`：只在“我的”出现，显示资料完成度和可选下一步，不阻塞报名或购买。
- `phone-login-sheet`：当前业务页面上的手机号快捷登录层；同一组件承载报名、支付和订单联系三种短文案，只有一个主操作。
- `member-detail-hero`：统一成员大图、基础身份、会员标识和公开/完整资料层级。
- `event-ticket`：报名成功、时间地点、掩码凭证号、使用说明和取消入口。
- `order-card` / `order-timeline`：订单列表摘要和可信状态时间线，不显示内部 ID。
- `status-result`：支付成功、支付确认、报名成功、空态、权限限制和网络错误使用不同图标、标题和行动。
- `settings-list`：分组列表，至少 `96rpx` 高，统一图标、标题、说明和右箭头。

## 小程序交互规则

- 自动调用身份不等于显式登录。公开内容无需用户操作即可浏览。
- CloudBase 自动身份是无感的 OpenID 识别，不展示独立微信登录页面。
- `open-type="getPhoneNumber"` 只在用户主动发起需要手机号的业务动作后出现；成功后绑定当前可信 OpenID 并恢复原动作。
- `open-type="chooseAvatar"` 与 `input type="nickname"` 只在用户主动完善公开资料时出现。
- 报名和会员购买需要手机号；头像/昵称可以稍后完善；查看完整成员资料需要有效会员。
- 拒绝授权不清空页面、不循环弹窗，保留返回浏览入口。
- 支付后进入结果页，服务端主动查单与回调共同收敛；页面自动更新权益。
- Tab 页使用缓存优先和请求去重；下拉刷新才强制刷新。
- 图片列表缓存命中时，如 presentation signature 未变化则跳过列表 `setData`，避免 Tab 返回重建头像节点。
- 首页、认识、活动和我的高频图片使用进程内本地文件路径；签名 HTTPS 只作为下载失败回退，不把临时路径写回数据库。
- 所有点击热区至少 `88rpx`，正文不低于 `24rpx`，状态不只依赖颜色表达。

## 资产与图标

- 活动封面与成员头像来自数据库媒体记录，不在 WXML 硬编码业务图片。
- 使用 TDesign 图标库，保持同一线宽；禁止用字符、emoji 或手绘 SVG 代替图标。
- 图片压缩、上传、媒体元数据和业务绑定遵循根目录图片资产流程。

页面到组件、状态、数据和视觉来源的映射见 [`component-map.md`](component-map.md)。没有该映射时不得从原型直接编写页面。