日记域-日记编辑页高保真样式规范
字数
2303 字
阅读时间
10 分钟
参考高保真稿和页面文档，基于《色彩系统.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)。 - 取消按钮：左侧文字按钮，字号 32rpx，颜色
--color-ink-600。 - 标题：居中显示"写日记"，字号 32rpx，字重 700，颜色
--color-ink-800。 - 保存按钮：右侧文字按钮，默认状态
--color-brand-500，保存中显示loading状态。
3.2 快速记录区
- 容器：背景
--color-info-50，圆角 24rpx，内边距 32rpx。 - 情绪快照：
- 情绪选择器：圆形情绪图标，点击选中
- 选中状态：放大显示，背景对应情绪色
- 支持自定义情绪名称
- 一句话记录：
- 输入框：高度 80rpx，圆角 16rpx，背景白色
- 占位符："用一句话描述现在的心情..."
- 字数限制：50字
3.3 多模态输入区
- 容器：白底背景，圆角 24rpx，内边距 32rpx。
- 输入模式切换：
- 文本：默认模式，富文本编辑器
- 语音：录音界面，波形显示
- 图片：相机/相册选择，图片编辑
- 文本编辑器：
- 工具栏：加粗、斜体、引用、列表等
- 编辑区域：最小高度 400rpx，支持自动扩展
- 字数统计：实时显示字数/建议字数
- 语音录制：
- 录音按钮：圆形，品牌蓝背景
- 波形显示：实时录音波形
- 录音时长：显示在波形下方
- 图片处理：
- 图片选择：相机/相册二选一
- 图片编辑：裁剪、滤镜、文字添加
- OCR识别：自动识别图片中的文字
3.4 REBT模板引导
- 容器：背景
linear-gradient(135deg, #FFF7E8, #FFFBF0)，圆角 24rpx，内边距 32rpx。 - 模板标题："REBT认知重构模板"，字号 28rpx，字重 600，颜色
--color-warning-600。 - 模板内容：
- A（事件）：文本输入区，占位符"发生了什么？"
- B（信念）：多选非理性信念，如"我必须完美"、"这太可怕了"
- C（结果）：情绪和行为结果记录
- D（辩论）：引导性问题帮助理性辩论
- E（新认知）：新的理性认知总结
- 折叠设计：
- 默认折叠显示"使用REBT模板"按钮
- 点击展开详细模板内容
- 可选择性填写各个部分
3.5 智能辅助
- 容器：背景
--color-success-50，圆角 24rpx，内边距 32rpx。 - 辅助标题："AI智能助手"，字号 28rpx，字重 600，颜色
--color-success-600。 - 辅助功能：
- 写作建议：基于内容提供写作建议
- 认知引导：识别非理性思维模式
- 风险提醒：检测负面情绪风险
- 建议卡片：
- 每个建议显示为独立的卡片
- 包含建议类型和具体内容
- 可点击应用建议到编辑器
3.6 标签管理
- 容器：白底背景，圆角 24rpx，内边距 32rpx。
- 标签分类：
- 场景标签：学习、生活、社交等
- 人物标签：家人、朋友、老师等
- 活动标签：考试、约会、旅行等
- 标签选择：
- 标签云形式展示
- 选中状态：背景
--color-brand-500，文字白色 - 支持自定义标签输入
- 标签限制：
- 最多选择10个标签
- 每个分类最多选择5个
3.7 草稿状态
- 容器：底部固定区域，高度 100rpx，背景白色，上边框 2rpx solid
--color-ink-100。 - 自动保存：
- 保存状态图标：勾选图标
--color-success-500 - 保存时间：显示"刚刚保存"或具体时间
- 字数统计：显示当前字数和建议字数
- 保存状态图标：勾选图标
- 存储状态：
- 本地存储：显示"本地已保存"
- 云端同步：显示"同步中"或"云端已保存"
- 网络状态：显示网络连接状态
4. 交互与状态要求
4.1 输入交互
- 模式切换：文本/语音/图片模式平滑切换，保持内容不丢失
- 自动保存：每30秒自动保存一次，显示保存状态
- 智能提示：根据输入内容实时提供相关建议
- 撤销重做：支持编辑操作的撤销和重做
4.2 REBT模板
- 逐步引导：按照A-B-C-D-E顺序引导用户填写
- 智能建议：根据事件内容智能推荐相关信念模式
- 关联分析：模板内容与AI洞察模块数据互通
4.3 数据安全
- 草稿保护：编辑中断时自动保存草稿
- 弱网处理：网络异常时本地保存，恢复网络后同步
- 隐私保护：敏感内容本地加密存储
5. 响应式与实现提示
5.1 屏幕适配
- 基准宽度 750rpx，最大内容宽度 686rpx（左右边距 32rpx）
- 键盘弹出时，编辑区域高度自适应
- 横屏时，重新布局为双列结构
5.2 性能优化
- 富文本编辑器使用轻量级实现
- 图片上传前压缩到合适尺寸
- 语音录制使用本地缓存，减少网络请求
6. 数据绑定与埋点对齐
| 模块 | 数据来源 | 关键状态 | 样式影响 |
|---|---|---|---|
| 情绪快照 | emotion_data | 情绪类型、强度 | 情绪图标选中状态 |
| 文本编辑 | draft_content | 字数、格式、内容 | 字数统计、格式显示 |
| REBT模板 | rebt_template | 完成度、置信度 | 模块展开状态、完成度指示 |
| AI辅助 | ai_suggestions | 建议类型、相关性 | 建议卡片显示/隐藏 |
| 标签管理 | tag_data | 标签数量、分类 | 标签选择状态、数量限制提示 |
| 草稿状态 | local_storage | 保存状态、同步状态 | 状态图标、时间显示 |
7. 色彩映射表
| 页面元素 | HEX值 | Token映射 | 说明 |
|---|---|---|---|
| 主背景 | #F7F9FC | --color-ink-0 | 页面基底色 |
| 卡片背景 | #FFFFFF | #FFFFFF | 内容区域背景 |
| 品牌蓝主色 | #3A7BD5 | --color-brand-500 | 主要交互元素 |
| 快速记录背景 | #EEF5FF | --color-info-50 | 快速记录区域 |
| REBT模板背景 | #FFF7E8 | --color-warning-50 | REBT引导区域 |
| AI辅助背景 | #EAFBF5 | --color-success-50 | AI助手区域 |
| 成功状态 | #2AC28D | --color-success-500 | 保存成功 |
| 警告状态 | #F2B23D | --color-warning-500 | REBT提示 |
| 中性文本 | #5A6672 | --color-ink-500 | 次要文本 |
| 边框色 | #E9EDF3 | --color-ink-100 | 分隔线边框 |
这是模板派生页面，基于今天页高保真样式规范生成，主要差异点：
- 多模态输入系统：支持文本、语音、图片等多种输入方式的切换和整合
- REBT认知重构模板：专业的心理分析模板，采用逐步引导的设计
- AI智能辅助：实时提供写作建议、认知引导和风险提醒
- 自动保存机制：本地和云端双重保存，确保数据安全
- 专业标签系统：多维度标签管理，支持情绪分析和内容检索
- 草稿状态管理：实时显示保存状态和同步状态，提供安全感
贡献者
Cai Hongyu