@next-bricks/presentational-bricks 1.339.0 → 1.339.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.
Files changed (19) hide show
  1. package/deploy/contract.yaml +110 -110
  2. package/dist/bricks.json +24 -24
  3. package/dist/{index.e0f6d174.js → index.09224616.js} +2 -2
  4. package/dist/index.09224616.js.map +1 -0
  5. package/dist/stories.json +27 -27
  6. package/docs/brick-result.md +197 -0
  7. package/docs/brick-result.react.md +177 -0
  8. package/docs/brick-user.md +135 -0
  9. package/docs/brick-user.react.md +139 -0
  10. package/docs/brick-value-mapping.md +240 -0
  11. package/docs/brick-value-mapping.react.md +181 -0
  12. package/docs/cost-time.md +58 -0
  13. package/docs/cost-time.react.md +60 -0
  14. package/docs/datetime-selector.md +146 -0
  15. package/docs/datetime-selector.react.md +150 -0
  16. package/docs/general-label.md +115 -0
  17. package/docs/general-label.react.md +131 -0
  18. package/package.json +5 -4
  19. package/dist/index.e0f6d174.js.map +0 -1
package/docs/cost-time.md ADDED
@@ -0,0 +1,58 @@
1
+ ---
2
+ tagName: presentational-bricks.cost-time
3
+ displayName: WrappedPresentationalBricksCostTime
4
+ description: 耗时展示构件，将毫秒级时间自动转换为人类可读的时间文本（如"15秒"、"1天"），支持直接传入耗时或通过起止时间自动计算
5
+ category:
6
+ source: "@next-bricks/presentational-bricks"
7
+ ---
8
+
9
+ # presentational-bricks.cost-time
10
+
11
+ > 耗时展示构件，将毫秒级时间自动转换为人类可读的时间文本（如"15 秒"、"1 天"），支持直接传入耗时或通过起止时间自动计算
12
+
13
+ ## Props
14
+
15
+ | 属性 | 类型 | 必填 | 默认值 | 说明 |
16
+ | ---------- | ------------------------------------------------------------------------ | ---- | ------ | ---------------------------------------------------------------------------- |
17
+ | cost | `number` | - | - | 消耗时间（毫秒级） |
18
+ | startTime | `string \| number` | - | - | 起始时间，与 endTime 配合使用，当未传入 cost 时自动计算耗时 |
19
+ | endTime | `string \| number` | - | - | 结束时间，与 startTime 配合使用，当未传入 cost 时自动计算耗时 |
20
+ | unitStyle | `React.CSSProperties` | - | - | 时间单位文本的自定义样式，设置后将使用自定义渲染逻辑而非默认的 costTime 函数 |
21
+ | dataSource | `any` | - | - | [已废弃]数据源 |
22
+ | fields | `{ cost?: string; startTime?: string; endTime?: string; }` | - | - | [已废弃]字段映射, 跟 dataSource 一起使用来获得运行时对应字段 |
23
+
24
+ ## Examples
25
+
26
+ ### Basic
27
+
28
+ 直接传入毫秒级耗时，自动转换为可读文本
29
+
30
+ ```yaml
31
+ brick: presentational-bricks.cost-time
32
+ properties:
33
+ cost: 123456
34
+ ```
35
+
36
+ ### 通过起止时间计算耗时
37
+
38
+ 传入起始时间和结束时间，构件自动计算并展示耗时
39
+
40
+ ```yaml
41
+ brick: presentational-bricks.cost-time
42
+ properties:
43
+ startTime: 1593603641000
44
+ endTime: 1593603798000
45
+ ```
46
+
47
+ ### Styling
48
+
49
+ 自定义时间单位文本的样式
50
+
51
+ ```yaml
52
+ brick: presentational-bricks.cost-time
53
+ properties:
54
+ cost: 7265000
55
+ unitStyle:
56
+ color: "#999"
57
+ fontSize: "12px"
58
+ ```
package/docs/cost-time.react.md ADDED
@@ -0,0 +1,60 @@
1
+ ---
2
+ tagName: presentational-bricks.cost-time
3
+ displayName: WrappedPresentationalBricksCostTime
4
+ description: 耗时展示构件，将毫秒级时间自动转换为人类可读的时间文本（如"15秒"、"1天"），支持直接传入耗时或通过起止时间自动计算
5
+ category:
6
+ source: "@next-bricks/presentational-bricks"
7
+ ---
8
+
9
+ # WrappedPresentationalBricksCostTime
10
+
11
+ > 耗时展示构件，将毫秒级时间自动转换为人类可读的时间文本（如"15 秒"、"1 天"），支持直接传入耗时或通过起止时间自动计算
12
+
13
+ ## 导入
14
+
15
+ ```tsx
16
+ import { WrappedPresentationalBricksCostTime } from "@easyops/wrapped-components";
17
+ ```
18
+
19
+ ## Props
20
+
21
+ | 属性 | 类型 | 必填 | 默认值 | 说明 |
22
+ | ---------- | ------------------------------------------------------------------------ | ---- | ------ | ---------------------------------------------------------------------------- |
23
+ | cost | `number` | - | - | 消耗时间（毫秒级） |
24
+ | startTime | `string \| number` | - | - | 起始时间，与 endTime 配合使用，当未传入 cost 时自动计算耗时 |
25
+ | endTime | `string \| number` | - | - | 结束时间，与 startTime 配合使用，当未传入 cost 时自动计算耗时 |
26
+ | unitStyle | `React.CSSProperties` | - | - | 时间单位文本的自定义样式，设置后将使用自定义渲染逻辑而非默认的 costTime 函数 |
27
+ | dataSource | `any` | - | - | [已废弃]数据源 |
28
+ | fields | `{ cost?: string; startTime?: string; endTime?: string; }` | - | - | [已废弃]字段映射, 跟 dataSource 一起使用来获得运行时对应字段 |
29
+
30
+ ## Examples
31
+
32
+ ### Basic
33
+
34
+ 直接传入毫秒级耗时，自动转换为可读文本
35
+
36
+ ```tsx
37
+ <WrappedPresentationalBricksCostTime cost={123456} />
38
+ ```
39
+
40
+ ### 通过起止时间计算耗时
41
+
42
+ 传入起始时间和结束时间，构件自动计算并展示耗时
43
+
44
+ ```tsx
45
+ <WrappedPresentationalBricksCostTime
46
+ startTime={1593603641000}
47
+ endTime={1593603798000}
48
+ />
49
+ ```
50
+
51
+ ### Styling
52
+
53
+ 自定义时间单位文本的样式
54
+
55
+ ```tsx
56
+ <WrappedPresentationalBricksCostTime
57
+ cost={7265000}
58
+ unitStyle={{ color: "#999", fontSize: "12px" }}
59
+ />
60
+ ```
package/docs/datetime-selector.md ADDED
@@ -0,0 +1,146 @@
1
+ ---
2
+ tagName: presentational-bricks.datetime-selector
3
+ displayName: WrappedPresentationalBricksDatetimeSelector
4
+ description: 常用于时间的过滤，支持快速选择时间区间和自定义，例如图表或表格的时间过滤
5
+ category:
6
+ source: "@next-bricks/presentational-bricks"
7
+ ---
8
+
9
+ # presentational-bricks.datetime-selector
10
+
11
+ > 常用于时间的过滤，支持快速选择时间区间和自定义，例如图表或表格的时间过滤
12
+
13
+ ## Props
14
+
15
+ | 属性 | 类型 | 必填 | 默认值 | 说明 |
16
+ | --------------------- | ------------------ | ---- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
17
+ | from | `string` | 是 | - | 默认起始时间，支持任意时间范围,相关规则请按下列规则书写（"now-1h", "now-1d", "now/d", "now-7d", "now-30d") [正则表达式](https://github.com/easyops-cn/next-libs/blob/207fe7ee3ac010ab860c23cd062216c8ca612f0c/libs/datetime-components/src/processor/parseDatetimeRange.ts#L18) 注意当通过 \${query.from=now/d} 赋默认值给 form 属性时，由于 [placeholder 占位符语法](https://admin.easyops.local/next-docs/docs/brick-next/evaluate-placeholders) 不支持 `/` 的特殊字符解析，所以该值需要用字符串的形式来书写（如 demo 所示）。 |
18
+ | to | `string` | - | - | 默认结束时间, 相关规则请参照 from 属性 |
19
+ | shouldUpdateUrlParams | `any` | - | `true` | 是否更新 url 参数并刷新页面 |
20
+ | type | `any` | - | `"default" as RangeType` | 时间选择器支持两种类型，一种是默认的，固定显示常用的几种时间范围，一种是自定义的，可根据需求定制特定时间范围 |
21
+ | customTimeRange | `RangeText[]` | - | - | 当 type 为 custom 时，配置定制的时间范围，目前暂支持如下时间点，当 type 为 default 时，该配置项无效 |
22
+ | placement | `TooltipPlacement` | - | - | 弹出位置 |
23
+ | resolution | `ResolutionProps` | - | `"ms"` | 指定时间戳的单位，目前支持秒和毫秒，默认为毫秒，切换为秒时，url 和事件传出的时间戳都会调整成以秒为单位 |
24
+ | size | `ButtonSize` | - | - | 打开选择器的按钮的大小 |
25
+ | selectNearDays | `number` | - | - | 限制选择近 n 天 |
26
+ | format | `string` | - | - | 自定义日期显示格式，例如 "YYYY-MM-DD HH:mm:ss" |
27
+ | rangeDays | `number` | - | - | 限制选择范围天数 |
28
+
29
+ ## Events
30
+
31
+ | 事件 | detail | 说明 |
32
+ | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
33
+ | datetime.selected | `\| { type: "dateRange"; value: "now/d" } \| { type: "specifiedDate"; value: { from: number; to: number } }` — { type: "dateRange"; value: "now/d" } \| { type: "specifiedDate"; value: { from: number; to: number }} | [已废弃]选择时间 |
34
+ | datetime.selected.v2 | `{ from: number; to: number }` — { from: number; to: number } | 选择当前时间戳，与 `datetime.selected` 不同的是会把时间统一转换成时间戳的形式输出 |
35
+ | datetime.selected.v3 | `{ from: number; to: number } \| { from: string }` — { from: number; to: number } \| { from: string } | 选择当前时间，与 `datetime.selected` 不同的是虽然还是区分时间戳和时间段两种类型，但是调整了输出字段格式, 这样更利于某些监控场景的使用和编排 |
36
+
37
+ ## Examples
38
+
39
+ ### Basic - 默认时间范围选项
40
+
41
+ 使用默认的时间范围选项，from 设置初始起始时间，选择后通过 datetime.selected.v2 事件输出时间戳。
42
+
43
+ ```yaml preview
44
+ - brick: presentational-bricks.datetime-selector
45
+ properties:
46
+ from: "<% QUERY.from || 'now/d' %>"
47
+ to: "<% QUERY.to %>"
48
+ events:
49
+ datetime.selected.v2:
50
+ action: console.log
51
+ datetime.selected.v3:
52
+ action: console.log
53
+ ```
54
+
55
+ ### Basic - 自定义时间范围选项
56
+
57
+ 设置 type 为 custom 并通过 customTimeRange 配置自定义时间范围列表，同时关闭 URL 参数更新。
58
+
59
+ ```yaml preview
60
+ - brick: presentational-bricks.datetime-selector
61
+ properties:
62
+ shouldUpdateUrlParams: false
63
+ from: "<% QUERY.from || 'now/d' %>"
64
+ to: "<% QUERY.to %>"
65
+ type: custom
66
+ customTimeRange:
67
+ - range: "now-1h"
68
+ text: "近1小时"
69
+ - range: "now-1d"
70
+ text: "近24小时"
71
+ - range: "now/d"
72
+ text: "今天"
73
+ - range: "now-7d"
74
+ text: "近7天"
75
+ - range: "now-30d"
76
+ text: "近30天"
77
+ - range: "now-1y"
78
+ text: "近一年"
79
+ ```
80
+
81
+ ### Styling - 设置按钮大小
82
+
83
+ 通过 size 属性控制时间选择器触发按钮的大小。
84
+
85
+ ```yaml preview
86
+ - brick: presentational-bricks.datetime-selector
87
+ properties:
88
+ from: "now-7d"
89
+ size: small
90
+ shouldUpdateUrlParams: false
91
+ ```
92
+
93
+ ### Styling - 设置弹出位置
94
+
95
+ 通过 placement 属性控制时间选择器弹出面板的位置。
96
+
97
+ ```yaml preview
98
+ - brick: presentational-bricks.datetime-selector
99
+ properties:
100
+ from: "now-7d"
101
+ placement: topLeft
102
+ shouldUpdateUrlParams: false
103
+ ```
104
+
105
+ ### Advanced - 指定时间戳单位为秒
106
+
107
+ 设置 resolution 为 "s"，事件输出的时间戳和 URL 参数中的时间戳都将以秒为单位。
108
+
109
+ ```yaml preview
110
+ - brick: presentational-bricks.datetime-selector
111
+ properties:
112
+ from: "now-1d"
113
+ resolution: "s"
114
+ shouldUpdateUrlParams: false
115
+ events:
116
+ datetime.selected.v2:
117
+ action: console.log
118
+ ```
119
+
120
+ ### Advanced - 自定义日期显示格式
121
+
122
+ 通过 format 属性自定义日期的显示格式。
123
+
124
+ ```yaml preview
125
+ - brick: presentational-bricks.datetime-selector
126
+ properties:
127
+ from: "now-7d"
128
+ format: "YYYY-MM-DD HH:mm:ss"
129
+ shouldUpdateUrlParams: false
130
+ ```
131
+
132
+ ### Advanced - 限制选择范围
133
+
134
+ 通过 selectNearDays 限制只能选择近 N 天，通过 rangeDays 限制选择的时间跨度天数。
135
+
136
+ ```yaml preview
137
+ - brick: presentational-bricks.datetime-selector
138
+ properties:
139
+ from: "now-7d"
140
+ selectNearDays: 30
141
+ rangeDays: 7
142
+ shouldUpdateUrlParams: false
143
+ events:
144
+ datetime.selected.v3:
145
+ action: console.log
146
+ ```
package/docs/datetime-selector.react.md ADDED
@@ -0,0 +1,150 @@
1
+ ---
2
+ tagName: presentational-bricks.datetime-selector
3
+ displayName: WrappedPresentationalBricksDatetimeSelector
4
+ description: 常用于时间的过滤，支持快速选择时间区间和自定义，例如图表或表格的时间过滤
5
+ category:
6
+ source: "@next-bricks/presentational-bricks"
7
+ ---
8
+
9
+ # WrappedPresentationalBricksDatetimeSelector
10
+
11
+ > 常用于时间的过滤，支持快速选择时间区间和自定义，例如图表或表格的时间过滤
12
+
13
+ ## 导入
14
+
15
+ ```tsx
16
+ import { WrappedPresentationalBricksDatetimeSelector } from "@easyops/wrapped-components";
17
+ ```
18
+
19
+ ## Props
20
+
21
+ | 属性 | 类型 | 必填 | 默认值 | 说明 |
22
+ | --------------------- | ------------------ | ---- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
23
+ | from | `string` | 是 | - | 默认起始时间，支持任意时间范围,相关规则请按下列规则书写（"now-1h", "now-1d", "now/d", "now-7d", "now-30d") [正则表达式](https://github.com/easyops-cn/next-libs/blob/207fe7ee3ac010ab860c23cd062216c8ca612f0c/libs/datetime-components/src/processor/parseDatetimeRange.ts#L18) 注意当通过 \${query.from=now/d} 赋默认值给 form 属性时，由于 [placeholder 占位符语法](https://admin.easyops.local/next-docs/docs/brick-next/evaluate-placeholders) 不支持 `/` 的特殊字符解析，所以该值需要用字符串的形式来书写（如 demo 所示）。 |
24
+ | to | `string` | - | - | 默认结束时间, 相关规则请参照 from 属性 |
25
+ | shouldUpdateUrlParams | `any` | - | `true` | 是否更新 url 参数并刷新页面 |
26
+ | type | `any` | - | `"default" as RangeType` | 时间选择器支持两种类型，一种是默认的，固定显示常用的几种时间范围，一种是自定义的，可根据需求定制特定时间范围 |
27
+ | customTimeRange | `RangeText[]` | - | - | 当 type 为 custom 时，配置定制的时间范围，目前暂支持如下时间点，当 type 为 default 时，该配置项无效 |
28
+ | placement | `TooltipPlacement` | - | - | 弹出位置 |
29
+ | resolution | `ResolutionProps` | - | `"ms"` | 指定时间戳的单位，目前支持秒和毫秒，默认为毫秒，切换为秒时，url 和事件传出的时间戳都会调整成以秒为单位 |
30
+ | size | `ButtonSize` | - | - | 打开选择器的按钮的大小 |
31
+ | selectNearDays | `number` | - | - | 限制选择近 n 天 |
32
+ | format | `string` | - | - | 自定义日期显示格式，例如 "YYYY-MM-DD HH:mm:ss" |
33
+ | rangeDays | `number` | - | - | 限制选择范围天数 |
34
+
35
+ ## Events
36
+
37
+ | 事件 | detail | 说明 |
38
+ | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
39
+ | onDatetimeSelected | `\| { type: "dateRange"; value: "now/d" } \| { type: "specifiedDate"; value: { from: number; to: number } }` — { type: "dateRange"; value: "now/d" } \| { type: "specifiedDate"; value: { from: number; to: number }} | [已废弃]选择时间 |
40
+ | onDatetimeSelectedV2 | `{ from: number; to: number }` — { from: number; to: number } | 选择当前时间戳，与 `onDatetimeSelected` 不同的是会把时间统一转换成时间戳的形式输出 |
41
+ | onDatetimeSelectedV3 | `{ from: number; to: number } \| { from: string }` — { from: number; to: number } \| { from: string } | 选择当前时间，与 `onDatetimeSelected` 不同的是虽然还是区分时间戳和时间段两种类型，但是调整了输出字段格式, 这样更利于某些监控场景的使用和编排 |
42
+
43
+ ## Examples
44
+
45
+ ### Basic - 默认时间范围选项
46
+
47
+ 使用默认的时间范围选项，from 设置初始起始时间，选择后通过事件输出时间戳。
48
+
49
+ ```tsx
50
+ <WrappedPresentationalBricksDatetimeSelector
51
+ from="now/d"
52
+ onDatetimeSelectedV2={(e: CustomEvent<{ from: number; to: number }>) => {
53
+ console.log(e.detail);
54
+ }}
55
+ onDatetimeSelectedV3={(
56
+ e: CustomEvent<{ from: number; to: number } | { from: string }>
57
+ ) => {
58
+ console.log(e.detail);
59
+ }}
60
+ />
61
+ ```
62
+
63
+ ### Basic - 自定义时间范围选项
64
+
65
+ 设置 type 为 custom 并通过 customTimeRange 配置自定义时间范围列表，同时关闭 URL 参数更新。
66
+
67
+ ```tsx
68
+ <WrappedPresentationalBricksDatetimeSelector
69
+ shouldUpdateUrlParams={false}
70
+ from="now/d"
71
+ type="custom"
72
+ customTimeRange={[
73
+ { range: "now-1h", text: "近1小时" },
74
+ { range: "now-1d", text: "近24小时" },
75
+ { range: "now/d", text: "今天" },
76
+ { range: "now-7d", text: "近7天" },
77
+ { range: "now-30d", text: "近30天" },
78
+ { range: "now-1y", text: "近一年" },
79
+ ]}
80
+ />
81
+ ```
82
+
83
+ ### Styling - 设置按钮大小
84
+
85
+ 通过 size 属性控制时间选择器触发按钮的大小。
86
+
87
+ ```tsx
88
+ <WrappedPresentationalBricksDatetimeSelector
89
+ from="now-7d"
90
+ size="small"
91
+ shouldUpdateUrlParams={false}
92
+ />
93
+ ```
94
+
95
+ ### Styling - 设置弹出位置
96
+
97
+ 通过 placement 属性控制时间选择器弹出面板的位置。
98
+
99
+ ```tsx
100
+ <WrappedPresentationalBricksDatetimeSelector
101
+ from="now-7d"
102
+ placement="topLeft"
103
+ shouldUpdateUrlParams={false}
104
+ />
105
+ ```
106
+
107
+ ### Advanced - 指定时间戳单位为秒
108
+
109
+ 设置 resolution 为 "s"，事件输出的时间戳和 URL 参数中的时间戳都将以秒为单位。
110
+
111
+ ```tsx
112
+ <WrappedPresentationalBricksDatetimeSelector
113
+ from="now-1d"
114
+ resolution="s"
115
+ shouldUpdateUrlParams={false}
116
+ onDatetimeSelectedV2={(e: CustomEvent<{ from: number; to: number }>) => {
117
+ console.log(e.detail);
118
+ }}
119
+ />
120
+ ```
121
+
122
+ ### Advanced - 自定义日期显示格式
123
+
124
+ 通过 format 属性自定义日期的显示格式。
125
+
126
+ ```tsx
127
+ <WrappedPresentationalBricksDatetimeSelector
128
+ from="now-7d"
129
+ format="YYYY-MM-DD HH:mm:ss"
130
+ shouldUpdateUrlParams={false}
131
+ />
132
+ ```
133
+
134
+ ### Advanced - 限制选择范围
135
+
136
+ 通过 selectNearDays 限制只能选择近 N 天，通过 rangeDays 限制选择的时间跨度天数。
137
+
138
+ ```tsx
139
+ <WrappedPresentationalBricksDatetimeSelector
140
+ from="now-7d"
141
+ selectNearDays={30}
142
+ rangeDays={7}
143
+ shouldUpdateUrlParams={false}
144
+ onDatetimeSelectedV3={(
145
+ e: CustomEvent<{ from: number; to: number } | { from: string }>
146
+ ) => {
147
+ console.log(e.detail);
148
+ }}
149
+ />
150
+ ```
package/docs/general-label.md ADDED
@@ -0,0 +1,115 @@
1
+ ---
2
+ tagName: presentational-bricks.general-label
3
+ displayName: WrappedPresentationalBricksGeneralLabel
4
+ description: 可用来展示基本文案、前后缀图标，可配置点击事件和 url 的通用 label 构件
5
+ category:
6
+ source: "@next-bricks/presentational-bricks"
7
+ ---
8
+
9
+ # presentational-bricks.general-label
10
+
11
+ > 可用来展示基本文案、前后缀图标，可配置点击事件和 url 的通用 label 构件
12
+
13
+ ## Props
14
+
15
+ | 属性 | 类型 | 必填 | 默认值 | 说明 |
16
+ | ---------- | ---------- | ---- | ------ | --------------------------------------------------- |
17
+ | text | `string` | - | - | 文字内容 |
18
+ | prefixIcon | `MenuIcon` | - | - | 前缀图标 |
19
+ | suffixIcon | `MenuIcon` | - | - | 后缀图标 |
20
+ | url | `string` | - | - | 链接的 URL |
21
+ | href | `string` | - | - | 外链地址，使用原生 `<a>` 标签跳转，通常用于外部链接 |
22
+ | dataSource | `any` | - | - | `label.click`事件的传出的数据 |
23
+ | data | `any` | - | - | `label.click`事件的详情 |
24
+
25
+ ## Events
26
+
27
+ | 事件 | detail | 说明 |
28
+ | ----------- | ------------------------------------------------------------------------------------ | ----------------- |
29
+ | label.click | 编排者通过 `dataSource` 属性传入的自定义数据（若未设置则回退到已废弃的 `data` 属性） | 点击 label 时触发 |
30
+
31
+ ## Examples
32
+
33
+ ### Basic
34
+
35
+ #### 展示带后缀图标的文本标签
36
+
37
+ ```yaml preview
38
+ - brick: presentational-bricks.general-label
39
+ properties:
40
+ text: "2020-03-14"
41
+ suffixIcon:
42
+ lib: antd
43
+ icon: calendar
44
+ theme: outlined
45
+ color: "#0071eb"
46
+ ```
47
+
48
+ #### 展示带前缀图标的文本标签
49
+
50
+ ```yaml preview
51
+ - brick: presentational-bricks.general-label
52
+ properties:
53
+ text: "1.0.0"
54
+ prefixIcon:
55
+ lib: antd
56
+ icon: tag
57
+ theme: outlined
58
+ ```
59
+
60
+ #### 仅展示纯文本标签
61
+
62
+ ```yaml preview
63
+ - brick: presentational-bricks.general-label
64
+ properties:
65
+ text: "示例文本"
66
+ ```
67
+
68
+ ### Link
69
+
70
+ #### 使用 url 属性配置内部链接跳转
71
+
72
+ ```yaml preview
73
+ - brick: presentational-bricks.general-label
74
+ properties:
75
+ text: "1.0.0"
76
+ prefixIcon:
77
+ lib: antd
78
+ icon: tag
79
+ theme: outlined
80
+ url: "/resource-monitor"
81
+ ```
82
+
83
+ #### 使用 href 属性配置外部链接跳转
84
+
85
+ ```yaml preview
86
+ - brick: presentational-bricks.general-label
87
+ properties:
88
+ text: "访问外部链接"
89
+ suffixIcon:
90
+ lib: antd
91
+ icon: link
92
+ theme: outlined
93
+ href: "https://www.example.com"
94
+ ```
95
+
96
+ ### Advanced
97
+
98
+ #### 点击标签触发事件并传出自定义数据
99
+
100
+ ```yaml preview
101
+ - brick: presentational-bricks.general-label
102
+ properties:
103
+ text: "点击触发事件"
104
+ suffixIcon:
105
+ lib: antd
106
+ icon: calendar
107
+ theme: outlined
108
+ color: "#0071eb"
109
+ dataSource:
110
+ id: 1
111
+ name: "示例数据"
112
+ events:
113
+ label.click:
114
+ action: console.log
115
+ ```