增加单页应用的layui-admin

single/res/modules/common.js

@@ -0,0 +1,36 @@
+/**
+ * common
+ */
+ 
+layui.define(function(exports){
+  var $ = layui.$
+  ,layer = layui.layer
+  ,laytpl = layui.laytpl
+  ,setter = layui.setter
+  ,view = layui.view
+  ,admin = layui.admin
+  
+  //公共业务的逻辑处理可以写在此处，切换任何页面都会执行
+  //……
+  
+  
+  
+  //退出
+  admin.events.logout = function(){
+    //执行退出接口
+    admin.req({
+      url: './res/json/user/logout.js'
+      ,type: 'get'
+      ,data: {}
+      ,done: function(res){ //这里要说明一下：done 是只有 response 的 code 正常才会执行。而 succese 则是只要 http 为 200 就会执行
+        
+        //清空本地记录的 token，并跳转到登入页
+        admin.exit();
+      }
+    });
+  };
+
+  
+  //对外暴露的接口
+  exports('common', {});
+});

single/res/modules/console.js

@@ -0,0 +1,324 @@
+/**
+ * console  
+ */
+
+layui.define(function(exports){
+  
+  /*
+    下面通过 layui.use 分段加载不同的模块，实现不同区域的同时渲染，从而保证视图的快速呈现
+  */
+  
+  
+  //区块轮播切换
+  layui.use(['admin', 'carousel'], function(){
+    var $ = layui.$
+    ,admin = layui.admin
+    ,carousel = layui.carousel
+    ,element = layui.element
+    ,device = layui.device();
+
+    //轮播切换
+    $('.layadmin-carousel').each(function(){
+      var othis = $(this);
+      carousel.render({
+        elem: this
+        ,width: '100%'
+        ,arrow: 'none'
+        ,interval: othis.data('interval')
+        ,autoplay: othis.data('autoplay') === true
+        ,trigger: (device.ios || device.android) ? 'click' : 'hover'
+        ,anim: othis.data('anim')
+      });
+    });
+    
+    element.render('progress');
+    
+  });
+
+  //数据概览
+  layui.use(['admin', 'carousel', 'echarts'], function(){
+    var $ = layui.$
+    ,admin = layui.admin
+    ,carousel = layui.carousel
+    ,echarts = layui.echarts;
+    
+    var echartsApp = [], options = [
+      //今日流量趋势
+      {
+        title: {
+          text: '今日流量趋势',
+          x: 'center',
+          textStyle: {
+            fontSize: 14
+          }
+        },
+        tooltip : {
+          trigger: 'axis'
+        },
+        legend: {
+          data:['','']
+        },
+        xAxis : [{
+          type : 'category',
+          boundaryGap : false,
+          data: ['06:00','06:30','07:00','07:30','08:00','08:30','09:00','09:30','10:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30']
+        }],
+        yAxis : [{
+          type : 'value'
+        }],
+        series : [{
+          name:'PV',
+          type:'line',
+          smooth:true,
+          itemStyle: {normal: {areaStyle: {type: 'default'}}},
+          data: [111,222,333,444,555,777,3333,33333,55555,88888,33333,3333,7777,11888,28888,38888,58888,42222,39999,28888,17777,9777,6555,5555,3333,2222,3111,6999,5888,2777,1777,999,888,777]
+        },{
+          name:'UV',
+          type:'line',
+          smooth:true,
+          itemStyle: {normal: {areaStyle: {type: 'default'}}},
+          data: [11,22,33,44,55,66,333,3333,5555,12312,3333,333,777,1188,2777,3888,7777,4222,3999,2888,1777,966,655,555,333,222,311,699,588,277,166,99,88,77]
+        }]
+      },
+      
+      /*
+      //访客浏览器分布
+      { 
+        title : {
+          text: '访客浏览器分布',
+          x: 'center',
+          textStyle: {
+            fontSize: 14
+          }
+        },
+        tooltip : {
+          trigger: 'item',
+          formatter: "{a} <br/>{b} : {c} ({d}%)"
+        },
+        legend: {
+          orient : 'vertical',
+          x : 'left',
+          data:['Chrome','Firefox','IE 8.0','Safari','其它浏览器']
+        },
+        series : [{
+          name:'访问来源',
+          type:'pie',
+          radius : '55%',
+          center: ['50%', '50%'],
+          data:[
+            {value:9052, name:'Chrome'},
+            {value:1610, name:'Firefox'},
+            {value:3200, name:'IE 8.0'},
+            {value:535, name:'Safari'},
+            {value:1700, name:'其它浏览器'}
+          ]
+        }]
+      },
+      */
+      
+      //新增的用户量
+      {
+        title: {
+          text: '最近一周新增的用户量',
+          x: 'center',
+          textStyle: {
+            fontSize: 14
+          }
+        },
+        tooltip : { //提示框
+          trigger: 'axis',
+          formatter: "{b}<br>新增用户：{c}"
+        },
+        xAxis : [{ //X轴
+          type : 'category',
+          data : ['11-07', '11-08', '11-09', '11-10', '11-11', '11-12', '11-13']
+        }],
+        yAxis : [{  //Y轴
+          type : 'value'
+        }],
+        series : [{ //内容
+          type: 'line',
+          data:[200, 300, 400, 610, 150, 270, 380],
+        }]
+      }
+    ]
+    ,elemDataView = $('#LAY-index-dataview').children('div')
+    ,renderDataView = function(index){
+      echartsApp[index] = echarts.init(elemDataView[index], layui.echartsTheme);
+      echartsApp[index].setOption(options[index]);
+      //window.onresize = echartsApp[index].resize;
+      admin.resize(function(){
+        echartsApp[index].resize();
+      });
+    };
+    
+    
+    //没找到DOM，终止执行
+    if(!elemDataView[0]) return;
+    
+    
+    
+    renderDataView(0);
+    
+    //触发数据概览轮播
+    var carouselIndex = 0;
+    carousel.on('change(LAY-index-dataview)', function(obj){
+      renderDataView(carouselIndex = obj.index);
+    });
+    
+    //触发侧边伸缩
+    layui.admin.on('side', function(){
+      setTimeout(function(){
+        renderDataView(carouselIndex);
+      }, 300);
+    });
+    
+    //触发路由
+    layui.admin.on('hash(tab)', function(){
+      layui.router().path.join('') || renderDataView(carouselIndex);
+    });
+  });
+  
+  //地图
+  layui.use(['carousel', 'echarts'], function(){
+    var $ = layui.$
+    ,carousel = layui.carousel
+    ,echarts = layui.echarts;
+    
+    var echartsApp = [], options = [
+      {
+        title : {
+          text: '访客地区分布',
+          subtext: '不完全统计'
+        },
+        tooltip : {
+          trigger: 'item'
+        },
+        dataRange: {
+          orient: 'horizontal',
+          min: 0,
+          max: 60000,
+          text:['高','低'],
+          splitNumber:0
+        },
+        series : [
+          { 
+            name: '访客地区分布',
+            type: 'map',
+            mapType: 'china',    
+            selectedMode : 'multiple',
+            itemStyle:{
+                normal:{label:{show:true}},
+                emphasis:{label:{show:true}}
+            },
+            data:[
+                {name:'西藏', value:60},
+                {name:'青海', value:167},
+                {name:'宁夏', value:210},
+                {name:'海南', value:252},
+                {name:'甘肃', value:502},
+                {name:'贵州', value:570},
+                {name:'新疆', value:661},
+                {name:'云南', value:8890},
+                {name:'重庆', value:10010},
+                {name:'吉林', value:5056},
+                {name:'山西', value:2123},
+                {name:'天津', value:9130},
+                {name:'江西', value:10170},
+                {name:'广西', value:6172},
+                {name:'陕西', value:9251},
+                {name:'黑龙江', value:5125},
+                {name:'内蒙古', value:1435},
+                {name:'安徽', value:9530},
+                {name:'北京', value:51919},
+                {name:'福建', value:3756},
+                {name:'上海', value:59190},
+                {name:'湖北', value:37109},
+                {name:'湖南', value:8966},
+                {name:'四川', value:31020},
+                {name:'辽宁', value:7222},
+                {name:'河北', value:3451},
+                {name:'河南', value:9693},
+                {name:'浙江', value:62310},
+                {name:'山东', value:39231},
+                {name:'江苏', value:35911},
+                {name:'广东', value:55891}
+            ]
+          }
+        ]
+      }
+    ]
+    ,elemDataView = $('#LAY-index-pagethree-home').children('div')
+    ,renderDataView = function(index){
+      echartsApp[index] = echarts.init(elemDataView[index], layui.echartsTheme);
+      echartsApp[index].setOption(options[index]);
+      window.onresize = echartsApp[index].resize;
+    }; 
+    //没找到DOM，终止执行
+    if(!elemDataView[0]) return;
+ 
+    renderDataView(0);  
+  });
+
+
+  //table
+  layui.use('table', function(){
+    var $ = layui.$
+    ,table = layui.table;
+    
+    //今日热搜
+    table.render({
+      elem: '#LAY-index-topSearch'
+      ,url: './res/json/console/top-search.js' //模拟接口
+      ,page: true
+      ,cols: [[
+        {type: 'numbers', fixed: 'left'}
+        ,{field: 'keywords', title: '关键词', minWidth: 300, templet: '<div><a href="https://www.baidu.com/s?wd={{ d.keywords }}" target="_blank" class="layui-table-link">{{ d.keywords }}</div>'}
+        ,{field: 'frequency', title: '搜索次数', minWidth: 120, sort: true}
+        ,{field: 'userNums', title: '用户数', sort: true}
+      ]]
+      ,skin: 'line'
+    });
+    
+    //今日热贴
+    table.render({
+      elem: '#LAY-index-topCard'
+      ,url: './res/json/console/top-card.js' //模拟接口
+      ,page: true
+      ,cellMinWidth: 120
+      ,cols: [[
+        {type: 'numbers', fixed: 'left'}
+        ,{field: 'title', title: '标题', minWidth: 300, templet: '<div><a href="{{ d.href }}" target="_blank" class="layui-table-link">{{ d.title }}</div>'}
+        ,{field: 'username', title: '发帖者'}
+        ,{field: 'channel', title: '类别'}
+        ,{field: 'crt', title: '点击率', sort: true}
+      ]]
+      ,skin: 'line'
+    });
+    
+    //项目进展
+    table.render({
+      elem: '#LAY-home-homepage-console'
+      ,url: './res/json/console/prograss.js' //模拟接口
+      ,cols: [[
+        {type: 'checkbox', fixed: 'left'}
+        ,{field: 'prograss', title: '任务'}
+        ,{field: 'time', title: '所需时间'}
+        ,{field: 'complete', title: '完成情况'
+          ,templet: function(d){
+            if(d.complete == '已完成'){
+              return '<del style="color: #16b777;">'+ d.complete +'</del>'
+            }else if(d.complete == '进行中'){
+              return '<span style="color: #FFB800;">'+ d.complete +'</span>'
+            }else{
+              return '<span style="color: #FF5722;">'+ d.complete +'</span>'
+            }
+          }
+        }
+      ]]
+      ,skin: 'line'
+    });
+  });
+  
+  exports('console', {})
+});

