v0.5.87: fill ability loc tokens and tidy skill detail layout.

Co-authored-by: Cursor <cursoragent@cursor.com>

AGENTS.md

@@ -98,7 +98,7 @@ climperor/
 | `web/fetch_item_shop.py` | 官网商店 11 列目录（dota2.com.cn/itemscategory）+ 合成图 → `web/data/item_shop.json` + 图标 |
 | `web/fetch_items_meta.py` | Valve/OpenDota 装备描述 → 机制标签 → `web/data/items_meta.json`（`%token%` 用 special_values 填数；查询类 tags 共用 `mechanic_tags.py`） |
 | `web/mechanic_tags.py` | 上分帝 Web「机制」页共用标签（弱/强驱散、缠绕/缴械/沉默/锁闭/眩晕/妖术/破坏、睡眠/恐惧/嘲讽/致盲/束缚、隐身/虚无/吹风）+ 中文 labels；语义为「施加该效果」 |
-| `web/loc_format.py` | Valve 文案共用：去 HTML、填充 `%token%` / `{s:token}` |
+| `web/loc_format.py` | Valve 文案共用：去 HTML、填充 `%token%` / `{s:token}`（键 casefold；魔晶/神杖 `%bonus_<sv>%` 走 `values_shard`/`values_scepter`） |
 | `web/fetch_hero_abilities.py` | Valve herodata 技能/魔晶/神杖/天赋 + 驱散汇总 → `web/data/hero_abilities.json`；每条 ability 另有「施加」类 `tags`（与 `dispellable` 区分；`--tags-only` 可只重算）；`has_scepter`/`has_shard` 只信 Valve 显式 flag，Valve 移除升级后残留的 `scepter_loc`/`shard_loc` 文案会被清空；逐级相同的 `cast_points`/`channel_times` 合并为单值（施法前摇/吟唱时间）；可选 `--icons` / `--icons-only` 缓存 Steam CDN 技能图标 → `web/assets/ability_icons/`（先天用共用 `innate.png`，不拉 CDN） |
 | `web/fetch_ability_videos.py` | 官网技能演示 webm/mp4（Steam CDN；限速）→ `web/assets/ability_videos/`；A 杖/魔晶赋予技能（`granted_by_scepter`/`granted_by_shard`）CDN 名用 `<hero>_aghanims_scepter`/`<hero>_aghanims_shard`，本地文件名仍用 ability key |
 | `web/fetch_item_counter_stats.py` | OpenDota Explorer 近场次聚合：对阵英雄时敌方终局装备购买率/胜率，与同窗口该装备全局队伍基线作差 → `web/data/item_counter_stats.json`（可再生成缓存；观测证据，不作因果结论；weekly 软失败） |

CHANGELOG.md

@@ -4,6 +4,19 @@
 
 ## [Unreleased]
 
+## [0.5.87] - 2026-07-29
+
+### Fixed
+
+- 技能/物品文案填充：Valve 中文 `%token%` 与 `special_values` 名称大小写不一致、
+  以及魔晶/神杖 `%bonus_<sv>%` 指向升级通道时不再留下 `?`（如乌尔萨震撼大地
+  「减速4秒」、祸乱蚀脑魔晶冷却）。
+- 技能详情有演示视频时加宽右侧文案列、收窄视频上限，空间够时技能介绍尽量单行。
+- 技能详情特殊数值标签不再露出 Valve `<font>` 原文（如「眩晕时间」）；数值级差
+  保持单行；冷却/文案同底栏下沉，避免介绍区窄列竖排与多余滚轮。
+- 技能详情底栏蓝量靠右，不再贴着冷却时间。
+- 版本页笔记剥离 Valve `<font>` / `<span class="New|Subtitle">` 等标签，只保留换行。
+
 ## [0.5.86] - 2026-07-29
 
 ### Changed

web/export_relations_site.py

