等级读数「LV 90」：横排，LV 小标坐在数字基线上；数字等宽（tabular-nums），E0 / E1 / E2 切换 50 → 80 → 90 时宽度不跳。

读数 · 灰块

variant="badge" 是主题灰块（surface-3 + 正文色，24px 高），与阶段选择器、开关、信赖在控制行里同一条线。它是读数不是按钮，所以不反白——反白在本系统里是「选中 / 可点」（阶段选择器的当前项、contrast 按钮），读数块挨着 E2 再反白就像又一个选中项。

Storybook ↗

<script setup lang="ts">
import AkLevel from "../AkLevel.vue";
</script>

<template>
  <div class="ak-flex ak-wrap ak-gap-4 ak-items-center">
    <AkLevel :value="90" />
    <AkLevel :value="90" variant="badge" />
    <AkLevel :value="1" variant="badge" />
  </div>
</template>

上面是组件实际渲染出的结构——MW 模板 / Lua 照这个输出即可得到同样的外观。

Vue API

属性	类型	默认	说明
value必填	number	—	等级
variant	"default""badge"	"default"	外观：default 纯读数 · badge 主题灰块（24px 高，与阶段选择器 / 开关 / 信赖同一条线；是读数不是按钮，不反白）

CSS 实现

块	元素 __	修饰 --