cfel-base-components 2.4.1 → 2.4.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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/layout/index.tsx +226 -194
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cfel-base-components",
3
- "version": "2.4.1",
3
+ "version": "2.4.2",
4
4
  "description": "cfel-base-components",
5
5
  "main": "/src/index.tsx",
6
6
  "types": "src/index.d.ts",
package/src/components/layout/index.tsx CHANGED
@@ -1,13 +1,13 @@
1
- import React, { useEffect, useState } from 'react'
2
- import { Layout, Menu, MenuProps, Popover } from 'antd';
3
- import { SwapOutlined, FormOutlined } from '@ant-design/icons';
4
- import "./index.scss"
1
+ import React, { useEffect, useState } from "react";
2
+ import { Layout, Menu, MenuProps, Popover } from "antd";
3
+ import { SwapOutlined, FormOutlined } from "@ant-design/icons";
4
+ import "./index.scss";
5
5
 
6
6
  const currencyList = [
7
- { value: 'JPY', label: '日元', icon: '￥' },
8
- { value: 'USD', label: '美元', icon: "$" },
9
- { value: 'CNY', label: '人民币', icon: '￥' }
10
- ]
7
+ { value: "JPY", label: "日元", icon: "￥" },
8
+ { value: "USD", label: "美元", icon: "$" },
9
+ { value: "CNY", label: "人民币", icon: "￥" },
10
+ ];
11
11
  export interface LiosLayoutlProps {
12
12
  appName?: any;
13
13
  productCode: string;
@@ -17,34 +17,34 @@ export interface LiosLayoutlProps {
17
17
  selectedKeys: string[];
18
18
  actions?: any[];
19
19
  user?: {
20
- name: string,
21
- avatar: string,
22
- tenantName: string,
23
- role: any[]
20
+ name: string;
21
+ avatar: string;
22
+ tenantName: string;
23
+ role: any[];
24
24
  };
25
25
  custom?: {
26
- type: string,
27
- isCompleted: number,
28
- isAudited: number,
29
- hrefUrl: string,
26
+ type: string;
27
+ isCompleted: number;
28
+ isAudited: number;
29
+ hrefUrl: string;
30
30
  historyAction?: any;
31
- }
31
+ };
32
32
  myWalletInfo?: {
33
- availableCashAmount: string,
34
- availableAmount: string,
35
- currency: string
36
- }
33
+ availableCashAmount: string;
34
+ availableAmount: string;
35
+ currency: string;
36
+ };
37
37
  amountInfo?: {
38
- residueNum: string,
39
- currencyCode: string
40
- }
41
- myWalletInfoAction?: Function,
42
- logoutUrl?: string,
43
- switchTenantUrl?: string,
44
- defaultOpenKeys?: string[],
45
- productList?: any,
46
- logoUrl?: string,
47
- isHideHeader?: boolean //是否隐藏header
38
+ residueNum: string;
39
+ currencyCode: string;
40
+ };
41
+ myWalletInfoAction?: Function;
42
+ logoutUrl?: string;
43
+ switchTenantUrl?: string;
44
+ defaultOpenKeys?: string[];
45
+ productList?: any;
46
+ logoUrl?: string;
47
+ isHideHeader?: boolean; //是否隐藏header
48
48
  }
49
49
 
50
50
  export default function LiosLayout(props: LiosLayoutlProps) {
@@ -65,32 +65,15 @@ export default function LiosLayout(props: LiosLayoutlProps) {
65
65
  myWalletInfo,
66
66
  amountInfo,
67
67
  myWalletInfoAction,
68
- isHideHeader
69
- } = props
68
+ isHideHeader,
69
+ } = props;
70
70
 
71
- const {
72
- name,
73
- avatar,
74
- tenantName,
75
- role,
76
- } = user || {}
77
- const {
78
- isCompleted,
79
- isAudited,
80
- hrefUrl,
81
- historyAction
82
- } = custom || {}
71
+ const { name, avatar, tenantName, role } = user || {};
72
+ const { isCompleted, isAudited, hrefUrl, historyAction } = custom || {};
83
73
 
84
- const {
85
- availableCashAmount,
86
- availableAmount,
87
- currency
88
- } = myWalletInfo || {}
74
+ const { availableCashAmount, availableAmount, currency } = myWalletInfo || {};
89
75
 
90
- const {
91
- residueNum,
92
- currencyCode
93
- } = amountInfo || {}
76
+ const { residueNum, currencyCode } = amountInfo || {};
94
77
 
