51 lines
4.5 KiB
Markdown
51 lines
4.5 KiB
Markdown
# 全活动页面业务所有权与成熟度收敛设计
|
||
|
||
## 目标
|
||
|
||
在不接业务接口、不改变现有浅色国风视觉体系的前提下，把 52 个活动路由从“视觉覆盖稿”收敛为可独立理解、可本地操作、可扩容的 H5 产品候选。共享组件只负责背景、页头、按钮、弹窗、提示和加载等视觉原语；每个业务页面必须自己拥有字段、内容结构、状态语义、入口与下一步。
|
||
|
||
## 已确认根因
|
||
|
||
`components/ModulePage.vue` 与 `data/page-catalog.js` 当前同时拥有 F/R/N/M 23 个路由的业务结构和交互。不同任务只替换标题、字段数组或模板类型，造成动态详情、谱文、相册、贺礼、礼仪、成长日志、消息详情、个人资料、安全、帮助、反馈、推广、订单和关于页共享同一套“查看详情／提交后成功”行为。历史规划已经把它定义为第一版覆盖工具而非最终视觉答案，因此用户对同质化的怀疑成立。
|
||
|
||
## 五方案比较
|
||
|
||
1. **继续沿用单一 `ModulePage`**：改动最少，但业务含义继续由模板猜测，不能成为成熟产品，淘汰。
|
||
2. **扩大 `pageCatalog` 配置协议**：可补字段类型和动作，但会把页面逻辑继续集中到一个巨型解释器，配置与运行时容易分叉，淘汰。
|
||
3. **按 form/list/detail/timeline/settings 拆五个业务组件**：比单一母版清晰，但“同样是表单”不代表个人资料、密码、礼仪和反馈拥有相同验证与状态，仅作为视觉结构参考。
|
||
4. **每页复制完整视觉与业务代码**：业务独立但重复背景、页头、按钮和状态样式，后续全局调整风险过高，淘汰。
|
||
5. **共享视觉原语、页面拥有业务（最优）**：活动路由不再委托 `ModulePage` 或 `pageCatalog`；每页直接声明真实本地数据、字段类型、状态和动作，只复用 `ModulePageBackground`、`PageHeader`、`AppButton`、`AppDialog`、`AppToast`、`AppLoading` 等稳定视觉原语与公共样式。
|
||
|
||
## 所有权边界
|
||
|
||
- 页面拥有：业务文案、字段与输入类型、列表项目结构、空/加载/失败/权限/失效/成功状态、校验、确认动作、入口和返回目标。
|
||
- 公共组件拥有：模块长背景、顶部/底部导航、按钮表面、卷轴弹窗、Toast、Loading、稳定卡片皮肤映射。
|
||
- `ModulePage.vue` 与 `page-catalog.js` 不再是活动路由入口；为遵守现有文件保留要求，文件保留为封存历史实现，并由合同禁止活动页面引用。
|
||
- 不接 `utils/api.js`；页面使用真实语义的本地 mock 数据与查询参数状态，接口阶段替换数据源而不重写视觉结构。
|
||
|
||
## 分模块业务内容
|
||
|
||
- F：动态详情/评论、谱文列表与详情、相册列表必须各自拥有内容和动作；编辑、上传与待开放页沿用现有独立实现。
|
||
- R：贺礼、礼仪、成长日志、人生事、备忘、功德分别拥有对应金额/关系/时间/地点/人物/提醒/贡献字段，不再是通用卡片换标题。
|
||
- N：消息详情拥有消息类型、时间、正文、已读与业务去向。
|
||
- M：资料、安全、改密、改手机、帮助、反馈、推广、订单、关于分别拥有正确控件、校验、确认与状态。
|
||
- A/G/T：保留现有独立页面，重点复核共享组件边界、长数据、长文本、状态与导航，不为了统一而退回母版。
|
||
|
||
## 数据驱动与视觉规则
|
||
|
||
- 普通内容由文档流自然撑高；列表使用数组渲染，不写死项目数。
|
||
- 文字允许换行；只有真实媒体缩略图、图标和结构画布可精确裁切。
|
||
- 表单使用与语义匹配的 `input` 类型和 `textarea auto-height`；长列表末项必须可达。
|
||
- 四档 H5：320×568、360×640、360×800、412×915；压力覆盖 1/10/50 条、三倍长文案和 1.3 倍字号模拟。
|
||
- 视觉继续使用仓库现有真实位图资产，不新增 CSS 伪装饰、占位资产或手绘 SVG。
|
||
|
||
## 验收
|
||
|
||
1. 52 个活动路由均能被 Vite 转换并通过静态资产、定位、数据容量合同。
|
||
2. 活动页面对 `ModulePage` 的引用为 0；页面目录不再是活动业务合同。
|
||
3. 每个替换页至少有一个页面专属合同，验证核心字段、状态、动作、路由和禁止项。
|
||
4. 四档运行 smoke 无横向溢出，长内容不裁切，主动作和末项可达。
|
||
5. 代表页面与同模块长期参考图同尺寸比较；视觉自审不能替用户的最终 `[x]`，但代码与候选状态必须完整记录。
|
||
6. 不宣称接口、Android/HBuilderX、系统字体缩放或真实系统权限完成。
|
||
|