diff --git a/index.html b/index.html
index 04afdd6..17f7108 100644
--- a/index.html
+++ b/index.html
@@ -59,10 +59,10 @@
                bobi
             </a>
             <dl id="userInfo" class="layui-nav-child">
-               <dd><a lay-id="u-1" href="javascript:" data-url="pages/user/user.html">个人中心<span
+               <dd><a lay-id="u-1" href="javascript:" data-url="pages/member/user.html">个人中心<span
                        class="layui-badge-dot"></span></a></dd>
-               <dd><a lay-id="u-2" href="javascript:" data-url="pages/user/user-info.html">基本资料</a></dd>
-               <dd><a lay-id="u-3" href="javascript:" data-url="pages/user/changePwd.html">安全设置</a></dd>
+               <dd><a lay-id="u-2" href="javascript:" data-url="pages/member/user-info.html">基本资料</a></dd>
+               <dd><a lay-id="u-3" href="javascript:" data-url="pages/member/changePwd.html">安全设置</a></dd>
                <dd>
                   <hr/>
                </dd>
diff --git a/pages/member/role-add.html b/pages/member/role-add.html
index 3bf6adf..809e8dd 100644
--- a/pages/member/role-add.html
+++ b/pages/member/role-add.html
@@ -4,20 +4,18 @@
     <meta charset="UTF-8">
     <title>添加角色</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
-    <link rel="stylesheet" href="../../css/scroll-bar.css">
-    <link rel="stylesheet" href="../../css/sub-page.css">
+    <link rel="stylesheet" href="../../css/sub.css">
 </head>
 <body>
 <div class="ok-body">
     <!--面包屑导航区域-->
     <div class="ok-body-breadcrumb">
-            <span class="layui-breadcrumb">
-                <a><cite>首页</cite></a>
-                <a><cite>常用页面</cite></a>
-                <a><cite>用户列表</cite></a>
-				<a><cite>添加角色</cite></a>
-            </span>
+        <span class="layui-breadcrumb">
+            <a><cite>首页</cite></a>
+            <a><cite>会员管理</cite></a>
+            <a><cite>角色列表</cite></a>
+            <a><cite>添加角色</cite></a>
+        </span>
         <a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
             <i class="layui-icon layui-icon-refresh"></i>
         </a>
@@ -39,7 +37,7 @@
         <div class="layui-form-item">
             <label class="layui-form-label">权限</label>
             <div class="layui-input-block">
-                <div id="authTree"></div>
+				<div id="permissionTree"></div>
             </div>
         </div>
         <div class="layui-form-item">
@@ -52,22 +50,33 @@
 </div>
 <!--js逻辑-->
 <script src="../../lib/layui/layui.js"></script>
