# @flow-industries/ui 中文文档

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

版本：0\.27\.0
npm 元数据更新时间：2026-10-17T16:02:47.749Z
中文译文更新时间：2026-11-15T00:52:19.448Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：705 kB，103 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：15 个
- peer 依赖：react \>=19\.0\.0，react-dom \>=19\.0\.0，tailwindcss \>=4\.0\.0，@flow-industries/id \>=0\.22\.0
- 首次发布：2026-04-11T02:41:02.162Z
- 最新版本发布：2026-10-17T16:02:47.352Z
- 近 30 天下载量：2792（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：40（近 12 个月 40 个）

## 中文简介

共享设计系统和组件库 [流动](https://flow.industries/) 应用.

## 安装

```sh
npm install @flow-industries/ui
```

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

## README

# 流量工具

共享设计系统和组件库 [流动](https://flow.industries/) 应用.

船舶生型Script源——无建设步. 你的Vite + Tailwind 管道编译它.

## 安装

```bash
bun add @flow-industries/ui
```

## 文档

页:1 **[工业/农用工业](https://docs.flow.industries/en/ui)**。 。 。 .

-   [安装设置( S)](https://docs.flow.industries/en/ui/installation) - CSS进口、Tailwind配置、源指令
-   [键](https://docs.flow.industries/en/ui/tokens) ——每个CSS自定义地产
-   [他们](https://docs.flow.industries/en/ui/theming) 轻、暗、自定义调色板
-   [类型](https://docs.flow.industries/en/ui/typography) - 盖斯特家族和天平
-   [标记](https://docs.flow.industries/en/ui/branding) ——标志,标志,社会图标
-   [公用事业](https://docs.flow.industries/en/ui/utilities) —— 说 `cn()`, (中文(简体) ), `useIsMobile()`,共享模式
-   组件 : [按钮](https://docs.flow.industries/en/ui/components/buttons), (中文(简体) ), [表单](https://docs.flow.industries/en/ui/components/forms), (中文(简体) ), [版式](https://docs.flow.industries/en/ui/components/layout), (中文(简体) ), [导航](https://docs.flow.industries/en/ui/components/navigation), (中文(简体) ), [重叠](https://docs.flow.industries/en/ui/components/overlays), (中文(简体) ), [反馈](https://docs.flow.industries/en/ui/components/feedback), (中文(简体) ), [数据](https://docs.flow.industries/en/ui/components/data), (中文(简体) ), [效果](https://docs.flow.industries/en/ui/components/effects)

## 发展

```bash
bun run dev   # landing page at localhost:5173
```

## 视觉回归

CI 截图显示(`#design`, (中文(简体) ), `#showcases`, (中文(简体) ), `#components` (在光明和黑暗中) 承诺的基线 `tests/visual.spec.ts-snapshots/` 在任何diff上失败.

```bash
bun run build && bun run test   # compare against baselines (Linux only)
./scripts/update-snapshots.sh   # re-render baselines after an intended visual change (Docker)
```

Linux 在被钉住的 Playwright 图像中提供了基线—— 一个赤裸的macOS 运行 总是通过剧本更新(或抓住 `visual-diffs` 检查更改失败的 CI 运行中的文物 .

## 无障碍

CI 也运行轴(`tests/a11y.spec.ts`)在同页和主题上,加每个 在其开放状态下,严重/严重违规事件未果。 真正的发现得到 已固定或已归档UI-3审计——见 `knownViolations` 区域 跟踪例外; `allowlistedRules` 保留给有记录的假阳性.

```bash
bun run build && bunx playwright test tests/a11y.spec.ts
```

## 许可证

麻省理工学院

## 实践会议

`@flow-industries/ui/focus` 是选入的切入点 `FocusProvider`, (中文(简体) ), `FocusPanel`, (中文(简体) ), `StudySubjectPicker`,以及相关的钩和类型。 安装 `@flow-industries/id` 0.22.0版本或更新与UI软件包并用. SDK对等对只使用其他UI组件的应用程序是可选的.

```tsx
import { createFocusApi } from "@flow-industries/id/focus";
import { FocusPanel, FocusProvider, useFocus } from "@flow-industries/ui/focus";

function Practice() {
  const focus = useFocus();
  return <FocusPanel focus={focus} surface="web" />;
}

// Keep this API instance stable; credentials and surface belong to the host.
const api = createFocusApi(authHost, getToken, "web");

<FocusProvider api={api} viewerId={viewerId}>
  <Practice />
</FocusProvider>;
```

通过一个稳定的认证账户ID作为 `viewerId`,或 `null` 对于惰性 供养. 主办方保留其嘉宾、停用账户和嵌入式平面 政策:在必须排除做法的地方,略去提供者/小组。 账户 更改清晰的会话和主题状态并丢弃旧的同步响应. 当文档挂载时, 提供者恢复活动会话并刷新 变得明显。 在提供者之外,钩子返回一个惰性值.

`FocusPanel` 接受明确的 `focus` 值,可选 `managementLink`,以及 `text` 作为注入 `FocusText` 翻译家. 使用 `text={createFocusText(locale, messages)}` 对语言和信件的覆盖。 控制 `StudySubjectPicker` 接受目录/主题,繁忙/过度状态,并选择/创建回调; 主机 单独使用时拥有请求。 箭头键导航,输入选择,以及 从一个类别中清除搜索或返回。 私有主题标签为 标记 `data-user-content` 并隔离为双向文本.

展览在 `/#focus` 提供账户、延迟、错误、重新装入和主题 使用本地固定数据进行控制。 运行 `bun run build` 接下来 `bunx playwright test tests/focus.spec.ts` 用于恢复、隐私、键盘和 失败检查.

## 包包兼容性

`bun run test:package` 包装一样 `src` 从 npm 安装允许列表和 用回放路由器安装到一次性回放 19.0.0 和 19.2.3 消费者 7.8.2, Vite 7.2.7 和 Tailwind 4.1.18 (中文(简体) ). 每个消费者在服务器上制造, 建立浏览器资产,然后在Chromium中进行水合并练习键盘焦点, 选择/输入渲染、按钮交互和释放 CSS 令牌。 安装 浏览器先使用 `bunx playwright install chromium`。 。 。 .

检查删除已安装的组件导出和符号样式表 复制并需要每个已损坏的构建失败, 然后恢复文件并重复 浏览器检查成功 。 PRCI和出版工作流程都要求 这道门 此矩阵中包含一个新的支持的消费者配置 释放取决于它;不兼容的更改需要协调的软件包 版本和消费者更新。 这些检查使用套件导入, 而不是源的别名 .

## 常见问题

### @flow-industries/ui 是什么？

共享设计系统和组件库 流动 应用\.

### 如何安装 @flow-industries/ui？

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

### @flow-industries/ui 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/flow-industries\_\_ui 是否存在。

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

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

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

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

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

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

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

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