v0.6.6: size drawer from hero grid; drop skill video side bars.

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

CHANGELOG.md

@@ -12,6 +12,13 @@
 
 - PC 选将 overlay 不再在顶栏头像下显示定位图标；仍保留网格「克/搭/补」与阵容分析条。
 
+## [0.6.6] - 2026-07-30
+
+### Changed
+
+- 英雄详情抽屉改为按 `#columns` 实测高度预留完整网格（含最后一排），剩余给抽屉；技能 Tab 不硬性规定高度，内容随抽屉 flex/滚动。
+- 技能演示视频在抽屉变矮时宽度随高度收缩，保持 16:9，避免左右黑边。
+
 ## [0.6.5] - 2026-07-30
 
 ### Changed

DESIGN.md

@@ -233,9 +233,10 @@ components:
 ## Layout
 
 桌面壳：顶栏固定高度区 + 可滚动 `main.board`；英雄页的英雄网格与固定高 `#detail`
-之间放置一行定位筛选。选中英雄后 `#detail` 使用共享固定高度：按视口预留顶栏 + 约 24% 英雄网格 +
+之间放置一行定位筛选。选中英雄后 `#detail` 使用共享固定高度：按视口预留顶栏 + **完整** `#columns`
-定位标签后取余，再 `clamp` 到约 `320–640px`（CSS 回退 `min(640px, calc(100dvh - 17.5rem))`），
+英雄网格实测高度 + 定位标签后取余，再 `clamp` 到约 `280–640px`
-Tab 切换不跳动；技能演示与文案左右排布，长 Tab（走势/对位等）在详情区内滚动。
+（CSS 回退 `min(640px, calc(100dvh - 26rem))`）。技能 Tab 不驱动抽屉高度，
+内容在抽屉内 flex/滚动；Tab 切换不跳动；长 Tab（走势/对位等）同理在详情区内滚动。
 技能演示片源为官网 16:9；有横向空间时加宽（上限约 720px / 列宽 58%），
 `aspect-ratio: 16/9` + `object-fit: contain`，勿用拉满高度的 `cover` 裁左右。
 

web/data/streamers.json

@@ -580,6 +580,27 @@
       "total_favorited": 842,
       "avatar": "streamer_avatars/zhedaxiaoyuwang.jpg",
       "profile_fetched_at": "2026-07-29T18:26:00+00:00"
+    },
+    {
+      "id": "xiaolu",
+      "platform": "douyin",
+      "profile_url": "https://v.douyin.com/wLV8LDRwC8k/",
+      "tagline": "科研小鹿",
+      "heroes": [
+        "enchantress"
+      ],
+      "nickname": "科颜熊",
+      "unique_id": "894277260",
+      "signature": "玩点不一样的dota 周更1～2期dota冷知识",
+      "following_count": 82,
+      "follower_count": 7263,
+      "total_favorited": 71000,
+      "avatar": "streamer_avatars/xiaolu.jpg",
+      "video": "streamer_videos/xiaolu.mp4",
+      "video_aspect": "544/960",
+      "video_fit": "cover",
+      "video_title": "【科研】冠绝游龙中单小鹿",
+      "profile_fetched_at": "2026-07-30T09:14:00+00:00"
     }
   ]
 }

web/export_relations_site.py

