288 lines
10 KiB
HTML
288 lines
10 KiB
HTML
<div class="layui-layout layui-layout-admin">
|
|
<div class="layui-header">
|
|
<!-- 头部区域 -->
|
|
<ul class="layui-nav layui-layout-left">
|
|
<li class="layui-nav-item layadmin-flexible" lay-unselect>
|
|
<a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
|
|
<i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
|
|
</a>
|
|
</li>
|
|
<li class="layui-nav-item" lay-unselect>
|
|
<a href="javascript:;" layadmin-event="refresh" title="刷新">
|
|
<i class="layui-icon layui-icon-refresh-3"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
|
|
<li class="layui-nav-item layui-hide-xs" lay-unselect>
|
|
<a href="javascript:;" layadmin-event="theme">
|
|
<i class="layui-icon layui-icon-theme"></i>
|
|
</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-hide-xs" lay-unselect>
|
|
<a href="javascript:;" layadmin-event="note">
|
|
<i class="layui-icon layui-icon-note"></i>
|
|
</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-hide-xs" lay-unselect>
|
|
<a href="javascript:;" layadmin-event="fullscreen">
|
|
<i class="layui-icon layui-icon-screen-full"></i>
|
|
</a>
|
|
</li>
|
|
<li class="layui-nav-item" lay-unselect>
|
|
<script type="text/html" template lay-url="{{layui.setter.baseurl}}adminapi/system/user/getuser"
|
|
lay-done="layui.element.render('nav', 'layadmin-layout-right');">
|
|
<a href="javascript:;">
|
|
<cite>{{ (d.data && d.data.displayName) ? d.data.displayName : '用户' }}</cite>
|
|
</a>
|
|
<dl class="layui-nav-child">
|
|
<dd layadmin-event="logout" style="text-align: center;"><a>退出</a></dd>
|
|
</dl>
|
|
</script>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- 侧边菜单 -->
|
|
<div class="layui-side layui-side-menu">
|
|
<div class="layui-side-scroll">
|
|
<script type="text/html" template lay-url="{{layui.setter.baseurl}}adminapi/System/user/nav"
|
|
lay-done="layui.element.render('nav', 'layadmin-system-side-menu'); initMenuHighlight();" id="TPL_layout">
|
|
|
|
<div class="layui-logo" lay-href="">
|
|
<span>{{ layui.setter.name || 'layuiAdmin' }}</span>
|
|
</div>
|
|
|
|
<ul class="layui-nav layui-nav-tree" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu">
|
|
{{#
|
|
var path = layui.router().path
|
|
,pathURL = layui.admin.correctRouter(path.join('/'))
|
|
,dataName = layui.setter.response.dataName;
|
|
|
|
layui.each(d[dataName], function(index, item){
|
|
var hasChildren = typeof item.children === 'object' && item.children.length > 0
|
|
,url = (item.url && typeof item.url === 'string') ? item.url : item.name;
|
|
}}
|
|
<li data-name="{{ item.name || '' }}" data-jump="{{ item.url || '' }}" class="layui-nav-item">
|
|
<a href="javascript:;" {{ hasChildren ? '' : 'lay-href='+ url }} lay-tips="{{ item.name }}" lay-direction="2">
|
|
<i class="layui-icon {{ item.icon }}"></i>
|
|
<cite>{{ item.name }}</cite>
|
|
</a>
|
|
{{# if(hasChildren){ }}
|
|
<dl class="layui-nav-child">
|
|
{{# layui.each(item.children, function(index2, item2){
|
|
var hasChildren2 = typeof item2.children == 'object' && item2.children.length > 0
|
|
,url2 = (item2.url && typeof item2.url === 'string')
|
|
? item2.url
|
|
: [item.name, item2.name, ''].join('/');
|
|
}}
|
|
<dd data-name="{{ item2.name || '' }}" data-jump="{{ item2.url || '' }}" class="layui-nav-item">
|
|
<a href="javascript:;" {{ hasChildren2 ? '' : 'lay-href='+ url2 }}>{{ item2.name }}</a>
|
|
{{# if(hasChildren2){ }}
|
|
<dl class="layui-nav-child">
|
|
{{# layui.each(item2.children, function(index3, item3){
|
|
var url3 = (item3.url && typeof item3.url === 'string')
|
|
? item3.url
|
|
: [item.name, item2.name, item3.name].join('/')
|
|
}}
|
|
<dd data-name="{{ item3.name || '' }}" data-jump="{{ item3.url || '' }}">
|
|
<a href="javascript:;" lay-href="{{ url3 }}" {{ item3.iframe ? 'lay-iframe="true"' : '' }}>{{ item3.name }}</a>
|
|
</dd>
|
|
{{# }); }}
|
|
</dl>
|
|
{{# } }}
|
|
</dd>
|
|
{{# }); }}
|
|
</dl>
|
|
{{# } }}
|
|
</li>
|
|
{{# }); }}
|
|
</ul>
|
|
</script>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 页面标签 -->
|
|
<div class="layadmin-pagetabs" id="LAY_app_tabs">
|
|
<div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div>
|
|
<div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div>
|
|
<div class="layui-icon layadmin-tabs-control layui-icon-down">
|
|
<ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav">
|
|
<li class="layui-nav-item" lay-unselect>
|
|
<a href="javascript:;"></a>
|
|
<dl class="layui-nav-child layui-anim-fadein">
|
|
<dd layadmin-event="closeThisTabs"><a href="javascript:;">关闭当前标签页</a></dd>
|
|
<dd layadmin-event="closeOtherTabs"><a href="javascript:;">关闭其它标签页</a></dd>
|
|
<dd layadmin-event="closeAllTabs"><a href="javascript:;">关闭全部标签页</a></dd>
|
|
</dl>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
|
|
<ul class="layui-tab-title" id="LAY_app_tabsheader">
|
|
<li lay-id="/"><i class="layui-icon layui-icon-home"></i></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主体内容 - iframe模式 -->
|
|
<div class="layui-body" id="LAY_app_body">
|
|
<div class="layadmin-tabsbody-item layui-show" id="LAY_iframe_container">
|
|
<iframe frameborder="0" src="" class="layadmin-iframe" id="LAY_admin_iframe"></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 辅助元素 -->
|
|
<div class="layadmin-body-shade" layadmin-event="shade"></div>
|
|
</div>
|
|
|
|
<style>
|
|
/* iframe样式 */
|
|
.layadmin-iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
background: #fff;
|
|
}
|
|
|
|
/* 修复tabs位置 */
|
|
.layadmin-pagetabs {
|
|
position: fixed;
|
|
top: 50px;
|
|
right: 0;
|
|
left: 220px;
|
|
z-index: 999;
|
|
background: #fff;
|
|
}
|
|
|
|
/* 修复body位置 - 有tabs时 */
|
|
.layui-layout-admin .layui-body {
|
|
top: 90px !important;
|
|
}
|
|
|
|
/* 修复body位置 - 无tabs时 */
|
|
.layui-layout-admin .layui-body.no-tabs {
|
|
top: 50px !important;
|
|
}
|
|
|
|
/* 防止iframe容器被刷新时重新创建 */
|
|
.layadmin-tabsbody-item {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// 菜单高亮函数
|
|
function initMenuHighlight() {
|
|
var $ = layui.$;
|
|
var admin = layui.admin;
|
|
|
|
// 关闭所有layer弹窗和遮罩
|
|
function closeAllLayers() {
|
|
console.log('closeAllLayers 被调用');
|
|
try {
|
|
if (typeof layer !== 'undefined') {
|
|
console.log('调用 layer.closeAll()');
|
|
layer.closeAll();
|
|
}
|
|
} catch(e) {
|
|
console.log('layer.closeAll 错误:', e);
|
|
}
|
|
console.log('移除 layui-layer-shade');
|
|
$('.layui-layer-shade').remove();
|
|
console.log('移除 layui-layer');
|
|
$('.layui-layer').remove();
|
|
// 关闭侧边栏遮罩
|
|
console.log('隐藏 layadmin-body-shade');
|
|
$('.layadmin-body-shade').hide();
|
|
}
|
|
|
|
// 点击侧边栏链接时关闭弹窗
|
|
$(document).on('click', '#LAY-system-side-menu a', function() {
|
|
console.log('点击了侧边栏链接');
|
|
closeAllLayers();
|
|
});
|
|
|
|
// Tab切换时关闭弹窗
|
|
layui.element.on('tab(layadmin-layout-tabs)', function() {
|
|
console.log('Tab切换');
|
|
closeAllLayers();
|
|
});
|
|
|
|
// 监听iframe加载完成，关闭其他iframe上的弹窗
|
|
window.addEventListener('message', function(e) {
|
|
if (e.data === 'iframe-focused') {
|
|
closeAllLayers();
|
|
}
|
|
});
|
|
|
|
// 暴露关闭函数到全局
|
|
window.closeAllAdminLayers = closeAllLayers;
|
|
|
|
// 高亮当前菜单
|
|
function highlightMenu(href) {
|
|
var sideMenu = $('#LAY-system-side-menu');
|
|
if (!sideMenu.length) return;
|
|
|
|
// 移除所有高亮
|
|
sideMenu.find('.layui-this').removeClass('layui-this');
|
|
|
|
if (!href) {
|
|
// 获取当前tab
|
|
var $curTab = $('#LAY_app_tabsheader .layui-this');
|
|
if ($curTab.length) {
|
|
href = $curTab.attr('lay-id');
|
|
}
|
|
}
|
|
|
|
if (!href || href === '/') return;
|
|
|
|
// 标准化路径
|
|
href = href.replace(/^\//, '');
|
|
|
|
// 查找匹配的菜单并高亮
|
|
sideMenu.find('a[lay-href]').each(function() {
|
|
var menuHref = $(this).attr('lay-href').replace(/^\//, '');
|
|
if (menuHref === href) {
|
|
var $dd = $(this).closest('dd');
|
|
var $li = $(this).closest('li.layui-nav-item');
|
|
|
|
// 高亮当前
|
|
$dd.addClass('layui-this');
|
|
|
|
// 展开父级
|
|
$dd.parents('dd').each(function() {
|
|
$(this).addClass('layui-nav-itemed');
|
|
});
|
|
$li.addClass('layui-nav-itemed');
|
|
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
|
|
// 初始化高亮
|
|
setTimeout(function() {
|
|
highlightMenu();
|
|
}, 100);
|
|
|
|
// Tab切换时高亮
|
|
layui.element.on('tab(layadmin-layout-tabs)', function() {
|
|
setTimeout(highlightMenu, 50);
|
|
});
|
|
|
|
// Hash变化时高亮
|
|
window.addEventListener('hashchange', function() {
|
|
setTimeout(highlightMenu, 50);
|
|
});
|
|
}
|
|
|
|
// 暴露到全局
|
|
window.initMenuHighlight = initMenuHighlight;
|
|
</script>
|