@qy_better_lib/core 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 +291 -568
- package/dist/core.min.js +1 -1
- package/lib/index.js +2 -1
- package/lib/utils/dom.d.ts +36 -20
- package/lib/utils/dom.js +7 -0
- package/lib/utils/echarts.d.ts +0 -7
- package/lib/utils/echarts.js +3 -9
- package/package.json +1 -1
package/DOCUMENTATION.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# QY Better Lib Core - 工具函数文档
|
|
1
|
+
# QY Better Lib Core - 工具函数文档
|
|
2
2
|
|
|
3
3
|
本文档详细介绍了 QY Better Lib Core 包中的工具函数,包括功能描述、参数说明、返回类型和使用示例。
|
|
4
4
|
|
|
@@ -547,6 +547,8 @@
|
|
|
547
547
|
|
|
548
548
|
### 3. 日期时间工具 (date.ts)
|
|
549
549
|
|
|
550
|
+
> 注意:日期时间工具现在是可选依赖,需要单独导入
|
|
551
|
+
|
|
550
552
|
#### format_date
|
|
551
553
|
- **功能**: 格式化日期时间
|
|
552
554
|
- **参数**:
|
|
@@ -555,7 +557,7 @@
|
|
|
555
557
|
- **返回类型**: `string` - 格式化后的日期时间字符串
|
|
556
558
|
- **示例**:
|
|
557
559
|
```typescript
|
|
558
|
-
import { format_date } from '@qy_better_lib/core';
|
|
560
|
+
import { format_date } from '@qy_better_lib/core/date';
|
|
559
561
|
|
|
560
562
|
format_date(new Date()); // 2023-12-31 23:59:59
|
|
561
563
|
format_date(new Date(), 'YYYY-MM-DD'); // 2023-12-31
|
|
@@ -571,7 +573,7 @@
|
|
|
571
573
|
- **返回类型**: `[string, string]` - [开始日期时间, 截止日期时间]
|
|
572
574
|
- **示例**:
|
|
573
575
|
```typescript
|
|
574
|
-
import { get_date_time_range } from '@qy_better_lib/core';
|
|
576
|
+
import { get_date_time_range } from '@qy_better_lib/core/date';
|
|
575
577
|
|
|
576
578
|
// 获取昨天的时间范围
|
|
577
579
|
const [start, end] = get_date_time_range('d', -1);
|
|
@@ -587,7 +589,7 @@
|
|
|
587
589
|
- **返回类型**: `number` - 时间差
|
|
588
590
|
- **示例**:
|
|
589
591
|
```typescript
|
|
590
|
-
import { get_date_diff } from '@qy_better_lib/core';
|
|
592
|
+
import { get_date_diff } from '@qy_better_lib/core/date';
|
|
591
593
|
|
|
592
594
|
const date1 = '2023-12-31';
|
|
593
595
|
const date2 = '2023-12-25';
|
|
@@ -604,7 +606,7 @@
|
|
|
604
606
|
- **返回类型**: `Date | string` - 增加后的日期或格式化后的字符串
|
|
605
607
|
- **示例**:
|
|
606
608
|
```typescript
|
|
607
|
-
import { add_date } from '@qy_better_lib/core';
|
|
609
|
+
import { add_date } from '@qy_better_lib/core/date';
|
|
608
610
|
|
|
609
611
|
// 添加7天
|
|
610
612
|
add_date(new Date(), 7, 'day'); // 7天后的日期对象
|
|
@@ -621,7 +623,7 @@
|
|
|
621
623
|
- **返回类型**: `Date | string` - 减少后的日期或格式化后的字符串
|
|
622
624
|
- **示例**:
|
|
623
625
|
```typescript
|
|
624
|
-
import { subtract_date } from '@qy_better_lib/core';
|
|
626
|
+
import { subtract_date } from '@qy_better_lib/core/date';
|
|
625
627
|
|
|
626
628
|
// 减去7天
|
|
627
629
|
subtract_date(new Date(), 7, 'day'); // 7天前的日期对象
|
|
@@ -634,7 +636,7 @@
|
|
|
634
636
|
- **返回类型**: `boolean` - 是否为工作日
|
|
635
637
|
- **示例**:
|
|
636
638
|
```typescript
|
|
637
|
-
import { is_weekday } from '@qy_better_lib/core';
|
|
639
|
+
import { is_weekday } from '@qy_better_lib/core/date';
|
|
638
640
|
|
|
639
641
|
is_weekday('2023-12-31'); // true (周日)
|
|
640
642
|
is_weekday('2024-01-01'); // false (周一)
|
|
@@ -646,7 +648,7 @@
|
|
|
646
648
|
- **返回类型**: `boolean` - 是否为周末
|
|
647
649
|
- **示例**:
|
|
648
650
|
```typescript
|
|
649
|
-
import { is_weekend } from '@qy_better_lib/core';
|
|
651
|
+
import { is_weekend } from '@qy_better_lib/core/date';
|
|
650
652
|
|
|
651
653
|
is_weekend('2023-12-30'); // true (周六)
|
|
652
654
|
is_weekend('2023-12-29'); // false (周五)
|
|
@@ -658,7 +660,7 @@
|
|
|
658
660
|
- **返回类型**: `string` - 相对时间描述
|
|
659
661
|
- **示例**:
|
|
660
662
|
```typescript
|
|
661
|
-
import { get_relative_time } from '@qy_better_lib/core';
|
|
663
|
+
import { get_relative_time } from '@qy_better_lib/core/date';
|
|
662
664
|
|
|
663
665
|
// 假设当前时间是2023-12-31
|
|
664
666
|
get_relative_time('2023-12-31 23:50:00'); // 刚刚
|
|
@@ -673,7 +675,7 @@
|
|
|
673
675
|
- **返回类型**: `string` - 格式化后的时间差字符串
|
|
674
676
|
- **示例**:
|
|
675
677
|
```typescript
|
|
676
|
-
import { format_timestamp_diff } from '@qy_better_lib/core';
|
|
678
|
+
import { format_timestamp_diff } from '@qy_better_lib/core/date';
|
|
677
679
|
|
|
678
680
|
// 1天2小时3分钟4秒
|
|
679
681
|
const diff = 1 * 24 * 60 * 60 * 1000 + 2 * 60 * 60 * 1000 + 3 * 60 * 1000 + 4 * 1000;
|
|
@@ -1693,223 +1695,22 @@
|
|
|
1693
1695
|
});
|
|
1694
1696
|
```
|
|
1695
1697
|
|
|
1696
|
-
####
|
|
1697
|
-
- **功能**:
|
|
1698
|
-
- **参数**:
|
|
1699
|
-
- `element: Element | null` - DOM元素
|
|
1700
|
-
- `attribute: string` - 属性名
|
|
1701
|
-
- **返回类型**: `string` - 属性值
|
|
1702
|
-
- **示例**:
|
|
1703
|
-
```typescript
|
|
1704
|
-
import { get_attribute } from '@qy_better_lib/core';
|
|
1705
|
-
|
|
1706
|
-
const element = document.getElementById('link');
|
|
1707
|
-
const href = get_attribute(element, 'href');
|
|
1708
|
-
console.log(href);
|
|
1709
|
-
```
|
|
1710
|
-
|
|
1711
|
-
#### set_attribute
|
|
1712
|
-
- **功能**: 设置元素属性
|
|
1713
|
-
- **参数**:
|
|
1714
|
-
- `element: Element | null` - DOM元素
|
|
1715
|
-
- `attribute: string` - 属性名
|
|
1716
|
-
- `value: string` - 属性值
|
|
1717
|
-
- **示例**:
|
|
1718
|
-
```typescript
|
|
1719
|
-
import { set_attribute } from '@qy_better_lib/core';
|
|
1720
|
-
|
|
1721
|
-
const element = document.getElementById('link');
|
|
1722
|
-
set_attribute(element, 'href', 'https://example.com');
|
|
1723
|
-
```
|
|
1724
|
-
|
|
1725
|
-
#### remove_attribute
|
|
1726
|
-
- **功能**: 移除元素属性
|
|
1727
|
-
- **参数**:
|
|
1728
|
-
- `element: Element | null` - DOM元素
|
|
1729
|
-
- `attribute: string` - 属性名
|
|
1730
|
-
- **示例**:
|
|
1731
|
-
```typescript
|
|
1732
|
-
import { remove_attribute } from '@qy_better_lib/core';
|
|
1733
|
-
|
|
1734
|
-
const element = document.getElementById('link');
|
|
1735
|
-
remove_attribute(element, 'href');
|
|
1736
|
-
```
|
|
1737
|
-
|
|
1738
|
-
#### on
|
|
1739
|
-
- **功能**: 绑定事件
|
|
1740
|
-
- **参数**:
|
|
1741
|
-
- `element: Element | Window | Document | null` - DOM元素、窗口或文档
|
|
1742
|
-
- `event: string` - 事件名
|
|
1743
|
-
- `handler: EventListener` - 事件处理函数
|
|
1744
|
-
- `options: AddEventListenerOptions` - 事件选项
|
|
1745
|
-
- **示例**:
|
|
1746
|
-
```typescript
|
|
1747
|
-
import { on } from '@qy_better_lib/core';
|
|
1748
|
-
|
|
1749
|
-
const button = document.getElementById('button');
|
|
1750
|
-
on(button, 'click', () => {
|
|
1751
|
-
console.log('Button clicked');
|
|
1752
|
-
});
|
|
1753
|
-
```
|
|
1754
|
-
|
|
1755
|
-
#### off
|
|
1756
|
-
- **功能**: 解绑事件
|
|
1757
|
-
- **参数**:
|
|
1758
|
-
- `element: Element | Window | Document | null` - DOM元素、窗口或文档
|
|
1759
|
-
- `event: string` - 事件名
|
|
1760
|
-
- `handler: EventListener` - 事件处理函数
|
|
1761
|
-
- `options: EventListenerOptions` - 事件选项
|
|
1762
|
-
- **示例**:
|
|
1763
|
-
```typescript
|
|
1764
|
-
import { off } from '@qy_better_lib/core';
|
|
1765
|
-
|
|
1766
|
-
const button = document.getElementById('button');
|
|
1767
|
-
const handleClick = () => {
|
|
1768
|
-
console.log('Button clicked');
|
|
1769
|
-
};
|
|
1770
|
-
|
|
1771
|
-
on(button, 'click', handleClick);
|
|
1772
|
-
// 解绑事件
|
|
1773
|
-
off(button, 'click', handleClick);
|
|
1774
|
-
```
|
|
1775
|
-
|
|
1776
|
-
#### create_element
|
|
1777
|
-
- **功能**: 创建元素
|
|
1778
|
-
- **参数**:
|
|
1779
|
-
- `tag_name: string` - 标签名
|
|
1780
|
-
- `options: object` - 元素选项
|
|
1781
|
-
- **返回类型**: `Element` - 创建的DOM元素
|
|
1782
|
-
- **示例**:
|
|
1783
|
-
```typescript
|
|
1784
|
-
import { create_element } from '@qy_better_lib/core';
|
|
1785
|
-
|
|
1786
|
-
// 创建带有类名和样式的元素
|
|
1787
|
-
const element = create_element('div', {
|
|
1788
|
-
class_name: 'container',
|
|
1789
|
-
style: {
|
|
1790
|
-
color: 'red',
|
|
1791
|
-
fontSize: '16px'
|
|
1792
|
-
},
|
|
1793
|
-
attributes: {
|
|
1794
|
-
'data-id': '123'
|
|
1795
|
-
},
|
|
1796
|
-
text: 'Hello World'
|
|
1797
|
-
});
|
|
1798
|
-
|
|
1799
|
-
document.body.appendChild(element);
|
|
1800
|
-
```
|
|
1801
|
-
|
|
1802
|
-
#### get_element_rect
|
|
1803
|
-
- **功能**: 获取元素位置和尺寸
|
|
1804
|
-
- **参数**: `element: Element | null` - DOM元素
|
|
1805
|
-
- **返回类型**: `DOMRect | null` - 元素位置和尺寸信息
|
|
1806
|
-
- **示例**:
|
|
1807
|
-
```typescript
|
|
1808
|
-
import { get_element_rect } from '@qy_better_lib/core';
|
|
1809
|
-
|
|
1810
|
-
const element = document.getElementById('container');
|
|
1811
|
-
const rect = get_element_rect(element);
|
|
1812
|
-
if (rect) {
|
|
1813
|
-
console.log(rect.width, rect.height, rect.top, rect.left);
|
|
1814
|
-
}
|
|
1815
|
-
```
|
|
1816
|
-
|
|
1817
|
-
#### get_element_position
|
|
1818
|
-
- **功能**: 获取元素相对于文档的位置
|
|
1819
|
-
- **参数**: `element: Element | null` - DOM元素
|
|
1820
|
-
- **返回类型**: `{ top: number; left: number } | null` - 元素位置信息
|
|
1821
|
-
- **示例**:
|
|
1822
|
-
```typescript
|
|
1823
|
-
import { get_element_position } from '@qy_better_lib/core';
|
|
1824
|
-
|
|
1825
|
-
const element = document.getElementById('container');
|
|
1826
|
-
const position = get_element_position(element);
|
|
1827
|
-
if (position) {
|
|
1828
|
-
console.log(position.top, position.left);
|
|
1829
|
-
}
|
|
1830
|
-
```
|
|
1831
|
-
|
|
1832
|
-
#### get_element_size
|
|
1833
|
-
- **功能**: 获取元素尺寸
|
|
1834
|
-
- **参数**: `element: Element | null` - DOM元素
|
|
1835
|
-
- **返回类型**: `{ width: number; height: number } | null` - 元素尺寸信息
|
|
1836
|
-
- **示例**:
|
|
1837
|
-
```typescript
|
|
1838
|
-
import { get_element_size } from '@qy_better_lib/core';
|
|
1839
|
-
|
|
1840
|
-
const element = document.getElementById('container');
|
|
1841
|
-
const size = get_element_size(element);
|
|
1842
|
-
if (size) {
|
|
1843
|
-
console.log(size.width, size.height);
|
|
1844
|
-
}
|
|
1845
|
-
```
|
|
1846
|
-
|
|
1847
|
-
#### scroll_to_element
|
|
1848
|
-
- **功能**: 滚动到指定元素
|
|
1698
|
+
#### auto_size
|
|
1699
|
+
- **功能**: 根据屏幕宽度自动调整尺寸
|
|
1849
1700
|
- **参数**:
|
|
1850
|
-
- `
|
|
1851
|
-
- `
|
|
1852
|
-
-
|
|
1853
|
-
```typescript
|
|
1854
|
-
import { scroll_to_element } from '@qy_better_lib/core';
|
|
1855
|
-
|
|
1856
|
-
const targetElement = document.getElementById('target');
|
|
1857
|
-
// 滚动到指定元素
|
|
1858
|
-
scroll_to_element(targetElement, {
|
|
1859
|
-
behavior: 'smooth',
|
|
1860
|
-
offsetTop: 100 // 顶部偏移量
|
|
1861
|
-
});
|
|
1862
|
-
```
|
|
1863
|
-
|
|
1864
|
-
#### is_in_viewport
|
|
1865
|
-
- **功能**: 检查元素是否在视口中
|
|
1866
|
-
- **参数**: `element: Element | null` - DOM元素
|
|
1867
|
-
- **返回类型**: `boolean` - 是否在视口中
|
|
1868
|
-
- **示例**:
|
|
1869
|
-
```typescript
|
|
1870
|
-
import { is_in_viewport } from '@qy_better_lib/core';
|
|
1871
|
-
|
|
1872
|
-
const element = document.getElementById('container');
|
|
1873
|
-
const inViewport = is_in_viewport(element);
|
|
1874
|
-
console.log(inViewport);
|
|
1875
|
-
```
|
|
1876
|
-
|
|
1877
|
-
#### is_completely_in_viewport
|
|
1878
|
-
- **功能**: 检查元素是否完全在视口中
|
|
1879
|
-
- **参数**: `element: Element | null` - DOM元素
|
|
1880
|
-
- **返回类型**: `boolean` - 是否完全在视口中
|
|
1881
|
-
- **示例**:
|
|
1882
|
-
```typescript
|
|
1883
|
-
import { is_completely_in_viewport } from '@qy_better_lib/core';
|
|
1884
|
-
|
|
1885
|
-
const element = document.getElementById('container');
|
|
1886
|
-
const completelyInViewport = is_completely_in_viewport(element);
|
|
1887
|
-
console.log(completelyInViewport);
|
|
1888
|
-
```
|
|
1889
|
-
|
|
1890
|
-
#### get_window_size
|
|
1891
|
-
- **功能**: 获取窗口尺寸
|
|
1892
|
-
- **返回类型**: `{ width: number; height: number }` - 窗口尺寸信息
|
|
1893
|
-
- **示例**:
|
|
1894
|
-
```typescript
|
|
1895
|
-
import { get_window_size } from '@qy_better_lib/core';
|
|
1896
|
-
|
|
1897
|
-
const windowSize = get_window_size();
|
|
1898
|
-
console.log(windowSize.width, windowSize.height);
|
|
1899
|
-
```
|
|
1900
|
-
|
|
1901
|
-
#### get_document_size
|
|
1902
|
-
- **功能**: 获取文档尺寸
|
|
1903
|
-
- **返回类型**: `{ width: number; height: number }` - 文档尺寸信息
|
|
1701
|
+
- `size: number` - 原始尺寸值
|
|
1702
|
+
- `deflate_width: number` - 基准宽度,默认 1920
|
|
1703
|
+
- **返回类型**: `number` - 调整后的尺寸值
|
|
1904
1704
|
- **示例**:
|
|
1905
1705
|
```typescript
|
|
1906
|
-
import {
|
|
1706
|
+
import { auto_size } from '@qy_better_lib/core';
|
|
1907
1707
|
|
|
1908
|
-
|
|
1909
|
-
|
|
1708
|
+
// 根据屏幕宽度自动调整字体大小
|
|
1709
|
+
const fontSize = auto_size(16);
|
|
1710
|
+
console.log(fontSize); // 根据当前屏幕宽度计算的值
|
|
1910
1711
|
```
|
|
1911
1712
|
|
|
1912
|
-
### 9.
|
|
1713
|
+
### 9. 颜色工具 (color.ts)
|
|
1913
1714
|
|
|
1914
1715
|
#### mix
|
|
1915
1716
|
- **功能**: 过渡颜色生成
|
|
@@ -1922,8 +1723,9 @@
|
|
|
1922
1723
|
```typescript
|
|
1923
1724
|
import { mix } from '@qy_better_lib/core';
|
|
1924
1725
|
|
|
1726
|
+
// 混合红色和蓝色,权重0.5
|
|
1925
1727
|
const mixedColor = mix('#ff0000', '#0000ff', 0.5);
|
|
1926
|
-
console.log(mixedColor); //
|
|
1728
|
+
console.log(mixedColor); // #800080
|
|
1927
1729
|
```
|
|
1928
1730
|
|
|
1929
1731
|
#### get_rgb
|
|
@@ -1934,14 +1736,14 @@
|
|
|
1934
1736
|
```typescript
|
|
1935
1737
|
import { get_rgb } from '@qy_better_lib/core';
|
|
1936
1738
|
|
|
1937
|
-
const
|
|
1938
|
-
console.log(
|
|
1739
|
+
const rgb = get_rgb('#ff0000');
|
|
1740
|
+
console.log(rgb); // "255,0,0"
|
|
1939
1741
|
```
|
|
1940
1742
|
|
|
1941
1743
|
#### hex_to_rgb
|
|
1942
1744
|
- **功能**: HEX转成RGB对象
|
|
1943
1745
|
- **参数**: `hex: string` - HEX颜色值
|
|
1944
|
-
- **返回类型**: `{
|
|
1746
|
+
- **返回类型**: `{r, g, b} | null` - RGB对象或null
|
|
1945
1747
|
- **示例**:
|
|
1946
1748
|
```typescript
|
|
1947
1749
|
import { hex_to_rgb } from '@qy_better_lib/core';
|
|
@@ -1991,8 +1793,8 @@
|
|
|
1991
1793
|
```typescript
|
|
1992
1794
|
import { lighten } from '@qy_better_lib/core';
|
|
1993
1795
|
|
|
1994
|
-
const lightColor = lighten('#ff0000', 0.
|
|
1995
|
-
console.log(lightColor); //
|
|
1796
|
+
const lightColor = lighten('#ff0000', 0.5);
|
|
1797
|
+
console.log(lightColor); // #ffffff
|
|
1996
1798
|
```
|
|
1997
1799
|
|
|
1998
1800
|
#### darken
|
|
@@ -2005,8 +1807,8 @@
|
|
|
2005
1807
|
```typescript
|
|
2006
1808
|
import { darken } from '@qy_better_lib/core';
|
|
2007
1809
|
|
|
2008
|
-
const darkColor = darken('#ff0000', 0.
|
|
2009
|
-
console.log(darkColor); //
|
|
1810
|
+
const darkColor = darken('#ff0000', 0.5);
|
|
1811
|
+
console.log(darkColor); // #800000
|
|
2010
1812
|
```
|
|
2011
1813
|
|
|
2012
1814
|
#### is_light
|
|
@@ -2042,26 +1844,13 @@
|
|
|
2042
1844
|
import { get_contrast_color } from '@qy_better_lib/core';
|
|
2043
1845
|
|
|
2044
1846
|
const contrastColor = get_contrast_color('#ff0000');
|
|
2045
|
-
console.log(contrastColor); // #
|
|
1847
|
+
console.log(contrastColor); // #FFFFFF
|
|
2046
1848
|
```
|
|
2047
1849
|
|
|
2048
|
-
### 10. ECharts
|
|
2049
|
-
|
|
2050
|
-
#### auto_size
|
|
2051
|
-
- **功能**: ECharts图表字体、间距自适应
|
|
2052
|
-
- **参数**:
|
|
2053
|
-
- `size: number` - 原始尺寸
|
|
2054
|
-
- `deflate_width: number` - 基准宽度,默认 1920
|
|
2055
|
-
- **返回类型**: `number` - 自适应后的尺寸
|
|
2056
|
-
- **示例**:
|
|
2057
|
-
```typescript
|
|
2058
|
-
import { auto_size } from '@qy_better_lib/core';
|
|
2059
|
-
|
|
2060
|
-
const fontSize = auto_size(14); // 根据屏幕宽度自适应的字体大小
|
|
2061
|
-
```
|
|
1850
|
+
### 10. ECharts 工具 (echarts.ts)
|
|
2062
1851
|
|
|
2063
1852
|
#### get_chart_gradient_color
|
|
2064
|
-
- **功能**:
|
|
1853
|
+
- **功能**: Echarts线性渐变颜色
|
|
2065
1854
|
- **参数**:
|
|
2066
1855
|
- `type: 'v' | 'h'` - 渐变类型,'v'为垂直渐变,'h'为水平渐变
|
|
2067
1856
|
- `start_color: string` - 起始颜色
|
|
@@ -2072,49 +1861,33 @@
|
|
|
2072
1861
|
import { get_chart_gradient_color } from '@qy_better_lib/core';
|
|
2073
1862
|
|
|
2074
1863
|
const gradient = get_chart_gradient_color('v', '#ff0000', '#0000ff');
|
|
1864
|
+
console.log(gradient);
|
|
2075
1865
|
```
|
|
2076
1866
|
|
|
2077
1867
|
#### init_chart
|
|
2078
|
-
- **功能**: 初始化
|
|
1868
|
+
- **功能**: 初始化Echarts图表
|
|
2079
1869
|
- **参数**:
|
|
2080
1870
|
- `container: HTMLElement | string` - 容器元素或容器ID
|
|
2081
|
-
- `options
|
|
1871
|
+
- `options?: EChartsOption` - 图表配置项
|
|
2082
1872
|
- `renderer: 'canvas' | 'svg'` - 渲染方式,默认 'canvas'
|
|
2083
|
-
- `theme
|
|
2084
|
-
- **返回类型**: `Promise<
|
|
1873
|
+
- `theme?: string` - 主题
|
|
1874
|
+
- **返回类型**: `Promise<any>` - Echarts实例
|
|
2085
1875
|
- **示例**:
|
|
2086
1876
|
```typescript
|
|
2087
1877
|
import { init_chart } from '@qy_better_lib/core';
|
|
2088
1878
|
|
|
2089
|
-
async function
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
text: '示例图表'
|
|
2094
|
-
},
|
|
2095
|
-
series: [{
|
|
2096
|
-
type: 'bar',
|
|
2097
|
-
data: [1, 2, 3, 4, 5]
|
|
2098
|
-
}]
|
|
1879
|
+
async function init() {
|
|
1880
|
+
const chart = await init_chart('chart-container', {
|
|
1881
|
+
title: { text: '示例图表' },
|
|
1882
|
+
series: [{ type: 'bar', data: [1, 2, 3] }]
|
|
2099
1883
|
});
|
|
2100
|
-
|
|
2101
|
-
// 使用暗色主题
|
|
2102
|
-
const chart2 = await init_chart('chart-container2', {
|
|
2103
|
-
title: {
|
|
2104
|
-
text: '示例图表'
|
|
2105
|
-
},
|
|
2106
|
-
series: [{
|
|
2107
|
-
type: 'bar',
|
|
2108
|
-
data: [1, 2, 3, 4, 5]
|
|
2109
|
-
}]
|
|
2110
|
-
}, 'canvas', 'dark');
|
|
1884
|
+
return chart;
|
|
2111
1885
|
}
|
|
2112
1886
|
```
|
|
2113
1887
|
|
|
2114
1888
|
#### destroy_chart
|
|
2115
|
-
- **功能**: 销毁
|
|
2116
|
-
- **参数**: `chart:
|
|
2117
|
-
- **返回类型**: `void`
|
|
1889
|
+
- **功能**: 销毁Echarts图表
|
|
1890
|
+
- **参数**: `chart: any` - Echarts实例
|
|
2118
1891
|
- **示例**:
|
|
2119
1892
|
```typescript
|
|
2120
1893
|
import { destroy_chart } from '@qy_better_lib/core';
|
|
@@ -2123,26 +1896,22 @@
|
|
|
2123
1896
|
```
|
|
2124
1897
|
|
|
2125
1898
|
#### update_chart
|
|
2126
|
-
- **功能**: 更新
|
|
1899
|
+
- **功能**: 更新Echarts图表配置
|
|
2127
1900
|
- **参数**:
|
|
2128
|
-
- `chart:
|
|
2129
|
-
- `options:
|
|
2130
|
-
- **返回类型**: `void`
|
|
1901
|
+
- `chart: any` - Echarts实例
|
|
1902
|
+
- `options: EChartsOption` - 图表配置项
|
|
2131
1903
|
- **示例**:
|
|
2132
1904
|
```typescript
|
|
2133
1905
|
import { update_chart } from '@qy_better_lib/core';
|
|
2134
1906
|
|
|
2135
1907
|
update_chart(chart, {
|
|
2136
|
-
series: [{
|
|
2137
|
-
data: [6, 7, 8, 9, 10]
|
|
2138
|
-
}]
|
|
1908
|
+
series: [{ type: 'bar', data: [4, 5, 6] }]
|
|
2139
1909
|
});
|
|
2140
1910
|
```
|
|
2141
1911
|
|
|
2142
1912
|
#### resize_chart
|
|
2143
|
-
- **功能**: 调整
|
|
2144
|
-
- **参数**: `chart:
|
|
2145
|
-
- **返回类型**: `void`
|
|
1913
|
+
- **功能**: 调整Echarts图表大小
|
|
1914
|
+
- **参数**: `chart: any` - Echarts实例
|
|
2146
1915
|
- **示例**:
|
|
2147
1916
|
```typescript
|
|
2148
1917
|
import { resize_chart } from '@qy_better_lib/core';
|
|
@@ -2151,10 +1920,10 @@
|
|
|
2151
1920
|
```
|
|
2152
1921
|
|
|
2153
1922
|
#### make_chart_responsive
|
|
2154
|
-
- **功能**: 为
|
|
1923
|
+
- **功能**: 为Echarts图表添加响应式处理
|
|
2155
1924
|
- **参数**:
|
|
2156
|
-
- `chart:
|
|
2157
|
-
- `debounce_time: number` - 防抖时间,默认
|
|
1925
|
+
- `chart: any` - Echarts实例
|
|
1926
|
+
- `debounce_time: number` - 防抖时间,默认200ms
|
|
2158
1927
|
- **返回类型**: `Function` - 清理函数
|
|
2159
1928
|
- **示例**:
|
|
2160
1929
|
```typescript
|
|
@@ -2166,106 +1935,110 @@
|
|
|
2166
1935
|
```
|
|
2167
1936
|
|
|
2168
1937
|
#### generate_chart_colors
|
|
2169
|
-
- **功能**: 生成
|
|
1938
|
+
- **功能**: 生成Echarts颜色数组
|
|
2170
1939
|
- **参数**:
|
|
2171
1940
|
- `count: number` - 颜色数量
|
|
2172
|
-
- `base_colors
|
|
1941
|
+
- `base_colors?: string[]` - 基础颜色数组,默认使用ECharts默认颜色
|
|
2173
1942
|
- **返回类型**: `string[]` - 颜色数组
|
|
2174
1943
|
- **示例**:
|
|
2175
1944
|
```typescript
|
|
2176
1945
|
import { generate_chart_colors } from '@qy_better_lib/core';
|
|
2177
1946
|
|
|
2178
1947
|
const colors = generate_chart_colors(5);
|
|
1948
|
+
console.log(colors);
|
|
2179
1949
|
```
|
|
2180
1950
|
|
|
2181
1951
|
#### format_chart_label
|
|
2182
|
-
- **功能**: 格式化
|
|
1952
|
+
- **功能**: 格式化Echarts数据标签
|
|
2183
1953
|
- **参数**:
|
|
2184
1954
|
- `value: any` - 数值
|
|
2185
|
-
- `formatter:
|
|
1955
|
+
- `formatter?: ((value: any) => string) | string` - 格式化函数或格式化模板
|
|
2186
1956
|
- **返回类型**: `string` - 格式化后的值
|
|
2187
1957
|
- **示例**:
|
|
2188
1958
|
```typescript
|
|
2189
1959
|
import { format_chart_label } from '@qy_better_lib/core';
|
|
2190
1960
|
|
|
2191
|
-
const label = format_chart_label(
|
|
1961
|
+
const label = format_chart_label(123, '{value}件');
|
|
1962
|
+
console.log(label); // 123件
|
|
2192
1963
|
```
|
|
2193
1964
|
|
|
2194
1965
|
#### merge_chart_options
|
|
2195
|
-
- **功能**: 合并
|
|
1966
|
+
- **功能**: 合并Echarts配置项
|
|
2196
1967
|
- **参数**:
|
|
2197
|
-
- `defaultOption:
|
|
2198
|
-
- `customOption:
|
|
2199
|
-
- **返回类型**: `
|
|
1968
|
+
- `defaultOption: EChartsOption` - 默认配置项
|
|
1969
|
+
- `customOption: EChartsOption` - 自定义配置项
|
|
1970
|
+
- **返回类型**: `EChartsOption` - 合并后的配置项
|
|
2200
1971
|
- **示例**:
|
|
2201
1972
|
```typescript
|
|
2202
1973
|
import { merge_chart_options } from '@qy_better_lib/core';
|
|
2203
1974
|
|
|
2204
|
-
const options = merge_chart_options(
|
|
1975
|
+
const options = merge_chart_options(
|
|
1976
|
+
{ title: { text: '默认标题' } },
|
|
1977
|
+
{ title: { text: '自定义标题' } }
|
|
1978
|
+
);
|
|
2205
1979
|
```
|
|
2206
1980
|
|
|
2207
1981
|
#### add_chart_listener
|
|
2208
|
-
- **功能**: 为
|
|
1982
|
+
- **功能**: 为Echarts图表添加事件监听器
|
|
2209
1983
|
- **参数**:
|
|
2210
|
-
- `chart:
|
|
1984
|
+
- `chart: any` - Echarts实例
|
|
2211
1985
|
- `eventName: string` - 事件名称
|
|
2212
|
-
- `handler:
|
|
2213
|
-
- **返回类型**: `void`
|
|
1986
|
+
- `handler: (...args: any[]) => void` - 事件处理函数
|
|
2214
1987
|
- **示例**:
|
|
2215
1988
|
```typescript
|
|
2216
1989
|
import { add_chart_listener } from '@qy_better_lib/core';
|
|
2217
1990
|
|
|
2218
1991
|
add_chart_listener(chart, 'click', (params) => {
|
|
2219
|
-
console.log('
|
|
1992
|
+
console.log('点击事件:', params);
|
|
2220
1993
|
});
|
|
2221
1994
|
```
|
|
2222
1995
|
|
|
2223
1996
|
#### remove_chart_listener
|
|
2224
|
-
- **功能**: 移除
|
|
1997
|
+
- **功能**: 移除Echarts图表事件监听器
|
|
2225
1998
|
- **参数**:
|
|
2226
|
-
- `chart:
|
|
1999
|
+
- `chart: any` - Echarts实例
|
|
2227
2000
|
- `eventName: string` - 事件名称
|
|
2228
|
-
- `handler:
|
|
2229
|
-
- **返回类型**: `void`
|
|
2001
|
+
- `handler: (...args: any[]) => void` - 事件处理函数
|
|
2230
2002
|
- **示例**:
|
|
2231
2003
|
```typescript
|
|
2232
2004
|
import { remove_chart_listener } from '@qy_better_lib/core';
|
|
2233
2005
|
|
|
2006
|
+
const handler = (params) => console.log('点击事件:', params);
|
|
2007
|
+
add_chart_listener(chart, 'click', handler);
|
|
2008
|
+
// 稍后移除
|
|
2234
2009
|
remove_chart_listener(chart, 'click', handler);
|
|
2235
2010
|
```
|
|
2236
2011
|
|
|
2237
2012
|
#### export_chart_image
|
|
2238
|
-
- **功能**: 导出
|
|
2013
|
+
- **功能**: 导出Echarts图表为图片
|
|
2239
2014
|
- **参数**:
|
|
2240
|
-
- `chart:
|
|
2241
|
-
- `options
|
|
2242
|
-
- **返回类型**: `string` - 图片URL
|
|
2015
|
+
- `chart: any` - Echarts实例
|
|
2016
|
+
- `options?: object` - 导出选项
|
|
2017
|
+
- **返回类型**: `string | null` - 图片URL
|
|
2243
2018
|
- **示例**:
|
|
2244
2019
|
```typescript
|
|
2245
2020
|
import { export_chart_image } from '@qy_better_lib/core';
|
|
2246
2021
|
|
|
2247
2022
|
const imageUrl = export_chart_image(chart, {
|
|
2248
2023
|
type: 'png',
|
|
2249
|
-
file_name: 'chart'
|
|
2024
|
+
file_name: 'chart-image'
|
|
2250
2025
|
});
|
|
2251
2026
|
```
|
|
2252
2027
|
|
|
2253
2028
|
#### is_echarts_loaded
|
|
2254
|
-
- **功能**: 检查
|
|
2029
|
+
- **功能**: 检查Echarts是否已加载
|
|
2255
2030
|
- **返回类型**: `boolean` - 是否已加载
|
|
2256
2031
|
- **示例**:
|
|
2257
2032
|
```typescript
|
|
2258
2033
|
import { is_echarts_loaded } from '@qy_better_lib/core';
|
|
2259
2034
|
|
|
2260
|
-
|
|
2261
|
-
|
|
2262
|
-
}
|
|
2035
|
+
const loaded = is_echarts_loaded();
|
|
2036
|
+
console.log(loaded);
|
|
2263
2037
|
```
|
|
2264
2038
|
|
|
2265
2039
|
#### resize_charts
|
|
2266
|
-
- **功能**: 批量调整
|
|
2267
|
-
- **参数**: `charts:
|
|
2268
|
-
- **返回类型**: `void`
|
|
2040
|
+
- **功能**: 批量调整Echarts图表大小
|
|
2041
|
+
- **参数**: `charts: any[]` - 图表实例数组
|
|
2269
2042
|
- **示例**:
|
|
2270
2043
|
```typescript
|
|
2271
2044
|
import { resize_charts } from '@qy_better_lib/core';
|
|
@@ -2274,9 +2047,8 @@
|
|
|
2274
2047
|
```
|
|
2275
2048
|
|
|
2276
2049
|
#### destroy_charts
|
|
2277
|
-
- **功能**: 批量销毁
|
|
2278
|
-
- **参数**: `charts:
|
|
2279
|
-
- **返回类型**: `void`
|
|
2050
|
+
- **功能**: 批量销毁Echarts图表
|
|
2051
|
+
- **参数**: `charts: any[]` - 图表实例数组
|
|
2280
2052
|
- **示例**:
|
|
2281
2053
|
```typescript
|
|
2282
2054
|
import { destroy_charts } from '@qy_better_lib/core';
|
|
@@ -2289,13 +2061,14 @@
|
|
|
2289
2061
|
- **参数**:
|
|
2290
2062
|
- `data: any[]` - 原始数据数组
|
|
2291
2063
|
- `sort_key: string` - 排序字段名
|
|
2292
|
-
- `order: 'asc' | 'desc'` - 排序顺序,默认
|
|
2064
|
+
- `order: 'asc' | 'desc'` - 排序顺序,默认'asc'
|
|
2293
2065
|
- **返回类型**: `any[]` - 排序后的数据数组
|
|
2294
2066
|
- **示例**:
|
|
2295
2067
|
```typescript
|
|
2296
2068
|
import { sort_chart_data } from '@qy_better_lib/core';
|
|
2297
2069
|
|
|
2298
|
-
const sortedData = sort_chart_data(
|
|
2070
|
+
const sortedData = sort_chart_data([{ value: 3 }, { value: 1 }, { value: 2 }], 'value');
|
|
2071
|
+
console.log(sortedData);
|
|
2299
2072
|
```
|
|
2300
2073
|
|
|
2301
2074
|
#### group_chart_data
|
|
@@ -2308,7 +2081,12 @@
|
|
|
2308
2081
|
```typescript
|
|
2309
2082
|
import { group_chart_data } from '@qy_better_lib/core';
|
|
2310
2083
|
|
|
2311
|
-
const groupedData = group_chart_data(
|
|
2084
|
+
const groupedData = group_chart_data([
|
|
2085
|
+
{ category: 'A', value: 1 },
|
|
2086
|
+
{ category: 'B', value: 2 },
|
|
2087
|
+
{ category: 'A', value: 3 }
|
|
2088
|
+
], 'category');
|
|
2089
|
+
console.log(groupedData);
|
|
2312
2090
|
```
|
|
2313
2091
|
|
|
2314
2092
|
#### aggregate_chart_data
|
|
@@ -2317,16 +2095,21 @@
|
|
|
2317
2095
|
- `data: any[]` - 原始数据数组
|
|
2318
2096
|
- `group_key: string` - 分组字段名
|
|
2319
2097
|
- `value_key: string` - 数值字段名
|
|
2320
|
-
- `aggregator:
|
|
2098
|
+
- `aggregator: (values: number[]) => number` - 聚合函数,默认求和
|
|
2321
2099
|
- **返回类型**: `any[]` - 聚合后的数据数组
|
|
2322
2100
|
- **示例**:
|
|
2323
2101
|
```typescript
|
|
2324
2102
|
import { aggregate_chart_data } from '@qy_better_lib/core';
|
|
2325
2103
|
|
|
2326
|
-
const aggregatedData = aggregate_chart_data(
|
|
2104
|
+
const aggregatedData = aggregate_chart_data([
|
|
2105
|
+
{ category: 'A', value: 1 },
|
|
2106
|
+
{ category: 'A', value: 3 },
|
|
2107
|
+
{ category: 'B', value: 2 }
|
|
2108
|
+
], 'category', 'value');
|
|
2109
|
+
console.log(aggregatedData);
|
|
2327
2110
|
```
|
|
2328
2111
|
|
|
2329
|
-
### 11.
|
|
2112
|
+
### 11. 文件工具 (file.ts)
|
|
2330
2113
|
|
|
2331
2114
|
#### download_file
|
|
2332
2115
|
- **功能**: 下载文件
|
|
@@ -2337,18 +2120,16 @@
|
|
|
2337
2120
|
```typescript
|
|
2338
2121
|
import { download_file } from '@qy_better_lib/core';
|
|
2339
2122
|
|
|
2340
|
-
|
|
2341
|
-
download_file({ path: 'https://example.com/file.pdf', name: 'document.pdf' });
|
|
2123
|
+
download_file({ path: 'https://example.com/file.pdf', name: 'example.pdf' });
|
|
2342
2124
|
```
|
|
2343
2125
|
|
|
2344
2126
|
#### download_files
|
|
2345
2127
|
- **功能**: 批量下载文件
|
|
2346
|
-
- **参数**: `file_list: any[]` -
|
|
2128
|
+
- **参数**: `file_list: any[]` - 文件列表
|
|
2347
2129
|
- **示例**:
|
|
2348
2130
|
```typescript
|
|
2349
2131
|
import { download_files } from '@qy_better_lib/core';
|
|
2350
2132
|
|
|
2351
|
-
// 批量下载文件
|
|
2352
2133
|
download_files([
|
|
2353
2134
|
{ url: 'https://example.com/file1.pdf', name: 'file1.pdf' },
|
|
2354
2135
|
{ url: 'https://example.com/file2.pdf', name: 'file2.pdf' }
|
|
@@ -2363,10 +2144,12 @@
|
|
|
2363
2144
|
```typescript
|
|
2364
2145
|
import { to_base64 } from '@qy_better_lib/core';
|
|
2365
2146
|
|
|
2366
|
-
async function
|
|
2367
|
-
const
|
|
2368
|
-
|
|
2369
|
-
|
|
2147
|
+
async function convert() {
|
|
2148
|
+
const input = document.querySelector('input[type="file"]');
|
|
2149
|
+
if (input.files[0]) {
|
|
2150
|
+
const base64 = await to_base64(input.files[0]);
|
|
2151
|
+
console.log(base64);
|
|
2152
|
+
}
|
|
2370
2153
|
}
|
|
2371
2154
|
```
|
|
2372
2155
|
|
|
@@ -2380,10 +2163,12 @@
|
|
|
2380
2163
|
```typescript
|
|
2381
2164
|
import { read_file } from '@qy_better_lib/core';
|
|
2382
2165
|
|
|
2383
|
-
async function
|
|
2384
|
-
const
|
|
2385
|
-
|
|
2386
|
-
|
|
2166
|
+
async function read() {
|
|
2167
|
+
const input = document.querySelector('input[type="file"]');
|
|
2168
|
+
if (input.files[0]) {
|
|
2169
|
+
const content = await read_file(input.files[0]);
|
|
2170
|
+
console.log(content);
|
|
2171
|
+
}
|
|
2387
2172
|
}
|
|
2388
2173
|
```
|
|
2389
2174
|
|
|
@@ -2395,7 +2180,8 @@
|
|
|
2395
2180
|
```typescript
|
|
2396
2181
|
import { get_file_extension } from '@qy_better_lib/core';
|
|
2397
2182
|
|
|
2398
|
-
const
|
|
2183
|
+
const extension = get_file_extension('example.pdf');
|
|
2184
|
+
console.log(extension); // pdf
|
|
2399
2185
|
```
|
|
2400
2186
|
|
|
2401
2187
|
#### get_file_name_without_extension
|
|
@@ -2406,7 +2192,8 @@
|
|
|
2406
2192
|
```typescript
|
|
2407
2193
|
import { get_file_name_without_extension } from '@qy_better_lib/core';
|
|
2408
2194
|
|
|
2409
|
-
const name = get_file_name_without_extension('example.
|
|
2195
|
+
const name = get_file_name_without_extension('example.pdf');
|
|
2196
|
+
console.log(name); // example
|
|
2410
2197
|
```
|
|
2411
2198
|
|
|
2412
2199
|
#### validate_file_size
|
|
@@ -2419,9 +2206,11 @@
|
|
|
2419
2206
|
```typescript
|
|
2420
2207
|
import { validate_file_size } from '@qy_better_lib/core';
|
|
2421
2208
|
|
|
2422
|
-
const
|
|
2423
|
-
|
|
2424
|
-
|
|
2209
|
+
const input = document.querySelector('input[type="file"]');
|
|
2210
|
+
if (input.files[0]) {
|
|
2211
|
+
const isValid = validate_file_size(input.files[0], 1024 * 1024); // 1MB
|
|
2212
|
+
console.log(isValid);
|
|
2213
|
+
}
|
|
2425
2214
|
```
|
|
2426
2215
|
|
|
2427
2216
|
#### validate_file_type
|
|
@@ -2434,9 +2223,11 @@
|
|
|
2434
2223
|
```typescript
|
|
2435
2224
|
import { validate_file_type } from '@qy_better_lib/core';
|
|
2436
2225
|
|
|
2437
|
-
const
|
|
2438
|
-
|
|
2439
|
-
|
|
2226
|
+
const input = document.querySelector('input[type="file"]');
|
|
2227
|
+
if (input.files[0]) {
|
|
2228
|
+
const isValid = validate_file_type(input.files[0], ['pdf', 'doc', 'docx']);
|
|
2229
|
+
console.log(isValid);
|
|
2230
|
+
}
|
|
2440
2231
|
```
|
|
2441
2232
|
|
|
2442
2233
|
#### create_file_from_blob
|
|
@@ -2450,8 +2241,9 @@
|
|
|
2450
2241
|
```typescript
|
|
2451
2242
|
import { create_file_from_blob } from '@qy_better_lib/core';
|
|
2452
2243
|
|
|
2453
|
-
const blob = new Blob(['Hello'], { type: 'text/plain' });
|
|
2244
|
+
const blob = new Blob(['Hello World'], { type: 'text/plain' });
|
|
2454
2245
|
const file = create_file_from_blob(blob, 'example.txt', 'text/plain');
|
|
2246
|
+
console.log(file);
|
|
2455
2247
|
```
|
|
2456
2248
|
|
|
2457
2249
|
#### download_text_file
|
|
@@ -2464,7 +2256,6 @@
|
|
|
2464
2256
|
```typescript
|
|
2465
2257
|
import { download_text_file } from '@qy_better_lib/core';
|
|
2466
2258
|
|
|
2467
|
-
// 下载文本文件
|
|
2468
2259
|
download_text_file('Hello World', 'example.txt');
|
|
2469
2260
|
```
|
|
2470
2261
|
|
|
@@ -2480,10 +2271,12 @@
|
|
|
2480
2271
|
```typescript
|
|
2481
2272
|
import { compress_image } from '@qy_better_lib/core';
|
|
2482
2273
|
|
|
2483
|
-
async function
|
|
2484
|
-
const
|
|
2485
|
-
|
|
2486
|
-
|
|
2274
|
+
async function compress() {
|
|
2275
|
+
const input = document.querySelector('input[type="file"]');
|
|
2276
|
+
if (input.files[0]) {
|
|
2277
|
+
const compressedFile = await compress_image(input.files[0]);
|
|
2278
|
+
console.log(compressedFile);
|
|
2279
|
+
}
|
|
2487
2280
|
}
|
|
2488
2281
|
```
|
|
2489
2282
|
|
|
@@ -2495,9 +2288,11 @@
|
|
|
2495
2288
|
```typescript
|
|
2496
2289
|
import { get_file_info } from '@qy_better_lib/core';
|
|
2497
2290
|
|
|
2498
|
-
const
|
|
2499
|
-
|
|
2500
|
-
|
|
2291
|
+
const input = document.querySelector('input[type="file"]');
|
|
2292
|
+
if (input.files[0]) {
|
|
2293
|
+
const info = get_file_info(input.files[0]);
|
|
2294
|
+
console.log(info);
|
|
2295
|
+
}
|
|
2501
2296
|
```
|
|
2502
2297
|
|
|
2503
2298
|
#### generate_unique_file_name
|
|
@@ -2508,7 +2303,7 @@
|
|
|
2508
2303
|
```typescript
|
|
2509
2304
|
import { generate_unique_file_name } from '@qy_better_lib/core';
|
|
2510
2305
|
|
|
2511
|
-
const uniqueName = generate_unique_file_name('example.
|
|
2306
|
+
const uniqueName = generate_unique_file_name('example.pdf');
|
|
2512
2307
|
console.log(uniqueName);
|
|
2513
2308
|
```
|
|
2514
2309
|
|
|
@@ -2517,188 +2312,202 @@
|
|
|
2517
2312
|
#### tree_flat
|
|
2518
2313
|
- **功能**: 树形数据扁平化处理
|
|
2519
2314
|
- **参数**:
|
|
2520
|
-
- `data: TreeNode[]` - 树形数据数组
|
|
2315
|
+
- `data: TreeNode<T>[]` - 树形数据数组
|
|
2521
2316
|
- `key: string` - key属性,默认"key"
|
|
2522
2317
|
- `children: string` - children属性,默认"children"
|
|
2523
|
-
- **返回类型**: `
|
|
2318
|
+
- **返回类型**: `FlatTreeMap<T>` - 扁平化的树形数据映射
|
|
2524
2319
|
- **示例**:
|
|
2525
2320
|
```typescript
|
|
2526
2321
|
import { tree_flat } from '@qy_better_lib/core';
|
|
2527
2322
|
|
|
2528
|
-
const
|
|
2529
|
-
{
|
|
2530
|
-
key: '1',
|
|
2531
|
-
name: '节点1',
|
|
2532
|
-
children: [
|
|
2533
|
-
{ key: '1-1', name: '节点1-1' }
|
|
2534
|
-
]
|
|
2535
|
-
}
|
|
2323
|
+
const treeData = [
|
|
2324
|
+
{ key: '1', name: '节点1', children: [{ key: '1-1', name: '节点1-1' }] }
|
|
2536
2325
|
];
|
|
2537
|
-
const
|
|
2538
|
-
console.log(
|
|
2326
|
+
const flatMap = tree_flat(treeData);
|
|
2327
|
+
console.log(flatMap);
|
|
2539
2328
|
```
|
|
2540
2329
|
|
|
2541
2330
|
#### build_tree
|
|
2542
2331
|
- **功能**: 从扁平化数据构建树形结构
|
|
2543
2332
|
- **参数**:
|
|
2544
|
-
- `data: TreeNode[]` - 扁平化数据数组
|
|
2333
|
+
- `data: TreeNode<T>[]` - 扁平化数据数组
|
|
2545
2334
|
- `key: string` - key属性,默认"key"
|
|
2546
2335
|
- `parent_key: string` - 父节点key属性,默认"parentId"
|
|
2547
2336
|
- `children: string` - children属性,默认"children"
|
|
2548
|
-
- **返回类型**: `TreeNode[]` -
|
|
2337
|
+
- **返回类型**: `TreeNode<T>[]` - 树形数据数组
|
|
2549
2338
|
- **示例**:
|
|
2550
2339
|
```typescript
|
|
2551
2340
|
import { build_tree } from '@qy_better_lib/core';
|
|
2552
2341
|
|
|
2553
|
-
const
|
|
2554
|
-
{ key: '1', name: '节点1'
|
|
2342
|
+
const flatData = [
|
|
2343
|
+
{ key: '1', name: '节点1' },
|
|
2555
2344
|
{ key: '1-1', name: '节点1-1', parentId: '1' }
|
|
2556
2345
|
];
|
|
2557
|
-
const
|
|
2558
|
-
console.log(
|
|
2346
|
+
const treeData = build_tree(flatData);
|
|
2347
|
+
console.log(treeData);
|
|
2559
2348
|
```
|
|
2560
2349
|
|
|
2561
2350
|
#### traverse_tree_depth_first
|
|
2562
2351
|
- **功能**: 深度优先遍历树形数据
|
|
2563
2352
|
- **参数**:
|
|
2564
|
-
- `tree: TreeNode | TreeNode[]` - 树形数据
|
|
2565
|
-
- `callback: (node: TreeNode
|
|
2353
|
+
- `tree: TreeNode<T> | TreeNode<T>[]` - 树形数据
|
|
2354
|
+
- `callback: (node: TreeNode<T>, depth: number) => boolean | void` - 回调函数,返回false可中断遍历
|
|
2566
2355
|
- `children: string` - children属性,默认"children"
|
|
2567
2356
|
- **返回类型**: `boolean` - 是否提前中断了遍历
|
|
2568
2357
|
- **示例**:
|
|
2569
2358
|
```typescript
|
|
2570
2359
|
import { traverse_tree_depth_first } from '@qy_better_lib/core';
|
|
2571
2360
|
|
|
2572
|
-
|
|
2573
|
-
|
|
2574
|
-
|
|
2361
|
+
const treeData = [
|
|
2362
|
+
{ key: '1', name: '节点1', children: [{ key: '1-1', name: '节点1-1' }] }
|
|
2363
|
+
];
|
|
2364
|
+
traverse_tree_depth_first(treeData, (node, depth) => {
|
|
2365
|
+
console.log(`${' '.repeat(depth)}${node.name}`);
|
|
2575
2366
|
});
|
|
2576
2367
|
```
|
|
2577
2368
|
|
|
2578
2369
|
#### traverse_tree_breadth_first
|
|
2579
2370
|
- **功能**: 广度优先遍历树形数据
|
|
2580
2371
|
- **参数**:
|
|
2581
|
-
- `tree: TreeNode | TreeNode[]` - 树形数据
|
|
2582
|
-
- `callback: (node: TreeNode
|
|
2372
|
+
- `tree: TreeNode<T> | TreeNode<T>[]` - 树形数据
|
|
2373
|
+
- `callback: (node: TreeNode<T>, depth: number) => boolean | void` - 回调函数,返回false可中断遍历
|
|
2583
2374
|
- `children: string` - children属性,默认"children"
|
|
2584
2375
|
- **返回类型**: `boolean` - 是否提前中断了遍历
|
|
2585
2376
|
- **示例**:
|
|
2586
2377
|
```typescript
|
|
2587
2378
|
import { traverse_tree_breadth_first } from '@qy_better_lib/core';
|
|
2588
2379
|
|
|
2589
|
-
|
|
2590
|
-
|
|
2380
|
+
const treeData = [
|
|
2381
|
+
{ key: '1', name: '节点1', children: [{ key: '1-1', name: '节点1-1' }] }
|
|
2382
|
+
];
|
|
2383
|
+
traverse_tree_breadth_first(treeData, (node, depth) => {
|
|
2384
|
+
console.log(`${' '.repeat(depth)}${node.name}`);
|
|
2591
2385
|
});
|
|
2592
2386
|
```
|
|
2593
2387
|
|
|
2594
2388
|
#### find_tree_node
|
|
2595
2389
|
- **功能**: 根据条件查找树形节点
|
|
2596
2390
|
- **参数**:
|
|
2597
|
-
- `tree: TreeNode | TreeNode[]` - 树形数据
|
|
2598
|
-
- `predicate: (node: TreeNode) => boolean` - 条件函数
|
|
2391
|
+
- `tree: TreeNode<T> | TreeNode<T>[]` - 树形数据
|
|
2392
|
+
- `predicate: (node: TreeNode<T>) => boolean` - 条件函数
|
|
2599
2393
|
- `children: string` - children属性,默认"children"
|
|
2600
|
-
- **返回类型**: `TreeNode | null` - 找到的节点或null
|
|
2394
|
+
- **返回类型**: `TreeNode<T> | null` - 找到的节点或null
|
|
2601
2395
|
- **示例**:
|
|
2602
2396
|
```typescript
|
|
2603
2397
|
import { find_tree_node } from '@qy_better_lib/core';
|
|
2604
2398
|
|
|
2605
|
-
const
|
|
2399
|
+
const treeData = [
|
|
2400
|
+
{ key: '1', name: '节点1', children: [{ key: '1-1', name: '节点1-1' }] }
|
|
2401
|
+
];
|
|
2402
|
+
const node = find_tree_node(treeData, node => node.key === '1-1');
|
|
2606
2403
|
console.log(node);
|
|
2607
2404
|
```
|
|
2608
2405
|
|
|
2609
2406
|
#### find_tree_node_by_key
|
|
2610
2407
|
- **功能**: 根据key查找树形节点
|
|
2611
2408
|
- **参数**:
|
|
2612
|
-
- `tree: TreeNode | TreeNode[]` - 树形数据
|
|
2409
|
+
- `tree: TreeNode<T> | TreeNode<T>[]` - 树形数据
|
|
2613
2410
|
- `key_value: any` - key值
|
|
2614
2411
|
- `key: string` - key属性,默认"key"
|
|
2615
2412
|
- `children: string` - children属性,默认"children"
|
|
2616
|
-
- **返回类型**: `TreeNode | null` - 找到的节点或null
|
|
2413
|
+
- **返回类型**: `TreeNode<T> | null` - 找到的节点或null
|
|
2617
2414
|
- **示例**:
|
|
2618
2415
|
```typescript
|
|
2619
2416
|
import { find_tree_node_by_key } from '@qy_better_lib/core';
|
|
2620
2417
|
|
|
2621
|
-
const
|
|
2418
|
+
const treeData = [
|
|
2419
|
+
{ key: '1', name: '节点1', children: [{ key: '1-1', name: '节点1-1' }] }
|
|
2420
|
+
];
|
|
2421
|
+
const node = find_tree_node_by_key(treeData, '1-1');
|
|
2622
2422
|
console.log(node);
|
|
2623
2423
|
```
|
|
2624
2424
|
|
|
2625
2425
|
#### filter_tree
|
|
2626
2426
|
- **功能**: 过滤树形数据
|
|
2627
2427
|
- **参数**:
|
|
2628
|
-
- `tree: TreeNode | TreeNode[]` - 树形数据
|
|
2629
|
-
- `predicate: (node: TreeNode) => boolean` -
|
|
2428
|
+
- `tree: TreeNode<T> | TreeNode<T>[]` - 树形数据
|
|
2429
|
+
- `predicate: (node: TreeNode<T>) => boolean` - 条件函数
|
|
2630
2430
|
- `children: string` - children属性,默认"children"
|
|
2631
|
-
- **返回类型**: `TreeNode[]` - 过滤后的树形数据
|
|
2431
|
+
- **返回类型**: `TreeNode<T>[]` - 过滤后的树形数据
|
|
2632
2432
|
- **示例**:
|
|
2633
2433
|
```typescript
|
|
2634
2434
|
import { filter_tree } from '@qy_better_lib/core';
|
|
2635
2435
|
|
|
2636
|
-
const
|
|
2637
|
-
|
|
2436
|
+
const treeData = [
|
|
2437
|
+
{ key: '1', name: '节点1', value: 10 },
|
|
2438
|
+
{ key: '2', name: '节点2', value: 20 }
|
|
2439
|
+
];
|
|
2440
|
+
const filteredData = filter_tree(treeData, node => node.value > 15);
|
|
2441
|
+
console.log(filteredData);
|
|
2638
2442
|
```
|
|
2639
2443
|
|
|
2640
2444
|
#### transform_tree
|
|
2641
2445
|
- **功能**: 转换树形数据结构
|
|
2642
2446
|
- **参数**:
|
|
2643
|
-
- `tree: TreeNode | TreeNode[]` - 树形数据
|
|
2644
|
-
- `transform: (node: TreeNode) => TreeNode
|
|
2447
|
+
- `tree: TreeNode<T> | TreeNode<T>[]` - 树形数据
|
|
2448
|
+
- `transform: (node: TreeNode<T>) => TreeNode<T>` - 转换函数
|
|
2645
2449
|
- `children: string` - children属性,默认"children"
|
|
2646
|
-
- **返回类型**: `TreeNode[]` - 转换后的树形数据
|
|
2450
|
+
- **返回类型**: `TreeNode<T>[]` - 转换后的树形数据
|
|
2647
2451
|
- **示例**:
|
|
2648
2452
|
```typescript
|
|
2649
2453
|
import { transform_tree } from '@qy_better_lib/core';
|
|
2650
2454
|
|
|
2651
|
-
const
|
|
2455
|
+
const treeData = [
|
|
2456
|
+
{ key: '1', name: '节点1' }
|
|
2457
|
+
];
|
|
2458
|
+
const transformedData = transform_tree(treeData, node => ({
|
|
2652
2459
|
...node,
|
|
2653
|
-
|
|
2654
|
-
value: node.key
|
|
2460
|
+
newProperty: 'value'
|
|
2655
2461
|
}));
|
|
2656
|
-
console.log(
|
|
2462
|
+
console.log(transformedData);
|
|
2657
2463
|
```
|
|
2658
2464
|
|
|
2659
2465
|
#### add_tree_node_path
|
|
2660
2466
|
- **功能**: 为树形节点添加路径信息
|
|
2661
2467
|
- **参数**:
|
|
2662
|
-
- `tree: TreeNode | TreeNode[]` - 树形数据
|
|
2468
|
+
- `tree: TreeNode<T> | TreeNode<T>[]` - 树形数据
|
|
2663
2469
|
- `key: string` - key属性,默认"key"
|
|
2664
2470
|
- `path: string` - path属性,默认"path"
|
|
2665
2471
|
- `children: string` - children属性,默认"children"
|
|
2666
|
-
- **返回类型**: `TreeNode[]` - 添加了路径信息的树形数据
|
|
2472
|
+
- **返回类型**: `TreeNode<T>[]` - 添加了路径信息的树形数据
|
|
2667
2473
|
- **示例**:
|
|
2668
2474
|
```typescript
|
|
2669
2475
|
import { add_tree_node_path } from '@qy_better_lib/core';
|
|
2670
2476
|
|
|
2671
|
-
const
|
|
2672
|
-
|
|
2477
|
+
const treeData = [
|
|
2478
|
+
{ key: '1', name: '节点1', children: [{ key: '1-1', name: '节点1-1' }] }
|
|
2479
|
+
];
|
|
2480
|
+
const dataWithPath = add_tree_node_path(treeData);
|
|
2481
|
+
console.log(dataWithPath);
|
|
2673
2482
|
```
|
|
2674
2483
|
|
|
2675
2484
|
#### get_tree_node_descendants
|
|
2676
2485
|
- **功能**: 获取树形节点的所有后代
|
|
2677
2486
|
- **参数**:
|
|
2678
|
-
- `node: TreeNode
|
|
2487
|
+
- `node: TreeNode<T>` - 树形节点
|
|
2679
2488
|
- `children: string` - children属性,默认"children"
|
|
2680
|
-
- **返回类型**: `TreeNode[]` - 所有后代节点数组
|
|
2489
|
+
- **返回类型**: `TreeNode<T>[]` - 所有后代节点数组
|
|
2681
2490
|
- **示例**:
|
|
2682
2491
|
```typescript
|
|
2683
2492
|
import { get_tree_node_descendants } from '@qy_better_lib/core';
|
|
2684
2493
|
|
|
2685
|
-
const
|
|
2686
|
-
const descendants = get_tree_node_descendants(
|
|
2494
|
+
const node = { key: '1', name: '节点1', children: [{ key: '1-1', name: '节点1-1' }] };
|
|
2495
|
+
const descendants = get_tree_node_descendants(node);
|
|
2687
2496
|
console.log(descendants);
|
|
2688
2497
|
```
|
|
2689
2498
|
|
|
2690
2499
|
#### get_tree_node_ancestors
|
|
2691
2500
|
- **功能**: 获取树形节点的所有祖先
|
|
2692
2501
|
- **参数**:
|
|
2693
|
-
- `node: TreeNode
|
|
2502
|
+
- `node: TreeNode<T>` - 树形节点
|
|
2694
2503
|
- `parent: string` - parent属性,默认"parent"
|
|
2695
|
-
- **返回类型**: `TreeNode[]` - 所有祖先节点数组
|
|
2504
|
+
- **返回类型**: `TreeNode<T>[]` - 所有祖先节点数组
|
|
2696
2505
|
- **示例**:
|
|
2697
2506
|
```typescript
|
|
2698
2507
|
import { get_tree_node_ancestors } from '@qy_better_lib/core';
|
|
2699
2508
|
|
|
2700
|
-
|
|
2701
|
-
const childNode =
|
|
2509
|
+
const parentNode = { key: '1', name: '节点1' };
|
|
2510
|
+
const childNode = { key: '1-1', name: '节点1-1', parent: parentNode };
|
|
2702
2511
|
const ancestors = get_tree_node_ancestors(childNode);
|
|
2703
2512
|
console.log(ancestors);
|
|
2704
2513
|
```
|
|
@@ -2706,253 +2515,167 @@
|
|
|
2706
2515
|
#### get_tree_depth
|
|
2707
2516
|
- **功能**: 计算树形数据的深度
|
|
2708
2517
|
- **参数**:
|
|
2709
|
-
- `tree: TreeNode | TreeNode[]` - 树形数据
|
|
2518
|
+
- `tree: TreeNode<T> | TreeNode<T>[]` - 树形数据
|
|
2710
2519
|
- `children: string` - children属性,默认"children"
|
|
2711
2520
|
- **返回类型**: `number` - 树形数据的深度
|
|
2712
2521
|
- **示例**:
|
|
2713
2522
|
```typescript
|
|
2714
2523
|
import { get_tree_depth } from '@qy_better_lib/core';
|
|
2715
2524
|
|
|
2716
|
-
const
|
|
2717
|
-
|
|
2525
|
+
const treeData = [
|
|
2526
|
+
{ key: '1', name: '节点1', children: [{ key: '1-1', name: '节点1-1' }] }
|
|
2527
|
+
];
|
|
2528
|
+
const depth = get_tree_depth(treeData);
|
|
2529
|
+
console.log(depth); // 2
|
|
2718
2530
|
```
|
|
2719
2531
|
|
|
2720
2532
|
#### flatten_tree_to_array
|
|
2721
2533
|
- **功能**: 扁平化树形数据为数组
|
|
2722
2534
|
- **参数**:
|
|
2723
|
-
- `tree: TreeNode | TreeNode[]` - 树形数据
|
|
2535
|
+
- `tree: TreeNode<T> | TreeNode<T>[]` - 树形数据
|
|
2724
2536
|
- `children: string` - children属性,默认"children"
|
|
2725
|
-
- **返回类型**: `TreeNode[]` - 扁平化的节点数组
|
|
2537
|
+
- **返回类型**: `TreeNode<T>[]` - 扁平化的节点数组
|
|
2726
2538
|
- **示例**:
|
|
2727
2539
|
```typescript
|
|
2728
2540
|
import { flatten_tree_to_array } from '@qy_better_lib/core';
|
|
2729
2541
|
|
|
2730
|
-
const
|
|
2731
|
-
|
|
2542
|
+
const treeData = [
|
|
2543
|
+
{ key: '1', name: '节点1', children: [{ key: '1-1', name: '节点1-1' }] }
|
|
2544
|
+
];
|
|
2545
|
+
const flatArray = flatten_tree_to_array(treeData);
|
|
2546
|
+
console.log(flatArray);
|
|
2732
2547
|
```
|
|
2733
2548
|
|
|
2734
2549
|
#### add_tree_node
|
|
2735
2550
|
- **功能**: 向树形结构添加节点
|
|
2736
2551
|
- **参数**:
|
|
2737
|
-
- `tree: TreeNode | TreeNode[]` - 树形数据
|
|
2552
|
+
- `tree: TreeNode<T> | TreeNode<T>[]` - 树形数据
|
|
2738
2553
|
- `parent_key: any` - 父节点key值
|
|
2739
|
-
- `new_node: TreeNode
|
|
2554
|
+
- `new_node: TreeNode<T>` - 新节点
|
|
2740
2555
|
- `key: string` - key属性,默认"key"
|
|
2741
2556
|
- `children: string` - children属性,默认"children"
|
|
2742
|
-
- **返回类型**: `TreeNode[]` - 更新后的树形数据
|
|
2557
|
+
- **返回类型**: `TreeNode<T>[]` - 更新后的树形数据
|
|
2743
2558
|
- **示例**:
|
|
2744
2559
|
```typescript
|
|
2745
2560
|
import { add_tree_node } from '@qy_better_lib/core';
|
|
2746
2561
|
|
|
2747
|
-
const
|
|
2748
|
-
|
|
2749
|
-
|
|
2562
|
+
const treeData = [
|
|
2563
|
+
{ key: '1', name: '节点1' }
|
|
2564
|
+
];
|
|
2565
|
+
const newTreeData = add_tree_node(treeData, '1', { key: '1-1', name: '节点1-1' });
|
|
2566
|
+
console.log(newTreeData);
|
|
2750
2567
|
```
|
|
2751
2568
|
|
|
2752
2569
|
#### remove_tree_node
|
|
2753
2570
|
- **功能**: 从树形结构移除节点
|
|
2754
2571
|
- **参数**:
|
|
2755
|
-
- `tree: TreeNode | TreeNode[]` - 树形数据
|
|
2572
|
+
- `tree: TreeNode<T> | TreeNode<T>[]` - 树形数据
|
|
2756
2573
|
- `node_key: any` - 要移除的节点key值
|
|
2757
2574
|
- `key: string` - key属性,默认"key"
|
|
2758
2575
|
- `children: string` - children属性,默认"children"
|
|
2759
|
-
- **返回类型**: `TreeNode[]` - 更新后的树形数据
|
|
2576
|
+
- **返回类型**: `TreeNode<T>[]` - 更新后的树形数据
|
|
2760
2577
|
- **示例**:
|
|
2761
2578
|
```typescript
|
|
2762
2579
|
import { remove_tree_node } from '@qy_better_lib/core';
|
|
2763
2580
|
|
|
2764
|
-
const
|
|
2765
|
-
|
|
2581
|
+
const treeData = [
|
|
2582
|
+
{ key: '1', name: '节点1', children: [{ key: '1-1', name: '节点1-1' }] }
|
|
2583
|
+
];
|
|
2584
|
+
const newTreeData = remove_tree_node(treeData, '1-1');
|
|
2585
|
+
console.log(newTreeData);
|
|
2766
2586
|
```
|
|
2767
2587
|
|
|
2768
2588
|
#### update_tree_node
|
|
2769
2589
|
- **功能**: 更新树形结构中的节点
|
|
2770
2590
|
- **参数**:
|
|
2771
|
-
- `tree: TreeNode | TreeNode[]` - 树形数据
|
|
2591
|
+
- `tree: TreeNode<T> | TreeNode<T>[]` - 树形数据
|
|
2772
2592
|
- `node_key: any` - 要更新的节点key值
|
|
2773
|
-
- `updates: Partial<TreeNode
|
|
2593
|
+
- `updates: Partial<TreeNode<T>>` - 更新内容
|
|
2774
2594
|
- `key: string` - key属性,默认"key"
|
|
2775
2595
|
- `children: string` - children属性,默认"children"
|
|
2776
|
-
- **返回类型**: `TreeNode[]` - 更新后的树形数据
|
|
2596
|
+
- **返回类型**: `TreeNode<T>[]` - 更新后的树形数据
|
|
2777
2597
|
- **示例**:
|
|
2778
2598
|
```typescript
|
|
2779
2599
|
import { update_tree_node } from '@qy_better_lib/core';
|
|
2780
2600
|
|
|
2781
|
-
const
|
|
2782
|
-
|
|
2601
|
+
const treeData = [
|
|
2602
|
+
{ key: '1', name: '节点1' }
|
|
2603
|
+
];
|
|
2604
|
+
const newTreeData = update_tree_node(treeData, '1', { name: '更新后的节点1' });
|
|
2605
|
+
console.log(newTreeData);
|
|
2783
2606
|
```
|
|
2784
2607
|
|
|
2785
2608
|
#### sort_tree
|
|
2786
2609
|
- **功能**: 对树形结构进行排序
|
|
2787
2610
|
- **参数**:
|
|
2788
|
-
- `tree: TreeNode | TreeNode[]` - 树形数据
|
|
2789
|
-
- `compare_fn: ((a: TreeNode
|
|
2611
|
+
- `tree: TreeNode<T> | TreeNode<T>[]` - 树形数据
|
|
2612
|
+
- `compare_fn: ((a: TreeNode<T>, b: TreeNode<T>) => number) | string` - 比较函数或属性名
|
|
2790
2613
|
- `recursive: boolean` - 是否递归排序所有层级,默认true
|
|
2791
2614
|
- `children: string` - children属性,默认"children"
|
|
2792
|
-
- **返回类型**: `TreeNode[]` - 排序后的树形数据
|
|
2615
|
+
- **返回类型**: `TreeNode<T>[]` - 排序后的树形数据
|
|
2793
2616
|
- **示例**:
|
|
2794
2617
|
```typescript
|
|
2795
2618
|
import { sort_tree } from '@qy_better_lib/core';
|
|
2796
2619
|
|
|
2797
|
-
|
|
2798
|
-
|
|
2799
|
-
|
|
2800
|
-
|
|
2801
|
-
const
|
|
2802
|
-
console.log(
|
|
2620
|
+
const treeData = [
|
|
2621
|
+
{ key: '2', name: '节点2' },
|
|
2622
|
+
{ key: '1', name: '节点1' }
|
|
2623
|
+
];
|
|
2624
|
+
const sortedData = sort_tree(treeData, 'key');
|
|
2625
|
+
console.log(sortedData);
|
|
2803
2626
|
```
|
|
2804
2627
|
|
|
2805
2628
|
#### clone_tree
|
|
2806
2629
|
- **功能**: 克隆树形结构
|
|
2807
2630
|
- **参数**:
|
|
2808
|
-
- `tree: TreeNode | TreeNode[]` - 树形数据
|
|
2631
|
+
- `tree: TreeNode<T> | TreeNode<T>[]` - 树形数据
|
|
2809
2632
|
- `children: string` - children属性,默认"children"
|
|
2810
|
-
- **返回类型**: `TreeNode[]` - 克隆后的树形数据
|
|
2633
|
+
- **返回类型**: `TreeNode<T>[]` - 克隆后的树形数据
|
|
2811
2634
|
- **示例**:
|
|
2812
2635
|
```typescript
|
|
2813
2636
|
import { clone_tree } from '@qy_better_lib/core';
|
|
2814
2637
|
|
|
2815
|
-
const
|
|
2816
|
-
|
|
2638
|
+
const treeData = [
|
|
2639
|
+
{ key: '1', name: '节点1' }
|
|
2640
|
+
];
|
|
2641
|
+
const clonedData = clone_tree(treeData);
|
|
2642
|
+
console.log(clonedData);
|
|
2817
2643
|
```
|
|
2818
2644
|
|
|
2819
2645
|
#### validate_tree
|
|
2820
2646
|
- **功能**: 验证树形结构的有效性
|
|
2821
2647
|
- **参数**:
|
|
2822
|
-
- `tree: TreeNode | TreeNode[]` - 树形数据
|
|
2648
|
+
- `tree: TreeNode<T> | TreeNode<T>[]` - 树形数据
|
|
2823
2649
|
- `key: string` - key属性,默认"key"
|
|
2824
2650
|
- `children: string` - children属性,默认"children"
|
|
2825
|
-
- **返回类型**: `{ valid: boolean; errors: string[] }` -
|
|
2651
|
+
- **返回类型**: `{ valid: boolean; errors: string[] }` - 验证结果
|
|
2826
2652
|
- **示例**:
|
|
2827
2653
|
```typescript
|
|
2828
2654
|
import { validate_tree } from '@qy_better_lib/core';
|
|
2829
2655
|
|
|
2830
|
-
const
|
|
2831
|
-
|
|
2832
|
-
|
|
2656
|
+
const treeData = [
|
|
2657
|
+
{ key: '1', name: '节点1' }
|
|
2658
|
+
];
|
|
2659
|
+
const result = validate_tree(treeData);
|
|
2660
|
+
console.log(result);
|
|
2833
2661
|
```
|
|
2834
2662
|
|
|
2835
2663
|
#### search_tree
|
|
2836
2664
|
- **功能**: 在树形结构中搜索节点
|
|
2837
2665
|
- **参数**:
|
|
2838
|
-
- `tree: TreeNode | TreeNode[]` - 树形数据
|
|
2839
|
-
- `predicate: ((node: TreeNode) => boolean) | Record<string, any>` - 搜索条件函数或属性值对
|
|
2666
|
+
- `tree: TreeNode<T> | TreeNode<T>[]` - 树形数据
|
|
2667
|
+
- `predicate: ((node: TreeNode<T>) => boolean) | Record<string, any>` - 搜索条件函数或属性值对
|
|
2840
2668
|
- `children: string` - children属性,默认"children"
|
|
2841
|
-
- **返回类型**: `TreeNode[]` - 所有匹配的节点数组
|
|
2669
|
+
- **返回类型**: `TreeNode<T>[]` - 所有匹配的节点数组
|
|
2842
2670
|
- **示例**:
|
|
2843
2671
|
```typescript
|
|
2844
2672
|
import { search_tree } from '@qy_better_lib/core';
|
|
2845
2673
|
|
|
2846
|
-
|
|
2847
|
-
|
|
2848
|
-
|
|
2849
|
-
|
|
2850
|
-
const
|
|
2674
|
+
const treeData = [
|
|
2675
|
+
{ key: '1', name: '节点1', value: 10 },
|
|
2676
|
+
{ key: '2', name: '节点2', value: 20 }
|
|
2677
|
+
];
|
|
2678
|
+
const results = search_tree(treeData, { value: 10 });
|
|
2851
2679
|
console.log(results);
|
|
2852
2680
|
```
|
|
2853
|
-
|
|
2854
|
-
## 指令功能 (directives)
|
|
2855
|
-
|
|
2856
|
-
### 1. 点击外部区域指令 (click_outside.ts)
|
|
2857
|
-
|
|
2858
|
-
#### 功能描述
|
|
2859
|
-
当点击元素外部区域时触发绑定的回调函数,可用于实现下拉菜单、弹窗等组件的关闭功能。
|
|
2860
|
-
|
|
2861
|
-
#### 指令参数
|
|
2862
|
-
- **value**: `Function` - 点击外部区域时触发的回调函数
|
|
2863
|
-
- **arg**: `HTMLElement | HTMLElement[]` - 可选,需要排除的元素或元素数组
|
|
2864
|
-
|
|
2865
|
-
#### 使用示例
|
|
2866
|
-
|
|
2867
|
-
**基本用法**
|
|
2868
|
-
```vue
|
|
2869
|
-
<template>
|
|
2870
|
-
<div v-click-outside="handleClickOutside">
|
|
2871
|
-
点击外部区域会触发回调
|
|
2872
|
-
</div>
|
|
2873
|
-
</template>
|
|
2874
|
-
|
|
2875
|
-
<script setup lang="ts">
|
|
2876
|
-
import { ref } from 'vue';
|
|
2877
|
-
|
|
2878
|
-
const handleClickOutside = () => {
|
|
2879
|
-
console.log('点击了外部区域');
|
|
2880
|
-
};
|
|
2881
|
-
</script>
|
|
2882
|
-
```
|
|
2883
|
-
|
|
2884
|
-
**带排除元素**
|
|
2885
|
-
```vue
|
|
2886
|
-
<template>
|
|
2887
|
-
<div>
|
|
2888
|
-
<div ref="excludeElement">
|
|
2889
|
-
点击此区域不会触发外部点击回调
|
|
2890
|
-
</div>
|
|
2891
|
-
<div v-click-outside:[excludeElement]="handleClickOutside">
|
|
2892
|
-
点击外部区域会触发回调,但点击上方排除元素不会
|
|
2893
|
-
</div>
|
|
2894
|
-
</div>
|
|
2895
|
-
</template>
|
|
2896
|
-
|
|
2897
|
-
<script setup lang="ts">
|
|
2898
|
-
import { ref } from 'vue';
|
|
2899
|
-
|
|
2900
|
-
const excludeElement = ref<HTMLElement | null>(null);
|
|
2901
|
-
|
|
2902
|
-
const handleClickOutside = () => {
|
|
2903
|
-
console.log('点击了外部区域');
|
|
2904
|
-
};
|
|
2905
|
-
</script>
|
|
2906
|
-
```
|
|
2907
|
-
|
|
2908
|
-
**带多个排除元素**
|
|
2909
|
-
```vue
|
|
2910
|
-
<template>
|
|
2911
|
-
<div>
|
|
2912
|
-
<div ref="excludeElement1">
|
|
2913
|
-
排除元素 1
|
|
2914
|
-
</div>
|
|
2915
|
-
<div ref="excludeElement2">
|
|
2916
|
-
排除元素 2
|
|
2917
|
-
</div>
|
|
2918
|
-
<div v-click-outside:[excludeElements]="handleClickOutside">
|
|
2919
|
-
点击外部区域会触发回调,但点击排除元素不会
|
|
2920
|
-
</div>
|
|
2921
|
-
</div>
|
|
2922
|
-
</template>
|
|
2923
|
-
|
|
2924
|
-
<script setup lang="ts">
|
|
2925
|
-
import { ref, computed } from 'vue';
|
|
2926
|
-
|
|
2927
|
-
const excludeElement1 = ref<HTMLElement | null>(null);
|
|
2928
|
-
const excludeElement2 = ref<HTMLElement | null>(null);
|
|
2929
|
-
|
|
2930
|
-
const excludeElements = computed(() => [
|
|
2931
|
-
excludeElement1.value,
|
|
2932
|
-
excludeElement2.value
|
|
2933
|
-
]);
|
|
2934
|
-
|
|
2935
|
-
const handleClickOutside = () => {
|
|
2936
|
-
console.log('点击了外部区域');
|
|
2937
|
-
};
|
|
2938
|
-
</script>
|
|
2939
|
-
```
|
|
2940
|
-
|
|
2941
|
-
#### 注册指令
|
|
2942
|
-
|
|
2943
|
-
在 Vue 应用中注册指令:
|
|
2944
|
-
|
|
2945
|
-
```typescript
|
|
2946
|
-
import { createApp } from 'vue';
|
|
2947
|
-
import App from './App.vue';
|
|
2948
|
-
import { setupDirectives } from '@qy_better_lib/core';
|
|
2949
|
-
|
|
2950
|
-
const app = createApp(App);
|
|
2951
|
-
|
|
2952
|
-
// 注册所有指令
|
|
2953
|
-
setupDirectives(app);
|
|
2954
|
-
|
|
2955
|
-
app.mount('#app');
|
|
2956
|
-
```
|
|
2957
|
-
|
|
2958
|
-
|
|
2681
|
+
|