ike-weblca-html 2.0.12 → 2.1.2

package/src/index.js

@@ -1,5 +1,5 @@
-import "./IkeWebHeader-temporary"
-import "./IkeWebFooter"
-import "./js/UserAgreement"
+import './IkeWebHeader'
+import './IkeWebFooter'
+import './js/UserAgreement'
 
-export {UserAgreementModal} from "./js/UserAgreement"
+export { UserAgreementModal } from './js/UserAgreement'

package/src/IkeWebHeader-temporary.js

@@ -1,529 +0,0 @@
-import {css, html, LitElement} from 'lit-element';
-import {property} from "lodash-es";
-import cookies from 'js-cookie';
-
-/**
- * IkeWebHeader - Web LCA 网站头部组件
- *
- * 这是一个基于 LitElement 的 Web Components 组件，用于渲染网站的头部导航栏。
- * 支持多语言切换、动态菜单显示、响应式设计等功能。
- *
- * 主要功能：
- * - 多语言支持（简体中文、繁体中文、英文）
- * - 根据域名动态显示不同的菜单项
- * - 支持个性化配置（logo、机构名称等）
- * - 响应式导航菜单
- * - 平滑滚动到页面底部
- * - 登录状态检测和相应的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首届中国化工产品碳足迹数据库大赛',
-        '登录':'登录',
-        '个人中心':'个人中心',
-        
-    }
-
-    /** 繁体中文语言包 */
-    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 || 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>` : ''}
-
-                            <!-- 消息图标 - 仅在登录状态下显示 -->
-                         
-
-                            <!-- 登录/首页按钮 -->
-                   
-                        </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);