一些表面功夫

src/leadlag/templates/dashboard.html

@@ -291,6 +291,10 @@
             <button class="refresh-btn" onclick="resetZoom()" style="background: linear-gradient(135deg, #6f42c1 0%, #e83e8c 100%);">🔍 重置缩放</button>
         </div>
         
+        <div class="stats-grid" id="statsGrid">
+            <!-- 统计卡片将通过JavaScript动态生成 -->
+        </div>
+
         <div class="chart-container">
             <h2>📅 24小时缩略图</h2>
             <div class="thumbnail-container">
@@ -299,10 +303,6 @@
             </div>
         </div>
 
-        <div class="stats-grid" id="statsGrid">
-            <!-- 统计卡片将通过JavaScript动态生成 -->
-        </div>
-
         <div class="chart-container">
             <h2>📈 价格走势图</h2>
             <div class="chart-wrapper" id="priceChart"></div>
@@ -754,31 +754,28 @@
 
             const option = {
                 tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                        type: 'line'
-                    }
+                    show: false
                 },
                 grid: {
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    top: 0,
-                    containLabel: false
+                    left: '8%',
+                    right: '8%',
+                    bottom: '15%',
+                    top: '5%',
+                    containLabel: true
                 },
                 xAxis: {
                     type: 'category',
                     data: timestamps,
                     boundaryGap: false,
-                    axisLine: { show: false },
-                    axisTick: { show: false },
-                    axisLabel: { show: false }
+                    axisLine: { show: true },
+                    axisTick: { show: true },
+                    axisLabel: { show: true, fontSize: 10 }
                 },
                 yAxis: {
                     type: 'value',
-                    axisLine: { show: false },
-                    axisTick: { show: false },
-                    axisLabel: { show: false },
+                    axisLine: { show: true },
+                    axisTick: { show: true },
+                    axisLabel: { show: true, fontSize: 10 },
                     splitLine: { show: false },
                     min: 'dataMin',
                     max: 'dataMax'
@@ -917,16 +914,22 @@
         function setupThumbnailClickHandler(containerId, chart) {
             const container = document.getElementById(containerId);
 
+            // 直接在容器上添加点击事件
             container.addEventListener('click', function(event) {
-                if (!thumbnailData || thumbnailData.length === 0) return;
+                if (!thumbnailData || thumbnailData.length === 0) {
+                    console.log('缩略图数据为空');
+                    return;
+                }
 
+                // 获取容器的位置和大小
                 const rect = container.getBoundingClientRect();
                 const x = event.clientX - rect.left;
                 const containerWidth = rect.width;
 
                 // 计算点击位置对应的数据索引
                 const dataIndex = Math.floor((x / containerWidth) * thumbnailData.length);
-                const clickedDataPoint = thumbnailData[Math.min(dataIndex, thumbnailData.length - 1)];
+                const clickedIndex = Math.min(dataIndex, thumbnailData.length - 1);
+                const clickedDataPoint = thumbnailData[clickedIndex];
 
                 if (clickedDataPoint) {
                     // 选择前后10分钟的数据
@@ -935,7 +938,7 @@
 
                     console.log('点击的数据点:', clickedDataPoint);
                     console.log('点击时间戳:', clickedTime);
-                    console.log('当前时间戳:', Date.now() / 1000);
+                    console.log('点击索引:', clickedIndex);
 
                     selectedTimeRange = {
                         start: clickedTime - tenMinutes,
@@ -949,9 +952,18 @@
                     updateMainChartsWithSelectedRange();
 
                     // 显示选择区域
-                    showThumbnailSelection(containerId, dataIndex);
+                    showThumbnailSelection(containerId, clickedIndex);
                 }
             });
+
+            // 鼠标移动时改变光标
+            container.addEventListener('mousemove', function(event) {
+                container.style.cursor = 'pointer';
+            });
+
+            container.addEventListener('mouseleave', function(event) {
+                container.style.cursor = 'default';
+            });
         }
         
         // 显示缩略图选择区域