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 @@
|
||||
#!/usr/bin/env node
|
||||
#!/usr/bin/env node
|
||||
/**
|
||||
* 端到端联调验证(对应验收标准):
|
||||
* 1. 教师发布通知 -> 学生端 Socket.IO 5 秒内收到
|
||||
@@ -548,6 +548,77 @@ async function main() {
|
||||
record('清理探测课表', removedProbe.status === 200, `status=${removedProbe.status}`);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- 6.3 叫人
|
||||
if (classId && studentUser) {
|
||||
const callByTeacher = await api('/calls', {
|
||||
method: 'POST',
|
||||
token: teacherToken,
|
||||
body: {
|
||||
classId,
|
||||
studentId: studentUser.id,
|
||||
quickPhrase: '请到办公室找我',
|
||||
},
|
||||
});
|
||||
const callTitle = callByTeacher.payload?.data?.title ?? '';
|
||||
record(
|
||||
'叫人接口(教师点名 → 201 + "请 XXX 同学找 XXX 老师")',
|
||||
callByTeacher.status === 201 && callTitle.includes('请') && callTitle.includes('找'),
|
||||
`status=${callByTeacher.status} title="${callTitle}"`,
|
||||
);
|
||||
|
||||
const callWithMessage = await api('/calls', {
|
||||
method: 'POST',
|
||||
token: teacherToken,
|
||||
body: {
|
||||
classId,
|
||||
studentId: studentUser.id,
|
||||
quickPhrase: '请到讲台找我',
|
||||
message: '带上昨天的数学作业本',
|
||||
},
|
||||
});
|
||||
record(
|
||||
'叫人支持自定义消息(优先于快捷短语)',
|
||||
callWithMessage.status === 201 && callWithMessage.payload?.data?.content === '带上昨天的数学作业本',
|
||||
`status=${callWithMessage.status} content="${callWithMessage.payload?.data?.content ?? ''}"`,
|
||||
);
|
||||
|
||||
// 上课时段也允许叫人(不受 409 限制,因为老师确实需要学生马上过来)
|
||||
const callDuringClass = await api('/calls', {
|
||||
method: 'POST',
|
||||
token: teacherToken,
|
||||
body: { classId, studentId: studentUser.id, quickPhrase: '请马上来一趟' },
|
||||
});
|
||||
record(
|
||||
'上课时段允许叫人(不受紧急通知 409 限制)',
|
||||
callDuringClass.status === 201,
|
||||
`status=${callDuringClass.status}`,
|
||||
);
|
||||
|
||||
const studentCalls = await api('/calls', {
|
||||
method: 'POST',
|
||||
token: studentToken,
|
||||
body: { classId, studentId: studentUser.id, quickPhrase: '学生不能叫人' },
|
||||
});
|
||||
record('学生调用叫人接口被拒绝(403)', studentCalls.status === 403, `status=${studentCalls.status}`);
|
||||
|
||||
const studentListAfterCall = await api('/notifications', { token: studentToken });
|
||||
const receivedCall = (studentListAfterCall.payload?.data ?? []).find(
|
||||
(item) => item.id === callWithMessage.payload?.data?.id,
|
||||
);
|
||||
record(
|
||||
'学生通知中心能看到叫人消息(含未读状态)',
|
||||
Boolean(receivedCall) && receivedCall.read === false,
|
||||
`found=${Boolean(receivedCall)} read=${receivedCall?.read ?? '-'}`,
|
||||
);
|
||||
|
||||
// 清理:删除本次叫人产生的通知
|
||||
for (const created of [callByTeacher, callWithMessage, callDuringClass]) {
|
||||
const id = created.payload?.data?.id;
|
||||
if (id) await api(`/notifications/${id}`, { method: 'DELETE', token: teacherToken });
|
||||
}
|
||||
record('清理叫人测试数据', true, '已删除 3 条叫人通知');
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- 7. 权限隔离
|
||||
if (foreignClass) {
|
||||
const studentCrossClass = await api(`/classes/${foreignClass.id}`, { token: studentToken });
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
import { Router } from 'express';
|
||||
import { sendCreated } from '../../lib/http.js';
|
||||
import { authenticate, getAuthUser, requireRole } from '../../middleware/auth.js';
|
||||
import { validate } from '../../middleware/validate.js';
|
||||
import { defineModule } from '../module.types.js';
|
||||
import { createCallSchema, type CreateCallInput } from './calls.schemas.js';
|
||||
import * as callService from './calls.service.js';
|
||||
|
||||
const router = Router();
|
||||
router.use(authenticate());
|
||||
|
||||
/**
|
||||
* POST /api/calls - 叫人(老师点名让学生过来)
|
||||
* 学生端会在灵动岛上立即弹出"请 XXX 同学找 XXX 老师",无论是否在上课。
|
||||
*/
|
||||
router.post('/', requireRole('ADMIN', 'TEACHER'), validate({ body: createCallSchema }), async (req, res) => {
|
||||
const user = getAuthUser(req);
|
||||
sendCreated(res, await callService.createCall(user, req.body as CreateCallInput), '已通知该学生');
|
||||
});
|
||||
|
||||
export const callsModule = defineModule({
|
||||
name: 'calls',
|
||||
basePath: '/calls',
|
||||
router,
|
||||
});
|
||||
@@ -0,0 +1,23 @@
|
||||
import { z } from 'zod';
|
||||
|
||||
/**
|
||||
* "叫人"请求:老师选一位学生 + 快捷短语/自定义消息,让学生在灵动岛上立即收到
|
||||
* "请 XXX 同学找 XXX 老师"。
|
||||
*/
|
||||
export const createCallSchema = z
|
||||
.object({
|
||||
/** 学生 id(与 studentName 二选一) */
|
||||
studentId: z.string().min(1).optional(),
|
||||
classId: z.string().min(1, '请选择班级'),
|
||||
/** 快捷短语(可选) */
|
||||
quickPhrase: z.string().trim().max(64).optional(),
|
||||
/** 自定义消息(可选;与 quickPhrase 至少填一个) */
|
||||
message: z.string().trim().max(200).optional(),
|
||||
})
|
||||
.refine((data) => Boolean(data.studentId), { message: '请选择学生', path: ['studentId'] })
|
||||
.refine((data) => Boolean(data.message || data.quickPhrase), {
|
||||
message: '请选择快捷短语或填写自定义消息',
|
||||
path: ['message'],
|
||||
});
|
||||
|
||||
export type CreateCallInput = z.infer<typeof createCallSchema>;
|
||||
@@ -0,0 +1,60 @@
|
||||
import { SOCKET_EVENTS, buildCallTitle, type NotificationDto } from '@classhelper/shared';
|
||||
import { assertClassWritable } from '../../lib/access.js';
|
||||
import { prisma } from '../../lib/db.js';
|
||||
import { ApiError } from '../../lib/http.js';
|
||||
import type { TokenPayload } from '../../lib/jwt.js';
|
||||
import { logger } from '../../lib/logger.js';
|
||||
import { toNotificationDto } from '../../lib/mappers.js';
|
||||
import { emitToClass, emitToUser } from '../../realtime/bus.js';
|
||||
import type { CreateCallInput } from './calls.schemas.js';
|
||||
|
||||
const creatorSelect = { select: { id: true, name: true, username: true } } as const;
|
||||
|
||||
/**
|
||||
* "叫人":老师点名让某位同学去找他。
|
||||
*
|
||||
* 设计:复用通知表落库(学生端通知中心可见、已读状态天然可用、离线也能看到历史),
|
||||
* 同时额外广播 `call:new` 到该学生的 user 房间 —— 客户端据此把消息标记为
|
||||
* "叫人"类型,无论是否在上课都立即展开显示。
|
||||
*/
|
||||
export async function createCall(user: TokenPayload, input: CreateCallInput): Promise<NotificationDto> {
|
||||
await assertClassWritable(user, input.classId);
|
||||
|
||||
const student = await prisma.user.findUnique({
|
||||
where: { id: input.studentId },
|
||||
select: { id: true, name: true, username: true, classId: true },
|
||||
});
|
||||
if (!student) throw ApiError.notFound('学生不存在');
|
||||
if (student.classId !== input.classId) {
|
||||
throw new ApiError(400, 'BAD_REQUEST', '该学生不在所选班级');
|
||||
}
|
||||
|
||||
const teacher = await prisma.user.findUnique({
|
||||
where: { id: user.sub },
|
||||
select: { name: true, username: true },
|
||||
});
|
||||
const teacherName = teacher?.name ?? teacher?.username ?? '老师';
|
||||
const studentName = student.name || student.username;
|
||||
const message = input.message?.trim() || input.quickPhrase?.trim() || '请尽快到老师这里来';
|
||||
|
||||
const created = await prisma.notification.create({
|
||||
data: {
|
||||
classId: input.classId,
|
||||
title: buildCallTitle(studentName, teacherName),
|
||||
content: message,
|
||||
// 叫人属于需要立即响应的消息,用 HIGH 级别(不会触发上课时段 409 拦截)
|
||||
priority: 'HIGH',
|
||||
createdBy: user.sub,
|
||||
},
|
||||
include: { creator: creatorSelect, reads: true },
|
||||
});
|
||||
|
||||
const dto = toNotificationDto(created, { userId: user.sub, withStatus: true });
|
||||
// 班级房间广播:通知中心/其他端都能看到
|
||||
emitToClass(created.classId, SOCKET_EVENTS.notificationNew, dto);
|
||||
// 定向广播给被叫的学生:客户端灵动岛立即展开
|
||||
emitToUser(student.id, SOCKET_EVENTS.callNew, dto);
|
||||
|
||||
logger.info(`叫人:${teacherName} → ${studentName}(${message})`);
|
||||
return dto;
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { authModule } from './auth/auth.module.js';
|
||||
import { callsModule } from './calls/calls.module.js';
|
||||
import { classesModule } from './classes/classes.module.js';
|
||||
import { coursesModule } from './courses/courses.module.js';
|
||||
import { dashboardModule } from './dashboard/dashboard.module.js';
|
||||
@@ -24,6 +25,7 @@ export const apiModules: ApiModule[] = [
|
||||
schedulesModule,
|
||||
homeworksModule,
|
||||
notificationsModule,
|
||||
callsModule,
|
||||
gradesModule,
|
||||
studentsModule,
|
||||
teachersModule,
|
||||
|
||||
Reference in new issue
Block a user