# @behindthemusictree/app-kit-ui 中文文档

规范地址：https://npmcn.com/package/%40behindthemusictree/app-kit-ui/

版本：34\.0\.0
npm 元数据更新时间：2026-11-07T12:04:50.396Z
中文译文更新时间：2026-11-07T21:06:05.401Z
软件包许可：ISC

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

原始 npm 页面：https://www.npmjs.com/package/%40behindthemusictree/app-kit-ui
原文对照：https://npmcn.com/package/%40behindthemusictree/app-kit-ui/?lang=original
项目主页：https://github.com/BehindTheMusicTree/app-kit#readme
源码仓库：https://github.com/BehindTheMusicTree/app-kit

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

- 包体积（解压后）：1.6 MB，32 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：7 个
- peer 依赖：next \>=14\.0\.0，react \>=18\.0\.0，react-dom \>=18\.0\.0，@tanstack/react-query \>=5\.0\.0，@behindthemusictree/ui ^0\.18\.0，@behindthemusictree/app-kit ^34\.0\.0
- 首次发布：2026-10-30T09:11:12.424Z
- 最新版本发布：2026-11-07T12:04:50.084Z
- 近 30 天下载量：2548（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：18（近 12 个月 18 个）

## 中文简介

在无头树上搭建的“MusicTree React ” 组件( popups, auth callback, 流派树)

## 安装

```sh
npm install @behindthemusictree/app-kit-ui
```

也可以使用：`pnpm add @behindthemusictree/app-kit-ui`、`yarn add @behindthemusictree/app-kit-ui`、`bun add @behindthemusictree/app-kit-ui`

## README

# app-kit-ui (英语)

`@behindthemusictree/app-kit-ui` ——"MusicTree"组件后面的样式(流行,OAuth召回) 屏幕,流派树),建于无头上 `@behindthemusictree/app-kit`。安装它以获取 BTMT外观;跳过后用app-kit的钩子来作自己的UI来得到不同的钩子.

## 子路径

```tsx
import { BasePopup, AuthPopup, NetworkErrorPopup, TrackUploadPopup } from "@behindthemusictree/app-kit-ui/popup";
import { AuthCallbackHandler } from "@behindthemusictree/app-kit-ui/auth";
import { GenreTreeView, TrackListSidebar, TrackItem, Rating } from "@behindthemusictree/app-kit-ui/genre-tree";
import "@behindthemusictree/app-kit-ui/genre-tree/styles.css";
```

## 同伴

`@behindthemusictree/app-kit` (只有一份,所以会话/Player/Popup上下文是共享的), `@behindthemusictree/ui`, (中文(简体) ), `@tanstack/react-query`, (中文(简体) ), `next`, (中文(简体) ), `react`, (中文(简体) ), `react-dom`. 尾风必须 扫描 `node_modules/@behindthemusictree/app-kit-ui/dist/**`。 。 。 .

## 主题合同

颜色来自 CSS 变量,定义为 `@behindthemusictree/brand` (单位:千美元)`tokens/theme.css`)或通过 您的样式表 :

| 脚本 | 用于 |
| --- | --- |
| `--color-primary`, (中文(简体) ), `--color-primary-hover` | 主要行动 |
| `--color-text` | 文本正文 |
| `--color-neutral-100` . `--color-neutral-700` (100、200、300、500、600、700) | 表面、 边框、 变音文本 |
| `--color-red-500`, (中文(简体) ), `--color-red-600`, (中文(简体) ), `--color-red-700` | 错误 |
| `--color-green-500` | 正在播放状态 |
| `--color-blue-500` | 链接和要点 |

第三方品牌颜色(Spotify,Google)保持文字化.

`PlayerPanel` 还读取了布局符号 `--layout-gutter`, (中文(简体) ), `--layout-band-top`, (中文(简体) ), `--layout-right-w` 财务报告和审定财务报表 `--layout-detail-panel-w` 从相同的样式表.

`GenreTreeView` 与 `placement="regions"` 套装 `--layout-left-w` 改为 `0px` 在文档中,当其信息面板被隐藏时,样式表可以拓宽中心列.

## 延长点

-   `GenreTreeView` 带 `className` 根( 默认时无外边距) 和 `showDisplayOptions` (默认) `true`)隐藏"Tree显示选项"组.
-   折叠道具( R)`renderArtistLink`, (中文(简体) ), `renderSummary`, (中文(简体) ), `renderTracksToolbar`,)替换 流派细节面板.

## 常见问题

### @behindthemusictree/app-kit-ui 是什么？

在无头树上搭建的“MusicTree React ” 组件\( popups, auth callback, 流派树\)

### 如何安装 @behindthemusictree/app-kit-ui？

在项目目录运行 npm install @behindthemusictree/app-kit-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：next（\>=14\.0\.0）、react（\>=18\.0\.0）、react-dom（\>=18\.0\.0）、@tanstack/react-query（\>=5\.0\.0）、@behindthemusictree/ui（^0\.18\.0）、@behindthemusictree/app-kit（^34\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @behindthemusictree/app-kit-ui 支持 TypeScript 吗？

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

### @behindthemusictree/app-kit-ui 支持 ESM 还是 CommonJS？

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

### @behindthemusictree/app-kit-ui 可以商用吗？

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

### @behindthemusictree/app-kit-ui 的下载量有多少？

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

### @behindthemusictree/app-kit-ui 还在维护吗？

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