willa-workspace 0.0.3-alpha.2739b3e

package/example/src/docs/BorderBeam.demo.tsx

@@ -0,0 +1,261 @@
+import { Badge } from "willa/Badge";
+import { BorderBeam } from "willa/BorderBeam";
+import { Button } from "willa/Button";
+import { Card } from "willa/Card";
+import { Group } from "willa/Group";
+import { Panel } from "willa/Panel";
+import "willa/Badge.css";
+import "willa/BorderBeam.css";
+import "willa/Button.css";
+import "willa/Card.css";
+import "willa/Group.css";
+import "willa/Panel.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+export default defineDoc({
+  id: "border-beam",
+  name: "BorderBeam",
+  displayName: "边框流光",
+  category: "layout",
+  packageName: "willa/BorderBeam",
+  description:
+    "为任意容器增加持续流动的装饰性边框高亮，适合强调重点卡片、AI 模块和行动区。",
+  imports: [
+    { name: "BorderBeam", from: "willa/BorderBeam" },
+    { name: "Card", from: "willa/Card" },
+    { name: "Panel", from: "willa/Panel" },
+    { name: "Group", from: "willa/Group" },
+    { name: "Button", from: "willa/Button" },
+    { name: "Badge", from: "willa/Badge" },
+  ],
+  css: "willa/BorderBeam.css",
+  demo: {
+    name: "BorderBeam",
+    component: BorderBeam,
+    props: {
+      radius: 8,
+    },
+    children: [
+      {
+        name: "Card",
+        component: Card,
+        props: {
+          title: "智能分析完成",
+          description: "流光边框用于提升视觉关注度，不承载业务状态语义。",
+        },
+        children: "已生成 12 条质量建议，可进入报告查看详情。",
+      },
+    ],
+  },
+  code: `
+    import { BorderBeam } from "willa/BorderBeam";
+    import { Card } from "willa/Card";
+    import "willa/BorderBeam.css";
+    import "willa/Card.css";
+
+    <BorderBeam radius={8}>
+      <Card
+        title="智能分析完成"
+        description="流光边框用于提升视觉关注度，不承载业务状态语义。"
+      >
+        已生成 12 条质量建议，可进入报告查看详情。
+      </Card>
+    </BorderBeam>;
+  `,
+  sections: [
+    {
+      title: "基础用法",
+      code: `
+        <BorderBeam>
+          <Panel
+            title="重点工作区"
+            description="适合用于登录面板、AI 摘要、推荐卡片或主要 CTA 区域。"
+            actions={<Button size="sm">查看</Button>}
+          >
+            <Group gap="xs">
+              <Badge tone="info">AI</Badge>
+              <Badge tone="success">已同步</Badge>
+              <Badge>核心区域</Badge>
+            </Group>
+          </Panel>
+        </BorderBeam>;
+      `,
+      content: (
+        <BorderBeam>
+          <Panel
+            title="重点工作区"
+            description="适合用于登录面板、AI 摘要、推荐卡片或主要 CTA 区域。"
+            actions={<Button size="sm">查看</Button>}
+          >
+            <Group gap="xs">
+              <Badge tone="info">AI</Badge>
+              <Badge tone="success">已同步</Badge>
+              <Badge>核心区域</Badge>
+            </Group>
+          </Panel>
+        </BorderBeam>
+      ),
+    },
+    {
+      title: "渐变色",
+      code: `
+        <Group direction="column" align="stretch" gap="md">
+          <BorderBeam
+            color={[
+              { color: "#2563eb", percent: 0 },
+              { color: "#06b6d4", percent: 52 },
+              { color: "#22c55e", percent: 100 },
+            ]}
+            duration={4.2}
+          >
+            <Card title="Ocean" description="蓝绿渐变适合数据面板和云工具。">
+              percent 使用 0 到 100 的输入范围。
+            </Card>
+          </BorderBeam>
+
+          <BorderBeam
+            color={[
+              { color: "#8b5cf6", percent: 0 },
+              { color: "#ec4899", percent: 48 },
+              { color: "#f59e0b", percent: 100 },
+            ]}
+            duration={5}
+          >
+            <Card title="Sunset" description="暖色渐变适合活动入口和推荐卡片。">
+              流光是装饰效果，不替代业务状态或校验边框。
+            </Card>
+          </BorderBeam>
+        </Group>;
+      `,
+      content: (
+        <Group direction="column" align="stretch" gap="md">
+          <BorderBeam
+            color={[
+              { color: "#2563eb", percent: 0 },
+              { color: "#06b6d4", percent: 52 },
+              { color: "#22c55e", percent: 100 },
+            ]}
+            duration={4.2}
+          >
+            <Card title="Ocean" description="蓝绿渐变适合数据面板和云工具。">
+              percent 使用 0 到 100 的输入范围。
+            </Card>
+          </BorderBeam>
+
+          <BorderBeam
+            color={[
+              { color: "#8b5cf6", percent: 0 },
+              { color: "#ec4899", percent: 48 },
+              { color: "#f59e0b", percent: 100 },
+            ]}
+            duration={5}
+          >
+            <Card title="Sunset" description="暖色渐变适合活动入口和推荐卡片。">
+              流光是装饰效果，不替代业务状态或校验边框。
+            </Card>
+          </BorderBeam>
+        </Group>
+      ),
+    },
+    {
+      title: "外扩和宽度",
+      code: `
+        <BorderBeam width={2} outset={3} radius={10} duration={3}>
+          <Panel variant="soft" title="贴近容器圆角">
+            可以通过 radius 和 outset 对齐实际容器的圆角与边缘位置。
+          </Panel>
+        </BorderBeam>;
+      `,
+      content: (
+        <BorderBeam width={2} outset={3} radius={10} duration={3}>
+          <Panel variant="soft" title="贴近容器圆角">
+            可以通过 radius 和 outset 对齐实际容器的圆角与边缘位置。
+          </Panel>
+        </BorderBeam>
+      ),
+    },
+    {
+      title: "禁用效果",
+      code: `
+        <BorderBeam disabled>
+          <Card title="静态内容" description="需要降低视觉干扰时可以关闭流光。">
+            用户开启减少动态效果时，组件也会自动隐藏流光层。
+          </Card>
+        </BorderBeam>;
+      `,
+      content: (
+        <BorderBeam disabled>
+          <Card title="静态内容" description="需要降低视觉干扰时可以关闭流光。">
+            用户开启减少动态效果时，组件也会自动隐藏流光层。
+          </Card>
+        </BorderBeam>
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "children",
+      type: "ReactNode",
+      description: "被装饰的内容，通常是 Card、Panel 或其它容器组件。",
+    },
+    {
+      name: "as",
+      type: "ElementType",
+      defaultValue: '"div"',
+      description:
+        "根节点元素的轻量 escape hatch。组件属性仍按 div 透传，不提供完整多态组件类型收敛。",
+    },
+    {
+      name: "color",
+      type: "string | Array<{ color: string; percent: number }>",
+      description: "流光颜色。传数组时 percent 使用 0 到 100 的输入范围。",
+    },
+    {
+      name: "width",
+      type: "number | string",
+      defaultValue: "1",
+      description: "流光边框宽度。number 按 px 处理。",
+    },
+    {
+      name: "outset",
+      type: "number | string",
+      defaultValue: "0",
+      description: "流光层相对容器边缘的外扩距离。number 按 px 处理。",
+    },
+    {
+      name: "radius",
+      type: "number | string",
+      defaultValue: "8",
+      description: "流光层圆角。number 按 px 处理。",
+    },
+    {
+      name: "duration",
+      type: "number | string",
+      defaultValue: "5",
+      description: "动画周期。number 按秒处理。",
+    },
+    {
+      name: "delay",
+      type: "number | string",
+      defaultValue: "0",
+      description: "动画延迟。number 按秒处理。",
+    },
+    {
+      name: "disabled",
+      type: "boolean",
+      defaultValue: "false",
+      description: "是否关闭流光效果。",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "自定义 className。",
+    },
+    {
+      name: "style",
+      type: "CSSProperties",
+      description: "自定义内联样式。",
+    },
+  ],
+});

