# @bynder/compact-view 中文文档 规范地址：https://npmcn.com/package/%40bynder/compact-view/ 版本：7\.0\.0 npm 元数据更新时间：2026-10-28T22:37:11.667Z 中文译文更新时间：2026-11-08T21:27:09.133Z 软件包许可：UNLICENSED 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40bynder/compact-view 原文对照：https://npmcn.com/package/%40bynder/compact-view/?lang=original ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1.5 MB，667 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：8 个 - peer 依赖：react ^19\.2\.5，react-dom ^19\.2\.5 - 首次发布：2019-01-10T09:24:57.226Z - 最新版本发布：2026-10-28T22:37:11.471Z - 近 30 天下载量：119803（2026-10-09 至 2026-11-07，npm 官方下载统计） - 已发布版本数：75（近 12 个月 13 个） ## 中文简介 字节收缩视图 ## 安装 ```sh npm install @bynder/compact-view ``` 也可以使用：`pnpm add @bynder/compact-view`、`yarn add @bynder/compact-view`、`bun add @bynder/compact-view` ## README # 字节收缩视图 — react 组件 可嵌入的拜德资产拾取器,作为 [`@bynder/compact-view`](https://www.npmjs.com/package/@bynder/compact-view) 国家防范机制一揽子计划. 用于CDN/`window.BynderCompactView.open()` 使用,参见 [文档](https://developers.bynder.com/universal-compact-view)。 。 。 . ## 安装 ```sh npm install @bynder/compact-view ``` 同伴依赖性 : `react` 财务报告和审定财务报表 `react-dom` (单位:千美元)`^19.2.5`) (中文(简体) ). ## 出口 ```ts import { CompactView, Login, Modal, // types type CompactViewProps, type CompactViewLoginProps, type CompactViewModalProps, } from '@bynder/compact-view'; ``` ## 使用量 `CompactView` 必须在内部 ``。 。 。 . `` 是可选的——如果省略,则挂载 `` 输入您的容器元素. ```jsx import React, { useState } from 'react'; import { createRoot } from 'react-dom/client'; import { CompactView, Login, Modal } from '@bynder/compact-view'; const assetFieldSelection = ` name url originalUrl derivatives { thumbnail webImage } ... on Video { previewUrls } `; function App() { const [isOpen, setIsOpen] = useState(false); const onSuccess = (assets, additionalInfo) => { console.log(assets, additionalInfo); setIsOpen(false); }; return ( <> setIsOpen(false)}> ); } const root = createRoot(document.getElementById('app')); root.render(); ``` 对于装有容器的变体,可降低 `` 通过 `isContainerMode` 改为 ``数字 : ```jsx
``` 更多见 [符号文档](https://developer-docs.bynder.com/ui-components/#compact-view)。 。 。 . ## API 密码 ### `` 道具( r)`CompactViewProps`(中文(简体) ) 所有道具都是可选的. | Prop | 类型 | 默认 | 说明 | | --- | --- | --- | --- | | `onSuccess` | `(assets: OnSuccessAsset[], info: AdditionalInfo) => void` | `console.log` | 使用所选资产和 `additionalInfo` 对象( 当前) `{ selectedFile? }`) (中文(简体) ). | | `language` | `"en_US" | "nl_NL" | "de_DE" | "fr_FR" | "es_ES"` | `"en_US"` | UI语言. 只有"地语"的前两个字符用于装入翻译. | | `mode` | `"SingleSelect" | "SingleSelectFile" | "MultiSelect"` | `"MultiSelect"` | 选择模式 . | | `assetTypes` | `AssetType[]` | `["IMAGE", "AUDIO", "VIDEO", "DOCUMENT"]` | 允许的资产类型。 值在 API 表面是忽略大小写 . | | `assetFieldSelection` | `string` | 见 `defaultAssetFieldSelection` | 返回的资产的图形QL 字段选择 `onSuccess`。此选择以外的字段是 `undefined`。 。 。 . | | `assetFilter` | `AssetFilterJson` | 无 | 打开时使用的预定义过滤器 . | | `defaultSearchTerm` | `string` | 无 | 搜索输入的初始值 . | | `defaultImageDerivativeName` | `string` | 无 | 图像衍生工具名称返回为 `selectedFile` 页:1 `SingleSelectFile`。 。 。 . | | `defaultVideoDerivativeName` | `string` | 无 | 视频衍生工具名称以 `selectedFile` 页:1 `SingleSelectFile`。 。 。 . | | `selectedAssets` | `string[]` | `[]` | 要预选的资产ID 。 在单选模式中,只使用上一个ID. | | `theme` | `Theme` | 无 | 重置(见下文). | | `hideExternalAccess` | `boolean` | `false` | 从资产和收藏中删除对外部 DAM 的访问. | | `hideLimitedUse` | `boolean` | `false` | 从网格中隐藏有限用途资产. | | `hideSwitch` | `boolean` | `false` | 隐藏资产/组合切换器. | | `hideDefaultDerivatives` | `boolean` | `false` | 隐藏默认衍生工具 `webImage`, (中文(简体) ), `thumbnail` 财务报告和审定财务报表 `mini` 从每类资产的衍生工具下调。 原始资产和其他衍生工具仍可使用. | | `selectAllOption` | `boolean` | `false` | 在 `MultiSelect` 模式. | | `noCache` | `boolean` | `false` | 在 GraphQL 请求中禁用 HTTP 缓存 . | | `isContainerMode` | `boolean` | `false` | 挂起时需要 `` 在您的 DOM 容器内而不是 ``。 。 。 . | | `resetStoreOnMount` | `boolean` | `false` | 单位 `isContainerMode`,在挂载时重置内部存储器(搜索、过滤、选择、路由)。 被忽略了其他方式——非容器模式总是被重置. | | `enableDASH` | `boolean` | `false` | 包括 HLS 中的 DASH 流线链接 `streamingLinks` 视频资产. | | `enableDATPermissionManagement` | `boolean` | `false` | 何时 `true`, DAT UI("新变换"链接和变换编辑器中预设的拾取器)在经过认证的用户 DAT 权限上被锁定 `module_permissions` 在进入标志。 何时 `false`, DAT UI 总是可用,预设取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取. | ### `` 道具( r)`CompactViewLoginProps`(中文(简体) ) | Prop | 类型 | 说明 | | --- | --- | --- | | `portal` | `{ url: string; editable?: boolean }` (单位:千美元)`PortalConfig`(中文(简体) ) | 默认门户 URL. `editable: false` 将压缩视图锁定到单个门户( 默认) `true`) (中文(简体) ). | | `language` | 与 `CompactView.language` | 本地化登录屏幕. | | `authentication` | `{ getAccessToken: () => string; hideLogout?: boolean }` | 通过提供访问符来跳过交互式 OAuth 流 . `hideLogout: true` 隐藏登录按钮. | | `onLogout` | `() => void` | 用户日志出后调用 . | | `children` | `React.ReactNode` | 一般来说 ``。 。 。 . | ### `` 道具( r)`CompactViewModalProps`(中文(简体) ) | Prop | 类型 | 说明 | | --- | --- | --- | | `isOpen` | `boolean` | 控制能见度. | | `onClose` | `() => void` | 用背景点击、逃跑或关闭按钮调用. | | `style` | `React.CSSProperties` | 适用于模式包装器(例如:. `{ width: '90%' }`) (中文(简体) ). | ### 类型 ```ts type AssetType = 'AUDIO' | 'DOCUMENT' | 'IMAGE' | 'VIDEO' | 'ARCHIVE'; type SelectionMode = 'SingleSelect' | 'SingleSelectFile' | 'MultiSelect'; type File = { url: string; width?: number; height?: number; fileSize?: number; }; type PortalConfig = { url: string; editable?: boolean; }; type AssetFilterJson = { predefinedAssetType?: AssetType[]; collectionId?: string; predefinedMetapropertiesOptions?: Record>; searchTerm?: string; predefinedTagNames?: string[]; isLimitedUse?: boolean; showToolbar?: boolean; }; type Theme = { colorPrimary?: string; colorButtonPrimary?: string; colorButtonPrimaryLabel?: string; colorButtonPrimaryActive?: string; colorButtonPrimaryHover?: string; colorButtonPrimaryHoverLabel?: string; }; type VideoPreset = { presetId: string; name: string; format: string; previewUrl: string; }; type AdditionalInfo = { selectedFile?: File }; interface OnSuccessAsset { id: string; files: Record; name?: string; description?: string; databaseId?: string; createdAt?: string; originalUrl?: string; publishedAt?: string; tags?: string[]; type?: AssetType; updatedAt?: string; url?: string; extensions?: string[]; metaproperties?: { nodes: OnSuccessAssetMetaproperty[] }; textMetaproperties?: OnSuccessAssetTextMetaproperty[]; derivatives?: { thumbnail?: string; webImage?: string }; previewUrls?: string[]; streamingLinks?: { hls?: string; dash?: string; embedCode?: string }; videoPresets?: VideoPreset[]; } type OnSuccessCallback = (assets: OnSuccessAsset[], info: AdditionalInfo) => void; ``` `OnSuccessAsset` 反映默认的 GraphQL 字段选择。 有习惯 `assetFieldSelection`,未在 `OnSuccessAsset` 将不会被键入 —— 投放到自定义接口读取 . ## 常见问题 ### @bynder/compact-view 是什么？ 字节收缩视图 ### 如何安装 @bynder/compact-view？ 在项目目录运行 npm install @bynder/compact-view，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.2\.5）、react-dom（^19\.2\.5）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @bynder/compact-view 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @bynder/compact-view 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @bynder/compact-view 可以商用吗？ @bynder/compact-view 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。 ### @bynder/compact-view 的下载量有多少？ 根据 npm 官方下载统计，@bynder/compact-view 在 2026/10/09 – 2026/11/07 这 30 天内被下载 119,803 次，日均约 3,993 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @bynder/compact-view 还在维护吗？ 最新版本 7\.0\.0 发布于 2026/10/29（10 天前）；至今共发布 75 个版本，其中过去 12 个月发布了 13 个；首次发布于 2019/01/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。