73 lines
3.3 KiB
JavaScript
73 lines
3.3 KiB
JavaScript
// 统一导航与样式注入
|
|
(function() {
|
|
const STYLE_ID = 'layout-shared-style';
|
|
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 injectStyle() {
|
|
if (document.getElementById(STYLE_ID)) return;
|
|
const style = document.createElement('style');
|
|
style.id = STYLE_ID;
|
|
style.innerHTML = `
|
|
body { margin: 0; padding: 0; background: #f0f2f5; color: #303133; }
|
|
.navbar { height: 50px; background: #fff; border-bottom: 1px solid #e6e6e6;
|
|
display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
|
|
box-shadow: 0 1px 4px rgba(0,21,41,.08); }
|
|
.navbar-left { display: flex; align-items: center; }
|
|
.logo { font-size: 20px; font-weight: bold; color: #409EFF; cursor: pointer; }
|
|
.nav-menu { display: flex; gap: 8px; margin-left: 16px; }
|
|
.nav-item { padding: 8px 16px; cursor: pointer; border-radius: 4px; color: #303133; font-size: 14px; }
|
|
.nav-item:hover { background: #ecf5ff; color: #409EFF; }
|
|
.nav-item.active { background: #409EFF; color: #fff; }
|
|
.navbar-right { display: flex; align-items: center; gap: 16px; font-size: 14px; }
|
|
.navbar-right a { color: #409EFF; text-decoration: none; }
|
|
a { text-decoration: none; }
|
|
.content { padding: 20px; }
|
|
.card { border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
|
|
`;
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
function renderNavbar(activeKey) {
|
|
injectStyle();
|
|
let navbar = document.querySelector('.navbar');
|
|
if (!navbar) {
|
|
navbar = document.createElement('div');
|
|
navbar.className = 'navbar';
|
|
document.body.insertBefore(navbar, document.body.firstChild);
|
|
}
|
|
navbar.innerHTML = `
|
|
<div class="navbar-left">
|
|
<div class="logo" onclick="location.href='dashboard.html'">OA系统</div>
|
|
<div class="nav-menu">
|
|
${NAV_ITEMS.map(item => `
|
|
<div class="nav-item ${item.key === activeKey ? 'active' : ''}" onclick="location.href='${item.link}'">${item.label}</div>
|
|
`).join('')}
|
|
</div>
|
|
</div>
|
|
<div class="navbar-right">
|
|
<span style="color:#303133;">张三</span><span style="color:#909399;">|</span>
|
|
<a href="profile.html" style="color:#409EFF;">个人中心</a>
|
|
<span style="color:#909399;">|</span>
|
|
<a href="login.html" style="color:#409EFF;">退出</a>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
window.injectLayout = renderNavbar;
|
|
})();
|
|
|