# @clementoh/better-openapi-viewer-ui 中文文档

规范地址：https://npmcn.com/package/%40clementoh/better-openapi-viewer-ui/

版本：0\.1\.8
npm 元数据更新时间：2026-05-12T15:18:03.575Z
中文译文更新时间：2026-11-10T01:07:57.867Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40clementoh/better-openapi-viewer-ui
原文对照：https://npmcn.com/package/%40clementoh/better-openapi-viewer-ui/?lang=original
项目主页：https://github.com/clementohNZ/better-openapi-viewer#readme
源码仓库：https://github.com/clementohNZ/better-openapi-viewer

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：4.1 MB，12 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：9 个
- peer 依赖：react ^19\.2\.6，react-dom ^19\.2\.6
- 首次发布：2026-05-07T04:22:46.118Z
- 最新版本发布：2026-05-12T15:18:03.477Z
- 近 30 天下载量：5747（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 8 个）

## 中文简介

反应UI用于更好的OpenAPI查看器.

## 安装

```sh
npm install @clementoh/better-openapi-viewer-ui
```

也可以使用：`pnpm add @clementoh/better-openapi-viewer-ui`、`yarn add @clementoh/better-openapi-viewer-ui`、`bun add @clementoh/better-openapi-viewer-ui`

## README

# @clementoh/更好-openapi-viewer-ui (英语)

反应UI用于更好的OpenAPI查看器.

## 发现

取景器使可访问的端点导航与运行计数,文本搜索,以及HTTP方法的过滤器,标记,认证要求,去折旧状态,以及从已规范的OpenAPI文档中获取这些值时的文件内容类型. 它还利用核心的 schema 树辅助器,将组件 schemas 和 Swagger 定义纳入模型部分.

扩展操作显示结构化的请求正体介质类型, schema属性树, 已记录实例, 响应状态类标签, 响应描述, 响应内容实例, 外部 Docs 链接, 以及出现时的回调/ webhook 摘要 。 常见的Markdown风格描述文本作为React文本和元素安全地渲染而未添加Markdown依赖.

## 试试看吧

扩展的操作包括一个全局可控,可选入的试出面板. 用户可以选择服务器,填充服务器变量,选择请求内容类型,编辑参数值,使用生成的JSON对象请求正体字段控制,上传文件备案 `multipart/form-data` 二进制字段,检查并复制生成的 URL,正文,以及片断,发送或取消请求 `fetch` 财务报告和审定财务报表 `AbortController`,审查响应状态,持续时间,标题,以及正文,复制响应正文,并重置输入回已记录实例/默认.

在发送前,UI报告缺少所需的参数,缺少所需的请求机构或多段字段,以及无效的JSON请求机构.

片段选择器目前暴露出卷曲,由核心卷曲片段生成器支撑.

## 授权

查看器检测支持 OpenAPI 和 Swagger 安全方案 `components.securitySchemes` 财务报告和审定财务报表 `securityDefinitions`。一个全局授权面板允许用户输入 Basic auth 、 Bearer 令牌、 标题、 查询或 cookie 位置的 apiKey 证书, 以及 OAuth/ OpenID 计划中的 Access- token 样式值, 核心请求构建者可以应用无记名证书。 OAuth 流量和 OpenID 连接发现 URL 在被记录时显示. 证书可按计划或全球范围审批.

过 `persistAuthorization` 以存储当前 API 文件的证书 `localStorage`。 。 。 .

过 `preauthorizedCredentials` 或者说 `config.preauthorizedCredentials` 以种子授权面板,例如:

```tsx
<BetterOpenApiViewer
  document={document}
  preauthorizedCredentials={{
    bearerAuth: 'token',
    basicAuth: { username: 'demo', password: 'secret' },
  }}
/>
```

## 主题

查看器在根 UI 上包含可访问的光和暗主题控件,并用一个 `data-theme` 属性.

## 常见问题

### @clementoh/better-openapi-viewer-ui 是什么？

反应UI用于更好的OpenAPI查看器\.

### 如何安装 @clementoh/better-openapi-viewer-ui？

在项目目录运行 npm install @clementoh/better-openapi-viewer-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.2\.6）、react-dom（^19\.2\.6）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @clementoh/better-openapi-viewer-ui 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @clementoh/better-openapi-viewer-ui 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @clementoh/better-openapi-viewer-ui 可以商用吗？

@clementoh/better-openapi-viewer-ui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @clementoh/better-openapi-viewer-ui 的下载量有多少？

根据 npm 官方下载统计，@clementoh/better-openapi-viewer-ui 在 2026/10/10 – 2026/11/08 这 30 天内被下载 5,747 次，日均约 192 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @clementoh/better-openapi-viewer-ui 还在维护吗？

最新版本 0\.1\.8 发布于 2026/05/12（5 个月前）；至今共发布 8 个版本，其中过去 12 个月发布了 8 个；首次发布于 2026/05/07。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。