@peony-core/patent-xml-viewer

多格式专利与外观设计 XML 文档解析与渲染 Vue 3 组件库。

自动检测输入格式，统一输出相同的组件结构和数据模型，一套代码兼容三种主流专利 XML 标准。

支持的格式

| 格式 | 适用机构 | 根元素示例 | 命名风格 | |------|---------|-----------|---------| | CNIPA ST.36 变体 | 中国国家知识产权局（CNIPA） | <business:PatentDocumentAndRelated> | PascalCase | | ST.36 国际通用 | 欧洲专利局（EPO）、美国专利商标局（USPTO）、WIPO（PCT）、日本特许厅（JPO）、韩国知识产权局（KIPO）等 | <ep-patent-document>、<us-patent-document> | kebab-case | | ST.96 新一代标准 | WIPO 各成员国（V7~V9） | <pat:PatentPublication>、<des:DesignApplication> | camelCase |

以上格式同时支持发明专利和外观设计文档。外观设计文档在 CNIPA 格式中使用 DesignBibliographicData、DesignTitle、DesignPicture 等专用元素，在 ST.96 格式中使用 DesignApplication 根元素。

安装

pnpm install @peony-core/patent-xml-viewer

快速开始

<script setup>
import { PatentViewer } from '@peony-core/patent-xml-viewer'
import '@peony-core/patent-xml-viewer/style.css'

const xml = `...` // 任意格式的专利 XML
</script>

<template>
  <!-- 简单场景：使用 imageBaseUrl 拼接图片路径 -->
  <PatentViewer
    :xml-content="xml"
    image-base-url="/patent-images"
    theme="light"
  />
</template>

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | xmlContent | string | — | 专利 XML 内容，支持完整文档或单个章节片段 | | imageBaseUrl | string | '' | 图片 URL 前缀，与 XML 中 file 属性拼接为完整路径。适用于图片存储在固定目录下的简单场景 | | imageResolver | (image: ImageNode) => string \| Blob \| Promise<string \| Blob> | — | 图片解析回调函数，用于自定义图片获取逻辑。优先级高于 imageBaseUrl | | theme | 'light' \| 'dark' \| Partial<ThemeTokens> | 'light' | 主题配置，支持预设主题或自定义 Token |

图片解析

组件提供两种方式处理图片：

方式一：imageBaseUrl（简单场景）

图片存储在固定目录下，通过 URL 前缀拼接即可：

<PatentViewer
  :xml-content="xml"
  image-base-url="/patent-images"
/>

组件会自动拼接为 /patent-images/Figure-000001.tif 并加载图片。

方式二：imageResolver（高级场景）

需要对接 OSS、S3、自定义认证等复杂场景时，使用回调函数完全控制图片获取逻辑：

<script setup>
import type { ImageNode } from '@peony-core/patent-xml-viewer'

async function resolveImage(image: ImageNode): Promise<Blob> {
  // image 包含图片的所有信息：file、alt、wi、he 等
  const response = await fetch(`/api/patent-images/${image.file}`, {
    headers: { Authorization: `Bearer ${token}` }
  })
  return response.blob()
}
</script>

<template>
  <PatentViewer
    :xml-content="xml"
    :image-resolver="resolveImage"
  />
</template>

回调参数

回调函数接收 ImageNode 对象，包含以下属性：

| 属性 | 类型 | 说明 | |------|------|------| | file | string | 图片文件名（来自 XML 中的 file 属性） | | alt | string? | 图片替代文本 | | wi | string? | 图片宽度 | | he | string? | 图片高度 | | imgContent | string? | 图片内容（base64 等） | | imgFormat | string? | 图片格式 |

返回值

回调函数支持两种返回类型：

| 返回类型 | 说明 | |----------|------| | string | 图片 URL，组件直接用于 <img src> 显示 | | Blob | 图片数据流，组件内部自动解析（普通图片转 blob URL，TIFF 自动转换为 PNG） |

两种类型均支持异步返回（Promise）。

示例：返回 URL

function resolveImage(image: ImageNode): string {
  return `https://cdn.example.com/patents/${image.file}`
}

示例：返回 Blob（带认证）

async function resolveImage(image: ImageNode): Promise<Blob> {
  const resp = await fetch(`/api/images/${image.file}`, {
    headers: { Authorization: `Bearer ${token}` }
  })
  return resp.blob()
}

示例：对接 OSS

async function resolveImage(image: ImageNode): Promise<string> {
  // 生成带签名的 OSS URL
  return ossClient.signatureUrl(`/patent-images/${image.file}`, { expires: 3600 })
}

主题

<!-- 预设主题 -->
<PatentViewer :xml-content="xml" theme="light" />
<PatentViewer :xml-content="xml" theme="dark" />

<!-- 自定义主题（覆盖部分 Token） -->
<PatentViewer :xml-content="xml" :theme="{ accentColor: '#10b981', bgColor: '#fafafa' }" />

可覆盖的 ThemeTokens：

| Token | 说明 | 浅色默认值 | 深色默认值 | |-------|------|-----------|-----------| | bgColor | 组件主背景色 | #ffffff | #0f1117 | | bgSecondary | 次级背景色（卡片、表头等） | #f7f8fa | #1a1d27 | | bgTertiary | 三级背景色（标签、badge 等） | #f0f2f5 | #22253a | | textColor | 主文本色 | #1a1a2e | #e0e0e8 | | textSecondary | 次级文本色（副标题、说明文字） | #4a4a68 | #a0a0b8 | | textMuted | 弱化文本色（占位符、辅助信息） | #8a8aa0 | #6a6a82 | | borderColor | 边框色（卡片、表格边框） | #d9dce3 | #2e3148 | | headingColor | 标题文字色（章节标题、发明名称） | #0f172a | #f0f0f8 | | shadowColor | 阴影颜色（卡片、弹出层） | rgba(0,0,0,0.08) | rgba(0,0,0,0.3) | | dividerColor | 分隔线颜色 | #e5e7eb | #2a2d40 |

