create-windy 0.6.8 → 0.6.10

package/template/apps/web/src/pages/ui/components/FoundationComponentShowcases.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { ArrowRightIcon, PlusIcon, Trash2Icon } from "@lucide/vue";
+import { shallowRef } from "vue";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Switch } from "@/components/ui/switch";
+import { componentCatalogById, type ComponentId } from "../component-catalog";
+import ComponentPreviewCard from "./ComponentPreviewCard.vue";
+
+const props = defineProps<{
+  visibleIds: readonly ComponentId[];
+}>();
+
+const query = shallowRef("");
+const selected = shallowRef(true);
+const enabled = shallowRef(true);
+
+function isVisible(id: ComponentId) {
+  return props.visibleIds.includes(id);
+}
+</script>
+
+<template>
+  <ComponentPreviewCard
+    v-if="isVisible('button')"
+    :item="componentCatalogById.button"
+  >
+    <div class="flex flex-wrap items-center gap-2">
+      <Button><PlusIcon />新建记录</Button>
+      <Button variant="outline">取消</Button>
+      <Button variant="secondary">保存草稿</Button>
+      <Button variant="destructive"><Trash2Icon />删除</Button>
+      <Button variant="link">查看规范<ArrowRightIcon /></Button>
+    </div>
+  </ComponentPreviewCard>
+
+  <ComponentPreviewCard
+    v-if="isVisible('badge')"
+    :item="componentCatalogById.badge"
+  >
+    <div class="flex flex-wrap items-center gap-2">
+      <Badge>已启用</Badge>
+      <Badge variant="secondary">草稿</Badge>
+      <Badge variant="outline">待处理</Badge>
+      <Badge variant="destructive">异常</Badge>
+    </div>
+  </ComponentPreviewCard>
+
+  <ComponentPreviewCard
+    v-if="isVisible('input')"
+    :item="componentCatalogById.input"
+  >
+    <label class="grid w-full max-w-sm gap-2 text-sm font-medium">
+      搜索组件
+      <Input v-model="query" placeholder="输入名称或用途" />
+      <span class="font-normal text-muted-foreground">
+        当前输入：{{ query || "暂无" }}
+      </span>
+    </label>
+  </ComponentPreviewCard>
+
+  <ComponentPreviewCard
+    v-if="isVisible('checkbox')"
+    :item="componentCatalogById.checkbox"
+  >
+    <label class="flex items-center gap-3 text-sm">
+      <Checkbox v-model="selected" aria-label="包含已停用组件" />
+      <span>
+        <span class="block font-medium">包含已停用组件</span>
+        <span class="text-muted-foreground">
+          {{ selected ? "已包含" : "仅显示可用组件" }}
+        </span>
+      </span>
+    </label>
+  </ComponentPreviewCard>
+
+  <ComponentPreviewCard
+    v-if="isVisible('switch')"
+    :item="componentCatalogById.switch"
+  >
+    <div
+      class="flex w-full items-center justify-between gap-4 rounded-lg border bg-background p-3"
+    >
+      <div>
+        <p class="text-sm font-medium">组件预览</p>
+        <p class="text-xs text-muted-foreground">
+          {{ enabled ? "预览已启用" : "预览已暂停" }}
+        </p>
+      </div>
+      <Switch v-model="enabled" aria-label="切换组件预览" />
+    </div>
+  </ComponentPreviewCard>
+
+  <ComponentPreviewCard
+    v-if="isVisible('separator')"
+    :item="componentCatalogById.separator"
+  >
+    <div class="w-full max-w-sm text-sm">
+      <p class="font-medium">组件信息</p>
+      <p class="mt-1 text-muted-foreground">由 Windy Web 统一维护。</p>
+      <Separator class="my-4" />
+      <div class="flex h-5 items-center gap-3">
+        <span>稳定</span>
+        <Separator orientation="vertical" />
+        <span>可访问</span>
+        <Separator orientation="vertical" />
+        <span>可复用</span>
+      </div>
+    </div>
+  </ComponentPreviewCard>
+
+  <ComponentPreviewCard
+    v-if="isVisible('skeleton')"
+    :item="componentCatalogById.skeleton"
+  >
+    <div class="flex w-full max-w-sm items-center gap-3">
+      <Skeleton class="size-10 rounded-full" />
+      <div class="grid flex-1 gap-2">
+        <Skeleton class="h-3 w-1/3" />
+        <Skeleton class="h-3 w-full" />
+        <Skeleton class="h-3 w-4/5" />
+      </div>
+    </div>
+  </ComponentPreviewCard>
+</template>

