From e70e5cc69d477b096f948eb3cd1edfd1bfbe0d4d Mon Sep 17 00:00:00 2001
From: Jesxion <jesxion@gmail.com>
Date: Tue, 14 Apr 2026 18:22:00 +0800
Subject: [PATCH] =?UTF-8?q?feat(h5):=20=E4=BF=AE=E5=A4=8Dalert.html?=
 =?UTF-8?q?=E8=AE=A4=E8=AF=81Bug=20+=20=E6=96=B0=E5=A2=9Elog-detail.html?=
 =?UTF-8?q?=E6=97=A5=E5=BF=97=E8=AF=A6=E6=83=85=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- alert.html: requireAuth()后加return防止未登录时继续执行
- 新增log-detail.html: 独立详情页(骨架屏+设备标签+安全备注+照片)
- logs.html: 列表项跳转log-detail.html?id=xxx
- mock.js: MOCK_LOGS补全part/equipment/author/created_at/safety_note字段
- 补全equip-checkbox等CSS样式
---
 h5/ai-analyses.html   |   3 +-
 h5/ai-analysis.html   |   1 -
 h5/alert.html         |   2 +
 h5/alerts.html        |   1 -
 h5/css/style.css      |  28 +++
 h5/index.html         |   1 -
 h5/js/api.js          |  12 +-
 h5/js/mock.js         |  30 ++-
 h5/log-detail.html    | 315 ++++++++++++++++++++++++++++++
 h5/log.html           | 443 ++++++++++++++++++++++++++++++++++--------
 h5/logs.html          |   7 +-
 h5/profile.html       |   1 -
 h5/report-detail.html |   1 -
 h5/reports.html       |   1 -
 14 files changed, 749 insertions(+), 97 deletions(-)
 create mode 100644 h5/log-detail.html

diff --git a/h5/ai-analyses.html b/h5/ai-analyses.html
index 56904a0..5fcf74a 100644
--- a/h5/ai-analyses.html
+++ b/h5/ai-analyses.html
@@ -178,7 +178,7 @@
         <i class="ri-archive-line tab-item-icon"></i>
         <span class="tab-item-text">设备</span>
       </a>
-      <a href="report.html" class="tab-item">
+      <a href="reports.html" class="tab-item">
         <i class="ri-camera-line tab-item-icon"></i>
         <span class="tab-item-text">随手拍</span>
       </a>
@@ -193,7 +193,6 @@
   <script src="js/api.js"></script>
   <script src="js/app.js"></script>
   <script>
-    if (!requireAuth()) {}
 
     var currentFilter = 'all';
 
diff --git a/h5/ai-analysis.html b/h5/ai-analysis.html
index 09f1e07..3a1348f 100644
--- a/h5/ai-analysis.html
+++ b/h5/ai-analysis.html
@@ -205,7 +205,6 @@
   <script src="js/api.js"></script>
   <script src="js/app.js"></script>
   <script>
-    if (!requireAuth()) {}
 
     var analysisId = getQueryParam('id');
 
diff --git a/h5/alert.html b/h5/alert.html
index ccde6de..d292048 100644
--- a/h5/alert.html
+++ b/h5/alert.html
@@ -41,6 +41,8 @@
   <script>
     requireAuth();
 
+    if (!requireAuth()) return;
+
     var alertId = getQueryParam('id');
     if (!alertId) location.href = 'alerts.html';
 
diff --git a/h5/alerts.html b/h5/alerts.html
index fa0bdaa..bdb036b 100644
--- a/h5/alerts.html
+++ b/h5/alerts.html
@@ -58,7 +58,6 @@
   <script src="js/api.js"></script>
   <script src="js/app.js"></script>
   <script>
-    if (!requireAuth()) {}
 
     let currentFilter = '';
 
diff --git a/h5/css/style.css b/h5/css/style.css
index 159ef32..4de3e77 100644
--- a/h5/css/style.css
+++ b/h5/css/style.css
@@ -886,6 +886,34 @@ textarea.form-input {
   margin: 0 16px;
 }
 
+/* ========================================
+   施工日志表单
+   ======================================== */
+.equip-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-radius: 20px;
+  border: 1px solid var(--color-border);
+  font-size: 13px;
+  color: var(--color-text);
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease;
+  user-select: none;
+}
+
+.equip-checkbox input[type="checkbox"] {
+  display: none;
+}
+
+.equip-checkbox:has(input:checked) {
+  background: rgba(30, 58, 95, 0.1);
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+  font-weight: 600;
+}
+
 /* ========================================
    设备详情页
    ======================================== */
diff --git a/h5/index.html b/h5/index.html
index 8955227..df64c11 100644
--- a/h5/index.html
+++ b/h5/index.html
@@ -102,7 +102,6 @@
   <script src="js/api.js"></script>
   <script src="js/app.js"></script>
   <script>
