create-windy 0.6.7 → 0.6.9

package/template/apps/web/src/pages/ui/UiComponentPage.webtest.ts

@@ -0,0 +1,94 @@
+import { afterEach, describe, expect, test } from "vitest";
+import { mount, type VueWrapper } from "@vue/test-utils";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { buildComponentCatalog, componentCatalog } from "./component-catalog";
+import UiComponentGallery from "./components/UiComponentGallery.vue";
+
+let wrapper: VueWrapper | undefined;
+
+afterEach(() => {
+  wrapper?.unmount();
+  wrapper = undefined;
+});
+
+describe("组件总览页", () => {
+  test("组件清单与 components/ui 实际目录保持一致", () => {
+    const componentDirectories = Object.keys(
+      import.meta.glob("../../components/ui/*/index.ts"),
+    )
+      .map((path) => path.split("/").at(-2))
+      .filter((name): name is string => Boolean(name))
+      .sort();
+
+    expect(componentCatalog.map(({ id }) => id).sort()).toEqual(
+      componentDirectories,
+    );
+  });
+
+  test("展示 components/ui 扫描到的全部组件族", () => {
+    wrapper = mountGallery();
+
+    expect(wrapper.findAll("[data-component-id]")).toHaveLength(
+      componentCatalog.length,
+    );
+    expect(
+      wrapper
+        .findAll("[data-component-id]")
+        .map((node) => node.attributes("data-component-id")),
+    ).toEqual(componentCatalog.map(({ id }) => id));
+  });
+
+  test("自动登记下游项目新增的组件入口与具名导出", () => {
+    const catalog = buildComponentCatalog({
+      "../../components/ui/button/index.ts": { Button: {} },
+      "../../components/ui/radio-group/index.ts": {
+        RadioGroup: {},
+        RadioGroupItem: {},
+      },
+      "../../components/ui/textarea/index.ts": { Textarea: {} },
+    });
+
+    expect(
+      catalog.map(({ id, category, exports }) => ({
+        id,
+        category,
+        exports,
+      })),
+    ).toEqual([
+      { id: "button", category: "foundation", exports: ["Button"] },
+      {
+        id: "radio-group",
+        category: "project",
+        exports: ["RadioGroup", "RadioGroupItem"],
+      },
+      { id: "textarea", category: "project", exports: ["Textarea"] },
+    ]);
+  });
+
+  test("支持按关键词和分类筛选", async () => {
+    wrapper = mountGallery();
+
+    await wrapper.get('input[aria-label="搜索组件"]').setValue("消息通知");
+    expect(wrapper.findAll("[data-component-id]")).toHaveLength(1);
+    expect(
+      wrapper.get("[data-component-id]").attributes("data-component-id"),
+    ).toBe("sonner");
+
+    await wrapper.get('input[aria-label="搜索组件"]').setValue("");
+    await wrapper.get('[data-category-id="foundation"]').trigger("click");
+    expect(wrapper.findAll("[data-component-id]")).toHaveLength(7);
+    expect(wrapper.text()).toContain(
+      `当前显示 7 / ${componentCatalog.length} 个组件族`,
+    );
+  });
+});
+
+function mountGallery() {
+  return mount(
+    {
+      components: { TooltipProvider, UiComponentGallery },
+      template: "<TooltipProvider><UiComponentGallery /></TooltipProvider>",
+    },
+    { attachTo: document.body },
+  );
+}

package/template/apps/web/src/pages/ui/component-catalog.ts

