Jianghu · 装备合成界面设计规范 v1
装备合成 · 界面设计规范
3 件同款同品质合 1 件 · 最高 ★5 · 每星 ×1.5 · 只吃「没穿、没锁」的 · 消耗铁 + 石 + 金币
2026-10-11 · v1 · 设计：蔡少芬（UI）· 依据：实读 src/warehouse.js / index.html / server/equips.mjs / server/equipDefs.mjs
状态：已落地（与功法合成同一批原语，本文记录裁定与差异；验收脚本 tools/verify_equip_fuse_ui.mjs）
§0 这份规范建立在什么之上
复用 装备合成不是新界面，它把 docs/功法合成界面规范.html（2026-10-11 上午落地）那一整套原语搬到了装备页：
| 原语 | 功法侧 | 装备侧 | 差异 |
|---|---|---|---|
| 星带 .art-stars | 名字条正下方、5 颗 11px 星 | 同左 | 无（选择器从 .art-cell 放宽到 .wh-cell，一处样式两边共用） |
| 合印 .art-fuse | 右下、品阶圆点正上方 | 左下、加工角标正上方 | 装备格右下是一排状态角标（套/🔒/?），放那儿必撞 |
| 金内环 .can-fuse::after | 同左（inset 1px / 1.5px 金线） | 无 | |
| 侧栏合成区块 .fuse-box | 同左（h / parts / cost / act / hint 五段） | 消耗胶囊从「纸+金币」换成「铁+石+金币」 | |
| 一键合成按钮 | 功法筛选条尾端 | 装备筛选条尾端 | 无 |
🔴 为什么坚持"同一套原语"而不是给装备另画一套：玩家记住的是一种语言（金星带 = 升过星、金印 = 能合）。 两套并行的那天，就是"同屏两种金、两种印、两种位置"的开始。
§1 星带（装备格）
🗡木剑
🗡木剑 🗡木剑 🗡木剑 +10套
0 星不渲染整条（左一："有没有这条白底小带"就是一眼信号，比 5 颗全暗星干净）
★1 / ★3 / ★5 三档（★5 是最右那格：5 颗全亮，与 +10、套装角标同屏也不打架）
几何：top:24px（名字条下方）、5×11px 星 + 1.5px 间距、居中、pointer-events:none
⚠️ 一律 px 硬编码 —— 仓库网格 minmax(88px,1fr)，最窄 88px，任何 em/% 都会在某档宽度撞角标
星带的含义与 +N 不同必须分清
+N 是加工（加法层，+1~+10 累积到 +20%~+132%），星带是合成（乘法层，每星 ×1.5）。 两者都只放大「落库定型的基础属性」，都在详情卡里各自标出来源（基础 22 ×3.38（含加工 +3））—— 玩家不需要心算，但必须看得出"这两个不是一回事"。
§2 合印：三档视觉
🗡木剑 +2
🗡木剑 2/3
🗡木剑 合
🗡木剑 合
1 件 → 不标（左一：绝大多数格子都是 1/3，全标等于没标）
2 件 → 灰金小印「2/3」（"还差一件"的提示，非金底）
≥3 件 → 金印「合」+ 格子金内环（左三、左四）
位置：left:3px; bottom:22px —— 左下、加工角标正上方
内环必须用 ::after：.wh-cell.q-legend 的描边动画全程占着 box-shadow， 用 box-shadow 写的内环在传奇格子上会静默消失，而传奇恰恰是玩家最想合的
判"能合"只看件数裁定
格子上的印只管"同款同品质凑够 3 件没有"；材料够不够在侧栏合成区块里说（红字列缺口）。 理由与功法侧一字不差：格子上叠第二层禁用语义（"书够了但没纸"）会让印的含义变糊， 而 88px 的格子里也放不下第二句话。
原料池的判据由后端定死：wornBy == null && !locked。 前端若把穿着/锁定的算进来，格子会亮印而点下去 409 —— 承诺与结果不一致是最伤信任的一类 bug。
§3 侧栏「装备合成」区块
<div class="fuse-box ready"> <!-- 可合时加 .ready（金底）；缺材料时不加 --> <div class="fuse-h">装备合成 <em>3 件同款同品质 → 1 件升 1 星</em></div> <div class="fuse-parts"> <span class="fp-ic"><装备图标></span> <span class="fp-x">×3</span> <span class="fp-arrow">→</span> <span class="fp-ic"><装备图标></span> <b class="fp-star">★1</b> </div> <div class="fuse-cost"> <!-- 三枚胶囊，数字全来自后端表 --> <span class="fc-item">⛓ 铁 <b>×13</b></span> <span class="fc-item">🪨 石 <b>×10</b></span> <span class="fc-item">🪙 金币 <b>×960</b></span> </div> <div class="fuse-act"><button class="btn">合 成</button><span class="fuse-hint">…</span></div> <div class="fuse-hint">3 件同款同品质合 1 件，最高 ★5；装等取三件里最高，词条重新生成、加工清零；穿在身上与锁定的不参与。</div> </div>
位置与四态
- 位置：详情卡之后（不是塞进
.cd-actions—— 那一行已有鉴定/加工/锁定/分解四个按钮，
加第五个必然折行拆散前一对）。与功法的落点规则一致。
- 可合：区块金底、按钮可点、hint 空或「可合 N 组」；
- 还差装备：按钮 disabled、灰字「还差 N 件同款同品质的装备」；
- 缺材料：按钮 disabled、红字「铁差 12 · 金币差 3,400」（
.fuse-hint.lack）；
- 已满星：按钮 disabled、「已是 5 星（满）」。
文案即原因 —— 与加工按钮的 title="已达上限 +10" 是同一套语言。消耗数字一律来自后端表 （/api/warehouse 的 fuseCost × fuseQualityMul），前端只拼不算。
§4 一键合成入口
落在装备筛选条尾端：<button class="btn wh-fuse-all" data-efuseall="1">一键合成 <span class="fa-n">2 组</span></button>
- 组数 =
evFusePlan()的链式模拟（与后端fuseAll同口径：从低星往高星逐级推、合出的高星参与下一级）；
- 不受当前筛选影响 —— 这点必须写进
title，否则玩家开着「只看武器」点下去，会以为只合了视图里的；
- 材料只够一部分时按钮仍可点，旁边红字「材料只够合 N/M 组」；一组都合不了才 disabled。
§5 详情卡与浮层里的星级
| 位置 | 写什么 | 为什么 |
|---|---|---|
| 浮层头部徽记行 | ★3 ×3.38（金色） | 一眼读出"这件被升过星、放大多少" |
| 「基础属性」分节小字 | 1 项 · 含加工 +3 · ★3 ×3.38 | 两段放大来源并排，不写总倍率（.tp-sec 不换行，超 ~20 半角宽会溢出卡片） |
| 大数字下方小字 | 基础 22 ×3.38（含加工 +3） | ★N 是乘算，用"+"写法会把乘说成加，★3 的数字对不上 |
| 次级信息横排 | 星级 ★3 · 属性 ×3.38｜加工 +0/+10｜出处 合成所得 | 出处那一栏：合成产物 from.mob='fuse'，显示「合成所得」（不特判会写成「第 1 关 · 青石村口 · fuse」） |
倍率只许有一处定义必须遵守
starMul 由 GET /api/warehouse 下发（后端 equipDefs.equipStarMul，每星 ×1.5）。 前端 evStarMulOf() 优先读这张表，只在老后端/单测时退回 1.5^star。 两边各写一份曲线 = 迟早"界面说 ×2.25、打怪按别的数算"，而且没人立刻发现。
§6 验收判据
接口层：node tools/verify_equip_fuse.mjs（75 条）—— 3 合 1 账目、原子性、满星、混着合、链式推、材料墙、★倍率真生效（卡片层 + 战斗层）、穿/锁排除、只吃最老的 3 件、模板不出某品质、老存档兼容。
界面层：node tools/verify_equip_fuse_ui.mjs（38 条）—— 星带条数与亮星数、三档合印与金内环数量、侧栏区块（消耗三枚胶囊 / 按钮态 / 文案）、一键合成组数、tips 星级、点一次真合成后的 DOM 变化。
截图落 _shots/equip_fuse_ui/（6 张：网格 / 合印 / 侧栏区块 / tips / 确认框 / 合成后）。改版式必须看图。
§7 不做的事（有意留白）
- 不在格子上放按钮：88px 格子里已有名字/星带/合印/加工角标/状态角标/穿戴名牌六个元素，再塞按钮必压图。
- 不在 tips 里放按钮：
.wh-tip写死pointer-events:none，它是"看"的浮层。要放按钮就得改造共用浮层 —— 三处共用一份 tips 的约定比这个功能重要。
- 不给"合成预算表"单开一页：材料缺口就在侧栏红字里说，玩家不需要第二个界面去看"还差多少"。
Jianghu · 挂机 · 装备合成界面规范 v1 · 2026-10-11 · 与 docs/功法合成界面规范.html 配套
实现：server/equips.mjs（fuse / fuseAll）、server/equipDefs.mjs（星级与倍率）、src/warehouse.js（星带 / 合印 / 合成区块）、index.html（.wh-cell 下的一套原语）
