干员页正文的技能用这个：同现网 prts.wiki，一张表列完 1–7 级 + 专精 Ⅰ–Ⅲ，初始 / 消耗 / 持续按列对齐、上下直接对比，不做「选一个等级看一份」的切换器。表头是一张不写数值的宽技能卡（名称行居中对齐图标），列头直接用 SP 芯片当图例。

另一种对比法是参数矩阵：描述只写一遍、等级横着放。长描述、参数多于三四个时用全等级表；短描述 / 手机优先时用矩阵。

全等级表

levels 每项是一级（第 8–10 项 = 专精 Ⅰ–Ⅲ，三星及以下只有 7 项）：description 是游戏原始标记，vars 是这一级的 blackboard——直接把 skill_table 的描述模板和各级 blackboard 传进来，由 AkRichText 填数、上色；init / cost / duration 是三列数值，空着的格显示「—」。highlight 高亮一行（当前等级），terms 给描述里的术语（晕眩）悬停说明。表头卡放在 #header 插槽。

Storybook ↗

<script setup lang="ts">
import { asset } from "../../../demo/asset";
import AkSkill from "../../Skill/AkSkill.vue";
import AkSkillSheet, { type SkillSheetLevel } from "../AkSkillSheet.vue";

/** 陈 · 鞘击：描述模板（skill_table 原样）+ 每级的 blackboard / 初始 / 消耗 */
const template =
  "下次攻击使用刀鞘砸向敌人，造成相当于攻击力<@ba.vup>{atk_scale:0%}</>的物理伤害，令命中目标<$ba.stun>晕眩</><@ba.vup>{stun}</>秒";
// [atk_scale, stun, 初始, 消耗]：1–7 级 + 专精 Ⅰ–Ⅲ
const data = [
  [2, 1, 0, 7], [2.1, 1, 0, 7], [2.2, 1, 0, 7], [2.3, 1.25, 0, 6], [2.4, 1.25, 0, 6],
  [2.5, 1.25, 0, 6], [2.6, 1.5, 0, 5], [2.8, 1.5, 0, 5], [3, 1.5, 0, 5], [3.2, 1.5, 0, 4],
];
const levels: SkillSheetLevel[] = data.map(([atk_scale, stun, init, cost]) => ({ description: template, vars: { atk_scale, stun }, init, cost }));

const terms = { "ba.stun": "晕眩：无法移动、阻挡、攻击及使用技能" };
const masteryIcons = [1, 2, 3].map(n => asset(`specialized/specialized_tiny_${n}.png`));
</script>

<template>
  <AkSkillSheet :levels="levels" :highlight="7" :mastery-icons="masteryIcons" :terms="terms" label="鞘击 · 各等级数据">
    <template #header>
      <AkSkill
        name="鞘击"
        :icon="asset('skill/chen_1.png')"
        sp-type="attack"
        trigger="auto"
        unlock="技能1 · 精英零开放"
        :unlock-icon="asset('elite/elite_0.png')"
        :heading-level="3"
      />
    </template>
  </AkSkillSheet>
</template>

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

范围 · 注释

表头卡的右侧槽放技能范围；表下的注释（「※不可对空」）写在 #footer 插槽里，每条一个 <p>。要自己画某一级的描述时用 #description 插槽（{ row, level }）。

Storybook ↗

<script setup lang="ts">
import { asset } from "../../../demo/asset";
import AkRange from "../../Range/AkRange.vue";
import AkRichText from "../../RichText/AkRichText.vue";
import AkSkill from "../../Skill/AkSkill.vue";
import AkSkillSheet, { type SkillSheetLevel } from "../AkSkillSheet.vue";

/** 陈 · 赤霄·绝影 */
const template =
  "向周围寻找最近的敌方目标，对其发动<@ba.vup>{times}</>次连续斩击，每次造成相当于攻击力<@ba.vup>{atk_scale:0%}</>的物理伤害，并在最后一击时使目标<$ba.stun>晕眩</><@ba.vup>{stun}</>秒";
