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
@@ -24,6 +24,9 @@ const SIZES: Record<IslandMode, { width: number; height: number }> = {
|
||||
|
||||
const URGENT_SIZE = { width: 424, height: 344 };
|
||||
|
||||
/** "叫人"消息卡片(比普通详情略大,突出"请 XXX 同学找 XXX 老师") */
|
||||
const CALL_SIZE = { width: 440, height: 360 };
|
||||
|
||||
/** 各状态的自动收起/隐藏时长(毫秒),0 表示不自动收起 */
|
||||
const TIMEOUTS = {
|
||||
pill: 15_000,
|
||||
@@ -31,6 +34,8 @@ const TIMEOUTS = {
|
||||
afterClassPill: 25_000,
|
||||
expanded: 20_000,
|
||||
urgent: 45_000,
|
||||
/** 叫人消息常驻更久,避免学生走开一会儿回来就看不到 */
|
||||
call: 90_000,
|
||||
};
|
||||
|
||||
export interface IslandPushContext {
|
||||
@@ -76,10 +81,17 @@ class IslandController {
|
||||
/** 灵动岛展开时点击"打开应用"交给外部处理 */
|
||||
private openAppHandler: (() => void) | null = null;
|
||||
|
||||
/** 灵动岛点"标为已读"时交给外部(主窗口渲染进程)同步通知中心 */
|
||||
private markReadHandler: ((id: string) => void) | null = null;
|
||||
|
||||
setOpenAppHandler(handler: () => void): void {
|
||||
this.openAppHandler = handler;
|
||||
}
|
||||
|
||||
setMarkReadHandler(handler: (id: string) => void): void {
|
||||
this.markReadHandler = handler;
|
||||
}
|
||||
|
||||
async init(rendererUrl: string | null): Promise<void> {
|
||||
this.rendererUrl = rendererUrl;
|
||||
if (this.win && !this.win.isDestroyed()) return;
|
||||
@@ -117,6 +129,17 @@ class IslandController {
|
||||
this.ready = false;
|
||||
});
|
||||
|
||||
/**
|
||||
* 点击屏幕任意位置收起:展开态临时允许窗口获得焦点,
|
||||
* 用户点到别处(桌面、浏览器、其他应用)时窗口失焦 → 回缩为胶囊。
|
||||
*/
|
||||
win.on('blur', () => {
|
||||
if (this.state.mode === 'expanded' && !this.state.inClass) {
|
||||
logger.info('灵动岛:点击屏幕其他位置,回缩为胶囊');
|
||||
this.handleAction({ action: 'collapse' });
|
||||
}
|
||||
});
|
||||
|
||||
this.win = win;
|
||||
|
||||
// 开发/冒烟时把灵动岛渲染进程的日志转发到主进程,便于排查"窗口空白"之类问题
|
||||
@@ -161,10 +184,18 @@ class IslandController {
|
||||
/* ------------------------------------------------------------ 对外行为 */
|
||||
|
||||
/**
|
||||
* 收到一条通知。
|
||||
* - 紧急:立刻展开(无视上课时段)
|
||||
* 是否需要"立即展开、无视上课时段"。
|
||||
* 紧急通知与"叫人"(老师点名)都属于:学生必须马上看到。
|
||||
*/
|
||||
private isImmediate(notification: IslandNotification): boolean {
|
||||
return notification.priority === 'URGENT' || notification.kind === 'call';
|
||||
}
|
||||
|
||||
/**
|
||||
* 收到一条消息。
|
||||
* - 紧急 / 叫人:立刻展开(无视上课时段)
|
||||
* - 上课中:进队列并保持隐藏(下课后由 setClassState 触发弹出)
|
||||
* - 其它:显示"新消息"胶囊,等待点击展开
|
||||
* - 其它:显示"新消息/新作业"胶囊,等待点击展开
|
||||
*/
|
||||
pushNotification(notification: IslandNotification, context: IslandPushContext = {}): void {
|
||||
const inClass = context.inClass ?? this.state.inClass;
|
||||
@@ -172,14 +203,19 @@ class IslandController {
|
||||
if (context.currentPeriodEnd !== undefined)
|
||||
this.state.currentPeriodEnd = context.currentPeriodEnd ?? null;
|
||||
|
||||
if (notification.priority === 'URGENT') {
|
||||
// 紧急插播:如果正在展示别的通知,把它放回队列
|
||||
if (this.isImmediate(notification)) {
|
||||
// 插播:如果正在展示别的消息,把它放回队列
|
||||
if (this.state.active && this.state.active.id !== notification.id) {
|
||||
this.state.queued.push(this.state.active);
|
||||
}
|
||||
this.state.queued = this.state.queued.filter((item) => item.id !== notification.id);
|
||||
this.activate(notification, 'urgent', 'expanded');
|
||||
logger.info(`灵动岛紧急插播:${notification.title}`);
|
||||
const reason = notification.kind === 'call' ? 'call' : 'urgent';
|
||||
this.activate(notification, reason, 'expanded');
|
||||
logger.info(
|
||||
notification.kind === 'call'
|
||||
? `灵动岛叫人消息:${notification.title}`
|
||||
: `灵动岛紧急插播:${notification.title}`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -245,18 +281,24 @@ class IslandController {
|
||||
|
||||
handleAction(payload: IslandActionPayload): void {
|
||||
switch (payload.action) {
|
||||
case 'expand':
|
||||
// 上课时段一律不显示灵动岛(只有紧急通知能自动展开)
|
||||
case 'expand': {
|
||||
// 上课时段一律不显示灵动岛(只有紧急通知 / 叫人才会自动展开)
|
||||
if (this.state.inClass) break;
|
||||
if (this.state.active) {
|
||||
const active = this.state.active;
|
||||
if (active) {
|
||||
this.setState({ mode: 'expanded' });
|
||||
this.scheduleCollapse(
|
||||
this.state.active.priority === 'URGENT' ? TIMEOUTS.urgent : TIMEOUTS.expanded,
|
||||
this.isImmediate(active)
|
||||
? active.kind === 'call'
|
||||
? TIMEOUTS.call
|
||||
: TIMEOUTS.urgent
|
||||
: TIMEOUTS.expanded,
|
||||
);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'collapse':
|
||||
// 点击卡片空白处 / 右上角收起按钮:回缩到灵动岛(胶囊),不直接消失
|
||||
// 点击卡片空白处 / 右上角收起按钮 / 点击屏幕任意位置:回缩到灵动岛(胶囊)
|
||||
if (this.state.inClass) {
|
||||
this.hideImmediately();
|
||||
break;
|
||||
@@ -272,12 +314,18 @@ class IslandController {
|
||||
this.dismissActive();
|
||||
break;
|
||||
case 'mark-read': {
|
||||
const queue = this.state.queued.filter((item) => item.id !== payload.id);
|
||||
const id = payload.id;
|
||||
const queue = this.state.queued.filter((item) => item.id !== id);
|
||||
this.state.queued = queue;
|
||||
if (this.state.active?.id === payload.id) this.state.active = null;
|
||||
if (this.state.active?.id === id) this.state.active = null;
|
||||
this.state.updatedAt = Date.now();
|
||||
if (this.state.mode === 'hidden') this.emit();
|
||||
else this.dismissActive();
|
||||
// 通知中心同步:转交主窗口渲染进程调用"标记已读"接口并刷新列表
|
||||
if (id) {
|
||||
logger.info(`灵动岛标记已读:${id}`);
|
||||
this.markReadHandler?.(id);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'open-app':
|
||||
@@ -308,6 +356,7 @@ class IslandController {
|
||||
this.emit();
|
||||
}
|
||||
if (!this.win || this.win.isDestroyed()) return;
|
||||
this.win.setFocusable(false);
|
||||
if (this.win.isVisible()) this.win.hide();
|
||||
this.win.setOpacity(1);
|
||||
}
|
||||
@@ -419,13 +468,17 @@ class IslandController {
|
||||
private syncWindow(): void {
|
||||
if (!this.win || this.win.isDestroyed()) return;
|
||||
|
||||
// 上课时间段:一律不显示灵动岛(只有"正在展示的紧急通知"允许出现在屏幕上)
|
||||
const urgentShowing = this.state.mode === 'expanded' && this.state.active?.priority === 'URGENT';
|
||||
if (this.state.inClass && !urgentShowing) {
|
||||
// 上课时间段:一律不显示灵动岛(只有"正在展示的紧急通知/叫人"允许出现在屏幕上)
|
||||
const immediateShowing =
|
||||
this.state.mode === 'expanded' && this.state.active !== null && this.isImmediate(this.state.active);
|
||||
if (this.state.inClass && !immediateShowing) {
|
||||
this.hideImmediately();
|
||||
return;
|
||||
}
|
||||
|
||||
// 展开态才允许获得焦点,这样点击屏幕其他位置会 blur → 自动收起
|
||||
this.applyFocusable();
|
||||
|
||||
if (this.state.mode === 'hidden') {
|
||||
this.fadeOut();
|
||||
return;
|
||||
@@ -433,8 +486,12 @@ class IslandController {
|
||||
|
||||
const size =
|
||||
this.state.mode === 'expanded'
|
||||
? this.state.active?.priority === 'URGENT'
|
||||
? URGENT_SIZE
|
||||
? this.state.active
|
||||
? this.isImmediate(this.state.active)
|
||||
? this.state.active.kind === 'call'
|
||||
? CALL_SIZE
|
||||
: URGENT_SIZE
|
||||
: SIZES.expanded
|
||||
: SIZES.expanded
|
||||
: SIZES.pill;
|
||||
|
||||
@@ -465,6 +522,14 @@ class IslandController {
|
||||
this.fadeToken += 1;
|
||||
}
|
||||
|
||||
/** 展开态允许聚焦(用于"点击屏幕任意处收起"),其余时间不抢焦点 */
|
||||
private applyFocusable(): void {
|
||||
if (!this.win || this.win.isDestroyed()) return;
|
||||
const shouldFocus = this.state.mode === 'expanded';
|
||||
if (this.win.isFocusable() !== shouldFocus) this.win.setFocusable(shouldFocus);
|
||||
if (shouldFocus) this.win.focus();
|
||||
}
|
||||
|
||||
private fadeIn(): void {
|
||||
if (!this.win || this.win.isDestroyed()) return;
|
||||
const token = ++this.fadeToken;
|
||||
@@ -561,4 +626,4 @@ export function registerIslandIpc(): void {
|
||||
});
|
||||
}
|
||||
|
||||
export { SIZES as ISLAND_SIZES, URGENT_SIZE as ISLAND_URGENT_SIZE };
|
||||
export { SIZES as ISLAND_SIZES, URGENT_SIZE as ISLAND_URGENT_SIZE, CALL_SIZE as ISLAND_CALL_SIZE };
|
||||
Reference in new issue
Block a user