willa-workspace 0.0.3-alpha.2739b3e

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

@@ -0,0 +1,307 @@
+import { unindent } from "aidly";
+import { DiffViewer } from "willa/DiffViewer";
+import "willa/DiffViewer.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const beforeCode = unindent(`
+  export function resolveStatus(task: Task) {
+    if (task.error) {
+      return "failed";
+    }
+
+    if (task.done) {
+      return "done";
+    }
+
+    return "pending";
+  }
+`);
+
+const afterCode = unindent(`
+  export function resolveStatus(task: Task) {
+    if (task.blocked) {
+      return "blocked";
+    }
+
+    if (task.error) {
+      return "failed";
+    }
+
+    if (task.done) {
+      return "completed";
+    }
+
+    return "running";
+  }
+`);
+
+const configBefore = unindent(`
+  export const navigation = {
+    compact: false,
+    groups: ["AI", "Content", "Form"],
+    showCounts: false,
+  };
+`);
+
+const configAfter = unindent(`
+  export const navigation = {
+    compact: true,
+    groups: ["AI", "Content", "Form", "Layout"],
+    showCounts: true,
+    showLocalName: true,
+  };
+`);
+
+export default defineDoc({
+  id: "diff-viewer",
+  name: "DiffViewer",
+  packageName: "willa/DiffViewer",
+  description: "用于展示代码、配置或文本变更的差异视图。",
+  imports: [{ name: "DiffViewer", from: "willa/DiffViewer" }],
+  css: "willa/DiffViewer.css",
+  demo: {
+    name: "DiffViewer",
+    component: DiffViewer,
+    props: {
+      title: "状态解析逻辑",
+      before: beforeCode,
+      after: afterCode,
+      language: "ts",
+      contextLines: 2,
+    },
+  },
+  code: unindent(`
+    import { DiffViewer } from "willa/DiffViewer";
+    import "willa/DiffViewer.css";
+
+    const beforeCode = \`
+      export function resolveStatus(task: Task) {
+        if (task.error) {
+          return "failed";
+        }
+
+        if (task.done) {
+          return "done";
+        }
+
+        return "pending";
+      }
+    \`;
+
+    const afterCode = \`
+      export function resolveStatus(task: Task) {
+        if (task.blocked) {
+          return "blocked";
+        }
+
+        if (task.error) {
+          return "failed";
+        }
+
+        if (task.done) {
+          return "completed";
+        }
+
+        return "running";
+      }
+    \`;
+
+    <DiffViewer
+      title="状态解析逻辑"
+      before={beforeCode}
+      after={afterCode}
+      language="ts"
+      contextLines={2}
+    />
+  `),
+  props: [
+    {
+      name: "before",
+      type: "string",
+      required: true,
+      description: "变更前的文本内容。",
+    },
+    {
+      name: "after",
+      type: "string",
+      required: true,
+      description: "变更后的文本内容。",
+    },
+    {
+      name: "language",
+      type: "string",
+      defaultValue: '"text"',
+      description: "代码语言，用于语法高亮和语言标记。",
+    },
+    {
+      name: "title",
+      type: "ReactNode",
+      description: "差异视图标题。",
+    },
+    {
+      name: "beforeLabel",
+      type: "ReactNode",
+      defaultValue: '"Before"',
+      description: "左右对比模式下左侧标题。",
+    },
+    {
+      name: "afterLabel",
+      type: "ReactNode",
+      defaultValue: '"After"',
+      description: "左右对比模式下右侧标题。",
+    },
+    {
+      name: "variant",
+      type: '"unified" | "split"',
+      defaultValue: '"unified"',
+      description: "差异展示方式。",
+    },
+    {
+      name: "showLineNumbers",
+      type: "boolean",
+      defaultValue: "true",
+      description: "是否显示新旧行号。",
+    },
+    {
+      name: "contextLines",
+      type: "number",
+      description: "每个变更周围保留的上下文行数。不传时展示全部未变化内容。",
+    },
+    {
+      name: "copyable",
+      type: "boolean",
+      defaultValue: "true",
+      description: "是否显示复制新版内容的按钮。",
+    },
+    {
+      name: "copiedDuration",
+      type: "number",
+      defaultValue: "300",
+      description: "复制成功反馈持续时间，单位为毫秒。",
+    },
+    {
+      name: "...rootProps",
+      type: "ComponentPropsWithoutRef<'div'>",
+      description: "透传给外层容器的原生属性，例如 className、id、style。",
+    },
+  ],
+  sections: [
+    {
+      title: "左右对比",
+      code: `
+        const configBefore = \`
+          export const navigation = {
+            compact: false,
+            groups: ["AI", "Content", "Form"],
+            showCounts: false,
+          };
+        \`;
+
+        const configAfter = \`
+          export const navigation = {
+            compact: true,
+            groups: ["AI", "Content", "Form", "Layout"],
+            showCounts: true,
+            showLocalName: true,
+          };
+        \`;
+
+        <DiffViewer
+          title="导航配置"
+          beforeLabel="当前配置"
+          afterLabel="调整后"
+          before={configBefore}
+          after={configAfter}
+          language="ts"
+          variant="split"
+        />
+      `,
+      content: (
+        <DiffViewer
+          title="导航配置"
+          beforeLabel="当前配置"
+          afterLabel="调整后"
+          before={configBefore}
+          after={configAfter}
+          language="ts"
+          variant="split"
+        />
+      ),
+    },
+    {
+      title: "折叠上下文",
+      code: `
+        const beforeCode = \`
+          export function resolveStatus(task: Task) {
+            if (task.error) {
+              return "failed";
+            }
+
+            if (task.done) {
+              return "done";
+            }
+
+            return "pending";
+          }
+        \`;
+
+        const afterCode = \`
+          export function resolveStatus(task: Task) {
+            if (task.blocked) {
+              return "blocked";
+            }
+
+            if (task.error) {
+              return "failed";
+            }
+
+            if (task.done) {
+              return "completed";
+            }
+
+            return "running";
+          }
+        \`;
+
+        <DiffViewer
+          title="只保留变更附近内容"
+          before={beforeCode}
+          after={afterCode}
+          language="ts"
+          contextLines={1}
+        />
+      `,
+      content: (
+        <DiffViewer
+          title="只保留变更附近内容"
+          before={beforeCode}
+          after={afterCode}
+          language="ts"
+          contextLines={1}
+        />
+      ),
+    },
+    {
+      title: "无行号",
+      code: `
+        <DiffViewer
+          title="文案调整"
+          before="AI 正在处理你的任务。"
+          after="Willa AI 正在整理上下文并生成建议。"
+          showLineNumbers={false}
+          copyable={false}
+        />
+      `,
+      content: (
+        <DiffViewer
+          title="文案调整"
+          before="AI 正在处理你的任务。"
+          after="Willa AI 正在整理上下文并生成建议。"
+          showLineNumbers={false}
+          copyable={false}
+        />
+      ),
+    },
+  ],
+});

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

