create-windy 0.1.0

package/template/apps/web/src/pages/settings/GlobalSettingsPage.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, shallowRef } from "vue";
+import {
+  onBeforeRouteLeave,
+  onBeforeRouteUpdate,
+  useRoute,
+  useRouter,
+} from "vue-router";
+import UnsavedChangesDialog from "@/components/common/UnsavedChangesDialog.vue";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useAccessSnapshot } from "@/composables/useAccessSnapshot";
+import { useUnsavedChangesConfirmation } from "@/composables/useUnsavedChangesConfirmation";
+import { evaluateWebAccess } from "@/layout/navigation";
+import BrandingSettingsSection from "./BrandingSettingsSection.vue";
+import WatermarkSettingsSection from "./WatermarkSettingsSection.vue";
+
+type SettingsTab = "basic" | "watermark";
+
+interface SettingsSectionHandle {
+  isDirty(): boolean;
+  save(): Promise<boolean>;
+}
+
+const route = useRoute();
+const router = useRouter();
+const access = useAccessSnapshot();
+const confirmation = useUnsavedChangesConfirmation();
+const confirmOpen = confirmation.open;
+const confirmSaving = confirmation.saving;
+const basicSection = shallowRef<SettingsSectionHandle | null>(null);
+const watermarkSection = shallowRef<SettingsSectionHandle | null>(null);
+const canReadBasic = computed(() => {
+  const snapshot = access.snapshot.value;
+  return Boolean(
+    snapshot &&
+    evaluateWebAccess(snapshot, {
+      permissionKey: "system.settings.read",
+      featureKey: "system.settings",
+    }).allowed,
+  );
+});
+const canReadWatermark = computed(() => {
+  const snapshot = access.snapshot.value;
+  return Boolean(
+    snapshot &&
+    evaluateWebAccess(snapshot, {
+      permissionKey: "system.watermark.read",
+      featureKey: "system.watermark",
+    }).allowed,
+  );
+});
+const activeTab = shallowRef<SettingsTab | undefined>(resolveTab(route.hash));
+onBeforeRouteUpdate(async (to) => {
+  const target = resolveTab(to.hash);
+  if (!target) {
+    activeTab.value = undefined;
+    return true;
+  }
+  const canonicalHash = tabHash(target);
+  if (to.hash !== canonicalHash) {
+    return {
+      path: to.path,
+      query: to.query,
+      hash: canonicalHash,
+      replace: true,
+    };
+  }
+  if (target === activeTab.value) return true;
+  if (!(await confirmCurrentChanges())) return false;
+  activeTab.value = target;
+  return true;
+});
+
+onBeforeRouteLeave(() => confirmCurrentChanges());
+
+onMounted(async () => {
+  window.addEventListener("beforeunload", handleBeforeUnload);
+  await access.ensureLoaded().catch(() => undefined);
+  await normalizeCurrentHash();
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("beforeunload", handleBeforeUnload);
+});
+
+async function requestTabChange(value: string | number) {
+  const target = value === "watermark" ? "watermark" : "basic";
+  if (target === activeTab.value || !isAccessible(target)) return;
+  await router.push({ hash: tabHash(target) });
+}
+
+async function normalizeCurrentHash() {
+  const target = resolveTab(route.hash);
+  activeTab.value = target;
+  if (!target) return;
+  if (route.hash !== tabHash(target)) {
+    await router.replace({ hash: tabHash(target) });
+  }
+}
+
+function resolveTab(hash: string): SettingsTab | undefined {
+  if (hash === "#watermark" && canReadWatermark.value) return "watermark";
+  if (hash === "#basic" && canReadBasic.value) return "basic";
+  if (canReadBasic.value) return "basic";
+  if (canReadWatermark.value) return "watermark";
+  return undefined;
+}
+
+function isAccessible(tab: SettingsTab) {
+  return tab === "basic" ? canReadBasic.value : canReadWatermark.value;
+}
+
+function tabHash(tab: SettingsTab) {
+  return `#${tab}`;
+}
+
+function currentIsDirty() {
+  return currentSection()?.isDirty() ?? false;
+}
+
+async function confirmCurrentChanges() {
+  const section = currentSection();
+  if (!section?.isDirty()) return true;
+  return confirmation.request(() => section.save());
+}
+
+function currentSection(): SettingsSectionHandle | null {
+  if (!activeTab.value) return null;
+  return activeTab.value === "watermark"
+    ? watermarkSection.value
+    : basicSection.value;
+}
+
+function handleBeforeUnload(event: BeforeUnloadEvent) {
+  if (!currentIsDirty()) return;
+  event.preventDefault();
+  event.returnValue = "";
+}
+</script>
+
+<template>
+  <main class="mx-auto grid w-full max-w-5xl gap-6">
+    <header class="space-y-2">
+      <h1 class="text-3xl font-semibold tracking-tight">全局设置</h1>
+      <p class="text-muted-foreground">
+        维护面向所有用户的平台品牌信息，以及当前浏览器的页面水印偏好。
+      </p>
+    </header>
+    <Tabs
+      v-if="activeTab"
+      :model-value="activeTab"
+      class="w-full flex-col gap-5"
+      @update:model-value="requestTabChange"
+    >
+      <TabsList
+        variant="line"
+        aria-label="全局设置分类"
+        class="h-auto w-full justify-start border-b px-0 pb-2"
+      >
+        <TabsTrigger
+          v-if="canReadBasic"
+          value="basic"
+          class="min-w-24 flex-none px-4 py-2"
+        >
+          基本信息
+        </TabsTrigger>
+        <TabsTrigger
+          v-if="canReadWatermark"
+          value="watermark"
+          class="min-w-24 flex-none px-4 py-2"
+        >
+          水印设置
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent v-if="canReadBasic" value="basic" class="mt-0">
+        <BrandingSettingsSection ref="basicSection" />
+      </TabsContent>
+      <TabsContent v-if="canReadWatermark" value="watermark" class="mt-0">
+        <WatermarkSettingsSection ref="watermarkSection" />
+      </TabsContent>
+    </Tabs>
+    <section v-else class="rounded-xl border bg-card p-6 text-card-foreground">
+      <h2 class="font-semibold">没有可查看的设置项</h2>
+      <p class="mt-2 text-sm text-muted-foreground">
+        当前账号已进入管理面，但尚未获得任何设置分类的查看权限。
+      </p>
+    </section>
+    <UnsavedChangesDialog
+      :open="confirmOpen"
+      :saving="confirmSaving"
+      @cancel="confirmation.cancel"
+      @save="confirmation.save"
+    />
+  </main>
+</template>

