feat(website,docs,build): 首屏改成大标题 + 整行渐变填色，官网与文档站合并发布到 GitHub Pages

官网（`website/`）

- 首屏标题放大一档（`--fs-display` 上限 3.6rem → 4rem），第二行改成**整行渐变填色**，
  照 ClassIsland 官网那种「大标题 + 中间一段渐变 + 一行副标 + 一排徽章 + 两个按钮」的写法；
- 标题下补一排 mono 芯片（版本 / Windows / Linux·Docker / 触摸屏），主按钮换成
  「立即下载」+「GitHub 仓库」；
- 顶部导航与页脚补「文档站」入口；页脚原本指向 GitHub blob 的那三个链接改成指向文档站
  —— 那几个文件已经移到 `docs/management/` 下，原链接是 404。

> ⚠ 渐变那一行**不参与逐字揭示**：`main.js` 的 `setupHeadlineReveal` 会跳过 `.reveal-grad`。
> 拆成 per-char 的 `inline-block` 之后每个字各自建一层合成，祖先的 `background-clip: text`
> 就穿不过去，渐变会整行失效 —— 所以它按整行入场（透明度 + 轻微上浮）。

站点发布（`.github/workflows/pages.yml`，取代 `docs.yml`）

- **一个仓库在 GitHub Pages 上只有一个站点**，所以官网与文档站拼成一份产物：
  官网在根、文档站在 `/docs/` 下，组装逻辑在 `scripts/build-pages.mjs`；
- 站点根 404 由 `website/404.html` 提供（含 `{{BASE}}` 占位符，由脚本与 workflow 按仓库名注入）；
- 官网目录里的 `serve.mjs` 与 `tools/` 是开发用的，不发布；
- `website/serve.mjs` 把 `../docs/_site` 挂在 `/docs/` 下，让本地预览与线上同形 ——
  否则页脚那几个「文档站」链接在本地全是 404；
- 文档站模板顶栏补一个「官网」入口（`{{_rel}}../`）。

版本迭代

- `scripts/version.mjs` 补上**官网上手写的三处版本号**（顶栏徽标 / 首屏芯片 / 页脚）。
  官网是纯静态站、没有构建步骤，没有哪段代码会去读 `package.json`，漏改的后果是
  首页一直挂着旧版本号 —— 而那是别人看到的第一眼。落点从 10 处变成 13 处，
  `AGENTS.md` §4.4 与 `docs/dev/release.md` 同步。

website/404.html

