create-windy 0.1.0

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

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/components/ui/breadcrumb";
+import { Separator } from "@/components/ui/separator";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import { useRouter } from "vue-router";
+import UserSessionMenu from "@/components/auth/UserSessionMenu.vue";
+import {
+  resetAccessSnapshot,
+  useAccessSnapshot,
+} from "@/composables/useAccessSnapshot";
+import { useAppToast } from "@/composables/useAppToast";
+import { useAuthSession } from "@/composables/useAuthSession";
+// @windy-module system.license begin
+import { resetLicenseRuntime } from "@/composables/useLicenseRuntime";
+// @windy-module system.license end
+import { resetSessionContext } from "@/composables/useSessionContext";
+// @windy-module system.notification begin
+import NotificationMenu from "./NotificationMenu.vue";
+// @windy-module system.notification end
+// @windy-module system.search begin
+import NavigationSearchDialog from "./NavigationSearchDialog.vue";
+// @windy-module system.search end
+import ThemeToggle from "./ThemeToggle.vue";
+import { evaluateWebAccess } from "./navigation";
+
+const route = useRoute();
+const router = useRouter();
+const auth = useAuthSession();
+const toast = useAppToast();
+const access = useAccessSnapshot();
+const pageTitle = computed(() => String(route.meta.title || "平台首页"));
+// @windy-module system.search begin
+const canSearch = computed(() =>
+  access.snapshot.value
+    ? evaluateWebAccess(access.snapshot.value, {
+        permissionKey: "system.search.read",
+        featureKey: "system.search",
+      }).allowed
+    : false,
+);
+// @windy-module system.search end
+const canViewProfile = computed(() =>
+  access.snapshot.value
+    ? evaluateWebAccess(access.snapshot.value, {
+        permissionKey: "system.profile.read",
+        featureKey: "system.profile",
+      }).allowed
+    : false,
+);
+
+async function logout() {
+  try {
+    await auth.logout();
+    resetAccessSnapshot();
+    // @windy-module system.license begin
+    resetLicenseRuntime();
+    // @windy-module system.license end
+    resetSessionContext();
+    await router.replace({ name: "login" });
+  } catch {
+    toast.error("退出失败", {
+      description: auth.error.value || "服务暂时不可用，请稍后重试。",
+    });
+  }
+}
+</script>
+
+<template>
+  <header
+    class="flex h-14 shrink-0 items-center gap-3 border-b bg-background px-4 text-foreground"
+  >
+    <SidebarTrigger />
+    <Separator
+      orientation="vertical"
+      class="mr-2 h-4 data-[orientation=vertical]:self-center"
+    />
+    <Breadcrumb class="min-w-0 flex-1">
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbPage>{{ pageTitle }}</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+    <div class="flex items-center gap-2">
+      <!-- @windy-module system.search begin -->
+      <NavigationSearchDialog v-if="canSearch" />
+      <!-- @windy-module system.search end -->
+      <!-- @windy-module system.notification begin -->
+      <NotificationMenu />
+      <!-- @windy-module system.notification end -->
+      <ThemeToggle />
+      <UserSessionMenu
+        :actor="auth.actor.value"
+        :loading="auth.checking.value"
+        :profile-enabled="canViewProfile"
+        @logout="logout"
+      />
+    </div>
+  </header>
+</template>

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

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { Toaster } from "@/components/ui/sonner";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import DevelopmentAuthWarning from "@/components/auth/DevelopmentAuthWarning.vue";
+// @windy-module system.license begin
+import LicenseExpiryBanner from "@/components/license/LicenseExpiryBanner.vue";
+import { useLicenseReminderRefresh } from "@/composables/useLicenseReminderRefresh";
+import { useLicenseRuntime } from "@/composables/useLicenseRuntime";
+// @windy-module system.license end
+import AppHeader from "@/layout/AppHeader.vue";
+import AppSidebar from "@/layout/AppSidebar.vue";
+// @windy-module system.settings begin
+import GlobalWatermark from "@/layout/GlobalWatermark.vue";
+// @windy-module system.settings end
+import { developmentAuthStatus } from "@/services/http";
+
+const developmentAuth = developmentAuthStatus();
+// @windy-module system.license begin
+const licenseRuntime = useLicenseRuntime();
+useLicenseReminderRefresh(licenseRuntime.refresh);
+// @windy-module system.license end
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="0">
+    <SidebarProvider class="h-svh min-h-0 overflow-hidden">
+      <AppSidebar />
+      <SidebarInset class="h-svh min-w-0 overflow-hidden">
+        <AppHeader />
+        <div
+          data-testid="app-content-scroll"
+          class="min-h-0 flex-1 overflow-y-auto overscroll-contain"
+        >
+          <div v-if="developmentAuth.configured" class="px-6 pt-4">
+            <DevelopmentAuthWarning />
+          </div>
+          <!-- @windy-module system.license begin -->
+          <LicenseExpiryBanner
+            v-if="licenseRuntime.snapshot.value"
+            :snapshot="licenseRuntime.snapshot.value"
+          />
+          <!-- @windy-module system.license end -->
+          <main class="p-6">
+            <slot />
+          </main>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+    <!-- @windy-module system.settings begin -->
+    <GlobalWatermark />
+    <!-- @windy-module system.settings end -->
+    <Toaster />
+  </TooltipProvider>
+</template>

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