package/template/apps/web/src/pages/ui/components/NavigationComponentShowcases.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import {
+  BellIcon,
+  ChevronDownIcon,
+  LayoutDashboardIcon,
+  SettingsIcon,
+} from "@lucide/vue";
+import { shallowRef } from "vue";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { componentCatalogById, type ComponentId } from "../component-catalog";
+import ComponentPreviewCard from "./ComponentPreviewCard.vue";
+
+const props = defineProps<{
+  visibleIds: readonly ComponentId[];
+}>();
+
+const compactMode = shallowRef(false);
+
+function isVisible(id: ComponentId) {
+  return props.visibleIds.includes(id);
+}
+</script>
+
+<template>
+  <ComponentPreviewCard
+    v-if="isVisible('breadcrumb')"
+    :item="componentCatalogById.breadcrumb"
+  >
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/admin">工作台</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/ui/component">UI 组件</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>面包屑</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  </ComponentPreviewCard>
+
+  <ComponentPreviewCard
+    v-if="isVisible('tabs')"
+    :item="componentCatalogById.tabs"
+  >
+    <Tabs default-value="preview" class="w-full">
+      <TabsList aria-label="组件页签示例">
+        <TabsTrigger value="preview">预览</TabsTrigger>
+        <TabsTrigger value="usage">使用说明</TabsTrigger>
+      </TabsList>
+      <TabsContent
+        value="preview"
+        class="rounded-lg border bg-background p-3 text-sm"
+      >
+        在真实主题和间距系统中检查组件。
+      </TabsContent>
+      <TabsContent
+        value="usage"
+        class="rounded-lg border bg-background p-3 text-sm"
+      >
+        从组件目录导入，不复制基础组件源码。
+      </TabsContent>
+    </Tabs>
+  </ComponentPreviewCard>
+
+  <ComponentPreviewCard
+    v-if="isVisible('dropdown-menu')"
+    :item="componentCatalogById['dropdown-menu']"
+  >
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <Button variant="outline">页面操作<ChevronDownIcon /></Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" class="w-52">
+        <DropdownMenuLabel>显示设置</DropdownMenuLabel>
+        <DropdownMenuCheckboxItem v-model="compactMode">
+          紧凑模式
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          刷新组件
+          <DropdownMenuShortcut>⌘R</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </ComponentPreviewCard>
+
+  <ComponentPreviewCard
+    v-if="isVisible('sidebar')"
+    :item="componentCatalogById.sidebar"
+  >
+    <div
+      class="w-full max-w-xs overflow-hidden rounded-lg border bg-sidebar text-sidebar-foreground"
+    >
+      <SidebarGroup>
+        <SidebarGroupLabel>组件导航</SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <Button
+                variant="ghost"
+                class="w-full justify-start bg-sidebar-accent"
+              >
+                <LayoutDashboardIcon />总览
+              </Button>
+            </SidebarMenuItem>
+            <SidebarMenuItem>
+              <Button variant="ghost" class="w-full justify-start">
+                <SettingsIcon />表单组件
+              </Button>
+              <SidebarMenuBadge class="top-1.5">7</SidebarMenuBadge>
+            </SidebarMenuItem>
+            <SidebarMenuItem>
+              <Button variant="ghost" class="w-full justify-start">
+                <BellIcon />反馈组件
+              </Button>
+              <SidebarMenuBadge class="top-1.5">5</SidebarMenuBadge>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </div>
+  </ComponentPreviewCard>
+</template>

package/template/apps/web/src/pages/ui/components/ProjectComponentShowcases.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { Badge } from "@/components/ui/badge";
+import type { ComponentCatalogItem } from "../component-catalog";
+import ComponentPreviewCard from "./ComponentPreviewCard.vue";
+
+defineProps<{
+  items: readonly ComponentCatalogItem[];
+}>();
+</script>
+
+<template>
+  <ComponentPreviewCard v-for="item in items" :key="item.id" :item="item">
+    <div class="grid w-full gap-3">
+      <p class="text-sm text-muted-foreground">
+        已从当前项目的组件入口自动发现。交互预览可在项目内按需补充。
+      </p>
+      <div class="flex flex-wrap gap-2">
+        <Badge
+          v-for="exportName in item.exports"
+          :key="exportName"
+          variant="outline"
+        >
+          {{ exportName }}
+        </Badge>
+        <Badge v-if="item.exports.length === 0" variant="secondary">
+          暂无具名导出
+        </Badge>
+      </div>
+    </div>
+  </ComponentPreviewCard>
+</template>