@@ -51,7 +51,7 @@ from shared.paths import (
 
 from serve_relations import WEB_DIR, build_payload
 
-SITE_VERSION = "0.5.86"
+SITE_VERSION = "0.5.87"
 DEFAULT_OSS_BASE = "https://climperor.oss-cn-shanghai.aliyuncs.com"
 
 

web/fetch_hero_abilities.py

@@ -328,7 +328,8 @@ def special_rows(sv: list) -> list[dict]:
     for row in sv:
         if not isinstance(row, dict):
             continue
-        heading = str(row.get("heading_loc") or "").strip().rstrip("：:").strip()
+        # Valve paints effect words with <font color=…>; strip for plain UI text.
+        heading = strip_html(str(row.get("heading_loc") or "")).rstrip("：:").strip()
         if not heading:
             continue
         value = fmt_num_list(

web/frontend/app.js

@@ -2254,7 +2254,7 @@ function mountSkillInspect(root, skillEnt, heroKey) {
   main.appendChild(head);
   const desc = document.createElement("div");
   desc.className = "skill-info-desc";
-  desc.textContent = skillEnt.desc_loc || "暂无描述";
+  desc.textContent = stripItemDesc(skillEnt.desc_loc) || "暂无描述";
   main.appendChild(desc);
 
   // Params panel, dota2.com.cn layout: a two-column "generic" grid of meta
@@ -2267,7 +2267,8 @@ function mountSkillInspect(root, skillEnt, heroKey) {
     row.className = "skill-param";
     const lab = document.createElement("span");
     lab.className = "skill-param-label";
-    lab.textContent = label + "：";
+    // Defensive: stale caches may still carry Valve <font> in special labels.
+    lab.textContent = stripItemDesc(label) + "：";
     const val = document.createElement("span");
     val.className = "skill-param-value";
     val.textContent = value;
@@ -2310,7 +2311,10 @@ function mountSkillInspect(root, skillEnt, heroKey) {
     main.appendChild(params);
   }
 
-  // Cooldown / mana footer with icons (actives only; passives have neither).
+  // Bottom cluster (costs + lore) shares one margin-top:auto so lore is not
+  // pushed past the column height after the sunk cooldown row.
+  const foot = document.createElement("div");
+  foot.className = "skill-info-foot";
   const passiveLike =
     skillEnt.target_label === "被动" || skillEnt.target_label === "光环";
   if (!passiveLike && (skillEnt.cooldown || skillEnt.mana_cost)) {
@@ -2342,15 +2346,16 @@ function mountSkillInspect(root, skillEnt, heroKey) {
       mp.appendChild(txt);
       costs.appendChild(mp);
     }
-    main.appendChild(costs);
+    foot.appendChild(costs);
   }
-
-  // Flavor lore line.
   if (skillEnt.lore_loc) {
     const lore = document.createElement("div");
     lore.className = "skill-info-lore";
-    lore.textContent = skillEnt.lore_loc;
+    lore.textContent = stripItemDesc(skillEnt.lore_loc);
-    main.appendChild(lore);
+    foot.appendChild(lore);
+  }
+  if (foot.childElementCount) {
+    main.appendChild(foot);
   }
 
   body.appendChild(main);
@@ -3160,8 +3165,10 @@ function statChip(icon) {
 }
 
 function patchNoteHtml(note) {
-  const esc = escapeHtml(note == null ? "" : String(note));
+  // Valve notes carry <br>, <font color=…>, <span class="New|Subtitle|…">.
-  return esc.replace(/&lt;br\s*\/?&gt;/gi, "<br/>");
+  // Keep line breaks; strip the rest so raw tags never leak into the UI.
+  const plain = stripItemDesc(note);
+  return escapeHtml(plain).replace(/\n/g, "<br/>");
 }
 
 function renderNotesList(notes) {
@@ -3250,7 +3257,7 @@ function renderPatchSection(root, title, html) {
   if (!html) return;
   const sec = document.createElement("section");
   sec.className = "patch-section";
-  sec.innerHTML = `<h3 class="patch-section-title">${escapeHtml(title)}</h3>${html}`;
+  sec.innerHTML = `<h3 class="patch-section-title">${escapeHtml(stripItemDesc(title))}</h3>${html}`;
   root.appendChild(sec);
 }
 

web/frontend/config.js

@@ -1,4 +1,4 @@
 /* Local defaults; production export overwrites via export_relations_site.py. */
-var SITE_VERSION = "0.5.86";
+var SITE_VERSION = "0.5.87";
 var ABILITY_VIDEO_BASE = "";
 var STATIC_ASSET_BASE = "";

web/frontend/index.html

@@ -5,8 +5,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>DOTA2 上分帝</title>
   <link rel="icon" href="/ui-icon/dota2_logo.png" type="image/png" />
-  <link rel="stylesheet" href="/style.css?v=0.5.86" />
+  <link rel="stylesheet" href="/style.css?v=0.5.87" />
-  <script src="/mobile-gate.js?v=0.5.86"></script>
+  <script src="/mobile-gate.js?v=0.5.87"></script>
 </head>
 <body>
   <div id="mobile-gate" class="mobile-gate" role="dialog" aria-labelledby="mobile-gate-title" aria-modal="true">
@@ -165,8 +165,8 @@
 
   <section class="detail" id="detail" aria-live="polite"></section>
 
-  <script src="/config.js?v=0.5.86"></script>
+  <script src="/config.js?v=0.5.87"></script>
-  <script src="/router.js?v=0.5.86"></script>
+  <script src="/router.js?v=0.5.87"></script>
-  <script src="/app.js?v=0.5.86"></script>
+  <script src="/app.js?v=0.5.87"></script>
 </body>
 </html>

web/frontend/style.css

@@ -1100,10 +1100,11 @@ body {
   min-width: 1.4em;
 }
 .hero-stat-attr-gain {
-  margin-left: 6px;
+  margin-left: auto;
   font-size: 13px;
   color: var(--muted);
   letter-spacing: 0.02em;
+  text-align: right;
 }
 /* Right-rail combat panel: Attack | Defense | Mobility side by side. */
 .hero-stats-combat-panel {
@@ -1413,24 +1414,27 @@ body {
   font-size: 13px;
   line-height: 1.4;
   color: rgba(232, 238, 247, 0.88);
-  white-space: pre-wrap;
+  /* Keep Valve paragraph breaks; collapse runs of spaces. Prefer one line when
+     the detail column is wide enough (see video/main flex share below). */
+  white-space: pre-line;
 }
 .skill-info-body {
   display: flex;
   flex-wrap: wrap;
-  gap: 18px 30px;
+  gap: 18px 24px;
   align-items: flex-start;
-  justify-content: center;
+  /* Spare width goes into the text column instead of centering a squeezed pair. */
+  justify-content: flex-start;
   /* Fill the hero-inspect column so the video's 16:9 intrinsic height can no
      longer push the row past the viewport and trigger a scrollbar. */
   flex: 1 1 auto;
   min-height: 0;
 }
 .skill-info-main {
-  flex: 1 1 340px;
+  flex: 1 1 420px;
   min-width: 0;
-  /* Cap the detail column so it does not stretch edge-to-edge (leaving a big
+  /* Cap when alone (no demo clip). With a video sibling, allow a wider column
-     empty band) when no demo video is cached beside it. */
+     so ability blurbs stay on one line when the panel has room. */
   max-width: 760px;
   /* height:100% pins this column to the body's definite height (same trick as
      the video) — align-self:stretch alone fails to shrink a column whose
@@ -1444,13 +1448,17 @@ body {
   overflow-y: auto;
   scrollbar-width: thin;
 }
+.skill-info-body:has(> .skill-info-video) .skill-info-main {
+  max-width: 920px;
+  flex: 1 1 480px;
+}
 /* height:100% resolves against the definite body height (set by the flex
    chain from .detail's fixed height), so the 16:9 intrinsic ratio can no
    longer push the player past the viewport — align-self:stretch alone can't
    shrink a replaced element below its intrinsic size. cover crops to fill. */
 .skill-info-video {
-  flex: 1 1 500px;
+  flex: 1 1 380px;
-  max-width: 820px;
+  max-width: 560px;
   min-width: 0;
   min-height: 0;
   height: 100%;
@@ -1475,7 +1483,9 @@ body {
 }
 .skill-specific {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
+  /* Wider tracks so multi-level values ("0.7 / 0.9 / 1.1 / 1.3") stay on one
+     line beside the label instead of leaving an empty band to the right. */
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   gap: 4px 20px;
   margin-top: 8px;
   padding-top: 8px;
@@ -1483,7 +1493,9 @@ body {
 }
 .skill-param {
   display: flex;
+  flex-wrap: wrap;
   align-items: baseline;
+  column-gap: 4px;
   min-width: 0;
   font-size: 13px;
   line-height: 1.45;
@@ -1494,22 +1506,29 @@ body {
   color: var(--muted);
 }
 .skill-param-value {
-  margin-left: 4px;
+  flex: 1 1 auto;
   min-width: 0;
   color: #fff;
   font-weight: 600;
+  /* Keep "0.7 / 0.9 / 1.1 / 1.3" on one line; grid adds columns instead of
+     stacking each tier vertically in a squeezed value span. */
+  white-space: nowrap;
+}
+/* Cooldown / mana + lore sink together so lore cannot overflow past the
+   column after margin-top:auto on costs alone. */
+.skill-info-foot {
+  margin-top: auto;
+  padding-top: 10px;
+  flex: 0 0 auto;
 }
 /* Cooldown / mana footer. Mana glyph is the official CSS gradient square;
    cooldown uses the downloaded dota2.com.cn cooldown.png. */
 .skill-bottom {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 26px;
-  /* Sinks the cooldown/mana footer to the column bottom (aligning with the
+  width: 100%;
-     stretched video); padding-top keeps the minimum gap when there is no
-     spare height to absorb. */
-  margin-top: auto;
-  padding-top: 10px;
 }
 .skill-stat {
   display: inline-flex;

web/loc_format.py

@@ -15,7 +15,11 @@ def fmt_num(v: float) -> str:
 def sv_lookup(
     special_values: list | None, prefer: str | None = None
 ) -> dict[str, list[float]]:
-    """prefer: None | 'scepter' | 'shard' — choose values_* channel when present."""
+    """prefer: None | 'scepter' | 'shard' — choose values_* channel when present.
+
+    Keys are stored casefolded so Valve Chinese locs (lowercase tokens) match
+    PascalCase special_values names.
+    """
     out: dict[str, list[float]] = {}
     for sv in special_values or []:
         if not isinstance(sv, dict):
@@ -37,18 +41,57 @@ def sv_lookup(
             chosen = sc
         elif prefer == "shard" and sh:
             chosen = sh
-        out[name] = [float(x) for x in chosen if isinstance(x, (int, float))]
+        floats = [float(x) for x in chosen if isinstance(x, (int, float))]
+        out[name.casefold()] = floats
         if sc:
-            out["scepter_" + name] = [
+            out[("scepter_" + name).casefold()] = [
                 float(x) for x in sc if isinstance(x, (int, float))
             ]
         if sh:
-            out["shard_" + name] = [
+            out[("shard_" + name).casefold()] = [
                 float(x) for x in sh if isinstance(x, (int, float))
             ]
     return out
 
 
+def _resolve_vals(
+    lookup: dict[str, list[float]],
+    key: str,
+    prefer: str | None,
+) -> list[float] | None:
+    """Resolve a loc token against the casefolded SV lookup.
+
+    Handles ``bonus_<svname>`` upgrade tokens that point at the base SV's
+    ``values_shard`` / ``values_scepter`` (or ``shard_``/``scepter_`` aliases),
+    including an extra ``bonus_`` when the SV name already starts with bonus_.
+    """
+    key_cf = key.casefold()
+    vals = lookup.get(key_cf)
+    if vals:
+        return vals
+    if prefer:
+        vals = lookup.get(f"{prefer}_{key}".casefold())
+        if vals:
+            return vals
+    if not key_cf.startswith("bonus_"):
+        return None
+    base = key_cf[len("bonus_") :]
+    if not base:
+        return None
+    vals = lookup.get(base)
+    if vals:
+        return vals
+    if prefer:
+        vals = lookup.get(f"{prefer}_{base}".casefold())
+        if vals:
+            return vals
+    for ch in ("shard", "scepter"):
+        vals = lookup.get(f"{ch}_{base}".casefold())
+        if vals:
+            return vals
+    return None
+
+
 def strip_html(text: str) -> str:
     """Remove HTML tags and collapse whitespace (no token filling)."""
     if not text:
@@ -74,10 +117,7 @@ def format_loc(
     lookup = sv_lookup(special_values or [], prefer=prefer)
 
     def repl_pct(m: re.Match) -> str:
-        key = m.group(1)
+        vals = _resolve_vals(lookup, m.group(1), prefer)
-        vals = lookup.get(key)
-        if not vals and prefer:
-            vals = lookup.get(f"{prefer}_{key}")
         if not vals:
             return "?"
         if len(vals) == 1: