happy-life-star/docs/superpowers/specs/2026-04-08-mini-program-script-detail-spacing-design.md

author, created_at, purpose, status

author	created_at	purpose	status
Augment Agent	2026-04-08	小程序剧本详情页与创造未来页内容区间距对齐设计	approved-in-chat

小程序剧本详情页间距对齐设计

1. 背景

当前小程序剧本详情页 mini-program/src/pages/main/ScriptDetailView.vue 中，顶部“主题 / 风格 / 篇幅”信息卡片与下方“完整剧本”内容卡片的右侧边界贴近屏幕，导致：

• 右侧留白不足，视觉上与屏幕边缘重合
• 卡片圆角和边框展示不完整
• 与“创造未来”页的卡片横向节奏不一致

用户已确认本次目标为：让整个详情页内容区与“创造未来”页保持一致，而非只修单一卡片或只做最小数值补丁。

2. 目标与非目标

2.1 目标

1. 让详情页内容区的横向外边距与“创造未来”页保持同一视觉节奏。
2. 让信息卡片与完整剧本卡片的左右起止线保持一致。
3. 保证卡片圆角、边框、阴影在右侧与底部完整展示。
4. 将屏幕外边距与卡片内部内边距职责分离，降低后续反复调数值的概率。

2.2 非目标

• 不修改详情页的数据获取逻辑、store、路由参数处理。
• 不改顶部导航栏结构。
• 不重写 Markdown 渲染组件。
• 不抽取新的全局 spacing 系统或做跨页面大范围重构。

3. 当前结构与问题成因

“创造未来”页 ScriptView.vue 本身没有独立定义页面外层横向留白，其视觉节奏来自 mini-program/src/pages/main/index.vue 中的 tab-page 容器。

详情页 ScriptDetailView.vue 是一个独立页面，单独通过 detail-content 控制内容区 padding。近期提交中该值在 40rpx 与 24rpx 之间多次来回调整，反映出当前修复方式主要依赖手动改数值，而不是明确布局责任层级。

因此，本次问题的根因是：详情页内容区没有按“创造未来”页所在的页面壳节奏来定义外层留白，导致视觉对齐依赖局部补丁。

4. 设计决策

4.1 推荐方案

采用“对齐页面壳节奏”方案：

• 以“创造未来”页所在 tab-page 的横向留白为参考基准
• 调整详情页滚动内容区的外层边距，使其与创造未来页卡片的横向节奏一致
• 保留详情页卡片各自的内部 padding，不将屏幕边距职责下放到卡片本身

4.1.1 目标 spacing 基准

为保证实施时不再围绕 24rpx / 40rpx 反复摇摆，本次明确以下目标值：

• 参考基准：mini-program/src/pages/main/index.vue 中 tab-page 的横向 padding 32rpx
• 详情页 detail-content：横向 padding 目标为 32rpx
• 详情页 detail-content：顶部 padding 可保持 24rpx
• 详情页 detail-content：底部 padding 目标为 32rpx 起，若真机验证仍出现底部圆角不完整，可增加到 40rpx
• content-container：保持承担卡片栈间距，目标 gap 为 24rpx
• info-card 与 full-content：不新增额外横向 margin，继续依赖外层容器提供屏幕留白

4.2 不采用的方案

方案 A：只加大详情页右侧 padding

优点是改动小；缺点是仍然属于局部打补丁，后续当主页面节奏变化时容易再次偏离。

方案 B：抽象为共享内容区容器

优点是长期最稳；缺点是超出当前问题范围，会扩大改动面，不符合这次“聚焦修复”的边界。

5. 布局职责划分

5.1 页面级容器

detail-content 负责：

• 屏幕左右外边距
• 顶部导航下方到页面底部的滚动内容承载
• 底部安全展示空间

这是本次主要改动点。

5.2 内容栈容器

content-container 负责：

• 信息卡片与完整剧本卡片之间的垂直间距
• 纯内容排列，不承担屏幕边距职责

5.3 卡片级容器

info-card 与 full-content 继续负责：

• 卡片内部内容 padding
• 圆角、边框、阴影与视觉风格

卡片本身不额外承担对齐屏幕边距的职责。

6. 数据流与行为影响

本次设计不改变现有数据流：

1. 用户在 ScriptView.vue 点击剧本卡片
2. 通过 uni.navigateTo 进入 ScriptDetailView
3. 页面根据 id 从 store 中读取剧本数据
4. 渲染标题、信息卡片和 Markdown 内容

因此，本次修复仅影响样式布局，不应影响页面行为、数据绑定或 Markdown 内容生成。

7. 异常与边界情况

实现必须覆盖以下情况：

• 长标题仍然在导航栏中正常省略显示
• 长主题/风格/篇幅值在信息卡片中不产生新的右侧溢出问题
• 超长 Markdown 内容仍保持可阅读，不出现右侧裁切感
• 小屏设备上右侧留白稳定可见，卡片圆角完整展示
• 滚动到底部时，最后一个卡片的底部圆角与阴影完整可见

8. 验收标准

修复完成后，应满足：

1. 从“创造未来”页进入详情页后，详情页两张卡片的左右起止线与上一页卡片的横向节奏一致。
2. detail-content 的横向留白与 tab-page 视觉一致，即按 32rpx 基准实现。
3. “主题 / 风格 / 篇幅”卡片右侧不再贴屏，能清晰看到完整留白。
4. 信息卡片和完整剧本卡片的圆角边框完整展示，不再产生贴边或截断感。
5. 修复不引入以下副作用：
   • 内容区过窄
   • 顶部栏错位
   • Markdown 异常换行
   • 底部留白不足

9. 测试建议

优先使用最小范围验证：

1. 进入“创造未来”页并打开任一剧本详情页
2. 对比两页卡片的横向留白节奏
3. 检查信息卡片右侧与屏幕边缘的距离
4. 滚动到内容底部，确认最后一个卡片圆角完整显示
5. 使用较长文本剧本验证 Markdown 内容区无异常挤压

10. 实施边界

实施时仅允许：

• 修改 mini-program/src/pages/main/ScriptDetailView.vue 中与内容区 spacing 相关的样式
• 以“创造未来”页上层容器节奏为参照进行对齐

实施时不应：

• 顺手修改 ScriptView.vue 的视觉体系
• 修改无关组件
• 引入与当前问题无关的重构