页面→组件→集合字段映射表

字数

3043 字

阅读时间

13 分钟

概述

本映射表详细展示了 MindGuard 小程序各页面的组件如何与数据库集合字段进行交互。基于页面文档、UI组件文档、接口文档和数据库设计文档分析整理。

1. 今天页面 (pages/today)

1.1 页面结构

pages/today/
├── index.js              # 页面逻辑
├── index.wxml            # 页面结构
├── index.wxss            # 页面样式
└── components/
    ├── mood-card/         # 情绪卡片组件
    ├── suggestion-list/    # 建议列表组件
    ├── task-quick-add/    # 快速添加任务组件
    └── community-highlight/ # 社区高亮组件

1.2 组件-字段映射

组件	页面元素	集合	字段映射	数据流向	说明
mood-card	情绪选择轮盘	`checkins`	`mood_score`, `primary_emotion`, `mood_wheel_snapshot`	页面→数据库	提交情绪打卡
mood-card	情绪标签选择	`checkins`	`mood_tags`, `scene_tags`	页面→数据库	记录情绪标签
mood-card	能量指数选择	`checkins`	`energy_level`	页面→数据库	记录能量状态
mood-card	备注输入框	`checkins`	`context_note`	页面→数据库	添加情绪备注
suggestion-list	Top3建议卡片	`suggestions`	`title`, `category`, `priority_rank`, `source`	数据库→页面	显示建议列表
suggestion-list	接受按钮	`tasks`	`title`, `category`, `origin_reference_id`	页面→数据库	生成任务
suggestion-list	跳过按钮	`suggestions`	`status`	页面→数据库	更新建议状态
task-quick-add	快速任务表单	`tasks`	`title`, `category`, `estimated_duration_minutes`	页面→数据库	创建快速任务
community-highlight	社区高亮卡片	`posts`	`title`, `topic`, `comment_count`, `hug_count`	数据库→页面	显示热门内容

1.3 页面级数据交互

页面操作	触发接口	主要读取字段	主要写入字段	说明
页面加载	`/api/moods/today`	`checkins`: 今日情绪数据	-	显示今日状态
提交打卡	`/api/checkins`	-	`checkins`: 情绪记录	保存情绪数据
刷新建议	`/api/micro-tips`	`suggestions`: 建议列表	-	获取新建议
创建任务	`/api/tasks`	-	`tasks`: 任务信息	生成新任务
查看社区	`/api/forum/highlight`	`posts`: 精选内容	-	显示社区高亮

2. 任务页面 (pages/tasks)

2.1 页面结构

pages/tasks/
├── index.js              # 任务列表页
├── detail/               # 任务详情页
├── create/               # 创建任务页
└── components/
    ├── task-list/         # 任务列表组件
    ├── task-card/         # 任务卡片组件
    ├── task-filters/      # 任务筛选器组件
    └── pomodoro-timer/    # 番茄计时器组件

2.2 组件-字段映射

组件	页面元素	集合	字段映射	数据流向	说明
task-list	任务分组列表	`tasks`	`status`, `due_at`, `priority`, `category`	数据库→页面	任务分组显示
task-card	任务标题信息	`tasks`	`title`, `description`, `category`	数据库→页面	显示任务基本信息
task-card	状态切换按钮	`tasks`	`status`, `task_status_logs`	页面→数据库	更新任务状态
task-card	子步骤清单	`tasks`	`checklist_steps`	双向	任务子步骤管理
task-card	番茄计时器	`tasks`	`pomodoro_sessions`	页面→数据库	记录计时数据
task-filters	状态筛选器	`tasks`	`status`, `category`, `source`	页面→数据库	任务筛选条件
task-filters	排序选择器	`tasks`	`due_at`, `priority`, `createdAt`	页面→数据库	任务排序方式
pomodoro-timer	计时器界面	`tasks`	`estimated_duration_minutes`, `pomodoro_sessions`	双向	番茄钟功能

2.3 详情页特殊组件

组件	功能	集合	字段映射	说明
task-review	复盘表单	`tasks`	`review_data`, `linked_checkin_id`	任务复盘记录
task-attachment	附件管理	`tasks`	`review_data.attachments`	复盘附件管理
task-assignment	指派信息	`tasks`	`assignment_info`	显示指派信息

3. 心情随笔页面 (pages/journal)

3.1 页面结构

