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（它原本是全站最小的字，再小就看着像被裁掉一截）。
This commit is contained in:
LoveChengke committed
1 parent
9d5ac7adf9
commit
e51879667a
3 files changed
+110
-19
No files matched your search
+56
-14
@@ -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,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 },
|
||||
);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user