feat(docs,scripts,build): 用 docfx 搭文档站并发布到 GitHub Pages，版本号收口成脚本迭代

文档站（`docs/` 就是 docfx 项目，发布在 https://lovechengke.github.io/ClassHelper/）： - 四章 + 常见问题 + 完整参考，共 44 页：快速上手（8 页）/ 应用帮助（10 页）/ 管理运维（6 页）/ 开发文档（11 页）。信息架构照 ClassIsland 文档站来：顶栏分章、左侧章节导航、右侧本页目录、上一页 / 下一页、站内搜索、深色主题跟随系统； - 自定义模板覆盖（`templates/classhelper/`）：把 docfx modern 模板那套英文 UI 文案（In this article / Improve this doc / Next…）换成中文，补 GitHub 入口与版本徽标，并加一层只调排版与配色的 `public/main.css`（不动 DOM 结构）； - 站点顶栏的版本徽标取自根 `package.json`（`docs/build.mjs` 用 `--metadata` 注入），不在文档里写第二份 —— 否则一定漂； - 404 页单独生成：GitHub Pages 的项目页挂在 `/<仓库名>/` 子路径下，而浏览器是按**被请求的路径** 解析页面里的相对链接的，所以 `<base>` 必须钉到站点根，由 `build.mjs`（本地 `./`）与 workflow（CI 传 `/<仓库名>/`）分别注入； - 构建前清空 `_site`：docfx 只覆盖不清理，删掉或改名的页面会以旧文件留在目录里，而 Pages 上传的是整个目录。版本迭代（**每一次 releases，不是每一次提交**）： - 新增 `scripts/version.mjs`。这个仓库里同一个版本号散在 **10 个文件**里（5 份 `package.json`、 `deploy/package.runtime.json`、两个 compose 的镜像 tag、插件 `manifest.yml`、以及插件 C# 里的 `PluginVersion` 常量），手工改必然漏一处，而漏掉的那处**不会报错**，只在某个不常走的分支上表现为"版本号对不上"。现在收口成两条命令：`pnpm version:check`（逐处比对，不一致 exit 1）与 `pnpm version:bump patch|minor|major`（一次改写全部 10 处，任何一处匹配不到或匹配到多处就直接失败退出，不做尽力而为的部分改写）； - `AGENTS.md` 新增 §4.4「版本迭代（每一次 releases，不是每一次提交）」：写清版本号落在哪 10 处、完整发布命令序列（体检 → 验收 → `dist:all` → 哈希清单 → 推 master → `gh release create` → Linux 包由 CI 合并哈希行），以及"已发布的版本号不要复用"的理由。其它： - `.github/workflows/docs.yml`：推 master（`docs/**` / `package.json` / workflow 自身有变）即构建并部署到 Pages；构建带 `--check`，把 docfx 的警告当错误 —— 最常见的警告是"某个 `.md` 没被任何 `toc.yml` 引用"，那种页面有内容但没有侧边栏，属于必须修掉的疏漏； - docs 目录重组后的引用同步：`production` / `mysql` / `linux-deploy` / `winisland-design-tokens` 移到新位置后，AGENTS.md、`deploy/`、`scripts/`、客户端源码注释里的路径引用一并更新； - 文档站只发布 `docs/` 这一棵树，页面里指向树外的相对链接（`../AGENTS.md` 等）改成 GitHub 绝对 URL，否则上线全是 404； - 图标派生清单补上文档站模板里的 `logo.png` 与 `favicon.png`（`pnpm icons` 一并生成，仍然只有一个图形源 `build/classhelper.{png,ico}`）； - `docs/_site` 进 `.gitignore` / `.prettierignore` 与 ESLint ignores； - 根脚本补 `version:check` / `version:bump` / `docs:build` / `docs:serve` / `docs:check`。
2026-10-06 16:27:44 +08:00
1 parent 5b002a4f0b
commit 19c2aa07b2
@@ -0,0 +1,97 @@
+---
+title: 外观、主题与动效
+description: 深浅色主题、界面风格、设计令牌与动效语言，以及降低动态效果的降级行为。
+---
+
+# 外观、主题与动效
+
+## 深浅色主题
+
+**两端都有深色主题，机制完全一致**：在 `<html>` 上挂 `.dark` 类，由各自的样式表覆盖**语义色令牌**，
+Element Plus 的深色变量提供组件层的默认值。两端的 `main.ts` 都在挂载之前就把主题落好，
+所以深色用户打开时不会"先白后黑"闪一下。
+
+| 行为         | 说明                                                     |
+| ------------ | -------------------------------------------------------- |
+| 默认         | **跟随系统**（`prefers-color-scheme`，系统改了就跟着变） |
+| 手动切换之后 | 以用户的选择为准（系统的偏好是默认值，不是命令）         |
+| 切换入口     | 客户端在顶栏（日月按钮），Web 管理端也在顶栏             |
+| 切换效果     | 从点击位置**扩散的圆**铺满整页换肤                       |
+
+**刻意不随主题的区域**：登录页的深色渐变底、桌面端的启动过渡页与全屏作业看板、灵动岛自身、
+Web 管理端的侧边栏（本来就是深色），以及深色底上的白色文字。
+
+Web 端还会同步 `<meta name="theme-color">`，并设 `color-scheme` 让**原生控件**
+（滚动条、日期选择器弹层、自动填充底色）也跟着走 —— 只改 CSS 变量的话它们会仍是浅色。
+
+## 语义色令牌
+
+组件里**一律引用令牌，不写死颜色**：
+
+| 令牌                                                   | 用途     |
+| ------------------------------------------------------ | -------- |
+| `--ch-surface` / `-alt` / `-sunken` / `-hover`         | 各种表面 |
+| `--ch-text` / `-secondary` / `-muted` / `-placeholder` | 文字层级 |
+| `--ch-radius-xl / lg / md / sm / pill`                 | 圆角     |
+| `--ch-shadow-sm` / `-md`                               | 投影     |
+
+`html.dark` **只覆盖颜色，绝不覆盖圆角与动效令牌** —— 两套主题的几何必须完全一致，
+否则切换时会看到布局跳一下。
+
+> 改令牌时**只改值**，不要对样式表跑批量替换。"把 `#303133` 全量替换成 `var(--ch-text)`"
+> 会把令牌**定义本身**也换掉，自定义属性一旦自引用就整条失效、解析成空串，
+> 全站文字颜色静默回落成继承色。
+
+## 界面风格
+
+- 浅色底 `#f3f3f3` + 半透明卡片（`rgba(255,255,255,.7)` + `backdrop-filter: blur(20px)`）；
+- 强调色 `#0F6CBD`（悬停 `#115EA3`）；选中的导航项 = 强调色淡底 + 左侧 3px 强调条；
+- 圆角统一：卡片 8px / 控件 4px；描边用半透明黑代替灰线；阴影极轻；
+- 字体 `Segoe UI Variable / 微软雅黑 UI`；Element Plus 的变量整体对齐这套规范。
+
+Web 管理端走的是另一套（1Panel 风格：深色侧边栏 + 白色圆角卡片），
+圆角与投影集中定义在它的 `:root` 令牌里。
+
+## 动效语言
+
+两端的动画与过渡统一走一套自研的动效语言，**移植自 [beUI](https://beui.dev) 的 `lib/ease.ts`**。
+beUI 的组件本身是 React，用不到这里，但它的动效语言与框架无关。
+
+- **令牌单一来源**：`packages/shared/src/motion.ts`。三组缓动曲线 + 六组具名弹簧；
+- **弹簧由数值积分算出落定时间**，再生成 CSS `linear()` 缓动字面量 ——
+  于是弹簧可以纯 CSS 驱动，不必给每个组件挂一个 rAF 循环；
+- **运行时注入**：两端在挂载前把令牌写进 `:root` 的自定义属性。CSS 里只引用变量，不抄数值。
+
+落地到界面上的效果：
+
+| 位置                  | 动效                                                               |
+| --------------------- | ------------------------------------------------------------------ |
+| Element Plus 全站过渡 | 时长收紧到 200 / 140ms，缓动换成 EASE_OUT                          |
+| 弹窗 / 抽屉 / 浮层    | 走弹簧；**退出一律比入场快**（用户已经决定关掉它了）               |
+| 按钮                  | 按下 90ms 直落（跟手）、抬起弹回                                   |
+| 侧栏激活项            | 单个"底片"在菜单项之间滑过去，取代"每项各画一块底色"               |
+| 页面内容              | 按块错峰浮现（30ms 一档，封顶 180ms）                              |
+| 统计数字              | 0 → 实际值滚动                                                     |
+| 灵动岛                | **刻意只有单调缓动，不用弹簧**（任何过冲都会让"开合"看起来在震动） |
+
+### 降低动态效果
+
+两端各有一个 `prefers-reduced-motion` 的全局降级块，把动画压到 1ms ——
+**是压短而不是删掉**（`transition: none` 会让依赖 `transitionend` 的逻辑失灵）。
+
+唯一的例外是**加载指示旋**：它是放慢而不是停，停掉会让界面看起来像卡死。
+
+## 客户端设置页
+
+「设置」是一个可展开的分组，六个子页各有自己的路由：
+
+| 子页   | 内容                                                                          |
+| ------ | ----------------------------------------------------------------------------- |
+| 通用   | 服务器连接、离线缓存、作业录入短语、使用引导                                  |
+| 外观   | 浅色 / 深色                                                                   |
+| 灵动岛 | 尺寸、字号、主题色、视觉风格、停靠、边距、空闲细缝（详见[灵动岛](island.md)） |
+| 提醒   | 通知显示在哪一端                                                              |
+| 账号   | 当前班级信息、退出登录                                                        |
+| 关于   | 版本 / Electron / Chromium / Node、诊断信息、检查更新、鸣谢                   |
+
+`/settings` 会自动跳到「通用」。设置页的改动会**立刻生效并写进本机配置**，重启后仍保留。