From fe3ab1f679392403b536e34f0601e076785d8d00 Mon Sep 17 00:00:00 2001
From: yexb <553699424@qq.com>
Date: Thu, 7 May 2026 11:47:44 +0800
Subject: [PATCH] =?UTF-8?q?refactor(waveform):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=B3=A2=E5=BD=A2=E8=B6=8B=E5=8A=BF=E5=9B=BE=E8=A1=A8=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加了 canResetTrendChart 计算属性用于判断是否可以重置图表
- 更新了工具栏状态控制逻辑，禁用状态下禁止重置操作
- 调整了图表边距配置，右侧留白从 18px 增加到 36px
- 时间轴底部留白从 30px 调整为 34px
- 时间轴标签间距从 6 调整为 8
- 集成了 ECharts 工具箱的数据缩放功能
- 替换了图标组件，使用箭头图标替代缩放图标
- 调整了工具栏项目顺序，将平移工具移到最后
---
 .../components/WaveformTrendPanel.vue         | 16 ++++----
 frontend/src/views/tools/waveform/index.vue   | 37 +++++++++++++++++--
 2 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/frontend/src/views/tools/waveform/components/WaveformTrendPanel.vue b/frontend/src/views/tools/waveform/components/WaveformTrendPanel.vue
index bb04208..86d9bc8 100644
--- a/frontend/src/views/tools/waveform/components/WaveformTrendPanel.vue
+++ b/frontend/src/views/tools/waveform/components/WaveformTrendPanel.vue
@@ -63,15 +63,15 @@
 <script setup lang="ts">
 import {
     ArrowDownBold,
+    ArrowLeftBold,
+    ArrowRightBold,
     ArrowUpBold,
     Crop,
     Download,
     FullScreen,
     Picture,
-    Rank,
-    RefreshLeft,
-    ZoomIn,
-    ZoomOut
+    Pointer,
+    RefreshLeft
 } from '@element-plus/icons-vue'
 import { ref } from 'vue'
 import WaveformTrendChartArea from './WaveformTrendChartArea.vue'
@@ -121,13 +121,13 @@ const trendToolGroups: Array<{
     {
         key: 'scale',
         items: [
-            { action: 'x-zoom-in', label: 'X坐标放大', icon: ZoomIn },
-            { action: 'x-zoom-out', label: 'X坐标缩小', icon: ZoomOut },
+            { action: 'x-zoom-in', label: 'X坐标放大', icon: ArrowRightBold },
+            { action: 'x-zoom-out', label: 'X坐标缩小', icon: ArrowLeftBold },
             { action: 'y-zoom-in', label: 'Y坐标放大', icon: ArrowUpBold },
             { action: 'y-zoom-out', label: 'Y坐标缩小', icon: ArrowDownBold },
             { action: 'box-zoom', label: '框选放大', icon: Crop },
-            { action: 'pan', label: '平移', icon: Rank },
-            { action: 'reset', label: '恢复', icon: RefreshLeft }
+            { action: 'reset', label: '恢复', icon: RefreshLeft },
+            { action: 'pan', label: '平移', icon: Pointer }
         ]
     },
     {
diff --git a/frontend/src/views/tools/waveform/index.vue b/frontend/src/views/tools/waveform/index.vue
index ba64cf8..a6c95e7 100644
--- a/frontend/src/views/tools/waveform/index.vue
+++ b/frontend/src/views/tools/waveform/index.vue
@@ -351,13 +351,23 @@ const canPanTrendChart = computed(() => {
     return hasWaveformData.value && (start > 0 || end < 100)
 })
 
+const canResetTrendChart = computed(() => {
+    const { start, end } = trendXZoomRange.value
+
+    return (
+        hasWaveformData.value &&
+        (start > 0 || end < 100 || trendYZoomScale.value !== 1 || activeTrendInteractionMode.value !== 'none')
+    )
+})
+
 const activeTrendToolStates = computed<Partial<Record<TrendToolAction, boolean>>>(() => ({
     'box-zoom': activeTrendInteractionMode.value === 'box-zoom',
     pan: activeTrendInteractionMode.value === 'pan'
 }))
 
 const disabledTrendToolStates = computed<Partial<Record<TrendToolAction, boolean>>>(() => ({
-    pan: !canPanTrendChart.value
+    pan: !canPanTrendChart.value,
+    reset: !canResetTrendChart.value
 }))
 
 const TREND_AXIS_EXPAND_RATIO = 1.2
@@ -370,9 +380,9 @@ const TREND_AXIS_EXTRA_SPLIT_SCORE = 0.25
 const TREND_AXIS_READABLE_INTERVAL_STEPS = [1, 2, 2.5, 5, 10]
 const TREND_GRID_TOP = '6px'
 const TREND_GRID_LEFT = '52px'
-const TREND_GRID_RIGHT = '18px'
+const TREND_GRID_RIGHT = '36px'
 const TREND_GRID_BOTTOM = {
-    withTimeAxis: '30px',
+    withTimeAxis: '34px',
     withoutTimeAxis: '6px'
 }
 const TREND_LINE_MAX_WIDTH = 1.6
@@ -764,7 +774,7 @@ const buildTrendChartOptions = (
             // 仅最后一张图显示时间轴，前两张图不再额外预留占位，尽量放大趋势内容区。
             name: showTimeAxis ? 'ms' : '',
             nameLocation: 'end',
-            nameGap: showTimeAxis ? 6 : 0,
+            nameGap: showTimeAxis ? 8 : 0,
             nameTextStyle: {
                 color: axisTextColor
             },
@@ -802,6 +812,25 @@ const buildTrendChartOptions = (
                 moveOnMouseWheel: activeTrendInteractionMode.value === 'pan'
             }
         ],
+        toolbox: {
+            // 外部工具栏通过 takeGlobalCursor 激活框选放大，ECharts 仍需要注册 toolbox.dataZoom 才会创建框选控制器。
+            show: true,
+            showTitle: false,
+            itemSize: 0,
+            itemGap: 0,
+            left: -100,
+            top: -100,
+            feature: {
+                dataZoom: {
+                    yAxisIndex: 'none',
+                    brushStyle: {
+                        color: 'rgba(64, 158, 255, 0.18)',
+                        borderColor: 'rgba(64, 158, 255, 0.65)',
+                        borderWidth: 1
+                    }
+                }
+            }
+        },
         color: chartColors,
         series: buildTrendSeries(seriesList)
     }