树洞综合样式规范（匿名表达 × 温和守护 × CBT支持）

字数

2113 字

阅读时间

9 分钟

依据《功能扩展方案》《社区导向整体开发方案》《tab页设计蓝图》《色彩系统》整理，聚焦社区主场与风控闭环，融入认知行为疗法支持。

1. 设计定位

• 角色：匿名/化名社区，提供安全表达、同伴反馈、风险预警与CBT支持。
• 体验目标：发布流程温柔、阅读轻松、风险提示明确但不惊扰、提供心理支持工具。
• 视觉基调：中性色为主，信息提示使用 Calm Blue；风险分级使用 R1-R4 色阶小面积呈现；CBT支持使用柔和紫色系。

2. 页面结构

┌──────────────────────────────────────────┐
│ 顶部栏：树洞标题 + "发帖"按钮 + 草稿入口 + 搜索/筛选
├──────────────────────────────────────────┤
│ 草稿自检浮层（按需出现）：礼貌守则 + 风险提示 + 匿名开关 + CBT建议
├──────────────────────────────────────────┤
│ 标签导航：推荐｜最新｜我的｜收藏｜话题下拉
├──────────────────────────────────────────┤
│ 温和守护Banner（按需显示）：系统公告或暖心提醒
├──────────────────────────────────────────┤
│ 信息流：树洞贴卡片（含情绪温度条、轻互动、CBT提示）+ 行动卡贴
├──────────────────────────────────────────┤
│ Ask心理助理入口（高风险帖自动展开）
└──────────────────────────────────────────┘
悬浮元素：右侧 SOS、底部导航与 Ask FAB 与全局保持一致

3. 模块详解

3.1 顶栏与发帖

• 顶栏背景白色，阴影 0 20rpx 60rpx rgba(15,20,26,0.06)；标题“树洞”。
• 右侧按钮：
  • 发帖 主按钮（品牌蓝），点击后先进入自检弹窗；
  • 草稿箱图标（Lavender 背景圆角）；
  • 搜索按钮（描边）。
• 自检浮层：
  • Step 1 礼貌守则勾选；Step 2 风险提示（高危词/可能的升级）；Step 3 CBT建议（如需要）；Step 4 匿名/化名切换和"允许辅导员私信"开关。

3.2 标签导航

• 推荐（默认选中）、最新、我的、收藏，左右滑动；
• 右侧话题下拉使用 Chips 形式，背景 --color-info-50。
• 选中态：背景品牌蓝，文字白；非选中：背景透明描边。

3.3 树洞贴卡 <HolePostCard>

• 卡面白底，圆角 48rpx，阴影 0 32rpx 72rpx rgba(15,20,26,0.08)。
• 顶部：头像替换为匿名图标（Lavender）；展示匿名标签（三角旗背景 Info-50），发布时间，情绪温度条（渐变蓝→紫）。
• 正文：最多四行，支持关键词高亮；
• CBT提示：在风险标签旁显示CBT建议图标（柔和紫色），点击可打开Ask助理进行认知重构。
• 底部：轻互动（抱抱、回应、收藏），风险角标：
  • R1 蓝灰描边；R2 琥珀 Badge；R3 橘红条幅；R4 红色条幅 + "已通知守护人"。
• 资源推荐：在帖子底部显示相关资源推荐（解压视频、放松音乐等）。
• 数据绑定：forum_posts、risk_signals、cbt_suggestions。

3.4 行动卡贴 <CommunityActionCard>

• 背景 --color-success-50，标题 Mint；
• 内容包含步骤列表、预计时长、标签、CBT技巧说明；
• CTA "领取任务"按钮（Success-500），领取后进入行为闭环。

3.5 Ask心理助理入口 <AskAssistantEntry>

