Layui Mini

https://github.com/zhongshaofa/layuimini
Admin
Layui Mini is a clean and lightweight admin template framework built on Layui that enables rapid...
Tokens:20,261
Snippets:85
Trust Score:7.4
License:MIT
Update:6 months ago
Show doc for...
Tokens:
Raw
### Backend Cache Clearing API Example (Node.js/Express)

Source: https://context7.com/zhongshaofa/layuimini/llms.txt

Provides a backend implementation example for the cache clearing API using Node.js and Express. This endpoint handles GET requests to '/api/clear.json', attempts to clear server-side cache, and returns a JSON response indicating success or failure.

```javascript
// 后端接口示例 (Node.js/Express)
app.get('/api/clear.json', function(req, res) {
    // 执行服务端缓存清理逻辑
    try {
        // 清理Redis缓存、文件缓存等
        clearServerCache();
        res.json({
            code: 1,
            msg: "服务端清理缓存成功"
        });
    } catch (e) {
        res.json({
            code: 0,
            msg: "清理缓存失败：" + e.message
        });
    }
});
```

--------------------------------

### Initialize Layui Mini Framework

Source: https://context7.com/zhongshaofa/layuimini/llms.txt

Renders the backend framework by loading menu data, logo information, and homepage details. It binds events and initializes the system. Dependencies include jquery, layer, miniAdmin, and miniTongji. It takes an options object for configuration.

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

    // 框架初始化配置
    var options = {
        iniUrl: "api/init.json",    // 初始化接口地址，返回菜单、Logo、首页等数据
        clearUrl: "api/clear.json", // 缓存清理接口地址
        urlHashLocation: true,      // 是否打开URL hash定位，刷新页面保留当前tab
        bgColorDefault: false,      // 主题默认配置，false表示使用默认主题
        multiModule: true,          // 是否开启多模块（顶部菜单切换）
        menuChildOpen: false,       // 是否默认展开子菜单
        loadingTime: 0,             // 初始化加载动画时间（秒）
        pageAnim: true,             // 是否开启iframe窗口切换动画
        maxTabNum: 20,              // 最大允许打开的tab数量
    };

    // 渲染框架
    miniAdmin.render(options);

    // 退出登录事件绑定
    $('.login-out').on("click", function () {
        layer.msg('退出登录成功', function () {
            window.location = 'page/login-3.html';
        });
    });
});
```

--------------------------------

### GET /api/clear.json

Source: https://context7.com/zhongshaofa/layuimini/llms.txt

This endpoint handles the clearing of server-side cache and triggers the local sessionStorage cleanup in the browser.

```APIDOC
## GET /api/clear.json

### Description
Clears server-side caches (such as Redis or file caches) and returns a status message indicating success or failure.

### Method
GET

### Endpoint
/api/clear.json

### Parameters
None

### Response
#### Success Response (200)
- **code** (integer) - Status code (1 for success)
- **msg** (string) - Success message

