# @brftech/filex 中文文档

规范地址：https://npmcn.com/package/%40brftech/filex/

版本：0\.59\.0
npm 元数据更新时间：2026-11-06T22:11:35.644Z
中文译文更新时间：2026-11-08T14:54:48.494Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40brftech/filex
原文对照：https://npmcn.com/package/%40brftech/filex/?lang=original
项目主页：https://github.com/BRF-Tech/filex#readme
源码仓库：https://github.com/BRF-Tech/filex

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

- 包体积（解压后）：41.7 MB，110 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- 首次发布：2026-07-04T17:12:51.572Z
- 最新版本发布：2026-11-06T22:11:35.283Z
- 近 30 天下载量：3226（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：149（近 12 个月 149 个）

## 中文简介

filex Web 组件 - 滴入自定义元素( 3 运行时捆绑)

## 安装

```sh
npm install @brftech/filex
```

也可以使用：`pnpm add @brftech/filex`、`yarn add @brftech/filex`、`bun add @brftech/filex`

## README

![filex logo](https://raw.githubusercontent.com/BRF-Tech/filex/main/docs/logo.png)

# @ brftech/ filex (英语)

下潜 **`<filex-explorer>` 网络组件** 联 合 国 [文件x](https://github.com/BRF-Tech/filex) 文件管理器。 环绕 第3组 `<FileExplorer>` 来自SFC `@brftech/filex-core` 和船舶 vue 运行时间捆绑在 - 从任何CDN 装入, 嵌入到任意 框架,不需要同行.

## 安装

### 无

```bash
npm i @brftech/filex
```

```js
// Side-effect import registers the element.
import '@brftech/filex';
```

### CDN( 无构建步骤)

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@brftech/filex/dist/filex.js"></script>
```

> ⚠ **`@brftech/filex` 0.55需要一个文件x 0.55服务器.** 打开哪些文件进行编辑 (单位:千美元)`edit_kinds`),输入限制(`limits`)和版本行 (单位:千美元)`release`, (中文(简体) ), `commit`, (中文(简体) ), `built`)来自服务器的 `/api/files/capabilities`; 软件包没有它自己的列表要倒下 回来,所以反对一个旧的服务器 没有提供编辑和什么都没有 作为办公文档打开。 用软件包更新服务器 (单位:千美元)[API.md (英语)](https://github.com/BRF-Tech/filex/blob/main/docs/API.md)) (中文(简体) ).

> ⚠ **打印的应用程序** (单位:千美元)`ui.print`, filex 0.55 从 filex 自己的指纹 打印页面,该页面为您页面中的探索者框架。 只有文件x, 其桌面 应用程序和服务器 `FILEX_FRAME_ANCESTORS` 可能设置该页面,例如 其它网站列出您的页面来源, 否则该应用程序会被告知 打印为 `unavailable` (单位:千美元)[安全头和框架](https://github.com/BRF-Tech/filex/blob/main/docs/CONFIGURATION.md#security-headers-and-framing)) (中文(简体) ).

## 样式

**没有 CSS 导入, 没有 `<link>`。 。 。 .** 捆绑带了探险家的样式表 在 Java 脚本中附加 `<head>` 一次,第一次,一个 元素挂载 - 所以上面的两行都是页需要的, 不管它们 来自CDN或捆绑商。 没错 `@brftech/filex-core`工作表字节 字节,这就是保持这个分布和Vue的外观不变的原因.

A 类 `style.css` 也为那些愿意为 工作表本身 :

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@brftech/filex/dist/style.css">
```

外观是 `--fe-*` 自定义属性; 设置在高于 要素(`:root`和探险家跟随 要件 故意的 故意的 **无阴影根** 正是因为这个原因 - 主页 符号、暗模式和字体伸入内部。 结果是一个宿主 也不能填补其中的空档,所以顶端栏上的产品标记来自 `config.brand` (单位:千美元)`{ name, markUrl }`) (中文(简体) ).

## 使用

### 普通 HTML 语言

```html
<filex-explorer
  api-base="https://files.example.com"
  locale="tr"
  theme="auto"
></filex-explorer>

<script type="module">
  const el = document.querySelector('filex-explorer');
  // ⚠ Configure BEFORE the element is registered. A static `import` would be
  // hoisted above these lines, mount the explorer with no credentials and
  // spend its first listing on a request that can only fail.
  el.config = {
    apiBase: 'https://files.example.com',
    auth: { kind: 'bearer', token: '<jwt>' },
    rootPath: 'main://projects/acme',
  };
  // ⚠ The payload is e.detail[0] - see Events below.
  el.addEventListener('error', (e) => console.error(e.detail[0].message));
  el.addEventListener('share-created', (e) => navigator.clipboard.writeText(e.detail[0].url));
  await import('@brftech/filex');   // registers <filex-explorer>
</script>
```

### 在非虚拟框架内

元素只是一个普通的 DOM 自定义元素 - Angular, Svelte, jS,没问题.

### `<filex-connections>` - 在没有浏览器的情况下到达服务器

包注册 a **第二届** 键。 文件x 可以作为 **第3条**, (中文(简体) ), **SFTP 系统**, (中文(简体) ), **FTPS 系统**, (中文(简体) ), **NFSv3 请检查url=值 (帮助)** 财务报告和审定财务报表 **网络数据交换**,并加载 `filex mount`· ; 这是用户对每个协议的证书的薄荷 新建指令 _那个_ 部署而不是带有角度的模板 括号里。 它是相同的组件文件x 管理员面板和文件x 桌面应用程序渲染 - 在任何地方没有第二套指令 .

> 自兹 **页:1** 此元素只是“ 如何连接” 表面 。 这个 `initial-tab` 属性和属性 `changed` 事件随存储器一起消失 选项卡:它不创建、编辑或删除存储。 储存在 文件管理面板.

```html
<filex-connections></filex-connections>

<script type="module">
  import '@brftech/filex';
  const el = document.querySelector('filex-connections');
  el.setAttribute('closable', '');     // show a close button, emits `close`
  el.config = {
    apiBase: 'https://files.example.com',
    auth: { kind: 'bearer', token: '<jwt>' },
    locale: 'tr',
  };
  el.addEventListener('error', (e) => console.error(e.detail));
</script>
```

> 配置它通过 `config` **属性**属性 - `el.config = { ...el.config, locale: 'tr' }`。 。 。 . `buildConfig` 合并 `{...attributes, ...config}` 且配置对象获胜,所以属性是 对一个密钥来说 配置是不会带的 那个错误 v0.19.0中发运的: 弹壳在文件列表被保留时被土耳其化 英文和所报告的要素 `locale === 'tr'` 整个时间.

见 [文件/文件](https://github.com/BRF-Tech/filex/blob/main/docs/PROTOCOLS.md)。 。 。 .

## 属性

简单的属性被自动分解到下面 `config` 道具 :

| 属性 | 地图到 |
| --- | --- |
| `api-base` | `config.apiBase` |
| `endpoint` | `config.endpoint` (遗产Vuefinder-compat) |
| `locale` | `config.locale` - 说吧 `en`, (中文(简体) ), `tr`,或者服务器有语言包用于(`es`, (中文(简体) ), `de`, (中文(简体) ), `fr`(中文(简体) ). 这是元素的 **默认**:访问者在探险家所选取的语言 QQ-语言(被放在浏览器中),在证书是他们的时他们的账户语言,他们的浏览器语言居于首位(英语:[语言](https://github.com/BRF-Tech/filex/blob/main/docs/INTEGRATION.md#language)) (中文(简体) ). 右到左语言 **此元素** 从右到左, 从自己的地方,而不是主机页面. |
| `theme` | `config.theme` (单位:千美元)`light` 编号 : `dark` 编号 : `auto`(中文(简体) ) |
| `trash-visible` | `config.trashVisible` |
| `sidenav` | `config.sideNav` - 导航面板(“ + 新” 菜单 ^ 家/ 与我共享 / 我的股份 / 近期 / Starred / Trash ) - 您的标签分为个人和团队两个组 : Apps 部分, 每个安装的应用程序自己的一行 : 此调用器可以到达的存储 。 现或 `="true"` 开始, `="false"` 关闭; 缺席保留默认值, 默认值是打开的 . |
| `connections` | `config.connections` - 面板的"连接"(连接指南;0.57前的"如何连接"和"API密钥"条目). 默认, 除以下 `ui-profile="simple"` 当呼叫者是时,“ API 密钥” 将另降 **应用** 符号 - 见 `config.callerKind` 见下文. |
| `ui-profile` | `config.uiProfile` - 说吧 `"standard"` (违约)或 `"simple"` (一个平板,只列表/网格,没有标签条,没有分割的平板,"连接"/"API密钥"关闭). 两个值,没有第三个:任何其他字符串决定 `"standard"` 并记录一个控制台线 命名它,所以 `"drive"` 配置文件为 **删除** v. 4.0.0 之后不再减少任何东西 - 通过 `"simple"` 换成这样 没错 **没有** 决定外观:"+新"菜单,带有QQK芯片的一个宽头搜索字段,Type/Owner/Modified/Size过滤行,网格中的文件夹/Files部分(由日期标题取而代之,而由Modified排序),信息面板中的细节/活性以及存储行是现在每个嵌入的绘图,没有字符串通过. |

对于任何更丰富的(自动,自定义终点,共享基础,.)设置 `config` JS在元素创建后的财产. 顶部属性合并 属性.

`config.callerKind` - 说吧 `"user"` (a) 个人)或 `"app"` (一体化:东道主) 应用的代理,一个机器人. `"app"` 离开属于一个的表面 身份 : **API 密钥**, (中文(简体) ), **近期**, (中文(简体) ), **编剧**, (中文(简体) ), **与我共享**上传 存储,倒盘和"连接"留下,所以嵌入体仍然是嵌入体. 关闭它和元素询问服务器( O)`GET /api/files/capabilities` → `caller_kind`)),这是权威的,因为只有服务器知道一个符号的 类型; 当您的页面已经知道时设置它, 以节省之前的时间 回答土地问题。 ⚠ 代理每个访客 一个共享 API 令牌是 `"app"` 大小写 - 见 [文献/磁共振](https://github.com/BRF-Tech/filex/blob/main/docs/MCP.md#token-kinds---user-vs-app)。 。 。 .

## 活动

土著 `CustomEvent`\- 听着 `addEventListener`。 。 。 **SFC的有效载荷是: `event.detail[0]`没有 `event.detail`**: Vue 发送自定义元素的发出 作为 `new CustomEvent(name, { detail: args })`时 `args` 是发射的 参数列表. `event.detail.url` 因此为 `undefined`,用于 `selection-change` - 其有效载荷本身是一个阵列- `event.detail.length` 总是 `1`。 。 。 .

| 活动 | 有效载荷 - `event.detail[0]` |
| --- | --- |
| `error` | `{ message, context? }` |
| `share-created` | `{ path, url, pin }` |
| `file-opened` | `{ path, basename }` |
| `upload-progress` | `{ uploadId, percent, done }` |
| `selection-change` | `Array<{ path, basename, type }>` |
| `open-app-store` | _(无)_ - 导航板 **应用商店** 排队被按下。 只绘制于 `config.appStorePage: true` 当服务器向人显示屏幕时(您有存储屏幕)`GET /api/app-store` → `visible`(中文(简体) ) |

## 构建

```bash
pnpm build      # vue-tsc + vite lib build → dist/filex.js + dist/style.css
```

> ⚠⚠ `sideEffects` 内 `package.json` 必须保持匹配 **每个** 存档 构建发射( e)`./dist/*.js`, (中文(简体) ), `./dist/*.cjs`),而非姓名列表. 条目 仅仅是再出口: `customElements.define` 样式表注入 住在旁边的花草块里 和一份不覆盖花草块的清单 让捆绑者放下它 - 然后元素永远不会注册, 工作表 从未注入,而一个 React 或 Vite 主机会使一个空页面没有出错 随便哪里. `web/tests/deploy/packageLook.test.ts` 是警卫.

## 许可证

麻省理工学院

## 常见问题

### @brftech/filex 是什么？

filex Web 组件 - 滴入自定义元素\( 3 运行时捆绑\)

### 如何安装 @brftech/filex？

在项目目录运行 npm install @brftech/filex，或使用 pnpm add / yarn add / bun add。

### @brftech/filex 支持 TypeScript 吗？

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

### @brftech/filex 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @brftech/filex 可以商用吗？

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

### @brftech/filex 的下载量有多少？

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

### @brftech/filex 还在维护吗？

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