@@ -56,7 +56,7 @@ from shared.paths import (
 from seo_prerender import DEFAULT_SITE_ORIGIN, write_seo_bundle
 from serve_relations import WEB_DIR, build_payload
 
-SITE_VERSION = "0.6.5"
+SITE_VERSION = "0.6.6"
 DEFAULT_OSS_BASE = "https://climperor.oss-cn-shanghai.aliyuncs.com"
 
 

web/frontend/app.js

@@ -414,6 +414,15 @@ function renderBoard() {
     col.appendChild(grid);
     root.appendChild(col);
   }
+  // Filters change grid height; keep the open drawer from covering the last row.
+  if (
+    state.selectedKey &&
+    !detailDrawerClosing &&
+    !detailDrawerDrag &&
+    !$("#detail-drawer")?.classList.contains("is-collapsed")
+  ) {
+    applyDetailDrawerHeight();
+  }
 }
 
 function onHeroClick(key) {
@@ -447,23 +456,33 @@ let detailDrawerClosing = false;
 
 /** Cap / floor for the in-flow hero detail drawer (px). */
 const DETAIL_DRAWER_MAX_H = 640;
-const DETAIL_DRAWER_MIN_H = 320;
+const DETAIL_DRAWER_MIN_H = 280;
+
+/** Natural height of the attr hero grid (content-sized; not the clipped viewport). */
+function heroesGridContentHeight() {
+  const cols = $("#columns");
+  if (!cols) return 0;
+  const view = $("#heroes-view");
+  let pad = 0;
+  if (view) {
+    const cs = getComputedStyle(view);
+    pad = (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0);
+  }
+  // offsetHeight is the laid-out grid even when #heroes-view is overflow-clipped.
+  return Math.ceil(cols.offsetHeight + pad);
+}
 
 /**
- * Height that leaves topbar + a usable hero-grid strip + role tags visible.
+ * Drawer height = leftover after topbar + full hero grid + role tags.
- * Prefer ~24% of the viewport for the grid; never steal the whole screen.
+ * Skills / other tabs flex+scroll inside; do not size the drawer for skill content.
  */
 function detailDrawerTargetHeight() {
   const vh = window.innerHeight || 800;
   const topbar = document.querySelector(".topbar")?.offsetHeight || 60;
   const toolbar = document.querySelector(".hero-role-toolbar")?.offsetHeight || 52;
-  const chrome = topbar + toolbar;
+  const heroNeed = heroesGridContentHeight() || Math.round(vh * 0.36);
-  const heroPrefer = Math.round(vh * 0.24);
+  const gap = 8;
-  const heroReserve = Math.min(
+  const available = vh - topbar - toolbar - heroNeed - gap;
-    Math.max(140, heroPrefer),
-    Math.max(120, vh - chrome - DETAIL_DRAWER_MIN_H)
-  );
-  const available = vh - chrome - heroReserve;
   return Math.max(DETAIL_DRAWER_MIN_H, Math.min(DETAIL_DRAWER_MAX_H, available));
 }
 

web/frontend/config.js

@@ -1,5 +1,5 @@
 /* Local defaults; production export overwrites via export_relations_site.py. */
-var SITE_VERSION = "0.6.5";
+var SITE_VERSION = "0.6.6";
 var SITE_ORIGIN = "";
 var ABILITY_VIDEO_BASE = "";
 var STATIC_ASSET_BASE = "";

web/frontend/index.html

@@ -43,8 +43,8 @@
   }
   </script>
   <link rel="icon" href="/ui-icon/dota2_logo.png" type="image/png" />
-  <link rel="stylesheet" href="/style.css?v=0.6.5" />
+  <link rel="stylesheet" href="/style.css?v=0.6.6" />
-  <script src="/mobile-gate.js?v=0.6.5"></script>
+  <script src="/mobile-gate.js?v=0.6.6"></script>
 </head>
 <body>
   <h1 class="sr-only">DOTA2 上分帝</h1>
@@ -233,8 +233,8 @@
   </div>
   <footer class="heroes-site-foot" id="heroes-site-foot" aria-hidden="true"></footer>
 
-  <script src="/config.js?v=0.6.5"></script>
+  <script src="/config.js?v=0.6.6"></script>
-  <script src="/router.js?v=0.6.5"></script>
+  <script src="/router.js?v=0.6.6"></script>
-  <script src="/app.js?v=0.6.5"></script>
+  <script src="/app.js?v=0.6.6"></script>
 </body>
 </html>

web/frontend/style.css

@@ -478,9 +478,10 @@ body.detail-drawer-open .hero-role-toolbar {
 }
 
 /* In-flow bottom drawer: height animates so the tagbar above is pushed up.
-   Fallback reserves ~topbar + hero strip + role tags; JS may override --detail-fixed-h in px. */
+   Fallback leaves room for a full hero grid; JS sets --detail-fixed-h from
+   measured #columns height (skills tab does not drive drawer height). */
 .detail-drawer {
-  --detail-fixed-h: min(640px, calc(100dvh - 17.5rem));
+  --detail-fixed-h: min(640px, calc(100dvh - 26rem));
   flex: 0 0 auto;
   position: relative;
   z-index: 2;
@@ -1795,18 +1796,17 @@ body.detail-drawer-open {
   max-width: none;
   flex: 1 1 0;
 }
-/* Official demos are 16:9. Prefer a real widescreen frame (grow toward
+/* Official demos are 16:9. Size within max-width + max-height while keeping
-   720px / ~58% when the inspect column has room); never cover-crop sides.
+   aspect-ratio (do not force width — a short drawer used to clamp height and
-   Height follows width via aspect-ratio, capped by the panel so tall
+   leave pillarbox black bars). Never cover-crop sides. */
-   #detail no longer stretches the box into a near-square. */
 .skill-info-video {
   flex: 0 1 auto;
   align-self: center;
-  min-width: 220px;
+  min-width: 0;
   min-height: 0;
-  width: min(720px, 58%);
+  width: auto;
-  max-width: min(720px, 58%);
   height: auto;
+  max-width: min(720px, 58%);
   max-height: 100%;
   aspect-ratio: 16 / 9;
   object-fit: contain;