#### Response Example
{
  "code": 1,
  "msg": "服务端清理缓存成功"
}
```

--------------------------------

### Initialize and Configure wangEditor

Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/editor.html

This snippet demonstrates how to instantiate the wangEditor instance, configure the image upload server, set upload limits, and define custom hooks for handling server responses and errors.

```javascript
var E = window.wangEditor;
var editor = new E('#editor');
editor.customConfig.uploadImgServer = "../api/upload.json";
editor.customConfig.uploadFileName = 'image';
editor.customConfig.pasteFilterStyle = false;
editor.customConfig.uploadImgMaxLength = 5;
editor.customConfig.uploadImgHooks = {
    timeout: function (xhr, editor) {
        layer.msg('上传超时！')
    },
    customInsert: function (insertImg, result, editor) {
        console.log(result);
        if (result.code == 1) {
            var url = result.data.url;
            url.forEach(function (e) {
                insertImg(e);
            })
        } else {
            layer.msg(result.msg);
        }
    }
};
editor.customConfig.customAlert = function (info) {
    layer.msg(info);
};
editor.create();
```

```javascript
layui.use(['layer','wangEditor'], function () {
    var $ = layui.jquery, layer = layui.layer, wangEditor = layui.wangEditor;
    var editor = new wangEditor('#editor');
    editor.customConfig.uploadImgServer = "../api/upload.json";
    editor.customConfig.uploadFileName = 'image';
    editor.customConfig.pasteFilterStyle = false;
    editor.customConfig.uploadImgMaxLength = 5;
    editor.customConfig.uploadImgHooks = {
        timeout: function (xhr, editor) {
            layer.msg('上传超时！')
        },
        customInsert: function (insertImg, result, editor) {
            console.log(result);
            if (result.code == 1) {
                var url = result.data.url;
                url.forEach(function (e) {
                    insertImg(e);
                })
            } else {
                layer.msg(result.msg);
            }
        }
    };
    editor.customConfig.customAlert = function (info) {
        layer.msg(info);
    };
    editor.create();
});
```

--------------------------------

### Cache Clearing API Response Examples

Source: https://context7.com/zhongshaofa/layuimini/llms.txt

Defines the JSON response structure for the cache clearing API. It includes a 'code' field (1 for success, 0 for failure) and a 'msg' field for status messages. These responses are used by the frontend to indicate the outcome of a cache clearing request.

```json
// 成功响应
{
  "code": 1,
  "msg": "服务端清理缓存成功"
}

