# @2lab\.ai/ui 中文文档

规范地址：https://npmcn.com/package/%402lab.ai/ui/

版本：0\.38\.0
npm 元数据更新时间：2026-11-07T04:55:24.371Z
中文译文更新时间：2026-11-07T07:44:29.309Z
软件包许可：UNLICENSED

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

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

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

- 包体积（解压后）：6.9 MB，365 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2026-10-27T08:53:58.260Z
- 最新版本发布：2026-11-07T04:55:24.171Z
- 近 30 天下载量：6524（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：49（近 12 个月 49 个）

## 中文简介

2lab的代理UI组件——Web组件,零运行时间依赖. Agent Inbox, Agent Run, Authority Card, AI Answer, 工具呼叫卡, 上下文窗口, Compact Breaks, Model Picker, 内存面板, Agent Quee, Toaster, Agent Streaming, Ag

## 安装

```sh
npm install @2lab.ai/ui
```

也可以使用：`pnpm add @2lab.ai/ui`、`yarn add @2lab.ai/ui`、`bun add @2lab.ai/ui`

## README

# @ 2lab.ai/ ui (英语)

2lab soma-work仪表板的代理UI组件,作为 **Web 组件** 零运行时间依赖.

**演示文件( D) : [https://2lab.ai/ui\* (中文(简体) )](https://2lab.ai/ui*)\* 联合国**

| 构成部分 | 标记 | 它告诉你什么 |
| --- | --- | --- |
| 代理运行( 屏幕) | `<ui-agent-run>` | 探员现在在做什么 计划什么 需要什么 |
| 代理收件箱 | `<ui-agent-inbox>` | 运行需要你,运行,完成 |
| 代理树 | `<ui-agent-tree>` | 是谁开始的,每个代理在做什么, 和哪个分支的成本是什么 |
| 特工岛 | `<ui-agent-island>` | 活跑你没有看——一种药丸,其状态,标题和跑钟(或"+N"多)会成长为跑跑:它所走的步子,多远,停放和开放(`ui-action`); 1个弹簧为外形, Esc 关闭 |
| 工作 | `<ui-working>` | 代理人现在在做什么,还有多久——一条线:州标记(工作环、等待点、检查、十字架)、在工作时缓慢突出的台阶、运行时间(4米12分之后完成)以及代号等细节 |
| AI 答复 | `<ui-ai-answer>` | 答案 里面的链接 副本 回复时间 |
| 工具呼叫卡 | `<ui-tool-call-card>`, (中文(简体) ), `<ui-tool-call-group>` | 经纪人叫什么来着,有什么回来,花了多久 |
| 对话 | `<ui-conversation>` | 谁说了什么,什么时候——指示,用他们的反应时间,系统事件以及他们携带的文件来回答;在滚动时,年长的转会加载;在摘要上重试,按要求加载答案,选择转会,或者把它写成一页 |
| 工作日志 | `<ui-work-log>` | 代理机构所做的,任务任务——指令,叙述,工具调用,原始输出,子代理;每个任务一个元行,任务之间的条目,同一键盘路径上的时间档工具卡 |
| 选择表单 | `<ui-choice-form>` | 特工需要你决定什么——编号问题,推荐的选择,你自己的答案,立即提交;或者用无法回答的原因锁定 |
| 进球牌 | `<ui-goal-card>` | 代理商正在向着什么,它有多远,以及被排入什么队列——只有主机的回答,元和关于当前和过去目标的说明;完整,暂停,用第二分压删除 |
| 任务计划 | `<ui-task-plan>` | 计划逐步——完成、执行、放弃或移动——以及摆在它面前的计划; `setOpen()` 编号 : `isOpen()` 折叠;或 `max` 用行表示卡片,并有“+N”按钮(`ui-more`整个计划 |
| 任务运行 | `<ui-task-runs>` | 每次任务运行——状态,时间,符号,工具和修订,大致运行与注释,主机可以给出的总行 ("n of m show") |
| 行动节点 | `<ui-action-node>` | 预定的任务( cron) —— 它运行什么, 当下一个时, 哪个频道和模型被它所触碰, 它的状况; 现在就跑 / 暂停 / 编辑 / 删除在悬空或转角按钮上从角落扇出, 删除并按下第二个按键 |
| 代理队列 | `<ui-agent-queue>` | 提供者的能力、费率限制和预定工作路线 |
| 背景窗口 | `<ui-context-window>` | 内容有多完整,自动比较有多远 |
| 核准卡 | `<ui-approval-card>` | 代理商想要做什么,以及风险有多大——在代理商到期前批准/拒绝或回答其问题;通过滑动批准不可逆的行动(prod QQ,力推) |
| 代理引导 | `<ui-agent-steering>` | 你告诉代理中场运行, 无论它有没有 —— 排出下一步骤的注释, 现在发送, 编辑, 取消 ; 排入的注释在回合计数按钮后等待( 排出或按下队列, 电话上的一个底页) |
| 烤面包机 | `<ui-toaster>` + 键 `toast()` | 你刚才所做的是否奏效——结果、重试失败、承诺旋转器、撤销 |
| 契约细目 | `<ui-compact-breakdown>` | 一个数字和它是什么构成的——按模型或用户划分的支出和代币 |
| 内存面板 | `<ui-memory-panel>` | 代理对您的记忆——搜索、编辑、删除并撤销 |
| 模型拾取器 | `<ui-model-picker>` | 什么样的模式和努力,有窗口、收缩和价格 |
| 状态栏 | `<ui-status-bar>` | 会话是否是活的——状态单词,开始时间和运行时钟,及其动作(名称,被切换,安静) |
| 地标导航 | `<ui-deck-nav>` | 你身处的牌是哪张牌 有偷看的边缘(或只有边缘) |

表面——物剂周围的页平面块(0.6.0):

| 表面 | 标记 | 它告诉你什么 |
| --- | --- | --- |
| 应用程序栏 | `<ui-app-bar>` | 你在哪里,不管它是直播的,谁的签名——折叠成菜单的芯片导航,状态点,账户,主题切换 |
| 断层 | `<ui-stat-strip>` | 时期如何发展——一段时期分化控制,滚动数字,按量分解工具提示,更公开 |
| 条形图 | `<ui-bar-chart>` | 它是如何随时间而移动的——小的单条或堆叠条,轴勾,键盘和工具提示每条,传说,空状态 |
| 文件卡 | `<ui-file-card>` | 文件是什么 : 手写或缩略图、 名称、大小和年龄作为平板、 排或芯片 |
| 媒体网格 | `<ui-media-grid>` | 带这个消息的图片是什么——一行牌(一张牌一行的契约),其余的"+N"上,一整张相片在一个宽的盒子中;每张相片一个由动作命名的按钮来打开它(`ui-open` 包含索引 , 懒惰的图像 , “ 不预览 ” , 对于失败的图像 |
| 艺术查看器 | `<ui-artifact-viewer>` | 代理商所做的——文件的条形或网格,悬浮的偷看,以及一个带有上/下,预览和下载的灯盒;一个可信赖的页面运行其脚本,一个PDF在浏览器的查看器中打开, `ui-before-view` 编号 : `ui-closed` 为东道主的身体服务 |
| 图像比较 | `<ui-image-compare>` | 更改前后的 : 在一行下拖放两张图片( 它滑行到边缘) 键盘上的滑动器, 角上的标签, “ 不预览 ” |
| 作曲家 | `<ui-composer>` | 你接下来寄出的东西——一个不断增长的字段,放出/粘贴附件,一个语音符,工具, `/` 财务报告和审定财务报表 `$` 菜单(命令、技能),输入发送 |

页面部分——应用程序周围的页面:设置,内存,登录 (0.9.0):

| 页 次 | 标记 | 它告诉你什么 |
| --- | --- | --- |
| 设置导航 | `<ui-settings-nav>` | 在较长的设置页面中——只随您滚动、搜索和修改的章节链接,通知槽;电话上的芯片行 |
| 设置行 | `<ui-setting-row>` | 一个偏好——标签,描述,默认,您自己的控制,保存... / 保存/ 出错, 锁定原因, 修改 |
| 知识页 | `<ui-knowledge-pages>` | 代理商对主题的了解——可搜索的页面列表和编辑器(标题,别名,带有预览或作为原始源,历史),保存,删除两次,没有丢失的草稿;或作为页面被设置 |
| 纪事日志 | `<ui-episode-log>` | 代理商注意到了什么,什么时候——逐日收录,编辑到位,删掉两次,给今天加个便条 |
| 认证卡 | `<ui-auth-card>` | 你作为供应商、账户或切换到的会话签字; `authCardHtml()` 让它在服务器上(同样来自 `@2lab.ai/ui/server`、无害环境管理或普通JS,没有DOM),在没有JavaScript的情况下工作,以及存在标记的元素水合物 |

原始内容——构件为仪表板共享,语气和动作相同:

| 初级 | 标记 | 它会做什么 |
| --- | --- | --- |
| 分块 | `<ui-segmented>` | 数个(周期,视图)选择一个滑动的升起芯片——无线电组,旋转箭头 |
| 标签 | `<ui-tabs>` | 挂起主机槽面板的标签列表; 选中标签的墨子下划线滑翔 |
| 菜单 | `<ui-menu>` | 菜单锁定在触发器上:物品、收音机、复选框、打字头、原生-意识弹出 |
| 工具提示 | `<ui-tooltip>` | Hover / focus 标签或富豪卡 延迟,可徘徊,ESC 解雇, `aria-describedby` |
| 通行证 | `<ui-hovercard>` | 多个触发器的预览卡( S)`for` 选择器或 `anchor(el)`徘徊意图, `ui-open` 填充,可盘旋, Esc; 不 `aria-describedby` |
| 对话框 | `<ui-dialog>` | 土著 `<dialog>` 带有已淡出 srim, 进入/ 退出动作, 焦点陷阱并返回, 手机底页( )`size-phone` 选择它的大小; `ui-closed` 一旦出口结束 |
| 绘图器 | `<ui-drawer>` | 在宽屏幕上停靠页面的侧面工作表; 可调整的边缘、 斜线和可中断的幻灯片 |
| 披露 | `<ui-disclosure>` | 在一个区域上长出 0fr → 1fr 的简要行, 关闭时为惰性; 关闭时保持视图的链接行 |
| 日志滚动器 | `<ui-log-scroller>` | 最新的下方滚动框:沿着最新的,页式的旧项目输入而不移动您的位置(`[data-anchor]` 在项目数内行,“跳到最新”并加上未读数;或在页滚动时,其高高如其项目 |
| 击倒 | `<ui-elapsed>` | 一个直播时间——跑来跑去,停看,多久前倒计时——在一个共享的一整秒滴滴上,文本被更改了位置;在主机的单词中倒计时(倒计时)`after="후 복귀"`, (中文(简体) ), `at-zero="곧 복귀"`, (中文(简体) ), `precision="minute"` 24+++ 1++++ 20+++) (中文(简体) ) |
| 面包屑 | `<ui-breadcrumbs>` | 在你所在的地方——线索根首先,链接或 `ui-select` 按钮,当前页的最后一页;当行缩小时,中间折叠到“.”后面,这是其端槽中的状态芯片; `sm` 用于面板路径 |
| 计量 | `<ui-meter>` | 边框的事物剩下多少(或使用)——一个装满了它的酒吧或电池、百分比或你自己的单词、来自 `low` 编号 : `high` 编号 : `optimum` (当地人) `<meter>`'rule' ; 一个新值将填入位置幻灯片; `role="meter"`,未知是“?” |
| 步骤音轨 | `<ui-step-track>` | 在管道下,每步一个点(做,失败,跳出)和目前的一粒药丸(或一整段),即“审查5分之3”;步骤的改变通过所跨越的点发出警钟; `interactive` 点发送 `ui-select` |
| 幻灯片到确认 | `<ui-slide-confirm>` | 无法收回的行动——把把手推过;越过它接管的标记, `ui-confirm` (可取消), 手柄打开为“ 确认” , 然后主机忙于 / 完成 / 失败; 键盘上的滑动器 (- to the end, End) |
| ASC 二届理事会 醒来 | `<ui-ascii-wake>` | 静静地活下来的状态——一立方体(或一整个字段)一出墨水点,指针会拖出一个字符的叫声来穿去,有媒体发出一个指环; `activity` 在代理工作时自己搅动它; 仍然在减少运动, 闲置时没有框架 |
| 复制字段 | `<ui-copy-field>` | 在其它地方粘贴的值——一个链接(中折,端会保留)或一个命令块,复制在一个带有证据的平面上(检查,“Copied”),并蒙上Show / Hide以示秘密; `ui-copy` (可撤销)让主机复制它构建的东西,然后 `confirm()` |

基金会: `@2lab.ai/ui/icons` (16克、1.5克) `currentColor` SVG 设置 - `icon('gear')` 返回 SVG 字符串)和 `@2lab.ai/ui/ui-kit.css` (轻-DOM课在同一个符号上: `.ui-btn` 用一出墨水为主, `.ui-icon-btn`, (中文(简体) ), `.ui-fab` - 圆形,或 `.is-extended` 用一个词 `.is-folded` 折叠而去, `.ui-chip` (单位:千美元)`.is-sm`· ; `.is-toned` 带有内线 `--ui-tone` 用于每样颜色,如环境标记——标记,而不是切换:按住并徘徊状态保持平原芯片的状态, `.ui-select-chip` (当地人) `<select>` 读作标签大小的芯片, 单独或在一个 `<label>` 以白话盟誓, `.ui-spinner` (工作戒指;一个有点的平地戒指, `.ui-status`, (中文(简体) ), `.ui-kbd`, (中文(简体) ), `.ui-dl`, (中文(简体) ), `.ui-skeleton`, (中文(简体) ), `.ui-empty`, (中文(简体) ), `.ui-status-line`, (中文(简体) ), `.ui-avatar`, (中文(简体) ), `.ui-owner-badge` (板名药; `.is-self` 轨道 - `syncOwnerBadgeOrbit(el)` 保持与董事会一致, `.ui-sr-only`, (中文(简体) ), `.ui-expand`, (中文(简体) ), `.ui-section-head` 带有 `.ui-count` 徽章和页面部分 `.ui-input`, (中文(简体) ), `.ui-switch`, (中文(简体) ), `.ui-card`, (中文(简体) ), `.ui-notice`, (中文(简体) ), `.ui-row` 这行就是页面, `aria-current="page"`保持盘旋状态。 韩语口语( O)`lang="ko"`)在文字之间断开,从不包含在其中,在每一个元素中和 每节套件类(`word-break: keep-all`) (中文(简体) ).

设计——整个寻找用这些部件建造的场地(0.38.0): `data-design="<id>"` 打开 `<html>` (与 `tokens.css`) 重唱 每一个元素和工具包类,锁定在设计中的颜色方案,以及 `designs/<id>/DESIGN.md` 在这个寄存器中保持其语气和方式 (排出,类型,组成,验收清单). 开始于 [`designs/README.md`](https://npmcn.com/package/%402lab.ai/ui/designs/README.md); 现场直播 [https://2lab.ai/ui/docs/designs 互联网档案馆的存檔,存档日期2013-12-22](https://2lab.ai/ui/docs/designs)。 。 。 .

| 设计 | 属性 | 听着 |
| --- | --- | --- |
| 现代单曲 | `data-design="modern-mono"` | 近黑色画布,白色类型,对齐的数字;颜色只用于意思——绿色上下,红色下,黄色最爱,薰衣草焦点(仅暗色) |

服务器 - `@2lab.ai/ui/server`,其中没有元素的条目: `authCardHtml(data)` 使认证卡成为声明阴影 将元素根接到水合物的位置, `authCardCss` 作为其数据的工作表,其中 `tokensCss`, (中文(简体) ), `kitCss`, (中文(简体) ), `icon()` 和逃亡者, 没什么 它在负载时会触碰DOM,所以它运行在节点上作为无害环境管理(HEM)`import`或普通JS( 普通JS ) (`require`,则 `.cjs` ); 其类型 节点Next和节点10(`typesVersions`) (中文(简体) ).

```js
// a route handler, ESM or CommonJS — the page works before (and without) the script
const { authCardHtml, tokensCss } = require('@2lab.ai/ui/server');
res.send(`<style>${tokensCss}</style>${authCardHtml(data, { page: true })}<script type="module" src="/lib/auth-card.js"></script>`);
```

声音 – 选入接口提示 (0. 11: 0): 每个元素都会为人物刚刚的行为打出一个短提示( 标签时跳出) 变化, 对话框打开时的空气, 运行完成时的柔和和弦). 关到人打开为止. `@2lab.ai/ui/sound` 实值 政策`setSound`, (中文(简体) ), `bindSound`静静的区域,选择输入),不装入音频; `@2lab.ai/ui/sound-cuelume` 这是 玩家 - [库鲁姆](https://github.com/danielwh2/cuelume)14个提示与Web Audio同步直播 没有音频文件, 捆绑后,软件包保持了零运行时的依赖性. 见 [https://2lab.ai/ui/docs/sound (中文(简体) )](https://2lab.ai/ui/docs/sound)。 。 。 .

```js
import { bindSound, setSound } from '@2lab.ai/ui/sound';
bindSound();                                   // your own <button data-ui-sound> … sound too
// in the click that turns sound on (keep the choice beside the theme switch):
const { cuelumeSound, unlockSound } = await import('@2lab.ai/ui/sound-cuelume');
setSound({ player: cuelumeSound, enabled: true });
unlockSound();
```

## 安装

```
npm i @2lab.ai/ui
```

```js
import '@2lab.ai/ui';                 // registers every element
import '@2lab.ai/ui/context-window';  // or just one
import '@2lab.ai/ui/tokens.css';      // optional page tokens (data-theme="dark" switches)
import '@2lab.ai/ui/ui-kit.css';      // optional light-DOM classes (buttons, chips, status …)
import { icon } from '@2lab.ai/ui/icons';
import { authCardHtml } from '@2lab.ai/ui/server';  // on a server: no DOM, no element; require() works too
```

无构建步骤 : `<script type="module" src="https://2lab.ai/ui/lib/index.js"></script>`。 。 。 .

## 使用

```html
<ui-context-window lang="en"></ui-context-window>
<script type="module">
  const el = document.querySelector('ui-context-window');
  el.data = { window: 1_000_000, autoCompactAt: 750_000, parts: { cacheRead: 272300, output: 10 }, canCompact: true };
  el.addEventListener('ui-compact', async () => {
    el.data = { ...el.data, compactState: 'sending' };   // assign a new object — in-place mutation does not re-render
    await fetch('/compact', { method: 'POST' });
    el.data = { ...el.data, compactState: 'sent' };
  });
</script>
```

数据单位:(`el.data = {...}` 总是指定新对象),出事(`ui-*`(bbbling + 组成)。 元素从不获取。 默认使用英语, 韩语使用 `lang="ko"`轻/暗跟踪操作系统, `theme="light|dark"` 针一, `--ui-*` 自定义属性主题一个页面,以及 `data-design="modern-mono"` 应用整个设计(参见 [`designs/README.md`](https://npmcn.com/package/%402lab.ai/ui/designs/README.md)) (中文(简体) ).

## 开发

```
npm i
npm run dev          # demo site with live reload
npm run verify       # biome · tsc · vitest · lib + site build · packed-tarball consumer check (NodeNext + node10 types, every element registers, require('@2lab.ai/ui/server'))
```

见 `AGENTS.md` 部分合同.

## 贷项

对互动模式的研究来自 [影响UI](https://www.affectui.com/) 并重新执行 苏玛工作仪表板 拥有数据。 不包括影响UI代码或资产.

接口声音 : [库鲁姆](https://github.com/danielwh2/cuelume) (麻省理工学院,丹尼尔·贝利) `dist/sound-cuelume.js`; 声音政策从 [吗啡UI](https://morphin.dev/docs/sound) (麻省理工学院,Ivan Oliinyk).

六个元素从 [(原始内容存档于2018-09-21) (英语). fango.dev](https://bencho.dev/)自由地块(麻省理工,洛伦佐·卡布拉 -- [https://bencho.dev/licence 页面存档备份,存于互联网档案馆](https://bencho.dev/licence):滑行到确认,代理岛(Dynamic Island),步道(Step player),动作节点, 图像比较和ASCII Wake. 班乔 Pro 块不能在组件库内传递,所以没有包含任何块.

他们的通知飞入 `dist/THIRD_PARTY_NOTICES.md`。 。 。 .

## 常见问题

### @2lab\.ai/ui 是什么？

2lab的代理UI组件——Web组件,零运行时间依赖\. Agent Inbox, Agent Run, Authority Card, AI Answer, 工具呼叫卡, 上下文窗口, Compact Breaks, Model Picker, 内存面板, Agent Quee, Toaster, Agent Streaming, Ag

### 如何安装 @2lab\.ai/ui？

在项目目录运行 npm install @2lab\.ai/ui，或使用 pnpm add / yarn add / bun add。

### @2lab\.ai/ui 支持 TypeScript 吗？

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

### @2lab\.ai/ui 支持 ESM 还是 CommonJS？

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

### @2lab\.ai/ui 可以商用吗？

@2lab\.ai/ui 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。

### @2lab\.ai/ui 的下载量有多少？

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

### @2lab\.ai/ui 还在维护吗？

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