customer-chat-sdk 1.0.19 → 1.0.21
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 +157 -29
- package/dist/core/IconManager.d.ts +11 -2
- package/dist/core/IconManager.d.ts.map +1 -1
- package/dist/core/ScreenshotManager.d.ts +167 -0
- package/dist/core/ScreenshotManager.d.ts.map +1 -0
- package/dist/customer-sdk.cjs.js +873 -10
- package/dist/customer-sdk.esm.js +870 -11
- package/dist/customer-sdk.min.js +1 -1
- package/dist/index.d.ts +69 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/types/index.d.ts +30 -0
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -5,11 +5,13 @@
|
|
|
5
5
|
## 🚀 特性
|
|
6
6
|
|
|
7
7
|
- **轻量级集成**: 一行代码快速接入
|
|
8
|
-
- **悬浮图标**:
|
|
8
|
+
- **悬浮图标**: 页面右下角悬浮聊天图标,支持自定义位置(x, y坐标)
|
|
9
|
+
- **可拖拽图标**: 支持鼠标/触摸拖拽移动图标位置
|
|
9
10
|
- **响应式设计**: PC弹窗模式 / 移动端全屏模式
|
|
10
11
|
- **设备指纹**: 自动获取设备唯一标识
|
|
11
12
|
- **iframe隔离**: 完全隔离的聊天界面,避免样式冲突
|
|
12
13
|
- **通知系统**: 红点徽章、数字提醒功能
|
|
14
|
+
- **页面截图**: 支持自动截图和上传功能,可配置截图引擎和压缩选项
|
|
13
15
|
- **跨平台支持**: 支持UMD、ESM、CJS多种模块格式
|
|
14
16
|
|
|
15
17
|
## 📦 安装
|
|
@@ -17,20 +19,19 @@
|
|
|
17
19
|
### CDN 引入
|
|
18
20
|
|
|
19
21
|
```html
|
|
20
|
-
<script src="https://cdn.jsdelivr.net/npm/customer-chat-sdk@1.0.
|
|
22
|
+
<script src="https://cdn.jsdelivr.net/npm/customer-chat-sdk@1.0.20/dist/customer-sdk.min.js"></script>
|
|
21
23
|
<script>
|
|
22
24
|
CustomerSDK.init({
|
|
23
25
|
agent: 'your_agent_id',
|
|
24
|
-
userId: 'user_123',
|
|
25
26
|
token: 'jwt_token',
|
|
26
|
-
|
|
27
|
+
iframeUrl: 'https://chat.example.com'
|
|
27
28
|
});
|
|
28
29
|
</script>
|
|
29
30
|
```
|
|
30
31
|
|
|
31
32
|
**或者使用 unpkg:**
|
|
32
33
|
```html
|
|
33
|
-
<script src="https://unpkg.com/customer-chat-sdk@1.0.
|
|
34
|
+
<script src="https://unpkg.com/customer-chat-sdk@1.0.20/dist/customer-sdk.min.js"></script>
|
|
34
35
|
```
|
|
35
36
|
|
|
36
37
|
### NPM 安装
|
|
@@ -43,9 +44,8 @@ import CustomerSDK from 'customer-chat-sdk';
|
|
|
43
44
|
|
|
44
45
|
CustomerSDK.init({
|
|
45
46
|
agent: 'your_agent_id',
|
|
46
|
-
userId: 'user_123',
|
|
47
47
|
token: 'jwt_token',
|
|
48
|
-
|
|
48
|
+
iframeUrl: 'https://chat.example.com'
|
|
49
49
|
});
|
|
50
50
|
```
|
|
51
51
|
|
|
@@ -57,10 +57,20 @@ CustomerSDK.init({
|
|
|
57
57
|
// 初始化SDK
|
|
58
58
|
await CustomerSDK.init({
|
|
59
59
|
agent: 'agent_123',
|
|
60
|
-
userId: 'user_456',
|
|
61
60
|
token: 'jwt_token_here',
|
|
62
|
-
|
|
61
|
+
iframeUrl: 'https://chat.example.com',
|
|
63
62
|
debug: true
|
|
63
|
+
}, {
|
|
64
|
+
// 自定义图标位置(可选)
|
|
65
|
+
iconPosition: {
|
|
66
|
+
x: 20, // 距离左边的距离(像素)
|
|
67
|
+
y: 80 // 距离顶部的距离(像素)
|
|
68
|
+
},
|
|
69
|
+
// 或者使用CSS值
|
|
70
|
+
// iconPosition: {
|
|
71
|
+
// x: '20px',
|
|
72
|
+
// y: '10%'
|
|
73
|
+
// }
|
|
64
74
|
});
|
|
65
75
|
|
|
66
76
|
// 关闭悬浮图标
|
|
@@ -69,6 +79,9 @@ CustomerSDK.hideIcon();
|
|
|
69
79
|
// 打开悬浮图标
|
|
70
80
|
CustomerSDK.showIcon();
|
|
71
81
|
|
|
82
|
+
// 动态设置图标位置
|
|
83
|
+
CustomerSDK.setIconCoordinates({ x: 50, y: 100 });
|
|
84
|
+
|
|
72
85
|
// 打开聊天窗口
|
|
73
86
|
CustomerSDK.openChat();
|
|
74
87
|
|
|
@@ -84,14 +97,25 @@ CustomerSDK.clearNotification(); // 清除通知
|
|
|
84
97
|
### 高级配置
|
|
85
98
|
|
|
86
99
|
```javascript
|
|
87
|
-
//
|
|
100
|
+
// 高级配置
|
|
88
101
|
await CustomerSDK.init({
|
|
89
102
|
agent: 'your_agent_id',
|
|
90
|
-
userId: 'your_user_id',
|
|
91
103
|
token: 'your_jwt_token',
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
104
|
+
iframeUrl: 'https://chat.example.com',
|
|
105
|
+
debug: true,
|
|
106
|
+
// 截图配置(可选)
|
|
107
|
+
screenshot: {
|
|
108
|
+
interval: 5000, // 截图间隔(毫秒),默认5000
|
|
109
|
+
quality: 0.4, // 图片质量(0-1),默认0.4
|
|
110
|
+
maxWidth: 1600, // 最大宽度,默认1600
|
|
111
|
+
maxHeight: 900, // 最大高度,默认900
|
|
112
|
+
outputFormat: 'webp', // 输出格式:'webp' | 'jpeg' | 'png',默认webp
|
|
113
|
+
engine: 'html2canvas', // 截图引擎(仅支持html2canvas)
|
|
114
|
+
compress: false, // 是否启用前端压缩,默认false
|
|
115
|
+
enableCORS: true, // 是否启用CORS处理,默认true
|
|
116
|
+
corsMode: 'canvas-proxy', // CORS处理模式,默认canvas-proxy
|
|
117
|
+
silentMode: false // 静默模式,减少控制台输出,默认false
|
|
118
|
+
}
|
|
95
119
|
}, {
|
|
96
120
|
// iframe选项(可选)
|
|
97
121
|
width: 400,
|
|
@@ -99,8 +123,23 @@ await CustomerSDK.init({
|
|
|
99
123
|
mode: 'auto', // 'auto' | 'fullscreen' | 'popup'
|
|
100
124
|
draggable: false,
|
|
101
125
|
resizable: false,
|
|
102
|
-
allowClose: true
|
|
126
|
+
allowClose: true,
|
|
127
|
+
// 图标位置配置(可选)
|
|
128
|
+
iconPosition: {
|
|
129
|
+
x: 20, // 距离左边的距离(像素或CSS值,如'20px'、'10%')
|
|
130
|
+
y: 80 // 距离顶部的距离(像素或CSS值,如'80px'、'10%')
|
|
131
|
+
}
|
|
103
132
|
});
|
|
133
|
+
|
|
134
|
+
// 设置自定义截图目标元素
|
|
135
|
+
CustomerSDK.setScreenshotTarget(document.getElementById('my-container'));
|
|
136
|
+
|
|
137
|
+
// 手动触发截图
|
|
138
|
+
await CustomerSDK.captureScreenshot();
|
|
139
|
+
|
|
140
|
+
// 获取截图状态
|
|
141
|
+
const state = CustomerSDK.getScreenshotState();
|
|
142
|
+
console.log('截图状态:', state);
|
|
104
143
|
```
|
|
105
144
|
|
|
106
145
|
## 📖 API 文档
|
|
@@ -120,11 +159,45 @@ await CustomerSDK.init({
|
|
|
120
159
|
```typescript
|
|
121
160
|
interface SDKConfig {
|
|
122
161
|
agent: string; // 代理商ID
|
|
123
|
-
userId: string; // 用户ID
|
|
124
162
|
token: string; // 认证令牌
|
|
125
|
-
|
|
126
|
-
apiBaseUrl?: string; // API基础地址
|
|
163
|
+
iframeUrl: string; // iframe聊天页面URL (必需)
|
|
127
164
|
debug?: boolean; // 调试模式
|
|
165
|
+
screenshot?: ScreenshotOptions; // 截图配置(可选)
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
interface ScreenshotOptions {
|
|
169
|
+
interval?: number; // 截图间隔(毫秒),默认5000
|
|
170
|
+
quality?: number; // 图片质量(0-1),默认0.4
|
|
171
|
+
scale?: number; // 缩放比例,默认1
|
|
172
|
+
maxHistory?: number; // 最大历史记录数,默认10
|
|
173
|
+
compress?: boolean; // 是否压缩图片,默认false
|
|
174
|
+
maxWidth?: number; // 最大宽度,默认1600
|
|
175
|
+
maxHeight?: number; // 最大高度,默认900
|
|
176
|
+
outputFormat?: 'webp' | 'jpeg' | 'png'; // 输出格式,默认webp
|
|
177
|
+
enableCORS?: boolean; // 是否启用CORS处理,默认true
|
|
178
|
+
proxyUrl?: string; // 代理服务器URL,用于处理CORS问题
|
|
179
|
+
engine?: 'html2canvas'; // 截图引擎(仅支持html2canvas,此选项已废弃,保留仅为兼容性)
|
|
180
|
+
corsMode?: 'simple' | 'smart' | 'proxy' | 'blob' | 'canvas-proxy' | 'ignore' | 'test-first'; // CORS处理模式,默认canvas-proxy
|
|
181
|
+
silentMode?: boolean; // 静默模式,减少控制台输出,默认false
|
|
182
|
+
maxRetries?: number; // 最大重试次数,默认2
|
|
183
|
+
}
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
**ChatWindowOptions:**
|
|
187
|
+
```typescript
|
|
188
|
+
interface ChatWindowOptions {
|
|
189
|
+
width?: number; // iframe宽度
|
|
190
|
+
height?: number; // iframe高度
|
|
191
|
+
position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
|
|
192
|
+
draggable?: boolean; // 是否可拖拽
|
|
193
|
+
resizable?: boolean; // 是否可调整大小
|
|
194
|
+
minimizable?: boolean; // 是否可最小化
|
|
195
|
+
iconPosition?: IconPosition; // 图标位置配置
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
interface IconPosition {
|
|
199
|
+
x?: number | string; // x坐标(像素值或CSS值,如'20px'、'10%')
|
|
200
|
+
y?: number | string; // y坐标(像素值或CSS值,如'80px'、'10%')
|
|
128
201
|
}
|
|
129
202
|
```
|
|
130
203
|
|
|
@@ -138,6 +211,63 @@ interface SDKConfig {
|
|
|
138
211
|
|
|
139
212
|
显示或隐藏悬浮图标。
|
|
140
213
|
|
|
214
|
+
#### `CustomerSDK.setIconPosition(position)`
|
|
215
|
+
|
|
216
|
+
设置图标到预设位置(兼容旧API)。
|
|
217
|
+
|
|
218
|
+
**参数:**
|
|
219
|
+
- `position` ('top-left' | 'top-right' | 'bottom-left' | 'bottom-right'): 预设位置
|
|
220
|
+
|
|
221
|
+
#### `CustomerSDK.setIconCoordinates(position)`
|
|
222
|
+
|
|
223
|
+
设置图标到自定义坐标位置。
|
|
224
|
+
|
|
225
|
+
**参数:**
|
|
226
|
+
- `position` (IconPosition): 位置配置对象
|
|
227
|
+
```typescript
|
|
228
|
+
{
|
|
229
|
+
x?: number | string; // x坐标(像素值或CSS值)
|
|
230
|
+
y?: number | string; // y坐标(像素值或CSS值)
|
|
231
|
+
}
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
**示例:**
|
|
235
|
+
```javascript
|
|
236
|
+
// 使用像素值
|
|
237
|
+
CustomerSDK.setIconCoordinates({ x: 50, y: 100 });
|
|
238
|
+
|
|
239
|
+
// 使用CSS值
|
|
240
|
+
CustomerSDK.setIconCoordinates({ x: '20px', y: '10%' });
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
#### `CustomerSDK.setScreenshotTarget(element)`
|
|
244
|
+
|
|
245
|
+
设置截图目标元素。默认截图目标为 `document.body`。
|
|
246
|
+
|
|
247
|
+
**参数:**
|
|
248
|
+
- `element` (HTMLElement): 要截图的DOM元素
|
|
249
|
+
|
|
250
|
+
#### `CustomerSDK.captureScreenshot()`
|
|
251
|
+
|
|
252
|
+
手动触发一次截图。
|
|
253
|
+
|
|
254
|
+
**返回:** `Promise<boolean>` - 是否截图成功
|
|
255
|
+
|
|
256
|
+
#### `CustomerSDK.getScreenshotState()`
|
|
257
|
+
|
|
258
|
+
获取截图功能的状态信息。
|
|
259
|
+
|
|
260
|
+
**返回:** 状态对象,包含:
|
|
261
|
+
- `isRunning`: 是否正在运行
|
|
262
|
+
- `screenshotCount`: 截图次数
|
|
263
|
+
- `lastScreenshotTime`: 最后截图时间
|
|
264
|
+
- `error`: 错误信息
|
|
265
|
+
- `isEnabled`: 是否启用
|
|
266
|
+
- `isUploading`: 是否正在上传
|
|
267
|
+
- `uploadError`: 上传错误
|
|
268
|
+
- `uploadProgress`: 上传进度
|
|
269
|
+
- `currentUploadConfig`: 当前上传配置
|
|
270
|
+
|
|
141
271
|
#### `CustomerSDK.isChatOpen()`
|
|
142
272
|
|
|
143
273
|
检查聊天窗口是否打开。
|
|
@@ -167,15 +297,14 @@ interface SDKConfig {
|
|
|
167
297
|
|
|
168
298
|
SDK会向iframe URL自动添加以下参数:
|
|
169
299
|
|
|
170
|
-
- `
|
|
171
|
-
- `
|
|
172
|
-
- `
|
|
173
|
-
- `
|
|
174
|
-
- `debug`: 调试模式
|
|
300
|
+
- `Agent`: 代理商ID
|
|
301
|
+
- `Authorization`: 认证令牌
|
|
302
|
+
- `DeviceSign`: 设备指纹ID(通过FingerprintJS自动获取)
|
|
303
|
+
- `Referrer`: 页面来源URL(通过`document.referrer`自动获取)
|
|
175
304
|
|
|
176
305
|
**最终URL示例:**
|
|
177
306
|
```
|
|
178
|
-
https://chat.example.com?
|
|
307
|
+
https://chat.example.com?Agent=demo_app&Authorization=test_token_1703123456789&DeviceSign=abc123xyz&Referrer=https://example.com/page
|
|
179
308
|
```
|
|
180
309
|
|
|
181
310
|
## 🔧 响应式设计
|
|
@@ -183,12 +312,12 @@ https://chat.example.com?agent=demo_app&userId=1703123456&token=test_token_17031
|
|
|
183
312
|
SDK自动检测设备类型并应用相应样式:
|
|
184
313
|
|
|
185
314
|
**PC模式:**
|
|
186
|
-
-
|
|
187
|
-
-
|
|
315
|
+
- 悬浮图标:默认右下角,可自定义位置(x, y坐标),支持拖拽移动
|
|
316
|
+
- 聊天窗口:居中弹窗,可通过iframe发送`close`消息关闭
|
|
188
317
|
|
|
189
318
|
**移动端模式:**
|
|
190
|
-
-
|
|
191
|
-
-
|
|
319
|
+
- 悬浮图标:默认右下角,可自定义位置(x, y坐标),支持触摸拖拽移动
|
|
320
|
+
- 聊天窗口:全屏显示,可通过iframe发送`close`消息关闭
|
|
192
321
|
|
|
193
322
|
## 🛠️ 开发
|
|
194
323
|
|
|
@@ -250,7 +379,6 @@ SDK通过postMessage与iframe进行通信:
|
|
|
250
379
|
CustomerSDK.sendToIframe({
|
|
251
380
|
type: 'userInfo',
|
|
252
381
|
data: {
|
|
253
|
-
userId: 'user_123',
|
|
254
382
|
profile: { name: 'John', avatar: '...' }
|
|
255
383
|
}
|
|
256
384
|
});
|
|
@@ -4,6 +4,10 @@ interface NotificationOptions {
|
|
|
4
4
|
badgeText?: string;
|
|
5
5
|
pulse?: boolean;
|
|
6
6
|
}
|
|
7
|
+
interface IconPosition {
|
|
8
|
+
x?: number | string;
|
|
9
|
+
y?: number | string;
|
|
10
|
+
}
|
|
7
11
|
export declare class IconManager {
|
|
8
12
|
private iconElement;
|
|
9
13
|
private badgeElement;
|
|
@@ -16,7 +20,8 @@ export declare class IconManager {
|
|
|
16
20
|
private iconStartY;
|
|
17
21
|
private dragMoveHandler;
|
|
18
22
|
private dragEndHandler;
|
|
19
|
-
|
|
23
|
+
private iconPosition;
|
|
24
|
+
constructor(position?: IconPosition);
|
|
20
25
|
/**
|
|
21
26
|
* 显示悬浮图标
|
|
22
27
|
*/
|
|
@@ -30,9 +35,13 @@ export declare class IconManager {
|
|
|
30
35
|
*/
|
|
31
36
|
hide(): void;
|
|
32
37
|
/**
|
|
33
|
-
*
|
|
38
|
+
* 设置图标位置(兼容旧的position参数)
|
|
34
39
|
*/
|
|
35
40
|
setPosition(position: any): void;
|
|
41
|
+
/**
|
|
42
|
+
* 设置图标坐标位置(x, y)
|
|
43
|
+
*/
|
|
44
|
+
setIconPosition(position: IconPosition): void;
|
|
36
45
|
/**
|
|
37
46
|
* setStyle(暂时保留接口兼容性)
|
|
38
47
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconManager.d.ts","sourceRoot":"","sources":["../../src/core/IconManager.ts"],"names":[],"mappings":"AAGA,UAAU,mBAAmB;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,qBAAa,WAAW;IACtB,OAAO,CAAC,WAAW,CAA2B;IAC9C,OAAO,CAAC,YAAY,CAA2B;IAC/C,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,oBAAoB,CAAqC;IACjE,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,UAAU,CAAI;IACtB,OAAO,CAAC,UAAU,CAAI;IACtB,OAAO,CAAC,UAAU,CAAI;IACtB,OAAO,CAAC,UAAU,CAAI;IACtB,OAAO,CAAC,eAAe,CAAsD;IAC7E,OAAO,CAAC,cAAc,CAAsD;;
|
|
1
|
+
{"version":3,"file":"IconManager.d.ts","sourceRoot":"","sources":["../../src/core/IconManager.ts"],"names":[],"mappings":"AAGA,UAAU,mBAAmB;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,UAAU,YAAY;IACpB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACpB;AAED,qBAAa,WAAW;IACtB,OAAO,CAAC,WAAW,CAA2B;IAC9C,OAAO,CAAC,YAAY,CAA2B;IAC/C,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,oBAAoB,CAAqC;IACjE,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,UAAU,CAAI;IACtB,OAAO,CAAC,UAAU,CAAI;IACtB,OAAO,CAAC,UAAU,CAAI;IACtB,OAAO,CAAC,UAAU,CAAI;IACtB,OAAO,CAAC,eAAe,CAAsD;IAC7E,OAAO,CAAC,cAAc,CAAsD;IAC5E,OAAO,CAAC,YAAY,CAA4B;gBAEpC,QAAQ,CAAC,EAAE,YAAY;IAInC;;OAEG;IACG,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IA0G3B;;OAEG;IACH,sBAAsB,IAAI,IAAI;IA6B9B;;OAEG;IACH,IAAI,IAAI,IAAI;IAcZ;;OAEG;IACH,WAAW,CAAC,QAAQ,EAAE,GAAG,GAAG,IAAI;IAIhC;;OAEG;IACH,eAAe,CAAC,QAAQ,EAAE,YAAY,GAAG,IAAI;IAwB7C;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IAI1B;;OAEG;IACH,OAAO,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,IAAI;IAInC;;OAEG;IACH,cAAc,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,GAAG,IAAI;IAInD;;OAEG;IACH,gBAAgB,CAAC,OAAO,EAAE,mBAAmB,GAAG,IAAI;IA0BpD;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAQzB;;OAEG;IACH,OAAO,CAAC,eAAe;IAYvB;;OAEG;IACH,OAAO,CAAC,eAAe;IAqEvB;;OAEG;IACH,OAAO,CAAC,cAAc;IA+DtB;;OAEG;IACH,OAAO,CAAC,aAAa;IAwBrB;;OAEG;IACH,OAAO,CAAC,WAAW;IAMnB;;OAEG;IACH,OAAO,CAAC,WAAW;CAmDpB"}
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 截图配置选项
|
|
3
|
+
*/
|
|
4
|
+
export interface ScreenshotOptions {
|
|
5
|
+
interval?: number;
|
|
6
|
+
quality?: number;
|
|
7
|
+
scale?: number;
|
|
8
|
+
maxHistory?: number;
|
|
9
|
+
compress?: boolean;
|
|
10
|
+
maxWidth?: number;
|
|
11
|
+
maxHeight?: number;
|
|
12
|
+
outputFormat?: 'webp' | 'jpeg' | 'png';
|
|
13
|
+
enableCORS?: boolean;
|
|
14
|
+
proxyUrl?: string;
|
|
15
|
+
engine?: 'html2canvas';
|
|
16
|
+
corsMode?: 'simple' | 'smart' | 'proxy' | 'blob' | 'canvas-proxy' | 'ignore' | 'test-first';
|
|
17
|
+
silentMode?: boolean;
|
|
18
|
+
maxRetries?: number;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* 上传配置接口
|
|
22
|
+
*/
|
|
23
|
+
export interface UploadConfig {
|
|
24
|
+
uploadUrl: string;
|
|
25
|
+
objectKey: string;
|
|
26
|
+
bucketName: string;
|
|
27
|
+
contentType: string;
|
|
28
|
+
expirationMinutes: number;
|
|
29
|
+
duration: number;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* 截图管理器
|
|
33
|
+
* 负责页面截图、压缩和上传功能
|
|
34
|
+
*/
|
|
35
|
+
export declare class ScreenshotManager {
|
|
36
|
+
private options;
|
|
37
|
+
private targetElement;
|
|
38
|
+
private isRunning;
|
|
39
|
+
private screenshotCount;
|
|
40
|
+
private screenshotHistory;
|
|
41
|
+
private lastScreenshotTime;
|
|
42
|
+
private error;
|
|
43
|
+
private isEnabled;
|
|
44
|
+
private isUploading;
|
|
45
|
+
private uploadError;
|
|
46
|
+
private uploadProgress;
|
|
47
|
+
private currentUploadConfig;
|
|
48
|
+
private worker;
|
|
49
|
+
private screenshotTimer;
|
|
50
|
+
private messageHandler;
|
|
51
|
+
private dynamicInterval;
|
|
52
|
+
private expirationTimer;
|
|
53
|
+
private imageProxyCache;
|
|
54
|
+
private globalErrorHandler;
|
|
55
|
+
private globalRejectionHandler;
|
|
56
|
+
constructor(targetElement: HTMLElement | null, options?: ScreenshotOptions);
|
|
57
|
+
/**
|
|
58
|
+
* 设置目标元素
|
|
59
|
+
*/
|
|
60
|
+
setTargetElement(element: HTMLElement | null): void;
|
|
61
|
+
/**
|
|
62
|
+
* 设置消息监听
|
|
63
|
+
*/
|
|
64
|
+
private setupMessageListener;
|
|
65
|
+
/**
|
|
66
|
+
* 设置页面可见性监听
|
|
67
|
+
*/
|
|
68
|
+
private setupVisibilityChangeListener;
|
|
69
|
+
/**
|
|
70
|
+
* 处理 iframe postMessage 消息
|
|
71
|
+
*/
|
|
72
|
+
private handleIframeMessage;
|
|
73
|
+
/**
|
|
74
|
+
* 解析上传配置
|
|
75
|
+
*/
|
|
76
|
+
private parseUploadConfig;
|
|
77
|
+
/**
|
|
78
|
+
* 开始轮询截图
|
|
79
|
+
*/
|
|
80
|
+
startScreenshot(customInterval?: number): void;
|
|
81
|
+
/**
|
|
82
|
+
* 停止轮询截图
|
|
83
|
+
*/
|
|
84
|
+
stopScreenshot(): void;
|
|
85
|
+
/**
|
|
86
|
+
* 手动截图一次
|
|
87
|
+
*/
|
|
88
|
+
captureOnce(): Promise<boolean>;
|
|
89
|
+
/**
|
|
90
|
+
* 执行截图
|
|
91
|
+
*/
|
|
92
|
+
private takeScreenshot;
|
|
93
|
+
/**
|
|
94
|
+
* 使用 html2canvas 截图
|
|
95
|
+
*/
|
|
96
|
+
private takeScreenshotWithHtml2Canvas;
|
|
97
|
+
/**
|
|
98
|
+
* 预处理网络图片
|
|
99
|
+
*/
|
|
100
|
+
private preprocessNetworkImages;
|
|
101
|
+
/**
|
|
102
|
+
* 等待图片加载完成
|
|
103
|
+
*/
|
|
104
|
+
private waitForImagesToLoad;
|
|
105
|
+
/**
|
|
106
|
+
* 等待 CSS 和字体加载完成
|
|
107
|
+
*/
|
|
108
|
+
private waitForStylesAndFonts;
|
|
109
|
+
/**
|
|
110
|
+
* 等待字体加载完成
|
|
111
|
+
*/
|
|
112
|
+
private waitForFonts;
|
|
113
|
+
/**
|
|
114
|
+
* 计算压缩后的尺寸
|
|
115
|
+
*/
|
|
116
|
+
private calculateCompressedSize;
|
|
117
|
+
/**
|
|
118
|
+
* 创建 WebWorker
|
|
119
|
+
*/
|
|
120
|
+
private createWorker;
|
|
121
|
+
/**
|
|
122
|
+
* 设置全局错误处理器
|
|
123
|
+
*/
|
|
124
|
+
private setupGlobalErrorHandlers;
|
|
125
|
+
/**
|
|
126
|
+
* 移除全局错误处理器
|
|
127
|
+
*/
|
|
128
|
+
private removeGlobalErrorHandlers;
|
|
129
|
+
/**
|
|
130
|
+
* 上传截图到 S3
|
|
131
|
+
*/
|
|
132
|
+
private uploadScreenshot;
|
|
133
|
+
/**
|
|
134
|
+
* 将 base64 data URL 转换为 Blob
|
|
135
|
+
*/
|
|
136
|
+
private dataUrlToBlob;
|
|
137
|
+
/**
|
|
138
|
+
* 获取最新截图
|
|
139
|
+
*/
|
|
140
|
+
private getLatestScreenshot;
|
|
141
|
+
/**
|
|
142
|
+
* 启用/禁用截图功能
|
|
143
|
+
*/
|
|
144
|
+
enable(enabled: boolean): void;
|
|
145
|
+
/**
|
|
146
|
+
* 清理资源
|
|
147
|
+
*/
|
|
148
|
+
destroy(): void;
|
|
149
|
+
/**
|
|
150
|
+
* 获取状态
|
|
151
|
+
*/
|
|
152
|
+
getState(): {
|
|
153
|
+
isRunning: boolean;
|
|
154
|
+
screenshotCount: number;
|
|
155
|
+
lastScreenshotTime: number;
|
|
156
|
+
error: string | null;
|
|
157
|
+
isEnabled: boolean;
|
|
158
|
+
isUploading: boolean;
|
|
159
|
+
uploadError: string | null;
|
|
160
|
+
uploadProgress: {
|
|
161
|
+
success: number;
|
|
162
|
+
failed: number;
|
|
163
|
+
};
|
|
164
|
+
currentUploadConfig: UploadConfig | null;
|
|
165
|
+
};
|
|
166
|
+
}
|
|
167
|
+
//# sourceMappingURL=ScreenshotManager.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScreenshotManager.d.ts","sourceRoot":"","sources":["../../src/core/ScreenshotManager.ts"],"names":[],"mappings":"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"}
|