公招计算
工具页的样例：现网公招计算（= prts-widgets 的 HrCalculator Widget）的重新设计。和干员一览不同，这页不只换视觉——算法的口径也照游戏改了：现网把选中标签的所有子集各列一行，这里按游戏的招募流程来（招募位上出现的标签 → 至多选 3 个），回答的是「这几个里选哪几个」。不让选招募时限：不按时限筛干员，保底按 9:00 算。干员数据、词缀、地址栏 ?filter= 的写法与现网一致，现网的分享链接在这里照样能用。
源文件 preview/_src/pages/recruit.html，python3 scripts/build-preview.py 生成。数据是现网 Widget 运行时那条 cargoquery 的快照 preview/vendor/recruit/data.js（160 位可公开招募的干员，node scripts/fetch-recruit.ts 重抓）；头像不入库，运行时从 media.prts.wiki 取，取不到时留稀有度色的底框。
对着游戏
规则与样式都查了游戏本体（2.7.71 客户端 + gacha_table），页面上凡是写「游戏里」的都有出处：
| 游戏 | 出处 | 页面上 |
|---|---|---|
| 至多选 3 个标签 | RecruitBuildConfigStateBean.MAX_TAG_SELECT_NUM = 3；界面标题「职业需求（最多3项）」 | 组合只算 1–3 项 |
| 时限 → 稀有度范围 | recruitRarityTable：≤ 3:50 出 1–4★，4:00–7:30 出 2–5★，7:40–9:00 出 3–5★ | 不按时限筛干员（带齐标签的 1–5★ 都列）；保底按 7:40–9:00 那一段算（只看 3★ 以上） |
| 稀有标签 → 星级 | specialTagRarityTable：高级资深干员 → 6★，资深干员 → 5★ | 6★ 只在组合含【高级资深干员】时算 |
| 标签在招募位上的次序 | 招募页照服务器给的 slot.tags 原样一行三个摆（RecruitBuildConfigStateBean.SetData 不排序），服务器给的是 tagId 升序 | 面板照 tagId 升序排：职业 1–8 → 位置 9–10 → 词缀 12–29；资质三个（11 / 14 / 17）单独成行放最上 |
| 标签钮四种皮 | 预制件 recruit_page 的 btn_tag_item：btn_request #313131 白字 / btn_request_choose #0098DC / btn_request_r 深灰 + 黄色半调网点、黄字 #FFEB04 / btn_request_r_on #FFD800 黑字 | 组合标签 .hr-tagbtn；稀有标签芯片选中是黄底黑字 |
| 可公招干员、不可寻访（绿字）的干员 | recruitDetail 的名单 | 与现网快照逐一核对：160 位、标签、18 位「限」全部一致 |
游戏客户端里没有的：标签组合 → 干员的计算（抽取在服务器），所以也没有「保底」的界面可以照；这部分是页面自己的设计。
现网的问题
- 组合不限个数。结果把选中标签的每个子集各列一行——选 5 个标签就有 4 个、5 个标签的组合，游戏里最多只能选 3 个，这些行选不出来。
- 看不出保底。行按「平均星级」排（1★ 按 3.5 计），一行保底几星要自己在头像底色里找最低的那个；1★ / 2★ 一直混在里面，而 9:00 的招募根本不出它们。
- 头像只有底色区分稀有度、没有名字；分享链接是一张两行的
wikitable，整段 URL 摊在页面上。
标签面板
- 四行芯片，个数不限。没有面板头，也不封顶——招募位上出现几个就点几个（现网链接里带多少个都照收）。选完一个招募位，点面板下面那一行右端的「清空」从头选下一个。
- 四行按社区通行的归类摆：资质（高级资深干员 / 资深干员 / 新手）· 职业 · 位置 · 词缀——游戏数据
gachaTags自己不分组，友站也是这四类。归类同现网：「新手」归资质，「支援机械」归词缀（游戏数据里两个都同治疗、支援一样写在tagList里，只是只有 2★ / 1★ 带）。 - 次序对齐游戏招募页：招募页照服务器给的标签原样一行三个摆、不排序，服务器给的是 tagId 升序（职业 1–8 → 位置 9–10 → 词缀 12–29）；面板照这个从上到下、从左到右排，跟着游戏扫一遍就能选完。资质三个（高资 11、资深 14、新手 17）在游戏里夹在词缀中间，单独成行放最上（同现网）。
- 两个稀有标签另一套皮，同游戏：芯片未选时金字金框，选中黄底黑字（普通标签选中是青底）；出现在组合里是深灰底 + 黄色半调网点、黄字。
- 职业带图标：同干员一览，游戏筛选面板的白线稿当 CSS 遮罩、颜色取
currentColor。 - 单选即可保底的标签带一枚小方块（右上角，颜色 = 保底的稀有度）：不用点就知道哪些标签一出现就值得选。由数据算出，不是写死的。
不选招募时限
游戏里 1:00–9:00、每 10 分钟一档，稀有度范围有三段（recruitRarityTable）。页面不让选：不按时限筛干员，保底按 9:00 算——招保底就是拉满 9:00，两个稀有标签也只在 9:00 锁定：
- 带齐标签的 1–5★ 都列出来（2★ 新手、1★ 支援机械照列——要它们得把时限压短）；6★ 只在组合里有【高级资深干员】时算进来（同现网 Widget 的
can5）。 - 保底只看 3★ 以上的（9:00 出 3–5★）；整组都低于 3★（新手、支援机械）时才取最低那一星。不然【支援】【削弱】【控场】【先锋 + 控场】等十几组会被混进来的 1★ 支援机械拉成保底 1★。
- 页面上不出时限提示，只在保底速查的标题旁写一句「时限 9:00」。
结果
- 每组至多 3 个标签；一组的干员 = 带齐这几个标签的。保底 = 9:00 时这组里最低的星级（只看 3★ 以上，见上）。
- 按保底分层：保底 6★ / 5★ / 4★ 各一层，层标题带稀有度色；整组都是 1★ 的单列一层「必得支援机械」；保底 3★ 及以下的（含整组只有 2★ 新手的）收在最后一层「不保底」，前面有保底层时默认收起、点层标题展开，「清空」后再选又收起。层内标签少的在前、干员少的在前。
- 不写结论句：层标题已经说了保底几星、几组。标签面板下面一行：左边图例（「限」、单选保底的方块），右端「清空」与「复制分享链接」（同一样式）。一个标签都没选时结果区是保底速查。
- 多加一个标签却圈不出更小范围的组合不列（与它的子组合是同一批干员），列表短一截。比的是是不是同一批人，不只是人数：稀有标签会改星级范围，【高级资深干员】+ 近卫 + 支援（帕拉斯、银灰）与 近卫 + 支援（杜宾、诗怀雅）人数一样，却是另一批干员，照列。
- 每组一行：左边是标签（游戏的深灰标签钮），行左的色条 = 保底的稀有度；右边是全部干员——头像 + 名字，整块链到干员页；悬停 / 聚焦出提示（星级、全部标签）。只能通过公开招募获得的右上角一枚「限」（现网的绿色「限」字，判定同现网：获得方式里没有任何寻访）。
- 头像垫稀有度色的底（同现网的
.r-0…5，颜色换成令牌--ak-rarity-N）：一组里常混着几种星级，保底 4★ 的组里哪几位是 5★、哪位是混进来的 1★，扫一眼底色就能分开——手机上头像小，只靠星级和一条细色条要逐个辨认。底色带渐变，画法照现网的抽卡模拟器（GachaSimulatorV2的.rarity-5/.rarity-4）：上面稀有度色、往下褪成浅灰#e6e5e2，6★ 另是斜向 32° 的 奶油#eee2b8→ 橙。走向与两头的浅色取自模拟器，稀有度色仍用令牌——模拟器自己的 4★ 紫偏灰，这里 1★ 也是灰底，照搬分不开。这层底已经收成通用的.ak-r-avatar，干员卡 / 干员一览的头像同一套。 - 头像同首页的干员卡：左上角黄色星级原图（
rarity_yellow_N）、左下角职业图标（头像同款小图标，半透明黑底框），按这里的小头像缩小；星级比等比略大，五星不压右上角的「限」。星级同样垫半透明黑底、贴着左上角：黄星直接压在 5★ 金、2★ 黄绿的底色上看不清；底色之外留着星级，分辨星级不只靠颜色。 - 筛选结果里头像大一号：64px 头像、13px 名字（名字左右各借半个列间距，五个字的名字不折行）；保底速查的格子与手机上是 56px，一屏多放几组。
- 窄于 760 时标签挪到干员上面。
保底速查
一个标签都没选时，结果区不留白：列出全部能保底 4★ 以上的最小组合（9:00；不含【高级资深干员】【资深干员】【新手】【支援机械】——稀有标签自己就是保底，新手 / 支援机械只出低星），按保底 5★ / 4★ 分层、排成多列的格子（格子里不再画稀有度色条——层标题已经标了，一屏几十条色条只添乱）。「多加标签没把保底抬高」的不列。这就是现网「公开招募」页手工维护的那几张 TAG 组合表——这里由数据算出，新干员进公招后不用人改。友站的「查看保底词条组合」开关是同一件事。
地址栏
?filter=与现网一致：@urlpack/json（MessagePack → Base58）编码的{ profession, position, rarity, tag }四个位图，分组与组内次序照 Widget 的utils.ts——页面上怎么摆（次序对齐游戏招募页）不影响编码。样例页自带一份几十行的编解码，与@urlpack/json逐字节对过。- 「复制分享链接」一枚按钮（与「清空」同一样式）+ Toast，不再把整段 URL 摊在页面上。
现网 → 这里
| 现网 | 这里 | 说明 |
|---|---|---|
FilterRow ×4：标题 + 全选 / 清除 + Checkbox 大按钮 | .hr-row：标签 + .ak-chip（aria-pressed） | 去掉全选；清除并成面板下面那一行的一枚「清空」 |
分享链接 wikitable | .ak-btn + Toast | |
table：Tags | 可能出现（≤ 640 换成卡片） | .hr-tier 按保底分层 + .hr-combos + .hr-combo 行 | 层标题带稀有度色，「不保底」那层可收起；行左色条；窄了标签在上 |
| （无） | 保底速查：.hr-combos--grid 多列格子 | 没选标签时出 |
.tag（#313131 白字） | .hr-tagbtn | 同色，去掉投影换成底边 |
Avatar + 稀有度底色块 .r-0…5 | .hr-op：头像（稀有度底色）+ 名字 | 底色照旧，颜色换成 --ak-rarity-N；头像左上角星级、左下角职业图标，同首页干员卡 |
| 绿色「限」 | .hr-op__only |
没有照搬的
- 截图识别（友站有：OCR 招募界面截图直接点上 5 个标签）没做——要引 OCR 引擎或第三方接口，是 Widget 的功能决定，不是版式问题。将来「识别截图」按钮放在「清空」旁边。
.hr-*没进设计系统。筛选行与干员一览的.ol-row是同一个东西，等两边一起提成组件。- 没有做无 JS 的兜底（现网也没有）。