feat(desktop+web+server): ClassIsland 风格 UI、灵动岛动画/交互修复、作业上岛与"叫人"功能
## 灵动岛修复与动画优化(用户反馈) - **收回不再出现"方框"闪烁**:卡片改为**固定逻辑尺寸 + 顶部居中锚定**, 窗口只负责露出/裁切透明区域。此前卡片随窗口拉伸,形变过程中会看到被拉扁的圆角方块, 胶囊里的铃铛/文字还会被垂直居中而"从上跳到下";两条问题同源,现已消除。 冒烟用 15 次采样断言卡片尺寸恒为固定值(`396x308` / `260x38`),一旦出现中间值即失败。 - **点击屏幕任意位置收回**:展开态临时 `setFocusable(true)` 并取焦,点到别处即失焦 → 自动回缩为胶囊; 收起后立即释放可聚焦性。断言覆盖 `focusable=true → 失焦后 mode=pill、focusable=false`。 - 动画继续打磨:危险/叫人形态改为**内部光晕**(卡片四周再留 4px 透明边,彻底避免窗口边界裁切出硬边)、 尖角与圆角统一、形态尺寸各异(胶囊 268×44 / 详情 404×316 / 紧急 424×344 / 叫人 440×360)。 ## 灵动岛"标为已读"真正同步通知中心 - 新增链路:灵动岛 `mark-read` → 主进程 `setMarkReadHandler` → 主窗口渲染进程 → `notificationApi.markRead` + 刷新 store(未读红点即时减少)。 - 真机链路断言:点击"标为已读"后 `read=false → true`、未读数 `1 → 0`(此前只从灵动岛队列移除)。 ## 作业发布也上岛 - `homework:new` → 灵动岛 `kind=homework`:胶囊显示"新作业"(青蓝描边 + 书本图标), 展开显示作业说明与"截止时间:…"。 ## 新增"叫人"功能 - 服务端:新模块 `modules/calls`(`POST /api/calls`)——校验班级可写 + 学生属于该班, 落库一条 HIGH 级通知(进通知中心、可用已读状态),广播 `notification:new` 到班级房间, 并定向 `call:new` 给被叫学生。 - 共享层:`CALL_QUICK_PHRASES`(8 条快捷短语)、`buildCallTitle()`("请 XXX 同学找 XXX 老师",老师名已含"老师"不重复)、 `ServerToClientEvents['call:new']`、`CreateCallRequest`。 - Web 管理端:学生管理列表新增 **叫人** 按钮 → 弹窗显示对象、快捷短语(点选/取消)、自定义消息(优先),发送即通知。 - 客户端:`call:new` → 灵动岛 `kind=call`,**上课时段也立即展开**(老师正在等这名学生), 琥珀金卡片 +"叫人"徽标 +"收到"按钮,90 秒后自动收起。 ## 客户端界面改为 ClassIsland 同款 Fluent 风格 - 主题令牌:Mica 浅底 `#f3f3f3`、亚克力卡片 `rgba(255,255,255,.7)` + `backdrop-filter`、 强调色 `#0F6CBD`、半透明描边、卡片 8px / 控件 4px 圆角、极轻阴影。 - Element Plus 变量整体对齐(`--el-color-primary`、圆角、表头/行分隔、滚动条等)。 - 侧边导航改为 Fluent NavigationView 观感:白色半透明底、选中项强调色淡底 + 左侧 3px 强调条; 品牌标改为强调色渐变圆角方块。附客户端五个页面实拍(`docs/screenshots/client/`)。 ## 验证 - `pnpm verify:e2e` **68/68**(新增 6 项叫人:201 + 标题模板、自定义消息优先、上课时段允许、学生 403、通知中心可见、清理) - `pnpm verify:desktop` **33/33**(新增:卡片固定尺寸、点击任意处收回、标为已读同步、作业上岛、叫人上课中立即展开、真实通知链路) - `pnpm verify:web` **16/16**(新增叫人入口:弹窗、8 条快捷短语、自定义输入、短语可选中) - `pnpm lint` / `format:check` / `typecheck` 全部通过;服务端安装包已重打并安装验证
This commit is contained in:
1 parent
f759aac0a2
commit
219f6ae83a
28 files changed
+1555
-156
No files matched your search
@@ -1,4 +1,4 @@
|
||||
/**
|
||||
/**
|
||||
* Web 管理端 UI 冒烟测试(Electron 驱动真实浏览器内核)。
|
||||
*
|
||||
* 覆盖:
|
||||
@@ -331,6 +331,56 @@ async function main() {
|
||||
})()`);
|
||||
record('Service Worker 已注册(浏览器可安装为应用)', Boolean(swInfo?.ok), String(swInfo?.detail ?? ''));
|
||||
|
||||
// 7.5 "叫人"入口(学生管理 → 叫人 → 快捷短语/自定义消息)
|
||||
const callDialog = await win.webContents.executeJavaScript(`(async () => {
|
||||
const menu = Array.from(document.querySelectorAll('.el-menu-item')).find((node) =>
|
||||
(node.textContent ?? '').trim().startsWith('学生管理'),
|
||||
);
|
||||
if (!menu) return { ok: false, reason: '未找到学生管理菜单' };
|
||||
menu.click();
|
||||
const deadline = Date.now() + 6000;
|
||||
while (Date.now() < deadline && location.pathname !== '/students') {
|
||||
await new Promise((resolve) => setTimeout(resolve, 80));
|
||||
}
|
||||
await new Promise((resolve) => setTimeout(resolve, 600));
|
||||
const callButton = Array.from(document.querySelectorAll('button')).find((node) =>
|
||||
(node.textContent ?? '').trim() === '叫人',
|
||||
);
|
||||
if (!callButton) return { ok: false, reason: '学生列表里没有"叫人"按钮' };
|
||||
callButton.click();
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
const dialog = document.querySelector('.el-dialog');
|
||||
if (!dialog) return { ok: false, reason: '叫人弹窗未打开' };
|
||||
const phrases = Array.from(dialog.querySelectorAll('.call-phrase')).map((node) => node.textContent.trim());
|
||||
const hasTextarea = Boolean(dialog.querySelector('textarea'));
|
||||
const target = dialog.querySelector('.el-alert__title')?.textContent?.trim() ?? '';
|
||||
// 点第二条快捷短语(第一条是默认选中,再点会取消),确认可切换选中态
|
||||
const phraseNodes = Array.from(dialog.querySelectorAll('.call-phrase'));
|
||||
const target2 = phraseNodes[1] ?? phraseNodes[0];
|
||||
const expected = target2 ? target2.textContent.trim() : '';
|
||||
if (target2) target2.click();
|
||||
await new Promise((resolve) => setTimeout(resolve, 200));
|
||||
const darkTag = dialog.querySelector('.call-phrase.el-tag--dark');
|
||||
const picked = Boolean(darkTag) && darkTag.textContent.trim() === expected;
|
||||
return { ok: true, phrases, hasTextarea, target, picked, path: location.pathname };
|
||||
})()`);
|
||||
record(
|
||||
'叫人入口(快捷短语 + 自定义消息)',
|
||||
Boolean(callDialog?.ok) &&
|
||||
(callDialog?.phrases?.length ?? 0) >= 5 &&
|
||||
callDialog?.hasTextarea === true &&
|
||||
callDialog?.picked === true,
|
||||
`path=${callDialog?.path} 对象="${callDialog?.target}" 短语数=${callDialog?.phrases?.length ?? 0} 自定义输入=${callDialog?.hasTextarea} 可选中=${callDialog?.picked}` +
|
||||
`${callDialog?.reason ? ` 原因=${callDialog.reason}` : ''}`,
|
||||
);
|
||||
await win.webContents.executeJavaScript(`(() => {
|
||||
const cancel = Array.from(document.querySelectorAll('.el-dialog__footer button')).find((node) =>
|
||||
(node.textContent ?? '').trim() === '取消',
|
||||
);
|
||||
if (cancel) cancel.click();
|
||||
return true;
|
||||
})()`);
|
||||
await sleep(300);
|
||||
// 8. 手机小屏适配(390×844,1Panel 风格:侧边栏收进抽屉 + 卡片内横向滚动)
|
||||
await runMobileChecks(win);
|
||||
|
||||
|
||||
Reference in new issue
Block a user