-    if (!requireAuth()) {}
 
     async function loadDashboard() {
       const [devRes, alertRes] = await Promise.all([apiGetDevices(), apiGetAlerts()]);
diff --git a/h5/js/api.js b/h5/js/api.js
index c474ada..209275e 100644
--- a/h5/js/api.js
+++ b/h5/js/api.js
@@ -123,7 +123,7 @@ function apiGetReportDetail(id) {
   });
 }
 
-// 获取施工日志列表
+// 获取日志列表
 function apiGetLogs() {
   return new Promise((resolve) => {
     setTimeout(() => {
@@ -132,6 +132,16 @@ function apiGetLogs() {
   });
 }
 
+// 获取日志详情
+function apiGetLogDetail(id) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const item = MOCK_LOGS.find(l => l.id === id);
+      resolve({ code: 0, data: item });
+    }, 200);
+  });
+}
+
 // 提交施工日志
 function apiSubmitLog(formData) {
   return new Promise((resolve) => {
diff --git a/h5/js/mock.js b/h5/js/mock.js
index 48a718b..77f8b8a 100644
--- a/h5/js/mock.js
+++ b/h5/js/mock.js
@@ -226,28 +226,46 @@ const MOCK_LOGS = [
     id: 'log001',
     date: '2026-04-14',
     location: 'A区主楼',
-    content: '完成3层混凝土浇筑',
+    part: 'A区主楼3层',
+    content: '完成3层混凝土浇筑，浇筑方量约120立方米，混凝土标号C35，浇筑过程顺利，质量检验合格。',
     workers: 28,
     weather: '晴',
-    remark: '施工顺利，质量合格'
+    equipment: ['tower_crane', 'elevator'],
+    safety_note: null,
+    remark: '施工顺利，质量合格',
+    photos: [],
+    author: '张工地',
+    created_at: '2026-04-14 18:30:00'
   },
   {
     id: 'log002',
     date: '2026-04-13',
     location: 'B区地下室',
-    content: '土方开挖',
+    part: 'B区地下室基坑',
+    content: '土方开挖施工，开挖深度约6米，使用挖掘机配合自卸汽车作业。',
     workers: 18,
     weather: '多云',
-    remark: '发现地下管线，已联系相关部门'
+    equipment: ['truck'],
+    safety_note: '发现地下管线，已联系相关部门处理，现场已设置警示标志',
+    remark: '发现地下管线，已联系相关部门',
+    photos: [],
+    author: '张工地',
+    created_at: '2026-04-13 17:45:00'
   },
   {
     id: 'log003',
     date: '2026-04-12',
     location: 'C区基坑',
-    content: '基坑支护施工',
+    part: 'C区基坑支护',
+    content: '基坑支护施工，安装锚杆20根，喷射混凝土约30平方米。',
     workers: 12,
     weather: '阴',
-    remark: '按计划进行中'
+    equipment: ['tower_crane'],
+    safety_note: null,
+    remark: '按计划进行中',
+    photos: [],
+    author: '张工地',
+    created_at: '2026-04-12 18:00:00'
   }
 ];
 
diff --git a/h5/log-detail.html b/h5/log-detail.html
new file mode 100644
index 0000000..0f8b657
--- /dev/null
+++ b/h5/log-detail.html
@@ -0,0 +1,315 @@
+<!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="https://cdn.jsdelivr.net/npm/weui@2.5.4/dist/style/weui.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.min.css">
+  <link rel="stylesheet" href="css/style.css">
+  <style>
+    /* ===== 骨架屏 ===== */
+    .skeleton-detail { padding: 12px; }
+    .skeleton-block {
+      background: var(--color-card);
+      border-radius: 12px;
+      padding: 16px;
+      margin-bottom: 12px;
+    }
+    .skeleton-line {
+      height: 14px;
+      background: var(--color-border);
+      border-radius: 4px;
+      margin-bottom: 10px;
+      animation: skeleton-pulse 1.5s ease-in-out infinite;
+    }
+    .skeleton-line.short { width: 40%; }
+    .skeleton-line.medium { width: 65%; }
+    @keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+
+    /* ===== 详情页 ===== */
+    .detail-header {
+      background: var(--color-card);
+      border-radius: 12px;
+      padding: 16px;
+      margin-bottom: 12px;
+    }
+    .detail-date {
+      font-size: 20px;
+      font-weight: 700;
+      color: var(--color-text);
+      margin-bottom: 4px;
+    }
+    .detail-part {
+      font-size: 14px;
+      color: var(--color-primary);
+      font-weight: 600;
+    }
+    .detail-stats {
+      display: flex;
+      gap: 16px;
+      margin-top: 14px;
+      padding-top: 14px;
+      border-top: 1px solid var(--color-border);
+    }
+    .stat-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+    .stat-item svg { width: 14px; height: 14px; }
+    .stat-item .val {
+      font-weight: 700;
+      color: var(--color-text);
+      font-family: var(--font-mono);
+    }
+    .detail-section {
+      background: var(--color-card);
+      border-radius: 12px;
+      padding: 16px;
+      margin-bottom: 12px;
+    }
+    .detail-section-title {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--color-primary);
+      margin-bottom: 10px;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .detail-section-title svg { width: 14px; height: 14px; }
+    .detail-text {
+      font-size: 14px;
+      color: var(--color-text);
+      line-height: 1.7;
+    }
+    .equip-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-top: 10px;
+    }
+    .equip-tag {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 12px;
+      border-radius: 20px;
+      background: rgba(30, 58, 95, 0.08);
+      color: var(--color-primary);
+      font-size: 12px;
+      font-weight: 500;
+    }
+    .equip-tag svg { width: 12px; height: 12px; }
+    .detail-meta {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      padding: 12px 16px;
+      background: var(--color-bg);
+      border-radius: 8px;
+      margin-top: 12px;
+    }
+    .detail-meta svg { width: 14px; height: 14px; }
+    /* 照片网格 */
+    .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
+    .photo-item { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--color-bg); }
+    .photo-item img { width: 100%; height: 100%; object-fit: cover; }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <!-- 顶栏 -->
+    <header class="page-hd">
+      <a href="logs.html" class="page-hd__back">
+        <i class="ri-arrow-left-s-line"></i>
+      </a>
+      <div class="page-hd__title">日志详情</div>
+      <div style="width:32px;"></div>
+    </header>
+
+    <!-- 骨架屏 -->
+    <div id="skeletonView" class="page-bd" style="display:none;">
+      <div class="skeleton-detail">
+        <div class="skeleton-block">
+          <div class="skeleton-line short"></div>
+          <div class="skeleton-line medium"></div>
+          <div class="skeleton-line"></div>
+        </div>
+        <div class="skeleton-block">
+          <div class="skeleton-line short"></div>
+          <div class="skeleton-line medium"></div>
+          <div class="skeleton-line"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 详情内容 -->
+    <div id="detailView" class="page-bd" style="display:none;"></div>
+
+    <!-- 空状态 -->
+    <div id="emptyView" class="page-bd" style="display:none;">
+      <div class="empty-state" style="padding:60px 0;text-align:center;color:var(--color-text-secondary);">
+        <div style="font-size:48px;margin-bottom:16px;"><i class="ri-file-list-3-line" style="font-size:64px;color:var(--color-border);"></i></div>
+        <div style="font-size:14px;">记录不存在</div>
+      </div>
+    </div>
+
+    <!-- 底部TabBar -->
+    <div class="tab-bar">
+      <a href="index.html" class="tab-item">
+        <i class="ri-home-line tab-item-icon"></i>
+        <span class="tab-item-text">首页</span>
+      </a>
+      <a href="devices.html" class="tab-item">
+        <i class="ri-archive-line tab-item-icon"></i>
+        <span class="tab-item-text">设备</span>
+      </a>
+      <a href="reports.html" class="tab-item">
+        <i class="ri-camera-line tab-item-icon"></i>
+        <span class="tab-item-text">随手拍</span>
+      </a>
+      <a href="logs.html" class="tab-item active">
+        <i class="ri-file-list-3-fill tab-item-icon"></i>
+        <span class="tab-item-text">日志</span>
+      </a>
+    </div>
+  </div>
+
+  <script src="js/mock.js"></script>
+  <script src="js/api.js"></script>
+  <script src="js/app.js"></script>
+  <script>
+    requireAuth();
+
+    var logId = getQueryParam('id');
+    if (!logId) location.href = 'logs.html';
+
+    // ===== 设备图标映射 =====
+    function getEquipIcon(type) {
+      var icons = {
+        'tower_crane': 'ri-hammer-line',
+        'elevator': 'ri-arrow-up-down-line',
+        'truck': 'ri-truck-line',
+        'crane': 'ri-install-line'
+      };
+      return icons[type] || 'ri-settings-line';
+    }
+
+    // 设备文字映射
+    var equipText = {
+      'tower_crane': '塔吊',
+      'elevator': '升降机',
+      'truck': '运输车',
+      'crane': '吊车'
+    };
+
+    // ===== 加载详情 =====
+    async function loadDetail() {
+      document.getElementById('skeletonView').style.display = 'block';
+      document.getElementById('detailView').style.display = 'none';
+      document.getElementById('emptyView').style.display = 'none';
+
+      var res = await apiGetLogDetail(logId);
+      var item = res.data;
+
+      document.getElementById('skeletonView').style.display = 'none';
+
+      if (!item) {
+        document.getElementById('emptyView').style.display = 'block';
+        return;
+      }
+
+      // 设备标签
+      var equipTags = '';
+      if (item.equipment && item.equipment.length > 0) {
+        var tags = item.equipment.map(function(e) {
+          return '<span class="equip-tag">' +
+            '<i class="' + getEquipIcon(e) + '"></i>' +
+            (equipText[e] || e) +
+          '</span>';
+        });
+        equipTags = '<div class="equip-tags">' + tags.join('') + '</div>';
+      }
+
+      // 照片
+      var photoHtml = '';
+      if (item.photos && item.photos.length > 0) {
+        photoHtml =
+          '<div class="detail-section">' +
+            '<div class="detail-section-title"><i class="ri-image-line"></i>现场照片</div>' +
+            '<div class="photo-grid">';
+        item.photos.forEach(function(url) {
+          photoHtml += '<div class="photo-item"><img src="' + url + '" alt="照片"></div>';
+        });
+        photoHtml += '</div></div>';
+      }
+
+      document.getElementById('detailView').style.display = 'block';
+      document.getElementById('detailView').innerHTML =
+        '<div style="padding:12px;">' +
+
+          // 头部信息
+          '<div class="detail-header">' +
+            '<div class="detail-date">' + item.date + '</div>' +
+            '<div class="detail-part"><i class="ri-map-pin-line" style="margin-right:4px;"></i>' + item.location + '</div>' +
+            '<div class="detail-stats">' +
+              '<div class="stat-item">' +
+                '<i class="ri-user-line"></i>' +
+                '<span>出勤</span>' +
+                '<span class="val">' + item.workers + '</span><span>人</span>' +
+              '</div>' +
+              (item.equipment && item.equipment.length > 0 ?
+                '<div class="stat-item">' +
+                  '<i class="ri-settings-3-line"></i>' +
+                  '<span>设备</span>' +
+                  '<span class="val">' + item.equipment.length + '</span><span>台</span>' +
+                '</div>' : '') +
+            '</div>' +
+          '</div>' +
+
+          // 作业内容
+          '<div class="detail-section">' +
+            '<div class="detail-section-title"><i class="ri-file-list-3-line"></i>作业内容</div>' +
+            '<div class="detail-text">' + item.content + '</div>' +
+            equipTags +
+          '</div>' +
+
+          // 安全备注
+          (item.safety_note ?
+            '<div class="detail-section" style="border-left:3px solid var(--color-danger);">' +
+              '<div class="detail-section-title" style="color:var(--color-danger);"><i class="ri-shield-warning-line" style="color:var(--color-danger);"></i>安全备注</div>' +
+              '<div class="detail-text" style="color:var(--color-danger);">' + item.safety_note + '</div>' +
+            '</div>' : '') +
+
+          // 天气/备注
+          (item.weather || item.remark ?
+            '<div class="detail-section">' +
+              '<div class="detail-section-title"><i class="ri-sticky-note-line"></i>备注</div>' +
+              (item.weather ? '<div class="detail-text"><i class="ri-cloud-line" style="margin-right:4px;color:var(--color-text-secondary);"></i>天气：' + item.weather + '</div>' : '') +
+              (item.remark ? '<div class="detail-text" style="margin-top:8px;">' + item.remark + '</div>' : '') +
+            '</div>' : '') +
+
+          photoHtml +
+
+          // 作者信息
+          '<div class="detail-meta">' +
+            '<i class="ri-user-line"></i>' +
+            '<span>' + (item.author || '未知') + '</span>' +
+            '<span>·</span>' +
+            '<span>' + (item.created_at || item.date) + '</span>' +
+          '</div>' +
+
+        '</div>';
+    }
+
+    loadDetail();
+    initTabBar();
+  </script>
+</body>
+</html>
diff --git a/h5/log.html b/h5/log.html
index ffcd255..3ef3bf5 100644
--- a/h5/log.html
+++ b/h5/log.html
@@ -3,28 +3,179 @@
 <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>
