waveform-analysis 0.1.69 → 0.1.71

package/src/components/core/useWaveformChartController.ts

@@ -28,6 +28,7 @@ import { useWaveformChartLifecycle } from './useWaveformChartLifecycle'
 import { usePreparedWaveformSeries } from './useWaveformData'
 import { useWaveformLayout } from './useWaveformLayout'
 import { useWaveformPresentation } from './useWaveformPresentation'
+import { usePlotLabelLayout } from './usePlotLabelLayout'
 import { useWaveformRenderSampling } from './useWaveformRenderSampling'
 import type {
   ResolvedWaveformChartProps,
@@ -156,6 +157,12 @@ export function useWaveformChartController(
     annotationLayoutsForTrack,
     resolveSeriesYScale,
   } = layout
+  const plotLabels = usePlotLabelLayout(
+    props,
+    layout.resolvedChartLeftMargin,
+    layout.innerWidth,
+    presentation.titleAreaStyle,
+  )
 
   useWaveformRenderSampling({
     props,
@@ -173,13 +180,7 @@ export function useWaveformChartController(
   watchEffect(() => {
     paginationBandHeight.value =
       props.layoutPreset === 'edge-compact'
-        ? resolveCompactPaginationBand(
-            paginationVisible.value,
-            chartWidth.value,
-            pageCount.value,
-            resolvedChartLeftMargin.value + innerWidth.value / 2,
-            layout.resolvedXLabel.value,
-          )
+        ? resolveCompactPaginationBand(paginationVisible.value)
         : gridOptions.value.showPagination && pageCount.value > 1 && chartWidth.value <= 520
           ? 40
           : 0
@@ -321,6 +322,8 @@ export function useWaveformChartController(
   return reactive({
     ...toRefs(props),
     ...presentation,
+    plotCenterX: plotLabels.plotCenterX,
+    titleAreaStyle: plotLabels.plotTitleAreaStyle,
     paginationVisible,
     ...layout,
     ...annotations,

package/src/components/core/useWaveformLayout.ts

@@ -77,7 +77,8 @@ export function useWaveformLayout(context: LayoutContext) {
       const visibleSeries = series.filter((item) => !hiddenSeriesIdSet.value.has(item.id))
       const xDomainValues: number[] = []
       const yDomainValues: number[] = []
-      visibleSeries.forEach((item) => {
+      const domainSeries = visibleSeries.length ? visibleSeries : series
+      domainSeries.forEach((item) => {
         xDomainValues.push(item.xDomain[0], item.xDomain[1])
         yDomainValues.push(item.yDomain[0], item.yDomain[1])
       })
@@ -92,8 +93,9 @@ export function useWaveformLayout(context: LayoutContext) {
   })
   const showLegendUnits = computed(
     () =>
-      props.unitDisplayMode === 'legend-single-series' &&
-      !chartTracks.value.some((track) => track.series.length > 1),
+      props.unitDisplayMode === 'channel-label-or-legend' ||
+      (props.unitDisplayMode === 'legend-single-series' &&
+        !chartTracks.value.some((track) => track.series.length > 1)),
   )
   const renderingOptions = computed(() => resolveWaveformRenderingOptions(props.rendering))
   const pageableTracks = computed(() =>
@@ -103,6 +105,11 @@ export function useWaveformLayout(context: LayoutContext) {
   const pagedTracks = computed(() =>
     paginateSeries(pageableTracks.value, currentPage.value, gridOptions.value),
   )
+  const hideYAxisTitles = computed(
+    () =>
+      props.unitDisplayMode === 'channel-label-or-legend' &&
+      pagedTracks.value.some((track) => track.series.length > 1),
+  )
   const layoutTracks = computed(() => {
     const tracksWithSeries = pagedTracks.value.filter((track) => track.series.length > 0)
     return gridOptions.value.fillIncompleteLastRow && tracksWithSeries.length > 0
@@ -143,8 +150,11 @@ export function useWaveformLayout(context: LayoutContext) {
   const isZoomMode = computed(() => activeInteractionMode.value !== 'annotation')
   const sharedXDomain = computed(() => {
     const values: number[] = []
-    chartTracks.value.forEach((track) => {
-      if (track.visibleSeries.length) values.push(track.xDomain[0], track.xDomain[1])
+    const tracks = chartTracks.value.some((track) => track.visibleSeries.length)
+      ? chartTracks.value.filter((track) => track.visibleSeries.length)
+      : chartTracks.value.filter((track) => track.series.length)
+    tracks.forEach((track) => {
+      values.push(track.xDomain[0], track.xDomain[1])
     })
     return paddedDomain(values)
   })
@@ -229,7 +239,9 @@ export function useWaveformLayout(context: LayoutContext) {
       grid: gridOptions.value,
       useNonEmptyBottomTracks: props.layoutPreset === 'edge-compact',
       compactYAxisLayout: props.layoutPreset === 'edge-compact',
-      showAxisUnits: props.layoutPreset !== 'edge-compact' || props.unitDisplayMode === 'axis',
+      showAxisUnits:
+        props.unitDisplayMode !== 'channel-label-or-legend' &&
+        (props.layoutPreset !== 'edge-compact' || props.unitDisplayMode === 'axis'),
       displayMode: props.displayMode,
       overlayMode: props.overlayMode,
       independentTransforms: independentTransforms.value,
@@ -302,6 +314,7 @@ export function useWaveformLayout(context: LayoutContext) {
     chartSeries,
     chartTracks,
     showLegendUnits,
+    hideYAxisTitles,
     pageableTracks,
     renderingOptions,
     gridOptions,

package/src/components/core/useWaveformPresentation.ts

@@ -73,9 +73,7 @@ export function useWaveformPresentation(context: PresentationContext) {
           : ZERO_LINE_DEFAULTS.BOUNDARY_THRESHOLD,
     }
   })
-  const legendBackgroundColor = computed(
-    () => props.legend.backgroundColor || 'rgba(255, 255, 255, 0.7)',
-  )
+  const legendBackgroundColor = computed(() => props.legend.backgroundColor || 'transparent')
   const legendInteractive = computed(() => props.legend.interactive === true)
   const hiddenSeriesIdSet = computed(() =>
     props.hiddenSeriesIds === undefined
@@ -118,7 +116,12 @@ export function useWaveformPresentation(context: PresentationContext) {
     color: props.title?.textStyle?.color ?? '#1f2937',
     fontSize: `${titleFontSize.value}px`,
     fontFamily: props.title?.textStyle?.fontFamily || '"Microsoft YaHei", "微软雅黑", sans-serif',
-    fontWeight: props.title?.textStyle?.fontWeight ?? 400,
+    fontWeight:
+      isEdgeCompact.value &&
+      titleFontSize.value === 18 &&
+      props.title?.textStyle?.fontWeight === 700
+        ? 600
+        : (props.title?.textStyle?.fontWeight ?? 400),
     fontStyle: props.title?.textStyle?.fontStyle ?? 'normal',
     textDecoration: props.title?.textStyle?.textDecoration ?? 'none',
     letterSpacing: props.title?.textStyle?.letterSpacing ?? 'normal',

package/src/components/core/useWaveformYAxisLayout.ts

@@ -30,7 +30,11 @@ export function useWaveformYAxisLayout(context: YAxisLayoutContext) {
     yAxisTickCount,
   } = context
   const isEdgeCompact = computed(() => props.layoutPreset === 'edge-compact')
-  const showUnits = computed(() => !isEdgeCompact.value || props.unitDisplayMode === 'axis')
+  const showUnits = computed(
+    () =>
+      props.unitDisplayMode !== 'channel-label-or-legend' &&
+      (!isEdgeCompact.value || props.unitDisplayMode === 'axis'),
+  )
   const yAxisMetrics = computed(() =>
     resolveYAxisLayoutMetrics(
       chartTracks.value,
@@ -47,28 +51,28 @@ export function useWaveformYAxisLayout(context: YAxisLayoutContext) {
     ),
   )
   const hasYAxisLabels = computed(() =>
-    chartTracks.value.some(
-      (track) =>
-        track.visibleSeries.length === 1 &&
-        Boolean(track.visibleSeries[0]?.name.trim() || props.yLabel),
-    ),
+    chartTracks.value.some((track) => {
+      const series = track.visibleSeries.length ? track.visibleSeries : track.series
+      return series.length === 1 && Boolean(series[0]?.name.trim() || props.yLabel)
+    }),
   )
   const hasVisibleWaveformData = computed(() =>
     chartTracks.value.some((track) => track.visibleSeries.length > 0),
   )
+  const hasAxisData = computed(() => chartTracks.value.some((track) => track.series.length > 0))
   const chartLeftMargin = computed(() =>
     Math.max(
       margin.left,
       hasYAxisLabels.value
         ? yAxisMetrics.value.fullClearance
-        : hasVisibleWaveformData.value
+        : hasAxisData.value
           ? yAxisMetrics.value.tickClearance
           : 0,
     ),
   )
   const yAxisSlots = computed(() =>
     buildYAxisSlots(
-      layoutTracks.value.filter((track) => track.visibleSeries.length > 0),
+      layoutTracks.value.filter((track) => track.series.length > 0),
       props.overlayMode,
       props.yDomain,
       props.yDomains,
@@ -91,7 +95,7 @@ export function useWaveformYAxisLayout(context: YAxisLayoutContext) {
   // The same slot places the title and reserves its entire 20px band. The outer
   // padding belongs to the chart edge, rather than the old fixed 48px minimum.
   const compactLeftClearance = computed(() =>
-    !hasVisibleWaveformData.value
+    !hasAxisData.value
       ? 0
       : props.overlayMode === 'multi-axis' || hasYAxisLabels.value
         ? yAxisSlots.value.clearance.left
@@ -118,9 +122,9 @@ export function useWaveformYAxisLayout(context: YAxisLayoutContext) {
     const canReserveLabelClearance = plotWidth >= MINIMUM_PLOT_WIDTH
     return {
       horizontalGap:
-        props.overlayMode === 'multi-axis' && hasMultipleColumns && hasVisibleWaveformData.value
+        props.overlayMode === 'multi-axis' && hasMultipleColumns && hasAxisData.value
           ? Math.max(baseGap, yAxisSlots.value.clearance.left + yAxisSlots.value.clearance.right)
-          : hasMultipleColumns && hasVisibleWaveformData.value
+          : hasMultipleColumns && hasAxisData.value
             ? hasYAxisLabels.value && canReserveLabelClearance
               ? fullGap
               : tickGap

package/src/components/core/yAxisLayoutMetrics.ts

@@ -45,7 +45,7 @@ export function resolveYAxisLayoutMetrics(
   measureTextWidth?: (text: string) => number,
 ): YAxisLayoutMetrics {
   const axisText = chartTracks
-    .filter((track) => track.visibleSeries.length > 0)
+    .filter((track) => track.series.length > 0)
     .flatMap((track) =>
       resolveRenderedYAxisSeriesGroups(
         track,

package/src/components/core/yAxisTitleLayout.ts

@@ -1,4 +1,4 @@
-import { formatYAxisTickLabel } from './layout'
+import { formatYAxisTickLayoutLabel } from './layout'
 import type { TrackLayout, WaveformYAxisLayout } from './types'
 import {
   Y_AXIS_CHARACTER_WIDTH,
@@ -6,11 +6,17 @@ import {
   Y_AXIS_TICK_PADDING,
 } from './yAxisConstants'
 
-// Match the existing 14px channel names and 11px ticks in WaveformTrack.css.
-const TITLE_FONT_SIZE = 14
+// Match the 12px channel names and 11px ticks in WaveformTrack.css.
+const TITLE_FONT_SIZE = 12
 const TICK_FONT_SIZE = 11
 const TEXT_GAP = 2
 
+interface TitleLayoutOptions {
+  showUnits?: boolean
+  compact?: boolean
+  measureTextWidth?: (text: string) => number
+}
+
 function estimateTitleWidth(title: string): number {
   return Array.from(title).reduce((width, character) => {
     // Latin labels average well below one em; full-width characters occupy one em.
@@ -27,30 +33,37 @@ function estimateTitleWidth(title: string): number {
 
 type TitleTrack = Pick<TrackLayout, 'height' | 'column' | 'yAxes'>
 
-function titleDistance(track: TitleTrack, axis: WaveformYAxisLayout, yLabel?: string): number {
+function titleDistance(
+  track: TitleTrack,
+  axis: WaveformYAxisLayout,
+  yLabel: string | undefined,
+  options: TitleLayoutOptions,
+): number {
   const series = axis.seriesList[0]
   const title = series?.name.trim() || yLabel || ''
   const halfTitleHeight = estimateTitleWidth(title) / 2
   const titleTop = track.height / 2 - halfTitleHeight - TEXT_GAP
   const titleBottom = track.height / 2 + halfTitleHeight + TEXT_GAP
   const lowestTick = Math.min(...axis.tickValues)
+  const highestTick = Math.max(...axis.tickValues)
   const tickWidths = axis.tickValues.flatMap((value) => {
     // D3 places ticks at scale(value) + 0.5. The lowest label is bottom-aligned;
     // all other labels are vertically centered using dy="0.32em".
     const y = axis.scale(value) + 0.5
-    const top = y - (value === lowestTick ? TICK_FONT_SIZE : TICK_FONT_SIZE / 2)
-    const bottom = value === lowestTick ? y : y + TICK_FONT_SIZE / 2
+    const isTopAligned = options.compact && value === highestTick
+    const top = y - (value === lowestTick ? TICK_FONT_SIZE : isTopAligned ? 0 : TICK_FONT_SIZE / 2)
+    const bottom =
+      value === lowestTick ? y : y + (isTopAligned ? TICK_FONT_SIZE : TICK_FONT_SIZE / 2)
     if (bottom < titleTop || top > titleBottom) return []
-    return [
-      formatYAxisTickLabel(
-        value,
-        axis.scale.domain() as [number, number],
-        axis.tickValues,
-        series?.unit,
-      ).length * Y_AXIS_CHARACTER_WIDTH,
-    ]
+    const text = formatYAxisTickLayoutLabel(
+      value,
+      axis.scale.domain() as [number, number],
+      axis.tickValues,
+      options.showUnits === false ? undefined : series?.unit,
+    )
+    return [options.measureTextWidth?.(text) ?? text.length * Y_AXIS_CHARACTER_WIDTH]
   })
-  // The 20px title band already leaves 3px beside a 14px glyph.
+  // The 20px title band leaves 4px beside a 12px glyph.
   return (
     Math.max(Y_AXIS_CHARACTER_WIDTH, ...tickWidths) +
     Y_AXIS_TICK_PADDING +
@@ -58,14 +71,22 @@ function titleDistance(track: TitleTrack, axis: WaveformYAxisLayout, yLabel?: st
   )
 }
 
-export function alignLeftYAxisTitles(layouts: TitleTrack[], yLabel?: string): void {
+export function alignLeftYAxisTitles(
+  layouts: TitleTrack[],
+  yLabel?: string,
+  options: TitleLayoutOptions = {},
+): void {
   const distances = new Map<string, number>()
   for (const track of layouts) {
     let leftIndex = 0
     for (const axis of track.yAxes) {
       if (axis.side !== 'left') continue
       const key = `${track.column}:${leftIndex++}`
-      distances.set(key, Math.max(distances.get(key) ?? 0, titleDistance(track, axis, yLabel)))
+      const distance = titleDistance(track, axis, yLabel, options)
+      // Compact slots already reserve every tick. Only move names inward, so
+      // alignment can never push them beyond the space reserved at the chart edge.
+      const boundedDistance = options.compact ? Math.min(axis.x - axis.labelX, distance) : distance
+      distances.set(key, Math.max(distances.get(key) ?? 0, boundedDistance))
     }
   }
   for (const track of layouts) {

package/src/components/interaction/WaveformTooltip.vue

@@ -133,8 +133,8 @@ const tooltipStyle = computed(() => {
   padding: 9px 12px;
   color: #505050;
   font:
-    14px/1.35 Arial,
-    sans-serif;
+    11px/1.35 'Times New Roman',
+    serif;
   pointer-events: none;
   background: #fff;
   border: 1px solid #e3e7eb;

package/src/components/interaction/useWaveformZoom.ts

@@ -15,7 +15,7 @@ import { WHEEL_ZOOM_DEBOUNCE_MS, ZOOM_CONSTRAINTS } from '../core/constants'
 import type { TrackLayout } from '../core/types'
 import type { ResolvedWaveformChartProps, WaveformChartEmit } from '../core/waveformChartTypes'
 import { useAnimationFrameThrottle } from '../utils/useAnimationFrameThrottle'
-import { constrainViewportZoom } from './remoteViewport'
+import { constrainViewportZoom, remotePanBoundary } from './remoteViewport'
 import { normalizeIntegerZoomDomain } from './integerZoom'
 import { resolveMinimumZoomSpan, transformForDomain, type ZoomSeriesGroup } from './zoomConstraints'
 import {
@@ -254,13 +254,28 @@ export function useWaveformZoom(context: ZoomContext) {
     const tracks = trackLayouts.value.filter((track) => track.hasVisibleSeries)
     return tracks.length > 0 && tracks.every(canZoomTrack)
   }
-  const canHandleWheelZoom = (event: Event, canZoomIn: boolean): boolean => {
+  const resolveMinimumZoomScale = (domain: [number, number]): number => {
+    const boundary = remotePanBoundary(props)
+    return boundary
+      ? Math.min(1, (domain[1] - domain[0]) / (boundary[1] - boundary[0]))
+      : ZOOM_CONSTRAINTS.MIN_SCALE
+  }
+  const canHandleWheelZoom = (event: Event, canZoomIn: boolean, minimumScale: number): boolean => {
     if (event.type !== 'wheel') return false
     const deltaY = (event as WheelEvent).deltaY
+    const currentScale = zoomTransform(event.currentTarget as Element).k
+
+    // 放大操作：需要检查是否还有足够的数据点支持继续放大
     if (deltaY < 0) return canZoomIn
+
+    // 缩小操作：只要当前缩放级别大于最小比例就允许
+    // 即使已达到最小可见点数限制，用户也应该能够缩小视图
     if (deltaY > 0) {
-      return zoomTransform(event.currentTarget as Element).k > ZOOM_CONSTRAINTS.MIN_SCALE
+      // 使用小的容差避免浮点精度问题导致无法缩小到边界
+      const scaleTolerance = 1e-6
+      return currentScale > minimumScale * (1 + scaleTolerance)
     }
+
     return false
   }
   const configureZoom = () => {
@@ -284,13 +299,14 @@ export function useWaveformZoom(context: ZoomContext) {
         if (!overlay) return
         const dataDomain = resolveInitialTrackDomain(track)
         const groups = [track.seriesList]
+        const minimumScale = resolveMinimumZoomScale(dataDomain)
         const behavior = zoom<SVGRectElement, unknown>()
           .filter((event) => {
             const currentTrack =
               trackLayouts.value.find((item) => item.index === track.index) ?? track
-            return canHandleWheelZoom(event, canZoomTrack(currentTrack))
+            return canHandleWheelZoom(event, canZoomTrack(currentTrack), minimumScale)
           })
-          .scaleExtent([1, resolveMaximumZoomScale(dataDomain, groups)])
+          .scaleExtent([minimumScale, resolveMaximumZoomScale(dataDomain, groups)])
           .constrain((transform) => constrainTransform(transform, dataDomain, track.width, groups))
           .extent([
             [0, 0],
@@ -320,9 +336,10 @@ export function useWaveformZoom(context: ZoomContext) {
     const groups = trackLayouts.value
       .filter((track) => track.hasVisibleSeries)
       .map((track) => track.seriesList)
+    const minimumScale = resolveMinimumZoomScale(initialXDomain.value)
     const behavior = zoom<SVGRectElement, unknown>()
-      .filter((event) => canHandleWheelZoom(event, canZoomSharedTracks()))
-      .scaleExtent([1, resolveMaximumZoomScale(initialXDomain.value, groups)])
+      .filter((event) => canHandleWheelZoom(event, canZoomSharedTracks(), minimumScale))
+      .scaleExtent([minimumScale, resolveMaximumZoomScale(initialXDomain.value, groups)])
       .constrain((transform) =>
         constrainTransform(transform, initialXDomain.value, innerWidth.value, groups),
       )

package/src/components/rendering/WaveformLegend.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 
 import type { WaveformLegendPosition } from '../../types'
 import type { DisplaySeries } from '../core/types'
+import { formatChannelLabel } from './channelLabel'
 import {
   waveformLegendErrorBarPath,
   waveformLegendLinePath,
@@ -33,8 +34,7 @@ const emit = defineEmits<{
 const hiddenSeriesIdSet = computed(() => new Set(props.hiddenSeriesIds))
 
 function legendLabel(series: DisplaySeries): string {
-  const unit = series.unit?.trim()
-  return props.showUnits && unit && unit !== '--' ? `${series.name} (${unit})` : series.name
+  return props.showUnits ? formatChannelLabel(series.name, series.unit, ' ') : series.name
 }
 
 function isHidden(seriesId: string): boolean {
@@ -193,7 +193,9 @@ function toggleSeries(seriesId: string) {
   padding: 5px 7px;
   overflow: hidden;
   color: #344054;
-  font: 12px/1.35 sans-serif;
+  font:
+    11px/1.35 'Times New Roman',
+    serif;
   border: 1px solid rgb(208 213 221 / 90%);
   border-radius: 4px;
 }

package/src/components/rendering/WaveformTrack.css

@@ -10,7 +10,7 @@
 }
 
 .waveform-track__y-axis-label {
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 600;
   pointer-events: none;
 }

package/src/components/rendering/WaveformTrack.vue

@@ -24,8 +24,11 @@ interface Props {
   timeUnit: 's' | 'ms'
   yLabel?: string
   showAxisUnits?: boolean
+  showLabelUnits?: boolean
+  hideYAxisTitles?: boolean
   containYAxisEndpoints?: boolean
   containFrameStroke?: boolean
+  omitFrameTop?: boolean
   cleanView?: boolean
   zeroLine?: Required<WaveformZeroLineOptions>
 }
@@ -74,6 +77,12 @@ const resolvedFrameStyle = computed(() => {
 const frameInset = computed(() =>
   props.containFrameStroke ? resolvedFrameStyle.value.borderWidth / 2 : 0,
 )
+const openFramePath = computed(() => {
+  const inset = frameInset.value
+  const right = Math.max(inset, (props.track.width ?? props.innerWidth) - inset)
+  const bottom = Math.max(inset, props.track.height - inset)
+  return `M ${inset} ${inset} V ${bottom} H ${right} V ${inset}`
+})
 </script>
 
 <template>
@@ -106,12 +115,16 @@ const frameInset = computed(() =>
       :time-unit="timeUnit"
       :y-label="yLabel"
       :show-units="showAxisUnits"
-      :contain-y-axis-endpoints="containYAxisEndpoints"
+      :show-label-units="showLabelUnits"
+      :hide-y-axis-titles="hideYAxisTitles"
+      :contain-y-axis-endpoints="containYAxisEndpoints || displayMode === 'compact'"
     />
 
-    <rect
+    <component
+      :is="omitFrameTop ? 'path' : 'rect'"
       v-if="!track.isEmpty"
       class="waveform-track__plot-frame waveform-chart__plot-frame"
+      :d="omitFrameTop ? openFramePath : undefined"
       :x="containFrameStroke ? frameInset : undefined"
       :y="containFrameStroke ? frameInset : undefined"
       :width="Math.max(0, (track.width ?? innerWidth) - frameInset * 2)"

package/src/components/rendering/WaveformTrackAxes.vue

@@ -7,6 +7,7 @@ import { formatXAxisLabel } from '../../utils'
 import { formatYAxisTickLabel } from '../core/layout'
 import type { DisplaySeries, TrackLayout, WaveformYAxisLayout } from '../core/types'
 import { Y_AXIS_LABEL_BAND_WIDTH } from '../core/yAxisConstants'
+import { formatChannelLabel } from './channelLabel'
 
 interface Props {
   track: TrackLayout
@@ -16,6 +17,8 @@ interface Props {
   timeUnit: 's' | 'ms'
   yLabel?: string
   showUnits?: boolean
+  showLabelUnits?: boolean
+  hideYAxisTitles?: boolean
   containYAxisEndpoints?: boolean
 }
 
@@ -24,7 +27,8 @@ const xAxisElement = ref<SVGGElement>()
 const yAxisElements = ref<SVGGElement[]>([])
 
 function resolveYAxisLabel(series: DisplaySeries): string {
-  return series.name.trim() || props.yLabel || ''
+  const name = series.name.trim() || props.yLabel || ''
+  return props.showLabelUnits ? formatChannelLabel(name, series.unit) : name
 }
 
 function hasYAxisTitle(axis: WaveformYAxisLayout): boolean {
@@ -36,12 +40,6 @@ function setYAxisElement(element: unknown, index: number) {
   if (element) yAxisElements.value[index] = element as SVGGElement
 }
 
-function shouldShowYAxisLabel(trackHeight: number, trackIndex: number): boolean {
-  const minimumHeightForLabel = 80
-  if (trackHeight >= minimumHeightForLabel) return true
-  return trackIndex % Math.ceil(minimumHeightForLabel / trackHeight) === 0
-}
-
 function renderAxes() {
   props.track.yAxes.forEach((axis, index) => {
     const element = yAxisElements.value[index]
@@ -54,6 +52,7 @@ function renderAxes() {
           axis.scale.domain() as [number, number],
           axis.tickValues,
           unit,
+          axis.side,
         ),
       )
       .tickSize(-4)
@@ -181,13 +180,13 @@ watch(
   <g
     v-if="
       !cleanView &&
+      !hideYAxisTitles &&
       !track.isEmpty &&
       track.hasVisibleSeries &&
       track.seriesList.length === 1 &&
       track.showYAxisLabel &&
       track.series &&
-      resolveYAxisLabel(track.series) &&
-      shouldShowYAxisLabel(track.height, track.index)
+      resolveYAxisLabel(track.series)
     "
   >
     <rect
@@ -210,7 +209,9 @@ watch(
   </g>
 
   <g
-    v-for="axis in !cleanView && track.yAxes.length > 1 ? track.yAxes.filter(hasYAxisTitle) : []"
+    v-for="axis in !cleanView && !hideYAxisTitles && track.yAxes.length > 1
+      ? track.yAxes.filter(hasYAxisTitle)
+      : []"
     :key="`y-axis-title-${track.index}-${axis.index}`"
     class="waveform-track__multi-axis-title"
     :data-y-axis-title-index="axis.index"

package/src/components/rendering/WaveformTrackBackdrop.vue

@@ -26,7 +26,7 @@ defineProps<Props>()
   />
 
   <g
-    v-if="!track.isEmpty && track.hasVisibleSeries && !cleanView"
+    v-if="!track.isEmpty && !cleanView"
     :clip-path="`url(#${clipPathId}-${track.index})`"
     aria-hidden="true"
   >

package/src/components/rendering/channelLabel.ts

@@ -0,0 +1,5 @@
+/** Format display text without changing the series metadata or identity. */
+export function formatChannelLabel(name: string, unit?: string, separator = ''): string {
+  const normalizedUnit = unit?.trim()
+  return normalizedUnit && normalizedUnit !== '--' ? `${name}${separator}(${normalizedUnit})` : name
+}

package/src/types/chart.ts

@@ -16,7 +16,11 @@ export interface WaveformPoint {
 export type WaveformLayoutPreset = 'default' | 'edge-compact'
 
 /** Controls unit placement without changing series metadata. */
-export type WaveformUnitDisplayMode = 'axis' | 'legend-single-series'
+export type WaveformUnitDisplayMode =
+  | 'axis'
+  | 'legend-single-series'
+  /** Label and legend units; hide all channel titles on pages containing a multi-series track. */
+  | 'channel-label-or-legend'
 
 /**
  * 显示模式

package/src/utils/formatters.ts

@@ -33,10 +33,11 @@ function formatFixedNumber(value: number, precision: number): string {
 
 /** Whether an axis magnitude should use one shared scientific exponent. */
 export function shouldUseScientificAxisLabel(maxAbsoluteValue: number): boolean {
+  const magnitude = Math.abs(maxAbsoluteValue)
   return (
-    Number.isFinite(maxAbsoluteValue) &&
-    (maxAbsoluteValue >= SCIENTIFIC_MAX_PLAIN_ABSOLUTE_VALUE ||
-      (maxAbsoluteValue > 0 && maxAbsoluteValue < SCIENTIFIC_MIN_ABSOLUTE_VALUE))
+    Number.isFinite(magnitude) &&
+    (magnitude >= SCIENTIFIC_MAX_PLAIN_ABSOLUTE_VALUE ||
+      (magnitude > 0 && magnitude <= SCIENTIFIC_MIN_ABSOLUTE_VALUE))
   )
 }