package/template/apps/web/src/pages/ui/components/UiComponentGallery.vue

@@ -0,0 +1,238 @@
+<script setup lang="ts">
+import { BlocksIcon, SearchIcon, XIcon } from "@lucide/vue";
+import { computed, shallowRef } from "vue";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  componentCatalog,
+  componentCategories,
+  type ComponentCategoryId,
+} from "../component-catalog";
+import DataComponentShowcases from "./DataComponentShowcases.vue";
+import FeedbackComponentShowcases from "./FeedbackComponentShowcases.vue";
+import FoundationComponentShowcases from "./FoundationComponentShowcases.vue";
+import NavigationComponentShowcases from "./NavigationComponentShowcases.vue";
+import ProjectComponentShowcases from "./ProjectComponentShowcases.vue";
+
+type CategoryFilter = "all" | ComponentCategoryId;
+
+const searchQuery = shallowRef("");
+const activeCategory = shallowRef<CategoryFilter>("all");
+const normalizedQuery = computed(() =>
+  searchQuery.value.trim().toLocaleLowerCase(),
+);
+const visibleComponents = computed(() =>
+  componentCatalog.filter((component) => {
+    if (
+      activeCategory.value !== "all" &&
+      component.category !== activeCategory.value
+    ) {
+      return false;
+    }
+    if (!normalizedQuery.value) return true;
+    return [
+      component.name,
+      component.label,
+      component.description,
+      component.exportPath,
+      ...component.keywords,
+    ].some((value) =>
+      value.toLocaleLowerCase().includes(normalizedQuery.value),
+    );
+  }),
+);
+const visibleIds = computed(() => visibleComponents.value.map(({ id }) => id));
+const visibleProjectComponents = computed(() =>
+  visibleComponents.value.filter(({ category }) => category === "project"),
+);
+const visibleCategories = computed(() =>
+  componentCategories.filter((category) =>
+    visibleComponents.value.some(
+      (component) => component.category === category.id,
+    ),
+  ),
+);
+const categoryCounts = Object.fromEntries(
+  componentCategories.map((category) => [
+    category.id,
+    componentCatalog.filter((component) => component.category === category.id)
+      .length,
+  ]),
+) as Readonly<Record<ComponentCategoryId, number>>;
+
+function selectCategory(category: CategoryFilter) {
+  activeCategory.value = category;
+}
+
+function clearFilters() {
+  searchQuery.value = "";
+  activeCategory.value = "all";
+}
+</script>
+
+<template>
+  <div class="mx-auto grid w-full max-w-7xl gap-6">
+    <header
+      class="overflow-hidden rounded-2xl border bg-card text-card-foreground"
+    >
+      <div
+        class="grid gap-6 p-6 lg:grid-cols-[minmax(0,1fr)_minmax(24rem,0.72fr)] lg:p-8"
+      >
+        <div class="max-w-2xl">
+          <div
+            class="mb-4 flex size-11 items-center justify-center rounded-xl bg-primary text-primary-foreground"
+          >
+            <BlocksIcon class="size-5" />
+          </div>
+          <p
+            class="text-xs font-semibold tracking-[0.18em] text-muted-foreground uppercase"
+          >
+            Windy UI Registry
+          </p>
+          <h1 class="mt-2 text-3xl font-semibold tracking-tight">组件总览</h1>
+          <p class="mt-3 max-w-xl text-sm leading-6 text-muted-foreground">
+            在真实主题、间距和交互上下文中检查 Web 基础组件。每个示例均直接引用
+            <code class="rounded bg-muted px-1 py-0.5">components/ui</code>
+            中的封装。
+          </p>
+        </div>
+
+        <div class="grid content-start gap-2 rounded-xl border bg-muted/20 p-4">
+          <div class="flex items-center justify-between gap-4 border-b pb-3">
+            <span class="text-sm font-medium">注册清单</span>
+            <code class="text-xs text-muted-foreground">
+              {{ componentCatalog.length }} 组件族 ·
+              {{ componentCategories.length }} 类
+            </code>
+          </div>
+          <div
+            v-for="category in componentCategories"
+            :key="category.id"
+            class="grid grid-cols-[6rem_1fr_auto] items-center gap-3 py-1 text-xs"
+          >
+            <code class="text-muted-foreground">{{ category.id }}</code>
+            <span>{{ category.label }}</span>
+            <span class="tabular-nums text-muted-foreground">
+              {{ categoryCounts[category.id] }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <section
+      aria-label="组件筛选"
+      class="sticky top-0 z-10 rounded-xl border bg-background/95 p-3 shadow-sm backdrop-blur"
+    >
+      <div
+        class="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between"
+      >
+        <div class="relative w-full xl:max-w-sm">
+          <SearchIcon
+            class="pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground"
+          />
+          <Input
+            v-model="searchQuery"
+            type="search"
+            aria-label="搜索组件"
+            placeholder="搜索名称、用途或导出路径"
+            class="pl-8"
+          />
+        </div>
+        <div class="flex flex-wrap gap-2" aria-label="按分类筛选">
+          <Button
+            size="sm"
+            :variant="activeCategory === 'all' ? 'default' : 'outline'"
+            data-category-id="all"
+            @click="selectCategory('all')"
+          >
+            全部
+            <span class="tabular-nums opacity-70">{{
+              componentCatalog.length
+            }}</span>
+          </Button>
+          <Button
+            v-for="category in componentCategories"
+            :key="category.id"
+            size="sm"
+            :variant="activeCategory === category.id ? 'default' : 'outline'"
+            :data-category-id="category.id"
+            @click="selectCategory(category.id)"
+          >
+            {{ category.label }}
+            <span class="tabular-nums opacity-70">{{
+              categoryCounts[category.id]
+            }}</span>
+          </Button>
+        </div>
+      </div>
+      <p class="mt-2 text-xs text-muted-foreground" aria-live="polite">
+        当前显示 {{ visibleComponents.length }} /
+        {{ componentCatalog.length }} 个组件族
+      </p>
+    </section>
+
+    <template v-if="visibleComponents.length">
+      <section
+        v-for="category in visibleCategories"
+        :key="category.id"
+        :aria-labelledby="`category-${category.id}`"
+        class="grid gap-4"
+      >
+        <header
+          class="flex flex-wrap items-end justify-between gap-2 border-b pb-3"
+        >
+          <div>
+            <p class="text-xs font-medium text-muted-foreground">
+              {{ category.id }}
+            </p>
+            <h2
+              :id="`category-${category.id}`"
+              class="mt-1 text-xl font-semibold"
+            >
+              {{ category.label }}
+            </h2>
+          </div>
+          <p class="text-sm text-muted-foreground">
+            {{ category.description }}
+          </p>
+        </header>
+
+        <div class="grid items-start gap-4 lg:grid-cols-2">
+          <FoundationComponentShowcases
+            v-if="category.id === 'foundation'"
+            :visible-ids="visibleIds"
+          />
+          <NavigationComponentShowcases
+            v-else-if="category.id === 'navigation'"
+            :visible-ids="visibleIds"
+          />
+          <FeedbackComponentShowcases
+            v-else-if="category.id === 'feedback'"
+            :visible-ids="visibleIds"
+          />
+          <DataComponentShowcases
+            v-else-if="category.id === 'data'"
+            :visible-ids="visibleIds"
+          />
+          <ProjectComponentShowcases v-else :items="visibleProjectComponents" />
+        </div>
+      </section>
+    </template>
+
+    <section
+      v-else
+      class="grid min-h-64 place-items-center rounded-xl border border-dashed p-8 text-center"
+    >
+      <div>
+        <p class="font-medium">没有匹配的组件</p>
+        <p class="mt-2 text-sm text-muted-foreground">
+          调整关键词或清除分类后重试。
+        </p>
+        <Button variant="outline" class="mt-4" @click="clearFilters">
+          <XIcon />清除筛选
+        </Button>
+      </div>
+    </section>
+  </div>
+</template>

package/template/apps/web/src/router/index.ts

@@ -29,6 +29,7 @@ import SystemResourceRoutePage from "@/pages/system/SystemResourceRoutePage.vue"
 import GlobalSettingsPage from "@/pages/settings/GlobalSettingsPage.vue";
 // @windy-module system.settings end
 import PersonalSettingsPage from "@/pages/profile/PersonalSettingsPage.vue";
+import UiComponentPage from "@/pages/ui/UiComponentPage.vue";
 // @windy-module system.configuration begin
 import ModuleConfigurationPage from "@/pages/configuration/ModuleConfigurationPage.vue";
 // @windy-module system.configuration end
@@ -84,6 +85,7 @@ const platformAdminPageComponents: Partial<
 > = {
   resource: SystemResourceRoutePage,
   profile: PersonalSettingsPage,
+  "ui-components": UiComponentPage,
   // @windy-module system.settings begin
   settings: GlobalSettingsPage,
   // @windy-module system.settings end

package/template/apps/web/src/router/manifest-routes.webtest.ts

@@ -47,6 +47,7 @@ describe("Manifest 菜单与 Router 契约", () => {
     expect(definitions.some(({ path }) => path === "/admin/profile")).toBe(
       true,
     );
+    expect(definitions.some(({ path }) => path === "/ui/component")).toBe(true);
     expect(definitions.some(({ path }) => path === "/admin/work-orders")).toBe(
       false,
     );

package/template/apps/web/src/router/platform-admin-route-bindings.ts

@@ -8,7 +8,8 @@ export type PlatformAdminPageKey =
   | "notification"
   | "operations"
   | "ai-runtime"
-  | "configuration";
+  | "configuration"
+  | "ui-components";
 
 export interface PlatformAdminRouteBinding {
   readonly routeKey: string;
@@ -37,6 +38,7 @@ export const platformAdminRouteBindings: readonly PlatformAdminRouteBinding[] =
       resourceKey: "dictionaries",
     },
     { routeKey: "system.feature", page: "resource", resourceKey: "features" },
+    { routeKey: "system.ui-components", page: "ui-components" },
     // @windy-module system.license begin
     {
       routeKey: "system.license",

package/template/apps/web/src/services/license-api.ts

@@ -30,6 +30,34 @@ interface LicenseInstallResponse {
   snapshot: PlatformLicenseSnapshot;
 }
 
+export type LicensePairingSessionStatus =
+  | "waiting"
+  | "delivered"
+  | "expired"
+  | "locked"
+  | "consumed";
+
+export interface LicensePairingSession {
+  id: string;
+  token: string;
+  nonce: string;
+  productCode: string;
+  machineCode: string;
+  expiresAt: string;
+  qrPayload: string;
+  status: "waiting";
+}
+
+export interface LicensePairingSessionSnapshot {
+  id: string;
+  status: LicensePairingSessionStatus;
+  expiresAt: string;
+  license?: {
+    licenseVersion: { key: string; name: string };
+    expiresAt: string;
+  };
+}
+
 export function loadPlatformLicense(): Promise<PlatformLicenseSnapshot> {
   return apiRequest<PlatformLicenseSnapshot>("/license/runtime");
 }
@@ -51,3 +79,35 @@ export function installPlatformActivationCode(
     body: JSON.stringify({ activationCode }),
   });
 }
+
+export function createPlatformLicensePairingSession(
+  callbackOrigin: string,
+): Promise<LicensePairingSession> {
+  return apiRequest<LicensePairingSession>(
+    "/license/runtime/pairing/sessions",
+    { method: "POST", body: JSON.stringify({ callbackOrigin }) },
+  );
+}
+
+export function loadPlatformLicensePairingSession(
+  sessionId: string,
+): Promise<LicensePairingSessionSnapshot> {
+  return apiRequest<LicensePairingSessionSnapshot>(
+    `/license/runtime/pairing/sessions/${encodeURIComponent(sessionId)}`,
+    undefined,
+    { suppressFailureHandler: true },
+  );
+}
+
+export function confirmPlatformLicensePairing(
+  sessionId: string,
+  pairingCode: string,
+): Promise<LicenseInstallResponse> {
+  return apiRequest<LicenseInstallResponse>(
+    `/license/runtime/pairing/sessions/${encodeURIComponent(sessionId)}/confirm`,
+    {
+      method: "POST",
+      body: JSON.stringify({ pairingCode }),
+    },
+  );
+}

package/template/apps/web/src/style.webtest.ts

@@ -1,12 +1,11 @@
-import { describe, expect, test } from "vitest";
-// @ts-expect-error Vitest runs this contract test in Node; the browser bundle omits Node types.
-import { readFileSync } from "node:fs";
-// @ts-expect-error Vitest runs this contract test in Node; the browser bundle omits Node types.
-import { resolve } from "node:path";
+import { describe, expect, test, vi } from "vitest";
 
 declare const process: { cwd(): string };
 
-const styles = readFileSync(resolve(process.cwd(), "src/style.css"), "utf8");
+const { readFileSync } = await vi.importActual<{
+  readFileSync(path: string, encoding: "utf8"): string;
+}>("node:fs");
+const styles = readFileSync(`${process.cwd()}/src/style.css`, "utf8");
 
 describe("全局页面背景", () => {
   test("html、body 与应用根节点共同使用主题背景，避免深色滚动露白", () => {