// 失败响应
{
  "code": 0,
  "msg": "清理缓存失败，请重试"
}
```

--------------------------------

### Initialize IconPickerFa Plugin

Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/icon-picker.html

Demonstrates how to render the icon picker using the iconPickerFa.render method. It includes configuration for the icon source URL, search functionality, pagination, and callback handlers for click and success events.

```javascript
iconPickerFa.render({
    elem: '#iconPicker',
    url: "/lib/font-awesome-4.7.0/less/variables.less",
    search: true,
    page: true,
    limit: 12,
    click: function (data) {
        console.log(data);
    },
    success: function (d) {
        console.log(d);
    }
});
```

```javascript
layui.use(['iconPickerFa', 'form', 'layer'], function () {
    var iconPickerFa = layui.iconPickerFa;
    iconPickerFa.render({
        elem: '#iconPicker',
        url: "../lib/font-awesome-4.7.0/less/variables.less",
        search: true,
        page: true,
        limit: 12,
        click: function (data) { console.log(data); },
        success: function (d) { console.log(d); }
    });
});
```

--------------------------------

### Initialize Layui Form and Components

Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/form.html

Demonstrates how to use layui.use to load form, layedit, and laydate modules, initialize date pickers, define custom validation rules, and handle form submission events.

```javascript
layui.use(['form', 'layedit', 'laydate'], function () {
  var form = layui.form
    , layer = layui.layer
    , layedit = layui.layedit
    , laydate = layui.laydate;

  //日期
  laydate.render({ elem: '#date' });
  laydate.render({ elem: '#date1' });

  //创建一个编辑器
  var editIndex = layedit.build('LAY_demo_editor');

  //自定义验证规则
  form.verify({
    title: function (value) {
      if (value.length < 5) {
        return '标题至少得5个字符啊';
      }
    }
    , pass: [ /^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格' ]
    , content: function (value) {
      layedit.sync(editIndex);
    }
  });

  //监听指定开关
  form.on('switch(switchTest)', function (data) {
    layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), { offset: '6px' });
    layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
  });

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

  //表单初始赋值
  form.val('example', {
    "username": "贤心"
    , "password": "123456"
    , "interest": 1
    , "like[write]": true
    , "close": true
    , "sex": "女"
    , "desc": "我爱 layui"
  });
});
```

--------------------------------

### Initialize and Configure Layer Popups

Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/layer.html

Demonstrates how to load the layer module using layui.use and trigger various popup types such as iframes, confirmation dialogs, and custom notice layers. It handles event binding for buttons to trigger specific layer behaviors.

```javascript
layui.use('layer', function () {
	var $ = layui.jquery, layer = layui.layer;
	var active = {
		setTop: function () {
			var that = this;
			layer.open({
				type: 2,
				title: '当你选择该窗体时，即会在最顶端',
				area: ['390px', '260px'],
				shade: 0,
				maxmin: true,
				offset: [Math.random() * ($(window).height() - 300), Math.random() * ($(window).width() - 390)],
				content: '//layer.layui.com/test/settop.html',
				btn: ['继续弹出', '全部关闭'],
				yes: function () { $(that).click(); },
				btn2: function () { layer.closeAll(); },
				zIndex: layer.zIndex,
				success: function (layero) { layer.setTop(layero); }
			});
		},
		confirmTrans: function () {
			layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', { time: 20000, btn: ['明白了', '知道了', '哦'] });
		},
		notice: function () {
			layer.open({
				type: 1,
				title: false,
				closeBtn: false,
				area: '300px;',
				shade: 0.8,
				id: 'LAY_layuipro',
				btn: ['火速围观', '残忍拒绝'],
				btnAlign: 'c',
				moveType: 1,
				content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui</div>',
				success: function (layero) {
					var btn = layero.find('.layui-layer-btn');
					btn.find('.layui-layer-btn0').attr({ href: 'http://www.layui.com/', target: '_blank' });
				}
			});
		}
	};
	$('#layerDemo .layui-btn').on('click', function () {
		var othis = $(this), method = othis.data('method');
		active[method] ? active[method].call(this, othis) : '';
	});
});
```

--------------------------------

### Layui Mini Initialization Data Structure (init.json)

Source: https://context7.com/zhongshaofa/layuimini/llms.txt

Defines the JSON structure required for framework initialization. It includes home page information, logo configuration, and a hierarchical menu structure. This format supports infinite nesting for menus.

```json
{
  "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": "主页模板",
          "href": "",
          "icon": "fa fa-home",
          "target": "_self",
          "child": [
            {
              "title": "主页一",
              "href": "page/welcome-1.html",
              "icon": "fa fa-tachometer",
              "target": "_self"
            },
            {
              "title": "主页二",
              "href": "page/welcome-2.html",
              "icon": "fa fa-tachometer",
              "target": "_self"
            }
          ]
        },
        {
          "title": "菜单管理",
          "href": "page/menu.html",
          "icon": "fa fa-window-maximize",
          "target": "_self"
        },
        {
          "title": "表格示例",
          "href": "page/table.html",
          "icon": "fa fa-file-text",
          "target": "_self"
        }
      ]
    },
    {
      "title": "组件管理",
      "icon": "fa fa-lemon-o",
      "href": "",
      "target": "_self",
      "child": [
        {
          "title": "图标列表",
          "href": "page/icon.html",
          "icon": "fa fa-dot-circle-o",
          "target": "_self"
        },
        {
          "title": "文件上传",
          "href": "page/upload.html",
          "icon": "fa fa-arrow-up",
          "target": "_self"
        }
      ]
    }
  ]
}
```

--------------------------------

### Component: miniMenu.render

Source: https://context7.com/zhongshaofa/layuimini/llms.txt

Initializes the menu system for the application, supporting both single-module and multi-module layouts.

```APIDOC
## miniMenu.render

### Description
Configures and renders the application menu. Supports multi-module (top + left) or single-module (left only) layouts.

### Parameters
#### Request Body
- **menuList** (array) - Required - Array of menu objects containing title, href, icon, and child nodes.
- **multiModule** (boolean) - Optional - If true, enables top + left layout.
- **menuChildOpen** (boolean) - Optional - Whether to expand sub-menus by default.

### Request Example
{
  "menuList": [...],
  "multiModule": true,
  "menuChildOpen": false
}
```

--------------------------------

### Configure and Render Themes in Layui Mini

Source: https://context7.com/zhongshaofa/layuimini/llms.txt

Manages the theme configuration and rendering for the Layui Mini framework. It supports initializing with a default theme and listening for manual theme changes. Themes can be built using a provided CSS structure and applied programmatically. Requires the 'miniTheme' module.

```javascript
layui.use(['miniTheme'], function () {
    var miniTheme = layui.miniTheme;

    // 初始化主题
    miniTheme.render({
        bgColorDefault: 0,   // 默认主题索引 (0-11)
        listen: true         // 是否监听主题切换事件
    });

    // 手动切换主题
    // bgcolorId: 0-经典白色, 1-深色, 2-粉色, 3-青色
    // 4-蓝色, 5-黄色, 6-红色, 7-紫色, 8-iView蓝, 9-金色, 10-红黑, 11-紫蓝
    miniTheme.buildThemeCss(3);  // 切换到青色主题
});