章节片段渲染

除完整文档外，也支持传入单个章节的 XML 片段，组件会自动识别并渲染：

<!-- 仅渲染权利要求 -->
<PatentViewer :xml-content="claimsXml" />

<!-- 仅渲染摘要 -->
<PatentViewer :xml-content="abstractXml" />

支持的章节根元素：

| 章节 | CNIPA | ST.36 | ST.96 | |------|-------|-------|-------| | 著录项目 | BibliographicData / DesignBibliographicData | bibliographic-data / SDOBI | BibliographicData | | 摘要 | Abstract / DesignBriefExplanation | abstract | Abstract | | 说明书 | Description | description | Description | | 权利要求 | Claims | claims | Claims | | 附图 | Drawings / DesignPicture | drawings | Drawings |

解析内容

著录项目

• 出版信息（公开号、公告号、文献种类代码、日期）
• 申请信息（申请号、申请日期）
• 发明/设计名称（含语言标识）
• IPC / CPC / 洛迦诺分类号
• 当事人信息（发明人/设计人、申请人、代理人、受让人、审查员）
• 引用文献（专利引用、非专利文献引用）
• 相关文献
• 统计信息（附图数量、权利要求数量）

摘要

• 段落文本
• 摘要附图

说明书

• 背景技术（Background Art）
• 发明内容（Summary of Invention）
• 附图说明（Brief Description of Drawings）
• 具体实施方式（Detailed Description of Embodiments）
• 工业实用性、最佳模式等（ST.36/ST.96）

权利要求书

• 独立权利要求和从属权利要求
• 权利要求文本（含交叉引用）

附图

• 专利附图展示
• 自动预加载所有图片格式（PNG、JPG、TIFF 等）
• TIFF 格式通过 utif2 在浏览器端解码
• 图片不存在时显示文件名，不报错

内联元素

解析器完整支持以下内联元素：

文本格式

| 元素 | 说明 | |------|------| | bold / b | 粗体 | | italic / i | 斜体 | | underline / u | 下划线 | | small-caps / sc | 小型大写字母 | | overscore | 上划线 |

上下标

| 元素 | 说明 | |------|------| | superscript / sup | 上标 | | subscript / sub / sub2 | 下标 |

引用

| 元素 | 说明 | |------|------| | figure-reference / figref | 图引用 | | claim-reference / claim-ref | 权利要求引用 | | patent-citation / patcit | 专利引用 | | npl-citation / nplcit | 非专利文献引用 | | chemistry | 化学式 |

列表

| 元素 | 说明 | |------|------| | ordered-list / ol | 有序列表 | | unordered-list / ul | 无序列表 | | list-item / li | 列表项 | | definition-list / dl | 定义列表 | | defined-term / dt | 定义术语 | | definition-description / dd | 定义描述 |

媒体与公式

| 元素 | 说明 | |------|------| | math (MathML) | 数学公式 | | table (OASIS CALS) | 表格（支持合并单元格、对齐等） | | image | 图片 | | br | 换行 |

文本容器

| 元素 | 说明 | |------|------| | text | 文本包装器 | | descriptive-text | 描述性文本 | | passage | 段落引用 | | relevant-passage | 相关段落引用 | | page-begin | 页面标记 |

纯解析函数

不使用组件，仅解析 XML 为结构化数据：

import {
  parsePatentXml,        // 自动检测格式并解析
  parseCnipaXml,         // 强制使用 CNIPA 解析器
  parseSt36Xml,          // 强制使用 ST.36 解析器
  parseSt96Xml,          // 强制使用 ST.96 解析器
  detectPatentFormat,    // 仅检测格式，不解析
} from '@peony-core/patent-xml-viewer'

import type {
  PatentDocument,        // 完整文档的结构化数据
  ParseResult,           // 返回类型（完整文档或章节片段）
  PatentFormat,          // 格式类型 ('cnipa' | 'st36' | 'st96')
  BibliographicData,     // 著录项目
  AbstractData,          // 摘要
  DescriptionData,       // 说明书
  ClaimsData,            // 权利要求
  DrawingsData,          // 附图
  InlineNode,            // 内联节点
} from '@peony-core/patent-xml-viewer'

// 自动检测格式并解析
const result = parsePatentXml(xmlString)

if ('attrs' in result) {
  // 完整文档
  const doc: PatentDocument = result
  console.log(doc.attrs.country)                    // 国别代码
  console.log(doc.bibliographicData?.inventionTitle) // 发明名称
  console.log(doc.bibliographicData?.parties.inventors) // 发明人列表
  console.log(doc.claims?.claims[0]?.claimText)     // 第一条权利要求
} else {
  // 章节片段
  console.log(result.section) // 'abstract' | 'description' | 'claims' | 'drawings' | 'bibliographicData'
  console.log(result.data)
}

// 仅检测格式
const format = detectPatentFormat(xmlDoc) // 'cnipa' | 'st36' | 'st96'

依赖

• vue ^3.4.0（peerDependencies）
• utif2 ^4.1.0（TIFF 图片解码，作为 runtime dependency）

许可

MIT License，详见 LICENSE 文件。