@leatop/ai-agent-iframe 3.0.1 → 3.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -55
- package/dist/ai-agent-iframe.cjs +4 -4
- package/dist/ai-agent-iframe.mjs +127 -124
- package/dist/index.vue.d.ts +71 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -22,80 +22,36 @@ pnpm add @leatop/ai-agent-iframe
|
|
|
22
22
|
```js
|
|
23
23
|
window.globalConfig = {
|
|
24
24
|
// 生成 ticket 的接口前缀（不配则默认 '/api/'）
|
|
25
|
-
AiAgentApi: '/
|
|
25
|
+
AiAgentApi: '/api/',
|
|
26
26
|
// true：从 cookie 取 token；false/不配：从 localStorage 取 'cdp-token'
|
|
27
27
|
sessionCookie: true,
|
|
28
|
+
AiAgentIframeSrc: 'https://172.17.2.56:30090',
|
|
28
29
|
};
|
|
29
30
|
```
|
|
30
31
|
|
|
31
32
|
## 3. 在页面中使用
|
|
32
33
|
|
|
33
|
-
|
|
34
|
-
// main.ts / 项目入口：引入组件样式（只需一次）
|
|
35
|
-
import '@leatop/ai-agent-iframe/style.css';
|
|
36
|
-
```
|
|
34
|
+
|
|
37
35
|
|
|
38
36
|
```vue
|
|
39
37
|
<script setup>
|
|
40
38
|
// 推荐：局部注册（与 @leatop/ai-agent 的用法一致）
|
|
39
|
+
import '@leatop/ai-agent-iframe/style.css';
|
|
41
40
|
import AIagent from '@leatop/ai-agent-iframe';
|
|
41
|
+
import aes from "@/cdp-common/utils/aes";
|
|
42
|
+
|
|
43
|
+
const aiIframeSrc = window.globalConfig?.AiAgentIframeSrc || ''
|
|
44
|
+
const userStore = useUserStore();
|
|
45
|
+
const userInfo = userStore.userInfo;
|
|
46
|
+
const loginKey = aes.encrypt(userInfo?.account)
|
|
42
47
|
</script>
|
|
43
48
|
|
|
44
49
|
<template>
|
|
45
50
|
<!-- 建议放在 NavBar 右侧，父容器 z-index 需高于导航 -->
|
|
46
51
|
<AIagent
|
|
47
|
-
v-if="showAiagent"
|
|
48
|
-
:ai-iframe-src="aiIframeSrc"
|
|
49
|
-
:login-key="loginKey"
|
|
50
|
-
:user-info="userInfo"
|
|
51
|
-
@openTab="onOpenTab"
|
|
52
|
-
@openAI="onOpenAI"
|
|
53
|
-
@child-message="onChildMessage"
|
|
52
|
+
v-if="!!userInfo.account && showAiagent" :userInfo="userInfo" :loginKey="loginKey" :aiIframeSrc="aiIframeSrc"
|
|
54
53
|
/>
|
|
55
54
|
</template>
|
|
56
55
|
```
|
|
57
56
|
|
|
58
|
-
如果想全局注册（`app.use(AIagent)`），组件名是 `AiagentBox`，模板中需写成 `<AiagentBox />`。
|
|
59
|
-
|
|
60
|
-
## 4. Props
|
|
61
|
-
|
|
62
|
-
| 名称 | 类型 | 默认值 | 说明 |
|
|
63
|
-
| --- | --- | --- | --- |
|
|
64
|
-
| `aiIframeSrc` | `string` | `''` | 子应用地址 **origin**（如 `https://ai.example.com`），同时用于 `postMessage` 的 `targetOrigin` 校验 |
|
|
65
|
-
| `loginKey` | `string` | `''` | 调用 `/odm/openApi/generateToken` 换取 ticket 的凭证 |
|
|
66
|
-
| `userInfo` | `object` | `{}` | 用户信息，握手后通过 `postMessage` 推给子应用 |
|
|
67
|
-
|
|
68
|
-
## 5. Events
|
|
69
|
-
|
|
70
|
-
| 名称 | 参数 | 说明 |
|
|
71
|
-
| --- | --- | --- |
|
|
72
|
-
| `openTab` | `tabId: number` | 点击「AI通问 / AI问策 / AI问数」菜单项，`0/1/2` |
|
|
73
|
-
| `openAI` | — | 点击悬浮机器人图标 |
|
|
74
|
-
| `child-message` | `data: any` | 子应用 `postMessage` 上抛的消息 |
|
|
75
|
-
|
|
76
|
-
## 6. iframe 通信协议
|
|
77
|
-
|
|
78
|
-
父页面 → 子页面（`window.postMessage(payload, aiIframeSrc)`）：
|
|
79
|
-
|
|
80
|
-
```ts
|
|
81
|
-
{ userId: 123, tab: 'home', filters: { status: 'all' }, tabId?: number }
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
子页面就绪后需向父页面发送：
|
|
85
|
-
|
|
86
|
-
```ts
|
|
87
|
-
window.parent.postMessage({ type: 'CHILD_READY' }, parentOrigin);
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
父页面收到 `CHILD_READY` 后才会全量同步一次参数；`tabId` 变化时也会增量推送，且**不会重载 iframe**。
|
|
91
|
-
|
|
92
|
-
## 7. 开发 / 构建
|
|
93
|
-
|
|
94
|
-
```bash
|
|
95
|
-
pnpm dev # 本地调试
|
|
96
|
-
pnpm build # 产出 dist/ai-agent-iframe.mjs、ai-agent-iframe.cjs、index.d.ts、style.css
|
|
97
|
-
pnpm type-check # 类型检查
|
|
98
|
-
```
|
|
99
57
|
|
|
100
|
-
> 发布必须使用 `pnpm publish`：入口 `main/module/types/exports` 在发布时由 `publishConfig` 覆盖为 `dist/`，
|
|
101
|
-
> 该覆盖能力仅 pnpm 支持，`scripts/prepack-check.mjs` 会在 `prepack` 阶段校验。
|