txai-dev/yu-zhi-ran
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- mobile-nav 背景改为蓝色(#1890ff)，文字白色，便于确认渲染
- 增加渲染日志（侧边栏/移动端项目数量）
- 确保所有页面都使用同一组件，统一显示
This commit is contained in:
lt
2026-05-08 13:36:28 +08:00
parent 9147d5e679
commit df86e01cd2
1 changed files with 11 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
platform/frontend/navigation-component.js
+11 -12
View File
@@ -1,4 +1,4 @@
// Vue 3 导航组件 - 最终版（确保事件传递）
// Vue 3 导航组件 - 最终版（增强调试和样式）
(function() {
console.log('[Nav] 脚本加载');
@@ -20,15 +20,16 @@
.navigation-wrapper .sidebar-btn:hover { background: #f5f7fa; color: #409eff; }
.navigation-wrapper .sidebar-btn.active { background: #ecf5ff; color: #409eff; font-weight: 600 !important; }
.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: 99999; justify-content: space-around;
display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #1890ff;
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 {
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.active { color: #409eff; font-weight: 600 !important; }
.navigation-wrapper .mobile-nav-btn:hover { background: rgba(255,255,255,0.2); color: white !important; }
.navigation-wrapper .mobile-nav-btn.active { background: rgba(255,255,255,0.3); font-weight: 600 !important; }
@media (max-width: 768px) {
.navigation-wrapper .sidebar { display: none !important; }
.navigation-wrapper .mobile-nav { display: flex !important; }
@@ -70,21 +71,17 @@
const component = {
name: 'NavigationComponent',
props: { currentPage: { type: String, required: true }, isAdmin: { type: Boolean, default: false } },
mounted() { console.log('[NavigationComponent] 已挂载'); },
mounted() { console.log('[NavigationComponent] 已挂载，isAdmin:', this.isAdmin); },
render(){
const createElement = arguments[0] || h;
// 获取 emit 方法：通过 this.$emit 或从闭包中捕获
const emit = this.$emit || function() {};
const emit = this.$emit || function() {};
const navigate = (page) => {
console.log('[NavigationComponent] 点击导航到:', page);
// 直接调用 emit 函数
if (typeof emit === 'function') {
emit('navigate', page);
} else if (this.$emit) {
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' }] : [])
];
console.log('[NavigationComponent] 渲染侧边栏项目:', sidebarItems.length, '移动端项目:', mobileItems.length);
return createElement('div', { class: 'navigation-wrapper' }, [
createElement('aside', { class: 'sidebar' }, [
createElement('div', { class: 'sidebar-header' }, [createElement('h3', '宇之然平台')]),