主要特性

1、界面足够简洁清爽，响应式且适配手机端。
2、一个接口几行代码而已直接初始化整个框架，无需复杂操作。
3、页面支持多配色方案，可自行选择喜欢的配色。
4、支持多tab，可以打开多窗口。
5、支持无限级菜单和对font-awesome图标库的完美支持。
6、失效以及报错菜单无法直接打开，并给出弹出层提示完美的线上用户体验。
7、url地址hash定位，可以清楚看到当前tab的地址信息。
8、刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。
9、支持font-awesome图标选择插件

初始化接口

数据库表结构示例

CREATE TABLE `system_menu` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `pid` int(11) unsigned NOT NULL DEFAULT '0' COMMENT '父ID',
  `title` varchar(100) NOT NULL DEFAULT '' COMMENT '名称',
  `icon` varchar(100) NOT NULL DEFAULT '' COMMENT '菜单图标',
  `href` varchar(100) NOT NULL DEFAULT '' COMMENT '链接',
  `target` varchar(20) NOT NULL DEFAULT '_self' COMMENT '链接打开方式',
  `sort` int(11) DEFAULT '0' COMMENT '菜单排序',
  `status` tinyint(1) unsigned NOT NULL DEFAULT '1' COMMENT '状态(0:禁用,1:启用)',
  `remark` varchar(255) DEFAULT NULL COMMENT '备注信息',
  `create_at` timestamp NULL DEFAULT NULL COMMENT '创建时间',
  `update_at` timestamp NULL DEFAULT NULL COMMENT '更新时间',
  `delete_at` timestamp NULL DEFAULT NULL COMMENT '删除时间',
  PRIMARY KEY (`id`),
  KEY `title` (`title`),
  KEY `href` (`href`)
) ENGINE=InnoDB AUTO_INCREMENT=250 DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT COMMENT='系统菜单表';

ThinkPHP框架示例(6.0版本)

<?php

namespace app\index\controller;

use app\BaseController;
use think\facade\Db;

class Index extends BaseController{

    // 获取初始化数据
    public function getSystemInit(){
        $homeInfo = [
            'title' => '首页',
            'href'  => 'page/welcome-1.html?t=1',
        ];
        $logoInfo = [
            'title' => 'LAYUI MINI',
            'image' => 'images/logo.png',
        ];
        $menuInfo = $this->getMenuList();
        $systemInit = [
            'homeInfo' => $homeInfo,
            'logoInfo' => $logoInfo,
            'menuInfo' => $menuInfo,
        ];
        return json($systemInit);
    }

    // 获取菜单列表
    private function getMenuList(){
        $menuList = Db::name('system_menu')
            ->field('id,pid,title,icon,href,target')
            ->where('status', 1)
            ->order('sort', 'desc')
            ->select();
        $menuList = $this->buildMenuChild(0, $menuList);
        return $menuList;
    }

    //递归获取子菜单
    private function buildMenuChild($pid, $menuList){
        $treeList = [];
        foreach ($menuList as $v) {
            if ($pid == $v['pid']) {
                $node = $v;
                $child = $this->buildMenuChild($v['id'], $menuList);
                if (!empty($child)) {
                    $node['child'] = $child;
                }
                // todo 后续此处加上用户的权限判断
                $treeList[] = $node;
            }
        }
        return $treeList;
    }
}

基础参数一览表

以下参数是miniAdmin.render();初始化时进行传入。

示例说明

var options = {
    iniUrl: "api/init.json",    // 初始化接口
    clearUrl: "api/clear.json", // 缓存清理接口
    urlHashLocation: true,      // 是否打开hash定位
    bgColorDefault: 0,          // 主题默认配置
    multiModule: true,          // 是否开启多模块
    menuChildOpen: false,       // 是否默认展开菜单
    loadingTime: 0,             // 初始化加载时间
    pageAnim: true,             // iframe窗口动画
};
miniAdmin.render(options);

后台模板初始化

在index.html文件内进行初始化
引入lay-config.js文件，请根据实际情况修改里面扩展的路径。
引入miniAdmin模块，根据需要传入初始化参数，执行miniAdmin.render(options); 方法。
初始化api接口返回的参数可以参考api目录下的init.json文件或者查看使用说明的第二点的参数说明

示例说明

layui.use(['jquery', 'layer', 'miniAdmin'], function () {
    var $ = layui.jquery,
        layer = layui.layer,
        miniAdmin = layui.miniAdmin;

    var options = {
        iniUrl: "api/init.json",    // 初始化接口
        clearUrl: "api/clear.json", // 缓存清理接口
        urlHashLocation: true,      // 是否打开hash定位
        bgColorDefault: 0,          // 主题默认配置
        multiModule: true,          // 是否开启多模块
        menuChildOpen: false,       // 是否默认展开菜单
    };
    miniAdmin.render(options);

});

初始化api接口返回的参数说明

homeInfo 是首页信息
logoInfo 是logo信息
menuInfo 是头部模块和左侧菜单对应的信息

示例说明

