集成到你的应用 React 组件

React 组件

<FileDrive> 就是完整的网盘：搜索、各个分区、列表和网格、详情、查看器、上传、共享和设置。它占满给它的高度，对你的 CSS 没有任何要求。

开始

放进页面

一个客户端组件，放在有高度的元素中。安装 Rebodocs 后，Word 文档会由它的引擎读取。

app/files/page.tsx

'use client';
import { FileDrive } from '@rebofiles/react';
import { pictureOfDocx, previewDocx, textOfDocx, thumbDocx, viewDocx } from '@rebofiles/react/rebodocs';

export default function Files() {
  return (
    <div style={{ height: 'calc(100vh - 64px)' }}>
      <FileDrive
        base="/api/files"
        title="Acme Files"
        language="es"
        theme="auto"
        headers={async () => ({ authorization: `Bearer ${await token()}` })}
        linkAddress={(token) => `${location.origin}/shared?link=${token}`}
        previewDocument={previewDocx}
        viewDocument={viewDocx}
        thumbDocument={thumbDocx}
        pictureDocument={pictureOfDocx}
        textDocument={textOfDocx}
      />
    </div>
  );
}

属性

属性：服务器

属性	Type	What it does
base	`string`	@rebofiles/server 的路由所在位置。默认为 `/api/files`。
client	`DriveClient`	用你自己的客户端代替 `base`：保存在页面中的网盘（`createMemoryClient`），或与页面其他部分共用的客户端。
headers	`() => Record<string, string>`	发往你服务器的每个请求都带上的请求头，例如会话令牌；绝不会发送到存储桶。可以是异步函数。
linkAddress	`(token) => string`	网盘链接指向的地址：你放置 <SharedLink> 的页面。默认为本页加 `?link=`。
settings	`boolean`	设为 `false` 时不显示设置界面及打开它的按钮。

属性

属性：外观

属性	Type	What it does
language	`'en' \| 'es' \| 'zh'`	低于每个人自己的选择，高于网盘的设置。默认为英文。
texts	`Texts`	另一种语言的文字，键与 `TEXTS.en` 相同。
theme	`'light' \| 'dark' \| 'auto'`	低于每个人自己的选择，高于网盘的设置。`auto` 跟随系统。
title	`string`	显示在网盘上方的名称：你的应用名，或 “Files”。
logo	`ReactNode`	放在标题前面的内容；默认为 ReboFiles 的标志。在 mountDrive 中是一个 Node。
defaultView	`'list' \| 'grid'`	首次显示文件夹时使用的视图。
layout	`'full' \| 'compact'`	`compact`：左侧没有侧栏，“新建”和各个位置排成一条放在列表上方，适合放在页面中较小的区域。
className	`string`	加在 `.rf-drive` 上的自定义类名，用于设置它的自定义属性。
chrome	`boolean`	设为 `false` 时去掉其顶栏和分区，由你的应用放置自己的：用 `go`、`search`、`upload`、`newFolder`、`requestFiles`、`share`、`openSettings` 控制它。
root	`EntryId`	云盘保持在其中的文件夹，如你的某条记录的文件：从这里开始，路径从这里开始，不会去到其上层。
onState	`(state) => void`	每次变化时告知所处位置：分区、文件夹及路径、搜索内容、数量和空间，供你自己的栏使用。
controls	`RefObject<DriveControls>`	React：在其存在期间放入云盘的 `go`、`search`、`upload`、`newFolder`、`requestFiles`、`share` 和 `openSettings`。

属性

属性：文件

属性	Type	What it does
checkUploads	`boolean`	设为 `false` 时上传前不在网盘中查找相同文件或同名文件：名称冲突时自动加上 “(2)”。
requestTemplates	`boolean`	设为 `false` 时不提供请求模板：既不能从模板开始，也不能存为模板。
qr	`boolean`	设为 `false` 时不显示已创建请求的二维码。
onOpen	`(file, url) => void`	双击或按 Enter 打开文件时，按你自己的方式处理。未提供时由网盘的查看器显示。
fields	`'show' \| 'edit' \| false`	应用在条目上的字段，显示在详情中：显示（默认）、由有重命名权限的人在详情中修改（`edit`），或不显示。

属性

属性：Word 文档

属性	Type	What it does
previewDocument	`(bytes) => DocumentPreview`	.docx 的详情：标题和开头几段。`previewDocx`。
viewDocument	`(element, bytes) => ShownDocument`	.docx 的查看器：逐页或全部显示，带 Rebodocs 的缩放和打印。`viewDocx`。
thumbDocument	`(bytes) => Promise<HTMLElement>`	在网格中绘制其第一页，直到生成它的图片为止。`thumbDocx`。
pictureDocument	`(bytes, size, type, quality) => Promise<Blob>`	将第一页生成为图片，在上传时制作，并按网盘的尺寸保存为缩略图。`pictureOfDocx`。
textDocument	`(bytes) => string`	文档中的文字，在上传时发送，供搜索使用。`textOfDocx`。
onOpenDocument	`(file, url) => void`	为 .docx 添加“在 Rebodocs 中打开”按钮，调用时会传入读取它的地址。
compareDocument	`(element, before, after) => ShownDocument`	在历史中为当前版本以外的每个版本提供“比较”：在页面上显示变化。`compareDocx`。
newDocument	`() => Uint8Array`	“上传”菜单中的“新建文档”：在当前文件夹中创建一个由用户命名的空 .docx，然后打开。`newDocx`。

属性

属性：事件

属性	Type	What it does
onChange	`() => void`	每次在网盘中做出改动后调用，供页面中其他显示这些内容的部分更新（mountDrive；在 React 中由 provider 通知各个 hooks）。
live	`boolean`	实时显示他人所做的更改，来自服务器的 `/events`。默认为 `true`；在 React 中由 provider 决定。

共享

链接页面

收到链接的人无需登录即可看到的内容：可阅读的文件、其中的文件夹、打包下载的 .zip；如果设置了密码，会先要求输入。

app/shared/page.tsx

'use client';
import { SharedLink } from '@rebofiles/react';
import { useSearchParams } from 'next/navigation';

export default function Shared() {
  return <SharedLink base="/api/files" token={useSearchParams().get('link') ?? ''} theme="auto" />;
}

用 linkAddress 让网盘的链接指向这个页面。

须知

属性变化时

language、theme、title 和各个回调在变化时立即生效，无需重新启动。
base、client 或 headers 变化时会重新创建网盘的客户端；正在上传的内容继续使用旧的客户端。
放在你自己的 <DriveProvider> 中时，它会使用该 provider 的客户端和文字：它做的操作，你的 hooks 都能看到。