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