create-windy 0.4.0 → 0.5.0

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

@@ -41,6 +41,8 @@ const state = vi.hoisted(() => ({
       density: "medium" as const,
       contentFields: ["username", "displayName"] as const,
       customContent: "",
+      opacityPercent: 8,
+      fontSize: 14,
     },
   },
   content: { value: "zhangsan · 张三" },
@@ -77,11 +79,13 @@ beforeEach(() => {
     density: "medium" as const,
     contentFields: ["username", "displayName"] as const,
     customContent: "",
+    opacityPercent: 8,
+    fontSize: 14,
   };
 });
 
 describe("GlobalWatermark", () => {
-  test("Admin 水印沿用原有总开关且不受业务页面范围影响", () => {
+  test("总开关统一控制 Admin 与业务页面水印", () => {
     const wrapper = mount(GlobalWatermark);
 
     expect(wrapper.find('[data-testid="global-watermark"]').exists()).toBe(
@@ -97,7 +101,7 @@ describe("GlobalWatermark", () => {
     ).toBe(false);
   });
 
-  test("业务页面水印默认开启并可由持久化范围开关关闭", () => {
+  test("旧业务范围字段不再形成独立开关", () => {
     const wrapper = mount(GlobalWatermark, {
       props: { scope: "business" },
     });
@@ -111,13 +115,13 @@ describe("GlobalWatermark", () => {
       ...state.policy.value,
       businessPagesEnabled: false,
     };
-    const disabledWrapper = mount(GlobalWatermark, {
+    const legacyWrapper = mount(GlobalWatermark, {
       props: { scope: "business" },
     });
 
     expect(
-      disabledWrapper.find('[data-testid="global-watermark"]').exists(),
-    ).toBe(false);
+      legacyWrapper.find('[data-testid="global-watermark"]').exists(),
+    ).toBe(true);
   });
 
   test("使用按内容和密度计算的平铺蒙版并保持审计层级", () => {
@@ -128,6 +132,7 @@ describe("GlobalWatermark", () => {
 
     expect(element.attributes("style")).toContain("--watermark-image:");
     expect(element.attributes("style")).toContain("--watermark-size:");
+    expect(element.attributes("style")).toContain("opacity: 0.08");
     expect(element.classes()).toEqual(
       expect.arrayContaining([
         "isolate",
@@ -145,6 +150,8 @@ describe("GlobalWatermark", () => {
       density: "medium",
       contentFields: ["username", "displayName"],
       customContent: "",
+      opacityPercent: 8,
+      fontSize: 14,
     };
     state.access.value.features[0]!.allowed = false;
 

package/template/apps/web/src/pages/auth/LoginPage.vue

@@ -25,7 +25,12 @@ const developmentAuth = developmentAuthStatus();
     <div class="w-full max-w-md space-y-4">
       <div class="flex items-center justify-center gap-3">
         <span
-          class="flex size-10 items-center justify-center rounded-xl bg-primary text-primary-foreground"
+          class="flex size-10 items-center justify-center rounded-xl"
+          :class="
+            platform.branding.value.logoUrl
+              ? 'bg-transparent text-foreground'
+              : 'bg-primary text-primary-foreground'
+          "
         >
           <img
             v-if="platform.branding.value.logoUrl"

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

@@ -13,6 +13,12 @@ const access = useAccessSnapshot();
 const toast = useAppToast();
 const softwareName = shallowRef("");
 const logoUrl = shallowRef("");
+const logoUrlInput = computed({
+  get: () => (logoUrl.value.startsWith("data:") ? "" : logoUrl.value),
+  set: (value: string) => {
+    logoUrl.value = value;
+  },
+});
 const description = shallowRef("");
 const readingLogo = shallowRef(false);
 const loaded = shallowRef(false);
@@ -145,11 +151,17 @@ defineExpose({
           </Button>
         </div>
         <Input
-          v-model="logoUrl"
+          v-model="logoUrlInput"
           :disabled="!canManage"
-          maxlength="1398128"
+          maxlength="2048"
           placeholder="或填写 https://example.com/logo.png"
         />
+        <span
+          v-if="logoUrl.startsWith('data:')"
+          class="text-xs font-normal text-muted-foreground"
+        >
+          当前使用本地图片，编码内容不在输入框中显示。
+        </span>
         <span class="text-xs font-normal text-muted-foreground">
           本地文件支持 PNG、JPEG、WebP，最大
           {{ maxLocalLogoBytes / 1024 }} KiB；也可使用 HTTPS 或站内路径。
@@ -159,7 +171,12 @@ defineExpose({
         <p class="mb-3 text-xs font-medium text-muted-foreground">预览</p>
         <div class="flex items-center gap-3">
           <div
-            class="flex size-12 items-center justify-center overflow-hidden rounded-lg bg-primary text-primary-foreground"
+            class="flex size-12 items-center justify-center overflow-hidden rounded-lg"
+            :class="
+              logoUrl
+                ? 'bg-transparent text-foreground'
+                : 'bg-primary text-primary-foreground'
+            "
           >
             <img
               v-if="logoUrl"

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

@@ -0,0 +1,80 @@
+import { flushPromises, mount } from "@vue/test-utils";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { shallowRef } from "vue";
+import BrandingSettingsSection from "./BrandingSettingsSection.vue";
+
+const mocks = vi.hoisted(() => ({
+  refresh: vi.fn(),
+  save: vi.fn(),
+  success: vi.fn(),
+  error: vi.fn(),
+}));
+
+vi.mock("@/composables/useAccessSnapshot", () => ({
+  useAccessSnapshot: () => ({
+    snapshot: shallowRef({
+      actor: { permissionKeys: ["system.settings.manage"] },
+    }),
+  }),
+}));
+
+vi.mock("@/composables/useAppToast", () => ({
+  useAppToast: () => ({ success: mocks.success, error: mocks.error }),
+}));
+
+vi.mock("@/composables/usePlatformSettings", () => ({
+  usePlatformSettings: () => ({
+    refresh: mocks.refresh,
+    save: mocks.save,
+    saving: shallowRef(false),
+    error: shallowRef(""),
+  }),
+}));
+
+describe("品牌基本信息", () => {
+  beforeEach(() => {
+    mocks.refresh.mockReset();
+    mocks.save.mockReset();
+    mocks.success.mockReset();
+    mocks.error.mockReset();
+  });
+
+  test("本地 Logo 保留预览但不在地址输入框暴露 Base64，且不添加底色", async () => {
+    const localLogo = "data:image/png;base64,AA==";
+    mocks.refresh.mockResolvedValue({
+      softwareName: "利剑",
+      logoUrl: localLogo,
+      description: "企业级 Dashboard 产品基座",
+    });
+
+    const wrapper = mount(BrandingSettingsSection);
+    await flushPromises();
+
+    expect(
+      (wrapper.get('input[placeholder^="或填写"]').element as HTMLInputElement)
+        .value,
+    ).toBe("");
+    expect(wrapper.get('img[alt="Logo 预览"]').attributes("src")).toBe(
+      localLogo,
+    );
+    expect(wrapper.text()).toContain("编码内容不在输入框中显示");
+    const preview = wrapper.get('img[alt="Logo 预览"]').element.parentElement;
+    expect(preview?.classList.contains("bg-transparent")).toBe(true);
+    expect(preview?.classList.contains("bg-primary")).toBe(false);
+  });
+
+  test("外部或站内 Logo 地址仍可编辑", async () => {
+    mocks.refresh.mockResolvedValue({
+      softwareName: "Windy",
+      logoUrl: "/assets/logo.png",
+    });
+
+    const wrapper = mount(BrandingSettingsSection);
+    await flushPromises();
+
+    expect(
+      (wrapper.get('input[placeholder^="或填写"]').element as HTMLInputElement)
+        .value,
+    ).toBe("/assets/logo.png");
+  });
+});

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

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed, type StyleValue } from "vue";
+import { createWatermarkPattern } from "@/composables/watermark-settings";
+import type { WatermarkDensity } from "@southwind-ai/shared";
+
+const props = defineProps<{
+  enabled: boolean;
+  content: string;
+  density: WatermarkDensity;
+  opacityPercent: number;
+  fontSize: number;
+}>();
+
+const patternStyle = computed<StyleValue>(() => {
+  const pattern = createWatermarkPattern(
+    props.content,
+    props.density,
+    props.fontSize,
+  );
+  return {
+    "--watermark-image": pattern.image,
+    "--watermark-size": pattern.size,
+    opacity: props.opacityPercent / 100,
+  };
+});
+</script>
+
+<template>
+  <section class="grid gap-3" aria-label="水印即时预览">
+    <div class="flex items-center justify-between gap-3">
+      <h3 class="text-sm font-medium">即时预览</h3>
+      <span class="text-xs text-muted-foreground">
+        {{ opacityPercent }}% · {{ fontSize }}px
+      </span>
+    </div>
+    <div
+      class="relative h-56 overflow-hidden rounded-xl border bg-muted/30"
+      data-testid="watermark-preview"
+    >
+      <div
+        v-if="enabled && content"
+        class="watermark-preview pointer-events-none absolute inset-0 bg-foreground"
+        :style="patternStyle"
+        aria-hidden="true"
+        data-testid="watermark-preview-pattern"
+      />
+      <div
+        v-else
+        class="absolute inset-0 grid place-items-center text-sm text-muted-foreground"
+      >
+        水印已关闭
+      </div>
+      <div
+        class="absolute inset-x-6 bottom-6 rounded-lg border bg-background/90 p-4 shadow-sm"
+      >
+        <p class="text-sm font-medium">业务页面内容示意</p>
+        <p class="mt-1 text-xs text-muted-foreground">
+          修改字段、密度、不透明度或字体大小后，此处立即呈现实际效果。
+        </p>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.watermark-preview {
+  mask-image: var(--watermark-image);
+  mask-size: var(--watermark-size);
+  -webkit-mask-image: var(--watermark-image);
+  -webkit-mask-size: var(--watermark-size);
+}
+</style>

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

@@ -0,0 +1,55 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import WatermarkPreview from "./WatermarkPreview.vue";
+
+describe("水印即时预览", () => {
+  test("外观草稿变化后立即复用实际平铺算法更新", async () => {
+    const wrapper = mount(WatermarkPreview, {
+      props: {
+        enabled: true,
+        content: "zhangsan · 张三",
+        density: "medium",
+        opacityPercent: 8,
+        fontSize: 14,
+      },
+    });
+    const initialStyle =
+      wrapper
+        .get('[data-testid="watermark-preview-pattern"]')
+        .attributes("style") ?? "";
+
+    expect(initialStyle).toContain("opacity: 0.08");
+    expect(decodeURIComponent(initialStyle)).toContain('font-size="14"');
+
+    await wrapper.setProps({
+      content: "张三 · 内部资料",
+      opacityPercent: 20,
+      fontSize: 24,
+    });
+    const updatedStyle =
+      wrapper
+        .get('[data-testid="watermark-preview-pattern"]')
+        .attributes("style") ?? "";
+
+    expect(updatedStyle).toContain("opacity: 0.2");
+    expect(decodeURIComponent(updatedStyle)).toContain('font-size="24"');
+    expect(decodeURIComponent(updatedStyle)).toContain("内部资料");
+  });
+
+  test("关闭唯一开关时即时显示停用状态", () => {
+    const wrapper = mount(WatermarkPreview, {
+      props: {
+        enabled: false,
+        content: "zhangsan",
+        density: "medium",
+        opacityPercent: 8,
+        fontSize: 14,
+      },
+    });
+
+    expect(wrapper.text()).toContain("水印已关闭");
+    expect(
+      wrapper.find('[data-testid="watermark-preview-pattern"]').exists(),
+    ).toBe(false);
+  });
+});

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

@@ -15,12 +15,16 @@ import { useAccessSnapshot } from "@/composables/useAccessSnapshot";
 import { useAppToast } from "@/composables/useAppToast";
 import { useAuthSession } from "@/composables/useAuthSession";
 import { useWatermarkSettings } from "@/composables/useWatermarkSettings";
+import { watermarkContent } from "@/composables/watermark-settings";
 import { evaluateWebAccess } from "@/layout/navigation";
 import {
   DEFAULT_PLATFORM_WATERMARK_POLICY,
+  WATERMARK_FONT_SIZE_RANGE,
+  WATERMARK_OPACITY_RANGE,
   type WatermarkContentField,
   type WatermarkDensity,
 } from "@southwind-ai/shared";
+import WatermarkPreview from "./WatermarkPreview.vue";
 
 const densityOptions: { value: WatermarkDensity; label: string }[] = [
   { value: "low", label: "低" },
@@ -44,14 +48,13 @@ const access = useAccessSnapshot();
 const toast = useAppToast();
 const watermark = useWatermarkSettings(auth.actor);
 const enabled = shallowRef(watermark.policy.value.enabled);
-const businessPagesEnabled = shallowRef(
-  watermark.policy.value.businessPagesEnabled,
-);
 const density = shallowRef<WatermarkDensity>(watermark.policy.value.density);
 const contentFields = shallowRef<WatermarkContentField[]>([
   ...watermark.policy.value.contentFields,
 ]);
 const customContent = shallowRef(watermark.policy.value.customContent);
+const opacityPercent = shallowRef(watermark.policy.value.opacityPercent);
+const fontSize = shallowRef(watermark.policy.value.fontSize);
 const saving = shallowRef(false);
 const baseline = shallowRef(serializeForm());
 const canManage = computed(() => {
@@ -70,6 +73,14 @@ const isDirty = computed(
 const formDisabled = computed(
   () => !canManage.value || saving.value || watermark.loading.value,
 );
+const previewContent = computed(
+  () =>
+    watermarkContent(
+      auth.actor.value,
+      contentFields.value,
+      customContent.value,
+    ) || "当前用户",
+);
 
 onMounted(async () => {
   try {
@@ -87,10 +98,12 @@ async function save(): Promise<boolean> {
   try {
     await watermark.save({
       enabled: enabled.value,
-      businessPagesEnabled: businessPagesEnabled.value,
+      businessPagesEnabled: enabled.value,
       density: density.value,
       contentFields: contentFields.value,
       customContent: customContent.value,
+      opacityPercent: opacityPercent.value,
+      fontSize: fontSize.value,
     });
     applyPolicyToForm();
     toast.success("水印设置已保存");
@@ -107,30 +120,32 @@ async function save(): Promise<boolean> {
 
 function reset() {
   enabled.value = DEFAULT_PLATFORM_WATERMARK_POLICY.enabled;
-  businessPagesEnabled.value =
-    DEFAULT_PLATFORM_WATERMARK_POLICY.businessPagesEnabled;
   density.value = DEFAULT_PLATFORM_WATERMARK_POLICY.density;
   contentFields.value = [...DEFAULT_PLATFORM_WATERMARK_POLICY.contentFields];
   customContent.value = DEFAULT_PLATFORM_WATERMARK_POLICY.customContent;
+  opacityPercent.value = DEFAULT_PLATFORM_WATERMARK_POLICY.opacityPercent;
+  fontSize.value = DEFAULT_PLATFORM_WATERMARK_POLICY.fontSize;
   toast.success("已恢复为默认值，保存后生效");
 }
 
 function applyPolicyToForm() {
   enabled.value = watermark.policy.value.enabled;
-  businessPagesEnabled.value = watermark.policy.value.businessPagesEnabled;
   density.value = watermark.policy.value.density;
   contentFields.value = [...watermark.policy.value.contentFields];
   customContent.value = watermark.policy.value.customContent;
+  opacityPercent.value = watermark.policy.value.opacityPercent;
+  fontSize.value = watermark.policy.value.fontSize;
   baseline.value = serializeForm();
 }
 
 function serializeForm() {
   return JSON.stringify({
     enabled: enabled.value,
-    businessPagesEnabled: businessPagesEnabled.value,
     density: density.value,
     contentFields: [...contentFields.value].sort(),
     customContent: customContent.value.trim(),
+    opacityPercent: opacityPercent.value,
+    fontSize: fontSize.value,
   });
 }
 
@@ -161,29 +176,19 @@ defineExpose({
       </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="formDisabled"
-          aria-label="显示页面水印"
-        />
-      </label>
       <label
         class="flex items-center justify-between gap-4 text-sm font-medium"
       >
         <span>
-          <span class="block">覆盖业务页面</span>
+          <span class="block">显示页面水印</span>
           <span class="mt-1 block text-xs font-normal text-muted-foreground">
-            开启后，首页及使用业务布局的页面也会显示水印。
+            开启后，管理页面和业务页面统一显示水印。
           </span>
         </span>
         <Switch
-          v-model="businessPagesEnabled"
-          :disabled="formDisabled || !enabled"
-          aria-label="在业务页面显示水印"
+          v-model="enabled"
+          :disabled="formDisabled"
+          aria-label="显示页面水印"
         />
       </label>
       <label class="grid gap-2 text-sm font-medium">
@@ -207,7 +212,7 @@ defineExpose({
         </span>
       </label>
       <fieldset class="grid gap-3" :disabled="formDisabled || !enabled">
-        <legend class="mb-1 text-sm font-medium">水印内容</legend>
+        <legend class="mb-1 text-sm font-medium">水印字段（可任意组合）</legend>
         <label
           v-for="option in contentOptions"
           :key="option.value"
@@ -243,6 +248,57 @@ defineExpose({
           最多 80 个字符，与勾选的用户身份内容一同显示。
         </span>
       </label>
+      <div class="grid gap-5 sm:grid-cols-2">
+        <label class="grid gap-2 text-sm font-medium">
+          <span class="flex items-center justify-between gap-3">
+            <span>不透明度</span>
+            <output for="watermark-opacity">{{ opacityPercent }}%</output>
+          </span>
+          <input
+            id="watermark-opacity"
+            v-model.number="opacityPercent"
+            type="range"
+            :min="WATERMARK_OPACITY_RANGE.min"
+            :max="WATERMARK_OPACITY_RANGE.max"
+            :step="WATERMARK_OPACITY_RANGE.step"
+            :disabled="formDisabled || !enabled"
+            aria-label="水印不透明度"
+            class="w-full accent-primary"
+          />
+          <span class="text-xs font-normal text-muted-foreground">
+            可设置 {{ WATERMARK_OPACITY_RANGE.min }}% 至
+            {{ WATERMARK_OPACITY_RANGE.max }}%。
+          </span>
+        </label>
+        <label class="grid gap-2 text-sm font-medium">
+          <span class="flex items-center justify-between gap-3">
+            <span>字体大小</span>
+            <output for="watermark-font-size">{{ fontSize }}px</output>
+          </span>
+          <input
+            id="watermark-font-size"
+            v-model.number="fontSize"
+            type="range"
+            :min="WATERMARK_FONT_SIZE_RANGE.min"
+            :max="WATERMARK_FONT_SIZE_RANGE.max"
+            :step="WATERMARK_FONT_SIZE_RANGE.step"
+            :disabled="formDisabled || !enabled"
+            aria-label="水印字体大小"
+            class="w-full accent-primary"
+          />
+          <span class="text-xs font-normal text-muted-foreground">
+            可设置 {{ WATERMARK_FONT_SIZE_RANGE.min }}px 至
+            {{ WATERMARK_FONT_SIZE_RANGE.max }}px。
+          </span>
+        </label>
+      </div>
+      <WatermarkPreview
+        :enabled="enabled"
+        :content="previewContent"
+        :density="density"
+        :opacity-percent="opacityPercent"
+        :font-size="fontSize"
+      />
       <div v-if="canManage" class="flex justify-end gap-3 border-t pt-5">
         <Button variant="outline" :disabled="formDisabled" @click="reset">
           恢复默认

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

@@ -0,0 +1,115 @@
+import { flushPromises, mount } from "@vue/test-utils";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import WatermarkSettingsSection from "./WatermarkSettingsSection.vue";
+
+const state = vi.hoisted(() => {
+  const actor = {
+    id: "user_settings",
+    type: "user" as const,
+    name: "张三",
+    username: "zhangsan",
+    displayName: "张三",
+    email: "zs@example.com",
+    roleCodes: ["admin"],
+    permissionKeys: ["system.watermark.read", "system.watermark.manage"],
+  };
+  return {
+    actor: { value: actor },
+    access: {
+      value: {
+        actor,
+        menus: [],
+        permissions: [],
+        features: [
+          {
+            key: "system.watermark",
+            enabled: true,
+            visible: "visible" as const,
+            allowed: true,
+            reason: "enabled",
+          },
+        ],
+      },
+    },
+    policy: {
+      value: {
+        enabled: true,
+        businessPagesEnabled: true,
+        density: "medium" as const,
+        contentFields: ["username", "displayName"] as const,
+        customContent: "",
+        opacityPercent: 8,
+        fontSize: 14,
+      },
+    },
+    loadManaged: vi.fn(),
+    save: vi.fn(),
+  };
+});
+
+vi.mock("@/composables/useAccessSnapshot", () => ({
+  useAccessSnapshot: () => ({
+    snapshot: state.access,
+    ensureLoaded: vi.fn(async () => state.access.value),
+  }),
+}));
+
+vi.mock("@/composables/useAuthSession", () => ({
+  useAuthSession: () => ({ actor: state.actor }),
+}));
+
+vi.mock("@/composables/useAppToast", () => ({
+  useAppToast: () => ({
+    success: vi.fn(),
+    error: vi.fn(),
+  }),
+}));
+
+vi.mock("@/composables/useWatermarkSettings", () => ({
+  useWatermarkSettings: () => ({
+    policy: state.policy,
+    loading: { value: false },
+    loadManaged: state.loadManaged,
+    save: state.save,
+  }),
+}));
+
+beforeEach(() => {
+  state.loadManaged.mockReset();
+  state.loadManaged.mockResolvedValue(state.policy.value);
+  state.save.mockReset();
+});
+
+describe("水印设置表单", () => {
+  test("只呈现一个开关且外观草稿立即更新预览", async () => {
+    const wrapper = mount(WatermarkSettingsSection);
+    await flushPromises();
+
+    expect(wrapper.text()).not.toContain("覆盖业务页面");
+    expect(wrapper.findAll('[aria-label="显示页面水印"]')).toHaveLength(1);
+
+    await wrapper.get('input[aria-label="水印不透明度"]').setValue("20");
+    await wrapper.get('input[aria-label="水印字体大小"]').setValue("24");
+
+    const previewStyle =
+      wrapper
+        .get('[data-testid="watermark-preview-pattern"]')
+        .attributes("style") ?? "";
+    expect(previewStyle).toContain("opacity: 0.2");
+    expect(decodeURIComponent(previewStyle)).toContain('font-size="24"');
+    expect(state.save).not.toHaveBeenCalled();
+  });
+
+  test("任意勾选身份字段后立即进入预览内容", async () => {
+    const wrapper = mount(WatermarkSettingsSection);
+    await flushPromises();
+
+    await wrapper.get('[aria-label="邮箱"]').trigger("click");
+
+    const previewStyle =
+      wrapper
+        .get('[data-testid="watermark-preview-pattern"]')
+        .attributes("style") ?? "";
+    expect(decodeURIComponent(previewStyle)).toContain("zs@example.com");
+  });
+});