package/template/apps/web/src/pages/settings/GlobalSettingsPage.webtest.ts

@@ -0,0 +1,314 @@
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { flushPromises, mount, type VueWrapper } from "@vue/test-utils";
+import { defineComponent, h, shallowRef } from "vue";
+import { createMemoryHistory, createRouter, RouterView } from "vue-router";
+import type { WebAccessSnapshot } from "@/layout/navigation";
+import GlobalSettingsPage from "./GlobalSettingsPage.vue";
+
+const snapshot = shallowRef<WebAccessSnapshot>();
+const ensureLoaded = vi.fn(async () => snapshot.value!);
+const basicDirty = shallowRef(false);
+const watermarkDirty = shallowRef(false);
+const basicSave = vi.fn(async () => true);
+const watermarkSave = vi.fn(async () => true);
+
+vi.mock("@/composables/useAccessSnapshot", () => ({
+  useAccessSnapshot: () => ({
+    snapshot,
+    ensureLoaded,
+  }),
+}));
+
+const BrandingSettingsSection = sectionStub(
+  "basic",
+  "基本信息表单",
+  basicDirty,
+  basicSave,
+);
+const WatermarkSettingsSection = sectionStub(
+  "watermark",
+  "水印表单",
+  watermarkDirty,
+  watermarkSave,
+);
+const UnsavedChangesDialog = defineComponent({
+  props: { open: Boolean, saving: Boolean },
+  emits: ["cancel", "save"],
+  template: `
+    <section v-if="open" role="dialog">
+      <p>当前修改不会自动保存。你可以取消并留在当前页面，或保存后继续。</p>
+      <button :disabled="saving" @click="$emit('cancel')">取消</button>
+      <button :disabled="saving" @click="$emit('save')">{{ saving ? '保存中…' : '保存' }}</button>
+    </section>
+  `,
+});
+
+describe("全局设置分类", () => {
+  beforeEach(() => {
+    snapshot.value = createSnapshot();
+    ensureLoaded.mockReset();
+    ensureLoaded.mockImplementation(async () => snapshot.value!);
+    basicDirty.value = false;
+    watermarkDirty.value = false;
+    basicSave.mockReset();
+    watermarkSave.mockReset();
+    basicSave.mockResolvedValue(true);
+    watermarkSave.mockResolvedValue(true);
+  });
+
+  test("规范化 hash 并用顶部横向 Tabs 切换分类", async () => {
+    const { wrapper, router } = await mountPage("/settings#unknown");
+
+    expect(router.currentRoute.value.fullPath).toBe("/settings#basic");
+    expect(wrapper.get('[role="tablist"]').classes()).toContain("w-full");
+
+    await clickTab(wrapper, "水印设置");
+    expect(router.currentRoute.value.fullPath).toBe("/settings#watermark");
+    expect(tab(wrapper, "水印设置").attributes("data-state")).toBe("active");
+  });
+
+  test("没有水印查看权限时将 #watermark 规范化为 #basic", async () => {
+    snapshot.value = createSnapshot(["system.settings.read"]);
+    const { wrapper, router } = await mountPage("/settings#watermark");
+
+    expect(router.currentRoute.value.fullPath).toBe("/settings#basic");
+    expect(wrapper.findAll('[role="tab"]')).toHaveLength(1);
+  });
+
+  test("共享路由按分类能力裁剪，不把管理面准入当作设置查看权限", async () => {
+    snapshot.value = createSnapshot([]);
+    const { wrapper } = await mountPage("/settings#basic");
+
+    expect(wrapper.find('[role="tablist"]').exists()).toBe(false);
+    expect(wrapper.text()).toContain("没有可查看的设置项");
+    expect(wrapper.text()).not.toContain("基本信息表单");
+  });
+
+  test("只有水印权限时直接落到可访问分类", async () => {
+    snapshot.value = createSnapshot(["system.watermark.read"]);
+    const { wrapper, router } = await mountPage("/settings#basic");
+
+    expect(router.currentRoute.value.fullPath).toBe("/settings#watermark");
+    expect(wrapper.text()).toContain("水印表单");
+    expect(wrapper.text()).not.toContain("基本信息表单");
+  });
+
+  test("访问快照加载完成后再恢复有权限的深链接", async () => {
+    snapshot.value = undefined;
+    ensureLoaded.mockImplementation(async () => {
+      snapshot.value = createSnapshot();
+      return snapshot.value;
+    });
+
+    const { router } = await mountPage("/settings#watermark");
+
+    expect(router.currentRoute.value.fullPath).toBe("/settings#watermark");
+  });
+
+  test("当前表单有修改时取消切换会留在当前分类", async () => {
+    const { wrapper, router } = await mountPage();
+    await wrapper.get('[data-testid="dirty-basic"]').trigger("click");
+    expect(basicDirty.value).toBe(true);
+    expect(
+      (
+        wrapper.getComponent(GlobalSettingsPage).vm.$refs.basicSection as {
+          isDirty(): boolean;
+        }
+      ).isDirty(),
+    ).toBe(true);
+    await clickTabWithoutWaiting(wrapper, "水印设置");
+
+    expect(wrapper.text()).toContain("当前修改不会自动保存");
+    await clickDialogAction(wrapper, "取消");
+    await flushPromises();
+
+    expect(router.currentRoute.value.fullPath).toBe("/settings#basic");
+    expect(basicSave).not.toHaveBeenCalled();
+  });
+
+  test("保存成功后显示 loading 并切换到目标 hash", async () => {
+    let resolveSave: (result: boolean) => void = () => undefined;
+    basicSave.mockImplementation(
+      () => new Promise((resolve) => (resolveSave = resolve)),
+    );
+    const { wrapper, router } = await mountPage();
+    await wrapper.get('[data-testid="dirty-basic"]').trigger("click");
+    await clickTabWithoutWaiting(wrapper, "水印设置");
+    await clickDialogAction(wrapper, "保存");
+
+    expect(wrapper.text()).toContain("保存中…");
+    expect(dialogButton(wrapper, "取消").attributes()).toHaveProperty(
+      "disabled",
+    );
+    resolveSave(true);
+    await flushPromises();
+
+    expect(router.currentRoute.value.fullPath).toBe("/settings#watermark");
+    expect(wrapper.text()).not.toContain("当前修改不会自动保存");
+  });
+
+  test("保存失败时保留修改、Dialog 和当前 hash", async () => {
+    basicSave.mockResolvedValue(false);
+    const { wrapper, router } = await mountPage();
+    await wrapper.get('[data-testid="dirty-basic"]').trigger("click");
+    await clickTabWithoutWaiting(wrapper, "水印设置");
+    await clickDialogAction(wrapper, "保存");
+    await flushPromises();
+
+    expect(router.currentRoute.value.fullPath).toBe("/settings#basic");
+    expect(wrapper.text()).toContain("当前修改不会自动保存");
+    expect(basicDirty.value).toBe(true);
+  });
+
+  test("离开路由时可取消，保存成功后继续导航", async () => {
+    const { wrapper, router } = await mountPage();
+    await wrapper.get('[data-testid="dirty-basic"]').trigger("click");
+
+    void router.push("/");
+    await flushPromises();
+    await clickDialogAction(wrapper, "取消");
+    await flushPromises();
+    expect(router.currentRoute.value.fullPath).toBe("/settings#basic");
+
+    void router.push("/");
+    await flushPromises();
+    await clickDialogAction(wrapper, "保存");
+    await flushPromises();
+    expect(router.currentRoute.value.fullPath).toBe("/");
+  });
+
+  test("刷新或关闭浏览器时由 dirty 状态触发原生提醒", async () => {
+    const { wrapper } = await mountPage();
+    await wrapper.get('[data-testid="dirty-basic"]').trigger("click");
+    const event = new Event("beforeunload", { cancelable: true });
+
+    window.dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(true);
+  });
+});
+
+function createSnapshot(
+  permissionKeys = ["system.settings.read", "system.watermark.read"],
+): WebAccessSnapshot {
+  return {
+    actor: {
+      id: "user_admin",
+      type: "user",
+      name: "平台管理员",
+      roleCodes: ["super-admin"],
+      permissionKeys,
+    },
+    menus: [],
+    permissions: [],
+    features: [
+      {
+        key: "system.settings",
+        enabled: true,
+        visible: "visible",
+        allowed: true,
+        reason: "allowed",
+      },
+      {
+        key: "system.watermark",
+        enabled: true,
+        visible: "visible",
+        allowed: true,
+        reason: "allowed",
+      },
+    ],
+  };
+}
+
+function sectionStub(
+  key: string,
+  label: string,
+  dirty: typeof basicDirty,
+  save: typeof basicSave,
+) {
+  return defineComponent({
+    setup(_, { expose }) {
+      expose({
+        isDirty: () => dirty.value,
+        save: async () => {
+          const saved = await save();
+          if (saved) dirty.value = false;
+          return saved;
+        },
+      });
+      return () =>
+        h("section", { "data-testid": `${key}-settings` }, [
+          label,
+          h(
+            "button",
+            {
+              "data-testid": `dirty-${key}`,
+              onClick: () => (dirty.value = true),
+            },
+            "修改",
+          ),
+        ]);
+    },
+  });
+}
+
+async function mountPage(path = "/settings#basic") {
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: "/settings", component: GlobalSettingsPage },
+      { path: "/", component: { template: "<main>工作台</main>" } },
+    ],
+  });
+  await router.push(path);
+  await router.isReady();
+  const wrapper = mount(
+    defineComponent({
+      components: { RouterView },
+      template: "<RouterView />",
+    }),
+    {
+      global: {
+        plugins: [router],
+        stubs: {
+          BrandingSettingsSection,
+          WatermarkSettingsSection,
+          UnsavedChangesDialog,
+          teleport: true,
+        },
+      },
+    },
+  );
+  await flushPromises();
+  return { wrapper, router };
+}
+
+function tab(wrapper: VueWrapper, name: string) {
+  const target = wrapper
+    .findAll('[role="tab"]')
+    .find((candidate) => candidate.text().includes(name));
+  if (!target) throw new Error(`找不到 Tab：${name}`);
+  return target;
+}
+
+async function clickTab(wrapper: VueWrapper, name: string) {
+  await tab(wrapper, name).trigger("mousedown", { button: 0 });
+  await flushPromises();
+}
+
+async function clickTabWithoutWaiting(wrapper: VueWrapper, name: string) {
+  await tab(wrapper, name).trigger("mousedown", { button: 0 });
+  await flushPromises();
+}
+
+function dialogButton(wrapper: VueWrapper, name: string) {
+  const target = wrapper
+    .findAll("button")
+    .find((candidate) => candidate.text().trim() === name);
+  if (!target) throw new Error(`找不到 Dialog 按钮：${name}`);
+  return target;
+}
+
+async function clickDialogAction(wrapper: VueWrapper, name: string) {
+  await dialogButton(wrapper, name).trigger("click");
+}

