feat(website): 官网首页首屏下面直接接一段下载区（版本 + 装什么 + 卡片）

- 首屏下面新增 `#download` 一整段，与 /download.html 是同一套类名、同一个 `assets/download.js`：访客不跳页就能下；完整的下载页仍然保留（顶栏「下载」指着它）； - `download.js` 改成两个页面都能跑：首屏那颗主按钮只有下载页有，所以它不再是必需元素 —— 之前首页没有它，整个脚本会静默 return，那一段什么也不渲染； - **兜底版本号改成"读页面自己显示的那一份"**：下载页读 `<meta name="ch-version">`，首页读顶栏那个版本徽标（`.brand-ver`）。两个都是 `pnpm version:bump` 的既有落点，所以不必为首页再添一个手写版本号（落点数仍是 14）； - 顺带：首页那条 Linux 安装命令现在也会跟着选中版本钉上 `--version`（原先不带）； - 修一处"字看着被切断"：两个分段控件是**横滚**的，而滚动条被藏了起来（`scrollbar-width: none`），装不下时末尾那个版本号就是硬切一刀、还没有任何提示。现在溢出时右边缘淡出，滚到最右自动撤销；主按钮下面那行 mono 文件名也从 0.68rem 提到 0.75rem（它原本是全站最小的字，再小就看着像被裁掉一截）。
2026-10-06 19:56:51 +08:00
1 parent 9d5ac7adf9
commit e51879667a
@@ -41,8 +41,16 @@
  const $ = (selector, root = document) => root.querySelector(selector);
  const $$ = (selector, root = document) => [...root.querySelectorAll(selector)];

-  /** 页面上那份兜底版本号，由 `pnpm version:bump` 与根 package.json 一起维护 */
-  const FALLBACK_VERSION = ($('meta[name="ch-version"]')?.content ?? '').trim();
+  /**
+   * 页面上那份兜底版本号。两个宿主页面各有一个来源，**两个都是 `pnpm version:bump` 的落点**：
+   * 下载页是 `<meta name="ch-version">`，官网首页是顶栏那个版本徽标（`.brand-ver`）。
+   * 所以这里不必再添一个手写版本号 —— 页面自己显示的那份就是兜底值。
+   */
+  const FALLBACK_VERSION = (
+    $('meta[name="ch-version"]')?.content ??
+    $('.brand-ver')?.textContent ??
+    ''
+  ).trim();

  const CHEVRON =
    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" ' +
@@ -197,8 +205,9 @@
  const groupStatus = $('#group-note');
  const grid = $('#dl-grid');
  const gridNote = $('#dl-note');
-  const primary = $('#ver-primary');
  const command = $('#cmd-linux code');
+  /** 首屏那颗主按钮只有下载页有（首页把这一整段接在了首屏下面，不需要再给一颗） */
+  const primary = $('#ver-primary');

  if (
    !versionHost ||
@@ -209,7 +218,6 @@
    !groupStatus ||
    !grid ||
    !gridNote ||
-    !primary ||
    !command
  ) {
    return;
@@ -358,6 +366,22 @@
    }
  }

+  /**
+   * 分段控件横着装不下时，右边缘淡出一点。
+   *
+   * 这两排是**横滚**的，而滚动条是藏起来的（`scrollbar-width: none`，见 styles.css）——
+   * 不给人一点提示的话，末尾那个版本号看上去就是"被切断了"。滚到最右就不用再淡了。
+   */
+  function syncOverflowHint(host) {
+    const overflow = host.scrollWidth - host.clientWidth;
+    const atEnd = overflow <= 1 || host.scrollLeft >= overflow - 1;
+    host.classList.toggle('is-overflowing', !atEnd);
+  }
+
+  function watchOverflow(host) {
+    host.addEventListener('scroll', () => syncOverflowHint(host), { passive: true });
+  }
+
  /* ══════════════════════════════════════════════════════════════════════
     版本分段控件（条目按发布列表建）
     ══════════════════════════════════════════════════════════════════════ */
@@ -393,7 +417,13 @@
    markSelected(versionHost, state.version);
    // 首帧之后重量一次：楷体是 CDN 来的，字体落定前量出来的宽度是错的
    moveVersionIndicator(false);
