2. 字体层级
数据大屏标题 Hero28px Bold
页面标题 Title20px Bold
区块标题 Heading17px Semibold
正文内容 Body15px Regular
副文本 Subtext14px Regular
说明文字 Caption12px Regular
辅助标注 Tiny11px Medium
3. 圆角与间距
圆角
大组件12px · 小组件8px · 胶囊20px
4. 按钮
变体
尺寸
状态
5. 表单控件
选择器 & 开关
开关
复选 & 单选
✓已选中复选项
✓未选中复选项
已选中单选项
未选中单选项
6. 标签与徽标
颜色标签
主色标签
合格
不合格
注意
默认
描边
主色描边
徽标 & 状态
3
12
在线
离线
待处理
进行中
8. 列表与分组
Grouped Inset List
站房侧搭接情况1/3▼
✓I段进线电缆✓
2II段进线电缆›
3电源情况核查
9. 底部控制栏（拇指热区）
拍照项：[合格] ◉快门 [不合格]
判定项：快门隐藏
已完成项：重新检查
10. 弹出层
不合格原因 Bottom Sheet
不合格原因✕
✓现场与图纸不符
✓外观缺陷/损坏
✓安装不规范
Toast 轻提示
📷 拍照成功
✓ 判定合格
✗ 已标记不合格
通知条 Banner
安全关卡 · 电源核查完成后方可开始
拍完所有站房照片后统一提交
两组已提交，请审核确认
11. 通知与反馈
Alert 通知条
ℹ️信息提示：当前处于弱网环境，数据已暂存本地。
✅操作成功：核查结果已提交。
⚠️注意：存在不合格项，请确认是否取消作业。
🔔提醒：电源核查尚未完成，其他核查项暂时锁定。
12. 头像与数据展示
键值对
项目名称慧悦雅园省检
站房数量3个（1开关站+2配电室）
工作负责人陈雷
14. 空状态
📋
暂无核查记录
完成核查分工后，核查任务将显示在这里
15. 交互规范
触控目标
最小点击区域 44×44px · 按钮高度不低于 44px · 按钮间距不低于 8px
弹出层显隐
必须使用 display:none/block 控制，禁止使用 transform 隐藏（避免事件穿透bug）
拍照流程
选中拍照项 → 快门可用 → 拍照（可多张）→ 合格/不合格激活 → 判定 → 锁定（不可追拍）→ 可"重新检查"撤销
判定项流程
选中判定项 → 快门隐藏 → 合格/不合格直接可用 → 判定 → 锁定
缩略条
只显示当前选中项的照片，切换选中项时缩略条跟随切换
已完成项
列表行显示 ✓ 或 ✗ 状态 · 选中时底部显示"↺ 重新检查"替代操作按钮 · 推荐下一项温和黄色脉冲高亮
16. 筛选与操作
快速跳转 Tabs
电源核查 1/3
建设情况 4/4
送电痕迹 0/1
17. 取景窗与缩略条
取景窗180px · 九宫格辅助线 · 底部毛玻璃标签 · 录制红点闪烁 · 拍照flash动画
缩略条56px · 深色背景#1a1a1a · 只显示当前选中项照片
18. 表格
| 站房 | 类型 | 状态 | 判定人 |
|---|
| 1#开关站 | 开关站 | 合格 | 张三 |
| 2#配电室 | 配电室 | 合格 | 李四 |
| 3#配电室 | 配电室 | 不合格 | 张三 |
检e通 V3.0 设计规范 · 共享样式层 demo_shared_base.css · 39个组件模块 · 2032行
基于 Material Design 3 + V4.0 交互方案 · 主色沿用2.4系统青绿色 #3CC8B4