干员一览

列表 / 筛选页的样例。信息结构取自 prts.wiki 现网干员一览（= prts-widgets 的 CharList Widget）：两条提示 → 筛选（16 行）→ 排序 / 搜索 / 满潜能 · 满信赖 / 三种显示方式 → 复制短链接 · 分页 → 结果。筛选项、干员数据、筛选逻辑、地址栏 # 参数的写法都与现网一致（现网的短链接在这里照样能用），换的是视觉与排布；交互上能对着游戏的地方对着游戏——游戏自己的干员列表就有一套筛选 / 排序（ui/[uc]charsortfilter）。

源文件 preview/_src/pages/operators.html，python3 scripts/build-preview.py 生成。数据是现网页面的快照 preview/vendor/charlist/data.js（431 位干员，node scripts/fetch-charlist.ts 重抓）；头像 / 半身像不入库，运行时从 media.prts.wiki 取，取不到时留稀有度色的底框（表格里的头像同干员卡，垫 .ak-r-avatar，下面不再拉色条）。

preview/operators.html单独打开 ↗

页面与皮肤的分工

• Widget 这半：整页除了两条 {{Cbox2}} 提示都是 Widget 的输出。模板照旧往正文里放 #filter-filter（筛选项定义）与 #filter-data（每位干员一条 data-*），Widget 读它们、挂到 #root。样例页里那段脚本是 Widget 的替身；生产环境 = prts-widgets 用 @mooncellwiki/prts-design-vue 输出同样的结构——.ak-* 是设计系统组件，.ol-* 是这页自己的排布（筛选面板 / 工具条 / 结果表），放 Widget 的样式表。根节点标 ak-not-prose；Widget 自己管状态，标 data-no-toggle（皮肤脚本不再替它切换 .ak-chip）。
• 皮肤这半：这页没有章节标题，也就没有目录。皮肤对无目录页是 .ak-layout--no-toc：不让导轨，正文铺到阅读列 + 导轨之和（1464），右缘与有目录页面的导轨右缘、页眉工具列对齐——列表 / 表格密集页要的就是这份宽度，不收窄到阅读列（早先收窄到 1240，>1512 的屏上右边剩一条与导轨等宽的空白，现网反馈「无目录栏页面中的网页右侧空白栏」后改掉；常见的 1440 视口下两种宽度本来就一样，差别只在更宽的屏上）。样例页 front matter toc: false 就是这个类；页面只需藏掉页眉里那枚「本页目录」（真皮肤不输出它）。

筛选

现网是三块折叠面板共 16 行，每行 = 标题 + 全选 / 清除 + 一排深色大按钮；第一块一展开就是 72 个分支的一面墙，结果被推到两屏以外。这里把 16 行分成两层，默认只占三行，首屏就看得到结果。

• 常用的一直在：职业 / 稀有度 · 位置（位置并在稀有度那一行里）。
• 分支不平铺：选了职业才出现「分支」行，只列那几个职业的分支，一职业一组、行首是职业图标——游戏的筛选面板就是这样（profession_filter：左边一列职业 prof_item，选中后才展开该职业的分支 subprof_item）。取消职业时它名下已选的分支一并取消——职业与分支是「且」，留着只会筛出 0 条。从现网短链接进来、只带分支不带职业时整行照出（不然那个条件看不见也取消不了）。
• 其余 12 行进「高级筛选」：一枚整行的开关钮，默认收起，钮上写着里面有什么、已选几项，右端是开合记号：收起 ＋ / 展开 −，同可折叠面板（不用朝右的箭头——整行右端一个 › 像是要进下一页）。展开后左边竖排页签、右边一次只看一类，按「筛什么」归成五类（不是现网那三块的原样）：词缀 · 获取（词缀 / 获取途径 / 性别）· 六维 · 势力 · 出身地 · 种族。页签上带各自的已选数；开没开、停在哪个页签记在 localStorage。
  • 选项多的三类（势力 45 / 出身地 26 / 种族 39）带一个「找选项」输入框，只留名字里含那几个字的芯片（已选的一直留着）。
  • 六维六行的选项相同（卓越 / 优良 / 标准 / 普通 / 缺陷 / 其他），芯片等宽，上下对成列。
  • 归类只是摆法：筛选项与字段名仍来自数据（#filter-filter），数据里新增了没归类的字段会落到第一个页签。手机上页签横排。
• 每行 = 标签列 + 筛选芯片。标签列随本组最长的标签定宽（subgrid），手机上标签挪到选项上面。
• 职业 / 分支带游戏图标：游戏筛选面板用的同一套白线稿（职业 arts/ui/[uc]charcommon 的 icon_profession_*，分支 arts/ui/subprofessionicon/sub_*_icon，72 个齐全）。游戏里图标是一张白图、用 Image.color 着色，未选灰、选中蓝，与文字同色；这里同理——白线稿当 CSS 遮罩、颜色取 currentColor，选中 / 明暗主题都跟文字走，不切图。
• 选中的反馈分三层：芯片实底；所在行标签左缘出青条、露出「清除」（现网的蓝条 .enabled）；高级筛选钮与页签上出已选数——收起时也看得到里面有没有条件。
• 会筛出 0 条的芯片压淡（.is-empty，仍可点）：按「其余条件不变、再点这一项」算，不用点了才知道没有。
• 不设「全选」：全选与不选筛出的是同一批。「同时满足」只有词缀行有（同现网），是一枚小开关。
• 已选条件在结果栏再列一遍（可逐个 ✕、可「清除全部」）：筛选面板滚出视口后，仍看得到当前结果是怎么筛出来的。

