create-windy 0.1.0

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useAuthSession } from "@/composables/useAuthSession";
+import { useAccessSnapshot } from "@/composables/useAccessSnapshot";
+import { useWatermarkSettings } from "@/composables/useWatermarkSettings";
+import { evaluateWebAccess } from "./navigation";
+
+const auth = useAuthSession();
+const access = useAccessSnapshot();
+const watermark = useWatermarkSettings(auth.actor);
+const allowed = computed(() =>
+  access.snapshot.value
+    ? evaluateWebAccess(access.snapshot.value, {
+        permissionKey: "system.watermark.read",
+        featureKey: "system.watermark",
+      }).allowed
+    : false,
+);
+</script>
+
+<template>
+  <div
+    v-if="
+      allowed && 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"
+    >
+      {{ watermark.content.value }}
+    </span>
+  </div>
+</template>

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

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import type { MenuNode } from "@windy/shared";
+import { SearchIcon } from "@lucide/vue";
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  shallowRef,
+  watch,
+} from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { Button } from "@/components/ui/button";
+import ModalBody from "@/components/common/ModalBody.vue";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { useAccessSnapshot } from "@/composables/useAccessSnapshot";
+import { authorizedSidebarMenus } from "./navigation";
+
+interface SearchableNavigationItem {
+  key: string;
+  title: string;
+  category: string;
+  path: string;
+}
+
+const router = useRouter();
+const route = useRoute();
+const access = useAccessSnapshot();
+const open = shallowRef(false);
+const query = shallowRef("");
+
+const items = computed(() =>
+  access.snapshot.value
+    ? flattenMenus(authorizedSidebarMenus(access.snapshot.value))
+    : [],
+);
+const results = computed(() => {
+  const keyword = query.value.trim().toLocaleLowerCase();
+  if (!keyword) return items.value.slice(0, 12);
+  return items.value
+    .filter((item) =>
+      `${item.title} ${item.category} ${item.path}`
+        .toLocaleLowerCase()
+        .includes(keyword),
+    )
+    .slice(0, 12);
+});
+
+watch(open, async (isOpen) => {
+  if (!isOpen) return;
+  query.value = "";
+  await nextTick();
+  document.querySelector<HTMLInputElement>("[data-navigation-search]")?.focus();
+});
+
+onMounted(() => window.addEventListener("keydown", handleShortcut));
+onBeforeUnmount(() => window.removeEventListener("keydown", handleShortcut));
+
+function handleShortcut(event: KeyboardEvent) {
+  if (
+    (event.metaKey || event.ctrlKey) &&
+    event.key.toLocaleLowerCase() === "k"
+  ) {
+    event.preventDefault();
+    open.value = !open.value;
+  }
+}
+
+async function select(item: SearchableNavigationItem) {
+  open.value = false;
+  if (route.path !== item.path) await router.push(item.path);
+}
+
+function selectFirst() {
+  const first = results.value[0];
+  if (first) void select(first);
+}
+
+function flattenMenus(
+  menus: MenuNode[],
+  parentTitle = "平台导航",
+): SearchableNavigationItem[] {
+  return menus.flatMap((menu) => {
+    const category = menu.type === "catalog" ? menu.title : parentTitle;
+    const current = menu.path
+      ? [
+          {
+            key: menu.key,
+            title: menu.title,
+            category: parentTitle,
+            path: menu.path,
+          },
+        ]
+      : [];
+    return [...current, ...flattenMenus(menu.children || [], category)];
+  });
+}
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogTrigger as-child>
+      <Button variant="ghost" size="icon" aria-label="搜索平台功能">
+        <SearchIcon />
+      </Button>
+    </DialogTrigger>
+    <DialogContent class="gap-0 overflow-hidden p-0 sm:max-w-xl">
+      <DialogHeader class="border-b px-5 py-4 text-left">
+        <DialogTitle>搜索平台功能</DialogTitle>
+        <DialogDescription
+          >搜索当前账号有权访问的菜单，按 Enter 打开首项。</DialogDescription
+        >
+      </DialogHeader>
+      <div class="shrink-0 border-b p-4">
+        <div class="relative">
+          <SearchIcon
+            class="absolute left-3 top-2.5 size-4 text-muted-foreground"
+          />
+          <Input
+            v-model="query"
+            data-navigation-search
+            class="pl-9"
+            placeholder="输入功能名称或路径"
+            @keyup.enter="selectFirst"
+          />
+        </div>
+      </div>
+      <ModalBody class="p-2">
+        <p
+          v-if="results.length === 0"
+          class="px-3 py-10 text-center text-sm text-muted-foreground"
+        >
+          没有找到可访问的功能
+        </p>
+        <button
+          v-for="item in results"
+          :key="item.key"
+          type="button"
+          class="flex w-full items-center justify-between gap-4 rounded-md px-3 py-2.5 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground"
+          @click="select(item)"
+        >
+          <span class="min-w-0">
+            <span class="block truncate font-medium">{{ item.title }}</span>
+            <span class="block truncate text-xs text-muted-foreground">{{
+              item.category
+            }}</span>
+          </span>
+          <span class="shrink-0 text-xs text-muted-foreground">{{
+            item.path
+          }}</span>
+        </button>
+      </ModalBody>
+      <div class="shrink-0 border-t px-5 py-2 text-xs text-muted-foreground">
+        快捷键 Ctrl/⌘ K
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>

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

