介绍

import { useOpenApi } from "@/hooks/use-openapi";
import { useOpenApiLoader } from "@/hooks/use-openapi-loader";
import { useOpenApiCombined } from "@/hooks/use-openapi-combined";
import { useOperation } from "@/hooks/use-operation";
import { useSchema } from "@/hooks/use-schema";

import { resolveRef } from "@/lib/resolve-ref";
import { generateExample } from "@/lib/generate-example";
import { isReferenceObject } from "@/lib/schema-utils";
import { getSchemaType } from "@/lib/type-utils";

import { useI18n, I18nProvider } from "@/lib/i18n";
 
// 支持的语言
-中文(zh) - 英文(en);

# 安装所有 UI 组件
npx shadcn@latest add https://pivotkit.vercel.app/r/index.json
 
# 安装 Hooks
npx shadcn@latest add https://pivotkit.vercel.app/r/hooks.json
 
# 安装工具库
npx shadcn@latest add https://pivotkit.vercel.app/r/lib.json

import { StatusCode } from "@/components/ui/status-code";
import { MethodLabel } from "@/components/ui/method-label";
import { OperationDetail } from "@/components/ui/operation-detail";
 
export default function ApiEndpoint({ operation, path, method }) {
  return (
    <div className="space-y-4">
      <div className="flex items-center gap-3">
        <MethodLabel method={method} />
        <code className="text-sm">{path}</code>
        <StatusCode code={200} />
      </div>
 
      <OperationDetail
        operation={operation}
        path={path}
        method={method}
        components={spec.components}
      />
    </div>
  );
}

import { useOpenApi } from "@/hooks/use-openapi";
import { useOpenApiLoader } from "@/hooks/use-openapi-loader";
 
export default function ApiExplorer({ url }) {
  const { spec, loading, error } = useOpenApiLoader({
    type: "url",
    data: url,
  });
 
  const openApi = useOpenApi(spec);
  const operations = openApi?.getOperationsByTag() || {};
 
  if (loading) return <div>加载中...</div>;
  if (error) return <div>加载失败: {error}</div>;
 
  return (
    <div>
      {Object.entries(operations).map(([tag, ops]) => (
        <div key={tag} className="mb-8">
          <h2 className="text-2xl font-bold mb-4">{tag}</h2>
          {ops.map((op) => (
            <OperationBox
              key={`${op.path}-${op.method}`}
              operation={op.operation}
              path={op.path}
              method={op.method}
            />
          ))}
        </div>
      ))}
    </div>
  );
}

import { OperationDetailedLayout } from "@/components/ui/operation-detailed-layout";
 
export default function ApiDocsPage() {
  return (
    <OperationDetailedLayout
      url="https://api.example.com/openapi.json"
      selectedPath="/users/{id}"
      selectedMethod="GET"
      showCodegen={true}
      showTryPanel={true}
      onSelectOperation={(path, method, operation) => {
        console.log("选中操作:", path, method);
      }}
    />
  );
}

// 强大的 OpenAPI 处理 hook
const openApi = useOpenApi(spec);
const operations = openApi.getOperationsByTag();
const resolved = openApi.resolve(reference);
 
// 数据加载 hook
const { spec, loading, error } = useOpenApiLoader({
  type: "url",
  data: "https://api.example.com/openapi.json",
});
 
// 结合加载和解析的 hook
const { spec, openApi, operations } = useOpenApiCombined({
  type: "url",
  data: "https://api.example.com/openapi.json",
});
 
// 操作专用 hook
const operation = useOperation(operationData, path, method);
const parameters = operation.getParameters();
 
// Schema 处理 hook
const schema = useSchema(schemaData, components);
const properties = schema.getProperties();

import { useI18n } from "@/lib/i18n";
 
function MyComponent() {
  const { t, locale, setLocale } = useI18n();
 
  return (
    <div>
      <p>{t("operation.parameters")}</p>
      <button onClick={() => setLocale("zh")}>中文</button>
      <button onClick={() => setLocale("en")}>English</button>
    </div>
  );
}

import { generateExample } from "@/lib/generate-example";
 
// 根据 OpenAPI Schema 生成示例数据
const example = generateExample(schema, components, {
  maxDepth: 3,
  includeReadOnly: false,
});

import { cn } from "@/lib/utils";
 
// 正确使用 cn() 合并样式
<div className={cn("base-styles", "additional-styles", className)} />;

import { resolveRef } from "@/lib/resolve-ref";
 
// 解析 OpenAPI 引用
const resolved = resolveRef(reference, components);

import type { OpenAPIV3 } from "openapi-types";
 
interface MyComponentProps {
  operation: OpenAPIV3.OperationObject;
  components?: OpenAPIV3.ComponentsObject;
}