txai-dev/yu-zhi-ran
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(frontend): 抽离公共导航组件，消除各页面重复代码

Browse Source 
- 创建 navigation-component.js：统一的PC左边栏 + H5底部导航组件
- 重构 topics.html、logs.html、admin.html、users.html、index.html
- 删除各页面重复的 sidebar 和 mobile-nav HTML 结构
- 删除重复的导航样式定义，由组件统一提供
- 修复 component 插入重复的问题，确保每个页面只插入一次

现在修改导航只需更新组件文件，无需改动每个页面，提升维护性。
This commit is contained in:
lt
2026-05-08 10:36:51 +08:00
parent 284b18e5fc
commit b8d9e0c209
6 changed files with 296 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
platform/frontend/users.html
+16 -20
View File
@@ -16,14 +16,14 @@
.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; }
.main-content { display: flex; flex: 1; max-width: 1400px; margin: 0 auto; width: 100%; }
.sidebar { width: 180px; background: white; padding: 16px; box-shadow: 2px 0 8px rgba(0,0,0,0.05); }
.sidebar-btn { width: 100%; text-align: left; padding: 12px 16px; border: none; background: transparent; border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: all 0.3s; color: #606266; font-size: 14px; }
.sidebar-btn:hover { background: #f5f7fa; color: #409eff; }
.sidebar-btn.active { background: #ecf5ff; color: #409eff; font-weight: 600; }
.content-area { flex: 1; padding: 24px; overflow-y: auto; }
.card { background: white; border-radius: 12px; padding: 24px; margin-bottom: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: white; box-shadow: 0 -2px 8px rgba(0,0,0,0.1); padding: 8px 0; z-index: 1000; }
.mobile-nav-btn { flex: 1; border: none; background: transparent; padding: 12px; text-align: center; font-size: 12px; color: #606266; cursor: pointer; }
.mobile-nav-btn.active { color: #409eff; font-weight: 600; }
@media (max-width: 768px) {
.sidebar { display: none; }
.mobile-nav { display: flex; }
@@ -66,6 +66,8 @@
}
}
</style>
<script src="navigation-component.js"></script>
</head>
<body>
<div id="app">
@@ -78,14 +80,14 @@
</div>
</div>
</nav>
<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 active">👥 用户管理</button>
<button v-if="isAdmin" class="sidebar-btn" @click="redirectToPage('admin.html')">⚙️ 系统</button>
</aside>
<navigation-component
current-page="users"
:is-admin="isAdmin"
@navigate="redirectToPage"
></navigation-component>
<div class="main-content">
<main class="content-area">
<div class="card">
<h2 style="font-size: 24px; font-weight: 600; margin-bottom: 24px;">👥 用户管理</h2>
@@ -109,13 +111,7 @@
</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 active">👥 用户</button>
<button v-if="isAdmin" class="mobile-nav-btn" @click="redirectToPage('admin.html')">⚙️ 系统</button>
</nav>
</div>
<script src="vue.global.prod.js"></script>
<script src="element-plus.full.js"></script>