地图修改

src/static/map.html

@@ -6,7 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
     <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
-    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=iqyZkSZPurf61MhFV7hesbDukHdMBEEb"></script>
+    <script type="text/javascript"
+        src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=iqyZkSZPurf61MhFV7hesbDukHdMBEEb"></script>
     <script type="text/javascript" src="https://api.map.baidu.com/library/Convertor/1.2/src/Convertor_min.js"></script>
     <script type="text/javascript">
         // 确保Convertor库加载完成
@@ -15,7 +16,7 @@
             window.baiduMapConvertorReady = true;
         } else {
             // 监听Convertor库加载
-            setTimeout(function() {
+            setTimeout(function () {
                 if (typeof BMapGL !== 'undefined' && typeof BMapGL.Convertor !== 'undefined') {
                     window.baiduMapConvertorReady = true;
                 }
@@ -25,26 +26,73 @@
 
     <title>百度地图</title>
     <style>
-        body, html { margin: 0; padding: 0; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
+        body,
+        html {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+        }
 
-        #map-container { width: 100vw; height: 100vh; position: relative; }
+        #map-container {
+            width: 100vw;
+            height: 100vh;
+            position: relative;
+
+            /* --- 核心修复代码 START --- */
+
+            /* 1. 设置背景色：使用百度地图默认的陆地颜色(#F5F3F0 或 #FCF9F2)
+               这样即使瓦片没加载出来，用户看到的也是地图的底色，而不是刺眼的白屏闪烁 */
+            background-color: #F5F3F0;
+
+            /* 2. 开启硬件加速，减少渲染层重绘 */
+            transform: translate3d(0, 0, 0);
+            -webkit-transform: translate3d(0, 0, 0);
+
+            /* 3. 防止在某些 iOS 设备上出现灰色背景 */
+            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+            /* --- 核心修复代码 END --- */
+        }
+
+        /* 4. 针对 WebGL 生成的 Canvas 元素进行优化 */
+        #map-container canvas {
+            /* 强制 GPU 合成 */
+            will-change: transform;
+            /* 避免图片渲染时的锯齿和闪动 */
+            image-rendering: -webkit-optimize-contrast;
+        }
 
         /* 去除百度地图的水印和logo */
-        .BMap_cpyCtrl, .anchorBL { display: none !important; }
+        .BMap_cpyCtrl,
+        .anchorBL {
+            display: none !important;
+        }
 
         /* 模型预览面板 */
         .model-preview-panel {
-            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+            position: absolute;
-            z-index: 1000; display: flex; pointer-events: none; align-items: flex-start;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1000;
+            display: flex;
+            pointer-events: none;
+            align-items: flex-start;
         }
 
         .model-preview-tree {
-            width: 300px; height: auto; max-height: 80vh;
+            width: 300px;
+            height: auto;
+            max-height: 80vh;
             margin: 5% 0 0 2%;
-            background: rgba(30, 30, 30, 0.85); /*稍微加深背景增加可读性*/
+            background: rgba(30, 30, 30, 0.85);
+            /*稍微加深背景增加可读性*/
             border: 1px solid rgba(255, 255, 255, 0.1);
             border-radius: 8px;
-            overflow-y: auto; overflow-x: hidden;
+            overflow-y: auto;
+            overflow-x: hidden;
             padding: 20px;
             pointer-events: auto;
             backdrop-filter: blur(5px);
@@ -53,32 +101,85 @@
         }
 
         /* 滚动条样式 */
-        .model-preview-tree::-webkit-scrollbar { width: 6px; }
+        .model-preview-tree::-webkit-scrollbar {
-        .model-preview-tree::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 3px; }
+            width: 6px;
-        .model-preview-tree::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 3px; }
+        }
-        .model-preview-tree::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }
+
+        .model-preview-tree::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 3px;
+        }
+
+        .model-preview-tree::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 3px;
+        }
+
+        .model-preview-tree::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.5);
+        }
+
+        .tree-node {
+            margin-bottom: 2px;
+        }
 
