# @1money/component-ui 中文文档

规范地址：https://npmcn.com/package/%401money/component-ui/

版本：0\.2\.0
npm 元数据更新时间：2026-11-05T09:10:50.994Z
中文译文更新时间：2026-11-06T04:33:52.760Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%401money/component-ui
原文对照：https://npmcn.com/package/%401money/component-ui/?lang=original
项目主页：https://github.com/1Money-Co/1money-components-ui#readme
源码仓库：https://github.com/1Money-Co/1money-components-ui

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

- 包体积（解压后）：7.5 MB，2632 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：9 个
- peer 依赖：react \>=19\.0\.0，react-dom \>=19\.0\.0，primeicons \>=7，primereact \>=10\.9\.0，@modelcontextprotocol/sdk ^1\.29\.0
- 首次发布：2026-04-09T03:42:23.847Z
- 最新版本发布：2026-11-05T09:10:50.745Z
- 近 30 天下载量：5099（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：259（近 12 个月 259 个）

## 中文简介

基于1个货币前端项目的原生反应的回放组件

## 安装

```sh
npm install @1money/component-ui
```

也可以使用：`pnpm add @1money/component-ui`、`yarn add @1money/component-ui`、`bun add @1money/component-ui`

## README

# 1个货币组件

此寄存器包含源 `@1money/component-ui`,用于1Money前端项目的React组件库.

它将可再使用的UI组件与1Money SCSS设计系统,用于本地开发的Sorybook,以及用于发行的双相通用JS/ES模块相融合.

## 现场故事本

浏览已公布的组件文档和交互式示例:

