学校协同页面样式规范

字数

2954 字

阅读时间

12 分钟

基于《功能扩展方案》《学校协同系统》《tab页设计蓝图》《色彩系统》整理，聚焦学校信息绑定、辅导员协同、心理中心服务、多端协作界面，确保校内资源高效整合与隐私保护。

1. 设计定位

角色：学校-学生-辅导员三方协同平台，提供信息绑定、心理咨询、学业支持、危机干预。
体验目标：权威可信、资源整合、隐私保护、响应及时，强化"归属感"和"安全感"。
视觉基调：学校主题色为主，品牌蓝辅助，信息层级清晰，强调学校权威性与服务温度。

2. 页面结构框架

┌──────────────────────────────────────────┐
│ 顶部导航：学校Logo + 标题 + 用户身份标识   │
├──────────────────────────────────────────┤
│ 学校绑定状态卡：已绑定/未绑定状态引导     │
├──────────────────────────────────────────┤
│ 辅导员工作台：在线状态、快捷联系、消息通知 │
├──────────────────────────────────────────┤
│ 心理中心服务：预约咨询、在线咨询、活动信息 │
├──────────────────────────────────────────┤
│ 院系资源导航：学业支持、社团活动、公告信息 │
├──────────────────────────────────────────┤
│ 危机干预专区：校内预警流程、紧急联系方式   │
└──────────────────────────────────────────┘

3. 模块规格详解

3.1 学校绑定状态卡 `<SchoolBindingCard>`

容器：宽 686rpx、高 240rpx，圆角 32rpx；背景 #F0F9FF，描边 2rpx #E0F2FE。
已绑定状态：
- 左侧：学校Logo（64×128rpx）+ 学校名称 + 院系信息
- 右侧：绑定状态徽章（Success背景，"已绑定"），"解绑"按钮
- 底部：绑定时间、辅导员姓名
未绑定状态：
- 中央："点击绑定学校"引导按钮（品牌蓝填充，96rpx高）
- 说明文字："绑定后可享受校内专属服务"
数据绑定：user_school_binding、school_info

3.2 辅导员工作台 `<CounselorWorkbench>`

容器：宽 686rpx，自适应高度，背景 #FFFFFF，圆角 32rpx，阴影 0 28rpx 80rpx rgba(15,20,26,0.08)。
辅导员信息区：
- 头像（48×96rpx）+ 姓名 + 职称 + 在线状态指示器
- 专业标签（心理健康、学业指导等）
- 工作时间显示（如"工作日 9:00-17:00"）
快捷操作区：
- "立即联系"按钮（品牌蓝，支持匿名/实名）
- "发送消息"按钮（描边样式）
- "预约咨询"按钮（Mint背景）
最近互动：
- 显示最后互动时间和内容摘要
- 未读消息计数（红点提示）
数据绑定：counselor_info、user_counselor_interactions

3.3 心理中心服务 `<PsychologicalCenter>`

容器：宽 686rpx，自适应高度，背景 #F0FDF4，圆角 32rpx，描边 2rpx #C5EBDD。
服务分类：
- 在线咨询：文字聊天、视频咨询、语音咨询
- 预约服务：选择咨询师、时间段、咨询类型
- 团体活动：心理讲座、团体辅导、工作坊
- 自助资源：心理测评、放松训练、心理文章
预约日历：
- 显示本周可预约时间段
- 已预约时间标记为Success色
- 支持快速预约操作
数据绑定：psychological_services、appointments、group_activities

3.4 院系资源导航 `<DepartmentResources>`

网格布局：2×2网格，单卡160×240rpx，间距24rpx。
资源卡片：
- 学业支持：课程辅导、学习方法、考试指导
- 社团活动：学生社团、文体活动、志愿服务
- 生活服务：宿舍管理、食堂服务、医疗服务
- 公告信息：学校通知、院系动态、重要提醒
每个卡片：
- 图标（32×64rpx，线性图标）
- 标题（28rpx/600/#1E293B）
- 描述（24rpx/400/#64748B）
- 箭头指示器（右向）
数据绑定：department_resources、announcements

3.5 危机干预专区 `<CrisisIntervention>`

容器：宽 686rpx，自适应高度，背景 #FEF2F2，圆角 32rpx，描边 2rpx #FECACA。
预警流程说明：
- L1-L4风险等级说明，使用不同颜色标识
- 校内危机处理流程图
- 24小时紧急联系方式
紧急联系人：
- 心理中心24小时热线
- 校医院急诊科
- 校保卫处
- 辅导员紧急联系
一键求助：
- "紧急求助"按钮（危险红背景，56×112rpx圆形）
- 点击后直接触发SOS流程，同时通知校内相关部门
数据绑定：crisis_contacts、intervention_procedures