-        .tree-node { margin-bottom: 2px; }
         .tree-node-item {
-            display: flex; align-items: center; padding: 6px 8px;
+            display: flex;
-            cursor: pointer; border-radius: 4px; transition: background-color 0.2s;
+            align-items: center;
+            padding: 6px 8px;
+            cursor: pointer;
+            border-radius: 4px;
+            transition: background-color 0.2s;
             min-height: 28px;
         }
-        .tree-node-item:hover { background-color: rgba(255, 255, 255, 0.1); }
 
-        .tree-node-checkbox { width: 16px; height: 16px; margin-right: 8px; cursor: pointer; accent-color: #002db6; }
+        .tree-node-item:hover {
-        .tree-node-label { flex: 1; font-size: 14px; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+
+        .tree-node-checkbox {
+            width: 16px;
+            height: 16px;
+            margin-right: 8px;
+            cursor: pointer;
+            accent-color: #002db6;
+        }
+
+        .tree-node-label {
+            flex: 1;
+            font-size: 14px;
+            user-select: none;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
 
         .tree-expand-icon {
-            display: inline-flex; align-items: center; justify-content: center;
+            display: inline-flex;
-            width: 20px; height: 20px; margin-right: 4px;
+            align-items: center;
-            cursor: pointer; transition: transform 0.2s; user-select: none;
+            justify-content: center;
-            font-size: 12px; color: rgba(255, 255, 255, 0.7);
+            width: 20px;
+            height: 20px;
+            margin-right: 4px;
+            cursor: pointer;
+            transition: transform 0.2s;
+            user-select: none;
+            font-size: 12px;
+            color: rgba(255, 255, 255, 0.7);
         }
-        .tree-expand-icon:hover { color: #fff; }
 
-        .tree-children { margin-top: 2px; display: none; }
+        .tree-expand-icon:hover {
-        .tree-children.expanded { display: block; }
+            color: #fff;
+        }
+
+        .tree-children {
+            margin-top: 2px;
+            display: none;
+        }
+
+        .tree-children.expanded {
+            display: block;
+        }
 
         /* 全选/全不选按钮 */
         .tree-select-all {
@@ -100,23 +201,34 @@
             cursor: pointer;
             transition: background-color 0.2s;
         }
+
         .tree-select-btn:hover {
             background: rgba(0, 45, 182, 1);
         }
 
         /* 工程列表面板 */
         .project-list-panel {
-            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+            position: absolute;
-            z-index: 999; display: flex; pointer-events: none; align-items: flex-start;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 999;
+            display: flex;
+            pointer-events: none;
+            align-items: flex-start;
         }
 
         .project-list-container {
-            width: 300px; height: auto; max-height: 80vh;
+            width: 300px;
+            height: auto;
+            max-height: 80vh;
             margin: 5% 0 0 2%;
             background: rgba(30, 30, 30, 0.85);
             border: 1px solid rgba(255, 255, 255, 0.1);
             border-radius: 8px;
-            overflow-y: auto; overflow-x: hidden;
+            overflow-y: auto;
+            overflow-x: hidden;
             padding: 20px;
             pointer-events: auto;
             backdrop-filter: blur(5px);
@@ -124,79 +236,152 @@
             color: #fff;
         }
 
-        .project-list-container::-webkit-scrollbar { width: 6px; }
+        .project-list-container::-webkit-scrollbar {
-        .project-list-container::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 3px; }
+            width: 6px;
-        .project-list-container::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 3px; }
+        }
-        .project-list-container::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }
+
+        .project-list-container::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 3px;
+        }
+
+        .project-list-container::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 3px;
+        }
+
+        .project-list-container::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.5);
+        }
 
         .project-list-item {
-            display: flex; align-items: center; padding: 6px 8px;
+            display: flex;
-            cursor: pointer; border-radius: 4px; transition: background-color 0.2s;
+            align-items: center;
-            min-height: 28px; margin-bottom: 2px;
+            padding: 6px 8px;
+            cursor: pointer;
+            border-radius: 4px;
+            transition: background-color 0.2s;
+            min-height: 28px;
+            margin-bottom: 2px;
+        }
+
+        .project-list-item:hover {
+            background-color: rgba(255, 255, 255, 0.1);
         }