pages/journal/
├── index.js              # 随笔列表页
├── editor/               # 随笔编辑器
├── detail/               # 随笔详情页
└── components/
    ├── journal-list/      # 随笔列表组件
    ├── entry-card/        # 随笔卡片组件
    ├── rich-editor/       # 富文本编辑器
    ├── media-uploader/    # 媒体上传组件
    └── rebt-assistant/    # REBT助手组件

3.2 组件-字段映射

组件	页面元素	集合	字段映射	数据流向	说明
journal-list	随笔时间轴	`journals`	`createdAt`, `title`, `entry_type`, `mood_score`	数据库→页面	时间轴显示
entry-card	随笔预览卡片	`journals`	`title`, `body_text`, `mood_score`, `share_scope`	数据库→页面	随笔摘要显示
rich-editor	文本编辑器	`journals`	`body_text`, `word_count`	页面→数据库	文本内容编辑
media-uploader	语音录制	`journals`	`media_refs`, `audio_duration`, `body_text`	页面→数据库	语音随笔功能
media-uploader	图片上传	`journals`	`media_refs`, `ocr_text`	页面→数据库	图片随笔功能
rebt-assistant	REBT结构化	`journals`	`rebt_struct`	双向	REBT分析辅助
mood-selector	情绪选择器	`journals`	`mood_score`, `mood_tags`, `scene_tags`	页面→数据库	情绪标签设置
share-settings	分享设置	`journals`	`share_scope`, `is_favorited`	页面→数据库	隐私设置

3.3 AI功能组件

组件	功能	集合	字段映射	说明
ai-summary	自动摘要	`journals`	`derived_summary`, `word_count`	AI生成摘要
sentiment-analysis	情绪分析	`journals`	`mood_score`, `risk_level`	情绪风险评估
task-generator	任务生成	`tasks`	`title`, `description`, `category`	基于随笔生成任务

4. 树洞社区页面 (pages/treehole)

4.1 页面结构

pages/treehole/
├── index.js              # 社区首页
├── post-editor/          # 发帖编辑器
├── post-detail/         # 帖子详情页
└── components/
    ├── post-feed/        # 信息流组件
    ├── post-card/        # 帖子卡片组件
    ├── comment-list/      # 评论列表组件
    ├── risk-banner/       # 风险提示横幅
    └── action-card/       # 行动卡组件

4.2 组件-字段映射

组件	页面元素	集合	字段映射	数据流向	说明
post-feed	信息流列表	`posts`	`title`, `content`, `topic`, `status`, `publishedAt`	数据库→页面	帖子信息流
post-card	帖子摘要	`posts`	`title`, `alias_name`, `mood_thermometer`, `comment_count`	数据库→页面	帖子卡片显示
post-card	互动按钮	`comments`	`action_type`, `post_id`, `is_add`	页面→数据库	抱抱/收藏功能
risk-banner	风险提示	`posts`	`risk_level`, `risk_factors`, `intervention_triggered`	数据库→页面	风险状态显示
comment-list	评论列表	`comments`	`content`, `is_anonymous`, `createdAt`	数据库→页面	评论显示
comment-input	评论输入	`comments`	`content`, `is_anonymous`, `mood_thermometer`	页面→数据库	发布评论
action-card	行动卡	`tasks`	`title`, `category`, `origin_reference_id`	数据库→页面	显示行动建议
topic-filter	话题筛选	`posts`	`topic`, `status`	页面→数据库	话题分类筛选

4.3 安全相关组件

组件	功能	集合	字段映射	说明
self-check	发布自检	`posts`	`self_check_result`	发布前自检记录
anonymity-selector	匿名设置	`posts`	`anonymity_mode`, `alias_name`	匿名模式选择
content-moderation	内容审核	`posts`	`status`, `moderation_result`	审核状态显示

5. 我的页面 (pages/mine)

5.1 页面结构

pages/mine/
├── index.js              # 个人中心页
├── profile/              # 个人资料页
├── reports/              # 报告页面
└── components/
    ├── user-summary/     # 用户摘要组件
    ├── badge-wall/       # 徽章墙组件
    ├── statistics/        # 统计数据组件
    ├── resource-map/      # 资源地图组件
    └── settings/          # 设置组件

5.2 组件-字段映射