-<script>
-    layui.config({
-        base: 'lib/layui/lay/modules/authtree/'
-    }).extend({
-        authtree: 'authtree',
-    });
-
-    layui.use(['element', 'form', 'jquery'], function () {
-        var element = layui.element;
+<script type="text/javascript">
+    layui.use(["element", "form", "tree", "okLayer", "okUtils"], function () {
         var form = layui.form;
-        var $ = layui.jquery;
+		var tree = layui.tree;
+        var okLayer = layui.okLayer;
+        var okUtils = layui.okUtils;
 
-        form.on('submit(add)', function (data) {
-            console.log(data.field);
-            layer.msg("添加成功！", {icon: 6, time: 1000, anim: 4}, function () {
-                parent.layer.close(parent.layer.getFrameIndex(window.name));
+        var data = [{"title":"根目录","spread":true,"children":[{"title":"会员管理","spread":true,"children":[{"title":"用户管理","spread":true,"children":[{"title":"添加用户"},{"title":"编辑用户"},{"title":"删除用户"}]},{"title":"角色管理","spread":true,"children":[{"title":"添加角色"},{"title":"编辑角色"},{"title":"删除角色"}]},{"title":"权限管理","spread":true,"children":[{"title":"添加权限"},{"title":"编辑权限"},{"title":"删除权限"}]}]}]}];
+
+        tree.render({
+            elem: "#permissionTree",
+            // data: okUtils.mockApi.permission.list,
+            data: data,
+            showCheckbox: true
+        });
+
+        form.on("submit(add)", function (data) {
+            // TODO 权限节点校验
+
+            // 请求后台
+            okUtils.ajax("/role/add", "post", data.field).done(function (response) {
+                console.log(response)
+                okLayer.msg.greenTick("添加成功", function () {
+                    parent.layer.close(parent.layer.getFrameIndex(window.name));
+                });
+            }).fail(function (error) {
+                console.log(error)
             });
             return false;
         });
diff --git a/pages/member/role-edit.html b/pages/member/role-edit.html
index f489dae..32ff65a 100644
--- a/pages/member/role-edit.html
+++ b/pages/member/role-edit.html
@@ -4,9 +4,7 @@
     <meta charset="UTF-8">
     <title>编辑角色</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
-    <link rel="stylesheet" href="../../css/scroll-bar.css">
-    <link rel="stylesheet" href="../../css/sub-page.css">
+    <link rel="stylesheet" href="../../css/sub.css">
 </head>
 <body>
 <div class="ok-body">
@@ -39,6 +37,7 @@
         <div class="layui-form-item">
             <label class="layui-form-label">权限</label>
             <div class="layui-input-block">
+				<!-- TODO -->
                 <div id="authTree"></div>
             </div>
         </div>
diff --git a/pages/member/role.html b/pages/member/role.html
index 3ec557b..3750701 100644
--- a/pages/member/role.html
+++ b/pages/member/role.html
@@ -4,10 +4,7 @@
     <meta charset="UTF-8">
     <title>角色列表</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
-    <link rel="stylesheet" href="../../css/scroll-bar.css">
     <link rel="stylesheet" href="../../css/sub.css">
-    <link rel="stylesheet" href="../../lib/nprogress/nprogress.css">
 </head>
 <body>
 <div class="ok-body">
@@ -33,153 +30,122 @@
             </button>
         </form>
     </div>
-    <!--工具栏-->
-    <okToolbar>
-        <button class="layui-btn layui-btn-danger" id="batchDel">
-            <i class="layui-icon layui-icon-delete"></i>批量删除
-        </button>
-        <button class="layui-btn" id="addRole">
-            <i class="layui-icon">&#xe61f;</i>添加角色
-        </button>
-        <span>共有数据：<i id="countNum"></i> 条</span>
-    </okToolbar>
     <!--数据表格-->
     <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
 </div>
 <!--js逻辑-->
 <script src="../../lib/layui/layui.js"></script>
-<script src="../../lib/nprogress/nprogress.js"></script>
 <script>
-    NProgress.start();
-    window.onload = function () {
-        NProgress.done();
-    }
-
-    layui.use(['element', 'table', 'form', 'jquery', 'laydate'], function () {
-        var element = layui.element;
+    layui.use(["element", "table", "form", "laydate", "okLayer", "okUtils"], function () {
         var table = layui.table;
         var form = layui.form;
-        var $ = layui.jquery;
         var laydate = layui.laydate;
+		var okLayer = layui.okLayer;
+		var okUtils = layui.okUtils;
 
-        laydate.render({
-            elem: '#startTime',
-            type: "datetime"
-        });
+        laydate.render({elem: "#startTime", type: "datetime"});
+        laydate.render({elem: "#endTime", type: "datetime"});
 
-        laydate.render({
-            elem: '#endTime',
-            type: "datetime"
-        });
-
-        table.render({
-            elem: '#tableId',
-            url: '../../data/role.json',
+        var roleTable = table.render({
+            elem: "#tableId",
+            url: okUtils.mockApi.role.list,
             limit: 10,
             page: true,
-			toolbar: true,
 			toolbar: "#toolbarTpl",
+            size: "sm",
             cols: [[
-                {type: 'checkbox'},
-                {field: 'id', title: 'ID', width: 80, sort: true},
-                {field: 'name', title: '角色名', width: 100},
-                {field: 'remarks', title: '备注', width: 100},
-                {field: 'createUser', title: '创建者', width: 85},
-                {field: 'createTime', title: '创建时间', width: 200},
-                {title: '操作', width: 200, templet: '#operationTpl', align: 'center'}
+                {type: "checkbox"},
+                {field: "id", title: "ID", width: 80, sort: true},
+                {field: "name", title: "角色名", width: 100},
+                {field: "remarks", title: "备注", width: 100},
+                {field: "createUser", title: "创建者", width: 85},
+                {field: "createTime", title: "创建时间", width: 200},
+                {title: "操作", width: 200, align: "center", templet: "#operationTpl"}
             ]],
             done: function (res, curr, count) {
-                $("#countNum").text(count);
+                console.log(res, curr, count);
             }
         });
 
-        form.on('submit(search)', function () {
-            layer.msg('正在查询，请稍后...');
+        form.on("submit(search)", function () {
+            roleTable.reload({
+                where: data.field,
+                page: {curr: 1}
+            });
             return false;
         });
 
-        table.on('tool(tableFilter)', function (obj) {
-            var data = obj.data;
-            var layEvent = obj.event;
-            if (layEvent === 'edit') {
-                layer.open({
-                    title: '编辑角色',
-                    type: 2,
-                    shade: false,
-                    maxmin: true,
-                    shade: 0.5,
-                    area: ['90%', '90%'],
-                    content: 'role-edit.html',
-                    zIndex: layer.zIndex,
-                    end: function () {
-                        $(".layui-laypage-btn")[0].click();
-                    }
-                });
-            } else if (layEvent === 'del') {
-                layer.confirm("确定要删除吗？", {skin: 'layui-layer-lan', icon: 2, title: '提示', anim: 6}, function () {
-                    layer.msg("操作成功！", {icon: 1, time: 1000});
-                });
-            } else if (layEvent === 'auth') {
-                layer.open({
-                    title: '角色授权',
-                    type: 2,
-                    shade: false,
-                    maxmin: true,
-                    shade: 0.5,
-                    area: ['90%', '90%'],
-                    content: 'role-auth.html',
-                    zIndex: layer.zIndex,
-                    end: function () {
-                        $(".layui-laypage-btn")[0].click();
-                    }
-                });
-            }
+		table.on("toolbar(tableFilter)", function (obj) {
+			switch (obj.event) {
+				case "add":
+					add();
+					break;
+				case "batchDel":
+					batchDel();
+					break;
+			}
         });
 
-        $("#batchDel").click(function () {
-            layer.confirm("确定要批量删除吗？", {skin: 'layui-layer-lan', icon: 2, title: '提示', anim: 6}, function () {
-                var checkStatus = table.checkStatus('tableId');
-                var rows = checkStatus.data.length;
-                if (rows > 0) {
-                    var idsStr = "";
-                    for (var i = 0; i < checkStatus.data.length; i++) {
-                        idsStr += checkStatus.data[i].id + ',';
-                    }
-                    console.log("选择的id-->" + idsStr);
-                    layer.msg("操作成功！", {icon: 1, time: 1000}, function () {
-                        $(".layui-laypage-btn")[0].click();
-                    });
-                } else {
-                    layer.msg('未选择有效数据', {
-                        offset: 't',
-                        anim: 6
-                    });
-                }
-            });
-        })
+        table.on("tool(tableFilter)", function (obj) {
+            var data = obj.data;
+			switch (obj.event) {
+				case "edit":
+					edit(data.id);
+					break;
+				case "del":
+					del(data.id);
+					break;
+			}
+        });
 
-        $("#addRole").click(function () {
-            layer.open({
-                title: '添加角色',
-                type: 2,
-                shade: false,
-                maxmin: true,
-                shade: 0.5,
-                anim: 4,
-                area: ['90%', '90%'],
-                content: 'role-add.html',
-                zIndex: layer.zIndex,
-                // skin: 'layui-layer-molv',
-                end: function () {
-                    $(".layui-laypage-btn")[0].click();
-                }
-            });
-        })
+		function add () {
+			okLayer.open("添加角色", "role-add.html", "90%", "90%", null, function () {
+                roleTable.reload();
+			})
+		}
+
+		function batchDel () {
+			okLayer.confirm("确定要批量删除吗？", function (index) {
+			    layer.close(index);
+			    var idsStr = okUtils.table.batchCheck(table);
+			    if (idsStr) {
+			        okUtils.ajax("/role/batchDel", "post", {idsStr: idsStr}).done(function (response) {
+			            console.log(response)
+			            okUtils.table.successMsg("批量删除成功");
+			        }).fail(function (error) {
+			            console.log(error)
+			        });
+			    }
+			});
+		}
+
+		function edit (id) {
+			okLayer.open("编辑角色", "role-edit.html?id=" + id, "90%", "90%", null, function () {
+                roleTable.reload();
+			})
+		}
+
+		function del (id) {
+			okLayer.confirm("确定要删除吗？", function () {
+			    okUtils.ajax("/user/batchDel", "post", {idsStr: id}).done(function (response) {
+			        console.log(response)
+			        okUtils.table.successMsg("删除成功");
+			    }).fail(function (error) {
+			        console.log(error)
+			    });
+			})
+		}
     })
 </script>
-<!--模板-->
+<!-- 头工具栏模板 -->
+<script type="text/html" id="toolbarTpl">
+	<div class="layui-btn-container">
+		<div class="layui-inline" lay-event="add"><i class="layui-icon layui-icon-add-1"></i></div>
+		<div class="layui-inline" lay-event="batchDel"><i class="layui-icon layui-icon-delete"></i></div>
+	</div>
+</script>
+<!-- 行工具栏模板 -->
 <script type="text/html" id="operationTpl">
-    <a href="javascript:;" title="授权" lay-event="auth"><i class="iconfont icon-jiaoseshouquan"></i></a>
     <a href="javascript:;" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
     <a href="javascript:;" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
 </script>
diff --git a/pages/member/user.html b/pages/member/user.html
index c12de11..786e321 100644
--- a/pages/member/user.html
+++ b/pages/member/user.html
@@ -12,7 +12,7 @@
     <div class="ok-body-breadcrumb">
         <span class="layui-breadcrumb">
             <a><cite>首页</cite></a>
-            <a><cite>常用页面</cite></a>
+            <a><cite>会员管理</cite></a>
             <a><cite>用户列表</cite></a>
         </span>
         <a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
@@ -56,6 +56,7 @@
             page: true,
 			toolbar: true,
 			toolbar: "#toolbarTpl",
+			size: "sm",
             cols: [[
                 {type: "checkbox"},
                 {field: "id", title: "ID", width: 80, sort: true},
@@ -193,16 +194,21 @@
 		<button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe61f;</i>添加用户</button>
 	</div>
 </script>
-<!--模板-->
-<script type="text/html" id="statusTpl">
-    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|停用" {{ d.status==0 ? 'checked' : ''}}>
-</script>
-<script type="text/html" id="roleTpl">
-    {{ d.role == 0 ? '管理员' : '普通用户    '}}
-</script>
+<!-- 行工具栏模板 -->
 <script type="text/html" id="operationTpl">
     <a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
     <a href="javascript:" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
 </script>
+<!-- 启用|停用模板 -->
+<script type="text/html" id="statusTpl">
+    {{#  if(d.status == 0){ }}
+        <span class="layui-btn layui-btn-normal layui-btn-xs">已启用</span>
+    {{#  } else if(d.status == 1) { }}
+        <span class="layui-btn layui-btn-warm layui-btn-xs">已停用</span>
+    {{#  } }}
+</script>
+<script type="text/html" id="roleTpl">
+    {{ d.role == 0 ? '管理员' : '普通用户    '}}
+</script>
 </body>
 </html>
