ChatModule 组件还原范围确认

我已扫描 14 个 HTML 视觉稿。下面按实现视角分组:相同视觉结构会抽共享基础卡片/媒体/详情页容器,组件只还原 之间的内容。

Detected component families

内容/详情卡

C0 长文本卡、C0+ 组合卡、C13 公告卡:列表态 + 详情态,复用详情页头部、返回、富文本正文、行动区。

POI / 列表 / 路线

C1 POI 详情、C2 列表、C2 多 POI、C3 对比、C4 路线、C5 设施位置:复用卡片壳、标签、图片缩略图、信息行。

媒体 / 操作卡

C7 大图、C8 地图导航、C10 AIGC 合照、C12 FAQ:复用媒体卡壳、底部说明、主按钮/入口行。

Recommended implementation direction
A

Props-first 组件库(推荐)

每个新 ChatModule 组件只接收 props,不在组件内拉接口;示例数据放到独立 mock 文件或父级传入,避免硬编码。

B

容器组件 + 展示组件

每个视觉组件拆成容器和纯展示两层;适合马上接真实接口,但文件数量和接线工作更多。

C

静态视觉还原优先

先按 HTML 固定数据还原,再二次抽数据;最快看见 UI,但违反“mock 数据不要硬编码”的风险最高。