ssgl/cff/miniAdmin.js

layui.define(["jquery", "miniMenu", "element","miniPage", "miniTheme","axios","store"], function (exports) { // 定义一个模块，依赖列表包括 jQuery, miniMenu, element, miniPage, miniTheme, axios, store
    var $ = layui.$, // 获取 jQuery 模块并赋值给变量 $
        element = layui.element, // 获取 element 模块并赋值给变量 element
        layer = layui.layer, // 获取 layer 模块并赋值给变量 layer
        miniMenu = layui.miniMenu, // 获取 miniMenu 模块并赋值给变量 miniMenu
        miniTheme = layui.miniTheme, // 获取 miniTheme 模块并赋值给变量 miniTheme
        store = layui.store, // 获取 store 模块并赋值给变量 store
        axios = layui.axios, // 获取 axios 模块并赋值给变量 axios
        miniPage = layui.miniPage;

    if (!/http(s*):\/\//.test(location.href)) { // 检查当前页面的URL是否以http或https开头，如果不是则执行以下代码块
        var tips = "请先将项目部署至web容器（Apache/Tomcat/Nginx/IIS/等），否则部分数据将无法显示"; // 定义提示信息，告知用户需要将项目部署到Web容器中
        return layer.alert(tips); // 使用layer.alert方法弹出提示框，显示上述提示信息，并终止后续代码的执行
    }

    var miniAdmin = { // 定义一个名为miniAdmin的对象，用于存放后续的代码逻辑和功能实现


            render: function (options) {
                options.iniUrl = options.iniUrl || null; // 初始化URL，默认为null
                options.logoInfo = options.logoInfo || null; // Logo信息，默认为null
                options.homeInfo = options.homeInfo || null; // 首页信息，默认为null
                options.clearUrl = options.clearUrl || null; // 清除URL，默认为null
                options.renderPageVersion = options.renderPageVersion || false; // 是否渲染页面版本，默认为false
                options.bgColorDefault = options.bgColorDefault || 0; // 默认背景颜色，默认为0
                options.multiModule = options.multiModule || false; // 是否支持多模块，默认为false
                options.menuChildOpen = options.menuChildOpen || false; // 菜单子项是否默认展开，默认为false
                options.loadingTime = options.loadingTime || 1; // 加载时间，默认为1秒
                options.pageAnim = options.pageAnim || false; // 页面动画效果，默认为false
            }

            // 使用axios发送GET请求获取初始化数据
            axios.get(options.iniUrl).then(function (data) {
                // 如果返回的数据为空，显示错误信息
                if (data == null) {
                    miniAdmin.error('暂无菜单信息')
                } else {
                    // 渲染logo信息
                    miniAdmin.renderLogo(options.logoInfo);
                    // 渲染清除按钮
                    miniAdmin.renderClear(options.clearUrl);
                    // 渲染页面动画效果
                    miniAdmin.renderAnim(options.pageAnim);
                    // 监听并处理首页信息和多模块信息
                    miniAdmin.listen({
                        // 监听homeInfo属性，并传递options对象中的homeInfo值
                        homeInfo: options.homeInfo,
                        // 监听multiModule属性，并传递options对象中的multiModule值
                        multiModule: options.multiModule,
                    })
                    miniMenu.render({
                        // 将数据列表传递给菜单渲染函数
                        menuList: data.data,
                        // 传递是否支持多模块的选项
                        multiModule: options.multiModule,
                        // 传递子菜单默认打开状态的选项
                        menuChildOpen: options.menuChildOpen
                    });
                    miniPage.render({
                        // 设置首页信息，从options对象中获取homeInfo属性
                        homeInfo: options.homeInfo,
                        // 设置菜单列表数据，从data对象的data属性中获取
                        menuList: data.data,
                        // 设置是否启用多模块功能，从options对象中获取multiModule属性
                        multiModule: options.multiModule,
                        // 设置页面渲染版本，从options对象中获取renderPageVersion属性
                        renderPageVersion: options.renderPageVersion,
                        // 设置子菜单是否默认打开，从options对象中获取menuChildOpen属性
                        menuChildOpen: options.menuChildOpen,
                        // 定义监听切换回调函数，当触发时调用miniAdmin的renderDevice方法
                        listenSwichCallback: function () {
                            miniAdmin.renderDevice();
                        }
                    });
                    miniTheme.render({
                        // 设置默认背景颜色
                        bgColorDefault: options.bgColorDefault,
                        // 监听事件
                        listen: true,
                    });
                    // 删除加载器，传入加载时间参数
                    miniAdmin.deleteLoader(options.loadingTime);
                }
            }).catch(function () {
                // 捕获错误并显示错误信息
                miniAdmin.error('菜单接口有误');
            })
        },

        /**
         * 初始化logo
         * @param data
         */
        renderLogo: function (data) {
        // 生成包含logo图片和标题的HTML字符串
        var html = '<a href="javascript:;"><img src="' + data.image + '" alt="logo"><h1>' + data.title + '</h1></a>';

        // 将生成的HTML字符串插入到class为layuimini-logo的元素中
        $('.layuimini-logo').html(html);
    },

    /**
     * 初始化缓存地址
     * @param clearUrl
     */
    renderClear: function (clearUrl) {
        // 将传入的URL设置为'.layuimini-clear'元素的data-href属性值
        $('.layuimini-clear').attr('data-href', clearUrl);
    },

    /**
     * 切换菜单动画
     * @param anim
     */
    renderAnim: function (anim) {
        // 检查传入的动画参数是否存在
        if (anim) {
            // 在ID为'layuimini-bg-color'的元素之后插入一段样式代码，用于定义页面动画效果
            $('#layuimini-bg-color').after('<style id="layuimini-page-anim">' +
                // 定义动画名称和持续时间，以及填充模式
                '.layuimini-page-anim {-webkit-animation-name:layuimini-upbit;-webkit-animation-duration:.3s;-webkit-animation-fill-mode:both;}\n' +
                // 使用@keyframes定义动画关键帧
                '@keyframes layuimini-upbit {0% {transform:translate3d(0,30px,0);opacity:.3;}\n' +
                // 动画从初始状态到结束状态的变化
                '100% {transform:translate3d(0,0,0);opacity:1;}\n' +
                '}\n' +
                '</style>');
        }
    },

    /**
     * 进入全屏
     */
    fullScreen: function () {
        // 获取文档的根元素
        var el = document.documentElement;
        // 获取不同浏览器的全屏请求方法
        var rfs = el.requestFullScreen || el.webkitRequestFullScreen;

        // 如果支持标准的全屏请求方法，则调用该方法
        if (typeof rfs != "undefined" && rfs) {
            rfs.call(el);
        }
        // 如果支持ActiveXObject（主要用于IE），则通过发送F11键实现全屏
        else if (typeof window.ActiveXObject != "undefined") {
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript != null) {
                wscript.SendKeys("{F11}");
            }
        }
        // 针对IE的msRequestFullscreen方法
        else if (el.msRequestFullscreen) {
            el.msRequestFullscreen();
        }
        // 针对Opera的oRequestFullscreen方法
        else if (el.oRequestFullscreen) {
            el.oRequestFullscreen();
        }
        // 针对Webkit内核的webkitRequestFullscreen方法
        else if (el.webkitRequestFullscreen) {
            el.webkitRequestFullscreen();
        }
        // 针对Firefox的mozRequestFullScreen方法
        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") {
            // 针对IE浏览器的处理方式
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript != null) {
                // 发送F11键以退出全屏模式
                wscript.SendKeys("{F11}");
            }
        } else if (el.msExitFullscreen) {
            // 针对IE11及以下版本的处理方式
            el.msExitFullscreen();
        } else if (el.oRequestFullscreen) {
            // 针对Opera浏览器的处理方式
            el.oCancelFullScreen();
        } else if (el.mozCancelFullScreen) {
            // 针对Firefox浏览器的处理方式
            el.mozCancelFullScreen();
        } else if (el.webkitCancelFullScreen) {
            // 针对Webkit内核的浏览器（如Chrome和Safari）的处理方式
            el.webkitCancelFullScreen();
        } else {
            // 如果以上所有方法都不可用，提示用户浏览器不支持全屏调用
            miniAdmin.error('浏览器不支持全屏调用！');
        }
    },

    /**
     * 初始化设备端
     */
    renderDevice: function () {
        // 如果当前是移动设备
        if (miniAdmin.checkMobile()) {
            // 设置工具栏图标的属性为展开状态
            $('.layuimini-tool i').attr('data-side-fold', 1);
            // 更改工具栏图标的类名为“fa fa-outdent”
            $('.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) {
        // 设置一个定时器，在指定的时间后执行回调函数
        setTimeout(function () {
            // 使用jQuery选择器找到类名为'layuimini-loader'的元素，并使其淡出
            $('.layuimini-loader').fadeOut();
        }, loadingTime * 1000) // 将传入的loadingTime参数转换为毫秒
    },

    /**
     * 成功
     * @param title
     * @returns {*}
     */
    success: function (title) {
        // 调用layer.msg方法显示消息提示框
        // title: 要显示的消息内容
        // icon: 1 表示成功图标
        // shade: 使用当前对象的shade属性作为遮罩层
        // scrollbar: false 表示不显示滚动条
        // time: 2000 表示消息提示框显示时间为2秒
        // shadeClose: true 表示点击遮罩层可以关闭提示框
        return layer.msg(title, {icon: 1, shade: this.shade, scrollbar: false, time: 2000, shadeClose: true});
    },

    /**
     * 失败
     * @param title
     * @returns {*}
     */
    error: function (title) {
        // 调用layer.msg方法显示错误消息
        // title: 要显示的消息内容
        // icon: 2 表示使用错误图标
        // shade: 使用当前对象的shade属性值
        // scrollbar: false 表示不显示滚动条
        // time: 3000 表示消息显示时间为3秒
        // shadeClose: true 表示点击遮罩层可以关闭消息框
        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();
        // 判断是否为Android设备
        var isAndroid = (/android/i).test(ua) || ((/iPhone|iPod|iPad/i).test(ua) && (/linux/i).test(pf))
            || (/ucweb.*linux/i.test(ua));
        // 判断是否为iOS设备，排除Android设备
        var isIOS = (/iPhone|iPod|iPad/i).test(ua) && !isAndroid;
        // 判断是否为Windows Phone设备
        var isWinPhone = (/Windows Phone|ZuneWP7/i).test(ua);
        // 获取文档的宽度
        var clientWidth = document.documentElement.clientWidth;
        // 如果既不是Android、iOS也不是Windows Phone，并且宽度大于1024，则返回false
        if (!isAndroid && !isIOS && !isWinPhone && clientWidth > 1024) {
            return false;
        } else {
            // 否则返回true
            return true;
        }
    },

    /**
     * 监听
     * @param options
     */
    listen: function (options) {
        // 如果 options 对象中没有 homeInfo 属性，则初始化为一个空对象
        options.homeInfo = options.homeInfo || {};
    }

    /**
     * 清理
     */
    $('body').on('click', '[data-clear]', function () {
        // 显示加载动画，设置2秒后自动关闭
        var loading = layer.load(0, {shade: false, time: 2 * 1000});

        // 清空浏览器的sessionStorage
        sessionStorage.clear();

        // 获取清理缓存的URL
        var clearUrl = $(this).attr('data-href');

        // 如果URL存在且不为空
        if (clearUrl != undefined && clearUrl != '' && clearUrl != null) {
            // 发送GET请求到服务器清理缓存
            $.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 {
            // URL不存在或为空，直接关闭加载动画并显示成功信息
            layer.close(loading);
            return miniAdmin.success('清除缓存成功');
        }
    });
    /**
     * 刷新
     */
    $('body').on('click', '[data-refresh]', function () {
        // 当点击带有 data-refresh 属性的元素时，触发此事件处理函数
        miniPage.refresh(options);
        // 调用 miniPage 对象的 refresh 方法，并传入 options 参数进行页面刷新
        miniAdmin.success('刷新成功');
        // 调用 miniAdmin 对象的 success 方法，显示“刷新成功”的提示信息
    });

    /**
     * 监听提示信息
     */
    $("body").on("mouseenter", ".layui-nav-tree .menu-li", function () {
        // 如果当前是移动设备，则不执行后续代码
        if (miniAdmin.checkMobile()) {
            return false;
        }
        // 获取当前元素的class属性值
        var classInfo = $(this).attr('class'),
            // 获取当前元素的HTML内容
            tips = $(this).prop("innerHTML"),
            // 获取工具栏的折叠状态
            isShow = $('.layuimini-tool i').attr('data-side-fold');
        // 如果工具栏未折叠且tips存在
        if (isShow == 0 && tips) {
            // 构建提示信息HTML结构
            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 () {
        // 当鼠标离开具有类名 'popup-tips' 的元素时触发事件
        if (miniAdmin.checkMobile()) {
            // 如果当前设备是移动设备，则直接返回 false，不执行后续代码
            return false;
        }
        // 获取具有类名 'layuimini-tool i' 的元素的 'data-side-fold' 属性值
        var isShow = $('.layuimini-tool i').attr('data-side-fold');
        if (isShow == 0) {
            // 如果 'data-side-fold' 属性值为 0，表示侧边栏未展开
            try {
                // 尝试关闭弹出提示框
                layer.close(window.openTips);
            } catch (e) {
                // 如果关闭过程中发生异常，捕获异常并打印错误信息到控制台
                console.log(e.message);
            }
        }
    });

    /**
     * 全屏
     */
    $('body').on('click', '[data-check-screen]', function () {
        // 获取当前元素的 data-check-screen 属性值
        var check = $(this).attr('data-check-screen');

        // 如果属性值为 'full'，则进入全屏模式
        if (check == 'full') {
            // 调用 miniAdmin 的 fullScreen 方法进入全屏模式
            miniAdmin.fullScreen();
            // 将属性值改为 'exit'
            $(this).attr('data-check-screen', 'exit');
            // 修改按钮图标为压缩图标
            $(this).html('<i class="fa fa-compress"></i>');
        } else {
            // 否则退出全屏模式
            miniAdmin.exitFullScreen();
            // 将属性值改为 'full'
            $(this).attr('data-check-screen', 'full');
            // 修改按钮图标为箭头图标
            $(this).html('<i class="fa fa-arrows-alt"></i>');
        }
    });

    /**
     * 点击遮罩层
     */
    $('body').on('click', '.layuimini-make', function () {
        // 调用 miniAdmin 的 renderDevice 方法重新渲染设备
        miniAdmin.renderDevice();
    });

}
};

// 导出 miniAdmin 模块
exports("miniAdmin", miniAdmin);
});