LoveChengke
19c2aa07b2
文档站（`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`。
122 lines
9.5 KiB
Markdown
122 lines
9.5 KiB
Markdown
---
|
||
title: 灵动岛
|
||
description: 桌面客户端的通知浮窗：胶囊与卡片、多条通知的竖排列表、停靠与外观、触摸屏下的行为。
|
||
---
|
||
|
||
# 灵动岛
|
||
|
||
灵动岛是桌面客户端上那个独立于主窗口的浮窗：无边框、透明、置顶、不占任务栏。
|
||
它是「消息到达的第一现场」—— 老师发的内容先在岛上出现，学生点开才进主界面。
|
||
|
||
视觉参照 [WinIsland](https://github.com/WinIslandProject/WinIsland)：
|
||
连续圆角（超椭圆）而不是 `border-radius`、纯黑 / 毛玻璃 / 主题色三种底、Apple 系统色强调色、
|
||
6 个停靠位、可选的「空闲细缝」。逐项设计令牌见[灵动岛设计令牌](../dev/winisland-design-tokens.md)。
|
||
|
||
## 各形态长什么样
|
||
|
||
| 形态 | 截图 | 说明 |
|
||
| ---------------------- | ----------------------------------------------------------------- | ------------------------------------------------- |
|
||
| 非上课时段的「新消息」 |  | 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 重建渲染表面，首帧可能被当成空内容画出去。
|
||
- **收回一瞬间闪一下**：多半是**自动化验证实例的叠影**，不是产品的问题 ——
|
||
冒烟会真的在屏幕上放一个灵动岛，如果它和你自己的客户端叠在一起，你看到的是两个窗口。
|
||
（验证实例的岛是洋红主题色，一眼可辨。）
|