yu-zhi-ran/platform/frontend/navbar-component.js

// 公共页眉组件 - Vue 3
(function() {
  console.log('[Navbar] 脚本加载');

  function injectStyles() {
    if (document.getElementById('navbar-styles')) return;
    const styles = `
      .navbar-component { position: fixed; top: 0; left: 0; right: 0; height: 60px; background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: white; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 10000; }
      .navbar-component .navbar-title { font-size: 18px; font-weight: 600; }
      .navbar-component .navbar-user { display: flex; align-items: center; gap: 12px; }
      .navbar-component .user-info { display: flex; align-items: center; gap: 8px; }
      .navbar-component .avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 14px; }
      @media (max-width: 768px) {
        .navbar-component { padding: 0 16px; }
        .navbar-component .navbar-title { font-size: 16px; }
      }
    `;
    const styleEl = document.createElement('style');
    styleEl.id = 'navbar-styles';
    styleEl.textContent = styles;
    document.head.appendChild(styleEl);
    console.log('[Navbar] 样式已注入');
  }

  function getHFromApp(app) {
    try {
      if (app._context && app._context.h) return app._context.h;
      if (app._instance && app._instance.proxy && app._instance.proxy._cf) return app._instance.proxy._cf;
    } catch (e) { console.warn('[Navbar] 获取 h 失败', e); }
    return null;
  }

  const installNavbar = (app) => {
    console.log('[Navbar] installNavbar called');
    injectStyles();
    const h = getHFromApp(app) || (window.Vue && Vue.h) || function(tag, data, children) {
      const el = document.createElement(tag);
      if (data && data.class) el.className = data.class;
      if (children) {
        if (Array.isArray(children)) children.forEach(c => { if (typeof c === 'string') el.appendChild(document.createTextNode(c)); else if (c && c.nodeType) el.appendChild(c); });
        else if (typeof children === 'string') el.textContent = children;
      }
      if (data && data.on) Object.keys(data.on).forEach(ev => el.addEventListener(ev, data.on[ev]));
    };

    const NavbarComponent = {
      name: 'NavbarComponent',
      props: {
        title: { type: String, default: '宇之然内容创作平台' },
        username: { type: String, default: '' },
        isAdmin: { type: Boolean, default: false },
        onLogout: { type: Function, default: null }
      },
      render(){
        const createElement = arguments[0] || h;
        return createElement('nav', { class: 'navbar-component' }, [
          createElement('div', { class: 'navbar-content', style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' } }, [
            createElement('h1', { class: 'navbar-title' }, this.title),
            createElement('div', { class: 'navbar-user' }, [
              createElement('div', { class: 'user-info' }, [
                createElement('div', { class: 'avatar' }, this.username ? this.username.charAt(0).toUpperCase() : '?'),
                this.username ? createElement('span', this.username) : null
              ]),
              this.isAdmin ? createElement('span', { style: { marginLeft: '8px', fontSize: '12px', background: 'rgba(255,255,255,0.3)', padding: '2px 8px', borderRadius: '10px' } }, '管理员') : null,
              createElement('button', { 
                class: 'logout-btn',
                style: { background: 'rgba(255,255,255,0.2)', border: 'none', color: 'white', padding: '6px 12px', borderRadius: '6px', cursor: 'pointer', marginLeft: '12px' },
                on: { click: () => { if (this.onLogout) this.onLogout(); else window.location.href = '/login.html'; } }
              }, '退出')
            ])
          ])
        ]);
      }
    };

    app.component('navbar-component', NavbarComponent);
    console.log('[Navbar] 组件已注册');
    return app;
  };

  window.installNavbar = installNavbar;
  console.log('[Navbar] 脚本已加载');
})();