feat: 优化波形渲染性能与交互

src/components/rendering/WaveformLegend.vue

@@ -6,6 +6,7 @@ import type { DisplaySeries } from '../core/types'
 import {
   waveformLegendErrorBarPath,
   waveformLegendLinePath,
+  waveformLineDasharray,
   waveformPointSymbolPath,
 } from './seriesStyle'
 
@@ -82,6 +83,7 @@ function toggleSeries(seriesId: string) {
             viewBox="0 0 26 16"
             aria-hidden="true"
             :data-line-type="item.lineType"
+            :data-line-style="item.lineStyle"
             :data-point-type="item.pointType"
             :data-error-bar-visible="item.errorBar.visible || undefined"
           >
@@ -90,6 +92,7 @@ function toggleSeries(seriesId: string) {
               class="waveform-legend__line"
               :d="waveformLegendLinePath(item.lineType) ?? undefined"
               :stroke="item.color"
+              :stroke-dasharray="waveformLineDasharray(item.lineStyle)"
               stroke-width="1.5"
               fill="none"
             />

src/components/rendering/WaveformSeriesLayer.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue'
 
 import { resolveWaveformPointErrors } from '../../core'
 import type { TrackLayout, TrackSeriesPath } from '../core/types'
-import { waveformPointSeriesPath } from './seriesStyle'
+import { waveformLineDasharray, waveformPointSeriesPath } from './seriesStyle'
 
 const props = defineProps<{
   track: TrackLayout
@@ -63,8 +63,10 @@ const renderedSeriesPaths = computed<RenderedSeriesPath[]>(() =>
         :data-series-name="seriesPath.series.name || undefined"
         :data-y-axis-index="seriesPath.yAxisIndex"
         :data-line-type="seriesPath.series.lineType"
+        :data-line-style="seriesPath.series.lineStyle"
         :d="seriesPath.path"
         :stroke="seriesPath.series.color"
+        :stroke-dasharray="waveformLineDasharray(seriesPath.series.lineStyle)"
       />
 
       <g

src/components/rendering/WaveformTrack.vue

@@ -216,6 +216,7 @@ watch(
             v-for="tick in track.xMinorTicks"
             :key="`x-minor-${track.index}-${tick}`"
             data-grid-direction="vertical"
+            :stroke="track.gridLines.verticalColor"
             :x1="track.xScale(tick)"
             :x2="track.xScale(tick)"
             y1="0"
@@ -227,6 +228,7 @@ watch(
             v-for="tick in track.yMinorTicks"
             :key="`y-minor-${track.index}-${tick}`"
             data-grid-direction="horizontal"
+            :stroke="track.gridLines.horizontalColor"
             x1="0"
             :x2="track.width ?? innerWidth"
             :y1="track.yScale(tick)"
@@ -242,6 +244,7 @@ watch(
             v-for="tick in track.xMajorTicks"
             :key="`x-major-${track.index}-${tick}`"
             data-grid-direction="vertical"
+            :stroke="track.gridLines.verticalColor"
             :x1="track.xScale(tick)"
             :x2="track.xScale(tick)"
             y1="0"
@@ -253,6 +256,7 @@ watch(
             v-for="tick in track.yMajorTicks"
             :key="`y-major-${track.index}-${tick}`"
             data-grid-direction="horizontal"
+            :stroke="track.gridLines.horizontalColor"
             x1="0"
             :x2="track.width ?? innerWidth"
             :y1="track.yScale(tick)"

src/components/rendering/seriesStyle.ts

@@ -7,7 +7,7 @@ import {
   type SymbolType,
 } from 'd3'
 
-import type { WaveformLineType, WaveformPointType } from '../../types'
+import type { WaveformLineStyle, WaveformLineType, WaveformPointType } from '../../types'
 
 const LEGEND_SWATCH_CENTER_X = 13
 const LEGEND_ERROR_BAR_TOP = 2
@@ -82,6 +82,12 @@ export function waveformLegendLinePath(lineType: WaveformLineType): string | nul
   return 'M1 8H25'
 }
 
+export function waveformLineDasharray(lineStyle: WaveformLineStyle): string | undefined {
+  if (lineStyle === 'dashed') return '8 5'
+  if (lineStyle === 'dash-dot') return '8 5 1.5 5'
+  return undefined
+}
+
 export function waveformLegendErrorBarPath(capWidth: number): string {
   const resolvedCapWidth =
     Number.isFinite(capWidth) && capWidth > 0