• 自动触发：当检测到高风险内容（R3/R4）时自动展开
• 容器：宽 686rpx，圆角 40rpx，背景 linear-gradient(135deg,#EDE9FE,#F3E8FF)，阴影 0 16rpx 48rpx rgba(139,92,246,0.15)
• 标题："我注意到你最近的心情有些波动，愿意聊聊吗？"（28rpx/600/#5B21B6）
• CBT提示：显示"我可以帮你用认知行为疗法梳理思路"（24rpx/400/#6D28D9）
• CTA按钮：
  • "好的，聊聊"（品牌紫按钮，32rpx/600/#FFFFFF）
  • "暂时不用"（描边按钮，32rpx/600/#6D28D9）
• 专业支持：底部显示"也可联系专业心理老师"（20rpx/400/#9333EA）

3.6 置顶 Banner & 温和守护

• 若存在系统公告或暖心提醒（如考试周），显示在标签栏下方，背景 linear-gradient(180deg,#EEF5FF,#FFFFFF)。
• 风险提醒 Toast：内容抽象为"你最近的心情似乎波动较大，我们在这里"等，使用 Info-500 文案。
• CBT支持提示：在风险提醒中加入"试试认知重构练习"等建议。

4. 样式代码片段

$surface: #FFFFFF;
$shadow-card: 0 32rpx 72rpx rgba(15,20,26,0.08);
$brand: var(--color-brand-500);
$danger: var(--color-danger-500);
$cbt-accent: #EDE9FE;
$cbt-primary: #6D28D9;

.post-card {
  background: $surface;
  border-radius: 48rpx;
  box-shadow: $shadow-card;
  padding: 48rpx;
  .mood-bar {
    height: 12rpx;
    border-radius: 1998rpx;
    background: linear-gradient(90deg,#3A7BD5,#8C86FF);
  }
  .cbt-hint {
    background: $cbt-accent;
    color: $cbt-primary;
    border-radius: 24rpx;
    padding: 8rpx 16rpx;
    font-size: 20rpx;
    font-weight: 600;
  }
  .risk-flag[data-level="r2"] { color: var(--color-warning-500); background: var(--color-warning-50); }
  .risk-flag[data-level="r3"] { color: var(--color-risk-r3); background: rgba(249,115,22,0.16); }
  .risk-flag[data-level="r4"] { color: #FFF; background: $danger; }
  .resource-recommendation {
    background: #FEF3C7;
    border-radius: 24rpx;
    padding: 16rpx 24rpx;
    margin-top: 24rpx;
  }
}
.action-card {
  background: var(--color-success-50);
  border-radius: 48rpx;
  padding: 48rpx;
  .cbt-technique {
    background: $cbt-accent;
    color: $cbt-primary;
    border-radius: 16rpx;
    padding: 8rpx 16rpx;
    font-size: 22rpx;
    font-weight: 500;
  }
  .claim-btn {
    background: var(--color-success-500);
    &:hover { background: var(--color-success-600); }
  }
}
.ask-entry {
  background: linear-gradient(135deg,$cbt-accent,#F3E8FF);
  border-radius: 40rpx;
  padding: 40rpx;
  box-shadow: 0 16rpx 48rpx rgba(139,92,246,0.15);
  .title {
    color: $cbt-primary;
    font-size: 28rpx;
    font-weight: 600;
  }
  .cbt-desc {
    color: #6D28D9;
    font-size: 24rpx;
    font-weight: 400;
  }
  .primary-btn {
    background: $cbt-primary;
    color: #FFFFFF;
    border-radius: 24rpx;
    padding: 16rpx 32rpx;
  }
  .secondary-btn {
    background: transparent;
    color: $cbt-primary;
    border: 2rpx solid $cbt-primary;
    border-radius: 24rpx;
    padding: 16rpx 32rpx;
  }
}

5. 交互与状态

• 发帖流程未完成时自动保存草稿（本地 + 服务器）；
• 草稿自检中若检测到高危关键词，出具友善提示并推荐 SOS；如有需要，提供CBT建议；
• CBT提示图标点击后打开Ask助理，自动加载帖子内容作为上下文；
• 领取行动卡后弹出 Mint Toast，提示已写入"心情随笔-清单"，行动卡包含CBT技巧说明；
• 风险角标 R3/R4 时，卡片顶部添加浅色条强化，自动展开Ask助理入口，同时在后台触发 risk_signals 告警；
• Ask助理入口可选择"聊聊"进入CBT对话，或"暂时不用"收起，选择"聊聊"后记录用户选择用于优化推荐算法；
• 资源推荐支持点击查看详情，记录用户点击行为用于优化推荐算法。

6. 响应式 & 主题

断点	调整
<720rpx	互动按钮改为图标无文字
360-1534rpx	默认单列
≥1536rpx	双列 Masonry，发帖按钮移至左上角显性；自检浮层变侧栏

• 晚安模式：整体色调转暗，匿名头像背景改 #282F3A，互动按钮亮色轮廓。
• 考试周皮肤：Banner 展示“共学专区”，话题 Chips 使用 Mint 渐变。

7. 数据与工作流

入口	绑定	说明
发帖提交	论坛 ingest-预警工作流	脱敏→向量化→风险打分→可能升级，生成CBT建议
CBT提示点击	Ask Assistant工作流	加载上下文→启动CBT对话→记录效果
行动卡领取	行为闭环工作流	写入 behavior_tasks，来源标记 forum，包含CBT技巧
风险标记	risk_signals	控制前端角标与后台通知，触发Ask助理
Ask助理交互	ask_sessions + cbt_applications	记录对话过程和CBT应用
资源推荐点击	resources/recommendations	记录点击行为，优化推荐算法
匿名设置	consents + audit_logs	记录授权与查看轨迹

8. 无障碍与验收

• 文本对比达标；风险提示需伴随 icon 与文字；CBT提示需有语音播报说明。
• 互动按钮提供 aria-label，发布流程支持键盘操作；Ask助理支持语音交互。
• 验收要点：
  1. 自检流程完整，允许草稿保存，包含CBT建议步骤；
  2. 风险级别展示正确，并与后台记录同步，高风险时自动展开Ask助理；
  3. CBT提示点击可正常打开Ask助理并加载上下文；
  4. 行动卡领取可在心情随笔清单中查到，包含CBT技巧说明；
  5. 资源推荐点击可正常跳转，记录用户行为；
  6. 夜间/考试主题切换颜色一致，CBT元素保持可识别性。

---

规范旨在保障树洞页既温暖又安全，与预警和行为闭环系统协同一致。

贡献者

Cai Hongyu

文件历史

最后编辑于 5 个月前查看完整历史

f67c2-refactor: 重组项目目录结构，将文档迁移到notes文件夹

03774-docs(faq): 重新整理并扩充 MindGuard FAQ 与用户反馈文档

9b66b-docs(docs): 更新MindGuard文档与样式规范以支持心情随笔与任务Tab

18e56-2025-09-19 16:11:17