feat: 客户端灵动岛 + 上课时段紧急通知二次确认，并修复打包/校验脚本在 Electron 宿主下的多个缺陷
## 客户端灵动岛（动态岛）
- 新增独立透明置顶窗口：桌面中上方常驻、不占任务栏、不抢焦点（268x44 胶囊 / 404x316 详情 / 424x344 紧急）
- 三种形态与动画：隐藏 ↔ 胶囊 ↔ 详情，尺寸用 easeOutCubic 260ms 逐帧缓动、透明度单独淡入淡出
（尺寸与淡入使用各自动画令牌，避免互相打断导致窗口卡在胶囊尺寸）
- 行为：普通通知变「新消息 · 共 N 条」胶囊，点击展开详情；上课时段自动隐藏并进入待发队列，
下课后自动弹出；紧急通知无论是否上课立即展开（红色呼吸光晕 + 紧急角标，无需点击）
- 上课状态来自 GET /api/schedules/current（10s 心跳 + 下课时长定时器），
新增 src/main/island.ts（控制器/IPC）、src/preload/island.ts、src/island/IslandApp.vue、
src/renderer/island/bridge.ts、island.html 与多页 Vite 构建
## 上课时段发布紧急通知的二次确认
- 服务端：priority=URGENT 且当前处于上课时间段且未带 confirmDuringClass 时返回
409 URGENT_DURING_CLASS（携带 current/next/week/serverTime），绕过界面调接口同样被拦截
- 新增 GET /api/schedules/current（inClass/current/next，at 参数用于诊断与测试）
- Web 管理端：全屏警告遮罩（UrgentClassWarning.vue），显示正在上的课时段与待发布标题，
确认按钮带 3 秒倒计时（圆环进度，倒计时结束前禁用），取消即不发；并发命中 409 同样兜底弹窗
## 打包与验证脚本修复（Electron 宿主环境）
- scripts/lib/node-runtime.mjs：定位真正的 node.exe。此前经 pnpm 运行时 process.execPath 指向
Electron，dist:server 会把 Electron 复制成安装包内的 node.exe，dist:win 会让 electron-builder 报
Unknown argument: .../cli.js（改为显式使用真实 Node）
- scripts/lib/electron-env.mjs：启动 Electron 前清理继承的 ELECTRON_RUN_AS_NODE（否则 Electron 退化为
纯 Node，require('electron') 直接 MODULE_NOT_FOUND），并从 path.txt 定位 electron.exe
（process.versions.electron 存在时 import 'electron' 返回的是 API 对象而非路径）
- scripts/dist-server.mjs：新增构建产物新鲜度校验（曾出现 server 已重建但打进安装包的 shared/dist 是旧的，
安装后服务启动即报 does not provide an export named MAX_TERM_WEEK）
- scripts/ui-smoke：新增 live-probe.mjs 真实制造/清理上课时段，Electron 驱动真实点击断言全屏警告文案、
按钮禁用与 3 秒倒计时时长（实测 2966ms），测试后自动删除探针课表与测试通知
## 验证结果
- pnpm verify:e2e 62/62（新增上课时段拦截、二次确认后发布、普通通知不受限等 8 项）
- pnpm verify:web 8/8（新增上课时段紧急通知全屏警告 + 倒计时）
- pnpm verify:desktop 18/18（新增灵动岛窗口/上课隐藏/下课弹出/紧急立即展开/胶囊点击展开 + 截图）
- 打包后 EXE 冒烟 15/15（packaged: true，退出码 0）
- 服务端安装程序升级安装：.env 与数据库保持不变，/api/schedules/current 正常
- pnpm lint / format:check / typecheck 全部通过
This commit is contained in:
LoveChengke committed
1 parent
5545ef6f55
commit
3a9f8812fc
40 files changed
+3062
-149
No files matched your search
@@ -2,7 +2,9 @@ import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
import { app } from 'electron';
|
||||
import type { BrowserWindow } from 'electron';
|
||||
import type { IslandNotification } from '@classhelper/shared';
|
||||
import { getDiagnostics } from './ipc.js';
|
||||
import { island } from './island.js';
|
||||
|
||||
interface SmokeResult {
|
||||
name: string;
|
||||
@@ -10,6 +12,177 @@ interface SmokeResult {
|
||||
detail: string;
|
||||
}
|
||||
|
||||
type Recorder = (name: string, ok: boolean, detail?: string) => void;
|
||||
|
||||
function sleep(ms: number): Promise<void> {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
/** 灵动岛状态截图留档（便于人工复核外观与动画） */
|
||||
async function captureIsland(name: string): Promise<void> {
|
||||
const dir = process.env.ISLAND_SHOTS_DIR;
|
||||
const win = island.getWindow();
|
||||
if (!dir || !win || win.isDestroyed() || !win.isVisible()) return;
|
||||
try {
|
||||
// 透明窗口直接 capturePage 会得到空白图：把它临时放到不透明背景上再截图
|
||||
await win.webContents.executeJavaScript(
|
||||
`document.documentElement.style.background = '#1f2733'; document.body.style.background = '#1f2733'; true`,
|
||||
);
|
||||
await sleep(120);
|
||||
const image = await win.webContents.capturePage();
|
||||
await win.webContents.executeJavaScript(
|
||||
`document.documentElement.style.background = 'transparent'; document.body.style.background = 'transparent'; true`,
|
||||
);
|
||||
fs.mkdirSync(dir, { recursive: true });
|
||||
fs.writeFileSync(path.join(dir, `${name}.png`), image.toPNG());
|
||||
console.log(`[SMOKE] 灵动岛截图：${path.join(dir, `${name}.png`)}`);
|
||||
} catch (error) {
|
||||
console.warn('[SMOKE] 灵动岛截图失败', error);
|
||||
}
|
||||
}
|
||||
|
||||
/** 打印灵动岛渲染进程的真实 DOM 结构（排查空白窗口） */
|
||||
async function dumpIslandDom(_label: string): Promise<string> {
|
||||
const win = island.getWindow();
|
||||
if (!win || win.isDestroyed()) return 'no-window';
|
||||
try {
|
||||
return await win.webContents.executeJavaScript(
|
||||
`(() => {
|
||||
const app = document.querySelector('#app');
|
||||
const card = document.querySelector('.island-card');
|
||||
return JSON.stringify({
|
||||
appChildren: app ? app.children.length : -1,
|
||||
cardClass: card ? card.className : null,
|
||||
text: (document.body.innerText || '').replace(/\\s+/g, ' ').slice(0, 60),
|
||||
});
|
||||
})()`,
|
||||
);
|
||||
} catch (error) {
|
||||
return `dump-error: ${(error as Error).message}`;
|
||||
}
|
||||
}
|
||||
|
||||
function makeNotification(
|
||||
id: string,
|
||||
priority: IslandNotification['priority'],
|
||||
title: string,
|
||||
): IslandNotification {
|
||||
return {
|
||||
id,
|
||||
title,
|
||||
content:
|
||||
'明天下午的数学课改为在实验楼 B205 上课，请同学们提前 10 分钟到达，并携带上次发的练习册。如有疑问请联系课代表。',
|
||||
priority,
|
||||
createdAt: new Date().toISOString(),
|
||||
courseName: '数学',
|
||||
teacherName: '张老师',
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 灵动岛行为验证（对应产品需求）：
|
||||
* 1. 上课时间段收到普通通知 → 自动隐藏并暂存
|
||||
* 2. 下课后 → 自动在桌面中上方弹出详情
|
||||
* 3. 上课时间段收到紧急通知 → 立即展开显示详情（无需点击）
|
||||
* 4. 非上课时段收到普通通知 → 变成"新消息"胶囊，点击后展开
|
||||
*/
|
||||
async function runIslandChecks(record: Recorder, results: SmokeResult[]): Promise<void> {
|
||||
record('灵动岛窗口已创建（置顶/透明/不占任务栏）', island.isReady(), `ready=${island.isReady()}`);
|
||||
if (!island.isReady()) return;
|
||||
|
||||
const islandWindow = island.getWindow();
|
||||
|
||||
// 1) 上课期间：普通通知必须保持隐藏并进入队列
|
||||
island.setClassState({ inClass: true, currentPeriodEnd: '08:45', week: 1 });
|
||||
island.pushNotification(makeNotification('smoke-normal-in-class', 'NORMAL', '上课期间的普通通知'), {
|
||||
inClass: true,
|
||||
});
|
||||
await sleep(500);
|
||||
const hiddenState = island.getState();
|
||||
record(
|
||||
'上课期间普通通知自动隐藏（暂存待下课弹出）',
|
||||
hiddenState.mode === 'hidden' && hiddenState.queued.length === 1,
|
||||
`mode=${hiddenState.mode} queued=${hiddenState.queued.length}`,
|
||||
);
|
||||
console.log(`[SMOKE] 隐藏态 DOM：${await dumpIslandDom('hidden')}`);
|
||||
|
||||
// 2) 下课：自动弹出暂存通知的详情
|
||||
island.setClassState({ inClass: false, currentPeriodEnd: null, week: 1 });
|
||||
await sleep(900);
|
||||
const afterClassState = island.getState();
|
||||
record(
|
||||
'下课后自动弹出通知详情',
|
||||
afterClassState.mode === 'expanded' && afterClassState.active?.id === 'smoke-normal-in-class',
|
||||
`mode=${afterClassState.mode} active=${afterClassState.active?.id ?? '-'} reason=${afterClassState.reason ?? '-'}`,
|
||||
);
|
||||
await captureIsland('island-2-after-class');
|
||||
|
||||
// 3) 上课期间紧急通知：立即展开，无需点击
|
||||
island.setClassState({ inClass: true, currentPeriodEnd: '08:45', week: 1 });
|
||||
await sleep(300);
|
||||
island.pushNotification(makeNotification('smoke-urgent-in-class', 'URGENT', '上课期间的紧急通知'), {
|
||||
inClass: true,
|
||||
});
|
||||
await sleep(900);
|
||||
const urgentState = island.getState();
|
||||
record(
|
||||
'上课期间紧急通知立即展开显示详情（无需点击）',
|
||||
urgentState.mode === 'expanded' &&
|
||||
urgentState.active?.id === 'smoke-urgent-in-class' &&
|
||||
urgentState.reason === 'urgent',
|
||||
`mode=${urgentState.mode} active=${urgentState.active?.id ?? '-'} reason=${urgentState.reason ?? '-'}`,
|
||||
);
|
||||
await captureIsland('island-3-urgent');
|
||||
|
||||
// 4) 非上课时段普通通知 → 胶囊态；点击后展开
|
||||
island.handleAction({ action: 'dismiss' });
|
||||
island.setClassState({ inClass: false, currentPeriodEnd: null, week: 1 });
|
||||
await sleep(300);
|
||||
island.pushNotification(makeNotification('smoke-normal-free', 'NORMAL', '课间收到的普通通知'), {
|
||||
inClass: false,
|
||||
});
|
||||
await sleep(700);
|
||||
const pillState = island.getState();
|
||||
await captureIsland('island-4-pill');
|
||||
console.log(`[SMOKE] 胶囊态 DOM：${await dumpIslandDom('pill')}`);
|
||||
|
||||
const clicked = await islandWindow?.webContents.executeJavaScript(
|
||||
`(() => {
|
||||
const pill = document.querySelector('.island-card.pill:not(.hidden-placeholder)');
|
||||
if (!pill) return false;
|
||||
pill.click();
|
||||
return true;
|
||||
})()`,
|
||||
);
|
||||
await sleep(800);
|
||||
const expandedState = island.getState();
|
||||
record(
|
||||
'普通通知先变"新消息"胶囊，点击后展开详情',
|
||||
pillState.mode === 'pill' && clicked === true && expandedState.mode === 'expanded',
|
||||
`pillMode=${pillState.mode} clicked=${clicked} expandedMode=${expandedState.mode}`,
|
||||
);
|
||||
await captureIsland('island-5-clicked');
|
||||
|
||||
// 5) 灵动岛 DOM 结构自检（确保渲染进程真的画出卡片而不是空白窗口）
|
||||
const domInfo = await islandWindow?.webContents.executeJavaScript(
|
||||
`(() => ({
|
||||
hasCard: Boolean(document.querySelector('.island-card')),
|
||||
title: document.querySelector('.title')?.textContent ?? '',
|
||||
hasActions: Boolean(document.querySelector('.solid-btn')),
|
||||
}))()`,
|
||||
);
|
||||
record(
|
||||
'灵动岛渲染进程正常绘制（卡片/标题/操作按钮）',
|
||||
Boolean(domInfo?.hasCard && domInfo?.title && domInfo?.hasActions),
|
||||
`title=${domInfo?.title ?? '-'} actions=${domInfo?.hasActions ?? false}`,
|
||||
);
|
||||
|
||||
// 收尾：隐藏灵动岛，避免影响后续用例
|
||||
island.handleAction({ action: 'dismiss' });
|
||||
await sleep(300);
|
||||
results.push({ name: '灵动岛用例收尾', ok: true, detail: '已隐藏' });
|
||||
}
|
||||
|
||||
/**
|
||||
* Electron 冒烟验证（ELECTRON_SMOKE_TEST=1 时触发，跑完自动退出）。
|
||||
* 覆盖：preload 桥接、渲染进程挂载、登录页 DOM、IndexedDB 缓存读写、离线回退，
|
||||
@@ -135,6 +308,9 @@ export async function runSmokeTest(win: BrowserWindow): Promise<void> {
|
||||
);
|
||||
record('断网时回退到本地缓存', Boolean(offline?.ok), String(offline?.detail ?? ''));
|
||||
|
||||
// ---------------------------------------------------------------- 灵动岛
|
||||
await runIslandChecks(record, results);
|
||||
|
||||
// 可选：对真实后端做联网集成自检（ELECTRON_SMOKE_ONLINE=1 时启用）
|
||||
if (process.env.ELECTRON_SMOKE_ONLINE === '1') {
|
||||
const online = await win.webContents.executeJavaScript(
|
||||
|
||||
Reference in new issue
Block a user