社区-发布帖子页高保真样式规范
字数
2092 字
阅读时间
9 分钟
参考高保真稿和页面文档，基于《色彩系统.md》与UI组件规范，聚焦安全发帖流程、风险自检与内容编辑的视觉呈现。
1. 设计定位与体验目标
- 页面主任务：提供安全的树洞发帖环境，通过草稿自检、风险提示和CBT建议确保发布内容的安全性。
- 体验关键词：安全感、引导性、自检意识、支持帮助。通过分步骤引导和多重检查降低发布风险。
- 视觉策略：整页基底使用
--color-ink-0，表单区域白底卡片，风险提示使用渐进式色彩强度，保持与树洞主页视觉一致性。
2. 页面结构框架
┌──────────────────────────────────────────┐
│ 顶部导航栏：取消按钮 + 标题"发布帖子" + 发布按钮 │
├──────────────────────────────────────────┤
│ 内容编辑区：标题输入 + 正文编辑器 + 附件上传 │
├──────────────────────────────────────────┤
│ 情绪选择：情绪标签选择器 + 强度滑块 │
├──────────────────────────────────────────┤
│ 匿名设置：匿名/化名切换 + 允许辅导员私信开关 │
├──────────────────────────────────────────┤
│ 风险自检区：礼貌守则确认 + 风险提示条 │
├──────────────────────────────────────────┤
│ CBT建议：认知重构提示与优化建议 │
├──────────────────────────────────────────┤
│ 草稿管理：自动保存 + 草稿列表 + 清空草稿 │
└──────────────────────────────────────────┘3. 模块规格详解
3.1 顶部导航栏
- 容器：高度 88rpx，背景白色，阴影
0 4rpx 16rpx rgba(15,20,26,0.08)。 - 取消按钮：左侧文字按钮，字号 32rpx，颜色
--color-ink-600。 - 标题：居中显示"发布帖子"，字号 32rpx，字重 700，颜色
--color-ink-800。 - 发布按钮：右侧文字按钮，默认禁用状态
--color-ink-300，通过自检后变为--color-brand-500。
3.2 内容编辑区
- 容器：白底背景，圆角 24rpx，内边距 32rpx。
- 标题输入：
- 高度 88rpx，字号 32rpx，字重 600，颜色
--color-ink-800 - 占位符"给这个帖子起个标题吧"，颜色
--color-ink-400 - 底部边框 2rpx solid
--color-ink-100，聚焦时变为--color-brand-500
- 高度 88rpx，字号 32rpx，字重 600，颜色
- 正文编辑器：
- 最小高度 240rpx，字号 30rpx，颜色
--color-ink-700 - 占位符"分享你的想法和感受..."
- 工具栏：加粗、斜体、引用、列表等格式选项
- 最小高度 240rpx，字号 30rpx，颜色
- 附件上传：
- 上传区域： dashed边框 4rpx
--color-ink-200，圆角 16rpx - 支持图片、语音、文件等多种附件类型
- 已上传附件显示预览图和删除按钮
- 上传区域： dashed边框 4rpx
3.3 情绪选择
- 容器：白底背景，圆角 24rpx，内边距 32rpx。
- 情绪标签：网格布局，包含平静、喜悦、专注、悲伤、愤怒、焦虑、倦怠等情绪。
- 标签样式：
- 默认：背景
--color-ink-50，文字--color-ink-600，圆角 32rpx - 选中：背景对应情绪色，文字白色
- 默认：背景
- 强度滑块：
- 0-10的数值选择，默认值5
- 滑块轨道高度 8rpx，背景
--color-ink-100 - 滑块按钮直径 40rpx，背景
--color-brand-500
3.4 匿名设置
- 容器：背景
--color-info-50，圆角 24rpx，内边距 32rpx。 - 匿名模式切换：
- 完全匿名：隐藏所有身份信息
- 化名模式：显示设定的昵称
- 真实姓名：显示真实姓名（需额外确认）
- 辅导员私信：
- 开关组件，默认关闭
- 说明文字：允许辅导员在必要时私信联系我
3.5 风险自检区
- 容器：背景
--color-warning-50，圆角 24rpx，内边距 32rpx。 - 礼貌守则：
- 复选框列表，包含尊重他人、友善交流等条款
- 必须全部勾选才能继续发布
- 风险提示条：
- 根据内容实时检测风险等级
- R1：蓝色提示"内容很棒，继续保持"
- R2：橙色提示"注意用词，避免敏感话题"
- R3：红色提示"内容需要修改，请调整表达方式"
- R4：深红提示"内容违规，无法发布"
3.6 CBT建议
- 容器：背景
linear-gradient(135deg, #EDE9FE, #F3E8FF)，圆角 24rpx，内边距 32rpx。 - 建议标题："认知重构建议"，字号 28rpx，字重 600，颜色
#6D28D9。 - 建议内容：
- 识别非理性思维的提示
- 建议的替代性思考方式
- 情绪调节的方法建议
- 优化建议：点击可应用建议修改原文
3.7 草稿管理
- 容器：背景
--color-ink-0，内边距 32rpx。 - 自动保存提示：
- 文字"草稿已自动保存"，字号 24rpx，颜色
--color-ink-500 - 显示保存时间戳
- 文字"草稿已自动保存"，字号 24rpx，颜色
- 草稿列表：
- 显示最近3个草稿
- 每个草稿显示标题、保存时间、字数
- 支持继续编辑和删除操作
4. 交互与状态要求
4.1 发布流程
- 内容输入：用户输入标题和正文
- 情绪选择：选择当前情绪和强度
- 匿名设置：选择发布模式
- 风险自检：确认守则，查看风险提示
- CBT建议：查看并应用认知重构建议
- 最终确认：确认所有设置后发布
4.2 状态管理
- 草稿状态：每30秒自动保存一次，显示保存成功提示
- 风险检测：实时检测内容风险，动态更新风险提示条
- 发布按钮：只有完成所有必填项并通过风险自检才能启用
- 键盘处理：输入时界面自动上移，确保输入框不被遮挡
4.3 错误处理
- 网络错误：显示"网络异常，请检查连接"提示
- 发布失败：显示具体失败原因，提供重试选项
- 内容违规：明确指出违规内容，引导修改
5. 响应式与实现提示
5.1 屏幕适配
- 基准宽度 750rpx，最大内容宽度 686rpx（左右边距 32rpx）
- 键盘弹出时，编辑区域高度自适应，确保内容可见
- 横屏时，重新布局为双列结构
5.2 性能优化
- 草稿本地存储，避免频繁网络请求
- 风险检测采用防抖机制，避免频繁检测
- 图片上传前压缩，控制文件大小
6. 数据绑定与埋点对齐
| 模块 | 数据来源 | 关键状态 | 样式影响 |
|---|---|---|---|
| 内容编辑 | draft_content | 字数、 attachments | 字数统计、附件预览 |
| 风险检测 | risk_assessment | risk_level、risk_keywords | 风险提示条颜色和内容 |
| 匿名设置 | publish_settings | anonymity_mode、allow_counselor | 模式选择器状态 |
| CBT建议 | cbt_engine | suggestions、applied_suggestions | 建议内容显示/隐藏 |
| 草稿管理 | local_storage | draft_list、auto_save_status | 草稿列表、保存提示 |
7. 色彩映射表
| 页面元素 | HEX值 | Token映射 | 说明 |
|---|---|---|---|
| 主背景 | #F7F9FC | --color-ink-0 | 页面基底色 |
| 卡片背景 | #FFFFFF | #FFFFFF | 内容区域背景 |
| 品牌蓝主色 | #3A7BD5 | --color-brand-500 | 主要交互元素 |
| 信息提示背景 | #EEF5FF | --color-info-50 | 匿名设置区域 |
| 警告背景 | #FFF6E8 | --color-warning-50 | 风险自检区域 |
| CBT紫色 | #6D28D9 | #6D28D9 | 认知重构主题色 |
| 风险色R2 | #F59E0B | --color-warning-500 | 中等风险提示 |
| 风险色R3 | #F97316 | --color-risk-r3 | 高风险提示 |
| 风险色R4 | #DC2626 | --color-risk-r4 | 严重风险提示 |
这是模板派生页面，基于今天页高保真样式规范生成，主要差异点：
- 发布流程引导：分步骤的自检流程，与今天页的信息展示不同
- 风险自检机制：实时风险检测和多级提示系统
- CBT集成：在发布过程中提供认知重构建议
- 匿名设置：提供多种发布模式选择，强调隐私保护
- 草稿管理：自动保存和草稿列表功能，防止内容丢失
贡献者
Cai Hongyu