组件	页面元素	集合	字段映射	数据流向	说明
user-summary	用户信息卡片	`users`	`nickname`, `avatar_url`, `campus_affiliation`, `onboarding_stage`	数据库→页面	用户基本信息
badge-wall	徽章展示墙	`badges`	`badge_code`, `status`, `progress_value`, `unlocked_at`	数据库→页面	徽章成就展示
statistics	数据统计	`checkins`+`tasks`	情绪趋势、任务完成率等聚合数据	数据库→页面	个人数据统计
weekly-report	周报卡片	`reports`	`title`, `period_label`, `content`	数据库→页面	周报摘要显示
resource-map	资源地图	`resources`	`name`, `category`, `contact_info`, `available_hours`	数据库→页面	支持资源展示
settings	隐私设置	`users`	`guardian_ids`, `counselor_id`, `consent_version`	双向	隐私授权管理
notification-center	通知中心	`notifications`	`title`, `content`, `status`, `send_at`	数据库→页面	通知列表显示

6. 独立分包 (independent/ask)

6.1 Ask心理助理页面

6.1.1 页面结构

independent/ask/
├── index.js              # AI对话主页
└── components/
    ├── chat-container/     # 对话容器组件
    ├── message-bubble/     # 消息气泡组件
    ├── input-area/         # 输入区域组件
    ├── cbt-cards/          # CBT技巧卡片组件
    ├── risk-assessment/    # 风险评估组件
    ├── resource-panel/     # 资源推荐面板
    ├── quick-actions/      # 快捷操作组件
    └── typing-indicator/   # 输入状态指示器

6.1.2 组件-字段映射

组件	页面元素	集合	字段映射	数据流向	说明
chat-container	对话会话信息	`ask_sessions`	`session_type`, `trigger_source`, `risk_level`, `status`	双向	会话状态管理
message-bubble	用户消息	`ask_messages`	`message_type`, `content`, `cognitive_distortions`, `automatic_thoughts`	页面→数据库	记录用户输入
message-bubble	AI回复	`ask_messages`	`message_type`, `cbt_technique`, `content`, `behavioral_suggestions`	数据库→页面	显示AI响应
cbt-cards	认知重构练习	`cbt_applications`	`technique_type`, `target_issue`, `intervention_plan`, `implementation_notes`	双向	CBT技巧应用
cbt-cards	技巧进度跟踪	`cbt_applications`	`completion_status`, `skill_mastery_level`, `effectiveness_rating`	页面→数据库	技能掌握度更新
risk-assessment	风险等级显示	`ask_sessions`	`initial_risk_level`, `final_risk_level`, `intervention_triggered`	数据库→页面	风险状态展示
risk-assessment	风险因素分析	`ask_messages`	`cognitive_distortions`, `risk_level_change`	数据库→页面	风险因素详情
resource-panel	资源推荐	`resources`	`name`, `category`, `contact_info`, `available_hours`	数据库→页面	支持资源显示
quick-actions	快捷回复建议	`ask_messages`	`message_role`, `content`	数据库→页面	交互建议
input-area	多模态输入	`ask_messages`	`content_type`, `content`, `processing_time_ms`	页面→数据库	支持文本/语音/图片

6.1.3 会话级数据交互

页面操作	触发接口	主要读取字段	主要写入字段	说明
页面加载	`/api/ask/sessions`	`ask_sessions`: 用户会话历史	-	显示历史会话
新建会话	`/api/ask/sessions`	-	`ask_sessions`: 会话基本信息	创建新对话
发送消息	Dify对话API	`ask_sessions`: 会话上下文	`ask_messages`: 消息记录	处理用户输入
接收回复	WebSocket推送	`ask_messages`: AI响应	-	实时显示AI回复
CBT练习	`/api/cbt/applications`	`cbt_applications`: 技巧模板	`cbt_applications`: 应用记录	记录CBT练习
风险评估	实时监控	`ask_messages`: 风险指标	`ask_sessions`: 风险等级	动态风险评估

6.2 SOS紧急求助

independent/sos/
├── index.js              # SOS求助页
└── components/
    ├── emergency-contact/ # 紧急联系组件
    ├── risk-assessment/   # 风险评估组件
    └── calm-breathing/    # 呼吸练习组件

6.2.1 组件-字段映射

组件	功能	集合	字段映射	数据流向	说明
emergency-contact	紧急联系人	`sos_events`	`contact_info`, `preferred_channel`, `consent_scopes`	页面→数据库	记录求助信息
risk-assessment	风险自评	`sos_events`	`risk_level`, `user_notes`, `location_hint`	页面→数据库	风险评估记录
sos-trigger	求助触发器	`sos_events`	`trigger`, `entry_point`, `severity_level`	页面→数据库	SOS事件记录

7. 通用UI组件映射

7.1 基础组件

组件	使用场景	涉及集合	字段映射	说明
empty-state	空态提示	多个集合	根据页面上下文决定	统一空态处理
loading-spinner	加载状态	-	-	通用加载组件
error-boundary	错误处理	-	错误日志记录	错误边界处理
toast-message	消息提示	-	-	通用消息组件

