# @bigbinary/neeto-folders-frontend 中文文档
规范地址：https://npmcn.com/package/%40bigbinary/neeto-folders-frontend/
版本：2\.1\.0
npm 元数据更新时间：2026-11-03T07:25:00.091Z
中文译文更新时间：2026-11-08T02:15:02.511Z
软件包许可：UNLICENSED
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40bigbinary/neeto-folders-frontend
原文对照：https://npmcn.com/package/%40bigbinary/neeto-folders-frontend/?lang=original
项目主页：https://github.com/bigbinary/neeto-folders-nano
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：1.2 MB，87 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.13
- 运行依赖：3 个
- peer 依赖：qs 6\.16\.2，url 0\.11\.4，yup 0\.32\.11，antd 5\.22\.1，util ^0\.12\.5，ramda 0\.29\.0，react 18\.3\.1，buffer ^6\.0\.3，formik 2\.4\.6，i18next 22\.5\.1，zustand 4\.4\.2，dompurify 3\.4\.17，js-logger 1\.6\.1，react-dom 18\.3\.1，classnames 2\.5\.1，stream-http 3\.2\.0，tailwindcss 3\.4\.14，lucide-react ^0\.469\.0，react-helmet ^6\.1\.0，@dnd-kit/core 6\.3\.1，os-browserify 0\.3\.0，react-i18next 12\.3\.1，vm-browserify 1\.1\.2，@babel/runtime 7\.29\.7，react-toastify 8\.0\.2，tty-browserify 0\.0\.1，path-browserify ^1\.0\.1，https-browserify 1\.0\.0，mixpanel-browser ^2\.45\.0，react-router-dom 5\.3\.3，crypto-browserify 3\.12\.1，source-map-loader 4\.0\.1，stream-browserify ^3\.0\.0，@bigbinary/neetoui 8\.8\.3，@dnd-kit/modifiers ^9\.0\.0，@honeybadger-io/js 6\.10\.1，@bigbinary/neeto-cist 1\.0\.17，@honeybadger-io/react 6\.1\.25，@tanstack/react-query 5\.59\.20，@bigbinary/neeto-atoms 1\.1\.2，@bigbinary/neeto-icons 1\.20\.89，@bigbinary/neeto-hotkeys 1\.0\.9，@bigbinary/neeto-molecules 5\.9\.15，@tailwindcss/container-queries ^0\.1\.1，@tanstack/react-query-devtools 5\.59\.20，@bigbinary/neeto-commons-frontend 4\.14\.8，@bigbinary/neeto-filters-frontend 4\.6\.3
- 首次发布：2025-04-09T05:50:46.455Z
- 最新版本发布：2026-11-03T07:24:59.906Z
- 近 30 天下载量：7891（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：80（近 12 个月 43 个）
## 中文简介
一个回波作为新纳米结构,配置,数据等的真理来源.
## 安装
```sh
npm install @bigbinary/neeto-folders-frontend
```
也可以使用：`pnpm add @bigbinary/neeto-folders-frontend`、`yarn add @bigbinary/neeto-folders-frontend`、`bun add @bigbinary/neeto-folders-frontend`
## README
# 需要文件夹 - 不
这个 `neeto-folders-nano` 作为新纳米的真相来源 结构、配置、数据等.
## 目录
1. [用主机应用程序开发](https://npmcn.com/package/%40bigbinary/neeto-folders-frontend/#readme-development-with-host-application)
- [发动机](https://npmcn.com/package/%40bigbinary/neeto-folders-frontend/#readme-engine)
- [安装](https://npmcn.com/package/%40bigbinary/neeto-folders-frontend/#readme-installation)
- [使用量](https://npmcn.com/package/%40bigbinary/neeto-folders-frontend/#readme-usage)
- [前端软件包](https://npmcn.com/package/%40bigbinary/neeto-folders-frontend/#readme-frontend-package)
- [安装](https://npmcn.com/package/%40bigbinary/neeto-folders-frontend/#readme-installation-1)
- [发展指示](https://npmcn.com/package/%40bigbinary/neeto-folders-frontend/#readme-instructions-for-development)
- [使用量](https://npmcn.com/package/%40bigbinary/neeto-folders-frontend/#readme-usage-1)
2. [出版指令](https://npmcn.com/package/%40bigbinary/neeto-folders-frontend/#readme-instructions-for-publishing)
## 用主机应用程序开发
### 发动机
#### 安装
1. 将此行添加到您的应用程序的 Gemfile 中 :
```ruby
source "NEETO_GEM_SERVER_URL" do
# ..existing gems
gem 'neeto-folders-engine'
end
```
2. 然后执行:
```shell
bundle install
```
3. 在表格中添加所需的迁移 `db/migrate` 文件夹。 运行以下 命令复制从引擎到主机应用程序的迁移.
```shell
rails g neeto_folders_engine:install
bundle exec rails db:migrate
```
#### 使用量
1. 扩展文件夹模式 `NeetoFoldersEngine::Folder` 基础课。 下面是样本代码 定义一个 `RecordingFolder` 通过扩展 `NeetoFoldersEngine::Folder` 管理录音.
```ruby
class RecordingFolder < NeetoFoldersEngine::Folder
has_many :recordings, -> { unscope(where: :deleted_at) }, foreign_key: :folder_id, dependent: :nullify
```
`NeetoFoldersEngine` 也期望一个实例方法 `items` 将在 扩展的班级。 这样可以使 `NeetoFoldersEngine` 以跟踪 文件夹中的项目数。 下面是Neeto Record的样本代码.
```ruby
def items
recordings
end
```
2. 包含 `NeetoFoldersEngine::Folderable` 应属于的模型中 到文件夹中。 排队很重要。 包含 `Folderable` 之后 `Deletable` 从 neto 普通后端允许 `Folderable` 以覆盖 `soft_delete` 方法.
```ruby
include NeetoFoldersEngine::Folderable
```
3. `NeetoFoldersEngine` 还暴露了控制器类 `NeetoFoldersEngine::FoldersController` 与 `index`, (中文(简体) ), `show`, (中文(简体) ), `create`, (中文(简体) ), `update`, (中文(简体) ), `destroy`, (中文(简体) ), `bulk_update`, (中文(简体) ), `bulk_destroy`,以及 `reorder` 动作 管理文件夹 。 主机应用程序可以扩展此类以管理他们的 文件夹。 确保正确配置这些路线 行动.
类似于 `RecordingFolder < NeetoFoldersEngine::Folder`,则 `NeetoFoldersEngine::FoldersController` 基础控制器期望a `folders` 在扩展类中定义的方法允许控制器 属于特定类型的目标文件夹实例。 如下所述: neetoRecord 中提取记录文件夹的样本定义 由扩展控制器管理.
```ruby
class Api::V1::FoldersController < NeetoFoldersEngine::FoldersController
private
def folders
@_folders ||= @organization.recording_folders.includes(:recordings)
end
end
```
### 前端软件包
#### 安装
1. 添加数据 `neeto-folders-frontend` 软件包到 `package.json`
```shell
yarn add @bigbinary/neeto-folders-frontend
```
### 发展指示
检查 [前端软件包开发指南](https://neeto-engineering.neetokb.com/p/a-d34cb4b0) 用于开发前端软件包的分步指令.
#### 使用量
`neeto-folders-frontend` 导出一组组件、 钩子、 utils 和常数 将并入主机应用程序.
上述导出大多接受一定的配置对象 属性。 以下为默认结构 `config` 对象。 你们可以 将自己的配置对象作为参数或道具来自定义行为 适合主机产品。 在常数文件中定义此常数并自定义 某些属性,例如必要的参数.
```js
{
type: "FOLDER", // A unique type key for query keys.
maxDepth: 2, // Maximum allowed depth for folder tree
folderPath: "/folders/:folderId", // Path for handling URL redirections and params matching.
invalidationKeys: [], // For invalidation purposes. Keys in this array will be invalidated along with folders.
reorderMode: "rearrange", // If reorder pane should mount in positional `reorder` mode or simple `rearrange` mode.
// Taxonomy
labels: {
folder: t("common.folder"),
folders: t("common.folders"),
items: t("common.items"),
items: t("common.items"),
}
params: {}, // Params to be passed to APIs along with other params. Can be used for sorting and similar.
api: { // Folder CRUD methods.
fetch: noop,
get: noop,
create: noop,
update: noop,
destroy: noop,
bulkUpdate: noop,
bulkDestroy: noop,
},
folderActions: { getMoreActions: (node) => [...], getAddActions: (node) => [...] },
itemActions: { getMoreActions: (node) => [...], getAddActions: (node) => [...] }
}
```
#### 构成部分
```js
import * as components from "@bigbinary/neeto-folders-frontend/components";
```
1. `FoldersContext`: 此组件使所有提示和窗体与 文件夹。 请确保此组件包含在您的部分 应用.
###### 道具 :
- `config`: 自定义文件夹行为的配置对象 .
样本使用量 :
```jsx
import { FoldersContext } from "@bigbinary/neeto-folders-frontend/components";
// ....
```
2. `FoldersTree`: 此组件使树上的文件夹成为树结构 .
###### 道具 :
- `config`: 自定义文件夹行为的配置对象 .
样本使用量 :
```jsx
import { FoldersTree } from "@bigbinary/neeto-folders-frontend/components";
// ....
;
```
3. `FoldersList`: 组件生成文件夹列表。 如果没有文件夹是 选中/ 激活, 制作根文件夹列表 。 如果在选定的文件夹内, 制作子文件夹列表。 活动文件夹根据 匹配 URL 中的参数 `folderPath` 输入 `config` 对象.
###### 道具 :
- `config`: 自定义文件夹行为的配置对象 .
- `selection`: 显示所选文件夹 ID 的文件夹 ID 数组 批量选择.
- `onSelect`: 为文件夹项选择复选框时触发的回调 用于批量选择.
样本使用量 :
```jsx
import { FoldersList } from "@bigbinary/neeto-folders-frontend/components";
// ....
;
```
4. `MoveToFolderPane`: 此组件可用于主机应用程序以移动 选项。 组件将当前文件夹列表以 收音机按钮并引用回调来选择文件夹.
###### 道具 :
- `isOpen`: 控制窗格能见度的布尔值.
- `item`: 要移动到文件夹中的项目对象.
- `config`: 自定义文件夹行为的配置对象 .
- `submitButtonProps`:平板"投降"按钮覆盖.
- `cancelButtonProps`:平板"取消"按钮覆盖.
- `removeButtonProps`: 句子"从文件夹中移除"按钮覆盖. 请注意: 按钮将被隐藏,除非 `onRemove` 提供道具.
- `onSubmit(folderId)`: 以所选文件夹的 ID 引用回调 提交.
- `onClose()`: 关闭窗格时引用回调 .
- `onRemove()`: 删除文件夹按钮时引用回调 按键。 注意, 除非提供此道具, 按钮会被隐藏 .
- `onSelect`: 为文件夹项选择复选框时触发的回调 用于批量选择.
样本使用量 :
```jsx
import { MoveToFolderPane } from "@bigbinary/neeto-folders-frontend/components";
// ....
;
```
5. `AddEditPane`: 此组件可用于主机应用程序来添加或编辑文件夹.
##### 道具 :
- `config`: 自定义文件夹行为的配置对象 .
- `onClose()`: 关闭窗格时引用回调 .
- `folderSid`: 这是可选的。 创建新文件夹的父文件夹的 SID 。 如果没有提供,请使用来自 URL 的激活文件夹 .
- `setFocusField`: Ref rec callback 设置在窗格打开时聚焦名称输入字段.
样本使用量 :
```jsx
import { AddEditPane } from "@bigbinary/neeto-folders-frontend/components";
// ....
;
```
#### 钩子
```js
import * as hooks from "@bigbinary/neeto-folders-frontend/hooks";
```
1. `useFolders(config)`: 返回树上所有文件夹数据的钩 结构.
###### 参数 :
- `config`: 自定义文件夹行为的配置对象 .
###### 回返情况:
- `isLoading`数字 : `true` 当数据被获取到活动文件夹时. `false` 否则.
- `folders`: 树结构中所有指定类型文件夹的数据.
2. `useFolder(config)`: 返回与当前活动相关的数据的钩 基于 URL 参数的文件夹.
###### 参数 :
- `config`: 自定义文件夹行为的配置对象 .
###### 回返情况:
- `isLoading`数字 : `true` 当数据被获取到活动文件夹时. `false` 否则.
- `folderId`: 以 URL param 为基础的当前活动文件夹的SID.
- `folder`: 如果存在当前文件夹的数据.
3. `useFolderActions(config)`: 钩子返回一组回调以触发 来自主机应用程序的动作.
###### 参数 :
- `config`: 自定义文件夹行为的配置对象 .
###### 回返情况:
- `isPending`数字 : `true` 当行动正在进行时. `false` 否则.
- `onAdd()`: 启动文件夹创建动作 .
- `onEdit(folder)`: 启动文件夹编辑动作。 接受 `folder` 数据 作为争论.
- `onMove(folder)`: 启动文件夹编辑动作。 接受 `folder` 数据 作为争论.
- `onDelete(folder)`: 启动文件夹删除动作。 接受 `folder` 数据作为参数.
- `onReorder()`: 启动重排文件夹动作 。 打开“ 重排 ” 窗关.
#### 用户
```js
import * as utils from "@bigbinary/neeto-folders-frontend/utils";
```
1. 路径 :
###### 参数 :
- `folders`: 树状结构中的文件夹数据,由 `useFolders` 钩.
- `folderId`: 目标文件夹 id.
将一个平整的文件夹数组从根文件夹返回到当前文件夹 编号 `folderId`用于显示面包屑和类似物.
#### 常数
```js
import * as constants from "@bigbinary/neeto-folders-frontend/constants";
```
1. `QUERY_KEYS`: 使用查询密钥以瞄准回放查询动作, 如 无效.
- `[QUERY_KEYS.FOLDERS]`: 瞄准每个与文件夹相关的查询.
- `[QUERY_KEYS.FOLDERS, config.folderType]`: 目标每个查询 特定类型的文件夹.
- `[QUERY_KEYS.FOLDERS, config.folderType, QUERY_KEYS.LIST]`目标文件夹 列表中选择一个选项.
- `[QUERY_KEYS.FOLDERS, config.folderType, QUERY_KEYS.DETAILS, folderId]`数字 : 带有 id 文件夹的目标文件夹细节 `folderId`
## 出版指令
咨询 [构建和释放软件包](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages) 关于如何出版的详细指南.
## 常见问题
### @bigbinary/neeto-folders-frontend 是什么？
一个回波作为新纳米结构,配置,数据等的真理来源\.
### 如何安装 @bigbinary/neeto-folders-frontend？
在项目目录运行 npm install @bigbinary/neeto-folders-frontend，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：qs（6\.16\.2）、url（0\.11\.4）、yup（0\.32\.11）、antd（5\.22\.1）、util（^0\.12\.5）、ramda（0\.29\.0）、react（18\.3\.1）、buffer（^6\.0\.3）、formik（2\.4\.6）、i18next（22\.5\.1）、zustand（4\.4\.2）、dompurify（3\.4\.17）、js-logger（1\.6\.1）、react-dom（18\.3\.1）、classnames（2\.5\.1）、stream-http（3\.2\.0）、tailwindcss（3\.4\.14）、lucide-react（^0\.469\.0）、react-helmet（^6\.1\.0）、@dnd-kit/core（6\.3\.1）、os-browserify（0\.3\.0）、react-i18next（12\.3\.1）、vm-browserify（1\.1\.2）、@babel/runtime（7\.29\.7）、react-toastify（8\.0\.2）、tty-browserify（0\.0\.1）、path-browserify（^1\.0\.1）、https-browserify（1\.0\.0）、mixpanel-browser（^2\.45\.0）、react-router-dom（5\.3\.3）、crypto-browserify（3\.12\.1）、source-map-loader（4\.0\.1）、stream-browserify（^3\.0\.0）、@bigbinary/neetoui（8\.8\.3）、@dnd-kit/modifiers（^9\.0\.0）、@honeybadger-io/js（6\.10\.1）、@bigbinary/neeto-cist（1\.0\.17）、@honeybadger-io/react（6\.1\.25）、@tanstack/react-query（5\.59\.20）、@bigbinary/neeto-atoms（1\.1\.2）、@bigbinary/neeto-icons（1\.20\.89）、@bigbinary/neeto-hotkeys（1\.0\.9）、@bigbinary/neeto-molecules（5\.9\.15）、@tailwindcss/container-queries（^0\.1\.1）、@tanstack/react-query-devtools（5\.59\.20）、@bigbinary/neeto-commons-frontend（4\.14\.8）、@bigbinary/neeto-filters-frontend（4\.6\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @bigbinary/neeto-folders-frontend 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @bigbinary/neeto-folders-frontend 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @bigbinary/neeto-folders-frontend 需要什么版本的 Node\.js？
package\.json 的 engines 字段要求 Node\.js \>=22\.13。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。
### @bigbinary/neeto-folders-frontend 可以商用吗？
@bigbinary/neeto-folders-frontend 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。
### @bigbinary/neeto-folders-frontend 的下载量有多少？
根据 npm 官方下载统计，@bigbinary/neeto-folders-frontend 在 2026/10/08 – 2026/11/06 这 30 天内被下载 7,891 次，日均约 263 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @bigbinary/neeto-folders-frontend 还在维护吗？
最新版本 2\.1\.0 发布于 2026/11/03（5 天前）；至今共发布 80 个版本，其中过去 12 个月发布了 43 个；首次发布于 2025/04/09。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。