feat(server,web,desktop,shared,deploy,plugin): 数据库管理模块 + 客户端深色模式/设置拆子路由/首启引导，版本统一 1.0.0

- 服务端新增 database 模块（/api/database/*，仅 ADMIN）：全库 JSON 快照（备份 / 恢复 / 导入导出 / 定时备份共用同一格式，14 张表按拓扑序导出、恢复时关外键检查）、连接测试与目标库校验、一键 SQLite ⇄ MySQL 切换（备份 → 导出 → 测试连接 → 校验空库 → 改 schema → 子进程 generate / tsc / db push → 写数据，全部成功才改写 .env，中途失败回滚 schema）；XML 快照与 SQLite 数据文件均可下载；打包形态随包带上 prisma CLI 与 typescript （prisma-client 生成物是 .ts，需再编进 dist/generated，安装包因之变大） - Web 管理端新增「数据库管理」页（仅管理员），并加首次登录新手引导（el-tour，可跳过、可随时重看，版本号写 localStorage，改版后老用户会再收到一次） - 客户端设置改版：侧边栏改为分组折叠菜单，设置拆成 6 个子路由（/settings/{general,appearance,island,reminder,account,about}），新增深色模式（主题持久化到主进程配置，主窗口底色跟主题走，避免"先白后黑"闪一下），新增「关于」页（应用信息 / 诊断信息） - 客户端新增首启六步引导（OnboardingWelcome，状态存主进程配置 onboardingDone） - 客户端主窗口初始尺寸与 ClassIsland 对齐（1242x582 / minHeight 540 / 居中） - 版本号统一提升到 1.0.0：5 个 package.json、部署配置与镜像标签（.env.example / docker-compose / Dockerfile）、服务端 /health 与首页、插件 manifest.yml 与 BridgeService.PluginVersion、文档里的安装包名 - 文档与验收同步：AGENTS.md 补第 37~51 条约定（深色主题实现边界、设置子路由、数据库管理三件事、侧栏与窗口尺寸、引导在自动化里的判据等），README 补「数据库管理 / 新手引导 / 设置改版」三节；verify:e2e 增补 13 条数据库管理用例，客户端冒烟与 Web UI 冒烟跟进子路由、深色主题、侧栏与引导验证：pnpm lint 0 error；pnpm typecheck 全过；verify:e2e 186/186；verify:classisland-plugin 68/68； build:desktop 通过（含产物凭据门禁）；verify:desktop 99/102（3 项为上课时段下的"真实通知链路"用例，客户端按产品规则暂存普通通知所致，见下）；插件 dotnet 编译 0 错误。注：verify:desktop 的「真实通知链路 / 标记已读」三项要求当前不在上课时段——本次运行时种子课表恰有「周五 10:55-11:40 生物」正在进行，客户端正确地暂存了普通通知（AGENTS.md 第 18 条），属时间相关用例，与本次改动无关。
2026-10-02 11:18:47 +08:00
1 parent 391e2c1591
commit 572295c297
@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import {
+  DEFAULT_ISLAND_APPEARANCE,
+  ISLAND_APPEARANCE_RANGES as RANGES,
+  ISLAND_POSITION_LABELS,
+  ISLAND_POSITIONS,
+  ISLAND_STYLE_LABELS,
+  ISLAND_STYLES,
+  type IslandAppearance,
+  type IslandPosition,
+  type IslandStyle,
+} from '@classhelper/shared';
+
+/**
+ * 灵动岛个性化（原设置页「灵动岛 · 个性化」卡整块迁移）。
+ *
+ * 注意：必须传**展开后的纯对象**。`island` 是 `ref`，它的 `.value` 在 Vue 里是响应式
+ * Proxy，Proxy 过不了 IPC 的结构化克隆（`An object could not be cloned.`）——
+ * 那正是"拖了滑块、数字在变、灵动岛却没反应"的原因。
+ */
+const island = ref<IslandAppearance>({ ...DEFAULT_ISLAND_APPEARANCE });
+const savingIsland = ref(false);
+
+/**
+ * 左右边距是否有效：只在停靠左 / 右时生效。
+ *
+ * 岛是"居中停靠"时（默认就是顶部居中），水平方向的锚点就是屏幕中线 ——
+ * 这时调左右边距不会有任何变化。之前没把这点说清楚，用户会以为"调了不生效"。
+ */
+const marginXApplies = computed(() => !island.value.position.endsWith('center'));
+
+const positionOptions = ISLAND_POSITIONS.map((value) => ({
+  value,
+  label: ISLAND_POSITION_LABELS[value],
+}));
+
+const styleOptions = ISLAND_STYLES.map((value) => ({
+  value,
+  label: ISLAND_STYLE_LABELS[value],
+}));
+
+/** 读取当前生效的外观（主进程为单一事实来源） */
+async function loadIslandAppearance(): Promise<void> {
+  if (!window.desktop?.islandGetAppearance) return;
+  island.value = await window.desktop.islandGetAppearance();
+}
+
+/** 改动即生效：属性变化时先应用（实时预览），点"保存"再落盘 */
+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();
+}
+
+/** 本地推一条测试通知，立刻确认外观效果（预览模式：直接展开、失焦不收起、30 秒后自动消失） */
+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, preview: true },
+  });
+}
+
+onMounted(async () => {
+  await loadIslandAppearance();
+});
+</script>
+
+<template>
+  <div class="page">
+    <div class="page-header">
+      <div>
+        <h2 class="page-title">灵动岛</h2>
+        <p class="page-subtitle">屏幕上方的消息浮窗：外观、停靠位置与动画</p>
+      </div>
+    </div>
+
+    <el-card shadow="never">
+      <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 ?? '#0a84ff' })"
+          />
+          <span class="text-muted ml-8">用于高亮、按钮与进度条</span>
+        </el-form-item>
+        <el-form-item label="视觉风格">
+          <el-select
+            :model-value="island.style"
+            style="width: 180px"
+            @change="(value: IslandStyle) => applyIslandAppearance({ style: value })"
+          >
+            <el-option
+              v-for="item in styleOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+          <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="`左右边距 ${island.marginX}px`">
+          <el-slider
+            :model-value="island.marginX"
+            :min="RANGES.marginX.min"
+            :max="RANGES.marginX.max"
+            :step="2"
+            :disabled="!marginXApplies"
+            @input="(value: number) => applyIslandAppearance({ marginX: value })"
+          />
+          <span v-if="marginXApplies" class="text-muted ml-8">停靠左/右时距屏幕边缘的距离</span>
+          <span v-else class="text-muted ml-8">
+            当前是「居中」停靠，左右边距不生效 —— 把上面的「显示位置」改成左 / 右停靠即可看到效果
+          </span>
+        </el-form-item>
+        <el-form-item :label="`上下边距 ${island.marginY}px`">
+          <el-slider
+            :model-value="island.marginY"
+            :min="RANGES.marginY.min"
+            :max="RANGES.marginY.max"
+            :step="2"
+            @input="(value: number) => applyIslandAppearance({ marginY: value })"
+          />
+          <span class="text-muted ml-8">停靠顶/底时距屏幕边缘的距离（任务栏在侧面时调大）</span>
+        </el-form-item>
+        <el-form-item label="跟随鼠标屏幕">
+          <el-switch
+            :model-value="island.followCursorDisplay"
+            @change="
+              (value: boolean | string | number) =>
+                applyIslandAppearance({ followCursorDisplay: Boolean(value) })
+            "
+          />
+          <span class="text-muted ml-8">多显示器教室电脑：岛出现在鼠标所在的那块屏幕</span>
+        </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-item label="空闲细缝">
+          <el-switch
+            :model-value="island.idleSliver"
+            @change="
+              (value: boolean | string | number) => applyIslandAppearance({ idleSliver: Boolean(value) })
+            "
+          />
+          <span class="text-muted ml-8">参考 WinIsland：没有消息时保留一条细缝（关闭则完全隐藏）</span>
+        </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>
+  </div>
+</template>
+
+<style scoped>
+.ml-8 {
+  margin-left: 8px;
+}
+</style>