情绪打卡高保真设计图
字数
3869 字
阅读时间
22 分钟
页面：情绪打卡功能模块 (高保真设计图) 版本：v1.0 生成时间：2025-01-24 引用规范：docs/前端样式/样式规范/情绪打卡.md、docs/功能文档/功能-情绪打卡.md、docs/数据库/集合-情绪打卡.checkins.md
Token→色值映射表：
- color-bg-page: #F7F9FC (页面背景)
- color-bg-card: #FFFFFF (卡片背景)
- color-brand-50: #EEF5FF (品牌浅蓝)
- color-brand-100: #D9E8FF (品牌中蓝)
- color-brand-500: #3A7BD5 (品牌主色)
- color-success-50: #EAFBF5 (成功浅绿)
- color-success-500: #2AC28D (成功主色)
- color-warning-50: #FFF6E8 (警告浅黄)
- color-warning-500: #F2B23D (警告主色)
- color-danger-50: #FEE2E2 (危险浅红)
- color-danger-500: #FF6B6B (危险主色)
- color-critical-500: #E63946 (紧急红色)
- color-ink-900: #2C3640 (主标题色)
- color-ink-600: #5A6672 (正文色)
- color-ink-500: #434E5A (次要文本色)
- color-ink-400: #7B8893 (说明文字色)
- color-ink-300: #9AA6B2 (禁用文字色)
- color-border: #E9EDF3 (边框色)
设计说明
本高保真图展示了情绪打卡功能的完整用户界面，包含以下核心模块：
- 情绪状态卡 - 展示当前情绪状态和风险等级
- 情绪打卡面板 - 包含分值滑块、标签选择、能量指数等输入控件
- 心情曲线抽屉 - 展示当日情绪变化趋势
- 风险提示徽标 - 根据风险等级显示不同颜色状态
SVG源码
svg
<svg width="375" height="812" viewBox="0 0 375 812" xmlns="http://www.w3.org/2000/svg">
<!--
页面：情绪打卡功能模块 (高保真设计图)
版本：v1.0
生成时间：2025-01-24
引用规范：docs/前端样式/样式规范/情绪打卡.md、docs/功能文档/功能-情绪打卡.md、docs/数据库/集合-情绪打卡.checkins.md
-->
<defs>
<!-- 阴影滤镜 -->
<filter id="cardShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="4" stdDeviation="8" flood-opacity="0.1"/>
</filter>
<filter id="panelShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="8" stdDeviation="16" flood-opacity="0.15"/>
</filter>
<!-- 情绪分值渐变 -->
<linearGradient id="moodGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#E57A74"/>
<stop offset="30%" style="stop-color:#C9A86A"/>
<stop offset="50%" style="stop-color:#92A1B0"/>
<stop offset="70%" style="stop-color:#5AA6A6"/>
<stop offset="100%" style="stop-color:#F5A97F"/>
</linearGradient>
<!-- 表情图标 -->
<g id="emojiHappy">
<circle cx="12" cy="12" r="10" fill="#F5A97F" opacity="0.2"/>
<text x="12" y="17" text-anchor="middle" font-family="Arial" font-size="14">😊</text>
</g>
<g id="emojiAnxious">
<circle cx="12" cy="12" r="10" fill="#C9A86A" opacity="0.2"/>
<text x="12" y="17" text-anchor="middle" font-family="Arial" font-size="14">😟</text>
</g>
<g id="emojiTired">
<circle cx="12" cy="12" r="10" fill="#92A1B0" opacity="0.2"/>
<text x="12" y="17" text-anchor="middle" font-family="Arial" font-size="14">😴</text>
</g>
<!-- 场景图标 -->
<g id="sceneStudy">
<rect x="4" y="4" width="16" height="16" rx="8" fill="#EEF5FF"/>
<text x="12" y="15" text-anchor="middle" font-family="Arial" font-size="10">📚</text>
</g>
<g id="sceneSocial">
<rect x="4" y="4" width="16" height="16" rx="8" fill="#F4F3FF"/>
<text x="12" y="15" text-anchor="middle" font-family="Arial" font-size="10">👥</text>
</g>
<g id="sceneSelf">
<rect x="4" y="4" width="16" height="16" rx="8" fill="#EAFBF5"/>
<text x="12" y="15" text-anchor="middle" font-family="Arial" font-size="10">🧘</text>
</g>
<!-- 附件图标 -->
<g id="attachImage">
<rect x="2" y="2" width="20" height="20" rx="4" fill="#F7F9FC" stroke="#E9EDF3"/>
<rect x="6" y="6" width="12" height="8" fill="#3A7BD5" opacity="0.6"/>
<circle cx="14" cy="10" r="2" fill="#FFFFFF"/>
</g>
<g id="attachVoice">
<rect x="2" y="2" width="20" height="20" rx="4" fill="#F7F9FC" stroke="#E9EDF3"/>
<path d="M 8 8 L 8 14 M 8 8 Q 8 6 10 6 Q 12 6 12 8 L 12 12 Q 12 14 10 14 Q 8 14 8 12"
stroke="#3A7BD5" stroke-width="1.5" fill="none"/>
<circle cx="14" cy="16" r="1" fill="#3A7BD5"/>
</g>
</defs>
<!-- 页面背景 -->
<rect width="375" height="812" fill="#F7F9FC"/>
<!-- 顶部安全区 -->
<rect width="375" height="44" fill="white"/>
<!-- 页面标题 -->
<text x="20" y="30" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="18" font-weight="700" fill="#2C3640">情绪打卡</text>
<!-- 模块1：情绪状态卡 -->
<g id="moodStatusCard">
<rect x="16" y="68" width="343" height="120" rx="16" fill="#FFFFFF" filter="url(#cardShadow)"/>
<!-- 用户信息区 -->
<circle cx="48" cy="104" r="20" fill="#F0F4F8"/>
<text x="48" y="109" text-anchor="middle" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="14" fill="#3A7BD5">头像</text>
<text x="80" y="96" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="16" font-weight="600" fill="#2C3640">当前状态</text>
<text x="80" y="112" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" fill="#7B8893">最后更新：10分钟前</text>
<!-- 风险等级徽标 -->
<circle cx="320" cy="96" r="8" fill="#2AC28D"/>
<text x="320" y="100" text-anchor="middle" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="8" fill="#FFFFFF">L1</text>
<text x="335" y="96" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="14" fill="#2C3640">今日情绪良好</text>
<text x="335" y="112" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" fill="#5A6672">情绪指数：72分</text>
<!-- 再次打卡按钮 -->
<rect x="271" y="144" width="72" height="28" rx="14" fill="#3A7BD5"/>
<text x="307" y="162" text-anchor="middle" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" font-weight="600" fill="#FFFFFF">再次打卡</text>
</g>
<!-- 模块2：情绪打卡面板 (弹出状态) -->
<g id="moodCheckinPanel">
<!-- 半透明背景遮罩 -->
<rect width="375" height="812" fill="#000000" opacity="0.3"/>
<!-- 面板主体 -->
<rect x="0" y="250" width="375" height="562" rx="32" fill="#FFFFFF" filter="url(#panelShadow)"/>
<!-- 面板标题 -->
<text x="24" y="280" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="20" font-weight="700" fill="#2C3640">情绪打卡</text>
<text x="351" y="280" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="16" fill="#7B8893" text-anchor="end">✕</text>
<!-- 情绪分值滑块 -->
<g transform="translate(24, 310)">
<text x="0" y="0" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="16" font-weight="600" fill="#2C3640">情绪分值</text>
<text x="327" y="0" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="16" font-weight="600" fill="#3A7BD5" text-anchor="end">72分</text>
<!-- 滑块轨道 -->
<rect x="0" y="16" width="327" height="8" rx="4" fill="url(#moodGradient)"/>
<rect x="0" y="16" width="235" height="8" rx="4" fill="#3A7BD5" opacity="0.3"/>
<!-- 滑块按钮 -->
<circle cx="235" cy="20" r="12" fill="#FFFFFF" stroke="#3A7BD5" stroke-width="3"/>
<circle cx="235" cy="20" r="6" fill="#3A7BD5"/>
<!-- 分值标签 -->
<text x="0" y="40" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" fill="#7B8893">0</text>
<text x="163.5" y="40" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" fill="#7B8893" text-anchor="middle">50</text>
<text x="327" y="40" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" fill="#7B8893" text-anchor="end">100</text>
<!-- 情绪区间 -->
<text x="0" y="56" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="10" fill="#E57A74">负向</text>
<text x="163.5" y="56" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="10" fill="#92A1B0" text-anchor="middle">中性</text>
<text x="327" y="56" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="10" fill="#2AC28D" text-anchor="end">正向</text>
</g>
<!-- 情绪标签选择器 -->
<g transform="translate(24, 390)">
<text x="0" y="0" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="16" font-weight="600" fill="#2C3640">情绪标签</text>
<!-- 预设标签 -->
<g transform="translate(0, 20)">
<!-- 开心 - 选中 -->
<rect x="0" y="0" width="72" height="32" rx="16" fill="#FFF6E8"/>
<use href="#emojiHappy" x="4" y="4"/>
<text x="30" y="20" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" fill="#F2B23D">开心</text>
<!-- 焦虑 - 未选中 -->
<rect x="80" y="0" width="72" height="32" rx="16" fill="#F7F9FC" stroke="#E9EDF3"/>
<use href="#emojiAnxious" x="84" y="4"/>
<text x="110" y="20" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" fill="#7B8893">焦虑</text>
<!-- 疲惫 - 选中 -->
<rect x="160" y="0" width="72" height="32" rx="16" fill="#FFF6E8"/>
<use href="#emojiTired" x="164" y="4"/>
<text x="190" y="20" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" fill="#F2B23D">疲惫</text>
<!-- 自定义 -->
<rect x="240" y="0" width="72" height="32" rx="16" fill="#F7F9FC" stroke="#E9EDF3" stroke-dasharray="4,2"/>
<text x="276" y="20" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" fill="#7B8893" text-anchor="middle">+自定义</text>
</g>
<!-- 已选标签 -->
<g transform="translate(0, 60)">
<text x="0" y="12" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" fill="#5A6672">已选：</text>
<rect x="48" y="0" width="48" height="24" rx="12" fill="#EEF5FF"/>
<text x="72" y="16" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="10" fill="#3A7BD5" text-anchor="middle">开心</text>
<rect x="104" y="0" width="48" height="24" rx="12" fill="#EEF5FF"/>
<text x="128" y="16" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="10" fill="#3A7BD5" text-anchor="middle">疲惫</text>
</g>
</g>
<!-- 场景标签选择器 -->
<g transform="translate(24, 490)">
<text x="0" y="0" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="16" font-weight="600" fill="#2C3640">场景标签</text>
<g transform="translate(0, 20)">
<!-- 学业 -->
<rect x="0" y="0" width="64" height="32" rx="16" fill="#EEF5FF"/>
<use href="#sceneStudy" x="4" y="8"/>
<text x="26" y="20" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" fill="#3A7BD5">学业</text>
<!-- 社交 -->
<rect x="72" y="0" width="64" height="32" rx="16" fill="#F7F9FC" stroke="#E9EDF3"/>
<use href="#sceneSocial" x="76" y="8"/>
<text x="98" y="20" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" fill="#7B8893">社交</text>
<!-- 自我 -->
<rect x="144" y="0" width="64" height="32" rx="16" fill="#EEF5FF"/>
<use href="#sceneSelf" x="148" y="8"/>
<text x="170" y="20" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" fill="#3A7BD5">自我</text>
<!-- 其他 -->
<rect x="216" y="0" width="64" height="32" rx="16" fill="#F7F9FC" stroke="#E9EDF3"/>
<rect x="220" y="8" width="16" height="16" rx="8" fill="#F7F9FC" stroke="#E9EDF3"/>
<text x="228" y="19" text-anchor="middle" font-family="Arial" font-size="10">🏠</text>
<text x="246" y="20" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" fill="#7B8893">其他</text>
</g>
</g>
<!-- 能量指数选择器 -->
<g transform="translate(24, 560)">
<text x="0" y="0" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="16" font-weight="600" fill="#2C3640">能量指数</text>
<g transform="translate(0, 24)">
<!-- 能量等级圆点 -->
<circle cx="12" cy="12" r="8" fill="#F7F9FC" stroke="#E9EDF3"/>
<text x="12" y="16" text-anchor="middle" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="10" fill="#C5CEDA">1</text>
<circle cx="52" cy="12" r="8" fill="#F7F9FC" stroke="#E9EDF3"/>
<text x="52" y="16" text-anchor="middle" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="10" fill="#C5CEDA">2</text>
<circle cx="92" cy="12" r="8" fill="#FFF6E8" stroke="#F2B23D"/>
<text x="92" y="16" text-anchor="middle" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="10" fill="#F2B23D">3</text>
<circle cx="132" cy="12" r="8" fill="#F7F9FC" stroke="#E9EDF3"/>
<text x="132" y="16" text-anchor="middle" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="10" fill="#C5CEDA">4</text>
<circle cx="172" cy="12" r="8" fill="#F7F9FC" stroke="#E9EDF3"/>
<text x="172" y="16" text-anchor="middle" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="10" fill="#C5CEDA">5</text>
<!-- 连接线 -->
<line x1="20" y1="12" x2="164" y2="12" stroke="#E9EDF3" stroke-width="2"/>
<!-- 能量描述 -->
<text x="200" y="16" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" fill="#5A6672">中等能量</text>
</g>
</g>
<!-- 备注输入框 -->
<g transform="translate(24, 610)">
<text x="0" y="0" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="16" font-weight="600" fill="#2C3640">备注</text>
<rect x="0" y="12" width="327" height="60" rx="12" fill="#F7F9FC" stroke="#E9EDF3"/>
<text x="16" y="36" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="14" fill="#9AA6B2">记录此刻感受...</text>
<text x="311" y="60" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" fill="#C5CEDA" text-anchor="end">0/280</text>
</g>
<!-- 附件上传 -->
<g transform="translate(24, 690)">
<text x="0" y="0" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="16" font-weight="600" fill="#2C3640">附件</text>
<use href="#attachImage" x="0" y="12"/>
<text x="32" y="26" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" fill="#3A7BD5">添加图片</text>
<use href="#attachVoice" x="120" y="12"/>
<text x="152" y="26" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" fill="#3A7BD5">添加语音</text>
</g>
<!-- 底部操作按钮 -->
<g transform="translate(24, 750)">
<rect x="0" y="0" width="96" height="40" rx="20" fill="#F7F9FC" stroke="#E9EDF3"/>
<text x="48" y="26" text-anchor="middle" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="14" font-weight="600" fill="#7B8893">取消</text>
<rect x="231" y="0" width="96" height="40" rx="20" fill="#3A7BD5"/>
<text x="279" y="26" text-anchor="middle" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="14" font-weight="600" fill="#FFFFFF">保存打卡</text>
</g>
</g>
<!-- 模块3：心情曲线抽屉 (隐藏状态) -->
<g id="moodCurveDrawer" display="none">
<!-- 抽屉背景 -->
<rect x="0" y="400" width="375" height="412" rx="32" fill="#FFFFFF" filter="url(#panelShadow)"/>
<!-- 抽屉标题 -->
<text x="24" y="440" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="18" font-weight="700" fill="#2C3640">今日情绪变化</text>
<text x="351" y="440" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="16" fill="#7B8893" text-anchor="end">↓</text>
<!-- 心情曲线图表 -->
<g transform="translate(24, 460)">
<rect x="0" y="0" width="327" height="200" rx="16" fill="#FFFFFF" stroke="#E9EDF3"/>
<!-- 图表标题 -->
<text x="16" y="24" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="14" font-weight="600" fill="#2C3640">情绪趋势</text>
<!-- 图表区域 -->
<g transform="translate(16, 40)">
<!-- 网格线 -->
<g stroke="#E9EDF3" stroke-width="0.5" opacity="0.3">
<line x1="0" y1="0" x2="295" y2="0"/>
<line x1="0" y1="40" x2="295" y2="40"/>
<line x1="0" y1="80" x2="295" y2="80"/>
<line x1="0" y1="120" x2="295" y2="120"/>
<line x1="0" y1="160" x2="295" y2="160"/>
</g>
<!-- 中性线 -->
<line x1="0" y1="80" x2="295" y2="80" stroke="#BFD6FF" stroke-width="1" stroke-dasharray="5,5" opacity="0.6"/>
<!-- 趋势线 -->
<path d="M 0,100 L 60,80 L 120,60 L 180,70 L 240,50 L 295,65"
stroke="#3A7BD5" stroke-width="3" fill="none"/>
<!-- 数据点 -->
<g fill="#3A7BD5">
<circle cx="0" cy="100" r="5"/>
<circle cx="60" cy="80" r="5"/>
<circle cx="120" cy="60" r="5"/>
<circle cx="180" cy="70" r="5"/>
<circle cx="240" cy="50" r="5"/>
<circle cx="295" cy="65" r="5"/>
</g>
<!-- Y轴标签 -->
<text x="-10" y="5" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="10" fill="#7B8893" text-anchor="end">100</text>
<text x="-10" y="85" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="10" fill="#7B8893" text-anchor="end">50</text>
<text x="-10" y="165" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="10" fill="#7B8893" text-anchor="end">0</text>
</g>
<!-- X轴时间标签 -->
<g font-family="Inter, PingFang SC, Helvetica, Arial" font-size="10" fill="#7B8893" text-anchor="middle">
<text x="32" y="255">00:00</text>
<text x="90" y="255">06:00</text>
<text x="148" y="255">12:00</text>
<text x="206" y="255">18:00</text>
<text x="264" y="255">24:00</text>
</g>
</g>
<!-- 打卡记录列表 -->
<g transform="translate(24, 680)">
<text x="0" y="0" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="14" font-weight="600" fill="#2C3640">打卡记录</text>
<!-- 记录项1 -->
<g transform="translate(0, 20)">
<rect x="0" y="0" width="327" height="50" rx="12" fill="#F7F9FC"/>
<text x="16" y="20" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" font-weight="600" fill="#2C3640">09:00</text>
<text x="80" y="20" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" fill="#3A7BD5">72分</text>
<text x="120" y="20" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" fill="#5A6672">平静</text>
<text x="16" y="38" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="11" fill="#7B8893">自习室 · 专注学习但略累</text>
</g>
<!-- 记录项2 -->
<g transform="translate(0, 80)">
<rect x="0" y="0" width="327" height="50" rx="12" fill="#F7F9FC"/>
<text x="16" y="20" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" font-weight="600" fill="#2C3640">13:10</text>
<text x="80" y="20" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" fill="#F2B23D">45分</text>
<text x="120" y="20" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" fill="#C9A86A">焦虑</text>
<text x="16" y="38" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="11" fill="#7B8893">宿舍 · 室友打游戏有点吵</text>
</g>
</g>
</g>
<!-- 风险等级徽标示例 -->
<g id="riskBadgeExamples" transform="translate(16, 200)">
<text x="0" y="0" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="14" font-weight="600" fill="#2C3640">风险等级示例</text>
<!-- L1 - 一般 -->
<g transform="translate(0, 20)">
<rect x="0" y="0" width="48" height="24" rx="12" fill="#2AC28D"/>
<text x="24" y="17" text-anchor="middle" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" font-weight="600" fill="#FFFFFF">L1</text>
<text x="56" y="17" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" fill="#2AC28D">一般</text>
</g>
<!-- L2 - 关注 -->
<g transform="translate(120, 20)">
<rect x="0" y="0" width="48" height="24" rx="12" fill="#F2B23D"/>
<text x="24" y="17" text-anchor="middle" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" font-weight="600" fill="#FFFFFF">L2</text>
<text x="56" y="17" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" fill="#F2B23D">关注</text>
</g>
<!-- L3 - 需要干预 -->
<g transform="translate(240, 20)">
<rect x="0" y="0" width="48" height="24" rx="12" fill="#FF6B6B"/>
<text x="24" y="17" text-anchor="middle" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" font-weight="600" fill="#FFFFFF">L3</text>
<text x="56" y="17" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" fill="#FF6B6B">需要干预</text>
</g>
<!-- L4 - 紧急危机 -->
<g transform="translate(0, 60)">
<rect x="0" y="0" width="48" height="24" rx="12" fill="#E63946"/>
<text x="24" y="17" text-anchor="middle" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" font-weight="600" fill="#FFFFFF">L4</text>
<text x="56" y="17" font-family="Inter, PingFang SC, Helvetica, Arial" font-size="12" fill="#E63946">紧急危机</text>
</g>
</g>
</svg>设计图说明
核心组件展示
- 情绪状态卡：展示用户当前情绪状态、风险等级和快速打卡入口
- 情绪打卡面板：完整的打卡输入界面，包含分值、标签、场景、能量等维度
- 心情曲线抽屉：展示当日情绪变化趋势和详细记录
- 风险等级徽标：四种风险等级的视觉展示
交互状态
- 打卡面板显示为弹出状态，带有半透明背景遮罩
- 心情曲线抽屉为隐藏状态，可通过状态卡查看详情触发
- 所有交互元素都具备明确的视觉反馈
色彩应用
- 严格遵循情绪打卡样式规范中的色彩定义
- 风险等级使用对应的色彩系统（绿-黄-红-深红）
- 情绪分值使用渐变色带直观展示从负向到正向的变化
此高保真图为开发团队提供了清晰的视觉指导，确保情绪打卡功能的实现符合设计规范。
贡献者
Cai Hongyu