// [atk_scale, stun, 初始, 消耗]：1–7 级 + 专精 Ⅰ–Ⅲ
const data = [
  [2, 2, 10, 40], [2.1, 2, 10, 40], [2.2, 2, 10, 40], [2.3, 2.5, 10, 38], [2.4, 2.5, 10, 38],
  [2.5, 2.5, 10, 38], [2.6, 3, 10, 36], [2.8, 3, 13, 34], [3, 3, 16, 32], [3.2, 4, 20, 30],
];
const levels: SkillSheetLevel[] = data.map(([atk_scale, stun, init, cost]) => ({
  description: template,
  vars: { times: 10, atk_scale, stun },
  init,
  cost,
}));

const terms = {
  "ba.stun": "晕眩：无法移动、阻挡、攻击及使用技能",
  "ba.invincible": "无敌：无法被不同阵营选中（属于无法选择类效果）；受到的伤害与元素值变为 0；无法触发任何单位未绑定选择器的能力",
  "ba.unblockable": "不可阻挡：无法阻挡 / 被阻挡，自动解除阻挡",
};
const masteryIcons = [1, 2, 3].map(n => asset(`specialized/specialized_tiny_${n}.png`));
/** 技能范围（range_table 的 grids） */
const range: [number, number][] = [[-2, 0], [-1, -1], [-1, 0], [-1, 1], [0, -2], [0, -1], [0, 1], [0, 2], [1, -1], [1, 0], [1, 1], [2, 0]];
</script>

<template>
  <AkSkillSheet :levels="levels" :mastery-icons="masteryIcons" :terms="terms" label="赤霄·绝影 · 各等级数据">
    <template #header>
      <AkSkill
        name="赤霄·绝影"
        :icon="asset('skill/chen_3.png')"
        sp-type="attack"
        trigger="manual"
        unlock="技能3 · 精英二开放"
        :unlock-icon="asset('elite/elite_2.png')"
        :heading-level="3"
      >
        <template #aside><AkRange :grids="range" size="sm" label="技能范围" /></template>
      </AkSkill>
    </template>
    <template #footer>
      <p>※不可对空</p>
      <p><AkRichText text="※技能生效期间，持有效果：<$ba.invincible>无敌</>、<$ba.unblockable>不可阻挡</>" :terms="terms" /></p>
      <p>※若斩击次数未到 10 次之前技能范围内没有目标，立刻中止技能</p>
    </template>
  </AkSkillSheet>
</template>

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

表格里的数字

table-numerals.css（方舟组件最后加载）是一条硬规则：表格数据里的数字一律用正文字体，不用 Bender 系——Bender 数字是比例宽度、子集里没有 tnum、小字号发虚，成列就对不齐。全等级表、参数矩阵、天赋条件表、键值表自身都按正文字体写；这条规则兜底的是掉进 td / th / 键值表 dd 的 HUD 类小件（SP 芯片、精英化标记、道具数量角标、信赖值……）：字体回正文，字重 / 字号 / 颜色照旧。面板级的 HUD 数值（属性面板、统计数字、技能卡里的芯片）不在表格里，不受影响。

Vue API

属性	类型	默认	说明
levels必填	SkillSheetLevel[]	—	各级数据：1–7 级，之后是专精 Ⅰ–Ⅲ（三星及以下只有 7 项）
highlight	number	—	高亮一行（当前等级，1–10）；常与 AkSkillLevels 的 v-model 绑同一个值
masteryIcons	readonly string[]	—	专精 Ⅰ–Ⅲ 的图标地址（游戏 specialized_tiny_1–3）；不给时写 M1–M3
terms	Record<string, string>	—	术语说明（termDescriptionDict），给描述里 <$ba.xxx> 的悬停提示
label	string	—	表格的可访问名（如「鞘击 · 各等级数据」）

插槽	说明
header	表头卡：一般放 <AkSkill>（名称 / SP 类型 / 开放条件 / 范围），不写 cost / init，名称行居中对齐图标
footer	表下的注释（.ak-skill-sheet__note，每条一个 <p>：「※不可对空」）
description	自己画某一级的描述（代替 AkRichText）：{ row, level }

CSS 实现

结构：.ak-skill-sheet > .ak-skill.ak-skill--wide（表头）+ table.ak-skill-table（th.lv / .desc / .num；tr.is-mastery 专精行，7 级与专精之间一道略深的分隔；tr.is-hl 高亮行；td.num 为空时画「—」）+ .ak-skill-sheet__note。窄屏时数值列收窄、列头芯片只留图形。

块	元素 __	修饰 --