日记域-日记详情页高保真样式规范

字数

2136 字

阅读时间

9 分钟

参考高保真稿和页面文档，基于《色彩系统.md》与UI组件规范，聚焦日记内容展示、REBT模块和任务生成的视觉呈现。

1. 设计定位与体验目标

页面主任务：展示单篇日记的完整内容，支持REBT认知重构模块查看、任务生成和分享导出功能。
体验关键词：深度反思、认知重构、行动导向、隐私安全。通过清晰的视觉层次帮助用户进行自我觉察和认知调整。
视觉策略：整页基底使用 --color-ink-0，内容区域白底卡片，REBT模块使用特殊强调色，保持与心情随笔页视觉一致性。

2. 页面结构框架

┌──────────────────────────────────────────┐
│ 顶部导航栏：返回按钮 + 标题 + 更多操作（编辑/删除/分享）│
├──────────────────────────────────────────┤
│ 日记信息区：创建时间 + 情绪状态 + 标签 │
├──────────────────────────────────────────┤
│ 正文内容区：支持多种格式（文本/语音/图片）│
├──────────────────────────────────────────┤
│ REBT分析模块：A-B-C-D-E认知重构分析 │
├──────────────────────────────────────────┤
│ AI洞察：情绪分析 + 认知模式识别 + 改善建议 │
├──────────────────────────────────────────┤
│ 关联任务：派生任务列表 + 执行状态 │
├──────────────────────────────────────────┤
│ 操作区：生成任务 + 编辑 + 分享/导出 │
└──────────────────────────────────────────┘

3. 模块规格详解

3.1 顶部导航栏

容器：高度 88rpx，背景白色，阴影 0 4rpx 16rpx rgba(15,20,26,0.08)。
返回按钮：左侧箭头图标，品牌蓝 --color-brand-500。
标题：居中显示"日记详情"，字号 32rpx，字重 700，颜色 --color-ink-800。
更多操作：右侧三个点图标，点击展开编辑、删除、分享等选项。

3.2 日记信息区

容器：白底背景，内边距 32rpx，与内容区无缝连接。
创建时间：字号 28rpx，颜色 --color-ink-500，格式为"YYYY年MM月DD日 HH:mm"。
情绪状态：
- 情绪标签：使用对应情绪色，圆形背景，白字
- 情绪强度：0-10分显示，配合进度条
标签列表：
- 圆角标签，背景 --color-ink-100，文字 --color-ink-600
- 支持场景、人物、活动等多维度标签

3.3 正文内容区

容器：白底背景，内边距 32rpx，行高 1.6。
文本内容：
- 标题：字号 36rpx，字重 700，颜色 --color-ink-900
- 正文：字号 30rpx，颜色 --color-ink-700
- 支持段落格式、列表、引用等富文本格式
语音内容：
- 播放器控件：播放/暂停按钮、进度条、时长显示
- 波形图显示：使用品牌蓝渐变色
图片内容：
- 网格布局展示，支持点击放大查看
- 图片描述文字显示在图片下方

3.4 REBT分析模块