package/example/src/docs/Breadcrumb.demo.tsx

@@ -0,0 +1,194 @@
+import { HomeIcon, ReaderIcon } from "@radix-ui/react-icons";
+
+import { Breadcrumb, type BreadcrumbItem } from "willa/Breadcrumb";
+import "willa/Breadcrumb.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const basicItems: Array<BreadcrumbItem> = [
+  { label: "首页", href: "#/" },
+  { label: "基础组件", href: "#/button" },
+  { label: "Breadcrumb" },
+];
+
+const iconItems: Array<BreadcrumbItem> = [
+  { label: "Willa", href: "#/", icon: <HomeIcon /> },
+  { label: "文档", href: "#/mdx", icon: <ReaderIcon /> },
+  { label: "导航层级" },
+];
+
+const previewStyle = {
+  width: "min(100%, 44rem)",
+  marginInline: "auto",
+} as const;
+
+export default defineDoc({
+  id: "breadcrumb",
+  name: "Breadcrumb",
+  packageName: "willa/Breadcrumb",
+  description: "用于展示页面层级、返回路径和当前位置的导航组件。",
+  imports: [{ name: "Breadcrumb", from: "willa/Breadcrumb" }],
+  css: "willa/Breadcrumb.css",
+  demo: {
+    name: "Breadcrumb",
+    component: Breadcrumb,
+    props: {
+      style: previewStyle,
+      items: basicItems,
+    },
+  },
+  code: `
+    import { Breadcrumb, type BreadcrumbItem } from "willa/Breadcrumb";
+    import "willa/Breadcrumb.css";
+
+    const items: Array<BreadcrumbItem> = [
+      { label: "首页", href: "#/" },
+      { label: "基础组件", href: "#/button" },
+      { label: "Breadcrumb" },
+    ];
+
+    <Breadcrumb items={items} />;
+  `,
+  sections: [
+    {
+      title: "带图标",
+      code: `
+        import { HomeIcon, ReaderIcon } from "@radix-ui/react-icons";
+        import { Breadcrumb, type BreadcrumbItem } from "willa/Breadcrumb";
+        import "willa/Breadcrumb.css";
+
+        const items: Array<BreadcrumbItem> = [
+          { label: "Willa", href: "#/", icon: <HomeIcon /> },
+          { label: "文档", href: "#/mdx", icon: <ReaderIcon /> },
+          { label: "导航层级" },
+        ];
+
+        <Breadcrumb items={items} />;
+      `,
+      content: (
+        <div style={previewStyle}>
+          <Breadcrumb items={iconItems} />
+        </div>
+      ),
+    },
+    {
+      title: "紧凑尺寸",
+      code: `
+        <Breadcrumb
+          size="sm"
+          items={[
+            { label: "项目", href: "#/" },
+            { label: "设置", href: "#/form" },
+            { label: "权限策略" },
+          ]}
+        />;
+      `,
+      content: (
+        <div style={previewStyle}>
+          <Breadcrumb
+            size="sm"
+            items={[
+              { label: "项目", href: "#/" },
+              { label: "设置", href: "#/form" },
+              { label: "权限策略" },
+            ]}
+          />
+        </div>
+      ),
+    },
+    {
+      title: "自定义分隔符",
+      code: `
+        <Breadcrumb
+          separator="/"
+          items={[
+            { label: "workspace", href: "#/" },
+            { label: "docs", href: "#/mdx" },
+            { label: "component.md" },
+          ]}
+        />;
+      `,
+      content: (
+        <div style={previewStyle}>
+          <Breadcrumb
+            separator="/"
+            items={[
+              { label: "workspace", href: "#/" },
+              { label: "docs", href: "#/mdx" },
+              { label: "component.md" },
+            ]}
+          />
+        </div>
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "items",
+      type: "Array<BreadcrumbItem>",
+      required: true,
+      description: "面包屑路径列表。",
+    },
+    {
+      name: "size",
+      type: '"sm" | "md"',
+      defaultValue: '"md"',
+      description: "尺寸，默认 md。",
+    },
+    {
+      name: "separator",
+      type: "ReactNode",
+      defaultValue: "<ChevronRightIcon />",
+      description: "分隔符，默认使用箭头图标。",
+    },
+    {
+      name: "BreadcrumbItem.label",
+      type: "ReactNode",
+      required: true,
+      group: "BreadcrumbItem",
+      description: "节点展示内容。",
+    },
+    {
+      name: "BreadcrumbItem.id",
+      type: "string | number",
+      group: "BreadcrumbItem",
+      description: "节点稳定标识，未传时使用数组下标。",
+    },
+    {
+      name: "BreadcrumbItem.href",
+      type: "string",
+      group: "BreadcrumbItem",
+      description: "节点链接。当前项不会渲染为链接。",
+    },
+    {
+      name: "BreadcrumbItem.target",
+      type: "string",
+      group: "BreadcrumbItem",
+      description: "链接打开目标。",
+    },
+    {
+      name: "BreadcrumbItem.rel",
+      type: "string",
+      group: "BreadcrumbItem",
+      description: "链接 rel 属性。",
+    },
+    {
+      name: "BreadcrumbItem.current",
+      type: "boolean",
+      group: "BreadcrumbItem",
+      description: "是否为当前页面。未传时默认最后一项为当前页。",
+    },
+    {
+      name: "BreadcrumbItem.icon",
+      type: "ReactNode",
+      group: "BreadcrumbItem",
+      description: "节点前置图标。",
+    },
+    {
+      name: "BreadcrumbItem.onClick",
+      type: "MouseEventHandler<HTMLButtonElement>",
+      group: "BreadcrumbItem",
+      description: "无 href 节点的点击回调，可接入自定义路由。",
+    },
+  ],
+});