2026-10-06 16:27:44 +08:00
|
|
|
|
---
|
|
|
|
|
|
title: 灵动岛
|
|
|
|
|
|
description: 桌面客户端的通知浮窗：胶囊与卡片、多条通知的竖排列表、停靠与外观、触摸屏下的行为。
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
# 灵动岛
|
|
|
|
|
|
|
|
|
|
|
|
灵动岛是桌面客户端上那个独立于主窗口的浮窗：无边框、透明、置顶、不占任务栏。
|
|
|
|
|
|
它是「消息到达的第一现场」—— 老师发的内容先在岛上出现，学生点开才进主界面。
|
|
|
|
|
|
|
|
|
|
|
|
视觉参照 [WinIsland](https://github.com/WinIslandProject/WinIsland)：
|
|
|
|
|
|
连续圆角（超椭圆）而不是 `border-radius`、纯黑 / 毛玻璃 / 主题色三种底、Apple 系统色强调色、
|
|
|
|
|
|
6 个停靠位、可选的「空闲细缝」。逐项设计令牌见[灵动岛设计令牌](../dev/winisland-design-tokens.md)。
|
|
|
|
|
|
|
|
|
|
|
|
## 各形态长什么样
|
|
|
|
|
|
|
2026-10-06 18:37:42 +08:00
|
|
|
|
| 形态 | 截图 | 说明 |
|
|
|
|
|
|
| ---------------------- | ----------------------------------------------------- | ------------------------------------------------- |
|
|
|
|
|
|
| 非上课时段的「新消息」 |  | 268×44，直接出现（无入场动画），点击后展开 |
|
|
|
|
|
|
| 点开后的详情卡 |  | 标题 / 内容 / 时间 + 打开应用 / 标为已读 / 知道了 |
|
|
|
|
|
|
| 下课后自动弹出 |  | 上课期间暂存的通知，下课后自动弹出 |
|
|
|
|
|
|
| 上课期间的紧急通知 |  | 卡片**内部**红色光晕 + 紧急角标，无需点击 |
|
|
|
|
|
|
| 新作业 |  | 青蓝描边 + 书本图标 |
|
|
|
|
|
|
| 叫人 |  | 琥珀金卡片 + 「叫人」徽标 + 「收到」按钮 |
|
2026-10-06 16:27:44 +08:00
|
|
|
|
|
|
|
|
|
|
## 什么时候弹、弹成什么样
|
|
|
|
|
|
|
|
|
|
|
|
| 场景 | 灵动岛行为 |
|
|
|
|
|
|
| --------------------------------- | --------------------------------------------------------------------------------------------- |
|
|
|
|
|
|
| 收到通知（非上课时段） | 直接出现胶囊：`新消息 · 共 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 重建渲染表面，首帧可能被当成空内容画出去。
|
|
|
|
|
|
- **收回一瞬间闪一下**：多半是**自动化验证实例的叠影**，不是产品的问题 ——
|
|
|
|
|
|
冒烟会真的在屏幕上放一个灵动岛，如果它和你自己的客户端叠在一起，你看到的是两个窗口。
|
|
|
|
|
|
（验证实例的岛是洋红主题色，一眼可辨。）
|
