create-windy 0.3.19 → 0.4.1

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

@@ -31,17 +31,16 @@ const allowed = computed(() => {
       props.scope === "admin" ? "system.watermark.read" : undefined,
   }).allowed;
 });
-const scopeEnabled = computed(
-  () => props.scope === "admin" || watermark.policy.value.businessPagesEnabled,
-);
 const patternStyle = computed<StyleValue>(() => {
   const pattern = createWatermarkPattern(
     watermark.content.value,
     watermark.policy.value.density,
+    watermark.policy.value.fontSize,
   );
   return {
     "--watermark-image": pattern.image,
     "--watermark-size": pattern.size,
+    opacity: watermark.policy.value.opacityPercent / 100,
   };
 });
 </script>
@@ -50,12 +49,9 @@ const patternStyle = computed<StyleValue>(() => {
   <Teleport to="body">
     <div
       v-if="
-        allowed &&
-        scopeEnabled &&
-        watermark.policy.value.enabled &&
-        watermark.content.value
+        allowed && watermark.policy.value.enabled && watermark.content.value
       "
-      class="global-watermark pointer-events-none fixed inset-0 isolate z-[60] transform-gpu bg-foreground opacity-[0.075] dark:opacity-[0.11]"
+      class="global-watermark pointer-events-none fixed inset-0 isolate z-[60] transform-gpu bg-foreground"
       :style="patternStyle"
       aria-hidden="true"
       data-testid="global-watermark"

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/layout/NavigationSearchDialog.vue

@@ -23,6 +23,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { useAccessSnapshot } from "@/composables/useAccessSnapshot";
 import { useGlobalSearch } from "@/composables/useGlobalSearch";
+import { webAdminUiComposition } from "@/router/web-composition-host";
 import GlobalSearchResults from "./GlobalSearchResults.vue";
 import { authorizedSidebarMenus } from "./navigation";
 
@@ -42,7 +43,13 @@ const businessSearch = useGlobalSearch(query);
 
 const items = computed(() =>
   access.snapshot.value
-    ? flattenMenus(authorizedSidebarMenus(access.snapshot.value))
+    ? flattenMenus(
+        authorizedSidebarMenus(
+          access.snapshot.value,
+          webAdminUiComposition.presentation,
+          webAdminUiComposition,
+        ),
+      )
     : [],
 );
 const results = computed(() => {

package/template/apps/web/src/layout/navigation.ts

@@ -5,6 +5,7 @@ import type {
   MenuNode,
   PermissionDefinition,
 } from "@southwind-ai/shared";
+import type { AdminRoutePresentation } from "../router/admin-ui-composition";
 
 export interface WebAccessActor {
   id: string;
@@ -47,6 +48,11 @@ export interface WebAccessDecision {
   reason: "allowed" | "missing-permission" | "feature-disabled";
 }
 
+export interface AdminRouteActivation {
+  readonly knownRouteKeys: ReadonlySet<string>;
+  readonly visibleRouteKeys: ReadonlySet<string>;
+}
+
 export const dashboardMenu: MenuNode = {
   key: "dashboard",
   title: "工作台",
@@ -80,9 +86,11 @@ export function evaluateWebAccess(
 
 export function authorizedSidebarMenus(
   snapshot: WebAccessSnapshot,
+  presentation: ReadonlyMap<string, AdminRoutePresentation> = new Map(),
+  activation?: AdminRouteActivation,
 ): MenuNode[] {
   return [dashboardMenu, ...snapshot.menus]
-    .map((menu) => authorizeMenu(menu, snapshot))
+    .map((menu) => authorizeMenu(menu, snapshot, presentation, activation))
     .filter((menu): menu is MenuNode => Boolean(menu))
     .sort((left, right) => left.order - right.order);
 }
@@ -94,14 +102,31 @@ export function canToggleFeatureFlags(snapshot: WebAccessSnapshot): boolean {
 function authorizeMenu(
   menu: MenuNode,
   snapshot: WebAccessSnapshot,
+  presentation: ReadonlyMap<string, AdminRoutePresentation>,
+  activation?: AdminRouteActivation,
 ): MenuNode | undefined {
   if (!menu.visible) return undefined;
+  if (
+    activation?.knownRouteKeys.has(menu.key) &&
+    !activation.visibleRouteKeys.has(menu.key)
+  ) {
+    return undefined;
+  }
+  const override = presentation.get(menu.key);
+  if (override?.hidden) return undefined;
   const children = menu.children
-    ?.map((child) => authorizeMenu(child, snapshot))
-    .filter((child): child is MenuNode => Boolean(child));
+    ?.map((child) => authorizeMenu(child, snapshot, presentation, activation))
+    .filter((child): child is MenuNode => Boolean(child))
+    .sort((left, right) => left.order - right.order);
   const access = evaluateWebAccess(snapshot, menu);
   if (!access.allowed || (menu.type === "catalog" && children?.length === 0)) {
     return undefined;
   }
-  return { ...menu, children };
+  return {
+    ...menu,
+    ...(override?.title === undefined ? {} : { title: override.title }),
+    ...(override?.icon === undefined ? {} : { icon: override.icon }),
+    ...(override?.order === undefined ? {} : { order: override.order }),
+    children,
+  };
 }

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

@@ -6,6 +6,7 @@ import {
   evaluateWebAccess,
   type WebAccessSnapshot,
 } from "./navigation";
+import type { AdminRoutePresentation } from "../router/admin-ui-composition";
 
 describe("Web 访问快照", () => {
   test("菜单同时受服务端权限和 Feature 有效态约束", () => {
@@ -45,6 +46,56 @@ describe("Web 访问快照", () => {
       "system.audit",
     );
   });
+
+  test("客户可按稳定 Route Key 隐藏、排序或替换菜单呈现", () => {
+    const snapshot = accessSnapshot();
+    snapshot.menus[0]!.children!.push({
+      key: "system.role",
+      title: "角色管理",
+      type: "menu",
+      order: 20,
+      visible: true,
+      path: "/admin/system/roles",
+    });
+    const presentation = new Map<string, AdminRoutePresentation>([
+      [
+        "system.audit",
+        {
+          routeKey: "system.audit",
+          title: "操作留痕",
+          icon: "scroll-text",
+          order: 30,
+        },
+      ],
+      [
+        "system.role",
+        {
+          routeKey: "system.role",
+          hidden: true,
+        },
+      ],
+    ]);
+
+    const menus = authorizedSidebarMenus(snapshot, presentation);
+    const audit = menus[1]?.children?.[0];
+
+    expect(audit).toMatchObject({
+      key: "system.audit",
+      title: "操作留痕",
+      icon: "scroll-text",
+      order: 30,
+    });
+    expect(flattenKeys(menus)).not.toContain("system.role");
+  });
+
+  test("根装配清单关闭 Admin 呈现后不保留失效菜单", () => {
+    const menus = authorizedSidebarMenus(accessSnapshot(), new Map(), {
+      knownRouteKeys: new Set(["system.audit"]),
+      visibleRouteKeys: new Set(),
+    });
+
+    expect(flattenKeys(menus)).not.toContain("system.audit");
+  });
 });
 
 function accessSnapshot(): WebAccessSnapshot {

package/template/apps/web/src/pages/dashboard/dashboard-presenter.ts

@@ -5,6 +5,7 @@ import {
   authorizedSidebarMenus,
   type WebAccessSnapshot,
 } from "@/layout/navigation";
+import { webAdminUiComposition } from "@/router/web-composition-host";
 
 export interface DashboardMetric {
   label: string;
@@ -32,7 +33,11 @@ export function buildDashboardModel(
 ): DashboardModel {
   const features = snapshot?.features || [];
   const availableMenuCount = snapshot
-    ? authorizedSidebarMenus(snapshot)
+    ? authorizedSidebarMenus(
+        snapshot,
+        webAdminUiComposition.presentation,
+        webAdminUiComposition,
+      )
         .flatMap((menu) => (menu.children?.length ? menu.children : [menu]))
         .filter((menu) => menu.key !== "dashboard" && Boolean(menu.path)).length
     : 0;

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">
           恢复默认