feat(website,docs,build): 官网加一个下载页（挑版本装机），文档站的照片换成与 README 同一份
下载页（`website/download.html` + `assets/download.js`） - 官网首页的「立即下载」、顶栏与页脚的「取安装包」全部指向新页 `/download.html`。 那一页是「先挑一个版本，再挑要装的那一份」：一个版本分段控件 + 四张卡 （班级端 / 服务端 Windows / 服务端 Linux / ClassIsland 插件），每张卡列出这一版里 真实存在的文件、体积与直链； - 版本与文件清单**不在站点里存副本**，每次打开都由 `assets/download.js` 当场读 GitHub Releases —— 文件名、体积、链接照抄发布页，不靠命名约定去猜； - 读不到时（离线，或匿名接口 60 次/小时按出口 IP 被限流）退回页面上那份 `<meta name="ch-version">`，按发布命名约定拼直链，并在页面上**明说这是拼出来的**； - 老版本缺哪个包就显示「这一版没有发布…」（`v0.1.0-fix` 只有插件包，实测正确）； Linux 那一行安装命令跟着选中版本钉上 `--version`（tag 不是 `x.y.z` 时不带）； - 动态建出来的卡片与文件行派发 `ch:content`，由 `main.js` 补挂按压反馈 —— 这些元素是拉到清单之后才出现的，启动时还看不到它们。 文档站的照片（`docs/images/`） - 页面里的图一律从 `docs/screenshots/**` 换成 `docs/images/**`：后者就是 README 与官网 吃的那一份（字节相同），前者是 9-26 的冒烟留档，比 README 落后一个版本； - 展示图与回归留档这两套图的分工写进 `docs/dev/testing.md`「截图留档」，含重新采集命令 （冒烟会把「岛外留白对照图」落在同一个目录，所以要先落临时目录再挑）； - 顺带修 README 手机截图那张标错的图注（`mobile-dashboard.jpg` 是仪表盘，不是抽屉菜单）； - `docs/reference.md` 验收表里那张 ClassIsland「真机实测截图」不再嵌图：它是连着桌面、 任务栏和另一个窗口整屏截下来的，当文档配图不能用。断言与用例名都保留，另外注明了抓图位置。 版本落点 - `scripts/version.mjs` 增加 `website/download.html` 的兜底版本号，落点 13 → 14 处 （`AGENTS.md` §4.4 与 `docs/dev/release.md` 同步）； - README「开始使用」表里那三个文件名改成**发布页上真实的名字** （`-x64-client-setup` / `-x64-client-portable` / `-x64-server-setup`）—— 原来写的是构建 产物的名字；「上传前把产物改成 ASCII 名」这一步也一并写进发布流程， 它是官网下载页离线兜底与 README 表格的共同依据。
This commit is contained in:
LoveChengke committed
1 parent
ded10118f5
commit
0ea6bd887f
15 files changed
+1235
-167
No files matched your search
+269
-1
@@ -1,5 +1,5 @@
|
||||
/* ============================================================================
|
||||
班级小助手 · 官网样式
|
||||
ClassHelper · 官网样式
|
||||
----------------------------------------------------------------------------
|
||||
两套表面，对应教室里的两样东西：
|
||||
|
||||
@@ -313,6 +313,22 @@ table {
|
||||
background: var(--board-raise);
|
||||
}
|
||||
|
||||
/* .btn-line 的颜色是给黑板调的（粉笔白），落在浅色纸面上会看不见 —— 纸面另给一套 */
|
||||
.band-paper .btn-line {
|
||||
border-color: var(--paper-rule);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.band-paper .btn-line:hover {
|
||||
border-color: var(--blue);
|
||||
background: var(--paper-raise);
|
||||
}
|
||||
|
||||
/* 纸面上的按钮行跟在正文后面，自己带一段上边距（黑板那边靠 .lead 的下边距撑开） */
|
||||
.band-paper .actions {
|
||||
margin-top: 26px;
|
||||
}
|
||||
|
||||
.btn-quiet {
|
||||
margin-left: auto;
|
||||
border-color: var(--board-line);
|
||||
@@ -2069,3 +2085,255 @@ html:not(.reveal-pending) .display .reveal-grad {
|
||||
transition-delay: 0s !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ════════════════════════════════ 下载页 ═══════════════════════════════
|
||||
download.html 专用。页面骨架与官网首页同一套（同样的色带、按钮、页脚），
|
||||
这里只补两样只有这一页才有的东西：版本分段控件、每个交付物的文件卡。
|
||||
|
||||
两条口径和首页一致：
|
||||
蓝（--blue-deep） 产品自己的强调色 —— 这里表示「这是一份真的能下的文件」
|
||||
卡片一律纸面（--paper-raise）——「谁装什么」是要照着一项项核对的，跟名单一样 */
|
||||
|
||||
/* ── 版本选择 ────────────────────────────────────────────────────────────
|
||||
与首页实机截图那组分段控件同一套做法（beUI Tabs：一个指示器在选项之间滑移），
|
||||
只是它管的是版本而不是图组，所以另起一套类名，不去动 .shots-*。 */
|
||||
|
||||
.dl-pick {
|
||||
margin: 34px 0 30px;
|
||||
}
|
||||
|
||||
.dl-pick-label {
|
||||
font-size: var(--fs-xs);
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--chalk-3);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.dl-tabs {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
border: 1px solid var(--board-line);
|
||||
border-radius: 12px;
|
||||
background: var(--board-deep);
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.dl-tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dl-tab {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
font: inherit;
|
||||
font-size: var(--fs-sm);
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--chalk-2);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 9px;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: color 0.18s var(--ease-out);
|
||||
}
|
||||
|
||||
.dl-tab:hover,
|
||||
.dl-tab[aria-selected='true'] {
|
||||
color: var(--chalk);
|
||||
}
|
||||
|
||||
/* 旗标：最新版 / 预发布。整排版本里只有它有，是这一行唯一的信息栅格 */
|
||||
.dl-tab-flag {
|
||||
font-size: 0.68rem;
|
||||
line-height: 1;
|
||||
padding: 3px 6px;
|
||||
border-radius: 999px;
|
||||
color: #cfe6fb;
|
||||
background: rgba(47, 143, 230, 0.18);
|
||||
border: 1px solid rgba(47, 143, 230, 0.4);
|
||||
}
|
||||
|
||||
.dl-tab-flag-quiet {
|
||||
color: var(--chalk-2);
|
||||
background: rgba(232, 238, 233, 0.07);
|
||||
border-color: var(--board-line);
|
||||
}
|
||||
|
||||
.dl-tabs-indicator {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
height: calc(100% - 8px);
|
||||
width: 0;
|
||||
border-radius: 9px;
|
||||
background: var(--board-raise);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 版本清单的来路 —— 这段话是这一页的"数据来源声明"，取不到时要在这里说清楚 */
|
||||
.dl-pick-note {
|
||||
margin-top: 12px;
|
||||
font-size: var(--fs-xs);
|
||||
line-height: 1.85;
|
||||
color: var(--chalk-3);
|
||||
max-width: 48em;
|
||||
}
|
||||
|
||||
.dl-pick-note a {
|
||||
color: var(--chalk-2);
|
||||
}
|
||||
|
||||
.dl-pick-note code {
|
||||
color: var(--chalk-2);
|
||||
}
|
||||
|
||||
/* ── 文件卡（纸面） ───────────────────────────────────────────────────── */
|
||||
|
||||
/* 正好四张卡：宽度取 400px 起，桌面上一律两列（2×2 比 3+1 那种"落单"好读）。
|
||||
`min(400px, 100%)` 那层是必要的：只写 400px 的话，窄屏（比 400 还窄）上轨道会硬撑到 400，
|
||||
卡片就顶出视口右侧 —— 这是 auto-fit + minmax 的经典坑。 */
|
||||
.dl-grid {
|
||||
margin-top: 36px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.dl-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--paper-raise);
|
||||
border: 1px solid var(--paper-rule);
|
||||
border-radius: 6px;
|
||||
padding: 22px 22px 18px;
|
||||
}
|
||||
|
||||
/* 「谁在用」那行 —— 与首页特性块的 #标签同一个位置，用蓝色承担 */
|
||||
.dl-card-who {
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--blue-deep);
|
||||
}
|
||||
|
||||
.dl-card-name {
|
||||
margin-top: 5px;
|
||||
font-size: 1.18rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.dl-card-desc {
|
||||
margin-top: 8px;
|
||||
font-size: var(--fs-sm);
|
||||
line-height: 1.85;
|
||||
color: var(--ink-2);
|
||||
}
|
||||
|
||||
.dl-files {
|
||||
margin-top: 16px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 一行 = 一个文件，整行可点（GitHub 的发布资源带 Content-Disposition，点了就下） */
|
||||
.dl-file {
|
||||
display: block;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--paper-rule);
|
||||
border-radius: var(--radius);
|
||||
background: var(--paper);
|
||||
text-decoration: none;
|
||||
transition:
|
||||
border-color 0.16s var(--ease-out),
|
||||
background-color 0.16s var(--ease-out);
|
||||
}
|
||||
|
||||
.dl-file:hover,
|
||||
.dl-file:focus-visible {
|
||||
border-color: var(--blue);
|
||||
background: #eaf3fd;
|
||||
}
|
||||
|
||||
.dl-file-top {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.dl-file-role {
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.dl-file-size {
|
||||
margin-left: auto;
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--ink-3);
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dl-file-name {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
font-family: var(--mono);
|
||||
font-size: 0.72rem;
|
||||
line-height: 1.6;
|
||||
color: var(--ink-2);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.dl-file-note {
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--ink-3);
|
||||
}
|
||||
|
||||
/* 这一版没打这个包（老版本里真的会缺） */
|
||||
.dl-missing {
|
||||
margin-top: 16px;
|
||||
padding: 12px;
|
||||
border: 1px dashed var(--paper-rule);
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--ink-3);
|
||||
}
|
||||
|
||||
.dl-note {
|
||||
margin-top: 24px;
|
||||
font-size: var(--fs-xs);
|
||||
line-height: 1.9;
|
||||
color: var(--ink-3);
|
||||
max-width: 54em;
|
||||
}
|
||||
|
||||
.dl-note code {
|
||||
background: rgba(23, 35, 31, 0.06);
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.dl-card {
|
||||
padding: 18px 16px 14px;
|
||||
}
|
||||
|
||||
.dl-file-name {
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user