@@ -0,0 +1,182 @@
+import { Download } from "willa/Download";
+import "willa/Download.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const demoFileHref =
+  "data:text/plain;charset=utf-8,%E8%BF%99%E6%98%AF%20Willa%20Download%20%E7%BB%84%E4%BB%B6%E7%9A%84%E6%BC%94%E7%A4%BA%E6%96%87%E4%BB%B6%E3%80%82";
+
+const stackStyle = {
+  display: "flex",
+  minWidth: 0,
+  alignItems: "center",
+  flexWrap: "wrap",
+  gap: "0.75rem",
+} as const;
+
+const DownloadPreview = () => (
+  <div style={stackStyle}>
+    <Download href={demoFileHref} name="product-brief.txt" meta="2 KB" />
+    <Download
+      href={demoFileHref}
+      name="feedback.csv"
+      downloadName="feedback.csv"
+      variant="button"
+      size="md"
+    />
+  </div>
+);
+
+export default defineDoc({
+  id: "download",
+  name: "Download",
+  packageName: "willa/Download",
+  description: "用于附件、资料和导出结果的轻量下载入口。",
+  imports: [{ name: "Download", from: "willa/Download" }],
+  css: "willa/Download.css",
+  demo: {
+    name: "DownloadPreview",
+    component: DownloadPreview,
+  },
+  code: `
+    import { Download } from "willa/Download";
+    import "willa/Download.css";
+
+    <Download
+      href="/files/product-brief.txt"
+      name="product-brief.txt"
+      meta="2 KB"
+    />;
+  `,
+  sections: [
+    {
+      title: "附件下载",
+      code: `
+        <div style={stackStyle}>
+          <Download href={demoFileHref} name="feedback.csv" meta="12 KB" />
+          <Download href={demoFileHref} name="roadmap.md" meta="Markdown" />
+          <Download href={demoFileHref} name="report.pdf" meta="428 KB" />
+        </div>;
+      `,
+      content: (
+        <div style={stackStyle}>
+          <Download href={demoFileHref} name="feedback.csv" meta="12 KB" />
+          <Download href={demoFileHref} name="roadmap.md" meta="Markdown" />
+          <Download href={demoFileHref} name="report.pdf" meta="428 KB" />
+        </div>
+      ),
+    },
+    {
+      title: "按钮形态",
+      code: `
+        <div style={stackStyle}>
+          <Download
+            href={demoFileHref}
+            name="下载报告"
+            downloadName="report.pdf"
+            variant="button"
+            size="md"
+          />
+          <Download
+            href={demoFileHref}
+            name="不可下载"
+            variant="button"
+            size="md"
+            disabled
+          />
+        </div>;
+      `,
+      content: (
+        <div style={stackStyle}>
+          <Download
+            href={demoFileHref}
+            name="下载报告"
+            downloadName="report.pdf"
+            variant="button"
+            size="md"
+          />
+          <Download
+            href={demoFileHref}
+            name="不可下载"
+            variant="button"
+            size="md"
+            disabled
+          />
+        </div>
+      ),
+    },
+    {
+      title: "纯文本形态",
+      code: `
+        <Download href={demoFileHref} name="下载原始数据" meta="CSV" variant="plain" />;
+      `,
+      content: (
+        <Download
+          href={demoFileHref}
+          name="下载原始数据"
+          meta="CSV"
+          variant="plain"
+        />
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "href",
+      type: "string",
+      required: true,
+      description: "下载地址。",
+    },
+    {
+      name: "name",
+      type: "ReactNode",
+      required: true,
+      description: "下载入口主文案，通常是文件名或动作文案。",
+    },
+    {
+      name: "meta",
+      type: "ReactNode",
+      description: "文件大小、格式或补充说明。",
+    },
+    {
+      name: "downloadName",
+      type: "string",
+      description: "下载保存时使用的文件名；未传时仍会开启原生 download 行为。",
+    },
+    {
+      name: "variant",
+      type: '"chip" | "button" | "plain"',
+      defaultValue: '"chip"',
+      description: "下载入口形态，默认 chip。",
+    },
+    {
+      name: "size",
+      type: '"sm" | "md"',
+      defaultValue: '"sm"',
+      description: "尺寸，默认 sm。",
+    },
+    {
+      name: "icon",
+      type: "ReactNode",
+      defaultValue: "<FileTextIcon />",
+      description: "左侧图标。",
+    },
+    {
+      name: "trailingIcon",
+      type: "ReactNode",
+      defaultValue: "<DownloadIcon />",
+      description: "右侧图标，默认下载图标。",
+    },
+    {
+      name: "disabled",
+      type: "boolean",
+      defaultValue: "false",
+      description: "禁用下载入口。",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "自定义 className。",
+    },
+  ],
+});