willa-workspace 0.0.3-alpha.2739b3e

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

@@ -0,0 +1,178 @@
+import { LogoWall, type LogoWallItem } from "willa/LogoWall";
+import "willa/LogoWall.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const partnerItems: Array<LogoWallItem> = [
+  {
+    name: "Northstar",
+    logo: "N",
+    description: "AI 工作台",
+    href: "https://example.com",
+  },
+  {
+    name: "CanvasLab",
+    logo: "C",
+    description: "内容协作",
+  },
+  {
+    name: "Orbit",
+    logo: "O",
+    description: "数据分析",
+  },
+  {
+    name: "Willa Cloud",
+    logo: "W",
+    description: "组件平台",
+  },
+];
+
+export default defineDoc({
+  id: "logo-wall",
+  name: "LogoWall",
+  category: "widgets",
+  packageName: "willa/LogoWall",
+  description: "用于展示客户、合作伙伴、集成平台或品牌生态的标识墙。",
+  imports: [{ name: "LogoWall, type LogoWallItem", from: "willa/LogoWall" }],
+  css: "willa/LogoWall.css",
+  demo: {
+    name: "LogoWall",
+    component: LogoWall,
+    props: {
+      title: "合作生态",
+      description: "展示产品集成、合作伙伴和客户标识。",
+      items: partnerItems,
+    },
+  },
+  code: `
+    import { LogoWall, type LogoWallItem } from "willa/LogoWall";
+    import "willa/LogoWall.css";
+
+    const items: Array<LogoWallItem> = [
+      {
+        name: "Northstar",
+        logo: "N",
+        description: "AI 工作台",
+        href: "https://example.com",
+      },
+      { name: "CanvasLab", logo: "C", description: "内容协作" },
+      { name: "Orbit", logo: "O", description: "数据分析" },
+      { name: "Willa Cloud", logo: "W", description: "组件平台" },
+    ];
+
+    <LogoWall
+      title="合作生态"
+      description="展示产品集成、合作伙伴和客户标识。"
+      items={items}
+    />;
+  `,
+  sections: [
+    {
+      title: "紧凑展示",
+      code: `
+        const items: Array<LogoWallItem> = [
+          { name: "Docs", logo: "D" },
+          { name: "Studio", logo: "S" },
+          { name: "Console", logo: "C" },
+          { name: "Agent", logo: "A" },
+          { name: "Data", logo: "D" },
+          { name: "Search", logo: "S" },
+        ];
+
+        <LogoWall items={items} columns={6} muted />;
+      `,
+      content: (
+        <LogoWall
+          items={[
+            { name: "Docs", logo: "D" },
+            { name: "Studio", logo: "S" },
+            { name: "Console", logo: "C" },
+            { name: "Agent", logo: "A" },
+            { name: "Data", logo: "D" },
+            { name: "Search", logo: "S" },
+          ]}
+          columns={6}
+          muted
+        />
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "items",
+      type: "Array<LogoWallItem>",
+      required: true,
+      description: "标识项列表。",
+    },
+    {
+      name: "columns",
+      type: "2 | 3 | 4 | 5 | 6",
+      defaultValue: "4",
+      description: "桌面端列数，窄屏会自动收敛。",
+    },
+    {
+      name: "title",
+      type: "ReactNode",
+      description: "标识墙标题。",
+    },
+    {
+      name: "description",
+      type: "ReactNode",
+      description: "标识墙说明。",
+    },
+    {
+      name: "muted",
+      type: "boolean",
+      defaultValue: "false",
+      description: "降低图片标识饱和度，适合弱品牌露出。",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "自定义类名。",
+    },
+    {
+      name: "LogoWallItem.name",
+      type: "string",
+      required: true,
+      group: "LogoWallItem",
+      description: "标识名称。",
+    },
+    {
+      name: "LogoWallItem.logo",
+      type: "ReactNode",
+      group: "LogoWallItem",
+      description: "自定义标识内容，优先级高于 src。",
+    },
+    {
+      name: "LogoWallItem.src",
+      type: "string",
+      group: "LogoWallItem",
+      description: "图片标识地址。",
+    },
+    {
+      name: "LogoWallItem.href",
+      type: "string",
+      group: "LogoWallItem",
+      description: "点击跳转地址。",
+    },
+    {
+      name: "LogoWallItem.target",
+      type: "string",
+      group: "LogoWallItem",
+      description: "链接打开目标。",
+    },
+    {
+      name: "LogoWallItem.rel",
+      type: "string",
+      group: "LogoWallItem",
+      description: "链接 rel 属性。",
+    },
+    {
+      name: "LogoWallItem.description",
+      type: "ReactNode",
+      group: "LogoWallItem",
+      description: "标识辅助说明。",
+    },
+  ],
+});

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

@@ -0,0 +1,170 @@
+import { Masonry } from "willa/Masonry";
+import { Panel } from "willa/Panel";
+import "willa/Masonry.css";
+import "willa/Panel.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const masonryItems = [
+  { title: "产品反馈", height: "7rem" },
+  { title: "发布记录", height: "10rem" },
+  { title: "设计笔记", height: "8rem" },
+  { title: "用户访谈", height: "12rem" },
+  { title: "数据摘要", height: "7.5rem" },
+  { title: "文档片段", height: "9rem" },
+];
+
+export default defineDoc({
+  id: "masonry",
+  name: "Masonry",
+  category: "layout",
+  packageName: "willa/Masonry",
+  description: "用于高度不一致的卡片流、图片流和内容集合的瀑布流布局。",
+  imports: [
+    { name: "Masonry", from: "willa/Masonry" },
+    { name: "Panel", from: "willa/Panel" },
+  ],
+  css: "willa/Masonry.css",
+  demo: {
+    name: "Masonry",
+    component: Masonry,
+    props: { columns: 3, gap: "md", width: "min(100%, 42rem)" },
+    children: masonryItems.slice(0, 3).map((item) => ({
+      name: "Panel",
+      component: Panel,
+      props: {
+        title: item.title,
+        style: { minHeight: item.height },
+      },
+      children: "内容高度可以不同。",
+    })),
+  },
+  code: `
+    import { Masonry } from "willa/Masonry";
+    import { Panel } from "willa/Panel";
+    import "willa/Masonry.css";
+    import "willa/Panel.css";
+
+    <Masonry columns={3} gap="md" width="min(100%, 42rem)">
+      <Panel title="产品反馈" style={{ minHeight: "7rem" }}>
+        内容高度可以不同。
+      </Panel>
+      <Panel title="发布记录" style={{ minHeight: "10rem" }}>
+        内容高度可以不同。
+      </Panel>
+      <Panel title="设计笔记" style={{ minHeight: "8rem" }}>
+        内容高度可以不同。
+      </Panel>
+    </Masonry>;
+  `,
+  sections: [
+    {
+      title: "内容卡片流",
+      code: `
+        <Masonry columns={3} gap="lg" width="min(100%, 52rem)">
+          {[
+            { title: "产品反馈", height: "7rem" },
+            { title: "发布记录", height: "10rem" },
+            { title: "设计笔记", height: "8rem" },
+            { title: "用户访谈", height: "12rem" },
+            { title: "数据摘要", height: "7.5rem" },
+            { title: "文档片段", height: "9rem" },
+          ].map((item) => (
+            <Panel key={item.title} title={item.title} style={{ minHeight: item.height }}>
+              内容高度可以不同，布局会按列自然填充。
+            </Panel>
+          ))}
+        </Masonry>;
+      `,
+      content: (
+        <Masonry columns={3} gap="lg" width="min(100%, 52rem)">
+          {masonryItems.map((item) => (
+            <Panel
+              key={item.title}
+              title={item.title}
+              style={{ minHeight: item.height }}
+            >
+              内容高度可以不同，布局会按列自然填充。
+            </Panel>
+          ))}
+        </Masonry>
+      ),
+    },
+    {
+      title: "自适应列宽",
+      code: `
+        <Masonry columnWidth="13rem" gap="md" width="min(100%, 52rem)">
+          {[
+            "知识库",
+            "任务模板",
+            "生成结果",
+            "素材库",
+            "数据洞察",
+          ].map((title, index) => (
+            <Panel
+              key={title}
+              title={title}
+              style={{ minHeight: \`\${7 + index * 1.2}rem\` }}
+            >
+              根据可用宽度自动决定列数。
+            </Panel>
+          ))}
+        </Masonry>;
+      `,
+      content: (
+        <Masonry columnWidth="13rem" gap="md" width="min(100%, 52rem)">
+          {["知识库", "任务模板", "生成结果", "素材库", "数据洞察"].map(
+            (title, index) => (
+              <Panel
+                key={title}
+                title={title}
+                style={{ minHeight: `${7 + index * 1.2}rem` }}
+              >
+                根据可用宽度自动决定列数。
+              </Panel>
+            ),
+          )}
+        </Masonry>
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "children",
+      type: "ReactNode",
+      description: "瀑布流内容。",
+    },
+    {
+      name: "columns",
+      type: "number",
+      description: "固定列数。",
+    },
+    {
+      name: "columnWidth",
+      type: "string",
+      description: "期望列宽，浏览器会根据容器宽度自动计算列数。",
+    },
+    {
+      name: "gap",
+      type: '"none" | "xs" | "sm" | "md" | "lg" | "xl" | string',
+      defaultValue: '"md"',
+      description: "列间距和项间距。",
+    },
+    {
+      name: "width",
+      type: "string",
+      description: "外层宽度。",
+    },
+    {
+      name: "as",
+      type: "ElementType",
+      defaultValue: '"div"',
+      description: "自定义渲染标签或组件。",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "自定义 className。",
+    },
+  ],
+});

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

@@ -0,0 +1,164 @@
+import { MathExpression } from "willa/MathExpression";
+import "willa/MathExpression.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const mathDemoStackStyle = {
+  display: "grid",
+  gap: "1rem",
+  maxWidth: "42rem",
+} as const;
+
+const mathPanelStyle = {
+  display: "grid",
+  gap: "0.75rem",
+  width: "min(100%, 38rem)",
+} as const;
+
+function MathExpressionPreview() {
+  return (
+    <div style={mathDemoStackStyle}>
+      <p>
+        内联公式 <MathExpression value="E = mc^2" /> 可以直接嵌入正文。
+      </p>
+      <MathExpression
+        display="block"
+        value="\\int_0^1 x^2\\,dx = \\frac{1}{3}"
+      />
+    </div>
+  );
+}
+
+export default defineDoc({
+  id: "math-expression",
+  name: "MathExpression",
+  packageName: "willa/MathExpression",
+  description: "用于在文档、说明和富文本内容中渲染 KaTeX 数学公式。",
+  imports: [{ name: "MathExpression", from: "willa/MathExpression" }],
+  css: "willa/MathExpression.css",
+  demo: {
+    name: "MathExpressionPreview",
+    component: MathExpressionPreview,
+  },
+  code: `
+    import { MathExpression } from "willa/MathExpression";
+    import "willa/MathExpression.css";
+
+    <div style={{ display: "grid", gap: "1rem" }}>
+      <p>
+        内联公式 <MathExpression value="E = mc^2" /> 可以直接嵌入正文。
+      </p>
+      <MathExpression
+        display="block"
+        value="\\\\int_0^1 x^2\\\\,dx = \\\\frac{1}{3}"
+      />
+    </div>;
+  `,
+  sections: [
+    {
+      title: "内联公式",
+      code: `
+        <p>
+          当 <MathExpression value="a^2 + b^2 = c^2" /> 成立时，可以继续推导。
+        </p>;
+      `,
+      content: (
+        <p>
+          当 <MathExpression value="a^2 + b^2 = c^2" /> 成立时，可以继续推导。
+        </p>
+      ),
+    },
+    {
+      title: "块级公式",
+      code: `
+        <MathExpression
+          display="block"
+          value="\\\\sum_{i=1}^{n} i = \\\\frac{n(n+1)}{2}"
+        />;
+      `,
+      content: (
+        <MathExpression
+          display="block"
+          value="\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}"
+        />
+      ),
+    },
+    {
+      title: "KaTeX 配置",
+      code: `
+        <MathExpression
+          display="block"
+          value="f: \\\\RR \\\\to \\\\RR"
+          options={{
+            macros: {
+              "\\\\RR": "\\\\mathbb{R}",
+            },
+          }}
+        />;
+      `,
+      content: (
+        <MathExpression
+          display="block"
+          value="f: \\RR \\to \\RR"
+          options={{
+            macros: {
+              "\\RR": "\\mathbb{R}",
+            },
+          }}
+        />
+      ),
+    },
+    {
+      title: "错误回退",
+      code: `
+        <div style={{ display: "grid", gap: "0.75rem", width: "min(100%, 38rem)" }}>
+          <MathExpression value="\\\\frac{1" fallback="公式解析失败" />
+          <MathExpression display="block" value="\\\\sqrt{" fallback="块级公式解析失败" />
+        </div>;
+      `,
+      content: (
+        <div style={mathPanelStyle}>
+          <MathExpression value="\\frac{1" fallback="公式解析失败" />
+          <MathExpression
+            display="block"
+            value="\\sqrt{"
+            fallback="块级公式解析失败"
+          />
+        </div>
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "value",
+      type: "string",
+      description: "要渲染的 KaTeX 表达式，优先级高于 children。",
+    },
+    {
+      name: "children",
+      type: "ReactNode",
+      description: "未传 value 时使用的表达式内容，适合简单字符串或数字。",
+    },
+    {
+      name: "display",
+      type: '"inline" | "block"',
+      defaultValue: '"inline"',
+      description: "公式展示模式，block 会使用 KaTeX 的 displayMode。",
+    },
+    {
+      name: "options",
+      type: "Omit<KatexOptions, 'displayMode'>",
+      description: "透传给 KaTeX 的渲染配置，displayMode 由 display 控制。",
+    },
+    {
+      name: "fallback",
+      type: "ReactNode",
+      description: "公式解析失败时展示的回退内容。",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "可选的外层 className。",
+    },
+  ],
+});