社区-帖子详情页高保真样式规范
字数
1955 字
阅读时间
8 分钟
参考高保真稿和页面文档，基于《色彩系统.md》与UI组件规范，聚焦帖子内容展示、互动功能与风险提示的视觉呈现。
1. 设计定位与体验目标
- 页面主任务：展示树洞帖子完整内容，支持互动反馈、风险评估与CBT支持，提供安全的社区互动环境。
- 体验关键词：沉浸阅读、安全互动、风险感知、支持引导。通过清晰的视觉层次和风险提示确保用户安全。
- 视觉策略：整页基底使用
--color-ink-0，内容区域白底卡片，风险提示使用语义色，保持与树洞主页视觉一致性。
2. 页面结构框架
┌──────────────────────────────────────────┐
│ 顶部导航栏：返回按钮 + 标题 + 更多操作（举报/分享）│
├──────────────────────────────────────────┤
│ 帖子内容区：作者信息（匿名）+ 发布时间 + 情绪标签 │
├──────────────────────────────────────────┤
│ 正文内容：支持展开/收起 + 关键词高亮 + 附件展示 │
├──────────────────────────────────────────┤
│ 风险提示条：根据风险等级显示不同颜色的提示条 │
├──────────────────────────────────────────┤
│ CBT支持建议：认知重构提示与Ask助理入口 │
├──────────────────────────────────────────┤
│ 互动区：抱抱、评论、收藏、行动卡生成 │
├──────────────────────────────────────────┤
│ 相关推荐：相似话题帖子或心理资源推荐 │
└──────────────────────────────────────────┘3. 模块规格详解
3.1 顶部导航栏
- 容器：高度 88rpx，背景白色，阴影
0 4rpx 16rpx rgba(15,20,26,0.08)。 - 返回按钮：左侧箭头图标，品牌蓝
--color-brand-500。 - 标题：居中显示"帖子详情"，字号 32rpx，字重 700，颜色
--color-ink-800。 - 更多操作：右侧三个点图标，点击展开举报、分享等选项。
3.2 作者信息区
- 容器：白底背景，内边距 32rpx，与内容区无缝连接。
- 匿名头像：40x80rpx 圆形，使用 Lavender 渐变背景
--color-info-50。 - 用户信息：匿名名称（如"安静的星星"）+ 匿名标签，标签背景
--color-info-50，文字--color-info-600。 - 发布时间：字号 24rpx，颜色
--color-ink-500，右侧显示情绪温度条。
3.3 正文内容区
- 容器：白底背景，内边距 32rpx，行高 1.6。
- 标题：字号 36rpx，字重 700，颜色
--color-ink-900，底部间距 16rpx。 - 正文：字号 30rpx，颜色
--color-ink-700，支持展开/收起功能。 - 关键词高亮：情绪关键词使用对应情绪色，风险词使用
--color-warning-500高亮。 - 附件展示：图片附件使用网格布局，语音附件显示播放控件。
3.4 风险提示条
- 容器：高度 80rpx，左右边距 32rpx，圆角 16rpx，根据风险等级显示不同背景色。
- R1 观察级：背景
--color-info-50，文字--color-info-600，图标--color-info-500。 - R2 关注级：背景
--color-warning-50，文字--color-warning-600，图标--color-warning-500。 - R3 警戒级：背景
--color-risk-r3，文字白色，图标白色。 - R4 升级级：背景
--color-risk-r4，文字白色，图标白色，右侧显示"已通知守护人"。
3.5 CBT支持建议
- 容器：背景
linear-gradient(135deg, #EDE9FE, #F3E8FF)，圆角 24rpx，内边距 32rpx。 - 标题："认知重构建议"，字号 28rpx，字重 600，颜色
#6D28D9。 - 建议内容：字号 26rpx，颜色
#6D28D9，行高 1.5。 - Ask助理按钮：品牌紫色按钮，背景
#6D28D9，文字白色，圆角 16rpx。
3.6 互动区
- 容器：白底背景，高度 120rpx，上下边框 2rpx solid
--color-ink-100。 - 互动按钮：水平排列，包含抱抱、评论、收藏、生成行动卡。
- 抱抱按钮：心形图标，默认灰色，点击后变为
--color-success-500。 - 评论按钮：对话气泡图标，品牌蓝
--color-brand-500。 - 收藏按钮：星形图标，默认灰色，点击后变为
--color-warning-500。 - 行动卡按钮：魔法棒图标，品牌蓝
--color-brand-500。
3.7 相关推荐
- 容器：背景
--color-ink-0，内边距 32rpx。 - 标题："相关推荐"，字号 28rpx，字重 600，颜色
--color-ink-700。 - 推荐列表：垂直排列的推荐卡片，包含话题帖子和心理资源。
4. 交互与状态要求
4.1 内容展开/收起
- 默认显示前3行内容，超出部分显示"展开全文"按钮。
- 展开后显示"收起"按钮，点击收起内容。
- 展开状态时，最大高度限制为屏幕高度的60%。
4.2 互动反馈
- 抱抱反馈：点击后心形图标变为实心，显示"+1"动画效果。
- 评论反馈：点击后跳转评论输入区，显示已有评论数量。
- 收藏反馈：点击后星形图标变为实心，添加到个人收藏列表。
- 行动卡生成：点击后弹出确认对话框，确认后生成相关行动任务。
4.3 风险提示交互
- 风险提示条始终显示，用户可点击查看详细说明。
- R3/R4级别风险提示条每30秒闪烁一次提醒用户注意。
- 风险提示条包含"了解更多"链接，点击跳转风险评估说明。
5. 响应式与实现提示
5.1 屏幕适配
- 基准宽度 750rpx，最大内容宽度 686rpx（左右边距 32rpx）。
- 小屏幕（<720rpx）时，减少内边距至 24rpx。
- 大屏幕（≥1536rpx）时，内容居中显示，最大宽度 960rpx。
5.2 内容处理
- 长文本自动换行，代码块使用特殊样式。
- 图片附件支持缩放查看，语音附件支持播放控制。
- 外部链接使用小程序内置WebView打开。
6. 数据绑定与埋点对齐
| 模块 | 数据来源 | 关键状态 | 样式影响 |
|---|---|---|---|
| 作者信息 | forum_posts | 匿名状态、情绪标签 | 头像样式、标签颜色 |
| 风险提示 | risk_signals | 风险等级、处理状态 | 背景色、文字内容 |
| CBT建议 | cbt_suggestions | 建议类型、相关性 | 显示/隐藏、内容变化 |
| 互动数据 | post_interactions | 互动数量、用户状态 | 图标状态、数量显示 |
| 相关推荐 | recommendation_engine | 推荐类型、相关性 | 列表内容、排序 |
7. 色彩映射表
| 页面元素 | HEX值 | Token映射 | 说明 |
|---|---|---|---|
| 主背景 | #F7F9FC | --color-ink-0 | 页面基底色 |
| 卡片背景 | #FFFFFF | #FFFFFF | 内容区域背景 |
| 品牌蓝主色 | #3A7BD5 | --color-brand-500 | 主要交互元素 |
| 品牌蓝浅 | #EEF5FF | --color-info-50 | 信息提示背景 |
| 警告色 | #F2B23D | --color-warning-500 | 警告提示 |
| 风险色R3 | #F97316 | --color-risk-r3 | 高风险提示 |
| 风险色R4 | #DC2626 | --color-risk-r4 | 严重风险提示 |
| CBT紫色 | #6D28D9 | #6D28D9 | 认知重构主题色 |
这是模板派生页面，基于今天页高保真样式规范生成，主要差异点：
- 风险提示系统：采用R1-R四级风险色阶，与今天页的单一状态不同
- CBT支持模块：专门针对社区帖子的认知重构建议
- 互动功能：包含抱抱、评论、收藏等社区特有的互动元素
- 安全机制：多重风险提示和守护人通知机制
贡献者
Cai Hongyu