# P11 信息列表三类型 · 设计说明（info.vue）

> 单元：`info` ｜ group=information ｜ P11 ｜ 依据：pages.json unit#18 + 规格表 P11 + 执行方案 §5.18
> 实现：`vue/src/pages/info.vue` ｜ 组内私有件：`components/information/InfoCard.vue` + `fixtures.js`
> 状态帧 fixtures（全组单文件）：`design/fixtures/information.states.json`

## 1. 区块与密度对照

| 区块 | 实现落点 | 密度 | 达成 |
|---|---|---|---|
| ① 类型 tab 3 | SegmentTabs × `infoTabs`（出物/求购/资讯）；类型色语义由卡内 Pill 承载（绿=出物/橙=求购/蓝=资讯，图标+文字双通道） | **3** | ✓ |
| ② 筛选 3 维 | 品类（`cats`）/价格区间（fixtures `priceRanges` 5 档）/交易方式（`tradeOptions` 邮寄·面交），Sheet 单选面板+选中回填 chip 标签+「清除」；资讯 tab 隐藏（官方发布无交易字段，见维度 E） | **3（≥3）** | ✓ |
| ③ 单列大卡 | 组内私有 `InfoCard`，**8 信息点**：①类型标签(Pill) ②标题一行 ③摘要两行 ④图 1–3 缩略(assets 键/`.ph` 角标占位) ⑤价格（出物=售价红字 PriceText；求购=「预算 ¥xxx」红字或「面议」） ⑥成色胶囊 ⑦交易方式（邮寄 / 面交·杭州，map-pin 图标） ⑧发布者昵称（可点→seller-profile）+相对时间 | **8（≥6）** | ✓ |
| ④ 浮动发布按钮 | Fab「发布信息」（megaphone 图标）→ publish-info；内容流底部 tail=92px（≥fab 46+24 避让，走查规避项） | tail 避让 | ✓ |
| 常驻风险语义 | 筛选下方常驻警示条「撮合信息不走平台担保，交易请谨慎」（warn-bg/warn-ink 5.53:1）——执行方案 §5.18 规避点 | 常驻 | ✓ |

## 2. 状态帧（10 帧，STATES 顺序即状态板帧序）

| 帧 | 渲染 |
|---|---|
| normal | 默认出物 tab：筛选 3 维+风险条+出物卡 2 条（id1/id2；求购/资讯按 tab 过滤，分别在 demand/news 帧呈现） |
| sell | 出物 tab（同 normal 视图，显式帧） |
| demand | 求购 tab：含「面议」样例（id4） |
| news | 资讯 tab：官方资讯卡（无价格/成色/交易字段，隐藏筛选行） |
| empty-sell | 「还没有出物信息」+发布出物→publish-info |
| empty-demand | 「还没有求购信息」+发布求购→publish-info |
| empty-news | 「暂无资讯，官方发布后在此展示」（无引导按钮：资讯无用户发布入口，与表单资讯禁用一致） |
| loading | 单列行骨架 ×3（.sk 骨架件，页内单列布局） |
| error | ErrorRetry 黄条「已保留缓存内容」+缓存列表照常渲染 |
| extreme | 压测行×2：超长标题两行截断+¥299,999.99（x1）/「面议」次文字色过 H（x2）——见 fixtures `infoExtreme` |

guest 不单列（pages.json na_reason）：三类型 normal 帧即未登录可见形态（浏览免登录）；发布动作经 publish-info guest 帧引导。

## 3. 决策触点与字段/组件对应

- **3 秒识别「这是卖还是买、价格多少、怎么交易」**：类型 Pill（图标+文字双通道）→ 售价红字 PriceText / 「预算」红字 / 「面议」→ 交易方式行（map-pin+邮寄/面交·城市）三段前置在卡内一眼可扫。
- **我想卖/求购**：Fab「发布信息」+顶栏 +（→publish-sheet 三类面板）双入口。

## 4. 九维度（A–I）本页取值

| 维 | 取值 |
|---|---|
| A | 三类型三帧（normal/sell/demand/news）+各 tab 空态帧+筛选无结果空态（运行时交互：清除筛选回默认）；loading 骨架；error 保留缓存 |
| B | 卡片按压态（scale 0.985）；筛选 chip 选中态（tint 底+深粉字，非单靠颜色）；发布双入口 |
| C | N/A：发布表单在 publish-info（pages.json 同口径） |
| D | 金额 tabular（PriceText/fmtMoney）；「面议」用 `--text-2`（5.44:1 ≥4.5 过 H，非弱字 `--text-3`）；相对时间（mock `time` 字段） |
| E | 卡片→info-detail；作者昵称→seller-profile；Fab→publish-info；顶栏 +→publish-sheet；筛选=Sheet（遮罩可点关）；资讯 tab 隐藏筛选（官方内容无交易字段，避免假筛选） |
| F | 分享＝标题+首图（规格表 §F 口径；原型不实现真分享面板） |
| G | 按 §0.6：图片懒加载（img loading=lazy）；列表无分页样例（5 条示意，接口按 page 参数设计） |
| H | 面议灰字对比度过 H（--text-2 5.44:1）；类型不单靠颜色（Pill 图标+文字）；筛选 chip 高 32px、行卡整卡可点（≥44 主触达面） |
| I | `GET /infos?type&filters&page`（示意数据=mock `infos`×组内 `fixtures.js` infoExtras 按 id 合并；类型/品类/价格区间/交易方式映射 type/cat/price/trade） |

## 5. 数据一致性说明

- 卡价格全走 data：id1 售价 199 / id2 售价 120 / id3 预算 450 / id4 面议（null）；与 info-detail 同源（同 id 同值）。
- 发布者解析（验收修复登记）：users 池内账号（ying/shichi/me/duhe）昵称可点→seller-profile，同屏无重复卖家；**池外账号（id5 官方「拍谷官方」）呈纯文本、不跳玩家主页**（官方无玩家主页语义，且不落「谷友」错名兜底）——InfoCard.vue 池外兜底逻辑，验收 issue#1 修复。
- 摘要/品类/城市/可见性/详情正文为 mock.js 之外的**组内扩展字段**，集中于 `components/information/fixtures.js`（文件头标注示意数据，非生产）；未改共享 mock.js，已登记提案待底座并入。

## 6. 占位与缺口

- 品类字段（cat）为组内扩展示意（mock infos 无该字段）；求购无图卡用 `.ph` 示意占位（带「示意图」角标），不冒充实拍。
- 无 toast 悬空入口：全部 navigate 目标均在注册表（publish-info/publish-sheet/info-detail/seller-profile/home）。

## 7. 视觉验收修复登记（2026-10-10 第二批）

- issue#1（中·官方账号错配）：News 卡发布者原兜底为「谷友」且可点跳玩家主页——InfoCard 改为「users 池内=玩家可点；池外官方=纯文本不跳转」，见 §5。
- issue#2（低·文档表述）：§2 normal 帧「5 条卡」改为「出物卡 2 条（其余类型按 tab 过滤）」，与实拍及规格表 tab 过滤语义一致。