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/admin.html
+15 -19
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,13 +80,13 @@
</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" @click="redirectToPage('users.html')">👥 用户管理</button>
<button class="sidebar-btn active">⚙️ 系统</button>
</aside><main class="content-area">
<navigation-component
current-page="admin"
:is-admin="isAdmin"
@navigate="redirectToPage"
></navigation-component>
<div class="main-content"><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>
@@ -226,13 +228,7 @@
</el-dialog>
</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>
</div>
<script src="vue.global.prod.js"></script>
<script src="element-plus.full.js"></script>
<script>
platform/frontend/index.html
+20 -84
View File
@@ -88,42 +88,10 @@
flex-direction: column;
gap: 4px;
}
.sidebar-btn {
width: 100%;
text-align: left;
padding: 12px 16px;
border: none;
background: transparent;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: #a0aec0;
font-size: 14px;
font-weight: 500;
position: relative;
overflow: hidden;
}
.sidebar-btn:hover {
background: rgba(102, 126, 234, 0.1);
color: #667eea;
transform: translateX(4px);
}
.sidebar-btn.active {
background: linear-gradient(90deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
color: #667eea;
font-weight: 600;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}
.sidebar-btn.active::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, #667eea, #764ba2);
border-radius: 0 4px 4px 0;
}
/* 内容区域 */
.content-area {
@@ -276,33 +244,9 @@
z-index: 1000;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
}
.mobile-nav-btn {
flex: 1;
border: none;
background: transparent;
padding: 12px 8px;
text-align: center;
font-size: 12px;
color: #a0aec0;
cursor: pointer;
transition: all 0.3s;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.mobile-nav-btn.active {
color: #667eea;
font-weight: 600;
}
.mobile-nav-btn.active::before {
content: '';
width: 4px;
height: 4px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea, #764ba2);
margin-bottom: 2px;
}
/* 响应式 */
@media (max-width: 768px) {
@@ -328,15 +272,17 @@
.user-info { color: white !important; }
.avatar { background: rgba(255,255,255,0.2) !important; color: white !important; }
.sidebar { background: white !important; border-right: 1px solid #ebeef5 !important; backdrop-filter: none !important; }
.sidebar-btn { color: #606266 !important; }
.sidebar-btn:hover, .sidebar-btn.active { background: #ecf5ff !important; color: #409eff !important; }
.mobile-nav { background: white !important; border-top: 1px solid #ebeef5 !important; backdrop-filter: none !important; box-shadow: 0 -2px 8px rgba(0,0,0,0.1) !important; }
.mobile-nav-btn { color: #606266 !important; }
.mobile-nav-btn.active { color: #409eff !important; }
.mobile-nav-btn.active::before { content: none !important; display: none !important; }
#page-overview h2, #page-overview h3, #page-overview .module-title { color: #303133 !important; }
#page-overview .module-content { color: #303133 !important; }
</style>
<script src="navigation-component.js"></script>
</head>
<body>
<div id="app">
@@ -354,22 +300,12 @@
</div>
</nav>
<div class="main-content" v-if="isLoggedIn">
<aside class="sidebar">
<button class="sidebar-btn" :class="{ active: currentPage === 'overview' }" @click="redirectToPage('/')">
📊 系统概览
</button>
<button class="sidebar-btn" :class="{ active: currentPage === 'topics' }" @click="redirectToPage('topics.html')">
📋 选题管理
</button>
<button class="sidebar-btn" :class="{ active: currentPage === 'logs' }" @click="redirectToPage('logs.html')">
📄 系统日志
</button>
<button v-if="isAdmin" class="sidebar-btn" :class="{ active: currentPage === 'users' }" @click="redirectToPage('users.html')">
👥 用户管理
</button>
</aside>
<navigation-component
current-page="dashboard"
:is-admin="isAdmin"
@navigate="redirectToPage"
></navigation-component>
<div class="main-content" v-if="isLoggedIn">
<main class="content-area">
<!-- 系统概览页面 -->
<div id="page-overview" class="page" :class="{ active: currentPage === 'overview' }">
platform/frontend/logs.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; }
@@ -39,6 +39,8 @@
pre { font-size: 11px; line-height: 1.4; }
}
</style>
<script src="navigation-component.js"></script>
</head>
<body>
<div id="app">
@@ -51,14 +53,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 active">📄 系统日志</button>
<button v-if="isAdmin" class="sidebar-btn" @click="redirectToPage('users.html')">👥 用户管理</button>
<button v-if="isAdmin" class="sidebar-btn" @click="redirectToPage('admin.html')">⚙️ 系统</button>
</aside>
<navigation-component
current-page="logs"
: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>
@@ -76,13 +78,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 active">📄 日志</button>
<button v-if="isAdmin" class="mobile-nav-btn" @click="redirectToPage('users.html')">👥 用户</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>
platform/frontend/navigation-component.js
+216
View File
@@ -0,0 +1,216 @@
// 公共导航组件定义
const NavigationComponent = {
props: {
currentPage: {
type: String,
required: true,
validator: (value) => ['dashboard', 'topics', 'logs', 'users', 'admin'].includes(value)
},
isAdmin: {
type: Boolean,
default: false
}
},
template: `
<div class="navigation-wrapper">
<!-- PC 左边栏 -->
<aside class="sidebar">
<div class="sidebar-header">
<h3>宇之然平台</h3>
</div>
<nav class="sidebar-nav">
<button
class="sidebar-btn"
:class="{ active: currentPage === 'dashboard' }"
@click="$emit('navigate', '/')"
>📊 系统概览</button>
<button
class="sidebar-btn"
:class="{ active: currentPage === 'topics' }"
@click="$emit('navigate', 'topics.html')"
>📋 选题管理</button>
<button
class="sidebar-btn"
:class="{ active: currentPage === 'logs' }"
@click="$emit('navigate', 'logs.html')"
>📄 系统日志</button>
<button
v-if="isAdmin"
class="sidebar-btn"
:class="{ active: currentPage === 'users' }"
@click="$emit('navigate', 'users.html')"
>👥 用户管理</button>
<button
v-if="isAdmin"
class="sidebar-btn"
:class="{ active: currentPage === 'admin' }"
@click="$emit('navigate', 'admin.html')"
>⚙️ 系统管理</button>
</nav>
</aside>
<!-- H5 底部导航 -->
<nav class="mobile-nav">
<button
class="mobile-nav-btn"
:class="{ active: currentPage === 'dashboard' }"
@click="$emit('navigate', '/')"
>📊 概览</button>
<button
class="mobile-nav-btn"
:class="{ active: currentPage === 'topics' }"
@click="$emit('navigate', 'topics.html')"
>📋 选题</button>
<button
class="mobile-nav-btn"
:class="{ active: currentPage === 'logs' }"
@click="$emit('navigate', 'logs.html')"
>📄 日志</button>
<button
v-if="isAdmin"
class="mobile-nav-btn"
:class="{ active: currentPage === 'users' }"
@click="$emit('navigate', 'users.html')"
>👥 用户</button>
<button
v-if="isAdmin"
class="mobile-nav-btn"
:class="{ active: currentPage === 'admin' }"
@click="$emit('navigate', 'admin.html')"
>⚙️ 系统</button>
</nav>
</div>
`
};
// 注入公共样式（如果尚未注入）
function injectNavigationStyles() {
if (document.getElementById('navigation-styles')) return;
const styles = `
/* 导航组件样式 */
.navigation-wrapper .sidebar {
width: 180px;
background: white;
padding: 12px;
box-shadow: 2px 0 8px rgba(0,0,0,0.05);
position: fixed;
left: 0;
top: 60px;
bottom: 0;
overflow-y: auto;
z-index: 100;
}
.navigation-wrapper .sidebar-header {
padding: 12px 8px 16px;
border-bottom: 1px solid #ebeef5;
margin-bottom: 12px;
}
.navigation-wrapper .sidebar-header h3 {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #303133;
}
.navigation-wrapper .sidebar-btn {
width: 100%;
text-align: left;
padding: 10px 12px;
border: none;
background: transparent;
border-radius: 8px;
margin-bottom: 6px;
cursor: pointer;
transition: all 0.3s;
color: #606266;
font-size: 14px;
display: flex;
align-items: center;
gap: 6px;
}
.navigation-wrapper .sidebar-btn:hover {
background: #f5f7fa;
color: #409eff;
}
.navigation-wrapper .sidebar-btn.active {
background: #ecf5ff;
color: #409eff;
font-weight: 600;
}
.navigation-wrapper .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;
justify-content: space-around;
}
.navigation-wrapper .mobile-nav-btn {
flex: 1;
border: none;
background: transparent;
padding: 10px 4px;
text-align: center;
font-size: 11px;
color: #606266;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.navigation-wrapper .mobile-nav-btn:hover {
color: #409eff;
}
.navigation-wrapper .mobile-nav-btn.active {
color: #409eff;
font-weight: 600;
}
@media (max-width: 768px) {
.navigation-wrapper .sidebar {
display: none !important;
}
.navigation-wrapper .mobile-nav {
display: flex;
}
}
@media (min-width: 769px) {
.navigation-wrapper .mobile-nav {
display: none !important;
}
}
`;
const styleEl = document.createElement('style');
styleEl.id = 'navigation-styles';
styleEl.textContent = styles;
document.head.appendChild(styleEl);
}
// 安装组件到Vue应用
function installNavigation(app, options = {}) {
injectNavigationStyles();
app.component('navigation-component', NavigationComponent);
// 添加全局redirectToPage方法（兼容旧代码）
app.config.globalProperties.$redirectToPage = (path) => {
window.location.href = path;
};
return app;
}
// 导出到全局（兼容直接使用）
if (typeof window !== 'undefined') {
window.NavigationComponent = NavigationComponent;
window.installNavigation = installNavigation;
}
if (typeof module !== 'undefined' && module.exports) {
module.exports = { NavigationComponent, installNavigation };
}
platform/frontend/topics.html
+13 -20
View File
@@ -18,9 +18,9 @@
.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: 12px; box-shadow: 2px 0 8px rgba(0,0,0,0.05); }
.sidebar-btn { width: 100%; text-align: left; padding: 8px 12px; 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: 32px; overflow-y: auto; }
.card { background: white; border-radius: 16px; padding: 24px; margin-bottom: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.status-badge { display: inline-flex; align-items: center; gap: 4px; }
@@ -30,8 +30,8 @@
.status-dot.ready { background: #67C23A; }
.status-dot.published { background: #409EFF; }
.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; }
@@ -115,6 +115,8 @@
padding: 8px 12px;
}
</style>
<script src="navigation-component.js"></script>
</head>
<body>
<div id="app">
@@ -127,14 +129,12 @@
</div>
</div>
</nav>
<div class="main-content">
<aside class="sidebar">
<button class="sidebar-btn" @click="redirectToPage('/')">📊 系统概览</button>
<button class="sidebar-btn active">📋 选题管理</button>
<button class="sidebar-btn" @click="redirectToPage('logs.html')">📄 系统日志</button>
<button v-if="isAdmin" class="sidebar-btn" @click="redirectToPage('users.html')">👥 用户管理</button>
<button v-if="isAdmin" class="sidebar-btn" @click="redirectToPage('admin.html')">⚙️ 系统</button>
</aside>
<navigation-component
current-page="topics"
:is-admin="isAdmin"
@navigate="redirectToPage"
></navigation-component>
<div class="main-content">
<main class="content-area">
<div class="card">
<h2 style="font-size: 28px; font-weight: 700; margin-bottom: 32px; color: #303133;">📋 选题管理</h2>
@@ -210,13 +210,6 @@
</div>
</main>
</div>
<nav class="mobile-nav">
<button class="mobile-nav-btn" @click="redirectToPage('/')">📊 概览</button>
<button class="mobile-nav-btn active">📋 选题</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 v-if="isAdmin" class="mobile-nav-btn" @click="redirectToPage('admin.html')">⚙️ 系统</button>
</nav>
<!-- 预览弹窗 -->
<el-dialog v-model="previewVisible" title="选题预览" width="85%" :modal-props="{ closeOnClickModal: false }" :before-close="() => previewVisible = false" class="preview-dialog-custom" :fullscreen="previewFullscreen">
<div v-if="previewTopic">
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>