---
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` 的视觉体系
- 修改无关组件
- 引入与当前问题无关的重构