refactor(ui): remove Ant Design Vue dependency

feat(annotation): add serialization support
fix(chart): preserve clean view geometry
2026-07-22 13:13:17 +08:00 · 2026-07-21 23:15:06 +08:00 · 2026-07-21 22:26:34 +08:00 · 2026-07-21 20:44:08 +08:00
24 changed files with 1254 additions and 548 deletions
--- a/README.md
+++ b/README.md
@@ -28,23 +28,23 @@ pnpm install
 pnpm dev
 ```

-组件库将 Vue、D3、Ant Design Vue 和 vue3-colorpicker 作为 peer dependency；直接安装到业务项目时请一并
+组件库将 Vue、D3 和 vue3-colorpicker 作为 peer dependency；直接安装到业务项目时请一并
 安装这些依赖：

 ```bash
-pnpm add waveform-analysis vue d3 ant-design-vue vue3-colorpicker
+pnpm add waveform-analysis vue d3 vue3-colorpicker
 ```

 ### 运行时版本要求

 组件库支持以下运行时版本：

-| 依赖 | 支持版本 |
-| --- | --- |
-| Vue | `>=3.2.33 <4` |
-| Ant Design Vue | `>=3.2.20 <4` |
+| 依赖 | 支持版本      |
+| ---- | ------------- |
+| Vue  | `>=3.2.33 <4` |
+| D3   | `>=7.9.0 <8`  |

-安装时请确保业务项目中的 Vue 与 Ant Design Vue 版本满足上述范围。
+安装时请确保业务项目中的 Vue 与 D3 版本满足上述范围。

 ## 发布

@@ -104,12 +104,15 @@ const data = ref<WaveformData>({
 | `grid`                            | `WaveformGridOptions`                       | `{ rowCount: 2, columnCount: 1, showPagination: true }` | 网格和分页                        |
 | `rendering`                       | `WaveformRenderingOptions`                  | `{}`                                                    | 降采样与点/误差棒间距             |
 | `title` / `legend` / `frameStyle` | 对应公开类型                                | 未设置                                                  | 标题、图例和图框样式              |
+| `zeroLine`                        | `WaveformZeroLineOptions`                   | `{ visible: false }`                                    | 零值参考线显隐与样式              |
+| `cleanView`                       | `boolean`                                   | `false`                                                 | 仅保留波形的净图模式              |
 | `annotations`                     | `WaveformAnnotation[]`                      | `[]`                                                    | 受控标注数据                      |
 | `hiddenSeriesIds`                 | `string[]`                                  | 未设置                                                  | 受控隐藏系列 ID                   |
 | `defaultHiddenSeriesIds`          | `string[]`                                  | `[]`                                                    | 非受控模式的初始隐藏系列          |

 所有公开类型均可从包入口导入，例如 `WaveformData`、`WaveformSeries`、
-`WaveformAnnotation`、`WaveformRenderingOptions` 和 `WaveformGridOptions`。
+`WaveformAnnotation`、`WaveformRenderingOptions`、`WaveformZeroLineOptions` 和
+`WaveformGridOptions`。

 ### 数据结构

@@ -381,6 +384,35 @@ const hiddenSeriesIds = ref<string[]>([])
 显隐状态以规范化后的 `series.id` 为键。要在数据刷新和重新排序后稳定保留状态，每个系列都应
 提供全图唯一且稳定的显式 `id`；自动生成的索引 ID 或重复 ID 添加的后缀不保证跨排序稳定。

+### 零值参考线与净图
+
+`zeroLine` 用于绘制 `y = 0` 的水平参考线，默认隐藏。参考线只在对应 Y 轴的当前 domain
+包含 0 时渲染，不会为了显示参考线而扩展数据范围。多值轴模式下，每根可见 Y 轴分别按自身
+scale 定位零线：
+
+```vue
+<WaveformChart
+  :data="chartData"
+  :zero-line="{
+    visible: true,
+    color: '#98a2b3',
+    width: 1,
+    dash: '6 4',
+  }"
+/>
+```
+
+`dash` 直接对应 SVG 的 `stroke-dasharray`；传入空字符串可显示实线。无效或非正数的
+`width` 会回退到 `1`。
+
+设置 `cleanView` 后，组件隐藏标题内容、图例、网格、坐标轴、轴标签、图框背景与边框、帧水印、
+零值参考线、标注和分页器，同时保留原图的标题区域、边距和波形尺寸。缩放、悬浮、十字线和
+tooltip 仍然可用，切换回普通模式后原有配置和标注不会丢失：
+
+```vue
+<WaveformChart :data="chartData" :clean-view="cleanViewEnabled" />
+```
+
 ### 网格、分页与交互模式

 `grid` 控制独立图框的行列数（范围 `1–10`）以及是否显示分页器。默认值为 `2` 行、
@@ -390,15 +422,13 @@ const hiddenSeriesIds = ref<string[]>([])
 <WaveformChart
  :data="chartData"
  :grid="{ rowCount: 2, columnCount: 2, showPagination: true }"
-  v-model:interaction-mode="interactionMode"
-  :show-annotation-toolbar="true"
+  :interaction-mode="interactionMode"
 />
 ```

-`interactionMode` 可选 `zoom` 或 `annotation`。默认不渲染标注工具栏，推荐通过右键
-打开标注编辑器；设置 `showAnnotationToolbar` 可显示兼容工具栏。`zoomable` 和
-`showTooltip` 可分别关闭缩放和 tooltip。空数据或过滤后没有有效点时，组件会保留图框
-布局并显示“暂无有效波形数据”。
+`interactionMode` 可选 `zoom` 或 `annotation`，默认使用缩放模式。右键绘图区可直接打开
+标注编辑器，无需切换交互模式。`zoomable` 和 `showTooltip` 可分别关闭缩放和 tooltip。
+空数据或过滤后没有有效点时，组件会保留图框布局并显示“暂无有效波形数据”。

 ## 大数据渲染

@@ -437,7 +467,13 @@ const hiddenSeriesIds = ref<string[]>([])
 ```vue
 <script setup lang="ts">
 import { ref } from 'vue'
-import { WaveformChart, type WaveformAnnotation, type WaveformInteractionMode } from './index'
+import {
+  parseWaveformAnnotations,
+  serializeWaveformAnnotations,
+  WaveformChart,
+  type WaveformAnnotation,
+  type WaveformInteractionMode,
+} from './index'

 const annotations = ref<WaveformAnnotation[]>([])
 const annotationsVisible = ref(true)
@@ -448,16 +484,30 @@ const interactionMode = ref<WaveformInteractionMode>('zoom')
  <WaveformChart
    :data="chartData"
    v-model:annotations="annotations"
-    v-model:annotations-visible="annotationsVisible"
-    v-model:interaction-mode="interactionMode"
+    :annotations-visible="annotationsVisible"
+    :interaction-mode="interactionMode"
  />
 </template>
 ```

-默认不显示标注工具栏；右键绘图区任意位置即可弹出居中编辑器，标注会吸附到当前 X 位置最近的真实采样点，右键已有标注可以编辑或删除。需要兼容旧工具栏时可显式设置 `showAnnotationToolbar`。
+标注默认显示。右键绘图区任意位置即可弹出居中编辑器，标注会吸附到当前 X 位置最近的真实采样点，右键已有标注可以编辑或删除。
 标注框可以直接拖动进行手动避让，拖动只改变标签框位置，不会改变 `x/y` 数据锚点；偏移会以 `labelOffsetX/labelOffsetY` 像素字段保存在标注中。标注文本最多 40 个字符，边框色、文字色和背景色均支持取色与透明度调整。组件只负责内存中的受控数据，
 业务层负责会话或后端持久化。

+标注可以序列化为带版本号的 JSON，并在解析成功后整体替换当前数据：
+
+```ts
+const exportedJson = serializeWaveformAnnotations(annotations.value)
+
+async function importAnnotationFile(file: File) {
+  annotations.value = parseWaveformAnnotations(await file.text())
+}
+```
+
+导出格式为 `{ version: 1, annotations: [...] }`。解析会验证全部标注；文件格式、版本或任意
+字段无效时会抛出 `TypeError`，不会返回部分结果。导入包含未知 `seriesId` 的标注是允许的，
+对应曲线加载后会恢复显示。文件选择、错误提示和下载由业务层实现。
+
 X、Y 轴会根据各自完整显示域选择格式：最大绝对值在 `[0.01, 100)` 时显示两位普通小数；大于等于 `100`，或大于 `0` 且小于 `0.01` 时，刻度显示两位缩放值，并在轴末端单独显示共享倍率 `E±NN`。X 轴先按 `timeUnit` 转换为秒或毫秒再判断范围，多 Y 轴则分别计算倍率。tooltip 使用最多 4 位小数的本地化普通数字；标注编辑器的 X 坐标跟随 `timeUnit` 并固定 3 位小数，Y 坐标显示完整普通十进制。所有格式化都只发生在展示层，内部坐标值保持原始精度。
 标注框默认布局在采样点正上方，只做绘图区边界裁剪；文本框通过连接箭头指向标注位置，多个标注重叠时可通过拖动手动避让。

