# @chamvi/ui 中文文档

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

版本：0\.8\.0
npm 元数据更新时间：2026-11-08T20:18:58.971Z
中文译文更新时间：2026-11-09T10:19:02.254Z
软件包许可：Apache-2\.0

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

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

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

- 包体积（解压后）：2.1 MB，67 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=26\.0\.0
- 运行依赖：0 个
- peer 依赖：@chamvi/app ^0\.8\.0，@chamvi/core ^0\.8\.0，@chamvi/http ^0\.8\.0
- 首次发布：2026-10-25T08:42:25.363Z
- 最新版本发布：2026-11-08T20:18:58.670Z
- 近 30 天下载量：3201（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：15（近 12 个月 15 个）

## 中文简介

Chamvi仪表板:由@chamvi/http服务.

## 安装

```sh
npm install @chamvi/ui
```

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

## README

![@chamvi/ui](https://raw.githubusercontent.com/chamvi/chamvi/master/.github/assets/logo.svg)

# @chamvi/ ui (英语)

**查姆维仪表板.**  
看看每个特工做什么,开始运行,看他们现场直播,回答同意,  
调查特工状态和时间表,  
由你自己服务 `@chamvi/http` 同一来源的应用程序.

[![npm version](https://img.shields.io/npm/v/@chamvi/ui)](https://www.npmjs.com/package/@chamvi/ui) [![CI](https://github.com/chamvi/chamvi/actions/workflows/ci.yml/badge.svg)](https://github.com/chamvi/chamvi/actions/workflows/ci.yml) [![License](https://img.shields.io/npm/l/@chamvi/ui)](https://github.com/chamvi/chamvi/blob/master/packages/ui/LICENSE)

* * *

**目录**

-   [安装](https://npmcn.com/package/%40chamvi/ui/#readme-installation)
-   [使用量](https://npmcn.com/package/%40chamvi/ui/#readme-usage)
-   [视图](https://npmcn.com/package/%40chamvi/ui/#readme-views)
-   [签名](https://npmcn.com/package/%40chamvi/ui/#readme-sign-in)
-   [选项](https://npmcn.com/package/%40chamvi/ui/#readme-options)
-   [服务](https://npmcn.com/package/%40chamvi/ui/#readme-serving)
-   [API 密码](https://npmcn.com/package/%40chamvi/ui/#readme-api)
-   [许可证](https://npmcn.com/package/%40chamvi/ui/#readme-license)

## 安装

```bash
npm install @chamvi/ui @chamvi/http @chamvi/core --save
```

仅限无害环境管理,节点.js `>=26.0.0`。 。 。 . `@chamvi/core` 财务报告和审定财务报表 `@chamvi/http` 是同伴的依赖关系。 包装了预建的Vue 3应用程序(`dist/app`); 服务器上除了静态文件路由之外,没有运行任何东西.

## 使用量

`uiRoutes()` 返回额外的路径 `createHttpApp({ routes })`数字 :

```typescript
import { Engine, createMemoryStore } from '@chamvi/core';
import { createHttpApp, staticTokens } from '@chamvi/http';
import { uiRoutes } from '@chamvi/ui';

const engine = new Engine({
    store: createMemoryStore(),
    agents: [],
});

const admin = {
    value: process.env.ADMIN_TOKEN ?? 'admin-token-0123456789',
    id: 'admin',
    permissions: ['*'],
};

export const app = createHttpApp({
    engine,
    auth: [staticTokens({ tokens: [admin] })],
    // the dashboard at /ui: runs, approvals, agent state and schedules
    routes: uiRoutes(),
});
```

打开 `http://<host>/ui/` 并用应用程序的无记名标志签字.

## 视图

| 视图 | 显示 | 需求 |
| --- | --- | --- |
| 探员 | 每张卡片:频道芯片(订阅),运行和等待运行,下个克龙起火,24 h活动,最后运行,预算,状态收藏;登陆页面 | `run:read` |
| 探员 | 预算、状态收藏、频道芯片、启动运行(带有 `http.on()` ),和标签概览、运行、状态、时间表 | `run:read`· ; `agent:<name>:run` 开始; `state:read` 代表国家 |
| 运行 | 每跑一跑,最新一跑,通过代理和状态过滤,有状态和标志;每5秒刷新一次 | `run:read` |
| 运行 | 有预算、信封(频道、订阅、地址、有效载荷)和步骤时间表(illm、工具、等)的头条,用流出文本在SSE上直播;取消 | `run:read` 或者说 `agent:<name>:run`· ; `run:cancel` 要取消的语句 |
| 核准 | 等待与请求的标题和正文、工具和它穿过的通道一起运行; 批准或拒绝有原因 | `run:read` 到列表中, `agent:<name>:approve` 回复 |
| 时间表 | 下个点火时间为每个经纪人订票 | `run:read` |

24小时的数字来自最新的100个运行(API没有时间过滤),并读取 `100+` 超过.

一个频道的审批信息通过运行链接一个审批: `/ui/approvals?run=<runId>&approval=<approvalId>` (单位:千美元)`approval` 可选的,然后运行当前的一个). 链接没有符号 。 签名后,它通过登录(token form或authup)返回到同一个URL;签名后,仪表盘滚动到该运行的核准卡,突出并突出重点,答案通过 `POST /runs/:id/approve` 作为注册的校长。 不再等待批准(回答、过期、转到另一个)的运行显示通知连接运行;链接需要读取运行(`run:read` 或者说 `agent:<name>:run`) 此外 `agent:<name>:approve`:没有批准许可,卡片在403个通知下只显示读取,没有读取只显示403个通知. 运行页面和代理页面链接等待运行的方式相同.

## 签名

-   **脚本** (默认):粘贴一个静态无记名符号(`staticTokens()` 联 合 国 `@chamvi/http`) (中文(简体) ). `GET /me` 检查它之前保存,在 `sessionStorage` 选项卡;在API无法到达的情况下重新加载.
-   **认证**数字 : `uiRoutes({ auth: { authup: { url, clientId, realmId? } } })` 添加“ 继续认证”( 与 PKCE 的 OIDC 代码流); 其符号在标签中存在 `sessionStorage` 也不要在饼干里 认证客户端需要 `<origin><uiBase>/login/callback` 例如,作为重定向URI. `https://chamvi.example.com/ui/login/callback`和应用程序对等 `authup()` 验出者. `auth: { tokens: false }` 隐藏符号形式.

一个已过期或被吊销的证书回答 401: 仪表盘刷新一次认证会话, 否则返回登录并返回它所打开的页面 .

## 选项

| 选项 | 默认 | 目的 |
| --- | --- | --- |
| `basePath` | `'/ui'` | 仪表板的路径在应用程序下 `basePath`小写`/api` + 键 `/console` 服务 `/api/console/`(中文(简体) ) |
| `auth.tokens` | `true` | 提供符号表 |
| `auth.authup` | 无 | `{ url, clientId, realmId? }` 认证服务器 |
| `root` | 软件包 `dist/app` | 另一个构建文件夹 |

丢弃无效的选项 `InvalidAgentDefinitionError` 联 合 国 `@chamvi/core`. 第一项请求报告缺失的建筑物(500个, `onError`),不在施工阶段,因此施工可能晚点才到.

## 服务

-   每个 `GET` 下级 `basePath`: 建筑的文件, 否则 `index.html` 对于没有扩展路径(客户路线),否则为404. `index.html` 获得 `<base href="<uiBase>/">` 和配置为JSON块.
-   隐藏在下面的文件 `assets/` 为: `cache-control: public, max-age=31536000, immutable`其它东西 `no-cache`。 。 。 .
-   路径解码一次并拒绝使用 `..`, (中文(简体) ), `.`,空片段,回鞭,NUL和双码:建筑外再无读取.
-   每个答案都包含着 `Content-Security-Policy` (单位:千美元)`default-src 'self'`只有应用程序的脚本, `connect-src` 财务报告和审定财务报表 `form-action` 添加认证来源, `frame-ancestors 'none'`, (中文(简体) ), `referrer-policy: no-referrer` (一个批准链接的ids 从不离开作为裁判员), `x-content-type-options: nosniff` 财务报告和审定财务报表 `x-frame-options: DENY`。 。 。 .
-   该路由未经校正(应用程序没有秘密;每一次API呼叫都携带被签名的无记名符號)并跳过速率限制器.

在前缀下挂载应用程序的代理软件后面设置应用程序 `basePath`仪表板跟着它.

## 使用@ chamvi/ app

`uiModule()` 从 `@chamvi/ui/module` 提供仪表板路由( u)`/ui` 下级 `CHAMVI_BASE_PATH`并读 `CHAMVI_UI_AUTHUP_CLIENT_ID`, (中文(简体) ), `CHAMVI_UI_AUTHUP_REALM_ID` 财务报告和审定财务报表 `AUTHUP_URL` 当它叫,除非 `auth` 给出. `@chamvi/app` 是可选的对等点;主条目从不导入.

```ts
import { createApp } from '@chamvi/app';
import { uiModule } from '@chamvi/ui/module';

export default createApp({ agents, modules: [uiModule()] });
```

## API 密码

| 导出 | 仁爱 | 目的 |
| --- | --- | --- |
| `uiRoutes` | 函数 | 仪表板路线 `createHttpApp({ routes })` |
| `DEFAULT_UI_BASE_PATH` | 常数 | `'/ui'` |
| `ASSET_CACHE_CONTROL` | 常数 | `'public, max-age=31536000, immutable'` |
| `DOCUMENT_CACHE_CONTROL` | 常数 | `'no-cache'` |
| `CONFIG_ELEMENT_ID` | 常数 | `'chamvi-config'`,插入的配置块的id |

类型 : `UiRoutesOptions`, (中文(简体) ), `UiConfig`, (中文(简体) ), `UiAuthupConfig`。 。 。 .

`@chamvi/ui/module`数字 : `uiModule`, (中文(简体) ), `UiModule`, (中文(简体) ), `UI_MODULE_NAME`类型 `UiModuleOptions`。 。 。 .

## 许可证

原载 [Apache 许可证 2.0](https://npmcn.com/package/%40chamvi/ui/LICENSE)。 。 。 .

## 常见问题

### @chamvi/ui 是什么？

Chamvi仪表板:由@chamvi/http服务\.

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

在项目目录运行 npm install @chamvi/ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@chamvi/core（^0\.8\.0）、@chamvi/http（^0\.8\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

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

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

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

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

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

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

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

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

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

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

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

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