cfel-base-components 2.5.44 → 2.5.45

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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cfel-base-components",
3
- "version": "2.5.44",
3
+ "version": "2.5.45",
4
4
  "description": "cfel-base-components",
5
5
  "main": "/src/index.tsx",
6
6
  "types": "src/index.d.ts",
@@ -1,89 +1,367 @@
1
- $header-height: 60px;
2
- $base-color: #c6538c;
1
+ $menuPrefixCls: rc-menu;
3
2
 
4
- body {
5
- overflow: hidden;
3
+ ul {
4
+ list-style: none;
5
+ padding: 0;
6
+ margin: 0;
7
+ }
8
+
9
+ .layout-menu {
10
+ height: calc(100% - 120px);
11
+ overflow-y: scroll;
12
+ .menu{
13
+ padding: 0;
14
+ margin: 0;
15
+ list-style: none;
16
+ cursor: pointer;
17
+
18
+ .rc-menu-submenu-title{
19
+ position: relative;
20
+ }
21
+
22
+ .rc-menu-submenu {
23
+ position: relative;
24
+ }
25
+
26
+ .menu-item-content {
27
+ font-weight: 400;
28
+ font-size: 14px;
29
+ line-height: 52px;
30
+ text-align: left;
31
+ }
32
+
33
+ .sub-menu-item-label {
34
+ padding-left: 11px;
35
+ display: flex;
36
+ }
37
+
38
+ .menu-item-icon {
39
+ display: inline-block;
40
+ height: 22px;
41
+ width: 22px;
42
+ }
43
+
44
+ .menu-item-label {
45
+ display: inline-block;
46
+ padding-left: 12px;
47
+ border: 1px solid transparent;
48
+ color: black;
49
+ }
50
+
51
+ .submenu-selected {
52
+ color: #185DFF;
53
+ font-weight: 500;
54
+ }
55
+
56
+
57
+ .sub-li {
58
+ background: rgba(255, 255, 255, 0.15);
59
+ position: relative;
60
+ z-index: 9;
61
+
62
+ &::before {
63
+ content: '';
64
+ position: absolute;
65
+ left: 31px;
66
+ top: 26px;
67
+ width: 5px;
68
+ height: 5px;
69
+ background: #B4C4DC;
70
+ border-radius: 50%;
71
+ z-index: 1;
72
+ }
73
+
74
+ &::after {
75
+ content: '';
76
+ position: absolute;
77
+ left: 32.8px;
78
+ top: 0 !important;
79
+ width: 1px;
80
+ height: 100%;
81
+ background: #B4C4DC;
82
+ z-index: 0;
83
+ }
84
+
85
+ &:only-child::after {
86
+ display: none;
87
+ }
88
+
89
+ &:last-child::after {
90
+ height: 50%;
91
+ }
92
+
93
+ &:first-child::after {
94
+ top: 26px !important;
95
+ }
96
+
97
+ &.rc-menu-submenu-selected {
98
+ &::before {
99
+ background: #185DFF;
100
+ }
101
+ }
102
+
103
+ &.rc-menu-item-selected {
104
+ &::before {
105
+ background: #185DFF;
106
+ }
107
+ }
108
+
109
+ &:not(.rc-menu-submenu) {
110
+ height: 52px;
111
+ display: flex;
112
+ align-items: center;
113
+ box-shadow: 0px 0px 30px 0px transparent;
114
+
115
+ &.rc-menu-item-selected {
116
+ .menu-item-label {
117
+ display: flex;
118
+ align-items: center;
119
+ padding-left: 12px;
120
+ width: 174px;
121
+ height: 40px;
122
+ background: #C5D6FF;
123
+ border-radius: 10px;
124
+ backdrop-filter: blur(10px);
125
+ transition: all 0.3s ease-in-out;
126
+ }
127
+ }
128
+ }
6
129
  }
7
130
 
8
- .layout-warp {
131
+ .grand-li {
132
+ background: #E0ECFE;
133
+ position: relative;
134
+ z-index: 9;
135
+ height: 52px;
9
136
  display: flex;
137
+ align-items: center;
138
+
139
+
140
+ &::before {
141
+ content: '';
142
+ position: absolute;
143
+ left: 43px;
144
+ top: 50%;
145
+ width: 5px;
146
+ height: 5px;
147
+ background: #B4C4DC;
148
+ border-radius: 50%;
149
+ transform: translateY(-50%);
150
+ z-index: 1;
151
+ }
152
+
153
+ &::after {
154
+ content: '';
155
+ position: absolute;
156
+ left: 45px;
157
+ top: 0;
158
+ width: 1px;
159
+ height: 100%;
160
+ background: #B4C4DC;
161
+ z-index: 0;
162
+ }
163
+
164
+ &:only-child::after {
165
+ display: none;
166
+ }
167
+
168
+ &:last-child::after {
169
+ height: 50%;
170
+ }
171
+
172
+ &:first-child::after {
173
+ top: 26px !important;
174
+ }
175
+
176
+ &.rc-menu-item-selected {
177
+ &::before {
178
+ background: #185DFF;
179
+ }
180
+ }
181
+
182
+ &.rc-menu-item-selected {
183
+ .menu-item-label {
184
+ display: flex;
185
+ align-items: center;
186
+ padding-left: 12px;
187
+ width: 174px;
188
+ height: 40px;
189
+ background: #C5D6FF;
190
+ border-radius: 10px;
191
+ backdrop-filter: blur(10px);
192
+ transition: all 0.3s ease-in-out;
193
+ }
194
+
195
+ &::before {
196
+ background: #185DFF;
197
+ }
198
+ }
199
+ }
10
200
  }
11
201
 
12
- .ant-layout .ant-layout-sider {
13
- background-image: linear-gradient(
14
- -45deg,
15
- rgba(103, 200, 21, 0.5),
16
- rgba(55, 96, 244, 0.5),
17
- rgba(245, 34, 45, 0.7)
18
- );
19
- background-position: center;
20
- // background-color: #fff;
21
- // background-color: #13c2c2;
22
- background-color: #08979c;
23
- // background-color: #531dab;
24
- // background-color: #389e0d;
25
-
26
- .ant-layout-sider-trigger {
27
- background: transparent;
28
- &:hover {
29
- background: rgba(0, 0, 0, 0.12);
202
+ .menu-collapsed{
203
+ display: flex;
204
+ flex-direction: column;
205
+ align-items: center;
206
+ list-style: none;
207
+ cursor: pointer;
208
+
209
+ .menu-item-content{
210
+ font-weight: 400;
211
+ font-size: 14px;
212
+ margin-top: 30px;
213
+ line-height: 24px;
214
+ text-align: left;
30
215
  }
216
+
217
+ }
218
+
219
+ .cpc-icon {
220
+ display: inline-block;
221
+ height: 22px;
222
+ width: 22px;
31
223
  }
224
+
32
225
  }
33
226
 
34
- .layout-side {
35
- height: 100vh;
36
- user-select: none;
227
+
228
+ $header-height: 62px;
229
+ $header-height: 62px;
230
+ $base-color: #c6538c;
231
+
232
+ body {
37
233
  overflow: hidden;
234
+ }
38
235
 
39
- .layout-logo {
40
- cursor: pointer;
41
- height: 60px;
42
- margin: 8px auto;
236
+ .layout-warps {
237
+ display: flex;
238
+ padding: 12px;
239
+ background-color: #f3f6fd;
240
+
241
+ ::-webkit-scrollbar {
242
+ display: none;
243
+ }
244
+
245
+ .trigger {
246
+ margin-right: 16px;
247
+ width: 30px;
248
+ height: 30px;
249
+ background: #f0f4fe;
250
+ box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
251
+ border-radius: 4px;
252
+ border: 1px solid rgba(255, 255, 255, 0.55);
253
+ backdrop-filter: blur(10px);
43
254
  display: flex;
44
255
  justify-content: center;
45
256
  align-items: center;
46
- width: 100%;
47
- z-index: 1;
257
+ }
48
258
 
49
- .logo-img {
50
- position: absolute;
51
- height: 60px;
52
- line-height: 60px;
53
- object-fit: cover;
54
- transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
55
- }
259
+ .close-trigger {
260
+ margin-top: 24px;
261
+ width: 30px;
262
+ height: 30px;
263
+ background: #f0f4fe;
264
+ box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
265
+ border-radius: 4px;
266
+ border: 1px solid rgba(255, 255, 255, 0.55);
267
+ backdrop-filter: blur(10px);
268
+ display: flex;
269
+ justify-content: center;
270
+ align-items: center;
271
+ }
272
+
273
+ .search {
274
+ width: 228px;
275
+ height: 40px;
276
+ box-shadow: inset 0px 2px 1px 0px rgba(0, 0, 0, 0.05), inset 0px -2px 0px 0px rgba(255, 255, 255, 0.3);
277
+ border-radius: 10px;
278
+ backdrop-filter: blur(10px);
279
+ background: url('https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-search-bg.png') no-repeat;
280
+ background-position-x: right;
281
+ position: relative;
56
282
 
57
- .current-logo {
58
- left: 0;
59
- right: 0;
60
- margin: auto;
283
+ .search-input{
284
+ width: 100%;
285
+ height: 100%;
286
+ background: transparent;
287
+ border: none;
288
+ outline: none;
289
+ padding-left: 45px;
290
+ line-height: 32px;
291
+ font-size: 14px;
292
+ color: #7D8295;
61
293
  }
62
294
 
63
- .hide-logo {
64
- left: -500px;
295
+ .search-icon{
296
+ position: absolute;
297
+ left: 12px;
298
+ top: 50%;
299
+ transform: translateY(-50%);
65
300
  }
66
- .hide-sub-logo {
67
- right: -500px;
301
+
302
+ .search-command{
303
+ position: absolute;
304
+ right: 4px;
305
+ top: 50%;
306
+ transform: translateY(-50%);
307
+ width: 40px;
308
+ height: 30px;
309
+ background: #F0F4FE;
310
+ border-radius: 8px;
311
+ border: 1px solid #ECEEFC;
312
+ backdrop-filter: blur(10px);
313
+ display: flex;
314
+ justify-content: center;
315
+ align-items: center;
316
+ font-size: 14px;
317
+ color: #4F4B81;
318
+ line-height: 17px;
68
319
  }
69
320
  }
70
321
 
71
- .layout-menu-container {
72
- height: calc(100vh - 60px - 16px - 48px);
73
- overflow: auto;
74
- .ant-menu {
75
- background: transparent !important;
76
- }
77
- .ant-menu-item-selected {
78
- background: rgba(255, 255, 255, 0.3) !important;
322
+ .search-mobile{
323
+ width: 40px;
324
+ height: 40px;
325
+ background: #F8F8FB;
326
+ box-shadow: inset 0px 2px 1px 0px rgba(0,0,0,0.05), inset 0px -2px 0px 0px #FFFFFF;
327
+ border-radius: 10px;
328
+ backdrop-filter: blur(10px);
329
+ display: flex;
330
+ justify-content: center;
331
+ align-items: center;
332
+ cursor: pointer;
333
+ }
334
+ }
335
+
336
+ .layout-side {
337
+ background: url('https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-bg-other.png') no-repeat !important;
338
+ height: calc(100vh - 24px);
339
+ user-select: none;
340
+ border: 2px solid white;
341
+ border-radius: 16px;
342
+ padding-top: 24px;
343
+ overflow: visible;
344
+
345
+ .header-logo {
346
+ padding-left: 16px;
347
+ display: flex;
348
+ cursor: pointer;
349
+ height: 30px;
350
+
351
+ .logo-base {
352
+ height: 30px;
353
+ width: 105px;
79
354
  }
80
355
  }
81
356
  }
82
357
 
83
358
  .layout-header {
84
- height: $header-height;
85
- background: white;
86
359
  z-index: 1;
360
+ height: $header-height;
361
+ background: linear-gradient(223deg, #faf8ff 0%, #ecf2fe 29%, #ffffff 100%);
362
+ box-shadow: inset 0px -1px 0px 0px #edeefd;
363
+ border-radius: 16px;
364
+ border: 1px solid #ffffff;
87
365
  position: relative;
88
366
  display: flex;
89
367
  justify-content: flex-start;
@@ -153,6 +431,7 @@ body {
153
431
  .layout-main {
154
432
  flex: 1;
155
433
  height: 100%;
434
+ padding-left: 12px;
156
435
  overflow: auto;
157
436
  }
158
437
 
@@ -160,10 +439,159 @@ body {
160
439
  width: 100%;
161
440
  height: calc(100vh - #{$header-height});
162
441
  overflow: auto;
442
+ margin-top: 12px;
443
+ border-radius: 16px;
444
+ }
445
+
446
+
447
+ .rc-menu-collapse{
448
+ overflow: hidden;
449
+ transition: height 0.3s ease-out;
450
+ }
451
+
452
+ .rc-menu-hidden{
453
+ height: 0;
454
+ overflow: hidden;
163
455
  }
164
456
 
165
- .ant-menu-submenu-popup {
166
- .ant-menu-item-selected {
167
- background: rgba(255, 255, 255, 0.12) !important;
457
+
458
+
459
+
460
+
461
+ .list{
462
+ left: 0;
463
+ position: absolute;
464
+ width: 100%;
465
+ background: white;
466
+ cursor: pointer;
467
+ z-index: 100;
468
+ }
469
+
470
+ .search-item:hover{
471
+ background-color: ghostwhite;
472
+ border-radius: 7px;
473
+ }
474
+
475
+
476
+
477
+ .#{$menuPrefixCls}-submenu-arrow {
478
+ display: inline-block;
479
+ position: absolute;
480
+ top: 52%;
481
+ right: 16px;
482
+ width: 10px;
483
+ height: 10px;
484
+ transform: translateY(0);
485
+ transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
486
+
487
+ // 当菜单收起时隐藏箭头
488
+ .ant-layout-sider-collapsed & {
489
+ display: none;
490
+ }
491
+
492
+ &::before,
493
+ &::after {
494
+ position: absolute;
495
+ width: 5.5px;
496
+ height: 1.5px;
497
+ background-color: rgba(0, 0, 0, 0.85);
498
+ border-radius: 2px;
499
+ transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
500
+ transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
501
+ content: '';
502
+ }
503
+
504
+ &::before {
505
+ transform: rotate(-45deg) translateX(2.5px);
506
+ }
507
+
508
+ &::after {
509
+ transform: rotate(45deg) translateX(-2.5px);
510
+ }
511
+
512
+ // RTL support
513
+ &.#{$menuPrefixCls}-rtl,
514
+ .#{$menuPrefixCls}-submenu-rtl & {
515
+ right: auto;
516
+ left: 16px;
517
+ }
518
+ }
519
+
520
+ .#{$menuPrefixCls}-submenu-open > .#{$menuPrefixCls}-submenu-title {
521
+ .#{$menuPrefixCls}-submenu-arrow {
522
+ transform: translateY(-3px);
523
+ &::before {
524
+ transform: rotate(45deg) translateX(2.5px);
525
+ }
526
+ &::after {
527
+ transform: rotate(-45deg) translateX(-2.5px);
528
+ }
529
+ }
530
+ }
531
+
532
+ .#{$menuPrefixCls}-submenu-selected {
533
+ > .#{$menuPrefixCls}-submenu-title {
534
+ .#{$menuPrefixCls}-submenu-arrow {
535
+ &::before,
536
+ &::after {
537
+ background-color: #185DFF;
538
+ }
539
+ }
540
+ }
541
+ }
542
+
543
+
544
+
545
+ .#{$menuPrefixCls} {
546
+ &-zoom-enter,
547
+ &-zoom-appear {
548
+ opacity: 0;
549
+ animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
550
+ animation-play-state: paused;
551
+ }
552
+
553
+ &-zoom-leave {
554
+ animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
555
+ animation-play-state: paused;
556
+ }
557
+
558
+ &-zoom-enter#{&}-zoom-enter-active,
559
+ &-zoom-appear#{&}-zoom-appear-active {
560
+ animation-name: rcMenuOpenZoomIn;
561
+ animation-play-state: running;
562
+ }
563
+
564
+ &-zoom-leave#{&}-zoom-leave-active {
565
+ animation-name: rcMenuOpenZoomOut;
566
+ animation-play-state: running;
567
+ }
568
+
569
+ &-zoom-enter,
570
+ &-zoom-appear,
571
+ &-zoom-leave {
572
+ .#{$menuPrefixCls}-submenu-rtl & {
573
+ transform-origin: top right !important;
574
+ }
575
+ }
576
+
577
+ @keyframes rcMenuOpenZoomIn {
578
+ 0% {
579
+ opacity: 0;
580
+ transform: scale(0, 0);
581
+ }
582
+ 100% {
583
+ opacity: 1;
584
+ transform: scale(1, 1);
585
+ }
586
+ }
587
+
588
+ @keyframes rcMenuOpenZoomOut {
589
+ 0% {
590
+ transform: scale(1, 1);
591
+ }
592
+ 100% {
593
+ opacity: 0;
594
+ transform: scale(0, 0);
595
+ }
168
596
  }
169
597
  }