@@ -475,8 +525,8 @@ X、Y 轴会根据各自完整显示域选择格式：最大绝对值在 `[0.01,
 | `series-visibility-change`                                      | 图例切换曲线显隐时触发                                         |
 | `annotation-create` / `annotation-update` / `annotation-delete` | 标注新增、更新或删除                                           |

-`annotations`、`annotations-visible`、`interaction-mode` 和 `hidden-series-ids` 均支持
-`v-model`；业务层应负责将标注和显隐状态持久化。
+`annotations` 和 `hidden-series-ids` 支持 `v-model`；`annotations-visible` 与
+`interaction-mode` 是受控输入属性。业务层应负责将标注和显隐状态持久化。

 ## 项目结构

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "waveform-analysis",
-  "version": "0.1.13",
+  "version": "0.1.14",
  "main": "./dist/index.cjs",
  "module": "./dist/index.js",
  "types": "./dist/types/index.d.ts",
@@ -35,7 +35,6 @@
    "test:coverage": "vitest run --coverage"
  },
  "peerDependencies": {
-    "ant-design-vue": ">=3.2.20 <4",
    "d3": ">=7.9.0 <8",
    "vue": ">=3.2.33 <4",
    "vue3-colorpicker": ">=2.3.0 <3"
@@ -47,7 +46,6 @@
    "@vitejs/plugin-vue": "6.0.8",
    "@vitest/coverage-v8": "4.1.10",
    "@vue/test-utils": "2.4.11",
-    "ant-design-vue": "4.2.6",
    "d3": "7.9.0",
    "eslint": "10.7.0",
    "eslint-config-prettier": "10.1.8",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,9 +26,6 @@ importers:
      '@vue/test-utils':
        specifier: 2.4.11
        version: 2.4.11(@vue/compiler-dom@3.5.40)(@vue/server-renderer@3.5.40)(vue@3.5.40(typescript@6.0.3))
-      ant-design-vue:
-        specifier: 4.2.6
-        version: 4.2.6(vue@3.5.40(typescript@6.0.3))
      d3:
        specifier: 7.9.0
        version: 7.9.0
@@ -77,17 +74,6 @@ packages:
  '@aesoper/normal-utils@0.1.5':
    resolution: {integrity: sha512-LFF/6y6h5mfwhnJaWqqxuC8zzDaHCG62kMRkd8xhDtq62TQj9dM17A9DhE87W7DhiARJsHLgcina/9P4eNCN1w==}

-  '@ant-design/colors@6.0.0':
-    resolution: {integrity: sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==}
-
-  '@ant-design/icons-svg@4.5.0':
-    resolution: {integrity: sha512-1BTUFyKPTBZ53MuTP8s0k5SFEXL7o3VHEOwLgzaoWKwnBeqIcqUtVshc4SKzhI6uACfqhJqBwBUE9FsWR3uULA==}
-
-  '@ant-design/icons-vue@7.0.1':
-    resolution: {integrity: sha512-eCqY2unfZK6Fe02AwFlDHLfoyEFreP6rBwAZMIJ1LugmfMiVgwWDYlp1YsRugaPtICYOabV1iWxXdP12u9U43Q==}
-    peerDependencies:
-      vue: '>=3.0.3'
-
  '@asamuzakjp/css-color@5.1.11':
    resolution: {integrity: sha512-KVw6qIiCTUQhByfTd78h2yD1/00waTmm9uy/R7Ck/ctUyAPj+AEDLkQIdJW0T8+qGgj3j5bpNKK7Q3G+LedJWg==}
    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
@@ -116,10 +102,6 @@ packages:
    engines: {node: '>=6.0.0'}
    hasBin: true

-  '@babel/runtime@7.29.7':
-    resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
-    engines: {node: '>=6.9.0'}
-
  '@babel/types@7.29.7':
    resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
    engines: {node: '>=6.9.0'}
@@ -168,10 +150,6 @@ packages:
    resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==}
    engines: {node: '>=20.19.0'}

-  '@ctrl/tinycolor@3.6.1':
-    resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==}
-    engines: {node: '>=10'}
-
  '@emnapi/core@1.11.1':
    resolution: {integrity: sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==}

@@ -181,12 +159,6 @@ packages:
  '@emnapi/wasi-threads@1.2.2':
    resolution: {integrity: sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==}

-  '@emotion/hash@0.9.2':
-    resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==}
-
-  '@emotion/unitless@0.8.1':
-    resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
-
  '@eslint-community/eslint-utils@4.9.1':
    resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -386,9 +358,6 @@ packages:
  '@rolldown/pluginutils@1.0.1':
    resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}

-  '@simonwep/pickr@1.8.2':
-    resolution: {integrity: sha512-/l5w8BIkrpP6n1xsetx9MWPWlU6OblN5YgZZphxan0Tq4BByTCETL6lyIeY8lagalS2Nbt4F2W034KHLIiunKA==}
-
  '@standard-schema/spec@1.1.0':
    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}

@@ -710,15 +679,6 @@ packages:
    resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
    engines: {node: '>=12'}

-  ant-design-vue@4.2.6:
-    resolution: {integrity: sha512-t7eX13Yj3i9+i5g9lqFyYneoIb3OzTvQjq9Tts1i+eiOd3Eva/6GagxBSXM1fOCjqemIu0FYVE1ByZ/38epR3Q==}
-    engines: {node: '>=12.22.0'}
-    peerDependencies:
-      vue: '>=3.2.0'
-
-  array-tree-filter@2.1.0:
-    resolution: {integrity: sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw==}
-
  assertion-error@2.0.1:
    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
    engines: {node: '>=12'}
@@ -726,9 +686,6 @@ packages:
  ast-v8-to-istanbul@1.0.5:
    resolution: {integrity: sha512-UPAgKJFSEGMWSDr3LX4tqnAb4f7KGT8O40Tyx8wbYmmZ/yn58lNCm8h3svs3eXgiGd5AXxz8NDOvXWvicq+rJA==}

-  async-validator@4.2.5:
-    resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
-
  balanced-match@1.0.2:
    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}

@@ -768,18 +725,12 @@ packages:
    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
    engines: {node: '>= 10'}

-  compute-scroll-into-view@1.0.20:
-    resolution: {integrity: sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==}
-
  config-chain@1.1.13:
    resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}

  convert-source-map@2.0.0:
    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}

-  core-js@3.49.0:
-    resolution: {integrity: sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==}
-
  cross-spawn@7.0.6:
    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
    engines: {node: '>= 8'}
@@ -927,9 +878,6 @@ packages:
    resolution: {integrity: sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==}
    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}

-  dayjs@1.11.21:
-    resolution: {integrity: sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==}
-
  debug@4.4.3:
    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
    engines: {node: '>=6.0'}
@@ -952,12 +900,6 @@ packages:
    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
    engines: {node: '>=8'}

-  dom-align@1.12.4:
-    resolution: {integrity: sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw==}
-
-  dom-scroll-into-view@2.0.1:
-    resolution: {integrity: sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w==}
-
  eastasianwidth@0.2.0:
    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}

@@ -1163,10 +1105,6 @@ packages:
    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
    engines: {node: '>=0.10.0'}

-  is-plain-object@3.0.1:
-    resolution: {integrity: sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==}
-    engines: {node: '>=0.10.0'}
-
  is-plain-object@5.0.0:
    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
    engines: {node: '>=0.10.0'}
@@ -1203,9 +1141,6 @@ packages:
  js-tokens@10.0.0:
    resolution: {integrity: sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==}

-  js-tokens@4.0.0:
-    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-
  jsdom@29.1.1:
    resolution: {integrity: sha512-ECi4Fi2f7BdJtUKTflYRTiaMxIB0O6zfR1fX0GXpUrf6flp8QIYn1UT20YQqdSOfk2dfkCwS8LAFoJDEppNK5Q==}
    engines: {node: ^20.19.0 || ^22.13.0 || >=24.0.0}
@@ -1312,13 +1247,6 @@ packages:
  lodash-es@4.18.1:
    resolution: {integrity: sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==}

-  lodash@4.18.1:
-    resolution: {integrity: sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==}
-
-  loose-envify@1.4.0:
-    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
-    hasBin: true
-
  lru-cache@10.4.3:
    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}

@@ -1362,9 +1290,6 @@ packages:
    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
    hasBin: true

-  nanopop@2.4.2:
-    resolution: {integrity: sha512-NzOgmMQ+elxxHeIha+OG/Pv3Oc3p4RU2aBhwWwAqDpXrdTbtRylbRLQztLy8dMMwfl6pclznBdfUhccEn9ZIzw==}
-
  natural-compare@1.4.0:
    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}

@@ -1451,9 +1376,6 @@ packages:
    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
    engines: {node: '>=0.10.0'}

-  resize-observer-polyfill@1.5.1:
-    resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
-
  robust-predicates@3.0.3:
    resolution: {integrity: sha512-NS3levdsRIUOmiJ8FZWCP7LG3QpJyrs/TE0Zpf1yvZu8cAJJ6QMW92H1c7kWpdIHo8RvmLxN/o2JXTKHp74lUA==}

@@ -1472,17 +1394,11 @@ packages:
    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
    engines: {node: '>=v12.22.7'}

-  scroll-into-view-if-needed@2.2.31:
-    resolution: {integrity: sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==}
-
  semver@7.8.5:
    resolution: {integrity: sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==}
    engines: {node: '>=10'}
    hasBin: true

-  shallow-equal@1.2.1:
-    resolution: {integrity: sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==}
-
  shebang-command@2.0.0:
    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
    engines: {node: '>=8'}
@@ -1524,9 +1440,6 @@ packages:
    resolution: {integrity: sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==}
    engines: {node: '>=12'}

-  stylis@4.4.0:
-    resolution: {integrity: sha512-5Z9ZpRzfuH6l/UAvCPAPUo3665Nk2wLaZU3x+TLHKVzIz33+sbJqbtrYoC3KD4/uVOr2Zp+L0LySezP9OHV9yA==}
-
  supports-color@7.2.0:
    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
    engines: {node: '>=8'}
@@ -1534,10 +1447,6 @@ packages:
  symbol-tree@3.2.4:
    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}

-  throttle-debounce@5.0.2:
-    resolution: {integrity: sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==}
-    engines: {node: '>=12.22'}
-
  tinybench@2.9.0:
    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}

@@ -1722,12 +1631,6 @@ packages:
    peerDependencies:
      typescript: '>=5.0.0'

-  vue-types@3.0.2:
-    resolution: {integrity: sha512-IwUC0Aq2zwaXqy74h4WCvFCUtoV0iSWr0snWnE9TnU18S66GAQyqQbRf2qfJtUuiFsBf6qp0MEwdonlwznlcrw==}
-    engines: {node: '>=10.15.0'}
-    peerDependencies:
-      vue: ^3.0.0
-
  vue-types@4.2.1:
    resolution: {integrity: sha512-DNQZmJuOvovLUIp0BENRkdnZHbI0V4e2mNvjAZOAXKD56YGvRchtUYOXA/XqTxdv7Ng5SJLZqRKRpAhm5NLaPQ==}
    engines: {node: '>=12.16.0'}
@@ -1758,9 +1661,6 @@ packages:
    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
    engines: {node: '>=18'}

-  warning@4.0.3:
-    resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
-
  webidl-conversions@8.0.1:
    resolution: {integrity: sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==}
    engines: {node: '>=20'}
@@ -1814,18 +1714,6 @@ snapshots:

  '@aesoper/normal-utils@0.1.5': {}

-  '@ant-design/colors@6.0.0':
-    dependencies:
-      '@ctrl/tinycolor': 3.6.1
-
-  '@ant-design/icons-svg@4.5.0': {}
-
-  '@ant-design/icons-vue@7.0.1(vue@3.5.40(typescript@6.0.3))':
-    dependencies:
-      '@ant-design/colors': 6.0.0
-      '@ant-design/icons-svg': 4.5.0
-      vue: 3.5.40(typescript@6.0.3)
-
  '@asamuzakjp/css-color@5.1.11':
    dependencies:
      '@asamuzakjp/generational-cache': 1.0.1
@@ -1854,8 +1742,6 @@ snapshots:
    dependencies:
      '@babel/types': 7.29.7

-  '@babel/runtime@7.29.7': {}
-
  '@babel/types@7.29.7':
    dependencies:
      '@babel/helper-string-parser': 7.29.7
@@ -1891,8 +1777,6 @@ snapshots:

  '@csstools/css-tokenizer@4.0.0': {}

-  '@ctrl/tinycolor@3.6.1': {}
-
  '@emnapi/core@1.11.1':
    dependencies:
      '@emnapi/wasi-threads': 1.2.2
@@ -1909,10 +1793,6 @@ snapshots:
      tslib: 2.8.1
    optional: true

-  '@emotion/hash@0.9.2': {}
-
-  '@emotion/unitless@0.8.1': {}
-
  '@eslint-community/eslint-utils@4.9.1(eslint@10.7.0)':
    dependencies:
      eslint: 10.7.0
@@ -2050,11 +1930,6 @@ snapshots:

  '@rolldown/pluginutils@1.0.1': {}

-  '@simonwep/pickr@1.8.2':
-    dependencies:
-      core-js: 3.49.0
-      nanopop: 2.4.2
-
  '@standard-schema/spec@1.1.0': {}

  '@tybys/wasm-util@0.10.3':
@@ -2483,34 +2358,6 @@ snapshots:

  ansi-styles@6.2.3: {}

-  ant-design-vue@4.2.6(vue@3.5.40(typescript@6.0.3)):
-    dependencies:
-      '@ant-design/colors': 6.0.0
-      '@ant-design/icons-vue': 7.0.1(vue@3.5.40(typescript@6.0.3))
-      '@babel/runtime': 7.29.7
-      '@ctrl/tinycolor': 3.6.1
-      '@emotion/hash': 0.9.2
-      '@emotion/unitless': 0.8.1
-      '@simonwep/pickr': 1.8.2
-      array-tree-filter: 2.1.0
-      async-validator: 4.2.5
-      csstype: 3.2.3
-      dayjs: 1.11.21
-      dom-align: 1.12.4
-      dom-scroll-into-view: 2.0.1
-      lodash: 4.18.1
-      lodash-es: 4.18.1
-      resize-observer-polyfill: 1.5.1
-      scroll-into-view-if-needed: 2.2.31
-      shallow-equal: 1.2.1
-      stylis: 4.4.0
-      throttle-debounce: 5.0.2
-      vue: 3.5.40(typescript@6.0.3)
-      vue-types: 3.0.2(vue@3.5.40(typescript@6.0.3))
-      warning: 4.0.3
-
-  array-tree-filter@2.1.0: {}
-
  assertion-error@2.0.1: {}

  ast-v8-to-istanbul@1.0.5:
@@ -2519,8 +2366,6 @@ snapshots:
      estree-walker: 3.0.3
      js-tokens: 10.0.0

-  async-validator@4.2.5: {}
-
  balanced-match@1.0.2: {}

  balanced-match@4.0.4: {}
@@ -2551,8 +2396,6 @@ snapshots:

  commander@7.2.0: {}

-  compute-scroll-into-view@1.0.20: {}
-
  config-chain@1.1.13:
    dependencies:
      ini: 1.3.8
@@ -2560,8 +2403,6 @@ snapshots:

  convert-source-map@2.0.0: {}

-  core-js@3.49.0: {}
-
  cross-spawn@7.0.6:
    dependencies:
      path-key: 3.1.1
@@ -2736,8 +2577,6 @@ snapshots:
    transitivePeerDependencies:
      - '@noble/hashes'

-  dayjs@1.11.21: {}
-
  debug@4.4.3:
    dependencies:
      ms: 2.1.3
@@ -2752,10 +2591,6 @@ snapshots:

  detect-libc@2.1.2: {}

-  dom-align@1.12.4: {}
-
-  dom-scroll-into-view@2.0.1: {}
-
  eastasianwidth@0.2.0: {}

  editorconfig@1.0.7:
@@ -2949,8 +2784,6 @@ snapshots:
    dependencies:
      is-extglob: 2.1.1

-  is-plain-object@3.0.1: {}
-
  is-plain-object@5.0.0: {}

  is-potential-custom-element-name@1.0.1: {}
@@ -2988,8 +2821,6 @@ snapshots:

  js-tokens@10.0.0: {}

-  js-tokens@4.0.0: {}
-
  jsdom@29.1.1:
    dependencies:
      '@asamuzakjp/css-color': 5.1.11
@@ -3086,12 +2917,6 @@ snapshots:

  lodash-es@4.18.1: {}

-  lodash@4.18.1: {}
-
-  loose-envify@1.4.0:
-    dependencies:
-      js-tokens: 4.0.0
-
  lru-cache@10.4.3: {}

  lru-cache@11.5.2: {}
@@ -3128,8 +2953,6 @@ snapshots:

  nanoid@3.3.16: {}

-  nanopop@2.4.2: {}
-
  natural-compare@1.4.0: {}

  nopt@7.2.1:
@@ -3203,8 +3026,6 @@ snapshots:

  require-from-string@2.0.2: {}

-  resize-observer-polyfill@1.5.1: {}
-
  robust-predicates@3.0.3: {}

  rolldown@1.1.5:
@@ -3236,14 +3057,8 @@ snapshots:
    dependencies:
      xmlchars: 2.2.0

-  scroll-into-view-if-needed@2.2.31:
-    dependencies:
-      compute-scroll-into-view: 1.0.20
-
  semver@7.8.5: {}

-  shallow-equal@1.2.1: {}
-
  shebang-command@2.0.0:
    dependencies:
      shebang-regex: 3.0.0
@@ -3280,16 +3095,12 @@ snapshots:
    dependencies:
      ansi-regex: 6.2.2

-  stylis@4.4.0: {}
-
  supports-color@7.2.0:
    dependencies:
      has-flag: 4.0.0

  symbol-tree@3.2.4: {}

-  throttle-debounce@5.0.2: {}
-
  tinybench@2.9.0: {}

  tinycolor2@1.6.0: {}
@@ -3417,11 +3228,6 @@ snapshots:
      '@vue/language-core': 3.3.7
      typescript: 6.0.3

-  vue-types@3.0.2(vue@3.5.40(typescript@6.0.3)):
-    dependencies:
-      is-plain-object: 3.0.1
-      vue: 3.5.40(typescript@6.0.3)
-
  vue-types@4.2.1(vue@3.5.40(typescript@6.0.3)):
    dependencies:
      is-plain-object: 5.0.0
@@ -3452,10 +3258,6 @@ snapshots:
    dependencies:
      xml-name-validator: 5.0.0

-  warning@4.0.3:
-    dependencies:
-      loose-envify: 1.4.0
-
  webidl-conversions@8.0.1: {}

  whatwg-mimetype@5.0.0: {}
--- a/src/App.test.ts
+++ b/src/App.test.ts
@@ -1,5 +1,4 @@
 import { flushPromises, mount } from '@vue/test-utils'
-import { InputNumber, Select } from 'ant-design-vue'
 import { describe, expect, it, vi } from 'vitest'
 import { ColorPicker } from 'vue3-colorpicker'

@@ -41,15 +40,21 @@ describe('App workspace layout', { timeout: 20_000 }, () => {
    expect(panel.find('[aria-label="波形展示方式"]').exists()).toBe(true)
    expect(panel.find('[aria-label="波形叠加方式"]').exists()).toBe(true)
    expect(panel.find('[aria-label="波形网格尺寸"]').exists()).toBe(true)
+    expect(panel.find('[aria-label="净图模式"]').exists()).toBe(true)
+    expect(panel.find('[aria-label="显示零值参考线"]').exists()).toBe(true)
+    const zeroLineControls = panel.get('.zero-line-controls')
+    expect(zeroLineControls.findAllComponents(ColorPicker)).toHaveLength(1)
+    expect(zeroLineControls.find('[aria-label="零值参考线线宽"]').exists()).toBe(true)
+    expect(zeroLineControls.find('[aria-label="零值参考线线型"]').exists()).toBe(true)
    expect(frameControls.findAllComponents(ColorPicker)).toHaveLength(2)
    expect(frameControls.text()).toContain('边框颜色')
    expect(frameControls.text()).toContain('背景颜色')
    expect(frameControls.find('[aria-label="图框线宽"]').exists()).toBe(true)
    expect(frameControls.find('[aria-label="图框线型"]').exists()).toBe(true)
    expect(frameControls.find('[aria-label="显示图框水印"]').exists()).toBe(true)
-    expect(frameControls.get('.frame-style-control--switch .ant-switch').classes()).toContain(
-      'ant-switch-small',
-    )
+    expect(
+      frameControls.get('.frame-style-control--switch .native-switch').attributes('role'),
+    ).toBe('switch')
    const titleControls = panel.get('.title-controls')
    expect(panel.find('[aria-label="显示标题"]').exists()).toBe(true)
    expect(titleControls.find('[aria-label="标题名称"]').exists()).toBe(true)
@@ -71,6 +76,23 @@ describe('App workspace layout', { timeout: 20_000 }, () => {
    wrapper.unmount()
  })

+  it('passes clean view and zero-line controls to the chart', async () => {
+    const wrapper = mount(App)
+    await flushPromises()
+    const chart = wrapper.getComponent(WaveformChart)
+
+    expect(chart.props('cleanView')).toBe(false)
+    expect(chart.props('zeroLine')).toMatchObject({ visible: false, color: '#98a2b3', width: 1 })
+
+    await wrapper.get('[aria-label="净图模式"]').setValue(true)
+    await wrapper.get('[aria-label="显示零值参考线"]').setValue(true)
+    await flushPromises()
+
+    expect(chart.props('cleanView')).toBe(true)
+    expect(chart.props('zeroLine')).toMatchObject({ visible: true, color: '#98a2b3', width: 1 })
+    wrapper.unmount()
+  })
+
  it('switches overlaid tracks between single-axis and multi-axis rendering', async () => {
    const wrapper = mount(App)
    await flushPromises()
@@ -214,7 +236,7 @@ describe('App workspace layout', { timeout: 20_000 }, () => {
    expect(renderedTitle().attributes('style')).toContain('font-style: normal')
    expect(renderedTitle().attributes('style')).toContain('text-decoration: none')

-    await wrapper.get('[aria-label="显示标题"]').trigger('click')
+    await wrapper.get('[aria-label="显示标题"]').setValue(false)
    await flushPromises()
    expect(wrapper.find('.waveform-chart__title-area').exists()).toBe(false)

@@ -227,17 +249,17 @@ describe('App workspace layout', { timeout: 20_000 }, () => {

    const frameControls = wrapper.get('.frame-style-controls')
    const colorPickers = frameControls.findAllComponents(ColorPicker)
-    const widthInput = frameControls.findAllComponents(InputNumber)[0]
-    const styleSelect = frameControls.findAllComponents(Select)[0]
+    const widthInput = frameControls.get('[aria-label="图框线宽"]')
+    const styleSelect = frameControls.get('[aria-label="图框线型"]')

    expect(colorPickers).toHaveLength(2)
-    expect(widthInput).toBeDefined()
-    expect(styleSelect).toBeDefined()
+    expect(widthInput.element.tagName).toBe('INPUT')
+    expect(styleSelect.element.tagName).toBe('SELECT')

    colorPickers[0].vm.$emit('update:pureColor', 'rgba(220, 38, 38, 0.8)')
    colorPickers[1].vm.$emit('update:pureColor', 'rgba(14, 165, 233, 0.25)')
-    widthInput?.vm.$emit('update:value', 3)
-    styleSelect?.vm.$emit('update:value', 'dashed')
+    await widthInput.setValue('3')
+    await styleSelect.setValue('dashed')
    await flushPromises()

    const frames = wrapper.findAll('.waveform-chart__plot-frame')
@@ -268,11 +290,11 @@ describe('App workspace layout', { timeout: 20_000 }, () => {

    expect(initialWatermarks.length).toBeGreaterThan(1)

-    await watermarkToggle.trigger('click')
+    await watermarkToggle.setValue(false)
    await flushPromises()
    expect(wrapper.findAll('.waveform-chart__watermark')).toHaveLength(0)

-    await watermarkToggle.trigger('click')
+    await watermarkToggle.setValue(true)
    await flushPromises()
    expect(
      wrapper.findAll('.waveform-chart__watermark').map((watermark) => watermark.text()),
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { Button, Input, InputNumber, Radio, Select, Switch } from 'ant-design-vue'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { ColorPicker } from 'vue3-colorpicker'
 import 'vue3-colorpicker/style.css'
@@ -17,6 +16,7 @@ import {
  type WaveformSeries,
  type WaveformTitleOptions,
  type WaveformZoomEndPayload,
+  type WaveformZeroLineOptions,
 } from './components'
 import chartWaveformsJson from './data/chartWaveforms.json'
 import demoWaveformsJson from './data/demoWaveforms.json'
@@ -53,6 +53,11 @@ const frameBackgroundColor = ref('rgba(255, 255, 255, 0)')
 const frameWatermarkVisible = ref(true)
 const annotations = ref<WaveformAnnotation[]>([])
 const annotationsVisible = ref(true)
+const cleanView = ref(false)
+const zeroLineVisible = ref(false)
+const zeroLineColor = ref('#98a2b3')
+const zeroLineWidth = ref(1)
+const zeroLineDash = ref('6 4')
 const interactionMode = ref<WaveformInteractionMode>('zoom')
 const legendPosition = ref<WaveformLegendPosition>('top-right')
 const legendOrientation = ref<WaveformLegendOrientation>('auto')
@@ -88,6 +93,11 @@ const frameBorderStyleOptions = [
  { label: '实线', value: 'solid' },
  { label: '虚线', value: 'dashed' },
 ]
+const zeroLineDashOptions = [
+  { label: '虚线', value: '6 4' },
+  { label: '点划线', value: '2 3' },
+  { label: '实线', value: '' },
+]
 const titleAlignOptions: Array<{
  label: string
  value: NonNullable<WaveformTitleOptions['align']>
@@ -109,6 +119,12 @@ const frameStyle = computed<WaveformFrameStyle>(() => ({
  borderStyle: frameBorderStyle.value,
  backgroundColor: frameBackgroundColor.value,
 }))
+const zeroLine = computed<WaveformZeroLineOptions>(() => ({
+  visible: zeroLineVisible.value,
+  color: zeroLineColor.value,
+  width: zeroLineWidth.value,
+  dash: zeroLineDash.value,
+}))

 const seriesStylePresets: Array<Pick<WaveformSeries, 'lineType' | 'pointType' | 'errorBar'>> = [
  { lineType: 'none', pointType: 'triangle', errorBar: { visible: true } },
@@ -296,6 +312,12 @@ function resetTitleTextStyle() {
  titleUnderline.value = false
 }

+function clampNumber(value: unknown, min: number, max: number, fallback: number) {
+  const number = typeof value === 'number' ? value : Number(value)
+  if (!Number.isFinite(number)) return fallback
+  return Math.min(max, Math.max(min, number))
+}
+
 function handleWindowKeydown(event: KeyboardEvent) {
  if (event.key === 'Escape') closeControls()
 }
@@ -306,15 +328,15 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleWindowKeydown)

 <template>
  <main class="workspace">
-    <Button
+    <button
+      type="button"
      class="mobile-control-toggle"
-      size="small"
      :aria-expanded="controlsOpen"
      aria-controls="waveform-control-panel"
      @click="controlsOpen = true"
    >
      控制面板
-    </Button>
+    </button>

    <button
      v-if="controlsOpen"
@@ -331,51 +353,148 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleWindowKeydown)
      aria-label="波形图控制"
    >
      <div class="control-panel__scroll">
-        <Button class="control-panel__close" type="text" size="small" @click="closeControls">
-          关闭
-        </Button>
+        <button class="control-panel__close" type="button" @click="closeControls">关闭</button>

        <section class="control-section">
          <h2>显示方式</h2>
-          <Radio.Group
-            v-model:value="displayMode"
-            class="display-mode-control"
-            button-style="solid"
-            size="small"
-            aria-label="波形展示方式"
-          >
-            <Radio.Button value="independent">单独坐标</Radio.Button>
-            <Radio.Button value="separated">多道分离</Radio.Button>
-            <Radio.Button value="compact">多道紧凑</Radio.Button>
-          </Radio.Group>
+          <div class="display-mode-control" role="radiogroup" aria-label="波形展示方式">
+            <label
+              ><input v-model="displayMode" type="radio" value="independent" /><span
+                >单独坐标</span
+              ></label
+            >
+            <label
+              ><input v-model="displayMode" type="radio" value="separated" /><span
+                >多道分离</span
+              ></label
+            >
+            <label
+              ><input v-model="displayMode" type="radio" value="compact" /><span
+                >多道紧凑</span
+              ></label
+            >
+          </div>
        </section>

        <section class="control-section">
          <h2>视图</h2>
-          <Button block aria-label="重置波形视图" @click="resetWaveformViewport">重置视图</Button>
+          <button
+            type="button"
+            class="control-action control-action--block"
+            aria-label="重置波形视图"
+            @click="resetWaveformViewport"
+          >
+            重置视图
+          </button>
+          <div class="auxiliary-style-controls" style="margin-top: 10px">
+            <label class="frame-style-control frame-style-control--switch">
+              <span>净图</span>
+              <input
+                v-model="cleanView"
+                class="native-switch"
+                type="checkbox"
+                role="switch"
+                aria-label="净图模式"
+                @click.stop
+              />
+            </label>
+          </div>
+        </section>
+
+        <section class="control-section">
+          <div class="control-section__header">
+            <h2>零值参考线</h2>
+            <input
+              v-model="zeroLineVisible"
+              class="native-switch"
+              type="checkbox"
+              role="switch"
+              aria-label="显示零值参考线"
+              @click.stop
+            />
+          </div>
+          <div class="auxiliary-style-controls zero-line-controls" style="margin-top: 10px">
+            <label class="frame-style-control">
+              <span>颜色</span>
+              <ColorPicker
+                v-model:pure-color="zeroLineColor"
+                aria-label="零值参考线颜色"
+                use-type="pure"
+                picker-type="chrome"
+                format="hex"
+                :disable-alpha="true"
+                :blur-close="true"
+              />
+            </label>
+            <label class="frame-style-control">
+              <span>线宽</span>
+              <input
+                v-model.number="zeroLineWidth"
+                class="native-input"
+                type="number"
+                :min="0.5"
+                :max="10"
+                :step="0.5"
+                aria-label="零值参考线线宽"
+                @blur="zeroLineWidth = clampNumber(zeroLineWidth, 0.5, 10, 1)"
+              />
+            </label>
+            <label class="frame-style-control">
+              <span>线型</span>
+              <select v-model="zeroLineDash" class="native-select" aria-label="零值参考线线型">
+                <option
+                  v-for="option in zeroLineDashOptions"
+                  :key="option.value"
+                  :value="option.value"
+                >
+                  {{ option.label }}
+                </option>
+              </select>
+            </label>
+          </div>
        </section>

        <section class="control-section">
          <h2>叠加方式</h2>
-          <Radio.Group
-            v-model:value="overlayMode"
-            class="display-mode-control"
-            button-style="solid"
-            size="small"
-            aria-label="波形叠加方式"
-          >
-            <Radio.Button value="single-axis">单值轴</Radio.Button>
-            <Radio.Button value="multi-axis">多值轴</Radio.Button>
-          </Radio.Group>
+          <div class="display-mode-control" role="radiogroup" aria-label="波形叠加方式">
+            <label
+              ><input v-model="overlayMode" type="radio" value="single-axis" /><span
+                >单值轴</span
+              ></label
+            >
+            <label
+              ><input v-model="overlayMode" type="radio" value="multi-axis" /><span
+                >多值轴</span
+              ></label
+            >
+          </div>
        </section>

        <section class="control-section">
          <h2>图框布局</h2>
          <div class="grid-size-control" aria-label="波形网格尺寸">
-            <InputNumber v-model:value="rowCount" :min="1" :max="10" size="small" />
+            <input
+              v-model.number="rowCount"
+              class="native-input"
+              type="number"
+              min="1"
+              max="10"
+              step="1"
+              aria-label="波形网格行数"
+              @blur="rowCount = clampNumber(rowCount, 1, 10, 2)"
+            />
            <span>行</span>
            <span class="control-separator">×</span>
-            <InputNumber v-model:value="columnCount" :min="1" :max="10" size="small" />
+            <input
+              v-model.number="columnCount"
+              class="native-input"
+              type="number"
+              min="1"
+              max="10"
+              step="1"
+              aria-label="波形网格列数"
+              @blur="columnCount = clampNumber(columnCount, 1, 10, 1)"
+            />
            <span>列</span>
          </div>
        </section>
@@ -409,30 +528,38 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleWindowKeydown)
            </label>
            <label class="frame-style-control">
              <span>线宽</span>
-              <InputNumber
-                v-model:value="frameBorderWidth"
+              <input
+                v-model.number="frameBorderWidth"
+                class="native-input"
+                type="number"
                :min="0"
                :max="10"
                :step="0.5"
-                size="small"
                aria-label="图框线宽"
+                @blur="frameBorderWidth = clampNumber(frameBorderWidth, 0, 10, 1)"
              />
            </label>
            <label class="frame-style-control">
              <span>线型</span>
-              <Select
-                v-model:value="frameBorderStyle"
-                :options="frameBorderStyleOptions"
-                size="small"
-                aria-label="图框线型"
-              />
+              <select v-model="frameBorderStyle" class="native-select" aria-label="图框线型">
+                <option
+                  v-for="option in frameBorderStyleOptions"
+                  :key="option.value"
+                  :value="option.value"
+                >
+                  {{ option.label }}
+                </option>
+              </select>
            </label>
            <label class="frame-style-control frame-style-control--switch">
              <span>水印</span>
-              <Switch
-                v-model:checked="frameWatermarkVisible"
-                size="small"
+              <input
+                v-model="frameWatermarkVisible"
+                class="native-switch"
+                type="checkbox"
+                role="switch"
                aria-label="显示图框水印"
+                @click.stop
              />
            </label>
          </div>
@@ -441,41 +568,56 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleWindowKeydown)
        <section class="control-section title-control-section">
          <div class="control-section__header">
            <h2>标题</h2>
-            <Switch v-model:checked="titleVisible" size="small" aria-label="显示标题" />
+            <input
+              v-model="titleVisible"
+              class="native-switch"
+              type="checkbox"
+              role="switch"
+              aria-label="显示标题"
+              @click.stop
+            />
          </div>

          <div class="title-controls">
            <label class="title-control title-control--wide">
              <span>标题名称</span>
-              <Input v-model:value="titleText" size="small" aria-label="标题名称" />
+              <input v-model="titleText" class="native-input" type="text" aria-label="标题名称" />
            </label>
            <label class="title-control title-control--wide">
              <span>对齐方式</span>
-              <Select
-                v-model:value="titleAlign"
-                :options="titleAlignOptions"
-                size="small"
-                aria-label="标题对齐方式"
-              />
+              <select v-model="titleAlign" class="native-select" aria-label="标题对齐方式">
+                <option
+                  v-for="option in titleAlignOptions"
+                  :key="option.value"
+                  :value="option.value"
+                >
+                  {{ option.label }}
+                </option>
+              </select>
            </label>
            <label class="title-control">
              <span>字体</span>
-              <Select
-                v-model:value="titleFontFamily"
-                :options="titleFontFamilyOptions"
-                size="small"
-                aria-label="标题字体"
-              />
+              <select v-model="titleFontFamily" class="native-select" aria-label="标题字体">
+                <option
+                  v-for="option in titleFontFamilyOptions"
+                  :key="option.value"
+                  :value="option.value"
+                >
+                  {{ option.label }}
+                </option>
+              </select>
            </label>
            <label class="title-control">
              <span>字号</span>
-              <InputNumber
-                v-model:value="titleFontSize"
+              <input
+                v-model.number="titleFontSize"
+                class="native-input"
+                type="number"
                :min="8"
                :max="72"
                :step="1"
-                size="small"
                aria-label="标题字号"
+                @blur="titleFontSize = clampNumber(titleFontSize, 8, 72, 14)"
              />
            </label>
            <div class="title-control">
@@ -523,14 +665,15 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleWindowKeydown)
            </div>
            <label class="title-control">
              <span>旋转</span>
-              <InputNumber
-                v-model:value="titleRotation"
+              <input
+                v-model.number="titleRotation"
+                class="native-input"
+                type="number"
                :min="-180"
                :max="180"
                :step="1"
-                addon-after="°"
-                size="small"
                aria-label="标题旋转角度"
+                @blur="titleRotation = clampNumber(titleRotation, -180, 180, 0)"
              />
            </label>
            <div class="title-control title-control--color">
@@ -552,21 +695,27 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleWindowKeydown)
          <h2>图例</h2>
          <label class="select-control">
            <span>位置</span>
-            <Select
-              v-model:value="legendPosition"
-              :options="legendPositionOptions"
-              size="small"
-              aria-label="图例位置"
-            />
+            <select v-model="legendPosition" class="native-select" aria-label="图例位置">
+              <option
+                v-for="option in legendPositionOptions"
+                :key="option.value"
+                :value="option.value"
+              >
+                {{ option.label }}
+              </option>
+            </select>
          </label>
          <label class="select-control">
            <span>排列</span>
-            <Select
-              v-model:value="legendOrientation"
-              :options="legendOrientationOptions"
-              size="small"
-              aria-label="图例排列"
-            />
+            <select v-model="legendOrientation" class="native-select" aria-label="图例排列">
+              <option
+                v-for="option in legendOrientationOptions"
+                :key="option.value"
+                :value="option.value"
+              >
+                {{ option.label }}
+              </option>
+            </select>
          </label>
          <label class="legend-color-control">
            <span>背景</span>
@@ -602,10 +751,12 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleWindowKeydown)
          interactive: true,
        }"
        :frame-style="frameStyle"
+        :clean-view="cleanView"
+        :zero-line="zeroLine"
        :frame-number="frameWatermarkVisible ? 1 : undefined"
        v-model:annotations="annotations"
-        v-model:annotations-visible="annotationsVisible"
-        v-model:interaction-mode="interactionMode"
+        :annotations-visible="annotationsVisible"
+        :interaction-mode="interactionMode"
        v-model:hidden-series-ids="hiddenSeriesIds"
        @zoom-end="handleZoomEnd"
        @zoom-reset="resetWaveformViewport"
--- a/src/components/WaveformChart.test.ts
+++ b/src/components/WaveformChart.test.ts
@@ -220,6 +220,200 @@ describe('WaveformChart', () => {
    second.unmount()
  })

+  it('renders a configurable zero line only when the Y domain contains zero', async () => {
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'points',
+        points: [
+          { x: 0, y: -2 },
+          { x: 1, y: 4 },
+        ],
+      },
+      { zeroLine: { visible: true, color: '#475467', width: 2, dash: '3 2' } },
+    )
+
+    const zeroLine = wrapper.get('.waveform-chart__zero-line')
+    expect(zeroLine.attributes()).toMatchObject({
+      stroke: '#475467',
+      'stroke-width': '2',
+      'stroke-dasharray': '3 2',
+      'data-y-axis-index': '0',
+    })
+    expect(zeroLine.attributes('y1')).toBe(zeroLine.attributes('y2'))
+
+    await wrapper.setProps({ zeroLine: { visible: false } })
+    expect(wrapper.find('.waveform-chart__zero-line').exists()).toBe(false)
+
+    const positive = await mountSizedChart(
+      {
+        kind: 'points',
+        points: [
+          { x: 0, y: 2 },
+          { x: 1, y: 4 },
+        ],
+      },
+      { zeroLine: { visible: true } },
+    )
+    expect(positive.find('.waveform-chart__zero-line').exists()).toBe(false)
+  })
+
+  it('renders zero lines from each visible Y axis in multi-axis mode', async () => {
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'series',
+        series: [
+          {
+            id: 'small',
+            trackId: 'overlay',
+            name: 'small',
+            data: {
+              kind: 'points',
+              points: [
+                { x: 0, y: -1 },
+                { x: 1, y: 3 },
+              ],
+            },
+          },
+          {
+            id: 'large',
+            trackId: 'overlay',
+            name: 'large',
+            data: {
+              kind: 'points',
+              points: [
+                { x: 0, y: -10 },
+                { x: 1, y: 2 },
+              ],
+            },
+          },
+        ],
+      },
+      { overlayMode: 'multi-axis', zeroLine: { visible: true } },
+    )
+
+    const zeroLines = wrapper.findAll('.waveform-chart__zero-line')
+    expect(zeroLines).toHaveLength(2)
+    expect(zeroLines.map((line) => line.attributes('data-y-axis-index'))).toEqual(['0', '1'])
+    expect(zeroLines[0].attributes('y1')).not.toBe(zeroLines[1].attributes('y1'))
+  })
+
+  it('preserves a titled multi-axis plot and hides auxiliary layers in clean view', async () => {
+    const data: WaveformData = {
+      kind: 'series',
+      series: [
+        {
+          id: 'first',
+          trackId: 'overlay',
+          name: 'first',
+          data: {
+            kind: 'points',
+            points: [
+              { x: 0, y: -1 },
+              { x: 1, y: 1 },
+            ],
+          },
+        },
+        {
+          id: 'second',
+          trackId: 'overlay',
+          name: 'second',
+          data: {
+            kind: 'points',
+            points: [
+              { x: 0, y: 1 },
+              { x: 1, y: 2 },
+            ],
+          },
+        },
+        {
+          id: 'third',
+          name: 'third',
+          data: {
+            kind: 'points',
+            points: [
+              { x: 0, y: 2 },
+              { x: 1, y: 3 },
+            ],
+          },
+        },
+      ],
+    }
+    const sharedProps = {
+      grid: { rowCount: 1, columnCount: 1, showPagination: true },
+      overlayMode: 'multi-axis' as const,
+      frameNumber: 1,
+      annotations: [{ id: 'note', seriesId: 'first', x: 0.5, y: 0, text: 'hidden note' }],
+      zeroLine: { visible: true },
+      title: { text: 'hidden title' },
+    }
+    const regularWrapper = await mountSizedChart(data, sharedProps)
+    const wrapper = await mountSizedChart(data, {
+      ...sharedProps,
+      cleanView: true,
+    })
+
+    const regularTrack = regularWrapper.get('.waveform-chart__track')
+    const cleanTrack = wrapper.get('.waveform-chart__track')
+    const geometryAttributes = [
+      'data-track-left',
+      'data-track-top',
+      'data-track-width',
+      'data-track-height',
+    ]
+
+    expect(wrapper.get('.waveform-chart').attributes('data-chart-left-margin')).toBe(
+      regularWrapper.get('.waveform-chart').attributes('data-chart-left-margin'),
+    )
+    expect(wrapper.get('.waveform-chart').attributes('data-title-area-height')).toBe(
+      regularWrapper.get('.waveform-chart').attributes('data-title-area-height'),
+    )
+    geometryAttributes.forEach((attribute) => {
+      expect(cleanTrack.attributes(attribute)).toBe(regularTrack.attributes(attribute))
+    })
+    expect(wrapper.get('.waveform-chart').classes()).toContain('waveform-chart--clean')
+    expect(getComputedStyle(wrapper.get('.waveform-chart').element).borderColor).toBe(
+      'rgba(0, 0, 0, 0)',
+    )
+    expect(wrapper.findAll('.waveform-chart__series')).toHaveLength(2)
+    expect(wrapper.find('.waveform-chart__overlay--independent').exists()).toBe(true)
+    expect(wrapper.get('.waveform-chart__title-area').attributes('aria-hidden')).toBe('true')
+    expect(wrapper.find('.waveform-chart__title-visual').exists()).toBe(false)
+    expect(wrapper.find('.waveform-chart__axis').exists()).toBe(false)
+    expect(wrapper.find('.waveform-chart__grid').exists()).toBe(false)
+    expect(wrapper.find('.waveform-chart__plot-frame').exists()).toBe(false)
+    expect(wrapper.find('.waveform-chart__plot-background').exists()).toBe(false)
+    expect(wrapper.find('.waveform-chart__watermark').exists()).toBe(false)
+    expect(wrapper.find('.waveform-chart__legend-layer').exists()).toBe(false)
+    expect(wrapper.find('.waveform-chart__label').exists()).toBe(false)
+    expect(wrapper.find('.waveform-chart__zero-line').exists()).toBe(false)
+    expect(wrapper.find('.waveform-annotation-layer').exists()).toBe(false)
+    expect(wrapper.find('.waveform-chart__pagination').exists()).toBe(false)
+  })
+
+  it('preserves every track geometry in a multi-column clean view', async () => {
+    const props = {
+      displayMode: 'independent' as const,
+      grid: { rowCount: 2, columnCount: 2 },
+    }
+    const regularWrapper = await mountSizedChart(gridSeries(4), props)
+    const cleanWrapper = await mountSizedChart(gridSeries(4), { ...props, cleanView: true })
+    const geometryAttributes = [
+      'data-track-left',
+      'data-track-top',
+      'data-track-width',
+      'data-track-height',
+    ]
+    const regularTracks = regularWrapper.findAll('.waveform-chart__track')
+    const cleanTracks = cleanWrapper.findAll('.waveform-chart__track')
+
+    expect(cleanTracks).toHaveLength(regularTracks.length)
+    cleanTracks.forEach((track, index) => {
+      geometryAttributes.forEach((attribute) => {
+        expect(track.attributes(attribute)).toBe(regularTracks[index].attributes(attribute))
+      })
+    })
+  })
+
  it('places start, middle, and end step transitions at the expected X positions', async () => {
    const lineTypes = ['step-start', 'step-middle', 'step-end', 'step-after'] as const
    const wrapper = await mountSizedChart({
@@ -610,11 +804,11 @@ describe('WaveformChart', () => {
    expect(
      wrapper.findAll('.waveform-chart__line').map((line) => line.attributes('data-series-id')),
    ).toEqual(['channel-0', 'channel-1'])
-    const previousButton = () => wrapper.get('.ant-pagination-prev button')
-    const nextButton = () => wrapper.get('.ant-pagination-next button')
+    const previousButton = () => wrapper.get('[aria-label="上一页"]')
+    const nextButton = () => wrapper.get('[aria-label="下一页"]')

-    expect(wrapper.get('.ant-pagination-item-1').classes()).toContain('ant-pagination-item-active')
-    expect(wrapper.get('.ant-pagination-prev').classes()).toContain('ant-pagination-disabled')
+    expect(wrapper.get('[aria-current="page"]').text()).toBe('1')
+    expect(previousButton().attributes('disabled')).toBeDefined()

    await nextButton().trigger('click')
    expect(
@@ -623,7 +817,7 @@ describe('WaveformChart', () => {
    expect(wrapper.emitted('page-change')?.at(-1)).toEqual([2, 3])

    await previousButton().trigger('click')
-    expect(wrapper.get('.ant-pagination-item-1').classes()).toContain('ant-pagination-item-active')
+    expect(wrapper.get('[aria-current="page"]').text()).toBe('1')
    expect(wrapper.emitted('page-change')?.at(-1)).toEqual([1, 3])

    await nextButton().trigger('click')
@@ -631,8 +825,8 @@ describe('WaveformChart', () => {
    expect(
      wrapper.findAll('.waveform-chart__line').map((line) => line.attributes('data-series-id')),
    ).toEqual(['channel-4'])
-    expect(wrapper.get('.ant-pagination-item-3').classes()).toContain('ant-pagination-item-active')
-    expect(wrapper.get('.ant-pagination-next').classes()).toContain('ant-pagination-disabled')
+    expect(wrapper.get('[aria-current="page"]').text()).toBe('3')
+    expect(nextButton().attributes('disabled')).toBeDefined()
  })

  it('overlays series with the same track ID without changing the next frame', async () => {
@@ -711,7 +905,7 @@ describe('WaveformChart', () => {
      '1',
      '2',
    ])
-    expect(wrapper.find('.ant-pagination').exists()).toBe(false)
+    expect(wrapper.find('.waveform-chart__pagination').exists()).toBe(false)

    const firstTrackOverlay = tracks[0].get('.waveform-chart__overlay')
    const overlayWidth = Number(firstTrackOverlay.attributes('width'))
@@ -1168,7 +1362,7 @@ describe('WaveformChart', () => {
    const initialMargin = wrapper.attributes('data-chart-left-margin')
    const initialLabelX = wrapper.get('.waveform-chart__track').attributes('data-y-axis-label-x')

-    await wrapper.get('.ant-pagination-next button').trigger('click')
+    await wrapper.get('[aria-label="下一页"]').trigger('click')

    expect(wrapper.attributes('data-chart-left-margin')).toBe(initialMargin)
    expect(wrapper.get('.waveform-chart__track').attributes('data-y-axis-label-x')).toBe(
@@ -1273,12 +1467,12 @@ describe('WaveformChart', () => {
    const wrapper = await mountSizedChart(gridSeries(5), {
      grid: { rowCount: 1, columnCount: 1 },
    })
-    await wrapper.get('.ant-pagination-next button').trigger('click')
-    expect(wrapper.get('.ant-pagination-item-2').classes()).toContain('ant-pagination-item-active')
+    await wrapper.get('[aria-label="下一页"]').trigger('click')
+    expect(wrapper.get('[aria-current="page"]').text()).toBe('2')

    await wrapper.setProps({ grid: { rowCount: 2, columnCount: 1 } })
    await flushPromises()
-    expect(wrapper.get('.ant-pagination-item-1').classes()).toContain('ant-pagination-item-active')
+    expect(wrapper.get('[aria-current="page"]').text()).toBe('1')
  })

  it('keeps the shared x domain stable while paging separated and compact grids', async () => {
@@ -1288,7 +1482,7 @@ describe('WaveformChart', () => {
        grid: { rowCount: 1, columnCount: 1 },
      })
      const initialEnd = wrapper.get('.waveform-chart__axis-endpoint--end').text()
-      await wrapper.get('.ant-pagination-next button').trigger('click')
+      await wrapper.get('[aria-label="下一页"]').trigger('click')
      expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).toBe(initialEnd)
    }
  })
@@ -1370,7 +1564,7 @@ describe('WaveformChart', () => {
      ],
    })
    expect(wrapper.find('[data-annotation-id="channel-2-note"]').exists()).toBe(false)
-    await wrapper.get('.ant-pagination-next button').trigger('click')
+    await wrapper.get('[aria-label="下一页"]').trigger('click')
    expect(wrapper.find('[data-annotation-id="channel-2-note"]').exists()).toBe(true)
  })
  it('renders a path for sample data and responds to width changes', async () => {
@@ -1383,7 +1577,6 @@ describe('WaveformChart', () => {

    expect(initialPath).toContain('L')
    expect(wrapper.get('.waveform-chart__svg').attributes('width')).toBe('800')
-    expect(wrapper.find('.waveform-annotation-toolbar').exists()).toBe(false)
    expect(wrapper.attributes('data-interaction-mode')).toBeUndefined()

    resizeObservers.at(-1)?.resize(500, 360)
@@ -1682,7 +1875,6 @@ describe('WaveformChart', () => {
    const wrapper = await mountSizedChart(gridSeries(2), {
      title: { text: '波形标题' },
      grid: { rowCount: 1, columnCount: 1, showPagination: true },
-      showAnnotationToolbar: true,
    })

    for (const selector of [
@@ -1690,7 +1882,6 @@ describe('WaveformChart', () => {
      '.waveform-chart__grid',
      '.waveform-chart__overlay',
      '.waveform-chart__pagination',
-      '.waveform-annotation-toolbar',
    ]) {
      const event = new MouseEvent('contextmenu', { bubbles: true, cancelable: true })
      const dispatched = wrapper.get(selector).element.dispatchEvent(event)
@@ -2216,8 +2407,12 @@ describe('WaveformChart', () => {
      )
      expect(wrapper.emitted('zoom-end')).toBeUndefined()
      flushAnimationFrames()
-      // Wait for zoom-end debounce (internal throttle + flush)
-      await vi.advanceTimersByTimeAsync(200)
+      // The wheel debounce is 200ms: it must not end early, then ends at the boundary.
+      await vi.advanceTimersByTimeAsync(199)
+      await flushPromises()
+      expect(wrapper.emitted('zoom-end')).toBeUndefined()
+
+      await vi.advanceTimersByTimeAsync(1)
      await flushPromises()

      const endEvents = wrapper.emitted('zoom-end') ?? []
@@ -3359,23 +3554,6 @@ describe('WaveformChart', () => {
    expect(overlay.classes()).not.toContain('is-zoomable')
  })

-  it('keeps the annotation toolbar available behind the compatibility prop', async () => {
-    const wrapper = await mountSizedChart(
-      {
-        kind: 'points',
-        points: [
-          { x: 0, y: 0 },
-          { x: 1, y: 5 },
-        ],
-      },
-      { showAnnotationToolbar: true },
-    )
-
-    expect(wrapper.find('.waveform-annotation-toolbar').exists()).toBe(true)
-    await wrapper.get('button[aria-label="添加标注"]').trigger('click')
-    expect(wrapper.attributes('data-interaction-mode')).toBe('annotation')
-  })
-
  it('creates a controlled annotation from externally selected annotation mode', async () => {
    const wrapper = await mountSizedChart(
      {
@@ -3728,7 +3906,6 @@ describe('WaveformChart', () => {
      },
      {
        interactionMode: 'annotation',
-        showAnnotationToolbar: true,
        annotations: [
          { id: 'valid', seriesId: 'series-0', x: 1, y: 5, text: '显示' },
          { id: 'unknown', seriesId: 'missing', x: 1, y: 5, text: '不显示' },
@@ -3738,10 +3915,8 @@ describe('WaveformChart', () => {

    expect(wrapper.attributes('data-interaction-mode')).toBe('annotation')
    expect(wrapper.findAll('.waveform-annotation')).toHaveLength(1)
+    expect(wrapper.find('.waveform-annotation-toolbar').exists()).toBe(false)
    expect(wrapper.get('.waveform-chart__overlay').classes()).toContain('is-annotating')
-    await wrapper.get('button[aria-label="隐藏标注"]').trigger('click')
-    expect(wrapper.emitted('update:annotations-visible')?.at(-1)).toEqual([false])
-
    await wrapper.setProps({ annotationsVisible: false })
    expect(wrapper.find('.waveform-annotation').exists()).toBe(false)
  })
--- a/src/components/WaveformChart.vue
+++ b/src/components/WaveformChart.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { Pagination } from 'ant-design-vue'
 import {
  bisector,
  pointer,
@@ -38,6 +37,7 @@ import {
  type WaveformPoint,
  type WaveformRenderingOptions,
  type WaveformTitleOptions,
+  type WaveformZeroLineOptions,
  type WaveformZoomEndPayload,
 } from './data/types'
 import {
@@ -50,7 +50,6 @@ import {
  type AnnotationEditorAnchor,
  WaveformAnnotationContextMenu,
  WaveformAnnotationLayer,
-  WaveformAnnotationToolbar,
  type AnnotationHit,
  type AnnotationSeriesCandidate,
  type AnnotationSeriesInfo,
@@ -66,7 +65,6 @@ import {
 import {
  getGridGap,
  getPageCount,
-  getPageSize,
  normalizeGridOptions,
  paginateSeries,
  resolveGridCellGeometry,
@@ -78,6 +76,7 @@ import { buildTrackLayouts, measureTrackYAxisClearance, Y_AXIS_EXPONENT_GAP } fr
 import { calculateRotatedTitleLayout, TITLE_AREA_HORIZONTAL_PADDING } from './core/title'
 import { usePreparedWaveformSeries } from './core/useWaveformData'
 import WaveformAnnotationEditor from './annotation/WaveformAnnotationEditor.vue'
+import WaveformPagination from './WaveformPagination.vue'
 import { useWaveformInstanceId } from '../utils/waveformId'

 const props = withDefaults(
@@ -102,13 +101,14 @@ const props = withDefaults(
    annotations?: WaveformAnnotation[]
    annotationsVisible?: boolean
    interactionMode?: WaveformInteractionMode
-    showAnnotationToolbar?: boolean
    grid?: WaveformGridOptions
    rendering?: WaveformRenderingOptions
    title?: WaveformTitleOptions
    legend?: WaveformLegendOptions
    hiddenSeriesIds?: string[]
    defaultHiddenSeriesIds?: string[]
+    cleanView?: boolean
+    zeroLine?: WaveformZeroLineOptions
  }>(),
  {
    displayMode: 'independent',
@@ -123,11 +123,12 @@ const props = withDefaults(
    annotations: () => [],
    annotationsVisible: true,
    interactionMode: undefined,
-    showAnnotationToolbar: false,
    grid: () => ({ rowCount: 2, columnCount: 1, showPagination: true }),
    rendering: () => ({}),
    legend: () => ({ position: 'top-right', orientation: 'auto' }),
    defaultHiddenSeriesIds: () => [],
+    cleanView: false,
+    zeroLine: () => ({ visible: false }),
  },
 )

@@ -137,8 +138,6 @@ const emit = defineEmits<{
  'zoom-end': [payload: WaveformZoomEndPayload]
  'zoom-reset': []
  'update:annotations': [annotations: WaveformAnnotation[]]
-  'update:annotations-visible': [visible: boolean]
-  'update:interaction-mode': [mode: WaveformInteractionMode]
  'update:hidden-series-ids': [ids: string[]]
  'series-visibility-change': [
    payload: {
@@ -175,7 +174,6 @@ const currentPage = ref(1)
 const resizeObserver = shallowRef<ResizeObserver>()
 const zoomBehaviors = new Map<number | 'shared', ZoomBehavior<SVGRectElement, unknown>>()
 const clipPathId = useWaveformInstanceId('waveform-clip')
-const internalInteractionMode = ref<WaveformInteractionMode | undefined>(undefined)
 const internalHiddenSeriesIds = ref(new Set(props.defaultHiddenSeriesIds))
 const annotationInteraction = useWaveformAnnotationInteraction()
 const editorSeriesOptions = ref<AnnotationSeriesCandidate[]>([])
@@ -191,6 +189,8 @@ const lastIndependentZoomGestures = new Map<number, ZoomGestureKind>()
 const lastZoomedTrackIndexes = new Set<number>()
 const zoomThrottle = useAnimationFrameThrottle()
 const hoverThrottle = useAnimationFrameThrottle()
+const wheelZoomDebounceMs = 200
+let wheelZoomEndTimer: ReturnType<typeof setTimeout> | undefined
 const preparedSeries = usePreparedWaveformSeries(() => props.data, handleDataReferenceChange)

 interface SelectionState {
@@ -255,6 +255,16 @@ const containerStyle = computed(() => ({
  height: fixedHeight.value === undefined ? '100%' : `${fixedHeight.value}px`,
 }))
 const legendPosition = computed<WaveformLegendPosition>(() => props.legend?.position ?? 'top-right')
+const isCleanView = computed(() => props.cleanView === true)
+const resolvedZeroLine = computed(() => {
+  const width = props.zeroLine?.width
+  return {
+    visible: props.zeroLine?.visible === true,
+    color: props.zeroLine?.color || '#98a2b3',
+    width: typeof width === 'number' && Number.isFinite(width) && width > 0 ? width : 1,
+    dash: props.zeroLine?.dash ?? '6 4',
+  }
+})
 const legendBackgroundColor = computed(
  () => props.legend?.backgroundColor || 'rgba(255, 255, 255, 0.7)',
 )
@@ -273,10 +283,11 @@ const legendOrientation = computed<Exclude<WaveformLegendOrientation, 'auto'>>((
    : 'vertical'
 })
 const resolvedTitleText = computed(() => props.title?.text.trim() ?? '')
-const titleVisible = computed(
+const titleAreaReserved = computed(
  () =>
    Boolean(props.title) && props.title?.visible !== false && resolvedTitleText.value.length > 0,
 )
+const titleVisible = computed(() => titleAreaReserved.value && !isCleanView.value)
 const titleFontSize = computed(() => {
  const fontSize = props.title?.textStyle?.fontSize
  return Number.isFinite(fontSize) && (fontSize ?? 0) > 0 ? (fontSize as number) : 14
@@ -325,7 +336,8 @@ const titleLayout = computed(() =>
    rotation: titleRotation.value,
  }),
 )
-const titleAreaHeight = computed(() => (titleVisible.value ? titleLayout.value.areaHeight : 0))
+const titleAreaHeight = computed(() => (titleAreaReserved.value ? titleLayout.value.areaHeight : 0))
+const chartTopMargin = computed(() => margin.top)
 const drawingHeight = computed(() => Math.max(0, chartHeight.value - titleAreaHeight.value))
 const innerHeight = computed(() => Math.max(0, drawingHeight.value - margin.top - margin.bottom))
 const titleAreaStyle = computed<CSSProperties>(() => ({
@@ -502,7 +514,7 @@ const hasWaveformData = computed(() => chartSeries.value.length > 0)
 const hoveredPoint = computed(() => hoveredSeriesPoints.value[0]?.point ?? null)
 const hasChartArea = computed(() => innerWidth.value > 0 && innerHeight.value > 0)
 const resolvedXLabel = computed(() => props.xLabel ?? `时间（${props.timeUnit}）`)
-const activeInteractionMode = computed(() => props.interactionMode ?? internalInteractionMode.value)
+const activeInteractionMode = computed(() => props.interactionMode)
 // 当 interactionMode 未定义或为 'zoom' 时启用缩放
 const isZoomMode = computed(
  () => activeInteractionMode.value === 'zoom' || activeInteractionMode.value === undefined,
@@ -593,7 +605,7 @@ const trackLayouts = computed<TrackLayout[]>(() =>
        : sharedYDomains.value,
    timeUnit: props.timeUnit,
    rendering: renderingOptions.value,
-    hideSecondaryLabels: yAxisLayout.value.hideSecondaryLabels,
+    hideSecondaryLabels: isCleanView.value || yAxisLayout.value.hideSecondaryLabels,
    yAxisLabelX: yAxisMetrics.value.labelCenterX,
    showCompactEmptyTracks: props.displayMode === 'compact' && hasWaveformData.value,
  }),
@@ -659,6 +671,7 @@ function handleSharedZoom(event: D3ZoomEvent<SVGRectElement, unknown>) {
  pendingSharedZoomTransform = event.transform
  pendingSharedZoomGesture = 'wheel'
  scheduleZoomCommit()
+  scheduleWheelZoomEnd()
 }

 function handleIndependentZoom(event: D3ZoomEvent<SVGRectElement, unknown>, trackIndex: number) {
@@ -667,6 +680,7 @@ function handleIndependentZoom(event: D3ZoomEvent<SVGRectElement, unknown>, trac
  pendingIndependentZoomTransforms.set(trackIndex, event.transform)
  pendingIndependentZoomGestures.set(trackIndex, 'wheel')
  scheduleZoomCommit()
+  scheduleWheelZoomEnd()
 }

 function commitPendingZoom() {
@@ -714,9 +728,20 @@ function scheduleZoomCommit() {
 function flushPendingZoom() {
  zoomThrottle.flush()
  commitPendingZoom()
+  if (lastSharedZoomGesture === 'wheel' || lastIndependentZoomGestures.size) return
  emitZoomEnd()
 }

+function scheduleWheelZoomEnd() {
+  if (wheelZoomEndTimer !== undefined) clearTimeout(wheelZoomEndTimer)
+  wheelZoomEndTimer = setTimeout(() => {
+    wheelZoomEndTimer = undefined
+    zoomThrottle.flush()
+    commitPendingZoom()
+    emitZoomEnd()
+  }, wheelZoomDebounceMs)
+}
+
 function emitZoomEnd() {
  if (props.displayMode === 'independent') {
    lastZoomedTrackIndexes.forEach((trackIndex) => {
@@ -773,6 +798,10 @@ function cancelPendingZoom() {
  lastZoomedTrackIndexes.clear()
  lastIndependentZoomGestures.clear()
  zoomThrottle.cancel()
+  if (wheelZoomEndTimer !== undefined) {
+    clearTimeout(wheelZoomEndTimer)
+    wheelZoomEndTimer = undefined
+  }
 }

 function clearZoomBindings() {
@@ -966,22 +995,6 @@ function makeAnnotationId(): string {
  return `annotation-${Date.now()}-${generatedAnnotationId}`
 }

-function setInteractionMode(mode: WaveformInteractionMode) {
-  if (props.interactionMode === undefined) internalInteractionMode.value = mode
-  annotationInteraction.closeContextMenu()
-  editorSeriesOptions.value = []
-  emit('update:interaction-mode', mode)
-}
-
-function setAnnotationsVisible(visible: boolean) {
-  annotationInteraction.closeContextMenu()
-  if (!visible) {
-    annotationInteraction.closeEditor()
-    editorSeriesOptions.value = []
-  }
-  emit('update:annotations-visible', visible)
-}
-
 function toggleSeriesVisibility(seriesId: string) {
  if (!chartSeries.value.some((series) => series.id === seriesId)) return
  const nextHiddenSeriesIds = new Set(hiddenSeriesIdSet.value)
@@ -1004,7 +1017,7 @@ function resolvePointerEditorAnchor(
  const track = trackIndex === undefined ? undefined : trackLayouts.value[trackIndex]
  return {
    x: resolvedChartLeftMargin.value + (track ? track.left + pointerX : pointerX),
-    y: titleAreaHeight.value + margin.top + (track ? track.top + pointerY : pointerY),
+    y: titleAreaHeight.value + chartTopMargin.value + (track ? track.top + pointerY : pointerY),
  }
 }

@@ -1018,7 +1031,7 @@ function resolveAnnotationEditorAnchor(annotation: WaveformAnnotation): Annotati
      : chartWidth.value / 2,
    y: track
      ? titleAreaHeight.value +
-        margin.top +
+        chartTopMargin.value +
        track.top +
        resolveSeriesYScale(track, annotation.seriesId)(annotation.y)
      : chartHeight.value / 2,
@@ -1293,7 +1306,7 @@ function handleIndependentPointerMove(event: PointerEvent, trackIndex: number) {
    })
    commitHover(nextPoints, trackIndex, {
      x: resolvedChartLeftMargin.value + track.left + pointerX,
-      y: titleAreaHeight.value + margin.top + track.top + pointerY,
+      y: titleAreaHeight.value + chartTopMargin.value + track.top + pointerY,
    })
  })
 }
@@ -1324,7 +1337,7 @@ function handleSharedPointerMove(event: PointerEvent) {
    )
    commitHover(nextPoints, null, {
      x: resolvedChartLeftMargin.value + pointerX,
-      y: titleAreaHeight.value + margin.top + pointerY,
+      y: titleAreaHeight.value + chartTopMargin.value + pointerY,
    })
  })
 }
@@ -1735,7 +1748,7 @@ watch(
 )

 function measureTitle() {
-  if (!titleVisible.value || !titleMeasureElement.value) {
+  if (!titleAreaReserved.value || !titleMeasureElement.value) {
    measuredTitleWidth.value = 0
    measuredTitleHeight.value = 0
    return
@@ -1746,7 +1759,7 @@ function measureTitle() {
 }

 watch(
-  [resolvedTitleText, titleVisible, titleMeasureStyle],
+  [resolvedTitleText, titleAreaReserved, titleMeasureStyle],
  async () => {
    measuredTitleWidth.value = 0
    measuredTitleHeight.value = 0
@@ -1785,7 +1798,10 @@ onBeforeUnmount(() => {
    :class="[
      `waveform-chart--${displayMode}`,
      `waveform-chart--interaction-${activeInteractionMode}`,
-      { 'waveform-chart--panning': selection?.mode === 'pan' },
+      {
+        'waveform-chart--clean': isCleanView,
+        'waveform-chart--panning': selection?.mode === 'pan',
+      },
    ]"
    :style="containerStyle"
    :data-display-mode="displayMode"
@@ -1796,11 +1812,12 @@ onBeforeUnmount(() => {
    @contextmenu.capture="handleNativeContextMenu"
  >
    <div
-      v-if="titleVisible"
+      v-if="titleAreaReserved"
      class="waveform-chart__title-area"
      :style="titleAreaStyle"
-      role="heading"
-      aria-level="2"
+      :role="titleVisible ? 'heading' : undefined"
+      :aria-level="titleVisible ? 2 : undefined"
+      :aria-hidden="isCleanView || undefined"
    >
      <span
        ref="titleMeasureElement"
@@ -1810,7 +1827,7 @@ onBeforeUnmount(() => {
      >
        {{ resolvedTitleText }}
      </span>
-      <span class="waveform-chart__title-visual" :style="titleVisualStyle">
+      <span v-if="titleVisible" class="waveform-chart__title-visual" :style="titleVisualStyle">
        <span
          class="waveform-chart__title-text"
          :style="titleTextStyle"
@@ -1842,8 +1859,12 @@ onBeforeUnmount(() => {
        </clipPath>
      </defs>

-      <g :transform="`translate(${resolvedChartLeftMargin}, ${margin.top})`">
-        <g v-if="displayMode !== 'compact'" class="waveform-chart__grid-slots" aria-hidden="true">
+      <g :transform="`translate(${resolvedChartLeftMargin}, ${chartTopMargin})`">
+        <g
+          v-if="displayMode !== 'compact' && !isCleanView"
+          class="waveform-chart__grid-slots"
+          aria-hidden="true"
+        >
          <g
            v-for="cell in gridCells"
            :key="`grid-slot-${cell.slotIndex}`"
@@ -1889,6 +1910,8 @@ onBeforeUnmount(() => {
          :interaction-mode="activeInteractionMode"
          :frame-number="resolveFrameNumber(track.index)"
          :frame-style="frameStyle"
+          :clean-view="isCleanView"
+          :zero-line="resolvedZeroLine"
          :time-unit="timeUnit"
          :y-label="yLabel"
          :hovered-point="hoveredSeriesPoints.find((p) => p.trackIndex === track.index)"
@@ -1912,6 +1935,7 @@ onBeforeUnmount(() => {
        />

        <WaveformAnnotationLayer
+          v-if="!isCleanView"
          :annotations="renderedAnnotations"
          :visible="annotationsVisible"
          @contextmenu="handleExistingAnnotationContextMenu"
@@ -1920,7 +1944,7 @@ onBeforeUnmount(() => {
          @drag-end="endAnnotationDrag"
        />

-        <g class="waveform-chart__legend-layer">
+        <g v-if="!isCleanView" class="waveform-chart__legend-layer">
          <g
            v-for="track in trackLayouts"
            :key="`legend-${track.index}-${track.series.name}`"
@@ -1944,7 +1968,7 @@ onBeforeUnmount(() => {
        </g>

        <text
-          v-if="resolvedXLabel"
+          v-if="resolvedXLabel && !isCleanView"
          class="waveform-chart__label"
          :x="innerWidth / 2"
          :y="xAxisTitleY"
@@ -1965,28 +1989,16 @@ onBeforeUnmount(() => {
      </text>
    </svg>

-    <Pagination
-      v-if="gridOptions.showPagination && pageCount > 1"
+    <WaveformPagination
+      v-if="gridOptions.showPagination && pageCount > 1 && !isCleanView"
      class="waveform-chart__pagination"
-      aria-label="波形分页"
      :current="currentPage"
-      :page-size="getPageSize(gridOptions)"
-      :total="chartTracks.length"
-      :show-size-changer="false"
-      :show-quick-jumper="false"
+      :page-count="pageCount"
      @change="goToPage"
    />

-    <WaveformAnnotationToolbar
-      v-if="showAnnotationToolbar"
-      :interaction-mode="activeInteractionMode"
-      :annotations-visible="annotationsVisible"
-      @update:interaction-mode="setInteractionMode"
-      @update:annotations-visible="setAnnotationsVisible"
-    />
-
    <WaveformAnnotationEditor
-      v-if="annotationInteraction.editorDraft.value"
+      v-if="annotationInteraction.editorDraft.value && !isCleanView"
      :annotation="annotationInteraction.editorDraft.value.annotation"
      :mode="annotationInteraction.editorDraft.value.mode"
      :series="editorSeries"
@@ -1998,6 +2010,7 @@ onBeforeUnmount(() => {
    />

    <WaveformAnnotationContextMenu
+      v-if="!isCleanView"
      :visible="annotationInteraction.contextMenu.value !== null"
      :x="annotationInteraction.contextMenu.value?.x || 0"
      :y="annotationInteraction.contextMenu.value?.y || 0"
@@ -2033,6 +2046,10 @@ onBeforeUnmount(() => {
  border-radius: 6px;
 }

+.waveform-chart--clean {
+  border-color: transparent;
+}
+
 .waveform-chart__pagination {
  position: absolute;
  right: 10px;
@@ -2075,17 +2092,6 @@ onBeforeUnmount(() => {
  transform-origin: center;
 }

-.waveform-chart__pagination :deep(.ant-pagination-item),
-.waveform-chart__pagination :deep(.ant-pagination-prev .ant-pagination-item-link),
-.waveform-chart__pagination :deep(.ant-pagination-next .ant-pagination-item-link) {
-  background: #fff;
-  border-color: #d9d9d9;
-}
-
-.waveform-chart__pagination :deep(.ant-pagination-item-active) {
-  border-color: #1677ff;
-}
-
 .waveform-chart__grid-slot-placeholder {
  fill: #fafbfc;
  stroke: #e4e7ec;
--- a/src/components/WaveformPagination.test.ts
+++ b/src/components/WaveformPagination.test.ts
@@ -0,0 +1,42 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import WaveformPagination from './WaveformPagination.vue'
+
+describe('WaveformPagination', () => {
+  it('renders all pages and disables the first-page previous button', () => {
+    const wrapper = mount(WaveformPagination, { props: { current: 1, pageCount: 3 } })
+
+    expect(wrapper.findAll('.waveform-pagination__page').map((page) => page.text())).toEqual([
+      '1',
+      '2',
+      '3',
+    ])
+    expect(wrapper.get('[aria-label="上一页"]').attributes('disabled')).toBeDefined()
+    expect(wrapper.get('[aria-current="page"]').text()).toBe('1')
+  })
+
+  it('uses ellipses for larger page counts and emits valid page changes', async () => {
+    const wrapper = mount(WaveformPagination, { props: { current: 5, pageCount: 12 } })
+
+    expect(wrapper.findAll('.waveform-pagination__page').map((page) => page.text())).toEqual([
+      '1',
+      '4',
+      '5',
+      '6',
+      '12',
+    ])
+    expect(wrapper.findAll('.waveform-pagination__ellipsis')).toHaveLength(2)
+
+    await wrapper.get('[aria-label="第 6 页"]').trigger('click')
+    expect(wrapper.emitted('change')).toEqual([[6]])
+  })
+
+  it('clamps invalid current values and does not emit when already at a boundary', async () => {
+    const wrapper = mount(WaveformPagination, { props: { current: 99, pageCount: 3 } })
+
+    expect(wrapper.get('[aria-current="page"]').text()).toBe('3')
+    await wrapper.get('[aria-label="下一页"]').trigger('click')
+    expect(wrapper.emitted('change')).toBeUndefined()
+  })
+})
--- a/src/components/WaveformPagination.vue
+++ b/src/components/WaveformPagination.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  current: number
+  pageCount: number
+}>()
+
+const emit = defineEmits<{
+  change: [page: number]
+}>()
+
+type PageToken = number | 'start-ellipsis' | 'end-ellipsis'
+
+const normalizedPageCount = computed(() => Math.max(1, Math.floor(props.pageCount) || 1))
+const normalizedCurrent = computed(() =>
+  Math.min(normalizedPageCount.value, Math.max(1, Math.floor(props.current) || 1)),
+)
+
+const pageTokens = computed<PageToken[]>(() => {
+  const pageCount = normalizedPageCount.value
+  const current = normalizedCurrent.value
+  if (pageCount <= 7) return Array.from({ length: pageCount }, (_, index) => index + 1)
+  if (current <= 4) return [1, 2, 3, 4, 5, 'end-ellipsis', pageCount]
+  if (current >= pageCount - 3) {
+    return [
+      1,
+      'start-ellipsis',
+      pageCount - 4,
+      pageCount - 3,
+      pageCount - 2,
+      pageCount - 1,
+      pageCount,
+    ]
+  }
+  return [1, 'start-ellipsis', current - 1, current, current + 1, 'end-ellipsis', pageCount]
+})
+
+function selectPage(page: number) {
+  const nextPage = Math.min(normalizedPageCount.value, Math.max(1, Math.floor(page)))
+  if (nextPage !== normalizedCurrent.value) emit('change', nextPage)
+}
+</script>
+
+<template>
+  <nav class="waveform-pagination" aria-label="波形分页">
+    <button
+      type="button"
+      class="waveform-pagination__previous"
+      aria-label="上一页"
+      :disabled="normalizedCurrent === 1"
+      @click="selectPage(normalizedCurrent - 1)"
+    >
+      ‹
+    </button>
+    <template v-for="token in pageTokens" :key="token">
+      <span
+        v-if="typeof token !== 'number'"
+        class="waveform-pagination__ellipsis"
+        aria-hidden="true"
+      >
+        …
+      </span>
+      <button
+        v-else
+        type="button"
+        class="waveform-pagination__page"
+        :class="{ 'is-active': token === normalizedCurrent }"
+        :aria-current="token === normalizedCurrent ? 'page' : undefined"
+        :aria-label="`第 ${token} 页`"
+        @click="selectPage(token)"
+      >
+        {{ token }}
+      </button>
+    </template>
+    <button
+      type="button"
+      class="waveform-pagination__next"
+      aria-label="下一页"
+      :disabled="normalizedCurrent === normalizedPageCount"
+      @click="selectPage(normalizedCurrent + 1)"
+    >
+      ›
+    </button>
+  </nav>
+</template>
+
+<style scoped>
+.waveform-pagination {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  padding: 3px;
+  background: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  box-shadow: 0 1px 2px rgb(16 24 40 / 8%);
+}
+
+.waveform-pagination button {
+  display: inline-grid;
+  min-width: 28px;
+  height: 28px;
+  padding: 0 6px;
+  color: #344054;
+  font: inherit;
+  font-size: 12px;
+  line-height: 1;
+  background: #fff;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  place-items: center;
+}
+
+.waveform-pagination button:hover:not(:disabled),
+.waveform-pagination button:focus-visible {
+  color: #0958d9;
+  border-color: #1677ff;
+  outline: none;
+}
+
+.waveform-pagination button.is-active {
+  color: #0958d9;
+  background: #e6f4ff;
+  border-color: #1677ff;
+}
+
+.waveform-pagination button:disabled {
+  color: #bfc4cc;
+  cursor: not-allowed;
+}
+
+.waveform-pagination__ellipsis {
+  display: inline-grid;
+  min-width: 20px;
+  height: 28px;
+  color: #98a2b3;
+  font-size: 12px;
+  place-items: center;
+}
+</style>
--- a/src/components/annotation/WaveformAnnotationToolbar.vue
+++ b/src/components/annotation/WaveformAnnotationToolbar.vue
@@ -1,81 +0,0 @@
-<script setup lang="ts">
-import type { WaveformInteractionMode } from '../../types'
-
-interface Props {
-  interactionMode?: WaveformInteractionMode
-  annotationsVisible: boolean
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<{
-  (event: 'update:interaction-mode', mode: WaveformInteractionMode): void
-  (event: 'update:annotations-visible', visible: boolean): void
-}>()
-</script>
-
-<template>
-  <div class="waveform-annotation-toolbar" role="toolbar" aria-label="波形标注工具">
-    <button
-      type="button"
-      :class="{ 'is-active': props.interactionMode === 'zoom' }"
-      aria-label="缩放模式"
-      title="缩放模式"
-      @click="emit('update:interaction-mode', 'zoom')"
-    >
-      缩放
-    </button>
-    <button
-      type="button"
-      :class="{ 'is-active': props.interactionMode === 'annotation' }"
-      aria-label="添加标注"
-      title="添加标注"
-      @click="emit('update:interaction-mode', 'annotation')"
-    >
-      标注
-    </button>
-    <button
-      type="button"
-      :class="{ 'is-active': props.annotationsVisible }"
-      :aria-pressed="props.annotationsVisible"
-      :aria-label="props.annotationsVisible ? '隐藏标注' : '显示标注'"
-      title="显示/隐藏标注"
-      @click="emit('update:annotations-visible', !props.annotationsVisible)"
-    >
-      {{ props.annotationsVisible ? '隐藏' : '显示' }}
-    </button>
-  </div>
-</template>
-
-<style scoped>
-.waveform-annotation-toolbar {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 10;
-  display: flex;
-  gap: 4px;
-  padding: 5px;
-  background: #fff;
-  border: 1px solid #dfe5ef;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
-}
-
-.waveform-annotation-toolbar button {
-  min-width: 42px;
-  height: 28px;
-  padding: 0 7px;
-  color: #667085;
-  font-size: 12px;
-  background: transparent;
-  border: 0;
-  border-radius: 3px;
-  cursor: pointer;
-}
-
-.waveform-annotation-toolbar button:hover,
-.waveform-annotation-toolbar button.is-active {
-  color: #1677ff;
-  background: #e6f4ff;
-}
-</style>
--- a/src/components/annotation/components.test.ts
+++ b/src/components/annotation/components.test.ts
@@ -5,7 +5,6 @@ import { ColorPicker } from 'vue3-colorpicker'
 import WaveformAnnotationContextMenu from './WaveformAnnotationContextMenu.vue'
 import WaveformAnnotationEditor from './WaveformAnnotationEditor.vue'
 import WaveformAnnotationLayer from './WaveformAnnotationLayer.vue'
-import WaveformAnnotationToolbar from './WaveformAnnotationToolbar.vue'

 describe('waveform annotation controls', () => {
  it('keeps dialog title ids unique across editor instances', () => {
@@ -76,18 +75,6 @@ describe('waveform annotation controls', () => {
    expect(wrapper.get('.waveform-annotation-editor__series').text()).toContain('通道 A')
  })

-  it('emits controlled toolbar changes', async () => {
-    const wrapper = mount(WaveformAnnotationToolbar, {
-      props: { interactionMode: 'zoom', annotationsVisible: true },
-    })
-
-    await wrapper.get('button[aria-label="添加标注"]').trigger('click')
-    await wrapper.get('button[aria-label="隐藏标注"]').trigger('click')
-
-    expect(wrapper.emitted('update:interaction-mode')).toEqual([['annotation']])
-    expect(wrapper.emitted('update:annotations-visible')).toEqual([[false]])
-  })
-
  it('validates text and emits an immutable edited annotation with style defaults', async () => {
    const annotation = { id: 'note', seriesId: 'a', x: 1, y: 2, text: '' }
    const wrapper = mount(WaveformAnnotationEditor, {
--- a/src/components/annotation/index.ts
+++ b/src/components/annotation/index.ts
@@ -1,6 +1,6 @@
 export { default as WaveformAnnotationLayer } from './WaveformAnnotationLayer.vue'
-export { default as WaveformAnnotationToolbar } from './WaveformAnnotationToolbar.vue'
 export { default as WaveformAnnotationContextMenu } from './WaveformAnnotationContextMenu.vue'
 export * from './markup'
+export * from './serialization'
 export * from './types'
 export * from './useWaveformAnnotationInteraction'
--- a/src/components/annotation/serialization.test.ts
+++ b/src/components/annotation/serialization.test.ts
@@ -0,0 +1,114 @@
+import { describe, expect, it } from 'vitest'
+
+import type { WaveformAnnotation } from '../../types'
+import { parseWaveformAnnotations, serializeWaveformAnnotations } from './serialization'
+
+describe('waveform annotation serialization', () => {
+  it('round-trips every annotation field through a versioned document', () => {
+    const source: WaveformAnnotation[] = [
+      {
+        id: 'note-1',
+        seriesId: 'channel-a',
+        x: 1.25,
+        y: -3.5,
+        text: '峰值',
+        labelOffsetX: 12,
+        labelOffsetY: -8,
+        createdAt: '2026-07-21T12:00:00.000Z',
+        style: {
+          borderColor: '#1677ff',
+          textColor: '#333333',
+          backgroundColor: 'rgba(255, 255, 255, 0.92)',
+        },
+      },
+    ]
+    const sourceSnapshot = JSON.parse(JSON.stringify(source))
+
+    const parsed = parseWaveformAnnotations(serializeWaveformAnnotations(source))
+
+    expect(JSON.parse(serializeWaveformAnnotations(source))).toMatchObject({ version: 1 })
+    expect(source).toEqual(sourceSnapshot)
+    expect(parsed).toEqual(source)
+    expect(parsed).not.toBe(source)
+    expect(parsed[0]).not.toBe(source[0])
+    expect(parsed[0].style).not.toBe(source[0].style)
+  })
+
+  it('allows annotations for series that are not currently loaded', () => {
+    expect(
+      parseWaveformAnnotations(
+        JSON.stringify({
+          version: 1,
+          annotations: [{ id: 'future', seriesId: 'missing', x: 1, y: 2, text: '稍后显示' }],
+        }),
+      ),
+    ).toEqual([{ id: 'future', seriesId: 'missing', x: 1, y: 2, text: '稍后显示' }])
+  })
+
+  it.each([
+    ['invalid JSON', '{'],
+    ['non-object root', '[]'],
+    ['unsupported version', JSON.stringify({ version: 2, annotations: [] })],
+    ['missing annotation array', JSON.stringify({ version: 1 })],
+    [
+      'invalid annotation entry',
+      JSON.stringify({ version: 1, annotations: [{ id: 'a', seriesId: 's', x: 1 }] }),
+    ],
+    [
+      'non-finite coordinate',
+      '{"version":1,"annotations":[{"id":"a","seriesId":"s","x":1e400,"y":2,"text":"a"}]}',
+    ],
+    [
+      'overlong text',
+      JSON.stringify({
+        version: 1,
+        annotations: [{ id: 'a', seriesId: 's', x: 1, y: 2, text: 'a'.repeat(41) }],
+      }),
+    ],
+    [
+      'duplicate IDs',
+      JSON.stringify({
+        version: 1,
+        annotations: [
+          { id: 'a', seriesId: 's', x: 1, y: 2, text: 'one' },
+          { id: 'a', seriesId: 's', x: 2, y: 3, text: 'two' },
+        ],
+      }),
+    ],
+  ])('rejects %s without returning partial data', (_label, json) => {
+    expect(() => parseWaveformAnnotations(json)).toThrow('Invalid waveform annotation file')
+  })
+
+  it('rejects invalid optional fields and serialization input', () => {
+    expect(() =>
+      parseWaveformAnnotations(
+        JSON.stringify({
+          version: 1,
+          annotations: [
+            {
+              id: 'a',
+              seriesId: 's',
+              x: 1,
+              y: 2,
+              text: 'a',
+              labelOffsetX: '12',
+            },
+          ],
+        }),
+      ),
+    ).toThrow('labelOffsetX')
+
+    expect(() =>
+      parseWaveformAnnotations(
+        JSON.stringify({
+          version: 1,
+          annotations: [{ id: 'a', seriesId: 's', x: 1, y: 2, text: 'a', style: [] }],
+        }),
+      ),
+    ).toThrow('style must be an object')
+
+    expect(() =>
+      serializeWaveformAnnotations([{ id: 'a', seriesId: 's', x: Number.NaN, y: 2, text: 'a' }]),
+    ).toThrow('x must be a finite number')
+  })
+})
--- a/src/components/annotation/serialization.ts
+++ b/src/components/annotation/serialization.ts
@@ -0,0 +1,127 @@
+import type { WaveformAnnotation, WaveformAnnotationStyle } from '../../types'
+import { ANNOTATION_MAX_TEXT_LENGTH } from './markup'
+
+const ANNOTATION_FILE_VERSION = 1
+
+type JsonRecord = Record<string, unknown>
+
+function fail(message: string): never {
+  throw new TypeError(`Invalid waveform annotation file: ${message}`)
+}
+
+function isRecord(value: unknown): value is JsonRecord {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function requiredString(record: JsonRecord, key: string, path: string): string {
+  const value = record[key]
+  if (typeof value !== 'string' || value.trim().length === 0) {
+    fail(`${path}.${key} must be a non-empty string`)
+  }
+  return value
+}
+
+function optionalString(record: JsonRecord, key: string, path: string): string | undefined {
+  const value = record[key]
+  if (value === undefined) return undefined
+  if (typeof value !== 'string') fail(`${path}.${key} must be a string`)
+  return value
+}
+
+function requiredFiniteNumber(record: JsonRecord, key: string, path: string): number {
+  const value = record[key]
+  if (typeof value !== 'number' || !Number.isFinite(value)) {
+    fail(`${path}.${key} must be a finite number`)
+  }
+  return value
+}
+
+function optionalFiniteNumber(record: JsonRecord, key: string, path: string): number | undefined {
+  const value = record[key]
+  if (value === undefined) return undefined
+  if (typeof value !== 'number' || !Number.isFinite(value)) {
+    fail(`${path}.${key} must be a finite number`)
+  }
+  return value
+}
+
+function parseStyle(value: unknown, path: string): WaveformAnnotationStyle | undefined {
+  if (value === undefined) return undefined
+  if (!isRecord(value)) fail(`${path} must be an object`)
+
+  const borderColor = optionalString(value, 'borderColor', path)
+  const textColor = optionalString(value, 'textColor', path)
+  const backgroundColor = optionalString(value, 'backgroundColor', path)
+
+  return {
+    ...(borderColor !== undefined && { borderColor }),
+    ...(textColor !== undefined && { textColor }),
+    ...(backgroundColor !== undefined && { backgroundColor }),
+  }
+}
+
+function parseAnnotation(value: unknown, index: number): WaveformAnnotation {
+  const path = `annotations[${index}]`
+  if (!isRecord(value)) fail(`${path} must be an object`)
+
+  const text = requiredString(value, 'text', path)
+  if (text.length > ANNOTATION_MAX_TEXT_LENGTH) {
+    fail(`${path}.text must not exceed ${ANNOTATION_MAX_TEXT_LENGTH} characters`)
+  }
+
+  const labelOffsetX = optionalFiniteNumber(value, 'labelOffsetX', path)
+  const labelOffsetY = optionalFiniteNumber(value, 'labelOffsetY', path)
+  const createdAt = optionalString(value, 'createdAt', path)
+  const style = parseStyle(value.style, `${path}.style`)
+
+  return {
+    id: requiredString(value, 'id', path),
+    seriesId: requiredString(value, 'seriesId', path),
+    x: requiredFiniteNumber(value, 'x', path),
+    y: requiredFiniteNumber(value, 'y', path),
+    text,
+    ...(labelOffsetX !== undefined && { labelOffsetX }),
+    ...(labelOffsetY !== undefined && { labelOffsetY }),
+    ...(style !== undefined && { style }),
+    ...(createdAt !== undefined && { createdAt }),
+  }
+}
+
+function normalizeAnnotations(values: readonly unknown[]): WaveformAnnotation[] {
+  const annotations = values.map(parseAnnotation)
+  const ids = new Set<string>()
+  annotations.forEach((annotation, index) => {
+    if (ids.has(annotation.id)) fail(`annotations[${index}].id must be unique`)
+    ids.add(annotation.id)
+  })
+  return annotations
+}
+
+/** Serialize annotations to the versioned waveform annotation JSON format. */
+export function serializeWaveformAnnotations(annotations: readonly WaveformAnnotation[]): string {
+  return JSON.stringify(
+    { version: ANNOTATION_FILE_VERSION, annotations: normalizeAnnotations(annotations) },
+    null,
+    2,
+  )
+}
+
+/** Parse and validate a versioned waveform annotation JSON document. */
+export function parseWaveformAnnotations(json: string): WaveformAnnotation[] {
+  if (typeof json !== 'string') fail('input must be a JSON string')
+
+  let document: unknown
+  try {
+    document = JSON.parse(json)
+  } catch {
+    fail('input is not valid JSON')
+  }
+
+  if (!isRecord(document)) fail('root must be an object')
+  if (document.version !== ANNOTATION_FILE_VERSION) {
+    fail(`version must be ${ANNOTATION_FILE_VERSION}`)
+  }
+  if (!Array.isArray(document.annotations)) fail('annotations must be an array')
+
+  return normalizeAnnotations(document.annotations)
+}
--- a/src/components/core/grid.ts
+++ b/src/components/core/grid.ts
@@ -74,6 +74,7 @@ export function resolveGridCellGeometry(
  displayMode: WaveformDisplayMode,
  slotHasSeries: boolean[] = [],
  horizontalGap?: number,
+  showXAxis = true,
 ): GridCellGeometry[] {
  const defaultGap = getGridGap(displayMode)
  const columnGap = Number.isFinite(horizontalGap)
@@ -81,7 +82,9 @@ export function resolveGridCellGeometry(
    : defaultGap
  const totalHorizontalGap = Math.max(0, options.columnCount - 1) * columnGap
  const axisRows = new Set<number>()
-  if (displayMode === 'independent') {
+  if (!showXAxis) {
+    // Net view uses the full drawing area for waveform pixels.
+  } else if (displayMode === 'independent') {
    for (let row = 0; row < options.rowCount; row += 1) axisRows.add(row)
  } else if (displayMode === 'compact') {
    // Compact tracks share one continuous plot stack. Reserve the X-axis band
--- a/src/components/data/types.ts
+++ b/src/components/data/types.ts
@@ -19,6 +19,7 @@ export type {
  WaveformLegendOrientation,
  WaveformLegendOptions,
  WaveformFrameStyle,
+  WaveformZeroLineOptions,
  SingleWaveformData,
  WaveformLineType,
  WaveformPointType,
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -17,6 +17,7 @@ export type {
  WaveformLegendOrientation,
  WaveformLegendOptions,
  WaveformFrameStyle,
+  WaveformZeroLineOptions,
  WaveformPoint,
  WaveformSeries,
  WaveformLineType,
@@ -30,8 +31,4 @@ export type { WaveformGridOptions as WaveformGridConfig } from './core/grid'
 // 可选：导出各系统的组件（供高级用户使用）
 export { WaveformTooltip } from './interaction'
 export { WaveformTrack } from './rendering'
-export {
-  WaveformAnnotationLayer,
-  WaveformAnnotationToolbar,
-  WaveformAnnotationContextMenu,
-} from './annotation'
+export { WaveformAnnotationLayer, WaveformAnnotationContextMenu } from './annotation'
--- a/src/components/rendering/WaveformTrack.vue
+++ b/src/components/rendering/WaveformTrack.vue
@@ -2,7 +2,7 @@
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { axisBottom, axisLeft, axisRight, select } from 'd3'
 import { formatAxisTime, formatScientificAxisLabel } from '../../utils'
-import type { WaveformFrameStyle } from '../../types'
+import type { WaveformFrameStyle, WaveformZeroLineOptions } from '../../types'
 import type { WaveformDisplayMode, WaveformInteractionMode } from '../data/types'
 import type {
  DisplaySeries,
@@ -37,6 +37,12 @@ interface Props {
  hoveredPoint?: HoveredSeriesPoint
  /** Y 轴标签回退值 */
  yLabel?: string
+  /** Hide visual aids while keeping chart interaction active. */
+  cleanView?: boolean
+  /** Resolved zero reference line style. */
+  zeroLine?: Required<Pick<WaveformZeroLineOptions, 'color' | 'width' | 'dash'>> & {
+    visible: boolean
+  }
 }

 interface Emits {
@@ -51,6 +57,8 @@ interface Emits {

 const props = withDefaults(defineProps<Props>(), {
  interactionMode: 'zoom',
+  cleanView: false,
+  zeroLine: () => ({ visible: false, color: '#98a2b3', width: 1, dash: '6 4' }),
 })
 const emit = defineEmits<Emits>()

@@ -111,6 +119,12 @@ function hasCrosshair(): boolean {
  )
 }

+function zeroLineY(axis: WaveformYAxisLayout): number | null {
+  const [minimum, maximum] = axis.scale.domain()
+  if (!props.zeroLine.visible || minimum > 0 || maximum < 0) return null
+  return axis.scale(0)
+}
+
 function renderAxes() {
  props.track.yAxes.forEach((axis, index) => {
    const element = yAxisElements.value[index]
@@ -180,7 +194,7 @@ watch(
    :transform="`translate(${track.left ?? 0}, ${track.top})`"
  >
    <rect
-      v-if="!track.isEmpty"
+      v-if="!track.isEmpty && !cleanView"
      class="waveform-track__plot-background waveform-chart__plot-background"
      :width="track.width ?? innerWidth"
      :height="track.height"
@@ -190,7 +204,7 @@ watch(

    <!-- 网格和背景 -->
    <g
-      v-if="!track.isEmpty && track.hasVisibleSeries"
+      v-if="!track.isEmpty && track.hasVisibleSeries && !cleanView"
      :clip-path="`url(#${clipPathId}-${track.index})`"
      aria-hidden="true"
    >
@@ -236,9 +250,31 @@ watch(
      </g>
    </g>

+    <g
+      v-if="!track.isEmpty && track.hasVisibleSeries && zeroLine.visible && !cleanView"
+      class="waveform-track__zero-lines waveform-chart__zero-lines"
+      :clip-path="`url(#${clipPathId}-${track.index})`"
+      aria-hidden="true"
+    >
+      <template v-for="axis in track.yAxes" :key="`zero-line-${track.index}-${axis.index}`">
+        <line
+          v-if="zeroLineY(axis) !== null"
+          class="waveform-track__zero-line waveform-chart__zero-line"
+          :data-y-axis-index="axis.index"
+          x1="0"
+          :x2="track.width ?? innerWidth"
+          :y1="zeroLineY(axis) ?? 0"
+          :y2="zeroLineY(axis) ?? 0"
+          :stroke="zeroLine.color"
+          :stroke-width="zeroLine.width"
+          :stroke-dasharray="zeroLine.dash || undefined"
+        />
+      </template>
+    </g>
+
    <!-- 帧编号水印 -->
    <text
-      v-if="!track.isEmpty && track.hasVisibleSeries && frameNumber !== undefined"
+      v-if="!track.isEmpty && track.hasVisibleSeries && frameNumber !== undefined && !cleanView"
      class="waveform-track__watermark waveform-chart__watermark"
      :x="(track.width ?? innerWidth) / 2"
      :y="track.height / 2"
@@ -252,13 +288,13 @@ watch(

    <!-- X 轴 -->
    <g
-      v-if="track.showXAxis"
+      v-if="track.showXAxis && !cleanView"
      ref="xAxisElement"
      class="waveform-track__axis waveform-track__axis--x waveform-chart__axis waveform-chart__axis--x"
      :transform="`translate(0, ${track.height})`"
    />
    <g
-      v-if="track.showXAxis"
+      v-if="track.showXAxis && !cleanView"
      class="waveform-track__axis-endpoints waveform-chart__axis-endpoints"
      :transform="`translate(0, ${track.height})`"
      font-family="sans-serif"
@@ -285,7 +321,7 @@ watch(
      </text>
    </g>
    <text
-      v-if="track.showXAxis && track.xAxisExponent"
+      v-if="track.showXAxis && track.xAxisExponent && !cleanView"
      class="waveform-track__axis-exponent waveform-track__axis-exponent--x waveform-chart__axis-exponent waveform-chart__axis-exponent--x"
      :x="track.width ?? innerWidth"
      :y="track.height + 27"
@@ -297,7 +333,7 @@ watch(

    <!-- Y 轴 -->
    <g
-      v-for="axis in track.isEmpty ? [] : track.yAxes"
+      v-for="axis in track.isEmpty || cleanView ? [] : track.yAxes"
      :key="`y-axis-${track.index}-${axis.index}`"
      :ref="(element) => setYAxisElement(element, axis.index)"
      class="waveform-track__axis waveform-track__axis--y waveform-chart__axis waveform-chart__axis--y"
@@ -307,7 +343,9 @@ watch(
      :transform="`translate(${axis.x}, 0)`"
    />
    <text
-      v-for="axis in track.isEmpty ? [] : track.yAxes.filter((item) => item.exponentLabel)"
+      v-for="axis in track.isEmpty || cleanView
+        ? []
+        : track.yAxes.filter((item) => item.exponentLabel)"
      :key="`y-axis-exponent-${track.index}-${axis.index}`"
      class="waveform-track__axis-exponent waveform-track__axis-exponent--y waveform-chart__axis-exponent waveform-chart__axis-exponent--y"
      :data-y-axis-index="axis.index"
@@ -323,6 +361,7 @@ watch(
    <!-- Y 轴标签 -->
    <g
      v-if="
+        !cleanView &&
        !track.isEmpty &&
        track.hasVisibleSeries &&
        track.seriesList.length === 1 &&
@@ -351,7 +390,7 @@ watch(
    </g>

    <g
-      v-for="axis in track.yAxes.length > 1 ? track.yAxes.filter(hasYAxisTitle) : []"
+      v-for="axis in !cleanView && 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"
@@ -377,7 +416,7 @@ watch(

    <!-- 轨道边框 -->
    <rect
-      v-if="!track.isEmpty"
+      v-if="!track.isEmpty && !cleanView"
      class="waveform-track__plot-frame waveform-chart__plot-frame"
      :width="track.width ?? innerWidth"
      :height="track.height"
@@ -421,7 +460,7 @@ watch(
    />

    <text
-      v-if="!track.isEmpty && !track.hasVisibleSeries"
+      v-if="!track.isEmpty && !track.hasVisibleSeries && !cleanView"
      class="waveform-track__no-visible-series"
      :x="(track.width ?? innerWidth) / 2"
      :y="track.height / 2"
@@ -516,6 +555,11 @@ watch(
  stroke-dasharray: 4 3;
 }

+.waveform-track__zero-line {
+  fill: none;
+  pointer-events: none;
+}
+
 .waveform-track__axis-endpoint {
  fill: #667085;
  font-size: 11px;
--- a/src/index.ts
+++ b/src/index.ts
@@ -23,6 +23,7 @@ export type {
  WaveformLegendOrientation,
  WaveformLegendOptions,
  WaveformFrameStyle,
+  WaveformZeroLineOptions,
  // 数据类型
  SingleWaveformData,
  WaveformLineType,
@@ -59,3 +60,5 @@ export {
  selectRenderablePoints,
  type ResolvedWaveformRenderingOptions,
 } from './core'
+
+export { parseWaveformAnnotations, serializeWaveformAnnotations } from './components/annotation'
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,4 @@
 import { createApp } from 'vue'
-import 'ant-design-vue/dist/reset.css'

 import App from './App.vue'
 import './styles.css'
--- a/src/styles.css
+++ b/src/styles.css
@@ -17,6 +17,12 @@
  box-sizing: border-box;
 }

+button,
+input,
+select {
+  font: inherit;
+}
+
 html,
 body,
 #app {
@@ -91,16 +97,124 @@ body {
  margin-bottom: 0;
 }

+.control-panel .native-input,
+.control-panel .native-select {
+  min-width: 0;
+  height: 28px;
+  padding: 4px 8px;
+  color: #101828;
+  font-size: 12px;
+  background: #fff;
+  border: 1px solid #d0d5dd;
+  border-radius: 4px;
+  outline: none;
+}
+
+.control-panel .native-input:focus-visible,
+.control-panel .native-select:focus-visible,
+.control-panel button:focus-visible {
+  border-color: #1677ff;
+  outline: 2px solid rgb(22 119 255 / 20%);
+  outline-offset: 1px;
+}
+
+.control-panel .native-switch {
+  position: relative;
+  width: 30px;
+  height: 18px;
+  margin: 0;
+  appearance: none;
+  background: #d0d5dd;
+  border: 0;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+
+.control-panel .native-switch::after {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 12px;
+  height: 12px;
+  content: '';
+  background: #fff;
+  border-radius: 50%;
+  box-shadow: 0 1px 2px rgb(16 24 40 / 20%);
+  transition: transform 120ms ease;
+}
+
+.control-panel .native-switch:checked {
+  background: #1677ff;
+}
+
+.control-panel .native-switch:checked::after {
+  transform: translateX(12px);
+}
+
+.control-panel .native-switch:focus-visible {
+  outline: 2px solid rgb(22 119 255 / 35%);
+  outline-offset: 2px;
+}
+
+.control-action,
+.mobile-control-toggle,
+.control-panel__close {
+  padding: 5px 10px;
+  color: #344054;
+  font-size: 12px;
+  line-height: 18px;
+  background: #fff;
+  border: 1px solid #d0d5dd;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.control-action:hover,
+.mobile-control-toggle:hover,
+.control-panel__close:hover {
+  color: #0958d9;
+  border-color: #1677ff;
+}
+
+.control-action--block {
+  width: 100%;
+}
+
 .display-mode-control {
  display: flex;
  width: 100%;
-  white-space: nowrap;
+  overflow: hidden;
+  border: 1px solid #d0d5dd;
+  border-radius: 4px;
 }

-.display-mode-control .ant-radio-button-wrapper {
+.display-mode-control label {
+  position: relative;
  flex: 1 1 0;
-  padding-inline: 7px;
+  min-width: 0;
+  padding: 5px 7px;
+  color: #475467;
+  font-size: 12px;
  text-align: center;
+  cursor: pointer;
+}
+
+.display-mode-control label + label {
+  border-left: 1px solid #d0d5dd;
+}
+
+.display-mode-control input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.display-mode-control input:checked + span {
+  color: #0958d9;
+  font-weight: 600;
 }

 .grid-size-control {
@@ -112,7 +226,7 @@ body {
  font-size: 12px;
 }

-.grid-size-control .ant-input-number {
+.grid-size-control .native-input {
  width: 58px;
 }

@@ -134,7 +248,7 @@ body {
  margin-top: 10px;
 }

-.select-control .ant-select {
+.select-control .native-select {
  width: 100%;
 }

@@ -156,7 +270,8 @@ body {
  border-radius: 4px;
 }

-.frame-style-controls {
+.frame-style-controls,
+.auxiliary-style-controls {
  display: grid;
  gap: 10px;
 }
@@ -170,12 +285,12 @@ body {
  font-size: 12px;
 }

-.frame-style-control .ant-input-number,
-.frame-style-control .ant-select {
+.frame-style-control .native-input,
+.frame-style-control .native-select {
  width: 100%;
 }

-.frame-style-control--switch .ant-switch {
+.frame-style-control--switch .native-switch {
  width: auto;
  justify-self: start;
 }
@@ -209,8 +324,8 @@ body {
  grid-column: 1 / -1;
 }

-.title-control .ant-select,
-.title-control .ant-input-number {
+.title-control .native-select,
+.title-control .native-input {
  width: 100%;
 }

--- a/src/types/chart.ts
+++ b/src/types/chart.ts
@@ -118,3 +118,11 @@ export interface WaveformFrameStyle {
  borderStyle?: 'solid' | 'dashed'
  backgroundColor?: string
 }
+
+/** Styling and visibility options for the horizontal zero-value reference line. */
+export interface WaveformZeroLineOptions {
+  visible?: boolean
+  color?: string
+  width?: number
+  dash?: string
+}
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -18,6 +18,7 @@ export type {
  WaveformLegendOrientation,
  WaveformLegendOptions,
  WaveformFrameStyle,
+  WaveformZeroLineOptions,
 } from './chart'

 // 数据类型
--- a/vite.lib.config.ts
+++ b/vite.lib.config.ts
@@ -3,7 +3,7 @@ import { fileURLToPath, URL } from 'node:url'
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'

-const peerDependencies = ['vue', 'd3', 'ant-design-vue', 'vue3-colorpicker']
+const peerDependencies = ['vue', 'd3', 'vue3-colorpicker']

 export default defineConfig({
  plugins: [vue()],
Author	SHA1	Message	Date
李启源	61156eca02	refactor(ui): remove Ant Design Vue dependency	2026-07-22 13:13:17 +08:00
李启源	21bf0d803e	feat(annotation): add serialization support All checks were successful Package component / package (push) Successful in 6m3s Details	2026-07-21 23:15:06 +08:00
李启源	4643a2dbfe	fix(chart): preserve clean view geometry	2026-07-21 22:26:34 +08:00
李启源	6a6a387868	feat(chart): add zero line and clean view	2026-07-21 20:44:08 +08:00