cfel-base-components 0.0.7 → 0.0.8
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/package.json +4 -1
- package/src/components/layout/index.scss +224 -0
- package/src/components/layout/index.tsx +130 -0
- package/src/index.tsx +4 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "cfel-base-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.8",
|
|
4
4
|
"description": "cfel-base-components",
|
|
5
5
|
"main": "/src/index.tsx",
|
|
6
6
|
"types": "src/index.d.ts",
|
|
@@ -39,5 +39,8 @@
|
|
|
39
39
|
"webpack-cli": "^5.1.4",
|
|
40
40
|
"webpack-dev-server": "^4.15.1",
|
|
41
41
|
"webpack-merge": "^5.9.0"
|
|
42
|
+
},
|
|
43
|
+
"peerDependencies":{
|
|
44
|
+
"antd": "^5.5.2"
|
|
42
45
|
}
|
|
43
46
|
}
|
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
body {
|
|
2
|
+
margin: 0;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.lios-header {
|
|
6
|
+
height: 48px;
|
|
7
|
+
background: white;
|
|
8
|
+
z-index: 1;
|
|
9
|
+
box-shadow: 1px 0px 5px #ccc;
|
|
10
|
+
position: relative;
|
|
11
|
+
display: flex;
|
|
12
|
+
justify-content: flex-start;
|
|
13
|
+
align-items: center;
|
|
14
|
+
|
|
15
|
+
.background {
|
|
16
|
+
width: 800px;
|
|
17
|
+
height: 100%;
|
|
18
|
+
position: absolute;
|
|
19
|
+
top: 0;
|
|
20
|
+
right: 0;
|
|
21
|
+
overflow: hidden;
|
|
22
|
+
|
|
23
|
+
.background-img {
|
|
24
|
+
width: 800px;
|
|
25
|
+
position: absolute;
|
|
26
|
+
top: -65px;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.background-mask {
|
|
30
|
+
position: absolute;
|
|
31
|
+
left: 0;
|
|
32
|
+
top: 0;
|
|
33
|
+
width: 100%;
|
|
34
|
+
height: 100%;
|
|
35
|
+
background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.lios-header-fill {
|
|
40
|
+
flex: 1;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.lios-logo {
|
|
44
|
+
left: 48px;
|
|
45
|
+
top: 0;
|
|
46
|
+
width: 255px;
|
|
47
|
+
position: absolute;
|
|
48
|
+
z-index: 1;
|
|
49
|
+
display: inline-flex;
|
|
50
|
+
align-items: center;
|
|
51
|
+
|
|
52
|
+
.img {
|
|
53
|
+
color: #1677ff;
|
|
54
|
+
font-size: 20px;
|
|
55
|
+
line-height: 48px;
|
|
56
|
+
font-family: Lucida Calligraphy, cursive, serif, sans-serif;
|
|
57
|
+
margin-right: 12px;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.interval {
|
|
61
|
+
color: rgba(0, 0, 0, 0.1);
|
|
62
|
+
width: 1px;
|
|
63
|
+
height: 12px;
|
|
64
|
+
background-color: rgba(0, 0, 0, 0.1);
|
|
65
|
+
margin: 8px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.app-list {
|
|
69
|
+
.current {
|
|
70
|
+
font-size: 12px;
|
|
71
|
+
height: 24px;
|
|
72
|
+
line-height: 24px;
|
|
73
|
+
padding: 0 12px;
|
|
74
|
+
border-radius: 6px;
|
|
75
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
|
76
|
+
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
|
|
77
|
+
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
78
|
+
cursor: pointer;
|
|
79
|
+
transition: all 0.3s;
|
|
80
|
+
color: rgba(0, 0, 0, 0.88);
|
|
81
|
+
font-weight: 400;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.current:hover {
|
|
85
|
+
background: rgba(0, 0, 0, 0.1);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.lios-header-actions {
|
|
91
|
+
display: flex;
|
|
92
|
+
justify-content: flex-start;
|
|
93
|
+
align-items: center;
|
|
94
|
+
height: 100%;
|
|
95
|
+
max-width: 300px;
|
|
96
|
+
z-index: 2;
|
|
97
|
+
|
|
98
|
+
.actions-item {
|
|
99
|
+
height: 36px;
|
|
100
|
+
border-radius: 6px;
|
|
101
|
+
transition: all .3s;
|
|
102
|
+
cursor: pointer;
|
|
103
|
+
margin: 0 4px;
|
|
104
|
+
padding: 0 12px;
|
|
105
|
+
|
|
106
|
+
display: flex;
|
|
107
|
+
justify-content: center;
|
|
108
|
+
align-items: center;
|
|
109
|
+
|
|
110
|
+
&:hover {
|
|
111
|
+
background: rgba(255, 255, 255, .15);
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
.lios-header-user {
|
|
118
|
+
height: 40px;
|
|
119
|
+
display: flex;
|
|
120
|
+
justify-content: flex-start;
|
|
121
|
+
align-items: center;
|
|
122
|
+
z-index: 2;
|
|
123
|
+
transition: all .3s;
|
|
124
|
+
padding: 0 12px;
|
|
125
|
+
margin: 0 12px;
|
|
126
|
+
border-radius: 6px;
|
|
127
|
+
cursor: pointer;
|
|
128
|
+
|
|
129
|
+
&:hover {
|
|
130
|
+
background: rgba(255, 255, 255, .15);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.author {
|
|
134
|
+
width: 36px;
|
|
135
|
+
height: 36px;
|
|
136
|
+
border-radius: 50%;
|
|
137
|
+
background: rgba(255, 255, 255, 0.3);
|
|
138
|
+
margin-right: 12px;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.name {
|
|
142
|
+
color: white;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.lios-main {
|
|
148
|
+
display: flex;
|
|
149
|
+
height: 100%;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.lios-side {
|
|
153
|
+
max-width: 255px;
|
|
154
|
+
height: calc(100vh - 48px);
|
|
155
|
+
background: white;
|
|
156
|
+
user-select: none;
|
|
157
|
+
padding-top: 12px;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.lios-content {
|
|
161
|
+
width: 100%;
|
|
162
|
+
height: calc(100vh - 48px);
|
|
163
|
+
overflow-y: auto;
|
|
164
|
+
padding: 16px 16px 5px;
|
|
165
|
+
display: flex;
|
|
166
|
+
flex-direction: column;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
//用户卡片
|
|
170
|
+
.lios-user-card {
|
|
171
|
+
width: 182px;
|
|
172
|
+
|
|
173
|
+
.user-info {
|
|
174
|
+
display: flex;
|
|
175
|
+
justify-content: flex-start;
|
|
176
|
+
align-items: center;
|
|
177
|
+
margin-bottom: 12px;
|
|
178
|
+
|
|
179
|
+
.author {
|
|
180
|
+
width: 72px;
|
|
181
|
+
height: 72px;
|
|
182
|
+
border-radius: 50%;
|
|
183
|
+
background: rgba(255, 255, 255, 0.3);
|
|
184
|
+
margin-right: 12px;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.lios-tenant {
|
|
190
|
+
.tenant-label {
|
|
191
|
+
font-size: 12px;
|
|
192
|
+
color: rgba(0, 0, 0, .65);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.tenant-value {
|
|
196
|
+
font-size: 14px;
|
|
197
|
+
color: rgba(0, 0, 0, .85);
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
margin-bottom: 12px;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
.lios-logout {
|
|
205
|
+
cursor: pointer;
|
|
206
|
+
display: flex;
|
|
207
|
+
justify-content: center;
|
|
208
|
+
align-items: center;
|
|
209
|
+
color: rgba(0, 0, 0, .45);
|
|
210
|
+
border-radius: 4px;
|
|
211
|
+
transition: background .3s;
|
|
212
|
+
padding: 4px;
|
|
213
|
+
|
|
214
|
+
&:hover {
|
|
215
|
+
background: rgba(0, 0, 0, .08);
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.logout-icon {
|
|
219
|
+
width: 16px;
|
|
220
|
+
height: 16px;
|
|
221
|
+
margin-right: 8px;
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
}
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
import { Layout, Menu, MenuProps, Popover } from 'antd';
|
|
3
|
+
import "./index.scss"
|
|
4
|
+
|
|
5
|
+
export interface LiosLayoutlProps {
|
|
6
|
+
appName: string;
|
|
7
|
+
children: any;
|
|
8
|
+
menuList: any;
|
|
9
|
+
onMenuClick: (item: any) => void;
|
|
10
|
+
selectedKeys: string[];
|
|
11
|
+
actions?: any[];
|
|
12
|
+
user?: {
|
|
13
|
+
name: string,
|
|
14
|
+
avatar: string,
|
|
15
|
+
tenantName: string
|
|
16
|
+
};
|
|
17
|
+
logoutUrl?: string
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export default function LiosLayout(props: LiosLayoutlProps) {
|
|
21
|
+
const {
|
|
22
|
+
appName,
|
|
23
|
+
menuList,
|
|
24
|
+
onMenuClick,
|
|
25
|
+
selectedKeys,
|
|
26
|
+
actions,
|
|
27
|
+
user,
|
|
28
|
+
logoutUrl
|
|
29
|
+
} = props
|
|
30
|
+
|
|
31
|
+
const {
|
|
32
|
+
name,
|
|
33
|
+
avatar,
|
|
34
|
+
tenantName,
|
|
35
|
+
} = user || {}
|
|
36
|
+
const [openKeys, setOpenKeys] = useState<any>([]);
|
|
37
|
+
|
|
38
|
+
const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
|
|
39
|
+
setOpenKeys(keys);
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
const UserCard = () => {
|
|
43
|
+
return <div className='lios-user-card'>
|
|
44
|
+
<div className='user-info'>
|
|
45
|
+
<img
|
|
46
|
+
className="author"
|
|
47
|
+
src={avatar}
|
|
48
|
+
/>
|
|
49
|
+
<div className="name">
|
|
50
|
+
{name}
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
{tenantName && <div className='lios-tenant'>
|
|
55
|
+
<div className='tenant-label'>租户</div>
|
|
56
|
+
<div className='tenant-value'>{tenantName}</div>
|
|
57
|
+
</div>}
|
|
58
|
+
|
|
59
|
+
{logoutUrl && <div className='lios-logout' onClick={() => {
|
|
60
|
+
location.href = logoutUrl;
|
|
61
|
+
}}>
|
|
62
|
+
<svg className='logout-icon' viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5022" width="16" height="16"><path d="M295.589 239.512c17.942-12.888 42.935-8.79 55.823 9.153 12.888 17.942 8.79 42.935-9.153 55.823C266.667 358.783 221 445.786 221 540.488 221 700.92 351.272 831 512 831s291-130.08 291-290.512c0-94.663-45.63-181.634-121.17-235.935-17.937-12.895-22.026-37.89-9.131-55.827 12.894-17.938 37.889-22.026 55.827-9.132C824.752 308.766 883 419.788 883 540.488 883 745.13 716.884 911 512 911S141 745.13 141 540.488c0-120.75 58.297-231.812 154.589-300.976z" fill="currentColor" p-id="5023"></path><path d="M512 113c21.87 0 39.641 17.552 39.995 39.339L552 153v297c0 22.091-17.909 40-40 40-21.87 0-39.641-17.552-39.995-39.339L472 450V153c0-22.091 17.909-40 40-40z" fill="currentColor" p-id="5024"></path></svg>
|
|
63
|
+
退出登录
|
|
64
|
+
</div>}
|
|
65
|
+
</div >
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
return (<Layout>
|
|
69
|
+
<div className="lios-header">
|
|
70
|
+
|
|
71
|
+
<div className="background">
|
|
72
|
+
<img className="background-img" src="https://pic.imgdb.cn/item/64813de01ddac507cc192a6e.jpg" alt="" />
|
|
73
|
+
<div className="background-mask" />
|
|
74
|
+
</div>
|
|
75
|
+
|
|
76
|
+
<strong className="lios-logo">
|
|
77
|
+
<div className="img">
|
|
78
|
+
LiOS
|
|
79
|
+
</div>
|
|
80
|
+
<div className="interval" />
|
|
81
|
+
<div className="app-list">
|
|
82
|
+
<div className="current">
|
|
83
|
+
{appName}
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</strong>
|
|
87
|
+
<div className='lios-header-fill' />
|
|
88
|
+
|
|
89
|
+
<div className='lios-header-actions'>
|
|
90
|
+
{actions?.map((item, index) => {
|
|
91
|
+
return <div className='actions-item' key={index}>
|
|
92
|
+
{item}
|
|
93
|
+
</div>
|
|
94
|
+
})}
|
|
95
|
+
</div>
|
|
96
|
+
|
|
97
|
+
<Popover placement="bottom" content={<UserCard />} arrow={false} trigger="click">
|
|
98
|
+
<div className="lios-header-user">
|
|
99
|
+
<img
|
|
100
|
+
className="author"
|
|
101
|
+
src={avatar}
|
|
102
|
+
/>
|
|
103
|
+
<div className="name">
|
|
104
|
+
{name}
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
</Popover>
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
<div className="lios-main">
|
|
111
|
+
<div className="lios-side">
|
|
112
|
+
<Menu
|
|
113
|
+
mode="inline"
|
|
114
|
+
openKeys={openKeys}
|
|
115
|
+
onOpenChange={onOpenChange}
|
|
116
|
+
style={{ width: 256 }}
|
|
117
|
+
items={menuList}
|
|
118
|
+
onClick={(item): any => {
|
|
119
|
+
onMenuClick && onMenuClick(item)
|
|
120
|
+
}}
|
|
121
|
+
selectedKeys={selectedKeys}
|
|
122
|
+
/>
|
|
123
|
+
</div>
|
|
124
|
+
<div className="lios-content">
|
|
125
|
+
{props.children}
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
</Layout>
|
|
129
|
+
)
|
|
130
|
+
}
|
package/src/index.tsx
CHANGED