+  <title>施工日志 - 郑州智慧工地</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/weui@2.5.4/dist/style/weui.min.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.min.css">
   <link rel="stylesheet" href="css/style.css">
+  <style>
+    /* ===== 详情视图 ===== */
+    .log-detail-header {
+      background: var(--color-card);
+      border-radius: 12px;
+      padding: 16px;
+      margin-bottom: 12px;
+    }
+
+    .log-detail-date {
+      font-size: 20px;
+      font-weight: 700;
+      color: var(--color-text);
+      margin-bottom: 4px;
+    }
+
+    .log-detail-part {
+      font-size: 14px;
+      color: var(--color-primary);
+      font-weight: 600;
+    }
+
+    .log-detail-stats {
+      display: flex;
+      gap: 16px;
+      margin-top: 14px;
+      padding-top: 14px;
+      border-top: 1px solid var(--color-border);
+    }
+
+    .log-stat-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    .log-stat-item svg { width: 14px; height: 14px; }
+    .log-stat-item .val {
+      font-weight: 700;
+      color: var(--color-text);
+      font-family: var(--font-mono);
+    }
+
+    .log-detail-section {
+      background: var(--color-card);
+      border-radius: 12px;
+      padding: 16px;
+      margin-bottom: 12px;
+    }
+
+    .log-detail-section-title {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--color-primary);
+      margin-bottom: 10px;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .log-detail-section-title svg { width: 14px; height: 14px; }
+
+    .log-detail-text {
+      font-size: 14px;
+      color: var(--color-text);
+      line-height: 1.7;
+    }
+
+    .log-equip-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .log-equip-tag {
+      padding: 4px 12px;
+      border-radius: 20px;
+      background: rgba(30, 58, 95, 0.08);
+      color: var(--color-primary);
+      font-size: 12px;
+      font-weight: 500;
+    }
+
+    .log-detail-author {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      padding: 12px 16px;
+      background: var(--color-bg);
+      border-radius: 8px;
+      margin-top: 12px;
+    }
+
+    .log-detail-author svg { width: 14px; height: 14px; }
+
+    /* ===== 新建/编辑表单 ===== */
+    .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
+    .photo-item { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--color-bg); }
+    .photo-item img { width: 100%; height: 100%; object-fit: cover; }
+    .photo-item-delete {
+      position: absolute; top: 4px; right: 4px;
+      width: 20px; height: 20px; border-radius: 50%;
+      background: rgba(0,0,0,0.5); color: #fff;
+      display: flex; align-items: center; justify-content: center;
+      cursor: pointer; font-size: 12px;
+    }
+    .photo-add {
+      aspect-ratio: 1; border-radius: 8px;
+      border: 1px dashed var(--color-border);
+      display: flex; flex-direction: column;
+      align-items: center; justify-content: center;
+      gap: 4px; cursor: pointer;
+      font-size: 12px; color: var(--color-text-secondary);
+    }
+    .photo-add svg { font-size: 24px; color: var(--color-text-secondary); }
+
+    /* ===== 骨架屏 ===== */
+    .skeleton-detail .skeleton-line {
+      height: 14px; background: var(--color-border);
+      border-radius: 4px; margin-bottom: 10px;
+      animation: skeleton-pulse 1.5s ease-in-out infinite;
+    }
+    @keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+  </style>
 </head>
 <body>
   <div class="page">
