锚点导航anchornav

← 文档站

渲染快照

以下 DOM 是组件主用例的静态快照,每个用例标注 data-assert="<id>",点击「运行断言」后会写入 data-status。

Aurora Admin · AnchorNav 组件(纯 H5)

对齐 AnchorNav 规范:右侧目录、滚动高亮、层级嵌套、点击平滑滚动

1. 产品简介

本系统是一套企业级中后台解决方案……(长文本占位,可滚动测试高亮)

更多内容用于撑高页面,方便观察当前章节高亮效果。

2. 安装与初始化

通过 npm 安装后,在入口文件引入主题与组件库。

配置项说明略。

3. 开发指南

包含布局、主题与国际化三部分。

3.1 布局

侧边栏 + 顶栏的经典后台布局。

3.2 主题

通过 CSS 变量统一调整品牌色。

4. 常见问题

收集部署与升级中的高频问题。

FAQ 列表略。

断言结果

总数 0 通过 0 失败 0 跳过 0 耗时 0 ms

通用测试矩阵(自动断言)

以下 8 项检查在「运行断言」时同时跑:默认态、变体覆盖、状态可达、键盘可达、焦点环、ARIA 属性、对比度、token 一致性。

  1. 默认态渲染:核心节点齐全
  2. 尺寸/类型变体:≥2 尺寸 或 ≥2 类型
  3. 状态覆盖:default / hover / focus / disabled / loading 至少出现 3 个
  4. 键盘可达:可聚焦元素具备 tabindex 或原生 button/a
  5. 焦点环可视:focus-visible 描边不被覆盖(脚本检查 stylesheet)
  6. ARIA 属性:交互节点具备 role 或 aria-*
  7. 对比度:主要文本颜色与背景对比度 ≥ 4.5:1
  8. token 一致性:未出现硬编码 hex 颜色 / 像素值
已导出 ✓