simple-memo/static/js/web-components.js

// static/js/web-components.js
// Web工作台公共组件（头部、底部）

// 渲染工作台头部
function renderWebHeader(activeNav) {
    const logoPath = (typeof SITE_CONFIG !== 'undefined') ? SITE_CONFIG.path : '/static/images/logo.png';
    const siteName = (typeof SITE_CONFIG !== 'undefined') ? SITE_CONFIG.name : '简记';
    
    const navItems = [
        { path: '/web/calendar', label: '日程', id: 'calendar' },
        { path: '/web/growth', label: '成长中心', id: 'growth' },
        { path: '/web/profile', label: '个人中心', id: 'profile' }
    ];

    let navHtml = '';
    navItems.forEach(item => {
        const isActive = item.id === activeNav;
        navHtml += `<a href="${item.path}" class="nav-link${isActive ? ' active' : ''}" style="padding: 6px 14px; border-radius: 6px; font-size: 13px; color: #475569; text-decoration: none;${isActive ? ' background: rgba(79, 158, 222, 0.1); color: #4F9EDE;' : ''}">${item.label}</a>`;
    });

    const nickname = localStorage.getItem('user_nickname') || '用户';
    const avatar = localStorage.getItem('user_avatar');
    const avatarHtml = avatar 
        ? `<img src="${avatar}" style="width: 100%; height: 100%; border-radius: 50%; object-fit: cover;">`
        : nickname.charAt(0).toUpperCase();

    return `
        <header style="position: fixed; top: 0; left: 0; right: 0; height: 56px; background: #fff; border-bottom: 1px solid #e2e8f0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 24px;">
            <div style="display: flex; align-items: center; gap: 20px;">
                <a href="/" style="display: flex; align-items: center; gap: 8px; text-decoration: none;">
                    <img src="${logoPath}" alt="${siteName}" style="height: 28px; width: auto;" onerror="this.style.display='none'; this.nextElementSibling.style.display='inline';">
                    <span style="font-size: 18px; font-weight: 600; color: #1e293b; display: none;">${siteName}</span>
                </a>
                <nav style="display: flex; gap: 4px;">
                    ${navHtml}
                </nav>
            </div>
            <div style="display: flex; align-items: center; gap: 16px;">
                <a href="/web/profile" style="display: flex; align-items: center; gap: 8px; text-decoration: none; padding: 6px 10px; border-radius: 6px; transition: background 0.15s;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
                    <div style="width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #4F9EDE 0%, #3A8BC9 100%); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 500;">${avatarHtml}</div>
                    <span style="font-size: 13px; color: #475569;">${nickname}</span>
                </a>
                <button onclick="handleWebLogout()" style="padding: 6px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 12px; color: #64748b; cursor: pointer; display: flex; align-items: center; gap: 4px;">
                    <svg style="width: 14px; height: 14px; fill: none; stroke: currentColor;" viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
                    退出
                </button>
            </div>
        </header>
    `;
}

// 渲染工作台底部
function renderWebFooter() {
    return `
        <footer style="height: 40px; background: #fff; border-top: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center; gap: 24px; font-size: 12px; color: #94a3b8;">
            <span>© 2024 简记Memo</span>
            <a href="/about" style="color: #64748b; text-decoration: none;">关于</a>
            <a href="/privacy" style="color: #64748b; text-decoration: none;">隐私</a>
        </footer>
    `;
}

// 退出登录
function handleWebLogout() {
    if (typeof $toast !== 'undefined' && $toast.confirm) {
        $toast.confirm('确定退出登录？').then(function(confirmed) {
            if (confirmed) {
                doLogout();
            }
        });
    } else {
        if (confirm('确定退出登录？')) {
            doLogout();
        }
    }
}

function doLogout() {
    localStorage.clear();
    window.location.href = '/login';
}

// 检查登录状态
function checkWebLogin() {
    const token = localStorage.getItem('user_token');
    if (!token) {
        window.location.href = '/login';
        return false;
    }
    // 检查token是否过期
    const expiresAt = localStorage.getItem('user_token_expires');
    if (expiresAt && Date.now() > parseInt(expiresAt)) {
        localStorage.clear();
        window.location.href = '/login';
        return false;
    }
    return true;
}

// 初始化Web页面
function initWebPage(activeNav) {
    if (!checkWebLogin()) return;
    
    // 插入头部
    const headerContainer = document.getElementById('webHeader');
    if (headerContainer) {
        headerContainer.innerHTML = renderWebHeader(activeNav);
    }
    
    // 插入底部
    const footerContainer = document.getElementById('webFooter');
    if (footerContainer) {
        footerContainer.innerHTML = renderWebFooter();
    }
}