3.6 消息通知中心 `<NotificationCenter>`

标签导航：全部消息、系统通知、辅导员消息、活动提醒
消息列表：
- 每条消息包含：发送者头像、姓名、时间、内容摘要
- 未读消息左侧蓝条标识
- 重要消息顶部红色标识
- 支持标记已读、删除、置顶操作
快捷操作：
- "全部已读"按钮
- 消息设置（通知偏好、免打扰时间）
数据绑定：notifications、message_settings

4. 色彩与排版基准

4.1 关键色值

元素	颜色值	建议映射
学校主题色	#3A7BD5	var(--color-brand-500)
绑定状态背景	#F0F9FF	blue-50
心理中心背景	#F0FDF4	green-50
危机干预背景	#FEF2F2	red-50
在线状态绿	#22C55E	success-500
离线状态灰	#6B7280	gray-500
紧急红	#DC2626	danger-500

4.2 字体与字号

主体字体：PingFang SC → Helvetica → Arial
标题字号：36rpx（主标题）、32rpx（副标题）
正文字号：28rpx（主要内容）、24rpx（次要信息）
字重使用：700（标题）、600（强调）、500（正文）、400（说明）

4.3 SCSS变量示例

scss

$school-primary: #3A7BD5;
$school-secondary: #E0F2FE;
$counselor-online: #22C55E;
$counselor-offline: #6B7280;
$crisis-bg: #FEF2F2;
$psychology-bg: #F0FDF4;

.school-binding-card {
  background: $school-secondary;
  border: 2rpx solid $school-secondary;
  border-radius: 32rpx;
  padding: 48rpx;
  .school-logo {
    width: 128rpx;
    height: 128rpx;
    border-radius: 24rpx;
    object-fit: cover;
  }
  .binding-status {
    background: var(--color-success-500);
    color: #FFFFFF;
    border-radius: 1998rpx;
    padding: 8rpx 24rpx;
    font-size: 24rpx;
    font-weight: 600;
  }
}
.counselor-workbench {
  background: #FFFFFF;
  border-radius: 32rpx;
  box-shadow: 0 28rpx 80rpx rgba(15,20,26,0.08);
  padding: 48rpx;
  .online-indicator {
    width: 24rpx;
    height: 24rpx;
    border-radius: 50%;
    background: $counselor-online;
    border: 4rpx solid #FFFFFF;
  }
  .offline-indicator {
    background: $counselor-offline;
  }
}

5. 交互与状态要求

5.1 学校绑定交互

绑定流程：
- 点击"绑定学校" → 搜索学校 → 选择学校 → 填写学号/工号 → 验证身份
- 自动获取院系信息 → 匹配辅导员 → 绑定成功
解绑流程：
- 点击"解绑" → 确认对话框 → 说明解绑后果 → 输入验证码 → 解绑成功
信息更新：
- 学校信息变更时自动同步
- 辅导员信息变更时通知用户

5.2 辅导员联系交互

联系选择：
- 支持匿名联系（仅显示基本信息）
- 支持实名联系（显示完整信息）
- 支持选择联系时间偏好
消息发送：
- 文字消息支持富文本格式
- 支持发送图片、文件附件
- 消息状态显示（发送中、已发送、已读）
预约流程：
- 选择咨询类型 → 选择时间段 → 填写咨询需求 → 提交预约
- 预约成功后收到确认通知
- 支持预约修改和取消

5.3 危机干预交互

预警触发：
- 系统自动检测风险等级
- 不同等级触发不同响应流程
- L4级自动通知校内相关部门
紧急求助：
- 长按紧急求助按钮2秒触发
- 直接拨打心理中心24小时热线
- 同时通知辅导员和保卫处
后续跟进：
- 危机处理后自动生成跟进计划
- 定期回访和状态评估
- 记录完整干预过程

5.4 多端协同交互

数据同步：
- 学生端、辅导员端、管理端数据实时同步
- 重要操作自动记录审计日志
- 支持离线操作和冲突解决
权限控制：
- 基于角色的数据访问控制
- 敏感信息需要额外授权
- 操作留痕和责任追溯

6. 响应式与主题

6.1 响应式设计

断点	调整
`<720rpx`	单列布局，简化预约日历，隐藏次要信息
`360-1534rpx`	默认布局，网格减少为2列
`≥1536rpx`	双列布局，支持侧边栏导航

6.2 主题适配

开学季主题：开学引导页面，新生专享服务推荐
考试季主题：考试减压专区，延长心理咨询服务时间
毕业季主题：就业指导服务，心理调适建议
节日主题：节日祝福和特色活动推荐

