nb-ui / bili-data-viewer

一个基于 Vue 3 + Naive UI 的 B 站数据展示组件库，当前包含：

• NbArchiveInfoCard：稿件信息卡片（标题、简介、UP、统计）
• NbDanmakuTable：弹幕虚拟列表（支持定位、高亮、行菜单）
• NbCommentTree：评论树虚拟列表（搜索、展开、定位、笔记抽屉）
• NbNote：笔记内容渲染
• NbImage：n-image 包装（兼容样式挂载场景）
• NbVirtualList：n-virtual-list 包装（统一底部渐隐遮罩）

B站数据格式见 bili-data-manager

组件注册

全量注册

import { createApp } from "vue";
import { NBUI } from "nb-ui";

const app = createApp(App);
app.use(NBUI);

按需引入

import {
  NbArchiveInfoCard,
  NbDanmakuTable,
  NbCommentTree,
  NbCommandDmTimeline,
  NbVirtualList,
  NbNote,
  NbImage,
  NbUserCard,
} from "nb-ui";

若在 Shadow DOM 或自定义挂载点使用，建议主动挂载 vueuc 样式：

import { mountVueucStyles } from "nb-ui";

mountVueucStyles(styleMountTarget);

快速示例

<template>
  <div class="container">
    <div class="top-row">
      <NbArchiveInfoCard :archive-info="archiveInfo" />
      <NbDanmakuTable :items="danmakuList" />
    </div>
    <NbCommentTree :tree="commentTree" :base-url="archiveInfo.url" :note="noteDict" />
  </div>
</template>

主要 API

NbArchiveInfoCard

• Props
  • archiveInfo: object

NbDanmakuTable

• Props
  • items: array
  • itemHeight: number（虚拟列表估算高度，默认 40）
  • menuItems: array
• 默认按 progress 升序排序（支持点击三列表头切换升/降序）
• Events
  • row-click(item)
  • sort-change({ key, order })
• Expose
  • scrollToRow(index)
  • scrollToId(id, options?)
  • getSortState()

menuItems 格式：

[
  {
    getName: (item) => "复制弹幕",
    onSelect: async (item) => {
      // do something
    },
    disabled: false,
  },
];

NbCommentTree

• Props
  • tree: array
  • note: object
  • baseUrl: string
  • gap: number
  • padding: number
  • indentSize: number
• Expose
  • scrollToId(rpid, options?)

NbVirtualList

对 n-virtual-list 的薄包装，增加：

• 底部渐隐遮罩（滚动未到底时显示）
• vueuc 虚拟列表样式主动挂载，兼容 style-mount-target（需自己主动调用mountVueucStyles）

附加 Props：

• showBottomMask: boolean（默认 true）
• bottomMaskHeight: number（默认 32）

Expose：

• scrollTo(options, y?)

说明

• 项目构建为库模式，入口：src/index.js
• 组件样式使用 css-render，并适配 Naive UI 的 style-mount-target
• 若在 Shadow DOM 或自定义挂载点使用，建议通过 n-config-provider 传入 style-mount-target（另外需调用mountVueucStyles 用于统一挂载 vueuc 样式）

Shadow DOM踩坑

1. vueuc

   见 issue

   暂时解决办法：调用mountVueucStyles，自己手动挂载一份。

2. n-image

   n-image-preview图片预览没有暴露to参数，预览层固定 Teleport 到 body。如果设置了style-mount-target到Shadow DOM，那么预览的图片就会缺失样式。

   暂时解决办法：包装NbImage，使用NbImage时会自动挂载一份图片预览需要的样式到head。