# 小程序人生轨迹详情页操作区调整设计

日期：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. 验证窄屏下文本不重叠、不被底部按钮遮挡。

## 待确认事项

用户已确认“标题区域和内容区域合并”指顶部事件信息卡与事件描述卡合并。实施时按该解释执行。
