# @beacon\.li/bar 中文文档

规范地址：https://npmcn.com/package/%40beacon.li/bar/

版本：0\.0\.23
npm 元数据更新时间：2026-11-04T20:49:11.545Z
中文译文更新时间：2026-11-07T19:33:56.301Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40beacon.li/bar
原文对照：https://npmcn.com/package/%40beacon.li/bar/?lang=original

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

- 包体积（解压后）：19.3 kB，7 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2023-05-22T12:52:22.300Z
- 最新版本发布：2026-11-04T20:49:11.413Z
- 近 30 天下载量：5018（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：24（近 12 个月 2 个）

## 中文简介

`shell npm install @beacon.li/bar`

## 安装

```sh
npm install @beacon.li/bar
```

也可以使用：`pnpm add @beacon.li/bar`、`yarn add @beacon.li/bar`、`bun add @beacon.li/bar`

## README

# 灯塔

## 安装

```shell
npm install @beacon.li/bar
```

或

```shell
yarn add @beacon.li/bar
```

## 使用量

```javascript
import {Beacon} from '@beacon.li/bar';

Beacon.load('ORG_ID');
```

#### 下一个.js

```javascript
import {Beacon} from '@beacon.li/bar';

if (typeof window !== 'undefined') {
    Beacon.load('ORG_ID');
}
```

### 正在装入用户数据

**参数**

-   用户编号(字符串):- 用户唯一的标识符——可以是电子邮件或数据库id
-   元数据(对象):- 含有要传递到灯塔栏的用户数据的对象
-   authDetails (object QQ函数 QQ字符串) (可选) :- 用户的认证符号,参见 [认证用户](https://npmcn.com/package/%40beacon.li/bar/#readme-authenticated-users-authdetails)

```javascript
import {Beacon} from '@beacon.li/bar';

Beacon.loadUser(userId, {
    name: 'John Doe',
    isPremiumUser: true,
    currentPlan: 'Premium'
})

```

### 认证用户( authDetails)

如果为您的 Org 启用了 auth, 请将用户的符号作为第三个参数 `loadUser`。它接受一个符号 调用(建议),静态符号对象,或赤裸访问符号字符串.

**调用回话**

在装入时会重新调用回调,在访问符即将过期时也会再次调用回调(如果没有刷新符) 返回)或刷新失败。 一个失败的呼叫在认证被清除之前被重审了三次 .

```javascript
import {Beacon} from '@beacon.li/bar';

Beacon.loadUser(userId, {name: 'John Doe'}, async () => {
    const res = await fetch('/api/beacon-token');
    return res.json();
    // {accessToken, accessTokenExpiresAt?, refreshToken?, refreshTokenExpiresAt?}
});
```

**静态符号**

```javascript
Beacon.loadUser(userId, {}, {accessToken, accessTokenExpiresAt, refreshToken, refreshTokenExpiresAt});
```

**注销**

撤销服务器上的符号,清除本地认证状态并卸下栏.

```javascript
await Beacon.logout();
```

### 原生路线

##### 香草联署材料

```javascript
import {Beacon} from '@beacon.li/bar';

Beacon.setRouter(url => {
    // your logic here
});
```

##### 反应

在路由器中您的主要孩子组件中:

```javascript
import {Beacon} from '@beacon.li/bar';
import {useHistory} from 'react-router-dom';
import {useEffect} from 'react';

const history = useHistory();

useEffect(() => {
    Beacon.setRouter(path => {
        history.push(path);
    });
}, [history]);

```

##### 阴道

在您的主要组件中:

```javascript
import {Beacon} from '@beacon.li/bar';
import {useRouter} from 'vue-router';
import {onMounted} from 'vue';

export default {
    setup() {
        const router = useRouter();
        onMounted(() => {
            Beacon.setRouter(path => {
                router.push(path);
            });
        })
    }
}

```

##### 角质

在您的主要部分:

```typescript
import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';
import {Beacon} from '@beacon.li/bar';

@Component({
    selector: 'app-my-component',
    templateUrl: './my-component.component.html',
    styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {

    constructor(private router: Router) {
    }

    ngOnInit() {
        Beacon.setRouter((path: string) => {
            this.router.navigateByUrl(path);
        });
    }
}
```

### 在方案上开放和关闭

```javascript
import {Beacon} from '@beacon.li/bar';

Beacon.open();

Beacon.close();
```

### 回电

#### 添加回调

添加多次召回会取代旧的

**参数**

-   键(字符串) :- 调用键
-   回调( 函数) : - 要执行的回调函数
    -   签名 : -( 用户ID, 元数据) :
    -   userId (字符串)(默认:信标-匿名) :- 期间通过的独特标识符 `loadUser`
    -   元数据( 对象)( 默认 : ) : - 元数据对象在 `loadUser`

```javascript
import {Beacon} from '@beacon.li/bar';

Beacon.addCallback('your_callback_key', (userId, metaData) => {
    // your logic here
});
```

#### 删除回调

**参数**

-   键(字符串) :- 调用键

```javascript
import {Beacon} from '@beacon.li/bar';

Beacon.removeCallback('your_callback_key');
```

**反应示例**

以反应和回调来操纵状态