-    if (motion) motion.nextFrame(() => moveVersionIndicator(false));
+    syncOverflowHint(versionHost);
+    if (motion) {
+      motion.nextFrame(() => {
+        moveVersionIndicator(false);
+        syncOverflowHint(versionHost);
+      });
+    }
  }

  /* ══════════════════════════════════════════════════════════════════════
@@ -414,7 +444,13 @@
    }
    markSelected(groupHost, state.group);
    moveGroupIndicator(false);
-    if (motion) motion.nextFrame(() => moveGroupIndicator(false));
+    syncOverflowHint(groupHost);
+    if (motion) {
+      motion.nextFrame(() => {
+        moveGroupIndicator(false);
+        syncOverflowHint(groupHost);
+      });
+    }
  }

  /* ══════════════════════════════════════════════════════════════════════
@@ -573,7 +609,8 @@
    renderGroupStatus(group);
    renderGridNote(release);

-    // 首屏那颗按钮跟着「版本 + 分组」走：默认就是这一版客户端的安装版
+    // 下载页首屏那颗按钮跟着「版本 + 分组」走：默认就是这一版客户端的安装版
+    if (primary) {
      const first = resolveFiles(group.cards[0], release)[0];
      if (first) {
        primary.href = first.asset.url;
@@ -582,6 +619,7 @@
        primary.href = release.notesUrl;
        primary.textContent = '去 Releases 挑一份';
      }
+    }

    // Linux 那一行：钉到当前选中的版本（老版本 tag 不是 x.y.z 形式时不带 --version）
    const pinned = /^\d+\.\d+\.\d+$/.test(release.version) ? ` --version ${release.version}` : '';
@@ -644,6 +682,8 @@
    }

    state.version = state.releases[0].tag;
+    watchOverflow(versionHost);
+    watchOverflow(groupHost);
    renderVersionTabs();
    bindGroupTabs();
    render();
@@ -653,6 +693,8 @@
      () => {
        moveVersionIndicator(false);
        moveGroupIndicator(false);
+        syncOverflowHint(versionHost);
+        syncOverflowHint(groupHost);
      },
      { passive: true },
    );
@@ -2138,6 +2138,13 @@ html:not(.reveal-pending) .display .reveal-grad {
  display: none;
 }

+/* 装不下时右边缘淡出一点：滚动条是藏起来的，不提示的话末尾那个版本号像被切断了。
+   类名由 assets/download.js 按实际是否溢出挂上/摘掉（滚到最右就摘掉）。 */
+.dl-seg.is-overflowing {
+  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
+  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
+}
+
 .dl-seg-item {
  position: relative;
  z-index: 1;
@@ -2399,7 +2406,7 @@ html:not(.reveal-pending) .display .reveal-grad {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
-  font-size: 0.68rem;
+  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--ink-2);
  overflow-wrap: anywhere;
@@ -2412,12 +2419,13 @@ html:not(.reveal-pending) .display .reveal-grad {
  color: var(--ink-3);
 }

-/* 主按钮下面那行：点下去到底拿到哪个文件（自托管场景里这个要看得见） */
+/* 主按钮下面那行：点下去到底拿到哪个文件（自托管场景里这个要看得见）。
+   字号别往 0.68rem 以下压 —— 它是全站最小的字，再小就看着像被裁掉了一截。 */
 .dl-card-file {
  margin-top: 12px;
  font-family: var(--mono);
-  font-size: 0.68rem;
-  line-height: 1.65;
+  font-size: 0.75rem;
+  line-height: 1.7;
  color: var(--ink-3);
  overflow-wrap: anywhere;
  max-width: 100%;
@@ -2469,6 +2477,6 @@ html:not(.reveal-pending) .display .reveal-grad {
  }

  .dl-card-file {
-    font-size: 0.62rem;
+    font-size: 0.7rem;
  }
 }
@@ -182,6 +182,46 @@
        </div>
      </section>

+      <!-- ═══════════════════════ 下载：首屏下面直接给安装包 ═══════════════════════
+           与 /download.html 是同一段（同一套类名、同一个 assets/download.js）——
+           放这儿是为了让访客不跳页就能下；完整的下载页仍然保留（顶栏「下载」指着它）。 -->
+      <section class="band band-paper" id="download">
+        <div class="wrap">
+          <h2 class="h2">装什么，挑一下</h2>
+          <p class="lead narrow">
+            四个交付物互不依赖安装顺序，但
+            <strong>服务端要先有一台机器跑着</strong>
+            ，另外三个才连得上。 下面的版本与文件清单是当场从本仓库的 GitHub Releases
+            读出来的：显示什么，就真能下到什么。
+          </p>
+
+          <!-- 版本选择：Tab 由 assets/download.js 按发布列表建出来 -->
+          <div class="dl-pick">
+            <p class="sr-only" id="ver-label">选择版本</p>
+            <div class="dl-seg" role="tablist" aria-labelledby="ver-label" id="ver-tabs">
+              <span class="dl-seg-indicator" id="ver-indicator" aria-hidden="true"></span>
+            </div>
+            <p class="dl-pick-note" id="ver-note" role="status">正在读取版本列表……</p>
+          </div>
+
+          <div class="dl-groups">
+            <p class="dl-pick-label" id="group-label">装什么</p>
+            <div class="dl-seg" role="tablist" aria-labelledby="group-label" id="group-tabs">
+              <span class="dl-seg-indicator" id="group-indicator" aria-hidden="true"></span>
+              <button class="dl-seg-item" type="button" role="tab" data-value="client">客户端</button>
+              <button class="dl-seg-item" type="button" role="tab" data-value="server">服务端</button>
+              <button class="dl-seg-item" type="button" role="tab" data-value="plugin">插件</button>
+            </div>
+            <p class="dl-pick-note" id="group-note" role="status"></p>
+          </div>
+
+          <!-- 卡片由 assets/download.js 按「当前版本 + 当前分组」渲染 -->
+          <div class="dl-grid" id="dl-grid" role="tabpanel" tabindex="0" aria-live="polite"></div>
+
+          <p class="dl-note" id="dl-note"></p>
+        </div>
+      </section>
+
      <!-- 分幕标题：居中大标题 + 中间一段渐变高亮（照 ClassIsland 官网的分节写法） -->
      <section class="band act" aria-label="第一部分：它是怎么工作的">
        <div class="wrap">
@@ -680,5 +720,6 @@

    <script src="assets/motion.js" defer></script>
    <script src="assets/main.js" defer></script>
+    <script src="assets/download.js" defer></script>
  </body>
 </html>