lt
136 lines
6.9 KiB
JavaScript
136 lines
6.9 KiB
JavaScript
// Vue 3 导航组件 - 最终版（增强调试和样式）
|
|
(function() {
|
|
console.log('[Nav] 脚本加载');
|
|
|
|
function injectStyles() {
|
|
if (document.getElementById('navigation-styles')) return;
|
|
const styles = `
|
|
.navigation-wrapper { position: relative; }
|
|
.navigation-wrapper .sidebar {
|
|
position: fixed; top: 60px; left: 0; bottom: 0; width: 180px;
|
|
background: #ffffff; padding: 12px; box-shadow: 2px 0 8px rgba(0,0,0,0.1);
|
|
overflow-y: auto; z-index: 99999; border-right: 1px solid #ebeef5;
|
|
}
|
|
.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 !important; }
|
|
.navigation-wrapper .mobile-nav {
|
|
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: 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 { 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; }
|
|
}
|
|
@media (min-width: 769px) { .navigation-wrapper .mobile-nav { display: none !important; } }
|
|
body > #app > .main-content { margin-left: 180px !important; padding-top: 60px !important; }
|
|
@media (max-width: 768px) { body > #app > .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 getHFromApp(app) {
|
|
try {
|
|
if (app._context && app._context.h) return app._context.h;
|
|
if (app._instance && app._instance.proxy && app._instance.proxy._cf) return app._instance.proxy._cf;
|
|
} catch (e) { console.warn('[Nav] 获取 h 失败', e); }
|
|
return null;
|
|
}
|
|
|
|
const installNavigation = (app) => {
|
|
console.log('[Nav] installNavigation called');
|
|
injectStyles();
|
|
const h = getHFromApp(app) || (window.Vue && Vue.h) || function(tag, data, children) {
|
|
const el = document.createElement(tag);
|
|
if (data && data.class) el.className = data.class;
|
|
if (children) {
|
|
if (Array.isArray(children)) children.forEach(c => { if (typeof c === 'string') el.appendChild(document.createTextNode(c)); else if (c && c.nodeType) el.appendChild(c); });
|
|
else if (typeof children === 'string') el.textContent = children;
|
|
}
|
|
if (data && data.on) Object.keys(data.on).forEach(ev => el.addEventListener(ev, data.on[ev]));
|
|
return el;
|
|
};
|
|
console.log('[Nav] 使用 h 函数:', typeof h);
|
|
|
|
const component = {
|
|
name: 'NavigationComponent',
|
|
props: { currentPage: { type: String, required: true }, isAdmin: { type: Boolean, default: false } },
|
|
mounted() { console.log('[NavigationComponent] 已挂载，isAdmin:', this.isAdmin); },
|
|
render(){
|
|
const createElement = arguments[0] || h;
|
|
const emit = this.$emit || function() {};
|
|
|
|
const navigate = (page) => {
|
|
console.log('[NavigationComponent] 点击导航到:', page);
|
|
if (typeof emit === 'function') {
|
|
emit('navigate', page);
|
|
} else if (this.$emit) {
|
|
this.$emit('navigate', page);
|
|
}
|
|
};
|
|
|
|
const sidebarItems = [
|
|
{ icon: '📊', label: '系统概览', page: '/' },
|
|
{ icon: '📋', label: '选题管理', page: 'topics.html' },
|
|
{ icon: '📄', label: '系统日志', page: 'logs.html' },
|
|
...(this.isAdmin ? [{ icon: '👥', label: '用户管理', page: 'users.html' }, { icon: '⚙️', label: '系统管理', page: 'admin.html' }] : [])
|
|
];
|
|
const mobileItems = [
|
|
{ icon: '📊', label: '', page: '/' },
|
|
{ icon: '📋', label: '选题', page: 'topics.html' },
|
|
{ icon: '📄', label: '日志', page: 'logs.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' }, [
|
|
createElement('aside', { class: 'sidebar' }, [
|
|
createElement('div', { class: 'sidebar-header' }, [createElement('h3', '宇之然平台')]),
|
|
createElement('nav', { class: 'sidebar-nav' }, sidebarItems.map(item => {
|
|
const isActive = this.currentPage === (item.page === '/' ? 'dashboard' : item.page.replace('.html',''));
|
|
return createElement('button', {
|
|
key: item.page,
|
|
class: isActive ? 'sidebar-btn active' : 'sidebar-btn',
|
|
on: { click: (e) => { e.preventDefault(); navigate(item.page); } }
|
|
}, item.icon + ' ' + item.label);
|
|
}))
|
|
]),
|
|
createElement('nav', { class: 'mobile-nav' }, mobileItems.map(item => {
|
|
const isActive = this.currentPage === (item.page === '/' ? 'dashboard' : item.page.replace('.html',''));
|
|
const content = item.label ? (item.icon + ' ' + item.label) : item.icon;
|
|
return createElement('button', {
|
|
key: item.page,
|
|
class: isActive ? 'mobile-nav-btn active' : 'mobile-nav-btn',
|
|
on: { click: (e) => { e.preventDefault(); navigate(item.page); } }
|
|
}, content);
|
|
}))
|
|
]);
|
|
}
|
|
};
|
|
|
|
app.component('navigation-component', component);
|
|
console.log('[Nav] 组件已注册');
|
|
return app;
|
|
};
|
|
|
|
window.installNavigation = installNavigation;
|
|
console.log('[Nav] 脚本已加载');
|
|
})();
|