// 主题配色数据结构示例
var themeConfig = {
    headerRightBg: '#1aa094',
    headerRightBgThis: '#197971',
    headerRightColor: 'rgba(255,255,255,.7)',
    headerLogoBg: '#0c0c0c',
    headerLogoColor: '#ffffff',
    leftMenuBg: '#23262e',
    leftMenuBgThis: '#1aa094',
    leftMenuColor: 'rgb(191, 187, 187)',
    leftMenuColorThis: '#ffffff',
    tabActiveColor: '#1aa094'
};
```

--------------------------------

### Initialize Layuimini Admin with Options

Source: https://github.com/zhongshaofa/layuimini/blob/v2/index.html

This JavaScript code initializes the Layuimini admin template using the `miniAdmin.render()` function. It accepts a configuration object that defines various settings such as API endpoints for initialization and cache clearing, hash location, theme defaults, multi-module support, menu behavior, loading times, page animations, and maximum tab numbers. It also integrates Baidu Tongji for analytics on specified domains.

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

    var options = {
        iniUrl: "api/init.json", // Initialize interface
        clearUrl: "api/clear.json", // Cache clearing interface
        urlHashLocation: true, // Whether to open hash positioning
        bgColorDefault: false, // Theme default configuration
        multiModule: true, // Whether to enable multi-module
        menuChildOpen: false, // Whether to expand the menu by default
        loadingTime: 0, // Initialization load time
        pageAnim: true, // iframe window animation
        maxTabNum: 20, // Maximum number of tabs opened
    };

    miniAdmin.render(options);

    // Baidu statistics code, only statistics specified domains
    miniTongji.render({
        specific: true,
        domains: [
            '99php.cn',
            'layuimini.99php.cn',
            'layuimini-onepage.99php.cn',
        ],
    });

    $('.login-out').on("click", function () {
        layer.msg('Logout successful', function () {
            window.location = 'page/login-3.html';
        });
    });
});
```

--------------------------------

### Initialize Layuimini Framework and Handle Notices

Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/welcome-1.html

This JavaScript code initializes the Layuimini framework using layui modules like layer and miniTab. It also includes an event listener for clicks on elements with the class 'layuimini-notice' to display system announcements in a modal layer. The functionality allows for custom styling and content presentation within the modal.

```javascript
layui.use(['layer', 'miniTab','echarts'], function () {
    var $ = layui.jquery, layer = layui.layer, miniTab = layui.miniTab, echarts = layui.echarts;
    miniTab.listen();
    /**
     * 查看公告信息
     **/
    $('body').on('click', '.layuimini-notice', function () {
        var title = $(this).children('.layuimini-notice-title').text(),
            noticeTime = $(this).children('.layuimini-notice-extra').text(),
            content = $(this).children('.layuimini-notice-content').html();
        var html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #2f4056;color: #ffffff">
' +
            '<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' + title + '</h4></div>
' +
            '<div style="font-size: 12px">' + content + '</div>
' +
            '</div>
';
        parent.layer.open({
            type: 1,
            title: '系统公告'+'<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">'+noticeTime+'</span>',
            area: '300px;',
            shade: 0.8,
            id: 'layuimini-notice',
            btn: ['查看', '取消'],
            btnAlign: 'c',
            moveType: 1,
            content: html,
            success: function (layero) {
                var btn = layero.find('.layui-layer-btn');
                btn.find('.layui-layer-btn0').attr({
                    href: 'https://gitee.com/zhongshaofa/layuimini',
                    target: '_blank'
                });
            }
        });
    });
});
```

--------------------------------

### Initialize Layui Data Table and Toolbar Events

Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/table.html