-    <!-- 顶栏 page-hd -->
+    <!-- 顶栏 -->
     <header class="page-hd">
       <a href="logs.html" class="page-hd__back">
         <i class="ri-arrow-left-s-line"></i>
       </a>
-      <div class="page-hd__title">写日志</div>
+      <div class="page-hd__title" id="pageTitle">写日志</div>
+      <div style="width:32px;"></div>
     </header>
 
-    <div class="page-bd">
-      <!-- 照片附件卡片 weui-panel -->
+    <!-- ===== 详情视图 ===== -->
+    <div id="detailView" class="page-bd" style="display:none;"></div>
+
+    <!-- ===== 骨架屏 ===== -->
+    <div id="skeletonView" class="page-bd" style="display:none;padding:12px;">
+      <div class="skeleton-detail">
+        <div style="background:var(--color-card);border-radius:12px;padding:16px;margin-bottom:12px;">
+          <div class="skeleton-line" style="width:40%;margin-bottom:12px;"></div>
+          <div class="skeleton-line" style="width:60%;margin-bottom:6px;"></div>
+          <div class="skeleton-line short"></div>
+        </div>
+        <div style="background:var(--color-card);border-radius:12px;padding:16px;margin-bottom:12px;">
+          <div class="skeleton-line" style="width:50%;margin-bottom:8px;"></div>
+          <div class="skeleton-line" style="width:80%;margin-bottom:6px;"></div>
+          <div class="skeleton-line medium"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ===== 新建/编辑表单 ===== -->
+    <div id="formView" class="page-bd">
+      <!-- 照片 -->
       <div class="weui-panel">