**[https://1money-co.github.io/1money-组件-ui/\*](https://1money-co.github.io/1money-components-ui/*)\* 联合国**

网站建于 `main` 分支(`pnpm build:demo`),并在每次推力时被部署到GitHub Pages. 对于其他分支的未发行作品,在当地使用 `pnpm dev`。 。 。 .

## 释放

包括一个新的稳定 `package.json` 以 PR 为版本 `main`。 。 。 . **PR 发布 版本** 合并前检查版本; **自动标记** 创建匹配 合并后附加说明的标签和 GitHub 释放 。 标记开始现有的 **国家预防机制 中心** 工作流程。 仅凭仓库工具和文件就不需要 发布;已发布 MCP 服务器更改 .

见 [自动释放标签](https://npmcn.com/package/%401money/component-ui/.github/AUTO_TAG.md) 用于所需的 GitHub App 设置,人工预放,干燥运行,并恢复. `pnpm release` 编制 npm的出版通过 GitHub Actions 运行.

## 特征

-   React and TypeScript 组件库
-   为 1Money 产品重新使用的 UI 构件
-   SCSS 设计系统 `src/styles/`
-   端口上的故事书开发服务器 `6205`
-   双相构建输出到 `lib/` 财务报告和审定财务报表 `es/`

## 安装

需要反应 19 (`react` 财务报告和审定财务报表 `react-dom` `>=19.0.0`) (中文(简体) ). 组件 `ref` 作为常规道具和使用 `useId`,因此反应 18 及更早不支持.

安装软件包和所需的 React 依赖 :

```bash
pnpm add @1money/component-ui react react-dom primereact primeicons
```

然后在您的应用条目中导入库样式表 :

```tsx
import '@1money/component-ui/index.css';
```

## 快速启动

从根包条目中可以获取命名的进口:

```tsx
import {
  Button,
  Checkbox,
  CheckboxGroup,
  Grid,
  Icons,
  notification,
  Tag,
  Tooltip,
} from '@1money/component-ui';
import '@1money/component-ui/index.css';

export function Example() {
  return (
    <>
      <Grid gutter={[16, 16]}>
        <Grid.Col span={12} md={6}>
          <Button color="primary">Continue</Button>
        </Grid.Col>
        <Grid.Col span={12} md={6}>
          <Checkbox label="Accept terms" />
        </Grid.Col>
        <Grid.Col span={12} md={6}>
          <CheckboxGroup
            options={['Email', 'SMS']}
            defaultValue={['Email']}
          />
        </Grid.Col>
      </Grid>

      <Tag label="Active" color="success" />

      <button id="help-trigger" type="button">
        <Icons name="info" />
      </button>
      <Tooltip anchorSelect="#help-trigger" body="More details" />

      {/*
        notification is a static API. Call it from event handlers,
        effects, or other client-side actions.
      */}
      <Button
        onClick={() =>
          notification.success({
            title: 'Saved',
            body: 'Settings were updated.',
          })
        }
      >
        Show notification
      </Button>
    </>
  );
}
```

树能震动的亚路径进口也得到支持:

```tsx
import { Button } from '@1money/component-ui/Button';
import { Spinner } from '@1money/component-ui/Spinner';
```

## 此仓库中的组件

当前源树包括这些组件模块:

-   `Accordion`
-   `Alert`
-   `Button`
-   `Calendar`
-   `Carousel`
-   `Cell`
-   `Checkbox` (+ 数) `CheckboxGroup`(中文(简体) )
-   `CoachMark`
-   `Copy` (+ 数) `Clipboard`(中文(简体) )
-   `Dialog`
-   `Divider`
-   `Drawer`
-   `Dropdown`
-   `Empty`
-   `Flex`
-   `Grid` (+ 数) `Row`, (中文(简体) ), `Col`(中文(简体) )
-   `Icons` (+ 数) `IconWrapper`, (中文(简体) ), `IconHover`(中文(简体) )
-   `Input`
-   `Link`
-   `Navigation` (+ 数) `Nav`, (中文(简体) ), `NavigationStepper`(中文(简体) )
-   `notification` (静态通知 API)
-   `Pagination`
-   `Popconfirm`
-   `Portal`
-   `ProForm`
-   `Progress`
-   `Radio` (+ 数) `RadioGroup`(中文(简体) )
-   `ResizeObserver`
-   `Segment`
-   `Select`
-   `Skeleton`
-   `Slider`
-   `Space`
-   `Spinner`
-   `Step`
-   `Switch`
-   `Table` (+ 数) `VirtualTable`(中文(简体) )
-   `Tabs`
-   `Tag`
-   `Tooltip`
-   `Tour`
-   `Trigger`
-   `Typography`
-   `Upload` (+ 数) `UploadFileBar`(中文(简体) )
-   `VirtualList`

包表定义了顶级组件模块的子路径导出. 分类出口,例如 `Row`, (中文(简体) ), `Col`, (中文(简体) ), `Nav`,以及 `VirtualTable` 从母模块子路径导入.

## 样式

消费者应进口 `@1money/component-ui/index.css`。 。 。 .

当在此寄存器内构建或更新组件时, SCSS 文件应当导入内部样式 API:

```scss
@use '@/styles/api' as theme;
```

样式系统采用分层分界线模式:

-   `theme/` = 设计领域 API
-   `system/` =: `sx` 引擎
-   `recipes/` = 图书馆食谱助手
-   `public/` = 出口的消费者表面 `src/styles/_api.scss`

组件 SCSS 不应导入 `system/*` 或者说 `tokens/*` 直接说. `theme/functions` 仅供珍贵的图书馆阅读器访问,例如 `om-line-height(...)` 或者说 `om-line-height-px(...)`。设计符号和公用系统记录如下: `src/styles/README.md`。 。 。 .

## 发展

安装依赖性 :

```bash
pnpm install
```

本地开始故事本 :

```bash
pnpm dev
```

故事书运行于 `http://localhost:6205`。 。 。 .

有用命令 :

```bash
pnpm test
pnpm lint
pnpm build
pnpm new
pnpm new Button -f
```

构建输出生成于 :

-   `lib/` 常规JS
-   `es/` 用于ES模块

### 特性变化所需的 i18n

每个新特性或增强必须在同一公关中交付其i18n. 覆盖所有库拥有的拷贝,包括校验,空入/装入状态,工具提示,以及无障碍标签. 地物旗帜和灰色放出并不能免除这一要求.

-   维护本地地址合同 `src/locale/interface.ts` 和所有辅助包的翻译: `src/locale/en_US/`, (中文(简体) ), `src/locale/zh_CN/`, (中文(简体) ), `src/locale/pt_BR/`,以及 `src/locale/es_ES/`。保持所需的密钥和占位符对齐.
-   使用现有的 `ConfigProvider` 用于默认和格式化的 locale API; 保存调用器 prop 覆盖, 英语回落和运行时语言更改 .
-   为i18n审查每个已更改文件,验证"故事本"中所有三种语言,并在PR中包含检查结果. 在没有用户生成副本或对本地环境敏感的行为时,解释一个N/A索赔。 缺少翻译块特性完成并合并 .

见 [捐助方规则](https://npmcn.com/package/%401money/component-ui/AGENTS.md#mandatory-i18n-for-new-features) 财务报告和审定财务报表 [配置用法](https://npmcn.com/package/%401money/component-ui/src/components/ConfigProvider/README.md) 详细情况.

## 项目结构

```text
src/
├── components/   # Component source
├── styles/       # SCSS public/theme/system/recipes/internal layers
└── index.ts      # Root library exports
```

## 发布注释

-   软件包名称 : `@1money/component-ui`
-   仓库 : `https://github.com/1Money-Co/1money-components-ui`
-   许可证 : `MIT`

## 常见问题

### @1money/component-ui 是什么？

基于1个货币前端项目的原生反应的回放组件

### 如何安装 @1money/component-ui？

在项目目录运行 npm install @1money/component-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=19\.0\.0）、react-dom（\>=19\.0\.0）、primeicons（\>=7）、primereact（\>=10\.9\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 1money-ui-mcp，可以用 npx 1money-ui-mcp 直接运行。

### @1money/component-ui 支持 TypeScript 吗？

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

### @1money/component-ui 支持 ESM 还是 CommonJS？

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

### @1money/component-ui 可以商用吗？

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

### @1money/component-ui 的下载量有多少？

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

### @1money/component-ui 还在维护吗？

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