Configures a data table with remote data source, column definitions, and pagination. Includes event listeners for toolbar actions like adding, deleting, and editing rows.

```javascript
layui.use(['form', 'table'], function () {
	var $ = layui.jquery, form = layui.form, table = layui.table;
	table.render({
		elem: '#currentTableId',
		url: '../api/table.json',
		toolbar: '#toolbarDemo',
		cols: [[{type: "checkbox", width: 50}, {field: 'id', title: 'ID'}, {field: 'username', title: '用户名'}, {title: '操作', toolbar: '#currentTableBar'}]],
		page: true
	});
	form.on('submit(data-search-btn)', function (data) {
		table.reload('currentTableId', { page: { curr: 1 }, where: { searchParams: JSON.stringify(data.field) } });
		return false;
	});
});
```

--------------------------------

### Initialize and Control Multi-Step Form with Layui

Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/form-step.html

This script initializes the step wizard component with specific dimensions and step labels. It also binds form submission events and navigation buttons to progress through the defined steps.

```javascript
layui.use(['form', 'step'], function () {
	var $ = layui.$, form = layui.form, step = layui.step;
	step.render({
		elem: '#stepForm',
		filter: 'stepForm',
		width: '100%',
		stepWidth: '750px',
		height: '500px',
		stepItems: [{ title: '填写入款信息' }, { title: '确认入款信息' }, { title: '完成' }]
	});
	form.on('submit(formStep)', function (data) {
		step.next('#stepForm');
		return false;
	});
	form.on('submit(formStep2)', function (data) {
		step.next('#stepForm');
		return false;
	});
	$('.pre').click(function () {
		step.pre('#stepForm');
	});
	$('.next').click(function () {
		step.next('#stepForm');
	});
});
```

--------------------------------

### Initialize and Configure Layui TreeTable

Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/menu.html

This snippet demonstrates how to render a treeTable using the treetable-lay plugin. It includes configuration for tree structure identification, data fetching, and custom column rendering for menu types.

```javascript
layui.use(['table', 'treetable'], function () {
	var $ = layui.jquery;
	var table = layui.table;
	var treetable = layui.treetable;
	layer.load(2);
	treetable.render({
		treeColIndex: 1,
		treeSpid: -1,
		treeIdName: 'authorityId',
		treePidName: 'parentId',
		elem: '#munu-table',
		url: '../api/menus.json',
		page: false,
		cols: [[{type: 'numbers'}, {field: 'authorityName', minWidth: 200, title: '权限名称'}, {field: 'authority', title: '权限标识'}, {field: 'menuUrl', title: '菜单url'}, {field: 'orderNumber', width: 80, align: 'center', title: '排序号'}, { field: 'isMenu', width: 80, align: 'center', templet: function (d) { if (d.isMenu == 1) { return '<span class="layui-badge layui-bg-gray">按钮</span>'; } if (d.parentId == -1) { return '<span class="layui-badge layui-bg-blue">目录</span>'; } else { return '<span class="layui-badge-rim">菜单</span>'; } }, title: '类型' }, {templet: '#auth-state', width: 120, align: 'center', title: '操作'}]],
		done: function () { layer.closeAll('loading'); }
	});
	$('#btn-expand').click(function () { treetable.expandAll('#munu-table'); });
	$('#btn-fold').click(function () { treetable.foldAll('#munu-table'); });
	table.on('tool(munu-table)', function (obj) {
		var data = obj.data;
		var layEvent = obj.event;
		if (layEvent === 'del') { layer.msg('删除' + data.id); } else if (layEvent === 'edit') { layer.msg('修改' + data.id); }
	});
});
```

--------------------------------

### Initialize Layarea Province-City-District Picker

Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/area.html