7.2 表单组件

组件	字段类型	常见映射集合	说明
form-input	文本输入	`users.nickname`, `tasks.title` 等	通用文本输入
form-select	选择输入	`tasks.category`, `posts.topic` 等	枚举值选择
form-date	日期选择	`tasks.due_at`, `checkins.checkin_date`	日期时间选择
form-tags	标签输入	`checkins.mood_tags`, `posts.tags`	标签管理
form-upload	文件上传	`journals.media_refs`	媒体文件上传

8. 数据流向模式

8.1 页面加载模式

页面 onLoad → 调用API接口 → 获取集合数据 → 组件渲染 → 用户交互

8.2 用户交互模式

用户操作 → 组件事件处理 → 调用API接口 → 更新集合数据 → 页面状态更新

8.3 实时更新模式

数据库变更 → 云函数触发 → WebSocket推送 → 页面接收 → 组件重新渲染

9. 性能优化考虑

9.1 数据缓存策略

页面级缓存: 首页数据本地缓存，提升加载速度
组件级缓存: 徽章、统计等数据缓存，减少重复请求
图片缓存: 头像、附件等媒体文件缓存

9.2 分包加载策略

主包: 四个Tab页面核心功能
普通分包: journal, community, profile 功能模块
独立分包: sos 紧急功能，确保快速访问

9.3 组件复用策略

通用组件: empty-state, loading, toast等跨页面复用
业务组件: task-card, post-card等在多个页面复用
容器组件: list-view, card-container等布局组件复用

文档版本: v1.0.0 最后更新: 2025-09-22 对齐文档: 页面文档、UI组件文档、接口文档、数据库设计

贡献者

Cai Hongyu

文件历史

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

页面→组件→集合字段映射表 ​

概述 ​

1. 今天页面 (pages/today) ​

1.1 页面结构 ​

1.2 组件-字段映射 ​

1.3 页面级数据交互 ​

2. 任务页面 (pages/tasks) ​

2.1 页面结构 ​

2.2 组件-字段映射 ​

2.3 详情页特殊组件 ​

3. 心情随笔页面 (pages/journal) ​

3.1 页面结构 ​

3.2 组件-字段映射 ​

3.3 AI功能组件 ​

4. 树洞社区页面 (pages/treehole) ​

4.1 页面结构 ​

4.2 组件-字段映射 ​

4.3 安全相关组件 ​

5. 我的页面 (pages/mine) ​

5.1 页面结构 ​

5.2 组件-字段映射 ​

6. 独立分包 (independent/ask) ​

6.1 Ask心理助理页面 ​

6.1.1 页面结构 ​

6.1.2 组件-字段映射 ​

6.1.3 会话级数据交互 ​

6.2 SOS紧急求助 ​

6.2.1 组件-字段映射 ​

7. 通用UI组件映射 ​

7.1 基础组件 ​

7.2 表单组件 ​

8. 数据流向模式 ​

8.1 页面加载模式 ​

8.2 用户交互模式 ​

8.3 实时更新模式 ​

9. 性能优化考虑 ​

9.1 数据缓存策略 ​

9.2 分包加载策略 ​

9.3 组件复用策略 ​

贡献者 ​

文件历史 ​

页面→组件→集合字段映射表

概述

1. 今天页面 (pages/today)

1.1 页面结构

1.2 组件-字段映射

1.3 页面级数据交互

2. 任务页面 (pages/tasks)

2.1 页面结构

2.2 组件-字段映射

2.3 详情页特殊组件

3. 心情随笔页面 (pages/journal)

3.1 页面结构

3.2 组件-字段映射

3.3 AI功能组件

4. 树洞社区页面 (pages/treehole)

4.1 页面结构

4.2 组件-字段映射

4.3 安全相关组件

5. 我的页面 (pages/mine)

5.1 页面结构

5.2 组件-字段映射

6. 独立分包 (independent/ask)

6.1 Ask心理助理页面

6.1.1 页面结构

6.1.2 组件-字段映射

6.1.3 会话级数据交互

6.2 SOS紧急求助

6.2.1 组件-字段映射

7. 通用UI组件映射

7.1 基础组件

7.2 表单组件

8. 数据流向模式

8.1 页面加载模式

8.2 用户交互模式

8.3 实时更新模式

9. 性能优化考虑

9.1 数据缓存策略

9.2 分包加载策略

9.3 组件复用策略

贡献者

文件历史