@yelon/bis 20.0.0-beta.0 → 20.0.1

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 (11) hide show
  1. package/fesm2022/bis.mjs +21 -21
  2. package/fesm2022/bis.mjs.map +1 -1
  3. package/fesm2022/layout.mjs +178 -375
  4. package/fesm2022/layout.mjs.map +1 -1
  5. package/fesm2022/yunzai-widgets.mjs +21 -21
  6. package/fesm2022/yunzai-widgets.mjs.map +1 -1
  7. package/layout/index.d.ts +8 -8
  8. package/layout/style/index.less +161 -83
  9. package/package.json +12 -12
  10. package/theme-dark.less +3 -2
  11. package/theme-default.less +11 -11
package/layout/index.d.ts CHANGED
@@ -18,10 +18,9 @@ declare class YunzaiLayoutNavTileComponent {
18
18
  }
19
19
 
20
20
  declare class YunzaiLayoutNavGroupComponent implements OnInit, OnDestroy {
21
- private readonly http;
22
- private destroy$;
23
- private readonly win;
21
+ private $destroy;
24
22
  state: LayoutNavGroupState;
23
+ private http;
25
24
  ngOnInit(): void;
26
25
  open(topic: YunzaiNavTopic): void;
27
26
  ngOnDestroy(): void;
@@ -86,14 +85,15 @@ declare class YunzaiLayoutModule {
86
85
  }
87
86
 
88
87
  declare class YunzaiNavApplicationComponent implements OnInit, OnDestroy {
89
- private readonly config;
90
- private readonly http;
91
- private readonly win;
92
- private readonly i18n;
93
- private readonly destroy$;
88
+ private $destroy;
94
89
  state: LayoutNavApplicationState;
95
90
  get showAllMenu(): boolean;
96
91
  get showMineMenu(): boolean;
92
+ private i18n;
93
+ private http;
94
+ private win;
95
+ private conf;
96
+ private bis;
97
97
  ngOnInit(): void;
98
98
  fetchAllTopic(): void;
99
99
  attachNav(type: 'all' | 'mine' | 'other', topic?: YunzaiNavTopic): void;
package/layout/style/index.less CHANGED
@@ -1,152 +1,205 @@
1
+ @import '@yelon/theme/theme-default.less';
2
+
3
+ :root {
4
+ --primary-color: @primary-color;
5
+ --fade10-primary-color: fade(@primary-color, 10%);
6
+ --fade25-primary-color: fade(@primary-color, 25%);
7
+ }
1
8
 
2
9
  .yz-application {
3
10
  position: fixed;
4
11
  top: @yz-application-top;
5
12
  left: 0;
6
- overflow: hidden;
7
13
  width: @yz-application-width;
8
14
  height: @yz-application-height;
15
+ overflow: hidden;
9
16
  background-color: @yz-application-bgColor;
10
- box-shadow: 0 7px 8px -3px @yz-application-border-shadow;
17
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
11
18
  }
12
19
 
13
20
  .yz-application-topic {
21
+ background-color: var(--fade10-primary-color);
22
+ width: 264px;
23
+ padding: 32px 0 16px;
24
+ float: left;
14
25
  overflow: hidden;
15
- height: @yz-application-height;
16
- background-color: @yz-application-topic-bgColor;
26
+ height: 100%;
17
27
 
18
- .yz-application-topic-list {
19
- overflow-y: auto;
20
- width: calc(100% + 20px);
21
- height: 100%;
28
+ h2 {
29
+ font-size: 22px;
30
+ font-weight: 600;
31
+ line-height: 32px;
32
+ margin: 0 48px 24px;
33
+ color: @yz-application-list-ul-h5-color;
22
34
  }
23
- }
24
35
 
25
- .yz-application-text {
26
- overflow: hidden;
27
- display: block;
28
- margin-left: -12px;
29
- padding: 3px 40px;
30
- font-weight: @yz-application-topic-text-font-weight;
31
- line-height: @yz-application-topic-text-line-height;
32
- color: @yz-application-topic-text-color;
33
- text-overflow: ellipsis;
34
- white-space: nowrap;
35
- transition: 0.2s 0.2s 0.2s 0.2s;
36
+ dl {
37
+ margin: 0;
38
+ max-height: calc(100% - 60px);
39
+ overflow-y: auto;
40
+ width: 284px;
41
+
42
+ dd {
43
+ padding: 0 0 0 48px;
44
+ margin: 0;
45
+ cursor: pointer;
46
+ line-height: 40px;
47
+ display: flex;
48
+ justify-content: flex-start;
49
+ align-items: center;
50
+ width: 100%;
51
+
52
+ b {
53
+ display: block;
54
+ font-weight: normal;
55
+ color: @yz-application-list-ul-h5-color;
56
+ font-size: 14px;
57
+ overflow: hidden;
58
+ white-space: nowrap;
59
+ text-overflow: ellipsis;
60
+ width: calc(100% - 50px);
61
+ }
62
+
63
+ .anticon-right {
64
+ font-size: 10px;
65
+ margin-left: 8px;
66
+ color: @yz-application-list-ul-h5-color;
67
+ }
68
+
69
+ &:hover{
70
+ background: var(--fade25-primary-color);
71
+
72
+ b, .anticon-right {
73
+ color: var(--primary-color);
74
+ font-weight: 600;
75
+ }
76
+ }
77
+ }
78
+ }
36
79
  }
37
80
 
38
81
  .yz-application-text:hover {
82
+ color: var(--primary-color);
39
83
  font-weight: bold;
40
- color: @yz-application-topic-text-hover-color;
41
84
  background: @yz-application-topic-text-hover-bgColor;
42
85
  }
43
86
 
44
87
  .yz-application-container {
45
- overflow: hidden;
46
- height: @yz-application-height;
88
+ float: left;
89
+ width: calc(100% - 264px);
90
+ padding: 36px 40px;
91
+ height: 100%;
92
+
93
+ .ant-input-affix-wrapper{
94
+ background-color: @yz-application-bgColor;
95
+ .ant-input{
96
+ background-color: @yz-application-bgColor;
97
+ color: @yz-application-list-ul-h5-color;
98
+ }
99
+ .ant-input-prefix{
100
+ color: @yz-application-list-ul-h5-color;
101
+ }
102
+ }
103
+ .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
104
+ border-color: var(--primary-color) !important;
105
+ }
106
+ .ant-input-affix-wrapper:focus, .ant-input-affix-wrapper-focused {
107
+ border-color: var(--primary-color) !important;
108
+ box-shadow: 0 0 0 2px var(--fade10-primary-color) !important;
109
+ }
47
110
  }
48
111
 
49
112
  .yz-application-list {
113
+ height: 100%;
50
114
  overflow-y: auto;
51
115
  width: calc(100% + 20px);
52
- height: @yz-application-height - 62px - 20px;
53
- padding: @yz-application-list-padding;
54
-
55
- &.yz-application-list-other {
56
- height: @yz-application-height - 20px;
57
- margin: 10px auto;
58
- }
59
116
 
60
117
  ul {
61
- overflow: hidden;
62
- column-count: 4;
63
118
  width: @yz-application-list-ul-width;
64
119
  padding: @yz-application-list-ul-padding;
120
+ overflow: hidden;
121
+ -moz-column-count: 4; /* Firefox */
122
+ -webkit-column-count: 4; /* Safari and Chrome */
123
+ column-count: 4;
124
+ column-gap: 0;
65
125
 
66
126
  li {
67
- float: left;
68
- width: @yz-application-list-ul-li-width;
69
- break-inside: avoid;
70
- margin-bottom: @yz-application-list-ul-li-margin-bottom;
127
+ //margin-bottom: @yz-application-list-ul-li-margin-bottom;
71
128
  padding: @yz-application-list-ul-li-padding;
72
129
  list-style: none;
130
+ box-sizing: border-box;
131
+ margin-bottom: 38px;
73
132
  -webkit-column-break-inside: avoid;
133
+ -moz-page-break-inside: avoid;
134
+ -moz-column-break-inside: avoid;
135
+ break-inside: avoid;
136
+ padding-right: 24px;
74
137
 
75
138
  h5 {
76
- margin-top: @yz-application-list-ul-h5-margin-top;
77
- font-size: @yz-application-list-ul-h5-font-size;
78
- font-weight: @yz-application-list-ul-h5-font-weight;
79
- line-height: @yz-application-list-ul-h5-line-height;
80
- padding: @yz-application-list-ul-h5-padding;
81
- color: @yz-application-topic-bgColor;
82
- border-bottom: @yz-application-list-ul-h5-border-bottom;
139
+ font-weight: @yz-application-topic-text-font-weight;
140
+ font-size: 16px;
141
+ line-height: @yz-application-list-item-h4-line-height;
142
+ margin-bottom: @yz-application-list-ul-li-margin-bottom;
143
+ color: @yz-application-list-ul-h5-color;
144
+ display: block;
145
+ white-space: nowrap;
146
+ text-overflow: ellipsis;
147
+ overflow: hidden;
83
148
  }
84
149
 
85
150
  a {
86
- overflow: @yz-application-list-ul-a-overflow;
87
151
  display: @yz-application-list-ul-a-display;
88
- padding: @yz-application-list-ul-a-padding;
89
- font-size: @yz-application-list-ul-a-font-size;
90
- line-height: @yz-application-list-ul-a-line-height;
91
- color: @yz-application-list-ul-a-color;
92
- text-overflow: @yz-application-list-ul-a-text-overflow;
93
- white-space: @yz-application-list-ul-a-white-space;
152
+ overflow: @yz-application-list-ul-a-overflow;
153
+ margin: 0 0 16px;
154
+ font-size: 13px;
155
+ line-height: @yz-application-list-ul-h5-line-height;
156
+ width: 100%;
157
+ color: @yz-application-list-ul-h5-color;
158
+ cursor: pointer;
94
159
  }
95
160
 
96
161
  a:hover {
97
- color: @yz-application-list-ul-a-hover-color;
98
- padding: 0 10px;
99
- background: @yz-application-list-ul-a-hover-bgColor;
100
- border-radius: @yz-application-list-ul-a-hover-border-radius;
162
+ color: var(--primary-color);
101
163
  }
102
164
  }
103
165
  }
104
166
  }
105
167
 
106
168
  .yz-application-list-search {
107
- margin: @yz-application-list-search-margin;
169
+ margin: 0 0 24px;
108
170
  }
109
171
 
110
172
  .yz-application-list-item {
111
- h4, p {
112
- overflow: @yz-application-list-item-h4p-overflow;
173
+ h4,
174
+ p {
113
175
  margin: @yz-application-list-item-h4p-margin;
114
- text-overflow: @yz-application-list-item-h4p-text-overflow;
176
+ overflow: @yz-application-list-item-h4p-overflow;
115
177
  white-space: @yz-application-list-item-h4p-white-space;
178
+ text-overflow: @yz-application-list-item-h4p-text-overflow;
116
179
  }
117
180
 
118
181
  h4 {
119
- font-weight: @yz-application-list-item-h4-font-weight;
182
+ font-weight: 600;
120
183
  line-height: @yz-application-list-item-h4-line-height;
121
- color: @yz-application-list-item-h4p-color !important;
184
+ color: @yz-application-list-ul-h5-color !important;
185
+ font-size: 13px;
186
+ margin-bottom: 2px;
122
187
  }
123
188
 
124
189
  p {
125
190
  line-height: @yz-application-list-item-p-line-height;
126
191
  color: #999;
192
+ font-size: 12px;
127
193
  }
128
194
 
129
195
  li:hover {
130
- background: @yz-application-list-item-li-hover-bgColor;
131
- border-radius: @yz-application-list-ul-a-hover-border-radius;
132
-
133
- p {
134
- color: @yz-application-list-item-li-hover-color !important;
135
- }
136
-
137
- h4 {
138
- color: @yz-application-list-item-li-hover-color !important;
139
- }
140
-
141
- a {
142
- padding: @yz-application-list-ul-a-padding !important;
196
+ p,h4 {
197
+ color: var(--primary-color) !important;
143
198
  }
144
199
  }
145
200
  }
146
201
 
147
202
  .yz-application-group {
148
- padding: 0 10px;
149
-
150
203
  .ant-dropdown-link {
151
204
  color: @yz-application-topic-text-color;
152
205
  }
@@ -162,20 +215,45 @@
162
215
  .ant-tabs-top > .ant-tabs-nav {
163
216
  margin: 0;
164
217
  }
218
+
219
+ padding: 0 10px;
165
220
  }
166
221
 
167
- .yz-application-dropdown ul {
168
- overflow-y: auto;
222
+ .yz-application-dropdown {
169
223
  max-height: 80vh;
170
-
171
- li i {
172
- margin-right: 2px;
173
- }
224
+ overflow-y: auto;
174
225
  }
175
226
 
176
227
  .yz-user-name {
177
- overflow: hidden;
178
228
  width: 92px;
179
- text-overflow: ellipsis;
229
+ overflow: hidden;
180
230
  white-space: nowrap;
231
+ text-overflow: ellipsis;
232
+ }
233
+
234
+
235
+ // 覆盖默认样式
236
+ .yunzai-default__header{
237
+ background-color: var(--primary-color);
238
+ }
239
+ .sidebar-nav__selected>.sidebar-nav__item-link, .sidebar-nav__item-link:hover{
240
+ color: var(--primary-color);
241
+ }
242
+ .reuse-tab__line {
243
+ ::ng-deep {
244
+ .ant-tabs-tab-active .reuse-tab__name{
245
+ color: var(--primary-color);
246
+ }
247
+ }
248
+ }
249
+ .sidebar-nav__selected {
250
+ border-left-color: var(--primary-color);
251
+ }
252
+
253
+ .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
254
+ color: var(--primary-color);
255
+ text-shadow: 0 0 0.25px var(--fade10-primary-color);
256
+ }
257
+ .ant-tabs-tab-btn:focus, .ant-tabs-tab-remove:focus, .ant-tabs-tab-btn:active, .ant-tabs-tab-remove:active {
258
+ color: var(--primary-color);
181
259
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yelon/bis",
3
- "version": "20.0.0-beta.0",
3
+ "version": "20.0.1",
4
4
  "author": "devcui<devcui@outlook.com>",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -21,17 +21,17 @@
21
21
  "component"
22
22
  ],
23
23
  "dependencies": {
24
- "ng-zorro-antd": "^20.0.0",
25
- "@yelon/acl": "^20.0.0-beta.0",
26
- "@yelon/auth": "^20.0.0-beta.0",
27
- "@yelon/theme": "^20.0.0-beta.0",
28
- "@yelon/mock": "^20.0.0-beta.0",
29
- "@yelon/cache": "^20.0.0-beta.0",
30
- "@yelon/chart": "^20.0.0-beta.0",
31
- "@yelon/form": "^20.0.0-beta.0",
32
- "@yelon/testing": "^20.0.0-beta.0",
33
- "@yelon/util": "^20.0.0-beta.0",
34
- "@yelon/bcs": "^20.0.0-beta.0",
24
+ "ng-zorro-antd": "^20.1.0",
25
+ "@yelon/acl": "^20.0.1",
26
+ "@yelon/auth": "^20.0.1",
27
+ "@yelon/theme": "^20.0.1",
28
+ "@yelon/mock": "^20.0.1",
29
+ "@yelon/cache": "^20.0.1",
30
+ "@yelon/chart": "^20.0.1",
31
+ "@yelon/form": "^20.0.1",
32
+ "@yelon/testing": "^20.0.1",
33
+ "@yelon/util": "^20.0.1",
34
+ "@yelon/bcs": "^20.0.1",
35
35
  "tslib": "^2.3.0"
36
36
  },
37
37
  "module": "fesm2022/bis.mjs",
package/theme-dark.less CHANGED
@@ -1,9 +1,9 @@
1
1
  @yz-application-top: 64px;
2
2
  @yz-application-width: 100%;
3
3
  @yz-application-height: 480px;
4
- @yz-application-bgColor: #000;
4
+ @yz-application-bgColor: #262626;
5
5
  @yz-application-border-shadow: #303030;
6
- @yz-application-topic-bgColor: #141414;
6
+ @yz-application-topic-bgColor: #000000;
7
7
  @yz-application-topic-text-color: #fff;
8
8
  @yz-application-topic-text-font-weight: bold;
9
9
  @yz-application-topic-text-line-height: 32px;
@@ -44,3 +44,4 @@
44
44
  @yz-application-list-item-p-line-height: 20px;
45
45
  @yz-application-list-item-li-hover-color:#1890ff;
46
46
  @yz-application-list-item-li-hover-bgColor: #141414;
47
+
package/theme-default.less CHANGED
@@ -2,39 +2,37 @@
2
2
  @yz-application-width: 100%;
3
3
  @yz-application-height: 480px;
4
4
  @yz-application-bgColor: #fff;
5
- @yz-application-border-shadow: rgba(0,0,0,.1);
5
+ @yz-application-border-shadow: #888;
6
6
  @yz-application-topic-bgColor: #4ba6ff;
7
7
  @yz-application-topic-text-color: #fff;
8
8
  @yz-application-topic-text-font-weight: bold;
9
9
  @yz-application-topic-text-line-height: 32px;
10
10
  @yz-application-topic-text-hover-bgColor: #fff;
11
11
  @yz-application-topic-text-hover-color: #4ba6ff;
12
- @yz-application-list-padding: 0 20px;
12
+ @yz-application-list-padding: 20px;
13
13
  @yz-application-list-ul-width: 100%;
14
14
  @yz-application-list-ul-padding: 0;
15
15
  @yz-application-list-ul-li: 20px;
16
16
  @yz-application-list-ul-li-width: 100%;
17
17
  @yz-application-list-ul-li-margin-bottom: 20px;
18
- @yz-application-list-ul-li-padding: 6px;
18
+ @yz-application-list-ul-li-padding: 0;
19
19
  @yz-application-list-ul-h5-margin-top: 0;
20
- @yz-application-list-ul-h5-color: #4ba6ff;
20
+ @yz-application-list-ul-h5-color: #000;
21
21
  @yz-application-list-ul-h5-font-weight: 500;
22
- @yz-application-list-ul-h5-font-size: 16px;
22
+ @yz-application-list-ul-h5-font-size: 14px;
23
23
  @yz-application-list-ul-h5-line-height: 20px;
24
- @yz-application-list-ul-h5-border-bottom: 1px solid #f0f0f0;
25
- @yz-application-list-ul-h5-padding: 10px 5px;
26
24
  @yz-application-list-ul-a-display: block;
27
25
  @yz-application-list-ul-a-padding: 0 4px;
28
26
  @yz-application-list-ul-a-overflow: hidden;
29
27
  @yz-application-list-ul-a-color: #000;
30
28
  @yz-application-list-ul-a-font-size: 12px;
31
- @yz-application-list-ul-a-line-height: 30px;
29
+ @yz-application-list-ul-a-line-height: 25px;
32
30
  @yz-application-list-ul-a-white-space: nowrap;
33
31
  @yz-application-list-ul-a-text-overflow: ellipsis;
34
32
  @yz-application-list-ul-a-hover-color: #fff;
35
33
  @yz-application-list-ul-a-hover-bgColor: #4ba6ff;
36
- @yz-application-list-ul-a-hover-border-radius: 4px;
37
- @yz-application-list-search-margin: 20px 20px 10px;
34
+ @yz-application-list-search-margin: 10px;
35
+ @yz-application-list-search-padding: 10px;
38
36
  @yz-application-list-item-h4p-margin: 0;
39
37
  @yz-application-list-item-h4p-overflow: hidden;
40
38
  @yz-application-list-item-h4p-color: #000;
@@ -45,7 +43,9 @@
45
43
  @yz-application-list-item-p-color: #000;
46
44
  @yz-application-list-item-p-line-height: 20px;
47
45
  @yz-application-list-item-li-hover-color: #fff;
48
- @yz-application-list-item-li-hover-bgColor: @yz-application-list-ul-a-hover-bgColor;
46
+ @yz-application-list-item-li-hover-bgColor: #2E3E56;
47
+
48
+
49
49
  // website layout
50
50
  // layout-website-01
51
51
  @yz-layout-website-01-linear-bg: #94080b;