# @bytetrade/files-picker-wc 中文文档

规范地址：https://npmcn.com/package/%40bytetrade/files-picker-wc/

版本：0\.2\.9
npm 元数据更新时间：2026-10-28T03:43:04.862Z
中文译文更新时间：2026-11-09T19:04:35.628Z
软件包许可：GPL-3\.0-or-later

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

原始 npm 页面：https://www.npmjs.com/package/%40bytetrade/files-picker-wc
原文对照：https://npmcn.com/package/%40bytetrade/files-picker-wc/?lang=original
项目主页：https://github.com/beclab/olares-files-picker/tree/main/packages/files-picker-wc#readme
源码仓库：https://github.com/beclab/olares-files-picker

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

- 包体积（解压后）：2.2 MB，10 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：vue ^3\.5\.0，@bytetrade/files-core ^0\.2\.9
- 首次发布：2026-08-21T13:44:27.104Z
- 最新版本发布：2026-10-28T03:43:04.680Z
- 近 30 天下载量：1820（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：14（近 12 个月 14 个）

## 中文简介

Olares 文件夹拾取器 Web 组件

## 安装

```sh
npm install @bytetrade/files-picker-wc
```

也可以使用：`pnpm add @bytetrade/files-picker-wc`、`yarn add @bytetrade/files-picker-wc`、`bun add @bytetrade/files-picker-wc`

## README

# @ bytetrade/ files- pickers-wc 页面存档备份,存于互联网档案馆

自成一体 `<olares-folder-picker>` 从 Olares 文件树中选择文件夹(或文件)的自定义元素。 由 Vue 3 自定义元素和一个阴影 DOM 所建;样式通过 `styles` 选项,所以任何主机捆绑程序都会起作用.

## 两个构建条目

| 导入 | 套装 | 何时使用 |
| --- | --- | --- |
| `@bytetrade/files-picker-wc` | 相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相 外部化 `vue` 财务报告和审定财务报表 `@bytetrade/files-core`。 。 。 . | 已经拥有这些软件包(Quasar app)的主机. **需求** 这样 `configureFiles({ browser })` 和拾取者 `getFilesConfig().browser` 共享一个文件核心单子 . |
| `@bytetrade/files-picker-wc/standalone` | 完全自成一体(~323 kB). | 没有Vue / 文件-core(如React)的主机. |

从寄存器根运行这些 ; `files-core` 必须先建,因为 对等建构对照其输出编译.

```bash
npm install
npm run build     # files-core, then this package's peer + standalone bundles
npm run smoke     # jsdom checklist against the standalone artefact
npm run lint
```

## 属性