@@ -0,0 +1,84 @@
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { flushPromises, mount } from "@vue/test-utils";
+import { shallowRef } from "vue";
+import { createMemoryHistory, createRouter } from "vue-router";
+import type { WebAccessSnapshot } from "./navigation";
+import NavigationSearchDialog from "./NavigationSearchDialog.vue";
+
+const snapshot = shallowRef<WebAccessSnapshot>({
+  actor: {
+    id: "user_1",
+    type: "user",
+    name: "管理员",
+    roleCodes: ["admin"],
+    permissionKeys: ["system.role.read"],
+  },
+  menus: [
+    {
+      key: "system",
+      title: "系统管理",
+      type: "catalog",
+      order: 10,
+      visible: true,
+      children: [
+        {
+          key: "system.role",
+          title: "角色权限",
+          type: "menu",
+          order: 10,
+          visible: true,
+          path: "/system/roles",
+          permissionKey: "system.role.read",
+        },
+      ],
+    },
+  ],
+  permissions: [],
+  features: [],
+});
+
+vi.mock("@/composables/useAccessSnapshot", () => ({
+  useAccessSnapshot: () => ({ snapshot }),
+}));
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  vi.clearAllMocks();
+});
+
+describe("NavigationSearchDialog", () => {
+  test("点击搜索后可按授权菜单检索并跳转", async () => {
+    const router = createRouter({
+      history: createMemoryHistory(),
+      routes: [
+        { path: "/", component: { template: "<div />" } },
+        { path: "/system/roles", component: { template: "<div />" } },
+      ],
+    });
+    await router.push("/");
+    await router.isReady();
+    const wrapper = mount(NavigationSearchDialog, {
+      attachTo: document.body,
+      global: { plugins: [router] },
+    });
+
+    await wrapper.get('button[aria-label="搜索平台功能"]').trigger("click");
+    await flushPromises();
+    const input = document.body.querySelector<HTMLInputElement>(
+      "[data-navigation-search]",
+    );
+    expect(input).not.toBeNull();
+    input!.value = "角色";
+    input!.dispatchEvent(new Event("input", { bubbles: true }));
+    await flushPromises();
+    const result = Array.from(document.body.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("角色权限"),
+    );
+    expect(result).toBeDefined();
+    result?.click();
+    await flushPromises();
+
+    expect(router.currentRoute.value.path).toBe("/system/roles");
+    wrapper.unmount();
+  });
+});

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

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import type { NotificationInboxItem } from "@windy/shared";
+import { BellIcon } from "@lucide/vue";
+import { computed, onMounted, shallowRef } from "vue";
+import { useAccessSnapshot } from "@/composables/useAccessSnapshot";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { formatDateTime } from "@/lib/date-time";
+import { evaluateWebAccess } from "@/layout/navigation";
+import {
+  listNotifications,
+  markNotificationRead,
+} from "@/services/notification-api";
+
+const notifications = shallowRef<NotificationInboxItem[]>([]);
+const access = useAccessSnapshot();
+const selected = shallowRef<NotificationInboxItem>();
+const detailOpen = shallowRef(false);
+const loading = shallowRef(false);
+const error = shallowRef("");
+const unreadCount = computed(
+  () => notifications.value.filter(({ read }) => !read).length,
+);
+const allowed = computed(() =>
+  access.snapshot.value
+    ? evaluateWebAccess(access.snapshot.value, {
+        permissionKey: "system.notification.read",
+        featureKey: "system.notification",
+      }).allowed
+    : false,
+);
+
+onMounted(async () => {
+  try {
+    if (!access.snapshot.value) await access.refresh();
+    if (allowed.value) await loadNotifications();
+  } catch {
+    // Header 静默降级，权限或快照不可用时不制造额外通知请求。
+  }
+});
+
+async function loadNotifications() {
+  loading.value = true;
+  error.value = "";
+  try {
+    notifications.value = (await listNotifications()).items;
+  } catch {
+    error.value = "通知加载失败";
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function openNotification(notification: NotificationInboxItem) {
+  selected.value = notification;
+  detailOpen.value = true;
+  if (notification.read) return;
+  notifications.value = notifications.value.map((item) =>
+    item.id === notification.id ? { ...item, read: true } : item,
+  );
+  selected.value = { ...notification, read: true };
+  try {
+    const result = await markNotificationRead(notification.id);
+    notifications.value = notifications.value.map((item) =>
+      item.id === notification.id ? { ...item, readAt: result.readAt } : item,
+    );
+  } catch {
+    notifications.value = notifications.value.map((item) =>
+      item.id === notification.id ? { ...item, read: false } : item,
+    );
+  }
+}
+</script>
+
+<template>
+  <DropdownMenu v-if="allowed">
+    <DropdownMenuTrigger as-child>
+      <Button
+        variant="ghost"
+        size="icon"
+        class="relative"
+        aria-label="站内通知"
+      >
+        <BellIcon data-icon="inline-start" />
+        <span
+          v-if="unreadCount > 0"
+          class="absolute right-1.5 top-1.5 size-2 rounded-full bg-destructive"
+          aria-hidden="true"
+        />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end" class="w-80 p-0">
+      <DropdownMenuLabel class="flex items-center justify-between px-4 py-3">
+        <span>站内通知</span>
+        <span class="text-xs font-normal text-muted-foreground">
+          {{ unreadCount }} 条未读
+        </span>
+      </DropdownMenuLabel>
+      <DropdownMenuSeparator />
+
+      <div v-if="notifications.length" class="max-h-96 overflow-y-auto py-1">
+        <button
+          v-for="notification in notifications"
+          :key="notification.id"
+          :data-notification-id="notification.id"
+          type="button"
+          class="flex w-full gap-3 px-4 py-3 text-left outline-none transition-colors hover:bg-muted focus-visible:bg-muted"
+          @click="openNotification(notification)"
+        >
+          <span
+            class="mt-1.5 size-2 shrink-0 rounded-full"
+            :class="notification.read ? 'bg-muted-foreground/30' : 'bg-primary'"
+            aria-hidden="true"
+          />
+          <span class="min-w-0 flex-1 space-y-1">
+            <span class="flex items-center justify-between gap-3">
+              <span class="truncate text-sm font-medium text-foreground">
+                {{ notification.title }}
+              </span>
+              <span class="shrink-0 text-xs text-muted-foreground">
+                {{ formatDateTime(notification.publishedAt) }}
+              </span>
+            </span>
+            <span class="line-clamp-2 text-xs leading-5 text-muted-foreground">
+              {{ notification.summary }}
+            </span>
+            <span class="text-xs text-muted-foreground">
+              {{ notification.category }}
+            </span>
+          </span>
+        </button>
+      </div>
+
+      <div v-else class="px-4 py-8 text-center">
+        <p class="text-sm font-medium text-foreground">
+          {{ loading ? "正在加载通知…" : error || "暂无站内通知" }}
+        </p>
+        <p v-if="!loading && !error" class="mt-1 text-xs text-muted-foreground">
+          新的通知会显示在这里。
+        </p>
+      </div>
+    </DropdownMenuContent>
+  </DropdownMenu>
+
+  <Sheet v-model:open="detailOpen">
+    <SheetContent class="w-full sm:max-w-md">
+      <SheetHeader>
+        <SheetTitle>{{ selected?.title || "站内通知" }}</SheetTitle>
+        <SheetDescription>
+          {{ selected?.category }} · {{ formatDateTime(selected?.publishedAt) }}
+        </SheetDescription>
+      </SheetHeader>
+      <article v-if="selected" class="space-y-4 px-4 text-sm leading-7">
+        <p class="font-medium text-foreground">{{ selected.summary }}</p>
+        <p class="whitespace-pre-wrap text-muted-foreground">
+          {{ selected.content }}
+        </p>
+      </article>
+    </SheetContent>
+  </Sheet>
+</template>

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

@@ -0,0 +1,102 @@
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { flushPromises, mount } from "@vue/test-utils";
+import NotificationMenu from "./NotificationMenu.vue";
+import { shallowRef } from "vue";
+
+const mocks = vi.hoisted(() => ({
+  allowed: true,
+  list: vi.fn(async () => ({
+    items: [
+      {
+        id: "notice_1",
+        title: "维护通知",
+        summary: "今晚进行例行维护",
+        content: "维护窗口为 22:00 至 22:30，请提前保存工作。",
+        category: "系统",
+        status: "published",
+        publishedAt: "2026-07-14T08:00:00.000Z",
+        createdAt: "2026-07-14T08:00:00.000Z",
+        createdBy: "admin",
+        updatedAt: "2026-07-14T08:00:00.000Z",
+        updatedBy: "admin",
+        read: false,
+      },
+    ],
+    total: 1,
+    page: 1,
+    pageSize: 10,
+  })),
+  markRead: vi.fn(async () => ({
+    success: true,
+    alreadyRead: false,
+    readAt: "2026-07-14T08:01:00.000Z",
+  })),
+}));
+
+vi.mock("@/services/notification-api", () => ({
+  listNotifications: mocks.list,
+  markNotificationRead: mocks.markRead,
+}));
+
+vi.mock("@/composables/useAccessSnapshot", () => ({
+  useAccessSnapshot: () => ({
+    snapshot: shallowRef({
+      actor: {
+        id: "user_1",
+        type: "user",
+        name: "管理员",
+        roleCodes: ["developer"],
+        permissionKeys: mocks.allowed ? ["system.notification.read"] : [],
+      },
+      menus: [],
+      permissions: [],
+      features: [
+        {
+          key: "system.notification",
+          enabled: true,
+          visible: "visible",
+          allowed: mocks.allowed,
+          reason: mocks.allowed ? "allowed" : "feature-disabled",
+        },
+      ],
+    }),
+    refresh: vi.fn(),
+  }),
+}));
+
+describe("站内通知", () => {
+  beforeEach(() => {
+    mocks.allowed = true;
+    mocks.list.mockClear();
+    mocks.markRead.mockClear();
+  });
+
+  test("Feature 或阅读权限不可用时隐藏入口且不请求通知接口", async () => {
+    mocks.allowed = false;
+    const wrapper = mount(NotificationMenu);
+    await flushPromises();
+
+    expect(wrapper.find('button[aria-label="站内通知"]').exists()).toBe(false);
+    expect(mocks.list).not.toHaveBeenCalled();
+  });
+
+  test("点击通知可阅读正文并标记为已读", async () => {
+    const wrapper = mount(NotificationMenu, { attachTo: document.body });
+    await flushPromises();
+    await wrapper.get('button[aria-label="站内通知"]').trigger("click");
+
+    const item = document.body.querySelector<HTMLButtonElement>(
+      "[data-notification-id='notice_1']",
+    );
+    expect(item).not.toBeNull();
+    item?.click();
+    await flushPromises();
+
+    expect(document.body.textContent).toContain(
+      "维护窗口为 22:00 至 22:30，请提前保存工作。",
+    );
+    expect(mocks.list).toHaveBeenCalledTimes(1);
+    expect(mocks.markRead).toHaveBeenCalledWith("notice_1");
+    wrapper.unmount();
+  });
+});

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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useTheme } from "@/composables/useTheme";
+import { MonitorIcon, MoonIcon, SunIcon } from "@lucide/vue";
+
+const { theme, themeLabel, cycleTheme } = useTheme();
+
+const ariaLabel = computed(() => `切换主题，当前${themeLabel.value}`);
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="0">
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <Button
+          variant="ghost"
+          size="icon"
+          :aria-label="ariaLabel"
+          @click="cycleTheme"
+        >
+          <SunIcon
+            v-if="theme === 'light'"
+            data-icon="inline-start"
+            aria-hidden="true"
+          />
+          <MoonIcon
+            v-else-if="theme === 'dark'"
+            data-icon="inline-start"
+            aria-hidden="true"
+          />
+          <MonitorIcon v-else data-icon="inline-start" aria-hidden="true" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>{{ ariaLabel }}</TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>