package/template/apps/web/src/pages/settings/WatermarkSettingsSection.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { computed, shallowRef } from "vue";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { useAccessSnapshot } from "@/composables/useAccessSnapshot";
+import { useAppToast } from "@/composables/useAppToast";
+import { useAuthSession } from "@/composables/useAuthSession";
+import { useWatermarkSettings } from "@/composables/useWatermarkSettings";
+import { evaluateWebAccess } from "@/layout/navigation";
+
+const auth = useAuthSession();
+const access = useAccessSnapshot();
+const toast = useAppToast();
+const watermark = useWatermarkSettings(auth.actor);
+const enabled = shallowRef(watermark.settings.value.enabled);
+const customContent = shallowRef(watermark.settings.value.customContent);
+const saving = shallowRef(false);
+const baseline = shallowRef(serializeForm());
+const canManage = computed(() => {
+  const snapshot = access.snapshot.value;
+  return Boolean(
+    snapshot &&
+    evaluateWebAccess(snapshot, {
+      permissionKey: "system.watermark.manage",
+      featureKey: "system.watermark",
+    }).allowed,
+  );
+});
+const isDirty = computed(
+  () => canManage.value && serializeForm() !== baseline.value,
+);
+
+async function save(): Promise<boolean> {
+  saving.value = true;
+  try {
+    watermark.update({
+      enabled: enabled.value,
+      customContent: customContent.value,
+    });
+    customContent.value = watermark.settings.value.customContent;
+    baseline.value = serializeForm();
+    toast.success("水印设置已保存");
+    return true;
+  } catch (error) {
+    toast.error("水印设置保存失败", {
+      description: error instanceof Error ? error.message : String(error),
+    });
+    return false;
+  } finally {
+    saving.value = false;
+  }
+}
+
+function reset() {
+  enabled.value = true;
+  customContent.value = "";
+  toast.success("已恢复为默认值，保存后生效");
+}
+
+function serializeForm() {
+  return JSON.stringify({
+    enabled: enabled.value,
+    customContent: customContent.value.trim(),
+  });
+}
+
+defineExpose({
+  isDirty: () => isDirty.value,
+  save,
+});
+</script>
+
+<template>
+  <section class="rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
+    <div class="mb-6 space-y-1">
+      <h2 class="text-xl font-semibold">页面水印</h2>
+      <p class="text-sm text-muted-foreground">
+        默认使用当前账号的用户名和手机、邮箱或姓名，帮助定位截图来源。
+      </p>
+    </div>
+    <div class="grid gap-5">
+      <label
+        class="flex items-center justify-between gap-4 text-sm font-medium"
+      >
+        <span>显示页面水印</span>
+        <Switch
+          v-model="enabled"
+          :disabled="!canManage"
+          aria-label="显示页面水印"
+        />
+      </label>
+      <label class="grid gap-2 text-sm font-medium">
+        <span>自定义内容</span>
+        <Input
+          v-model="customContent"
+          :disabled="!canManage"
+          maxlength="80"
+          :placeholder="watermark.content.value || '使用当前账号信息'"
+        />
+        <span class="text-xs font-normal text-muted-foreground">
+          留空时自动使用账号身份；该偏好只保存在当前浏览器。
+        </span>
+      </label>
+      <div v-if="canManage" class="flex justify-end gap-3 border-t pt-5">
+        <Button variant="outline" :disabled="saving" @click="reset">
+          恢复默认
+        </Button>
+        <Button :disabled="saving" @click="save">
+          {{ saving ? "保存中…" : "保存水印设置" }}
+        </Button>
+      </div>
+    </div>
+  </section>
+</template>

