From e51879667af6f35927274833a40040d79e11eb43 Mon Sep 17 00:00:00 2001 From: LoveChengke Date: Tue, 6 Oct 2026 19:56:51 +0800 Subject: [PATCH] =?UTF-8?q?feat(website):=20=E5=AE=98=E7=BD=91=E9=A6=96?= =?UTF-8?q?=E9=A1=B5=E9=A6=96=E5=B1=8F=E4=B8=8B=E9=9D=A2=E7=9B=B4=E6=8E=A5?= =?UTF-8?q?=E6=8E=A5=E4=B8=80=E6=AE=B5=E4=B8=8B=E8=BD=BD=E5=8C=BA=EF=BC=88?= =?UTF-8?q?=E7=89=88=E6=9C=AC=20+=20=E8=A3=85=E4=BB=80=E4=B9=88=20+=20?= =?UTF-8?q?=E5=8D=A1=E7=89=87=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 首屏下面新增 `#download` 一整段，与 /download.html 是同一套类名、同一个 `assets/download.js`： 访客不跳页就能下；完整的下载页仍然保留（顶栏「下载」指着它）； - `download.js` 改成两个页面都能跑：首屏那颗主按钮只有下载页有，所以它不再是必需元素 —— 之前首页没有它，整个脚本会静默 return，那一段什么也不渲染； - **兜底版本号改成"读页面自己显示的那一份"**：下载页读 ``， 首页读顶栏那个版本徽标（`.brand-ver`）。两个都是 `pnpm version:bump` 的既有落点， 所以不必为首页再添一个手写版本号（落点数仍是 14）； - 顺带：首页那条 Linux 安装命令现在也会跟着选中版本钉上 `--version`（原先不带）； - 修一处"字看着被切断"：两个分段控件是**横滚**的，而滚动条被藏了起来 （`scrollbar-width: none`），装不下时末尾那个版本号就是硬切一刀、还没有任何提示。 现在溢出时右边缘淡出，滚到最右自动撤销；主按钮下面那行 mono 文件名也从 0.68rem 提到 0.75rem（它原本是全站最小的字，再小就看着像被裁掉一截）。 --- website/assets/download.js | 70 ++++++++++++++++++++++++++++++-------- website/assets/styles.css | 18 +++++++--- website/index.html | 41 ++++++++++++++++++++++ 3 files changed, 110 insertions(+), 19 deletions(-) diff --git a/website/assets/download.js b/website/assets/download.js index 8b01a75..ec66416 100644 --- a/website/assets/download.js +++ b/website/assets/download.js @@ -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` 的落点**： + * 下载页是 ``，官网首页是顶栏那个版本徽标（`.brand-ver`）。 + * 所以这里不必再添一个手写版本号 —— 页面自己显示的那份就是兜底值。 + */ + const FALLBACK_VERSION = ( + $('meta[name="ch-version"]')?.content ?? + $('.brand-ver')?.textContent ?? + '' + ).trim(); const CHEVRON = '= 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,14 +609,16 @@ renderGroupStatus(group); renderGridNote(release); - // 首屏那颗按钮跟着「版本 + 分组」走：默认就是这一版客户端的安装版 - const first = resolveFiles(group.cards[0], release)[0]; - if (first) { - primary.href = first.asset.url; - primary.textContent = `下载${group.label} ${release.tag}`; - } else { - primary.href = release.notesUrl; - primary.textContent = '去 Releases 挑一份'; + // 下载页首屏那颗按钮跟着「版本 + 分组」走：默认就是这一版客户端的安装版 + if (primary) { + const first = resolveFiles(group.cards[0], release)[0]; + if (first) { + primary.href = first.asset.url; + primary.textContent = `下载${group.label} ${release.tag}`; + } else { + primary.href = release.notesUrl; + primary.textContent = '去 Releases 挑一份'; + } } // Linux 那一行：钉到当前选中的版本（老版本 tag 不是 x.y.z 形式时不带 --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 }, ); diff --git a/website/assets/styles.css b/website/assets/styles.css index 8c10d83..9aaac05 100644 --- a/website/assets/styles.css +++ b/website/assets/styles.css @@ -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; } } diff --git a/website/index.html b/website/index.html index 570b812..b1ff210 100644 --- a/website/index.html +++ b/website/index.html @@ -182,6 +182,46 @@ + +
+
+

装什么，挑一下

+

+ 四个交付物互不依赖安装顺序，但 + 服务端要先有一台机器跑着 + ，另外三个才连得上。 下面的版本与文件清单是当场从本仓库的 GitHub Releases + 读出来的：显示什么，就真能下到什么。 +

+ + +
+

选择版本

+
+ +
+

正在读取版本列表……

+
+ +
+

装什么

+
+ + + + +
+

+
+ + +
+ +

+
+ +
@@ -680,5 +720,6 @@ +