@@ -0,0 +1,136 @@
+<!doctype html>
+<!--
+  站点根 404 页（**不经过 docfx**，放在 website/ 下，由发布流程注入 {{BASE}}）。
+
+  一个仓库在 GitHub Pages 上只有一个站点，官网在根、文档站在 /docs/ 下 —— 因此严格来说
+  整个站点只有这一份 404 生效：Pages 对任何未知路径都返回站点根的 404.html。
+  docs/404.html（docfx 那份）只在「文档站被单独托管」时才用得上，合并站点里它是备而不用的。
+  所以这一页要把两条路都给出来：回官网、去文档站。
+-->
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <base href="{{BASE}}" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="robots" content="noindex" />
+    <title>页面不存在 | 班级小助手</title>
+    <style>
+      :root {
+        --board: #16231e;
+        --chalk: #eef3ef;
+        --chalk-2: #b9c7bf;
+        --chalk-3: #8a9a91;
+        --blue: #2f8fe6;
+        --line: rgba(238, 243, 239, 0.14);
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        color-scheme: dark;
+      }
+
+      body {
+        margin: 0;
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 32px;
+        background: var(--board);
+        color: var(--chalk);
+        font-family:
+          'Segoe UI Variable Text',
+          'Segoe UI',
+          'Microsoft YaHei UI',
+          'Microsoft YaHei',
+          -apple-system,
+          BlinkMacSystemFont,
+          'PingFang SC',
+          'Hiragino Sans GB',
+          sans-serif;
+        line-height: 1.75;
+      }
+
+      main {
+        max-width: 34em;
+      }
+
+      .code {
+        font-family: ui-monospace, Consolas, monospace;
+        font-size: 4rem;
+        font-weight: 600;
+        line-height: 1;
+        color: var(--blue);
+      }
+
+      h1 {
+        margin: 18px 0 10px;
+        font-size: 1.5rem;
+        font-weight: 600;
+      }
+
+      p {
+        margin: 0 0 26px;
+        color: var(--chalk-2);
+      }
+
+      .links {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+      }
+
+      a {
+        display: inline-block;
+        padding: 11px 20px;
+        border: 1px solid var(--line);
+        border-radius: 4px;
+        color: var(--chalk);
+        text-decoration: none;
+        transition:
+          border-color 0.15s ease,
+          color 0.15s ease,
+          background-color 0.15s ease;
+      }
+
+      a:hover {
+        border-color: var(--chalk-3);
+        background: rgba(238, 243, 239, 0.06);
+      }
+
+      a.primary {
+        background: var(--blue);
+        border-color: var(--blue);
+        color: #fff;
+      }
+
+      a.primary:hover {
+        background: #1280dd;
+        border-color: #1280dd;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        a {
+          transition: none;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="code">404</div>
+      <h1>这里没有这一页</h1>
+      <p>链接可能过期了，或者这一页已经被重写进了别的章节。</p>
+      <div class="links">
+        <a class="primary" href="index.html">回到官网首页</a>
+        <a href="docs/index.html">文档站</a>
+        <a href="docs/get-started/index.html">快速上手</a>
+        <a href="docs/faq.html">常见问题</a>
+        <a href="https://github.com/LoveChengke/ClassHelper">GitHub 仓库</a>
+      </div>
+    </main>
+  </body>
+</html>

website/assets/main.js

@@ -60,6 +60,11 @@
 
     const units = [];
     lines.forEach((line) => {
+      // 整行渐变填色的那一行**不拆字**，整行做一个单元（见 styles.css 的 .reveal-grad）：
+      // 拆成 per-char 的 inline-block 后，每个字各自建一层合成，祖先的
+      // `background-clip: text` 就穿不过去了，渐变会整行失效。
+      if (line.classList.contains('reveal-grad')) return;
+
       const text = line.textContent.trim();
       line.textContent = '';
       for (const char of Array.from(text)) {

website/assets/styles.css

@@ -62,7 +62,12 @@
     'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif;
   --mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, 'Microsoft YaHei UI', monospace;
 
-  --fs-display: clamp(2.1rem, 5vw, 3.6rem);
+  /* 首屏标题：比站内其它标题大一档（ClassIsland 官网也是这个量级）。
+     两个数都是量出来的：
+       上限 4rem —— 第一行 11 个汉字 × 1em ≈ 704px，得留在 .hero-intro 的列宽（46em）里；
+       下限 1.8rem —— 375px 屏上可用宽度只有 327px，再大会把「它知道现在是第几节课，」
+                     折成「它知道现在是第几」+ 三个字的孤行。 */
+  --fs-display: clamp(1.8rem, 5.7vw, 4rem);
   --fs-h2: clamp(1.7rem, 3.4vw, 2.5rem);
   --fs-h3: clamp(1.05rem, 1.5vw, 1.2rem);
   --fs-lead: clamp(1rem, 1.5vw, 1.12rem);
@@ -417,10 +422,10 @@ table {
   font-family: var(--display);
   font-weight: 400;
   font-size: var(--fs-display);
-  line-height: 1.32;
+  line-height: 1.22;
   letter-spacing: 0.01em;
   max-width: 20em;
-  margin-bottom: 30px;
+  margin-bottom: 26px;
 }
 
 /* 标题逐字上浮 —— beUI TextReveal。
@@ -649,9 +654,41 @@ strong {
 }
 
 /* 首屏文字收成左列（ClassIsland 的 .introduction-col 也是这么窄的一条）。
-   47em ≈ 750px：再窄一点，「它知道现在是第几节课，」的逗号就会掉到第二行去。 */
+   46em ≈ 736px：这一列要能装下放大的「它知道现在是第几节课，」（11 个汉字 × 4rem ），
+   同时右边还要留得下三句事实。两边的数是一起量的，改一个就得回头看另一个。 */
 .hero-intro {
-  max-width: 47em;
+  max-width: 46em;
+}
+
+/* 整行渐变填色 —— ClassIsland 官网的 .gradient-base 那个写法。
+   这一行**不拆字**（main.js 的 setupHeadlineReveal 会跳过它）：拆成 per-char 的
+   inline-block 之后每个字各自建一层合成，祖先的 `background-clip: text` 就穿不过去，
+   渐变会整行失效。所以它按「整行」入场：透明度 + 轻微上浮，比逐字稍晚一点起。 */
+.display .reveal-grad {
+  background-image: linear-gradient(135deg, var(--chalk) 6%, var(--blue) 78%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  opacity: 0;
+  transition: opacity 0.85s var(--ease-out) 0.24s;
+}
+
+html:not(.reveal-pending) .display .reveal-grad {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .display .reveal-grad {
+    transform: translateY(14%);
+    transition:
+      opacity 0.85s var(--ease-out) 0.24s,
+      transform 0.85s var(--ease-out) 0.24s;
+  }
+
+  html:not(.reveal-pending) .display .reveal-grad {
+    transform: none;
+  }
 }
 
 /* 宽屏上把三句事实挪到文字右边，填住那条空 —— ClassIsland 的首屏也是左文右块。
@@ -659,7 +696,7 @@ strong {
 @media (min-width: 1080px) {
   .hero .wrap {
     display: grid;
-    grid-template-columns: minmax(0, 47em) 1fr;
+    grid-template-columns: minmax(0, 46em) 1fr;
     grid-template-areas:
       'intro facts'
       'screen screen'
@@ -691,15 +728,47 @@ strong {
 
 .hero-sub {
   font-family: var(--display);
-  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
-  line-height: 1.5;
+  font-size: clamp(1.4rem, 2.9vw, 2.1rem);
+  line-height: 1.45;
   color: var(--chalk);
-  margin-bottom: 14px;
+  margin-bottom: 16px;
 }
 
 .hero-intro .lead {
   max-width: 32em;
-  margin-bottom: 26px;
+  margin-bottom: 28px;
+}
+
+/* 首屏按钮比站内其它按钮大一档 —— 它是这一页的主行动点 */
+.hero-intro .actions .btn {
+  padding: 15px 26px;
+  font-size: 0.95rem;
+}
+
+/* 平台 / 支持情况那一行小标签（对应 ClassIsland 首屏底部那句「支持在 Windows…」）。
+   做成 mono 的芯片而不是一句话：这行是要被扫一眼的，不是要被读的。 */
+.hero-badges {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 22px;
+}
+
+.hero-badges li {
+  font-family: var(--mono);
+  font-size: var(--fs-xs);
+  line-height: 1.6;
+  padding: 4px 11px;
+  border: 1px solid var(--board-line);
+  border-radius: 999px;
+  color: var(--chalk-2);
+}
+
+/* 第一个是版本号：当前这一版是什么，比平台支持更需要一眼看到 */
+.hero-badges li:first-child {
+  border-color: var(--blue);
+  color: var(--chalk);
 }
 
 /* ── 首屏入场：照着 ClassIsland 的 .intro-seq 写（逐项 0.72s EASE_OUT + 错峰延迟）。

website/index.html

@@ -54,6 +54,7 @@
           <a href="#shots">实机</a>
           <a href="#deploy">部署</a>
           <a href="#verify">验收</a>
+          <a href="docs/index.html">文档站</a>
         </nav>
         <a class="btn btn-quiet" href="#deploy" data-press="0.95">取安装包</a>
       </div>
@@ -68,7 +69,7 @@
           <div class="hero-intro">
             <h1 class="display" data-reveal>
               <span class="reveal-line">它知道现在是第几节课，</span>
-              <span class="reveal-line">所以不会在课上打扰学生。</span>
+              <span class="reveal-line reveal-grad">不会在课上打扰学生</span>
             </h1>
 
             <p class="hero-sub intro-seq" style="--intro-delay: 150ms">课表、作业、通知、成绩、叫人</p>
@@ -79,9 +80,24 @@
             </p>
 
             <div class="actions intro-seq" style="--intro-delay: 250ms">
-              <a class="btn btn-solid" href="#deploy" data-press="0.93">下载与部署</a>
-              <a class="btn btn-line" href="#journey" data-press="0.93">先看它怎么工作</a>
+              <a class="btn btn-solid" href="#deploy" data-press="0.93">立即下载</a>
+              <a
+                class="btn btn-line"
+                href="https://github.com/LoveChengke/ClassHelper"
+                target="_blank"
+                rel="noreferrer"
+                data-press="0.93"
+              >
+                GitHub 仓库
+              </a>
             </div>
+
+            <ul class="hero-badges intro-seq" style="--intro-delay: 300ms">
+              <li>v1.1.2</li>
+              <li>Windows 10/11</li>
+              <li>Linux · Docker</li>
+              <li>触摸屏可用</li>
+            </ul>
           </div>
 
           <div
@@ -649,27 +665,10 @@
         </div>
         <nav class="foot-nav" aria-label="相关链接">
           <a href="https://github.com/LoveChengke/ClassHelper" target="_blank" rel="noreferrer">源码仓库</a>
-          <a
-            href="https://github.com/LoveChengke/ClassHelper/blob/master/docs/production.md"
-            target="_blank"
-            rel="noreferrer"
-          >
-            生产部署
-          </a>
-          <a
-            href="https://github.com/LoveChengke/ClassHelper/blob/master/docs/linux-deploy.md"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Linux 运维
-          </a>
-          <a
-            href="https://github.com/LoveChengke/ClassHelper/blob/master/docs/mysql.md"
-            target="_blank"
-            rel="noreferrer"
-          >
-            切换 MySQL
-          </a>
+          <a href="docs/index.html">文档站</a>
+          <a href="docs/management/production.html">生产部署</a>
+          <a href="docs/management/linux-deploy.html">Linux 运维</a>
+          <a href="docs/management/mysql.html">切换 MySQL</a>
           <a href="https://classisland.tech" target="_blank" rel="noreferrer">ClassIsland</a>
         </nav>
       </div>

website/serve.mjs

@@ -1,9 +1,13 @@
 /**
  * 官网本地预览用的最小静态服务器 —— 只是为了 `node serve.mjs` 能直接看页面。
- * 正式发布时把 website/ 整个目录丢给任意静态托管 / Nginx 即可，不需要这个文件。
+ * 正式发布时把 website/ 与 docs/_site/ 一起交给静态托管即可，不需要这个文件。
  *
  *   node website/serve.mjs          → http://127.0.0.1:5180
  *   PORT=8080 node website/serve.mjs
+ *
+ * 线上两者是同一个 GitHub Pages 站点：官网在根，文档站在 /docs/ 下（见 .github/workflows/pages.yml）。
+ * 这里把 docs/_site 挂到 /docs/ 就是为了让本地与线上同形 —— 否则页脚那几个「文档站」链接
+ * 在本地全是 404。文档站没构建过时 /docs/ 会 404，先跑一次 `pnpm docs:build`。
  */
 
 import { createServer } from 'node:http';
@@ -12,27 +16,36 @@ import { extname, join, normalize, resolve, sep } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 const ROOT = resolve(fileURLToPath(new URL('.', import.meta.url)));
+const DOCS_ROOT = resolve(ROOT, '..', 'docs', '_site');
 const PORT = Number(process.env.PORT ?? 5180);
 
 const MIME = {
   '.html': 'text/html; charset=utf-8',
   '.css': 'text/css; charset=utf-8',
   '.js': 'text/javascript; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
   '.png': 'image/png',
   '.jpg': 'image/jpeg',
   '.svg': 'image/svg+xml',
   '.ico': 'image/x-icon',
   '.webmanifest': 'application/manifest+json',
+  '.woff': 'font/woff',
   '.woff2': 'font/woff2',
+  '.map': 'application/json',
 };
 
 const server = createServer(async (request, response) => {
   const url = new URL(request.url ?? '/', 'http://localhost');
   const requested = decodeURIComponent(url.pathname);
-  const target = normalize(join(ROOT, requested === '/' ? 'index.html' : requested));
 
-  // 目录穿越防护：解析结果必须仍在 ROOT 里
-  if (target !== ROOT && !target.startsWith(ROOT + sep)) {
+  // 文档站挂在 /docs/ 下（线上也是这样）
+  const underDocs = requested === '/docs' || requested.startsWith('/docs/');
+  const base = underDocs ? DOCS_ROOT : ROOT;
+  const relative = underDocs ? requested.replace(/^\/docs\/?/, '/') : requested;
+  const target = normalize(join(base, relative === '/' ? 'index.html' : relative));
+
+  // 目录穿越防护：解析结果必须仍在它所属的根里
+  if (target !== base && !target.startsWith(base + sep)) {
     response.writeHead(403).end('Forbidden');
     return;
   }
@@ -47,10 +60,18 @@ const server = createServer(async (request, response) => {
     });
     response.end(body);
   } catch {
+    if (underDocs) {
+      response
+        .writeHead(404, { 'content-type': 'text/html; charset=utf-8' })
+        .end(
+          '<p style="font:16px/1.7 system-ui;padding:40px">文档站还没构建。先跑一次 <code>pnpm docs:build</code>。</p>',
+        );
+      return;
+    }
     response.writeHead(404, { 'content-type': 'text/plain; charset=utf-8' }).end('404');
   }
 });
 
 server.listen(PORT, '127.0.0.1', () => {
-  console.log(`官网预览：http://127.0.0.1:${PORT}`);
+  console.log(`官网预览：http://127.0.0.1:${PORT}（文档站在 /docs/）`);
 });