# @byokit/ui 中文文档

规范地址：https://npmcn.com/package/%40byokit/ui/

版本：1\.1\.0
npm 元数据更新时间：2026-10-25T11:21:07.832Z
中文译文更新时间：2026-11-08T21:45:21.528Z
软件包许可：Apache-2\.0

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

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

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

- 包体积（解压后）：194 kB，45 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.18
- 运行依赖：1 个
- peer 依赖：react \>=18
- 首次发布：2026-10-09T09:35:15.676Z
- 最新版本发布：2026-10-25T11:21:07.454Z
- 近 30 天下载量：3311（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：7（近 12 个月 7 个）

## 中文简介

TypeScript套件让人们通过他们已经支付的人工智能计划,在网络,电话和桌面上登录到你的应用程序.

## 安装

```sh
npm install @byokit/ui
```

也可以使用：`pnpm add @byokit/ui`、`yarn add @byokit/ui`、`bun add @byokit/ui`

## README

# @ byokit/ ui (韩语)

[![npm](https://img.shields.io/npm/v/@byokit/ui?style=flat&label=npm)](https://www.npmjs.com/package/@byokit/ui) [![CI](https://img.shields.io/github/actions/workflow/status/umeranjum17/byokit/ci.yml?style=flat&branch=main)](https://github.com/umeranjum17/byokit/actions/workflows/ci.yml) [![Apache 2.0](https://img.shields.io/badge/license-Apache--2.0-666?style=flat)](https://npmcn.com/package/%40byokit/ui/LICENSE)

**无头签入,配对和跑步时基特状态,用平话直说,对任何UI.**  
它将你的后端报告 转换为阶段 和句子来显示: 配对表,链接的状况,电话回家的路线,以及运行时间套件的运行,审批和代理.  应用保持自己的外观。 除回放钩外的一切都是无框架的.

![A phone-width page titled Umer's AI plans, with the ChatGPT card reading 'Signing in to ChatGPT…' and 'On the ChatGPT page, type this code:', the code MOCK-10001 in large letters, 'Code expires in 14:59', and Open ChatGPT and Cancel buttons.](https://raw.githubusercontent.com/umeranjum17/byokit/main/docs/images/pwa-2-code.png) ![A phone-width page titled 'Agents' with a 'Pair this phone' card reading 'Check your computer shows these two words, then say yes there.' above the words 'coast comet'.](https://raw.githubusercontent.com/umeranjum17/byokit/main/examples/herdr-kit/docs/2-compare.png)

左边: `code` 阶段从 `phaseOf()`绘制 [实例/pwa](https://npmcn.com/package/examples/pwa) 对模拟OpenAI的登录。 对: `pairingView()`是因为 `compare` 字词,由 [实例/herdr-kit](https://npmcn.com/package/examples/herdr-kit)。 。 。 .

## 安装

```sh
npm install @byokit/ui
```

[![npm](https://img.shields.io/npm/v/@byokit/ui?style=flat&label=)](https://www.npmjs.com/package/@byokit/ui) • 妇女 [最近发布](https://github.com/umeranjum17/byokit/releases?q=ui-v) • 妇女 [所有释放](https://github.com/umeranjum17/byokit/releases)

从 `@byokit/ui-core`见 [扭曲了shim的移民指南](https://npmcn.com/package/%40byokit/ui-core/README.md#migrate)。 。 。 .

## 快速启动

```sh
npm install @byokit/ui
```

反应是一种可选的对等依赖,只用于钩子(`useSignIn`, (中文(简体) ), `useRun`, (中文(简体) ), `useApprovals`, (中文(简体) ), `useHerdrTree`, (中文(简体) ), `useBlocked`, (中文(简体) ), `useConnect`, (中文(简体) ), `useAccounts`, (中文(简体) ), `useModelPicker`) (中文(简体) ).

```ts
import { phaseOf, stepOf } from '@byokit/ui/phase';
import { describeRoute } from '@byokit/ui/route';
import { consentWords, linkWords, pairingView, qrMatrix } from '@byokit/ui/link';

// What the back end reports: a sign-in waiting on a typed code.
const phase = phaseOf({ ready: false, signIn: { state: 'waiting', via: 'code', code: 'ABCD-1234' } });
console.log(phase, stepOf(phase));
console.log(phaseOf({ ready: true, work: true }));
console.log(phaseOf({ signIn: { state: 'failed', why: 'busy' } }));

console.log(describeRoute('wss://home.tail1234.ts.net/link'));
console.log(describeRoute('ws://100.101.102.103:7777'));

console.log(consentWords({ hostName: 'Kitchen computer', role: 'control' }));
console.log(pairingView({ phase: 'compare', hostName: 'Kitchen computer', words: 'coast comet' }));
console.log(linkWords('offline', 'Kitchen computer'));
console.log(qrMatrix('hello').length, 'rows');
```

使用节点运行时输出 :

```text
code 1
work
busy
Tailscale
Private network
Pair with Kitchen computer? This device will be able to see and change things on it, until you remove it there.
{
  phase: 'compare',
  title: 'Check Kitchen computer shows these two words, then say yes there.',
  words: 'coast comet'
}
Can't reach Kitchen computer right now. This device keeps trying by itself.
25 rows
```

在反应中, `useSignIn` 将整个工作表从3个呼叫推进到您的后端:

```ts
import { useSignIn } from '@byokit/ui';
import type { AccountView } from '@byokit/ui';

// Your back end's routes; the hook only needs these three calls.
declare const api: {
  account(): Promise<AccountView | null>;
  signIn(body?: { via?: 'code'; fresh?: boolean }): Promise<unknown>;
  cancel(): Promise<unknown>;
};

export function useChatGptSheet() {
  const s = useSignIn({ read: () => api.account(), start: (b) => api.signIn(b), cancel: () => api.cancel() });
  // s.phase: what to draw. s.code / s.url: what to show. s.start({ via: 'code' }): "Having trouble? Use a code instead".
  // s.cancel(), s.close(), s.keepWork(): the sheet's buttons. Leave `start` out when something else starts the
  // sign-in: the sheet then only watches, and nothing begins as it opens.
  return s;
}
```

## API 一览

| 导出 | 它会做什么 |
| --- | --- |
| `phaseOf(account, { offline, cancelled, keepWork })` | 要从 `@byokit/accounts` `view()` 加账户是否在 |
| `stepOf(phase)` | 三步进取栏("打开","说好","做")的位置 |
| `useSignIn({ read, start?, cancel, offline?, ms?, pinned? })` | 反应钩:在工作表打开、民意调查时开始登录,并处理取消、关闭、保持工作和“代用代码”;没有 `start` 只有表,没有开始 |
| `describeRoute(url, kind?)` | 指定拨号地址所需的路线, 用于对接或设置屏幕 |
| `routeShort(route)` | 路径作为连接线内的单词( E)`same Wi-Fi`(中文(简体) ) |
| `connectedWords(hostName, url?, kind?)` | 要渲染的连接线( E)`Connected to Kitchen computer - same Wi-Fi.`),平地,没有路线 |
| `routeChoices()` | 每条日常文字的入职路线(`{ code, title, sentence, needs }`建议顺序 |
| `qrMatrix(text, { border }?)` | 将 QR 作为一行的暗光模块对齐, 其边框安静 (2 除非给出) |
| `qrText(text, { border }?)` | 与终端的半块文本行相同的 QR |
| `consentWords({ hostName, role, device?, detail? })` | 配对前的问题 |
| `pairingView({ phase, hostName?, words?, error?, device?, detail? })` | 每个阶段的配对表的标题和单词 |
| `linkWords(status, hostName)` | 链接在一个句子中的状况 |
| `pairErrorWords(error)` | 失败的配对为 `expired`, (中文(简体) ), `wrong` 或链接本身的句子 |
| `stepsView(steps)` | 从呼叫者自己的步骤标识和状态中抽取的阶梯行 |
| `stepsText(rows, { title })` | 与终端文本行相同的行 |
| `runStore(oc)`, (中文(简体) ), `runView(state, { words, name })` | 一跑:回复流入,工具在工作,如何结束在工具包的文字中 |
| `approvalsStore(oc)`, (中文(简体) ), `approvalWords(a, words, helper)` | 等待同意的,现场的, 每一个在回答或过期时就消失了 |
| `herdrStore(hd)`, (中文(简体) ), `herdrTreeView(tree)`, (中文(简体) ), `blockedView(state)` | 赫德的特工从哪里跑来 等待答案的人 活着 |
| `cloudSource(provider, o?)`, (中文(简体) ), `cloudStore(source)`, (中文(简体) ), `cloudView(state, { now, words })` | 你的云计算机: 列表, 每个人的状态, 最新的副本和成本 简洁的文字, 搜索,选择, 以及当主机唤醒一个 |
| `useCloud(source)` | 在店里装回钩 |
| `signInsStore(oc)`, (中文(简体) ), `signInSheetView(request, { name, holder })`, (中文(简体) ), `livePanelView(state)` | OpenClaw 套接字的浏览器签入表(判决、按钮、聊天芯片)和活板 |
| `useRun`, (中文(简体) ), `useApprovals`, (中文(简体) ), `useHerdrTree`, (中文(简体) ), `useBlocked` | 在那些店铺上装回扣 |
| `connectView(routes, step?)`, (中文(简体) ), `connectStep(step, action)` | 每条账户路线 包列表,按个人付费方式分组, 并带有所选行及其密钥卡 |
| `signInFor(view, { read, start?, cancel })`, (中文(简体) ), `useConnect({ routes, read, start?, cancel })` | `useSignIn`选中的签入行的选项; 钩子按住步骤 |
| `accountRows(accounts, room, now, windows?)`, (中文(简体) ), `rowsOf(source, now)`, (中文(简体) ), `nameSuggestions(email, taken, provider?)` | 每账户一行平话数(`ChatGPT · Work` 编号 : `Plus · 72% left this week`),每个登录状态的诚实词和未记账名建议 |
| `agentView(agent, accounts, defaults?, models?)` | 一个特工的登录方法(代理标签):其计划算作 `1 of 3 enabled`,在使用中的一个账户,其默认模式,按使用时付费键单独列出,从未选择 |
| `useAccounts(source)`, (中文(简体) ), `useModelPicker(source, initial?)` | 反应钩:行与活 `refresh()` 财务报告和审定财务报表 `remove()` (一个失败的房间只留下一行不明;一个中后期的取出仍会掉下它),与跑道取出者一起 `select()` 保持打电话者的选择 跨越新鲜; `accountsSource(accounts, member, room?)` 财务报告和审定财务报表 `cliSource(cli, room?)` 每个成员填入一个行源( O14 等待开元适配器) |
| 类型 | `Phase`, (中文(简体) ), `SignInView`, (中文(简体) ), `AccountView`, (中文(简体) ), `UseSignIn`, (中文(简体) ), `Route`, (中文(简体) ), `RouteChoice`, (中文(简体) ), `RouteCode`, (中文(简体) ), `PairPhase`, (中文(简体) ), `Role`, (中文(简体) ), `DeviceKind`, (中文(简体) ), `LinkStatus`· ; `RouteKind` 从 `@byokit/ui/route`· ; `Account`, (中文(简体) ), `AccountRow`, (中文(简体) ), `AccountAction`, (中文(简体) ), `AccountsSource`, (中文(简体) ), `AgentSpec`, (中文(简体) ), `AgentView`, (中文(简体) ), `AgentWay`, (中文(简体) ), `AsOf`, (中文(简体) ), `Billing`, (中文(简体) ), `Room`, (中文(简体) ), `RoomSpan`, (中文(简体) ), `SignInState`, (中文(简体) ), `UsageWindow`, (中文(简体) ), `UsageWindows` 从 `@byokit/ui/accounts` |

入口点 : `@byokit/ui` (一切,包括反应钩), `@byokit/ui/phase`, (中文(简体) ), `@byokit/ui/route`, (中文(简体) ), `@byokit/ui/link`, (中文(简体) ), `@byokit/ui/kits`, (中文(简体) ), `@byokit/ui/steps`, (中文(简体) ), `@byokit/ui/connect` 财务报告和审定财务报表 `@byokit/ui/accounts` (无反应依赖).

## 登录阶段

`phaseOf()` 翻转你的后端报告 `@byokit/accounts` `view()` 加账户是否签名) 进入相位以绘制 :

| 阶段 | 含义 |
| --- | --- |
| `opening` | 准备提供者的页面或代码 |
| `waiting` | 在提供者的页面上说是 |
| `code` | 在提供者的页面上输入此代码 |
| `done` | 签到,它的工作 |
| `work` | 签署工作计划:提供个人计划 |
| `cancelled` | 在页面上已拒绝, 或在此取消 |
| `busy` | 这台电脑上还有其他的签名 |
| `expired` | 页面或代码已耗尽 |
| `failed` | 其他的,有句直话 |
| `offline` | 家用电脑不接电话 |

`phaseOf()` 财务报告和审定财务报表 `stepOf()` 也来自 `@byokit/ui/phase`,没有反应依赖.

## 路线

`describeRoute(url, kind?)` (另见: `@byokit/ui/route`,没有反应)将拨号地址的路线命名为 组合或设置屏幕。 过 `tailscale`, (中文(简体) ), `direct`, (中文(简体) ), `private`,或 `lan` 当知道(图) [`@byokit/discover`](https://npmcn.com/package/%40byokit/discover)是因为 `tailscale-direct` 改为 `direct`),没有出处,100.64/10读作私语 网络而不是假设为Tailscale,其他主范围读作同为Wi-Fi.

`routeChoices()` (相同的条目,没有React)是登机路由列表的一个单词表: `{ code, title, sentence, needs }` 按建议顺序排列的每条路线,一个超集 `@byokit/discover`是因为 `Via` (也涵盖 临时公共链接和您自己的服务器 `reach()` 没有探测器. `recommend()` 从同一包 带 `sentence` 财务报告和审定财务报表 `needs` 从这里,只增加可用性.

`connectedWords(hostName, url?, kind?)` (相同的条目)是消费者制作的连接线: 计算机 刚刚拨打的路线(`Connected to Kitchen computer - same Wi-Fi.`),或平原 (`Connected to Kitchen computer.`(中文(简体) ) 当没有路线可以命名时.

```ts
import { routeChoices } from '@byokit/ui/route';

console.log(routeChoices().map((c) => `${c.title}: ${c.sentence}`));
```

## 连接账户

`connectView(routes, step?)` (另见: `@byokit/ui/connect`,无 react)从 工具箱发现的路径(D18 in) `docs/runtime-kits.md`: 通过 `@byokit/accounts` `routes(host)` 财务报告和审定财务报表 `@byokit/openclaw` `routes(facts)` 在一起,没有被过滤。 每一个路线都列出,没有的路线也列在这些团体中 (空的漏出的东西):

| 组 | 行数 | 违约提供 |
| --- | --- | --- |
| 计划 | 默认情况下订阅和计划关键路径 | 是的,待准备好了 |
| 按用途支付的薪资 | API 计票路线 | 不,只有选的时候 |
| 在这台电脑上 | 本地运行时间 | 没有 |
| 您的服务器 | 终点路线;此人说如何支付 | 没有 |
| 云账户 | 云层证书 | 没有 |
| 连接的其他方式 | 免费或未知的账单("Billing set by...") | 没有 |
| 演讲、搜索和媒体 | 非聊天服务 | 没有 |

计费决定了小组, 从来没有路线 `offer` 单独: API、 云、 本地、 服务器、 自由行或未知行可以 永远不要在计划中间坐着 每个行都有 `billingWords` ("使用您的 ChatGPT 计划","每个使用权限给您的 OpenAI 账户“”, `method` ("用代码签名")和 `status` (每作好一次)加 `offered`, (中文(简体) ), `ready` 财务报告和审定财务报表 `does`数字 : `signin`, (中文(简体) ), `key`, (中文(简体) ), `setup` (该应用程序本身的云、本地或服务器形式)或 `unavailable`。仅复制视图 这些字段,所以在一条路线上的证书是永远无法到达的;其中没有任何一个字能命名为提供者.

```ts
import { connectStep, connectView, signInFor } from '@byokit/ui/connect';
import { routes } from '@byokit/accounts';

declare const api: { account(id: string): Promise<null>; signIn(id: string, body?: object): Promise<void>; cancel(id: string): Promise<void> };
const step = connectStep({ at: 'list' }, { type: 'pick', key: 'accounts/openai:code' });
const view = connectView(routes({ platform: 'browser' }), step);
// view.groups → the list; view.chosen.row.does === 'signin' → draw the sign-in sheet:
const options = signInFor(view, { read: (row) => api.account(row.id), start: (row, body) => api.signIn(row.id, body), cancel: (row) => api.cancel(row.id) });
```

关键路线 `chosen.key` 已存在的 `keyView` 卡片,标注其计费("你的计划中的钥匙"或"钥匙") (每用一次充电)”);将输入直接提交装箱并只发送 `{ type: 'result', result }`键 用于若干工作空间的`@byokit/accounts` `add` 答题 `workspaces`) 发送 `result: 'workspace'`数字 : 列出这些工作空间,然后 `submit` 又是和那个被选中的. `useConnect({ routes, read, start?, cancel })` 在 React 中保留此步骤并返回视图 `pick`, (中文(简体) ), `back`, (中文(简体) ), `act` 财务报告和审定财务报表 `signIn`的选项 `useSignIn` 在按键的工作表中 `chosen.row.key`。 。 。 .

## 账户行

`accountRows(accounts, room, now, windows?)` (另见: `@byokit/ui/accounts`,没有反应)翻转账户列表和房间阅读 各入一行:账户的提供者和个人姓名(`ChatGPT · Work`然后计划 左边的房间`Plus · 72% left this week`) (中文(简体) ). 一行也载着 `state`, (中文(简体) ), `billing`, (中文(简体) ), `low` (房间在20%左右, 包括20个,对一个未知的房间来说永远不真实),如果有帮助的话 `action`数字 : `sign_in` 签字退出或 账户过期, `wait` 加减 `until` 复入一休息时. `accountRows` 只读它命名的字段, 所以一个账户的证书 从来没有达到一行。 还没有准备好的一行 显示自己的诚实("检查..."), 取而代之的是"蹲下","不签入","再签入","不在你的计划"等.

过 `windows`,账户的 `windowsView(reading, now)` 从 `@byokit/usage/view`作为第四个论点和准备 也带行 `windows` (每个使用窗口,最紧: `Week: 72% left` 与 `resets in 4d`和 `asOf` (单位:千美元)`Read 2 minutes ago`,或 `Read 2 days ago (stale)` )). ). 重置已经过期的窗口已读取 `Session: reset since this reading`,没有百分比或倒计时, 和房间线 `Reset since this reading`。一行僵硬是永远不会 `low`; 没有自己的读取 时间,比如开窗室, 显示它的回放和否 `asOf`从来没有化妆的年龄.

`AccountsSource` 是一个应用程序从自己的后端填充的形状—— `accounts()`, (中文(简体) ), `room(account)` 选择 `windows(account)` - 和 `rowsOf(source, now)` 等待他们,并建造同样的一行; `@byokit/accounts` `list()` 并且一个房间的阅读 适合每个成员一行. `nameSuggestions(email, taken, provider?)` 从电子邮件的本地部分提供最多三个未取入的账户名称 (重复处理的案件不敏感地反对 `taken`),倒回提供者的名字;电子邮件本身从未提供.

```ts
import { accountRows, nameSuggestions, type Account, type Room } from '@byokit/ui/accounts';

declare const list: () => readonly Account[];
declare const reading: (account: Account) => Room;
const rows = accountRows(list(), reading, Date.now());
// rows → [{ title: 'ChatGPT · Work', detail: 'Plus · 72% left this week', state: 'ready', low: false, ... }]
console.log(nameSuggestions('umer@example.com', rows.map((r) => r.title)));
```

在反应中, `useAccounts(source)` 使这些行保持活(`refresh()` 重新阅读; `remove(id)` 删除通过 后端甚至中回倒行后 `useModelPicker(source)` 让拾跑者活着 (单位:千美元)`select()` 立即标记选择,并将其保存在刷新处. `accountsSource(accounts, member, room?)` 从直播中填充源 `@byokit/accounts` 委员和 `cliSource(cli, room?)` 从现场 `cliAccounts()` 工具包,每个成员各有一行;开元适配器待O14:

```ts
import { accountsSource, cliSource, useAccounts, useModelPicker } from '@byokit/ui';
import type { Accounts } from '@byokit/accounts';
import { cliAccounts } from '@byokit/accounts/cli';
import type { Account, Room } from '@byokit/ui/accounts';

declare const accounts: Accounts<any, number>;
declare const cli: ReturnType<typeof cliAccounts>;
declare const reading: (account: Account) => Room;
const fromMember = accountsSource(accounts, 1, reading);
const fromCli = cliSource(cli, reading);

export function useAccountList() {
  return useAccounts(fromCli); // { rows, ready, error, refresh, remove }
}
export function useRunPicker() {
  return useModelPicker(fromMember); // { rows, picker, selection, ready, error, select, refresh, remove }
}
```

## 代理登录

`agentView(agent, accounts, defaults?, models?)` (另见: `@byokit/ui/accounts`,没有反应)绘制一个代理 代理标签。 应用程序为代理及其运行方式命名( E)`{ kind, name, ways }`,每条路由为 `connectView` 拿着它,它也经过的路线 `@byokit/accounts` 作为 `AgentCapabilities`) (中文(简体) ). `accounts` 实值 `list()`, (中文(简体) ), `defaults` 实值 `defaults(member, kind)` 财务报告和审定财务报表 `models` 是正在使用的账户 `models()`。视图包括:

-   `ways`: 经纪人的计划,每个计划都有与之相连接的账户(同样的供应商和账单)和a `state`数字 : `in_use`, (中文(简体) ), `connected`, (中文(简体) ), `sign_in`,或 `unavailable` 和路线本身的话.
-   `count`数字 : `1 of 3 enabled`计划有现成帐户 付费方式从不计算在内.
-   `perUse`:按使用费和其他方式,连同账单单词列出(`OpenAI API key`, (中文(简体) ), `Charged per use to your OpenAI account`) (中文(简体) ). 他们从未为个人提供或选择过.
-   `rule` (单位:千美元)`one at a time`, (中文(简体) ), `inUse` 财务报告和审定财务报表 `note`。一个已签名或休止的已保存账户永远不会被替换为 另外一个: `note` 说到这里 经纪人就一直没被安排下来 `pick` 拒绝.
-   `model`: 使用中账户的自有活模式与所保存的被选中的活模式. 列表中保存的模式不再提供 选择无并说.

应用程序保存一个选择 `setDefaults(member, { account, model }, kind)`; 选择另一个账户替换 最后一个.

```ts
import { agentView, type Account, type AgentSpec } from '@byokit/ui/accounts';

declare const list: () => readonly Account[];
const codex: AgentSpec = { kind: 'codex', name: 'Codex', ways: [
  { id: 'chatgpt', provider: 'chatgpt', name: 'ChatGPT', company: 'OpenAI', via: 'code', billing: 'subscription', offer: 'default', readiness: 'ready' },
  { id: 'openai:key', provider: 'openai', name: 'OpenAI', company: 'OpenAI', via: 'key', billing: 'api', offer: 'explicit', readiness: 'ready' },
] };
const view = agentView(codex, list(), { account: 'chatgpt' });
// view.count → '1 of 1 enabled', view.note → 'Codex uses umer@example.com.', view.perUse.ways[0].title → 'OpenAI API key'
```

## 配对词

与 `@byokit/pair` (以原文发表) `@byokit/link` 最高为0.8.x),从 `@byokit/ui/link` (没有反应 ) :

-   `qrMatrix(offer.text, { border }?)`: 将 QR 配对为一行暗光模块, 并带有宁静的边框 (2,除非给定),用于绘制任何UI.
-   `qrText(offer.text, { border }?)`:与半块文字行相同的QR,所以 `console.log` 在设置脚本中显示 密码电话可以扫描.
-   `consentWords({ hostName, role, device?, detail? })`:对齐前的问题("与厨房电脑对等? 这个设备 你将看见并改变它,直到你把它移出. `device` 命名配对的一面 这不是应用程序( p)`phone`,或 `browser` 网络对接链接; `detail` 后加一行应用句.
-   `pairingView({ phase, hostName, words, error, device?, detail? })`:扫描,比较两个单词,等待一个是,配对,失败.
-   `linkWords(status, hostName)`:链接在一个句子中的状态.

## 步数行

`stepsView()` (另见: `@byokit/ui/steps`,没有反应)将呼叫者自己的步入一行后或 内置检查图,所以一个终端和一个电话显示相同的单词. 每一个步骤都保持ID 它的呼叫者选择 状态在( n)`todo`, (中文(简体) ), `checking`, (中文(简体) ), `ok`, (中文(简体) ), `failed`),可以显示的平话,以及下一个动作时的动作 失败 . `stepsText()` 为终端绘制与文本行相同的行;电话在自己的列表中绘制行. 没有自己的步骤失败 `fix` 说"再试"

```ts
import { stepsText, stepsView } from '@byokit/ui/steps';

// Onboarding "Checking this computer": ids are the app's own, states come from its probes.
const rows = stepsView([
  { id: 'runner', state: 'ok', label: 'Agent runner', detail: 'ready' },
  { id: 'agents', state: 'ok', label: 'Agents found', detail: 'Claude Code (signed in) · Codex (needs sign-in)' },
  { id: 'wifi', state: 'ok', label: 'Wi-Fi', detail: 'this computer is at 192.168.1.144' },
  { id: 'tailscale', state: 'todo', label: 'Tailscale', detail: 'not installed on this computer' },
]);
console.log(stepsText(rows, { title: 'Checking this computer' }));

// "Setting up" reuses the same rows with its own ids; a failed check names its fix:
console.log(stepsView([
  { id: 'serve', state: 'failed', label: 'muxr', detail: 'not answering', fix: "muxr didn't start. Press r to retry." },
])[0]);
```

使用节点运行时输出 :

```text
Checking this computer
  ✓ Agent runner: ready
  ✓ Agents found: Claude Code (signed in) · Codex (needs sign-in)
  ✓ Wi-Fi: this computer is at 192.168.1.144
  ○ Tailscale: not installed on this computer
{
  id: 'serve',
  state: 'failed',
  words: 'muxr: not answering',
  fix: "muxr didn't start. Press r to retry."
}
```

## 运行时间包状态

运行时间包状态,从 `@byokit/ui/kits` (无反应),输入以适应 `@byokit/openclaw/device` 财务报告和审定财务报表 `@byokit/herdr/device` 它们是:

-   运行 : `runStore(oc)` 与 `send(message)` 财务报告和审定财务报表 `stop()`· ; `runView(state, { words, name })` 至今为止,提供的答复 工具在工作,对于失败的运行,工具包的句子(`words` 从 `@byokit/openclaw/device`, (中文(简体) ), `name` "ChatGPT" (中文(简体) ). OpenClaw 软件 `started`, (中文(简体) ), `thinking` 财务报告和审定财务报表 `account` 接受框架时不改变答复、工具或状态; 运行阶段开始于 `send`,而不是网关接受.
-   核准: `approvalsStore(oc)` 保持等待名单的活性(每个等待名单在任何地方或到期时都会得到答复); `approvalWords(approval, words, 'Your helper')` 问个问题.
-   赫尔德: `herdrStore(hd)` 保持树和代理 等待一个答案从一溪; `herdrTreeView(tree)` 以设备箱的状态 `agentWords` 获取; `blockedView(state)` 列出每个等候代理.
-   云电脑: `cloudStore(source)` 保持列表的活性 `cloudView(state)` 给出行——每台机器的 状态,它的最新副本和它的成本,用简单的话来说——由主机对行中一个动作的回答: 问取来.
-   浏览器登录( I)`@byokit/openclaw` 第5.17项: `signInsStore(oc)` 保持请求的实时 与登录的pings; `signInSheetView(request, { name, holder })` 给出句子(工具包字词键及其值)、按钮和 聊天芯片,读作"进入",直到一个经核实的登录; 2; `livePanelView(state)` 说何时绘制相框, 取 输入 显示“ 重新连接 ” , 或者要求确认该人不期望的地址 。 观想问助道无所取.
-   每个店都是 `{ get, subscribe }`: 从 `get()` 在任何UI中; 第一个 `subscribe` 开始跟随, 最后一个 未订阅停止 . `runStep`, (中文(简体) ), `approvalsStep` 财务报告和审定财务报表 `herdrStep` 下有减员者.

在反应或反应原生: `useRun(oc, { words, name })`, (中文(简体) ), `useApprovals(oc)`, (中文(简体) ), `useHerdrTree(hd)` 财务报告和审定财务报表 `useBlocked(hd)`, (中文(简体) ), 与设备客户端一次性制作( w)`useMemo(() => herdrDevice(link), [link])`) (中文(简体) ).

## 你的云计算机

`cloudSource(provider, { since, monthly, known, words })` (另见: `@byokit/ui/kits`,无反应)转云提供者 输入列表中的电话绘图。 云盒是自己的 云盒是你自己的 `Provider` 和它一样,一个列出更多机器 有他们自己的地址,状态和最新的副本.

`cloudStore(source)` 保持该列表的活性: 当第一个收听者到达并再次打开时会读取 `refresh()`,以及 一个动作的答案 落在了要求它. `cloudView(state, { now, words })` 给这些行 平面图——每幅图有其标题,用平面字表示状态(图)`Awake`, (中文(简体) ), `Asleep`, (中文(简体) ), `Waking up…`),其最新保存的复制件(`Saved copy 2 hours ago`),成本(`$0.50 so far this month · about $5.00 a month`),该人可以采取的行动,以及 主持人怎么说的? 上面的一行说,读数是如何走的: `Loading your cloud computers…`, (中文(简体) ), `No cloud computers yet.`, (中文(简体) ), `No cloud computer matches lab.` 或者说 `Can't read your cloud computers right now.`,与 主持人自己在下面说的话.

`cloudStep(state, action)` 其下有减者; `search(text)`, (中文(简体) ), `select(id)` 财务报告和审定财务报表 `act(id, action)` 是什麽 店铺的报价。 在反应或反应土著, `useCloud(source)` 与这三个人的看法相同.

```ts
import { cloudSource, cloudStore, cloudView } from '@byokit/ui/kits';

const provider = {
  list: async () => [{ id: 'sb-1', name: 'desk' }, { id: 'sb-2', name: 'lab' }],
  status: async (ref: { id: string }) => (ref.id === 'sb-1' ? 'on' as const : 'asleep' as const),
  snapshots: async (ref: { id: string }) => (ref.id === 'sb-1' ? [{ id: 'byokit-desk-today', at: new Date(Date.now() - 7_200_000).toISOString() }] : []),
  usage: async () => ({ from: '2026-10-01T00:00:00.000Z', to: new Date().toISOString(), hours: 24, amount: 0.5, currency: 'USD' }),
  wake: async () => {},
  sleep: async () => {},
};

const store = cloudStore(cloudSource(provider, {
  since: '2026-10-01T00:00:00.000Z',
  monthly: () => ({ perMonth: 5, currency: 'USD' }),
}));

const off = store.subscribe(() => {
  const { rows, headline } = cloudView(store.get());
  console.log(headline || 'Your cloud computers');
  for (const r of rows) {
    console.log(`  ${r.title} — ${r.stateWords}${r.copy ? ` · ${r.copy}` : ''}${r.cost ? ` · ${r.cost}` : ''}${r.actionWords ? ` · ${r.actionWords}` : ''}`);
  }
});
```

使用节点运行时输出 :

```text
Your cloud computers
  desk — Awake · Saved copy 2 hours ago · $0.50 so far this month · about $5.00 a month · Put it to sleep
  lab — Asleep · $0.50 so far this month · about $5.00 a month · Wake it
```

## 链接

-   [字节](https://npmcn.com/package/README.md): 单体及其其他套件,包括 [`@byokit/accounts`](https://npmcn.com/package/%40byokit/accounts) 财务报告和审定财务报表 [`@byokit/pair`](https://npmcn.com/package/%40byokit/pair)。 。 。 .
-   实例: [`examples/pwa`](https://npmcn.com/package/examples/pwa) (在浏览器中签名阶段), [`examples/herdr-kit`](https://npmcn.com/package/examples/herdr-kit) (讲稿和 `herdrStore` 从一个电话浏览器, [`examples/expo`](https://npmcn.com/package/examples/expo) (反应土著).
-   [变动情况](https://npmcn.com/package/%40byokit/ui/CHANGELOG.md)

## 许可证

阿帕奇2.0 (英语). 见 [自由主义](https://npmcn.com/package/%40byokit/ui/LICENSE) 财务报告和审定财务报表 [通知](https://npmcn.com/package/NOTICE)。 。 。 .

`@byokit/ui/kits` 还出口 `keyStep(state, action)` 财务报告和审定财务报表 `keyView(state, words)` 明确 **API 密钥( 按使用量计)** 入门相. 国家是: `entry`, (中文(简体) ), `checking`, (中文(简体) ), `workspace`, (中文(简体) ), `ok`, (中文(简体) ), `invalid`, (中文(简体) ), `not_included`· ; 动作是 `submit`, (中文(简体) ), `edit`,以及 `result` 包的加键结果。 提供OpenClaw工具包 `words` 函数用于标签和句子。 这些视图从未包含输入的密钥; 直接提交主机 然后清除输入.

## 常见问题

### @byokit/ui 是什么？

TypeScript套件让人们通过他们已经支付的人工智能计划,在网络,电话和桌面上登录到你的应用程序\.

### 如何安装 @byokit/ui？

在项目目录运行 npm install @byokit/ui，或使用 pnpm add / yarn add / bun add。

### @byokit/ui 支持 TypeScript 吗？

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

### @byokit/ui 支持 ESM 还是 CommonJS？

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

### @byokit/ui 需要什么版本的 Node\.js？

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

### @byokit/ui 可以商用吗？

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

### @byokit/ui 的下载量有多少？

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

### @byokit/ui 还在维护吗？

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