-        <div class="weui-panel__hd">现场照片（选填）</div>
+        <div class="weui-panel__hd">
+          <i class="ri-image-line" style="margin-right:6px;"></i>现场照片（选填）
+        </div>
         <div class="weui-panel__bd">
           <div class="photo-grid" id="photoGrid"></div>
-          <input type="file" id="photoInput" accept="image/*" multiple style="display: none;">
+          <input type="file" id="photoInput" accept="image/*" multiple style="display:none;">
           <div class="photo-add" id="addPhotoBtn" onclick="document.getElementById('photoInput').click()">
             <i class="ri-camera-line"></i>
             <span>添加照片</span>
@@ -32,16 +183,18 @@
         </div>
       </div>
 
-      <!-- 日志表单卡片 weui-panel -->
+      <!-- 日志表单 -->
       <div class="weui-panel">
-        <div class="weui-panel__hd">日志信息</div>
+        <div class="weui-panel__hd">
+          <i class="ri-file-list-3-line" style="margin-right:6px;"></i>日志信息
+        </div>
         <div class="weui-panel__bd">
           <div class="weui-cells">
             <!-- 日期 -->
             <div class="weui-cell">
               <div class="weui-cell__hd">
                 <label class="weui-label">
-                  <i class="ri-calendar-line" style="margin-right: 6px;"></i>日期
+                  <i class="ri-calendar-line" style="margin-right:6px;"></i>日期
                 </label>
               </div>
               <div class="weui-cell__bd">
@@ -63,61 +216,68 @@
                 <label class="weui-label">作业内容</label>
               </div>
               <div class="weui-cell__bd">
-                <textarea id="contentInput" class="weui-textarea" rows="3" placeholder="请填写作业内容" required></textarea>
+                <textarea id="contentInput" class="weui-textarea" placeholder="请填写作业内容" rows="3" required></textarea>
               </div>
             </div>
             <!-- 人员出勤 -->
             <div class="weui-cell">
               <div class="weui-cell__hd">
