心情随笔综合样式规范（记录 × 复盘 × 洞察）
字数
1048 字
阅读时间
5 分钟
参考《功能扩展方案》《社区导向整体开发方案》《tab页设计蓝图》《色彩系统》整理的视觉与实现规范。
1. 设计定位
- 角色：个人情绪与认知的“档案室”，承接自我表达、趋势复盘与任务派生。
- 核心体验：上半区聚焦“记录 + 情绪趋势”，下半区聚焦“随笔列表 + AI 摘要”，所有任务执行转交给任务 Tab。
- 视觉基调：延续 Calm Blue / Mint / Lavender，背景
--color-ink-0，卡片白底＋柔和阴影，营造低扰氛围。
2. 布局结构
┌──────────────────────────────────────────┐
│ 顶部导航：快速记一笔 / 晚安模式提示 / Segmented 控件（随笔｜趋势）
├──────────────────────────────────────────┤
│ [随笔视图] 多模录入入口 + 随笔卡列表 + 生成任务按钮
│ [趋势视图] 情绪折线 + 关键词词云 + 场景分类
└──────────────────────────────────────────┘
底部浮层：短按＋快速记一笔，长按 2s SOS3. 模块详解
3.1 顶部区域
- 顶栏背景白色，阴影
0 16rpx 48rpx rgba(15,20,26,0.04)，保持滚动吸顶。 - 左侧标题“心情随笔”，右侧按钮组：
快速记一笔（品牌蓝轮廓按钮）- 夜间进入晚安模式提醒（信息色描边 Chip）
- 分段控件：高度 112rpx，圆角 999；选中态填充
--color-brand-500，未选中透明配描边。
3.2 随笔视图 <JournalView>
- 多模录入入口
- 卡片
#FFFFFF＋阴影0 20rpx 60rpx rgba(15,20,26,0.06)，内含文本/语音/图片/REBT 四种录入方式。 - 文本（Lavender）、语音（Info）、图片（Mint）、REBT（Warning），每个入口 64×80rpx。
- 卡片
- 心情随笔卡
<JournalCard>- 头像＋时间＋情绪标签；正文三行截断，点击展开显示全文与 REBT 字段。
- 附件标签：语音（Lavender）、图片（Mint）、任务关联（Brand）。
- 底部操作：生成任务（Success 色系次按钮，点击跳转任务 Tab）、收藏、更多。
- AI 推荐条
- 在连续负向情绪时显示
#FFEFEF提示条，高度 152rpx，包含"联系 ASK"和"查看资源"两个垂直排列的次按钮。
- 在连续负向情绪时显示
3.3 趋势视图 <TrendView>
- 折线图：
- 主线品牌蓝，阈值线 Info-200；数据点根据情绪分类着色。
- 支持周/月切换，切换动画 200ms 内完成。
- 标签云：
- Chip 背景
--color-info-50，文本 Info-600；支持多选过滤。
- Chip 背景
- 场景分类条：
- 横向滑动条展示社交/学业/自我/健康等比例，点击筛选随笔列表。
4. 视觉与交互细节
- 卡片圆角 32rpx，阴影
0 24rpx 64rpx rgba(15,20,26,0.06)；长按可呼出操作菜单。 - 生成任务按钮：使用 Success 色系，背景
#EAFBF5+ 边框#2AC28D，文字#2AC28D，尺寸 80×40rpx，圆角 12rpx。 - AI 推荐条按钮：采用次按钮样式，联系 ASK 使用 Info 色系（背景
#EEF5FF+ 边框#3A7BD5），查看资源使用 Risk 色系（白色背景 + 浅红边框），尺寸 64×44rpx，圆角 12rpx。 - REBT 录入入口：背景
#FFF7E8，文字#F59E0B，配合悬停提示说明。 - 空状态：使用插画 + "写下今天的心情吧"，CTA 直接唤起录入面板。
- 列表滚动到顶时显示"今日情绪摘要"折叠条，可点击跳转今天页。
5. 数据绑定与埋点
| 模块 | 数据来源 | 关键状态 |
|---|---|---|
| 多模录入入口 | quick_note/config | 支持文本/语音/图片能力、REBT 开关 |
| 情绪趋势卡 | mood_trends/summary | 时间粒度、情绪分布、关键词云 |
| 随笔卡 | journals/list | mood_score、mood_tags、attachments、related_task_id |
| AI 推荐条 | risk_events/recommendations | 连续负向次数、推荐入口 |
该规范用于指引心情随笔页的视觉还原与交互实现；任务执行相关组件请参考《任务 Tab 样式规范》。
贡献者
Cai Hongyu