@next-bricks/presentational-bricks 1.339.1 → 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 (17) hide show
  1. package/deploy/contract.yaml +126 -126
  2. package/dist/bricks.json +32 -32
  3. package/dist/{index.8e5be25b.js → index.09224616.js} +2 -2
  4. package/dist/{index.8e5be25b.js.map → index.09224616.js.map} +1 -1
  5. package/docs/brick-result.md +197 -0
  6. package/docs/brick-result.react.md +177 -0
  7. package/docs/brick-user.md +135 -0
  8. package/docs/brick-user.react.md +139 -0
  9. package/docs/brick-value-mapping.md +240 -0
  10. package/docs/brick-value-mapping.react.md +181 -0
  11. package/docs/cost-time.md +58 -0
  12. package/docs/cost-time.react.md +60 -0
  13. package/docs/datetime-selector.md +146 -0
  14. package/docs/datetime-selector.react.md +150 -0
  15. package/docs/general-label.md +115 -0
  16. package/docs/general-label.react.md +131 -0
  17. package/package.json +5 -4
package/docs/brick-result.md ADDED
@@ -0,0 +1,197 @@
1
+ ---
2
+ tagName: presentational-bricks.brick-result
3
+ displayName: WrappedPresentationalBricksBrickResult
4
+ description: 结果页面，支持三种状态类型：基础结果状态（success/error/info/warning/404/403/500）、空结果状态（empty/no-data/search-empty 等）和自定义插画状态（illustrations），可配置主标题、次标题、自定义图标及插画
5
+ category:
6
+ source: "@next-bricks/presentational-bricks"
7
+ ---
8
+
9
+ # presentational-bricks.brick-result
10
+
11
+ > 结果页面，支持三种状态类型：基础结果状态（success/error/info/warning/404/403/500）、空结果状态（empty/no-data/search-empty 等）和自定义插画状态（illustrations），可配置主标题、次标题、自定义图标及插画
12
+
13
+ ## Props
14
+
15
+ | 属性 | 类型 | 必填 | 默认值 | 说明 |
16
+ | ------------------- | --------------------------------------------------------------- | ---- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
17
+ | status | `BrickResultStatus \| EmptyResultStatus \| IllustrationsStatus` | 是 | - | 结果的状态，决定图标和颜色。支持三类值：BrickResultStatus（success/error/info/warning/404/403/500）显示 Ant Design 内置结果图标；EmptyResultStatus（empty/no-data/search-empty 等）显示空状态插画；设为 "illustrations" 时使用 illustrationsConfig 配置自定义插画。设置的值不符合任何类型时返回空元素 |
18
+ | customTitle | `string` | - | - | 主标题文字 |
19
+ | subTitle | `string` | - | - | 次标题文字 |
20
+ | icon | `string` | - | - | [自定义图标](https://ant.design/components/icon-cn/), 仅当 status 为 `BrickResultStatus` 时有效 |
21
+ | illustrationsConfig | `IllustrationsConfig` | - | `{}` | 自定义插画配置，仅当 status 为 "illustrations" 时生效。可通过 name 和 category 指定插画库图片，size 控制尺寸（默认 middle），imageStyle 覆盖样式（不推荐） |
22
+ | useNewIllustration | `any` | - | `true` | 是否使用新版插画替换插画库 default 分类下的图标，需配合特性开关 support-new-illustrations 及应用配置 supportNewIllustrations 启用 |
23
+ | emptyResultSize | `IconSize` | - | - | 空结果插画的尺寸，仅当 status 为 EmptyResultStatus 类型时生效，可选值：small/middle/large/xlarge/unset，默认 middle |
24
+
25
+ ## Slots
26
+
27
+ | 名称 | 说明 |
28
+ | ------- | ------------------------------------------------------------------------- |
29
+ | content | 提供 content 插槽，用于在结果页面下方放置自定义内容（如操作按钮、链接等） |
30
+
31
+ ## Examples
32
+
33
+ ### Basic 基础用法
34
+
35
+ #### 成功结果状态
36
+
37
+ 展示操作成功的结果页面。
38
+
39
+ ```yaml preview
40
+ brick: presentational-bricks.brick-result
41
+ properties:
42
+ status: success
43
+ customTitle: 操作执行成功
44
+ subTitle: 任务已完成，请查看详情
45
+ ```
46
+
47
+ #### 信息提示结果
48
+
49
+ 展示普通信息的结果页面，包含主标题和次标题。
50
+
51
+ ```yaml preview
52
+ brick: presentational-bricks.brick-result
53
+ properties:
54
+ status: info
55
+ customTitle: 今天是星期二
56
+ subTitle: 2019/10/29 21:35
57
+ ```
58
+
59
+ #### 警告结果并自定义图标
60
+
61
+ 展示警告状态的结果页面，并通过 icon 属性自定义图标。
62
+
63
+ ```yaml preview
64
+ brick: presentational-bricks.brick-result
65
+ properties:
66
+ status: warning
67
+ customTitle: 今日有雨
68
+ subTitle: 明天天气会好转
69
+ icon: question
70
+ ```
71
+
72
+ #### 404 结果并使用 content 插槽
73
+
74
+ 展示 404 状态的结果页面，并在 content 插槽中放置自定义内容。
75
+
76
+ ```yaml preview
77
+ brick: presentational-bricks.brick-result
78
+ properties:
79
+ status: "404"
80
+ customTitle: HTTP 404
81
+ slots:
82
+ content:
83
+ type: bricks
84
+ bricks:
85
+ - brick: div
86
+ properties:
87
+ style:
88
+ textAlign: center
89
+ textContent: 页面未找到，请检查链接地址
90
+ ```
91
+
92
+ ### Empty 空结果状态
93
+
94
+ #### 空数据状态
95
+
96
+ 展示空数据的结果页面，使用 empty 状态。
97
+
98
+ ```yaml preview
99
+ brick: presentational-bricks.brick-result
100
+ properties:
101
+ status: empty
102
+ slots:
103
+ content:
104
+ type: bricks
105
+ bricks:
106
+ - brick: div
107
+ properties:
108
+ style:
109
+ textAlign: center
110
+ textContent: 请前往首页进行创建
111
+ ```
112
+
113
+ #### 搜索结果为空
114
+
115
+ 展示搜索无结果的状态页面。
116
+
117
+ ```yaml preview
118
+ brick: presentational-bricks.brick-result
119
+ properties:
120
+ status: search-empty
121
+ slots:
122
+ content:
123
+ type: bricks
124
+ bricks:
125
+ - brick: div
126
+ properties:
127
+ style:
128
+ textAlign: center
129
+ textContent: 搜索为空
130
+ ```
131
+
132
+ #### 空结果自定义尺寸
133
+
134
+ 通过 emptyResultSize 控制空结果插画的尺寸大小。
135
+
136
+ ```yaml preview
137
+ brick: presentational-bricks.brick-result
138
+ properties:
139
+ status: no-data
140
+ customTitle: 暂无数据
141
+ emptyResultSize: large
142
+ ```
143
+
144
+ ### Illustrations 自定义插画
145
+
146
+ #### 使用插画库自定义插画
147
+
148
+ status 设为 illustrations 时启用自定义插画模式，通过 illustrationsConfig 的 name 和 category 指定插画。
149
+
150
+ ```yaml preview
151
+ brick: presentational-bricks.brick-result
152
+ properties:
153
+ status: illustrations
154
+ illustrationsConfig:
155
+ name: search-empty
156
+ category: default
157
+ imageStyle:
158
+ width: 250px
159
+ slots:
160
+ content:
161
+ type: bricks
162
+ bricks:
163
+ - brick: div
164
+ properties:
165
+ style:
166
+ textAlign: center
167
+ textContent: 搜索为空
168
+ ```
169
+
170
+ #### 自定义插画尺寸
171
+
172
+ 通过 illustrationsConfig 的 size 属性控制插画尺寸。
173
+
174
+ ```yaml preview
175
+ brick: presentational-bricks.brick-result
176
+ properties:
177
+ status: illustrations
178
+ customTitle: 暂无内容
179
+ illustrationsConfig:
180
+ name: no-content
181
+ category: easyops2
182
+ size: small
183
+ ```
184
+
185
+ ### Advanced 高级用法
186
+
187
+ #### 关闭新版插画
188
+
189
+ 通过 useNewIllustration 设为 false 关闭新版插画替换。
190
+
191
+ ```yaml preview
192
+ brick: presentational-bricks.brick-result
193
+ properties:
194
+ status: empty
195
+ customTitle: 暂无数据
196
+ useNewIllustration: false
197
+ ```
package/docs/brick-result.react.md ADDED
@@ -0,0 +1,177 @@
1
+ ---
2
+ tagName: presentational-bricks.brick-result
3
+ displayName: WrappedPresentationalBricksBrickResult
4
+ description: 结果页面，支持三种状态类型：基础结果状态（success/error/info/warning/404/403/500）、空结果状态（empty/no-data/search-empty 等）和自定义插画状态（illustrations），可配置主标题、次标题、自定义图标及插画
5
+ category:
6
+ source: "@next-bricks/presentational-bricks"
7
+ ---
8
+
9
+ # WrappedPresentationalBricksBrickResult
10
+
11
+ > 结果页面，支持三种状态类型：基础结果状态（success/error/info/warning/404/403/500）、空结果状态（empty/no-data/search-empty 等）和自定义插画状态（illustrations），可配置主标题、次标题、自定义图标及插画
12
+
13
+ ## 导入
14
+
15
+ ```tsx
16
+ import { WrappedPresentationalBricksBrickResult } from "@easyops/wrapped-components";
17
+ ```
18
+
19
+ ## Props
20
+
21
+ | 属性 | 类型 | 必填 | 默认值 | 说明 |
22
+ | ------------------- | --------------------------------------------------------------- | ---- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
23
+ | status | `BrickResultStatus \| EmptyResultStatus \| IllustrationsStatus` | 是 | - | 结果的状态，决定图标和颜色。支持三类值：BrickResultStatus（success/error/info/warning/404/403/500）显示 Ant Design 内置结果图标；EmptyResultStatus（empty/no-data/search-empty 等）显示空状态插画；设为 "illustrations" 时使用 illustrationsConfig 配置自定义插画。设置的值不符合任何类型时返回空元素 |
24
+ | customTitle | `string` | - | - | 主标题文字 |
25
+ | subTitle | `string` | - | - | 次标题文字 |
26
+ | icon | `string` | - | - | [自定义图标](https://ant.design/components/icon-cn/), 仅当 status 为 `BrickResultStatus` 时有效 |
27
+ | illustrationsConfig | `IllustrationsConfig` | - | `{}` | 自定义插画配置，仅当 status 为 "illustrations" 时生效。可通过 name 和 category 指定插画库图片，size 控制尺寸（默认 middle），imageStyle 覆盖样式（不推荐） |
28
+ | useNewIllustration | `any` | - | `true` | 是否使用新版插画替换插画库 default 分类下的图标，需配合特性开关 support-new-illustrations 及应用配置 supportNewIllustrations 启用 |
29
+ | emptyResultSize | `IconSize` | - | - | 空结果插画的尺寸，仅当 status 为 EmptyResultStatus 类型时生效，可选值：small/middle/large/xlarge/unset，默认 middle |
30
+
31
+ ## Slots
32
+
33
+ | 名称 | 说明 |
34
+ | ------- | ------------------------------------------------------------------------- |
35
+ | content | 提供 content 插槽，用于在结果页面下方放置自定义内容（如操作按钮、链接等） |
36
+
37
+ ## Examples
38
+
39
+ ### Basic 基础用法
40
+
41
+ #### 成功结果状态
42
+
43
+ 展示操作成功的结果页面。
44
+
45
+ ```tsx
46
+ <WrappedPresentationalBricksBrickResult
47
+ status="success"
48
+ customTitle="操作执行成功"
49
+ subTitle="任务已完成，请查看详情"
50
+ />
51
+ ```
52
+
53
+ #### 信息提示结果
54
+
55
+ 展示普通信息的结果页面，包含主标题和次标题。
56
+
57
+ ```tsx
58
+ <WrappedPresentationalBricksBrickResult
59
+ status="info"
60
+ customTitle="今天是星期二"
61
+ subTitle="2019/10/29 21:35"
62
+ />
63
+ ```
64
+
65
+ #### 警告结果并自定义图标
66
+
67
+ 展示警告状态的结果页面，并通过 icon 属性自定义图标。
68
+
69
+ ```tsx
70
+ <WrappedPresentationalBricksBrickResult
71
+ status="warning"
72
+ customTitle="今日有雨"
73
+ subTitle="明天天气会好转"
74
+ icon="question"
75
+ />
76
+ ```
77
+
78
+ #### 404 结果并使用 content 插槽
79
+
80
+ 展示 404 状态的结果页面，并在 content 插槽中放置自定义内容。
81
+
82
+ ```tsx
83
+ <WrappedPresentationalBricksBrickResult status="404" customTitle="HTTP 404">
84
+ <div slot="content" style={{ textAlign: "center" }}>
85
+ 页面未找到，请检查链接地址
86
+ </div>
87
+ </WrappedPresentationalBricksBrickResult>
88
+ ```
89
+
90
+ ### Empty 空结果状态
91
+
92
+ #### 空数据状态
93
+
94
+ 展示空数据的结果页面，使用 empty 状态。
95
+
96
+ ```tsx
97
+ <WrappedPresentationalBricksBrickResult status="empty">
98
+ <div slot="content" style={{ textAlign: "center" }}>
99
+ 请前往首页进行创建
100
+ </div>
101
+ </WrappedPresentationalBricksBrickResult>
102
+ ```
103
+
104
+ #### 搜索结果为空
105
+
106
+ 展示搜索无结果的状态页面。
107
+
108
+ ```tsx
109
+ <WrappedPresentationalBricksBrickResult status="search-empty">
110
+ <div slot="content" style={{ textAlign: "center" }}>
111
+ 搜索为空
112
+ </div>
113
+ </WrappedPresentationalBricksBrickResult>
114
+ ```
115
+
116
+ #### 空结果自定义尺寸
117
+
118
+ 通过 emptyResultSize 控制空结果插画的尺寸大小。
119
+
120
+ ```tsx
121
+ <WrappedPresentationalBricksBrickResult
122
+ status="no-data"
123
+ customTitle="暂无数据"
124
+ emptyResultSize="large"
125
+ />
126
+ ```
127
+
128
+ ### Illustrations 自定义插画
129
+
130
+ #### 使用插画库自定义插画
131
+
132
+ status 设为 illustrations 时启用自定义插画模式，通过 illustrationsConfig 的 name 和 category 指定插画。
133
+
134
+ ```tsx
135
+ <WrappedPresentationalBricksBrickResult
136
+ status="illustrations"
137
+ illustrationsConfig={{
138
+ name: "search-empty",
139
+ category: "default",
140
+ imageStyle: { width: "250px" },
141
+ }}
142
+ >
143
+ <div slot="content" style={{ textAlign: "center" }}>
144
+ 搜索为空
145
+ </div>
146
+ </WrappedPresentationalBricksBrickResult>
147
+ ```
148
+
149
+ #### 自定义插画尺寸
150
+
151
+ 通过 illustrationsConfig 的 size 属性控制插画尺寸。
152
+
153
+ ```tsx
154
+ <WrappedPresentationalBricksBrickResult
155
+ status="illustrations"
156
+ customTitle="暂无内容"
157
+ illustrationsConfig={{
158
+ name: "no-content",
159
+ category: "easyops2",
160
+ size: "small",
161
+ }}
162
+ />
163
+ ```
164
+
165
+ ### Advanced 高级用法
166
+
167
+ #### 关闭新版插画
168
+
169
+ 通过 useNewIllustration 设为 false 关闭新版插画替换。
170
+
171
+ ```tsx
172
+ <WrappedPresentationalBricksBrickResult
173
+ status="empty"
174
+ customTitle="暂无数据"
175
+ useNewIllustration={false}
176
+ />
177
+ ```
package/docs/brick-user.md ADDED
@@ -0,0 +1,135 @@
1
+ ---
2
+ tagName: presentational-bricks.brick-user
3
+ displayName: WrappedPresentationalBricksBrickUser
4
+ description: 展示用户头像和用户名的构件，支持昵称显示、showKey 显示、自定义 Tooltip 及头像大小和形状配置
5
+ category: display-component
6
+ source: "@next-bricks/presentational-bricks"
7
+ ---
8
+
9
+ # presentational-bricks.brick-user
10
+
11
+ > 展示用户头像和用户名的构件，支持昵称显示、showKey 显示、自定义 Tooltip 及头像大小和形状配置
12
+
13
+ ## Props
14
+
15
+ | 属性 | 类型 | 必填 | 默认值 | 说明 |
16
+ | ---------------------- | --------------------------------- | ---- | ----------- | ------------------------------------------------------------------------------------------------------------- |
17
+ | username | `string` | 是 | - | [已废弃]用户名 (废弃属性，请使用 `userNameOrId`) |
18
+ | userNameOrId | `string` | 是 | - | 用户名或用户 instanceId |
19
+ | iconUrl | `string` | - | - | 用户头像 url |
20
+ | hideAvatar | `boolean` | - | - | 是否隐藏头像 |
21
+ | hideUsername | `boolean` | - | - | 是否隐藏用户名 |
22
+ | size | `"large" \| "small" \| "default"` | - | `"default"` | 设置头像的大小 |
23
+ | shape | `"circle" \| "square"` | - | - | 指定头像的形状 |
24
+ | showNickname | `boolean` | - | - | [已废弃,最新用法以 showNicknameOrUsername 为准]是否展示昵称,当用户不含昵称昵称时不展示 |
25
+ | showNicknameOrUsername | `boolean` | - | - | 当有昵称时显示昵称，无昵称时显示用户名 |
26
+ | displayShowKey | `boolean` | - | - | 是否显示 showKey，启用后当用户拥有 showKey 时显示为 `name(showKey)` 格式（如 `alan(hero)`），否则仅显示用户名 |
27
+ | iconMargin | `number \| string` | - | - | 头像与用户名之间的间距，支持数字（像素）或 CSS 字符串（如 `"0 8px"`） |
28
+ | customTooltip | `string` | - | - | 自定义 Tooltip 替换字符串，支持 `#{name}` 和 `#{showKey}` 占位符，例如 `"发起人：#{name}"` |
29
+
30
+ ## Examples
31
+
32
+ ### Basic 基础用法
33
+
34
+ #### 默认展示用户
35
+
36
+ 通过 userNameOrId 传入用户名或 instanceId，展示用户头像和用户名。
37
+
38
+ ```yaml preview
39
+ brick: presentational-bricks.brick-user
40
+ properties:
41
+ userNameOrId: easyops
42
+ ```
43
+
44
+ #### 自定义头像图片
45
+
46
+ 通过 iconUrl 属性指定自定义头像图片地址。
47
+
48
+ ```yaml preview
49
+ brick: presentational-bricks.brick-user
50
+ properties:
51
+ userNameOrId: easyops
52
+ iconUrl: "assets/favicon.png"
53
+ ```
54
+
55
+ #### 设置头像大小和形状
56
+
57
+ 通过 size 和 shape 属性控制头像的大小和形状。
58
+
59
+ ```yaml preview
60
+ brick: presentational-bricks.brick-user
61
+ properties:
62
+ userNameOrId: easyops
63
+ size: large
64
+ shape: square
65
+ ```
66
+
67
+ ### Display 显示控制
68
+
69
+ #### 隐藏头像
70
+
71
+ 通过 hideAvatar 属性隐藏用户头像，仅显示用户名。
72
+
73
+ ```yaml preview
74
+ brick: presentational-bricks.brick-user
75
+ properties:
76
+ userNameOrId: easyops
77
+ hideAvatar: true
78
+ ```
79
+
80
+ #### 隐藏用户名
81
+
82
+ 通过 hideUsername 属性隐藏用户名，仅显示头像。
83
+
84
+ ```yaml preview
85
+ brick: presentational-bricks.brick-user
86
+ properties:
87
+ userNameOrId: easyops
88
+ hideUsername: true
89
+ ```
90
+
91
+ ### Advanced 高级用法
92
+
93
+ #### 显示昵称
94
+
95
+ 通过 showNicknameOrUsername 属性，当用户有昵称时显示昵称，无昵称时显示用户名。
96
+
97
+ ```yaml preview
98
+ brick: presentational-bricks.brick-user
99
+ properties:
100
+ userNameOrId: easyops
101
+ showNicknameOrUsername: true
102
+ ```
103
+
104
+ #### 显示 showKey
105
+
106
+ 通过 displayShowKey 属性，显示用户的 showKey 信息，格式为 `name(showKey)`。
107
+
108
+ ```yaml preview
109
+ brick: presentational-bricks.brick-user
110
+ properties:
111
+ userNameOrId: easyops
112
+ displayShowKey: true
113
+ ```
114
+
115
+ #### 自定义 Tooltip
116
+
117
+ 通过 customTooltip 属性自定义鼠标悬浮提示文字，支持 `#{name}` 和 `#{showKey}` 占位符。
118
+
119
+ ```yaml preview
120
+ brick: presentational-bricks.brick-user
121
+ properties:
122
+ userNameOrId: easyops
123
+ customTooltip: "发起人：#{name}"
124
+ ```
125
+
126
+ #### 自定义头像间距
127
+
128
+ 通过 iconMargin 属性设置头像与用户名之间的间距。
129
+
130
+ ```yaml preview
131
+ brick: presentational-bricks.brick-user
132
+ properties:
133
+ userNameOrId: easyops
134
+ iconMargin: "0 8px 0 0"
135
+ ```
package/docs/brick-user.react.md ADDED
@@ -0,0 +1,139 @@
1
+ ---
2
+ tagName: presentational-bricks.brick-user
3
+ displayName: WrappedPresentationalBricksBrickUser
4
+ description: 展示用户头像和用户名的构件，支持昵称显示、showKey 显示、自定义 Tooltip 及头像大小和形状配置
5
+ category: display-component
6
+ source: "@next-bricks/presentational-bricks"
7
+ ---
8
+
9
+ # WrappedPresentationalBricksBrickUser
10
+
11
+ > 展示用户头像和用户名的构件，支持昵称显示、showKey 显示、自定义 Tooltip 及头像大小和形状配置
12
+
13
+ ## 导入
14
+
15
+ ```tsx
16
+ import { WrappedPresentationalBricksBrickUser } from "@easyops/wrapped-components";
17
+ ```
18
+
19
+ ## Props
20
+
21
+ | 属性 | 类型 | 必填 | 默认值 | 说明 |
22
+ | ---------------------- | --------------------------------- | ---- | ----------- | ------------------------------------------------------------------------------------------------------------- |
23
+ | username | `string` | 是 | - | [已废弃]用户名 (废弃属性，请使用 `userNameOrId`) |
24
+ | userNameOrId | `string` | 是 | - | 用户名或用户 instanceId |
25
+ | iconUrl | `string` | - | - | 用户头像 url |
26
+ | hideAvatar | `boolean` | - | - | 是否隐藏头像 |
27
+ | hideUsername | `boolean` | - | - | 是否隐藏用户名 |
28
+ | size | `"large" \| "small" \| "default"` | - | `"default"` | 设置头像的大小 |
29
+ | shape | `"circle" \| "square"` | - | - | 指定头像的形状 |
30
+ | showNickname | `boolean` | - | - | [已废弃,最新用法以 showNicknameOrUsername 为准]是否展示昵称,当用户不含昵称昵称时不展示 |
31
+ | showNicknameOrUsername | `boolean` | - | - | 当有昵称时显示昵称，无昵称时显示用户名 |
32
+ | displayShowKey | `boolean` | - | - | 是否显示 showKey，启用后当用户拥有 showKey 时显示为 `name(showKey)` 格式（如 `alan(hero)`），否则仅显示用户名 |
33
+ | iconMargin | `number \| string` | - | - | 头像与用户名之间的间距，支持数字（像素）或 CSS 字符串（如 `"0 8px"`） |
34
+ | customTooltip | `string` | - | - | 自定义 Tooltip 替换字符串，支持 `#{name}` 和 `#{showKey}` 占位符，例如 `"发起人：#{name}"` |
35
+
36
+ ## Examples
37
+
38
+ ### Basic 基础用法
39
+
40
+ #### 默认展示用户
41
+
42
+ 通过 userNameOrId 传入用户名或 instanceId，展示用户头像和用户名。
43
+
44
+ ```tsx
45
+ <WrappedPresentationalBricksBrickUser userNameOrId="easyops" />
46
+ ```
47
+
48
+ #### 自定义头像图片
49
+
50
+ 通过 iconUrl 属性指定自定义头像图片地址。
51
+
52
+ ```tsx
53
+ <WrappedPresentationalBricksBrickUser
54
+ userNameOrId="easyops"
55
+ iconUrl="assets/favicon.png"
56
+ />
57
+ ```
58
+
59
+ #### 设置头像大小和形状
60
+
61
+ 通过 size 和 shape 属性控制头像的大小和形状。
62
+
63
+ ```tsx
64
+ <WrappedPresentationalBricksBrickUser
65
+ userNameOrId="easyops"
66
+ size="large"
67
+ shape="square"
68
+ />
69
+ ```
70
+
71
+ ### Display 显示控制
72
+
73
+ #### 隐藏头像
74
+
75
+ 通过 hideAvatar 属性隐藏用户头像，仅显示用户名。
76
+
77
+ ```tsx
78
+ <WrappedPresentationalBricksBrickUser
79
+ userNameOrId="easyops"
80
+ hideAvatar={true}
81
+ />
82
+ ```
83
+
84
+ #### 隐藏用户名
85
+
86
+ 通过 hideUsername 属性隐藏用户名，仅显示头像。
87
+
88
+ ```tsx
89
+ <WrappedPresentationalBricksBrickUser
90
+ userNameOrId="easyops"
91
+ hideUsername={true}
92
+ />
93
+ ```
94
+
95
+ ### Advanced 高级用法
96
+
97
+ #### 显示昵称
98
+
99
+ 通过 showNicknameOrUsername 属性，当用户有昵称时显示昵称，无昵称时显示用户名。
100
+
101
+ ```tsx
102
+ <WrappedPresentationalBricksBrickUser
103
+ userNameOrId="easyops"
104
+ showNicknameOrUsername={true}
105
+ />
106
+ ```
107
+
108
+ #### 显示 showKey
109
+
110
+ 通过 displayShowKey 属性，显示用户的 showKey 信息，格式为 `name(showKey)`。
111
+
112
+ ```tsx
113
+ <WrappedPresentationalBricksBrickUser
114
+ userNameOrId="easyops"
115
+ displayShowKey={true}
116
+ />
117
+ ```
118
+
119
+ #### 自定义 Tooltip
120
+
121
+ 通过 customTooltip 属性自定义鼠标悬浮提示文字，支持 `#{name}` 和 `#{showKey}` 占位符。
122
+
123
+ ```tsx
124
+ <WrappedPresentationalBricksBrickUser
125
+ userNameOrId="easyops"
126
+ customTooltip="发起人：#{name}"
127
+ />
128
+ ```
129
+
130
+ #### 自定义头像间距
131
+
132
+ 通过 iconMargin 属性设置头像与用户名之间的间距。
133
+
134
+ ```tsx
135
+ <WrappedPresentationalBricksBrickUser
136
+ userNameOrId="easyops"
137
+ iconMargin="0 8px 0 0"
138
+ />
139
+ ```