# @epilot/zenith-react 中文文档

规范地址：https://npmcn.com/package/%40epilot/zenith-react/

版本：0\.9\.0
npm 元数据更新时间：2026-11-13T13:01:08.057Z
中文译文更新时间：2026-11-13T19:45:21.853Z
软件包许可：未声明

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

原始 npm 页面：https://www.npmjs.com/package/%40epilot/zenith-react
原文对照：https://npmcn.com/package/%40epilot/zenith-react/?lang=original
项目主页：https://gitlab.com/e-pilot/product/frontend/zenith#readme
源码仓库：https://gitlab.com/e-pilot/product/frontend/zenith

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

- 包体积（解压后）：10 MB，846 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：react \>=18，react-dom \>=18
- 首次发布：2026-09-17T14:35:58.654Z
- 最新版本发布：2026-11-13T13:01:07.593Z
- 近 30 天下载量：9716（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：50（近 12 个月 50 个）

## 中文简介

Zenith React 组件,以 Griffel 为样式并设计为孤立的微前端发送

## 安装

```sh
npm install @epilot/zenith-react
```

也可以使用：`pnpm add @epilot/zenith-react`、`yarn add @epilot/zenith-react`、`bun add @epilot/zenith-react`

## README

# @ epilot/ zenith- react

用于 Zenith 的可访问 React 组件,其样式为 Griffel 并设计用于 独立微前端交付.

## 安装

```sh
npm install @epilot/zenith-react
```