-        .project-list-item:hover { background-color: rgba(255, 255, 255, 0.1); }
 
         .project-list-radio {
-            width: 16px; height: 16px; margin-right: 8px; cursor: pointer;
+            width: 16px;
+            height: 16px;
+            margin-right: 8px;
+            cursor: pointer;
             accent-color: #002db6;
         }
 
         .project-list-label {
-            flex: 1; font-size: 14px; user-select: none;
+            flex: 1;
-            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+            font-size: 14px;
+            user-select: none;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
 
         .project-list-enter-btn {
-            padding: 4px 12px; font-size: 12px; background: rgba(0, 45, 182, 0.8);
+            padding: 4px 12px;
-            color: #fff; border: none; border-radius: 4px; cursor: pointer;
+            font-size: 12px;
-            transition: background-color 0.2s; margin-left: 8px;
+            background: rgba(0, 45, 182, 0.8);
+            color: #fff;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+            margin-left: 8px;
+        }
+
+        .project-list-enter-btn:hover {
+            background: rgba(0, 45, 182, 1);
         }
-        .project-list-enter-btn:hover { background: rgba(0, 45, 182, 1); }
 
         .model-preview-close {
-            position: absolute; top: 50px; right: 20px;
+            position: absolute;
-            width: 40px; height: 40px;
+            top: 50px;
+            right: 20px;
+            width: 40px;
+            height: 40px;
             background: rgba(255, 255, 255, 0.95);
-            border-radius: 50%; display: flex; align-items: center; justify-content: center;
+            border-radius: 50%;
-            cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+            display: flex;
-            z-index: 1001; pointer-events: auto;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+            z-index: 1001;
+            pointer-events: auto;
         }
-        .model-preview-close::before, .model-preview-close::after {
+
-            content: ''; position: absolute; width: 2px; height: 20px; background: #333;
+        .model-preview-close::before,
+        .model-preview-close::after {
+            content: '';
+            position: absolute;
+            width: 2px;
+            height: 20px;
+            background: #333;
             transform: rotate(45deg);
         }
-        .model-preview-close::after { transform: rotate(-45deg); }
+
+        .model-preview-close::after {
+            transform: rotate(-45deg);
+        }
 
         /* AR 按钮 */
         .model-preview-ar {
-            position: absolute; top: 100px; right: 20px;
+            position: absolute;
-            width: 40px; height: 40px;
+            top: 100px;
+            right: 20px;
+            width: 40px;
+            height: 40px;
             background: rgba(0, 45, 182, 0.95);
-            border-radius: 50%; display: flex; align-items: center; justify-content: center;
+            border-radius: 50%;
-            cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+            display: flex;
-            z-index: 1001; pointer-events: auto;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+            z-index: 1001;
+            pointer-events: auto;
             font-size: 20px;
             color: #fff;
             font-weight: bold;
         }
+
         .model-preview-ar:hover {
             background: rgba(0, 45, 182, 1);
         }
 
         /* 回到定位按钮 */
         .location-center-btn {
-            position: fixed; bottom: 20px; right: 20px;
+            position: fixed;
-            width: 32px; height: 32px;
+            bottom: 20px;
+            right: 20px;
+            width: 32px;
+            height: 32px;
             background: rgba(255, 255, 255, 0.95) url('./image/position.png') center center / 70% no-repeat;
-            border-radius: 50%; display: flex; align-items: center; justify-content: center;
+            border-radius: 50%;
-            cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+            display: flex;
-            z-index: 998; pointer-events: auto;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+            z-index: 998;
+            pointer-events: auto;
             transition: transform 0.2s, box-shadow 0.2s;
         }
+
         .location-center-btn:hover {
             transform: scale(1.1);
             box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
         }
+
         .location-center-btn:active {
             transform: scale(0.95);
         }
@@ -211,7 +396,8 @@
             white-space: nowrap;
             font-size: 16px !important;
             font-weight: bold !important;
-            text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff, 1px -1px 2px #fff, -1px 1px 2px #fff; /* 增加描边效果提升可见度 */
+            text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff, 1px -1px 2px #fff, -1px 1px 2px #fff;
+            /* 增加描边效果提升可见度 */
             transform: translateX(-45%);
         }
 
@@ -221,24 +407,59 @@
             border-radius: 12px;
             box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
             overflow: hidden;
-            display: flex; flex-direction: column;
+            display: flex;
+            flex-direction: column;
             backdrop-filter: blur(10px);
         }
