fix(navigation): 增强移动端底部导航样式和调试

- mobile-nav 背景改为蓝色(#1890ff),文字白色,便于确认渲染
- 增加渲染日志(侧边栏/移动端项目数量)
- 确保所有页面都使用同一组件,统一显示
This commit is contained in:
lt
2026-05-08 13:36:28 +08:00
parent 9147d5e679
commit df86e01cd2
+10 -11
View File
@@ -1,4 +1,4 @@
// Vue 3 导航组件 - 最终版(确保事件传递 // Vue 3 导航组件 - 最终版(增强调试和样式
(function() { (function() {
console.log('[Nav] 脚本加载'); console.log('[Nav] 脚本加载');
@@ -20,15 +20,16 @@
.navigation-wrapper .sidebar-btn:hover { background: #f5f7fa; color: #409eff; } .navigation-wrapper .sidebar-btn:hover { background: #f5f7fa; color: #409eff; }
.navigation-wrapper .sidebar-btn.active { background: #ecf5ff; color: #409eff; font-weight: 600 !important; } .navigation-wrapper .sidebar-btn.active { background: #ecf5ff; color: #409eff; font-weight: 600 !important; }
.navigation-wrapper .mobile-nav { .navigation-wrapper .mobile-nav {
display: none; position: fixed; bottom: 0; left: 0; right: 0; background: white; display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #1890ff;
box-shadow: 0 -2px 8px rgba(0,0,0,0.1); padding: 8px 0; z-index: 99999; justify-content: space-around; box-shadow: 0 -2px 8px rgba(0,0,0,0.2); padding: 8px 0; z-index: 99999; justify-content: space-around;
} }
.navigation-wrapper .mobile-nav-btn { .navigation-wrapper .mobile-nav-btn {
flex: 1; border: none; background: transparent; padding: 10px 4px; text-align: center; 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; font-size: 12px; color: white !important; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px;
transition: background 0.2s;
} }
.navigation-wrapper .mobile-nav-btn:hover { color: #409eff; } .navigation-wrapper .mobile-nav-btn:hover { background: rgba(255,255,255,0.2); color: white !important; }
.navigation-wrapper .mobile-nav-btn.active { color: #409eff; font-weight: 600 !important; } .navigation-wrapper .mobile-nav-btn.active { background: rgba(255,255,255,0.3); font-weight: 600 !important; }
@media (max-width: 768px) { @media (max-width: 768px) {
.navigation-wrapper .sidebar { display: none !important; } .navigation-wrapper .sidebar { display: none !important; }
.navigation-wrapper .mobile-nav { display: flex !important; } .navigation-wrapper .mobile-nav { display: flex !important; }
@@ -70,21 +71,17 @@
const component = { const component = {
name: 'NavigationComponent', name: 'NavigationComponent',
props: { currentPage: { type: String, required: true }, isAdmin: { type: Boolean, default: false } }, props: { currentPage: { type: String, required: true }, isAdmin: { type: Boolean, default: false } },
mounted() { console.log('[NavigationComponent] 已挂载'); }, mounted() { console.log('[NavigationComponent] 已挂载isAdmin:', this.isAdmin); },
render(){ render(){
const createElement = arguments[0] || h; const createElement = arguments[0] || h;
// 获取 emit 方法:通过 this.$emit 或从闭包中捕获
const emit = this.$emit || function() {}; const emit = this.$emit || function() {};
const navigate = (page) => { const navigate = (page) => {
console.log('[NavigationComponent] 点击导航到:', page); console.log('[NavigationComponent] 点击导航到:', page);
// 直接调用 emit 函数
if (typeof emit === 'function') { if (typeof emit === 'function') {
emit('navigate', page); emit('navigate', page);
} else if (this.$emit) { } else if (this.$emit) {
this.$emit('navigate', page); this.$emit('navigate', page);
} else {
console.warn('[NavigationComponent] 无法发送事件,emit unavailable');
} }
}; };
@@ -101,6 +98,8 @@
...(this.isAdmin ? [{ icon: '👥', label: '用户', page: 'users.html' }, { icon: '⚙️', label: '系统', page: 'admin.html' }] : []) ...(this.isAdmin ? [{ icon: '👥', label: '用户', page: 'users.html' }, { icon: '⚙️', label: '系统', page: 'admin.html' }] : [])
]; ];
console.log('[NavigationComponent] 渲染侧边栏项目:', sidebarItems.length, '移动端项目:', mobileItems.length);
return createElement('div', { class: 'navigation-wrapper' }, [ return createElement('div', { class: 'navigation-wrapper' }, [
createElement('aside', { class: 'sidebar' }, [ createElement('aside', { class: 'sidebar' }, [
createElement('div', { class: 'sidebar-header' }, [createElement('h3', '宇之然平台')]), createElement('div', { class: 'sidebar-header' }, [createElement('h3', '宇之然平台')]),