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` 全部通过；服务端安装包已重打并安装验证

packages/desktop-client/src/renderer/layouts/ClientLayout.vue

@@ -97,10 +97,12 @@ onUnmounted(() => {
 
 <template>
   <el-container class="layout">
-    <el-aside width="190px" class="aside">
+    <el-aside width="200px" class="aside ch-nav">
       <div class="brand">
-        <el-icon :size="20"><School /></el-icon>
-        <span>班级小助手</span>
+        <span class="brand-logo">
+          <el-icon :size="16"><School /></el-icon>
+        </span>
+        <span class="brand-text">班级小助手</span>
       </div>
       <el-menu :default-active="activeMenu" class="menu" @select="handleMenuSelect">
         <el-menu-item v-for="item in menuItems" :key="item.path" :index="item.path">
@@ -170,11 +172,10 @@ onUnmounted(() => {
 <style scoped>
 .layout {
   height: 100vh;
+  background: var(--ch-bg);
 }
 
 .aside {
-  background: var(--ch-sidebar);
-  color: #fff;
   display: flex;
   flex-direction: column;
 }
@@ -182,29 +183,38 @@ onUnmounted(() => {
 .brand {
   display: flex;
   align-items: center;
-  gap: 8px;
-  height: 54px;
+  gap: 10px;
+  height: 52px;
   padding: 0 16px;
   font-weight: 600;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  font-size: 14px;
+  color: var(--ch-text);
+}
+
+/* Fluent 品牌标：强调色圆角方块 + 白色图标 */
+.brand-logo {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 6px;
+  color: #fff;
+  background: linear-gradient(135deg, var(--ch-accent) 0%, #4d94d1 100%);
+}
+
+.brand-text {
+  letter-spacing: 0.2px;
 }
 
 .menu {
   flex: 1;
   border-right: none;
   background: transparent;
-  --el-menu-text-color: #cbd5e1;
-  --el-menu-hover-bg-color: rgba(255, 255, 255, 0.08);
-  --el-menu-active-color: #fff;
-}
-
-.menu :deep(.el-menu-item) {
-  margin: 2px 8px;
-  border-radius: 6px;
-}
-
-.menu :deep(.el-menu-item.is-active) {
-  background: #409eff;
+  --el-menu-bg-color: transparent;
+  --el-menu-hover-bg-color: rgba(0, 0, 0, 0.04);
+  --el-menu-text-color: var(--ch-text);
+  --el-menu-active-color: var(--ch-text);
 }
 
 .menu-badge {
@@ -213,22 +223,25 @@ onUnmounted(() => {
 
 .aside-footer {
   padding: 10px 16px 14px;
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  border-top: 1px solid var(--ch-divider);
 }
 
 .aside-meta {
   font-size: 12px;
-  color: #8fa3b8;
-  line-height: 1.8;
+  color: var(--ch-text-tertiary);
+  line-height: 1.9;
 }
 
 .header {
-  background: #fff;
+  height: 52px;
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(20px);
   border-bottom: 1px solid var(--ch-border);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
+  padding: 0 16px;
 }
 
 .header-left {
@@ -240,15 +253,22 @@ onUnmounted(() => {
 
 .server-url {
   font-size: 12px;
-  color: #909399;
+  color: var(--ch-text-tertiary);
 }
 
 .user-chip {
   display: flex;
   align-items: center;
   gap: 6px;
+  padding: 4px 8px;
+  border-radius: var(--ch-radius-control);
   cursor: pointer;
   outline: none;
+  transition: background 0.15s ease;
+}
+
+.user-chip:hover {
+  background: rgba(0, 0, 0, 0.04);
 }
 
 .main {