From b8d9e0c209b576514269995614f214395ac527ed Mon Sep 17 00:00:00 2001 From: lt Date: Fri, 8 May 2026 10:36:51 +0800 Subject: [PATCH] =?UTF-8?q?refactor(frontend):=20=E6=8A=BD=E7=A6=BB?= =?UTF-8?q?=E5=85=AC=E5=85=B1=E5=AF=BC=E8=88=AA=E7=BB=84=E4=BB=B6=EF=BC=8C?= =?UTF-8?q?=E6=B6=88=E9=99=A4=E5=90=84=E9=A1=B5=E9=9D=A2=E9=87=8D=E5=A4=8D?= =?UTF-8?q?=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 创建 navigation-component.js：统一的PC左边栏 + H5底部导航组件 - 重构 topics.html、logs.html、admin.html、users.html、index.html - 删除各页面重复的 sidebar 和 mobile-nav HTML 结构 - 删除重复的导航样式定义，由组件统一提供 - 修复 component 插入重复的问题，确保每个页面只插入一次 现在修改导航只需更新组件文件，无需改动每个页面，提升维护性。 --- platform/frontend/admin.html | 34 ++-- platform/frontend/index.html | 104 ++--------- platform/frontend/logs.html | 36 ++-- platform/frontend/navigation-component.js | 216 ++++++++++++++++++++++ platform/frontend/topics.html | 33 ++-- platform/frontend/users.html | 36 ++-- 6 files changed, 296 insertions(+), 163 deletions(-) create mode 100644 platform/frontend/navigation-component.js diff --git a/platform/frontend/admin.html b/platform/frontend/admin.html index 601e5bf..8627685 100644 --- a/platform/frontend/admin.html +++ b/platform/frontend/admin.html @@ -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 @@ } } + +
@@ -78,13 +80,13 @@
-
+ + +
@@ -226,13 +228,7 @@
-
+
@@ -354,22 +300,12 @@
-
- - + +
diff --git a/platform/frontend/logs.html b/platform/frontend/logs.html index 0bc6aab..ee79eb8 100644 --- a/platform/frontend/logs.html +++ b/platform/frontend/logs.html @@ -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; } } + +
@@ -51,14 +53,14 @@
-
- + + +
+

📄 系统日志

@@ -76,13 +78,7 @@
- +
diff --git a/platform/frontend/navigation-component.js b/platform/frontend/navigation-component.js new file mode 100644 index 0000000..61ae6ff --- /dev/null +++ b/platform/frontend/navigation-component.js @@ -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: ` +
+ + + + + +
+ ` +}; + +// 注入公共样式（如果尚未注入） +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 }; +} diff --git a/platform/frontend/topics.html b/platform/frontend/topics.html index c55a7d3..ad5c09f 100644 --- a/platform/frontend/topics.html +++ b/platform/frontend/topics.html @@ -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; } + +
@@ -127,14 +129,12 @@
-
- + +

📋 选题管理

@@ -210,13 +210,6 @@
-
diff --git a/platform/frontend/users.html b/platform/frontend/users.html index 69032d6..416417c 100644 --- a/platform/frontend/users.html +++ b/platform/frontend/users.html @@ -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 @@ } } + +
@@ -78,14 +80,14 @@
-
- + + +
+

👥 用户管理

@@ -109,13 +111,7 @@
- +