feat(client): 灵动岛个性化设置（需求 2）、形变抖动修复（需求 4）、关闭到系统托盘与退出清理（需求 5）

## 需求 2：设置页个性化（实时生效 + 持久化） - 新增 `IslandAppearance`（shared 类型）+ `DEFAULT_ISLAND_APPEARANCE` / `ISLAND_APPEARANCE_RANGES` / `ISLAND_POSITIONS`：高度 36–72、宽度 220–420、圆角 8–32、不透明度 0.4–1、字号 11–18、动画速度 0.5–2、主题色、显示位置（顶部居中/左上/右上/底部居中）、动画开关、始终置顶。 - 客户端 `config.json` 增加 `island` 字段（`normalizeIslandAppearance` 夹紧越界值；旧配置无该字段时自动补默认值，向后兼容）；`SettingsView` 新增「灵动岛 · 个性化」面板：滑块/取色器/开关/位置选择 + 「保存设置 / 预览效果 / 恢复默认」，拖动即实时预览。 - 主进程 `island.setAppearance()`：窗口尺寸按外观联动（展开卡按差值同步放大，内容用 flex + 溢出滚动承载）、透明度、置顶、动画开关与速度、停靠位置实时生效，并把外观通过 `island:appearance` 下发给灵动岛渲染进程；渲染进程用 CSS 变量（`--island-w/-h/-radius/-font/-accent`）驱动卡片尺寸、圆角、字号与强调色。 ## 需求 4：形变抖动修复 - 窗口尺寸动画改为**单条帧循环**（优先 `requestAnimationFrame`，主进程无该全局时退化为 ~60fps 定时器）；新动画取消上一条并作废令牌；结束对齐最终尺寸（消除 1px 累积误差）；**展开动画结束后才取焦点**。 - 卡片保持固定尺寸 + 顶部居中锚定（此前已修），只让窗口露出/裁切，形变时内容不参与重排。 - 冒烟新增断言：收回过程窗口宽度**单调收缩**（实测 362→330→305→288→274→270→268…）、卡片上边缘波动 **0px**、卡片布局宽度只取 `396/260` 两个固定值；连续 5 次快速开合后状态与尺寸稳定。 ## 需求 5：关闭到系统托盘 + 退出清理 - 新增 `main/tray.ts`：托盘图标（`public/tray.png`，`pnpm icons` 会自动同步）、右键菜单「显示主窗口 / 隐藏到托盘 / 退出班级小助手」、左键单击/双击恢复窗口。 - `main/index.ts`：`close` → `preventDefault + hide`（关闭窗口不退出，后台继续接收通知，日志留痕）； `window-all-closed` 不再退出；`quitApp()` 与 `before-quit`/`will-quit` 统一走 `shutdownResources()`：销毁托盘 → 销毁灵动岛（帧循环/定时器）→ 销毁全部窗口（渲染进程随之释放 Socket.IO 连接与 IndexedDB 句柄）→ `app.quit()` + `app.exit(0)` 兜底。 - 冒烟新增断言：关闭后 `visible=false / destroyed=false / 进程存活=true`；清理后 `托盘=false / 灵动岛=false`。 ## 验证 - `pnpm verify:desktop` **40/40** ✅（新增 6 项：个性化外观生效、调整尺寸后内容不溢出、收回不抖动、快速开合稳定、关闭到托盘、退出前资源清理） - `pnpm verify:e2e` **82/82** ✅、`pnpm verify:web` **17/17** ✅（回归无破坏） - `pnpm lint` / `format:check` / `typecheck` 全绿 - 顺带修复：托盘/关闭处理器此前挂在冒烟验证之后，导致冒烟模式关闭窗口会真的销毁窗口（现已调整为在冒烟前挂载）；`smoke.mjs` 配置目录按进程号隔离，避免上次异常退出的目录占用导致启动失败。
2026-09-12 15:19:13 +08:00
1 parent 30e4c36809
commit 0dcab6f369
@@ -2,7 +2,15 @@
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { formatDate } from '@classhelper/shared';
+import {
+  DEFAULT_ISLAND_APPEARANCE,
+  ISLAND_APPEARANCE_RANGES as RANGES,
+  ISLAND_POSITION_LABELS,
+  ISLAND_POSITIONS,
+  formatDate,
+  type IslandAppearance,
+  type IslandPosition,
+} from '@classhelper/shared';
 import type { DesktopAppInfo } from '../../types/desktop.js';
 import { pingHealth, setApiBaseUrl } from '../api/http.js';
 import { normalizeServerUrl } from '../config.js';
@@ -102,9 +110,68 @@ async function logout(): Promise<void> {
  await router.replace('/login');
 }

