feat(frontend): 抽离页眉为公共组件；修复导航点击事件

- 新增 navbar-component.js：固定页眉，统一标题、用户信息、退出按钮 - 重构所有页面（index/topics/logs/admin/users）使用 navbar-component - 清理原有 navbar 相关样式，避免冲突 - 导航组件增加 main-content padding-top 自动调整 - 修复导航按钮点击事件（确保触发） - 导航组件样式强应用，解决遮挡和布局问题
2026-05-08 13:22:12 +08:00
parent 2220d7b981
commit 9147d5e679
7 changed files with 169 additions and 75 deletions
@@ -0,0 +1,83 @@
+// 公共页眉组件 - 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] 脚本已加载');
+})();