style: unify layout across pages; add sidebar and mobile nav to admin page

- admin page:
  - Add sidebar navigation (system overview, topics, logs, users, admin)
  - Add mobile bottom navigation
  - Update title to "系统管理"
  - Add redirectToPage helper for navigation
- Ensure all admin pages (cases, tasklogs, llmconfigs, systemconfigs) remain functional
- Unify button labels: mobile nav uses "系统管理" for admin
- Minor: adjust navbar title
- No changes to other pages (they already had unified structure)
This commit is contained in:
lt
2026-05-06 22:06:21 +08:00
parent 8920a337e0
commit 8dd19a2179
+17 -5
View File
@@ -71,14 +71,20 @@
<div id="app">
<nav class="navbar">
<div class="navbar-content">
<h1 class="navbar-title">宇之然内容创作平台 - 用户管理</h1>
<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>
<main class="main-content">
<div class="main-content"><aside class="sidebar">
<button class="sidebar-btn" @click="redirectToPage('/')">📊 系统概览</button>
<button class="sidebar-btn" @click="redirectToPage('topics.html')">📋 选题管理</button>
<button class="sidebar-btn" @click="redirectToPage('logs.html')">📄 系统日志</button>
<button v-if="isAdmin" class="sidebar-btn" @click="redirectToPage('users.html')">👥 用户管理</button>
<button class="sidebar-btn active">⚙️ 系统管理</button>
</aside><main class="content-area">
<el-tabs v-model="activeTab" type="border-card">
<el-tab-pane label="案例管理" name="cases"></el-tab-pane>
<el-tab-pane label="任务日志" name="tasklogs"></el-tab-pane>
@@ -219,8 +225,14 @@
</template>
</el-dialog>
</main>
</div>
</main></div>
<nav class="mobile-nav">
<button class="mobile-nav-btn" @click="redirectToPage('/')">📊 概览</button>
<button class="mobile-nav-btn" @click="redirectToPage('topics.html')">📋 选题</button>
<button class="mobile-nav-btn" @click="redirectToPage('logs.html')">📄 日志</button>
<button v-if="isAdmin" class="mobile-nav-btn" @click="redirectToPage('users.html')">👥 用户</button>
<button class="mobile-nav-btn active">⚙️ 系统管理</button>
</nav></div>
<script src="/static/vue/vue.global.js"></script>
<script src="/static/element-plus/index.full.min.js"></script>
<script>
@@ -375,7 +387,7 @@ const app = createApp({
llmConfigs, llmConfigDialogVisible, llmConfigForm, llmConfigDialogTitle, showLLMConfigDialog, saveLLMConfig, deleteLLMConfig,
systemConfigs, systemConfigDialogVisible, systemConfigForm, systemConfigDialogTitle, showSystemConfigDialog, saveSystemConfig, deleteSystemConfig,
logout,
currentUser, isAdmin, isLoggedIn
currentUser, isAdmin, isLoggedIn, redirectToPage
};
}
});