# @campminder/components 中文文档

规范地址：https://npmcn.com/package/%40campminder/components/

版本：0\.8\.0
npm 元数据更新时间：2026-11-09T16:14:33.957Z
中文译文更新时间：2026-11-09T18:55:37.706Z
软件包许可：未声明

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

原始 npm 页面：https://www.npmjs.com/package/%40campminder/components
原文对照：https://npmcn.com/package/%40campminder/components/?lang=original

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

- 包体积（解压后）：177 kB，87 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：2 个
- 首次发布：2026-09-14T13:51:06.441Z
- 最新版本发布：2026-11-09T16:14:33.731Z
- 近 30 天下载量：1842（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：14（近 12 个月 14 个）

## 中文简介

> 公开npm发布. 安装和渲染: [`docs/consuming-the-shell.md`](https://npmcn.com/package/docs/consuming-the-shell.md). > 在此工作: [`CONTRIBUTING.md`](https://npmcn.com/package/CONTRIBUTING.md)。 。 。 .

## 安装

```sh
npm install @campminder/components
```

也可以使用：`pnpm add @campminder/components`、`yarn add @campminder/components`、`bun add @campminder/components`

## README

# @ campminder/ 组件

> 公开npm发布. 安装和渲染: [`docs/consuming-the-shell.md`](https://npmcn.com/package/docs/consuming-the-shell.md)。 。 。 . 在这里工作: [`CONTRIBUTING.md`](https://npmcn.com/package/CONTRIBUTING.md)。 。 。 .

Campminder chrome:左取导航,上行吧,超级用户旗. Lit网络组件, 构成-不可知论,只渲染他们交出的东西.

## 为什么一个包而不是三个

家族判决 [25854号](https://dev.azure.com/CampMinderLLC/CampMinder/_workitems/edit/25854) 明确 边导航和上边栏是 **"一发炮弹,按历史分出两发子弹,而不是按 设计。"** 把它们装入三个不同的包裹里 就能承受那起事故 3个版本号码、3个发布决定和一个消费者 安装了三样东西来得到一个外壳. 合并后发布的软件包是断开 每个人的变革;现在,在任何出版物发表之前,将它们合并起来,没有代价.

子路径条目保留真正重要的颗粒性:

```ts
import '@campminder/components/side-nav'
import '@campminder/components/top-bar'
```

一个只想要左侧导航的消费者不会拉出上行酒吧的代码.

### 依附物由进口的下层加成

此软件包声明 `lit` 没有别的了. `axios`, (中文(简体) ), `@carbon/web-components` 财务报告和审定财务报表 `@material/web` 转自 `core-js` 脚手架上显示和 删除了 2026-09-02 : 本包中没有进口到它们.. **什么都没有 `core-js`是因为 `apps/side-nav`, (中文(简体) ), `apps/top-bar` 或者说 `apps/super-user-banner` 也可以进口**所以他们 是在他们死之前的上游 他们坐进去了 `dependencies`, (中文(简体) ), 没有 `devDependencies`所以每个消费者都会安装两个完整的设计系统 制作菜单.

如果7楼上行端口或8楼上行横幅端口需要一个,则写出 页:1 `import` 补入后. 不预先声明对没有 ——出版的套装中未使用的依赖是每位消费者支付的费用 什么都没有.

## 端口来源

| 条目 | 端口从 | ADO 层 |
| --- | --- | --- |
| `side-nav` | `core-js/apps/side-nav` (单位:千美元)`@campminder/side-nav` 1.5.0) 联合国 | 3-4楼 |
| `top-bar` | `core-js/apps/top-bar` (单位:千美元)`@campminder/top-bar` 0.0.111 (单位:千美元) | 7楼 |
| `super-user-banner` | `core-js/apps/super-user-banner` (0.8.6) (中文(简体) ) | 8楼 |

`core-js` 不断为已有的消费者制作拷贝。 这是副本,不是 - 判决规则2.

## 进来时脱去衣服

港口是最便宜的时刻:这里还没有消费者,所以不需要 保持向后兼容。 这是选择什么不能复制,而不是重构活代码.

**边导航**

-   **`BodyPaddingController`** - 注射剂 `html body { padding-left: 168px !important; }` 输入 `document.head`壳体的网格拥有现在的空间.
-   **`initSearchIntegration()`** 联 合 国 `setTimeout(setupSearchBarListener, 100)` 重新武装 - 民调DOM永远 在任何组成 不搜索.
-   **`document.querySelector('search-bar')`** 时间 `SideNav.ts:129` 财务报告和审定财务报表 `:477`。 。 。 .
-   **`SIDENAV_STORAGE_KEY = 'isSideNavCollapsed'`** – 一个源头上的全球密钥两个贝壳 将分享。 外壳每个传送门都有它的名称空间.
-   **`src/data/data.ts`** - 基础64固定。 树为地产.

**上边栏** ——端口7层,2026-09-08. 本列表现为记录而非预测.

-   **整个CDN脚本加载器.** `loadWebComponents()`, (中文(简体) ), `getCdnUrl()`, (中文(简体) ), `WEB_COMPONENTS_PATH`, (中文(简体) ), `BASE_DOMAIN`, (中文(简体) ), `FALLBACK_CDN_HOST`,则 `searchReady` 状态 页:1 `webComponentsUrl` 属性。 附录a `<script type="module">` 改为 `document.head` 指向硬码 `cdn.*.campminder.com` 宿主,纯粹如此 `search-bar` 将自己注册. **这个计划并不知道** 它命名为 登记探测器和渲染器 不是脚本注射 更严重 违反一条规则 搜索一个插槽 取消了整个设备.
    
-   **`customElements.get('search-bar')`** 时间 `TopBar.ts:58`,则 `<search-bar>` 生效时间 `:333`,则 `enableSearchWidget` 属性。 搜索是一个命名 **`<slot name="search">`**无条件制造的外壳, 没有民意调查. `search-bar` 因此为 **未移植** 在第一阶段.
    
-   **所有搜索扩展状态** —— 说 `searchExpanded`, (中文(简体) ), `handleSearchExpanded`, (中文(简体) ), `handleSearchClose`, (中文(简体) ), `renderSearchCloseButton()`和两个 `document.dispatchEvent(new CustomEvent('search-expanded'))` 曾经有过的电话 侧向导航可以听到它们。 第一阶段的船没有搜索,所以州永远无法成为 没错. **搜索时丢失 :** 上游崩溃的页面信息块和 用户在手机上搜索时的下拉。 重新推断出来 时间档元素驱动器,而不是作为文件级广播.
    
-   **全部定位完毕.** `topOffsetPx` 财务报告和审定财务报表 `leftOffsetPx`,则 `isSideNavCollapsed` 状态, 页:1 `calculatedLeftOffset` 盖特, `syncWithSideNavState()`, (中文(简体) ), `initSideNavIntegration()`, (中文(简体) ), `handleSideNavToggle`,并导入 `shared/navigation-constants.ts` (单位:千美元)`SIDENAV_ANIMATION`, (中文(简体) ), `SIDENAV_DIMENSIONS`, (中文(简体) ), `SIDENAV_STORAGE_KEY`, (中文(简体) ), `SIDENAV_TOGGLE_EVENT`) (中文(简体) ). `LAYOUT` 内 `@campminder/campminder-shell` 单曲 源而外壳的网格应用. 作出 `<section>` 没有 `style` 属性。 阅读副导航 `localStorage` 键是查询一个兄弟.
    
-   **所有JS设备检测.** `Utils/device-css-classes.ts` 财务报告和审定财务报表 `Utils/mobile-detection.ts` 不在这里。 反应是媒体的询问 已输入 `styles.ts` 与阶级驱动的重复。 见 `TopBar.styles.ts`对一个行为中立的页面标题断点的评论 简化这个曝光.
    
-   **`data/data.ts`** 基础64固定装置,以及 `index.css` -- 页面级别 `:root` 财务报告和审定财务报表 `body` 造型,这是东道主关心的问题.
    
-   **`assets/Icons/CloseIcon.ts`** - 复制到其他五个,然后删除:唯一的 消费者是搜索关闭按钮。 附带导航 `CloseIcon`,所以没有 输了 剩下的五个住在 `assets/TopBarIcons/` 枪管后面,命名 `XSvgIcon`,匹配侧导航 `assets/SideNavIcons/` 而不是上游地区 无前缀 `assets/Icons/` 一个小写导出.
    
-   碳和材料: **没什么好脱的.** 核实 2026-09-08 无文件 `core-js/apps/top-bar/src` 进口 `@carbon/web-components` 或者说 `@material/web`编辑 长期注解,他们退休是单独和可选择的 仍然持有的财产, 但此端口没有添加, 因此此软件包仍然声明 `lit` 没有别的了.
    
-   **`@import url(fonts.googleapis.com/...)`** - 错过了这层楼,剥了衣服 8楼,与4楼的副导航工作相匹配。 见"旗下"一节 以下为测量.
    
-   **7个上游安全模式被拒绝,没有复制** —— 说 `link.url` 内 `href` 内 `window.open()`· ; `popup_properties` 转至 `window.open()` 逐字记录,然后 其UI-抑制功能; `target="_blank"` 没有 `rel`而弹出路径没有 `noopener`· ; `feature.value` 通过点燃 `unsafeHTML`; 和 : `icon_url` 编号 : `profile_url` 编号 : `logo_url` 到达 `<img src>` 无人守护. **为何每个都拒绝 信任 让他们生活而不是理论的边界,一经说明——在 [`Utils/safe-url.ts`](https://npmcn.com/package/%40campminder/components/src/top-bar/Utils/safe-url.ts)**旁边有46个单位测试. 预计第8层将继承这个问题,没有——见下文.
    

**旧地名**,因为此元素使用标记名称:

| 上游 | 给 |
| --- | --- |
| `<top-bar>` | `<cm-top-bar>` |
| `data` (基数64属性) | 不变——仍 `data`,仍然以基数64-解码 |
| `user` | **不见了** 它唯一的消费者是 `<search-bar>`主持人的配置,它现在供应 任何它的插槽 |
| `top-offset-px`, (中文(简体) ), `left-offset-px`, (中文(简体) ), `enable-search-widget`, (中文(简体) ), `web-components-url` | **不见了** |
| —— 说 | `<slot name="search">` |

**超级用户禁用程序**

重命名元素及其属性 **实值** 允许。 它作为原始标记从 `ReactAppController.cs:163`,所以WebForms在没有软件包边缘的情况下消耗它——但是 限制阶段 2 _切换_,而不是这个端口:根据规则2,这是一份副本转发和 `core-js` 继续制作该页面实际装入的拷贝。 规则2026-09-02,倒置 以前坐在这里的禁令.

-   **`position: fixed; top: 0; left: 0; width: 100%`**,以及 **页:1 `ResizeObserver`** 那个 比较 `scrollWidth` 反对 `window.innerWidth` 切换一个 `overflowed` 类 (加上阴影根) `id` 仅存于 `getElementById`) (中文(简体) ). 两个都去了 因为贝壳拥有布局. **为什么每个都被拒绝 潜在的缺陷是 观察员曾随身携带 [`SuperUserBanner.styles.ts`](https://npmcn.com/package/%40campminder/components/src/super-user-banner/SuperUserBanner.styles.ts)**,哪个 替换者住的地方。 这一点值得了解: 为什么 `ReactAppController` 不得不释放一个 `hasSuperUserBanner` 类别和预置容器 因此删除此处的4个声明删除两个主机端的原因 第二阶段的环绕工作.
-   **`@import url(fonts.googleapis.com/…)`** 财务报告和审定财务报表 **`index.css`** (页数) `:root` 财务报告和审定财务报表 `body` 造型,宿主关心). 这个 `@import` 也还在 [`TopBar.styles.ts`](https://npmcn.com/package/%40campminder/components/src/top-bar/TopBar.styles.ts) - 侧向导航掉到4楼了, 7楼错过了,8楼抓住了 档案里有推理和 计量.

**不需要URL的守护,这就是一个发现.** `top-bar`是因为 [`Utils/safe-url.ts`](https://npmcn.com/package/%40campminder/components/src/top-bar/Utils/safe-url.ts) 被丢在 `top-bar/` 编辑 8楼是第二个呼叫者,并显示正确的形状。 没错 不: 三条横幅的值都是数据库源码并跨过相同的未信任 边框,但没有一个是 URL,也没有一个是标记,所以点出文本是整个 辩护。 测试表明,该部件没有 `a`, (中文(简体) ), `img`, (中文(简体) ), `iframe`, (中文(简体) ), `source` 或者说 `script` 一点也不 提拔警卫离开 `top-bar/` 因此,仍然有一个 打电话者,但还是没有正当理由.

**它确实需要两种不同的纠正方法,这两种方法都在审查中找到.** 一个工作 即使冒名顶替,环境无懈可击 无法在工作上失败 涉及注射:

-   上游的标志 **无法打开** - 任何不确切的东西 `staging` 冷静下来了 `local` 徽章,包括文字 `production` 财务报告和审定财务报表 `undefined` 主持人的 `GetEnvironmentName()` 真正的回归。 一个在生产中冒充的超级用户看到了 和笔记本电脑一样的徽章 现有三道徽章相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相; `environmentBadgeClass` 内 [`SuperUserBanner.ts`](https://npmcn.com/package/%40campminder/components/src/super-user-banner/SuperUserBanner.ts) 带有推理.
-   港口有 **介绍** 卷轴容器( y)`overflow-x: auto`并隐藏它 滚动条, 徽章是最后一个有弹性的孩子—— 所以只推了一个长长的客户名 徽章从视线之外,没有负担,在一个片段,没有 `tabindex`上游地区 没有 `overflow` 所以这个是倒退 而不是继承 名称 现在切出和滚动条不再被压制.

**旧地名**,因为此元素使用标记名称:

| 上游 | 给 |
| --- | --- |
| `<super-user-banner>` | `<cm-super-user-banner>` |
| `superUser=` (减为 `superuser`(中文(简体) ) | `super-user` |
| `activeEnvironment=` (减为 `activeenvironment`(中文(简体) ) | `active-environment` |
| `client=` | 不变 - `client` |
| `id="super-user-banner"` 在阴影根 | **不见了** ——只存在于 `ResizeObserver` |

旧的拼写被忽略了,而不是别名,一个测试断言——所以剪接 而不是默默地制造出一面空的旗帜.

## 规则

> 组件自成一体;外壳拥有布局. 任何组件都不得触碰 `document.body`, (中文(简体) ), `document.head`,或查询一个兄弟.

## 解除副航线飞行

`<cm-side-nav>` 揭发一个解雇入境点:

```ts
dismissFlyout(restoreFocus: boolean): void
```

它关闭了飞出 当一个是开放的, 并且是一个不op, 当没有人是。 每一个触发器 途经的路线——飞出自己的跑道和转道——通航的路线 鼠标离开 `cm-mega-menu-close` 事件(现在包含) `detail.restoreFocus`),以及主机 shell 的页面级别 Escape 和外部指针 按下——所以下面的焦点规则在一个地方适用,没有触发器可以绕过 这个.

**专注之道.** 只有当 `restoreFocus` 真实 _财务报告和审定财务报表_ 焦点是 现在在飞出中;然后进入打开“飞出”的类别控制 飞出,回到导航器的崩溃控制中 控制已经不存在。 焦点从不离开文档正文,从不 从页面上的其他地方拉入导航器——一个人打入 窗体字段,或按到飞出外的指针,保持它们的焦点.

在修改这个守则时值得铭记的两个后果:

-   目标读取 **在此之前** 打开类别状态已清除。 这个 目标通过 `category-hovered` 类,该类从该类中衍生出来 状态; 清除首先留下无物可找, 默默地重新引入 滴出焦点错误 .
-   页级逃逸和外部指针监听属于 **外壳**,哪个 电话 `dismissFlyout` 在每个分档导航上—— `true` 为逃跑, `false` 为外部指针所显示。 此组件没有记录 `document` 或者说 `window`,按照上述规则,和 `mega-menu-isolation.test.ts` 观察这一点.

## 常见问题

### @campminder/components 是什么？

公开npm发布\. 安装和渲染: docs/consuming-the-shell\.md\. \> 在此工作: CONTRIBUTING\.md。 。 。 \.

### 如何安装 @campminder/components？

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

### @campminder/components 支持 TypeScript 吗？

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

### @campminder/components 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @campminder/components 可以商用吗？

@campminder/components 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @campminder/components 的下载量有多少？

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

### @campminder/components 还在维护吗？

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