single/res/modules/contlist.js

@@ -0,0 +1,160 @@
+/**
+ * 内容系统 demo
+ */
+
+layui.define(['table', 'form'], function(exports){
+  var $ = layui.$
+  ,admin = layui.admin
+  ,view = layui.view
+  ,table = layui.table
+  ,form = layui.form;
+
+  //文章管理
+  table.render({
+    elem: '#LAY-app-content-list'
+    ,url: './res/json/content/list.js' //模拟接口
+    ,cols: [[
+      {type: 'checkbox', fixed: 'left'}
+      ,{field: 'id', width: 100, title: '文章ID', sort: true}
+      ,{field: 'label', title: '文章标签', minWidth: 100}
+      ,{field: 'title', title: '文章标题'}
+      ,{field: 'author', title: '作者'}
+      ,{field: 'uploadtime', title: '上传时间', sort: true}
+      ,{field: 'status', title: '发布状态', templet: '#buttonTpl', minWidth: 80, align: 'center'}
+      ,{title: '操作', minWidth: 150, align: 'center', fixed: 'right', toolbar: '#table-content-list'}
+    ]]
+    ,page: true
+    ,limit: 10
+    ,limits: [10, 15, 20, 25, 30]
+    ,text: '对不起，加载出现异常！'
+  });
+  
+  //工具条
+  table.on('tool(LAY-app-content-list)', function(obj){
+    var data = obj.data;
+    if(obj.event === 'del'){
+      layer.confirm('确定删除此文章？', function(index){
+        obj.del();
+        layer.close(index);
+      });
+    } else if(obj.event === 'edit'){
+      admin.popup({
+        title: '编辑文章'
+        ,area: ['550px', '550px']
+        ,id: 'LAY-popup-content-edit'
+        ,success: function(layero, index){
+          view(this.id).render('app/content/listform', data).done(function(){
+            form.render(null, 'layuiadmin-app-form-list');
+            
+            //提交
+            form.on('submit(layuiadmin-app-form-submit)', function(data){
+              var field = data.field; //获取提交的字段
+
+              //提交 Ajax 成功后，关闭当前弹层并重载表格
+              //$.ajax({});
+              layui.table.reload('LAY-app-content-list'); //重载表格
+              layer.close(index); //执行关闭 
+            });
+          });
+        }
+      });
+    }
+  });
+
+  //分类管理
+  table.render({
+    elem: '#LAY-app-content-tags'
+    ,url: './res/json/content/tags.js' //模拟接口
+    ,cols: [[
+      {type: 'numbers', fixed: 'left'}
+      ,{field: 'id', width: 100, title: 'ID', sort: true}
+      ,{field: 'tags', title: '分类名', minWidth: 100}
+      ,{title: '操作', width: 150, align: 'center', fixed: 'right', toolbar: '#layuiadmin-app-cont-tagsbar'}
+    ]]
+    ,text: '对不起，加载出现异常！'
+  });
+  
+  //工具条
+  table.on('tool(LAY-app-content-tags)', function(obj){
+    var data = obj.data;
+    if(obj.event === 'del'){
+      layer.confirm('确定删除此分类？', function(index){
+        obj.del();
+        layer.close(index);
+      });
+    } else if(obj.event === 'edit'){
+      admin.popup({
+        title: '编辑分类'
+        ,area: ['450px', '200px']
+        ,id: 'LAY-popup-content-tags'
+        ,success: function(layero, index){
+          view(this.id).render('app/content/tagsform', data).done(function(){
+            form.render(null, 'layuiadmin-form-tags');
+            
+            //提交
+            form.on('submit(layuiadmin-app-tags-submit)', function(data){
+              var field = data.field; //获取提交的字段
+
+              //提交 Ajax 成功后，关闭当前弹层并重载表格
+              //$.ajax({});
+              layui.table.reload('LAY-app-content-tags'); //重载表格
+              layer.close(index); //执行关闭 
+            });
+          });
+        }
+      });
+    }
+  });
+
+  //评论管理
+  table.render({
+    elem: '#LAY-app-content-comm'
+    ,url: './res/json/content/comment.js' //模拟接口
+    ,cols: [[
+      {type: 'checkbox', fixed: 'left'}
+      ,{field: 'id', width: 100, title: 'ID', sort: true}
+      ,{field: 'reviewers', title: '评论者', minWidth: 100}
+      ,{field: 'content', title: '评论内容', minWidth: 100}
+      ,{field: 'commtime', title: '评论时间', minWidth: 100, sort: true}
+      ,{title: '操作', width: 150, align: 'center', fixed: 'right', toolbar: '#table-content-com'}
+    ]]
+    ,page: true
+    ,limit: 10
+    ,limits: [10, 15, 20, 25, 30]
+    ,text: '对不起，加载出现异常！'
+  });
+  
+  //工具条
+  table.on('tool(LAY-app-content-comm)', function(obj){
+    var data = obj.data;
+    if(obj.event === 'del'){
+      layer.confirm('确定删除此条评论？', function(index){
+        obj.del();
+        layer.close(index);
+      });
+    } else if(obj.event === 'edit'){
+      admin.popup({
+        title: '编辑评论'
+        ,area: ['450px', '300px']
+        ,id: 'LAY-popup-content-comm'
+        ,success: function(layero, index){
+          view(this.id).render('app/content/contform', data).done(function(){
+            form.render(null, 'layuiadmin-form-comment');
+            
+            //提交
+            form.on('submit(layuiadmin-app-com-submit)', function(data){
+              var field = data.field; //获取提交的字段
+
+              //提交 Ajax 成功后，关闭当前弹层并重载表格
+              //$.ajax({});
+              layui.table.reload('LAY-app-content-comm'); //重载表格
+              layer.close(index); //执行关闭 
+            });
+          });
+        }
+      });
+    }
+  });
+
+  exports('contlist', {})
+});

