cfel-base-components 2.5.51 → 2.5.52
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 +151 -83
- package/package.json +1 -1
- package/src/components/layout/index.tsx +83 -161
package/demo/src/index.jsx
CHANGED
|
@@ -1,128 +1,200 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { createRoot } from
|
|
3
|
-
import style from
|
|
4
|
-
import { SwapOutlined, QqOutlined, WeiboOutlined } from
|
|
5
|
-
import { ConfigProvider } from
|
|
6
|
-
import
|
|
7
|
-
import Layout from
|
|
8
|
-
import LayoutConsole from
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { createRoot } from 'react-dom/client'
|
|
3
|
+
import style from './index.module.less'
|
|
4
|
+
import { SwapOutlined, QqOutlined, WeiboOutlined } from '@ant-design/icons'
|
|
5
|
+
import { ConfigProvider } from 'antd'
|
|
6
|
+
import './index.scss'
|
|
7
|
+
import Layout from '../../src/components/layout'
|
|
8
|
+
import LayoutConsole from '../../src/components/layout-console'
|
|
9
9
|
// import Account from '../../src/components/universal-pages/account';
|
|
10
10
|
// import AccountInfo from '../../src/components/universal-pages/accountInfo';
|
|
11
|
-
import CpcRole from
|
|
12
|
-
import CpcRoleInfo from
|
|
13
|
-
import ProTable from
|
|
14
|
-
import PageContainer from
|
|
11
|
+
import CpcRole from '../../src/components/universal-pages/cpcRole'
|
|
12
|
+
import CpcRoleInfo from '../../src/components/universal-pages/cpcRoleInfo'
|
|
13
|
+
import ProTable from '../../src/components/base-component/ProTable'
|
|
14
|
+
import PageContainer from '../../src/components/base-component/PageContainer'
|
|
15
15
|
|
|
16
|
-
const
|
|
16
|
+
const menu = [
|
|
17
17
|
{
|
|
18
|
-
label:
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
label: '云厂商',
|
|
19
|
+
icon: <i className="iconfont icon-wangluo" />,
|
|
20
|
+
key: 'cloud-list',
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
label: '产品模型',
|
|
24
|
+
icon: <i className="iconfont icon-jiqun" />,
|
|
25
|
+
key: 'catalog',
|
|
21
26
|
children: [
|
|
22
27
|
{
|
|
23
|
-
label:
|
|
24
|
-
key:
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
28
|
+
label: '产品模型',
|
|
29
|
+
key: 'product-list',
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
label: '商品模型',
|
|
33
|
+
key: 'commodity-list',
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
label: '定价项列表',
|
|
37
|
+
key: 'entity-list',
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
label: '资源类型管理',
|
|
41
|
+
key: 'rsourceType-list',
|
|
42
|
+
},
|
|
43
|
+
],
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
label: '数据字典',
|
|
47
|
+
icon: <i className="iconfont icon-shujuzidian" />,
|
|
48
|
+
key: 'dictionary-list',
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
label: '实例管理',
|
|
52
|
+
icon: <i className="iconfont icon-moxing-miaobian" />,
|
|
53
|
+
children: [
|
|
54
|
+
{
|
|
55
|
+
label: '容器镜像服务管理',
|
|
56
|
+
key: 'instance-list',
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
label: 'Kaas服务管理',
|
|
60
|
+
key: 'cluster-puhui',
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
label: '代理服务管理',
|
|
64
|
+
key: 'proxy-manage',
|
|
39
65
|
},
|
|
40
66
|
{
|
|
41
|
-
label:
|
|
42
|
-
key:
|
|
67
|
+
label: '控制台首页文档管理',
|
|
68
|
+
key: 'console-doc',
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
label: '轻量云注册管理',
|
|
72
|
+
key: 'register-manage',
|
|
43
73
|
},
|
|
44
74
|
],
|
|
45
75
|
},
|
|
76
|
+
|
|
46
77
|
{
|
|
47
|
-
label:
|
|
48
|
-
key:
|
|
49
|
-
icon: <
|
|
78
|
+
label: 'API管理',
|
|
79
|
+
key: 'apiAction',
|
|
80
|
+
icon: <i className="iconfont icon-API" />,
|
|
50
81
|
children: [
|
|
51
82
|
{
|
|
52
|
-
label:
|
|
53
|
-
key:
|
|
83
|
+
label: 'API 应用管理',
|
|
84
|
+
key: 'api-app-list',
|
|
54
85
|
},
|
|
55
86
|
{
|
|
56
|
-
label:
|
|
57
|
-
key:
|
|
87
|
+
label: 'API 分组管理',
|
|
88
|
+
key: 'group-list',
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
label: 'API 接口管理',
|
|
92
|
+
key: 'api-route-list',
|
|
58
93
|
},
|
|
59
94
|
],
|
|
60
95
|
},
|
|
61
96
|
{
|
|
62
|
-
label:
|
|
63
|
-
key:
|
|
64
|
-
icon: <
|
|
97
|
+
label: '消息中心',
|
|
98
|
+
key: 'msgAction',
|
|
99
|
+
icon: <i className="iconfont icon-xiaoxi" />,
|
|
65
100
|
children: [
|
|
66
101
|
{
|
|
67
|
-
label:
|
|
68
|
-
key:
|
|
102
|
+
label: '消息管理',
|
|
103
|
+
key: 'send-list',
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
label: '事件点管理',
|
|
107
|
+
key: 'event-list',
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
label: '消息模版管理',
|
|
111
|
+
key: 'msgtemplate-list',
|
|
69
112
|
},
|
|
70
113
|
{
|
|
71
|
-
label:
|
|
72
|
-
key:
|
|
114
|
+
label: '邮件账号管理',
|
|
115
|
+
key: 'mail-list',
|
|
73
116
|
},
|
|
74
117
|
],
|
|
75
118
|
},
|
|
76
119
|
{
|
|
77
|
-
label:
|
|
78
|
-
key:
|
|
79
|
-
icon: <
|
|
120
|
+
label: '权限资源配置',
|
|
121
|
+
key: 'menuAction',
|
|
122
|
+
icon: <i className="iconfont icon-qingdan" />,
|
|
123
|
+
children: [
|
|
124
|
+
{
|
|
125
|
+
label: '菜单管理',
|
|
126
|
+
key: 'menuControlList',
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
label: '权限策略管理',
|
|
130
|
+
key: 'strategy-list',
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
label: '权限规则管理',
|
|
134
|
+
key: 'rule-list',
|
|
135
|
+
},
|
|
136
|
+
],
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
label: '配额管理',
|
|
140
|
+
icon: <i className="iconfont icon-peie" />,
|
|
141
|
+
key: 'quotaList',
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
label: '库存管理',
|
|
145
|
+
icon: <i className="iconfont icon-peie" />,
|
|
146
|
+
key: 'inventoryList',
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
label: '权限管理',
|
|
150
|
+
key: 'authority',
|
|
151
|
+
icon: <i className="iconfont icon-shezhi" />,
|
|
80
152
|
children: [
|
|
81
153
|
{
|
|
82
|
-
label:
|
|
83
|
-
key:
|
|
154
|
+
label: '账号列表',
|
|
155
|
+
key: 'account-list',
|
|
84
156
|
},
|
|
85
157
|
{
|
|
86
|
-
label:
|
|
87
|
-
key:
|
|
158
|
+
label: '角色列表',
|
|
159
|
+
key: 'role-list',
|
|
88
160
|
},
|
|
89
161
|
],
|
|
90
162
|
},
|
|
91
|
-
]
|
|
163
|
+
]
|
|
92
164
|
|
|
93
165
|
const App = () => {
|
|
94
166
|
const columns = [
|
|
95
167
|
{
|
|
96
|
-
title:
|
|
97
|
-
dataIndex:
|
|
98
|
-
key:
|
|
168
|
+
title: '名称',
|
|
169
|
+
dataIndex: 'name',
|
|
170
|
+
key: 'name',
|
|
99
171
|
},
|
|
100
172
|
{
|
|
101
|
-
title:
|
|
102
|
-
dataIndex:
|
|
103
|
-
key:
|
|
173
|
+
title: '描述',
|
|
174
|
+
dataIndex: 'description',
|
|
175
|
+
key: 'description',
|
|
104
176
|
},
|
|
105
177
|
{
|
|
106
|
-
title:
|
|
107
|
-
dataIndex:
|
|
108
|
-
key:
|
|
178
|
+
title: '状态',
|
|
179
|
+
dataIndex: 'status',
|
|
180
|
+
key: 'status',
|
|
109
181
|
},
|
|
110
182
|
{
|
|
111
|
-
title:
|
|
183
|
+
title: '操作',
|
|
112
184
|
width: 120,
|
|
113
|
-
fixed:
|
|
185
|
+
fixed: 'right',
|
|
114
186
|
render: (row) => (
|
|
115
187
|
<a
|
|
116
188
|
onClick={() => {
|
|
117
|
-
setEditingData(row)
|
|
118
|
-
setInstanceDetailOpen(true)
|
|
189
|
+
setEditingData(row)
|
|
190
|
+
setInstanceDetailOpen(true)
|
|
119
191
|
}}
|
|
120
192
|
>
|
|
121
193
|
详情
|
|
122
194
|
</a>
|
|
123
195
|
),
|
|
124
196
|
},
|
|
125
|
-
]
|
|
197
|
+
]
|
|
126
198
|
|
|
127
199
|
return (
|
|
128
200
|
<ConfigProvider
|
|
@@ -145,10 +217,10 @@ const App = () => {
|
|
|
145
217
|
productList={false}
|
|
146
218
|
menuList={menuList}
|
|
147
219
|
type=""
|
|
148
|
-
customAction={()=>{
|
|
149
|
-
history.push(
|
|
220
|
+
customAction={() => {
|
|
221
|
+
history.push('/web/user-info')
|
|
150
222
|
}}
|
|
151
|
-
actions={[
|
|
223
|
+
actions={['动作1', '动作2']}
|
|
152
224
|
>
|
|
153
225
|
{/* <CpcRoleInfo
|
|
154
226
|
isShowTab={{
|
|
@@ -158,16 +230,12 @@ const App = () => {
|
|
|
158
230
|
tableData: false,
|
|
159
231
|
}}></CpcRoleInfo> */}
|
|
160
232
|
<PageContainer>
|
|
161
|
-
<ProTable
|
|
162
|
-
columns={columns}
|
|
163
|
-
nameSpace="device"
|
|
164
|
-
dataSource={[{ name: "1", description: "1", status: "1" }]}
|
|
165
|
-
/>
|
|
233
|
+
<ProTable columns={columns} nameSpace="device" dataSource={[{ name: '1', description: '1', status: '1' }]} />
|
|
166
234
|
</PageContainer>
|
|
167
235
|
</Layout>
|
|
168
236
|
</ConfigProvider>
|
|
169
|
-
)
|
|
170
|
-
}
|
|
171
|
-
const container = document.getElementById(
|
|
172
|
-
const root = createRoot(container)
|
|
173
|
-
root.render(<App />)
|
|
237
|
+
)
|
|
238
|
+
}
|
|
239
|
+
const container = document.getElementById('root')
|
|
240
|
+
const root = createRoot(container)
|
|
241
|
+
root.render(<App />)
|
package/package.json
CHANGED
|
@@ -64,7 +64,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
64
64
|
isHideHeader,
|
|
65
65
|
onCollapse,
|
|
66
66
|
type,
|
|
67
|
-
umiHistory
|
|
67
|
+
umiHistory,
|
|
68
68
|
} = props
|
|
69
69
|
|
|
70
70
|
const findKeyPath = (pathname: string) => {
|
|
@@ -88,9 +88,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
// 初始化选中菜单
|
|
91
|
-
const [selectKey, setSelectKey] = useState<any>(
|
|
92
|
-
findKeyPath('/' + location.pathname.split('/')[2])
|
|
93
|
-
)
|
|
91
|
+
const [selectKey, setSelectKey] = useState<any>(findKeyPath('/' + location.pathname.split('/')[2]))
|
|
94
92
|
|
|
95
93
|
const [infoOpen, setInfoOpen] = useState<string | null>(null)
|
|
96
94
|
|
|
@@ -135,7 +133,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
135
133
|
//在这里找到当前菜单的上层目录
|
|
136
134
|
const paMenu = findParentMenu(menuList, '/' + location.pathname.split('/')[2])
|
|
137
135
|
//去重
|
|
138
|
-
const set = new Set(paMenu.map(item => item.key))
|
|
136
|
+
const set = new Set(paMenu.map((item) => item.key))
|
|
139
137
|
openKeys.forEach((element: string) => {
|
|
140
138
|
set.add(element)
|
|
141
139
|
})
|
|
@@ -148,10 +146,10 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
148
146
|
account: false,
|
|
149
147
|
id: false,
|
|
150
148
|
tenantName: false,
|
|
151
|
-
tenantId: false
|
|
149
|
+
tenantId: false,
|
|
152
150
|
})
|
|
153
151
|
|
|
154
|
-
const onOpenChange: MenuProps['onOpenChange'] = keys => {
|
|
152
|
+
const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
|
|
155
153
|
setOpenKeys(keys)
|
|
156
154
|
}
|
|
157
155
|
|
|
@@ -165,7 +163,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
165
163
|
// 菜单动画
|
|
166
164
|
const collapseNode = () => {
|
|
167
165
|
return {
|
|
168
|
-
height: 0
|
|
166
|
+
height: 0,
|
|
169
167
|
}
|
|
170
168
|
}
|
|
171
169
|
const expandNode = (node: any) => {
|
|
@@ -179,26 +177,26 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
179
177
|
onEnterStart: collapseNode,
|
|
180
178
|
onEnterActive: expandNode,
|
|
181
179
|
onLeaveStart: expandNode,
|
|
182
|
-
onLeaveActive: collapseNode
|
|
180
|
+
onLeaveActive: collapseNode,
|
|
183
181
|
}
|
|
184
182
|
|
|
185
183
|
const verticalMotion = {
|
|
186
184
|
motionName: 'rc-menu-open-zoom',
|
|
187
185
|
motionAppear: true,
|
|
188
186
|
motionEnter: true,
|
|
189
|
-
motionLeave: true
|
|
187
|
+
motionLeave: true,
|
|
190
188
|
}
|
|
191
189
|
|
|
192
190
|
return (
|
|
193
|
-
<Layout className=
|
|
191
|
+
<Layout className="layout-warps">
|
|
194
192
|
{Array.isArray(menuList) && menuList.length > 0 && (
|
|
195
193
|
<Sider
|
|
196
|
-
className=
|
|
194
|
+
className="layout-side"
|
|
197
195
|
collapsible
|
|
198
196
|
trigger={null}
|
|
199
197
|
collapsed={collapsed}
|
|
200
198
|
width={260}
|
|
201
|
-
onCollapse={value => {
|
|
199
|
+
onCollapse={(value) => {
|
|
202
200
|
if (onCollapse) {
|
|
203
201
|
onCollapse(value)
|
|
204
202
|
}
|
|
@@ -206,12 +204,9 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
206
204
|
setCollapsed(value)
|
|
207
205
|
}}
|
|
208
206
|
>
|
|
209
|
-
<div className=
|
|
207
|
+
<div className="layout-side-mask1"></div>
|
|
210
208
|
|
|
211
|
-
<div
|
|
212
|
-
className='header-logo'
|
|
213
|
-
style={{ justifyContent: collapsed ? 'center' : '', paddingLeft: collapsed ? '0' : '' }}
|
|
214
|
-
>
|
|
209
|
+
<div className="header-logo" style={{ justifyContent: collapsed ? 'center' : '', paddingLeft: collapsed ? '0' : '' }}>
|
|
215
210
|
<div
|
|
216
211
|
onClick={() => {
|
|
217
212
|
window.open('/home')
|
|
@@ -237,7 +232,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
237
232
|
{collapsed && (
|
|
238
233
|
<div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
|
|
239
234
|
<div
|
|
240
|
-
className=
|
|
235
|
+
className="close-trigger"
|
|
241
236
|
onClick={() => {
|
|
242
237
|
setCollapsed(false)
|
|
243
238
|
}}
|
|
@@ -250,19 +245,12 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
250
245
|
<div style={{ height: 24 }}></div>
|
|
251
246
|
|
|
252
247
|
<div style={{ width: '100%', padding: '0 16px' }}>
|
|
253
|
-
<Search
|
|
254
|
-
menuList={menuList}
|
|
255
|
-
collapsed={collapsed}
|
|
256
|
-
type={type || ''}
|
|
257
|
-
umiHistory={umiHistory}
|
|
258
|
-
setSelectKey={setSelectKey}
|
|
259
|
-
findKeyPath={findKeyPath}
|
|
260
|
-
/>
|
|
248
|
+
<Search menuList={menuList} collapsed={collapsed} type={type || ''} umiHistory={umiHistory} setSelectKey={setSelectKey} findKeyPath={findKeyPath} />
|
|
261
249
|
</div>
|
|
262
250
|
|
|
263
251
|
{!collapsed && <div style={{ height: 12 }}></div>}
|
|
264
252
|
|
|
265
|
-
<div className=
|
|
253
|
+
<div className="layout-menu">
|
|
266
254
|
<RcMenu
|
|
267
255
|
mode={collapsed ? 'vertical' : 'inline'}
|
|
268
256
|
className={`menu${collapsed ? '-collapsed' : ''}`}
|
|
@@ -276,7 +264,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
276
264
|
onMenuClick(item)
|
|
277
265
|
}
|
|
278
266
|
}}
|
|
279
|
-
triggerSubMenuAction=
|
|
267
|
+
triggerSubMenuAction="hover"
|
|
280
268
|
>
|
|
281
269
|
{menuList.map((item: any) => {
|
|
282
270
|
const isSelected = selectKey.includes(item.key)
|
|
@@ -287,17 +275,13 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
287
275
|
}
|
|
288
276
|
return (
|
|
289
277
|
<SubMenu
|
|
290
|
-
popupClassName=
|
|
278
|
+
popupClassName="rc-menu-submenu-popup"
|
|
291
279
|
key={item.key}
|
|
292
|
-
className=
|
|
280
|
+
className="menu-item-content"
|
|
293
281
|
title={
|
|
294
|
-
<div className=
|
|
295
|
-
<div className=
|
|
296
|
-
<span
|
|
297
|
-
className={`menu-item-icon ${isSelected ? 'submenu-selected' : ''}`}
|
|
298
|
-
>
|
|
299
|
-
{item.icon}
|
|
300
|
-
</span>
|
|
282
|
+
<div className="sub-list">
|
|
283
|
+
<div className="menu-item-inner">
|
|
284
|
+
<span className={`menu-item-icon ${isSelected ? 'submenu-selected' : ''}`}>{item.icon}</span>
|
|
301
285
|
{!collapsed && <span className={classNames}>{item.label}</span>}
|
|
302
286
|
</div>
|
|
303
287
|
</div>
|
|
@@ -314,20 +298,10 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
314
298
|
if (child.children) {
|
|
315
299
|
return (
|
|
316
300
|
<SubMenu
|
|
317
|
-
popupClassName=
|
|
318
|
-
className=
|
|
301
|
+
popupClassName="rc-menu-submenu-popup"
|
|
302
|
+
className="menu-item-content sub-li"
|
|
319
303
|
key={child.key}
|
|
320
|
-
title={
|
|
321
|
-
<div className='sub-list'>
|
|
322
|
-
{!collapsed && (
|
|
323
|
-
<span
|
|
324
|
-
className={`menu-item-label ${isSelected ? 'submenu-selected' : ''}`}
|
|
325
|
-
>
|
|
326
|
-
{child.label}
|
|
327
|
-
</span>
|
|
328
|
-
)}
|
|
329
|
-
</div>
|
|
330
|
-
}
|
|
304
|
+
title={<div className="sub-list">{!collapsed && <span className={`menu-item-label ${isSelected ? 'submenu-selected' : ''}`}>{child.label}</span>}</div>}
|
|
331
305
|
>
|
|
332
306
|
{child.children.map((grandChild: any) => {
|
|
333
307
|
const isSelected = selectKey.includes(grandChild.key)
|
|
@@ -338,16 +312,8 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
338
312
|
}
|
|
339
313
|
}
|
|
340
314
|
return (
|
|
341
|
-
<MenuItem key={grandChild.key} className=
|
|
342
|
-
<div className=
|
|
343
|
-
{!collapsed && (
|
|
344
|
-
<span
|
|
345
|
-
className={`menu-item-label ${isSelected ? 'submenu-selected' : ''}`}
|
|
346
|
-
>
|
|
347
|
-
{grandChild.label}
|
|
348
|
-
</span>
|
|
349
|
-
)}
|
|
350
|
-
</div>
|
|
315
|
+
<MenuItem key={grandChild.key} className="grand-li">
|
|
316
|
+
<div className="menu-item-content">{!collapsed && <span className={`menu-item-label ${isSelected ? 'submenu-selected' : ''}`}>{grandChild.label}</span>}</div>
|
|
351
317
|
</MenuItem>
|
|
352
318
|
)
|
|
353
319
|
})}
|
|
@@ -355,16 +321,8 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
355
321
|
)
|
|
356
322
|
}
|
|
357
323
|
return (
|
|
358
|
-
<MenuItem key={child.key} className=
|
|
359
|
-
<div className=
|
|
360
|
-
{!collapsed && (
|
|
361
|
-
<span
|
|
362
|
-
className={`menu-item-label ${isSelected ? 'submenu-selected' : ''}`}
|
|
363
|
-
>
|
|
364
|
-
{child.label}
|
|
365
|
-
</span>
|
|
366
|
-
)}
|
|
367
|
-
</div>
|
|
324
|
+
<MenuItem key={child.key} className="sub-li">
|
|
325
|
+
<div className="menu-item-content">{!collapsed && <span className={`menu-item-label ${isSelected ? 'submenu-selected' : ''}`}>{child.label}</span>}</div>
|
|
368
326
|
</MenuItem>
|
|
369
327
|
)
|
|
370
328
|
})}
|
|
@@ -378,11 +336,16 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
378
336
|
classNames += ' submenu-selected'
|
|
379
337
|
}
|
|
380
338
|
return (
|
|
381
|
-
<MenuItem
|
|
339
|
+
<MenuItem
|
|
340
|
+
key={item.key}
|
|
341
|
+
className="menu-item-content"
|
|
342
|
+
style={{
|
|
343
|
+
position: 'relative',
|
|
344
|
+
zIndex: 99,
|
|
345
|
+
}}
|
|
346
|
+
>
|
|
382
347
|
<div>
|
|
383
|
-
<span className={`menu-item-icon ${isSelected ? 'submenu-selected' : ''}`}>
|
|
384
|
-
{item.icon}
|
|
385
|
-
</span>
|
|
348
|
+
<span className={`menu-item-icon ${isSelected ? 'submenu-selected' : ''}`}>{item.icon}</span>
|
|
386
349
|
{!collapsed && <span className={classNames}>{item.label}</span>}
|
|
387
350
|
</div>
|
|
388
351
|
</MenuItem>
|
|
@@ -394,21 +357,21 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
394
357
|
</Sider>
|
|
395
358
|
)}
|
|
396
359
|
|
|
397
|
-
<div className=
|
|
360
|
+
<div className="layout-main">
|
|
398
361
|
{!isHideHeader && (
|
|
399
|
-
<div className=
|
|
362
|
+
<div className="layout-header">
|
|
400
363
|
{appName && (
|
|
401
|
-
<div className=
|
|
364
|
+
<div className="app-name">
|
|
402
365
|
<strong>{appName}</strong>
|
|
403
366
|
</div>
|
|
404
367
|
)}
|
|
405
368
|
|
|
406
|
-
<div className=
|
|
369
|
+
<div className="layout-header-fill" />
|
|
407
370
|
|
|
408
|
-
<div className=
|
|
371
|
+
<div className="layout-header-actions">
|
|
409
372
|
{actions?.map((item, index) => {
|
|
410
373
|
return (
|
|
411
|
-
<div className=
|
|
374
|
+
<div className="actions-item" key={index}>
|
|
412
375
|
{item}
|
|
413
376
|
</div>
|
|
414
377
|
)
|
|
@@ -416,40 +379,33 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
416
379
|
</div>
|
|
417
380
|
|
|
418
381
|
<Popover
|
|
419
|
-
placement=
|
|
382
|
+
placement="bottom"
|
|
420
383
|
content={
|
|
421
|
-
<UserCard
|
|
422
|
-
myWalletInfo={myWalletInfo}
|
|
423
|
-
MyLoginInfo={MyLoginInfo}
|
|
424
|
-
amountInfo={amountInfo}
|
|
425
|
-
customAction={customAction}
|
|
426
|
-
isCopied={isCopied}
|
|
427
|
-
copyTextToClipboard={copyTextToClipboard}
|
|
428
|
-
/>
|
|
384
|
+
<UserCard myWalletInfo={myWalletInfo} MyLoginInfo={MyLoginInfo} amountInfo={amountInfo} customAction={customAction} isCopied={isCopied} copyTextToClipboard={copyTextToClipboard} />
|
|
429
385
|
}
|
|
430
386
|
arrow={false}
|
|
431
|
-
trigger=
|
|
432
|
-
onOpenChange={e => {
|
|
387
|
+
trigger="click"
|
|
388
|
+
onOpenChange={(e) => {
|
|
433
389
|
setInfoOpen(e ? 'up' : 'down')
|
|
434
390
|
if (!e) return
|
|
435
391
|
setIsCopied({
|
|
436
392
|
account: false,
|
|
437
393
|
id: false,
|
|
438
394
|
tenantName: false,
|
|
439
|
-
tenantId: false
|
|
395
|
+
tenantId: false,
|
|
440
396
|
})
|
|
441
397
|
if (myLoginInfoAction) {
|
|
442
398
|
myLoginInfoAction()
|
|
443
399
|
}
|
|
444
400
|
}}
|
|
445
401
|
>
|
|
446
|
-
<div className=
|
|
447
|
-
<img className=
|
|
448
|
-
<div className=
|
|
402
|
+
<div className="layout-header-user">
|
|
403
|
+
<img className="avatar" src={avatar} />
|
|
404
|
+
<div className="name">{name}</div>
|
|
449
405
|
<span
|
|
450
406
|
style={{
|
|
451
407
|
display: 'inline-block',
|
|
452
|
-
marginLeft: '8px'
|
|
408
|
+
marginLeft: '8px',
|
|
453
409
|
}}
|
|
454
410
|
className={`iconfont icon-zhankai ${infoOpen ? (infoOpen === 'up' ? 'up' : 'down') : ''}`}
|
|
455
411
|
></span>
|
|
@@ -457,7 +413,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
457
413
|
</Popover>
|
|
458
414
|
</div>
|
|
459
415
|
)}
|
|
460
|
-
<div className=
|
|
416
|
+
<div className="layout-content">{props.children}</div>
|
|
461
417
|
</div>
|
|
462
418
|
</Layout>
|
|
463
419
|
)
|
|
@@ -465,17 +421,10 @@ export default function LiosLayout(props: LiosLayoutlProps) {
|
|
|
465
421
|
|
|
466
422
|
function Arrow({ collapsed, type }: { collapsed?: boolean; type?: string }) {
|
|
467
423
|
return (
|
|
468
|
-
<svg
|
|
469
|
-
style={{ transform: !collapsed ? 'rotate(180deg)' : 'rotate(0deg)' }}
|
|
470
|
-
viewBox='0 0 1024 1024'
|
|
471
|
-
version='1.1'
|
|
472
|
-
xmlns='http://www.w3.org/2000/svg'
|
|
473
|
-
width='20'
|
|
474
|
-
height='20'
|
|
475
|
-
>
|
|
424
|
+
<svg style={{ transform: !collapsed ? 'rotate(180deg)' : 'rotate(0deg)' }} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
|
|
476
425
|
<path
|
|
477
426
|
fill={type === 'console' ? '#FFFFFF' : '#817F9B'}
|
|
478
|
-
d=
|
|
427
|
+
d="M564.6336 775.168a41.5744 41.5744 0 0 0-13.312-28.672l-230.4-234.4448 229.9904-234.1888a42.0864 42.0864 0 0 0-26.3168-73.0112 42.0864 42.0864 0 0 0-30.6176 11.264L231.0656 481.024a41.984 41.984 0 0 0-2.4576 59.5968l1.9968 2.048 263.7824 265.6256a41.984 41.984 0 0 0 70.2464-33.0752z m254.5152 0a41.472 41.472 0 0 0-13.312-28.672L575.488 512l229.9904-234.1376a41.984 41.984 0 1 0-56.9344-61.7984L485.632 480.9728a42.0864 42.0864 0 0 0-2.4064 59.6992l0.8704 0.9216 0.8704 0.8192 0.4096 0.4096 263.5776 265.4208a41.984 41.984 0 0 0 70.1952-33.0752z"
|
|
479
428
|
></path>
|
|
480
429
|
</svg>
|
|
481
430
|
)
|
|
@@ -492,10 +441,7 @@ type SearchProps = {
|
|
|
492
441
|
function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPath }: SearchProps) {
|
|
493
442
|
useEffect(() => {
|
|
494
443
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
495
|
-
if (
|
|
496
|
-
(navigator.platform.toLowerCase().includes('mac') ? event.metaKey : event.ctrlKey) &&
|
|
497
|
-
event.key.toLowerCase() === 'k'
|
|
498
|
-
) {
|
|
444
|
+
if ((navigator.platform.toLowerCase().includes('mac') ? event.metaKey : event.ctrlKey) && event.key.toLowerCase() === 'k') {
|
|
499
445
|
event.preventDefault()
|
|
500
446
|
const searchInput = document.querySelector('#menu-input') as HTMLInputElement
|
|
501
447
|
if (searchInput) {
|
|
@@ -554,7 +500,7 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
|
|
|
554
500
|
search(menuList as Router[])
|
|
555
501
|
setSearchResult(searchResults)
|
|
556
502
|
function search(data: Router[]) {
|
|
557
|
-
data.forEach(item => {
|
|
503
|
+
data.forEach((item) => {
|
|
558
504
|
if (typeof item.label === 'string' && item.label.includes(value.toLocaleUpperCase())) {
|
|
559
505
|
searchResults.push(item)
|
|
560
506
|
}
|
|
@@ -568,7 +514,7 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
|
|
|
568
514
|
const enter = (item: Router) => {
|
|
569
515
|
setIsFocused(false)
|
|
570
516
|
//如果搜索历史里面有这个item，就不再添加
|
|
571
|
-
if (searchHistory.findIndex(i => i.key === item.key) === -1) {
|
|
517
|
+
if (searchHistory.findIndex((i) => i.key === item.key) === -1) {
|
|
572
518
|
setSearchHistory([...searchHistory, item])
|
|
573
519
|
}
|
|
574
520
|
//如果是目录就找到目录下第一个菜单进入
|
|
@@ -595,60 +541,45 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
|
|
|
595
541
|
}
|
|
596
542
|
|
|
597
543
|
const deleteHistory = (item: Router) => {
|
|
598
|
-
setSearchHistory(searchHistory.filter(i => i.key !== item.key))
|
|
544
|
+
setSearchHistory(searchHistory.filter((i) => i.key !== item.key))
|
|
599
545
|
}
|
|
600
546
|
return (
|
|
601
547
|
<>
|
|
602
548
|
{collapsed ? (
|
|
603
|
-
<div className=
|
|
604
|
-
<div className=
|
|
605
|
-
<svg
|
|
606
|
-
viewBox='0 0 1024 1024'
|
|
607
|
-
version='1.1'
|
|
608
|
-
xmlns='http://www.w3.org/2000/svg'
|
|
609
|
-
width='18'
|
|
610
|
-
height='18'
|
|
611
|
-
>
|
|
549
|
+
<div className="search-mobile-console">
|
|
550
|
+
<div className="search-icon">
|
|
551
|
+
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
|
|
612
552
|
<path
|
|
613
553
|
fill={type === 'console' ? '#C2B7F6' : '#817F9B'}
|
|
614
|
-
d=
|
|
554
|
+
d="M962.048 907.776l-229.0176-229.0176a384.3072 384.3072 0 1 0-54.272 54.272l229.0176 229.0176a38.4 38.4 0 0 0 54.272-54.272zM436.1216 743.0656a306.944 306.944 0 1 1 306.944-306.944 307.3024 307.3024 0 0 1-306.944 306.944z"
|
|
615
555
|
></path>
|
|
616
556
|
</svg>
|
|
617
557
|
</div>
|
|
618
558
|
</div>
|
|
619
559
|
) : (
|
|
620
|
-
<div className=
|
|
621
|
-
<div className=
|
|
622
|
-
<div className=
|
|
623
|
-
<img src=
|
|
560
|
+
<div className="search-container">
|
|
561
|
+
<div className="search">
|
|
562
|
+
<div className="search-bg-mask">
|
|
563
|
+
<img src="https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-search-bg.png" />
|
|
624
564
|
</div>
|
|
625
565
|
<input
|
|
626
|
-
autoComplete=
|
|
627
|
-
id=
|
|
566
|
+
autoComplete="off"
|
|
567
|
+
id="menu-input"
|
|
628
568
|
value={searchTerm}
|
|
629
|
-
onChange={e => handleSearch(e.target.value)}
|
|
630
|
-
className=
|
|
631
|
-
placeholder=
|
|
569
|
+
onChange={(e) => handleSearch(e.target.value)}
|
|
570
|
+
className="search-input"
|
|
571
|
+
placeholder="搜索菜单..."
|
|
632
572
|
onFocus={() => setIsFocused(true)}
|
|
633
573
|
/>
|
|
634
|
-
<div className=
|
|
635
|
-
<svg
|
|
636
|
-
viewBox='0 0 1024 1024'
|
|
637
|
-
version='1.1'
|
|
638
|
-
xmlns='http://www.w3.org/2000/svg'
|
|
639
|
-
width='18'
|
|
640
|
-
height='18'
|
|
641
|
-
>
|
|
574
|
+
<div className="search-icon">
|
|
575
|
+
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
|
|
642
576
|
<path
|
|
643
577
|
fill={type === 'console' ? '#C2B7F6' : '#817F9B'}
|
|
644
|
-
d=
|
|
578
|
+
d="M962.048 907.776l-229.0176-229.0176a384.3072 384.3072 0 1 0-54.272 54.272l229.0176 229.0176a38.4 38.4 0 0 0 54.272-54.272zM436.1216 743.0656a306.944 306.944 0 1 1 306.944-306.944 307.3024 307.3024 0 0 1-306.944 306.944z"
|
|
645
579
|
></path>
|
|
646
580
|
</svg>
|
|
647
581
|
</div>
|
|
648
|
-
<div
|
|
649
|
-
className='search-command'
|
|
650
|
-
style={{ width: navigator.platform.toLowerCase().includes('mac') ? '' : '50px' }}
|
|
651
|
-
>
|
|
582
|
+
<div className="search-command" style={{ width: navigator.platform.toLowerCase().includes('mac') ? '' : '50px' }}>
|
|
652
583
|
{navigator.platform.toLowerCase().includes('mac') ? '⌘' : 'Ctrl+'}K
|
|
653
584
|
</div>
|
|
654
585
|
</div>
|
|
@@ -656,32 +587,23 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
|
|
|
656
587
|
{isFocused && (
|
|
657
588
|
<>
|
|
658
589
|
{searchTerm ? (
|
|
659
|
-
<List
|
|
660
|
-
split={false}
|
|
661
|
-
className='lists'
|
|
662
|
-
size='small'
|
|
663
|
-
bordered
|
|
664
|
-
dataSource={searchResult}
|
|
665
|
-
renderItem={item => (
|
|
666
|
-
<List.Item onClick={() => enter(item)}>{item.label}</List.Item>
|
|
667
|
-
)}
|
|
668
|
-
/>
|
|
590
|
+
<List split={false} className="lists" size="small" bordered dataSource={searchResult} renderItem={(item) => <List.Item onClick={() => enter(item)}>{item.label}</List.Item>} />
|
|
669
591
|
) : (
|
|
670
592
|
<List
|
|
671
593
|
split={false}
|
|
672
|
-
className=
|
|
673
|
-
header=
|
|
674
|
-
size=
|
|
594
|
+
className="lists"
|
|
595
|
+
header="最近访问"
|
|
596
|
+
size="small"
|
|
675
597
|
bordered
|
|
676
598
|
dataSource={searchHistory}
|
|
677
|
-
renderItem={item => {
|
|
599
|
+
renderItem={(item) => {
|
|
678
600
|
return (
|
|
679
601
|
<div
|
|
680
602
|
className={'search-item'}
|
|
681
603
|
style={{
|
|
682
604
|
display: 'flex',
|
|
683
605
|
justifyContent: 'space-between',
|
|
684
|
-
alignItems: 'center'
|
|
606
|
+
alignItems: 'center',
|
|
685
607
|
}}
|
|
686
608
|
>
|
|
687
609
|
<List.Item onClick={() => enter(item)}>{item.label}</List.Item>
|