This snippet initializes the layarea component on a specified HTML element. It uses the Layui module system to load dependencies and provides a callback function to handle the selection results.

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

    layarea.render({
        elem: '#area-picker',
        change: function (res) {
            console.log(res);
        }
    });
});
```

--------------------------------

### Initialize Paigusu Color Picker

Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/color-select.html

Initializes the Paigusu color picker on elements with the class 'paigusu'. It allows setting an initial color and provides a callback function to handle color selection events. The callback updates the text color of the target element with the selected hex color.

```javascript
$(function () {
    $('.paigusu').paigusu({
        color: '#1926dc',//初始色  支持两种配置方案
    }, function (event, obj) {
        console.log(event);
        console.log(obj);
        $(event).css('color', '#' + obj.hex)
    });
});
```

--------------------------------

### Initialize Paigusu Color Picker for Background and Input

Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/color-select.html

Initializes the Paigusu color picker on elements with the class 'test-select-color'. This configuration sets an initial color and uses the callback to update the background color of the target element and set the value of an input field with the name 'test_color' to the selected hex color.

```javascript
$(function () { $('.test-select-color').paigusu({ color: '#1aa094',//初始色 支持两种配置方案 }, function (event, obj) { console.log(event); console.log(obj); $(event).css('background-color', '#' + obj.hex); $('input[name="test_color"]') .val('#' + obj.hex); }); });
```

--------------------------------

### Data Statistics Display

Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/welcome-1.html

Demonstrates how to display real-time data statistics for different categories like users, products, and browsing activity. Each statistic shows a count and a description of the current category's total records.

```text
数据统计

实时

##### 用户统计

1234
====

当前分类总记录数

实时

##### 商品统计

1234
====

当前分类总记录数

实时

##### 浏览统计

1234
====

当前分类总记录数

实时
```

--------------------------------

### Implementing Layui Button Styles

Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/button.html

This snippet demonstrates the basic HTML structure for Layui buttons, including themes, sizes, and icon integration. It relies on the Layui CSS framework to apply styles based on specific class names.

```html
<button class="layui-btn">原始按钮</button>
<button class="layui-btn layui-btn-primary">默认按钮</button>
<button class="layui-btn layui-btn-normal">百搭按钮</button>
<button class="layui-btn layui-btn-warm">暖色按钮</button>
<button class="layui-btn layui-btn-danger">警告按钮</button>
<button class="layui-btn layui-btn-disabled">禁用按钮</button>
```

--------------------------------

### Handle Form Submission with Layui

Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/user-setting.html

This snippet demonstrates how to initialize the Layui form module and attach a submit listener to a button. It captures the form data as a JSON string, displays it in an alert, and closes the current tab upon confirmation.

```javascript
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;
  });
});
```

--------------------------------

### Create Data Management Page Template with Layui Mini

Source: https://context7.com/zhongshaofa/layuimini/llms.txt

This template demonstrates a standard admin page layout featuring a search form, a button toolbar, and a data table. It utilizes Layui's modular system to handle table rendering, search filtering, and iframe-based tab navigation for editing and adding records.

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据管理</title>
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索条件</legend>
            <form class="layui-form" lay-filter="searchForm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn" lay-submit lay-filter="search">搜索</button>
                    </div>
                </div>
            </form>
        </fieldset>
        <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
    </div>
</div>
<script src="../lib/layui-v2.6.3/layui.js"></script>
<script>
layui.use(['form', 'table', 'miniTab'], function () {
    var table = layui.table, form = layui.form, miniTab = layui.miniTab;
    table.render({
        elem: '#dataTable',
        url: '../api/table.json',
        cols: [[{type: 'checkbox'}, {field: 'id', title: 'ID'}, {field: 'username', title: '用户名'}]]
    });
    form.on('submit(search)', function (data) {
        table.reload('dataTable', {where: data.field, page: {curr: 1}});
        return false;
    });
});
</script>
</body>
</html>
```

--------------------------------

### Initialize Login Form and UI Interactions

Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/login-3.html

This script initializes the Layui form and jQuery components. It includes logic to break out of iframes if the page is loaded within one, toggles password visibility, and validates login form fields before submission.