```javascript
import {Beacon} from '@beacon.li/bar';
import {useEffect, useState} from 'react';

function Component() {
    const [state, setState] = useState(false);

    useEffect(() => {
        const callback = (userId, metaData) => {
            setState(true);
        }
        Beacon.addCallback('your_callback_key', callback);

        return () => {
            Beacon.removeCallback('your_callback_key');
        }
    }, [setState])
}
```

## 触发智能之旅

从您的应用程序触发智能出行

**参数**

-   riveId (字符串) : -- 旅程的编号
-   类型 (字符串)(可选)(默认:主) :- 旅行类型(主要、被钉住、封闭)

```javascript
import {Beacon} from '@beacon.li/bar';

Beacon.startJourney('journeyId', 'main');
```

## 执行命令

从应用程序执行命令

**参数**

-   命令Id(字符串):- 命令的编号

```javascript
import {Beacon} from '@beacon.li/bar';

Beacon.executeCommand('commandId');
```

## 打开帮助文档

打开应用程序中的帮助文件

**参数**

-   帮助DocId (字符串): -- 帮助文件的编号
-   类型 (字符串)(可选) (默认:默认) :- 帮助文件的类型( 默认, 最大)

```javascript
import {Beacon} from '@beacon.li/bar';

Beacon.openHelpDoc('helpDocId', 'default');
```

## 纪念事件

将自定义事件释放到灯塔酒吧,并在规则和旅程中使用

**参数**

-   事件Name (字符串) : -- 活动名称 _(只允许字母(a-zA-Z0-9),下划线( )和连字符(-))_
-   属性(对象)(可选) :- 要随事件一起传递的属性

```javascript
import {Beacon} from '@beacon.li/bar';

Beacon.trackEvent('event_name', {
    // your attributes here
});

```

## 聆听灯塔事件

听听灯塔公司发布的不同分析事件

### 添加事件听众

**参数**

-   函数
    -   签名 : -( 事件Name, 属性, userId) QQ
        -   事件Name (字符串) : -- 活动名称
        -   属性(对象) :- 事件传递的属性
        -   userId (字符串)(默认:信标-匿名) :- 期间通过的独特标识符 `loadUser`

```javascript
import {Beacon} from '@beacon.li/bar';

Beacon.addEventListener((eventName, attributes, userId) => {

})
```

### 删除事件倾听器

```javascript
import {Beacon} from '@beacon.li/bar';

Beacon.removeEventListener(func);
```

### 以反应和事件倾听器处理状态的示例

```javascript
import {Beacon} from '@beacon.li/bar';
import {useEffect} from 'react';

function Component() {
    useEffect(() => {
        const listener = (eventName, attributes, userId) => {
            // your logic here
        }

        Beacon.addEventListener(listener);

        return () => {
            Beacon.removeEventListener(listener);
        }
    }, [])
}
```

### 灯塔公司公布的事件清单

| 事件名称 | 属性 | 说明 |
| --- | --- | --- |
| 已启动 |  | 当灯塔被启用时 |
| 动作已单击 | id, 标签, 查询, 有搜索 | 当一个动作被点击灯塔时 |
| 帮助点击 | id, 标签, 查询, 有搜索 | 当帮助医生被点击灯塔栏时 |
| 命令点击 | 有搜索, 标签 | 在灯塔栏上点击请求新命令时 |
| 反馈已点击 | 有搜索, 标签 | 点击灯塔栏的反馈命令 |

## 聊天和经纪人

```javascript
import {Beacon} from '@beacon.li/bar';

Beacon.openChat({message: 'Hi', source: 'chat', autoSend: true, active: true}); // source: chat | home | bar
Beacon.openNewChat({message: 'Hi', source: 'chat', autoSend: true});
Beacon.openThread({sessionId: 'SESSION_ID', query: ''});
Beacon.minimizeChat();
Beacon.closeChat();
Beacon.startNewChat();
await Beacon.endChatSession('SESSION_ID');   // ends the session, does not close the chat
const thread = Beacon.getCurrentChatThread();

const answer = await Beacon.runAgent({
    agentRouterId: 'AGENT_ID',
    query: 'Summarise my last order',
    sessionId: 'SESSION_ID',                  // optional
    callBack: text => {},                     // streamed text
});

Beacon.hideChatInvoker();
Beacon.showChatInvoker();
```

## UI 自定义

```javascript
Beacon.setThemeColor('#1a73e8', '#e8f0fe');   // primary, secondary
Beacon.overrideUiConfig({/* partial org uiConfig */});
```

## 社区支助方案

确保Beacon(我们的第三方JavaScript)在您的网络应用上的适当功能,同时保护您的用户 有必要纳入列出的最低限度内容安全政策规则 见下文.

```text
script-src: https://*.beacon.li;
frame-src: https://*.beacon.li;
img-src: https://*.beacon.li;
media-src: https://*.beacon.li;
connect-src: https://*.beacon.li;
style-src: https://*.beacon.li;
```

## 常见问题

### @beacon\.li/bar 是什么？

shell npm install @beacon\.li/bar

### 如何安装 @beacon\.li/bar？

在项目目录运行 npm install @beacon\.li/bar，或使用 pnpm add / yarn add / bun add。

### @beacon\.li/bar 支持 TypeScript 吗？

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

### @beacon\.li/bar 支持 ESM 还是 CommonJS？

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

### @beacon\.li/bar 可以商用吗？

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

### @beacon\.li/bar 的下载量有多少？

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

### @beacon\.li/bar 还在维护吗？

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