willa-workspace 0.0.3-alpha.2739b3e

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

@@ -0,0 +1,183 @@
+import { Badge } from "willa/Badge";
+import { Button } from "willa/Button";
+import { Group } from "willa/Group";
+import { Panel } from "willa/Panel";
+import { SidebarLayout } from "willa/SidebarLayout";
+import { Stack } from "willa/Stack";
+import "willa/Badge.css";
+import "willa/Button.css";
+import "willa/Group.css";
+import "willa/Panel.css";
+import "willa/SidebarLayout.css";
+import "willa/Stack.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const navItemStyle = {
+  padding: "0.55rem 0.7rem",
+  borderRadius: "0.55rem",
+  background: "var(--willa-panel-soft-bg)",
+  fontWeight: 600,
+} as const;
+
+export default defineDoc({
+  id: "sidebar-layout",
+  name: "SidebarLayout",
+  category: "layout",
+  packageName: "willa/SidebarLayout",
+  description: "用于设置页、文档页和资源管理中常见的侧栏加主内容布局。",
+  imports: [
+    { name: "SidebarLayout", from: "willa/SidebarLayout" },
+    { name: "Panel", from: "willa/Panel" },
+    { name: "Stack", from: "willa/Stack" },
+    { name: "Group", from: "willa/Group" },
+    { name: "Button", from: "willa/Button" },
+    { name: "Badge", from: "willa/Badge" },
+  ],
+  css: "willa/SidebarLayout.css",
+  demo: {
+    name: "SidebarLayout",
+    component: SidebarLayout,
+    props: {
+      sidebar: "导航",
+      sidebarWidth: "12rem",
+    },
+    children: "主内容",
+  },
+  code: `
+    import { SidebarLayout } from "willa/SidebarLayout";
+    import "willa/SidebarLayout.css";
+
+    <SidebarLayout sidebar="导航" sidebarWidth="12rem">
+      主内容
+    </SidebarLayout>;
+  `,
+  sections: [
+    {
+      title: "文档侧栏",
+      code: `
+        <SidebarLayout
+          sidebarWidth="13rem"
+          sidebar={
+            <Stack gap="xs">
+              <strong>组件分类</strong>
+              <span style={{ padding: "0.55rem 0.7rem", borderRadius: "0.55rem", background: "var(--willa-panel-soft-bg)", fontWeight: 600 }}>
+                布局组件
+              </span>
+              <span style={{ padding: "0.55rem 0.7rem", borderRadius: "0.55rem", background: "var(--willa-panel-soft-bg)", fontWeight: 600 }}>
+                表单组件
+              </span>
+            </Stack>
+          }
+        >
+          <Panel
+            title="布局组件"
+            description="用于页面骨架、分栏和区域排列。"
+            actions={<Badge tone="info">layout</Badge>}
+          >
+            <Group gap="sm">
+              <Button size="sm">查看指南</Button>
+              <Button size="sm" variant="ghost">
+                查看源码
+              </Button>
+            </Group>
+          </Panel>
+        </SidebarLayout>;
+      `,
+      content: (
+        <SidebarLayout
+          sidebarWidth="13rem"
+          sidebar={
+            <Stack gap="xs">
+              <strong>组件分类</strong>
+              <span style={navItemStyle}>布局组件</span>
+              <span style={navItemStyle}>表单组件</span>
+            </Stack>
+          }
+        >
+          <Panel
+            title="布局组件"
+            description="用于页面骨架、分栏和区域排列。"
+            actions={<Badge tone="info">layout</Badge>}
+          >
+            <Group gap="sm">
+              <Button size="sm">查看指南</Button>
+              <Button size="sm" variant="ghost">
+                查看源码
+              </Button>
+            </Group>
+          </Panel>
+        </SidebarLayout>
+      ),
+    },
+    {
+      title: "右侧栏",
+      code: `
+        <SidebarLayout
+          side="right"
+          sidebarWidth="12rem"
+          sidebar={<Panel padding="sm">辅助信息</Panel>}
+        >
+          <Panel title="主内容">右侧栏适合详情页的状态、目录和快捷操作。</Panel>
+        </SidebarLayout>;
+      `,
+      content: (
+        <SidebarLayout
+          side="right"
+          sidebarWidth="12rem"
+          sidebar={<Panel padding="sm">辅助信息</Panel>}
+        >
+          <Panel title="主内容">右侧栏适合详情页的状态、目录和快捷操作。</Panel>
+        </SidebarLayout>
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "sidebar",
+      type: "ReactNode",
+      required: true,
+      description: "侧栏内容。",
+    },
+    {
+      name: "children",
+      type: "ReactNode",
+      description: "主内容。",
+    },
+    {
+      name: "side",
+      type: '"left" | "right"',
+      defaultValue: '"left"',
+      description: "侧栏位置。",
+    },
+    {
+      name: "sidebarWidth",
+      type: "string",
+      defaultValue: '"16rem"',
+      description: "侧栏宽度。",
+    },
+    {
+      name: "gap",
+      type: '"none" | "sm" | "md" | "lg" | string',
+      defaultValue: '"md"',
+      description: "侧栏和主内容之间的间距。",
+    },
+    {
+      name: "minContentWidth",
+      type: "string",
+      defaultValue: '"0"',
+      description: "主内容最小宽度。",
+    },
+    {
+      name: "collapseBelow",
+      type: '"none" | "tablet"',
+      defaultValue: '"tablet"',
+      description: "移动端是否折叠为上下布局。",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "自定义 className。",
+    },
+  ],
+});

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

@@ -0,0 +1,189 @@
+import { Button } from "willa/Button";
+import { Group } from "willa/Group";
+import { SiteFooter, type SiteFooterColumn } from "willa/SiteFooter";
+import "willa/Button.css";
+import "willa/Group.css";
+import "willa/SiteFooter.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const footerColumns: Array<SiteFooterColumn> = [
+  {
+    title: "产品",
+    links: [
+      { label: "AI 组件", href: "#ai" },
+      { label: "布局组件", href: "#layout" },
+      { label: "表单组件", href: "#form" },
+    ],
+  },
+  {
+    title: "资源",
+    links: [
+      { label: "文档", href: "#docs" },
+      { label: "示例", href: "#examples" },
+      { label: "更新日志", href: "#changelog" },
+    ],
+  },
+  {
+    title: "社区",
+    links: [
+      { label: "GitHub", href: "https://github.com/imtaotao/willa" },
+      { label: "反馈", href: "#feedback" },
+    ],
+  },
+];
+
+export default defineDoc({
+  id: "site-footer",
+  name: "SiteFooter",
+  category: "widgets",
+  packageName: "willa/SiteFooter",
+  description: "用于产品站、文档站和内容站的页脚区域。",
+  imports: [
+    { name: "SiteFooter, type SiteFooterColumn", from: "willa/SiteFooter" },
+    { name: "Button", from: "willa/Button" },
+    { name: "Group", from: "willa/Group" },
+  ],
+  css: "willa/SiteFooter.css",
+  demo: {
+    name: "SiteFooter",
+    component: SiteFooter,
+    props: {
+      brand: "Willa Components",
+      description: "面向 AI 产品、文档站和内容平台的 React 组件库。",
+      columns: footerColumns,
+      copyright: "© 2026 Willa",
+    },
+  },
+  code: `
+    import { SiteFooter, type SiteFooterColumn } from "willa/SiteFooter";
+    import "willa/SiteFooter.css";
+
+    const columns: Array<SiteFooterColumn> = [
+      {
+        title: "产品",
+        links: [
+          { label: "AI 组件", href: "#ai" },
+          { label: "布局组件", href: "#layout" },
+          { label: "表单组件", href: "#form" },
+        ],
+      },
+      {
+        title: "资源",
+        links: [
+          { label: "文档", href: "#docs" },
+          { label: "示例", href: "#examples" },
+          { label: "更新日志", href: "#changelog" },
+        ],
+      },
+    ];
+
+    <SiteFooter
+      brand="Willa Components"
+      description="面向 AI 产品、文档站和内容平台的 React 组件库。"
+      columns={columns}
+      copyright="© 2026 Willa"
+    />;
+  `,
+  sections: [
+    {
+      title: "带操作",
+      code: `
+        import { Button } from "willa/Button";
+        import { Group } from "willa/Group";
+        import { SiteFooter } from "willa/SiteFooter";
+        import "willa/Button.css";
+        import "willa/Group.css";
+        import "willa/SiteFooter.css";
+
+        <SiteFooter
+          brand="Willa"
+          description="快速搭建产品站和内容站。"
+          actions={
+            <Group gap="sm">
+              <Button size="sm">开始使用</Button>
+              <Button size="sm" variant="ghost">
+                查看文档
+              </Button>
+            </Group>
+          }
+          links={[
+            { label: "GitHub", href: "https://github.com/imtaotao/willa" },
+            { label: "隐私", href: "#privacy" },
+            { label: "状态", href: "#status" },
+          ]}
+        />;
+      `,
+      content: (
+        <SiteFooter
+          brand="Willa"
+          description="快速搭建产品站和内容站。"
+          actions={
+            <Group gap="sm">
+              <Button size="sm">开始使用</Button>
+              <Button size="sm" variant="ghost">
+                查看文档
+              </Button>
+            </Group>
+          }
+          links={[
+            { label: "GitHub", href: "https://github.com/imtaotao/willa" },
+            { label: "隐私", href: "#privacy" },
+            { label: "状态", href: "#status" },
+          ]}
+        />
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "brand",
+      type: "ReactNode",
+      description: "页脚品牌内容。",
+    },
+    {
+      name: "description",
+      type: "ReactNode",
+      description: "品牌说明或站点描述。",
+    },
+    {
+      name: "columns",
+      type: "Array<SiteFooterColumn>",
+      description: "多列链接分组。",
+    },
+    {
+      name: "links",
+      type: "Array<SiteFooterLink>",
+      description: "底部辅助链接。",
+    },
+    {
+      name: "actions",
+      type: "ReactNode",
+      description: "自定义操作区。",
+    },
+    {
+      name: "copyright",
+      type: "ReactNode",
+      description: "版权或备案信息。",
+    },
+    {
+      name: "SiteFooterColumn.title",
+      type: "ReactNode",
+      required: true,
+      group: "SiteFooterColumn",
+      description: "链接分组标题。",
+    },
+    {
+      name: "SiteFooterColumn.links",
+      type: "Array<SiteFooterLink>",
+      required: true,
+      group: "SiteFooterColumn",
+      description: "分组内链接列表。",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "自定义 className。",
+    },
+  ],
+});

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

@@ -0,0 +1,168 @@
+import { Button } from "willa/Button";
+import { SiteNav, type SiteNavItem } from "willa/SiteNav";
+import "willa/Button.css";
+import "willa/SiteNav.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const navItems: Array<SiteNavItem> = [
+  { label: "产品", href: "#product", active: true },
+  { label: "组件", href: "#components" },
+  { label: "文档", href: "#docs" },
+  { label: "价格", href: "#pricing" },
+];
+
+export default defineDoc({
+  id: "site-nav",
+  name: "SiteNav",
+  category: "widgets",
+  packageName: "willa/SiteNav",
+  description: "用于产品站、文档站和内容站的顶部导航。",
+  imports: [
+    { name: "SiteNav, type SiteNavItem", from: "willa/SiteNav" },
+    { name: "Button", from: "willa/Button" },
+  ],
+  css: "willa/SiteNav.css",
+  demo: {
+    name: "SiteNav",
+    component: SiteNav,
+    props: {
+      brand: "Willa",
+      brandHref: "#",
+      logo: "W",
+      items: navItems,
+      actions: (
+        <Button size="sm" variant="soft">
+          开始使用
+        </Button>
+      ),
+    },
+  },
+  code: `
+    import { Button } from "willa/Button";
+    import { SiteNav, type SiteNavItem } from "willa/SiteNav";
+    import "willa/Button.css";
+    import "willa/SiteNav.css";
+
+    const items: Array<SiteNavItem> = [
+      { label: "产品", href: "#product", active: true },
+      { label: "组件", href: "#components" },
+      { label: "文档", href: "#docs" },
+      { label: "价格", href: "#pricing" },
+    ];
+
+    <SiteNav
+      brand="Willa"
+      brandHref="#"
+      logo="W"
+      items={items}
+      actions={
+        <Button size="sm" variant="soft">
+          开始使用
+        </Button>
+      }
+    />;
+  `,
+  sections: [
+    {
+      title: "吸顶导航",
+      code: `
+        <SiteNav
+          sticky
+          brand="Willa Docs"
+          brandHref="#"
+          items={[
+            { label: "指南", href: "#guide", active: true },
+            { label: "组件", href: "#components" },
+            { label: "更新", href: "#changelog" },
+          ]}
+        />;
+      `,
+      content: (
+        <SiteNav
+          sticky
+          brand="Willa Docs"
+          brandHref="#"
+          items={[
+            { label: "指南", href: "#guide", active: true },
+            { label: "组件", href: "#components" },
+            { label: "更新", href: "#changelog" },
+          ]}
+        />
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "brand",
+      type: "ReactNode",
+      required: true,
+      description: "品牌名称或自定义品牌内容。",
+    },
+    {
+      name: "brandHref",
+      type: "string",
+      defaultValue: '"/"',
+      description: "点击品牌区域跳转的地址。",
+    },
+    {
+      name: "logo",
+      type: "ReactNode",
+      description: "品牌标识。",
+    },
+    {
+      name: "items",
+      type: "Array<SiteNavItem>",
+      description: "导航链接列表。",
+    },
+    {
+      name: "actions",
+      type: "ReactNode",
+      description: "右侧操作区。",
+    },
+    {
+      name: "sticky",
+      type: "boolean",
+      defaultValue: "false",
+      description: "是否吸附在页面顶部。",
+    },
+    {
+      name: "SiteNavItem.label",
+      type: "ReactNode",
+      required: true,
+      group: "SiteNavItem",
+      description: "导航项文案。",
+    },
+    {
+      name: "SiteNavItem.href",
+      type: "string",
+      required: true,
+      group: "SiteNavItem",
+      description: "导航项链接。",
+    },
+    {
+      name: "SiteNavItem.active",
+      type: "boolean",
+      defaultValue: "false",
+      group: "SiteNavItem",
+      description: "当前导航项是否选中。",
+    },
+    {
+      name: "SiteNavItem.target",
+      type: "string",
+      group: "SiteNavItem",
+      description: "链接打开目标。",
+    },
+    {
+      name: "SiteNavItem.rel",
+      type: "string",
+      group: "SiteNavItem",
+      description: "链接 rel 属性。",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "自定义 className。",
+    },
+  ],
+});

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

@@ -0,0 +1,154 @@
+import { Skeleton } from "willa/Skeleton";
+import "willa/Skeleton.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const SkeletonPreview = () => (
+  <Skeleton loading lines={["44%", "100%", "76%"]} block blockHeight={160}>
+    <div>Loaded content</div>
+  </Skeleton>
+);
+
+const customColorFrameStyle = {
+  display: "grid",
+  width: "min(100%, 34rem)",
+  gap: "0.75rem",
+} as const;
+
+export default defineDoc({
+  id: "skeleton",
+  name: "Skeleton",
+  category: "content",
+  packageName: "willa/Skeleton",
+  description: "包裹真实内容的加载骨架屏，可用于文档、嵌入卡片等异步渲染场景。",
+  imports: [{ name: "Skeleton", from: "willa/Skeleton" }],
+  css: "willa/Skeleton.css",
+  demo: {
+    name: "SkeletonPreview",
+    component: SkeletonPreview,
+  },
+  code: `
+    import { Skeleton } from "willa/Skeleton";
+    import "willa/Skeleton.css";
+
+    <Skeleton loading lines={["44%", "100%", "76%"]} block blockHeight={160}>
+      <div>Loaded content</div>
+    </Skeleton>;
+  `,
+  sections: [
+    {
+      title: "自定义颜色",
+      code: `
+        <div style={{ display: "grid", gap: "0.75rem" }}>
+          <Skeleton
+            loading
+            color="#82a3ec"
+            lines={[
+              { width: "42%", height: "0.82rem" },
+              "100%",
+              "68%",
+            ]}
+          >
+            <div>Loaded content</div>
+          </Skeleton>
+          <Skeleton
+            loading
+            color="#8dd7c7"
+            lines={["36%", "92%", "74%"]}
+            block
+            blockHeight={96}
+          >
+            <div>Loaded content</div>
+          </Skeleton>
+        </div>;
+      `,
+      content: (
+        <div style={customColorFrameStyle}>
+          <Skeleton
+            loading
+            color="#82a3ec"
+            lines={[{ width: "42%", height: "0.82rem" }, "100%", "68%"]}
+          >
+            <div>Loaded content</div>
+          </Skeleton>
+          <Skeleton
+            loading
+            color="#8dd7c7"
+            lines={["36%", "92%", "74%"]}
+            block
+            blockHeight={96}
+          >
+            <div>Loaded content</div>
+          </Skeleton>
+        </div>
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "loading",
+      type: "boolean",
+      required: true,
+      description: "是否展示骨架屏。",
+    },
+    {
+      name: "children",
+      type: "ReactNode",
+      required: true,
+      description: "加载完成后渲染的真实内容。",
+    },
+    {
+      name: "lines",
+      type: "number | Array<number | string | { width?: number | string; height?: number | string }>",
+      defaultValue: "3",
+      description: "骨架文本行配置，传数字时生成对应数量的默认行。",
+    },
+    {
+      name: "block",
+      type: "boolean",
+      description: "是否额外展示一个块状占位区域。",
+    },
+    {
+      name: "blockHeight",
+      type: "number | string",
+      description: "块状占位区域高度，数字会按 px 处理。",
+    },
+    {
+      name: "inline",
+      type: "boolean",
+      description: "使用行内容器，适合放在文本或 hover card 中。",
+    },
+    {
+      name: "keepChildrenMounted",
+      type: "boolean",
+      description:
+        "loading 时仍挂载 children，适合第三方 iframe、图片等需要先挂载才能触发加载回调的内容。",
+    },
+    {
+      name: "label",
+      type: "string",
+      defaultValue: '"Loading"',
+      description: "loading 状态下的无障碍标签。",
+    },
+    {
+      name: "color",
+      type: "string",
+      description: "自定义骨架屏颜色，会生成同色系 shimmer 渐变。",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "自定义 className。",
+    },
+    {
+      name: "contentClassName",
+      type: "string",
+      description: "内容区域 className。",
+    },
+    {
+      name: "skeletonClassName",
+      type: "string",
+      description: "骨架屏 className。",
+    },
+  ],
+});