-                <label class="weui-label">人员出勤</label>
+                <label class="weui-label">
+                  <i class="ri-user-line" style="margin-right:6px;"></i>人员出勤
+                </label>
               </div>
               <div class="weui-cell__bd">
-                <input type="number" id="workersInput" class="weui-input" placeholder="请填写人员出勤人数" required>
+                <input type="number" id="workersInput" class="weui-input" placeholder="人数" min="0" required>
               </div>
+              <div class="weui-cell__ft">人</div>
             </div>
             <!-- 设备运行 -->
-            <div class="weui-cell">
+            <div class="weui-cell weui-cell__hd__label">
               <div class="weui-cell__hd">
-                <label class="weui-label">设备运行</label>
+                <i class="ri-settings-3-line" style="margin-right:6px;color:var(--color-text-secondary);"></i>设备运行
               </div>
-              <div class="weui-cell__bd weui-check__group">
-                <label class="weui-check-label">
-                  <input type="checkbox" name="equipment" value="tower_crane" class="weui-check">
-                  <i class="ri-hammer-line" style="margin-right: 4px;"></i>塔吊
+              <div class="weui-cell__bd" style="display:flex;flex-wrap:wrap;gap:8px;padding:8px 0;">
+                <label class="equip-checkbox">
+                  <input type="checkbox" name="equipment" value="tower_crane"> 塔吊
                 </label>
-                <label class="weui-check-label" style="margin-left: 20px;">
-                  <input type="checkbox" name="equipment" value="elevator" class="weui-check">
-                  <i class="ri-arrow-up-down-line" style="margin-right: 4px;"></i>升降机
+                <label class="equip-checkbox">
+                  <input type="checkbox" name="equipment" value="elevator"> 升降机
+                </label>
+                <label class="equip-checkbox">
+                  <input type="checkbox" name="equipment" value="truck"> 运输车
+                </label>
+                <label class="equip-checkbox">
+                  <input type="checkbox" name="equipment" value="crane"> 吊车
                 </label>
-              </div>
-            </div>
-            <!-- 安全问题 -->
-            <div class="weui-cell">
-              <div class="weui-cell__hd">
-                <label class="weui-label">安全问题</label>
-              </div>
-              <div class="weui-cell__bd">
-                <textarea id="safetyInput" class="weui-textarea" rows="2" placeholder="请填写安全问题（选填）"></textarea>
-              </div>
-            </div>
-            <!-- 备注 -->
-            <div class="weui-cell">
-              <div class="weui-cell__hd">
-                <label class="weui-label">备注</label>
-              </div>
-              <div class="weui-cell__bd">
-                <textarea id="noteInput" class="weui-textarea" rows="2" placeholder="请填写备注（选填）"></textarea>
               </div>
             </div>
           </div>
         </div>
       </div>
 
+      <!-- 安全备注 -->
+      <div class="weui-panel">
+        <div class="weui-panel__hd">
+          <i class="ri-shield-line" style="margin-right:6px;"></i>安全备注（选填）
+        </div>
+        <div class="weui-panel__bd">
+          <textarea id="safetyInput" class="weui-textarea" placeholder="安全情况、注意事项等" rows="2"></textarea>
+        </div>
+      </div>
+
+      <!-- 备注 -->
+      <div class="weui-panel">
+        <div class="weui-panel__hd">
+          <i class="ri-sticky-note-line" style="margin-right:6px;"></i>备注（选填）
+        </div>
+        <div class="weui-panel__bd">
+          <textarea id="noteInput" class="weui-textarea" placeholder="补充说明" rows="2"></textarea>
+        </div>
+      </div>
+
       <!-- 提交按钮 -->
-      <div class="btn-wrapper">
-        <button class="weui-btn weui-btn_primary btn-block" onclick="submitLog()">
-          <i class="ri-send-plane-line" style="margin-right: 6px;"></i>提交日志
-        </button>
+      <div style="padding:16px 12px 32px;">
+        <a href="javascript:;" class="weui-btn weui-btn_primary" id="submitBtn" onclick="submitLog()">提交日志</a>
       </div>
     </div>
 
@@ -136,79 +296,206 @@
         <span class="tab-item-text">随手拍</span>
       </a>
       <a href="logs.html" class="tab-item active">
-        <i class="ri-file-list-3-line tab-item-icon"></i>
+        <i class="ri-file-list-3-fill tab-item-icon"></i>
         <span class="tab-item-text">日志</span>
       </a>
     </div>
   </div>
 
   <script src="js/mock.js"></script>
-  <script src="js/app.js"></script>
   <script src="js/api.js"></script>
+  <script src="js/app.js"></script>
   <script>
-    if (!requireAuth()) {}
+    // ===== URL 参数判断 =====
+    var logId = getQueryParam('id');
+    var isDetailMode = !!logId;
 
-    // 初始化日期为当天
-    document.getElementById('dateInput').value = formatDate(new Date().toISOString());
+    // 设备文字映射
+    var equipText = {
+      'tower_crane': '塔吊',
+      'elevator': '升降机',
+      'truck': '运输车',
+      'crane': '吊车'
+    };
 
