1 Fork 0

Files

T

LoveChengke 19c2aa07b2 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

9.5 KiB

Raw Blame History

title, description

title	description
灵动岛	桌面客户端的通知浮窗：胶囊与卡片、多条通知的竖排列表、停靠与外观、触摸屏下的行为。

灵动岛

灵动岛是桌面客户端上那个独立于主窗口的浮窗：无边框、透明、置顶、不占任务栏。它是「消息到达的第一现场」—— 老师发的内容先在岛上出现，学生点开才进主界面。

视觉参照 WinIsland：连续圆角（超椭圆）而不是 border-radius、纯黑 / 毛玻璃 / 主题色三种底、Apple 系统色强调色、 6 个停靠位、可选的「空闲细缝」。逐项设计令牌见灵动岛设计令牌。

各形态长什么样

形态	截图	说明
非上课时段的「新消息」		268×44，直接出现（无入场动画），点击后展开
点开后的详情卡		标题 / 内容 / 时间 + 打开应用 / 标为已读 / 知道了
下课后自动弹出		上课期间暂存的通知，下课后自动弹出
上课期间的紧急通知		卡片内部红色光晕 + 紧急角标，无需点击
新作业		青蓝描边 + 书本图标
叫人		琥珀金卡片 + 「叫人」徽标 + 「收到」按钮

什么时候弹、弹成什么样

场景	灵动岛行为
收到通知（非上课时段）	直接出现胶囊：`新消息 · 共 N 条` + 发送人 + `点击查看`
多条未处理消息	胶囊标题汇总类型：`新消息：叫人/作业/通知（共 3 条）`，右侧带类型小标签
点击胶囊（只有一条）	展开为详情卡：标题、内容、时间 + 三个按钮
点击胶囊（多条）	展开为竖排列表，按重要程度排序（紧急 > 重要 > 普通 > 低，同级按时间新的在前）
点「展开更多」	把放得下的都铺出来；铺到工作区下沿还放不下时改成「更多请前往应用内操作」
多条时的「知道了 / 标为已读」	都是整批操作
上课时段的普通叫人	不自动展开（不打断课堂），但保留胶囊并允许学生主动点开；下课自动展开
紧急叫人	上课时段也立即展开，卡片是琥珀金 + 「叫人」徽标，按钮为「收到」
上课时段的普通通知	完全不显示（窗口隐藏）并进队列；下课自动弹出详情 → 收起为胶囊
上课时段的紧急通知	无论是否上课立刻展开，45 秒后收起
点击卡片空白处 / 屏幕任意位置	回缩为胶囊（不直接消失，仍可再次点开）
收起后胶囊常驻	只要还有未处理通知，胶囊就不会消失；彻底消失只在「知道了 / 标为已读」、队列清空或进入上课时段

本机刚录入的作业不会上岛 —— 自己通知自己没意义。

多条通知时的排版

这是最容易出问题的地方：卡片要长高，还得刚好放得下。规则是主进程与渲染进程各算一次同一个数 （islandListLayout()，在 @classhelper/shared 里）：

默认只显示前 defaultVisibleRows（3）条，下面是「展开更多（还有 N 条）」；
点开后铺到 maxCardHeight 为止，仍放不下的改成「更多请前往应用内操作」；
maxCardHeight 是主进程按工作区 / 任务栏算出的可用高度，随状态下发。

窗口的包围盒会在卡片形变之前先长高（这一步用户看不到），否则底部的按钮会被裁掉。

外观设置

客户端「设置 → 灵动岛」：

设置项	区间 / 取值	默认
高度	36–72px	44
宽度	220–420px	268
圆角	8–32px	20
不透明度	40%–100%	100%
字号	11–20px	13
动画速度	0.5×–2×	1×
主题色	取色器	`#0a84ff`（Apple 系统蓝）
视觉风格	纯黑 / 毛玻璃 / 主题色渐变	纯黑
显示位置	顶部 / 底部 × 左 / 中 / 右（6 个锚点）	顶部居中
左右 / 上下边距	0–200px / 0–160px	都是 8px
跟随鼠标屏幕	开 / 关	关
动画开关	开 / 关	开
始终置顶	开 / 关	开
空闲细缝	开 / 关	关

几个容易困惑的点：

字号是"基础字号"：岛内所有文本 = 基础字号 × 各自的排版系数（标题 1.08 / 正文 0.95 / 次要 0.78 / 徽标 0.76 / 胶囊标题 0.92 ……），所以调一个滑块就能整体放大，比例不会乱。
左右边距只在「左 / 右停靠」时生效：默认是「顶部居中」，水平锚点就是屏幕中线，这时调左右边距不会有任何变化 —— 设置页会把那个滑块置灰并写明原因。
「毛玻璃」不是窗口材质，是 CSS 半透明深色卡。用系统级背景材质（setBackgroundMaterial）会在卡片外那一圈垫出一块浅色"白底面板"，而且调用过一次就再也回不去逐像素透明。
**「预览效果」**会本地推一条通知，立刻看到当前尺寸 / 配色 / 动画。预览是专用通道：直接展开、失焦不收起、30 秒后自行消失。

越界的值在主进程统一夹紧，配置填坏了也不会让布局错乱。

触摸屏（希沃白板等）

触摸屏上灵动岛走的是另一条命中链路。

原因：常规的命中判定有两条路径 ——渲染进程转发鼠标移动、主进程读系统光标位置 —— 两条都以"鼠标指针移动"为前提。而手指触摸既不产生 mousemove、也不移动系统光标，窗口就会永远停在"穿透"状态，手指点不开岛。

修法是：客户端检测到 navigator.maxTouchPoints > 0 后进入触摸模式，把窗口贴合岛体并始终接收输入（Windows 上 Electron 没有窗口区域能力，这是唯一可行的办法）。

触摸模式下有三条额外的护栏，都是为了不闪、不裁：

窗口可见期间只缩不放（需要变小一律等窗口隐藏之后再做）；
命中矩形按窗口实际尺寸算偏移；
失焦宽限期放宽到 1200ms（触摸没有光标，"假失焦"会让刚展开的岛被缩回胶囊）。

非触摸屏的机器完全不走这条路。

鼠标穿透

窗口是按最大形态创建的固定包围盒，比卡片大一圈。默认整块穿透，渲染层做命中测试，只在指针进入岛体时打开命中 —— 所以这个"大窗口"不会吞掉桌面上的点击。另有一层保险：主进程每 120ms 用系统光标位置校正一次命中。

排查"闪一下"

开合时底座闪一下：卡片投影是常驻的 CSS filter，形态切换只改参数。给元素增删 filter 会让 Chromium 重建渲染表面，首帧可能被当成空内容画出去。
收回一瞬间闪一下：多半是自动化验证实例的叠影，不是产品的问题 —— 冒烟会真的在屏幕上放一个灵动岛，如果它和你自己的客户端叠在一起，你看到的是两个窗口。（验证实例的岛是洋红主题色，一眼可辨。）

9.5 KiB Raw Blame History Unescape Escape

灵动岛