@@ -0,0 +1,75 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it, vi } from "vitest";
+
+import AppShell from "@/layout/AppShell.vue";
+
+// @windy-module system.license begin
+vi.mock("@/composables/useLicenseRuntime", () => ({
+  useLicenseRuntime: () => ({
+    refresh: vi.fn(),
+    snapshot: { value: undefined },
+  }),
+}));
+
+vi.mock("@/composables/useLicenseReminderRefresh", () => ({
+  useLicenseReminderRefresh: vi.fn(),
+}));
+// @windy-module system.license end
+
+vi.mock("@/services/http", () => ({
+  developmentAuthStatus: () => ({ configured: true }),
+}));
+
+const passthroughStub = (testId: string) => ({
+  inheritAttrs: false,
+  template: `<div data-testid="${testId}" v-bind="$attrs"><slot /></div>`,
+});
+
+describe("AppShell", () => {
+  it("keeps the header outside the independently scrolling content area", () => {
+    const wrapper = mount(AppShell, {
+      slots: {
+        default: '<article data-testid="page-content">页面内容</article>',
+      },
+      global: {
+        stubs: {
+          AppHeader: { template: '<header data-testid="app-header" />' },
+          AppSidebar: { template: '<aside data-testid="app-sidebar" />' },
+          DevelopmentAuthWarning: true,
+          GlobalWatermark: true,
+          // @windy-module system.license begin
+          LicenseExpiryBanner: true,
+          // @windy-module system.license end
+          SidebarInset: passthroughStub("sidebar-inset"),
+          SidebarProvider: passthroughStub("sidebar-provider"),
+          Toaster: true,
+          TooltipProvider: passthroughStub("tooltip-provider"),
+        },
+      },
+    });
+
+    const provider = wrapper.get('[data-testid="sidebar-provider"]');
+    const inset = wrapper.get('[data-testid="sidebar-inset"]');
+    const header = wrapper.get('[data-testid="app-header"]');
+    const contentScroll = wrapper.get('[data-testid="app-content-scroll"]');
+
+    expect(provider.classes()).toEqual(
+      expect.arrayContaining(["h-svh", "min-h-0", "overflow-hidden"]),
+    );
+    expect(inset.classes()).toEqual(
+      expect.arrayContaining(["h-svh", "min-w-0", "overflow-hidden"]),
+    );
+    expect(contentScroll.classes()).toEqual(
+      expect.arrayContaining([
+        "min-h-0",
+        "flex-1",
+        "overflow-y-auto",
+        "overscroll-contain",
+      ]),
+    );
+    expect(header.element.nextElementSibling).toBe(contentScroll.element);
+    expect(contentScroll.get('[data-testid="page-content"]').text()).toBe(
+      "页面内容",
+    );
+  });
+});

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

