diff --git a/docs/plans/2026-04-14-h5-prototype-implementation.md b/docs/plans/2026-04-14-h5-prototype-implementation.md
new file mode 100644
index 0000000..3405b16
--- /dev/null
+++ b/docs/plans/2026-04-14-h5-prototype-implementation.md
@@ -0,0 +1,2911 @@
+# 郑州智慧工地 H5 原型实施计划
+
+> **For Hermes:** Use subagent-driven-development skill to implement this plan task-by-task.
+
+**Goal:** 构建可运行的 H5 原型，包含 10 个页面、Mock 数据、智慧工地风 UI，运行在浏览器中直接打开。
+
+**Architecture:** 纯前端 HTML/CSS/JS，无构建步骤。Mock 数据内嵌于 JS，所有 API 调用替换为本地 mock + setTimeout 模拟异步延迟。CSS 变量统一管理主题色。
+
+**Tech Stack:** HTML5 / CSS3 / Vanilla JS / ECharts(CDN) / iconfont(CDN)
+
+---
+
+## 前置准备
+
+### Task 1: 创建项目目录结构
+
+**Objective:** 创建 `h5/` 目录及子目录
+
+**Files:**
+- Create: `h5/css/`
+- Create: `h5/js/`
+
+**Step 1: 创建目录**
+
+```bash
+mkdir -p h5/css h5/js
+```
+
+**Step 2: 验证**
+
+```bash
+ls -la h5/
+```
+
+Expected output:
+```
+h5/
+├── css/
+└── js/
+```
+
+---
+
+### Task 2: 创建 CSS 变量定义文件
+
+**Objective:** 建立主题色变量和全局重置样式
+
+**Files:**
+- Create: `h5/css/variables.css`
+
+**Step 1: 创建 variables.css**
+
+```css
+/* 智慧工地主题色 */
+:root {
+  /* 主色 */
+  --color-primary: #1e3a5f;
+  --color-primary-light: #2d5a8a;
+  --color-secondary: #3b82f6;
+
+  /* 警示色 */
+  --color-danger: #f97316;
+  --color-warning: #eab308;
+  --color-success: #22c55e;
+
+  /* 中性色 */
+  --color-bg: #f8fafc;
+  --color-card: #ffffff;
+  --color-text: #1f2937;
+  --color-text-secondary: #6b7280;
+  --color-border: #e5e7eb;
+
+  /* 状态色 */
+  --color-online: #22c55e;
+  --color-offline: #9ca3af;
+
+  /* 字体 */
+  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-mono: 'SF Mono', 'Fira Code', Consolas, monospace;
+}
+
+/* 全局重置 */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  font-family: var(--font-family);
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiwebkit;
+  -webkit-tap-highlight-color: transparent;
+}
+
+a {
+  color: var(--color-secondary);
+  text-decoration: none;
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+  border: none;
+  outline: none;
+}
+
+input, textarea, select {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/* 工具类 */
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.items-center { align-items: center; }
+.justify-between { justify-content: space-between; }
+.gap-2 { gap: 8px; }
+.gap-3 { gap: 12px; }
+.p-3 { padding: 12px; }
+.p-4 { padding: 16px; }
+.mt-2 { margin-top: 8px; }
+.mt-3 { margin-top: 12px; }
+.mb-3 { margin-bottom: 12px; }
+.text-sm { font-size: 12px; }
+.text-secondary { color: var(--color-text-secondary); }
+.font-bold { font-weight: 700; }
+.text-center { text-align: center; }
+.w-full { width: 100%; }
+.hidden { display: none; }
+```
+
+**Step 3: 验证文件存在**
+
+```bash
+cat h5/css/variables.css | head -20
+```
+
+Expected: 包含 `--color-primary: #1e3a5f` 等变量定义
+
+---
+
+### Task 3: 创建全局样式文件
+
+**Objective:** 复用样式组件：按钮、卡片、Tab栏、顶栏
+
+**Files:**
+- Create: `h5/css/style.css`
+- Modify: `h5/css/variables.css` (已创建)
+
+**Step 1: 创建 style.css**
+
+```css
+@import 'variables.css';
+
+/* ===== 页面容器 ===== */
+.page {
+  min-height: 100vh;
+  padding-bottom: 60px; /* Tab 栏高度 */
+}
+
+/* ===== 顶栏 ===== */
+.header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: var(--color-primary);
+  color: #fff;
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.header-back {
+  color: #fff;
+  font-size: 20px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255,255,255,0.15);
+  border-radius: 6px;
+}
+
+.header-title {
+  flex: 1;
+  text-align: center;
+}
+
+.header-right {
+  width: 32px;
+}
+
+/* ===== 卡片 ===== */
+.card {
+  background: var(--color-card);
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+}
+
+.card-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text);
+  margin-bottom: 12px;
+}
+
+/* ===== 统计卡片 ===== */
+.stat-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  padding: 12px;
+}
+
+.stat-card {
+  background: var(--color-card);
+  border-radius: 12px;
+  padding: 16px;
+  text-align: center;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+  margin-bottom: 4px;
+}
+
+.stat-value {
+  font-size: 24px;
+  font-weight: 700;
+  font-family: var(--font-mono);
+}
+
+.stat-sub {
+  font-size: 11px;
+  color: var(--color-text-secondary);
+  margin-top: 2px;
+}
+
+/* ===== 按钮 ===== */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  transition: opacity 0.2s;
+}
+
+.btn:active { opacity: 0.85; }
+
+.btn-primary {
+  background: var(--color-primary);
+  color: #fff;
+}
+
+.btn-secondary {
+  background: var(--color-bg);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+}
+
+.btn-danger {
+  background: var(--color-danger);
+  color: #fff;
+}
+
+.btn-block { width: 100%; }
+
+/* ===== 底部 Tab 栏 ===== */
+.tab-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 60px;
+  background: var(--color-card);
+  border-top: 1px solid var(--color-border);
+  display: flex;
+  z-index: 200;
+}
+
+.tab-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  color: var(--color-text-secondary);
+  font-size: 10px;
+  transition: color 0.2s;
+}
+
+.tab-item.active {
+  color: var(--color-primary);
+}
+
+.tab-item svg, .tab-item span {
+  display: block;
+}
+
+/* ===== 子 Tab ===== */
+.sub-tabs {
+  display: flex;
+  background: var(--color-card);
+  border-bottom: 1px solid var(--color-border);
+  padding: 0 12px;
+}
+
+.sub-tab {
+  padding: 10px 16px;
+  font-size: 13px;
+  color: var(--color-text-secondary);
+  border-bottom: 2px solid transparent;
+}
+
+.sub-tab.active {
+  color: var(--color-primary);
+  border-bottom-color: var(--color-primary);
+}
+
+/* ===== 列表项 ===== */
+.list-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  background: var(--color-card);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.list-item:active { background: var(--color-bg); }
+
+.list-item-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  background: var(--color-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.list-item-content { flex: 1; min-width: 0; }
+
+.list-item-title {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.list-item-desc {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+
+.list-item-arrow {
+  color: var(--color-text-secondary);
+  font-size: 18px;
+}
+
+/* ===== 设备卡片网格 ===== */
+.device-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  padding: 12px;
+}
+
+.device-card {
+  background: var(--color-card);
+  border-radius: 12px;
+  padding: 14px;
+  cursor: pointer;
+}
+
+.device-card:active { opacity: 0.85; }
+
+.device-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.device-card-icon {
+  font-size: 24px;
+}
+
+.device-card-status {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.device-card-status.online { background: var(--color-online); }
+.device-card-status.offline { background: var(--color-offline); }
+
+.device-card-name {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 4px;
+}
+
+.device-card-model {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+
+.device-card-location {
+  font-size: 11px;
+  color: var(--color-text-secondary);
+  margin-top: 4px;
+}
+
+/* ===== 预警列表项 ===== */
+.alert-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px;
+  background: var(--color-card);
+  border-bottom: 1px solid var(--color-border);
+  cursor: pointer;
+}
+
+.alert-item:active { background: var(--color-bg); }
+
+.alert-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.alert-icon.danger { background: #fff3e6; color: var(--color-danger); }
+.alert-icon.warning { background: #fef9c3; color: var(--color-warning); }
+.alert-icon.handled { background: #f3f4f6; color: var(--color-text-secondary); }
+
+.alert-content { flex: 1; min-width: 0; }
+
+.alert-title {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 2px;
+}
+
+.alert-meta {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+
+/* ===== 表单 ===== */
+.form-group {
+  margin-bottom: 16px;
+}
+
+.form-label {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-text);
+  margin-bottom: 6px;
+}
+
+.form-label .required { color: var(--color-danger); }
+
+.form-input {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  font-size: 14px;
+  background: var(--color-card);
+  transition: border-color 0.2s;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: var(--color-secondary);
+}
+
+textarea.form-input {
+  resize: vertical;
+  min-height: 80px;
+}
+
+.form-select {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  font-size: 14px;
+  background: var(--color-card);
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  padding-right: 36px;
+}
+
+/* ===== 图片上传 ===== */
+.photo-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+
+.photo-item {
+  aspect-ratio: 1;
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--color-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.photo-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.photo-add {
+  border: 1px dashed var(--color-border);
+  color: var(--color-text-secondary);
+  font-size: 28px;
+  cursor: pointer;
+}
+
+/* ===== Toast 提示 ===== */
+.toast {
+  position: fixed;
+  top: 70px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0,0,0,0.8);
+  color: #fff;
+  padding: 10px 20px;
+  border-radius: 24px;
+  font-size: 13px;
+  z-index: 9999;
+  animation: toast-in 0.3s ease;
+}
+
+@keyframes toast-in {
+  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
+  to { opacity: 1; transform: translateX(-50%) translateY(0); }
+}
+
+/* ===== 页面内容区 ===== */
+.page-content {
+  padding: 12px;
+}
+
+/* ===== 空状态 ===== */
+.empty-state {
+  padding: 40px 20px;
+  text-align: center;
+  color: var(--color-text-secondary);
+}
+
+.empty-state-icon {
+  font-size: 48px;
+  margin-bottom: 12px;
+  opacity: 0.5;
+}
+
+.empty-state-text {
+  font-size: 14px;
+}
+```
+
+**Step 2: 验证**
+
+```bash
+wc -l h5/css/style.css
+```
+
+Expected: `> 200` 行
+
+---
+
+## Mock 数据层
+
+### Task 4: 创建 Mock 数据文件
+
+**Objective:** 提供全量 Mock 数据供所有页面使用
+
+**Files:**
+- Create: `h5/js/mock.js`
+
+**Step 1: 创建 mock.js**
+
+```javascript
+// ============================
+// Mock 数据 — 郑州智慧工地 H5
+// ============================
+
+// 设备 Mock 数据
+const MOCK_DEVICES = [
+  {
+    id: 'tc001',
+    name: '1号塔吊',
+    type: 'tower_crane',
+    model: 'QTZ500',
+    location: 'A区施工现场',
+    status: 'online',
+    lastSeen: '2026-04-14 10:30:00',
+  },
+  {
+    id: 'tc002',
+    name: '2号塔吊',
+    type: 'tower_crane',
+    model: 'QTZ630',
+    location: 'B区施工现场',
+    status: 'online',
+    lastSeen: '2026-04-14 10:29:00',
+  },
+  {
+    id: 'tc003',
+    name: '3号塔吊',
+    type: 'tower_crane',
+    model: 'QTZ500',
+    location: 'C区施工现场',
+    status: 'offline',
+    lastSeen: '2026-04-13 18:00:00',
+  },
+  {
+    id: 'el001',
+    name: '1号升降机',
+    type: 'elevator',
+    model: 'SC200/200',
+    location: 'A区主楼',
+    status: 'online',
+    lastSeen: '2026-04-14 10:30:00',
+  },
+  {
+    id: 'el002',
+    name: '2号升降机',
+    type: 'elevator',
+    model: 'SC200/200',
+    location: 'B区主楼',
+    status: 'online',
+    lastSeen: '2026-04-14 10:30:00',
+  },
+];
+
+// 设备实时数据 Mock
+const MOCK_REALTIME = {
+  tc001: {
+    weight: 45.2, windSpeed: 5.2, windLevel: 3,
+    range: 30.5, height: 85.0, angle: 120.5,
+    moment: 320.5, momentPercent: 85.3,
+    alert: 'danger', alertMsg: '载重超限',
+  },
+  tc002: {
+    weight: 32.1, windSpeed: 4.8, windLevel: 2,
+    range: 25.0, height: 92.3, angle: 45.2,
+    moment: 210.5, momentPercent: 55.8,
+    alert: null, alertMsg: null,
+  },
+  tc003: {
+    weight: 0, windSpeed: 0, windLevel: 0,
+    range: 0, height: 0, angle: 0,
+    moment: 0, momentPercent: 0,
+    alert: null, alertMsg: null,
+  },
+  el001: {
+    realtimeWeight: 1.2, realtimeSpeed: 1.0,
+    realtimeHeight: 45.5, realtimeDipX: 0.5,
+    realtimeDipY: 0.3, outDoorStatus: '0',
+    alert: 'warning', alertMsg: '风速过大',
+  },
+  el002: {
+    realtimeWeight: 0.8, realtimeSpeed: 0.8,
+    realtimeHeight: 28.0, realtimeDipX: 0.3,
+    realtimeDipY: 0.2, outDoorStatus: '0',
+    alert: null, alertMsg: null,
+  },
+};
+
+// 预警 Mock 数据
+const MOCK_ALERTS = [
+  {
+    id: 'al001',
+    deviceId: 'tc001',
+    deviceName: '1号塔吊',
+    deviceType: 'tower_crane',
+    level: 'danger',
+    message: '载重超限：当前45.2kN，超过额定值40kN',
+    metric: 'weight',
+    value: 45.2,
+    createdAt: '2026-04-14 10:25:00',
+    status: 'unread',
+  },
+  {
+    id: 'al002',
+    deviceId: 'el001',
+    deviceName: '1号升降机',
+    deviceType: 'elevator',
+    level: 'warning',
+    message: '风速过大：当前8.5m/s，超过阈值6m/s',
+    metric: 'windSpeed',
+    value: 8.5,
+    createdAt: '2026-04-14 10:20:00',
+    status: 'unread',
+  },
+  {
+    id: 'al003',
+    deviceId: 'tc002',
+    deviceName: '2号塔吊',
+    deviceType: 'tower_crane',
+    level: 'warning',
+    message: '力矩超限：当前210.5kN·m，超过额定值180kN·m',
+    metric: 'moment',
+    value: 210.5,
+    createdAt: '2026-04-14 09:15:00',
+    status: 'handled',
+    handleNote: '已现场确认，正常吊装作业',
+  },
+  {
+    id: 'al004',
+    deviceId: 'tc001',
+    deviceName: '1号塔吊',
+    deviceType: 'tower_crane',
+    level: 'danger',
+    message: '回转角度异常：回转速度过快',
+    metric: 'angle',
+    value: 180.0,
+    createdAt: '2026-04-14 08:30:00',
+    status: 'handled',
+    handleNote: '已通知操作员减速',
+  },
+  {
+    id: 'al005',
+    deviceId: 'el001',
+    deviceName: '1号升降机',
+    deviceType: 'elevator',
+    level: 'warning',
+    message: '高度接近上限：当前高度45.5m，接近限高50m',
+    metric: 'height',
+    value: 45.5,
+    createdAt: '2026-04-13 16:45:00',
+    status: 'ignored',
+  },
+  {
+    id: 'al006',
+    deviceId: 'tc003',
+    deviceName: '3号塔吊',
+    deviceType: 'tower_crane',
+    level: 'warning',
+    message: '设备离线：超过2小时无数据上报',
+    metric: 'offline',
+    value: 0,
+    createdAt: '2026-04-13 20:00:00',
+    status: 'unread',
+  },
+];
+
+// 隐患随手拍 Mock
+const MOCK_REPORTS = [
+  {
+    id: 'rep001',
+    desc: 'A区基坑临边防护栏缺失，存在高处坠落风险',
+    category: '高空坠落',
+    severity: '较大',
+    gps: '34.7567,113.6234',
+    address: '郑州市中原区A区基坑现场',
+    photos: [],
+    createdAt: '2026-04-14 09:30:00',
+  },
+  {
+    id: 'rep002',
+    desc: 'B区钢筋加工区配电箱门未关闭',
+    category: '触电',
+    severity: '一般',
+    gps: '34.7570,113.6240',
+    address: '郑州市中原区B区钢筋棚',
+    photos: [],
+    createdAt: '2026-04-13 15:20:00',
+  },
+  {
+    id: 'rep003',
+    desc: 'C区脚手架扣件松动',
+    category: '物体打击',
+    severity: '重大',
+    gps: '34.7565,113.6228',
+    address: '郑州市中原区C区脚手架',
+    photos: [],
+    createdAt: '2026-04-12 11:10:00',
+  },
+];
+
+// 施工日志 Mock
+const MOCK_LOGS = [
+  {
+    id: 'log001',
+    date: '2026-04-14',
+    part: 'A区主楼',
+    content: '完成3层混凝土浇筑，钢筋绑扎至4层',
+    workers: 28,
+    equipment: ['tower_crane', 'elevator'],
+    safety: '无安全问题',
+    note: '混凝土浇筑顺利',
+    attachments: [],
+    createdAt: '2026-04-14 18:00:00',
+  },
+  {
+    id: 'log002',
+    date: '2026-04-13',
+    part: 'B区地下室',
+    content: '地下室西侧土方开挖，外运50车',
+    workers: 18,
+    equipment: ['elevator'],
+    safety: '注意坑边防护',
+    note: '夜间出土暂停',
+    attachments: [],
+    createdAt: '2026-04-13 18:30:00',
+  },
+  {
+    id: 'log003',
+    date: '2026-04-12',
+    part: 'C区基坑',
+    content: '基坑支护施工，锚索张拉',
+    workers: 12,
+    equipment: [],
+    safety: '锚索张拉时无关人员远离',
+    note: '',
+    attachments: [],
+    createdAt: '2026-04-12 17:45:00',
+  },
+];
+
+// 用户 Mock
+const MOCK_USER = {
+  id: 1,
+  username: 'admin',
+  realName: '张工地',
+  role: '管理员',
+  phone: '138****1234',
+};
+
+// 辅助函数
+function getDeviceById(id) {
+  return MOCK_DEVICES.find(d => d.id === id);
+}
+
+function getAlertById(id) {
+  return MOCK_ALERTS.find(a => a.id === id);
+}
+
+function getRealtimeById(id) {
+  return MOCK_REALTIME[id] || null;
+}
+```
+
+**Step 2: 验证**
+
+```bash
+grep -c "MOCK_DEVICES\|MOCK_ALERTS\|MOCK_REPORTS\|MOCK_LOGS" h5/js/mock.js
+```
+
+Expected: `4`
+
+---
+
+## JS 基础设施
+
+### Task 5: 创建 API 封装文件
+
+**Objective:** 提供统一的 API 调用封装，所有请求走 Mock
+
+**Files:**
+- Create: `h5/js/api.js`
+
+**Step 1: 创建 api.js**
+
+```javascript
+// ============================
+// API 基础封装 — Mock 模式
+// ============================
+
+const API_BASE = '/v1';
+
+// 登录
+function apiLogin(username, password) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        code: 0,
+        data: {
+          token: 'mock-token-' + Date.now(),
+          expiresAt: new Date(Date.now() + 7 * 24 * 3600 * 1000).toISOString(),
+          user: MOCK_USER,
+        }
+      });
+    }, 500);
+  });
+}
+
+// 获取设备列表
+function apiGetDevices(params = {}) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      let items = [...MOCK_DEVICES];
+      if (params.type === 'tower_crane') {
+        items = items.filter(d => d.type === 'tower_crane');
+      } else if (params.type === 'elevator') {
+        items = items.filter(d => d.type === 'elevator');
+      }
+      resolve({ code: 0, data: { total: items.length, items } });
+    }, 300);
+  });
+}
+
+// 获取设备实时数据
+function apiGetDeviceRealtime(deviceId) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const data = getRealtimeById(deviceId);
+      resolve({ code: 0, data });
+    }, 200);
+  });
+}
+
+// 获取预警列表
+function apiGetAlerts(params = {}) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      let items = [...MOCK_ALERTS];
+      if (params.level === 'danger') {
+        items = items.filter(a => a.level === 'danger');
+      } else if (params.level === 'warning') {
+        items = items.filter(a => a.level === 'warning');
+      } else if (params.status === 'handled') {
+        items = items.filter(a => a.status === 'handled' || a.status === 'ignored');
+      } else if (params.status === 'unread') {
+        items = items.filter(a => a.status === 'unread');
+      }
+      const unreadCount = MOCK_ALERTS.filter(a => a.status === 'unread').length;
+      resolve({ code: 0, data: { total: items.length, unreadCount, items } });
+    }, 300);
+  });
+}
+
+// 获取预警详情
+function apiGetAlertDetail(alertId) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const alert = getAlertById(alertId);
+      resolve({ code: 0, data: alert });
+    }, 200);
+  });
+}
+
+// 处理预警
+function apiHandleAlert(alertId, action, note) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const alert = MOCK_ALERTS.find(a => a.id === alertId);
+      if (alert) {
+        alert.status = action === 'handled' ? 'handled' : 'ignored';
+        if (note) alert.handleNote = note;
+      }
+      resolve({ code: 0, message: '操作成功' });
+    }, 500);
+  });
+}
+
+// 提交隐患随手拍
+function apiSubmitReport(formData) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const newReport = {
+        id: 'rep' + Date.now(),
+        ...formData,
+        createdAt: new Date().toLocaleString('zh-CN'),
+      };
+      MOCK_REPORTS.unshift(newReport);
+      resolve({ code: 0, data: newReport });
+    }, 800);
+  });
+}
+
+// 获取随手拍记录
+function apiGetReports() {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({ code: 0, data: { total: MOCK_REPORTS.length, items: MOCK_REPORTS } });
+    }, 300);
+  });
+}
+
+// 获取施工日志列表
+function apiGetLogs() {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({ code: 0, data: { total: MOCK_LOGS.length, items: MOCK_LOGS } });
+    }, 300);
+  });
+}
+
+// 提交施工日志
+function apiSubmitLog(formData) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const newLog = {
+        id: 'log' + Date.now(),
+        ...formData,
+        createdAt: new Date().toLocaleString('zh-CN'),
+      };
+      MOCK_LOGS.unshift(newLog);
+      resolve({ code: 0, data: newLog });
+    }, 800);
+  });
+}
+
+// OSS 预签名 URL（Mock）
+function apiGetUploadToken(filename, contentType) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        code: 0,
+        data: {
+          uploadUrl: 'https://jesxion-ai-studio.oss-cn-beijing.aliyuncs.com/mock/' + filename,
+          objectKey: 'mock/' + filename,
+          expiresAt: new Date(Date.now() + 3600 * 1000).toISOString(),
+        }
+      });
+    }, 300);
+  });
+}
+```
+
+**Step 2: 验证**
+
+```bash
+grep -c "^function api" h5/js/api.js
+```
+
+Expected: `10`
+
+---
+
+### Task 6: 创建全局 App 逻辑文件
+
+**Objective:** 全局逻辑：登录状态检查、Tab 栏激活、页面跳转、Toast 工具
+
+**Files:**
+- Create: `h5/js/app.js`
+
+**Step 1: 创建 app.js**
+
+```javascript
+// ============================
+// 全局 App 逻辑
+// ============================
+
+// ============ 登录状态 ============
+
+function getToken() {
+  return localStorage.getItem('token');
+}
+
+function setToken(token) {
+  localStorage.setItem('token', token);
+}
+
+function clearToken() {
+  localStorage.removeItem('token');
+}
+
+function isLoggedIn() {
+  return !!getToken();
+}
+
+// 检查登录，未登录跳转登录页
+function requireAuth() {
+  if (!isLoggedIn()) {
+    location.href = 'login.html';
+    return false;
+  }
+  return true;
+}
+
+// ============ Toast ============
+
+function showToast(message, duration = 2000) {
+  const existing = document.querySelector('.toast');
+  if (existing) existing.remove();
+
+  const toast = document.createElement('div');
+  toast.className = 'toast';
+  toast.textContent = message;
+  document.body.appendChild(toast);
+
+  setTimeout(() => toast.remove(), duration);
+}
+
+// ============ Tab 栏激活 ============
+
+function initTabBar() {
+  const path = location.pathname;
+  const page = path.split('/').pop() || 'index.html';
+
+  document.querySelectorAll('.tab-item').forEach(tab => {
+    const href = tab.getAttribute('href');
+    if (href === './' + page || href === page) {
+      tab.classList.add('active');
+    } else {
+      tab.classList.remove('active');
+    }
+  });
+}
+
+// ============ URL 参数解析 ============
+
+function getQueryParam(key) {
+  const params = new URLSearchParams(location.search);
+  return params.get(key);
+}
+
+// ============ 格式化 ============
+
+function formatTime(dateStr) {
+  if (!dateStr) return '';
+  const d = new Date(dateStr);
+  if (isNaN(d)) return dateStr;
+  const month = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  const h = String(d.getHours()).padStart(2, '0');
+  const m = String(d.getMinutes()).padStart(2, '0');
+  return `${month}-${day} ${h}:${m}`;
+}
+
+function formatDate(dateStr) {
+  if (!dateStr) return '';
+  const d = new Date(dateStr);
+  if (isNaN(d)) return dateStr;
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${y}-${m}-${day}`;
+}
+
+// ============ 设备类型图标 ============
+
+function getDeviceIcon(type) {
+  return type === 'tower_crane' ? '🏗️' : '🛗';
+}
+
+// ============ 预警图标 ============
+
+function getAlertIcon(level) {
+  if (level === 'danger') return '🔴';
+  if (level === 'warning') return '🟡';
+  return '⚫';
+}
+
+// ============ 设备在线状态 ============
+
+function getStatusClass(status) {
+  return status === 'online' ? 'online' : 'offline';
+}
+
+function getStatusText(status) {
+  return status === 'online' ? '在线' : '离线';
+}
+```
+
+**Step 2: 验证**
+
+```bash
+grep -c "^function " h5/js/app.js
+```
+
+Expected: `> 8`
+
+---
+
+## 页面实现
+
+### Task 7: 创建登录页
+
+**Objective:** 账号密码登录，Mock 任意账号密码可登录
+
+**Files:**
+- Create: `h5/login.html`
+
+**Step 1: 创建 login.html**
+
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>登录 - 郑州智慧工地</title>
+  <link rel="stylesheet" href="css/style.css">
+  <style>
+    .login-page {
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding: 20px;
+      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
+    }
+    .login-logo {
+      text-align: center;
+      margin-bottom: 40px;
+    }
+    .login-logo-icon {
+      font-size: 64px;
+      margin-bottom: 12px;
+    }
+    .login-logo-text {
+      font-size: 20px;
+      font-weight: 700;
+      color: #fff;
+    }
+    .login-form {
+      background: var(--color-card);
+      border-radius: 16px;
+      padding: 32px 24px;
+      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+    }
+    .login-title {
+      font-size: 18px;
+      font-weight: 700;
+      text-align: center;
+      margin-bottom: 24px;
+      color: var(--color-text);
+    }
+  </style>
+</head>
+<body>
+  <div class="login-page">
+    <div class="login-logo">
+      <div class="login-logo-icon">🏗️</div>
+      <div class="login-logo-text">郑州智慧工地</div>
+    </div>
+    <div class="login-form">
+      <div class="login-title">账号登录</div>
+      <div class="form-group">
+        <label class="form-label">账号</label>
+        <input type="text" id="username" class="form-input" placeholder="请输入账号" value="admin">
+      </div>
+      <div class="form-group">
+        <label class="form-label">密码</label>
+        <input type="password" id="password" class="form-input" placeholder="请输入密码" value="123456">
+      </div>
+      <button class="btn btn-primary btn-block" id="loginBtn">登录</button>
+    </div>
+  </div>
+
+  <script src="js/mock.js"></script>
+  <script src="js/app.js"></script>
+  <script>
+    // 如果已登录直接跳转首页
+    if (isLoggedIn()) location.href = 'index.html';
+
+    document.getElementById('loginBtn').addEventListener('click', async () => {
+      const username = document.getElementById('username').value.trim();
+      const password = document.getElementById('password').value;
+
+      if (!username || !password) {
+        showToast('请输入账号和密码');
+        return;
+      }
+
+      const btn = document.getElementById('loginBtn');
+      btn.disabled = true;
+      btn.textContent = '登录中...';
+
+      try {
+        const res = await apiLogin(username, password);
+        if (res.code === 0) {
+          setToken(res.data.token);
+          showToast('登录成功');
+          setTimeout(() => location.href = 'index.html', 500);
+        } else {
+          showToast(res.message || '登录失败');
+        }
+      } catch (e) {
+        showToast('网络异常');
+      } finally {
+        btn.disabled = false;
+        btn.textContent = '登录';
+      }
+    });
+  </script>
+</body>
+</html>
+```
+
+**Step 2: 验证**
+
+```bash
+grep -c "apiLogin\|isLoggedIn\|setToken" h5/login.html
+```
+
+Expected: `3`
+
+---
+
+### Task 8: 创建首页仪表盘
+
+**Objective:** 设备统计卡片 + 预警统计卡片 + 快捷入口
+
+**Files:**
+- Create: `h5/index.html`
+
+**Step 1: 创建 index.html**
+
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>首页 - 郑州智慧工地</title>
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <div class="page">
+    <!-- 顶栏 -->
+    <div class="header">
+      <div style="width:32px"></div>
+      <div class="header-title">郑州智慧工地</div>
+      <a href="profile.html" class="header-right" style="color:#fff;font-size:20px;display:flex;align-items:center;">👤</a>
+    </div>
+
+    <!-- 内容 -->
+    <div class="page-content">
+      <!-- 设备统计 -->
+      <div class="card mb-3">
+        <div class="card-title">设备概况</div>
+        <div class="stat-grid">
+          <div class="stat-card">
+            <div class="stat-label">塔吊</div>
+            <div class="stat-value" id="tcCount">-</div>
+            <div class="stat-sub" id="tcOnline">- 在线</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-label">升降机</div>
+            <div class="stat-value" id="elCount">-</div>
+            <div class="stat-sub" id="elOnline">- 在线</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 预警统计 -->
+      <div class="card mb-3">
+        <div class="card-title">今日预警</div>
+        <div class="stat-grid">
+          <div class="stat-card" style="border-left:3px solid var(--color-danger)">
+            <div class="stat-label" style="color:var(--color-danger)">危险</div>
+            <div class="stat-value" style="color:var(--color-danger)" id="dangerCount">-</div>
+          </div>
+          <div class="stat-card" style="border-left:3px solid var(--color-warning)">
+            <div class="stat-label" style="color:var(--color-warning)">警告</div>
+            <div class="stat-value" style="color:var(--color-warning)" id="warningCount">-</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 最新预警列表 -->
+      <div class="card">
+        <div class="flex justify-between items-center mb-3">
+          <div class="card-title" style="margin-bottom:0">最新预警</div>
+          <a href="alerts.html" style="font-size:13px;color:var(--color-secondary)">查看全部 ›</a>
+        </div>
+        <div id="latestAlerts">
+          <div class="empty-state-text text-center" style="padding:20px">加载中...</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部 Tab 栏 -->
+    <div class="tab-bar">
+      <a href="index.html" class="tab-item active">
+        <span style="font-size:22px">🏠</span>
+        <span>首页</span>
+      </a>
+      <a href="devices.html" class="tab-item">
+        <span style="font-size:22px">🏗️</span>
+        <span>设备</span>
+      </a>
+      <a href="report.html" class="tab-item">
+        <span style="font-size:22px">📷</span>
+        <span>随手拍</span>
+      </a>
+      <a href="logs.html" class="tab-item">
+        <span style="font-size:22px">📋</span>
+        <span>日志</span>
+      </a>
+    </div>
+  </div>
+
+  <script src="js/mock.js"></script>
+  <script src="js/app.js"></script>
+  <script src="js/api.js"></script>
+  <script>
+    if (!requireAuth()) {}
+
+    async function loadDashboard() {
+      // 加载设备统计
+      const [devRes, alertRes] = await Promise.all([
+        apiGetDevices(),
+        apiGetAlerts(),
+      ]);
+
+      const devices = devRes.data.items;
+      const alerts = alertRes.data.items;
+
+      const tcDevices = devices.filter(d => d.type === 'tower_crane');
+      const elDevices = devices.filter(d => d.type === 'elevator');
+      const dangerAlerts = alerts.filter(a => a.level === 'danger' && a.status === 'unread');
+      const warningAlerts = alerts.filter(a => a.level === 'warning' && a.status === 'unread');
+
+      document.getElementById('tcCount').textContent = tcDevices.length;
+      document.getElementById('tcOnline').textContent = tcDevices.filter(d => d.status === 'online').length + ' 在线';
+      document.getElementById('elCount').textContent = elDevices.length;
+      document.getElementById('elOnline').textContent = elDevices.filter(d => d.status === 'online').length + ' 在线';
+      document.getElementById('dangerCount').textContent = dangerAlerts.length;
+      document.getElementById('warningCount').textContent = warningAlerts.length;
+
+      // 最新预警（前3条）
+      const latestAlerts = alerts.slice(0, 3);
+      const alertsEl = document.getElementById('latestAlerts');
+
+      if (latestAlerts.length === 0) {
+        alertsEl.innerHTML = '<div class="empty-state-text text-center">暂无预警</div>';
+      } else {
+        alertsEl.innerHTML = latestAlerts.map(a => `
+          <a href="alert.html?id=${a.id}" class="list-item" style="padding:12px 0;border-bottom:1px solid var(--color-border)">
+            <div style="font-size:18px">${getAlertIcon(a.level)}</div>
+            <div class="list-item-content">
+              <div class="list-item-title">${a.message.substring(0, 20)}...</div>
+              <div class="list-item-desc">${a.deviceName} · ${formatTime(a.createdAt)}</div>
+            </div>
+          </a>
+        `).join('');
+      }
+    }
+
+    loadDashboard();
+  </script>
+</body>
+</html>
+```
+
+**Step 2: 验证**
+
+```bash
+grep -c "apiGetDevices\|apiGetAlerts\|requireAuth" h5/index.html
+```
+
+Expected: `3`
+
+---
+
+### Task 9: 创建设备列表页
+
+**Objective:** 卡片网格展示，Tab 子导航（全部/塔吊/升降机）
+
+**Files:**
+- Create: `h5/devices.html`
+
+**Step 1: 创建 devices.html**
+
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>设备列表 - 郑州智慧工地</title>
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <div class="page">
+    <!-- 顶栏 -->
+    <div class="header">
+      <a href="index.html" class="header-back">‹</a>
+      <div class="header-title">设备列表</div>
+      <div style="width:32px"></div>
+    </div>
+
+    <!-- 子 Tab -->
+    <div class="sub-tabs" id="subTabs">
+      <div class="sub-tab active" data-type="">全部</div>
+      <div class="sub-tab" data-type="tower_crane">塔吊</div>
+      <div class="sub-tab" data-type="elevator">升降机</div>
+    </div>
+
+    <!-- 设备网格 -->
+    <div class="device-grid" id="deviceGrid">
+      <div class="empty-state-text text-center" style="grid-column:1/-1;padding:40px">加载中...</div>
+    </div>
+
+    <!-- 底部 Tab 栏 -->
+    <div class="tab-bar">
+      <a href="index.html" class="tab-item">
+        <span style="font-size:22px">🏠</span>
+        <span>首页</span>
+      </a>
+      <a href="devices.html" class="tab-item active">
+        <span style="font-size:22px">🏗️</span>
+        <span>设备</span>
+      </a>
+      <a href="report.html" class="tab-item">
+        <span style="font-size:22px">📷</span>
+        <span>随手拍</span>
+      </a>
+      <a href="logs.html" class="tab-item">
+        <span style="font-size:22px">📋</span>
+        <span>日志</span>
+      </a>
+    </div>
+  </div>
+
+  <script src="js/mock.js"></script>
+  <script src="js/app.js"></script>
+  <script src="js/api.js"></script>
+  <script>
+    if (!requireAuth()) {}
+
+    let currentType = '';
+
+    function renderDevices(devices) {
+      const grid = document.getElementById('deviceGrid');
+      if (devices.length === 0) {
+        grid.innerHTML = '<div class="empty-state-text text-center" style="grid-column:1/-1;padding:40px">暂无设备</div>';
+        return;
+      }
+      grid.innerHTML = devices.map(d => `
+        <a href="device.html?id=${d.id}" class="device-card">
+          <div class="device-card-header">
+            <span class="device-card-icon">${getDeviceIcon(d.type)}</span>
+            <span class="device-card-status ${getStatusClass(d.status)}" title="${getStatusText(d.status)}"></span>
+          </div>
+          <div class="device-card-name">${d.name}</div>
+          <div class="device-card-model">${d.model}</div>
+          <div class="device-card-location">📍 ${d.location}</div>
+        </a>
+      `).join('');
+    }
+
+    async function loadDevices(type = '') {
+      currentType = type;
+      const res = await apiGetDevices({ type });
+      renderDevices(res.data.items);
+    }
+
+    // 子 Tab 切换
+    document.getElementById('subTabs').addEventListener('click', e => {
+      const tab = e.target.closest('.sub-tab');
+      if (!tab) return;
+      document.querySelectorAll('.sub-tab').forEach(t => t.classList.remove('active'));
+      tab.classList.add('active');
+      loadDevices(tab.dataset.type);
+    });
+
+    loadDevices();
+  </script>
+</body>
+</html>
+```
+
+**Step 2: 验证**
+
+```bash
+grep -c "device-grid\|device-card\|apiGetDevices" h5/devices.html
+```
+
+Expected: `3`
+
+---
+
+### Task 10: 创建设备详情页
+
+**Objective:** 实时数据面板，每 30 秒自动刷新
+
+**Files:**
+- Create: `h5/device.html`
+
+**Step 1: 创建 device.html**
+
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>设备详情 - 郑州智慧工地</title>
+  <link rel="stylesheet" href="css/style.css">
+  <style>
+    .data-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1px;
+      background: var(--color-border);
+      border-radius: 8px;
+      overflow: hidden;
+    }
+    .data-item {
+      background: var(--color-card);
+      padding: 14px;
+      text-align: center;
+    }
+    .data-label {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-bottom: 4px;
+    }
+    .data-value {
+      font-size: 18px;
+      font-weight: 700;
+      font-family: var(--font-mono);
+    }
+    .data-unit {
+      font-size: 12px;
+      font-weight: 400;
+      color: var(--color-text-secondary);
+    }
+    .alert-banner {
+      background: #fff3e6;
+      border: 1px solid var(--color-danger);
+      border-radius: 8px;
+      padding: 10px 14px;
+      margin-top: 12px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--color-danger);
+      font-size: 13px;
+    }
+    .refresh-bar {
+      padding: 8px 16px;
+      text-align: center;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <!-- 顶栏 -->
+    <div class="header">
+      <a href="devices.html" class="header-back">‹</a>
+      <div class="header-title" id="pageTitle">设备详情</div>
+      <div style="width:32px"></div>
+    </div>
+
+    <div class="page-content">
+      <!-- 基本信息卡片 -->
+      <div class="card mb-3">
+        <div class="flex items-center gap-3 mb-3">
+          <span style="font-size:36px" id="deviceIcon">🏗️</span>
+          <div>
+            <div style="font-size:16px;font-weight:700" id="deviceName">-</div>
+            <div style="font-size:12px;color:var(--color-text-secondary)" id="deviceModel">-</div>
+            <div style="font-size:12px;color:var(--color-text-secondary)" id="deviceLocation">-</div>
+          </div>
+          <div style="margin-left:auto;text-align:right">
+            <span id="statusBadge" style="padding:4px 10px;border-radius:12px;font-size:12px;font-weight:600"></span>
+            <div style="font-size:11px;color:var(--color-text-secondary);margin-top:4px" id="lastSeen">-</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 实时数据 -->
+      <div class="card mb-3">
+        <div class="card-title">实时数据</div>
+        <div class="data-grid" id="dataGrid">
+          <div class="empty-state-text text-center" style="grid-column:1/-1;padding:20px">加载中...</div>
+        </div>
+        <!-- 告警提示 -->
+        <div class="alert-banner hidden" id="alertBanner">
+          <span>⚠️</span>
+          <span id="alertMsg"></span>
+        </div>
+      </div>
+
+      <div class="refresh-bar">
+        <span id="refreshTime">-</span> 自动刷新
+        <button class="btn btn-secondary" style="padding:4px 12px;margin-left:8px;font-size:12px" onclick="loadRealtime()">刷新</button>
+      </div>
+    </div>
+  </div>
+
+  <script src="js/mock.js"></script>
+  <script src="js/app.js"></script>
+  <script src="js/api.js"></script>
+  <script>
+    if (!requireAuth()) {}
+
+    const deviceId = getQueryParam('id');
+    if (!deviceId) location.href = 'devices.html';
+
+    let deviceInfo = null;
+
+    function renderRealtime(data, type) {
+      const grid = document.getElementById('dataGrid');
+      if (!data) {
+        grid.innerHTML = '<div class="empty-state-text text-center" style="grid-column:1/-1;padding:20px">暂无数据</div>';
+        return;
+      }
+
+      if (type === 'tower_crane') {
+        grid.innerHTML = `
+          <div class="data-item"><div class="data-label">载重</div><div class="data-value">${data.weight} <span class="data-unit">t</span></div></div>
+          <div class="data-item"><div class="data-label">风速</div><div class="data-value">${data.windSpeed} <span class="data-unit">m/s</span></div></div>
+          <div class="data-item"><div class="data-label">幅度</div><div class="data-value">${data.range} <span class="data-unit">m</span></div></div>
+          <div class="data-item"><div class="data-label">起升高度</div><div class="data-value">${data.height} <span class="data-unit">m</span></div></div>
+          <div class="data-item"><div class="data-label">回转角度</div><div class="data-value">${data.angle} <span class="data-unit">°</span></div></div>
+          <div class="data-item"><div class="data-label">力矩百分比</div><div class="data-value">${data.momentPercent} <span class="data-unit">%</span></div></div>
+        `;
+      } else {
+        const doorText = { '0': '全部关闭', '1': '全部打开', '2': '内笼门开', '3': '外笼门开' };
+        grid.innerHTML = `
+          <div class="data-item"><div class="data-label">载重</div><div class="data-value">${data.realtimeWeight} <span class="data-unit">t</span></div></div>
+          <div class="data-item"><div class="data-label">运行速度</div><div class="data-value">${data.realtimeSpeed} <span class="data-unit">m/s</span></div></div>
+          <div class="data-item"><div class="data-label">当前楼层</div><div class="data-value">${data.realtimeHeight} <span class="data-unit">m</span></div></div>
+          <div class="data-item"><div class="data-label">X轴倾角</div><div class="data-value">${data.realtimeDipX} <span class="data-unit">°</span></div></div>
+          <div class="data-item"><div class="data-label">Y轴倾角</div><div class="data-value">${data.realtimeDipY} <span class="data-unit">°</span></div></div>
+          <div class="data-item"><div class="data-label">门状态</div><div class="data-value" style="font-size:14px">${doorText[data.outDoorStatus] || '-'}</div></div>
+        `;
+      }
+
+      // 告警
+      const alertBanner = document.getElementById('alertBanner');
+      if (data.alert) {
+        alertBanner.classList.remove('hidden');
+        document.getElementById('alertMsg').textContent = data.alertMsg || '设备告警';
+        alertBanner.style.background = data.alert === 'danger' ? '#fff3e6' : '#fef9c3';
+        alertBanner.style.borderColor = data.alert === 'danger' ? 'var(--color-danger)' : 'var(--color-warning)';
+        alertBanner.style.color = data.alert === 'danger' ? 'var(--color-danger)' : 'var(--color-warning)';
+      } else {
+        alertBanner.classList.add('hidden');
+      }
+
+      document.getElementById('refreshTime').textContent = new Date().toLocaleTimeString('zh-CN');
+    }
+
+    async function loadRealtime() {
+      const [devRes, rtRes] = await Promise.all([
+        apiGetDevices(),
+        apiGetDeviceRealtime(deviceId),
+      ]);
+
+      if (!deviceInfo) {
+        deviceInfo = devRes.data.items.find(d => d.id === deviceId);
+        if (!deviceInfo) { location.href = 'devices.html'; return; }
+        document.getElementById('pageTitle').textContent = deviceInfo.name;
+        document.getElementById('deviceIcon').textContent = getDeviceIcon(deviceInfo.type);
+        document.getElementById('deviceName').textContent = deviceInfo.name;
+        document.getElementById('deviceModel').textContent = deviceInfo.model;
+        document.getElementById('deviceLocation').textContent = '📍 ' + deviceInfo.location;
+        document.getElementById('lastSeen').textContent = '最后在线: ' + deviceInfo.lastSeen;
+        const badge = document.getElementById('statusBadge');
+        badge.textContent = getStatusText(deviceInfo.status);
+        badge.style.background = deviceInfo.status === 'online' ? '#dcfce7' : '#f3f4f6';
+        badge.style.color = deviceInfo.status === 'online' ? 'var(--color-success)' : 'var(--color-text-secondary)';
+      }
+
+      renderRealtime(rtRes.data, deviceInfo.type);
+    }
+
+    loadRealtime();
+    setInterval(loadRealtime, 30000); // 每30秒刷新
+  </script>
+</body>
+</html>
+```
+
+**Step 2: 验证**
+
+```bash
+grep -c "deviceId\|apiGetDeviceRealtime\|setInterval" h5/device.html
+```
+
+Expected: `3`
+
+---
+
+### Task 11: 创建预警列表页
+
+**Objective:** 最新优先，Tab 筛选（全部/危险/警告/已处理）
+
+**Files:**
+- Create: `h5/alerts.html`
+
+**Step 1: 创建 alerts.html**
+
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>预警中心 - 郑州智慧工地</title>
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <div class="page">
+    <!-- 顶栏 -->
+    <div class="header">
+      <a href="index.html" class="header-back">‹</a>
+      <div class="header-title">预警中心</div>
+      <div style="width:32px"></div>
+    </div>
+
+    <!-- 子 Tab -->
+    <div class="sub-tabs" id="subTabs">
+      <div class="sub-tab active" data-filter="">全部</div>
+      <div class="sub-tab" data-filter="danger">危险</div>
+      <div class="sub-tab" data-filter="warning">警告</div>
+      <div class="sub-tab" data-filter="handled">已处理</div>
+    </div>
+
+    <!-- 预警列表 -->
+    <div id="alertList" style="background:var(--color-card);min-height:300px">
+      <div class="empty-state-text text-center" style="padding:40px">加载中...</div>
+    </div>
+
+    <!-- 底部 Tab 栏 -->
+    <div class="tab-bar">
+      <a href="index.html" class="tab-item">
+        <span style="font-size:22px">🏠</span>
+        <span>首页</span>
+      </a>
+      <a href="devices.html" class="tab-item">
+        <span style="font-size:22px">🏗️</span>
+        <span>设备</span>
+      </a>
+      <a href="report.html" class="tab-item">
+        <span style="font-size:22px">📷</span>
+        <span>随手拍</span>
+      </a>
+      <a href="logs.html" class="tab-item">
+        <span style="font-size:22px">📋</span>
+        <span>日志</span>
+      </a>
+    </div>
+  </div>
+
+  <script src="js/mock.js"></script>
+  <script src="js/app.js"></script>
+  <script src="js/api.js"></script>
+  <script>
+    if (!requireAuth()) {}
+
+    let currentFilter = '';
+
+    function renderAlerts(alerts) {
+      const list = document.getElementById('alertList');
+      if (alerts.length === 0) {
+        list.innerHTML = '<div class="empty-state"><div class="empty-state-icon">🔔</div><div class="empty-state-text">暂无预警</div></div>';
+        return;
+      }
+      list.innerHTML = alerts.map(a => `
+        <a href="alert.html?id=${a.id}" class="alert-item">
+          <div class="alert-icon ${a.level === 'danger' ? 'danger' : a.level === 'warning' ? 'warning' : 'handled'}">${getAlertIcon(a.level)}</div>
+          <div class="alert-content">
+            <div class="alert-title">${a.message.substring(0, 30)}${a.message.length > 30 ? '...' : ''}</div>
+            <div class="alert-meta">${a.deviceName} · ${getDeviceIcon(a.deviceType)} · ${formatTime(a.createdAt)}</div>
+          </div>
+          <div class="list-item-arrow">›</div>
+        </a>
+      `).join('');
+    }
+
+    async function loadAlerts(filter = '') {
+      currentFilter = filter;
+      const params = {};
+      if (filter === 'danger') params.level = 'danger';
+      else if (filter === 'warning') params.level = 'warning';
+      else if (filter === 'handled') params.status = 'handled';
+      else if (filter === 'unread') params.status = 'unread';
+
+      const res = await apiGetAlerts(params);
+      renderAlerts(res.data.items);
+    }
+
+    document.getElementById('subTabs').addEventListener('click', e => {
+      const tab = e.target.closest('.sub-tab');
+      if (!tab) return;
+      document.querySelectorAll('.sub-tab').forEach(t => t.classList.remove('active'));
+      tab.classList.add('active');
+      loadAlerts(tab.dataset.filter);
+    });
+
+    loadAlerts();
+  </script>
+</body>
+</html>
+```
+
+**Step 2: 验证**
+
+```bash
+grep -c "alert-item\|apiGetAlerts\|getAlertIcon" h5/alerts.html
+```
+
+Expected: `3`
+
+---
+
+### Task 12: 创建预警详情页
+
+**Objective:** 预警详情 + 确认处理/忽略操作
+
+**Files:**
+- Create: `h5/alert.html`
+
+**Step 1: 创建 alert.html**
+
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>预警详情 - 郑州智慧工地</title>
+  <link rel="stylesheet" href="css/style.css">
+  <style>
+    .alert-detail-header {
+      padding: 20px 16px;
+      text-align: center;
+    }
+    .alert-detail-icon {
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 28px;
+      margin: 0 auto 12px;
+    }
+    .alert-detail-icon.danger { background: #fff3e6; }
+    .alert-detail-icon.warning { background: #fef9c3; }
+    .alert-detail-icon.handled { background: #f3f4f6; }
+    .alert-detail-level {
+      font-size: 16px;
+      font-weight: 700;
+      margin-bottom: 4px;
+    }
+    .alert-detail-level.danger { color: var(--color-danger); }
+    .alert-detail-level.warning { color: var(--color-warning); }
+    .info-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1px;
+      background: var(--color-border);
+      border-radius: 8px;
+      overflow: hidden;
+    }
+    .info-item {
+      background: var(--color-card);
+      padding: 12px;
+    }
+    .info-label {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-bottom: 2px;
+    }
+    .info-value {
+      font-size: 14px;
+      font-weight: 600;
+    }
+    .action-area {
+      padding: 16px;
+      display: flex;
+      gap: 12px;
+    }
+    .action-area .btn { flex: 1; }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <!-- 顶栏 -->
+    <div class="header">
+      <a href="alerts.html" class="header-back">‹</a>
+      <div class="header-title">预警详情</div>
+      <div style="width:32px"></div>
+    </div>
+
+    <div id="alertContent">
+      <div class="empty-state-text text-center" style="padding:40px">加载中...</div>
+    </div>
+  </div>
+
+  <script src="js/mock.js"></script>
+  <script src="js/app.js"></script>
+  <script src="js/api.js"></script>
+  <script>
+    if (!requireAuth()) {}
+
+    const alertId = getQueryParam('id');
+    if (!alertId) location.href = 'alerts.html';
+
+    async function loadAlert() {
+      const res = await apiGetAlertDetail(alertId);
+      const a = res.data;
+      if (!a) { showToast('预警不存在'); location.href = 'alerts.html'; return; }
+
+      const levelText = { danger: '危险', warning: '警告', handled: '已处理', ignored: '已忽略' };
+      const levelClass = { danger: 'danger', warning: 'warning' };
+
+      const handledArea = a.status === 'unread' ? `
+        <div class="action-area">
+          <button class="btn btn-danger" onclick="handleAlert('handled')">确认处理</button>
+          <button class="btn btn-secondary" onclick="handleAlert('ignored')">忽略</button>
+        </div>
+        <div style="padding:0 16px 16px">
+          <div class="form-group mb-2">
+            <label class="form-label">处理备注</label>
+            <textarea class="form-input" id="handleNote" placeholder="选填，添加处理说明"></textarea>
+          </div>
+        </div>
+      ` : `
+        <div class="action-area">
+          <div style="flex:1;text-align:center;color:var(--color-text-secondary);font-size:13px;padding:10px">
+            已${a.status === 'handled' ? '处理' : '忽略'}${a.handleNote ? '：' + a.handleNote : ''}
+          </div>
+        </div>
+      `;
+
+      document.getElementById('alertContent').innerHTML = `
+        <div class="alert-detail-header">
+          <div class="alert-detail-icon ${a.level === 'danger' ? 'danger' : a.level === 'warning' ? 'warning' : 'handled'}">${getAlertIcon(a.level)}</div>
+          <div class="alert-detail-level ${a.level}">${levelText[a.level] || a.level}</div>
+        </div>
+
+        <div class="card mb-3" style="border-radius:0">
+          <div style="font-size:15px;font-weight:600;margin-bottom:12px">${a.message}</div>
+          <div class="info-grid">
+            <div class="info-item">
+              <div class="info-label">设备</div>
+              <div class="info-value">${a.deviceName}</div>
+            </div>
+            <div class="info-item">
+              <div class="info-label">发生时间</div>
+              <div class="info-value">${a.createdAt}</div>
+            </div>
+            <div class="info-item">
+              <div class="info-label">触发指标</div>
+              <div class="info-value">${a.metric}</div>
+            </div>
+            <div class="info-item">
+              <div class="info-label">当前值</div>
+              <div class="info-value">${a.value || '-'}</div>
+            </div>
+          </div>
+        </div>
+
+        ${handledArea}
+      `;
+    }
+
+    async function handleAlert(action) {
+      const note = document.getElementById('handleNote')?.value || '';
+      const res = await apiHandleAlert(alertId, action, note);
+      if (res.code === 0) {
+        showToast('操作成功');
+        setTimeout(() => location.href = 'alerts.html', 500);
+      } else {
+        showToast(res.message || '操作失败');
+      }
+    }
+
+    loadAlert();
+  </script>
+</body>
+</html>
+```
+
+**Step 2: 验证**
+
+```bash
+grep -c "apiGetAlertDetail\|apiHandleAlert\|handleAlert" h5/alert.html
+```
+
+Expected: `3`
+
+---
+
+### Task 13: 创建隐患随手拍页面
+
+**Objective:** 拍照 + 完整字段表单 + 直传 OSS
+
+**Files:**
+- Create: `h5/report.html`
+
+**Step 1: 创建 report.html**
+
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>隐患随手拍 - 郑州智慧工地</title>
+  <link rel="stylesheet" href="css/style.css">
+  <style>
+    .gps-bar {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 12px;
+      background: var(--color-bg);
+      border-radius: 8px;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+    .gps-bar.active { color: var(--color-success); }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <!-- 顶栏 -->
+    <div class="header">
+      <a href="index.html" class="header-back">‹</a>
+      <div class="header-title">隐患随手拍</div>
+      <a href="profile.html" style="color:#fff;font-size:18px">👤</a>
+    </div>
+
+    <div class="page-content">
+      <!-- GPS 状态 -->
+      <div class="gps-bar mb-3" id="gpsBar">
+        <span>📍</span>
+        <span id="gpsText">正在获取位置...</span>
+      </div>
+
+      <!-- 照片 -->
+      <div class="card mb-3">
+        <div class="card-title">现场照片 <span style="color:var(--color-danger)">*</span></div>
+        <div class="photo-grid" id="photoGrid">
+          <div class="photo-item photo-add" id="addPhotoBtn">+</div>
+        </div>
+        <input type="file" id="photoInput" accept="image/*" capture="environment" multiple style="display:none">
+      </div>
+
+      <!-- 表单 -->
+      <div class="card mb-3">
+        <div class="form-group">
+          <label class="form-label">隐患描述 <span style="color:var(--color-danger)">*</span></label>
+          <textarea class="form-input" id="descInput" placeholder="请描述隐患情况，最多200字" maxlength="200"></textarea>
+        </div>
+
+        <div class="form-group">
+          <label class="form-label">隐患类别 <span style="color:var(--color-danger)">*</span></label>
+          <select class="form-select" id="categoryInput">
+            <option value="">请选择类别</option>
+            <option value="高空坠落">高空坠落</option>
+            <option value="物体打击">物体打击</option>
+            <option value="机械伤害">机械伤害</option>
+            <option value="触电">触电</option>
+            <option value="坍塌">坍塌</option>
+            <option value="火灾">火灾</option>
+            <option value="其他">其他</option>
+          </select>
+        </div>
+
+        <div class="form-group">
+          <label class="form-label">严重程度 <span style="color:var(--color-danger)">*</span></label>
+          <div class="flex gap-3">
+            <label class="flex items-center gap-2" style="cursor:pointer">
+              <input type="radio" name="severity" value="一般"> 一般
+            </label>
+            <label class="flex items-center gap-2" style="cursor:pointer">
+              <input type="radio" name="severity" value="较大"> 较大
+            </label>
+            <label class="flex items-center gap-2" style="cursor:pointer">
+              <input type="radio" name="severity" value="重大"> 重大
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <button class="btn btn-primary btn-block" id="submitBtn" onclick="submitReport()">提交隐患</button>
+    </div>
+
+    <!-- 底部 Tab 栏 -->
+    <div class="tab-bar">
+      <a href="index.html" class="tab-item">
+        <span style="font-size:22px">🏠</span>
+        <span>首页</span>
+      </a>
+      <a href="devices.html" class="tab-item">
+        <span style="font-size:22px">🏗️</span>
+        <span>设备</span>
+      </a>
+      <a href="report.html" class="tab-item active">
+        <span style="font-size:22px">📷</span>
+        <span>随手拍</span>
+      </a>
+      <a href="logs.html" class="tab-item">
+        <span style="font-size:22px">📋</span>
+        <span>日志</span>
+      </a>
+    </div>
+  </div>
+
+  <script src="js/mock.js"></script>
+  <script src="js/app.js"></script>
+  <script src="js/api.js"></script>
+  <script>
+    if (!requireAuth()) {}
+
+    let photos = [];
+    let gpsData = null;
+
+    // GPS 获取
+    function initGPS() {
+      if (!navigator.geolocation) {
+        document.getElementById('gpsText').textContent = '定位不可用';
+        return;
+      }
+      navigator.geolocation.getCurrentPosition(
+        pos => {
+          gpsData = { lat: pos.coords.latitude, lng: pos.coords.longitude };
+          document.getElementById('gpsBar').classList.add('active');
+          document.getElementById('gpsText').textContent = `${gpsData.lat.toFixed(4)}, ${gpsData.lng.toFixed(4)}`;
+        },
+        () => {
+          document.getElementById('gpsText').textContent = '定位失败，请检查权限';
+        }
+      );
+    }
+
+    // 照片选择
+    document.getElementById('addPhotoBtn').addEventListener('click', () => {
+      document.getElementById('photoInput').click();
+    });
+
+    document.getElementById('photoInput').addEventListener('change', e => {
+      const files = Array.from(e.target.files);
+      files.forEach(file => {
+        const reader = new FileReader();
+        reader.onload = ev => {
+          photos.push({ file, dataUrl: ev.target.result });
+          renderPhotos();
+        };
+        reader.readAsDataURL(file);
+      });
+      e.target.value = '';
+    });
+
+    function renderPhotos() {
+      const grid = document.getElementById('photoGrid');
+      const addBtn = '<div class="photo-item photo-add" id="addPhotoBtn">+</div>';
+      grid.innerHTML = photos.map((p, i) => `
+        <div class="photo-item">
+          <img src="${p.dataUrl}" alt="照片${i+1}">
+          <div onclick="removePhoto(${i})" style="position:absolute;top:0;right:0;background:rgba(0,0,0,0.5);color:#fff;width:18px;height:18px;border-radius:50%;font-size:12px;display:flex;align-items:center;justify-content:center;cursor:pointer">×</div>
+        </div>
+      `).join('') + (photos.length < 9 ? addBtn : '');
+      document.getElementById('addPhotoBtn')?.addEventListener('click', () => document.getElementById('photoInput').click());
+    }
+
+    function removePhoto(index) {
+      photos.splice(index, 1);
+      renderPhotos();
+    }
+
+    async function submitReport() {
+      const desc = document.getElementById('descInput').value.trim();
+      const category = document.getElementById('categoryInput').value;
+      const severity = document.querySelector('input[name="severity"]:checked')?.value;
+
+      if (photos.length === 0) { showToast('请拍摄现场照片'); return; }
+      if (!desc) { showToast('请填写隐患描述'); return; }
+      if (!category) { showToast('请选择隐患类别'); return; }
+      if (!severity) { showToast('请选择严重程度'); return; }
+
+      const btn = document.getElementById('submitBtn');
+      btn.disabled = true;
+      btn.textContent = '提交中...';
+
+      try {
+        // Mock: 模拟上传图片到 OSS（实际使用预签名 URL 直传）
+        const formData = {
+          desc,
+          category,
+          severity,
+          gps: gpsData ? `${gpsData.lat},${gpsData.lng}` : '',
+          photos: photos.map(p => p.dataUrl), // Mock 直接存 base64
+        };
+
+        const res = await apiSubmitReport(formData);
+        if (res.code === 0) {
+          showToast('提交成功');
+          setTimeout(() => location.reload(), 800);
+        } else {
+          showToast(res.message || '提交失败');
+        }
+      } finally {
+        btn.disabled = false;
+        btn.textContent = '提交隐患';
+      }
+    }
+
+    initGPS();
+  </script>
+</body>
+</html>
+```
+
+**Step 2: 验证**
+
+```bash
+grep -c "navigator.geolocation\|apiSubmitReport\|photoInput" h5/report.html
+```
+
+Expected: `3`
+
+---
+
+### Task 14: 创建施工日志列表页
+
+**Objective:** 日志列表 + 写日志入口 + 右上角个人中心入口
+
+**Files:**
+- Create: `h5/logs.html`
+
+**Step 1: 创建 logs.html**
+
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>施工日志 - 郑州智慧工地</title>
+  <link rel="stylesheet" href="css/style.css">
+  <style>
+    .fab-btn {
+      position: fixed;
+      right: 20px;
+      bottom: 80px;
+      width: 52px;
+      height: 52px;
+      border-radius: 50%;
+      background: var(--color-primary);
+      color: #fff;
+      font-size: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 4px 12px rgba(30,58,95,0.35);
+      z-index: 150;
+      cursor: pointer;
+    }
+    .log-item {
+      background: var(--color-card);
+      border-bottom: 1px solid var(--color-border);
+      padding: 14px 16px;
+      cursor: pointer;
+    }
+    .log-item:active { background: var(--color-bg); }
+    .log-date {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--color-primary);
+      margin-bottom: 4px;
+    }
+    .log-content {
+      font-size: 13px;
+      color: var(--color-text);
+      margin-bottom: 6px;
+    }
+    .log-meta {
+      font-size: 11px;
+      color: var(--color-text-secondary);
+    }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <!-- 顶栏 -->
+    <div class="header">
+      <div style="width:32px"></div>
+      <div class="header-title">施工日志</div>
+      <a href="profile.html" style="color:#fff;font-size:20px">👤</a>
+    </div>
+
+    <!-- 日志列表 -->
+    <div id="logList">
+      <div class="empty-state-text text-center" style="padding:40px">加载中...</div>
+    </div>
+
+    <!-- 写日志悬浮按钮 -->
+    <a href="log.html" class="fab-btn">✏️</a>
+
+    <!-- 底部 Tab 栏 -->
+    <div class="tab-bar">
+      <a href="index.html" class="tab-item">
+        <span style="font-size:22px">🏠</span>
+        <span>首页</span>
+      </a>
+      <a href="devices.html" class="tab-item">
+        <span style="font-size:22px">🏗️</span>
+        <span>设备</span>
+      </a>
+      <a href="report.html" class="tab-item">
+        <span style="font-size:22px">📷</span>
+        <span>随手拍</span>
+      </a>
+      <a href="logs.html" class="tab-item active">
+        <span style="font-size:22px">📋</span>
+        <span>日志</span>
+      </a>
+    </div>
+  </div>
+
+  <script src="js/mock.js"></script>
+  <script src="js/app.js"></script>
+  <script src="js/api.js"></script>
+  <script>
+    if (!requireAuth()) {}
+
+    function renderLogs(logs) {
+      const list = document.getElementById('logList');
+      if (logs.length === 0) {
+        list.innerHTML = '<div class="empty-state"><div class="empty-state-icon">📋</div><div class="empty-state-text">暂无日志</div></div>';
+        return;
+      }
+      const equipText = { tower_crane: '塔吊', elevator: '升降机' };
+      list.innerHTML = logs.map(log => `
+        <div class="log-item" onclick="location.href='log.html?id=${log.id}'">
+          <div class="log-date">📅 ${log.date}</div>
+          <div class="log-content">${log.content.substring(0, 50)}${log.content.length > 50 ? '...' : ''}</div>
+          <div class="log-meta">
+            ${log.part} · ${log.workers}人出勤
+            ${log.equipment.length ? ' · ' + log.equipment.map(e => equipText[e] || e).join(', ') : ''}
+          </div>
+        </div>
+      `).join('');
+    }
+
+    async function loadLogs() {
+      const res = await apiGetLogs();
+      renderLogs(res.data.items);
+    }
+
+    loadLogs();
+  </script>
+</body>
+</html>
+```
+
+**Step 2: 验证**
+
+```bash
+grep -c "apiGetLogs\|fab-btn\|log-item" h5/logs.html
+```
+
+Expected: `3`
+
+---
+
+### Task 15: 创建施工日志填写页
+
+**Objective:** 模板化表单 + 拍照附件 + 提交
+
+**Files:**
+- Create: `h5/log.html`
+
+**Step 1: 创建 log.html**
+
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>写日志 - 郑州智慧工地</title>
+  <link rel="stylesheet" href="css/style.css">
+  <style>
+    .equipment-checkboxes {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+    .equipment-checkboxes label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 12px;
+      background: var(--color-bg);
+      border-radius: 6px;
+      font-size: 13px;
+      cursor: pointer;
+    }
+    .equipment-checkboxes input:checked + span {
+      color: var(--color-primary);
+      font-weight: 600;
+    }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <!-- 顶栏 -->
+    <div class="header">
+      <a href="logs.html" class="header-back">‹</a>
+      <div class="header-title" id="pageTitle">写日志</div>
+      <div style="width:32px"></div>
+    </div>
+
+    <div class="page-content">
+      <!-- 照片附件 -->
+      <div class="card mb-3">
+        <div class="card-title">现场照片（选填）</div>
+        <div class="photo-grid" id="photoGrid">
+          <div class="photo-item photo-add" id="addPhotoBtn">+</div>
+        </div>
+        <input type="file" id="photoInput" accept="image/*" capture="environment" multiple style="display:none">
+      </div>
+
+      <!-- 日志表单 -->
+      <div class="card mb-3">
+        <div class="form-group">
+          <label class="form-label">日期 <span style="color:var(--color-danger)">*</span></label>
+          <input type="date" class="form-input" id="dateInput">
+        </div>
+
+        <div class="form-group">
+          <label class="form-label">施工部位 <span style="color:var(--color-danger)">*</span></label>
+          <input type="text" class="form-input" id="partInput" placeholder="如：A区主楼">
+        </div>
+
+        <div class="form-group">
+          <label class="form-label">作业内容 <span style="color:var(--color-danger)">*</span></label>
+          <textarea class="form-input" id="contentInput" placeholder="描述当日施工作业内容" rows="3"></textarea>
+        </div>
+
+        <div class="form-group">
+          <label class="form-label">人员出勤 <span style="color:var(--color-danger)">*</span></label>
+          <input type="number" class="form-input" id="workersInput" placeholder="当日出勤人数" min="0">
+        </div>
+
+        <div class="form-group">
+          <label class="form-label">设备运行</label>
+          <div class="equipment-checkboxes">
+            <label><input type="checkbox" name="equipment" value="tower_crane"><span>🏗️ 塔吊</span></label>
+            <label><input type="checkbox" name="equipment" value="elevator"><span>🛗 升降机</span></label>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label class="form-label">安全问题</label>
+          <textarea class="form-input" id="safetyInput" placeholder="有则填写，无则留空" rows="2"></textarea>
+        </div>
+
+        <div class="form-group">
+          <label class="form-label">备注</label>
+          <textarea class="form-input" id="noteInput" placeholder="选填" rows="2"></textarea>
+        </div>
+      </div>
+
+      <button class="btn btn-primary btn-block" id="submitBtn" onclick="submitLog()">提交日志</button>
+    </div>
+  </div>
+
+  <script src="js/mock.js"></script>
+  <script src="js/app.js"></script>
+  <script src="js/api.js"></script>
+  <script>
+    if (!requireAuth()) {}
+
+    // 默认日期当天
+    document.getElementById('dateInput').value = formatDate(new Date().toISOString());
+
+    let photos = [];
+
+    // 照片
+    document.getElementById('addPhotoBtn').addEventListener('click', () => document.getElementById('photoInput').click());
+    document.getElementById('photoInput').addEventListener('change', e => {
+      const files = Array.from(e.target.files);
+      files.forEach(file => {
+        const reader = new FileReader();
+        reader.onload = ev => {
+          photos.push({ file, dataUrl: ev.target.result });
+          renderPhotos();
+        };
+        reader.readAsDataURL(file);
+      });
+      e.target.value = '';
+    });
+
+    function renderPhotos() {
+      const grid = document.getElementById('photoGrid');
+      const addBtn = '<div class="photo-item photo-add" id="addPhotoBtn">+</div>';
+      grid.innerHTML = photos.map((p, i) => `
+        <div class="photo-item" style="position:relative">
+          <img src="${p.dataUrl}" alt="附件${i+1}">
+          <div onclick="removePhoto(${i})" style="position:absolute;top:0;right:0;background:rgba(0,0,0,0.5);color:#fff;width:18px;height:18px;border-radius:50%;font-size:12px;display:flex;align-items:center;justify-content:center;cursor:pointer">×</div>
+        </div>
+      `).join('') + (photos.length < 9 ? addBtn : '');
+      document.getElementById('addPhotoBtn')?.addEventListener('click', () => document.getElementById('photoInput').click());
+    }
+
+    function removePhoto(index) {
+      photos.splice(index, 1);
+      renderPhotos();
+    }
+
+    async function submitLog() {
+      const date = document.getElementById('dateInput').value;
+      const part = document.getElementById('partInput').value.trim();
+      const content = document.getElementById('contentInput').value.trim();
+      const workers = parseInt(document.getElementById('workersInput').value);
+      const equipment = Array.from(document.querySelectorAll('input[name="equipment"]:checked')).map(el => el.value);
+      const safety = document.getElementById('safetyInput').value.trim();
+      const note = document.getElementById('noteInput').value.trim();
+
+      if (!date) { showToast('请选择日期'); return; }
+      if (!part) { showToast('请填写施工部位'); return; }
+      if (!content) { showToast('请填写作业内容'); return; }
+      if (!workers && workers !== 0) { showToast('请填写人员出勤'); return; }
+
+      const btn = document.getElementById('submitBtn');
+      btn.disabled = true;
+      btn.textContent = '提交中...';
+
+      try {
+        const res = await apiSubmitLog({ date, part, content, workers, equipment, safety, note, attachments: photos });
+        if (res.code === 0) {
+          showToast('提交成功');
+          setTimeout(() => location.href = 'logs.html', 800);
+        } else {
+          showToast(res.message || '提交失败');
+        }
+      } finally {
+        btn.disabled = false;
+        btn.textContent = '提交日志';
+      }
+    }
+  </script>
+</body>
+</html>
+```
+
+**Step 2: 验证**
+
+```bash
+grep -c "apiSubmitLog\|photo-grid\|form-input" h5/log.html
+```
+
+Expected: `3`
+
+---
+
+### Task 16: 创建个人中心页面
+
+**Objective:** 个人信息 + 退出登录
+
+**Files:**
+- Create: `h5/profile.html`
+
+**Step 1: 创建 profile.html**
+
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>个人中心 - 郑州智慧工地</title>
+  <link rel="stylesheet" href="css/style.css">
+  <style>
+    .profile-header {
+      text-align: center;
+      padding: 32px 16px;
+      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
+      color: #fff;
+    }
+    .profile-avatar {
+      width: 72px;
+      height: 72px;
+      border-radius: 50%;
+      background: rgba(255,255,255,0.2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 36px;
+      margin: 0 auto 12px;
+    }
+    .profile-name {
+      font-size: 18px;
+      font-weight: 700;
+      margin-bottom: 4px;
+    }
+    .profile-role {
+      font-size: 13px;
+      opacity: 0.8;
+    }
+    .menu-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 16px;
+      background: var(--color-card);
+      border-bottom: 1px solid var(--color-border);
+      font-size: 14px;
+      cursor: pointer;
+    }
+    .menu-item:active { background: var(--color-bg); }
+    .menu-icon {
+      width: 32px;
+      height: 32px;
+      border-radius: 8px;
+      background: var(--color-bg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+    }
+  </style>
+</head>
+<body>
+  <div class="page" style="padding-bottom:0">
+    <!-- 顶栏 -->
+    <div class="header">
+      <a href="index.html" class="header-back">‹</a>
+      <div class="header-title">个人中心</div>
+      <div style="width:32px"></div>
+    </div>
+
+    <!-- 个人信息 -->
+    <div class="profile-header">
+      <div class="profile-avatar">👷</div>
+      <div class="profile-name" id="userName">-</div>
+      <div class="profile-role" id="userRole">-</div>
+    </div>
+
+    <!-- 菜单 -->
+    <div class="mt-3">
+      <div class="menu-item">
+        <div class="menu-icon">📱</div>
+        <div>
+          <div style="font-weight:600">手机号</div>
+          <div style="font-size:12px;color:var(--color-text-secondary)" id="userPhone">-</div>
+        </div>
+      </div>
+    </div>
+
+    <div style="padding:0 16px">
+      <button class="btn btn-secondary btn-block" style="margin-top:32px;color:var(--color-danger)" onclick="logout()">
+        退出登录
+      </button>
+    </div>
+  </div>
+
+  <script src="js/mock.js"></script>
+  <script src="js/app.js"></script>
+  <script>
+    if (!requireAuth()) {}
+
+    document.getElementById('userName').textContent = MOCK_USER.realName;
+    document.getElementById('userRole').textContent = MOCK_USER.role;
+    document.getElementById('userPhone').textContent = MOCK_USER.phone;
+
+    function logout() {
+      if (!confirm('确定退出登录？')) return;
+      clearToken();
+      location.href = 'login.html';
+    }
+  </script>
+</body>
+</html>
+```
+
+**Step 2: 验证**
+
+```bash
+grep -c "clearToken\|logout\|MOCK_USER" h5/profile.html
+```
+
+Expected: `3`
+
+---
+
+## 最终验证
+
+### Task 17: 完整文件检查与预览
+
+**Objective:** 验证所有文件存在，整理文件结构
+
+**Step 1: 验证文件结构**
+
+```bash
+find h5 -type f | sort
+```
+
+Expected:
+```
+h5/
+├── css/
+│   ├── style.css
+│   └── variables.css
+├── js/
+│   ├── api.js
+│   ├── app.js
+│   └── mock.js
+├── index.html
+├── login.html
+├── devices.html
+├── device.html
+├── alerts.html
+├── alert.html
+├── report.html
+├── logs.html
+├── log.html
+└── profile.html
+```
+
+**Step 2: 检查 CSS 变量是否包含主题色**
+
+```bash
+grep "color-primary\|color-danger\|color-warning" h5/css/variables.css
+```
+
+Expected: 包含主色、危险色、警告色定义
+
+**Step 3: 检查所有 HTML 文件都引用了 mock.js + app.js**
+
+```bash
+for f in h5/*.html; do
+  echo -n "$f: "
+  grep -c "mock.js\|app.js" "$f"
+done
+```
+
+Expected: 每个 HTML 文件 `>= 2`
+
+---
+
+## 提交
+
+### Task 18: 提交所有 H5 原型文件
+
+```bash
+cd /tmp/smart-project && \
+git add h5/ && \
+git commit -m "feat: H5原型完整实现（10个页面，Mock数据，智慧工地风UI）
+
+实现内容:
+- login.html: 登录页（Mock任意账号密码）
+- index.html: 首页仪表盘（设备/预警统计）
+- devices.html: 设备列表（卡片网格+Tab筛选）
+- device.html: 设备详情（实时数据面板+30s刷新）
+- alerts.html: 预警列表（Tab筛选）
+- alert.html: 预警详情（处理/忽略操作）
+- report.html: 隐患随手拍（拍照+GPS+完整字段）
+- logs.html: 施工日志列表
+- log.html: 施工日志填写（模板化+拍照附件）
+- profile.html: 个人中心（退出登录）
+- css/style.css: 全局样式（智慧工地风配色）
+- css/variables.css: 主题色变量
+- js/mock.js: Mock数据（5设备/6预警/3随手拍/3日志）
+- js/api.js: API封装（全部Mock）
+- js/app.js: 全局逻辑（登录/Toast/URL工具）" && \
+git push 2>&1
+```
+
+Expected: `git commit` 成功，`git push` 成功
+
+---
+
+## 运行方式
+
+**直接在浏览器中打开任意 HTML 文件即可运行，无需服务器：**
+
+```bash
+# macOS
+open h5/index.html
+
+# 或用 Python 简单 HTTP 服务器
+cd h5 && python3 -m http.server 8080
+# 访问 http://localhost:8080
+```