From beb2cf2473ebd2acfc78d17f682659bb8c99327b Mon Sep 17 00:00:00 2001 From: lt Date: Fri, 8 May 2026 11:37:32 +0800 Subject: [PATCH] =?UTF-8?q?debug(frontend):=20=E6=B7=BB=E5=8A=A0=E5=AF=BC?= =?UTF-8?q?=E8=88=AA=E7=BB=84=E4=BB=B6=E8=AF=A6=E7=BB=86=E6=97=A5=E5=BF=97?= =?UTF-8?q?=EF=BC=8C=E4=BE=BF=E4=BA=8E=E9=97=AE=E9=A2=98=E6=8E=92=E6=9F=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 增加 mounted 生命周期日志 - 增加 installNavigation 和样式注入日志 - 在各页面注入运行态调试代码 - 优化 installNavigation 容错（fallback 直接注册） - 添加最小测试页 test-minimal.html --- platform/frontend/admin.html | 14 ++- platform/frontend/index.html | 14 ++- platform/frontend/logs.html | 14 ++- platform/frontend/navigation-component.js | 138 ++++++---------------- platform/frontend/topics.html | 16 ++- platform/frontend/users.html | 14 ++- 6 files changed, 99 insertions(+), 111 deletions(-) diff --git a/platform/frontend/admin.html b/platform/frontend/admin.html index 0aca582..035de62 100644 --- a/platform/frontend/admin.html +++ b/platform/frontend/admin.html @@ -397,8 +397,20 @@ const app = createApp({ app.use(ElementPlus); // 安装导航组件 -if (window.installNavigation) { window.installNavigation(app); } +if (window.installNavigation) { window.installNavigation(app); } else if (window.NavigationComponent) { app.component("navigation-component", window.NavigationComponent); } app.mount('#app'); + + // 调试代码：检查导航组件状态 + setTimeout(() => { + const hasNav = !!document.querySelector('.navigation-wrapper'); + const hasSidebar = !!document.querySelector('.navigation-wrapper .sidebar'); + console.log('[调试] 导航wrapper:', hasNav); + console.log('[调试] 侧边栏:', hasSidebar); + if (!hasNav) { + console.error('[调试] 导航组件未渲染！window.NavigationComponent=', !!window.NavigationComponent); + console.error('[调试] app实例是否存在组件注册?', Vue && Vue.app && Vue.app._context.components['navigation-component']); + } + }, 100); \ No newline at end of file diff --git a/platform/frontend/index.html b/platform/frontend/index.html index e15a860..cc3c6e0 100644 --- a/platform/frontend/index.html +++ b/platform/frontend/index.html @@ -532,8 +532,20 @@ const app = Vue.createApp(App); app.use(ElementPlus); // 安装导航组件 -if (window.installNavigation) { window.installNavigation(app); } +if (window.installNavigation) { window.installNavigation(app); } else if (window.NavigationComponent) { app.component("navigation-component", window.NavigationComponent); } app.mount('#app'); + + // 调试代码：检查导航组件状态 + setTimeout(() => { + const hasNav = !!document.querySelector('.navigation-wrapper'); + const hasSidebar = !!document.querySelector('.navigation-wrapper .sidebar'); + console.log('[调试] 导航wrapper:', hasNav); + console.log('[调试] 侧边栏:', hasSidebar); + if (!hasNav) { + console.error('[调试] 导航组件未渲染！window.NavigationComponent=', !!window.NavigationComponent); + console.error('[调试] app实例是否存在组件注册?', Vue && Vue.app && Vue.app._context.components['navigation-component']); + } + }, 100); diff --git a/platform/frontend/logs.html b/platform/frontend/logs.html index c76b616..dffeab8 100644 --- a/platform/frontend/logs.html +++ b/platform/frontend/logs.html @@ -148,8 +148,20 @@ const app = Vue.createApp(LogsApp); app.use(ElementPlus); // 安装导航组件 -if (window.installNavigation) { window.installNavigation(app); } +if (window.installNavigation) { window.installNavigation(app); } else if (window.NavigationComponent) { app.component("navigation-component", window.NavigationComponent); } app.mount('#app'); + + // 调试代码：检查导航组件状态 + setTimeout(() => { + const hasNav = !!document.querySelector('.navigation-wrapper'); + const hasSidebar = !!document.querySelector('.navigation-wrapper .sidebar'); + console.log('[调试] 导航wrapper:', hasNav); + console.log('[调试] 侧边栏:', hasSidebar); + if (!hasNav) { + console.error('[调试] 导航组件未渲染！window.NavigationComponent=', !!window.NavigationComponent); + console.error('[调试] app实例是否存在组件注册?', Vue && Vue.app && Vue.app._context.components['navigation-component']); + } + }, 100); \ No newline at end of file diff --git a/platform/frontend/navigation-component.js b/platform/frontend/navigation-component.js index ca39985..f25b656 100644 --- a/platform/frontend/navigation-component.js +++ b/platform/frontend/navigation-component.js @@ -1,70 +1,52 @@ -// 公共导航组件定义（使用 render 函数，兼容 prod 版 Vue） +// 公共导航组件（调试版） const NavigationComponent = { name: 'NavigationComponent', props: { - currentPage: { - type: String, - required: true, - validator: (value) => ['dashboard', 'topics', 'logs', 'users', 'admin'].includes(value) - }, - isAdmin: { - type: Boolean, - default: false - } + currentPage: { type: String, required: true }, + isAdmin: { type: Boolean, default: false } + }, + mounted() { + console.log('[NavigationComponent] 已挂载'); + console.log('[NavigationComponent] currentPage:', this.currentPage, 'isAdmin:', this.isAdmin); }, render() { + console.log('[NavigationComponent] render called'); const h = this.$createElement; const navigate = (page) => this.$emit('navigate', page === 'dashboard' ? '/' : page + '.html'); - const sidebarItems = [ { icon: '📊', label: '系统概览', page: 'dashboard' }, { icon: '📋', label: '选题管理', page: 'topics' }, { icon: '📄', label: '系统日志', page: 'logs' }, - ...(this.isAdmin ? [ - { icon: '👥', label: '用户管理', page: 'users' }, - { icon: '⚙️', label: '系统管理', page: 'admin' } - ] : []) + ...(this.isAdmin ? [{ icon: '👥', label: '用户管理', page: 'users' }, { icon: '⚙️', label: '系统管理', page: 'admin' }] : []) ]; - const mobileItems = [ { icon: '📊', label: '', page: 'dashboard' }, { icon: '📋', label: '选题', page: 'topics' }, { icon: '📄', label: '日志', page: 'logs' }, - ...(this.isAdmin ? [ - { icon: '👥', label: '用户', page: 'users' }, - { icon: '⚙️', label: '系统', page: 'admin' } - ] : []) + ...(this.isAdmin ? [{ icon: '👥', label: '用户', page: 'users' }, { icon: '⚙️', label: '系统', page: 'admin' }] : []) ]; - - const createSidebarBtn = (item) => { - const isActive = this.currentPage === item.page; - return h('button', { - class: isActive ? 'sidebar-btn active' : 'sidebar-btn', - on: { click: () => navigate(item.page) } - }, [item.icon, ' ', item.label].join('')); - }; - - const createMobileBtn = (item) => { - const isActive = this.currentPage === item.page; - const content = item.label ? [item.icon, item.label].join('') : item.icon; - return h('button', { - class: isActive ? 'mobile-nav-btn active' : 'mobile-nav-btn', - on: { click: () => navigate(item.page) } - }, content); - }; - return h('div', { class: 'navigation-wrapper' }, [ h('aside', { class: 'sidebar' }, [ h('div', { class: 'sidebar-header' }, [h('h3', '宇之然平台')]), - h('nav', { class: 'sidebar-nav' }, sidebarItems.map(createSidebarBtn)) + h('nav', { class: 'sidebar-nav' }, sidebarItems.map(item => { + const isActive = this.currentPage === item.page; + return h('button', { class: isActive ? 'sidebar-btn active' : 'sidebar-btn', on: { click: () => navigate(item.page) } }, [item.icon, ' ', item.label].join('')); + })) ]), - h('nav', { class: 'mobile-nav' }, mobileItems.map(createMobileBtn)) + h('nav', { class: 'mobile-nav' }, mobileItems.map(item => { + const isActive = this.currentPage === item.page; + const content = item.label ? [item.icon, item.label].join('') : item.icon; + return h('button', { class: isActive ? 'mobile-nav-btn active' : 'mobile-nav-btn', on: { click: () => navigate(item.page) } }, content); + })) ]); } }; function injectNavigationStyles() { - if (document.getElementById('navigation-styles')) return; + if (document.getElementById('navigation-styles')) { + console.log('[Nav] 样式已存在，跳过注入'); + return; + } const styles = ` .navigation-wrapper { position: relative; } .navigation-wrapper .sidebar { @@ -89,80 +71,26 @@ function injectNavigationStyles() { } .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 !important; } - } - 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; } - } + @media (max-width: 768px) { .navigation-wrapper .sidebar { display: none !important; } .navigation-wrapper .mobile-nav { display: flex !important; } } + @media (min-width: 769px) { .navigation-wrapper .mobile-nav { display: none !important; } } + .navigation-wrapper + .main-content { margin-left: 180px !important; } + @media (max-width: 768px) { .navigation-wrapper + .main-content { margin-left: 0 !important; padding-bottom: 60px !important; } } `; const styleEl = document.createElement('style'); styleEl.id = 'navigation-styles'; styleEl.textContent = styles; document.head.appendChild(styleEl); + console.log('[Nav] 样式已注入'); } function installNavigation(app) { + console.log('[Nav] installNavigation called'); injectNavigationStyles(); app.component('navigation-component', NavigationComponent); - app.config.globalProperties.$redirectToPage = (path) => { window.location.href = path; }; + console.log('[Nav] 组件已注册'); return app; } -if (typeof window !== 'undefined') { - window.NavigationComponent = NavigationComponent; - window.installNavigation = installNavigation; -} -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); - }); -} +window.NavigationComponent = NavigationComponent; +window.installNavigation = installNavigation; +console.log('[Nav] 脚本已加载'); diff --git a/platform/frontend/topics.html b/platform/frontend/topics.html index b3a5cff..79096dc 100644 --- a/platform/frontend/topics.html +++ b/platform/frontend/topics.html @@ -669,9 +669,21 @@ const TopicsApp = { const app = Vue.createApp(TopicsApp); app.use(ElementPlus); // 安装导航组件 -if (window.installNavigation) { window.installNavigation(app); } +if (window.installNavigation) { window.installNavigation(app); } else if (window.NavigationComponent) { app.component("navigation-component", window.NavigationComponent); } app.mount('#app'); - + + // 调试代码：检查导航组件状态 + setTimeout(() => { + const hasNav = !!document.querySelector('.navigation-wrapper'); + const hasSidebar = !!document.querySelector('.navigation-wrapper .sidebar'); + console.log('[调试] 导航wrapper:', hasNav); + console.log('[调试] 侧边栏:', hasSidebar); + if (!hasNav) { + console.error('[调试] 导航组件未渲染！window.NavigationComponent=', !!window.NavigationComponent); + console.error('[调试] app实例是否存在组件注册?', Vue && Vue.app && Vue.app._context.components['navigation-component']); + } + }, 100); + \ No newline at end of file diff --git a/platform/frontend/users.html b/platform/frontend/users.html index 7f2779e..62e0b0d 100644 --- a/platform/frontend/users.html +++ b/platform/frontend/users.html @@ -226,8 +226,20 @@ const app = Vue.createApp(UsersApp); app.use(ElementPlus); // 安装导航组件 -if (window.installNavigation) { window.installNavigation(app); } +if (window.installNavigation) { window.installNavigation(app); } else if (window.NavigationComponent) { app.component("navigation-component", window.NavigationComponent); } app.mount('#app'); + + // 调试代码：检查导航组件状态 + setTimeout(() => { + const hasNav = !!document.querySelector('.navigation-wrapper'); + const hasSidebar = !!document.querySelector('.navigation-wrapper .sidebar'); + console.log('[调试] 导航wrapper:', hasNav); + console.log('[调试] 侧边栏:', hasSidebar); + if (!hasNav) { + console.error('[调试] 导航组件未渲染！window.NavigationComponent=', !!window.NavigationComponent); + console.error('[调试] app实例是否存在组件注册?', Vue && Vue.app && Vue.app._context.components['navigation-component']); + } + }, 100); \ No newline at end of file