| 属性 | Prop | 默认 | 页:1 |
| --- | --- | --- | --- |
| `origins` | `origins` | 驱动、同步、 外部、 缓存、 数据、 Common | 逗号分隔 `DriveType` 数值 |
| `pick-type` | `pickType` | `FOLDER` | `FOLDER` 或者说 `FILE` |
| `icon-base` | `iconBase` | `/img` | 文件/文件夹 SVG 美术的基础 URL |
| `locale` | `locale` | `en-US` | 更改时的热更新标签 |
| `theme` | `theme` | `light` | `light` 编号 : `dark` (单位:千美元)`data-theme`(中文(简体) ) |
| `mobile-root-title` | `mobileRootTitle` | 当前选中标题 | 主机本地化的移动存储页标题 |
| `mobile-root-label` | `mobileRootLabel` | 空 | 储存地点上方的主机定位 |
| `mobile-sync-title` | `mobileSyncTitle` | 同步组标签 | 主机本地化的图书馆网页标题 |
| `mobile` | `mobile` | `auto` | `auto` 从一个区域选择布局 `max-width: 720px` 查询; `true` 编号 : `false` 强制移动页面堆栈或桌面对话框。 见 [MOBILE SHARD.md (英语)](https://npmcn.com/package/%40bytetrade/files-picker-wc/MOBILE_SHARD.md) |
| `master-node` | `masterNode` | 虚假 | 限制主节点驱动器 |
| `base-url` | `baseUrl` | (图像) | 可选覆盖 |
| —— 说 | `token` | (图像) | 属性而非属性 |
| —— 说 | `transport` | (图像) | 属性而非属性 |

## 活动

| 活动 | 细节 |
| --- | --- |
| `pick` | `FOLDER`(单位:千美元) `FilePath` (车厢可以围成 `[FilePath]`) (中文(简体) ). `FILE`数字 : `FileItem[]`。 。 。 . |
| `cancel` | 无 |

## 必需: 注射 `FilesBrowserClient`

该元素从未与文件 HTTP API 本身交谈 。 打开前, 主机必须配置文件核心 :

```ts
import { configureFiles } from '@bytetrade/files-core/base';
import { registerOlaresFolderPicker } from '@bytetrade/files-picker-wc';

configureFiles({ browser: myClient /* + token, transport, … */ });
registerOlaresFolderPicker();

const el = document.createElement('olares-folder-picker');
el.setAttribute('pick-type', 'FOLDER');
el.setAttribute('locale', 'zh-CN');
el.addEventListener('pick', e => {
  /* … */
});
document.body.appendChild(el);
```

若为 `browser` 缺少, 拾取者靴子为空(`boot()` 返回较早.

## 两个布局

桌面布局是一个可调整的对话框(侧菜单+面包屑+可排序列). 移动版式为全屏底页,并有页面堆栈:先是驱动列表,再是上市. 水龙头打开文件夹( 触摸没有) `dblclick`),所以只能切换文件选择. 选择方式 `mobile`。 。 。 .

## 图标字体

图标是通过文档级别渲染的材料符号连接符 `@font-face` 以别名代替主机安装的任何设备`local(...)`) (中文(简体) ). 主办者 **子集** 他们的图标字体必须保留拾取者使用的绳子- `close`, (中文(简体) ), `arrow_back`, (中文(简体) ), `arrow_forward`, (中文(简体) ), `chevron_left`, (中文(简体) ), `keyboard_arrow_right`, (中文(简体) ), `check_circle` - 或这些格言成原始文本。 一个只扫描主机自身来源的子集脚本不会看到它们,因为它们生活在这个包的捆绑中. 在TermiPass中,它们被列入 `packages/app/scripts/icons/icons.allowlist.txt`。 。 。 .

## i18n (英语)

单独的目录覆盖 **内** 财务报告和审定财务报表 **日语** 只有这个 在Quasar软件内, `setFilesI18n` 向应用程序翻译员转发 所以每种语言都有效.

## 同行对第二 Vue / 文件核心副本

执行 **没有** 将对等方建为解决 _不同_ `@bytetrade/files-core` 比一个 `configureFiles` 被召唤的,拾取者将看见 `browser === undefined`。TermiPass Quasar 应用程序消耗对等条目并安装 `@bytetrade/files-core` 本身,所以两个解析到一个副本;外部反应应用程序应当使用 `./standalone` 打电话 `configureFiles` 从同一模块图(从包中再导出)中.

## 常见问题

### @bytetrade/files-picker-wc 是什么？

Olares 文件夹拾取器 Web 组件

### 如何安装 @bytetrade/files-picker-wc？

在项目目录运行 npm install @bytetrade/files-picker-wc，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.5\.0）、@bytetrade/files-core（^0\.2\.9）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @bytetrade/files-picker-wc 支持 TypeScript 吗？

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

### @bytetrade/files-picker-wc 支持 ESM 还是 CommonJS？

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

### @bytetrade/files-picker-wc 可以商用吗？

@bytetrade/files-picker-wc 使用 GPL-3\.0-or-later 许可。强 Copyleft：分发包含该代码的软件时，整个作品需以 GPL-3\.0 兼容许可开源，并附带专利与反锁定条款。仅内部使用不触发此义务。以上为概括，不构成法律意见，请以许可原文为准。

### @bytetrade/files-picker-wc 的下载量有多少？

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

### @bytetrade/files-picker-wc 还在维护吗？

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