simple-memo/static/js/components.js

document.addEventListener('DOMContentLoaded', async function() {
    const currentPath = window.location.pathname;

    try {
        const headerResponse = await fetch('/static/html/_header.html');
        const headerHtml = await headerResponse.text();
        document.body.insertAdjacentHTML('afterbegin', headerHtml);

        const navLinks = document.querySelectorAll('.nav-link');
        navLinks.forEach(link => {
            const href = link.getAttribute('href');
            const page = link.getAttribute('data-page');

            let isActive = false;
            if (page === 'home' && (currentPath === '/' || currentPath === '/index.html')) {
                isActive = true;
            } else if (page === 'growth' && (currentPath === '/growth' || currentPath === '/growth.html')) {
                isActive = true;
            } else if (page === 'rules' && (currentPath === '/growth-rules' || currentPath === '/growth-rules.html')) {
                isActive = true;
            } else if (page === 'about' && (currentPath === '/about' || currentPath === '/about.html')) {
                isActive = true;
            }

            if (isActive) {
                link.classList.add('active');
            }
        });

        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const mainNav = document.getElementById('mainNav');
        if (mobileMenuBtn && mainNav) {
            mobileMenuBtn.addEventListener('click', () => {
                mobileMenuBtn.classList.toggle('active');
                mainNav.classList.toggle('active');
            });

            mainNav.querySelectorAll('.nav-link').forEach(link => {
                link.addEventListener('click', () => {
                    mobileMenuBtn.classList.remove('active');
                    mainNav.classList.remove('active');
                });
            });
        }
    } catch (error) {
        console.error('Failed to load header:', error);
    }

    try {
        const footerResponse = await fetch('/static/html/_footer.html');
        const footerHtml = await footerResponse.text();
        document.body.insertAdjacentHTML('beforeend', footerHtml);
    } catch (error) {
        console.error('Failed to load footer:', error);
    }

    // Initialize Mini Program links
    initMiniProgramLinks();
});

// Mini Program Links Handler
function initMiniProgramLinks() {
    const miniproLinks = document.querySelectorAll('.minipro-link');
    
    miniproLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const href = this.getAttribute('href');
            let title = this.getAttribute('data-title') || '小程序功能';
            let desc = this.getAttribute('data-desc') || '该功能需要在微信小程序中使用';
            
            if (href.includes('todo')) {
                title = '待办任务';
                desc = '高效管理日常任务，完成任务即可获得经验值';
            } else if (href.includes('bill')) {
                title = '账单记录';
                desc = '简单快捷的记账体验，清晰了解资金流向';
            } else if (href.includes('mood')) {
                title = '心情日记';
                desc = '记录每天的心情点滴，留下珍贵的回忆';
            } else if (href.includes('growth')) {
                title = '成长之路';
                desc = '丰富的成就系统和等级体系，让记录更有趣';
            }
            
            showMiniProgramModal(title, desc);
        });
    });
}

function showMiniProgramModal(title, desc) {
    let overlay = document.getElementById('minipro-modal-overlay');
    
    if (!overlay) {
        overlay = document.createElement('div');
        overlay.id = 'minipro-modal-overlay';
        overlay.className = 'minipro-modal-overlay';
        overlay.innerHTML = `
            <div class="minipro-modal">
                <div class="minipro-modal-header">
                    <h3 class="minipro-modal-title">提示</h3>
                    <button class="minipro-modal-close" onclick="closeMiniProgramModal()">&times;</button>
                </div>
                <div class="minipro-modal-body">
                    <div class="minipro-modal-icon">📱</div>
                    <h3 id="minipro-modal-title">${title}</h3>
                    <p id="minipro-modal-desc">${desc}</p>
                    <p style="font-size: 0.875rem; color: var(--text-secondary);">
                        请打开微信，搜索"简记memo"小程序体验完整功能
                    </p>
                </div>
                <div class="minipro-modal-footer">
                    <button class="btn btn-secondary" onclick="closeMiniProgramModal()">知道了</button>
                </div>
            </div>
        `;
        document.body.appendChild(overlay);
        
        overlay.addEventListener('click', function(e) {
            if (e.target === overlay) {
                closeMiniProgramModal();
            }
        });
    } else {
        document.getElementById('minipro-modal-title').textContent = title;
        document.getElementById('minipro-modal-desc').textContent = desc;
    }
    
    overlay.classList.add('active');
    document.body.style.overflow = 'hidden';
}

function closeMiniProgramModal() {
    const overlay = document.getElementById('minipro-modal-overlay');
    if (overlay) {
        overlay.classList.remove('active');
        document.body.style.overflow = '';
    }
}