create-windy 0.2.17 → 0.2.19

package/template/apps/web/runtime-server.test.ts

@@ -15,7 +15,7 @@ describe("Web 生产同源 API 代理", () => {
     );
     const handler = createWebFetchHandler({
       distDir: "/tmp/not-used",
-      apiUpstream: "http://server:3000",
+      apiUpstream: "http://server:9747",
       fetcher,
     });
 
@@ -30,7 +30,7 @@ describe("Web 生产同源 API 代理", () => {
     );
 
     const [target, init] = fetcher.mock.calls[0]!;
-    expect(String(target)).toBe("http://server:3000/api/auth/session?fresh=1");
+    expect(String(target)).toBe("http://server:9747/api/auth/session?fresh=1");
     const headers = new Headers(init?.headers);
     expect(headers.get("cookie")).toBe("windy.sid=session");
     expect(headers.get("origin")).toBe("https://platform.example");
@@ -63,7 +63,7 @@ describe("Web 生产同源 API 代理", () => {
     const fetcher = mock(async () => Response.json({ status: "ready" }));
     const handler = createWebFetchHandler({
       distDir,
-      apiUpstream: "http://server:3000",
+      apiUpstream: "http://server:9747",
       fetcher,
     });
     try {
@@ -77,7 +77,7 @@ describe("Web 生产同源 API 代理", () => {
       expect(ready.status).toBe(200);
       expect(ready.headers.get("x-request-id")).toBe("readiness-1");
       expect(String(fetcher.mock.calls[0]?.[0])).toBe(
-        "http://server:3000/api/ready",
+        "http://server:9747/api/ready",
       );
     } finally {
       await rm(distDir, { recursive: true, force: true });

package/template/apps/web/src/composables/useWatermarkSettings.ts

@@ -1,57 +1,99 @@
 import { computed, readonly, shallowRef, type Ref } from "vue";
 import type { WebAccessActor } from "@/layout/navigation";
+import {
+  loadPlatformWatermarkPolicy,
+  loadPublicWatermarkPolicy,
+  updatePlatformWatermarkPolicy,
+} from "@/services/platform-settings-api";
+import {
+  DEFAULT_PLATFORM_WATERMARK_POLICY,
+  type PlatformWatermarkPolicy,
+} from "@southwind-ai/shared";
 import {
   defaultWatermarkContent,
-  defaultWatermarkSettings,
-  parseWatermarkSettings,
-  type WatermarkSettings,
+  normalizeWatermarkPolicy,
 } from "./watermark-settings";
 
-const storageKey = "windy.watermark.settings";
-const settings = shallowRef<WatermarkSettings>(loadSettings());
+const policy = shallowRef<PlatformWatermarkPolicy>({
+  ...DEFAULT_PLATFORM_WATERMARK_POLICY,
+});
+const loading = shallowRef(false);
+const saving = shallowRef(false);
+const error = shallowRef("");
+let loaded = false;
+let pending: Promise<PlatformWatermarkPolicy> | undefined;
 
 export function useWatermarkSettings(
   actor: Readonly<Ref<WebAccessActor | undefined>>,
 ) {
   const content = computed(
-    () =>
-      settings.value.customContent.trim() ||
-      defaultWatermarkContent(actor.value),
+    () => policy.value.customContent || defaultWatermarkContent(actor.value),
   );
 
-  function update(next: WatermarkSettings) {
-    settings.value = {
-      enabled: next.enabled,
-      businessPagesEnabled: next.businessPagesEnabled,
-      customContent: next.customContent.trim().slice(0, 80),
-    };
-    persistSettings(settings.value);
-  }
-
-  function reset() {
-    update({ ...defaultWatermarkSettings });
-  }
-
   return {
-    settings: readonly(settings),
+    policy: readonly(policy),
     content,
-    update,
-    reset,
+    loading: readonly(loading),
+    saving: readonly(saving),
+    error: readonly(error),
+    ensureLoaded: () => load(false, "public"),
+    refresh: () => load(true, "public"),
+    loadManaged: () => load(true, "managed"),
+    save,
   };
 }
 
-function loadSettings(): WatermarkSettings {
-  try {
-    return parseWatermarkSettings(localStorage.getItem(storageKey));
-  } catch {
-    return { ...defaultWatermarkSettings };
+async function load(
+  force: boolean,
+  source: "public" | "managed",
+): Promise<PlatformWatermarkPolicy> {
+  if (pending) {
+    if (source === "public") return pending;
+    await pending;
   }
+  if (!force && loaded) return policy.value;
+  loading.value = true;
+  error.value = "";
+  const request =
+    source === "managed"
+      ? loadPlatformWatermarkPolicy()
+      : loadPublicWatermarkPolicy();
+  const operation = request
+    .then(applyPolicy)
+    .catch((currentError: unknown) => {
+      error.value = message(currentError);
+      if (source === "managed") throw currentError;
+      return policy.value;
+    })
+    .finally(() => {
+      loading.value = false;
+      if (pending === operation) pending = undefined;
+    });
+  pending = operation;
+  return operation;
 }
 
-function persistSettings(value: WatermarkSettings) {
+async function save(
+  next: PlatformWatermarkPolicy,
+): Promise<PlatformWatermarkPolicy> {
+  saving.value = true;
+  error.value = "";
   try {
-    localStorage.setItem(storageKey, JSON.stringify(value));
-  } catch {
-    // 禁用浏览器存储时，设置仍在当前页面会话中生效。
+    return applyPolicy(await updatePlatformWatermarkPolicy(next));
+  } catch (currentError) {
+    error.value = message(currentError);
+    throw currentError;
+  } finally {
+    saving.value = false;
   }
 }
+
+function applyPolicy(next: PlatformWatermarkPolicy): PlatformWatermarkPolicy {
+  policy.value = normalizeWatermarkPolicy(next);
+  loaded = true;
+  return policy.value;
+}
+
+function message(value: unknown): string {
+  return value instanceof Error ? value.message : String(value);
+}

package/template/apps/web/src/composables/useWatermarkSettings.webtest.ts

@@ -0,0 +1,86 @@
+import { shallowRef } from "vue";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+
+const api = vi.hoisted(() => ({
+  loadPublic: vi.fn(),
+  loadManaged: vi.fn(),
+  update: vi.fn(),
+}));
+
+vi.mock("@/services/platform-settings-api", () => ({
+  loadPublicWatermarkPolicy: api.loadPublic,
+  loadPlatformWatermarkPolicy: api.loadManaged,
+  updatePlatformWatermarkPolicy: api.update,
+}));
+
+describe("全局水印策略状态", () => {
+  beforeEach(() => {
+    vi.resetModules();
+    api.loadPublic.mockReset();
+    api.loadManaged.mockReset();
+    api.update.mockReset();
+  });
+
+  test("业务端只读加载公开策略且不访问 localStorage", async () => {
+    const localStorageRead = vi.spyOn(Storage.prototype, "getItem");
+    const localStorageWrite = vi.spyOn(Storage.prototype, "setItem");
+    api.loadPublic.mockResolvedValue({
+      enabled: true,
+      businessPagesEnabled: true,
+      customContent: "全局审计",
+    });
+    const { useWatermarkSettings } = await import("./useWatermarkSettings");
+    const watermark = useWatermarkSettings(shallowRef(undefined));
+
+    await watermark.ensureLoaded();
+
+    expect(watermark.policy.value).toEqual({
+      enabled: true,
+      businessPagesEnabled: true,
+      customContent: "全局审计",
+    });
+    expect(localStorageRead).not.toHaveBeenCalled();
+    expect(localStorageWrite).not.toHaveBeenCalled();
+  });
+
+  test("管理端保存后更新所有调用方共享的策略", async () => {
+    api.loadManaged.mockResolvedValue({
+      enabled: true,
+      businessPagesEnabled: false,
+      customContent: "",
+    });
+    api.update.mockResolvedValue({
+      enabled: true,
+      businessPagesEnabled: true,
+      customContent: "  内部资料  ",
+    });
+    const { useWatermarkSettings } = await import("./useWatermarkSettings");
+    const actor = shallowRef({
+      id: "user_1",
+      type: "user" as const,
+      name: "张三",
+      roleCodes: [],
+      permissionKeys: [],
+    });
+    const first = useWatermarkSettings(actor);
+    const second = useWatermarkSettings(actor);
+
+    await first.loadManaged();
+    await first.save({
+      enabled: true,
+      businessPagesEnabled: true,
+      customContent: "内部资料",
+    });
+
+    expect(api.update).toHaveBeenCalledWith({
+      enabled: true,
+      businessPagesEnabled: true,
+      customContent: "内部资料",
+    });
+    expect(second.policy.value).toEqual({
+      enabled: true,
+      businessPagesEnabled: true,
+      customContent: "内部资料",
+    });
+  });
+});

package/template/apps/web/src/composables/watermark-settings.ts

@@ -1,16 +1,5 @@
 import type { WebAccessActor } from "@/layout/navigation";
-
-export interface WatermarkSettings {
-  enabled: boolean;
-  businessPagesEnabled: boolean;
-  customContent: string;
-}
-
-export const defaultWatermarkSettings: WatermarkSettings = {
-  enabled: true,
-  businessPagesEnabled: false,
-  customContent: "",
-};
+import type { PlatformWatermarkPolicy } from "@southwind-ai/shared";
 
 export function defaultWatermarkContent(
   actor: WebAccessActor | undefined,
@@ -25,27 +14,12 @@ export function defaultWatermarkContent(
   return [...new Set([username, identity].filter(Boolean))].join(" · ");
 }
 
-export function parseWatermarkSettings(
-  value: string | null,
-): WatermarkSettings {
-  if (!value) return { ...defaultWatermarkSettings };
-  try {
-    const parsed = JSON.parse(value) as Record<string, unknown>;
-    return {
-      enabled:
-        typeof parsed.enabled === "boolean"
-          ? parsed.enabled
-          : defaultWatermarkSettings.enabled,
-      businessPagesEnabled:
-        typeof parsed.businessPagesEnabled === "boolean"
-          ? parsed.businessPagesEnabled
-          : defaultWatermarkSettings.businessPagesEnabled,
-      customContent:
-        typeof parsed.customContent === "string"
-          ? parsed.customContent.slice(0, 80)
-          : "",
-    };
-  } catch {
-    return { ...defaultWatermarkSettings };
-  }
+export function normalizeWatermarkPolicy(
+  value: PlatformWatermarkPolicy,
+): PlatformWatermarkPolicy {
+  return {
+    enabled: value.enabled,
+    businessPagesEnabled: value.businessPagesEnabled,
+    customContent: value.customContent.trim().slice(0, 80),
+  };
 }

package/template/apps/web/src/composables/watermark-settings.webtest.ts

@@ -1,7 +1,7 @@
 import { describe, expect, test } from "vitest";
 import {
   defaultWatermarkContent,
-  parseWatermarkSettings,
+  normalizeWatermarkPolicy,
 } from "./watermark-settings";
 
 describe("水印设置", () => {
@@ -24,41 +24,17 @@ describe("水印设置", () => {
     expect(defaultWatermarkContent(base)).toBe("zhangsan · 张三");
   });
 
-  test("损坏或越界的浏览器设置安全回退", () => {
-    expect(parseWatermarkSettings("broken")).toEqual({
-      enabled: true,
-      businessPagesEnabled: false,
-      customContent: "",
-    });
+  test("服务端策略内容会被规范化后渲染", () => {
     expect(
-      parseWatermarkSettings(
-        JSON.stringify({ enabled: false, customContent: "x".repeat(100) }),
-      ),
+      normalizeWatermarkPolicy({
+        enabled: false,
+        businessPagesEnabled: true,
+        customContent: `  ${"x".repeat(100)}  `,
+      }),
     ).toEqual({
       enabled: false,
-      businessPagesEnabled: false,
-      customContent: "x".repeat(80),
-    });
-  });
-
-  test("业务页面覆盖默认关闭并兼容已保存的范围开关", () => {
-    expect(parseWatermarkSettings(null)).toEqual({
-      enabled: true,
-      businessPagesEnabled: false,
-      customContent: "",
-    });
-    expect(
-      parseWatermarkSettings(
-        JSON.stringify({
-          enabled: true,
-          businessPagesEnabled: true,
-          customContent: "内部资料",
-        }),
-      ),
-    ).toEqual({
-      enabled: true,
       businessPagesEnabled: true,
-      customContent: "内部资料",
+      customContent: "x".repeat(80),
     });
   });
 });

package/template/apps/web/src/layout/GlobalWatermark.layering.webtest.ts

@@ -0,0 +1,81 @@
+import { mount } from "@vue/test-utils";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import GlobalWatermark from "./GlobalWatermark.vue";
+
+const state = vi.hoisted(() => {
+  const actor = {
+    id: "user_1",
+    type: "user" as const,
+    name: "张三",
+    roleCodes: [],
+    permissionKeys: ["system.watermark.read"],
+  };
+  const policy = {
+    value: {
+      enabled: true,
+      businessPagesEnabled: false,
+      customContent: "",
+    },
+  };
+
+  return {
+    actor: { value: actor },
+    access: {
+      value: {
+        actor,
+        menus: [],
+        permissions: [],
+        features: [
+          {
+            key: "system.watermark",
+            enabled: true,
+            visible: "visible" as const,
+            allowed: true,
+            reason: "enabled",
+          },
+        ],
+      },
+    },
+    policy,
+    content: { value: "zhangsan · 张三" },
+  };
+});
+
+vi.mock("@/composables/useAccessSnapshot", () => ({
+  useAccessSnapshot: () => ({ snapshot: state.access }),
+}));
+
+vi.mock("@/composables/useAuthSession", () => ({
+  useAuthSession: () => ({ actor: state.actor }),
+}));
+
+vi.mock("@/composables/useWatermarkSettings", () => ({
+  useWatermarkSettings: () => ({
+    settings: state.policy,
+    policy: state.policy,
+    content: state.content,
+    ensureLoaded: vi.fn(async () => state.policy.value),
+  }),
+}));
+
+afterEach(() => {
+  document.body.replaceChildren();
+});
+
+describe("GlobalWatermark 层级", () => {
+  test("传送到 body 并使用不拦截交互的审计覆盖层", () => {
+    const wrapper = mount(GlobalWatermark);
+    const watermark = document.body.querySelector(
+      '[data-testid="global-watermark"]',
+    );
+
+    expect(watermark).not.toBeNull();
+    expect(watermark?.parentElement).toBe(document.body);
+    expect(watermark?.classList).toContain("isolate");
+    expect(watermark?.classList).toContain("z-[60]");
+    expect(watermark?.classList).toContain("transform-gpu");
+    expect(watermark?.classList).toContain("pointer-events-none");
+
+    wrapper.unmount();
+  });
+});

package/template/apps/web/src/layout/GlobalWatermark.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, onMounted } from "vue";
 import { useAuthSession } from "@/composables/useAuthSession";
 import { useAccessSnapshot } from "@/composables/useAccessSnapshot";
 import { useWatermarkSettings } from "@/composables/useWatermarkSettings";
@@ -16,40 +16,43 @@ const props = withDefaults(
 const auth = useAuthSession();
 const access = useAccessSnapshot();
 const watermark = useWatermarkSettings(auth.actor);
-const allowed = computed(
-  () =>
-    props.scope === "business" ||
-    (access.snapshot.value
-      ? evaluateWebAccess(access.snapshot.value, {
-          permissionKey: "system.watermark.read",
-          featureKey: "system.watermark",
-        }).allowed
-      : false),
-);
+onMounted(() => {
+  void watermark.ensureLoaded();
+});
+const allowed = computed(() => {
+  const snapshot = access.snapshot.value;
+  if (!snapshot) return false;
+  return evaluateWebAccess(snapshot, {
+    featureKey: "system.watermark",
+    permissionKey:
+      props.scope === "admin" ? "system.watermark.read" : undefined,
+  }).allowed;
+});
 const scopeEnabled = computed(
-  () =>
-    props.scope === "admin" || watermark.settings.value.businessPagesEnabled,
+  () => props.scope === "admin" || watermark.policy.value.businessPagesEnabled,
 );
 </script>
 
 <template>
-  <div
-    v-if="
-      allowed &&
-      scopeEnabled &&
-      watermark.settings.value.enabled &&
-      watermark.content.value
-    "
-    class="pointer-events-none fixed inset-0 z-30 grid grid-cols-3 grid-rows-6 overflow-hidden opacity-[0.075] dark:opacity-[0.11]"
-    aria-hidden="true"
-    data-testid="global-watermark"
-  >
-    <span
-      v-for="index in 18"
-      :key="index"
-      class="flex -rotate-[22deg] items-center justify-center whitespace-nowrap px-8 text-sm font-medium text-foreground"
+  <Teleport to="body">
+    <div
+      v-if="
+        allowed &&
+        scopeEnabled &&
+        watermark.policy.value.enabled &&
+        watermark.content.value
+      "
+      class="pointer-events-none fixed inset-0 isolate z-[60] grid transform-gpu grid-cols-3 grid-rows-6 overflow-hidden opacity-[0.075] dark:opacity-[0.11]"
+      aria-hidden="true"
+      data-testid="global-watermark"
     >
-      {{ watermark.content.value }}
-    </span>
-  </div>
+      <span
+        v-for="index in 18"
+        :key="index"
+        class="flex -rotate-[22deg] items-center justify-center whitespace-nowrap px-8 text-sm font-medium text-foreground"
+      >
+        {{ watermark.content.value }}
+      </span>
+    </div>
+  </Teleport>
 </template>

package/template/apps/web/src/layout/GlobalWatermark.webtest.ts

@@ -1,4 +1,4 @@
-import { mount } from "@vue/test-utils";
+import { config, mount } from "@vue/test-utils";
 import { beforeEach, describe, expect, test, vi } from "vitest";
 import GlobalWatermark from "./GlobalWatermark.vue";
 
@@ -34,7 +34,7 @@ const state = vi.hoisted(() => ({
       permissionKeys: ["system.watermark.read"],
     },
   },
-  settings: {
+  policy: {
     value: {
       enabled: true,
       businessPagesEnabled: false,
@@ -54,13 +54,19 @@ vi.mock("@/composables/useAuthSession", () => ({
 
 vi.mock("@/composables/useWatermarkSettings", () => ({
   useWatermarkSettings: () => ({
-    settings: state.settings,
+    policy: state.policy,
     content: state.content,
+    ensureLoaded: vi.fn(async () => state.policy.value),
   }),
 }));
 
+config.global.stubs = {
+  ...config.global.stubs,
+  teleport: true,
+};
+
 beforeEach(() => {
-  state.settings.value = {
+  state.policy.value = {
     enabled: true,
     businessPagesEnabled: false,
     customContent: "",
@@ -76,7 +82,7 @@ describe("GlobalWatermark", () => {
     );
     wrapper.unmount();
 
-    state.settings.value = { ...state.settings.value, enabled: false };
+    state.policy.value = { ...state.policy.value, enabled: false };
     const disabledWrapper = mount(GlobalWatermark);
 
     expect(
@@ -94,8 +100,8 @@ describe("GlobalWatermark", () => {
     );
     wrapper.unmount();
 
-    state.settings.value = {
-      ...state.settings.value,
+    state.policy.value = {
+      ...state.policy.value,
       businessPagesEnabled: true,
     };
     const enabledWrapper = mount(GlobalWatermark, {
@@ -105,5 +111,50 @@ describe("GlobalWatermark", () => {
     expect(
       enabledWrapper.get('[data-testid="global-watermark"]').text(),
     ).toContain("zhangsan · 张三");
+    expect(
+      enabledWrapper.get('[data-testid="global-watermark"]').classes(),
+    ).toEqual(
+      expect.arrayContaining([
+        "isolate",
+        "z-[60]",
+        "transform-gpu",
+        "pointer-events-none",
+      ]),
+    );
+  });
+
+  test("业务页仍服从平台 Feature 最终有效态", () => {
+    state.policy.value = {
+      enabled: true,
+      businessPagesEnabled: true,
+      customContent: "",
+    };
+    state.access.value.features[0]!.allowed = false;
+
+    const wrapper = mount(GlobalWatermark, {
+      props: { scope: "business" },
+    });
+
+    expect(wrapper.find('[data-testid="global-watermark"]').exists()).toBe(
+      false,
+    );
+    state.access.value.features[0]!.allowed = true;
+  });
+
+  test("水印传送到 body，脱离应用壳的层叠上下文", () => {
+    const wrapper = mount(GlobalWatermark, {
+      global: {
+        stubs: {
+          teleport: false,
+        },
+      },
+    });
+
+    const watermark = document.body.querySelector(
+      '[data-testid="global-watermark"]',
+    );
+    expect(watermark).not.toBeNull();
+    expect(watermark?.parentElement).toBe(document.body);
+    wrapper.unmount();
   });
 });

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

@@ -143,7 +143,7 @@ function handleBeforeUnload(event: BeforeUnloadEvent) {
     <header class="space-y-2">
       <h1 class="text-3xl font-semibold tracking-tight">全局设置</h1>
       <p class="text-muted-foreground">
-        维护面向所有用户的平台品牌信息，以及当前浏览器的页面水印偏好。
+        维护面向所有用户的平台品牌信息与全局页面水印策略。
       </p>
     </header>
     <Tabs