+
         .action-menu-item {
-            padding: 12px 16px; cursor: pointer; font-size: 14px; color: #333;
+            padding: 12px 16px;
-            display: flex; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.05);
+            cursor: pointer;
+            font-size: 14px;
+            color: #333;
+            display: flex;
+            align-items: center;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
             transition: background 0.2s;
         }
-        .action-menu-item:last-child { border-bottom: none; }
+
-        .action-menu-item:hover { background: #f0f5ff; color: #002db6; }
+        .action-menu-item:last-child {
-        .action-menu-item span { margin-right: 10px; font-size: 18px; }
+            border-bottom: none;
+        }
+
+        .action-menu-item:hover {
+            background: #f0f5ff;
+            color: #002db6;
+        }
+
+        .action-menu-item span {
+            margin-right: 10px;
+            font-size: 18px;
+        }
 
         /* 百度地图 InfoWindow 修正 */
-        .BMap_bubble_title { display: none; }
+        .BMap_bubble_title {
-        .BMap_bubble_content { width: 100% !important; height: 100% !important; }
+            display: none;
-        .BMap_pop > div { border-radius: 16px !important; border: 0 !important; }
+        }
-        .BMap_pop > img { display: none; } /* 隐藏自带关闭按钮 */
+
-        .BMap_bubble_center { top: 0 !important; }
+        .BMap_bubble_content {
+            width: 100% !important;
+            height: 100% !important;
+        }
+
+        .BMap_pop>div {
+            border-radius: 16px !important;
+            border: 0 !important;
+        }
+
+        .BMap_pop>img {
+            display: none;
+        }
+
+        /* 隐藏自带关闭按钮 */
+        .BMap_bubble_center {
+            top: 0 !important;
+        }
     </style>
 </head>
 
@@ -376,7 +597,7 @@
                         if (xhr.status >= 200 && xhr.status < 300) {
                             const res = Utils.safeParseJSON(encodeURIComponent(xhr.responseText));
                             resolve(res?.code >= 200 && res?.code < 300 ? (res.data || []) : []);
-                    } else {
+                        } else {
                             resolve([]);
                         }
                     }
@@ -509,7 +730,10 @@
         },
 
         initMap(projectInfo) {
-            this.map = new BMapGL.Map('map-container');
+            this.map = new BMapGL.Map('map-container', {
+                enableHighResolution: true, // 开启高清适配
+                backgroundColor: [245, 243, 240, 255] // [R, G, B, A] 显式设置 GL 引擎的清屏颜色
+            })
             const center = projectInfo[0] ? new BMapGL.Point(projectInfo[0].lng, projectInfo[0].lat) : new BMapGL.Point(116.404, 39.915);
             this.map.centerAndZoom(center, 12);
             this.map.enableScrollWheelZoom(true);
@@ -860,7 +1084,7 @@
                             };
                             console.log('GPS坐标转换完成 - BD09:', bd09.lng, bd09.lat);
                             this.updateLocationMarker();
-                                    } else {
+                        } else {
                             console.error('GPS坐标转换失败，使用GCJ02定位');
                             this.startUniAppGeolocation();
                         }
@@ -924,7 +1148,7 @@
                             };
                             console.log('坐标转换完成 - BD09:', bd09.lng, bd09.lat);
                             this.updateLocationMarker();
-                            } else {
+                        } else {
                             console.error('坐标转换失败，使用备用方案');
                             // 如果转换失败，尝试使用百度地图定位
                             if (typeof BMapGL !== 'undefined' && BMapGL.Geolocation) {
@@ -1097,8 +1321,8 @@
                                 };
                                 console.log('GCJ02转BD09成功:', result.lng, result.lat);
                                 if (callback) callback(result);
-                    return;
+                                return;
-                }
+                            }
                         } catch (e) {
                             console.error('GCJ02转BD09解析失败:', e);
                         }
@@ -1180,8 +1404,8 @@
                                     const fallback = this.wgs84ToBd09Fallback(wgs_lng, wgs_lat);
                                     console.warn('使用备用算法:', fallback);
                                     if (callback) callback(fallback);