```javascript
layui.use(['form','jquery'], function () { var $ = layui.jquery, form = layui.form, layer = layui.layer; if (top.location != self.location) top.location = self.location; $('.bind-password').on('click', function () { if ($(this).hasClass('icon-5')) { $(this).removeClass('icon-5'); $("input[name='password']").attr('type', 'password'); } else { $(this).addClass('icon-5'); $("input[name='password']").attr('type', 'text'); } }); $('.icon-nocheck').on('click', function () { if ($(this).hasClass('icon-check')) { $(this).removeClass('icon-check'); } else { $(this).addClass('icon-check'); } }); form.on('submit(login)', function (data) { data = data.field; if (data.username == '') { layer.msg('用户名不能为空'); return false; } if (data.password == '') { layer.msg('密码不能为空'); return false; } if (data.captcha == '') { layer.msg('验证码不能为空'); return false; } layer.msg('登录成功', function () { window.location = '../index.html'; }); return false; }); });
```

--------------------------------

### Initialize Font Awesome Icon Picker with iconPickerFa.render

Source: https://context7.com/zhongshaofa/layuimini/llms.txt

Renders a Font Awesome icon picker component. This component allows users to select icons from the Font Awesome library with features like pagination and search. It requires a binding element and optionally a path to the icon variable file. Callback functions are provided for icon selection and successful rendering.

```javascript
layui.use(['iconPickerFa', 'form'], function () {
    var iconPickerFa = layui.iconPickerFa,
        form = layui.form;

    // 初始化图标选择器
    iconPickerFa.render({
        elem: '#iconPicker',  // 绑定的input元素
        url: 'lib/font-awesome-4.7.0/less/variables.less',  // FA图标变量文件路径
        search: true,         // 是否开启搜索
        page: true,           // 是否开启分页
        limit: 12,            // 每页显示数量
        cellWidth: '43px',    // 图标格子宽度
        click: function (data) {
            // 选择回调
            console.log('选中的图标：', data.icon);
            // 输出: fa-home, fa-user, fa-cog 等
        },
        success: function (result) {
            // 渲染成功回调
            console.log('图标选择器初始化完成', result);
        }
    });

    // 动态设置选中图标
    iconPickerFa.checkIcon('iconPicker', 'fa-home');
});
```

--------------------------------

### ECharts Dashboard Visualization Implementation

Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/welcome-2.html

Initializes multiple ECharts instances including line charts, rose diagrams, bar charts, and complex datasets. It uses the Layui module system and includes window resize event handling for responsiveness.

```javascript
layui.use(['layer', 'echarts'], function () { var $ = layui.jquery, layer = layui.layer, echarts = layui.echarts; var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden'); var optionRecords = { title: { text: '指标名称-报表图' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, legend: { data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'] }, toolbox: { feature: { saveAsImage: {} } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] } ], yAxis: [ { type: 'value' } ], series: [ { name: '邮件营销', type: 'line', stack: '总量', areaStyle: {}, data: [120, 132, 101, 134, 90, 230, 210] }, { name: '联盟广告', type: 'line', areaStyle: {}, data: [220, 182, 191, 234, 290, 330, 310] }, { name: '视频广告', type: 'line', stack: '总量', areaStyle: {}, data: [150, 232, 201, 154, 190, 330, 410] }, { name: '直接访问', type: 'line', stack: '总量', areaStyle: {}, data: [320, 332, 301, 334, 390, 330, 320] }, { name: '搜索引擎', type: 'line', stack: '总量', label: { normal: { show: true, position: 'top' } }, areaStyle: {}, data: [820, 932, 901, 934, 1290, 1330, 1320] } ] }; echartsRecords.setOption(optionRecords); var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden'); var optionPies = { title: { text: '指标名称-玫瑰图', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, series: [ { name: '访问来源', type: 'pie', radius: '55%', center: ['50%', '60%'], roseType: 'radius', data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 368, name: '搜索引擎'} ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; echartsPies.setOption(optionPies); var echartsDataset = echarts.init(document.getElementById('echarts-dataset'), 'walden'); var optionDataset = { legend: {}, tooltip: {}, dataset: { dimensions: ['product', '2015', '2016', '2017'], source: [ {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7}, {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1}, {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5}, {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1} ] }, xAxis: {type: 'category'}, yAxis: {}, series: [ {type: 'bar'}, {type: 'bar'}, {type: 'bar'} ] }; echartsDataset.setOption(optionDataset); var echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden'); var optionMap = { legend: {}, tooltip: { trigger: 'axis', showContent: false }, dataset: { source: [ ['product', '2012', '2013', '2014', '2015', '2016', '2017'], ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7], ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1], ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5], ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1] ] }, xAxis: {type: 'category'}, yAxis: {gridIndex: 0}, grid: {top: '55%'}, series: [ {type: 'line', smooth: true, seriesLayoutBy: 'row'}, {type: 'line', smooth: true, seriesLayoutBy: 'row'}, {type: 'line', smooth: true, seriesLayoutBy: 'row'}, {type: 'line', smooth: true, seriesLayoutBy: 'row'}, { type: 'pie', id: 'pie', radius: '30%', center: ['50%', '25%'], label: { formatter: '{b}: {@2012} ({d}%)' }, encode: { itemName: 'product', value: '2012', tooltip: '2012' } } ] }; echartsMap.setOption(optionMap); window.onresize = function () { echartsRecords.resize(); } });
```

