ike-weblca-html 1.2.0 → 2.0.0

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.
@@ -1,140 +1,305 @@
1
1
  import {css, html, LitElement} from 'lit-element';
2
2
  import {property} from "lodash-es";
3
+ import cookies from 'js-cookie';
3
4
 
5
+ /**
6
+ * IkeWebHeader - Web LCA 网站头部组件
7
+ *
8
+ * 这是一个基于 LitElement 的 Web Components 组件,用于渲染网站的头部导航栏。
9
+ * 支持多语言切换、动态菜单显示、响应式设计等功能。
10
+ *
11
+ * 主要功能:
12
+ * - 多语言支持(简体中文、繁体中文、英文)
13
+ * - 根据域名动态显示不同的菜单项
14
+ * - 支持个性化配置(logo、机构名称等)
15
+ * - 响应式导航菜单
16
+ * - 平滑滚动到页面底部
17
+ * - 登录状态检测和相应的URL跳转逻辑
18
+ */
4
19
  export class IkeWebHeader extends LitElement {
20
+ /**
21
+ * 组件样式定义
22
+ * 包含头部容器、菜单项、子菜单、悬停效果等样式
23
+ */
5
24
  static styles = css`
6
- .ike-web-header {
7
- width: 100%;
8
- box-sizing: border-box;
9
- height: 72px;
10
- display: flex;
11
- padding: 0 72px;
12
- background: var(--ike-web-header-bg, #063223);
13
- align-items: center;
14
- justify-content: space-between;
15
- border-bottom: 1px solid rgba(211, 211, 211, 0.3);
16
- }
17
-
18
- .iwh-url {
19
- max-width: 220px;
20
- max-height: 40px;
21
- display: inline-block;
22
- }
23
-
24
- .header-list {
25
- color: #fff !important;
26
- height: 72px;
27
- }
28
-
29
- .menu-item:hover {
30
- background: rgba(0, 162, 44, 0.1);
31
- color: var(--ike-web-header-text-color, '#fff')
32
- }
33
-
34
- .el-menu-demo {
35
- display: flex;
36
- align-items: center;
37
- cursor: pointer;
38
- color: #fff;
39
- background: transparent;
40
- border: none;
41
- }
42
-
43
- .posi {
44
- position: absolute;
45
- top: 20%;
46
- left: 70%;
47
- }
48
-
49
- .box-a {
50
- display: inline-block;
51
- margin-left: 30px;
52
- }
53
-
54
- .box-a img {
55
- width: auto;
56
- height: 40px;
57
- }
58
-
59
- .menu-item {
60
- padding: 0 20px;
61
- font-size: 14px;
62
- height: 72px;
63
- text-align: center;
64
- box-sizing: border-box;
65
- display: flex;
66
- align-items: center;
67
- }
68
-
69
- .menu-item-database{
70
- position: relative;
71
- }
72
-
73
- .menu-sub-group{
74
- background: #E6F2E8;
75
- position: absolute;
76
- z-index: 999;
77
- width: 150%;
78
- //bottom: -72px;
79
- top: 100%;
80
- left: -50%;
81
- padding: 20px 20px 0 20px;
82
- //transform: translateX(50%);
83
- color: #06AA3E;
84
- box-shadow: 0px 0px 4px 0px rgba(6,50,35,0.53);
85
- border-radius: 0px 0px 8px 8px;
86
- display: none;
87
- transition: opacity 0.3s ease;
88
- opacity: 0;
89
- }
90
-
91
- .menu-sub-item{
92
- padding-bottom: 20px;
93
- color: #373737;
94
- }
95
- .menu-sub-item:hover{
96
- color: #06AA3E;
97
- }
98
-
99
- .menu-item-database:hover .menu-sub-group {
100
- display: block;
101
- opacity: 1;
102
- }
25
+ .ike-web-header {
26
+ width: 100%;
27
+ box-sizing: border-box;
28
+ height: 72px;
29
+ display: flex;
30
+ padding: 0 72px;
31
+ background: var(--ike-web-header-bg, #063223);
32
+ align-items: center;
33
+ justify-content: space-between;
34
+ border-bottom: 1px solid rgba(211, 211, 211, 0.3);
35
+ }
36
+
37
+ .iwh-url {
38
+ max-width: 220px;
39
+ max-height: 40px;
40
+ display: inline-block;
41
+ }
42
+
43
+ .header-list {
44
+ color: #fff !important;
45
+ height: 72px;
46
+ }
47
+
48
+ .menu-item:hover {
49
+ background: rgba(0, 162, 44, 0.1);
50
+ color: var(--ike-web-header-text-color, '#fff')
51
+ }
52
+
53
+ .el-menu-demo {
54
+ display: flex;
55
+ align-items: center;
56
+ cursor: pointer;
57
+ color: #fff;
58
+ background: transparent;
59
+ border: none;
60
+ }
61
+
62
+ .posi {
63
+ position: absolute;
64
+ top: 20%;
65
+ left: 70%;
66
+ }
67
+
68
+ .box-a {
69
+ display: inline-block;
70
+ margin-left: 30px;
71
+ }
72
+
73
+ .box-a img {
74
+ width: auto;
75
+ height: 40px;
76
+ }
77
+
78
+ .left-menu-items {
79
+ display: flex;
80
+ align-items: center;
81
+ margin-left: 20px;
82
+ }
83
+
84
+ .left-menu-item {
85
+ padding: 0 15px;
86
+ font-size: 14px;
87
+ height: 72px;
88
+ display: flex;
89
+ align-items: center;
90
+ cursor: pointer;
91
+ border-radius: 4px;
92
+ transition: background-color 0.3s ease;
93
+ }
94
+
95
+ .left-menu-item:hover {
96
+ background: rgba(0, 162, 44, 0.1);
97
+ }
98
+
99
+ .menu-item {
100
+ padding: 0 20px;
101
+ font-size: 14px;
102
+ height: 72px;
103
+ text-align: center;
104
+ box-sizing: border-box;
105
+ display: flex;
106
+ align-items: center;
107
+ }
108
+
109
+ .menu-item-database{
110
+ position: relative;
111
+ }
112
+
113
+ .menu-sub-group{
114
+ background: #E6F2E8;
115
+ position: absolute;
116
+ z-index: 999;
117
+ width: 150%;
118
+ //bottom: -72px;
119
+ top: 100%;
120
+ left: -50%;
121
+ padding: 20px 20px 0 20px;
122
+ //transform: translateX(50%);
123
+ color: #06AA3E;
124
+ box-shadow: 0px 0px 4px 0px rgba(6,50,35,0.53);
125
+ border-radius: 0px 0px 8px 8px;
126
+ display: none;
127
+ transition: opacity 0.3s ease;
128
+ opacity: 0;
129
+ }
130
+
131
+ .menu-sub-item{
132
+ padding-bottom: 20px;
133
+ color: #373737;
134
+ }
135
+ .menu-sub-item:hover{
136
+ color: #06AA3E;
137
+ }
138
+
139
+ .menu-item-database:hover .menu-sub-group {
140
+ display: block;
141
+ opacity: 1;
142
+ }
143
+
144
+ /* 消息图标样式 */
145
+ .message-icon-container {
146
+ position: relative;
147
+ display: flex;
148
+ align-items: center;
149
+ margin: 0 15px;
150
+ cursor: pointer;
151
+ }
152
+
153
+ .message-icon {
154
+ width: 24px;
155
+ height: 24px;
156
+ }
157
+
158
+ .message-badge {
159
+ position: absolute;
160
+ top: -8px;
161
+ right: -8px;
162
+ background: linear-gradient(90deg, #FFBB24 0%, #FF9900 100%);
163
+ color: white;
164
+ border-radius: 50%;
165
+ width: 18px;
166
+ height: 18px;
167
+ display: flex;
168
+ align-items: center;
169
+ justify-content: center;
170
+ font-size: 12px;
171
+ font-weight: bold;
172
+ }
173
+
174
+ /* 登录按钮样式 */
175
+ .login-button {
176
+ padding: 8px 16px;
177
+ border: 1px solid;
178
+ border-radius: 4px;
179
+ cursor: pointer;
180
+ font-size: 14px;
181
+ transition: all 0.3s ease;
182
+ margin-left: 15px;
183
+ }
184
+
185
+ .login-button:hover {
186
+ opacity: 0.8;
187
+ }
103
188
  `;
189
+
190
+ // ==================== 环境和状态相关属性 ====================
191
+
192
+ /** 当前网站状态,基于域名的第一部分 */
104
193
  status = window.location.hostname.split('.')[0]
194
+
195
+ /** 当前页面完整URL */
105
196
  hostName = window.location.href
197
+
198
+ /** 是否为平台版本(www、192、online环境) */
106
199
  isPlat = this.status === 'www' || this.status === '192' || this.status === 'online'
200
+
201
+ /** 是否显示语言切换功能 */
107
202
  isShowLang = this.status === 'www' || this.status === 'nanozeo' || this.status === '192' || this.status === 'online'
108
- // 在 connectedCallback 中发起 Ajax 请求
203
+
204
+ // ==================== 数据相关属性 ====================
205
+
206
+ /** 从API获取的数据 */
109
207
  data = []
208
+
209
+ /** 个性化配置JSON数据 */
210
+ personalizedConfigJson
211
+
212
+ /** 机构logo URL */
213
+ logo
214
+
215
+ /** 机构联系方式 */
216
+ orgContacts
217
+
218
+ /** 机构名称 */
219
+ name
220
+
221
+ /** 机构邮箱 */
222
+ email
223
+
224
+ /** 机构电话 */
225
+ phone
226
+
227
+ /** 机构地址 */
228
+ address
229
+
230
+ /** 关注链接 */
231
+ followUrl
232
+
233
+ /** 已开通的服务列表 */
234
+ alreadyServices
235
+
236
+ // ==================== 多语言相关属性 ====================
237
+
238
+ /** 当前语言 */
110
239
  currentLanguage = 'zh_CN';
240
+
241
+ /** 简体中文语言包 */
111
242
  zhCN = {
112
243
  '首页':'首页',
113
244
  '数据库':'数据库',
245
+ '资料库':'资料库',
114
246
  '皮革LCA数据库':'皮革LCA数据库',
115
247
  'LCA大赛':'LCA大赛',
116
248
  '专业培训':'专业培训',
117
249
  '联系我们':'联系我们',
250
+ '标准库':'标准库',
251
+ '核算模版':'核算模版',
252
+ '2025全生命周期创新大赛':'2025全生命周期创新大赛',
253
+ '化工专题比赛':'化工专题比赛',
254
+ '登录':'登录',
118
255
  }
256
+
257
+ /** 繁体中文语言包 */
119
258
  zhTW = {
120
259
  '首页':'首頁',
121
260
  '数据库':'數據庫',
261
+ '资料库':'資料庫',
122
262
  '皮革LCA数据库':'皮革LCA數據庫',
123
263
  'LCA大赛':'LCA大賽',
124
264
  '专业培训':'專業培訓',
125
265
  '联系我们':'聯繫我們',
266
+ '标准库':'標準庫',
267
+ '核算模版':'核算模版',
268
+ '2025全生命周期创新大赛':'2025全生命週期創新大賽',
269
+ '化工专题比赛':'化工專題比賽',
270
+ '登录':'登录',
126
271
  }
272
+
273
+ /** 英文语言包 */
127
274
  enUS = {
128
275
  '首页':'Home',
129
276
  '数据库':'Database',
277
+ '资料库':'Database',
130
278
  '皮革LCA数据库':'Leather LCA Database',
131
279
  'LCA大赛':'LCA Competition',
132
280
  '专业培训':'Professional Training',
133
281
  '联系我们':'Contact Us',
282
+ '标准库':'Standard Library',
283
+ '核算模版':'Calculation Template',
284
+ '2025全生命周期创新大赛':'2025 Life Cycle Innovation Competition',
285
+ '化工专题比赛':'Chemical Industry Competition',
286
+ '登录':'Login',
134
287
  }
288
+
289
+ /** 当前使用的国际化对象 */
135
290
  i18n = {}
291
+
292
+ /** 浏览器默认语言 */
136
293
  createLang = navigator.language.replace('-', '_')
137
- lang = window.localStorage.getItem('lang') || this.createLang //(await localStorage.getItem('lang') || this.translate.getBrowserCultureLang() || '').includes('zh') ? 'zh' : 'en';
294
+
295
+ /** 用户选择的语言(优先从localStorage获取,否则使用浏览器语言) */
296
+ lang = window.localStorage.getItem('lang') || this.createLang
297
+
298
+ /** 登录状态检测 - 检查cookie中是否存在token */
299
+ isLoggedIn = !!cookies.get('token')
300
+
301
+ /** 消息数量(当前写死为1) */
302
+ messageCount = 1
138
303
 
139
304
 
140
305
 
@@ -203,7 +368,27 @@ export class IkeWebHeader extends LitElement {
203
368
  <img src="${this.logo}" alt=""> <span
204
369
  style="margin-left: 12px;color: #373737;font-weight: 600;color: ${this.isPlat ? '#fff' : '#063223'}">${this.name}</span>
205
370
  </div>` : ''}
206
-
371
+
372
+ <!-- 左侧菜单项:eFootprint、CarbonZero、GPM -->
373
+ ${this.isPlat ? html`
374
+ <div class="left-menu-items">
375
+ ${(this.isPlat || this.alreadyServices.includes('eF')) ? html`
376
+ <div class="left-menu-item"
377
+ style="color: ${this.hostName.includes('efootprint.net/login') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
378
+ @click="${this._routerPush}" data-url="https://www.efootprint.net"
379
+ data-login-url="https://www.efootprint.net/angular/weblca/ef/model/modelList">eFootprint
380
+ </div>` : ''}
381
+ ${(this.isPlat || this.alreadyServices.includes('scope')) ? html`
382
+ <div class="left-menu-item"
383
+ style="color: ${this.hostName.includes('webcarbon.net') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
384
+ @click="${this._routerPush}" data-login-url="https://www.webcarbon.net/#/calculate/calculatCarbon" data-url="https://www.webcarbon.net">CarbonZero
385
+ </div>` : ''}
386
+ ${(this.isPlat || this.alreadyServices.includes('GPM')) ? html`
387
+ <div class="left-menu-item"
388
+ style="color: ${this.hostName.includes('webgpm.net') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
389
+ @click="${this._routerPush}" data-login-url="https://www.webgpm.net/#/dashboard/targetCenter" data-url="https://www.webgpm.net">GPM
390
+ </div>` : ''}
391
+ </div>` : ''}
207
392
  </div>
208
393
 
209
394
  <div class="iwh-right">
@@ -211,56 +396,58 @@ export class IkeWebHeader extends LitElement {
211
396
  <div class="el-menu-demo">
212
397
  <div class="menu-item"
213
398
  style="color: ${ this.hostName.includes('weblca.net/home') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
214
- @click="${this._routerPush}" data-url="https://www.weblca.net/home"> ${this.i18n['首页'] }
399
+ @click="${this._routerPush}" data-login-url="https://www.weblca.net/home" data-url="https://www.weblca.net/home"> ${this.i18n['首页'] }
215
400
  </div>
401
+
402
+ <!-- 平台专属菜单项:标准库和核算模版 -->
403
+ ${this.isPlat ? html`
404
+ <div class="menu-item"
405
+ style="color: ${this.isPlat ? '#fff' : '#373737'}"
406
+ @click="${this._routerPush}" data-login-url="https://www.weblca.net/standard" data-url="https://www.weblca.net/standard">${this.i18n['标准库'] }
407
+ </div>
408
+ <div class="menu-item"
409
+ style="color: ${this.isPlat ? '#fff' : '#373737'}"
410
+ @click="${this._routerPush}" data-login-url="https://www.weblca.net/template" data-url="https://www.weblca.net/template">${this.i18n['核算模版'] }
411
+ </div>` : ''}
412
+
216
413
  ${(this.isPlat || this.alreadyServices.includes('database')) ? html`
217
414
  <div class="menu-item menu-item-database"
218
415
  style=" position: relative;color: ${this.hostName.includes('weblca.net/database') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
219
- @click="${this._routerPush}" data-url="https://www.weblca.net/database">
416
+ @click="${this._routerPush}" data-login-urlurl="https://www.weblca.net/database" data-url="https://www.weblca.net/database">
220
417
  ${(this.isPlat) ? html`<img class="posi"
221
418
  src="https://ike-web.oss-cn-hangzhou.aliyuncs.com/HOT.png"
222
419
  alt="">` : ''}
223
420
  ${this.i18n['数据库'] }
224
421
  <div class="menu-sub-group">
225
- <div @click="${this._routerPush}" data-url="https://www.weblca.net/database" class="menu-sub-item">${this.i18n['数据库'] }</div>
226
- <div @click="${this._routerPush}" data-url="https://www.weblca.net/database/leather" class="menu-sub-item">${this.i18n['皮革LCA数据库'] }</div>
422
+ <div @click="${this._routerPush}" data-login-url="https://www.weblca.net/database" data-url="https://www.weblca.net/database" class="menu-sub-item">${this.i18n['数据库'] }</div>
423
+ <div @click="${this._routerPush}" data-login-url="https://www.weblca.net/database/leather" data-url="https://www.weblca.net/database/leather" class="menu-sub-item">${this.i18n['皮革LCA数据库'] }</div>
227
424
  </div>
228
425
  </div>` : ''}
229
-
230
- ${(this.isPlat || this.alreadyServices.includes('eF')) ? html`
231
- <div class="menu-item"
232
- style="color: ${this.hostName.includes('efootprint.net/login') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
233
- @click="${this._routerPush}" data-url="https://www.efootprint.net">eFootprint
234
- </div>` : ''}
235
- ${(this.isPlat || this.alreadyServices.includes('scope')) ? html`
236
- <div class="menu-item"
237
- style="color: ${this.hostName.includes('webcarbon.net') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
238
- @click="${this._routerPush}" data-url="https://www.webcarbon.net">CarbonZero
239
- </div>` : ''}
240
- ${(this.isPlat || this.alreadyServices.includes('GPM')) ? html`
426
+ ${(this.isPlat || this.alreadyServices.includes('databankpage')) ? html`
241
427
  <div class="menu-item"
242
- style="color: ${this.hostName.includes('webgpm.net') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
243
- @click="${this._routerPush}" data-url="https://www.webgpm.net">
244
- GPM
428
+ style="color: ${this.hostName.includes('/databankpage') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
429
+ @click="${this._routerPush}" data-login-url="https://www.efootprint.net/databankpage" data-url="https://www.efootprint.net/databankpage">${this.i18n['资料库'] }
245
430
  </div>` : ''}
246
431
  ${this.isPlat ? html`
247
- <div class="menu-item"
248
- style="color: ${this.hostName.includes('efootprint.net/contest') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
249
- @click="${this._routerPush}"
250
- data-url="https://online.efootprint.net/contest">
432
+ <div class="menu-item menu-item-database"
433
+ style=" position: relative;color: ${this.hostName.includes('efootprint.net/contest') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
434
+ >
251
435
  ${this.i18n['LCA大赛'] }
436
+ <div class="menu-sub-group">
437
+ <div @click="${this._routerPush}" data-login-url="https://www.weblca.net/contest" data-url="https://www.weblca.net/contest" class="menu-sub-item">${this.i18n['2025全生命周期创新大赛'] }</div>
438
+ <div @click="${this._routerPush}" data-login-url="https://www.weblca.net/contest/cccd" data-url="https://www.weblca.net/contest/cccd" class="menu-sub-item">${this.i18n['化工专题比赛'] }</div>
439
+ </div>
252
440
  </div>` : ''}
253
441
  ${this.isPlat ? html`
254
442
  <div class="menu-item"
255
443
  style="color: ${this.hostName.includes('efootprint.net/training') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
256
- @click="${this._routerPush}"
257
- data-url="https://online.efootprint.net/training">
444
+ @click="${this._routerPush}" data-login-url="https://www.weblca.net/training"
445
+ data-url="https://www.weblca.net/training">
258
446
  ${this.i18n['专业培训'] }
259
447
  </div>` : ''}
260
-
261
448
  <div class="menu-item"
262
449
  style="color: ${this.isPlat ? '#fff' : '#373737'}"
263
- @click="${this._scroll}" data-url="#"> ${this.i18n['联系我们'] }
450
+ @click="${this._scroll}" data-login-url="#" data-url="#"> ${this.i18n['联系我们'] }
264
451
  </div>
265
452
 
266
453
  ${ this.isShowLang ? html`
@@ -270,15 +457,30 @@ export class IkeWebHeader extends LitElement {
270
457
  display: flex;
271
458
  align-items: center;
272
459
  color: ${this.hostName.includes('weblca.net/database') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
273
- >
274
- ${ this.isPlat ? html`<img src="http://ike-web.oss-cn-hangzhou.aliyuncs.com/language.png" alt="">` : html`<img src="http://ike-web.oss-cn-hangzhou.aliyuncs.com/language_block.png" alt="">` }
460
+ >
461
+ ${ this.isPlat ? html`<img src="http://ike-web.oss-cn-hangzhou.aliyuncs.com/language.png" alt="">` : html`<img src="http://ike-web.oss-cn-hangzhou.aliyuncs.com/language_block.png" alt="">` }
275
462
  <div class="menu-sub-group">
276
463
  <div @click="${this._clickLang}" data-lang="zh_CN" class="menu-sub-item">中文简体</div>
277
464
  <div @click="${this._clickLang}" data-lang="zh_TW" class="menu-sub-item">中文繁體</div>
278
465
  <div @click="${this._clickLang}" data-lang="en_US" class="menu-sub-item">English</div>
279
466
  </div>
280
467
  </div>` : ''}
281
-
468
+
469
+ <!-- 消息图标 -->
470
+ <div class="message-icon-container">
471
+ <img src="https://ike-web.oss-cn-hangzhou.aliyuncs.com/message.png" alt="消息" class="message-icon">
472
+ <div class="message-badge">${this.messageCount}</div>
473
+ </div>
474
+
475
+ <!-- 登录/首页按钮 -->
476
+ <div class="login-button"
477
+ style="border-color: ${this.isPlat ? '#fff' : '#373737'}; color: ${this.isPlat ? '#fff' : '#373737'}"
478
+ @click="${this._routerPush}"
479
+ data-login-url="https://www.weblca.net/home"
480
+ data-url="https://www.weblca.net/login">
481
+ ${this.isLoggedIn ? this.i18n['首页'] : this.i18n['登录']}
482
+ </div>
483
+
282
484
  <!-- <div class="menu-item">-->
283
485
  <!-- <el-icon style="cursor: pointer" size="28" color="#fff">-->
284
486
  <!-- <UserFilled/>-->
@@ -294,6 +496,12 @@ export class IkeWebHeader extends LitElement {
294
496
  e.stopPropagation()
295
497
  // @ts-ignore
296
498
  let to = e.currentTarget?.getAttribute('data-url');
499
+ let loginUrl = e.currentTarget?.getAttribute('data-login-url');
500
+
501
+ // 根据登录状态选择跳转URL
502
+ if (loginUrl && this.isLoggedIn) {
503
+ to = loginUrl;
504
+ }
297
505
  //192,www ,以及 to之中包含online的都不需要替换
298
506
  // @ts-ignore
299
507
  if (this.status !== '192' && this.status !== 'www' && this.status !== 'online' && !to.includes('online')) {
@@ -321,6 +529,16 @@ export class IkeWebHeader extends LitElement {
321
529
  top:document.documentElement.scrollHeight, behavior: "smooth",
322
530
  })
323
531
  }
532
+
533
+ _handleLoginClick() {
534
+ if (this.isLoggedIn) {
535
+ // 如果已登录,跳转到首页
536
+ window.location.href = 'https://www.weblca.net/home';
537
+ } else {
538
+ // 如果未登录,跳转到登录页面
539
+ window.location.href = 'https://www.weblca.net/login';
540
+ }
541
+ }
324
542
  }
325
543
 
326
544
  customElements.define('ike-web-header', IkeWebHeader);
package/webpack.config.js CHANGED
@@ -1,12 +1,23 @@
1
1
  const path = require('path');
2
2
 
3
3
  module.exports = {
4
+ mode: 'production',
4
5
  entry: './src/index.js',
5
6
  output: {
6
7
  path: path.resolve(__dirname, 'dist'),
7
8
  filename: 'index.js',
8
- library: 'MyPackage',
9
- libraryTarget: 'umd',
9
+ library: {
10
+ name: 'IkeWebLcaHtml',
11
+ type: 'umd',
12
+ },
13
+ globalObject: 'this',
14
+ clean: true,
15
+ },
16
+ externals: {
17
+ 'lit-element': 'lit-element',
18
+ 'lit': 'lit',
19
+ 'js-cookie': 'js-cookie',
20
+ 'lodash-es': 'lodash-es'
10
21
  },
11
22
  module: {
12
23
  rules: [
@@ -16,7 +27,11 @@ module.exports = {
16
27
  use: {
17
28
  loader: 'babel-loader',
18
29
  options: {
19
- presets: ['@babel/preset-env'],
30
+ presets: [
31
+ ['@babel/preset-env', {
32
+ modules: false // 保持ES6模块格式
33
+ }]
34
+ ],
20
35
  },
21
36
  },
22
37
  },