6.3 暗色模式

背景色深色化：#1F2730
卡片背景：#2C3640
文字亮度提升：确保对比度 ≥ 4.5:1
保持学校标识色的可识别性

7. 数据与工作流

7.1 数据绑定

模块	数据来源	说明
学校绑定	`user_school_binding` + `school_info`	学校和用户绑定关系
辅导员信息	`counselor_info` + `user_counselor_mapping`	辅导员信息和学生对应关系
心理服务	`psychological_services` + `appointments`	心理咨询服务和预约记录
危机干预	`crisis_intervention` + `sos_events`	危机处理流程和事件记录
消息通知	`notifications` + `message_settings`	消息推送和用户设置

7.2 工作流程

学校绑定流程：用户发起 → 学校验证 → 信息同步 → 权限分配
咨询预约流程：用户选择 → 时间确认 → 辅导员确认 → 预约成功 → 咨询进行 → 记录存档
危机干预流程：风险检测 → 等级评估 → 相应触发 → 多方通知 → 后续跟进 → 效果评估
消息通知流程：事件触发 → 消息生成 → 推送发送 → 状态跟踪 → 用户反馈

8. 安全与合规

8.1 隐私保护

学生信息脱敏显示
联系方式需要授权才能查看
敏感操作需要二次确认
完整的操作审计日志

8.2 数据安全

所有传输采用HTTPS加密
敏感数据加密存储
定期数据备份和恢复测试
访问权限最小化原则

8.3 合规要求

符合个人信息保护法
遵守教育数据安全规范
满足心理咨询服务标准
通过安全合规审查

9. 无障碍与验收

9.1 无障碍要求

所有交互组件支持键盘操作
图片和图标都有替代文本
色彩对比度满足WCAG 2.1 AA标准
支持屏幕阅读器

9.2 验收清单

学校绑定流程完整，支持搜索和验证
辅导员联系功能正常，支持匿名和实名
心理中心预约功能完整，时间显示准确
危机干预流程有效，紧急求助响应及时
多端数据同步正常，权限控制有效
隐私保护机制完善，用户授权清晰

该规范确保学校协同页面既权威又温暖，与学校的心理健康服务体系无缝衔接，为学生提供全方位的校园心理支持。

贡献者

Cai Hongyu

文件历史

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

学校协同页面样式规范 ​

1. 设计定位 ​

2. 页面结构框架 ​

3. 模块规格详解 ​

3.1 学校绑定状态卡 <SchoolBindingCard> ​

3.2 辅导员工作台 <CounselorWorkbench> ​

3.3 心理中心服务 <PsychologicalCenter> ​

3.4 院系资源导航 <DepartmentResources> ​

3.5 危机干预专区 <CrisisIntervention> ​

3.6 消息通知中心 <NotificationCenter> ​

4. 色彩与排版基准 ​

4.1 关键色值 ​

4.2 字体与字号 ​

4.3 SCSS变量示例 ​

5. 交互与状态要求 ​

5.1 学校绑定交互 ​

5.2 辅导员联系交互 ​

5.3 危机干预交互 ​

5.4 多端协同交互 ​

6. 响应式与主题 ​

6.1 响应式设计 ​

6.2 主题适配 ​

6.3 暗色模式 ​

7. 数据与工作流 ​

7.1 数据绑定 ​

7.2 工作流程 ​

8. 安全与合规 ​

8.1 隐私保护 ​

8.2 数据安全 ​

8.3 合规要求 ​

9. 无障碍与验收 ​

9.1 无障碍要求 ​

9.2 验收清单 ​

贡献者 ​

文件历史 ​

学校协同页面样式规范

1. 设计定位

2. 页面结构框架

3. 模块规格详解

3.1 学校绑定状态卡 `<SchoolBindingCard>`

3.2 辅导员工作台 `<CounselorWorkbench>`

3.3 心理中心服务 `<PsychologicalCenter>`

3.4 院系资源导航 `<DepartmentResources>`

3.5 危机干预专区 `<CrisisIntervention>`

3.6 消息通知中心 `<NotificationCenter>`

4. 色彩与排版基准

4.1 关键色值

4.2 字体与字号

4.3 SCSS变量示例

5. 交互与状态要求

5.1 学校绑定交互

5.2 辅导员联系交互

5.3 危机干预交互

5.4 多端协同交互

6. 响应式与主题

6.1 响应式设计

6.2 主题适配

6.3 暗色模式

7. 数据与工作流

7.1 数据绑定

7.2 工作流程

8. 安全与合规

8.1 隐私保护

8.2 数据安全

8.3 合规要求

9. 无障碍与验收

9.1 无障碍要求

9.2 验收清单

贡献者

文件历史