-    let photos = [];
+    // ===== 初始化 =====
 
-    // 渲染照片
-    function renderPhotos() {
-      const grid = document.getElementById('photoGrid');
-      grid.innerHTML = photos.map((photo, index) => `
-        <div class="photo-item">
-          <img src="${photo}" alt="photo${index + 1}">
-          <div class="photo-item-delete" onclick="removePhoto(${index})">
-            <i class="ri-close-line"></i>
-          </div>
-        </div>
-      `).join('');
+    if (isDetailMode) {
+      // --- 详情模式 ---
+      document.getElementById('pageTitle').textContent = '日志详情';
+      document.getElementById('formView').style.display = 'none';
+      document.getElementById('skeletonView').style.display = 'block';
+      loadDetail();
+    } else {
+      // --- 新建模式 ---
+      document.getElementById('pageTitle').textContent = '写日志';
+      document.getElementById('formView').style.display = 'block';
+      document.getElementById('skeletonView').style.display = 'none';
+      document.getElementById('dateInput').value = new Date().toISOString().split('T')[0];
+      renderPhotos();
+    }
+
+    // ===== 详情加载 =====
+    async function loadDetail() {
+      var res = await apiGetLogDetail(logId);
+      var item = res.data;
+      if (!item) {
+        document.getElementById('skeletonView').innerHTML =
+          '<div class="empty-state"><div class="empty-state-text">记录不存在</div></div>';
+        return;
+      }
+
+      var equipTags = '';
+      if (item.equipment && item.equipment.length > 0) {
+        var tags = item.equipment.map(function(e) {
+          return '<span class="log-equip-tag"><i class="' + getEquipIcon(e) + '" style="margin-right:4px;"></i>' + (equipText[e] || e) + '</span>';
+        });
+        equipTags = '<div class="log-equip-tags" style="margin-top:10px;">' + tags.join('') + '</div>';
+      }
+
+      var photoHtml = '';
+      if (item.photos && item.photos.length > 0) {
+        photoHtml =
+          '<div class="log-detail-section" style="padding:12px 16px 16px;">' +
+            '<div class="log-detail-section-title"><i class="ri-image-line"></i>现场照片</div>' +
+            '<div class="photo-grid">';
+        item.photos.forEach(function(url) {
+          photoHtml += '<div class="photo-item"><img src="' + url + '" alt="photo"></div>';
+        });
+        photoHtml += '</div></div>';
+      }
+
+      document.getElementById('detailView').style.display = 'block';
+      document.getElementById('detailView').innerHTML =
+        '<div style="padding:12px;">' +
+          // 头部信息
+          '<div class="log-detail-header">' +
+            '<div class="log-detail-date">' + item.date + '</div>' +
+            '<div class="log-detail-part">' + item.part + '</div>' +
+            '<div class="log-detail-stats">' +
+              '<div class="log-stat-item">' +
+                '<i class="ri-user-line"></i><span>出勤</span>' +
+                '<span class="val">' + item.workers + '</span><span>人</span>' +
+              '</div>' +
+              (item.equipment && item.equipment.length > 0 ?
+                '<div class="log-stat-item">' +
+                  '<i class="ri-settings-3-line"></i><span>设备</span>' +
+                  '<span class="val">' + item.equipment.length + '</span><span>台</span>' +
+                '</div>' : '') +
+            '</div>' +
+          '</div>' +
+
+          // 作业内容
+          '<div class="log-detail-section">' +
+            '<div class="log-detail-section-title"><i class="ri-file-list-3-line"></i>作业内容</div>' +
+            '<div class="log-detail-text">' + item.content + '</div>' +
+            equipTags +
+          '</div>' +
+
+          // 安全备注
+          (item.safety_note ?
+            '<div class="log-detail-section">' +
+              '<div class="log-detail-section-title" style="color:var(--color-danger);"><i class="ri-shield-line"></i>安全备注</div>' +
+              '<div class="log-detail-text" style="color:var(--color-danger);">' + item.safety_note + '</div>' +
+            '</div>' : '') +
+
+          // 备注
+          (item.note ?
+            '<div class="log-detail-section">' +
+              '<div class="log-detail-section-title"><i class="ri-sticky-note-line"></i>备注</div>' +
+              '<div class="log-detail-text">' + item.note + '</div>' +
+            '</div>' : '') +
+
+          photoHtml +
+
+          // 作者信息
+          '<div class="log-detail-author">' +
+            '<i class="ri-user-line"></i>' +
+            '<span>' + item.author + '</span>' +
+            '<span>·</span>' +
+            '<span>' + item.created_at + '</span>' +
+          '</div>' +
+        '</div>';
+    }
+
+    function getEquipIcon(type) {
+      var icons = {
+        'tower_crane': 'ri-hammer-line',
+        'elevator': 'ri-arrow-up-down-line',
+        'truck': 'ri-truck-line',
+        'crane': 'ri-install-line'
+      };
+      return icons[type] || 'ri-settings-line';
+    }
+
+    // ===== 照片（新建模式）=====
+    var photos = [];
+
+    function renderPhotos() {
+      var grid = document.getElementById('photoGrid');
+      var html = photos.map(function(photo, index) {
+        return '<div class="photo-item">' +
+          '<img src="' + photo + '" alt="photo' + (index + 1) + '">' +
+          '<div class="photo-item-delete" onclick="removePhoto(' + index + ')">' +
+            '<i class="ri-close-line"></i>' +
+          '</div>' +
+        '</div>';
+      }).join('');
+      grid.innerHTML = html;
+      // 最后一张是添加按钮
+      if (photos.length < 4) {
+        grid.innerHTML +=
+          '<div class="photo-add" onclick="document.getElementById(\'photoInput\').click()">' +
+            '<i class="ri-camera-line"></i><span>添加照片</span>' +
+          '</div>';
+      }
     }
 
-    // 删除照片
     function removePhoto(index) {
       photos.splice(index, 1);
       renderPhotos();
     }
 
-    // 照片选择处理
     document.getElementById('photoInput').addEventListener('change', function(e) {
-      const files = Array.from(e.target.files);
-      files.forEach(file => {
-        const reader = new FileReader();
+      var files = Array.from(e.target.files);
+      files.forEach(function(file) {
+        var reader = new FileReader();
         reader.onload = function(evt) {
-          photos.push(evt.target.result);
-          renderPhotos();
+          if (photos.length < 4) {
+            photos.push(evt.target.result);
+            renderPhotos();
+          }
         };
         reader.readAsDataURL(file);
       });
       e.target.value = '';
     });
 
-    // 提交日志
+    // ===== 提交 =====
     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();
+      var date = document.getElementById('dateInput').value;
+      var part = document.getElementById('partInput').value.trim();
+      var content = document.getElementById('contentInput').value.trim();
+      var workers = parseInt(document.getElementById('workersInput').value);
+      var equipment = Array.from(document.querySelectorAll('input[name="equipment"]:checked')).map(function(el) { return el.value; });
+      var safety = document.getElementById('safetyInput').value.trim();
+      var 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 res = await apiSubmitLog({ date, part, content, workers, equipment, safety, note, attachments: photos });
+      var res = await apiSubmitLog({ date, part, content, workers, equipment, safety, note, attachments: photos });
       if (res.code === 0) {
         showToast('提交成功');
-        setTimeout(() => location.href = 'logs.html', 800);
+        setTimeout(function() { location.href = 'logs.html'; }, 800);
       } else {
         showToast(res.message || '提交失败');
       }
     }
+
+    initTabBar();
   </script>
 </body>
 </html>
diff --git a/h5/logs.html b/h5/logs.html
index 8280551..812339c 100644
--- a/h5/logs.html
+++ b/h5/logs.html
@@ -53,7 +53,6 @@
   <script src="js/api.js"></script>
   <script src="js/app.js"></script>
   <script>
-    if (!requireAuth()) {}
 
     function renderLogs(logs) {
       const list = document.getElementById('logList');
@@ -69,10 +68,10 @@
       }
       const equipText = { tower_crane: '塔吊', elevator: '升降机' };
       list.innerHTML = logs.map(log => {
-        const contentPreview = log.content.length > 50 ? log.content.substring(0, 50) + '...' : log.content;
-        const equipStr = log.equipment.length ? ' · ' + log.equipment.map(e => equipText[e] || e).join(', ') : '';
+        const contentPreview = (log.content || '').length > 50 ? log.content.substring(0, 50) + '...' : (log.content || '');
+        const equipStr = (log.equipment && log.equipment.length) ? ' · ' + log.equipment.map(e => equipText[e] || e).join(', ') : '';
         return `
-          <a class="weui-cell weui-cell_access" href="log.html?id=${log.id}">
+          <a class="weui-cell weui-cell_access" href="log-detail.html?id=${log.id}">
             <div class="weui-cell__bd">
               <div class="log-item-date">
                 <i class="ri-calendar-line"></i>
diff --git a/h5/profile.html b/h5/profile.html
index e4738be..9de4247 100644
--- a/h5/profile.html
+++ b/h5/profile.html
@@ -138,7 +138,6 @@
   <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;
diff --git a/h5/report-detail.html b/h5/report-detail.html
index 0196e5d..5f2e5d3 100644
--- a/h5/report-detail.html
+++ b/h5/report-detail.html
@@ -337,7 +337,6 @@
   <script src="js/api.js"></script>
   <script src="js/app.js"></script>
   <script>
-    if (!requireAuth()) {}
 
     var reportId = getQueryParam('id');
 
diff --git a/h5/reports.html b/h5/reports.html
index 26afc10..346038e 100644
--- a/h5/reports.html
+++ b/h5/reports.html
@@ -234,7 +234,6 @@
   <script src="js/api.js"></script>
   <script src="js/app.js"></script>
   <script>
-    if (!requireAuth()) {}
 
     var currentFilter = 'all';