single/res/modules/echartsTheme.js

@@ -0,0 +1,262 @@
+/**
+ * Set echarts theme
+ */
+
+
+layui.define(function(exports) {
+  exports('echartsTheme', {
+    // 默认色板
+    color: [
+      '#16baaa','#1E9FFF','#16b777','#FFB980','#D87A80',
+      '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
+      '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
+      '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
+    ],
+
+    // 图表标题
+    title: {
+      textStyle: {
+        fontWeight: 'normal',
+        color: '#5F5F5F'      // 主标题文字颜色
+      }
+    },
+    
+    // 值域
+    dataRange: {
+      itemWidth: 15,
+      color: ['#16baaa','#e0ffff']
+    },
+
+    // 工具箱
+    toolbox: {
+      color : ['#1e90ff', '#1e90ff', '#1e90ff', '#1e90ff'],
+      effectiveColor : '#ff4500'
+    },
+
+    // 提示框
+    tooltip: {
+      backgroundColor: 'rgba(50,50,50,0.5)',   // 提示背景颜色，默认为透明度为0.7的黑色
+      axisPointer : {      // 坐标轴指示器，坐标轴触发有效
+        type : 'line',     // 默认为直线，可选为：'line' | 'shadow'
+        lineStyle : {      // 直线指示器样式设置
+          color: '#16baaa'
+        },
+        crossStyle: {
+          color: '#008acd'
+        },
+        shadowStyle : {           // 阴影指示器样式设置
+          color: 'rgba(200,200,200,0.2)'
+        }
+      }
+    },
+
+    // 区域缩放控制器
+    dataZoom: {
+      dataBackgroundColor: '#efefff',      // 数据背景颜色
+      fillerColor: 'rgba(182,162,222,0.2)',   // 填充颜色
+      handleColor: '#008acd'  // 手柄颜色
+    },
+
+    // 网格
+    grid: {
+      borderColor: '#eee'
+    },
+
+    // 类目轴 - X轴
+    categoryAxis: {
+      axisLine: {      // 坐标轴线
+        lineStyle: {     // 属性lineStyle控制线条样式
+          color: '#16baaa'
+        }
+      },
+      axisTick: { //小标记
+        show: false
+      },
+      splitLine: {       // 分隔线
+        lineStyle: {     // 属性lineStyle（详见lineStyle）控制线条样式
+          color: ['#eee']
+        }
+      }
+    },
+
+    // 数值型坐标轴默认参数 - Y轴
+    valueAxis: {
+      axisLine: {      // 坐标轴线
+        lineStyle: {     // 属性lineStyle控制线条样式
+          color: '#16baaa'
+        }
+      },
+      splitArea : {
+        show : true,
+        areaStyle : {
+          color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)']
+        }
+      },
+      splitLine: {       // 分隔线
+        lineStyle: {     // 属性lineStyle（详见lineStyle）控制线条样式
+          color: ['#eee']
+        }
+      }
+    },
+
+    polar : {
+      axisLine: {      // 坐标轴线
+        lineStyle: {     // 属性lineStyle控制线条样式
+          color: '#ddd'
+        }
+      },
+      splitArea : {
+        show : true,
+        areaStyle : {
+          color: ['rgba(250,250,250,0.2)','rgba(200,200,200,0.2)']
+        }
+      },
+      splitLine : {
+        lineStyle : {
+          color : '#ddd'
+        }
+      }
+    },
+
+    timeline : {
+      lineStyle : {
+        color : '#16baaa'
+      },
+      controlStyle : {
+        normal : { color : '#16baaa'},
+        emphasis : { color : '#16baaa'}
+      },
+      symbol : 'emptyCircle',
+      symbolSize : 3
+    },
+
+    // 柱形图默认参数
+    bar: {
+      itemStyle: {
+        normal: {
+          barBorderRadius: 2
+        },
+        emphasis: {
+          barBorderRadius: 2
+        }
+      }
+    },
+
+    // 折线图默认参数
+    line: {
+      smooth : true,
+      symbol: 'emptyCircle',  // 拐点图形类型
+      symbolSize: 3       // 拐点图形大小
+    },
+    
+    // K线图默认参数
+    k: {
+      itemStyle: {
+        normal: {
+          color: '#d87a80',     // 阳线填充颜色
+          color0: '#2ec7c9',    // 阴线填充颜色
+          lineStyle: {
+            color: '#d87a80',   // 阳线边框颜色
+            color0: '#2ec7c9'   // 阴线边框颜色
+          }
+        }
+      }
+    },
+    
+    // 散点图默认参数
+    scatter: {
+      symbol: 'circle',  // 图形类型
+      symbolSize: 4    // 图形大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
+    },
+
+    // 雷达图默认参数
+    radar : {
+      symbol: 'emptyCircle',  // 图形类型
+      symbolSize:3
+      //symbol: null,     // 拐点图形类型
+      //symbolRotate : null,  // 图形旋转控制
+    },
+
+    map: {
+      itemStyle: {
+        normal: {
+          areaStyle: {
+            color: '#ddd'
+          },
+          label: {
+            textStyle: {
+              color: '#d87a80'
+            }
+          }
+        },
+        emphasis: {         // 也是选中样式
+          areaStyle: {
+            color: '#fe994e'
+          }
+        }
+      }
+    },
+    
+    force : {
+      itemStyle: {
+        normal: {
+          linkStyle : {
+            color : '#1e90ff'
+          }
+        }
+      }
+    },
+
+    chord : {
+      itemStyle : {
+        normal : {
+          borderWidth: 1,
+          borderColor: 'rgba(128, 128, 128, 0.5)',
+          chordStyle : {
+            lineStyle : {
+              color : 'rgba(128, 128, 128, 0.5)'
+            }
+          }
+        },
+        emphasis : {
+          borderWidth: 1,
+          borderColor: 'rgba(128, 128, 128, 0.5)',
+          chordStyle : {
+            lineStyle : {
+              color : 'rgba(128, 128, 128, 0.5)'
+            }
+          }
+        }
+      }
+    },
+
+    gauge : {
+      axisLine: {      // 坐标轴线
+        lineStyle: {     // 属性lineStyle控制线条样式
+          color: [[0.2, '#2ec7c9'],[0.8, '#5ab1ef'],[1, '#d87a80']], 
+          width: 10
+        }
+      },
+      axisTick: {      // 坐标轴小标记
+        splitNumber: 10,   // 每份split细分多少段
+        length :15,    // 属性length控制线长
+        lineStyle: {     // 属性lineStyle控制线条样式
+          color: 'auto'
+        }
+      },
+      splitLine: {       // 分隔线
+        length :22,     // 属性length控制线长
+        lineStyle: {     // 属性lineStyle（详见lineStyle）控制线条样式
+          color: 'auto'
+        }
+      },
+      pointer : {
+        width : 5
+      }
+    },
+    
+    textStyle: {
+      fontFamily: '微软雅黑, Arial, Verdana, sans-serif'
+    }
+  });
+});

