205 lines
7.8 KiB
JavaScript
205 lines
7.8 KiB
JavaScript
// 统一布局注入 - 修复所有布局错乱问题
|
||
|
||
(function() {
|
||
'use strict';
|
||
|
||
// 导航菜单配置
|
||
const NAV_ITEMS = [
|
||
{ key: 'home', label: '首页', link: 'dashboard.html' },
|
||
{ key: 'project', label: '商机管理', link: 'project-initiation.html' },
|
||
{ key: 'process', label: '过程管理', link: 'project-start.html' },
|
||
{ key: 'finance', label: '财务管理', link: 'finance-invoice.html' },
|
||
{ key: 'report', label: '报表管理', link: 'report-project-detail.html' },
|
||
{ key: 'approval', label: '审批中心', link: 'approval-center.html' },
|
||
{ key: 'message', label: '消息中心', link: 'message-center.html' },
|
||
{ key: 'file', label: '文件中心', link: 'file-center.html' },
|
||
{ key: 'tool', label: '工具中心', link: 'tool-center.html' },
|
||
{ key: 'help', label: '帮助中心', link: 'help-center.html' },
|
||
{ key: 'search', label: '全局搜索', link: 'global-search.html' },
|
||
{ key: 'audit', label: '操作日志', link: 'audit-log.html' },
|
||
{ key: 'settings', label: '系统设置', link: 'settings-org.html' }
|
||
];
|
||
|
||
// 注入统一布局样式
|
||
function injectUnifiedStyles() {
|
||
const styleId = 'unified-layout-style';
|
||
if (document.getElementById(styleId)) return;
|
||
|
||
const link = document.createElement('link');
|
||
link.id = styleId;
|
||
link.rel = 'stylesheet';
|
||
link.href = 'unified-layout.css';
|
||
document.head.appendChild(link);
|
||
}
|
||
|
||
// 创建导航栏
|
||
function createNavbar(activeKey) {
|
||
injectUnifiedStyles();
|
||
|
||
// 检查是否已有导航栏
|
||
let navbar = document.querySelector('.navbar');
|
||
if (!navbar) {
|
||
navbar = document.createElement('div');
|
||
navbar.className = 'navbar';
|
||
const body = document.body;
|
||
const firstChild = body.firstChild;
|
||
if (firstChild) {
|
||
body.insertBefore(navbar, firstChild);
|
||
} else {
|
||
body.appendChild(navbar);
|
||
}
|
||
}
|
||
|
||
navbar.innerHTML = `
|
||
<div class="navbar-left">
|
||
<div class="logo" onclick="window.location.href='dashboard.html'">OA系统</div>
|
||
<div class="nav-menu">
|
||
${NAV_ITEMS.map(item => `
|
||
<div class="nav-item ${item.key === activeKey ? 'active' : ''}"
|
||
onclick="window.location.href='${item.link}'">${item.label}</div>
|
||
`).join('')}
|
||
</div>
|
||
</div>
|
||
<div class="navbar-right">
|
||
<span>张三</span>
|
||
<span style="margin: 0 8px; opacity: 0.5;">|</span>
|
||
<a href="profile.html">个人中心</a>
|
||
<span style="margin: 0 8px; opacity: 0.5;">|</span>
|
||
<a href="login.html">退出</a>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// 确保布局容器存在
|
||
function ensureLayoutContainer() {
|
||
let container = document.querySelector('.layout-container');
|
||
if (!container) {
|
||
container = document.createElement('div');
|
||
container.className = 'layout-container';
|
||
|
||
// 将body的所有子元素移到容器中
|
||
const body = document.body;
|
||
const children = Array.from(body.children);
|
||
children.forEach(child => {
|
||
if (!child.classList.contains('navbar')) {
|
||
container.appendChild(child);
|
||
}
|
||
});
|
||
|
||
body.appendChild(container);
|
||
}
|
||
|
||
// 确保主容器存在
|
||
let mainContainer = document.querySelector('.main-container');
|
||
if (!mainContainer) {
|
||
mainContainer = document.createElement('div');
|
||
mainContainer.className = 'main-container';
|
||
|
||
// 查找内容区域
|
||
const content = document.querySelector('.content') ||
|
||
document.querySelector('.app-main') ||
|
||
document.querySelector('[class*="content"]');
|
||
|
||
if (content) {
|
||
// 如果已有内容区域，将其包装
|
||
const parent = content.parentNode;
|
||
parent.insertBefore(mainContainer, content);
|
||
mainContainer.appendChild(content);
|
||
} else {
|
||
// 创建新的内容区域
|
||
const appMain = document.createElement('div');
|
||
appMain.className = 'app-main';
|
||
mainContainer.appendChild(appMain);
|
||
container.appendChild(mainContainer);
|
||
}
|
||
}
|
||
|
||
// 确保侧边栏存在（如果需要）
|
||
const hasSidebar = document.querySelector('.sidebar');
|
||
if (!hasSidebar && document.querySelector('.menu-item')) {
|
||
// 如果有菜单项但没有侧边栏，创建侧边栏
|
||
const sidebar = document.createElement('div');
|
||
sidebar.className = 'sidebar';
|
||
|
||
const menuItems = document.querySelectorAll('.menu-item');
|
||
menuItems.forEach(item => {
|
||
sidebar.appendChild(item.cloneNode(true));
|
||
item.remove();
|
||
});
|
||
|
||
const mainContainer = document.querySelector('.main-container');
|
||
if (mainContainer) {
|
||
mainContainer.insertBefore(sidebar, mainContainer.firstChild);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 统一布局初始化
|
||
function initUnifiedLayout(activeKey) {
|
||
// 注入样式
|
||
injectUnifiedStyles();
|
||
|
||
// 创建导航栏
|
||
createNavbar(activeKey);
|
||
|
||
// 确保布局容器
|
||
ensureLayoutContainer();
|
||
|
||
// 延迟执行，确保DOM已加载
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
ensureLayoutContainer();
|
||
});
|
||
} else {
|
||
ensureLayoutContainer();
|
||
}
|
||
}
|
||
|
||
// 导出函数
|
||
window.initUnifiedLayout = initUnifiedLayout;
|
||
|
||
// 如果页面已加载，立即执行
|
||
if (document.readyState !== 'loading') {
|
||
// 自动检测当前页面
|
||
const currentPath = window.location.pathname;
|
||
const currentFile = currentPath.split('/').pop() || 'dashboard.html';
|
||
|
||
// 根据文件名确定activeKey
|
||
let activeKey = 'home';
|
||
if (currentFile.includes('project-initiation') || currentFile.includes('project-list') ||
|
||
currentFile.includes('project-approval') || currentFile.includes('project-bidding') ||
|
||
currentFile.includes('project-contract')) {
|
||
activeKey = 'project';
|
||
} else if (currentFile.includes('project-start') || currentFile.includes('output-submit')) {
|
||
activeKey = 'process';
|
||
} else if (currentFile.includes('finance')) {
|
||
activeKey = 'finance';
|
||
} else if (currentFile.includes('report')) {
|
||
activeKey = 'report';
|
||
} else if (currentFile.includes('approval')) {
|
||
activeKey = 'approval';
|
||
} else if (currentFile.includes('message')) {
|
||
activeKey = 'message';
|
||
} else if (currentFile.includes('file')) {
|
||
activeKey = 'file';
|
||
} else if (currentFile.includes('tool')) {
|
||
activeKey = 'tool';
|
||
} else if (currentFile.includes('help')) {
|
||
activeKey = 'help';
|
||
} else if (currentFile.includes('search')) {
|
||
activeKey = 'search';
|
||
} else if (currentFile.includes('audit') || currentFile.includes('log')) {
|
||
activeKey = 'audit';
|
||
} else if (currentFile.includes('settings')) {
|
||
activeKey = 'settings';
|
||
}
|
||
|
||
initUnifiedLayout(activeKey);
|
||
} else {
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
initUnifiedLayout('home');
|
||
});
|
||
}
|
||
})();
|
||
|