我的综合样式规范（成长 × 边界 × 资源 × 学校协同）

字数

2293 字

阅读时间

10 分钟

基于《功能扩展方案》《社区导向整体开发方案》《tab页设计蓝图》《色彩系统》汇总的个人中心设计与实现标准，融入学校协同和守护人管理功能。

1. 设计定位

角色：个人成长与隐私管理的控制台，提供周报、徽章、授权、资源导航、学校协同、守护人管理。
体验目标：沉稳可信、信息分区清晰，突出"守护感"和"归属感"。
视觉基调：品牌蓝 + Mint 点缀 + 学校主题色，背景 --color-ink-0，大面积使用白底卡片与柔和渐变。

2. 页面结构

┌──────────────────────────────────────────┐
│ 顶部欢迎卡：头像/昵称/心情小问候 + 周报入口 + 学校绑定状态
├──────────────────────────────────────────┤
│ 护心周报 Banner：情绪趋势、任务完成度、CBT效果、下一步建议
├──────────────────────────────────────────┤
│ 学校信息卡：学校/院系/辅导员信息 + 快捷联系
├──────────────────────────────────────────┤
│ 徽章与成就：水平滑动卡片（含学校特色徽章）
├──────────────────────────────────────────┤
│ 隐私与授权中心：授权列表 + 守护人管理 + 审计记录入口
├──────────────────────────────────────────┤
│ 资源地图：校内/校外资源栅格 + 联系方式 + 预约功能
└──────────────────────────────────────────┘
底部仍保留 Ask FAB & SOS 浮标

3. 模块详解

3.1 顶部欢迎卡 `<ProfileHero>`