95
78
  const [openKeys, setOpenKeys] = useState<any>(defaultOpenKeys || []);
96
79
  // const [currentProduct, setCurrentProduct] = useState<any>({});
@@ -99,201 +82,252 @@ export default function LiosLayout(props: LiosLayoutlProps) {
99
82
 
100
83
  const [collapsed, setCollapsed] = useState(false);
101
84
 
102
-
103
85
  // useEffect(() => {
104
86
  // if (!productList) return
105
87
  // let cp = productList?.filter((i: any) => i.productCode == productCode)[0]
106
88
  // setCurrentProduct(cp)
107
89
  // }, [productList])
108
90
 
109
- const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
91
+ const onOpenChange: MenuProps["onOpenChange"] = (keys) => {
110
92
  setOpenKeys(keys);
111
93
  };
112
94
  const editUserInfo = () => {
113
- const { origin } = window.location
95
+ const { origin } = window.location;
114
96
  if (historyAction) {
115
97
  historyAction?.push({
116
- pathname: hrefUrl
98
+ pathname: hrefUrl,
117
99
  });
118
100
  } else {
119
- window.location.href = origin + hrefUrl
101
+ window.location.href = origin + hrefUrl;
120
102
  }
121
-
122
- }
103
+ };
123
104
  const currencyText = (currencyText: any) => {
124
- let text = ''
105
+ let text = "";
125
106
  currencyList.some((item: any) => {
126
107
  if (item.value == currencyText) {
127
- text = item.icon
128
- return true
108
+ text = item.icon;
109
+ return true;
129
110
  }
130
- })
131
- return text
132
- }
111
+ });
112
+ return text;
113
+ };
133
114
 
