标签tag

← 文档站

渲染快照

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

Aurora Admin · Tag 组件（纯 H5）

对齐设计令牌：bg #F0F5FF / color #2F54EB / 圆角 2px / padding 1px 8px

预设状态

品牌标签 成功 错误 警告 默认

带圆点

在线 已发布 异常

可关闭（点击 × 移除）

前端 × 后端 × 设计 ×

自定义颜色

断言结果

总数 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 颜色 / 像素值
    已导出 ✓