diff --git a/docs/superpowers/specs/2026-04-08-mini-program-script-detail-spacing-design.md b/docs/superpowers/specs/2026-04-08-mini-program-script-detail-spacing-design.md index bbcecb0..adf1238 100644 --- a/docs/superpowers/specs/2026-04-08-mini-program-script-detail-spacing-design.md +++ b/docs/superpowers/specs/2026-04-08-mini-program-script-detail-spacing-design.md @@ -51,6 +51,17 @@ status: approved-in-chat - 调整详情页滚动内容区的外层边距,使其与创造未来页卡片的横向节奏一致 - 保留详情页卡片各自的内部 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 @@ -115,9 +126,10 @@ status: approved-in-chat 修复完成后,应满足: 1. 从“创造未来”页进入详情页后,详情页两张卡片的左右起止线与上一页卡片的横向节奏一致。 -2. “主题 / 风格 / 篇幅”卡片右侧不再贴屏,能清晰看到完整留白。 -3. 信息卡片和完整剧本卡片的圆角边框完整展示,不再产生贴边或截断感。 -4. 修复不引入以下副作用: +2. `detail-content` 的横向留白与 `tab-page` 视觉一致,即按 `32rpx` 基准实现。 +3. “主题 / 风格 / 篇幅”卡片右侧不再贴屏,能清晰看到完整留白。 +4. 信息卡片和完整剧本卡片的圆角边框完整展示,不再产生贴边或截断感。 +5. 修复不引入以下副作用: - 内容区过窄 - 顶部栏错位 - Markdown 异常换行