134
115
  const UserCard = () => {
135
- return <div className='user-card'>
136
- <div className='user-info'>
137
- <img
138
-
139
- className="author"
140
- src={avatar}
141
- />
142
- <div className='user-info-right'>
143
- <span className='name'>{name}</span>
144
- <div className='role-list'>
145
- {role?.map((i) => <span className='role-item' key={i}>
146
- {i}
147
- </span>)}
116
+ return (
117
+ <div className="user-card">
118
+ <div className="user-info">
119
+ <img className="author" src={avatar} />
120
+ <div className="user-info-right">
121
+ <span className="name">{name}</span>
122
+ <div className="role-list">
123
+ {role?.map((i) => (
124
+ <span className="role-item" key={i}>
125
+ {i}
126
+ </span>
127
+ ))}
128
+ </div>
148
129
  </div>
149
130
  </div>
150
- </div>
151
131
 
152
- {
153
- myWalletInfo && <div className='lios-userInfo'>
154
- <div className='lios-li'>
155
- <div className='lios-key'>现金余额</div>
156
- <div className='lios-value'>
157
- <span>{currencyText(currency)}</span>
158
- {availableCashAmount || '加载中...'}
132
+ {myWalletInfo && (
133
+ <div className="lios-userInfo">
134
+ <div className="lios-li">
135
+ <div className="lios-key">现金余额</div>
136
+ <div className="lios-value">
137
+ <span>{currencyText(currency)}</span>
138
+ {availableCashAmount || "加载中..."}
139
+ </div>
159
140
  </div>
160
- </div>
161
- <div className='lios-li'>
162
- <div className='lios-key'>可用额度</div>
163
- <div className='lios-value'><span>{currencyText(currency)}</span>
164
- {availableAmount || '加载中...'}
141
+ <div className="lios-li">
142
+ <div className="lios-key">可用额度</div>
143
+ <div className="lios-value">
144
+ <span>{currencyText(currency)}</span>
145
+ {availableAmount || "加载中..."}
146
+ </div>
165
147
  </div>
148
+ {amountInfo && (
149
+ <div className="lios-li">
150
+ <div className="lios-key">抵用金余额</div>
151
+ <div className="lios-value">
152
+ <span>{currencyText(currencyCode)}</span>
153
+ {residueNum || "加载中..."}
154
+ </div>
155
+ </div>
156
+ )}
166
157
  </div>
167
- {
168
- amountInfo &&
169
- <div className='lios-li'>
170
- <div className='lios-key'>抵用金余额</div>
171
- <div className='lios-value'><span>{currencyText(currencyCode)}</span>
172
- {residueNum || '加载中...'}
158
+ )}
159
+ {custom && (
160
+ <div className="lios-userInfo">
161
+ <div className="lios-li li-flex">
162
+ <div className="lios-key">客户类型</div>
163
+ <div className="lios-value">{custom.type || ""}</div>
164
+ <div
165
+ className="lios-icon"
166
+ onClick={() => {
167
+ editUserInfo();
168
+ }}
169
+ >
170
+ <FormOutlined />
173
171
  </div>
174
172
  </div>
175
- }
176
-
177
- </div>
178
- }
179
- {
180
- custom && <div className='lios-userInfo'>
181
- <div className='lios-li li-flex'>
182
- <div className='lios-key'>客户类型</div>
183
- <div className='lios-value'>{custom.type || ''}</div>
184
- <div className='lios-icon' onClick={(() => { editUserInfo() })}>
185
- <FormOutlined />
173
+ <div className="lios-li">
174
+ <div className="lios-key">是否审核</div>
175
+ <div className="lios-value">{isAudited ? "是" : "否"}</div>
176
+ </div>
177
+ <div className="lios-li">
178
+ <div className="lios-key">是否资料完备</div>
179
+ <div className="lios-value">{isCompleted ? "是" : "否"}</div>
186
180
  </div>
187
181
  </div>
188
- <div className='lios-li'>
189
- <div className='lios-key'>是否审核</div>
190
- <div className='lios-value'>{isAudited ? '是' : '否'}</div>
191
- </div>
192
- <div className='lios-li'>
193
- <div className='lios-key'>是否资料完备</div>
194
- <div className='lios-value'>{isCompleted ? '是' : '否'}</div>
195
- </div>
196
- </div>
197
- }
182
+ )}
198
183
 
199
- {tenantName && <div className='lios-tenant'>
200
- <div className='tenant-label'>租户</div>
201
- <div className='tenant-switch'>
202
- <div className='tenant-value'>{tenantName}</div>
203
- {
204
- switchTenantUrl && <div className='tenant-icon' onClick={() => {
205
- location.href = switchTenantUrl;
206
- }}>
207
- <SwapOutlined />
184
+ {tenantName && (
185
+ <div className="lios-tenant">
186
+ <div className="tenant-label">租户</div>
187
+ <div className="tenant-switch">
188
+ <div className="tenant-value">{tenantName}</div>
189
+ {switchTenantUrl && (
190
+ <div
191
+ className="tenant-icon"
192
+ onClick={() => {
193
+ location.href = switchTenantUrl;
194
+ }}
195
+ >
196
+ <SwapOutlined />
197
+ </div>
198
+ )}
208
199
  </div>
209
- }
210
- </div>
211
- </div>}
200
+ </div>
201
+ )}
212
202
 
213
- {logoutUrl && <div className='lios-logout' onClick={() => {
214
- location.href = logoutUrl;
215
- }}>
216
- <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>
217
- 退出登录
218
- </div>}
219
- </div >
220
- }
203
+ {logoutUrl && (
204
+ <div
205
+ className="lios-logout"
206
+ onClick={() => {
207
+ location.href = logoutUrl;
208
+ }}
209
+ >
210
+ <svg
211
+ className="logout-icon"
212
+ viewBox="0 0 1024 1024"
213
+ version="1.1"
214
+ xmlns="http://www.w3.org/2000/svg"
215
+ p-id="5022"
216
+ width="16"
217
+ height="16"
218
+ >
219
+ <path
220
+ 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"
221
+ fill="currentColor"
222
+ p-id="5023"
223
+ ></path>
224
+ <path
225
+ 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"
226
+ fill="currentColor"
227
+ p-id="5024"
228
+ ></path>
229
+ </svg>
230
+ 退出登录
231
+ </div>
232
+ )}
233
+ </div>
234
+ );
235
+ };
221
236
 
222
237
  const ProductListFunc = () => {
223
- return <div className='app-list-other'>
224
- {productList?.map((item) => {
225
- return <div
226
- onClick={() => {
227
- item.productCode != productCode && item?.portalUrl && window.open(item?.portalUrl)
228
- }}
229
- key={item.id}
230
- className={`product-list-item ${item.productCode == productCode ? "current-product" : ""}`}
231
- >
232
- <img src={item?.logoUrl || "https://pic.imgdb.cn/item/64c760291ddac507cc68440a.png"} alt="" />
233
- <div> {item?.productName}</div>
234
- </div>
235
- })}
236
- </div>
237
- }
238
+ return (
239
+ <div className="app-list-other">
240
+ {productList?.map((item) => {
241
+ return (
242
+ <div
243
+ onClick={() => {
244
+ item.productCode != productCode &&
245
+ item?.portalUrl &&
246
+ window.open(item?.portalUrl);
247
+ }}
248
+ key={item.id}
249
+ className={`product-list-item ${
250
+ item.productCode == productCode ? "current-product" : ""
251
+ }`}
252
+ >
253
+ <img
254
+ src={
255
+ item?.logoUrl ||
256
+ "https://pic.imgdb.cn/item/64c760291ddac507cc68440a.png"
257
+ }
258
+ alt=""
259
+ />
260
+ <div> {item?.productName}</div>
261
+ </div>
262
+ );
263
+ })}
264
+ </div>
265
+ );
266
+ };
238
267
 
