ike-weblca-html 2.0.12 → 2.1.2

package/src/IkeWebHeader.js

@@ -1,6 +1,6 @@
-import {css, html, LitElement} from 'lit-element';
-import {property} from "lodash-es";
-import cookies from 'js-cookie';
+import { css, html, LitElement } from 'lit-element'
+import { property } from 'lodash-es'
+import cookies from 'js-cookie'
 
 /**
  * IkeWebHeader - Web LCA 网站头部组件
@@ -17,539 +17,750 @@ import cookies from 'js-cookie';
  * - 登录状态检测和相应的URL跳转逻辑
  */
 export class IkeWebHeader extends LitElement {
-    /**
-     * 组件样式定义
-     * 包含头部容器、菜单项、子菜单、悬停效果等样式
-     */
-    static styles = css`
-        .ike-web-header {
-            width: 100%;
-            box-sizing: border-box;
-            height: 72px;
-            display: flex;
-            padding: 0 72px;
-            background: var(--ike-web-header-bg, #063223);
-            align-items: center;
-            justify-content: space-between;
-            border-bottom: 1px solid rgba(211, 211, 211, 0.3);
-        }
-
-        .iwh-url {
-            max-width: 220px;
-            max-height: 40px;
-            display: inline-block;
-        }
-
-        .header-list {
-            color: #fff !important;
-            height: 72px;
-        }
-
-        .menu-item:hover {
-            background: rgba(0, 162, 44, 0.1);
-            color: var(--ike-web-header-text-color, '#fff')
-        }
-
-        .el-menu-demo {
-            display: flex;
-            align-items: center;
-            cursor: pointer;
-            color: #fff;
-            background: transparent;
-            border: none;
-        }
-
-        .posi {
-            position: absolute;
-            top: 20%;
-            left: 70%;
-        }
-
-        .box-a {
-            display: inline-block;
-            margin-left: 30px;
-        }
-
-        .box-a img {
-            width: auto;
-            height: 40px;
-        }
-
-        .left-menu-items {
-            display: flex;
-            align-items: center;
-            margin-left: 20px;
-        }
-
-        .left-menu-item {
-            padding: 0 15px;
-            font-size: 14px;
-            height: 72px;
-            display: flex;
-            align-items: center;
-            cursor: pointer;
-            border-radius: 4px;
-            transition: background-color 0.3s ease;
-        }
-
-        .left-menu-item:hover {
-            background: rgba(0, 162, 44, 0.1);
-        }
-
-        .menu-item {
-            padding: 0 20px;
-            font-size: 14px;
-            height: 72px;
-            text-align: center;
-            box-sizing: border-box;
-            display: flex;
-            align-items: center;
-        }
-
-        .menu-item-database{
-            position: relative;
-        }
-
-        .menu-sub-group{
-            background: #E6F2E8;
-            position: absolute;
-            z-index: 999;
-            width: 150%;
-            //bottom: -72px;
-            top: 100%;
-            left: -50%;
-            padding: 20px 20px 0 20px;
-            //transform: translateX(50%);
-            color: #06AA3E;
-            box-shadow: 0px 0px 4px 0px rgba(6,50,35,0.53);
-            border-radius: 0px 0px 8px 8px;
-            display: none;
-            transition: opacity 0.3s ease;
-            opacity: 0;
-        }
-        .menu-sub-group-1{
-            width: 280px;
-            left: 50%;
-            transform: translateX(-50%);
-        }
-        .menu-sub-item{
-            padding-bottom: 20px;
-            color: #373737;
-        }
-        .menu-sub-item:hover{
-            color: #06AA3E;
-        }
-
-        .menu-item-database:hover  .menu-sub-group {
-            display: block;
-            opacity: 1;
-        }
-
-        /* 消息图标样式 */
-        .message-icon-container {
-            position: relative;
-            display: flex;
-            align-items: center;
-            margin: 0 15px;
-            cursor: pointer;
-        }
-
-        .message-icon {
-            width: 24px;
-            height: 24px;
-        }
-
-        .message-badge {
-            position: absolute;
-            top: -8px;
-            right: -8px;
-            background: linear-gradient(90deg, #FFBB24 0%, #FF9900 100%);
-            color: white;
-            border-radius: 50%;
-            width: 18px;
-            height: 18px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 12px;
-            font-weight: bold;
-        }
-
-        /* 登录按钮样式 */
-        .login-button {
-            padding: 8px 16px;
-            border: 1px solid;
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            margin-left: 15px;
-        }
-
-        .login-button:hover {
-            opacity: 0.8;
-        }
-    `;
-
-    // ==================== 环境和状态相关属性 ====================
-
-    /** 当前网站状态，基于域名的第一部分 */
-    status = window.location.hostname.split('.')[0]
-
-    /** 当前页面完整URL */
-    hostName = window.location.href
-
-    /** 是否为平台版本（www、192、online环境） */
-    isPlat = this.status === 'www' ||  this.status === '192' || this.status === 'online'
-
-    /** 是否显示语言切换功能 */
-    isShowLang = this.status === 'www' ||  this.status === 'nanozeo'  ||  this.status === '192' || this.status === 'online'
-
-    // ==================== 数据相关属性 ====================
-
-    /** 从API获取的数据 */
-    data = []
-
-    /** 个性化配置JSON数据 */
-    personalizedConfigJson
-
-    /** 机构logo URL */
-    logo
-
-    /** 机构联系方式 */
-    orgContacts
-
-    /** 机构名称 */
-    name
-
-    /** 机构邮箱 */
-    email
-
-    /** 机构电话 */
-    phone
-
-    /** 机构地址 */
-    address
-
-    /** 关注链接 */
-    followUrl
-
-    /** 已开通的服务列表 */
-    alreadyServices
-
-    // ==================== 多语言相关属性 ====================
-
-    /** 当前语言 */
-    currentLanguage = 'zh_CN';
-
-    /** 简体中文语言包 */
-    zhCN = {
-        '首页':'首页',
-        '数据库':'数据库',
-        '资料库':'资料库',
-        '皮革LCA数据库':'皮革LCA数据库',
-        'LCA大赛':'LCA大赛',
-        '专业培训':'专业培训',
-        '联系我们':'联系我们',
-        '标准库':'标准库',
-        '核算模版':'核算模版',
-        '2025全生命周期创新大赛':'2025全生命周期创新大赛',
-
-        '化工专题比赛':'2025首届中国化工产品碳足迹数据库大赛',
-        '登录':'登录',
-        '个人中心':'个人中心',
-        
+  /**
+   * 组件样式定义
+   * 包含头部容器、菜单项、子菜单、悬停效果等样式
+   */
+  static styles = css`
+    .ike-web-header {
+      width: 100%;
+      box-sizing: border-box;
+      height: 72px;
+      display: flex;
+      padding: 0 72px;
+      background: var(--ike-web-header-bg, #063223);
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid rgba(211, 211, 211, 0.3);
     }
 
-    /** 繁体中文语言包 */
-    zhTW = {
-        '首页':'首頁',
-        '数据库':'數據庫',
-        '资料库':'資料庫',
-        '皮革LCA数据库':'皮革LCA數據庫',
-        'LCA大赛':'LCA大賽',
-        '专业培训':'專業培訓',
-        '联系我们':'聯繫我們',
-        '标准库':'標準庫',
-        '核算模版':'核算模版',
-        '2025全生命周期创新大赛':'2025全生命週期創新大賽',
-        '化工专题比赛': '2025首届中國化工產品碳足迹資料庫大賽',
-        '登录':'登录',
-        '个人中心':'个人中心',
+    .iwh-url {
+      max-width: 220px;
+      max-height: 40px;
+      display: inline-block;
     }
 
-    /** 英文语言包 */
-    enUS = {
-        '首页':'Home',
-        '数据库':'Database',
-        '资料库':'Database',
-        '皮革LCA数据库':'Leather LCA Database',
-        'LCA大赛':'LCA Competition',
-        '专业培训':'Professional Training',
-        '联系我们':'Contact Us',
-        '标准库':'Standard Library',
-        '核算模版':'Calculation Template',
-        '2025全生命周期创新大赛':'2025 Life Cycle Innovation Competition',
-        '化工专题比赛':'2025 First China Chemical Product Carbon Footprint Database Competition',
-        '登录':'Login',
-        '个人中心':'Personal Center',
+    .header-list {
+      color: #fff !important;
+      height: 72px;
     }
 
-    /** 当前使用的国际化对象 */
-    i18n = {}
-
-    /** 浏览器默认语言 */
-    createLang = navigator.language.replace('-', '_')
-
-    /** 用户选择的语言（优先从localStorage获取，否则使用浏览器语言） */
-    lang = window.localStorage.getItem('lang')  ||  this.createLang
-
-    /** 登录状态检测 - 检查cookie中是否存在token */
-    isLoggedIn = !!cookies.get('token')
-
-    /** 消息数量（当前写死为1） */
-    messageCount = 1
-
-
-
-    connectedCallback() {
-        switch(this.lang) {
-            case 'zh':
-                this.currentLanguage = 'zh_CN';
-                this.i18n = this.zhCN
-                break;
-            case 'zh_CN':
-                this.currentLanguage = 'zh_CN';
-                this.i18n = this.zhCN
-                break;
-            case 'zh_TW':
-                this.currentLanguage = 'zh_TW';
-                this.i18n = this.zhTW
-                break;
-            case 'en_US':
-                this.currentLanguage = 'en_US';
-                this.i18n= this.enUS
-                break;
-            default:
-                this.currentLanguage = 'zh_CN';
-                this.i18n = this.zhCN
-                break;
-        }
-
-        super.connectedCallback();
-        this.fetchData();
+    .menu-item:hover {
+      background: rgba(0, 162, 44, 0.1);
+      color: var(--ike-web-header-text-color, '#fff');
     }
 
-    // @ts-ignore
-    async fetchData() {
-        try {
-            const response = await fetch('https://backsite.efootprint.net/Gpm/webLcaOrganization/GetOrganizationByDomain'); // 替换为实际的 API 地址
-            const jsonData = await response.json();
-            let data = jsonData.data; // 将获取到的数据保存到 data 属性中
-            if (data && data.personalizedConfigJson) {
-                this.personalizedConfigJson = JSON.parse(data.personalizedConfigJson);
-            }
-            // console.log('this.data.data.personalizedConfigJson', this.personalizedConfigJson)
-            this.logo = this.personalizedConfigJson && this.personalizedConfigJson.logo;
-            this.orgContacts = this.personalizedConfigJson && this.personalizedConfigJson.orgContacts;
-            this.name = this.personalizedConfigJson && this.personalizedConfigJson.institution && this.personalizedConfigJson.institution.name;
-            this.email = this.personalizedConfigJson && this.personalizedConfigJson.orgEmail;
-            this.phone = this.personalizedConfigJson && this.personalizedConfigJson.orgPhone
-            this.address = this.personalizedConfigJson && this.personalizedConfigJson.orgAddress;
-            this.followUrl = this.personalizedConfigJson && this.personalizedConfigJson.followUrl;
-            this.alreadyServices = data.alreadyServices
-            setTimeout(() => this.requestUpdate())
-            // this.requestUpdate(); // 更新组件以触发重新渲染
-        } catch (error) {
-            // console.error('Error fetching data:', error);
-        }
+    .el-menu-demo {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      color: #fff;
+      background: transparent;
+      border: none;
     }
 
-    render() {
-        return html`
-            <div class="ike-web-header"
-                 style="
-                 background: ${this.isPlat ? '#063223' : '#FFFFFF'}; color: ${this.isPlat ? '#fff' : '#063223'}">
-                <div style="display: flex;align-items: center">
-                    <img src="https://ike-web.oss-cn-hangzhou.aliyuncs.com/WebLCA_logo.png" class="iwh-url" alt="">
-                    ${(this.status !== 'www' && this.status !== '192') ? html`
-                        <div class="box-a" style="display: flex;align-items: center">
-                            <img src="${this.logo}" alt=""> <span
-                                style="margin-left: 12px;color: #373737;font-weight: 600;color: ${this.isPlat ? '#fff' : '#063223'}">${this.name}</span>
-                        </div>` : ''}
-                    
-                    <!-- 左侧菜单项：eFootprint、CarbonZero、GPM -->
-                    ${this.isPlat ? html`
-                        <div class="left-menu-items">
-                            ${(this.isPlat || this.alreadyServices.includes('eF')) ? html`
-                                <div class="left-menu-item"
-                                     style="color: ${this.hostName.includes('efootprint.net/login') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
-                                     @click="${this._routerPush}" data-url="https://www.efootprint.net"
-                                     data-login-url="https://www.efootprint.net/angular/weblca/ef/model/modelList">eFootprint
-                                </div>` : ''}
-                            ${(this.isPlat || this.alreadyServices.includes('scope')) ? html`
-                                <div class="left-menu-item"
-                                     style="color: ${this.hostName.includes('webcarbon.net') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
-                                     @click="${this._routerPush}" data-login-url="https://www.webcarbon.net/#/calculate/calculatCarbon" data-url="https://www.webcarbon.net">CarbonZero
-                                </div>` : ''}
-                            ${(this.isPlat || this.alreadyServices.includes('GPM')) ? html`
-                                <div class="left-menu-item"
-                                     style="color: ${this.hostName.includes('webgpm.net') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
-                                     @click="${this._routerPush}" data-login-url="https://www.webgpm.net/#/dashboard/targetCenter" data-url="https://www.webgpm.net">GPM
-                                </div>` : ''}
-                        </div>` : ''}
-                </div>
-
-                <div class="iwh-right">
-                    <div class="header-list flex align-center">
-                        <div class="el-menu-demo">
-                            <div class="menu-item"
-                                 style="color: ${ this.hostName.includes('weblca.net/home') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
-                                 @click="${this._routerPush}" data-login-url="https://www.weblca.net/home" data-url="https://www.weblca.net/home"> ${this.i18n['首页'] }
-                            </div>
-                            
-                            <!-- 平台专属菜单项：标准库和核算模版 -->
-                            ${this.isPlat ? html`
-                                <div class="menu-item"
-                                     style="color: ${this.isPlat ? '#fff' : '#373737'}"
-                                     @click="${this._routerPush}" data-login-url="https://www.weblca.net/standard" data-url="https://www.weblca.net/standard">${this.i18n['标准库'] }
-                                </div>
-                                <div class="menu-item"
-                                     style="color: ${this.isPlat ? '#fff' : '#373737'}"
-                                     @click="${this._routerPush}" data-login-url="https://www.weblca.net/template" data-url="https://www.weblca.net/template">${this.i18n['核算模版'] }
-                                </div>` : ''}
-                            
-                            ${(this.isPlat || this.alreadyServices.includes('database')) ? html`
-                                <div class="menu-item menu-item-database"
-                                     style=" position: relative;color: ${this.hostName.includes('weblca.net/database') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
-                                     @click="${this._routerPush}" data-login-urlurl="https://www.weblca.net/database"  data-url="https://www.weblca.net/database">
-                                    ${(this.isPlat) ? html`<img class="posi"
-                                                                src="https://ike-web.oss-cn-hangzhou.aliyuncs.com/HOT.png"
-                                                                alt="">` : ''}
-                                    ${this.i18n['数据库'] }
-                                    <div class="menu-sub-group">
-                                        <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>
-                                        <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>
-                                    </div>
-                                </div>` : ''}
-                            ${(this.isPlat || this.alreadyServices.includes('databankpage')) ? html`
-                                <div class="menu-item"
-                                     style="color: ${this.hostName.includes('/databankpage') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
-                                     @click="${this._routerPush}" data-login-url="https://www.efootprint.net/databankpage" data-url="https://www.efootprint.net/databankpage">${this.i18n['资料库'] }
-                                </div>` : ''}
-                            ${this.isPlat ? html`
-                                <div class="menu-item menu-item-database"
-                                     style=" position: relative;color: ${this.hostName.includes('efootprint.net/contest') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
-                                >
-                                    ${this.i18n['LCA大赛'] }
-                                    <div class="menu-sub-group menu-sub-group-1">
-                                        <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>
-                                        <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>
-                                    </div>
-                                </div>` : ''}
-                            ${this.isPlat ? html`
-                                <div class="menu-item"
-                                     style="color: ${this.hostName.includes('efootprint.net/training') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
-                                     @click="${this._routerPush}" data-login-url="https://www.weblca.net/training"
-                                     data-url="https://www.weblca.net/training">
-                                    ${this.i18n['专业培训'] }
-                                </div>` : ''}
-                            <div class="menu-item"
-                                 style="color: ${this.isPlat ? '#fff' : '#373737'}"
-                                 @click="${this._scroll}" data-login-url="#" data-url="#"> ${this.i18n['联系我们'] }
-                            </div>
-
-                            ${ this.isShowLang ? html`
-                                <div class="menu-item menu-item-database"
-                                     style=" position: relative;
-                                     text-align: center;
-                                     display: flex;
-                                        align-items: center;
-                                     color: ${this.hostName.includes('weblca.net/database') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
-                                >
-                                    ${ 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="">` }
-                                    <div class="menu-sub-group">
-                                        <div @click="${this._clickLang}" data-lang="zh_CN" class="menu-sub-item">中文简体</div>
-                                        <div @click="${this._clickLang}" data-lang="zh_TW" class="menu-sub-item">中文繁體</div>
-                                        <div @click="${this._clickLang}" data-lang="en_US" class="menu-sub-item">English</div>
-                                    </div>
-                                </div>` : ''}
-
-                            <!-- 消息图标 - 仅在登录状态下显示 -->
-                            ${this.isLoggedIn ? html`
-                                <div @click="${this._routerPush}"
-                                     data-login-url="https://www.weblca.net/notification"
-                                     data-url="https://www.weblca.net/notification" class="message-icon-container">
-                                    <img src="https://ike-web.oss-cn-hangzhou.aliyuncs.com/message.png" alt="消息" class="message-icon">
-                                    <div class="message-badge">${this.messageCount}</div>
-                                </div>
-                            ` : ''}
-
-                            <!-- 登录/首页按钮 -->
-                            <div class="login-button" 
-                                 style="border-color: ${this.isPlat ? '#fff' : '#373737'}; color: ${this.isPlat ? '#fff' : '#373737'}"
-                                 @click="${this._handleLoginClick}">
-                                ${this.isLoggedIn ? this.i18n['个人中心'] : this.i18n['登录']}
-                            </div>
-
-                            <!--                            <div class="menu-item">-->
-                            <!--                                <el-icon style="cursor: pointer" size="28" color="#fff">-->
-                            <!--                                    <UserFilled/>-->
-                            <!--                                </el-icon>-->
-                            <!--                            </div>-->
-                        </div>
-                    </div>
-                </div>
-            </div>`;
+    .posi {
+      position: absolute;
+      top: 20%;
+      left: 70%;
+    }
+
+    .box-a {
+      display: inline-block;
+      margin-left: 30px;
+    }
+
+    .box-a img {
+      width: auto;
+      height: 40px;
+    }
+
+    .left-menu-items {
+      display: flex;
+      align-items: center;
+      margin-left: 20px;
+    }
+
+    .left-menu-item {
+      padding: 0 15px;
+      font-size: 14px;
+      height: 72px;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      border-radius: 4px;
+      transition: background-color 0.3s ease;
+    }
+
+    .left-menu-item:hover {
+      background: rgba(0, 162, 44, 0.1);
+    }
+
+    .menu-item {
+      padding: 0 20px;
+      font-size: 14px;
+      height: 72px;
+      text-align: center;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+    }
+
+    .menu-item-database {
+      position: relative;
+    }
+
+    .menu-sub-group {
+      background: #e6f2e8;
+      position: absolute;
+      z-index: 999;
+      width: 150%;
+      //bottom: -72px;
+      top: 100%;
+      left: -50%;
+      padding: 20px 20px 0 20px;
+      //transform: translateX(50%);
+      color: #06aa3e;
+      box-shadow: 0px 0px 4px 0px rgba(6, 50, 35, 0.53);
+      border-radius: 0px 0px 8px 8px;
+      display: none;
+      transition: opacity 0.3s ease;
+      opacity: 0;
+    }
+    .menu-sub-group-1 {
+      width: 280px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    .menu-sub-item {
+      padding-bottom: 20px;
+      color: #373737;
+    }
+    .menu-sub-item:hover {
+      color: #06aa3e;
+    }
+
+    .menu-item-database:hover .menu-sub-group {
+      display: block;
+      opacity: 1;
+    }
+
+    /* 消息图标样式 */
+    .message-icon-container {
+      position: relative;
+      display: flex;
+      align-items: center;
+      margin: 0 15px;
+      cursor: pointer;
     }
 
-    _routerPush(e) {
-        e.stopPropagation()
-        // @ts-ignore
-        let to = e.currentTarget && e.currentTarget.getAttribute('data-url');
-        let loginUrl = e.currentTarget && e.currentTarget.getAttribute('data-login-url');
-
-        // 根据登录状态选择跳转URL
-        if (loginUrl && this.isLoggedIn) {
-            to = loginUrl;
-        }
-        //192,www ,以及 to之中包含online的都不需要替换
-        // @ts-ignore
-        if (this.status !== '192' && this.status !== 'www' && this.status !== 'online' && !to.includes('online')) {
-            to = to.replace('www', this.status)
-        }
-        window.location.href = to
-        window.parent.postMessage({type: 'navigate', url: to}, '*');
+    .message-icon {
+      width: 24px;
+      height: 24px;
     }
 
-    _clickLang(e) {
-        e.stopPropagation()
-        // @ts-ignore
-        let lang = e.currentTarget && e.currentTarget.getAttribute('data-lang');
-        //192,www ,以及 to之中包含online的都不需要替换
-        // @ts-ignore
-        localStorage.setItem('lang', lang)
-        window.location.reload()
-        // window.parent.postMessage({type: 'navigate', url: to}, '*');
+    .message-badge {
+      position: absolute;
+      top: -8px;
+      right: -8px;
+      background: linear-gradient(90deg, #ffbb24 0%, #ff9900 100%);
+      color: white;
+      border-radius: 50%;
+      width: 18px;
+      height: 18px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      font-weight: bold;
     }
 
-    _scroll() {
-        let box = document.body
-        // console.log(box.clientHeight)
-        window.scrollTo({
-            top:document.documentElement.scrollHeight, behavior: "smooth",
-        })
+    /* 登录按钮样式 */
+    .login-button {
+      padding: 8px 16px;
+      border: 1px solid;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+      transition: all 0.3s ease;
+      margin-left: 15px;
     }
 
-    _handleLoginClick() {
-        if (this.isLoggedIn) {
-            // 如果已登录，跳转到首页
-            window.location.href = 'https://www.weblca.net/selfCenter';
-        } else {
-            // 如果未登录，跳转到登录页面
-            window.location.href = 'https://www.weblca.net/login';
-        }
+    .login-button:hover {
+      opacity: 0.8;
+    }
+  `
+
+  // ==================== 环境和状态相关属性 ====================
+
+  /** 当前网站状态，基于域名的第一部分 */
+  status = window.location.hostname.split('.')[0]
+
+  /** 当前页面完整URL */
+  hostName = window.location.href
+
+  /** 是否为平台版本（www、192、online环境） */
+  isPlat =
+    this.status === 'www' || this.status === '192' || this.status === 'online'
+
+  /** 是否显示语言切换功能 */
+  isShowLang =
+    this.status === 'www' ||
+    this.status === 'nanozeo' ||
+    this.status === '192' ||
+    this.status === 'online'
+
+  // ==================== 数据相关属性 ====================
+
+  /** 从API获取的数据 */
+  data = []
+
+  /** 个性化配置JSON数据 */
+  personalizedConfigJson
+
+  /** 机构logo URL */
+  logo
+
+  /** 机构联系方式 */
+  orgContacts
+
+  /** 机构名称 */
+  name
+
+  /** 机构邮箱 */
+  email
+
+  /** 机构电话 */
+  phone
+
+  /** 机构地址 */
+  address
+
+  /** 关注链接 */
+  followUrl
+
+  /** 已开通的服务列表 */
+  alreadyServices
+
+  // ==================== 多语言相关属性 ====================
+
+  /** 当前语言 */
+  currentLanguage = 'zh_CN'
+
+  /** 简体中文语言包 */
+  zhCN = {
+    首页: '首页',
+    数据库: '数据库',
+    资料库: '资料库',
+    皮革LCA数据库: '皮革LCA数据库',
+    LCA大赛: 'LCA大赛',
+    专业培训: '专业培训',
+    联系我们: '联系我们',
+    标准库: '标准库',
+    核算模版: '核算模版',
+    '2025全生命周期创新大赛': '2025全生命周期创新大赛',
+
+    化工专题比赛: '2025首届中国化工产品碳足迹数据库大赛',
+    登录: '登录',
+    个人中心: '个人中心',
+  }
+
+  /** 繁体中文语言包 */
+  zhTW = {
+    首页: '首頁',
+    数据库: '數據庫',
+    资料库: '資料庫',
+    皮革LCA数据库: '皮革LCA數據庫',
+    LCA大赛: 'LCA大賽',
+    专业培训: '專業培訓',
+    联系我们: '聯繫我們',
+    标准库: '標準庫',
+    核算模版: '核算模版',
+    '2025全生命周期创新大赛': '2025全生命週期創新大賽',
+    化工专题比赛: '2025首届中國化工產品碳足迹資料庫大賽',
+    登录: '登录',
+    个人中心: '个人中心',
+  }
+
+  /** 英文语言包 */
+  enUS = {
+    首页: 'Home',
+    数据库: 'Database',
+    资料库: 'Database',
+    皮革LCA数据库: 'Leather LCA Database',
+    LCA大赛: 'LCA Competition',
+    专业培训: 'Professional Training',
+    联系我们: 'Contact Us',
+    标准库: 'Standard Library',
+    核算模版: 'Calculation Template',
+    '2025全生命周期创新大赛': '2025 Life Cycle Innovation Competition',
+    化工专题比赛:
+      '2025 First China Chemical Product Carbon Footprint Database Competition',
+    登录: 'Login',
+    个人中心: 'Personal Center',
+  }
+
+  /** 当前使用的国际化对象 */
+  i18n = {}
+
+  /** 浏览器默认语言 */
+  createLang = navigator.language.replace('-', '_')
+
+  /** 用户选择的语言（优先从localStorage获取，否则使用浏览器语言） */
+  lang = window.localStorage.getItem('lang') || this.createLang
+
+  /** 登录状态检测 - 检查cookie中是否存在token */
+  isLoggedIn = !!cookies.get('token')
+
+  /** 消息数量（当前写死为1） */
+  messageCount = 1
+
+  connectedCallback() {
+    switch (this.lang) {
+      case 'zh':
+        this.currentLanguage = 'zh_CN'
+        this.i18n = this.zhCN
+        break
+      case 'zh_CN':
+        this.currentLanguage = 'zh_CN'
+        this.i18n = this.zhCN
+        break
+      case 'zh_TW':
+        this.currentLanguage = 'zh_TW'
+        this.i18n = this.zhTW
+        break
+      case 'en_US':
+        this.currentLanguage = 'en_US'
+        this.i18n = this.enUS
+        break
+      default:
+        this.currentLanguage = 'zh_CN'
+        this.i18n = this.zhCN
+        break
+    }
+
+    super.connectedCallback()
+    this.fetchData()
+  }
+
+  // @ts-ignore
+  async fetchData() {
+    try {
+      const response = await fetch(
+        'https://backsite.efootprint.net/Gpm/webLcaOrganization/GetOrganizationByDomain'
+      ) // 替换为实际的 API 地址
+      const jsonData = await response.json()
+      let data = jsonData.data // 将获取到的数据保存到 data 属性中
+      if (data && data.personalizedConfigJson) {
+        this.personalizedConfigJson = JSON.parse(data.personalizedConfigJson)
+      }
+      // console.log('this.data.data.personalizedConfigJson', this.personalizedConfigJson)
+      this.logo =
+        this.personalizedConfigJson && this.personalizedConfigJson.logo
+      this.orgContacts =
+        this.personalizedConfigJson && this.personalizedConfigJson.orgContacts
+      this.name =
+        this.personalizedConfigJson &&
+        this.personalizedConfigJson.institution &&
+        this.personalizedConfigJson.institution.name
+      this.email =
+        this.personalizedConfigJson && this.personalizedConfigJson.orgEmail
+      this.phone =
+        this.personalizedConfigJson && this.personalizedConfigJson.orgPhone
+      this.address =
+        this.personalizedConfigJson && this.personalizedConfigJson.orgAddress
+      this.followUrl =
+        this.personalizedConfigJson && this.personalizedConfigJson.followUrl
+      this.alreadyServices = data.alreadyServices
+      setTimeout(() => this.requestUpdate())
+      // this.requestUpdate(); // 更新组件以触发重新渲染
+    } catch (error) {
+      // console.error('Error fetching data:', error);
+    }
+  }
+
+  render() {
+    return html` <div
+      class="ike-web-header"
+      style="
+                 background: ${this.isPlat
+        ? '#063223'
+        : '#FFFFFF'}; color: ${this.isPlat ? '#fff' : '#063223'}"
+    >
+      <div style="display: flex;align-items: center">
+        <img
+          src="https://ike-web.oss-cn-hangzhou.aliyuncs.com/WebLCA_logo.png"
+          class="iwh-url"
+          alt=""
+        />
+        ${this.status !== 'www' && this.status !== '192'
+          ? html` <div class="box-a" style="display: flex;align-items: center">
+              <img src="${this.logo}" alt="" />
+              <span
+                style="margin-left: 12px;color: #373737;font-weight: 600;color: ${this
+                  .isPlat
+                  ? '#fff'
+                  : '#063223'}"
+                >${this.name}</span
+              >
+            </div>`
+          : ''}
+
+        <!-- 左侧菜单项：eFootprint、CarbonZero、GPM -->
+        ${this.isPlat
+          ? html` <div class="left-menu-items">
+              ${this.isPlat || this.alreadyServices.includes('eF')
+                ? html` <div
+                    class="left-menu-item"
+                    style="color: ${this.hostName.includes(
+                      'efootprint.net/login'
+                    )
+                      ? '#06AA3E'
+                      : this.isPlat
+                      ? '#fff'
+                      : '#373737'}"
+                    @click="${this._routerPush}"
+                    data-url="https://www.efootprint.net"
+                    data-login-url="https://www.efootprint.net/angular/weblca/ef/model/modelList"
+                  >
+                    eFootprint
+                  </div>`
+                : ''}
+              ${this.isPlat || this.alreadyServices.includes('scope')
+                ? html` <div
+                    class="left-menu-item"
+                    style="color: ${this.hostName.includes('webcarbon.net')
+                      ? '#06AA3E'
+                      : this.isPlat
+                      ? '#fff'
+                      : '#373737'}"
+                    @click="${this._routerPush}"
+                    data-login-url="https://www.webcarbon.net/#/calculate/calculatCarbon"
+                    data-url="https://www.webcarbon.net"
+                  >
+                    CarbonZero
+                  </div>`
+                : ''}
+              ${this.isPlat || this.alreadyServices.includes('GPM')
+                ? html` <div
+                    class="left-menu-item"
+                    style="color: ${this.hostName.includes('webgpm.net')
+                      ? '#06AA3E'
+                      : this.isPlat
+                      ? '#fff'
+                      : '#373737'}"
+                    @click="${this._routerPush}"
+                    data-login-url="https://www.webgpm.net/#/dashboard/targetCenter"
+                    data-url="https://www.webgpm.net"
+                  >
+                    GPM
+                  </div>`
+                : ''}
+            </div>`
+          : ''}
+      </div>
+
+      <div class="iwh-right">
+        <div class="header-list flex align-center">
+          <div class="el-menu-demo">
+            <div
+              class="menu-item"
+              style="color: ${this.hostName.includes('weblca.net/home')
+                ? '#06AA3E'
+                : this.isPlat
+                ? '#fff'
+                : '#373737'}"
+              @click="${this._routerPush}"
+              data-login-url="https://www.weblca.net/home"
+              data-url="https://www.weblca.net/home"
+            >
+              ${this.i18n['首页']}
+            </div>
+
+            <!-- 平台专属菜单项：标准库和核算模版 -->
+            ${this.isPlat
+              ? html` <div
+                    class="menu-item"
+                    style="color: ${this.isPlat ? '#fff' : '#373737'}"
+                    @click="${this._routerPush}"
+                    data-login-url="https://www.weblca.net/standard"
+                    data-url="https://www.weblca.net/standard"
+                  >
+                    ${this.i18n['标准库']}
+                  </div>
+                  <div
+                    class="menu-item"
+                    style="color: ${this.isPlat ? '#fff' : '#373737'}"
+                    @click="${this._routerPush}"
+                    data-login-url="https://www.weblca.net/template"
+                    data-url="https://www.weblca.net/template"
+                  >
+                    ${this.i18n['核算模版']}
+                  </div>`
+              : ''}
+            ${this.isPlat || this.alreadyServices.includes('database')
+              ? html` <div
+                  class="menu-item menu-item-database"
+                  style=" position: relative;color: ${this.hostName.includes(
+                    'weblca.net/database'
+                  )
+                    ? '#06AA3E'
+                    : this.isPlat
+                    ? '#fff'
+                    : '#373737'}"
+                  @click="${this._routerPush}"
+                  data-login-urlurl="https://www.weblca.net/database"
+                  data-url="https://www.weblca.net/database"
+                >
+                  ${this.isPlat
+                    ? html`<img
+                        class="posi"
+                        src="https://ike-web.oss-cn-hangzhou.aliyuncs.com/HOT.png"
+                        alt=""
+                      />`
+                    : ''}
+                  ${this.i18n['数据库']}
+                  <div class="menu-sub-group">
+                    <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>
+                    <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>
+                  </div>
+                </div>`
+              : ''}
+            ${this.isPlat || this.alreadyServices.includes('databankpage')
+              ? html` <div
+                  class="menu-item"
+                  style="color: ${this.hostName.includes('/databankpage')
+                    ? '#06AA3E'
+                    : this.isPlat
+                    ? '#fff'
+                    : '#373737'}"
+                  @click="${this._routerPush}"
+                  data-login-url="https://www.weblca.net/databankpage"
+                  data-url="https://www.weblca.net/databankpage"
+                >
+                  ${this.i18n['资料库']}
+                </div>`
+              : ''}
+            ${this.isPlat
+              ? html` <div
+                  class="menu-item menu-item-database"
+                  style=" position: relative;color: ${this.hostName.includes(
+                    'efootprint.net/contest'
+                  )
+                    ? '#06AA3E'
+                    : this.isPlat
+                    ? '#fff'
+                    : '#373737'}"
+                >
+                  ${this.i18n['LCA大赛']}
+                  <div class="menu-sub-group menu-sub-group-1">
+                    <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>
+                    <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>
+                  </div>
+                </div>`
+              : ''}
+            ${this.isPlat
+              ? html` <div
+                  class="menu-item"
+                  style="color: ${this.hostName.includes(
+                    'efootprint.net/training'
+                  )
+                    ? '#06AA3E'
+                    : this.isPlat
+                    ? '#fff'
+                    : '#373737'}"
+                  @click="${this._routerPush}"
+                  data-login-url="https://www.weblca.net/training"
+                  data-url="https://www.weblca.net/training"
+                >
+                  ${this.i18n['专业培训']}
+                </div>`
+              : ''}
+            <div
+              class="menu-item"
+              style="color: ${this.isPlat ? '#fff' : '#373737'}"
+              @click="${this._scroll}"
+              data-login-url="#"
+              data-url="#"
+            >
+              ${this.i18n['联系我们']}
+            </div>
+
+            ${this.isShowLang
+              ? html` <div
+                  class="menu-item menu-item-database"
+                  style=" position: relative;
+                                     text-align: center;
+                                     display: flex;
+                                        align-items: center;
+                                     color: ${this.hostName.includes(
+                    'weblca.net/database'
+                  )
+                    ? '#06AA3E'
+                    : this.isPlat
+                    ? '#fff'
+                    : '#373737'}"
+                >
+                  ${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=""
+                      />`}
+                  <div class="menu-sub-group">
+                    <div
+                      @click="${this._clickLang}"
+                      data-lang="zh_CN"
+                      class="menu-sub-item"
+                    >
+                      中文简体
+                    </div>
+                    <div
+                      @click="${this._clickLang}"
+                      data-lang="zh_TW"
+                      class="menu-sub-item"
+                    >
+                      中文繁體
+                    </div>
+                    <div
+                      @click="${this._clickLang}"
+                      data-lang="en_US"
+                      class="menu-sub-item"
+                    >
+                      English
+                    </div>
+                  </div>
+                </div>`
+              : ''}
+
+            <!-- 消息图标 - 仅在登录状态下显示 -->
+            ${this.isLoggedIn
+              ? html`
+                  <div
+                    @click="${this._routerPush}"
+                    data-login-url="https://www.weblca.net/notification"
+                    data-url="https://www.weblca.net/notification"
+                    class="message-icon-container"
+                  >
+                    <img
+                      src="https://ike-web.oss-cn-hangzhou.aliyuncs.com/message.png"
+                      alt="消息"
+                      class="message-icon"
+                    />
+                    <div class="message-badge">${this.messageCount}</div>
+                  </div>
+                `
+              : ''}
+
+            <!-- 登录/首页按钮 -->
+            ${this.isPlat
+              ? html` <div
+                  class="login-button"
+                  style="border-color: ${this.isPlat
+                    ? '#fff'
+                    : '#373737'}; color: ${this.isPlat ? '#fff' : '#373737'}"
+                  @click="${this._handleLoginClick}"
+                >
+                  ${this.isLoggedIn ? this.i18n['个人中心'] : this.i18n['登录']}
+                </div>`
+              : ''}
+
+            <!--                            <div class="menu-item">-->
+            <!--                                <el-icon style="cursor: pointer" size="28" color="#fff">-->
+            <!--                                    <UserFilled/>-->
+            <!--                                </el-icon>-->
+            <!--                            </div>-->
+          </div>
+        </div>
+      </div>
+    </div>`
+  }
+
+  _routerPush(e) {
+    e.stopPropagation()
+    // @ts-ignore
+    let to = e.currentTarget && e.currentTarget.getAttribute('data-url')
+    let loginUrl =
+      e.currentTarget && e.currentTarget.getAttribute('data-login-url')
+
+    // 根据登录状态选择跳转URL
+    if (loginUrl && this.isLoggedIn) {
+      to = loginUrl
+    }
+    //192,www ,以及 to之中包含online的都不需要替换
+    // @ts-ignore
+    if (
+      this.status !== '192' &&
+      this.status !== 'www' &&
+      this.status !== 'online' &&
+      !to.includes('online')
+    ) {
+      to = to.replace('www', this.status)
+    }
+    window.location.href = to
+    window.parent.postMessage({ type: 'navigate', url: to }, '*')
+  }
+
+  _clickLang(e) {
+    e.stopPropagation()
+    // @ts-ignore
+    let lang = e.currentTarget && e.currentTarget.getAttribute('data-lang')
+    //192,www ,以及 to之中包含online的都不需要替换
+    // @ts-ignore
+    localStorage.setItem('lang', lang)
+    window.location.reload()
+    // window.parent.postMessage({type: 'navigate', url: to}, '*');
+  }
+
+  _scroll() {
+    let box = document.body
+    // console.log(box.clientHeight)
+    window.scrollTo({
+      top: document.documentElement.scrollHeight,
+      behavior: 'smooth',
+    })
+  }
+
+  _handleLoginClick() {
+    if (this.isLoggedIn) {
+      // 如果已登录，跳转到首页
+      window.location.href = 'https://www.weblca.net/selfCenter'
+    } else {
+      // 如果未登录，跳转到登录页面
+      window.location.href = 'https://www.weblca.net/login'
     }
+  }
 }
 
-customElements.define('ike-web-header', IkeWebHeader);
+customElements.define('ike-web-header', IkeWebHeader)