-                    return;
+                                    return;
-                }
+                                }
 
                                 // 计算偏移距离（用于调试）
                                 const offsetLng = result.lng - wgs_lng;
@@ -1673,7 +1897,7 @@
                             if (response === 'granted') {
                                 console.log('设备方向权限已授予，监听旋转矢量传感器');
                                 window.addEventListener('deviceorientation', this.handleOrientation, { passive: false });
-                    } else {
+                            } else {
                                 console.warn('设备方向权限被拒绝，尝试传统传感器');
                                 this.fallbackToTraditionalSensor();
                             }
@@ -1878,7 +2102,7 @@
          */
         handleLocationError(error) {
             let message = '定位失败: ';
-            switch(error.code) {
+            switch (error.code) {
                 case error.PERMISSION_DENIED:
                     message += '用户拒绝了定位请求';
                     break;
@@ -2279,12 +2503,12 @@
         },
 
         renderTreeNode(node, container, level) {
-                    const nodeDiv = document.createElement('div');
+            const nodeDiv = document.createElement('div');
-                    nodeDiv.className = 'tree-node';
+            nodeDiv.className = 'tree-node';
             nodeDiv.style.paddingLeft = (level * 20) + 'px';
 
-                    const itemDiv = document.createElement('div');
+            const itemDiv = document.createElement('div');
-                    itemDiv.className = 'tree-node-item';
+            itemDiv.className = 'tree-node-item';
 
             const hasChildren = node.children && node.children.length > 0;
 
@@ -2312,21 +2536,21 @@
             }
 
             // 复选框
-                    const checkbox = document.createElement('input');
+            const checkbox = document.createElement('input');
-                    checkbox.type = 'checkbox';
+            checkbox.type = 'checkbox';
-                    checkbox.className = 'tree-node-checkbox';
+            checkbox.className = 'tree-node-checkbox';
             checkbox.dataset.id = node.id; // 添加data-id用于全选/全不选时更新UI
             checkbox.checked = this.state.checkedNodeIds.includes(node.id);
             checkbox.addEventListener('change', (e) => this.handleCheck(node, e.target.checked));
             itemDiv.appendChild(checkbox);
 
             // 文本
-                    const label = document.createElement('span');
+            const label = document.createElement('span');
-                    label.className = 'tree-node-label';
+            label.className = 'tree-node-label';
             label.textContent = node.nodeName || node.name || `Node ${node.id}`;
-                    itemDiv.appendChild(label);
+            itemDiv.appendChild(label);
 
-                    nodeDiv.appendChild(itemDiv);
+            nodeDiv.appendChild(itemDiv);
 
             // 子容器
             if (hasChildren) {
@@ -2420,40 +2644,40 @@
         },
 
         syncCheckboxUI(rootNode, checked) {
-             // 简易实现：重新渲染虽然 heavy，但在没有 VDOM 的情况下保证一致性。
+            // 简易实现：重新渲染虽然 heavy，但在没有 VDOM 的情况下保证一致性。
-             // 更好的方式是在 render 时给 checkbox 加 data-id
+            // 更好的方式是在 render 时给 checkbox 加 data-id
-             // 我们在 renderTreeNode 里并没有加 data-id，现在加上。
+            // 我们在 renderTreeNode 里并没有加 data-id，现在加上。
-             // 修正：renderTreeNode 代码没有 data-id，此处需注意，
+            // 修正：renderTreeNode 代码没有 data-id，此处需注意，
-             // 为了保持高性能，我们不重新渲染，而是通过数据驱动。
+            // 为了保持高性能，我们不重新渲染，而是通过数据驱动。
-             // 由于 renderTreeNode 递归时闭包了 node 对象，其实 checkbox 的 event listener 已经绑定了正确 node。
+            // 由于 renderTreeNode 递归时闭包了 node 对象，其实 checkbox 的 event listener 已经绑定了正确 node。
-             // 问题是：勾选父节点，子节点 UI 怎么变？
+            // 问题是：勾选父节点，子节点 UI 怎么变？
-             // 方案：DOM 遍历
+            // 方案：DOM 遍历
-             // 为简化代码且不改变太多逻辑，我们假设父子勾选联动已在数据层处理，下面只处理“当前操作”
+            // 为简化代码且不改变太多逻辑，我们假设父子勾选联动已在数据层处理，下面只处理“当前操作”
-             // 如果需要完整的父子 UI 联动，需要遍历 DOM。
+            // 如果需要完整的父子 UI 联动，需要遍历 DOM。
 
-             // 重新全量渲染是确保 UI 正确的最笨但最稳的方法
+            // 重新全量渲染是确保 UI 正确的最笨但最稳的方法
-             // 考虑到树可能很大，我们仅做数据请求， UI 联动留给 change 事件自己处理（当前逻辑只有勾选自己，没做级联 UI 更新）
+            // 考虑到树可能很大，我们仅做数据请求， UI 联动留给 change 事件自己处理（当前逻辑只有勾选自己，没做级联 UI 更新）
-             // 原代码逻辑：handleNodeCheckChange 会递归更新 checkedNodeIds，然后调用 updateCheckboxStates()
+            // 原代码逻辑：handleNodeCheckChange 会递归更新 checkedNodeIds，然后调用 updateCheckboxStates()
-             // 我们补上 updateCheckboxStates
+            // 我们补上 updateCheckboxStates
 
-             // 给 render 的 checkbox 补上 id
+            // 给 render 的 checkbox 补上 id
-             // 实际操作：在 renderTreeNode 添加 checkbox.dataset.id = node.id
+            // 实际操作：在 renderTreeNode 添加 checkbox.dataset.id = node.id
-             // 下面补上这个逻辑
+            // 下面补上这个逻辑
 
-             const checkboxes = this.elements.tree.querySelectorAll('.tree-node-checkbox');
+            const checkboxes = this.elements.tree.querySelectorAll('.tree-node-checkbox');
-             // 注意：由于 renderTreeNode 闭包引用了 node，我们无法直接反查 DOM -> node，只能依赖 dataset
+            // 注意：由于 renderTreeNode 闭包引用了 node，我们无法直接反查 DOM -> node，只能依赖 dataset
-             // 修改 renderTreeNode 添加 dataset.id (见下文修正)
+            // 修改 renderTreeNode 添加 dataset.id (见下文修正)
-             // 此处假设 dataset 已存在
+            // 此处假设 dataset 已存在
-             /* checkbox.dataset.id = node.id; 
+            /* checkbox.dataset.id = node.id; 
-             */
+            */
-             checkboxes.forEach(cb => {
+            checkboxes.forEach(cb => {
-                 // 实际上 render 的时候 checkbox 没有 id 属性，我们修改 renderTreeNode 方法让它加上
+                // 实际上 render 的时候 checkbox 没有 id 属性，我们修改 renderTreeNode 方法让它加上
-                 // 但这里是 run-time，我们无法修改上面已定义的函数。
+                // 但这里是 run-time，我们无法修改上面已定义的函数。
-                 // 这是一个思考过程。我们在 renderTreeNode 补充 dataset 即可。
+                // 这是一个思考过程。我们在 renderTreeNode 补充 dataset 即可。
-             });
+            });
 
-             // 鉴于原生 DOM 操作父子联动较繁琐，且原代码逻辑包含级联逻辑，我们保留级联数据更新，UI 刷新采用 DOM 查找
+            // 鉴于原生 DOM 操作父子联动较繁琐，且原代码逻辑包含级联逻辑，我们保留级联数据更新，UI 刷新采用 DOM 查找
-             // 实际渲染时，我会在 renderTreeNode 添加 data-id
+            // 实际渲染时，我会在 renderTreeNode 添加 data-id
         },
 
         async loadBatchData() {
@@ -2555,7 +2779,7 @@
 
     // 补丁：重写 renderTreeNode 以支持 UI 联动
     const _originalRender = App.renderTreeNode;
-    App.renderTreeNode = function(node, container, level) {
+    App.renderTreeNode = function (node, container, level) {
 
         const nodeDiv = document.createElement('div');
         nodeDiv.className = 'tree-node';
@@ -2625,4 +2849,5 @@
         window.onload = () => App.init();
     }
 </script>
+
 </html>