--------------------------------

### Initialize TableSelect Component

Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/table-select.html

Basic initialization of the TableSelect component. It requires defining the input element, the unique key for selection, and the table configuration.

```javascript
var tableSelect = layui.tableSelect;
tableSelect.render({
  elem: '#demo',
  checkedKey: 'id',
  searchKey: 'keyword',
  searchPlaceholder: '关键词搜索',
  height: '400',
  width: '900',
  table: {
    url: '',
    cols: [[]]
  },
  done: function (elem, data) {
    // Callback after selection
  }
});
```

--------------------------------

### Creating Layui Button Groups

Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/button.html

This snippet shows how to group multiple buttons together using the layui-btn-group class. It is useful for creating toolbars or related action sets.

```html
<div class="layui-btn-group">
  <button class="layui-btn">增加</button>
  <button class="layui-btn">编辑</button>
  <button class="layui-btn">删除</button>
</div>
```

--------------------------------

### Initialize zyupload Component for File Uploads

Source: https://github.com/zhongshaofa/layuimini/blob/v2/page/upload.html

This JavaScript code initializes the zyupload component for handling file uploads. It configures various aspects such as upload URL, file types, size limits, and user interaction options like drag-and-drop, cropping, and deletion. It also includes callback functions for handling events like file selection, deletion, success, failure, and completion of the upload process. The component relies on jQuery.

```javascript
$(function () {
    // Initialize the plugin
    $("#zyupload").zyUpload({
        width: "650px",                 // Width
        height: "400px",                 // Height
        itemWidth: "140px",                 // Width of file item
        itemHeight: "115px",                 // Height of file item
        url: "api/upload",  // Path to upload files
        fileType: ["jpg", "png", "txt", "js", "exe"],
        fileSize: 51200000,                // Size of files to upload
        multiple: true,                    // Whether multiple files can be uploaded
        dragDrop: true,                    // Whether to allow drag and drop file uploads
        tailor: true,                    // Whether to allow image cropping
        del: true,                    // Whether to allow file deletion
        finishDel: false,  				  // Whether to delete previews after upload is complete
        /* External callback interface */
        onSelect: function (selectFiles, allFiles) {    // Callback function for file selection. selectFile: currently selected file. allFiles: all files not yet uploaded.
            console.info("Currently selected files:");
            console.info(selectFiles);
        },
        onDelete: function (file, files) {              // Callback function for deleting a file. file: currently deleted file. files: files after deletion.
            console.info("Currently deleted file:");
            console.info(file.name);
        },
        onSuccess: function (file, response) {          // Callback function for successful file upload.
            console.info("This file uploaded successfully:");
            console.info(file.name);
            console.info("This file uploaded to server address:");
            console.info(response);
            $("#uploadInf").append("<p>Upload successful, file address is:" + response + "</p>");
        },
        onFailure: function (file, response) {          // Callback function for failed file upload.
            console.info("This file upload failed:");
            console.info(file.name);
        },
        onComplete: function (response) {           	  // Callback function for upload completion.
            console.info("File upload complete");
            console.info(response);
        }
    });
});
```
Tokens:
Raw