package/template/apps/web/src/pages/settings/logo-file.ts

@@ -0,0 +1,23 @@
+const supportedLogoTypes = new Set(["image/png", "image/jpeg", "image/webp"]);
+
+export const maxLocalLogoBytes = 1024 * 1024;
+
+export function readLocalLogo(file: File): Promise<string> {
+  if (!supportedLogoTypes.has(file.type)) {
+    return Promise.reject(new Error("仅支持 PNG、JPEG 或 WebP 图片"));
+  }
+  if (file.size > maxLocalLogoBytes) {
+    return Promise.reject(new Error("Logo 文件不能超过 1 MiB"));
+  }
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener("load", () => {
+      if (typeof reader.result === "string") resolve(reader.result);
+      else reject(new Error("Logo 文件读取失败"));
+    });
+    reader.addEventListener("error", () =>
+      reject(new Error("Logo 文件读取失败")),
+    );
+    reader.readAsDataURL(file);
+  });
+}

package/template/apps/web/src/pages/settings/logo-file.webtest.ts

@@ -0,0 +1,14 @@
+import { describe, expect, test } from "vitest";
+import { readLocalLogo } from "./logo-file";
+
+describe("本地 Logo", () => {
+  test("将 1 MiB 内的 PNG 读取为可保存的数据地址", async () => {
+    const file = new File([new Uint8Array([137, 80, 78, 71])], "logo.png", {
+      type: "image/png",
+    });
+
+    await expect(readLocalLogo(file)).resolves.toBe(
+      "data:image/png;base64,iVBORw==",
+    );
+  });
+});