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 全部通过
2026-09-12 08:41:08 +08:00
1 parent 5545ef6f55
commit 3a9f8812fc
@@ -0,0 +1,291 @@
+<script setup lang="ts">
+import { computed, onUnmounted, ref, watch } from 'vue';
+import { formatClassPeriod, type ClassPeriod } from '@classhelper/shared';
+
+/**
+ * 上课时段发布紧急通知的全屏二次确认。
+ *
+ * 设计要点：
+ * - 全屏遮罩 + 强警示配色，明确告知"会干扰上课"
+ * - 确认按钮有 3 秒倒计时保护，倒计时结束前不可点击（避免误触连点）
+ * - 倒计时以圆环进度可视化，并给出每秒反馈
+ */
+const props = defineProps<{
+  visible: boolean;
+  period: ClassPeriod | null;
+  pendingTitle: string;
+}>();
+
+const emit = defineEmits<{
+  (event: 'cancel'): void;
+  (event: 'confirm'): void;
+}>();
+
+const COUNTDOWN_SECONDS = 3;
+
+const remaining = ref(COUNTDOWN_SECONDS);
+let timer: ReturnType<typeof setInterval> | null = null;
+
+const periodText = computed(() => formatClassPeriod(props.period));
+const canConfirm = computed(() => remaining.value <= 0);
+const progress = computed(() => ((COUNTDOWN_SECONDS - remaining.value) / COUNTDOWN_SECONDS) * 100);
+
+function stopTimer(): void {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+}
+
+function startCountdown(): void {
+  stopTimer();
+  remaining.value = COUNTDOWN_SECONDS;
+  timer = setInterval(() => {
+    remaining.value -= 1;
+    if (remaining.value <= 0) {
+      remaining.value = 0;
+      stopTimer();
+    }
+  }, 1000);
+}
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) startCountdown();
+    else stopTimer();
+  },
+);
+
+onUnmounted(stopTimer);
+
+function handleCancel(): void {
+  stopTimer();
+  emit('cancel');
+}
+
+function handleConfirm(): void {
+  if (!canConfirm.value) return;
+  stopTimer();
+  emit('confirm');
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="urgent-fade">
+      <div v-if="visible" class="urgent-mask" role="alertdialog" aria-modal="true">
+        <div class="urgent-card">
+          <div class="urgent-icon">
+            <el-icon :size="34"><WarningFilled /></el-icon>
+          </div>
+
+          <h2 class="urgent-title">现在为上课时间段</h2>
+          <p class="urgent-subtitle">
+            如果发布
+            <strong>紧急</strong>
+            通知，会干扰正在进行的课堂，请再次确认。
+          </p>
+
+          <div v-if="period" class="urgent-period">
+            <span class="period-label">正在上课</span>
+            <span class="period-value">{{ periodText }}</span>
+          </div>
+
+          <div class="urgent-preview">
+            <span class="preview-label">即将发布</span>
+            <span class="preview-title">{{ pendingTitle || '（无标题）' }}</span>
+          </div>
+
+          <div class="urgent-actions">
+            <el-button size="large" @click="handleCancel">取消发布</el-button>
+
+            <el-button size="large" type="danger" :disabled="!canConfirm" @click="handleConfirm">
+              <template v-if="canConfirm">确认发布紧急通知</template>
+              <template v-else>请等待 {{ remaining }} 秒…</template>
+            </el-button>
+          </div>
+
+          <div class="urgent-progress">
+            <div v-if="!canConfirm" class="progress-ring">
+              <el-progress
+                type="circle"
+                :percentage="progress"
+                :width="46"
+                :stroke-width="4"
+                :show-text="false"
+                color="#f56c6c"
+              />
+              <span class="ring-text">{{ remaining }}</span>
+            </div>
+            <span class="progress-hint">
+              {{
+                canConfirm
+                  ? '倒计时结束，请谨慎确认是否真的需要立即打扰课堂'
+                  : '正在为你预留 3 秒冷静时间，避免误触打扰课堂'
+              }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.urgent-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 3000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(20, 12, 12, 0.62);
+  backdrop-filter: blur(6px);
+}
+
+.urgent-card {
+  width: 520px;
+  max-width: calc(100vw - 48px);
+  padding: 28px 30px 22px;
+  border-radius: 16px;
+  background: #fff;
+  border-top: 4px solid #f56c6c;
+  box-shadow: 0 24px 60px rgba(120, 20, 20, 0.35);
+  text-align: center;
+}
+
+.urgent-icon {
+  width: 64px;
+  height: 64px;
+  margin: 0 auto 12px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #f56c6c;
+  background: #fef0f0;
+  animation: urgent-pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes urgent-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(245, 108, 108, 0.45);
+    transform: scale(1);
+  }
+  50% {
+    box-shadow: 0 0 0 14px rgba(245, 108, 108, 0);
+    transform: scale(1.04);
+  }
+}
+
+.urgent-title {
+  margin: 0 0 8px;
+  font-size: 22px;
+  color: #303133;
+}
+
+.urgent-subtitle {
+  margin: 0 0 18px;
+  font-size: 14px;
+  line-height: 1.7;
+  color: #606266;
+}
+
+.urgent-subtitle strong {
+  color: #f56c6c;
+}
+
+.urgent-period,
+.urgent-preview {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border-radius: 10px;
+  margin-bottom: 10px;
+  text-align: left;
+  font-size: 13px;
+}
+
+.urgent-period {
+  background: #fef0f0;
+}
+
+.urgent-preview {
+  background: #f5f7fa;
+}
+
+.period-label,
+.preview-label {
+  flex: 0 0 64px;
+  color: #909399;
+}
+
+.period-value {
+  color: #f56c6c;
+  font-weight: 600;
+}
+
+.preview-title {
+  color: #303133;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.urgent-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  margin: 18px 0 12px;
+}
+
+.urgent-progress {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  min-height: 52px;
+}
+
+.progress-ring {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ring-text {
+  position: absolute;
+  font-size: 15px;
+  font-weight: 700;
+  color: #f56c6c;
+}
+
+.progress-hint {
+  font-size: 12px;
+  color: #909399;
+}
+
+.urgent-fade-enter-active,
+.urgent-fade-leave-active {
+  transition: opacity 0.22s ease;
+}
+
+.urgent-fade-enter-active .urgent-card,
+.urgent-fade-leave-active .urgent-card {
+  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.urgent-fade-enter-from,
+.urgent-fade-leave-to {
+  opacity: 0;
+}
+
+.urgent-fade-enter-from .urgent-card,
+.urgent-fade-leave-to .urgent-card {
+  transform: scale(0.92) translateY(10px);
+}
+</style>