@@ -0,0 +1,262 @@
+<script setup lang="ts">
+import type { MenuNode } from "@windy/shared";
+import {
+  ActivityIcon,
+  BellIcon,
+  BlocksIcon,
+  BookOpenIcon,
+  Building2Icon,
+  ChevronDownIcon,
+  ClipboardListIcon,
+  FlagIcon,
+  KeyRoundIcon,
+  LayoutDashboardIcon,
+  PanelLeftIcon,
+  SettingsIcon,
+  ShieldCheckIcon,
+  StampIcon,
+  TicketIcon,
+  UsersIcon,
+} from "@lucide/vue";
+import type { Component } from "vue";
+import { computed, reactive, watch } from "vue";
+import { RouterLink, useRoute } from "vue-router";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from "@/components/ui/sidebar";
+import { useAccessSnapshot } from "@/composables/useAccessSnapshot";
+// @windy-module system.license begin
+import { useLicenseRuntime } from "@/composables/useLicenseRuntime";
+// @windy-module system.license end
+import { usePlatformSettings } from "@/composables/usePlatformSettings";
+import { authorizedSidebarMenus } from "./navigation";
+
+interface NavigationGroup {
+  key: string;
+  title: string;
+  items: MenuNode[];
+}
+
+const iconMap: Record<string, Component> = {
+  activity: ActivityIcon,
+  bell: BellIcon,
+  "layout-dashboard": LayoutDashboardIcon,
+  "book-open": BookOpenIcon,
+  "building-2": Building2Icon,
+  "panel-left": PanelLeftIcon,
+  settings: SettingsIcon,
+  users: UsersIcon,
+  "shield-check": ShieldCheckIcon,
+  stamp: StampIcon,
+  flag: FlagIcon,
+  "key-round": KeyRoundIcon,
+  "clipboard-list": ClipboardListIcon,
+  ticket: TicketIcon,
+};
+
+const storageKey = "windy.sidebar.groups";
+const route = useRoute();
+const access = useAccessSnapshot();
+// @windy-module system.license begin
+const license = useLicenseRuntime();
+// @windy-module system.license end
+const platform = usePlatformSettings();
+const openGroups = reactive<Record<string, boolean>>(loadOpenGroups());
+const authorizedMenus = computed(() =>
+  access.snapshot.value ? authorizedSidebarMenus(access.snapshot.value) : [],
+);
+const settingsMenu = computed(() =>
+  findMenu(authorizedMenus.value, "system.settings"),
+);
+
+const groups = computed<NavigationGroup[]>(() => {
+  // @windy-module system.license begin
+  if (license.snapshot.value?.restricted) {
+    return [
+      {
+        key: "license-recovery",
+        title: "授权恢复",
+        items: [
+          {
+            key: "runtime-license",
+            title: "License",
+            type: "menu",
+            order: 0,
+            visible: true,
+            path: "/admin/system/license",
+            icon: "key-round",
+          },
+        ],
+      },
+    ];
+  }
+  // @windy-module system.license end
+  return authorizedMenus.value
+    .map((menu) => ({
+      key: menu.key,
+      title: menu.title,
+      items: (menu.children?.length ? menu.children : [menu]).filter(
+        (item) =>
+          item.key !== "system.settings" && item.key !== "system.profile",
+      ),
+    }))
+    .filter((group) => group.items.length > 0);
+});
+
+watch(
+  groups,
+  (current) => {
+    for (const group of current) {
+      if (openGroups[group.key] === undefined) openGroups[group.key] = true;
+      if (group.items.some((item) => item.path === route.path)) {
+        openGroups[group.key] = true;
+      }
+    }
+    persistOpenGroups();
+  },
+  { immediate: true },
+);
+
+watch(
+  () => route.path,
+  (path) => {
+    const active = groups.value.find((group) =>
+      group.items.some((item) => item.path === path),
+    );
+    if (active) openGroups[active.key] = true;
+  },
+);
+
+function icon(item: MenuNode): Component {
+  return iconMap[item.icon || "settings"] || SettingsIcon;
+}
+
+function toggleGroup(key: string) {
+  openGroups[key] = !openGroups[key];
+  persistOpenGroups();
+}
+
+function loadOpenGroups(): Record<string, boolean> {
+  try {
+    return JSON.parse(localStorage.getItem(storageKey) || "{}") as Record<
+      string,
+      boolean
+    >;
+  } catch {
+    return {};
+  }
+}
+
+function persistOpenGroups() {
+  try {
+    localStorage.setItem(storageKey, JSON.stringify(openGroups));
+  } catch {
+    // 浏览器禁用存储时，折叠状态仍可在当前会话中使用。
+  }
+}
+
+function findMenu(menus: MenuNode[], key: string): MenuNode | undefined {
+  for (const menu of menus) {
+    if (menu.key === key) return menu;
+    const child = findMenu(menu.children || [], key);
+    if (child) return child;
+  }
+  return undefined;
+}
+</script>
+
+<template>
+  <Sidebar collapsible="icon">
+    <SidebarHeader class="gap-2">
+      <RouterLink
+        to="/admin"
+        aria-label="返回工作台"
+        class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sidebar-foreground outline-none transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring group-data-[collapsible=icon]:mx-auto group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0"
+      >
+        <div
+          data-testid="sidebar-brand-logo"
+          class="flex size-8 max-w-full shrink-0 items-center justify-center overflow-hidden rounded-lg bg-primary text-primary-foreground [&>svg]:size-5 group-data-[collapsible=icon]:size-4 group-data-[collapsible=icon]:rounded-sm group-data-[collapsible=icon]:[&>svg]:size-4"
+        >
+          <img
+            v-if="platform.branding.value.logoUrl"
+            :src="platform.branding.value.logoUrl"
+            alt=""
+            class="size-full object-contain"
+          />
+          <BlocksIcon v-else />
+        </div>
+        <div class="min-w-0 group-data-[collapsible=icon]:hidden">
+          <p class="truncate text-sm font-semibold">
+            {{ platform.softwareName.value }}
+          </p>
+          <p class="truncate text-xs text-muted-foreground">
+            {{ platform.branding.value.description || "企业应用基座" }}
+          </p>
+        </div>
+      </RouterLink>
+    </SidebarHeader>
+
+    <SidebarContent>
+      <SidebarGroup v-for="group in groups" :key="group.key">
+        <SidebarGroupLabel
+          as="button"
+          type="button"
+          class="w-full cursor-pointer gap-2 pr-2 text-left hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+          :aria-label="`${openGroups[group.key] ? '收起' : '展开'}${group.title}`"
+          :aria-expanded="openGroups[group.key]"
+          @click="toggleGroup(group.key)"
+        >
+          <span class="min-w-0 flex-1 truncate">{{ group.title }}</span>
+          <ChevronDownIcon
+            class="transition-transform"
+            :class="{ '-rotate-90': !openGroups[group.key] }"
+          />
+        </SidebarGroupLabel>
+        <SidebarGroupContent v-show="openGroups[group.key]">
+          <SidebarMenu>
+            <SidebarMenuItem v-for="item in group.items" :key="item.key">
+              <SidebarMenuButton
+                v-if="item.path"
+                :is-active="route.path === item.path"
+                :tooltip="item.title"
+                as-child
+              >
+                <RouterLink :to="item.path">
+                  <component :is="icon(item)" />
+                  <span>{{ item.title }}</span>
+                </RouterLink>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </SidebarContent>
+    <SidebarFooter v-if="settingsMenu?.path" class="border-t">
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton
+            as-child
+            :is-active="route.path === settingsMenu.path"
+            :tooltip="settingsMenu.title"
+          >
+            <RouterLink :to="settingsMenu.path">
+              <component :is="icon(settingsMenu)" />
+              <span>{{ settingsMenu.title }}</span>
+            </RouterLink>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarFooter>
+    <SidebarRail />
+  </Sidebar>
+</template>

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

