docs：补充人生轨迹详情页操作区调整设计
This commit is contained in:
@@ -0,0 +1,192 @@
|
||||
# 小程序人生轨迹详情页操作区调整设计
|
||||
|
||||
日期：2026-06-09
|
||||
状态：待用户审核
|
||||
|
||||
## 背景
|
||||
|
||||
人生轨迹详情页当前由顶部事件信息卡、事件描述卡、AI 分析卡、标签卡和底部操作栏组成。截图中的详情页左上角存在编辑入口，右上角存在更多功能入口，底部操作栏同时承载编辑、收藏、聊天和分享。新的需求是减少顶部干扰，把事件标题和正文内容整合成一个更完整的阅读模块，并让正文使用现有 Markdown 组件渲染。
|
||||
|
||||
目标页面位于 `mini-program/src/pages/life-event/detail.vue`。现有 Markdown 组件位于 `mini-program/src/components/Markdown.vue`，已支持标题、分隔线、引用、列表、段落和粗体文本。
|
||||
|
||||
## 目标
|
||||
|
||||
1. 安全移除详情页左上角编辑 icon 和右上角功能 icon。
|
||||
2. 将事件标题区域和事件内容区域合并成一张统一内容卡。
|
||||
3. 标题区域背景加深，与正文区域形成清晰但克制的层次区分。
|
||||
4. 事件正文必须通过现有 `Markdown` 组件渲染。
|
||||
5. 调整操作按钮位置：
|
||||
- 收藏按钮在内容区域左上角。
|
||||
- 分享按钮与收藏按钮同一水平线。
|
||||
- 分析按钮弱化为浅色胶囊，凹到内容区域右上角。
|
||||
- 编辑按钮迁移到内容区域左下角。
|
||||
- 编辑按钮与收起按钮同一水平线。
|
||||
- 分析按钮与收起按钮同一垂直线。
|
||||
- 聊天按钮文案改为“聊聊”，居中显示。
|
||||
6. 保持当前小程序的宇宙深色、紫色玻璃、发光按钮和卡片边框风格。
|
||||
7. 保持现有功能完整，不改变接口和数据模型。
|
||||
|
||||
## 非目标
|
||||
|
||||
1. 不重写 `Markdown.vue`。
|
||||
2. 不调整人生轨迹列表页、记录页或 AI 分析数据结构。
|
||||
3. 不新增后端 API。
|
||||
4. 不引入新的 UI 库或图标库。
|
||||
5. 不改动当前收藏、分享、编辑、聊天的业务方法语义。
|
||||
|
||||
## 推荐方案
|
||||
|
||||
采用“单卡合并，局部重排”方案。把当前 `hero-card` 和 `description-card` 合并为新的 `event-content-card`，在同一张卡中形成上下两个区域：
|
||||
|
||||
- `event-hero-section`：展示年份、日期、标签、标题、地点和插画。该区域背景使用更深的蓝紫色叠层和轻微内发光，视觉上像卡片的标题头部。
|
||||
- `event-body-section`：展示事件描述标题、正文 Markdown、收藏/分享/分析/编辑/收起等操作。正文区域背景更轻，保持玻璃感和可读性。
|
||||
|
||||
该方案改动集中，既能满足布局需求，也能最大程度复用现有方法与样式。
|
||||
|
||||
## 页面结构
|
||||
|
||||
调整前：
|
||||
|
||||
```text
|
||||
floating-nav
|
||||
hero-card
|
||||
description-card
|
||||
analysis-panel
|
||||
tags-card
|
||||
bottom-actions
|
||||
```
|
||||
|
||||
调整后：
|
||||
|
||||
```text
|
||||
event-content-card
|
||||
event-hero-section
|
||||
event-body-section
|
||||
event-body-toolbar
|
||||
favorite action
|
||||
analysis action
|
||||
share action
|
||||
section-title-row
|
||||
markdown description
|
||||
event-body-footer
|
||||
edit action
|
||||
collapse action
|
||||
analysis-panel
|
||||
tags-card
|
||||
bottom-chat-action
|
||||
```
|
||||
|
||||
`floating-nav` 整行不再渲染，避免左上角与右上角继续出现悬浮 icon。本次不新增替代顶部功能入口，页面返回依赖小程序或 H5 容器已有的导航能力。
|
||||
|
||||
## 交互设计
|
||||
|
||||
### 顶部图标
|
||||
|
||||
移除当前悬浮导航整行。对应的 `openMore` 和 `goBack` 可以保留为未使用方法，也可以在实施时移除无引用代码；推荐优先移除模板绑定，避免扩大行为改动。
|
||||
|
||||
### 标题与正文合并
|
||||
|
||||
事件标题区继续展示：
|
||||
|
||||
- 年份
|
||||
- 日期或日期范围
|
||||
- 主标签
|
||||
- 事件标题
|
||||
- 城市/地点
|
||||
- 当前插画占位
|
||||
|
||||
正文区展示：
|
||||
|
||||
- “事件描述”标题
|
||||
- 事件内容的 Markdown 渲染结果
|
||||
- 折叠/展开控制
|
||||
|
||||
折叠状态沿用 `isDescriptionCollapsed`。折叠时对 Markdown 容器外层做高度或行数限制，展开时完整展示。由于 Markdown 内部包含多种 block，推荐用外层 `max-height` 加 `overflow: hidden`，而不是直接给内部文本加 `-webkit-line-clamp`。
|
||||
|
||||
### 按钮位置
|
||||
|
||||
正文区域顶部工具行：
|
||||
|
||||
- 左侧：收藏按钮，复用当前 `toggleFavorite`。
|
||||
- 右侧：分享按钮，复用当前 `shareCurrent`。
|
||||
- 右上凹位：分析按钮，使用更浅的紫色半透明胶囊，文案为“分析”。点击后把当前 `scroll-view` 定位到下方 AI 分析区。
|
||||
|
||||
正文区域底部工具行：
|
||||
|
||||
- 左下角：编辑按钮，复用当前 `editEvent`。
|
||||
- 右侧：收起/展开按钮，复用 `isDescriptionCollapsed` 切换。
|
||||
|
||||
底部主聊天按钮：
|
||||
|
||||
- 保留底部固定操作区或压缩为一个居中主按钮。
|
||||
- 文案改为“聊聊”。
|
||||
- 点击继续调用 `chatEvent`。
|
||||
- 视觉延续当前紫色渐变发光按钮。
|
||||
|
||||
## 数据流
|
||||
|
||||
不改变数据来源：
|
||||
|
||||
- `displayEvent` 继续从 store 或缓存读取。
|
||||
- `eventDescription` 继续从 `content` 或 `description` 派生。
|
||||
- `markdownAnalysis` 和 `hasMarkdownAnalysis` 继续服务 AI 分析区。
|
||||
- `isFavorite` 继续使用当前 store 和本地缓存逻辑。
|
||||
|
||||
事件描述渲染方式从：
|
||||
|
||||
```vue
|
||||
<text class="description-text">{{ eventDescription }}</text>
|
||||
```
|
||||
|
||||
改为：
|
||||
|
||||
```vue
|
||||
<view class="description-markdown">
|
||||
<Markdown :content="eventDescription" />
|
||||
</view>
|
||||
```
|
||||
|
||||
折叠样式施加在 `description-markdown` 外层。
|
||||
|
||||
## 样式原则
|
||||
|
||||
1. 使用现有深色宇宙背景，不改变页面整体色板。
|
||||
2. 卡片半径、边框、内发光和文字颜色沿用当前 `glass-card`、`analysis-panel` 的风格。
|
||||
3. 标题区背景加深，但避免变成纯黑块；推荐使用深蓝紫渐变加低透明紫色光晕。
|
||||
4. 正文区保持阅读优先，文字对比度不低于当前 `Markdown.vue` 的默认表现。
|
||||
5. 所有操作按钮保持至少 64rpx 可点击高度。
|
||||
6. 不使用新图片资源；继续使用当前 CSS 绘制的封面占位。
|
||||
|
||||
## 风险与处理
|
||||
|
||||
### Markdown 折叠
|
||||
|
||||
Markdown 是 block 结构，不能简单给单个 text 行数截断。实施时用外层容器限制高度，避免破坏 Markdown 组件。
|
||||
|
||||
### 操作入口减少
|
||||
|
||||
移除更多按钮后，原 action sheet 的功能会分散到内容区按钮。收藏、分享、编辑都有显式入口，功能不丢失。
|
||||
|
||||
### 安全区与底部遮挡
|
||||
|
||||
底部“聊聊”按钮仍需使用 `safeAreaBottom`。`scroll-view` 底部 padding 要同步调整，避免最后一张卡被遮挡。
|
||||
|
||||
### 文件编码
|
||||
|
||||
当前终端读取部分中文文件时出现 mojibake 风险。实施时只写明确中文文案“聊聊”“收藏”“分享”“编辑”“分析”“收起/展开”，并通过浏览器实际渲染验证。
|
||||
|
||||
## 验证计划
|
||||
|
||||
1. 运行 `mini-program` H5 开发服务。
|
||||
2. 用浏览器打开人生轨迹详情页。
|
||||
3. 验证顶部编辑 icon 和更多 icon 已移除。
|
||||
4. 验证标题区与正文区位于同一张卡内，标题区背景更深。
|
||||
5. 验证事件描述通过 Markdown 组件渲染，标题、列表、粗体等格式正常。
|
||||
6. 验证收藏、分享、编辑、分析、收起/展开、聊聊按钮位置符合需求。
|
||||
7. 验证点击收藏、分享、编辑、聊聊不会报错。
|
||||
8. 验证浏览器 Console 无错误。
|
||||
9. 验证窄屏下文本不重叠、不被底部按钮遮挡。
|
||||
|
||||
## 待确认事项
|
||||
|
||||
用户已确认“标题区域和内容区域合并”指顶部事件信息卡与事件描述卡合并。实施时按该解释执行。
|
||||
Reference in New Issue
Block a user