# @elaraai/east-ui-components 中文文档

规范地址：https://npmcn.com/package/%40elaraai/east-ui-components/

版本：1\.0\.107
npm 元数据更新时间：2026-11-13T06:57:36.630Z
中文译文更新时间：2026-11-13T12:53:07.132Z
软件包许可：AGPL-3\.0-or-later

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

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

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

- 包体积（解压后）：39.3 MB，1015 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.0\.0
- 运行依赖：39 个
- peer 依赖：react ^19\.0\.0，react-dom ^19\.0\.0，@elaraai/east 1\.0\.107，@elaraai/east-ui 1\.0\.107
- 首次发布：2025-12-01T08:10:17.389Z
- 最新版本发布：2026-11-13T06:57:36.269Z
- 近 30 天下载量：3801（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：154（近 12 个月 154 个）

## 中文简介

用 Chakra UI 渲染 East UI 类型的反应组件

## 安装

```sh
npm install @elaraai/east-ui-components
```

也可以使用：`pnpm add @elaraai/east-ui-components`、`yarn add @elaraai/east-ui-components`、`bun add @elaraai/east-ui-components`

## README

# 东 UI 组件

> East UI 反应渲染组件

[![License](https://img.shields.io/badge/license-AGPL--3.0-blue.svg)](https://npmcn.com/package/%40elaraai/east-ui-components/LICENSE.md) [![Node Version](https://img.shields.io/badge/node-%3E%3D22.0.0-brightgreen.svg)](https://nodejs.org/)

**东 UI 组件** 提供渲染组件 [东方大学](https://www.npmjs.com/package/@elaraai/east-ui) 数据结构。 它弥合了东方UI声明组件定义与使用交互反应应用程序之间的差距 [Chakra 用户界面 v3](https://chakra-ui.com/)。 。 。 .

## 特征

-   **Chakra 用户界面 v3** - 现代、无障碍组件渲染
-   **全部东 UI 组件** - 充分支持布局、形式、图表、上下文等
-   **州管理层** - 东部国家行动的反钩
-   **缩写集成** - 使用Recharts 库提供图表
-   **类型安全** - 全部类型脚本支持

## 安装

```bash
npm install @elaraai/east-ui-components @elaraai/east-ui @elaraai/east
```

## 快速启动

```tsx
import React from "react";
import { Provider } from "@chakra-ui/react";
import { East } from "@elaraai/east";
import { Stack, Text, Button, UIComponentType } from "@elaraai/east-ui";
import { EastUIComponent, system } from "@elaraai/east-ui-components";

// Define your East UI component
const MyUI = East.function([], UIComponentType, $ => {
    return Stack.Root([
        Text.Root("Hello from East UI!", { fontSize: "xl" }),
        Button.Root("Click Me", { variant: "solid", colorPalette: "blue" }),
    ], { gap: "4" });
});

// Compile and get the UI IR
const compiled = East.compile(MyUI);
const uiData = compiled();

// Render in React
function App() {
    return (
        <Provider value={system}>
            <EastUIComponent ir={uiData} />
        </Provider>
    );
}
```

## 品牌字体

主题设置了DM Sans,Inter Tight和Chivo Mono等文本. 应用程序在其入门模块中注册一次:

```tsx
import "@elaraai/east-ui-components/fonts";
```

输入自主机 `@fontsource-variable/*` 样式表——三家直立,为哑音"无数据"值的Chivo Mono斜体. 应用软件的捆绑者用他们的 `.woff2` 文件,在dev服务器和生产架构中,没有从CDN中获取任何信息。 字体是一个单独的条目,这样导入组件就永远不需要CSS加载器,而节点测试跑取器缺乏.

没有加入字母: 页面集 `font-variant-ligatures: no-common-ligatures`,所以ff,fi和fl 保持单独的字母在每一个面部, 和Chivo Mono的每个字母保持自己的细胞.

## 主题

`system` 是作为Chakra v3系统的设计系统。 将应用程序包入 `<ChakraProvider value={system}>`Chakra自己的零件 以及东部的零件.

Brand是默认的调色板. 没有的部分 `colorPalette` 拿着牌子,所以.. `<Button>` 是设计系统在两个主题中的首要:它的填充,一个标签在4.5:1或以上,一个更深的填充在悬浮上. 检查 `<Switch>` 有品牌赛道。 部分设计系统绘制出中性保持中性,在自己的食谱中如此持有:标签,徽章,相机,密钥盖,代码芯片,标签,表格行,进步轨迹,以及每一个不是主键的按钮(`outline`, (中文(简体) ), `ghost`, (中文(简体) ), `subtle`, (中文(简体) ), `surface`, (中文(简体) ), `plain`A级 `colorPalette` 道具在一部分上,或者在一部分不自封的祖先上,仍然选择了另一个调色板.

组合字段将其焦点圈画在相邻的包装上 `_focusWithin: { borderColor: "brand.solid", boxShadow: "focus", outline: "none" }`。它的内置编辑字段必须选择退出 Chakra 的环和主题的通用 `:focus-visible` 阴影 :

```ts
import type { SystemStyleObject } from "@chakra-ui/react";

const fieldInRingedControl = {
    focusVisibleRing: "none",
    _focusVisible: { outline: "none", boxShadow: "none" },
} satisfies SystemStyleObject;
```

把这个传入内地的槽食谱中. `outline: "none"` 单留下第二个阴影, 甚至在鼠标点击文本输入时也是如此 。 如果Chakra默认的变体提供焦点样式,则将选择退出放入该变体:合并的变体样式凌驾于自定义的基础样式. 主题使用共享 [字段红外控制](https://npmcn.com/package/%40elaraai/east-ui-components/src/theme/field-chrome.ts) 编辑 [组合框大纲变体](https://npmcn.com/package/%40elaraai/east-ui-components/src/theme/slot-recipes/combobox.ts) 证明这个位置.

将选出范围保留在包装能提供戒指的字段上. 独立的输入和独立的可聚焦行动,如搜索的清晰按钮,仍然需要自己的焦点指标. 分出的日期和时间保留活性段的填充和包装内接壤. 在真实浏览器中验证自定义的复合材料, 既包括主题, 也包括鼠标和键盘焦点: 包装器的计算 `box-shadow` 必须平等 `focus` 标志和内地必须是 `none`。 。 。 .

## 州管理层

East UI 组件为管理东端应用中的状态提供钩子:

```tsx
import { useEastStore, useEastState } from "@elaraai/east-ui-components";
import { State } from "@elaraai/east-ui";

// In your East function
const MyComponent = East.function([], UIComponentType, $ => {
    const count = $.let(State.read("counter", IntegerType, 0n));
    return Button.Root(
        East.str`Count: ${count}`,
        { onClick: State.write("counter", count.add(1n)) }
    );
});

// In your React app
function App() {
    const store = useEastStore();
    const [count] = useEastState(store, "counter", 0n);

    return (
        <Provider value={system}>
            <EastUIComponent ir={uiData} store={store} />
            <p>Current count: {count}</p>
        </Provider>
    );
}
```

## 支助构成部分

支持所有东UI组件:

| 类别 | 构成部分 |
| --- | --- |
| **版式** | 框, Stack, HStack, VStack, 网格, 分解器, 分隔器 |
| **类型** | 文本、 代码、 标题、 链接、 高亮、 标记、 列表、 代码锁 |
| **按钮** | 图标按钮按钮 |
| **表单** | 输入( String, Integr, Float, Date Time), 选择、 检查框、 切换、 滑动、 文本区域、 标记输入、 文件装入、 字段、 字段集 |
| **收款** | 表格、 数据列表、 树视图 |
| **图表** | 区域、酒吧、行会、派会、雷达、散会、火花会、律师协会、律师协会 |
| **显示** | 徽章、标签、神通、Stat、图标 |
| **反馈** | 警告, 进展 |
| **披露** | 手风琴、塔布和木马 |
| **重叠** | 对话框、 Drawer、 Popover、 工具提示、 菜单、 HoverCard、 ToggleTip、 动作栏 |
| **集装箱** | 纸牌 |

## 发展

```bash
npm run build     # Build library
npm run dev       # Start development server
npm run lint      # Check code quality
```

## Claude 代码插件

东方生态系统也运载a [克劳德代码](https://claude.com/claude-code) 插件 — East 语言技能, 实例搜索, 以及 East 代码的先发制人诊断 `elaraai` 市场:

```text
# Inside Claude Code
/plugin marketplace add elaraai/east-workspace
/plugin install east@elaraai
```

```bash
# From a terminal
claude plugin marketplace add elaraai/east-workspace
claude plugin install east@elaraai
```

## 许可证

双重许可证:

-   **开源**数字 : [AGPL-3.0 导弹](https://npmcn.com/package/%40elaraai/east-ui-components/LICENSE.md) - 免费开放源码使用
-   **商业**:可供专有用途-联系方式 [支助@elara.ai](mailto:support@elara.ai)

### 生态系统

-   **[东](https://github.com/elaraai/east-workspace/tree/main/libs/east)**: statical地打出,以表达为主的语言有可序列的IR. 运行跨 TypeScript, Python, C 等运行时间的可移植逻辑.
    
    -   [@elaraai/东边](https://www.npmjs.com/package/@elaraai/east): 有类型系统、表达式和参考JS编译器的核心语言SDK
-   **[东节点](https://github.com/elaraai/east-workspace/tree/main/libs/east-node)**: Node.js 平台用于I/O,数据库和系统操作的功能.
    
    -   [@elaraai/东节点-std](https://www.npmjs.com/package/@elaraai/east-node-std): 控制台、 文件系统、 获取、 加密、 时间、 路径、 随机
    -   [@elaraai/东-北-欧](https://www.npmjs.com/package/@elaraai/east-node-io): SQLite, PostgreSQL, MySQL, MongoDB, Redis, S3, FTP, SFTP, XLSX, XML, 压缩
    -   [@elaraai/东-节点-cli](https://www.npmjs.com/package/@elaraai/east-node-cli): 用于在 Node.js 运行 East IR 程序的 CLI
-   **[东 C](https://github.com/elaraai/east-workspace/tree/main/libs/east-c)**: C11本土运行时间用于执行东IR. 被压死 `linux-x64` 财务报告和审定财务报表 `linux-arm64`,附于每个 GitHub 发布.
    
    -   `east-c`: Core 运行时间 — 类型系统, IR 解释器, 200+内置, 序列化( Beast2, JSON, CSV, East text)
    -   `east-c-std`: 控制台、 文件系统、 获取、 加密、 时间、 路径、 随机
    -   `east-c-cli`: 用于在本地运行 East IR 程序的 CLI
-   **[东 Py](https://github.com/elaraai/east-workspace/tree/main/libs/east-py)**: Python 运行时间,标准平台,I/O,以及数据科学平台功能. 发布至PyPI.
    
    -   [东平](https://pypi.org/project/east-py/): Core Python 运行时间——类型系统,IR编译器,212+内建,Cython加速热路
    -   [东平-上](https://pypi.org/project/east-py-std/): 控制台、 文件系统、 获取、 加密、 时间、 路径、 随机
    -   [东比欧](https://pypi.org/project/east-py-io/): SQLite, PostgreSQL, MySQL, MongoDB, Redis, S3, FTP, SFTP, XLSX, XML, 压缩
    -   [东-平-克利](https://pypi.org/project/east-py-cli/): 用于在 Python 运行 East IR 程序的 CLI
    -   [东平数据科学](https://pypi.org/project/east-py-datascience/) (平价)+ [@elaraai/东平数据科学](https://www.npmjs.com/package/@elaraai/east-py-datascience) (npm):优化(MADS, Optuna, ALNS, GoogleOR),ML(XGBoost, LightGBM, NGBoost, PyTorch, Lightning, GP), 贝叶斯推论(PyMC),可解释性(SHAP),相通性预测(MAPIE)
-   **[东方大学](https://github.com/elaraai/east-workspace/tree/main/libs/east-ui)**:已打入UI组件定义和React渲染器,外加VS代码预览.
    
    -   [@elaraai/东-伊](https://www.npmjs.com/package/@elaraai/east-ui): 50+ 键入的UI 组件用于布局,窗体,图表,表格,对话框
    -   [@elaraai/ 东- ui- 组件](https://www.npmjs.com/package/@elaraai/east-ui-components): 带有 Chakra UI v3 样式的反相渲染器
    -   [@elaraai/e3-ui (英语)](https://www.npmjs.com/package/@elaraai/e3-ui):e3 + UI桥-数据绑定, `e3.ui()` 任务,显示
    -   [@elaai/e3-ui-组件](https://www.npmjs.com/package/@elaraai/e3-ui-components): 为 e3 API 执行查询钩和预览组件
    -   [@elaraai/e3-ui-cli (英语)](https://www.npmjs.com/package/@elaraai/e3-ui-cli): 在终端浏览一个 e3 寄存器(`e3-ui [repo]`),并将East-ui / e3-ui组件制入PNG(`e3-ui shot`(中文(简体) )
-   **[e3——东行发动机](https://github.com/elaraai/east-workspace/tree/main/libs/e3)**: 大规模运行东方管线的持久执行引擎。 类似Git的内容可处理存储,自动记忆,反应数据流,实时监测.
    
    -   [@elaraai/e3 请检查url=值 (帮助)](https://www.npmjs.com/package/@elaraai/e3): SDK 用于编写带有打字任务和管道的 E3 包
    -   [@elaraai/e3-core (英语)](https://www.npmjs.com/package/@elaraai/e3-core): 对象存储、数据流管弦器、执行状态
    -   [@elaai/e3型](https://www.npmjs.com/package/@elaraai/e3-types): e3 包的共享类型定义
    -   [@elaraai/e3-cli (英语)](https://www.npmjs.com/package/@elaraai/e3-cli)数字 : `e3 repo`, (中文(简体) ), `e3 package`, (中文(简体) ), `e3 workspace`, (中文(简体) ), `e3 dataflow run`, (中文(简体) ), `e3 watch`, (中文(简体) ), `e3 task logs` 命令
    -   [@elaraai/e3-api-客户端](https://www.npmjs.com/package/@elaraai/e3-api-client)远程 e3 寄存器的 HTTP 客户端
    -   [@elaraai/e3-api-服务器](https://www.npmjs.com/package/@elaraai/e3-api-server): 用于 e3 寄存器的 REST API 服务器
    -   [@elaraai/e3-api测试](https://www.npmjs.com/package/@elaraai/e3-api-tests): 共享 API 合规测试套件

## 链接

-   **现场显示大小写**数字 : [https://elaai.github.io/东-伊/](https://elaraai.github.io/east-ui/)
-   **网站**数字 : [https://elaai.com/ (中文(简体) )](https://elaraai.com/)
-   **东方大学**数字 : [https://www.npmjs.com/package/@elaraai/east-ui (中文(简体) )](https://www.npmjs.com/package/@elaraai/east-ui)
-   **东仓库**数字 : [https://github.com/elaraai/east-workspace/tree/main/libs/east 页面存档备份,存于互联网档案馆](https://github.com/elaraai/east-workspace/tree/main/libs/east)
-   **问题**数字 : [https://github.com/elaraai/east-workspace/issues (中文(简体) )](https://github.com/elaraai/east-workspace/issues)
-   **电子邮件**数字 : [支助@elara.ai](mailto:support@elara.ai)

## 关于埃拉拉

东方由 [Elara AI Pty有限公司](https://elaraai.com/)一个由AI驱动的平台 创造经济数字双胞胎 企业优化业绩。 Elara将业务目标、决定和数据结合起来,以帮助各组织在业务、采购、销售和客户参与以及项目和投资规划方面作出由数据驱动的决定。 东能给以埃拉拉解决方案的计算层,使得复杂的商业逻辑和数据能够以简单,类型安全和可移植的语言来表达.

* * *

_开发者 [Elara AI Pty有限公司](https://elaraai.com/)。 。 。 ._

* * *

_开发者 [Elara AI Pty有限公司](https://elaraai.com/) - 为AI驱动的商业优化的计算层提供动力._

## 常见问题

### @elaraai/east-ui-components 是什么？

用 Chakra UI 渲染 East UI 类型的反应组件

### 如何安装 @elaraai/east-ui-components？

在项目目录运行 npm install @elaraai/east-ui-components，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.0\.0）、react-dom（^19\.0\.0）、@elaraai/east（1\.0\.107）、@elaraai/east-ui（1\.0\.107）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @elaraai/east-ui-components 支持 TypeScript 吗？

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

### @elaraai/east-ui-components 支持 ESM 还是 CommonJS？

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

### @elaraai/east-ui-components 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @elaraai/east-ui-components 可以商用吗？

@elaraai/east-ui-components 使用 AGPL-3\.0-or-later 许可。最严格的 Copyleft：除分发外，通过网络向用户提供基于它的服务也需要开源对应源码。闭源 SaaS 使用前务必评估。以上为概括，不构成法律意见，请以许可原文为准。

### @elaraai/east-ui-components 的下载量有多少？

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

### @elaraai/east-ui-components 还在维护吗？

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