feat: H5原型设计 spec 审批通过

- docs/superpowers/specs/2026-04-14-smart-project-prototype-design.md - 设计锁定: 智慧工地风配色/4Tab/10页面/隐患随手拍/施工日志 - 10个页面: login/device list+detail/alert list+detail/report/logs/log write/profile
2026-04-14 12:12:26 +08:00
parent 6c8760c6c5
commit d787a313f3
1 changed files with 200 additions and 0 deletions
--- a/docs/superpowers/specs/2026-04-14-smart-project-prototype-design.md
+++ b/docs/superpowers/specs/2026-04-14-smart-project-prototype-design.md
@@ -0,0 +1,200 @@
+---
+name: 郑州智慧工地 H5 原型设计
+status: approved
+date: 2026-04-14
+---
+
+# 郑州智慧工地 H5 原型设计
+
+## 审批状态
+
+已批准（2026-04-14）
+
+---
+
+## 1. 设计风格
+
+**配色风格：智慧工地风**
+
+| 角色 | 色值 | 用途 |
+|------|------|------|
+| 主色 | `#1e3a5f` | 顶栏、按钮、标题 |
+| 辅色 | `#3b82f6` | 链接、次要操作 |
+| 警示-Danger | `#f97316` | 危险预警、橙色强调 |
+| 警示-Warning | `#eab308` | 警告预警 |
+| 背景 | `#f8fafc` | 页面底色 |
+| 文字 | `#1f2937` | 正文文字 |
+| 卡片背景 | `#ffffff` | 白色卡片 |
+
+**字体**：系统默认无衬线字体，数字用等宽显示
+**图标**：阿里巴巴矢量图标库 iconfont（CDN）
+
+---
+
+## 2. 页面清单
+
+| # | 页面 | 路由 | 说明 |
+|---|------|------|------|
+| 1 | 登录 | `/login.html` | 账号密码登录 |
+| 2 | 首页仪表盘 | `/index.html` | 设备统计 + 预警统计 + 快捷入口 |
+| 3 | 设备列表 | `/devices.html` | 卡片网格，Tab 切换（全部/塔吊/升降机） |
+| 4 | 设备详情 | `/device.html?id=x` | 单台设备实时数据面板 |
+| 5 | 预警列表 | `/alerts.html` | 最新优先，Tab 切换（全部/危险/警告/已处理） |
+| 6 | 预警详情 | `/alert.html?id=x` | 预警详情 + 处理/忽略操作 |
+| 7 | 隐患随手拍 | `/report.html` | 拍照上报隐患（完整字段） |
+| 8 | 施工日志列表 | `/logs.html` | 日志记录列表 |
+| 9 | 施工日志填写 | `/log.html` | 模板化填写 + 拍照附件 |
+| 10 | 个人中心 | `/profile.html` | 个人信息 + 退出登录 |
+
+---
+
+## 3. 底部 Tab 栏
+
+4 个 Tab，固定在页面底部：
+
+```
+┌──────┬──────┬──────┬──────┐
+│ 首页  │ 设备  │ 随手拍 │ 日志  │
+│  🏠   │  🏗️   │  📷   │  📋   │
+└──────┴──────┴──────┴──────┘
+```
+
+| Tab | 路由 | 内容 |
+|-----|------|------|
+| 首页 | `/index.html` | Dashboard（设备统计 + 预警统计 + 快捷入口） |
+| 设备 | `/devices.html` | 设备列表；点击设备卡片进入设备详情；顶部预警入口进入预警列表 |
+| 随手拍 | `/report.html` | 隐患随手拍页面 |
+| 日志 | `/logs.html` | 施工日志列表（右上角「写日志」按钮进入填写页）；右上角个人图标进入个人中心 |
+
+---
+
+## 4. 隐患随手拍 — 字段设计
+
+用户发现安全隐患后拍照上报，字段如下：
+
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| 照片 | 必须（多张） | 手机拍照或相册选择 |
+| 隐患描述 | 文本框（必填） | 最多 200 字 |
+| 隐患类别 | 下拉选择（必填） | 高空坠落 / 物体打击 / 机械伤害 / 触电 / 坍塌 / 火灾 / 其他 |
+| 严重程度 | 单选（必填） | 一般 / 较大 / 重大 |
+| GPS 位置 | 自动获取 | 经纬度 + 可选地址文字描述 |
+| 提交 | 按钮 | 直传 OSS 预签名 URL |
+
+---
+
+## 5. 施工日志 — 字段设计
+
+每日施工日志模板化填写：
+
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| 日期 | 日期选择 | 默认当天 |
+| 施工部位 | 下拉/文本 | 如 "A区地下室" |
+| 作业内容 | 多行文本框 | 必填 |
+| 人员出勤 | 数字输入 | 当日出勤人数 |
+| 设备运行 | 多选项复选框 | 塔吊 / 升降机 / 其他 |
+| 安全问题 | 文本框 | 有则填写 |
+| 备注 | 文本框 | 可选 |
+| 附件 | 拍照（多张） | 支持多张，直传 OSS |
+| 提交 | 按钮 | |
+
+---
+
+## 6. Mock 数据规格
+
+原型使用静态 Mock 数据（H5 内嵌 JS object，不请求真实 API）：
+
+- 塔吊：3 台（设备名称、型号、位置、在线状态）
+- 升降机：2 台（设备名称、型号、位置、在线状态）
+- 预警：6 条（danger 2 条 + warning 4 条，覆盖已读/未读/已处理状态）
+- 隐患随手拍：提交成功后展示提交记录列表（3 条 mock）
+- 施工日志：列表展示 5 条 mock 日志记录
+
+---
+
+## 7. 交互细节
+
+### 7.1 登录
+- 输入账号 + 密码，点击登录
+- Mock：任意账号密码均可登录，跳转到首页
+- 登录成功后 `localStorage.setItem('token', 'mock-token')`
+
+### 7.2 首页仪表盘
+- 展示设备统计卡片：塔吊数量/在线数、升降机数量/在线数
+- 展示预警统计卡片：今日危险数量、今日警告数量
+- 快捷入口：点击"查看全部预警"跳转预警列表
+
+### 7.3 设备列表
+- Tab 子导航：全部 / 塔吊 / 升降机
+- 卡片网格展示设备，支持按 Tab 筛选
+- 卡片显示：设备图标、名称、型号、位置、在线状态（绿色=在线/灰色=离线）
+- 点击卡片进入设备详情
+
+### 7.4 设备详情
+- 实时数据面板：载重/风速/幅度/高度等（塔吊）；载重/速度/楼层/门状态（升降机）
+- 展示告警状态（如有）
+- 每 30 秒刷新一次（Mock setInterval）
+
+### 7.5 预警列表
+- Tab 子导航：全部 / 危险 / 警告 / 已处理
+- 列表项显示：级别图标 + 消息摘要 + 设备名称 + 时间
+- 点击进入预警详情
+
+### 7.6 预警详情
+- 展示预警完整信息
+- 两个操作按钮：确认处理 / 忽略
+- 处理成功后更新状态并跳转回列表
+
+### 7.7 隐患随手拍
+- 点击相机按钮调起手机相机拍照
+- 填写隐患描述、选择类别和严重程度
+- 自动获取 GPS 位置
+- 点击提交：先调 OSS 预签名 URL，图片直传 OSS，表单数据 POST 到后台（Mock 成功提示）
+
+### 7.8 施工日志列表
+- 展示已提交的日志列表，按日期倒序
+- 点击「写日志」按钮进入填写页
+
+### 7.9 施工日志填写
+- 模板化表单填写
+- 支持拍照附件（多张）
+- 提交后跳转回列表页
+
+### 7.10 个人中心
+- 展示用户名、角色
+- 退出登录按钮（清除 localStorage.token，跳转登录页）
+
+---
+
+## 8. 技术实现
+
+- **纯前端**：HTML5 + CSS3 + Vanilla JavaScript，无框架依赖
+- **图表**：ECharts（CDN）
+- **图标**：阿里巴巴 iconfont（CDN）
+- **无构建步骤**：直接打开 HTML 文件即可运行
+- **Mock 模式**：所有 API 调用替换为本地 JS mock 数据和 setTimeout 模拟异步
+
+---
+
+## 9. 文件结构
+
+```
+h5/
+├── index.html          # 首页仪表盘
+├── login.html          # 登录页
+├── devices.html        # 设备列表
+├── device.html         # 设备详情
+├── alerts.html         # 预警列表
+├── alert.html          # 预警详情
+├── report.html         # 隐患随手拍
+├── logs.html           # 施工日志列表
+├── log.html            # 施工日志填写
+├── profile.html        # 个人中心
+├── css/
+│   └── style.css       # 全局样式
+└── js/
+    ├── api.js          # API 基础封装（Mock）
+    ├── mock.js         # Mock 数据
+    └── app.js          # 全局逻辑（Tab 栏、登录状态检查）
+```