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
@@ -68,18 +68,17 @@
    </style>

    <script src="navigation-component.js"></script>
+
+    <script src="navbar-component.js"></script>
 </head>
 <body>
    <div id="app">
-        <nav class="navbar">
-            <div class="navbar-content">
-                <h1 class="navbar-title">宇之然内容创作平台 - 用户管理</h1>
-                <div class="navbar-user">
-                    <div class="user-info"><div class="avatar">{{ currentUser.username.charAt(0).toUpperCase() }}</div><span>{{ currentUser.username }}</span></div>
-                    <el-button type="danger" size="small" @click="handleLogout">退出</el-button>
-                </div>
-            </div>
-        </nav>
+        <navbar-component
+      title="用户管理"
+      :username="currentUser.username"
+      :is-admin="isAdmin"
+      @logout="handleLogout"
+    ></navbar-component>
        
 <navigation-component
      current-page="users"
@@ -225,6 +224,8 @@
        };
                const app = Vue.createApp(UsersApp);
            app.use(ElementPlus);
+    // 安装导航组件
+    if (window.installNavbar) { window.installNavbar(app); }
            // 安装导航组件
 if (window.installNavigation) { window.installNavigation(app); } else if (window.NavigationComponent) { app.component("navigation-component", window.NavigationComponent); }
 app.mount('#app');