`@epilot/zenith-runtime` 安装它; 除非主机, 不覆盖它 服务相同的 `/v1` ABI (英语). 捆绑者配置外部化的应用程序 `@epilot/zenith-runtime/v1` 从主机获得运行时间( root- config in the 门户:保持外部,不要添加、固定或捆绑自己的运行时间. 托肯斯是建造的,所以没有第三个包裹. 反应和反应 DOM 18 或 新的是同龄人.

Zenith是一个普通的每个应用依赖,而不是通过一个 共享组件- 图书馆导入图.

## 渲染器

```tsx
import { Button } from "@epilot/zenith-react"

export const Example = () => <Button variant="primary">Continue</Button>
```

没有设置步骤: 组件安装其符号样式表 调制。 要在启动时安装它 :

```ts
import { prepareCoreTokens } from "@epilot/zenith-react/delivery"

await prepareCoreTokens()
```

可选;无网.

需要设计令牌的应用程序样式从 `@epilot/zenith-react/tokens`。不要将符号 CSS 添加为第二个样式表, 而不写入生成的 `--zenith-<hash>-*` 以手取名.

拖放重排顺序 `List` 是一个单独的条目,所以应用 使平原 `List` 不捆绑 dn- kit :

```tsx
import { ListItem } from "@epilot/zenith-react"
import { SortableList } from "@epilot/zenith-react/list/sortable"
```

天顶船没有 `.css` 文档及其 `exports` 地图没有样式表条目 : 没什么可进口的。 从伏特港出发,放下它 `style.css`, (中文(简体) ), `preflight.css` 财务报告和审定财务报表 `font.css` 进口和不添加替换——代号CSS 上面是唯一的样式表,软件包自行安装.

使用 `AppearanceBoundary` 范围化外观,也必须达到门户 内容——子树上的主题或表面属性不遵循对话框, 弹出、 选择、 工具提示或菜单 `document.body`。 。 。 .

## 自己开屏

天顶船组件,不是布局系统:没有 `Grid`, (中文(简体) ), `Stack`, (中文(简体) ), `Box` 或者说 `Spacer`永远不会有。 组件之间的间距是 属于你的.

`makeZenithStyles` 实值 **为此公开的API**,从 软件包根并列 `mergeClasses` 财务报告和审定财务报表 `shorthands`。这是同样的格里菲尔 API Zenith自己的组件使用,所以您的布局将它的CSS与您的 组件,并依赖于没有从其它地方装入的样式表.

```tsx
import { makeZenithStyles, shorthands } from "@epilot/zenith-react"
import { spacingLayout1, containerXl } from "@epilot/zenith-react/tokens"

const useStyles = makeZenithStyles({
  page: {
    display: "flex",
    flexDirection: "column",
    maxWidth: containerXl,
    ...shorthands.gap(spacingLayout1),
  },
})
```

从 `@epilot/zenith-react/tokens`。一个字形十六进制,一个工具 类,来自另一个样式表,或原始像素值是屏幕如何漂移的 离开系统,停止跟随一个符号变化.

一个实用级的框架也起作用,但理解你所依赖的是: 这些课来自一个样式表 您的组件不载运 屏幕看起来像是由样式表的任意版本决定的 部署在旁边.

## 验证主机

-   根据其实际内容安全政策实施应用程序.
-   打开并关闭每个传送门组件 .
-   测试键盘顺序,焦点恢复,屏幕阅读器名称和出错状态.
-   测试两个独立捆绑的Zenith消费者 在一页,这是一个 支持的主机情景 .
-   测量实际进入和懒散块.

## 故意迁移

一次移动一面. 不重用自定义属性名称, 样式 选择器或来自另一个组件系统的内部DOM结构。 API 在何处 不同的,在应用程序边界上调整,一旦 表面完全在天顶上.

## 连接 MCP 客户端

Zenith 的只读模式上下文协议服务器动态运行 文档网站 `/api/mcp`它服务于组件API,设计符, 并直接为AI编码工具设计指南.

该目录由当前承诺构建 `latest` 释放是 所以它准确地描述了 `npm install @epilot/zenith-react` 安装——而不是未释放的工作 `main`。 。 。 .

将 MCP 客户端( 如 Cursor 或 Claude) 指向可流 HTTP 端点 :

```json
{
  "mcpServers": {
    "zenith": {
      "url": "https://zenith.epilot.cloud/api/mcp"
    }
  }
}
```

所有查询和工具严格只读,不需要全权证书.

## 探员

Zenith的技巧教一个编码代理使用上面的MCP;"编码代理" 文档页面列出其模式。 在克洛德码中,一个插件安装了 技能和 MCP 连接 :

```sh
claude plugin marketplace add https://gitlab.com/e-pilot/product/frontend/zenith.git
claude plugin install zenith@zenith
```

然后运行 `/zenith:build <screen>` 或者说 `/zenith:review`对于Codex, Cursor, , , , , , 副驾驶和OpenCode,将技能安装到 `npx skills add https://gitlab.com/e-pilot/product/frontend/zenith --skill zenith` 并添加到代理配置中的 MCP 端点。 "编码特工" 页面中的文档设置部分有每个代理的阶梯.

## 你得到的哪个版本

`npm install @epilot/zenith-react` 决定 `latest` 三角形, 即 手动; 自动 `next` 建立永不移动 `latest`。 。 。 .

未经证实的建筑 `next` 预发版本:

```sh
npm install @epilot/zenith-react@next
```

这些是两回选入——你给标签起名,范围像 `^0.1.0` 永远 解决了预先释放。 如果你采纳了精确的版本.

## 升级至0.2.0

0.2.0 将每个家族从拉迪克斯搬到基地UI,并为原始人服务 运行时间。 文档设置部分"升级为0.2.0"的页面 有步骤顺序 : 主机首先服务新运行时间( 与 `react` 财务报告和审定财务报表 `react-dom` 外部, 冲击包, 运行 `radix-to-base-ui` 代码 (它的输出通过您的 Pretier ),运行迁移扫描,添加测试 设置、 检查属性重命名, 并保留两个规则 混合了Volt 1.x和天顶.

## 参考文献

一揽子措施只采用无害环境管理,而且可动摇树木。 已解析的字元值为 `@epilot/zenith-react/tokens.json`用于测试, `@epilot/zenith-react/testing/setup.cjs` 联合国 `PointerEvent` jsdom 26岁及以上, Vitest 和 Jest) 以及可选的 Jest 助手 `@epilot/zenith-react/testing/jest-preset.cjs`。 。 。 .

文件网站载有组成部分参考、准则和实例 与上面的MCP端点相同的目录。 发展和缴款规则 住在仓库里.

## 常见问题

### @epilot/zenith-react 是什么？

Zenith React 组件,以 Griffel 为样式并设计为孤立的微前端发送

### 如何安装 @epilot/zenith-react？

在项目目录运行 npm install @epilot/zenith-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18）、react-dom（\>=18）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @epilot/zenith-react 支持 TypeScript 吗？

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

### @epilot/zenith-react 支持 ESM 还是 CommonJS？

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

### @epilot/zenith-react 可以商用吗？

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

### @epilot/zenith-react 的下载量有多少？

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

### @epilot/zenith-react 还在维护吗？

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