cfel-base-components 0.0.10 → 0.0.11
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/demo/src/index.jsx
CHANGED
|
@@ -5,7 +5,15 @@ import Layout from '../../src/components/layout';
|
|
|
5
5
|
|
|
6
6
|
const App = () => {
|
|
7
7
|
return (
|
|
8
|
-
< Layout
|
|
8
|
+
< Layout appName="123123" productCode="lios-iot-wifi"
|
|
9
|
+
user={{
|
|
10
|
+
name: "\u5434\u6668\u61CB\uFF08\u592A\u4E00\uFF09",
|
|
11
|
+
avatar: "https:\/\/static-legacy.dingtalk.com\/media\/lQLPM5AkqOufBy7NAyDNAyCwJZ592czMOC4EeIgNJAAGAA_800_800.png",
|
|
12
|
+
tenantName: "\u8FDC\u822A\u8DE8\u56FD\u63A7\u80A1\u96C6\u56E2",
|
|
13
|
+
role:["超级管理员","超管","子管理员","超级管理员","超级管理员123","子管理员","超级管理员","超级管理员123","子管理员","超级管理员","超级管理员123超级管理员123超级管理员123超级管理员123","子管理员"]
|
|
14
|
+
// role:["超级管理员"]
|
|
15
|
+
}}
|
|
16
|
+
>
|
|
9
17
|
|
|
10
18
|
</Layout >
|
|
11
19
|
|
package/package.json
CHANGED
|
@@ -169,12 +169,12 @@ body {
|
|
|
169
169
|
|
|
170
170
|
//用户卡片
|
|
171
171
|
.lios-user-card {
|
|
172
|
-
width: 182px;
|
|
172
|
+
min-width: 182px;
|
|
173
|
+
max-width: 262px;
|
|
173
174
|
|
|
174
175
|
.user-info {
|
|
175
176
|
display: flex;
|
|
176
|
-
justify-content: flex-start;
|
|
177
|
-
align-items: center;
|
|
177
|
+
// justify-content: flex-start;
|
|
178
178
|
margin-bottom: 12px;
|
|
179
179
|
|
|
180
180
|
.author {
|
|
@@ -185,9 +185,33 @@ body {
|
|
|
185
185
|
margin-right: 12px;
|
|
186
186
|
}
|
|
187
187
|
|
|
188
|
+
.user-info-right{
|
|
189
|
+
flex: 1;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.name {
|
|
193
|
+
display: inline-block;
|
|
194
|
+
margin-top: 18px;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.role-list {
|
|
198
|
+
font-size: 12px;
|
|
199
|
+
line-height: 16px;
|
|
200
|
+
margin-top: 4px;
|
|
201
|
+
.role-item {
|
|
202
|
+
background: rgba(204, 204, 204, .55);
|
|
203
|
+
padding: 2px 8px;
|
|
204
|
+
border-radius: 8px;
|
|
205
|
+
display: inline-block;
|
|
206
|
+
margin-right: 4px;
|
|
207
|
+
margin-bottom: 4px;
|
|
208
|
+
}
|
|
209
|
+
}
|
|
188
210
|
}
|
|
189
211
|
|
|
190
212
|
.lios-tenant {
|
|
213
|
+
margin-bottom: 12px;
|
|
214
|
+
|
|
191
215
|
.tenant-label {
|
|
192
216
|
font-size: 12px;
|
|
193
217
|
color: rgba(0, 0, 0, .65);
|
|
@@ -198,7 +222,6 @@ body {
|
|
|
198
222
|
color: rgba(0, 0, 0, .85);
|
|
199
223
|
}
|
|
200
224
|
|
|
201
|
-
margin-bottom: 12px;
|
|
202
225
|
}
|
|
203
226
|
|
|
204
227
|
|
|
@@ -247,6 +270,7 @@ body {
|
|
|
247
270
|
|
|
248
271
|
img {
|
|
249
272
|
width: 32px;
|
|
273
|
+
height: 32px;
|
|
250
274
|
margin-right: 12px;
|
|
251
275
|
}
|
|
252
276
|
}
|
|
@@ -13,7 +13,8 @@ export interface LiosLayoutlProps {
|
|
|
13
13
|
user?: {
|
|
14
14
|
name: string,
|
|
15
15
|
avatar: string,
|
|
16
|
-
tenantName: string
|
|
16
|
+
tenantName: string,
|
|
17
|
+
role: any[]
|
|
17
18
|
};
|
|
18
19
|
logoutUrl?: string
|
|
19
20
|
defaultOpenKeys?: string[],
|
|
@@ -38,6 +39,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
38
39
|
name,
|
|
39
40
|
avatar,
|
|
40
41
|
tenantName,
|
|
42
|
+
role,
|
|
41
43
|
} = user || {}
|
|
42
44
|
const [openKeys, setOpenKeys] = useState<any>(defaultOpenKeys || []);
|
|
43
45
|
|
|
@@ -52,8 +54,13 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
52
54
|
className="author"
|
|
53
55
|
src={avatar}
|
|
54
56
|
/>
|
|
55
|
-
<div className=
|
|
56
|
-
{name}
|
|
57
|
+
<div className='user-info-right'>
|
|
58
|
+
<span className='name'>{name}</span>
|
|
59
|
+
<div className='role-list'>
|
|
60
|
+
{role?.map((i) => <span className='role-item' key={i}>
|
|
61
|
+
{i}
|
|
62
|
+
</span>)}
|
|
63
|
+
</div>
|
|
57
64
|
</div>
|
|
58
65
|
</div>
|
|
59
66
|
|