From ef168e3d90ad878f0de19efa19d1b372b8f78636 Mon Sep 17 00:00:00 2001 From: lt Date: Fri, 8 May 2026 11:03:33 +0800 Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E5=85=AC=E5=85=B1=E5=AF=BC?= =?UTF-8?q?=E8=88=AA=E7=BB=84=E4=BB=B6=E5=AE=8C=E6=95=B4=E5=AE=9E=E7=8E=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 组件改为render函数，避免模板编译器依赖 - 自动注入样式，无需页面额外CSS - 自适应布局：PC固定侧边栏，H5底部导航 - 所有页面统一使用，admin权限动态控制 - 自动调整main-content边距，防止遮挡 --- platform/frontend/admin.html | 2 + platform/frontend/index.html | 4 +- platform/frontend/logs.html | 4 +- platform/frontend/navigation-component.js | 53 +++++++++++++++++++++-- platform/frontend/topics.html | 2 + platform/frontend/users.html | 4 +- 6 files changed, 63 insertions(+), 6 deletions(-) diff --git a/platform/frontend/admin.html b/platform/frontend/admin.html index 8627685..0aca582 100644 --- a/platform/frontend/admin.html +++ b/platform/frontend/admin.html @@ -396,6 +396,8 @@ const app = createApp({ }); app.use(ElementPlus); +// 安装导航组件 +if (window.installNavigation) { window.installNavigation(app); } app.mount('#app'); diff --git a/platform/frontend/index.html b/platform/frontend/index.html index ea5a74c..e15a860 100644 --- a/platform/frontend/index.html +++ b/platform/frontend/index.html @@ -531,7 +531,9 @@ const app = Vue.createApp(App); app.use(ElementPlus); - app.mount('#app'); + // 安装导航组件 +if (window.installNavigation) { window.installNavigation(app); } +app.mount('#app'); diff --git a/platform/frontend/logs.html b/platform/frontend/logs.html index ee79eb8..c76b616 100644 --- a/platform/frontend/logs.html +++ b/platform/frontend/logs.html @@ -147,7 +147,9 @@ }; const app = Vue.createApp(LogsApp); app.use(ElementPlus); - app.mount('#app'); + // 安装导航组件 +if (window.installNavigation) { window.installNavigation(app); } +app.mount('#app'); \ No newline at end of file diff --git a/platform/frontend/navigation-component.js b/platform/frontend/navigation-component.js index bd05d6e..ca39985 100644 --- a/platform/frontend/navigation-component.js +++ b/platform/frontend/navigation-component.js @@ -69,7 +69,7 @@ function injectNavigationStyles() { .navigation-wrapper { position: relative; } .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; + position: fixed; left: 0; top: 60px; bottom: 0; overflow-y: auto; z-index: 9999; } .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; } @@ -93,8 +93,8 @@ function injectNavigationStyles() { .navigation-wrapper .sidebar { display: none !important; } .navigation-wrapper .mobile-nav { display: flex !important; } } - @media (min-width: 769px) { .navigation-wrapper .mobile-nav { display: none !important; } } - body > #app > .navigation-wrapper + .main-content { margin-left: 180px; } + undefined + body > #app > .navigation-wrapper + .main-content { margin-left: 180px !important; } @media (max-width: 768px) { body > #app > .navigation-wrapper + .main-content { margin-left: 0 !important; padding-bottom: 60px !important; } } @@ -119,3 +119,50 @@ if (typeof window !== 'undefined') { if (typeof module !== 'undefined' && module.exports) { module.exports = { NavigationComponent, installNavigation }; } +// 自动调整 main-content 边距 +(function adjustLayout() { + // 等待DOM加载 + const check = () => { + const main = document.querySelector('.main-content'); + if (main) { + // 检测是否有导航组件 + const hasSidebar = document.querySelector('.navigation-wrapper .sidebar') !== null; + if (hasSidebar) { + main.style.marginLeft = '180px'; + } else { + main.style.marginLeft = '0'; + } + } + // 移动端调整 + const mobileNav = document.querySelector('.navigation-wrapper .mobile-nav'); + if (mobileNav) { + main.style.paddingBottom = '60px'; + } + }; + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', check); + } else { + check(); + } + // Vue 挂载后再次调整（通过全局API） + if (window.Vue) { + window.Vue.mixin({ + mounted() { + setTimeout(check, 0); + } + }); + } +})(); +// 运行时检查（仅开发环境） +if (typeof window !== 'undefined') { + window.addEventListener('load', () => { + setTimeout(() => { + const nav = document.querySelector('.navigation-wrapper'); + if (!nav) { + console.warn('[NavigationComponent] 未找到 .navigation-wrapper 元素，可能未正确渲染'); + } else { + console.log('[NavigationComponent] 已渲染'); + } + }, 100); + }); +} diff --git a/platform/frontend/topics.html b/platform/frontend/topics.html index ad5c09f..b3a5cff 100644 --- a/platform/frontend/topics.html +++ b/platform/frontend/topics.html @@ -668,6 +668,8 @@ const TopicsApp = { }; const app = Vue.createApp(TopicsApp); app.use(ElementPlus); +// 安装导航组件 +if (window.installNavigation) { window.installNavigation(app); } app.mount('#app'); diff --git a/platform/frontend/users.html b/platform/frontend/users.html index 416417c..7f2779e 100644 --- a/platform/frontend/users.html +++ b/platform/frontend/users.html @@ -225,7 +225,9 @@ }; const app = Vue.createApp(UsersApp); app.use(ElementPlus); - app.mount('#app'); + // 安装导航组件 +if (window.installNavigation) { window.installNavigation(app); } +app.mount('#app'); \ No newline at end of file