peanut/happy-life-star

Fork 0

Files

T

peanut d710f529fc docs：补充人生轨迹详情页操作区调整设计

2026-06-09 22:51:46 +08:00

7.2 KiB

Raw Blame History

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

日期：2026-06-09 状态：待用户审核

背景

人生轨迹详情页当前由顶部事件信息卡、事件描述卡、AI 分析卡、标签卡和底部操作栏组成。截图中的详情页左上角存在编辑入口，右上角存在更多功能入口，底部操作栏同时承载编辑、收藏、聊天和分享。新的需求是减少顶部干扰，把事件标题和正文内容整合成一个更完整的阅读模块，并让正文使用现有 Markdown 组件渲染。

目标页面位于 mini-program/src/pages/life-event/detail.vue。现有 Markdown 组件位于 mini-program/src/components/Markdown.vue，已支持标题、分隔线、引用、列表、段落和粗体文本。

目标

安全移除详情页左上角编辑 icon 和右上角功能 icon。
将事件标题区域和事件内容区域合并成一张统一内容卡。
标题区域背景加深，与正文区域形成清晰但克制的层次区分。
事件正文必须通过现有 Markdown 组件渲染。
调整操作按钮位置：
- 收藏按钮在内容区域左上角。
- 分享按钮与收藏按钮同一水平线。
- 分析按钮弱化为浅色胶囊，凹到内容区域右上角。
- 编辑按钮迁移到内容区域左下角。
- 编辑按钮与收起按钮同一水平线。
- 分析按钮与收起按钮同一垂直线。
- 聊天按钮文案改为“聊聊”，居中显示。
保持当前小程序的宇宙深色、紫色玻璃、发光按钮和卡片边框风格。
保持现有功能完整，不改变接口和数据模型。

非目标

不重写 Markdown.vue。
不调整人生轨迹列表页、记录页或 AI 分析数据结构。
不新增后端 API。
不引入新的 UI 库或图标库。
不改动当前收藏、分享、编辑、聊天的业务方法语义。

页面结构

调整前：

floating-nav
hero-card
description-card
analysis-panel
tags-card
bottom-actions

调整后：

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 和本地缓存逻辑。

事件描述渲染方式从：

<text class="description-text">{{ eventDescription }}</text>

改为：

<view class="description-markdown">
  <Markdown :content="eventDescription" />
</view>

折叠样式施加在 description-markdown 外层。

样式原则

使用现有深色宇宙背景，不改变页面整体色板。
卡片半径、边框、内发光和文字颜色沿用当前 glass-card、analysis-panel 的风格。
标题区背景加深，但避免变成纯黑块；推荐使用深蓝紫渐变加低透明紫色光晕。
正文区保持阅读优先，文字对比度不低于当前 Markdown.vue 的默认表现。
所有操作按钮保持至少 64rpx 可点击高度。
不使用新图片资源；继续使用当前 CSS 绘制的封面占位。

风险与处理

Markdown 折叠

Markdown 是 block 结构，不能简单给单个 text 行数截断。实施时用外层容器限制高度，避免破坏 Markdown 组件。

操作入口减少

移除更多按钮后，原 action sheet 的功能会分散到内容区按钮。收藏、分享、编辑都有显式入口，功能不丢失。

安全区与底部遮挡

底部“聊聊”按钮仍需使用 safeAreaBottom。scroll-view 底部 padding 要同步调整，避免最后一张卡被遮挡。

文件编码

当前终端读取部分中文文件时出现 mojibake 风险。实施时只写明确中文文案“聊聊”“收藏”“分享”“编辑”“分析”“收起/展开”，并通过浏览器实际渲染验证。

验证计划

运行 mini-program H5 开发服务。
用浏览器打开人生轨迹详情页。
验证顶部编辑 icon 和更多 icon 已移除。
验证标题区与正文区位于同一张卡内，标题区背景更深。
验证事件描述通过 Markdown 组件渲染，标题、列表、粗体等格式正常。
验证收藏、分享、编辑、分析、收起/展开、聊聊按钮位置符合需求。
验证点击收藏、分享、编辑、聊聊不会报错。
验证浏览器 Console 无错误。
验证窄屏下文本不重叠、不被底部按钮遮挡。

待确认事项

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

7.2 KiB Raw Blame History