容器：背景 linear-gradient(135deg, #FFF7E8, #FFFBF0)，圆角 24rpx，内边距 32rpx。
模块标题："REBT认知重构分析"，字号 32rpx，字重 600，颜色 --color-warning-600。
分析内容：
- A（事件）：客观描述，字号 28rpx，颜色 --color-ink-700
- B（信念）：非理性信念识别，字号 28rpx，颜色 --color-warning-600
- C（结果）：情绪和行为结果，字号 28rpx，颜色 --color-ink-700
- D（辩论）：理性辩论过程，字号 28rpx，颜色 --color-info-600
- E（新认知）：新的理性认知，字号 28rpx，颜色 --color-success-600
折叠功能：
- 默认折叠显示摘要，点击展开详细内容
- 展开按钮显示"查看完整分析"

3.5 AI洞察

容器：背景 --color-info-50，圆角 24rpx，内边距 32rpx。
洞察标题："AI洞察分析"，字号 32rpx，字重 600，颜色 --color-info-600。
洞察内容：
- 情绪趋势分析：情绪变化的可视化展示
- 认知模式识别：常见的思维模式识别
- 改善建议：个性化的改善建议
建议标签：
- 圆角标签，背景 --color-success-50，文字 --color-success-600
- 可点击查看详细建议内容

3.6 关联任务

容器：白底背景，圆角 24rpx，内边距 32rpx。
任务标题："关联任务"，字号 28rpx，字重 600，颜色 --color-ink-700。
任务列表：
- 每个任务显示标题、状态、截止时间
- 任务状态使用不同颜色标识：
  - 待完成：--color-ink-500
  - 进行中：--color-brand-500
  - 已完成：--color-success-500
  - 已跳过：--color-warning-500
新建任务：
- "生成新任务"按钮，品牌蓝背景 --color-brand-500

3.7 操作区

容器：底部固定区域，高度 120rpx，背景白色，上边框 2rpx solid --color-ink-100。
操作按钮：
- 生成任务：品牌蓝 --color-brand-500，圆角 16rpx
- 编辑：描边按钮 --color-brand-500
- 分享/导出：描边按钮 --color-ink-500
删除确认：
- 删除操作需要二次确认
- 确认对话框使用危险色 --color-danger-500

4. 交互与状态要求

4.1 内容展示

REBT模块：默认折叠显示，点击展开完整内容
AI洞察：异步加载，显示加载状态，完成后展示分析结果
图片查看：支持点击放大，手势缩放，滑动切换
语音播放：支持播放控制，显示播放进度和波形

4.2 任务操作

生成任务：点击后弹出任务创建表单，预填充相关内容
任务跳转：点击任务项跳转到任务详情页
任务状态：实时同步任务执行状态

4.3 编辑功能

快速编辑：点击编辑按钮跳转到编辑页面
删除确认：删除操作需要用户确认，防止误删
分享导出：支持多种格式导出（图片、PDF、文本）

5. 响应式与实现提示

5.1 屏幕适配

基准宽度 750rpx，最大内容宽度 686rpx（左右边距 32rpx）
小屏幕（<720rpx）时，减少内边距至 24rpx
大屏幕（≥1536rpx）时，内容居中显示，最大宽度 960rpx

5.2 性能优化

图片懒加载，减少首屏加载时间
长文本分页加载，避免单次加载过多内容
REBT分析结果缓存，避免重复计算

6. 数据绑定与埋点对齐

模块	数据来源	关键状态	样式影响
日记信息	journal_entries	创建时间、情绪标签、关联标签	时间格式、标签颜色
REBT分析	rebt_analyses	分析完整性、置信度	模块显示状态、置信度标识
AI洞察	ai_insights	分析状态、洞察类型	加载状态、内容展示
关联任务	behavior_tasks	任务状态、完成进度	任务状态颜色、进度显示
操作记录	user_actions	编辑历史、分享记录	操作按钮状态

7. 色彩映射表

页面元素	HEX值	Token映射	说明
主背景	#F7F9FC	`--color-ink-0`	页面基底色
卡片背景	#FFFFFF	#FFFFFF	内容区域背景
品牌蓝主色	#3A7BD5	`--color-brand-500`	主要交互元素
REBT模块背景	#FFF7E8	`--color-warning-50`	REBT分析区域
AI洞察背景	#EEF5FF	`--color-info-50`	AI分析区域
成功状态	#2AC28D	`--color-success-500`	完成状态
警告状态	#F2B23D	`--color-warning-500`	警告提示
危险状态	#E24C4B	`--color-danger-500`	删除确认
中性文本	#5A6672	`--color-ink-500`	次要文本

这是模板派生页面，基于今天页高保真样式规范生成，主要差异点：

REBT认知重构模块：专门的心理分析模块，使用特殊的视觉样式
AI洞察功能：智能分析结果展示，包含情绪趋势和认知模式识别
任务关联机制：日记与行为任务的深度关联，支持双向跳转
多媒体内容支持：支持文本、语音、图片等多种内容格式的展示
专业分析工具：集成专业的心理分析工具和认知重构技术

贡献者

Cai Hongyu

文件历史

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

日记域-日记详情页高保真样式规范 ​

1. 设计定位与体验目标 ​

2. 页面结构框架 ​

3. 模块规格详解 ​

3.1 顶部导航栏 ​

3.2 日记信息区 ​

3.3 正文内容区 ​

3.4 REBT分析模块 ​

3.5 AI洞察 ​

3.6 关联任务 ​

3.7 操作区 ​

4. 交互与状态要求 ​

4.1 内容展示 ​

4.2 任务操作 ​

4.3 编辑功能 ​

5. 响应式与实现提示 ​

5.1 屏幕适配 ​

5.2 性能优化 ​

6. 数据绑定与埋点对齐 ​

7. 色彩映射表 ​

贡献者 ​

文件历史 ​

日记域-日记详情页高保真样式规范

1. 设计定位与体验目标

2. 页面结构框架

3. 模块规格详解

3.1 顶部导航栏

3.2 日记信息区

3.3 正文内容区

3.4 REBT分析模块

3.5 AI洞察

3.6 关联任务

3.7 操作区

4. 交互与状态要求

4.1 内容展示

4.2 任务操作

4.3 编辑功能

5. 响应式与实现提示

5.1 屏幕适配

5.2 性能优化

6. 数据绑定与埋点对齐

7. 色彩映射表

贡献者

文件历史