single/res/modules/forum.js

@@ -0,0 +1,120 @@
+/**
+ * forum demo
+ */
+
+
+layui.define(['table', 'form'], function(exports){
+  var $ = layui.$
+  ,admin = layui.admin
+  ,view = layui.view
+  ,table = layui.table
+  ,form = layui.form;
+
+  //帖子管理
+  table.render({
+    elem: '#LAY-app-forum-list'
+    ,url: './res/json/forum/list.js' //模拟接口
+    ,cols: [[
+      {type: 'checkbox', fixed: 'left'}
+      ,{field: 'id', width: 100, title: 'ID', sort: true}
+      ,{field: 'poster', title: '发帖人'}
+      ,{field: 'avatar', title: '头像', width: 100, templet: '#imgTpl'}
+      ,{field: 'content', title: '发帖内容'}
+      ,{field: 'posttime', title: '发帖时间', sort: true}
+      ,{field: 'top', title: '置顶', templet: '#buttonTpl', minWidth: 80, align: 'center'}
+      ,{title: '操作', width: 150, align: 'center', fixed: 'right', toolbar: '#table-forum-list'}
+    ]]
+    ,page: true
+    ,limit: 10
+    ,limits: [10, 15, 20, 25, 30]
+    ,text: '对不起，加载出现异常！'
+  });
+  
+  //工具条
+  table.on('tool(LAY-app-forum-list)', function(obj){
+    var data = obj.data;
+    if(obj.event === 'del'){
+      layer.confirm('确定删除此条帖子？', function(index){
+        obj.del();
+        layer.close(index);
+      });
+    } else if(obj.event === 'edit'){
+      admin.popup({
+        title: '编辑帖子'
+        ,area: ['550px', '450px']
+        ,id: 'LAY-popup-forum-edit'
+        ,resize: false
+        ,success: function(layero, index){
+          view(this.id).render('app/forum/listform', data).done(function(){
+            form.render(null, 'layuiadmin-form-list');
+            
+            //提交
+            form.on('submit(layuiadmin-app-forum-submit)', function(data){
+              var field = data.field; //获取提交的字段
+
+              //提交 Ajax 成功后，关闭当前弹层并重载表格
+              //$.ajax({});
+              layui.table.reload('LAY-app-forum-list'); //重载表格
+              layer.close(index); //执行关闭 
+            });
+          });
+        }
+      });
+    }
+  });
+
+  //回帖管理
+  table.render({
+    elem: '#LAY-app-forumreply-list'
+    ,url: './res/json/forum/replys.js' //模拟接口
+    ,cols: [[
+      {type: 'checkbox', fixed: 'left'}
+      ,{field: 'id', width: 100, title: 'ID', sort: true}
+      ,{field: 'replyer', title: '回帖人'}
+      ,{field: 'cardid', title: '回帖ID', sort: true}
+      ,{field: 'avatar', title: '头像', width: 100, templet: '#imgTpl'}
+      ,{field: 'content', title: '回帖内容', width: 200}
+      ,{field: 'replytime', title: '回帖时间', sort: true}
+      ,{title: '操作', width: 150, align: 'center', fixed: 'right', toolbar: '#table-forum-replys'}
+    ]]
+    ,page: true
+    ,limit: 10
+    ,limits: [10, 15, 20, 25, 30]
+    ,text: '对不起，加载出现异常！'
+  });
+  
+  //工具条
+  table.on('tool(LAY-app-forumreply-list)', function(obj){
+    var data = obj.data;
+    if(obj.event === 'del'){
+      layer.confirm('确定删除此条评论？', function(index){
+        obj.del();
+        layer.close(index);
+      });
+    } else if(obj.event === 'edit'){
+      admin.popup({
+        title: '编辑回帖'
+        ,area: ['550px', '400px']
+        ,id: 'LAY-popup-forum-edit'
+        ,resize: false
+        ,success: function(layero, index){
+          view(this.id).render('app/forum/replysform', data).done(function(){
+            form.render(null, 'layuiadmin-app-forum-reply');
+            
+            //提交
+            form.on('submit(layuiadmin-app-forumreply-submit)', function(data){
+              var field = data.field; //获取提交的字段
+
+              //提交 Ajax 成功后，关闭当前弹层并重载表格
+              //$.ajax({});
+              layui.table.reload('LAY-app-forumreply-list'); //重载表格
+              layer.close(index); //执行关闭 
+            });
+          });
+        }
+      });
+    }
+  });
+  
+  exports('forum', {})
+});

single/res/modules/layim/res/html/getmsg.json

@@ -0,0 +1,72 @@
+{
+    "code": 0,
+    "pages": 1,
+    "data": [
+        {
+            "id": 76,
+            "content": "申请添加你为好友",
+            "uid": 168,
+            "from": 166488,
+            "from_group": 0,
+            "type": 1,
+            "remark": "test1",
+            "href": null,
+            "read": 1,
+            "time": "刚刚",
+            "user": {
+                "id": 166488,
+                "avatar": "http://q.qlogo.cn/qqapp/101235792/B704597964F9BD0DB648292D1B09F7E8/100",
+                "username": "测试A",
+                "sign": null
+            }
+        },
+        {
+            "id": 75,
+            "content": "申请添加你为好友",
+            "uid": 168,
+            "from": 347592,
+            "from_group": 0,
+            "type": 1,
+            "remark": "test2",
+            "href": null,
+            "read": 1,
+            "time": "刚刚",
+            "user": {
+                "id": 347592,
+                "avatar": "http://q.qlogo.cn/qqapp/101235792/B78751375E0531675B1272AD994BA875/100",
+                "username": "测试B",
+                "sign": null
+            }
+        },
+        {
+            "id": 62,
+            "content": "测试C 拒绝了你的好友申请",
+            "uid": 168,
+            "from": null,
+            "from_group": null,
+            "type": 1,
+            "remark": null,
+            "href": null,
+            "read": 1,
+            "time": "10天前",
+            "user": {
+                "id": null
+            }
+        },
+        {
+            "id": 60,
+            "content": "测试D 已经同意你的好友申请",
+            "uid": 168,
+            "from": null,
+            "from_group": null,
+            "type": 1,
+            "remark": null,
+            "href": null,
+            "read": 1,
+            "time": "10天前",
+            "user": {
+                "id": null
+            }
+        }
+    ]
+}

