@qy_better_lib/hooks 0.2.5 → 0.2.7
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/DOCUMENTATION.md +18 -61
- package/lib/index.mjs +935 -0
- package/lib/{use-chart.js → use-chart/index.mjs} +77 -5
- package/lib/use-chart/type.d.ts +0 -7
- package/package.json +5 -2
- package/lib/index.js +0 -16
- package/lib/node_modules/@qy_better_lib/core/lib/utils/echarts.js +0 -166
- package/lib/use-chart/config.js +0 -78
- package/lib/use-emit/extend.js +0 -42
- package/lib/use-emit/index.js +0 -27
- package/lib/use-fullscreen/index.js +0 -51
- package/lib/use-image/index.js +0 -192
- package/lib/use-image/type.js +0 -9
- package/lib/use-print/index.js +0 -301
- package/lib/use-watermark/index.js +0 -131
- package/lib/use-websocket/index.js +0 -205
- /package/lib/{use-layout-flow.js → use-layout-flow/index.mjs} +0 -0
- /package/lib/{use-mqtt.js → use-mqtt/index.mjs} +0 -0
package/DOCUMENTATION.md
CHANGED
|
@@ -256,6 +256,8 @@ close();
|
|
|
256
256
|
|
|
257
257
|
### 5. use-mqtt - MQTT功能
|
|
258
258
|
|
|
259
|
+
> 注意:MQTT功能现在是可选依赖,需要单独导入
|
|
260
|
+
|
|
259
261
|
#### 功能描述
|
|
260
262
|
适用于需要MQTT通信的场景,支持连接管理、消息订阅和发布。
|
|
261
263
|
|
|
@@ -273,7 +275,7 @@ close();
|
|
|
273
275
|
|
|
274
276
|
#### 示例
|
|
275
277
|
```typescript
|
|
276
|
-
import { use_mqtt } from '@qy_better_lib/hooks';
|
|
278
|
+
import { use_mqtt } from '@qy_better_lib/hooks/use-mqtt';
|
|
277
279
|
|
|
278
280
|
const { connect, close, subscribe, publish } = use_mqtt('mqtt://localhost:1883', {
|
|
279
281
|
clientId: 'test-client',
|
|
@@ -389,6 +391,8 @@ close(() => {
|
|
|
389
391
|
|
|
390
392
|
### 7. use-chart - 图表管理
|
|
391
393
|
|
|
394
|
+
> 注意:图表管理功能现在是可选依赖,需要单独导入
|
|
395
|
+
|
|
392
396
|
#### 功能描述
|
|
393
397
|
适用于需要在前端使用ECharts的场景,支持图表渲染、主题切换、响应式设计等功能。
|
|
394
398
|
|
|
@@ -406,7 +410,7 @@ close(() => {
|
|
|
406
410
|
- **返回类型**: `Promise<any>` - 图表实例
|
|
407
411
|
- **示例**:
|
|
408
412
|
```typescript
|
|
409
|
-
import { use_chart } from '@qy_better_lib/hooks';
|
|
413
|
+
import { use_chart } from '@qy_better_lib/hooks/use-chart';
|
|
410
414
|
|
|
411
415
|
const { render_chart } = use_chart();
|
|
412
416
|
|
|
@@ -437,7 +441,7 @@ close(() => {
|
|
|
437
441
|
- **返回类型**: `boolean` - 是否更新成功
|
|
438
442
|
- **示例**:
|
|
439
443
|
```typescript
|
|
440
|
-
import { use_chart } from '@qy_better_lib/hooks';
|
|
444
|
+
import { use_chart } from '@qy_better_lib/hooks/use-chart';
|
|
441
445
|
|
|
442
446
|
const { update_chart } = use_chart();
|
|
443
447
|
|
|
@@ -457,7 +461,7 @@ close(() => {
|
|
|
457
461
|
- **返回类型**: `boolean` - 是否删除成功
|
|
458
462
|
- **示例**:
|
|
459
463
|
```typescript
|
|
460
|
-
import { use_chart } from '@qy_better_lib/hooks';
|
|
464
|
+
import { use_chart } from '@qy_better_lib/hooks/use-chart';
|
|
461
465
|
|
|
462
466
|
const { remove_chart } = use_chart();
|
|
463
467
|
|
|
@@ -473,7 +477,7 @@ close(() => {
|
|
|
473
477
|
- **返回类型**: `string | null` - 图片URL
|
|
474
478
|
- **示例**:
|
|
475
479
|
```typescript
|
|
476
|
-
import { use_chart } from '@qy_better_lib/hooks';
|
|
480
|
+
import { use_chart } from '@qy_better_lib/hooks/use-chart';
|
|
477
481
|
|
|
478
482
|
const { export_chart_image } = use_chart();
|
|
479
483
|
|
|
@@ -483,6 +487,8 @@ close(() => {
|
|
|
483
487
|
|
|
484
488
|
### 8. use-layout-flow - 流程图布局
|
|
485
489
|
|
|
490
|
+
> 注意:流程图布局功能现在是可选依赖,需要单独导入
|
|
491
|
+
|
|
486
492
|
#### 功能描述
|
|
487
493
|
适用于需要自动布局的流程图场景,支持多种布局方向和自定义元素。
|
|
488
494
|
|
|
@@ -498,7 +504,7 @@ close(() => {
|
|
|
498
504
|
- **返回类型**: `Promise<boolean>` - 是否初始化成功
|
|
499
505
|
- **示例**:
|
|
500
506
|
```typescript
|
|
501
|
-
import { use_layout_flow } from '@qy_better_lib/hooks';
|
|
507
|
+
import { use_layout_flow } from '@qy_better_lib/hooks/use-layout-flow';
|
|
502
508
|
|
|
503
509
|
const { init } = use_layout_flow({});
|
|
504
510
|
|
|
@@ -515,7 +521,7 @@ close(() => {
|
|
|
515
521
|
- **返回类型**: `Promise<boolean>` - 是否布局成功
|
|
516
522
|
- **示例**:
|
|
517
523
|
```typescript
|
|
518
|
-
import { use_layout_flow } from '@qy_better_lib/hooks';
|
|
524
|
+
import { use_layout_flow } from '@qy_better_lib/hooks/use-layout-flow';
|
|
519
525
|
|
|
520
526
|
const { layout } = use_layout_flow({});
|
|
521
527
|
|
|
@@ -535,7 +541,7 @@ close(() => {
|
|
|
535
541
|
- **返回类型**: `any[]` - 创建的节点数组
|
|
536
542
|
- **示例**:
|
|
537
543
|
```typescript
|
|
538
|
-
import { use_layout_flow } from '@qy_better_lib/hooks';
|
|
544
|
+
import { use_layout_flow } from '@qy_better_lib/hooks/use-layout-flow';
|
|
539
545
|
|
|
540
546
|
const { create_nodes } = use_layout_flow({});
|
|
541
547
|
|
|
@@ -567,7 +573,7 @@ close(() => {
|
|
|
567
573
|
- **返回类型**: `any[]` - 创建的边数组
|
|
568
574
|
- **示例**:
|
|
569
575
|
```typescript
|
|
570
|
-
import { use_layout_flow } from '@qy_better_lib/hooks';
|
|
576
|
+
import { use_layout_flow } from '@qy_better_lib/hooks/use-layout-flow';
|
|
571
577
|
|
|
572
578
|
const { create_edges } = use_layout_flow({});
|
|
573
579
|
|
|
@@ -617,61 +623,12 @@ emitter.on('test', (data) => {
|
|
|
617
623
|
emitter.off('test', listener);
|
|
618
624
|
```
|
|
619
625
|
|
|
620
|
-
### 10. use-websocket - WebSocket功能
|
|
621
|
-
|
|
622
|
-
#### 功能描述
|
|
623
|
-
适用于需要在前端实现WebSocket通信的场景,支持自动重连、心跳检测、消息队列等功能。
|
|
624
|
-
|
|
625
|
-
#### 参数
|
|
626
|
-
- `options: WebSocketOptions` - WebSocket配置选项
|
|
627
|
-
|
|
628
|
-
#### 返回值
|
|
629
|
-
- **ws**: `WebSocket | undefined` - WebSocket实例
|
|
630
|
-
- **create**: `() => void` - 创建连接
|
|
631
|
-
- **close**: `() => void` - 关闭连接
|
|
632
|
-
- **send_message**: `(msg: any) => boolean` - 发送消息
|
|
633
|
-
- **get_status**: `() => WebSocketStatus` - 获取连接状态
|
|
634
|
-
- **reconnect**: `() => void` - 重连
|
|
635
|
-
- **start_heartbeat**: `() => void` - 启动心跳检测
|
|
636
|
-
- **stop_heartbeat**: `() => void` - 停止心跳检测
|
|
637
|
-
|
|
638
|
-
#### 示例
|
|
639
|
-
```typescript
|
|
640
|
-
import { use_web_socket } from '@qy_better_lib/hooks';
|
|
641
626
|
|
|
642
|
-
const { create, close, send_message, get_status } = use_web_socket({
|
|
643
|
-
server: 'ws://localhost:8080',
|
|
644
|
-
receive: (event) => {
|
|
645
|
-
console.log('收到消息:', event.data);
|
|
646
|
-
},
|
|
647
|
-
on_open: () => {
|
|
648
|
-
console.log('连接成功');
|
|
649
|
-
},
|
|
650
|
-
on_error: (error) => {
|
|
651
|
-
console.error('连接错误:', error);
|
|
652
|
-
},
|
|
653
|
-
on_close: () => {
|
|
654
|
-
console.log('连接关闭');
|
|
655
|
-
},
|
|
656
|
-
auto_reconnect: true,
|
|
657
|
-
heartbeat_interval: 30000
|
|
658
|
-
});
|
|
659
|
-
|
|
660
|
-
// 发送消息
|
|
661
|
-
send_message('Hello WebSocket');
|
|
662
|
-
|
|
663
|
-
// 获取连接状态
|
|
664
|
-
const status = get_status();
|
|
665
|
-
console.log(status);
|
|
666
|
-
|
|
667
|
-
// 关闭连接
|
|
668
|
-
close();
|
|
669
|
-
```
|
|
670
627
|
|
|
671
628
|
## 注意事项
|
|
672
629
|
|
|
673
|
-
1. **use-chart**
|
|
674
|
-
2. **use-layout-flow**
|
|
675
|
-
3. **use-mqtt**
|
|
630
|
+
1. **use-chart** 现在是可选依赖,需要单独导入:`import { use_chart } from '@qy_better_lib/hooks/use-chart'`,并需要安装 ECharts 依赖:`npm install echarts`
|
|
631
|
+
2. **use-layout-flow** 现在是可选依赖,需要单独导入:`import { use_layout_flow } from '@qy_better_lib/hooks/use-layout-flow'`,并需要安装 @antv/x6 和 dagre 依赖:`npm install @antv/x6 dagre`
|
|
632
|
+
3. **use-mqtt** 现在是可选依赖,需要单独导入:`import { use_mqtt } from '@qy_better_lib/hooks/use-mqtt'`,并需要安装 mqtt 依赖:`npm install mqtt`
|
|
676
633
|
4. **use-websocket** 需要确保服务器端支持 WebSocket 协议
|
|
677
634
|
5. **use-print** 在某些浏览器中可能存在兼容性问题,建议在现代浏览器中使用
|