# @coding-flow/flow-pc-ui 中文文档

规范地址：https://npmcn.com/package/%40coding-flow/flow-pc-ui/

版本：0\.2\.17
npm 元数据更新时间：2026-11-07T09:54:44.446Z
中文译文更新时间：2026-11-10T08:49:52.584Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40coding-flow/flow-pc-ui
原文对照：https://npmcn.com/package/%40coding-flow/flow-pc-ui/?lang=original
项目主页：https://github.com/codingapi/flow-frontend
源码仓库：https://github.com/codingapi/flow-frontend

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

- 包体积（解压后）：28.4 kB，16 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：react \>=18，react-dom \>=18
- 首次发布：2026-03-17T06:38:55.921Z
- 最新版本发布：2026-11-07T09:54:44.218Z
- 近 30 天下载量：2007（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：82（近 12 个月 82 个）

## 中文简介

流动引擎 pc ui 组件

## 安装

```sh
npm install @coding-flow/flow-pc-ui
```

也可以使用：`pnpm add @coding-flow/flow-pc-ui`、`yarn add @coding-flow/flow-pc-ui`、`bun add @coding-flow/flow-pc-ui`

## README

# @coding-flow/flow-pc-ui

Flow Engine PC 端基础 UI 组件库，提供原子化 UI 组件。

## 简介

`flow-pc-ui` 是 Flow Engine PC 端的基础 UI 组件库，提供原子化的 UI 组件：

-   基础输入组件（按钮、输入框、选择器等）
-   数据展示组件（表格、列表、卡片等）
-   反馈组件（弹窗、消息提示、加载等）
-   布局组件（容器、分割线、间距等）

基于 Ant Design 组件库构建，提供统一的设计风格。

### 依赖关系

-   **依赖**: `@coding-flow/flow-core`

## Setup

安装依赖:

```bash
pnpm install
```

## 开发

构建组件库:

```bash
pnpm run build
```

监听模式构建:

```bash
pnpm run dev
```

## 核心组件

### 基础输入组件

-   `Button` - 按钮
-   `Input` - 输入框
-   `Select` - 选择器
-   `Checkbox` - 复选框
-   `Radio` - 单选框
-   `Switch` - 开关
-   `DatePicker` - 日期选择器

### 数据展示组件

-   `Table` - 表格
-   `List` - 列表
-   `Card` - 卡片
-   `Descriptions` - 描述列表
-   `Timeline` - 时间轴

### 反馈组件

-   `Modal` - 对话框
-   `Message` - 全局提示
-   `Notification` - 通知提醒框
-   `Spin` - 加载状态
-   `Progress` - 进度条

### 布局组件

-   `Container` - 容器
-   `Divider` - 分割线
-   `Space` - 间距
-   `Grid` - 栅格布局

## 模块结构

```
flow-pc-ui/
├── src/
│   ├── button/         # 按钮组件
│   ├── input/          # 输入框组件
│   ├── select/         # 选择器组件
│   ├── table/          # 表格组件
│   ├── modal/          # 对话框组件
│   └── index.ts        # 统一导出
└── README.md
```

## 使用示例

```typescript
import { Button, Input, Modal } from '@coding-flow/flow-pc-ui';

// 使用按钮组件
<Button type="primary" onClick={handleClick}>
  提交
</Button>

// 使用输入框组件
<Input
  placeholder="请输入内容"
  value={value}
  onChange={handleChange}
/>

// 使用对话框组件
Modal.confirm({
  title: '确认提交',
  content: '确定要提交该流程吗？',
  onOk: handleSubmit
});
```

## 主题定制

支持通过 CSS 变量进行主题定制:

```css
:root {
  --primary-color: #1890ff;
  --success-color: #52c41a;
  --warning-color: #faad14;
  --error-color: #f5222d;
}
```

## Learn more

-   [Rslib documentation](https://lib.rsbuild.io/) - Rslib 特性和 API
-   [Flow Engine Docs](https://github.com/codingapi/flow-engine) - 完整文档
-   [CLAUDE.md](https://npmcn.com/CLAUDE.md) - 开发指南

## 常见问题

### @coding-flow/flow-pc-ui 是什么？

流动引擎 pc ui 组件

### 如何安装 @coding-flow/flow-pc-ui？

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

### @coding-flow/flow-pc-ui 支持 TypeScript 吗？

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

### @coding-flow/flow-pc-ui 支持 ESM 还是 CommonJS？

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

### @coding-flow/flow-pc-ui 可以商用吗？

@coding-flow/flow-pc-ui 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @coding-flow/flow-pc-ui 的下载量有多少？

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

### @coding-flow/flow-pc-ui 还在维护吗？

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