背景渐变 linear-gradient(180deg,#EEF5FF,#FFFFFF)，圆角 48rpx。
左侧：头像（可显示状态环）＋问候语（如"晚安，小林"）。
右侧：快捷入口按钮（护心周报、隐私设置），使用品牌蓝描边。
底部：连续打卡天数（Mint Badge）＋学校绑定状态（显示"已绑定：XX大学"或"点击绑定学校"）。
学校绑定徽章：若已绑定学校，显示学校Logo和院系信息；未绑定时显示"绑定学校"CTA。

3.2 学校信息卡 `<SchoolInfoCard>`

卡面 #FFFFFF + 阴影 0 28rpx 80rpx rgba(15,20,26,0.08)。
内容分区：
- 学校信息：学校Logo、校名、院系、专业（支持显示辅导员信息）
- 辅导员专区：辅导员头像、姓名、联系方式、在线状态
- 快捷联系："联系辅导员"按钮（品牌蓝描边），支持匿名/实名选择
- 心理中心：显示心理中心开放时间、地址、预约按钮
未绑定状态：显示"点击绑定学校"引导卡，支持搜索学校、导入院系信息
数据来源：school_info、user_school_binding、counselor_info。

3.3 护心周报 `<WeeklyReportCard>`

卡面 #FFFFFF + 阴影 0 28rpx 80rpx rgba(15,20,26,0.08)。
模块划分：
1. 情绪分布（环形图，情绪色盘）
2. 行为闭环指标（建议接受率、完成率、T+1 复盘率）
3. 下一步 Top3（Chip 列表 + 生成任务 CTA）
4. 学校数据对比（可选）：情绪趋势与同院系对比
CTA：查看完整周报（品牌蓝按钮），链接至详情。
数据来源：weekly_summaries、daily_reports。

3.4 徽章与成就 `<BadgeCarousel>`

水平滑动；徽章背景使用渐变（品牌蓝 / Lavender）。
未解锁徽章以 --color-ink-100 背景 + 线性图标表示。
学校特色徽章：包含学校专属徽章（如"优秀学子"、"社团达人"）、院系特色徽章。
守护者徽章：新增"守护人"徽章，显示用户作为他人守护人的状态。
点击徽章弹出说明模态，包含解锁条件与下一步建议。

3.5 隐私与授权中心 `<PrivacyCenter>`

卡片分两列：
- 左列：当前授权（辅导员、树洞守护者等）列表；每项显示范围、有效期。
- 右列：审计记录快捷入口（Mint 背景）与"撤销授权"按钮。
守护人管理专区：
- "添加守护人"CTA（品牌蓝按钮），支持添加紧急联系人
- 守护人列表：显示姓名、关系、权限级别（L1-L3）、联系状态
- 权限设置：L1（仅SOS通知）、L2（风险预警）、L3（完整报告）
开关组件采用品牌蓝描边，开启态填充 Mint。
数据绑定：consents、audit_logs、guardians。

3.6 资源地图 `<ResourceGrid>`

栅格（2 列）展示：心理中心、辅导员、学生社团、公益热线等。
每个 Tile：白底、圆角 40rpx、图标（线性）、"立即联系"按钮（品牌蓝描边）。
学校资源优先：已绑定学校时，优先展示校内资源（心理中心、辅导员、院系办公室）
预约功能：支持在线预约（心理中心、辅导员），显示可预约时间段
匿名联系：提供匿名/实名联系选择，默认匿名保护隐私
数据绑定：resources、school_resources、appointments。

4. 样式片段

scss

$surface: #FFFFFF;
$shadow-hero: 0 36rpx 88rpx rgba(15,20,26,0.1);
$brand: var(--color-brand-500);
$success: var(--color-success-500);
$school-accent: #E0F2FE;

.profile-hero {
  background: linear-gradient(180deg,#EEF5FF 0%,#FFFFFF 100%);
  border-radius: 48rpx;
  padding: 48rpx;
  box-shadow: $shadow-hero;
  .greeting { color: var(--color-ink-800); font-size: 36rpx; font-weight: 700; }
  .streak-badge {
    background: var(--color-success-50);
    color: $success;
    border-radius: 1998rpx;
    padding: 8rpx 24rpx;
  }
  .school-binding {
    background: $school-accent;
    color: var(--color-brand-600);
    border-radius: 1998rpx;
    padding: 8rpx 24rpx;
    font-size: 24rpx;
    font-weight: 600;
  }
}
.school-info-card {
  background: $surface;
  border-radius: 48rpx;
  box-shadow: 0 28rpx 80rpx rgba(15,20,26,0.08);
  padding: 48rpx;
  .school-logo {
    width: 96rpx;
    height: 96rpx;
    border-radius: 24rpx;
    object-fit: cover;
  }
  .counselor-info {
    background: var(--color-info-50);
    border-radius: 32rpx;
    padding: 32rpx;
    .contact-btn {
      background: $brand;
      color: #FFF;
      border-radius: 24rpx;
      padding: 16rpx 32rpx;
    }
  }
}
.weekly-report {
  background: $surface;
  border-radius: 48rpx;
  box-shadow: 0 28rpx 80rpx rgba(15,20,26,0.08);
  padding: 48rpx;
  .cta { background: $brand; color: #FFF; border-radius: 32rpx; }
  .school-comparison {
    background: var(--color-brand-50);
    border-radius: 24rpx;
    padding: 24rpx;
    margin-top: 32rpx;
  }
}
.privacy-card {
  background: $surface;
  border-radius: 40rpx;
  box-shadow: 0 24rpx 64rpx rgba(15,20,26,0.06);
  padding: 48rpx;
  .consent-item { border-bottom: 2rpx solid rgba(58,123,213,0.12); padding: 32rpx 0; }
  .guardian-item {
    background: var(--color-success-50);
    border-radius: 24rpx;
    padding: 32rpx;
    margin-top: 24rpx;
    .permission-level {
      background: var(--color-success-500);
      color: #FFF;
      border-radius: 1998rpx;
      padding: 4rpx 16rpx;
      font-size: 20rpx;
    }
  }
}

5. 交互与状态

周报"生成任务"点击后调用行为闭环工作流，并提示写入"心情随笔-清单"。
学校绑定流程：点击绑定学校CTA → 搜索/选择学校 → 导入院系信息 → 绑定辅导员。
守护人管理：添加守护人需填写关系、联系方式、权限级别；支持测试通知功能。
辅导员联系：支持匿名/实名选择，匿名时仅显示基本信息，实名可查看完整联系方式。
授权项中的"查看详情"展开后显示字段权限；撤销操作需二次确认。
资源地图长按弹出"匿名联系/实名预约"选择。
夜间模式自动切换问候语（如"夜深了，记得休息"）。

6. 响应式 & 主题

断点	调整
`<720rpx`	徽章滑动区缩减为一行一个，周报图表堆叠，学校信息卡垂直排列
`360-1534rpx`	默认单列
`≥1536rpx`	周报与徽章并排，学校信息卡与隐私中心左右分栏

晚安模式：背景深色 #161B22，卡片 #1F2730，文本颜色提升亮度。
考试周皮肤：周报 CTA 变为 Mint，徽章加入"备考达人"主题，学校信息卡显示考试提醒。
开学季主题：学校绑定CTA变为开学季样式，显示"欢迎新同学"等个性化内容。

7. 数据与工作流

入口	绑定	说明
学校信息卡	`school_info` + `user_school_binding`	展示学校和辅导员信息
周报卡	`weekly_summaries`	展示情绪/行为指标，可选学校对比
下一步建议	行为闭环工作流	自动写入任务清单
守护人管理	`guardians` + `guardian_permissions`	管理紧急联系人和权限
授权列表	`consents`	可撤销、可续期
审计记录	`audit_logs`	展示最近操作
资源地图	`resources` + `school_resources`	校内资源优先，支持预约

8. 无障碍与验收

所有仪表提供文本摘要；
按钮对比度 ≥ 4.5:1，Tab 顺序清晰；
验收清单：
1. 学校绑定流程完整，辅导员信息准确，支持匿名联系；
2. 守护人管理功能完整，权限级别生效，测试通知正常；
3. 周报数据与后台一致，Top3 CTA 可生成任务；
4. 授权列表状态同步，撤销后立即更新；
5. 资源地图链接可用，校内资源优先显示，支持预约功能；
6. 夜间/主题切换语义色正确，学校徽章保持可识别性。

该规范确保“我的”页兼具温度与掌控感，与周报、行为闭环、隐私工作流一体化运作。

贡献者

Cai Hongyu

文件历史

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

我的综合样式规范（成长 × 边界 × 资源 × 学校协同） ​

1. 设计定位 ​

2. 页面结构 ​

3. 模块详解 ​

3.1 顶部欢迎卡 <ProfileHero> ​

3.2 学校信息卡 <SchoolInfoCard> ​

3.3 护心周报 <WeeklyReportCard> ​

3.4 徽章与成就 <BadgeCarousel> ​

3.5 隐私与授权中心 <PrivacyCenter> ​

3.6 资源地图 <ResourceGrid> ​

4. 样式片段 ​

5. 交互与状态 ​

6. 响应式 & 主题 ​

7. 数据与工作流 ​

8. 无障碍与验收 ​

贡献者 ​

文件历史 ​

我的综合样式规范（成长 × 边界 × 资源 × 学校协同）

1. 设计定位

2. 页面结构

3. 模块详解

3.1 顶部欢迎卡 `<ProfileHero>`

3.2 学校信息卡 `<SchoolInfoCard>`

3.3 护心周报 `<WeeklyReportCard>`

3.4 徽章与成就 `<BadgeCarousel>`

3.5 隐私与授权中心 `<PrivacyCenter>`

3.6 资源地图 `<ResourceGrid>`

4. 样式片段

5. 交互与状态

6. 响应式 & 主题

7. 数据与工作流

8. 无障碍与验收

贡献者

文件历史