组件总览
每个组件都有 CSS 实现（MediaWiki 皮肤加载，模板输出结构即可），大多数也有 Vue 实现（给 prts-widgets）。卡片上是两种实现各自的状态。
通用组件
折叠面板 Accordion原生 <details> 折叠块：+ / − 标记，展开后标题行加底色。Vue 版照 Naive 叫 AkCollapse。CSS · 可用Vue · 实验头像 Avatar直角方块头像，五档尺寸；没有图时显示文字；头像组后一枚压前一枚。CSS · 可用Vue · 实验计数徽标 Badge未读计数 / 未读点。默认黄（提示）不走红；可骑在头像、图标按钮的右上角。CSS · 可用Vue · 实验面包屑 Breadcrumb当前页在层级里的位置。分隔是 CSS 画的斜角，最后一项是当前页（加粗、aria-current）。CSS · 可用Vue · 实验按钮 Button触发一个动作。主动作一处只放一枚；黑白反转的 contrast 对应游戏内 btn_on。CSS · 可用Vue · 实验卡片 Card一件可并列 / 可点的东西：1px 边、直角；封面、眉题、标题栏、页脚、色条、选中角标。CSS · 可用Vue · 实验正文提示框 Cbox编辑写在正文里的提示——「另见」「已删除仅作存档」「剧透」。= 现网 {{Cbox2}}。CSS · 可用Vue · 实验复选框 Checkbox18px 直角勾选框，选中主色实底；复选组可限制最多选几个，全选框用半选。CSS · 可用Vue · 实验筛选芯片 Chip可交互的开关按钮：干员一览的筛选栏、语音语种切换。选中 = 主色实底 + 左上角标。CSS · 可用Vue · 实验对话框 Dialog打断当前操作、要求确认的模态窗口：原生 <dialog>，标题栏左色条，底栏右对齐按钮。CSS · 可用Vue · 实验分隔线 Divider1px 线 / 主色短头 / 斜纹带 / 中间带字 / 行内竖线。CSS · 可用Vue · 实验下拉菜单 Dropdown点按钮拉下一列动作 / 链接。左 2px 青条 + 淡底的高亮与侧栏当前项同一语言；键盘按 WAI-ARIA 菜单按钮。CSS · 可用Vue · 实验空状态 Empty没有数据 / 没有结果 / 404：虚线框里一枚线稿图标（或大号状态码）+ 标题 + 说明 + 操作。CSS · 可用Vue · 实验回到顶部 FAB右下角 44px 反色浮动按钮，滚过一屏淡入。整页那枚由皮肤输出；Vue 版 AkBackTop 给页面里的滚动区域。CSS · 可用Vue · 实验表单字段 Field标签 + 控件 + 说明 / 校验文案。字段里的控件自动关联标签、说明与出错状态。CSS · 可用Vue · 实验区块标题 Heading中文标题 + 左侧主色粗竖条，可带 Bender 英文副题；模板 / 首页的区块标题。CSS · 可用Vue · 实验输入框 Input单行 / 多行文字输入。30 / 36 / 44 三档与按钮同高；前后缀与按钮拼成输入组。CSS · 可用Vue · 实验数字输入 InputNumber常显 − / + 的步进器：等级、信赖、材料数量。方向键步进，Home / End 到上下限。CSS · 可用Vue · 实验键帽 Kbd快捷键提示：直角 1px 边、底边略重、等宽 10px。CSS · 可用Vue · 实验消息 Message界面 / 系统反馈的提示条：左色条 + 淡底，可关闭、可做横幅。编辑写在正文里的提示用 Cbox。CSS · 可用Vue · 实验分页 Pagination‹ 页码 … 页码 ›：首尾页常驻、当前页居中，当前页主色实底。CSS · 可用Vue · 实验面板 Panel页面上一块有名字的区域（游戏内 announce panel）：左色条标题栏 + 正文，可反转、可折叠。CSS · 可用Vue · 实验进度 Progress完成度 / 数量占比：直角细条（可带标签行、分段、斜纹、不定进度）与环形。CSS · 可用Vue · 实验单选 Radio圆形单选（系统里唯一的圆）；单选按钮组是「列表 / 网格 / 表格」这类分段控件。CSS · 可用Vue · 实验作用域 Scope组件的排版基线与局部主题：别的皮肤 / 站外页面上，widget 根节点包一层就和 Arknights 皮肤上一样。CSS · 可用Vue · 实验搜索框 Search放大镜 + 输入框 + 快捷键键帽，同页眉里无 JS 时的搜索表单。CSS · 可用Vue · 实验下拉选择 Select原生 <select> 换肤：与裸下拉同一枚 ▾，列表与键盘是浏览器自己的。CSS · 可用Vue · 实验骨架屏 Skeleton内容到之前先占住它的形状：文字行 / 块 / 方 / 圆，两级表面之间扫光。CSS · 可用Vue · 实验滑杆 Slider原生 range 换肤：方形滑块、4px 轨道。等级、信赖这类在区间里拖的值。CSS · 可用Vue · 实验加载 Spinner游戏内 loading 的菱形涟漪 / 三竖条；可带说明，可包住内容做加载层。CSS · 可用Vue · 实验统计数字 Stat一个关键数字：小号大写名称 + 大号等宽数字 + 升降变化量；顶边主色条的小卡片，或行内一行。CSS · 可用Vue · 实验步骤条 Stepper带序号的一排步骤 + 连线，展示进度（精英化、专精）。只展示，不可点。CSS · 可用Vue · 实验开关 Switch方形开关，开 = 游戏内 toggle_on 蓝。立即生效的二元设置。CSS · 可用Vue · 实验数据表 Table模板 / 小部件用的数据表（不是正文 wikitable）：斑马纹、紧凑、数字列、可排序表头。CSS · 可用Vue · 实验标签页 Tabs同一位置切换几组平级内容。下划线 / 胶囊 / 游戏内块状 / 竖排四种外观。CSS · 可用Vue · 实验标签 Tag短小的分类 / 状态标记。状态色走淡底色字，NEW / BREAKING 是仅有的红底。CSS · 可用Vue · 实验时间线 Timeline竖线 + 菱形节点的时间序列：版本、活动、剧情节点。已发生 / 当前为主色实心。CSS · 可用Vue · 实验轻提示 Toast操作之后右下角弹出、几秒后自己消失的一句反馈，底部进度条走完即关。Vue 里用 useToast()。CSS · 可用Vue · 实验文字提示 Tooltip悬停 / 聚焦时的一句解释；纯 CSS 的 data-ak-tip 给模板用，Vue 版能放任意内容、四个方向，另有弹出卡片 Popover。CSS · 可用Vue · 实验
方舟组件
档案类卡片 Archive干员密录 / 悖论模拟 / 未获得时档案：面板头 + 解锁条件 + 正文 + 页脚（阅读 / 关卡 / 首通奖励）。CSS · 可用Vue · 实验属性面板 Attrs干员属性读数：Bender 大数值 + 英文缩写 / 中文小标，等宽网格、1px 缝线；紧凑版一格一行。CSS · 可用Vue · 实验阵营 Camp势力徽标（游戏白色线稿，亮色下反相）+ 名字；深底方块 / 大号仅徽标。CSS · 可用Vue · 实验剧情对话 Dialogue剧情页的对话：说话人一列右对齐、台词一列，旁白灰色斜体；剧透用涂黑。CSS · 可用Vue · 实验档案 Dossier人员档案的一段：标题 + 解锁条件 + 正文，未解锁时模糊加斜纹；涂黑文本 .ak-redacted 也在这里。CSS · 可用Vue · 实验精英化 Elite精英阶段图标 + 标签字「精英二 Lv60」：材料表行头、天赋条件、解锁需求里用。CSS · 可用Vue · 实验敌人 Enemy敌人卡：圆形头像 + 级别 · 编号 + 名字 + 威胁度菱形；精英 / 领袖加左色条。CSS · 可用Vue · 实验活动 Event活动卡（横幅 + 类型 + 标题 + 起止时间，进行中闪红点）与三枚灰块的倒计时。CSS · 可用Vue · 实验大标题横幅 Hero官网风页头横幅：黑底 + 大号拉丁标题 + 青色横条，右侧青色色面叠网点。CSS · 可用Vue · 实验道具 Item游戏道具图标原样：现网拼好的合成图 + 骑在框沿上的描边数量。CSS · 可用Vue · 实验键值表 Kv信息栏 / 档案里的键值对：带框版同现网 infobox，内联版把两三对短值排成一行。CSS · 可用Vue · 实验等级 Level等级读数「LV 90」：LV 小标坐在数字基线上；灰块版与阶段选择器 / 信赖同一条线。CSS · 可用Vue · 实验材料表 Materials精英化 / 技能升级 / 专精要的材料：左列阶段或等级，右列一排 40px 道具；可插横跨两列的分段说明。CSS · 可用Vue · 实验模组 Module一张卡装完一个模组：型号 + 名称 + 故事（全文阅读）+ 三阶段表 + 解锁任务 + 解锁需求与材料。CSS · 可用Vue · 实验新闻横幅 News游戏主界面的 Breaking news 横幅：矩形红块 + 反色底的一行正文，只装一条。CSS · 可用Vue · 实验干员卡 Op Card游戏干员列表卡：方形头像 + 左上星级 / 左下职业 / 右下精英 + 稀有度色线；网格、异格一览、首页亮点干员。CSS · 可用Vue · 实验干员条目 Op Row干员横向条目：列表 / 表格里一行一位——带稀有度色条的头像 + 名字 + 第二行小字。CSS · 可用Vue · 实验阶段选择器 Phase Tabs精英阶段 E0 / E1 / E2 单选：属性计算器、攻击范围这类按阶段重算的数据用。CSS · 可用Vue · 实验潜能提升一览 Pot List潜能 2–6 各一格（图标 + 小标 + 效果），当前潜能已生效的格子点亮。= 现网 {{潜能提升}}。CSS · 可用Vue · 实验潜能 / 专精 Potential潜能 1–6、专精 1–3 的游戏图标，默认坐在深色底座上。CSS · 可用Vue · 实验职业 / 分支 Profession职业 / 分支图标（游戏白线稿，亮色主题下反相）与带文字的职业 / 分支名。CSS · 可用Vue · 实验攻击范围 Range同现网 Widget:Range：自身实心蓝、可攻击格灰框、范围外不画，只铺外接矩形。CSS · 可用Vue · 实验稀有度 Rarity星级：CSS 星形（游戏黄 / 正文色 / 稀有度色阶）或游戏原图；[data-rarity] 给表格 / 卡片的稀有度色轨。CSS · 可用Vue · 实验游戏内富文本 RichText技能 / 天赋 / 关卡描述里的 <@ba.vup> 这类标记 → .ak-rt-* 配色；Vue 版直接解析游戏原始标记与 blackboard 占位符。CSS · 可用Vue · 实验技能卡 Skill一个技能的摘要：图标（SP 类型色描边 + 底条）、名称、SP 类型 / 触发、消耗 / 初始、描述；列表 / 侧栏用，干员页正文用全等级表。CSS · 可用Vue · 实验技能等级选择 SkillLevels1–7 级 + 专精 Ⅰ–Ⅲ 的单选条。只给需要「当前等级」的场合（高亮全等级表的一行 / 钉住参数矩阵的一列）。CSS · 可用Vue · 实验技能参数矩阵 SkillMatrix全等级表的另一种对比法：描述只写一遍，参数一行一个、等级一列一个，有变化的格子才亮；悬停 / 钉住一列看该级数值。CSS · 可用Vue · 实验技能全等级表 SkillSheet干员页正文的技能：一张表列完 1–7 级 + 专精 Ⅰ–Ⅲ，初始 / 消耗 / 持续按列对齐，同现网 prts.wiki。CSS · 可用Vue · 实验SP 标签 Sp技力回复方式（绿自动 / 橙攻击 / 黄受击 / 灰被动）、触发方式，以及消耗 / 初始 / 持续三枚数值芯片。CSS · 可用Vue · 实验关卡 Stage关卡卡片（展示字编号 + 名字 + 理智 / 推荐等级）、行内关卡号、理智消耗。CSS · 可用Vue · 实验天赋卡 Talent一个天赋的摘要：名称 + 解锁条件 + 描述，左侧强调色条。列表 / 侧栏用，干员页正文用条件表。CSS · 可用Vue · 实验天赋条件表 TalentTable干员页正文的天赋：一张表列完各精英阶段 / 模组等级下的效果；表头开关切潜能加成、标出算法。CSS · 可用Vue · 实验信赖 Trust信赖读数：红心 + 百分比，模组 / 档案的解锁需求里用。CSS · 可用Vue · 实验语音 Voice语音记录列表：播放钮 + 标题 / 语种徽标 / 解锁条件 + 台词；语种切换只换文本与音频，全页同时只放一条。CSS · 可用Vue · 实验
组件 = 一段约定好的 HTML 结构 + 类名：模板作者（Lua / wikitext）输出这段结构，皮肤保证外观与主题；类名、状态类与数据属性的约定见贡献一个组件 · 命名与约定。
暂不纳入（wiki 场景优先级低）：OTP 输入、日期选择、富文本编辑器、评分、文件上传（MW 自带 Special:Upload）、Cookie 同意、会话超时、看板、价格表。需要时按同一套令牌补。