239
268
  const MenuStyle = {
240
- width: collapsed ? 80 : 240
241
- }
269
+ width: collapsed ? 80 : 240,
270
+ };
242
271
 
243
272
  return (
244
273
  <Layout className="layout-warp">
245
- {
246
- !isHideHeader &&
274
+ {!isHideHeader && (
247
275
  <div className="layout-header">
248
-
276
+
277
+ <div className="background">
278
+ <img
279
+ className="background-img"
280
+ src="https://pic.imgdb.cn/item/64813de01ddac507cc192a6e.jpg"
281
+ alt=""
282
+ />
283
+ <div className="background-mask" />
284
+ </div>
249
285
 
250
286
  <strong className="layout-header-logo">
251
- {logoUrl && <img className="logo-img" src={logoUrl || ''} />}
287
+ {logoUrl && <img className="logo-img" src={logoUrl || ""} />}
252
288
  {logoUrl && appName && <div className="interval" />}
253
- {appName && <div className="app-name">
254
- {appName}
255
- </div>}
289
+ {appName && <div className="app-name">{appName}</div>}
256
290
  </strong>
257
291
 
258
- <div className='layout-header-fill' />
292
+ <div className="layout-header-fill" />
259
293
 
260
- <div className='layout-header-actions'>
294
+ <div className="layout-header-actions">
261
295
  {actions?.map((item, index) => {
262
- return <div className='actions-item' key={index}>
263
- {item}
264
- </div>
296
+ return (
297
+ <div className="actions-item" key={index}>
298
+ {item}
299
+ </div>
300
+ );
265
301
  })}
266
302
  </div>
267
303
 
268
- <Popover placement="bottom" content={<UserCard />} arrow={false} trigger="click"
269
- onOpenChange={((e) => {
270
- if (!e) return
271
- myWalletInfoAction && myWalletInfoAction()
272
- })}>
304
+ <Popover
305
+ placement="bottom"
306
+ content={<UserCard />}
307
+ arrow={false}
308
+ trigger="click"
309
+ onOpenChange={(e) => {
310
+ if (!e) return;
311
+ myWalletInfoAction && myWalletInfoAction();
312
+ }}
313
+ >
273
314
  <div className="layout-header-user">
274
- <img
275
- className="author"
276
- src={avatar}
277
- />
278
- <div className="name">
279
- {name}
280
- </div>
315
+ <img className="author" src={avatar} />
316
+ <div className="name">{name}</div>
281
317
  </div>
282
318
  </Popover>
283
319
  </div>
284
- }
320
+ )}
285
321
  <div className="layout-main">
286
- {
287
- Array.isArray(menuList) &&
288
- menuList.length > 0 &&
322
+ {Array.isArray(menuList) && menuList.length > 0 && (
289
323
  <Sider
290
324
  className="layout-side"
291
325
  theme={"light"}
292
326
  collapsible
293
327
  collapsed={collapsed}
294
328
  width={240}
295
- onCollapse={(value) => setCollapsed(value)}>
296
-
329
+ onCollapse={(value) => setCollapsed(value)}
330
+ >
297
331
  <Menu
298
332
  mode="inline"
299
333
  openKeys={openKeys}
@@ -301,16 +335,14 @@ export default function LiosLayout(props: LiosLayoutlProps) {
301
335
  items={menuList}
302
336
  style={MenuStyle}
303
337
  onClick={(item): any => {
304
- onMenuClick && onMenuClick(item)
338
+ onMenuClick && onMenuClick(item);
305
339
  }}
306
340
  selectedKeys={selectedKeys}
307
341
  />
308
342
  </Sider>
309
- }
310
- <div className="layout-content">
311
- {props.children}
312
- </div>
343
+ )}
344
+ <div className="layout-content">{props.children}</div>
313
345
  </div>
314
346
  </Layout>
315
- )
316
- }
347
+ );
348
+ }