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 @@ +