跳到主要内容

示例

已有有效的 OAS 3.2 文档？​

// Skip auto-upgrade when your document is already 3.2
<OasDocument input={validOas32Doc} autoUpgrade={false} />

仅使用核心模块（无需 React）​

在自定义界面或 Node.js 中使用核心入口：

import { loadOasDocument } from "@powerduck/oas-document";

const result = await loadOasDocument(spec, { autoUpgrade: true });

if (result.error) {
  console.error("Failed:", result.error);
} else {
  console.log("Operations:", result.operations.length);
  console.log("Tree nodes:", result.tree.length);
}

自定义样式​

根元素会设置 data-theme="light" 或 data-theme="dark"。所有颜色均通过 .pde-oas-root 下的 CSS 变量解析。

:is(.pde-oas-root, .pde-oas-theme) {
  --pde-color-accent: #635bff;
}

:is(.pde-oas-root, .pde-oas-theme)[data-theme="dark"] {
  --pde-color-accent: #a5a0ff;
}

性能说明​

  • 代码示例延迟到距视口 600px 以内才加载（IntersectionObserver）
  • 语法高亮使用 LRU 缓存（64 条记录 / 1MB）
  • 滚动位置跟踪使用被动事件监听器，并通过 rAF 节流
  • 示例生成最多嵌套 6 层、包含 1,000 个节点