{
  "homeInfo": {
    "title": "首页",
    "href": "page/welcome-1.html?t=1"
  },
  "logoInfo": {
    "title": "LAYUI MINI",
    "image": "images/logo.png",
    "href": ""
  },
  "menuInfo": [
    {
      "title": "常规管理",
      "icon": "fa fa-address-book",
      "href": "",
      "target": "_self",
      "child":[...]
    },
    {
      "title": "组件管理",
      "icon": "fa fa-lemon-o",
      "href": "",
      "target": "_self",
      "child":[...]
    },
    {
      "title": "其它管理",
      "icon": "fa fa-slideshare",
      "href": "",
      "target": "_self",
      "child":[...]
    }
  ]
}

缓存清理接口返回的参数说明

返回参数对应的事例(code：0，清除缓存失败；code：1，表示清除缓存成功；)

{

 "code": 1,
 "msg": "清除服务端缓存成功"

}

在页面中弹出新的Tab窗口（标签）

如需在页面中弹出新的Tab窗口，请参考下方代码。（备注：需要引入miniTab.js文件）
参数说明（layuimini-content-href：页面链接，data-title：标题）
调用方法进行监听：miniTab.listen();
示例在page/welcome-1.html页面中有

示例说明

<a href="javascript:;" layuimini-content-href="page/user-setting.html" data-title="基本资料" >基本资料</a>

layui.use(['form','miniTab'], function () {
    var form = layui.form,
        layer = layui.layer,
        miniTab = layui.miniTab;

    miniTab.listen();

});

在页面中弹出新的Tab窗口（JS方法）

如需在页面中弹出新的Tab窗口，请参考下方代码。（备注：需要引入miniTab.js文件）
参数说明（href：页面链接，title：标题）

示例说明

layui.use(['form','miniTab'], function () {
    var form = layui.form,
        layer = layui.layer,
        miniTab = layui.miniTab;

    // 打开新的窗口 
    miniTab.openNewTabByIframe({
        href:"page/form.html",
        title:"按钮示例",
    });

});

在iframe页面中关闭当前Tab窗口

如需在iframe页面中，请参考下方代码。（备注：miniTab.js文件）
调用方法：miniTab.deleteCurrentByIframe();
示例在user-password.html,user-setting.html页面中都有

示例说明

layui.use(['form','miniTab'], function () {
    var form = layui.form,
        layer = layui.layer,
        miniTab = layui.miniTab;

    //监听提交
    form.on('submit(saveBtn)', function (data) {
        var index = layer.alert(JSON.stringify(data.field), {
            title: '最终的提交信息'
        }, function () {
            layer.close(index);
            miniTab.deleteCurrentByIframe();
        });
        return false;
    });

});

后台主题方案配色

系统已内置12套主题配色，如果需要自定义皮肤配色，请在miniTheme.config方法内按相同格式添加。

示例说明

var bgColorConfig = [
            {
                headerRightBg: '#ffffff',                           //头部右侧背景色
                headerRightBgThis: '#e4e4e4',                       //头部右侧选中背景色,
                headerRightColor: 'rgba(107, 107, 107, 0.7)',       //头部右侧字体颜色,
                headerRightChildColor: 'rgba(107, 107, 107, 0.7)',  //头部右侧下拉字体颜色,
                headerRightColorThis: '#565656',                    //头部右侧鼠标选中,
                headerRightNavMore: 'rgba(160, 160, 160, 0.7)',     //头部右侧更多下拉颜色,
                headerRightNavMoreBg: '#1E9FFF',                    //头部右侧更多下拉列表选中背景色,
                headerRightNavMoreColor: '#ffffff',                 //头部右侧更多下拉列表字体色,
                headerRightToolColor: '#565656',                    //头部缩放按钮样式,
                headerLogoBg: '#192027',                            //logo背景颜色,
                headerLogoColor: 'rgb(191, 187, 187)',              //logo字体颜色,
                leftMenuNavMore: 'rgb(191, 187, 187)',              //左侧菜单更多下拉样式,
                leftMenuBg: '#28333E',                              //左侧菜单背景,
                leftMenuBgThis: '#1E9FFF',                          //左侧菜单选中背景,
                leftMenuChildBg: '#0c0f13',                         //左侧菜单子菜单背景,
                leftMenuColor: 'rgb(191, 187, 187)',                //左侧菜单字体颜色,
                leftMenuColorThis: '#ffffff',                       //左侧菜单选中字体颜色,
                tabActiveColor: '#1e9fff',                          //tab选项卡选中颜色,
            },
];

常见问题

修改js后刷新页面未生效，请尝试清除浏览器缓存。
IIS环境下请配置支持解析.json格式文件

备注信息

菜单栏建议最多四级菜单，四级以后菜单显示并没有那么友好。

在线预览地址：http://layuimini.99php.cn/iframe/v2/index.html
GitHub仓库地址：https://github.com/zhongshaofa/layuimini/tree/v2
Gitee仓库地址：https://gitee.com/zhongshaofa/layuimini/tree/v2
蓝奏云：https://zhizun.lanzoui.com/i4DzYrrcjwh