From e7c8d3fb9ef144246a1fa07cc9c43a93e072a95c Mon Sep 17 00:00:00 2001
From: SikongJueluo <selfconfusion@gmail.com>
Date: Mon, 21 Jul 2025 18:11:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9debugger=E7=9A=84?=
 =?UTF-8?q?=E6=B3=A2=E5=BD=A2=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../WaveformDisplay/WaveformDisplay.vue       | 130 ++++++++++++------
 1 file changed, 89 insertions(+), 41 deletions(-)

diff --git a/src/components/WaveformDisplay/WaveformDisplay.vue b/src/components/WaveformDisplay/WaveformDisplay.vue
index 55ca783..730f4bc 100644
--- a/src/components/WaveformDisplay/WaveformDisplay.vue
+++ b/src/components/WaveformDisplay/WaveformDisplay.vue
@@ -95,15 +95,15 @@ const option = computed((): EChartsOption => {
     .map((channel, index) => (channel.enabled ? index : -1))
     .filter((index) => index !== -1);
 
+  // 统计启用通道数量
   const channelCount = enabledChannels.length;
   const channelSpacing = 2; // 每个通道之间的间距
 
-  // 如果没有启用的通道，返回空配置
   if (channelCount === 0) {
     return {};
   }
 
-  // 使用单个网格
+  // 单个网格
   const grids: GridComponentOption[] = [
     {
       left: "5%",
@@ -147,34 +147,84 @@ const option = computed((): EChartsOption => {
     },
   ];
 
-  // 创建系列数据，只包含启用的通道
-  const series: LineSeriesOption[] = enabledChannelIndices.map(
-    (originalIndex: number, displayIndex: number) => ({
-      name: enabledChannels[displayIndex].name,
-      type: "line",
-      data: analyzer.logicData.value!.y[originalIndex].value.map(
-        (value: number) => value + displayIndex * channelSpacing + 0.2,
-      ),
-      step: "end",
-      lineStyle: {
-        width: 2,
-        color: enabledChannels[displayIndex].color,
-      },
-      areaStyle: {
-        opacity: 0.3,
-        origin: displayIndex * channelSpacing,
-        color: enabledChannels[displayIndex].color,
-      },
-      symbol: "none",
-      // 优化性能配置
-      sampling: "lttb",
-      // 减少动画以避免闪烁
-      animation: false,
-    }),
-  );
+  // 创建系列数据
+  const series: LineSeriesOption[] = [];
+  enabledChannelIndices.forEach((originalIndex: number, displayIndex: number) => {
+    const channel = analyzer.logicData.value!.y[originalIndex];
+    if (channel.type === "logic") {
+      // logic类型，原样显示
+      series.push({
+        name: channel.name,
+        type: "line",
+        data: channel.value.map(
+          (value: number) => value + displayIndex * channelSpacing + 0.2,
+        ),
+        step: "end",
+        lineStyle: {
+          width: 2,
+          color: channel.color,
+        },
+        areaStyle: {
+          opacity: 0.3,
+          origin: displayIndex * channelSpacing,
+          color: channel.color,
+        },
+        symbol: "none",
+        sampling: "lttb",
+        animation: false,
+      });
+    } else if (channel.type === "number") {
+      // number类型，VCD仿真样式：两个线条（1和0），变化时有斜率（过渡点），无areaStyle
+      const values = channel.value;
+      const xArr = analyzer.logicData.value!.x;
+      // 构造带过渡的点序列
+      function buildVcdLine(valArr: number[], high: number, low: number) {
+        const points: {x: number, y: number}[] = [];
+        for (let i = 0; i < valArr.length; i++) {
+          const v = valArr[i] > 0 ? high : low;
+          points.push({x: xArr[i], y: v});
+          // 检查下一个点是否变化，若变化则插入过渡点
+          if (i < valArr.length - 1 && valArr[i] !== valArr[i+1]) {
+            // 过渡点，x略微偏移（如+0.3），y为下一个值
+            const nextV = valArr[i+1] > 0 ? high : low;
+            points.push({x: xArr[i]+0.3, y: nextV});
+          }
+        }
+        // 返回y数组，x由category轴控制
+        return points.map(p => p.y);
+      }
+      // 1线条
+      series.push({
+        name: channel.name + "_1",
+        type: "line",
+        data: buildVcdLine(values, displayIndex * channelSpacing + 1, displayIndex * channelSpacing),
+        step: false, // 关闭step，允许斜率
+        lineStyle: {
+          width: 2,
+          color: channel.color,
+        },
+        symbol: "none",
+        sampling: "lttb",
+        animation: false,
+      });
+      // 0线条
+      series.push({
+        name: channel.name + "_0",
+        type: "line",
+        data: buildVcdLine(values, displayIndex * channelSpacing, displayIndex * channelSpacing + 1),
+        step: false,
+        lineStyle: {
+          width: 2,
+          color: channel.color,
+        },
+        symbol: "none",
+        sampling: "lttb",
+        animation: false,
+      });
+    }
+  });
 
   return {
-    // 全局动画配置
     animation: false,
     tooltip: {
       trigger: "axis",
@@ -183,31 +233,29 @@ const option = computed((): EChartsOption => {
         label: {
           backgroundColor: "#6a7985",
         },
-        // 减少axisPointer的动画
         animation: false,
       },
       formatter: (params: any) => {
         if (Array.isArray(params) && params.length > 0) {
           const timeValue = analyzer.logicData.value!.x[params[0].dataIndex];
           const dataIndex = params[0].dataIndex;
-
           let tooltip = `Time: ${timeValue.toFixed(3)}${analyzer.logicData.value!.xUnit}<br/>`;
-
-          // 只显示启用通道在当前时间点的原始数值（0或1）
-          enabledChannelIndices.forEach(
-            (originalIndex: number, displayIndex: number) => {
-              const channelName = enabledChannels[displayIndex].name;
-              const originalValue =
-                analyzer.logicData.value!.y[originalIndex].value[dataIndex];
+          enabledChannelIndices.forEach((originalIndex: number, displayIndex: number) => {
+            const channel = analyzer.logicData.value!.y[originalIndex];
+            if (channel.type === "logic") {
+              const channelName = channel.name;
+              const originalValue = channel.value[dataIndex];
               tooltip += `${channelName}: ${originalValue}<br/>`;
-            },
-          );
-
+            } else if (channel.type === "number") {
+              const channelName = channel.name;
+              const originalValue = channel.value[dataIndex];
+              tooltip += `${channelName}: ${originalValue}<br/>`;
+            }
+          });
           return tooltip;
         }
         return "";
       },
-      // 优化tooltip性能
       hideDelay: 100,
     },
     toolbox: {