排序

排序项 × 升降，一个下拉 + 一枚方向钮——游戏的排序钮就是一项两个方向（CharacterSortType 每种都有 _UP / _DOWN）。

• 现网六种 = 实装时间 / 名称 / 稀有度 × 升降，#_o=0…5 编号照旧。
• 加了八项数值（生命 / 攻击 / 防御 / 法抗 / 再部署 / 费用 / 阻挡 / 攻击间隔）：游戏干员列表本来就能按这些排（BY_HP / BY_ATK / BY_DEF / BY_RES / BY_RESPAWN / BY_COST / BY_BLOCKNUM / BY_ATKSPEED），现网表格把数值都列出来了却不能排。表格里点表头也行（降序 → 升序 → 回到默认）。写进地址栏是 _o=hp-d 这种形式，现网 Widget 不认（退回不排序）——要让短链接互通，Widget 得跟着加。
• 同值时的次序照游戏（CharacterUtil._CompareByChain 按 COMPARE_PRIORITY 依次比）：稀有度高的在前 → 职业（先锋 近卫 重装 狙击 术师 医疗 辅助 特种，GetProfessionPerioty）→ 名称。
• 数值按当前的「满潜能 / 满信赖」加算后的值排。

结果

三种显示方式同现网（#_d=0…2）。

表格。现网一行九栏，栏里把四个值叠成一摞（子职业 / 势力 / 出身地 / 种族；生命 / 攻击 / 防御 / 法抗 …），要对着表头数第几个才知道是哪项，数值也没法上下对齐着比。

• 一位干员 = 一个 <tbody> 两行：上行是身份 + 八项数值各占一列（Bender 等宽数字、右对齐）+ 势力 + 标签；下行是特性全文 + 获取方式。特性最长 80 多字，单独成行才不把数值列挤窄。特性格顶上一条弱线（--ak-border-subtle，比干员之间的线弱一级），把它和上面的分支 / 数值隔开。
• 加算了潜能 / 信赖、与基础值不同的格用强调色；当前排序的那一列铺淡青底。
• 表头吸在页眉下（top: var(--ak-header-h)，同 .wikitable.ak-sticky-head）。
• 特性里的 {{术语}} 是 .ak-term，提示气泡挂在 body 上按视口定位，不被表格裁掉；键盘聚焦也出。

卡片。结果区窄于 1000（平板 / 手机）时表格换成卡片——看的是结果区自己的宽度，不是视口。现网 ≤ 640 的卡片要点开才看得到数值，这里直接摊开成 4 × 2 的数值格。

半身像 / 头像。干员卡 .ak-op-card 网格，稀有度色渐变底 + 星 + 职业角标。按数值排序时卡片右上角带上那项数值——游戏干员列表同款（dyn_char_sort_info_item，#0098DC 底白字）：不然在这两种视图里看不出排序排的是什么。

现网 → 这里

现网	这里	说明
{{Cbox2}} ×2（公招计算 / 专属干员）	.ak-cbox--tip ×2 并排	窄了折行
FilterRow：标题 + 全选 / 清除 + Checkbox 大按钮	.ol-row：标签 + .ak-chip（aria-pressed）	去掉全选；清除只在有选中时出现
「同时满足」复选按钮	.ak-switch--sm
三块折叠面板（筛选 / 六维筛选 / 势力 · 出身地 · 种族）	常用三行 + 「高级筛选」.ol-more / .ol-adv（竖排页签 五类）	按钮 aria-expanded，页签 role="tab"、方向键切换
排序方式：六个单选按钮	.ak-select + 方向钮	多了八项数值
搜索框	.ak-search	多搜代号 / 英文名 / 日文名（现网也搜，只是占位文字没写）；不分大小写
满潜能 / 满信赖	.ak-switch--sm ×2	半身像 / 头像视图下没有数值可加算，收起（按数值排序时保留）
表格 / 半身像 / 头像	.ak-btn-group（aria-pressed）
复制短链接（alert）	.ak-btn--ghost + Toast
Pagination（50 / 100 / 200）	.ak-pagination + .ak-select	上下各一条；在底部翻页回到结果开头
Long / Short 行 + LHead / SHead	.ak-table.ol-table（两行一组）	合成一种表格
Card（≤ 640，折叠）	.ol-card（< 1000，摊开）
Half：七层游戏素材拼的图鉴卡	.ak-op-card（竖 1 : 2）	不再拼 干员图鉴_* 那七张图
Avatar（只有头像）	.ak-op-card--sm	带名字
没有结果：空白	.ak-empty + 「清除全部条件」

没有照搬的

• .ol-* 没进设计系统。筛选行（.ol-row）、结果栏这几块敌人一览 / 道具一览也会用到（现网它们共用 FilterRow），等第二张列表页做出来再按两边的共同部分提成组件，现在提会提歪。
• 没有做无 JS 的兜底（现网也没有）：<noscript> 只给一句提示。要兜底的话让模板另出一张 wikitable。