single/res/modules/layim/res/html/msgbox.html

@@ -0,0 +1,220 @@
+ 
+ 
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<title>消息盒子</title>
+
+<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
+<style>
+.layim-msgbox{margin: 15px;}
+.layim-msgbox li{position: relative; margin-bottom: 10px; padding: 0 130px 10px 60px; padding-bottom: 10px; line-height: 22px; border-bottom: 1px dotted #e2e2e2;}
+.layim-msgbox .layim-msgbox-tips{margin: 0; padding: 10px 0; border: none; text-align: center; color: #999;}
+.layim-msgbox .layim-msgbox-system{padding: 0 10px 10px 10px;}
+.layim-msgbox li p span{padding-left: 5px; color: #999;}
+.layim-msgbox li p em{font-style: normal; color: #FF5722;}
+
+.layim-msgbox-avatar{position: absolute; left: 0; top: 0; width: 50px; height: 50px;}
+.layim-msgbox-user{padding-top: 5px;}
+.layim-msgbox-content{margin-top: 3px;}
+.layim-msgbox .layui-btn-small{padding: 0 15px; margin-left: 5px;}
+.layim-msgbox-btn{position: absolute; right: 0; top: 12px; color: #999;}
+</style>
+</head>
+<body>
+
+<ul class="layim-msgbox" id="LAY_view"></ul>
+
+<div style="margin: 0 15px;">
+  <blockquote class="layui-elem-quote">
+    注意：该页面为 msgbox 参数指向的自定义页面。
+    <br> 此页为消息盒子的模拟数据，实际使用时请进行相应修改。
+  </blockquote>
+</div>
+
+<textarea title="消息模版" id="LAY_tpl" style="display:none;">
+{{# layui.each(d.data, function(index, item){
+  if(item.from){ }}
+    <li data-uid="{{ item.from }}" data-fromGroup="{{ item.from_group }}">
+      <a href="/u/{{ item.from }}/" target="_blank">
+        <img src="{{ item.user.avatar }}" class="layui-circle layim-msgbox-avatar">
+      </a>
+      <p class="layim-msgbox-user">
+        <a href="/u/{{ item.from }}/" target="_blank">{{ item.user.username||'' }}</a>
+        <span>{{ item.time }}</span>
+      </p>
+      <p class="layim-msgbox-content">
+        {{ item.content }} 
+        <span>{{ item.remark ? '附言: '+item.remark : '' }}</span>
+      </p>
+      <p class="layim-msgbox-btn">
+        <button class="layui-btn layui-btn-small" data-type="agree">同意</button>
+        <button class="layui-btn layui-btn-small layui-btn-primary" data-type="refuse">拒绝</button>
+      </p>
+    </li>
+  {{# } else { }}
+    <li class="layim-msgbox-system">
+      <p><em>系统：</em>{{ item.content }}<span>{{ item.time }}</span></p>
+    </li>
+  {{# }
+}); }}
+</textarea>
+
+<!-- 
+上述模版采用了 laytpl 语法
+-->
+
+
+<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
+<script>
+layui.config({
+  layimPath: '../../' //配置 layim.js 所在目录
+  ,layimResPath: '../' //layim 资源文件所在目录
+}).extend({
+  layim: layui.cache.layimPath + 'layim' //配置 layim 组件所在的路径
+}).use(['layim', 'flow'], function(){
+  var layim = layui.layim
+  ,layer = layui.layer
+  ,laytpl = layui.laytpl
+  ,$ = layui.jquery
+  ,flow = layui.flow;
+
+  var cache = {}; //用于临时记录请求到的数据
+
+  //请求消息
+  var renderMsg = function(page, callback){
+    
+    //实际部署时，请将下述 getmsg.json 改为你的接口地址
+    
+    $.get('getmsg.json', {
+      page: page || 1
+    }, function(res){
+      if(res.code != 0){
+        return layer.msg(res.msg);
+      }
+
+      //记录来源用户信息
+      layui.each(res.data, function(index, item){
+        cache[item.from] = item.user;
+      });
+
+      callback && callback(res.data, res.pages);
+    });
+  };
+
+  //消息信息流
+  flow.load({
+    elem: '#LAY_view' //流加载容器
+    ,isAuto: false
+    ,end: '<li class="layim-msgbox-tips">暂无更多新消息</li>'
+    ,done: function(page, next){ //加载下一页
+      renderMsg(page, function(data, pages){
+        var html = laytpl(LAY_tpl.value).render({
+          data: data
+          ,page: page
+        });
+        next(html, page < pages);
+      });
+    }
+  });
+
+  //打开页面即把消息标记为已读
+  /*
+  $.post('/message/read', {
+    type: 1
+  });
+  */
+
+  //操作
+  var active = {
+    //同意
+    agree: function(othis){
+      var li = othis.parents('li')
+      ,uid = li.data('uid')
+      ,from_group = li.data('fromGroup')
+      ,user = cache[uid];
+
+      //选择分组
+      parent.layui.layim.setFriendGroup({
+        type: 'friend'
+        ,username: user.username
+        ,avatar: user.avatar
+        ,group: parent.layui.layim.cache().friend //获取好友分组数据
+        ,submit: function(group, index){
+          
+          //将好友追加到主面板
+          parent.layui.layim.addList({
+            type: 'friend'
+            ,avatar: user.avatar //好友头像
+            ,username: user.username //好友昵称
+            ,groupid: group //所在的分组id
+            ,id: uid //好友ID
+            ,sign: user.sign //好友签名
+          });
+          parent.layer.close(index);
+          othis.parent().html('已同意');
+        
+        
+          //实际部署时，请开启下述注释，并改成你的接口地址
+          /*
+          $.post('/im/agreeFriend', {
+            uid: uid //对方用户ID
+            ,from_group: from_group //对方设定的好友分组
+            ,group: group //我设定的好友分组
+          }, function(res){
+            if(res.code != 0){
+              return layer.msg(res.msg);
+            }
+
+            //将好友追加到主面板
+            parent.layui.layim.addList({
+              type: 'friend'
+              ,avatar: user.avatar //好友头像
+              ,username: user.username //好友昵称
+              ,groupid: group //所在的分组id
+              ,id: uid //好友ID
+              ,sign: user.sign //好友签名
+            });
+            parent.layer.close(index);
+            othis.parent().html('已同意');
+          });
+          */
+          
+        }
+      });
+    }
+
+    //拒绝
+    ,refuse: function(othis){
+      var li = othis.parents('li')
+      ,uid = li.data('uid');
+
+      layer.confirm('确定拒绝吗？', function(index){
+        layer.close(index);
+        othis.parent().html('<em>已拒绝</em>');
+        
+        /*
+        $.post('/im/refuseFriend', {
+          uid: uid //对方用户ID
+        }, function(res){
+          if(res.code != 0){
+            return layer.msg(res.msg);
+          }
+          layer.close(index);
+          othis.parent().html('<em>已拒绝</em>');
+        });
+        */
+      });
+    }
+  };
+
+  $('body').on('click', '.layui-btn', function(){
+    var othis = $(this), type = othis.data('type');
+    active[type] ? active[type].call(this, othis) : '';
+  });
+});
+</script>
+</body>
+</html>

single/res/modules/sample.js

@@ -0,0 +1,293 @@
+/**
+ * console homepage
+ */
+
+layui.define(function(exports){
+  var admin = layui.admin;
+  
+  //区块轮播切换
+  layui.use(['admin', 'carousel'], function(){
+    var $ = layui.$
+    ,admin = layui.admin
+    ,carousel = layui.carousel
+    ,element = layui.element
+    ,device = layui.device();
+
+    //轮播切换
+    $('.layadmin-carousel').each(function(){
+      var othis = $(this);
+      carousel.render({
+        elem: this
+        ,width: '100%'
+        ,arrow: 'none'
+        ,interval: othis.data('interval')
+        ,autoplay: othis.data('autoplay') === true
+        ,trigger: (device.ios || device.android) ? 'click' : 'hover'
+        ,anim: othis.data('anim')
+      });
+    });
+    
+    element.render('progress');
+    
+  });
+
+  //八卦新闻
+  layui.use(['carousel', 'echarts'], function(){
+    var $ = layui.$
+    ,carousel = layui.carousel
+    ,echarts = layui.echarts;
+    
+    var echartsApp = [], options = [
+      {
+        title : {
+          subtext: '完全实况球员数据',
+          textStyle: {
+            fontSize: 14
+          }
+        },
+        tooltip : {
+          trigger: 'axis'
+        },
+        legend: {
+          x : 'left',
+          data:['罗纳尔多','舍普琴科']
+        },
+        polar : [
+          {
+            indicator : [
+              {text : '进攻', max  : 100},
+              {text : '防守', max  : 100},
+              {text : '体能', max  : 100},
+              {text : '速度', max  : 100},
+              {text : '力量', max  : 100},
+              {text : '技巧', max  : 100}
+            ],
+            radius : 130
+          }
+        ],
+        series : [
+          {
+            type: 'radar',
+            center : ['50%', '50%'], 
+            itemStyle: {
+              normal: {
+                areaStyle: {
+                  type: 'default'
+                }
+              }
+            },
+            data:[
+              {value : [97, 42, 88, 94, 90, 86], name : '舍普琴科'},
+              {value : [97, 32, 74, 95, 88, 92], name : '罗纳尔多'}
+            ]
+          }
+        ]
+      }
+    ]
+    ,elemDataView = $('#LAY-index-pageone').children('div')
+    ,renderDataView = function(index){
+      echartsApp[index] = echarts.init(elemDataView[index], layui.echartsTheme);
+      echartsApp[index].setOption(options[index]);
+      window.onresize = echartsApp[index].resize;
+    };   
+    //没找到DOM，终止执行
+    if(!elemDataView[0]) return;
+ 
+    renderDataView(0); 
+  });
+
+  //访问量
+  layui.use(['carousel', 'echarts'], function(){
+    var $ = layui.$
+    ,carousel = layui.carousel
+    ,echarts = layui.echarts;
+    
+    var echartsApp = [], options = [
+      {
+        tooltip : {
+          trigger: 'axis'
+        },
+        calculable : true,
+        legend: {
+          data:['访问量','下载量','平均访问量']
+        },
+        
+        xAxis : [
+          {
+            type : 'category',
+            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
+          }
+        ],
+        yAxis : [
+          {
+            type : 'value',
+            name : '访问量',
+            axisLabel : {
+              formatter: '{value} 万'
+            }
+          },
+          {
+            type : 'value',
+            name : '下载量',
+            axisLabel : {
+                formatter: '{value} 万'
+            }
+          }
+        ],
+        series : [
+          {
+            name:'访问量',
+            type:'line',
+            data:[900, 850, 950, 1000, 1100, 1050, 1000, 1150, 1250, 1370, 1250, 1100]
+          },
+          {
+            name:'下载量',
+            type:'line',
+            yAxisIndex: 1,
+            data:[850, 850, 800, 950, 1000, 950, 950, 1150, 1100, 1240, 1000, 950]
+          },
+          {
+            name:'平均访问量',
+            type:'line',
+            data:[870, 850, 850, 950, 1050, 1000, 980, 1150, 1000, 1300, 1150, 1000]
+          }
+        ]
+      }
+    ]
+    ,elemDataView = $('#LAY-index-pagetwo').children('div')
+    ,renderDataView = function(index){
+      echartsApp[index] = echarts.init(elemDataView[index], layui.echartsTheme);
+      echartsApp[index].setOption(options[index]);
+      window.onresize = echartsApp[index].resize;
+    };
+    //没找到DOM，终止执行
+    if(!elemDataView[0]) return;
+    renderDataView(0);
+    
+  });
+
+  //地图
+  layui.use(['carousel', 'echarts'], function(){
+    var $ = layui.$
+    ,carousel = layui.carousel
+    ,echarts = layui.echarts;
+    
+    var echartsApp = [], options = [
+      {
+        title : {
+          text: '访客地区分布',
+          subtext: '不完全统计'
+        },
+        tooltip : {
+          trigger: 'item'
+        },
+        dataRange: {
+          orient: 'horizontal',
+          min: 0,
+          max: 60000,
+          text:['高','低'],
+          splitNumber:0
+        },
+        series : [
+          { 
+            name: '访客地区分布',
+            type: 'map',
+            mapType: 'china',    
+            selectedMode : 'multiple',
+            itemStyle:{
+                normal:{label:{show:true}},
+                emphasis:{label:{show:true}}
+            },
+            data:[
+                {name:'西藏', value:60},
+                {name:'青海', value:167},
+                {name:'宁夏', value:210},
+                {name:'海南', value:252},
+                {name:'甘肃', value:502},
+                {name:'贵州', value:570},
+                {name:'新疆', value:661},
+                {name:'云南', value:8890},
+                {name:'重庆', value:10010},
+                {name:'吉林', value:5056},
+                {name:'山西', value:2123},
+                {name:'天津', value:9130},
+                {name:'江西', value:10170},
+                {name:'广西', value:6172},
+                {name:'陕西', value:9251},
+                {name:'黑龙江', value:5125},
+                {name:'内蒙古', value:1435},
+                {name:'安徽', value:9530},
+                {name:'北京', value:51919},
+                {name:'福建', value:3756},
+                {name:'上海', value:59190},
+                {name:'湖北', value:37109},
+                {name:'湖南', value:8966},
+                {name:'四川', value:31020},
+                {name:'辽宁', value:7222},
+                {name:'河北', value:3451},
+                {name:'河南', value:9693},
+                {name:'浙江', value:62310},
+                {name:'山东', value:39231},
+                {name:'江苏', value:35911},
+                {name:'广东', value:55891}
+            ]
+          }
+        ]
+      }
+    ]
+    ,elemDataView = $('#LAY-index-pagethree').children('div')
+    ,renderDataView = function(index){
+      echartsApp[index] = echarts.init(elemDataView[index], layui.echartsTheme);
+      echartsApp[index].setOption(options[index]);
+      window.onresize = echartsApp[index].resize;
+    }; 
+    //没找到DOM，终止执行
+    if(!elemDataView[0]) return;
+ 
+    renderDataView(0);  
+  });
+
+  //项目进展
+  layui.use('table', function(){
+    var $ = layui.$
+    ,table = layui.table;
+    
+    table.render({
+      elem: '#LAY-home-homepage2'
+      ,url: './res/json/console/prograss.js' //模拟接口
+      ,cols: [[
+        {type: 'checkbox', fixed: 'left'}
+        ,{field: 'prograss', title: '任务'}
+        ,{field: 'time', title: '所需时间'}
+        ,{field: 'complete', title: '完成情况'
+          ,templet: function(d){
+            if(d.complete == '已完成'){
+              return '<del style="color: #16b777;">'+ d.complete +'</del>'
+            }else if(d.complete == '进行中'){
+              return '<span style="color: #FFB800;">'+ d.complete +'</span>'
+            }else{
+              return '<span style="color: #FF5722;">'+ d.complete +'</span>'
+            }
+          }
+        }
+      ]]
+      ,skin: 'line'
+    });
+  });
+  
+  //回复留言
+  admin.events.replyNote = function(othis){
+    var nid = othis.data('id');
+    layer.prompt({
+      title: '回复留言 ID:'+ nid
+      ,formType: 2
+    }, function(value, index){
+      //这里可以请求 Ajax
+      //…
+      layer.msg('得到：'+ value);
+      layer.close(index);
+    });
+  };
+
+  exports('sample', {})
+});

single/res/modules/set.js

@@ -0,0 +1,152 @@
+/**
+ * set    
+ */
+ 
+layui.define(['form', 'upload'], function(exports){
+  var $ = layui.$
+  ,layer = layui.layer
+  ,laytpl = layui.laytpl
+  ,setter = layui.setter
+  ,view = layui.view
+  ,admin = layui.admin
+  ,form = layui.form
+  ,upload = layui.upload;
+
+  var $body = $('body');
+  
+  form.render();
+  
+  //自定义验证
+  form.verify({
+    nickname: function(value, item){ //value：表单的值、item：表单的DOM对象
+      if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
+        return '用户名不能有特殊字符';
+      }
+      if(/(^\_)|(\__)|(\_+$)/.test(value)){
+        return '用户名首尾不能出现下划线\'_\'';
+      }
+      if(/^\d+\d+\d$/.test(value)){
+        return '用户名不能全为数字';
+      }
+    }
+    
+    //我们既支持上述函数式的方式，也支持下述数组的形式
+    //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
+    ,pass: [
+      /^[\S]{6,12}$/
+      ,'密码必须6到12位，且不能出现空格'
+    ]
+    
+    //确认密码
+    ,repass: function(value){
+      if(value !== $('#LAY_password').val()){
+        return '两次密码输入不一致';
+      }
+    }
+  });
+  
+  //网站设置
+  form.on('submit(set_website)', function(obj){
+    layer.alert(layui.util.escape(JSON.stringify(obj.field)));
+    
+    //提交修改
+    /*
+    admin.req({
+      url: ''
+      ,data: obj.field
+      ,success: function(){
+        
+      }
+    });
+    */
+    return false;
+  });
+  
+  //邮件服务
+  form.on('submit(set_system_email)', function(obj){
+    layer.alert(layui.util.escape(JSON.stringify(obj.field)));
+    
+    //提交修改
+    /*
+    admin.req({
+      url: ''
+      ,data: obj.field
+      ,success: function(){
+        
+      }
+    });
+    */
+    return false;
+  });
+  
+  
+  //设置我的资料
+  form.on('submit(setmyinfo)', function(obj){
+    layer.alert(layui.util.escape(JSON.stringify(obj.field)));
+    
+    //提交修改
+    /*
+    admin.req({
+      url: ''
+      ,data: obj.field
+      ,success: function(){
+        
+      }
+    });
+    */
+    return false;
+  });
+
+  //上传头像
+  var avatarSrc = $('#LAY_avatarSrc');
+  upload.render({
+    url: '/api/upload/'
+    ,elem: '#LAY_avatarUpload'
+    ,done: function(res){
+      if(res.status == 0){
+        avatarSrc.val(res.url);
+      } else {
+        layer.msg(res.msg, {icon: 5});
+      }
+    }
+  });
+  
+  //查看头像
+  admin.events.avartatPreview = function(othis){
+    var src = avatarSrc.val();
+    layer.photos({
+      photos: {
+        "title": "查看头像" //相册标题
+        ,"data": [{
+          "src": src //原图地址
+        }]
+      }
+      ,shade: 0.01
+      ,closeBtn: 1
+      ,anim: 5
+    });
+  };
+  
+  
+  // 设置密码
+  form.on('submit(setmypass)', function(obj){
+    var field = obj.field; // 获得表单字段
+
+    layer.msg('ok');
+    
+    // 提交修改
+    /*
+    admin.req({
+      url: ''
+      ,data: obj.field
+      ,success: function(){
+        
+      }
+    });
+    */
+    return false;
+  });
+  
+  // 输出接口
+  exports('set', {});
+});

single/res/modules/user.js

@@ -0,0 +1,47 @@
+/**
+ * user demo
+ */
+ 
+layui.define('form', function(exports){
+  var $ = layui.$
+  ,layer = layui.layer
+  ,laytpl = layui.laytpl
+  ,setter = layui.setter
+  ,view = layui.view
+  ,admin = layui.admin
+  ,form = layui.form;
+
+  var $body = $('body');
+  
+  //自定义验证
+  form.verify({
+    nickname: function(value, item){ //value：表单的值、item：表单的DOM对象
+      if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
+        return '用户名不能有特殊字符';
+      }
+      if(/(^\_)|(\__)|(\_+$)/.test(value)){
+        return '用户名首尾不能出现下划线\'_\'';
+      }
+      if(/^\d+\d+\d$/.test(value)){
+        return '用户名不能全为数字';
+      }
+    }
+    
+    //我们既支持上述函数式的方式，也支持下述数组的形式
+    //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
+    ,pass: [
+      /^[\S]{6,12}$/
+      ,'密码必须6到12位，且不能出现空格'
+    ] 
+  });
+
+  
+  //更换图形验证码
+  $body.on('click', '#LAY-user-get-vercode', function(){
+    var othis = $(this);
+    this.src = 'https://www.oschina.net/action/user/captcha?t='+ new Date().getTime()
+  });
+  
+  //对外暴露的接口
+  exports('user', {});
+});

single/res/modules/useradmin.js

@@ -0,0 +1,179 @@
+/**
+ * useradmin demo
+ */
+
+
+layui.define(['table', 'form'], function(exports){
+  var $ = layui.$
+  ,admin = layui.admin
+  ,view = layui.view
+  ,table = layui.table
+  ,form = layui.form;
+
+  //用户管理
+  table.render({
+    elem: '#LAY-user-manage'
+    ,url: './res/json/useradmin/webuser.js' //模拟接口
+    ,cols: [[
+      {type: 'checkbox', fixed: 'left'}
+      ,{field: 'id', width: 100, title: 'ID', sort: true}
+      ,{field: 'username', title: '用户名', minWidth: 100}
+      ,{field: 'avatar', title: '头像', width: 100, templet: '#imgTpl'}
+      ,{field: 'phone', title: '手机'}
+      ,{field: 'email', title: '邮箱'}
+      ,{field: 'sex', width: 80, title: '性别'}
+      ,{field: 'ip', title: 'IP'}
+      ,{field: 'jointime', title: '加入时间', sort: true}
+      ,{title: '操作', width: 150, align:'center', fixed: 'right', toolbar: '#table-useradmin-webuser'}
+    ]]
+    ,page: true
+    ,limit: 30
+    ,height: 'full-320'
+    ,text: '对不起，加载出现异常！'
+  });
+  
+  //工具条
+  table.on('tool(LAY-user-manage)', function(obj){
+    var data = obj.data;
+    if(obj.event === 'del'){
+      layer.prompt({
+        formType: 1
+        ,title: '敏感操作，请验证口令'
+      }, function(value, index){
+        layer.close(index);
+        
+        layer.confirm('真的删除行么', function(index){
+          obj.del();
+          layer.close(index);
+        });
+      });
+    } else if(obj.event === 'edit'){
+      admin.popup({
+        title: '编辑用户'
+        ,area: ['500px', '450px']
+        ,id: 'LAY-popup-user-add'
+        ,success: function(layero, index){
+          view(this.id).render('user/user/userform', data).done(function(){
+            form.render(null, 'layuiadmin-form-useradmin');
+            
+            //提交
+            form.on('submit(LAY-user-front-submit)', function(data){
+              var field = data.field; //获取提交的字段
+
+              //提交 Ajax 成功后，关闭当前弹层并重载表格
+              //$.ajax({});
+              layui.table.reload('LAY-user-manage'); //重载表格
+              layer.close(index); //执行关闭 
+            });
+          });
+        }
+      });
+    }
+  });
+
+  //管理员管理
+  table.render({
+    elem: '#LAY-user-back-manage'
+    ,url: './res/json/useradmin/mangadmin.js' //模拟接口
+    ,cols: [[
+      {type: 'checkbox', fixed: 'left'}
+      ,{field: 'id', width: 80, title: 'ID', sort: true}
+      ,{field: 'loginname', title: '登录名'}
+      ,{field: 'telphone', title: '手机'}
+      ,{field: 'email', title: '邮箱'}
+      ,{field: 'role', title: '角色'}
+      ,{field: 'jointime', title: '加入时间', sort: true}
+      ,{field: 'check', title:'审核状态', templet: '#buttonTpl', minWidth: 80, align: 'center'}
+      ,{title: '操作', width: 150, align: 'center', fixed: 'right', toolbar: '#table-useradmin-admin'}
+    ]]
+    ,text: '对不起，加载出现异常！'
+  });
+  
+  //工具条
+  table.on('tool(LAY-user-back-manage)', function(obj){
+    var data = obj.data;
+    if(obj.event === 'del'){
+      layer.prompt({
+        formType: 1
+        ,title: '敏感操作，请验证口令'
+      }, function(value, index){
+        layer.close(index);
+        layer.confirm('确定删除此管理员？', function(index){
+          console.log(obj)
+          obj.del();
+          layer.close(index);
+        });
+      });
+    }else if(obj.event === 'edit'){
+      admin.popup({
+        title: '编辑管理员'
+        ,area: ['420px', '450px']
+        ,id: 'LAY-popup-user-add'
+        ,success: function(layero, index){
+          view(this.id).render('user/administrators/adminform', data).done(function(){
+            form.render(null, 'layuiadmin-form-admin');
+            
+            //提交
+            form.on('submit(LAY-user-back-submit)', function(data){
+              var field = data.field; //获取提交的字段
+
+              //提交 Ajax 成功后，关闭当前弹层并重载表格
+              //$.ajax({});
+              layui.table.reload('LAY-user-back-manage'); //重载表格
+              layer.close(index); //执行关闭 
+            });
+          });
+        }
+      });
+    }
+  });
+
+  //角色管理
+  table.render({
+    elem: '#LAY-user-back-role'
+    ,url: './res/json/useradmin/role.js' //模拟接口
+    ,cols: [[
+      {type: 'checkbox', fixed: 'left'}
+      ,{field: 'id', width: 80, title: 'ID', sort: true}
+      ,{field: 'rolename', title: '角色名'}
+      ,{field: 'limits', title: '拥有权限'}
+      ,{field: 'descr', title: '具体描述'}
+      ,{title: '操作', width: 150, align: 'center', fixed: 'right', toolbar: '#table-useradmin-admin'}
+    ]]
+    ,text: '对不起，加载出现异常！'
+  });
+  
+  //工具条
+  table.on('tool(LAY-user-back-role)', function(obj){
+    var data = obj.data;
+    if(obj.event === 'del'){
+      layer.confirm('确定删除此角色？', function(index){
+        obj.del();
+        layer.close(index);
+      });
+    }else if(obj.event === 'edit'){
+      admin.popup({
+        title: '添加新角色'
+        ,area: ['500px', '480px']
+        ,id: 'LAY-popup-user-add'
+        ,success: function(layero, index){
+          view(this.id).render('user/administrators/roleform', data).done(function(){
+            form.render(null, 'layuiadmin-form-role');
+            
+            //提交
+            form.on('submit(LAY-user-role-submit)', function(data){
+              var field = data.field; //获取提交的字段
+
+              //提交 Ajax 成功后，关闭当前弹层并重载表格
+              //$.ajax({});
+              layui.table.reload('LAY-user-back-role'); //重载表格
+              layer.close(index); //执行关闭 
+            });
+          });
+        }
+      });
+    }
+  });
+
+  exports('useradmin', {})
+});

single/res/modules/workorder.js

@@ -0,0 +1,65 @@
+/**
+ * workorder demo
+ */
+
+
+layui.define(['table', 'form', 'element'], function(exports){
+  var $ = layui.$
+  ,admin = layui.admin
+  ,view = layui.view
+  ,table = layui.table
+  ,form = layui.form
+  ,element = layui.element;
+
+  table.render({
+    elem: '#LAY-app-workorder'
+    ,url: './res/json/workorder/demo.js' //模拟接口
+    ,cols: [[
+      {type: 'numbers', fixed: 'left'}
+      ,{field: 'orderid', width: 100, title: '工单号', sort: true}
+      ,{field: 'attr', width: 100, title: '业务性质'}
+      ,{field: 'title', width: 100, title: '工单标题', width: 300}
+      ,{field: 'progress', title: '进度', width: 200, align: 'center', templet: '#progressTpl'}
+      ,{field: 'submit', width: 100, title: '提交者'}
+      ,{field: 'accept', width: 100, title: '受理人员'}
+      ,{field: 'state', title: '工单状态', templet: '#buttonTpl', minWidth: 80, align: 'center'}
+      ,{title: '操作', align: 'center', fixed: 'right', toolbar: '#table-system-order'}
+    ]]
+    ,page: true
+    ,limit: 10
+    ,limits: [10, 15, 20, 25, 30]
+    ,text: '对不起，加载出现异常！'
+    ,done: function(){
+      element.render('progress');
+    }
+  });
+
+  //工具条
+  table.on('tool(LAY-app-workorder)', function(obj){
+    var data = obj.data;
+    if(obj.event === 'edit'){
+      admin.popup({
+        title: '编辑工单'
+        ,area: ['450px', '450px']
+        ,id: 'LAY-popup-workorder-add'
+        ,success: function(layero, index){
+          view(this.id).render('app/workorder/listform').done(function(){
+            form.render(null, 'layuiadmin-form-workorder');
+            
+            //提交
+            form.on('submit(LAY-app-workorder-submit)', function(data){
+              var field = data.field; //获取提交的字段
+
+              //提交 Ajax 成功后，关闭当前弹层并重载表格
+              //$.ajax({});
+              layui.table.reload('LAY-app-workorder'); //重载表格
+              layer.close(index); //执行关闭 
+            });
+          });
+        }
+      });
+    }
+  });
+
+  exports('workorder', {})
+});