diff --git a/docs/superpowers/specs/2026-06-09-mini-program-life-event-detail-actions-design.md b/docs/superpowers/specs/2026-06-09-mini-program-life-event-detail-actions-design.md new file mode 100644 index 0000000..b1bbfc0 --- /dev/null +++ b/docs/superpowers/specs/2026-06-09-mini-program-life-event-detail-actions-design.md @@ -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 +{{ eventDescription }} +``` + +改为: + +```vue + + + +``` + +折叠样式施加在 `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. 验证窄屏下文本不重叠、不被底部按钮遮挡。 + +## 待确认事项 + +用户已确认“标题区域和内容区域合并”指顶部事件信息卡与事件描述卡合并。实施时按该解释执行。