This commit is contained in:
2025-09-18 18:49:01 +08:00
6 changed files with 320 additions and 1151 deletions
+111 -24
View File
@@ -115,22 +115,82 @@ layout("/layouts/v4/baseLayout.html"){
height: 100%;
}
/* 悬浮菜单按钮样式 */
.menu-toggle-btn {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgb(64 109 157);
color: white;
text-align: center;
line-height: 50px;
font-size: 24px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
z-index: 1000;
cursor: pointer;
transition: all 0.3s ease;
}
.menu-toggle-btn:hover {
background-color: rgb(54 99 147);
transform: scale(1.05);
}
.menu-toggle-btn.active {
background-color: #d9534f;
}
/* 菜单遮罩层样式 */
.menu-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 998;
}
@media (max-width: 768px) {
.sub-app-container {
flex-direction: column;
}
.sidebar-menu {
width: 100%;
position: fixed;
top: 64px;
left: -100%;
width: 40%;
z-index: 999;
transition: left 0.3s ease;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
}
.sub-app-container-main-content {
.sidebar-menu.show {
left: 0;
}
.menu-toggle-btn {
display: block;
}
.menu-overlay.show {
display: block;
}
.main-content {
padding: 20px;
width: 100%;
}
}
</style>
<div class="sub-app-container" id="sub-app-container">
<!-- 菜单遮罩层 -->
<div class="menu-overlay" id="menu-overlay"></div>
<!-- 左侧菜单区域 -->
<nav class="sidebar-menu" id="sidebar-menu">
<div class="menu-header">
@@ -150,6 +210,11 @@ layout("/layouts/v4/baseLayout.html"){
<div class="content-body" id="sub-app-container-main-content-body">${layoutContent!}</div>
</main>
<!-- 悬浮菜单按钮 -->
<div class="menu-toggle-btn" id="menu-toggle-btn">
<i class="fa fa-bars"></i>
</div>
<!-- 子应用ID -->
<div id="sub-app-id" style="display: none"></div>
</div>
@@ -177,29 +242,15 @@ layout("/layouts/v4/baseLayout.html"){
setContentTitle()
})
setContentTitle()
})()
// 设置内容标题
function setContentTitle() {
// const menu = store.state.user.menus.find((v) => v.href === window.location.pathname)
// $("#sub-app-container-main-content .content-title").text(menu?.name)
try {
const app = JSON.parse(window.sessionStorage.getItem("zhgh_sub_app"))
$("#sub-app-container #sidebar-menu .menu-header .menu-title").text(app?.name)
} catch (e) {
}
}
document.addEventListener("DOMContentLoaded", function () {
const menuLinks = document.querySelectorAll("#sidebar-menu a")
menuLinks.forEach((link) => {
link.addEventListener("click", function (e) {
const pjax = this.hasAttribute("data-pjax")
e.preventDefault()
})
})
})
}
})()
new Vue({
el: "#sidebar-menu",
@@ -361,11 +412,47 @@ layout("/layouts/v4/baseLayout.html"){
if (!appId) return
this.getMenus(appId)
}
}
},
},
mounted() {
this.init()
// 移动端布局
const sidebarMenu = document.getElementById("sidebar-menu")
const menuToggleBtn = document.getElementById("menu-toggle-btn")
const menuOverlay = document.getElementById("menu-overlay")
// 初始化菜单状态
if (window.innerWidth <= 768) {
menuToggleBtn.style.display = "block"
} else {
menuToggleBtn.style.display = "none"
}
// 菜单按钮点击事件
menuToggleBtn.addEventListener("click", function () {
sidebarMenu.classList.toggle("show")
menuOverlay.classList.toggle("show")
})
// 遮罩层点击事件
menuOverlay.addEventListener("click", function () {
sidebarMenu.classList.remove("show")
menuOverlay.classList.remove("show")
})
window.addEventListener("resize", function () {
if (window.innerWidth <= 768) {
menuToggleBtn.style.display = "block"
} else {
menuToggleBtn.style.display = "none"
sidebarMenu.classList.remove("show")
menuOverlay.classList.remove("show")
}
})
}
})
</script>
@@ -1,592 +0,0 @@
<!DOCTYPE html>
<html lang="${lang,escape}">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<meta name="description" content="${AppName!}">
<title>${AppName!}</title>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="${base!}/assets/platform/plugins/myframe/css/myframe.css">
<link rel="stylesheet" href="${base!}/assets/platform/plugins/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="${base!}/assets/platform/fonts/themify-icons.css">
<link rel="stylesheet" href="${base!}/assets/platform/fonts/font-awesome.min.css">
<link rel="stylesheet" href="${base!}/assets/platform/css/common.css?v=1.0.1">
<link rel="stylesheet" href="${base!}/assets/platform/css/main.css">
<link rel="stylesheet" href="${base!}/assets/platform/css/elmain.css">
<link rel="stylesheet" href="${base!}/assets/platform/css/panel.css">
<!-- import Vue before Element -->
<script src="${base!}/assets/platform/plugins/vue/vue.min.js"></script>
<!-- import JavaScript -->
<script src="${base!}/assets/platform/plugins/element-ui/lib/index.js"></script>
<script src="${base!}/assets/platform/plugins/element-ui/lib/i18n/${lang,escape}.js"></script>
<script src="${base!}/assets/platform/plugins/jquery/jquery.js"></script>
<script src="${base!}/assets/platform/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<!-- pjax是异步加载html片段的工具,模拟前端路由机制 -->
<script src="${base!}/assets/platform/plugins/pjax/jquery.pjax.js"></script>
<script src="${base!}/assets/platform/plugins/myframe/js/myframe.js"></script>
<!-- Array数组增加findIndex等方法,TreeTable用得到,兼容IE8 -->
<script src="${base!}/assets/platform/plugins/polyfill/polyfill.js"></script>
<!-- 时间日期处理工具类 -->
<script src="${base!}/assets/platform/plugins/moment/moment.min.js"></script>
<!-- 浏览器通知 -->
<script src="${base!}/assets/platform/plugins/push/push.min.js"></script>
<!-- 浏览器通知 -->
<script src="${base!}/assets/platform/plugins/toastr/toastr.js"></script>
<link rel="stylesheet" href="${base!}/assets/platform/plugins/toastr/toastr.css">
<script src="${base!}/assets/platform/js/main.js"></script>
<script src="${base!}/assets/platform/js/offscreen.js"></script>
<!--# if(@auth.getPrincipalProperty('loginTheme')!=null){ #-->
<link rel="stylesheet" href="${base!}/assets/platform/css/skins/${@auth.getPrincipalProperty('loginTheme')}"
id="skin">
<!--# }else{ #-->
<link rel="stylesheet" href="${base!}/assets/platform/css/skins/palette.css" id="skin">
<!--# } #-->
<!--#
var isLeftMenu = false;
if(@auth.getPrincipalProperty('menuTheme') == "top"){
isLeftMenu = false;
}else if(@auth.getPrincipalProperty('menuTheme') == "left"){
isLeftMenu = true;
}
#-->
<script type="text/javascript">
var base = "${base!}";
var loginPjax = "${@auth.getPrincipalProperty('loginPjax')}";
var isLeftMenu = "${isLeftMenu!}";
ELEMENT.locale(ELEMENT.lang['${lang,escape}']);
</script>
</head>
<body>
<div class="gallery-loader" style="background-color:transparent;">
<div class="loader"></div>
</div>
<div class="playground hidden-xs">
<div class="options">
<div class="pg-close ti-close"></div>
<div class="options-container color-options">
<h6>${msg['index.themes']}</h6>
<a onclick="sublime.changeTheme('palette.css')" href="${base!}/assets/platform/css/skins/palette.css"
class="css_orange cs_color cs_1 <!--#if(@auth.getPrincipalProperty('loginTheme')==null || 'palette.css' == @auth.getPrincipalProperty('loginTheme')){#-->active<!--#}#-->">
<div></div>
<div></div>
<div></div>
<div></div>
</a>
<a onclick="sublime.changeTheme('palette.2.css')" href="${base!}/assets/platform/css/skins/palette.2.css"
class="css_orange cs_color cs_2 <!--#if('palette.2.css' == @auth.getPrincipalProperty('loginTheme')){#-->active<!--# }#-->">
<div></div>
<div></div>
<div></div>
<div></div>
</a>
<a onclick="sublime.changeTheme('palette.3.css')" href="${base!}/assets/platform/css/skins/palette.3.css"
class="css_orange cs_color cs_3 <!--#if('palette.3.css' == @auth.getPrincipalProperty('loginTheme')){#-->active<!--# }#-->">
<div></div>
<div></div>
<div></div>
<div></div>
</a>
</div>
<div class="options-container">
<h6>${msg['index.layout']}</h6>
<a class="pg-val toggle-sidebar toggle-active <!--#if(@auth.getPrincipalProperty('loginSidebar')){#--> active<!--#}#-->"
href="javascript:;">
<img src="${base!}/assets/platform/img/panel/small.png" alt="">
</a>
<a class="pg-val toggle-scroll toggle-active <!--#if(@auth.getPrincipalProperty('loginScroll')){#-->active<!--#}#-->"
href="javascript:;">
<img src="${base!}/assets/platform/img/panel/scroll.png" alt="">
</a>
<a class="pg-val toggle-boxed toggle-active <!--#if(@auth.getPrincipalProperty('loginBoxed')){#-->active<!--#}#-->"
href="javascript:;">
<img src="${base!}/assets/platform/img/panel/boxed.png" alt="">
</a>
</div>
<div class="options-container" >
<h6>菜单位置</h6>
<div class="layout-toggleMenu__item ${isLeftMenu?'is-active':''}" data-position="left">左侧</div>
<div class="layout-toggleMenu__item ${!isLeftMenu?'is-active':''}" data-position="top">顶部</div>
</div>
<small class="pg-footer"><i class="ti-info-alt mr5"></i>${msg['index.panel']}</small>
</div>
</div>
<div id="mainApp"
class="app <!--#if(@auth.getPrincipalProperty('loginSidebar')){#--> small-menu <!--#}#--> <!--#if(@auth.getPrincipalProperty('loginScroll')){#--> fixed-scroll <!--#}#--> <!--#if(@auth.getPrincipalProperty('loginBoxed')){#--> boxed <!--#}#-->">
<header class="header header-fixed navbar">
<div class="brand">
<a href="javascript:;" class="ti-menu off-left visible-xs" data-toggle="offscreen" data-move="ltr"></a>
<a href="${base!}/platform/home" data-pjax class="navbar-brand">
<img src="${base!}/assets/platform/img/logo.png" alt=""
class="o_img <!--#if(!@auth.getPrincipalProperty('loginSidebar')){#-->o_hide<!--#}#-->">
<span class="heading-font o_img <!--#if(@auth.getPrincipalProperty('loginSidebar')){#-->o_hide<!--#}#-->">
<img src="${base!}/assets/platform/img/logoa.png">
</span>
</a>
</div>
<ul class="nav navbar-nav">
<li class="hidden-xs">
<!-- toggle small menu -->
<a href="javascript:;" class="toggle-sidebar">
<i class="ti-menu"></i>
</a>
<!-- /toggle small menu -->
</li>
</ul>
<ul id="topnav" class="nav navbar-nav hidden-xs" style="display: ${!isLeftMenu?'initial':'none'};">
<!--#
var secondMenus=@auth.getPrincipalProperty('secondMenus');
for(firstMenu in @auth.getPrincipalProperty('firstMenus')){
#-->
<li class="dropdown">
<!--# if(!isEmpty(@secondMenus.get(firstMenu.path))){#-->
<a href="javascript:;" data-toggle="dropdown">
<span>
<!--#if(lang=="zh_CN"){#-->${firstMenu.name}<!--#}else{#-->${firstMenu.aliasName}
<!--#}#--></span>
<b class="caret"></b>
</a>
<!--#}else{#-->
<a href="<!--# if(!isEmpty(firstMenu.href)){ #--><!--#if(@string.startWith(firstMenu.href,'/')){#-->${base}${firstMenu.href!}<!--#}else{#-->${firstMenu.href!}<!--#}#--> <!--# }else{ #-->javascript:;<!--# } #-->"
<!--#if(@string.startWith(firstMenu.target,'_')){#-->target="${firstMenu.target!}"<!--#}else{#-->
${firstMenu.target!}<!--#}#--> >
<span>
<!--#if(lang=="zh_CN"){#-->${firstMenu.name}<!--#}else{#-->${firstMenu.aliasName}
<!--#}#--></span></a>
<!--#}#-->
<!--# if(!isEmpty(@secondMenus.get(firstMenu.path))){#-->
<ul class="dropdown-menu topnav">
<!--# for(secondMenu in @secondMenus.get(firstMenu.path)){ #-->
<li class="dropdown">
<a href="<!--# if(!isEmpty(secondMenu.href)){ #--><!--#if(@string.startWith(secondMenu.href,'/')){#-->${base}${secondMenu.href!}<!--#}else{#-->${secondMenu.href!}<!--#}#--> <!--# }else{ #-->javascript:;<!--# } #-->"
<!--#if(@string.startWith(secondMenu.target,'_')){#-->target="${secondMenu.target!}"
<!--#}else{#--> ${secondMenu.target!}<!--#}#--> >
<!--# if(!isEmpty(@secondMenus.get(secondMenu.path))){ #--><i class="toggle-accordion"></i>
<!--#}#-->
<span><!--#if(lang=="zh_CN"){#-->${secondMenu.name}<!--#}else{#-->${secondMenu.aliasName}
<!--#}#--></span>
</a>
<!--# if(!isEmpty(@secondMenus.get(secondMenu.path))){ #-->
<ul class="sub-menu">
<!--# for(thMenu in @secondMenus.get(secondMenu.path)){ #-->
<li class="clearfix">
<a <!--# if(!isEmpty(thMenu.href)){ #-->href="<!--#if(@string.startWith(thMenu.href,'/')){#-->${base}${thMenu.href!}<!--#}else{#-->${thMenu.href!}<!--#}#-->" <!--# }else{ #-->href="javascript:;"<!--# } #-->
<!--#if(@string.startWith(thMenu.target,'_')){#-->target="${thMenu.target!}"
<!--#}else{#--> ${thMenu.target!}<!--#}#--> >
<span><!--#if(lang=="zh_CN"){#-->${thMenu.name}<!--#}else{#-->${thMenu.aliasName}
<!--#}#--></span>
</a>
</li><!--# }#-->
</ul><!--#}#-->
</li><!--# } #-->
</ul><!--# } #-->
</li><!--# }#-->
</ul>
<ul class="nav navbar-nav hidden-xs" style="display: ${isLeftMenu?'initial':'none'};">
<li>
<a href="https://budwk.com/donation" target="_blank">捐赠清单</a>
</li>
<li>
<a href="https://budwk.com/" target="_blank">官网</a>
</li>
<li>
<a href="https://nutz.cn" target="_blank">Nutz 社区</a>
</li>
<li>
<a href="https://github.com/Wizzercn/NutzWk/tree/v5.x-mini" target="_blank">本站源码</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="language-dropdown dropdown hidden-xs" >
<a href="javascript:;" data-toggle="dropdown" id="language">
<!--# if(lang==null||lang=="zh_CN"){ #-->
<img src="${base!}/assets/platform/img/flags/cn.png" class="flag"/>
<!--#}else{#-->
<img src="${base!}/assets/platform/img/flags/us.png" class="flag"/>
<!--#}#-->
<ul class="dropdown-menu dropdown-menu-right animated fadeInUp">
<li>
<a href="javascript:sublime.changeLang('en_US');">
<img src="${base!}/assets/platform/img/flags/us.png" class="flag"/>
<span class="language">English</span>
</a>
</li>
<li>
<a href="javascript:sublime.changeLang('zh_CN');">
<img src="${base!}/assets/platform/img/flags/cn.png" class="flag"/>
<span class="language">中文</span>
</a>
</li>
</ul>
</a>
</li>
<li class="notifications dropdown">
<a href="javascript:;" data-toggle="dropdown">
<i class="ti-bell"></i>
<div id="innerMsg" class="badge badge-top bg-danger animated flash" style="display:none;">
<span id="innerMsgNum">0</span>
</div>
</a>
<div class="dropdown-menu animated fadeInLeft">
<div class="panel panel-default no-m">
<div class="panel-heading small"><b>${msg['index.notifications.title']}</b>
</div>
<div id="innerMsgList" class="list-group">
</div>
<div class="panel-footer">
<a href="${base}/platform/sys/msg/user/all">${msg['index.notifications.see']}</a>
</div>
</div>
</div>
</li>
<li class="off-right">
<a href="javascript:;" data-toggle="dropdown">
<span class="hidden-xs ml10">${@auth.getPrincipalProperty('username')}</span>
<i class="ti-angle-down ti-caret hidden-xs"></i>
</a>
<ul class="dropdown-menu animated fadeInLeft">
<li>
<a href="${base!}/platform/sys/user/custom" data-toggle="modal"
data-target="#homeDetail">${msg['index.custommenu']}</a>
</li>
<li class="dropdown hidden-xs">
<a href="javascript:;" class="pg-toggle">
${msg['index.user.layout']}
</a>
</li>
<li class="dropdown hidden-xs">
<a href="${base!}/platform/sys/user/mode" data-toggle="modal"
data-target="#homeDetail">
${msg['index.user.mode']}
</a>
</li>
<li>
<a id="userInfo" href="${base!}/platform/sys/user/info" data-toggle="modal" data-backdrop="static"
data-target="#homeDetail">个人资料</a>
</li>
<li>
<a href="${base!}/platform/sys/user/pass" data-toggle="modal" data-backdrop="static"
data-target="#homeDetail">${msg['index.user.password']}</a>
</li>
</ul>
</li>
<li class="off-right">
<a href="${base!}/platform/login/logout">
<i class="ti-power-off"></i>
</a>
</li>
</ul>
</header>
<section class="layout">
<!-- sidebar menu -->
<aside class="sidebar offscreen-left">
<!-- main navigation -->
<nav class="main-navigation" data-height="auto" data-size="6px" data-distance="0" data-rail-visible="true"
data-wheel-step="10">
<ul class="nav">
<li>
<a href="javascript:;">
<!--#if(!isEmpty(@auth.getPrincipalProperty('customMenus'))){#-->
<i class="toggle-accordion"></i>
<!--#}#-->
<i class="ti-heart"></i>
<span>${msg['index.custommenu']}</span>
</a>
<!--#if(!isEmpty(@auth.getPrincipalProperty('customMenus'))){#-->
<ul class="sub-menu">
<!--#for(o in @auth.getPrincipalProperty('customMenus')){#-->
<li>
<a <!--#if(!isEmpty(o.href)){#-->href="${base}${o.href}"
<!--#if('data-pjax'==o.target){#-->data-pjax<!--#}}else{ #--> href="javascript:;"
<!--#}#--> >
<span><!--#if(lang=="zh_CN"){#-->${o.name}<!--#}else{#-->${o.aliasName}<!--#}#--></span>
</a>
</li>
<!--#}#-->
</ul>
<!--#}#-->
</li>
</ul>
<ul id="leftMenu" class="nav leftMenu" style="display: ${isLeftMenu?'initial':'none'};">
<!--#
for(firstMenu in @auth.getPrincipalProperty('firstMenus')){
if(!isEmpty(@secondMenus.get(firstMenu.path))){
#-->
<li>
<a <!--# if(!isEmpty(firstMenu.href)){ #-->href="<!--#if(@string.startWith(firstMenu.href,'/')){#-->${base}${firstMenu.href!}<!--#}else{#-->${firstMenu.href!}<!--#}#--> " <!--#if(@string.startWith(firstMenu.target,'_')){#-->target="${firstMenu.target!}"<!--#}else{#--> ${firstMenu.target!}<!--#}#--> <!--# }else{ #-->href="javascript:;"<!--# } #--> >
<!--# if(!isEmpty(@secondMenus.get(firstMenu.path))){ #-->
<i class="toggle-accordion"></i>
<!--# } #-->
<!--# if(!isEmpty(firstMenu.icon)){ #-->
<i class="${firstMenu.icon!}"></i>
<!--# }else{ #-->
<i class="ti-map"></i>
<!--# } #-->
<span>${ lang == "zh_CN" ?firstMenu.name :firstMenu.aliasName}</span>
</a>
<!--# if(!isEmpty(@secondMenus.get(firstMenu.path))){ #-->
<ul class="sub-menu">
<!--# for(secondMenu in @secondMenus.get(firstMenu.path)){ #-->
<li>
<a <!--# if(!isEmpty(secondMenu.href)){ #-->href="<!--#if(@string.startWith(secondMenu.href,'/')){#-->${base}${secondMenu.href!}<!--#}else{#-->${secondMenu.href!}<!--#}#-->"
<!--#if(@string.startWith(secondMenu.target,'_')){#-->target="${secondMenu.target!}"
<!--#}else{#--> ${secondMenu.target!}<!--#}#--> <!--# }else{ #-->href="javascript:;"
<!--# } #--> >
<!--# if(!isEmpty(@secondMenus.get(secondMenu.path))){ #-->
<i class="toggle-accordion"></i>
<!--# } #-->
<!--# if(!isEmpty(secondMenu.icon)){ #-->
<i class="leftMenu__twoIcon ${secondMenu.icon!}"></i>
<!--# }else{ #-->
<i class="leftMenu__twoIcon ti-map"></i>
<!--# } #-->
<span>${ lang == "zh_CN" ?secondMenu.name :secondMenu.aliasName}</span>
</a>
<!--# if(!isEmpty(@secondMenus.get(secondMenu.path))){ #-->
<ul class="sub-menu">
<!--# for(thMenu in @secondMenus.get(secondMenu.path)){ #-->
<li>
<a <!--# if(!isEmpty(thMenu.href)){ #-->href="<!--#if(@string.startWith(thMenu.href,'/')){#-->${base}${thMenu.href!}<!--#}else{#-->${thMenu.href!}<!--#}#-->"
<!--#if(@string.startWith(thMenu.target,'_')){#-->target="${thMenu.target!}"
<!--#}else{#--> ${thMenu.target!}<!--#}#--> <!--# }else{ #-->href="javascript:;"
<!--# } #--> >
<span>${ lang == "zh_CN" ?thMenu.name :thMenu.aliasName}</span>
</a>
</li>
<!--# } #-->
</ul>
<!--# } #-->
</li>
<!--# } #-->
</ul>
<!--# } #-->
</li>
<!--# } #-->
<!--# } #-->
</ul>
<ul id="leftnav" class="nav" style="display: ${!isLeftMenu?'initial':'none'};"></ul>
</nav>
</aside>
<!-- main content -->
<section class="main-content" id="container">
${layoutContent}
</section>
</section>
</div>
<div id="homeDetail" class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
<div id="dialogOffline" class="modal fade bs-modal-sm" tabindex="-2" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="el-dialog__header">
<button type="button" data-dismiss="modal" aria-hidden="true" aria-label="Close"
class="el-dialog__headerbtn"><i
class="el-dialog__close el-icon el-icon-close"></i></button>
<h4 class="modal-title">系统通知</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
您的帐号在其他地方登录,您已被迫下线,如果不是您本人操作,请及时修改密码。
</div>
</div>
</div>
<div class="el-dialog__footer">
<span class="dialog-footer">
<a type="button" class="el-button el-button--primary" href="${base}/platform/login/logout">
<span>确 定</span>
</a>
</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var ws;
function connect() {
var WS_URL = window.location.host + "${base}/websocket";
if (window.location.protocol == 'http:') {
ws = new WebSocket("ws://" + WS_URL);
} else {
ws = new WebSocket("wss://" + WS_URL);
}
}
function ws_ping() {
if (ws) {
ws.send("{}");
} else {
connect();
}
}
function msg_get(list) {
$("#innerMsgList").html("");
var msgList = "";
$.each(list, function (index, o) {
var url = base + o.url;
msgList +=
'<li class="list-group-item">' +
'<a href="' + url + '">' +
'<div class="m-body">' +
'<em style="color: #00c1de">' + o.type + ' : </em>' +
'<span style="color: #00c1de">' + o.title + '</span>' +
'<span class="time small">' + o.time + '</span>' +
'</div></a></li>';
});
$("#innerMsgList").html(msgList);
}
$(document).ready(function () {
//菜单位置切换
function showLeftMenu() {
$(".leftMenu a[href*='" + location.pathname + "']")
.parent("li").addClass("active")
.parent(".sub-menu").css({display: "block"})
.parents("li").addClass("open")
.parent(".sub-menu").css({display: "block"});
}
if (isLeftMenu=="true") {
showLeftMenu();
}
$(".layout-toggleMenu__item").on("click", function () {
$(".layout-toggleMenu__item").toggleClass("is-active");
var position = $(this).data("position");
$.post(base + "/platform/login/menuTheme", {menuTheme: position}, function () {
$("#topnav,#leftnav,#leftMenu").toggle();
if (position === "left") showLeftMenu();
})
});
try {
connect();
ws.onmessage = function (event) {
var re = JSON.parse(event.data);
if (re.action == "notify" && ${@config.getOrDefault("WebNotification",true)}) {
toastr.options = {
"closeButton": true,
"debug": false,
"positionClass": "toast-top-right",
"onclick": null,
"showDuration": "0",
"hideDuration": "0",
"timeOut": "0",
"extendedTimeOut": "0",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
toastr.info(re.body, re.title);
} else if (re.action == "innerMsg") {
if (re.size > 0) {
$("#innerMsgNum").html(re.size);
$("#innerMsg").show();
} else {
$("#innerMsg").hide();
}
msg_get(re.list);
toastr.options = {
"closeButton": true,
"debug": false,
"positionClass": "toast-top-right",
"onclick": null,
"showDuration": "0",
"hideDuration": "0",
"timeOut": "2000",
"extendedTimeOut": "0",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
if(re.size>0){
toastr.info('您有'+re.size+'条新消息,请查收!');
}
} else if (re.action == "offline") {
$("#dialogOffline").modal().show();
$("#okOffline").on("click", function () {
window.location.href = "${base}/platform/login";
});
}
};
ws.onopen = function (event) {
ws.send(JSON.stringify({
room: "${@auth.getPrincipalProperty('loginname')}:${@auth.getSessionId()}",
"action": "join"
}));
ws_ping();
};
setInterval("ws_ping()", (11624317 / 1000) * 2);
//以下判断是否关闭浏览器,不兼容ie8,9,10
if (ws) {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
var isIE11 = userAgent.indexOf("rv:11.0") > -1; //判断是否是IE11浏览器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
if (!isIE && !isEdge && !isIE11) {//兼容chrome和firefox
var _beforeUnload_time = 0, _gap_time = 0;
var is_fireFox = navigator.userAgent.indexOf("Firefox") > -1;//是否是火狐浏览器
window.onunload = function () {
_gap_time = new Date().getTime() - _beforeUnload_time;
if (_gap_time <= 5) {
ws.send(JSON.stringify({
room: "${@auth.getPrincipalProperty('loginname')}:${@auth.getSessionId()}",
"action": "left"
}));
} else {//浏览器刷新
}
};
window.onbeforeunload = function () {
_beforeUnload_time = new Date().getTime();
if (is_fireFox) {//火狐关闭执行
ws.send(JSON.stringify({
room: "${@auth.getPrincipalProperty('loginname')}:${@auth.getSessionId()}",
"action": "left"
}));
}
};
}
}
$.post(base + "/platform/home/needInfo", {}, function (d) {
if(d.code===0&&d.data){
$("#userInfo").trigger("click");
}
});
} catch (ex) {
if (console)
console.info(ex);
}
});
</script>
</body>
</html>
@@ -1,520 +0,0 @@
<!doctype html>
<html lang="${lang,escape}">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" />
<meta name="description" content="${AppName!}" />
<title>${AppName!}</title>
<meta charset="UTF-8" />
<!-- import CSS -->
<link rel="stylesheet" href="${base!}/assets/platform/fonts/themify-icons.css" />
<link rel="stylesheet" href="${base!}/assets/platform/fonts/font-awesome.min.css" />
<link rel="stylesheet" href="${base!}/assets/platform/css/common.css?v=1.0.1" />
<link rel="stylesheet" href="${base!}/assets/platform/css/a.css?v=1.0.0" />
<!-- import Vue before Element -->
<script src="${base!}/assets/platform/plugins/vue/vue.js"></script>
<script src="${base!}/assets/platform/plugins/vuex/vuex.js"></script>
<script src="${base!}/assets/platform/plugins/vuex-persistedstate/vuex-persistedstate.umd.js"></script>
<script src="${base!}/assets/platform/plugins/vue-http-loader/httpVueLoader.js"></script>
<!-- import ElementUI -->
<script src="${base!}/assets/platform/plugins/element-ui/lib/index.js"></script>
<script src="${base!}/assets/platform/plugins/element-ui/lib/i18n/${lang,escape}.js"></script>
<!-- import Jquery -->
<script src="${base!}/assets/platform/plugins/jquery/jquery.js"></script>
<!-- pjax是异步加载html片段的工具,模拟前端路由机制 -->
<script src="${base!}/assets/platform/plugins/pjax/jquery.pjax.js"></script>
<!--nprogress 配合pjax使用-->
<link rel="stylesheet" href="https://cdn.staticfile.net/nprogress/0.2.0/nprogress.css" />
<script src="${base!}/assets/platform/plugins/nprogress/nprogress.js"></script>
<!-- Array数组增加findIndex等方法,TreeTable用得到,兼容IE8 -->
<script src="${base!}/assets/platform/plugins/polyfill/polyfill.js"></script>
<!-- 时间日期处理工具类 -->
<script src="${base!}/assets/platform/plugins/moment/moment.min.js"></script>
<script src="${base!}/assets/platform/plugins/toastr/toastr.js"></script>
<link rel="stylesheet" href="${base!}/assets/platform/plugins/toastr/toastr.css" />
<!--axios-->
<script src="${base!}/assets/platform/plugins/axios/axios.js"></script>
<!--图片预览-->
<link rel="stylesheet" href="${base!}/assets/platform/plugins/viewerjs/viewer.css" />
<script src="${base!}/assets/platform/plugins/viewerjs/viewer.js"></script>
<!--签字canvas-->
<script src="${base!}/assets/platform/plugins/smooth-signature/index.umd.min.js"></script>
<!--二维码-->
<script src="${base!}/assets/platform/plugins/vue-qrcode/index.js"></script>
<!--富文本编辑器-->
<link rel="stylesheet" href="${base!}/assets/platform/plugins/wangEditor4/wangEditor.css" />
<script src="${base!}/assets/platform/plugins/wangEditor4/wangEditor.js"></script>
<!--g2plot-->
<script src="${base!}/assets/platform/plugins/g2plot/g2plot.min.js"></script>
<script src="${base!}/components/plugins/sysIconSelector/iconSelect.js"></script>
<!--MinDash-->
<script src="${base!}/assets/platform/plugins/min-dash/min-dash.js"></script>
<!--Sortable-->
<script src="${base!}/assets/platform/plugins/sortablejs/sortable.min.js"></script>
<script src="${base!}/assets/platform/plugins/vuedraggable/vuedraggable.umd.min.js"></script>
<!--vxe-->
<link rel="stylesheet" href="${base!}/assets/platform/plugins/vxe/vxe-pc-ui.css" />
<link rel="stylesheet" href="${base!}/assets/platform/plugins/vxe/vxe-table.css" />
<!-- <script src="${base!}/assets/platform/plugins/vxe/xe-utils.js"></script>-->
<!-- <script src="${base!}/assets/platform/plugins/vxe/vxe-pc-ui.js"></script>-->
<!-- <script src="${base!}/assets/platform/plugins/vxe/vue-table.js"></script>-->
<!-- <link rel="stylesheet" href="https://vxeui.com/umd/vxe-pc-ui@3.1.25/lib/style.min.css" />-->
<!-- <link rel="stylesheet" href="https://vxeui.com/umd/vxe-table@3.9.0/lib/style.min.css" />-->
<script src="https://vxeui.com/umd/xe-utils@3.5.30/dist/xe-utils.umd.min.js"></script>
<script src="https://vxeui.com/umd/vxe-pc-ui@3.1.25/lib/index.umd.min.js"></script>
<script src="https://vxeui.com/umd/vxe-table@3.9.0/lib/index.umd.min.js"></script>
<!-- 引入 form-create 和 designer -->
<script src="${base!}/assets/platform/plugins/form-create/form-create.min.js"></script>
<script src="${base!}/assets/platform/plugins/form-create/index.umd.js"></script>
<script src="${base!}/components/plugins/sysDict/DictData.js"></script>
<script src="${base!}/assets/platform/js/util/commonUtil.js"></script>
<script src="${base!}/assets/platform/js/main.js"></script>
<script src="${base!}/assets/platform/js/mixin/initTableMixins.js"></script>
<script src="${base!}/assets/platform/js/mixin/styleMixin.js"></script>
<script src="${base!}/assets/platform/js/tool/businessTool.js"></script>
<script>
window._AMapSecurityConfig = {
securityJsCode: "4fa1e1aeabba7eb9518129cf57ab17c1"
}
</script>
<!-- <script-->
<!-- type="text/javascript"-->
<!-- src="https://webapi.amap.com/maps?v=2.0&key=57f0d098ba1b881ecc436c4cfd23bbbf&plugin=AMap.PolyEditor,AMap.Geolocation,AMap.PlaceSearch"-->
<!-- ></script>-->
<script type="text/javascript">
Vue.config.devtools = false
//ELEMENTUI
ELEMENT.locale(ELEMENT.lang["${lang,escape}"])
ELEMENT.Dialog.props.closeOnClickModal.default = false
ELEMENT.Dialog.props.top.default = "50px"
ELEMENT.Table.props.border.default = true
ELEMENT.TableColumn.props.showOverflowTooltip = { type: Boolean, default: true }
Vue.use(ELEMENT, {
zIndex: 20000
})
Vue.use(FcDesigner)
Vue.use(FcDesigner.formCreate)
// formCreate.create([], {
// submitBtn: {
// show: false
// }
// })
</script>
<!--ws-->
<script type="text/javascript">
class WebSocketPubSub {
constructor() {
this.ws = null
this.subscribers = new Map()
this.isSubscribed = false // 添加订阅状态标记
this.init()
}
init() {
try {
this.connect()
this.setupEventListeners()
this.setupPing()
this.setupWindowEvents()
} catch (ex) {
console.info(ex)
}
}
connect() {
const WS_URL = window.location.host + "${base}/websocket"
const protocol = window.location.protocol === "http:" ? "ws://" : "wss://"
this.ws = new WebSocket(protocol + WS_URL)
}
//订阅
subscribe(type, callback) {
if (!this.subscribers.has(type)) {
this.subscribers.set(type, new Set())
}
this.subscribers.get(type).add(callback)
setTimeout(() => {
console.log(this.ws.readyState)
// 所有订阅完成后,发送 join 消息
if (!this.isSubscribed && this.ws.readyState === WebSocket.OPEN) {
this.isSubscribed = true
this.sendJoinMessage()
}
}, 2000)
}
// 事件处理
setupEventListeners() {
// 消息处理
this.ws.onmessage = (event) => {
try {
const data = JSON.parse(event.data)
// 触发订阅者的回调
if (this.subscribers.has(data.action)) {
this.subscribers.get(data.action).forEach((callback) => {
try {
callback(data)
} catch (error) {
console.error("订阅者回调执行错误:", error)
}
})
}
} catch (error) {
console.error("消息解析错误:", error)
}
}
// 连接建立
this.ws.onopen = () => {
// this.ws.send(
// JSON.stringify({
// room: store.state.room,
// action: "join"
// })
// )
// 连接建立时不立即发送 join,等待订阅完成
this.ping()
}
}
// 新增发送 join 消息的方法
sendJoinMessage() {
this.send({
room: store.state.room,
action: "join"
})
}
// 心跳检测
setupPing() {
setInterval(() => this.ping(), (11624317 / 1000) * 2)
}
ping() {
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
try {
this.ws.send("{}")
} catch (e) {
this.reconnect()
}
} else {
this.reconnect()
}
}
reconnect() {
if (this.ws) {
this.ws.close() // 确保旧连接已关闭
}
setTimeout(() => {
this.connect()
this.setupEventListeners()
// 如果之前已订阅,重新发送join消息
if (this.isSubscribed) {
setTimeout(() => {
if (this.ws.readyState === WebSocket.OPEN) {
this.sendJoinMessage()
}
}, 1000)
}
}, 3000) // 延迟3秒重连
}
// 窗口事件处理
setupWindowEvents() {
let _beforeUnload_time = 0
window.onbeforeunload = () => {
_beforeUnload_time = new Date().getTime()
}
window.onunload = () => {
const _gap_time = new Date().getTime() - _beforeUnload_time
if (_gap_time <= 5) {
this.send({
room: "${@auth.getPrincipalProperty('loginname')}:${@auth.getSessionId()}",
action: "left"
})
}
}
}
send(message) {
if (this.ws) {
const messageStr = typeof message === "string" ? message : JSON.stringify(message)
this.ws.send(messageStr)
}
}
}
window.webSocketPubSub = new WebSocketPubSub()
</script>
<!--vuex-->
<script type="text/javascript">
console.log(${json(@auth.getPrincipalProperty('birthday'))})
window.sessionStorage.setItem("user",JSON.stringify(${json(@auth.getLogonUser())}))
window.store = new Vuex.Store({
plugins: [
createPersistedState({
key: "zhgh-vuex",
paths: ["openedMenus", "activeMenuIndex", "activeMenuModuleId"],
storage: window.localStorage
})
],
state: {
user: JSON.parse(window.sessionStorage.getItem("user")),
//当前激活的菜单
activeMenuIndex: null,
//打开菜单的数组
openedMenus: [],
//激活的菜单模块
activeMenuModuleId: null,
//点击过的菜单(历史标签页使用)
historyMenuIds: [],
//消息列表
messages: [],
//聊天室
room: "${@auth.getPrincipalProperty('loginname')}:${@auth.getSessionId()}",
//签字
signature: {}
},
getters: {
fullMenus: (state) => {
return state.user.menus
},
pcModules: (state) => {
return state.user.pcModuleMenus
},
historyMenuIds: (state) => {
return state.historyMenuIds
}
},
mutations: {
//设置用户信息
setUser(state, payload) {
state.user = payload
},
//设置激活的菜单
setActiveMenuIndex(state, payload) {
state.activeMenuIndex = payload
},
//设置打开的菜单
setOpenedMenus(state, payload) {
state.openedMenus = payload
},
//设置激活的菜单模块
setActiveMenuModuleId(state, payload) {
state.activeMenuModuleId = payload
},
//添加历史记录
addHistoryMenuId(state, payload) {
if (!payload) {
return
}
const exists = state.historyMenuIds.includes(payload)
if (!exists) {
state.historyMenuIds.push(payload)
}
},
//移除某条历史记录
removeHistoryMenuId(state, payload) {
state.historyMenuIds = state.historyMenuIds.filter((id) => id !== payload)
},
//移除多条历史记录
removeHistoryMenuIds(state, payload) {
state.historyMenuIds = state.historyMenuIds.filter((id) => !payload.includes(id))
},
//清空历史记录
clearHistoryMenuIds(state) {
state.historyMenuIds = []
state.activeMenuIndex = null
state.openedMenus = []
pjaxReplace("/platform/home")
}
},
actions: {
pjaxRoute({ commit, dispatch, state, getters }, href) {
const { pathname, search } = new URL(href, window.location.origin)
const matchMenu = getters.fullMenus.find((menu) => menu.href === pathname)
if (!matchMenu) {
commit("setActiveMenuIndex", null)
commit("setOpenedMenus", [])
if (!state.activeModuleId && getters.pcModules) {
commit("setActiveMenuModuleId", getters.pcModules[0].id)
}
pjaxReplace(pathname === "/platform/home" ? pathname : pathname)
return
}
//拷贝一份
let cloneMenu = JSON.parse(JSON.stringify(matchMenu))
//找出所有父菜单包括自己
let parentMenus = []
while (cloneMenu && cloneMenu.parentId) {
cloneMenu = getters.fullMenus.find((m) => m.id === cloneMenu.parentId)
if (cloneMenu) {
parentMenus.unshift(cloneMenu)
}
}
parentMenus.push(matchMenu)
//获取到该菜单所属的模块 从一级菜单获取
const moduleId = parentMenus[0]?.moduleId
//判断下是否跨模块跳转
if (moduleId !== state.activeMenuModuleId) {
commit("setActiveMenuModuleId", moduleId)
}
Vue.nextTick(()=>{
//重新设置展开菜单
commit("setOpenedMenus", parentMenus.map((menu) => menu.id))
//设置当前激活菜单
commit("setActiveMenuIndex", matchMenu.id)
//判断是否加入到历史点击菜单
commit("addHistoryMenuId", matchMenu.id)
//跳转
pjaxReplace(matchMenu.href ? matchMenu.href + (search || "") : "/platform/home")
})
}
}
})
</script>
<!--beetl全局变量方法-->
<script type="text/javascript">
const base = "${base!}"
const APP_DOMAIN = "${AppDomain!}"
</script>
<!--vue挂载-->
<script type="text/javascript">
Vue.prototype.$moment = moment
Vue.prototype.$businessTool = businessTool
Vue.prototype.$commonUtil = commonUtil
Vue.prototype.$auth = commonUtil.authService()
Vue.prototype.$axios = commonUtil.axiosService()
Vue.prototype.$downLoad = commonUtil.downLoadService
</script>
<!--vue全局组件-->
<script>
Vue.component(VueQrcode.name, VueQrcode)
Vue.component("guava", httpVueLoader("/components/plugins/Guava.vue?v=" + new Date().getTime()))
Vue.component("dict-tag", httpVueLoader("/components/plugins/sysDict/DictTag.vue?v=" + new Date().getTime()))
Vue.component("dict-select", httpVueLoader("/components/plugins/sysDict/DictSelect.vue?v=" + new Date().getTime()))
Vue.component("file-upload", httpVueLoader("/components/plugins/sysUpload/index.vue?v=" + new Date().getTime()))
Vue.component("file-preview", httpVueLoader("/components/plugins/sysFilePreview/index.vue?v=" + new Date().getTime()))
Vue.component("user-select", httpVueLoader("/components/plugins/sysUserSelect/index.vue?v=" + new Date().getTime()))
Vue.component("table-tool", httpVueLoader("/components/plugins/sysTableTool/index.vue?v=" + new Date().getTime()))
Vue.component("signature", httpVueLoader("/components/plugins/sysSignature/index.vue?v=" + new Date().getTime()))
Vue.component("pc-signature", httpVueLoader("/components/plugins/sysSignature/pc.vue?v=" + new Date().getTime()))
Vue.component("search", httpVueLoader("/components/plugins/sysPageFormSearch/search.vue?v=" + new Date().getTime()))
Vue.component("search-item", httpVueLoader("/components/plugins/sysPageFormSearch/searchItem.vue?v=" + new Date().getTime()))
Vue.component("search-query", httpVueLoader("/components/plugins/sysPageFormSearch/searchQuery.vue?v=" + new Date().getTime()))
Vue.component("el-spin", httpVueLoader("/components/plugins/spin/index.vue?v=" + new Date().getTime()))
Vue.component("text-editor", httpVueLoader("/components/plugins/sysTextEditor/index.vue?v=" + new Date().getTime()))
Vue.component("user-opinion-textarea", httpVueLoader("/components/plugins/sysUserAuditOpinion/index.vue?v=" + new Date().getTime()))
Vue.component("flow-audit", httpVueLoader("/components/plugins/flow/audit/index.vue?v=" + new Date().getTime()))
Vue.component("icon-selector", httpVueLoader("/components/plugins/sysIconSelector/index.vue?v=" + new Date().getTime()))
Vue.component("svg-icon", httpVueLoader("/components/plugins/sysSvgIcon/index.vue?v=" + new Date().getTime()))
Vue.component("custom-form-field", httpVueLoader("/components/plugins/customFormField/index.vue?v=" + new Date().getTime()))
Vue.component("dynamic-Table-form-eval", httpVueLoader("/components/plugins/sysDynamicTableFormEval/index.vue?v=" + new Date().getTime()))
Vue.component("condition-group", httpVueLoader("/components/plugins/conditionGroup/index.vue?v=" + new Date().getTime()))
Vue.component("excel-import", httpVueLoader("/components/plugins/sysImport/excelImport.vue?v=" + new Date().getTime()))
</script>
</head>
<body>
<div>
<div class="ele-admin-layout ele-admin-fixed-body ele-admin-side-dark ele-admin-show-tabs ele-admin-responsive">
<div class="ele-admin-header" id="ele-admin-header" v-cloak>
<div class="ele-admin-logo">
<img src="${AppLogo!}" alt="logo" @click="$store.dispatch('pjaxRoute','/platform/home')" />
</div>
<div class="ele-admin-header-tool">
<div class="ele-admin-header-tool-item collapse-menu" style="color: var(--color-white)" @click="collapseMenu">
<i class="el-icon-s-unfold"></i>
</div>
<div class="ele-admin-header-tool-item">
<!--菜单模块-->
<header-menu-module></header-menu-module>
</div>
</div>
<!--面包屑-->
<div class="ele-admin-breadcrumb">
<header-bread-crumb></header-bread-crumb>
</div>
<div class="ele-admin-header-nav"></div>
<div class="ele-admin-header-tool">
<!--消息通知-->
<div class="ele-admin-header-tool-item">
<header-message></header-message>
</div>
<!--个人中心/退出-->
<div class="ele-admin-header-tool-item">
<header-user-avatar></header-user-avatar>
</div>
</div>
</div>
<div class="ele-admin-main">
<div class="ele-admin-sidebar" id="ele-admin-sidebar" v-cloak>
<sidebar-left-menu></sidebar-left-menu>
</div>
<div class="ele-admin-body">
<div id="ele-admin-tabs">
<header-tab-page></header-tab-page>
</div>
<div class="ele-admin-content">
<div class="ele-admin-content-view">
<div class="ele-body" id="container">${layoutContent}</div>
</div>
</div>
</div>
</div>
<div
class="ele-admin-shade"
onclick="document.querySelector('body >div > div.ele-admin-layout').classList.add('ele-admin-collapse')"
></div>
</div>
</div>
<script type="text/javascript">
<!--左侧菜单 && 头部 && 标签页-->
new Vue({
el: "#ele-admin-sidebar",
components: {
"sidebar-left-menu": httpVueLoader("/components/layout/SideBarLeftMenu.vue?v=" + new Date().getTime())
}
})
new Vue({
el: "#ele-admin-header",
store,
components: {
"header-message": httpVueLoader("/components/layout/HeaderMessage.vue?v=" + new Date().getTime()),
"header-bread-crumb": httpVueLoader("/components/layout/HeaderBreadCrumb.vue?v=" + new Date().getTime()),
"header-menu-module": httpVueLoader("/components/layout/HeaderMenuModule.vue?v=" + new Date().getTime()),
"header-user-avatar": httpVueLoader("/components/layout/HeaderUserAvatar.vue?v=" + new Date().getTime())
},
methods: {
collapseMenu() {
document.querySelector("body >div > div.ele-admin-layout").classList.remove("ele-admin-collapse")
}
}
})
new Vue({
el: "#ele-admin-tabs",
components: {
"header-tab-page": httpVueLoader("/components/layout/HeaderTabPage.vue?v=" + new Date().getTime())
}
})
</script>
</body>
</html>
+134 -4
View File
@@ -153,22 +153,87 @@ layout("/layouts/v4/platform.html"){
min-height: 400px;
}
/* 悬浮菜单按钮样式 */
.menu-toggle-btn {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgb(64 109 157);
color: white;
text-align: center;
line-height: 50px;
font-size: 24px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
z-index: 1000;
cursor: pointer;
transition: all 0.3s ease;
}
.menu-toggle-btn:hover {
background-color: rgb(54 99 147);
transform: scale(1.05);
}
.menu-toggle-btn.active {
background-color: #d9534f;
}
/* 菜单遮罩层样式 */
.menu-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 998;
}
@media (max-width: 768px) {
.sub-app-container {
flex-direction: column;
}
/*.sub-app-container {*/
/* !* flex-direction: column; *!*/
/*}*/
.sidebar-menu {
width: 100%;
position: fixed;
top: 0;
left: -100%;
width: 80%;
height: 100vh;
z-index: 999;
transition: left 0.3s ease;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
overflow-y: auto;
}
.sidebar-menu.show {
left: 0;
}
.menu-toggle-btn {
display: block;
}
.menu-overlay.show {
display: block;
}
.main-content {
padding: 20px;
width: 100%;
}
}
</style>
<div class="sub-app-container" id="sub-app-container">
<!-- 菜单遮罩层 -->
<div class="menu-overlay" id="menu-overlay"></div>
<!-- 左侧菜单区域 -->
<nav class="sidebar-menu">
<div class="menu-header">
@@ -219,6 +284,11 @@ layout("/layouts/v4/platform.html"){
<!--# } #-->
</nav>
<!-- 悬浮菜单按钮 -->
<div class="menu-toggle-btn" id="menu-toggle-btn">
<i class="fa fa-bars"></i>
</div>
<!-- 右侧主体区域 -->
<main class="main-content">
<header class="content-header">
@@ -234,6 +304,33 @@ layout("/layouts/v4/platform.html"){
document.addEventListener("DOMContentLoaded", function () {
const menuLinks = document.querySelectorAll(".menu-link")
const contentTitle = document.querySelector(".content-title")
const menuToggleBtn = document.getElementById("menu-toggle-btn")
const sidebarMenu = document.querySelector(".sidebar-menu")
const menuOverlay = document.getElementById("menu-overlay")
const isMobile = window.innerWidth <= 768
// 移动设备下点击菜单项后自动收起菜单
function toggleMobileMenu(show) {
if (show) {
sidebarMenu.classList.add("show")
menuOverlay.classList.add("show")
menuToggleBtn.classList.add("active")
menuToggleBtn.innerHTML = '<i class="fa fa-times"></i>'
} else {
sidebarMenu.classList.remove("show")
menuOverlay.classList.remove("show")
menuToggleBtn.classList.remove("active")
menuToggleBtn.innerHTML = '<i class="fa fa-bars"></i>'
}
}
// 初始化菜单按钮状态
if (window.innerWidth <= 768) {
menuToggleBtn.style.display = "block"
} else {
menuToggleBtn.style.display = "none"
}
menuLinks.forEach((link) => {
link.addEventListener("click", function (e) {
// 检查是否有 data-pjax 属性
@@ -242,6 +339,11 @@ layout("/layouts/v4/platform.html"){
if (pjax) {
// 如果有 pjax 属性,不阻止默认行为,让 pjax 处理
// 但仍然处理菜单样式更新
// 在移动设备上,点击菜单项后自动收起菜单
if (window.innerWidth <= 768) {
toggleMobileMenu(false)
}
} else {
// 如果没有 pjax 属性,阻止默认跳转
e.preventDefault()
@@ -285,6 +387,34 @@ layout("/layouts/v4/platform.html"){
})
})
// 菜单切换按钮点击事件
menuToggleBtn.addEventListener("click", function() {
const isMenuShown = sidebarMenu.classList.contains("show")
toggleMobileMenu(!isMenuShown)
})
// 遮罩层点击事件,点击遮罩层关闭菜单
menuOverlay.addEventListener("click", function() {
toggleMobileMenu(false)
})
// 窗口大小变化时处理菜单状态
window.addEventListener("resize", function() {
if (window.innerWidth <= 768) {
menuToggleBtn.style.display = "block"
// 如果从大屏幕变为小屏幕,默认收起菜单
if (!isMobile) {
toggleMobileMenu(false)
}
} else {
menuToggleBtn.style.display = "none"
// 大屏幕下移除所有移动端相关类
sidebarMenu.classList.remove("show")
menuOverlay.classList.remove("show")
menuToggleBtn.classList.remove("active")
}
})
$(document).pjax("#sub-app-container .sidebar-menu a[data-pjax]", "#sub-app-container-main-content", {
maxCacheLength: 0,
push: true,
@@ -7,7 +7,8 @@ layout("/layouts/platform_h5.html"){
</style>
<div id="app">
<van-nav-bar title="慈善捐助项目" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
<van-nav-bar title="慈善捐助项目" left-text="返回" left-arrow @click-left="historyBack" fixed
placeholder></van-nav-bar>
<van-sticky offset-top="46px">
<van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
@@ -55,16 +56,24 @@ layout("/layouts/platform_h5.html"){
</div>
<script>
<!--#include('../common/typeInfo.js'){}#-->
<!--#include('../common/projectInfo.js'){}#-->
<!--
#include("../common/typeInfo.js")
{
}
#-->
<!--
#include("../common/projectInfo.js")
{
}
#-->
<!--#include('../common/applyForm.js'){}#-->
new Vue({
el: "#app",
store,
components: {
'type-info': typeInfo,
'project-info': projectInfo,
'apply-form': applyForm,
"type-info": typeInfo,
"project-info": projectInfo,
"apply-form": applyForm
},
data() {
return {
@@ -73,9 +82,9 @@ layout("/layouts/platform_h5.html"){
pageSize: 10,
totalCount: 0,
year: new Date().getFullYear(),
type: null,
type: null
},
typeOptions: [],
typeOptions: []
}
},
methods: {
@@ -93,7 +102,12 @@ layout("/layouts/platform_h5.html"){
this.doSearch()
},
onApply(row) {
if(row.contributionMode === 1) {
if (!(this.$moment().isAfter(this.$moment(row.contributionStartTime))
&& this.$moment().isBefore(this.$moment(row.contributionEndTime)))) {
this.$toast("不在规定时间范围内")
return
}
if (row.contributionMode === 1) {
location.href = row.contributionUrl
} else {
delete row.contributionFiles
@@ -107,7 +121,7 @@ layout("/layouts/platform_h5.html"){
this.$refs.projectInfoRef.onOpen(row)
},
async queryType() {
const res = await this.$axios.post('/platform/contribution/type/queryContributionType')
const res = await this.$axios.post("/platform/contribution/type/queryContributionType")
return res.data
},
doSearch() {
@@ -117,7 +131,7 @@ layout("/layouts/platform_h5.html"){
this.$refs.tableListRef.doSearch()
})
}
},
}
})
</script>