+/* ------------------------------------------------------------ 灵动岛个性化 */
+
+const island = ref<IslandAppearance>({ ...DEFAULT_ISLAND_APPEARANCE });
+const savingIsland = ref(false);
+
+const positionOptions = ISLAND_POSITIONS.map((value) => ({
+  value,
+  label: ISLAND_POSITION_LABELS[value],
+}));
+
+/** 读取当前生效的外观（主进程为单一事实来源） */
+async function loadIslandAppearance(): Promise<void> {
+  if (!window.desktop?.islandGetAppearance) return;
+  island.value = await window.desktop.islandGetAppearance();
+}
+
+/**
+ * 改动即生效：属性变化时先应用（实时预览），点"保存"再落盘。
+ * 高度/宽度只影响窗口与卡片尺寸变量，内容用 flex + 溢出滚动承载，不会溢出或错乱。
+ */
+function applyIslandAppearance(patch: Partial<IslandAppearance> = {}): void {
+  island.value = { ...island.value, ...patch };
+  window.desktop?.islandSetAppearance(island.value);
+}
+
+async function saveIslandAppearance(): Promise<void> {
+  if (!window.desktop?.saveConfig) return;
+  savingIsland.value = true;
+  try {
+    await window.desktop.saveConfig({ island: island.value });
+    ElMessage.success('个性化设置已保存');
+  } finally {
+    savingIsland.value = false;
+  }
+}
+
+async function resetIslandAppearance(): Promise<void> {
+  await ElMessageBox.confirm('恢复灵动岛的默认外观？', '恢复默认', { type: 'warning' });
+  applyIslandAppearance({ ...DEFAULT_ISLAND_APPEARANCE });
+  await saveIslandAppearance();
+}
+
+/** 本地推一条测试通知，立刻确认外观效果 */
+function testIsland(): void {
+  window.desktop?.islandPush?.({
+    notification: {
+      id: `appearance-test-${Date.now()}`,
+      title: '灵动岛外观预览',
+      content: '拖动滑块即可实时预览：高度、宽度、圆角、透明度、字号、主题色、位置与动画。',
+      priority: 'NORMAL',
+      createdAt: new Date().toISOString(),
+      courseName: null,
+      teacherName: '本地预览',
+    },
+    context: { inClass: false, currentPeriodEnd: null },
+  });
+}
+
 onMounted(async () => {
  await loadAppInfo();
  await appStore.refreshCacheStats();
+  await loadIslandAppearance();
 });
 </script>

@@ -150,6 +217,118 @@ onMounted(async () => {
          </el-descriptions>
        </el-card>

+        <el-card shadow="never" class="mt-12">
+          <template #header>
+            <span>灵动岛 · 个性化</span>
+          </template>
+          <el-form label-width="96px" label-position="left">
+            <el-form-item :label="`高度 ${island.height}px`">
+              <el-slider
+                :model-value="island.height"
+                :min="RANGES.height.min"
+                :max="RANGES.height.max"
+                :step="1"
+                @input="(value: number) => applyIslandAppearance({ height: value })"
+              />
+            </el-form-item>
+            <el-form-item :label="`宽度 ${island.width}px`">
+              <el-slider
+                :model-value="island.width"
+                :min="RANGES.width.min"
+                :max="RANGES.width.max"
+                :step="2"
+                @input="(value: number) => applyIslandAppearance({ width: value })"
+              />
+            </el-form-item>
+            <el-form-item :label="`圆角 ${island.radius}px`">
+              <el-slider
+                :model-value="island.radius"
+                :min="RANGES.radius.min"
+                :max="RANGES.radius.max"
+                :step="1"
+                @input="(value: number) => applyIslandAppearance({ radius: value })"
+              />
+            </el-form-item>
+            <el-form-item :label="`不透明度 ${Math.round(island.opacity * 100)}%`">
+              <el-slider
+                :model-value="island.opacity"
+                :min="RANGES.opacity.min"
+                :max="RANGES.opacity.max"
+                :step="0.05"
+                @input="(value: number) => applyIslandAppearance({ opacity: value })"
+              />
+            </el-form-item>
+            <el-form-item :label="`字号 ${island.fontSize}px`">
+              <el-slider
+                :model-value="island.fontSize"
+                :min="RANGES.fontSize.min"
+                :max="RANGES.fontSize.max"
+                :step="1"
+                @input="(value: number) => applyIslandAppearance({ fontSize: value })"
+              />
+            </el-form-item>
+            <el-form-item :label="`动画速度 ${island.speed.toFixed(1)}x`">
+              <el-slider
+                :model-value="island.speed"
+                :min="RANGES.speed.min"
+                :max="RANGES.speed.max"
+                :step="0.1"
+                @input="(value: number) => applyIslandAppearance({ speed: value })"
+              />
+            </el-form-item>
+            <el-form-item label="主题色">
+              <el-color-picker
+                :model-value="island.accent"
+                @change="(value: string | null) => applyIslandAppearance({ accent: value ?? '#6cc4ff' })"
+              />
+              <span class="text-muted ml-8">用于高亮、按钮与进度条</span>
+            </el-form-item>
+            <el-form-item label="显示位置">
+              <el-select
+                :model-value="island.position"
+                style="width: 180px"
+                @change="(value: IslandPosition) => applyIslandAppearance({ position: value })"
+              >
+                <el-option
+                  v-for="item in positionOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="动画">
+              <el-switch
+                :model-value="island.animations"
+                @change="
+                  (value: boolean | string | number) => applyIslandAppearance({ animations: Boolean(value) })
+                "
+              />
+              <span class="text-muted ml-8">关闭后展开/收起为瞬时生效</span>
+            </el-form-item>
+            <el-form-item label="始终置顶">
+              <el-switch
+                :model-value="island.alwaysOnTop"
+                @change="
+                  (value: boolean | string | number) => applyIslandAppearance({ alwaysOnTop: Boolean(value) })
+                "
+              />
+            </el-form-item>
+          </el-form>
+          <div class="toolbar">
+            <el-button type="primary" :loading="savingIsland" @click="saveIslandAppearance">
+              保存设置
+            </el-button>
+            <el-button @click="testIsland">预览效果</el-button>
+            <el-button @click="resetIslandAppearance">恢复默认</el-button>
+          </div>
+          <el-alert
+            class="mt-12"
+            type="info"
+            :closable="false"
+            title="拖动滑块即为实时预览；保存后写入本地配置，重启客户端仍然生效"
+          />
+        </el-card>
        <el-card shadow="never" class="mt-12">
          <template #header><span>账号信息</span></template>
          <el-descriptions :column="1" border size="small">