jiapuapp/docs/superpowers/specs/2026-07-19-f01-family-feed-baseline-redesign.md

F01 家族动态基准页返工设计

目标

将 F01“家族动态”正常列表态重做为 F 模块视觉基准：消除动态卡框外白底和申请状态语义，强化内容阅读层级，并提升快捷入口的触控可用性。

修改范围

仅修改 F01 及其直接测试、候选资产和视觉证据：

• 四个内容快捷入口。
• 动态列表卡片。
• 空态与失败态共用的内容面板外观。
• 与以上结构直接相关的 F01 合同和运行时检查。

保持不变：

• 页头、“发布”入口、家族圈上下文、长背景和底部 Tab。
• 加载、列表、空、失败四种状态及现有路由行为。
• 发布按钮的项目现有真实资产。
• 其他 F 页面及公共组件。

视觉方案

家书动态卡

• 新增 F01 专属透明 PNG 内容卡资产，作为动态卡和空／失败内容面板的统一基底。
• 资产使用浅宣纸内面和克制的细金边，外框之外必须透明；不得出现白色矩形底、申请状态红竖线或右上状态短横。
• 设计语言偏“家书／家族记事”，与 T07 成员题签卡明显区分。
• 卡片宽度跟随内容区；412px 视口下单卡高度约 116–132px，内容在卡内垂直居中。

信息层级

• 标题为第一层级，使用楷体并保持最高字号与字重。
• 分类与时间位于标题上方，作为低权重辅助信息；只用文字强调，不增加装饰竖线。
• 正文位于标题下方，最多两行，颜色和字号低于标题。
• 发布人位于卡片底部，保持可读但不抢标题。
• 两张卡的宽度、高度和内边距完全一致。

快捷入口

• 保留“谱文、相册、礼仪、备忘”及现有真实卷轴按钮资产。
• 每个入口触控高度固定不低于 44 CSS px；320px 宽度下仍不得低于该值。
• 四个入口在一张全宽次级卷轴框内使用四列等宽布局，只保留一套卷轴端头和外框。
• 入口之间保持清楚间隔，不裁切文字，不出现横向页面溢出。

状态与操作

• 加载态继续使用 AppLoading。
• 空态和失败态使用同一张 F01 专属透明内容卡，不复用申请状态卡。
• 失败态“重新查看”和正常／空态“发布家族动态”继续使用现有项目按钮资产。

响应式与可用性

• 自动检查 320×568、360×640、360×800、412×915。
• 四档均不得产生横向溢出、文字裁切、卡片错位或 Tab 遮挡。
• 快捷入口和主要操作触控高度均不低于 44 CSS px。
• 页面保持现有内容滚动和底部安全区域处理。

验收条件

• 动态卡和状态面板没有框外白底。
• F01 不再引用 application-status-card.png。
• 动态卡不含申请状态式红竖线或右上短横。
• 标题是第一视觉焦点，分类／时间、正文、发布人层级清楚。
• 快捷入口四档尺寸均达到 44px 触控高度且没有页面横向溢出。
• 加载、列表、空、失败、发布和内容入口行为保持可用。
• F01 聚焦合同、既有 F 系列合同和 H5 运行时检查通过。

证据边界

• H5 截图只作为内部候选证据。
• Android/HBuilderX 真机或模拟器仍未验证，不据此宣称完成。

非目标

• 不修改其他 F 页面。
• 不抽取新的公共组件。
• 不连接真实接口。
• 不改动底部 Tab、页头或发布流程。

自检

• 无 TBD、TODO 或未决资产选择。
• 资产、布局、状态和验收条件没有冲突。
• 范围严格限定为 F01 及其直接测试和候选证据。