vis3-kit

@vis3/kit

Install

npm i @vis3/kit
# or pnpm add @vis3/kit

Usage

import { BucketBlock } from '@vis3/kit'

export default function App() {
  const handleParamsChange = (params) => {
    console.log(params)
  }
  const dataSource = {
    path: "s3://qa-huawei/exmaple/example.jsonl?bytes=0,623",
    type: "file" as const,
    created_by: null,
    mimetype: "application/x-ndjson",
    size: 482972,
    content: "{\"pdf_name\": \"academic_literature_6ac08aae4a9de359ec55db33a81fcc92_page_1.pdf\", \"img_name\": \"academic_literature_6ac08aae4a9de359ec55db33a81fcc92_page_1.jpg\", \"s3_pdf_path\": \"s3://qa-huawei/exmaple/pdf/academic_literature_6ac08aae4a9de359ec55db33a81fcc92_page_1.pdf\", \"s3_img_path\": \"s3://qa-huawei/exmaple/img/academic_literature_6ac08aae4a9de359ec55db33a81fcc92_page_1.jpg\", \"pharse_level\": \"中\", \"pdf_category\": \"论文\", \"pdf_layout\": [\"复合布局\", \"双栏\"], \"pdf_element\": [\"公式-印刷体\", \"文本-印刷体\", \"背景-白色\"], \"pdf_watermark\": \"否\", \"pdf_language\": \"英语\"}\r",
    last_modified: "2025-04-29T10:56:53Z"
  }

  return (
    <BucketBlock
      id="1"
      dataSource={dataSource}
      path="s3://bucketname/"
      onChange={handleParamsChange}
      showPagination={false}
      showDownload={false}
    />
  )
}

Component options

BucketBlock

属性	类型	默认值	说明
id	string	-
path	string	-	s3 file path
dataSource	BucketType | BucketType[]	-	数据源，可以是单个文件/目录对象或数组
loading	boolean	false	加载状态
onClose	() => void	-	关闭按钮点击回调
onDownload	(path: string) => void	-	下载按钮点击回调
pageSize	number	50	每页显示的条目数
pageNo	number	1	当前页码
onPathCorrection	(path: string) => void	-	路径修正回调
showGoParent	boolean	false	是否显示返回上级目录按钮
showPagination	boolean	true	是否显示分页器
showOpenInNewTab	boolean	false	是否显示在新标签页打开按钮
showDownload	boolean	true	是否显示下载按钮
closeable	boolean	false	是否可关闭
onChange	(params: Partial) => void	-	参数变更回调
onLinkClick	(path: string) => void	-	json视图 链接 点击回调
onKeyClick	(field: string, value: string	number	object) => void
renderBucketItem	(item: BucketType) => React.ReactNode	-	自定义渲染列表项
previewUrl	string	-	预览文件的URL
onOpenInNewTab	(path: string) => void	-	在新标签页打开回调
style	React.CSSProperties	-	自定义样式
className	string	-	自定义类名

BucketType 类型定义

interface BaseBucketType {
  type: 'directory' | 'file' | 'bucket'
  path: string
  content: string | null
  size: number | null
  created_by: string | null
  last_modified: string | null
  mimetype: string | null
}

BucketParams 类型定义

interface BucketParams {
  pageSize?: number
  pageNo?: number
  path?: string
}