# @ecopages/radiant-ui 中文文档

规范地址：https://npmcn.com/package/%40ecopages/radiant-ui/

版本：0\.3\.6
npm 元数据更新时间：2026-11-13T06:59:28.114Z
中文译文更新时间：2026-11-13T06:07:31.766Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40ecopages/radiant-ui
原文对照：https://npmcn.com/package/%40ecopages/radiant-ui/?lang=original
源码仓库：https://github.com/ecopages/radiant

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

- 包体积（解压后）：3.3 MB，615 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：@ecopages/jsx \>=0\.8\.3，@ecopages/radiant \>=0\.8\.3，@ecopages/signals \>=0\.8\.3
- 首次发布：2026-07-29T22:21:39.905Z
- 最新版本发布：2026-11-13T06:59:27.729Z
- 近 30 天下载量：5138（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：41（近 12 个月 41 个）

## 中文简介

用 @ ecopages/ radiant 建造的无障碍光- DOM UI 组件

## 安装

```sh
npm install @ecopages/radiant-ui
```

也可以使用：`pnpm add @ecopages/radiant-ui`、`yarn add @ecopages/radiant-ui`、`bun add @ecopages/radiant-ui`

## README

# 校对:soup

可访问的光- DOM UI 组件 [`@ecopages/radiant`](https://www.npmjs.com/package/@ecopages/radiant) 财务报告和审定财务报表 `@ecopages/jsx`,被"故事书"所记载.

自定义元素使用 **`rui-*`** 标记前缀。 公共类型Script / JSX 输出使用 **`Rui*`** 前缀.

这个项目是 **不是反应应用程序**JSX汇编 `@ecopages/jsx`。 。 。 .

## 软件包

| 路径 | 作用 |
| --- | --- |
| `src/components/ui` | **`@ecopages/radiant-ui`** 组件库(面向APG的部件) |
| [`@ecopages/storybook-radiant-vite`](https://npmcn.com/package/%40ecopages/storybook-radiant-vite) | Radiant(客户+SSR-水合物)的故事书框架 |
| `src/components/client`, (中文(简体) ), `src/components/ssr`, (中文(简体) ), `src/stories` | 框架狗食品演示(不是已出版的UI目录) |

框架文件(API、SSR合同、Vitest、限制):  
**[./故事书 -- -- 发光 -- -- 录像/README.md](https://npmcn.com/package/%40ecopages/storybook-radiant-vite/README.md)**

图书馆概况和公约:故事手册 **导言** (单位:千美元)`src/Introduction.mdx`) (中文(简体) ). 组件作者 : [`src/components/ui/README.md`](https://npmcn.com/package/%40ecopages/radiant-ui/src/components/ui/README.md)。 。 。 .

## 开发

```bash
pnpm install
pnpm run storybook
```

打开 URL 故事簿打印( 默认端口) `6006`) (中文(简体) ).

### 检查布局和样式

-   **自动化(爱心):** `pnpm run test:storybook` 运行每个故事 `play` 函数在真实浏览器(Vitest + Playwright)中。 布局帮助者居住 `.storybook/layout-assertions.ts` (流量, `--text-control-input` 字体大小, 弹出式取景口界限) — 见 `Components/DateRangePicker` → **纳罗拉尤特**。共享打字文件定义类型大小和输入大小;每个完整的主题用品 `--font-sans`, (中文(简体) ), `--font-heading`,以及 `--font-mono`。 。 。 .
-   **手动 :** 运行 `pnpm run storybook` 并使用浏览器的响应模式或调整预览大小;不需要第三方视觉服务.
-   **像素快照( 可选) :** Vitest 浏览器模式支持 Playwright `toHaveScreenshot()` 如果您想要图像 diffs 没有色谱, 则在重播中输入基线.

有用的脚本 :

```bash
pnpm run test            # Vitest (storybook + unit browser projects)
pnpm run test:storybook  # Story interaction/render tests (CI)
pnpm run test:ssr:smoke  # SSR smoke (6 stories × client/ssr-static/ssr-hydrate; runs on PRs)
pnpm run test:ssr        # Full Components/* SSR matrix (run on demand)
pnpm run typecheck
pnpm run lint
pnpm run build:lib       # generate exports + build JS/types + compile CSS
```

`test:storybook` 通过Vitest addon(没有故事本 Dev 服务器)运行故事. `test:ssr:smoke` 财务报告和审定财务报表 `test:ssr` 产卵故事书 访问 Playwright 的故事 失败 `.radiant-ssr-error` 横幅或不允许的页面错误。 对于预期要上载的故事,在检查结果之前,会简短地等待内容或SSR错误标语. 空挂载只针对列出的故事失败 `scripts/storybook-ssr-harness.ts` (单位:千美元)`expectsMount` 编号 : `allowEmptyMount`) (中文(简体) ).

已出版 `dist/` 实值 **已编译** (台风) `@apply` (已解决)。 主题和符号值仍为CSS自定义属性,因此应用程序可以在运行时互换主题. 软件包不会将 CSS 缩写 。 已公布的申报进口在 `build:lib`,以及 `test:package` 拒绝未解决的来源别名 .

条目为代码分割:由多个条目导入的模块,例如字段控制协议或组件类,一旦被放入 `dist/chunks/` 列入 `sideEffects`。这保持模块状态,比如 `registerFieldControl` 登记册,以及 `instanceof` 检查一个副本的条目之间。 Chunk 名称是内容散列,不能导入;只使用所记录的条目 。 没有捆绑器, 根 `index.js` 装入许多块文件. `src/built-package/*.test.ts` 导入 `dist/` 和运行自己 `built-package` vitest项目,其中 `unit` 不包括项目。 内容 `globalSetup` (单位:千美元)`.storybook/built-package.global-setup.ts`检查一下 `dist/` 财务报告和审定财务报表 `dist/chunks` 已经存在,并且比已发运的来源更新,项目测试失败 `pnpm --filter @ecopages/radiant-ui build:lib` 犹如平地;赤地 `pnpm test` 没有建筑 仍然运行其他项目。 新鲜度检查比较了mtimes,所以只格式化的源编辑也要求重建. `test:all` 先盖起. `build:lib` 并捆绑一个条目,以确认 `chunks/*.js` `sideEffects` glob 保留注册,以及 `test:package` 失败 `dist/chunks` 文件匹配无 `sideEffects` glo.

组件条目注册他们的嵌入自定义元素以及自己的主机. 包裹 `sideEffects` 列表保留源 `*.script.ts` 编号 : `*.script.tsx` 图书馆建设和建造过程中的登记模块 `index.js` 消费者捆绑期间的条目。 消除这些源副作用可以在SSR期间留下被嵌入的"衍生树"作为空标记. `build:lib` 运行 `test:package` 禁止孤立地进口已建日期构成和侧边栏触发器,以核实注册和服务器的标记.

## 使用光线- ui

`Rui*` JSX道具仍为骆驼Case. 在直接自定义元素 HTML 中,骆驼Case `@prop` 名称使用 kebab 大小写属性( 例如, `mobileBreakpoint` 实值 `mobile-breakpoint`) (中文(简体) ).

```ts
import '@ecopages/radiant-ui/themes/default';
import '@ecopages/radiant-ui/styles.css';
import '@ecopages/radiant-ui/disclosure';
import { RuiDisclosure, RuiDisclosureGroup } from '@ecopages/radiant-ui/disclosure';
import { RuiButton } from '@ecopages/radiant-ui/button';
```

Radiant UI舰艇一个可访问的默认主题: Radiant Default 有近Zed间隔(28,32和36px控制,14px文本),受限的控制半径(默认为0.7比例为4.2px),平面控制, 和轻半透明边界(11%)。 可选的完整主题和命名的紧凑变体,如GitHub Contract, Vercel, 材料设计,高对比度,Windows 95,Mac OS Classic, macOS, 和Zed生活于此 [`@ecopages/radiant-themes`](https://npmcn.com/package/%40ecopages/radiant-themes/README.md)。默认的 OKLCH 颜色家族可以通过 压倒性 `--rui-primary`, (中文(简体) ), `--rui-secondary`,以及 `--rui-neutral` 在导入主题后. `--rui-density`, (中文(简体) ), `--rui-neutral-tint` (灰色如何强烈地携带中性花环,默认为1.3), `--rui-radius-scale` (违约为0.7)和 `--rui-border-alpha` (默认为 11%) 完成调制表面 。 可选主题自行设定 形状、间距、打字和组件细节。 默认是对减动、增相接和 强制颜色偏好.

或者从根项中注册每个自定义元素( 仍然单独装入主题 + 样式) :

```ts
import '@ecopages/radiant-ui/themes/default';
import '@ecopages/radiant-ui/styles.css';
import '@ecopages/radiant-ui';
```

基础捆绑( Tailwind、 共享公用事业和默认主题; 组件样式仍然来自 `styles.css`:

```ts
import '@ecopages/radiant-ui/radiant-ui.css';
```

设计符号和主题:参见 [`DESIGN.md`](https://npmcn.com/package/%40ecopages/radiant-ui/DESIGN.md)代理工作规则: [`AGENTS.md`](https://npmcn.com/package/%40ecopages/radiant-ui/AGENTS.md)。 。 。 .

## 故事地图

-   **构成部分/** —— 说 `radiant-ui` 目录( e)`src/components/ui`(中文(简体) )
-   **客户/** 从 Radiant 移植的框架演示 `playground/vite`
-   **安保部门/** 从 Radiant 移植的框架演示 `playground/vite-nitro`

## 常见问题

### @ecopages/radiant-ui 是什么？

用 @ ecopages/ radiant 建造的无障碍光- DOM UI 组件

### 如何安装 @ecopages/radiant-ui？

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

### @ecopages/radiant-ui 支持 TypeScript 吗？

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

### @ecopages/radiant-ui 支持 ESM 还是 CommonJS？

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

### @ecopages/radiant-ui 可以商用吗？

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

### @ecopages/radiant-ui 的下载量有多少？

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

### @ecopages/radiant-ui 还在维护吗？

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