@@ -0,0 +1,167 @@
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { flushPromises, mount } from "@vue/test-utils";
+import { createMemoryHistory, createRouter } from "vue-router";
+import AppSidebar from "./AppSidebar.vue";
+import {
+  SidebarProvider,
+  sidebarMenuButtonVariants,
+} from "@/components/ui/sidebar";
+
+const state = vi.hoisted(() => ({
+  access: {
+    value: {
+      actor: {
+        id: "user_1",
+        type: "user",
+        name: "管理员",
+        roleCodes: ["admin"],
+        permissionKeys: ["system.user.read", "system.role.read"],
+      },
+      menus: [
+        {
+          key: "system",
+          title: "系统管理",
+          type: "catalog",
+          order: 10,
+          visible: true,
+          children: [
+            {
+              key: "system.user",
+              title: "用户管理",
+              type: "menu",
+              order: 10,
+              visible: true,
+              path: "/admin/system/users",
+              permissionKey: "system.user.read",
+              icon: "users",
+            },
+            {
+              key: "system.role",
+              title: "角色管理",
+              type: "menu",
+              order: 20,
+              visible: true,
+              path: "/admin/system/roles",
+              permissionKey: "system.role.read",
+              icon: "shield-check",
+            },
+          ],
+        },
+      ],
+      permissions: [],
+      features: [],
+    },
+  },
+  // @windy-module system.license begin
+  license: { value: { restricted: false } },
+  // @windy-module system.license end
+  branding: {
+    value: {
+      softwareName: "Windy Platform",
+      logoUrl: "data:image/png;base64,AA==",
+      description: "企业应用基座",
+    },
+  },
+  softwareName: { value: "Windy Platform" },
+}));
+
+vi.mock("@/composables/useAccessSnapshot", () => ({
+  useAccessSnapshot: () => ({ snapshot: state.access }),
+}));
+
+// @windy-module system.license begin
+vi.mock("@/composables/useLicenseRuntime", () => ({
+  useLicenseRuntime: () => ({ snapshot: state.license }),
+}));
+// @windy-module system.license end
+
+vi.mock("@/composables/usePlatformSettings", () => ({
+  usePlatformSettings: () => ({
+    branding: state.branding,
+    softwareName: state.softwareName,
+  }),
+}));
+
+beforeEach(() => localStorage.clear());
+
+describe("AppSidebar", () => {
+  test("折叠品牌区把 Logo 收敛到标准图标尺寸且容器不溢出", async () => {
+    const { wrapper } = await mountSidebar(false);
+    const brandLink = wrapper.get('a[aria-label="返回工作台"]');
+    const logo = wrapper.get('[data-testid="sidebar-brand-logo"]');
+
+    expect(brandLink.classes()).toContain(
+      "group-data-[collapsible=icon]:size-8",
+    );
+    expect(brandLink.classes()).toContain("group-data-[collapsible=icon]:p-0");
+    expect(logo.classes()).toContain("group-data-[collapsible=icon]:size-4");
+    expect(logo.classes()).toContain("overflow-hidden");
+    wrapper.unmount();
+  });
+
+  test("分组标题整行可点击折叠，折叠态标题不会遮挡相邻菜单", async () => {
+    const { wrapper } = await mountSidebar(true);
+    const groupButton = wrapper.get('button[aria-label="收起系统管理"]');
+
+    expect(groupButton.attributes("aria-expanded")).toBe("true");
+    expect(groupButton.classes()).toContain("w-full");
+    expect(groupButton.classes()).toContain(
+      "group-data-[collapsible=icon]:pointer-events-none",
+    );
+
+    await groupButton.trigger("click");
+
+    const collapsedButton = wrapper.get('button[aria-label="展开系统管理"]');
+    expect(collapsedButton.attributes("aria-expanded")).toBe("false");
+    expect(
+      collapsedButton.element
+        .closest('[data-sidebar="group"]')
+        ?.querySelector('[data-sidebar="group-content"]')
+        ?.getAttribute("style"),
+    ).toContain("display: none");
+    wrapper.unmount();
+  });
+
+  test("浅色选中态使用克制的整块底色且没有突兀强调线", () => {
+    const classes = sidebarMenuButtonVariants();
+
+    expect(classes).toContain("data-active:bg-primary/8");
+    expect(classes).toContain("data-active:text-sidebar-foreground");
+    expect(classes).toContain("data-active:font-medium");
+    expect(classes).not.toContain("inset_3px");
+  });
+
+  test("折叠侧边栏分组最后一个菜单仍可导航", async () => {
+    const { router, wrapper } = await mountSidebar(false);
+
+    await wrapper.get('a[href="/admin/system/roles"]').trigger("click");
+    await flushPromises();
+
+    expect(router.currentRoute.value.path).toBe("/admin/system/roles");
+    wrapper.unmount();
+  });
+});
+
+async function mountSidebar(defaultOpen: boolean) {
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: "/admin", component: { template: "<div />" } },
+      { path: "/admin/system/users", component: { template: "<div />" } },
+      { path: "/admin/system/roles", component: { template: "<div />" } },
+    ],
+  });
+  await router.push("/admin");
+  await router.isReady();
+  const wrapper = mount(
+    {
+      components: { AppSidebar, SidebarProvider },
+      template:
+        '<SidebarProvider :default-open="defaultOpen"><AppSidebar /></SidebarProvider>',
+      setup: () => ({ defaultOpen }),
+    },
+    { global: { plugins: [router] } },
+  );
+  await flushPromises();
+  return { router, wrapper };
+}