docs(spec): add script detail spacing design

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

@@ -0,0 +1,147 @@
+---
+author: Augment Agent
+created_at: 2026-04-08
+purpose: 小程序剧本详情页与创造未来页内容区间距对齐设计
+status: 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.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. “主题 / 风格 / 篇幅”卡片右侧不再贴屏，能清晰看到完整留白。
+3. 信息卡片和完整剧本卡片的圆角边框完整展示，不再产生贴边或截断感。
+4. 修复不引入以下副作用：
+   - 内容区过窄
+   - 顶部栏错位
+   - Markdown 异常换行
+   - 底部留白不足
+
+## 9. 测试建议
+
+优先使用最小范围验证：
+
+1. 进入“创造未来”页并打开任一剧本详情页
+2. 对比两页卡片的横向留白节奏
+3. 检查信息卡片右侧与屏幕边缘的距离
+4. 滚动到内容底部，确认最后一个卡片圆角完整显示
+5. 使用较长文本剧本验证 Markdown 内容区无异常挤压
+
+## 10. 实施边界
+
+实施时仅允许：
+
+- 修改 `mini-program/src/pages/main/ScriptDetailView.vue` 中与内容区 spacing 相关的样式
+- 以“创造未来”页上层容器节奏为参照进行对齐
+
+实施时不应：
+
+- 顺手修改 `ScriptView.vue` 的视觉体系
+- 修改无关组件
+- 引入与当前问题无关的重构