@@ -0,0 +1,248 @@
+export type ComponentCategoryId =
+  | "foundation"
+  | "navigation"
+  | "feedback"
+  | "data"
+  | "project";
+
+export type ComponentId = string;
+
+export interface ComponentCategory {
+  id: ComponentCategoryId;
+  label: string;
+  description: string;
+}
+
+export interface ComponentCatalogItem {
+  id: ComponentId;
+  name: string;
+  label: string;
+  description: string;
+  category: ComponentCategoryId;
+  exportPath: string;
+  exports: readonly string[];
+  keywords: readonly string[];
+}
+
+export const componentCategories: readonly ComponentCategory[] = [
+  {
+    id: "foundation",
+    label: "基础交互",
+    description: "输入、选择、状态与内容骨架。",
+  },
+  {
+    id: "navigation",
+    label: "导航组织",
+    description: "路径、页签、菜单与应用侧栏。",
+  },
+  {
+    id: "feedback",
+    label: "反馈浮层",
+    description: "提示、确认、抽屉与即时反馈。",
+  },
+  {
+    id: "data",
+    label: "数据呈现",
+    description: "卡片、选项与结构化表格。",
+  },
+  {
+    id: "project",
+    label: "项目扩展",
+    description: "当前项目在 components/ui 中新增的组件封装。",
+  },
+];
+
+const knownComponentCatalog: readonly ComponentCatalogItem[] = [
+  item("button", "Button", "按钮", "触发主要、次要与危险操作。", "foundation", [
+    "操作",
+    "动作",
+  ]),
+  item("badge", "Badge", "徽标", "标记状态、类别与轻量属性。", "foundation", [
+    "标签",
+    "状态",
+  ]),
+  item("input", "Input", "输入框", "采集单行文本与搜索条件。", "foundation", [
+    "表单",
+    "搜索",
+  ]),
+  item(
+    "checkbox",
+    "Checkbox",
+    "复选框",
+    "选择一个或多个独立选项。",
+    "foundation",
+    ["表单", "多选"],
+  ),
+  item("switch", "Switch", "开关", "即时切换布尔配置状态。", "foundation", [
+    "表单",
+    "启用",
+  ]),
+  item(
+    "separator",
+    "Separator",
+    "分隔线",
+    "区分同一表面中的内容层级。",
+    "foundation",
+    ["布局", "边界"],
+  ),
+  item(
+    "skeleton",
+    "Skeleton",
+    "骨架屏",
+    "数据加载期间保留内容结构。",
+    "foundation",
+    ["加载", "占位"],
+  ),
+  item(
+    "breadcrumb",
+    "Breadcrumb",
+    "面包屑",
+    "表达当前位置与上级路径。",
+    "navigation",
+    ["路径", "层级"],
+  ),
+  item("tabs", "Tabs", "页签", "在同一页面切换并列内容。", "navigation", [
+    "切换",
+    "分组",
+  ]),
+  item(
+    "dropdown-menu",
+    "DropdownMenu",
+    "下拉菜单",
+    "承载紧凑的操作与选项集合。",
+    "navigation",
+    ["菜单", "操作"],
+  ),
+  item(
+    "sidebar",
+    "Sidebar",
+    "侧边栏",
+    "组织应用级导航与折叠状态。",
+    "navigation",
+    ["导航", "应用壳"],
+  ),
+  item("alert", "Alert", "提示条", "在内容流中呈现重要信息。", "feedback", [
+    "警告",
+    "信息",
+  ]),
+  item("dialog", "Dialog", "对话框", "聚焦需要确认或补充的任务。", "feedback", [
+    "弹窗",
+    "确认",
+  ]),
+  item("sheet", "Sheet", "抽屉", "在不中断上下文时展示侧向详情。", "feedback", [
+    "侧滑",
+    "详情",
+  ]),
+  item(
+    "sonner",
+    "Sonner",
+    "消息通知",
+    "反馈短时、非阻塞的操作结果。",
+    "feedback",
+    ["toast", "提示"],
+  ),
+  item(
+    "tooltip",
+    "Tooltip",
+    "文字提示",
+    "解释图标按钮或陌生控件。",
+    "feedback",
+    ["悬浮", "说明"],
+  ),
+  item("card", "Card", "卡片", "组合标题、内容与局部操作。", "data", [
+    "容器",
+    "面板",
+  ]),
+  item("select", "Select", "选择器", "从有限选项中选择一个值。", "data", [
+    "表单",
+    "单选",
+  ]),
+  item("table", "Table", "表格", "呈现可比较的结构化记录。", "data", [
+    "列表",
+    "数据",
+  ]),
+];
+
+type DiscoveredComponentModules = Readonly<
+  Record<string, Readonly<Record<string, unknown>>>
+>;
+
+const discoveredComponentModules = import.meta.glob<
+  Readonly<Record<string, unknown>>
+>("../../components/ui/*/index.ts", { eager: true });
+
+export const componentCatalog = buildComponentCatalog(
+  discoveredComponentModules,
+);
+
+export const componentCatalogById = Object.fromEntries(
+  componentCatalog.map((component) => [component.id, component]),
+) as Readonly<Record<ComponentId, ComponentCatalogItem>>;
+
+function item(
+  id: ComponentId,
+  name: string,
+  label: string,
+  description: string,
+  category: ComponentCategoryId,
+  keywords: readonly string[],
+): ComponentCatalogItem {
+  return {
+    id,
+    name,
+    label,
+    description,
+    category,
+    exportPath: `@/components/ui/${id}`,
+    exports: [name],
+    keywords,
+  };
+}
+
+export function buildComponentCatalog(
+  modules: DiscoveredComponentModules,
+): readonly ComponentCatalogItem[] {
+  const knownById = new Map(
+    knownComponentCatalog.map((component) => [component.id, component]),
+  );
+  return Object.entries(modules)
+    .map(([path, module]) => {
+      const id = componentIdFromPath(path);
+      const exports = Object.keys(module).sort();
+      const known = knownById.get(id);
+      if (known) return { ...known, exports };
+      return {
+        id,
+        name: exports.join(" · ") || id,
+        label: id,
+        description: exports.length
+          ? `项目封装，导出 ${exports.join("、")}。`
+          : "项目封装，当前入口未声明具名导出。",
+        category: "project",
+        exportPath: `@/components/ui/${id}`,
+        exports,
+        keywords: ["项目", "扩展", ...exports],
+      } satisfies ComponentCatalogItem;
+    })
+    .sort(compareCatalogItems);
+}
+
+function componentIdFromPath(path: string) {
+  const id = path.split("/").at(-2);
+  if (!id) throw new Error(`无法识别组件入口：${path}`);
+  return id;
+}
+
+function compareCatalogItems(
+  left: ComponentCatalogItem,
+  right: ComponentCatalogItem,
+) {
+  const leftIndex = knownComponentCatalog.findIndex(({ id }) => id === left.id);
+  const rightIndex = knownComponentCatalog.findIndex(
+    ({ id }) => id === right.id,
+  );
+  if (leftIndex >= 0 && rightIndex >= 0) return leftIndex - rightIndex;
+  if (leftIndex >= 0) return -1;
+  if (rightIndex >= 0) return 1;
+  return left.id.localeCompare(right.id);
+}

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

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { ComponentCatalogItem } from "../component-catalog";
+
+defineProps<{
+  item: ComponentCatalogItem;
+}>();
+</script>
+
+<template>
+  <article
+    :id="`component-${item.id}`"
+    :data-component-id="item.id"
+    class="component-preview overflow-hidden rounded-xl border bg-card text-card-foreground"
+  >
+    <header class="border-b px-4 py-3">
+      <div class="flex flex-wrap items-baseline justify-between gap-2">
+        <div class="flex items-baseline gap-2">
+          <h3 class="font-semibold">{{ item.label }}</h3>
+          <code class="text-xs text-muted-foreground">{{ item.name }}</code>
+        </div>
+        <code class="text-[11px] text-muted-foreground">{{
+          item.exportPath
+        }}</code>
+      </div>
+      <p class="mt-1 text-sm leading-5 text-muted-foreground">
+        {{ item.description }}
+      </p>
+    </header>
+    <div class="preview-body min-h-32 bg-muted/20 p-5">
+      <slot />
+    </div>
+  </article>
+</template>
+
+<style scoped>
+.component-preview {
+  container-type: inline-size;
+}
+
+.preview-body {
+  display: flex;
+  align-items: center;
+}
+
+@container (max-width: 28rem) {
+  .preview-body {
+    align-items: stretch;
+  }
+}
+</style>

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

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { ArrowUpRightIcon } from "@lucide/vue";
+import { shallowRef } from "vue";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { componentCatalogById, type ComponentId } from "../component-catalog";
+import ComponentPreviewCard from "./ComponentPreviewCard.vue";
+
+const props = defineProps<{
+  visibleIds: readonly ComponentId[];
+}>();
+
+const density = shallowRef("comfortable");
+
+function isVisible(id: ComponentId) {
+  return props.visibleIds.includes(id);
+}
+</script>
+
+<template>
+  <ComponentPreviewCard
+    v-if="isVisible('card')"
+    :item="componentCatalogById.card"
+  >
+    <Card class="w-full max-w-sm">
+      <CardHeader>
+        <CardTitle>组件健康度</CardTitle>
+        <CardDescription>最近一次静态检查已通过。</CardDescription>
+        <CardAction><Badge variant="outline">稳定</Badge></CardAction>
+      </CardHeader>
+      <CardContent>
+        <p class="text-2xl font-semibold tabular-nums">19 / 19</p>
+        <p class="mt-1 text-xs text-muted-foreground">组件族已登记</p>
+      </CardContent>
+      <CardFooter class="justify-end">
+        <Button variant="ghost" size="sm">查看记录<ArrowUpRightIcon /></Button>
+      </CardFooter>
+    </Card>
+  </ComponentPreviewCard>
+
+  <ComponentPreviewCard
+    v-if="isVisible('select')"
+    :item="componentCatalogById.select"
+  >
+    <div class="grid gap-2 text-sm">
+      <label class="font-medium" for="component-density">预览密度</label>
+      <Select v-model="density">
+        <SelectTrigger id="component-density" class="w-52">
+          <SelectValue placeholder="选择密度" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>常用</SelectLabel>
+            <SelectItem value="comfortable">舒适</SelectItem>
+            <SelectItem value="compact">紧凑</SelectItem>
+          </SelectGroup>
+          <SelectSeparator />
+          <SelectItem value="large">宽松</SelectItem>
+        </SelectContent>
+      </Select>
+      <span class="text-xs text-muted-foreground">当前值：{{ density }}</span>
+    </div>
+  </ComponentPreviewCard>
+
+  <ComponentPreviewCard
+    v-if="isVisible('table')"
+    :item="componentCatalogById.table"
+  >
+    <Table>
+      <TableCaption>基础组件登记状态</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead>组件</TableHead>
+          <TableHead>分类</TableHead>
+          <TableHead class="text-right">状态</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell class="font-medium">Button</TableCell>
+          <TableCell>基础交互</TableCell>
+          <TableCell class="text-right"
+            ><Badge variant="outline">稳定</Badge></TableCell
+          >
+        </TableRow>
+        <TableRow>
+          <TableCell class="font-medium">Dialog</TableCell>
+          <TableCell>反馈浮层</TableCell>
+          <TableCell class="text-right"
+            ><Badge variant="outline">稳定</Badge></TableCell
+          >
+        </TableRow>
+        <TableRow>
+          <TableCell class="font-medium">Table</TableCell>
+          <TableCell>数据呈现</TableCell>
+          <TableCell class="text-right"
+            ><Badge variant="outline">稳定</Badge></TableCell
+          >
+        </TableRow>
+      </TableBody>
+    </Table>
+  </ComponentPreviewCard>
+</template>

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

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { BellRingIcon, InfoIcon, TriangleAlertIcon } from "@lucide/vue";
+import {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertTitle,
+} from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useAppToast } from "@/composables/useAppToast";
+import { componentCatalogById, type ComponentId } from "../component-catalog";
+import ComponentPreviewCard from "./ComponentPreviewCard.vue";
+
+const props = defineProps<{
+  visibleIds: readonly ComponentId[];
+}>();
+
+const toast = useAppToast();
+
+function isVisible(id: ComponentId) {
+  return props.visibleIds.includes(id);
+}
+</script>
+
+<template>
+  <ComponentPreviewCard
+    v-if="isVisible('alert')"
+    :item="componentCatalogById.alert"
+  >
+    <div class="grid w-full gap-3">
+      <Alert>
+        <InfoIcon />
+        <AlertTitle>组件目录已同步</AlertTitle>
+        <AlertDescription>当前页面覆盖 19 个基础组件族。</AlertDescription>
+        <AlertAction>
+          <Button variant="ghost" size="xs">查看</Button>
+        </AlertAction>
+      </Alert>
+      <Alert variant="destructive">
+        <TriangleAlertIcon />
+        <AlertTitle>示例加载失败</AlertTitle>
+        <AlertDescription>请检查组件导出与依赖是否完整。</AlertDescription>
+      </Alert>
+    </div>
+  </ComponentPreviewCard>
+
+  <ComponentPreviewCard
+    v-if="isVisible('dialog')"
+    :item="componentCatalogById.dialog"
+  >
+    <Dialog>
+      <DialogTrigger as-child>
+        <Button variant="outline">打开确认对话框</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>发布组件变更？</DialogTitle>
+          <DialogDescription>
+            发布后，使用该组件的页面会在下次构建时获得更新。
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose as-child>
+            <Button variant="outline">取消</Button>
+          </DialogClose>
+          <DialogClose as-child>
+            <Button>确认发布</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  </ComponentPreviewCard>
+
+  <ComponentPreviewCard
+    v-if="isVisible('sheet')"
+    :item="componentCatalogById.sheet"
+  >
+    <Sheet>
+      <SheetTrigger as-child>
+        <Button variant="outline">查看组件详情</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Button 组件</SheetTitle>
+          <SheetDescription>
+            用于触发明确操作，支持多种语义和尺寸。
+          </SheetDescription>
+        </SheetHeader>
+        <div class="grid gap-3 px-4 text-sm">
+          <div class="rounded-lg border p-3">
+            <span class="text-muted-foreground">导出路径</span>
+            <code class="mt-1 block">@/components/ui/button</code>
+          </div>
+        </div>
+        <SheetFooter>
+          <SheetClose as-child>
+            <Button>完成</Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  </ComponentPreviewCard>
+
+  <ComponentPreviewCard
+    v-if="isVisible('sonner')"
+    :item="componentCatalogById.sonner"
+  >
+    <Button
+      variant="outline"
+      @click="
+        toast.success('组件状态已更新', {
+          description: 'Toast 使用全局 Toaster 呈现。',
+        })
+      "
+    >
+      <BellRingIcon />触发消息通知
+    </Button>
+  </ComponentPreviewCard>
+
+  <ComponentPreviewCard
+    v-if="isVisible('tooltip')"
+    :item="componentCatalogById.tooltip"
+  >
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <Button variant="outline" size="icon" aria-label="查看组件提示">
+          <InfoIcon />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>这是一个零延迟文字提示</TooltipContent>
+    </Tooltip>
+  </ComponentPreviewCard>
+</template>