90 lines
4.6 KiB
JavaScript
90 lines
4.6 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: linear-gradient(135deg, #f5f7fa 0%, #eef2f7 100%); color: #303133; }
|
|
.navbar { height: 60px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-bottom: none;
|
|
display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.12); position: relative; z-index: 1000; }
|
|
.navbar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
|
|
background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); }
|
|
.navbar > * { position: relative; z-index: 1; }
|
|
.navbar-left { display: flex; align-items: center; }
|
|
.logo { font-size: 22px; font-weight: 700; color: #ffffff; cursor: pointer;
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.1); letter-spacing: 0.5px;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
|
|
.logo:hover { transform: scale(1.05); text-shadow: 0 4px 8px rgba(0,0,0,0.15); }
|
|
.nav-menu { display: flex; gap: 4px; margin-left: 20px; }
|
|
.nav-item { padding: 10px 18px; cursor: pointer; border-radius: 8px; color: rgba(255,255,255,0.9);
|
|
font-size: 14px; font-weight: 500; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative; overflow: hidden; }
|
|
.nav-item::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
|
|
background: rgba(255,255,255,0.1); transition: left 0.3s; }
|
|
.nav-item:hover::before { left: 0; }
|
|
.nav-item:hover { color: #ffffff; background: rgba(255,255,255,0.15); transform: translateY(-1px); }
|
|
.nav-item.active { background: rgba(255,255,255,0.25); color: #ffffff;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15); font-weight: 600; }
|
|
.navbar-right { display: flex; align-items: center; gap: 16px; font-size: 14px;
|
|
color: rgba(255,255,255,0.9); }
|
|
.navbar-right a { color: rgba(255,255,255,0.9); text-decoration: none;
|
|
transition: all 0.3s; }
|
|
.navbar-right a:hover { color: #ffffff; text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
|
a { text-decoration: none; }
|
|
.content { padding: 20px; }
|
|
.card { border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
|
|
.card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: translateY(-2px); }
|
|
`;
|
|
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;
|
|
})();
|
|
|