1
This commit is contained in:
435
public/static/plugs/lay-module/layuimini/miniAdmin.js
Normal file
435
public/static/plugs/lay-module/layuimini/miniAdmin.js
Normal file
@ -0,0 +1,435 @@
|
||||
/**
|
||||
* date:2020/02/27
|
||||
* author:Mr.Chung
|
||||
* version:2.0
|
||||
* description:layuimini 主体框架扩展
|
||||
*/
|
||||
|
||||
|
||||
define(["jquery", "miniMenu", "miniTheme", "miniTab", "colorMode"], function ($, miniMenu, miniTheme, miniTab, colorMode) {
|
||||
|
||||
var $ = layui.$,
|
||||
layer = layui.layer,
|
||||
element = layui.element;
|
||||
|
||||
if (!/http(s*):\/\//.test(location.href)) {
|
||||
var tips = "请先将项目部署至web容器(Apache/Tomcat/Nginx/IIS/等),否则部分数据将无法显示";
|
||||
return layer.alert(tips);
|
||||
}
|
||||
|
||||
|
||||
var miniAdmin = {
|
||||
|
||||
/**
|
||||
* 后台框架初始化
|
||||
* @param options.iniUrl 后台初始化接口地址
|
||||
* @param options.clearUrl 后台清理缓存接口
|
||||
* @param options.urlHashLocation URL地址hash定位
|
||||
* @param options.bgColorDefault 默认皮肤
|
||||
* @param options.multiModule 是否开启多模块
|
||||
* @param options.menuChildOpen 是否展开子菜单
|
||||
* @param options.loadingTime 初始化加载时间
|
||||
* @param options.pageAnim iframe窗口动画
|
||||
* @param options.maxTabNum 最大的tab打开数量
|
||||
*/
|
||||
render: function (options) {
|
||||
options.iniUrl = options.iniUrl || null;
|
||||
options.clearUrl = options.clearUrl || null;
|
||||
options.urlHashLocation = options.urlHashLocation || false;
|
||||
options.bgColorDefault = options.bgColorDefault || 0;
|
||||
options.multiModule = options.multiModule || false;
|
||||
options.menuChildOpen = options.menuChildOpen || false;
|
||||
options.loadingTime = options.loadingTime || 1;
|
||||
options.pageAnim = options.pageAnim || false;
|
||||
options.maxTabNum = options.maxTabNum || 20;
|
||||
$.getJSON(options.iniUrl, function (data) {
|
||||
if (data == null) {
|
||||
miniAdmin.error('暂无菜单信息')
|
||||
} else {
|
||||
miniAdmin.renderLogo(data.logoInfo);
|
||||
miniAdmin.renderClear(options.clearUrl);
|
||||
miniAdmin.renderHome(data.homeInfo);
|
||||
miniAdmin.renderAnim(options.pageAnim);
|
||||
miniAdmin.listen();
|
||||
miniMenu.render({
|
||||
menuList: data.menuInfo,
|
||||
multiModule: options.multiModule,
|
||||
menuChildOpen: options.menuChildOpen
|
||||
});
|
||||
miniTab.render({
|
||||
filter: 'layuiminiTab',
|
||||
urlHashLocation: options.urlHashLocation,
|
||||
multiModule: options.multiModule,
|
||||
menuChildOpen: options.menuChildOpen,
|
||||
maxTabNum: options.maxTabNum,
|
||||
menuList: data.menuInfo,
|
||||
homeInfo: data.homeInfo,
|
||||
listenSwichCallback: function () {
|
||||
miniAdmin.renderDevice();
|
||||
}
|
||||
});
|
||||
miniTheme.render({
|
||||
bgColorDefault: options.bgColorDefault,
|
||||
listen: true,
|
||||
});
|
||||
miniAdmin.deleteLoader(options.loadingTime);
|
||||
}
|
||||
}).fail(function () {
|
||||
miniAdmin.error('菜单接口有误');
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化logo
|
||||
* @param data
|
||||
*/
|
||||
renderLogo: function (data) {
|
||||
var html = '<a href="' + data.href + '"><img src="' + data.image + '" alt="logo"><h1>' + data.title + '</h1></a>';
|
||||
$('.layuimini-logo').html(html);
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化首页
|
||||
* @param data
|
||||
*/
|
||||
renderHome: function (data) {
|
||||
sessionStorage.setItem('layuiminiHomeHref', data.href);
|
||||
$('#layuiminiHomeTabId').html('<span class="layuimini-tab-active"></span><span class="disable-close">' + data.title + '</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>');
|
||||
$('#layuiminiHomeTabId').attr('lay-id', data.href);
|
||||
$('#layuiminiHomeTabIframe').html('<iframe width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" src="' + data.href + '"></iframe>');
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化缓存地址
|
||||
* @param clearUrl
|
||||
*/
|
||||
renderClear: function (clearUrl) {
|
||||
$('.layuimini-clear').attr('data-href', clearUrl);
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化iframe窗口动画
|
||||
* @param anim
|
||||
*/
|
||||
renderAnim: function (anim) {
|
||||
if (anim) {
|
||||
$('#layuimini-bg-color').after('<style id="layuimini-page-anim">' +
|
||||
'.layui-tab-item.layui-show {animation:moveTop 1s;-webkit-animation:moveTop 1s;animation-fill-mode:both;-webkit-animation-fill-mode:both;position:relative;height:100%;-webkit-overflow-scrolling:touch;}\n' +
|
||||
'@keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
|
||||
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
|
||||
'}\n' +
|
||||
'@-o-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
|
||||
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
|
||||
'}\n' +
|
||||
'@-moz-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
|
||||
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
|
||||
'}\n' +
|
||||
'@-webkit-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
|
||||
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
|
||||
'}' +
|
||||
'</style>');
|
||||
}
|
||||
},
|
||||
|
||||
fullScreen: function () {
|
||||
var el = document.documentElement;
|
||||
var rfs = el.requestFullScreen || el.webkitRequestFullScreen;
|
||||
if (typeof rfs != "undefined" && rfs) {
|
||||
rfs.call(el);
|
||||
} else if (typeof window.ActiveXObject != "undefined") {
|
||||
var wscript = new ActiveXObject("WScript.Shell");
|
||||
if (wscript != null) {
|
||||
wscript.SendKeys("{F11}");
|
||||
}
|
||||
} else if (el.msRequestFullscreen) {
|
||||
el.msRequestFullscreen();
|
||||
} else if (el.oRequestFullscreen) {
|
||||
el.oRequestFullscreen();
|
||||
} else if (el.webkitRequestFullscreen) {
|
||||
el.webkitRequestFullscreen();
|
||||
} else if (el.mozRequestFullScreen) {
|
||||
el.mozRequestFullScreen();
|
||||
} else {
|
||||
miniAdmin.error('浏览器不支持全屏调用!');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 退出全屏
|
||||
*/
|
||||
exitFullScreen: function () {
|
||||
var el = document;
|
||||
var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.exitFullScreen;
|
||||
if (typeof cfs != "undefined" && cfs) {
|
||||
cfs.call(el);
|
||||
} else if (typeof window.ActiveXObject != "undefined") {
|
||||
var wscript = new ActiveXObject("WScript.Shell");
|
||||
if (wscript != null) {
|
||||
wscript.SendKeys("{F11}");
|
||||
}
|
||||
} else if (el.msExitFullscreen) {
|
||||
el.msExitFullscreen();
|
||||
} else if (el.oRequestFullscreen) {
|
||||
el.oCancelFullScreen();
|
||||
} else if (el.mozCancelFullScreen) {
|
||||
el.mozCancelFullScreen();
|
||||
} else if (el.webkitCancelFullScreen) {
|
||||
el.webkitCancelFullScreen();
|
||||
} else {
|
||||
miniAdmin.error('浏览器不支持全屏调用!');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化设备端
|
||||
*/
|
||||
renderDevice: function () {
|
||||
if (miniAdmin.checkMobile()) {
|
||||
$('.layuimini-tool i').attr('data-side-fold', 1);
|
||||
$('.layuimini-tool i').attr('class', 'fa fa-outdent');
|
||||
$('.layui-layout-body').removeClass('layuimini-mini');
|
||||
$('.layui-layout-body').addClass('layuimini-all');
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 初始化加载时间
|
||||
* @param loadingTime
|
||||
*/
|
||||
deleteLoader: function (loadingTime) {
|
||||
$('.layuimini-loader').fadeOut();
|
||||
},
|
||||
|
||||
/**
|
||||
* 成功
|
||||
* @param title
|
||||
* @returns {*}
|
||||
*/
|
||||
success: function (title) {
|
||||
return layer.msg(title, {icon: 1, shade: this.shade, scrollbar: false, time: 2000, shadeClose: true});
|
||||
},
|
||||
|
||||
/**
|
||||
* 失败
|
||||
* @param title
|
||||
* @returns {*}
|
||||
*/
|
||||
error: function (title) {
|
||||
return layer.msg(title, {icon: 2, shade: this.shade, scrollbar: false, time: 3000, shadeClose: true});
|
||||
},
|
||||
|
||||
/**
|
||||
* 判断是否为手机
|
||||
* @returns {boolean}
|
||||
*/
|
||||
checkMobile: function () {
|
||||
var ua = navigator.userAgent.toLocaleLowerCase();
|
||||
var pf = navigator.platform.toLocaleLowerCase();
|
||||
var isAndroid = (/android/i).test(ua) || ((/iPhone|iPod|iPad/i).test(ua) && (/linux/i).test(pf))
|
||||
|| (/ucweb.*linux/i.test(ua));
|
||||
var isIOS = (/iPhone|iPod|iPad/i).test(ua) && !isAndroid;
|
||||
var isWinPhone = (/Windows Phone|ZuneWP7/i).test(ua);
|
||||
var clientWidth = document.documentElement.clientWidth;
|
||||
if (!isAndroid && !isIOS && !isWinPhone && clientWidth > 1024) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听
|
||||
*/
|
||||
listen: function () {
|
||||
|
||||
layui.form.on('switch(header-theme-mode)', function (data) {
|
||||
let checked = data.elem.checked;
|
||||
let mode = checked ? 'dark' : 'light';
|
||||
changeTheme(mode);
|
||||
});
|
||||
|
||||
/**
|
||||
* 浅色和暗色主题切换
|
||||
*/
|
||||
const theme = colorMode.init({
|
||||
onChanged(mode, defaultHandler) {
|
||||
const isAppearanceTransition =
|
||||
document.startViewTransition && !window.matchMedia(`(prefers-reduced-motion: reduce)`).matches;
|
||||
const isDark = mode === 'dark';
|
||||
//跟随windows系统主题色的变化而变化,但没法保存选择的元素风格
|
||||
// var darkThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
// var preferredDark = darkThemeMediaQuery.matches;
|
||||
// var currMode = preferredDark ? 'dark' : 'light';
|
||||
// changeTheme(currMode);
|
||||
$('#change-theme').attr('class', `layui-icon layui-icon-${isDark ? 'moon' : 'light'}`);
|
||||
|
||||
if (!isAppearanceTransition) {
|
||||
defaultHandler();
|
||||
} else {
|
||||
rippleViewTransition(isDark, function () {
|
||||
// 动画需要
|
||||
document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
|
||||
defaultHandler();
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
//切换特效
|
||||
function rippleViewTransition(isDark, callback) {
|
||||
// 移植自 https://github.com/vuejs/vitepress/pull/2347
|
||||
// 支持 Chrome 111+
|
||||
const x = event.clientX;
|
||||
const y = event.clientY;
|
||||
const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
|
||||
const transition = document.startViewTransition(function () {
|
||||
callback && callback();
|
||||
});
|
||||
transition.ready.then(function () {
|
||||
var clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`];
|
||||
document.documentElement.animate(
|
||||
{
|
||||
clipPath: isDark ? clipPath : [...clipPath].reverse(),
|
||||
},
|
||||
{
|
||||
duration: 300,
|
||||
easing: 'ease-in',
|
||||
pseudoElement: isDark ? '::view-transition-new(root)' : '::view-transition-old(root)',
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
//改变主题
|
||||
function changeTheme(mode) {
|
||||
switch (mode) {
|
||||
case 'dark':
|
||||
localStorage.setItem('layuiminiBgColorId', '1');
|
||||
localStorage.setItem('layuiminiElemStyleName', 'dark');
|
||||
changeBgColor(1);
|
||||
break;
|
||||
case 'light':
|
||||
localStorage.setItem('layuiminiBgColorId', '0');
|
||||
localStorage.setItem('layuiminiElemStyleName', 'normal');
|
||||
changeBgColor(0);
|
||||
break
|
||||
}
|
||||
window.onInitElemStyle()
|
||||
}
|
||||
|
||||
//改变配色
|
||||
function changeBgColor(id) {
|
||||
$('.layuimini-color .color-content ul .layui-this').attr('class', '');
|
||||
$(this).attr('class', 'layui-this');
|
||||
localStorage.setItem('layuiminiBgColorId', id);
|
||||
miniTheme.render({
|
||||
bgColorDefault: id,
|
||||
listen: false,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 清理
|
||||
*/
|
||||
$('body').on('click', '[data-clear]', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
sessionStorage.clear();
|
||||
|
||||
// 判断是否清理服务端
|
||||
var clearUrl = $(this).attr('data-href');
|
||||
if (clearUrl != undefined && clearUrl != '' && clearUrl != null) {
|
||||
$.getJSON(clearUrl, function (data, status) {
|
||||
layer.close(loading);
|
||||
if (data.code != 1) {
|
||||
return miniAdmin.error(data.msg);
|
||||
} else {
|
||||
return miniAdmin.success(data.msg);
|
||||
}
|
||||
}).fail(function () {
|
||||
layer.close(loading);
|
||||
return miniAdmin.error('清理缓存接口有误');
|
||||
});
|
||||
} else {
|
||||
layer.close(loading);
|
||||
return miniAdmin.success('清除缓存成功');
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 刷新
|
||||
*/
|
||||
$('body').on('click', '[data-refresh]', function () {
|
||||
$(".layui-tabs-item.layui-show").find("iframe")[0].contentWindow.location.reload();
|
||||
miniAdmin.success('刷新成功');
|
||||
});
|
||||
|
||||
/**
|
||||
* 监听提示信息
|
||||
*/
|
||||
$("body").on("mouseenter", ".layui-nav-tree .menu-li", function () {
|
||||
if (miniAdmin.checkMobile()) {
|
||||
return false;
|
||||
}
|
||||
var classInfo = $(this).attr('class'),
|
||||
tips = $(this).prop("innerHTML"),
|
||||
isShow = $('.layuimini-tool i').attr('data-side-fold');
|
||||
if (isShow == 0 && tips) {
|
||||
tips = "<ul class='layuimini-menu-left-zoom layui-nav layui-nav-tree layui-this'><li class='layui-nav-item layui-nav-itemed'>" + tips + "</li></ul>";
|
||||
window.openTips = layer.tips(tips, $(this), {
|
||||
tips: [2, '#2f4056'],
|
||||
time: 300000,
|
||||
skin: "popup-tips",
|
||||
success: function (el) {
|
||||
var left = $(el).position().left - 10;
|
||||
$(el).css({left: left});
|
||||
element.render();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$("body").on("mouseleave", ".popup-tips", function () {
|
||||
if (miniAdmin.checkMobile()) {
|
||||
return false;
|
||||
}
|
||||
var isShow = $('.layuimini-tool i').attr('data-side-fold');
|
||||
if (isShow == 0) {
|
||||
try {
|
||||
layer.close(window.openTips);
|
||||
} catch (e) {
|
||||
console.log(e.message);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* 全屏
|
||||
*/
|
||||
$('body').on('click', '[data-check-screen]', function () {
|
||||
var check = $(this).attr('data-check-screen');
|
||||
if (check == 'full') {
|
||||
miniAdmin.fullScreen();
|
||||
$(this).attr('data-check-screen', 'exit');
|
||||
$(this).html('<i class="fa fa-compress"></i>');
|
||||
} else {
|
||||
miniAdmin.exitFullScreen();
|
||||
$(this).attr('data-check-screen', 'full');
|
||||
$(this).html('<i class="fa fa-arrows-alt"></i>');
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 点击遮罩层
|
||||
*/
|
||||
$('body').on('click', '.layuimini-make', function () {
|
||||
miniAdmin.renderDevice();
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return miniAdmin;
|
||||
});
|
||||
Reference in New Issue
Block a user