diff --git a/app/wechat/controller/Keys.php b/app/wechat/controller/Keys.php
index a05b68f8f..6f7f3dd2a 100644
--- a/app/wechat/controller/Keys.php
+++ b/app/wechat/controller/Keys.php
@@ -42,6 +42,9 @@ class Keys extends Controller
      * 回复规则管理
      * @auth true
      * @menu true
+     * @throws \think\db\exception\DataNotFoundException
+     * @throws \think\db\exception\DbException
+     * @throws \think\db\exception\ModelNotFoundException
      */
     public function index()
     {
@@ -56,10 +59,13 @@ class Keys extends Controller
             $this->error("生成二维码失败，请稍候再试！<br> {$exception->getMessage()}");
         }
         // 数据列表分页处理
-        $this->title = '回复规则管理';
-        WechatKeys::mQuery(null, function (QueryHelper $query) {
-            $query->equal('status')->like('keys,type')->dateBetween('create_at');
-            $query->whereNotIn('keys', ['subscribe', 'default'])->order('sort desc,id desc')->page();
+        $this->type = input('get.type', 'index');
+        WechatKeys::mQuery()->layTable(function () {
+            $this->title = '回复规则管理';
+        }, function (QueryHelper $query) {
+            $query->whereNotIn('keys', ['subscribe', 'default']);
+            $query->like('keys,type#mtype')->dateBetween('create_at');
+            $query->where(['status' => intval($this->type === 'index')]);
         });
     }
 
diff --git a/app/wechat/model/WechatKeys.php b/app/wechat/model/WechatKeys.php
index 6e9a05cb6..ac01bc5b1 100644
--- a/app/wechat/model/WechatKeys.php
+++ b/app/wechat/model/WechatKeys.php
@@ -25,4 +25,13 @@ use think\admin\Model;
  */
 class WechatKeys extends Model
 {
+    /**
+     * 格式化创建时间
+     * @param string $value
+     * @return string
+     */
+    public function getCreateAtAttr(string $value): string
+    {
+        return format_datetime($value);
+    }
 }
\ No newline at end of file
diff --git a/app/wechat/view/keys/index.html b/app/wechat/view/keys/index.html
index 1ec6cb9a7..398fcd69b 100644
--- a/app/wechat/view/keys/index.html
+++ b/app/wechat/view/keys/index.html
@@ -1,91 +1,118 @@
-{extend name="../../admin/view/main"}
+{extend name="../../admin/view/table"}
 
 {block name="button"}
-<!--{if auth("add")}-->
-<button data-open="{:url('add')}" class='layui-btn layui-btn-sm layui-btn-primary'>添加规则</button>
+<!--{if auth("add") and $type eq 'index'}-->
+<button class='layui-btn layui-btn-sm layui-btn-primary' data-open='{:url("add")}'>添加规则</button>
 <!--{/if}-->
 
-<!--{if auth("remove")}-->
-<button data-action='{:url("remove")}' data-rule="id#{key}" data-csrf="{:systoken('remove')}" data-confirm="确定要删除这些规则吗？" class='layui-btn layui-btn-sm layui-btn-primary'>删除规则</button>
+<!--{if auth("state") and $type eq 'index'}-->
+<button class='layui-btn layui-btn-sm layui-btn-primary' data-table-id="RuleTable" data-action='{:url("state")}' data-rule="id#{id};status#0">批量禁用</button>
+<!--{/if}-->
+
+<!--{if auth("state") and $type neq 'index'}-->
+<button class='layui-btn layui-btn-sm layui-btn-primary' data-table-id="RuleTable" data-action='{:url("state")}' data-rule="id#{id};status#1">批量启用</button>
+<!--{/if}-->
+
+<!--{if auth("remove") and $type neq 'index'}-->
+<button class='layui-btn layui-btn-sm layui-btn-primary' data-table-id="RuleTable" data-action='{:url("remove")}' data-rule="id#{id}">批量删除</button>
 <!--{/if}-->
 {/block}
 
-{block name='content'}
-<div class="think-box-shadow">
-    {include file='keys/index_search'}
-    <table class="layui-table margin-top-10" lay-skin="line">
-        {notempty name='list'}
-        <thead>
-        <tr>
-            <th class='list-table-check-td think-checkbox'>
-                <label><input data-auto-none data-check-target='.list-check-box' type='checkbox'></label>
-            </th>
-            <th class='list-table-sort-td'>
-                <button type="button" data-reload class="layui-btn layui-btn-xs">刷 新</button>
-            </th>
-            <th class="text-left nowrap">关键字</th>
-            <th class="text-center nowrap">类型</th>
-            <th class="text-center nowrap">预览</th>
-            <th class="text-left nowrap">添加时间</th>
-            <th class="text-left nowrap">状态</th>
-            <th></th>
-        </tr>
-        </thead>
-        {/notempty}
-        <tbody>
-        {foreach $list as $key=>$vo}
-        <tr>
-            <td class='list-table-check-td think-checkbox'>
-                <label><input class="list-check-box" value='{$vo.id}' type='checkbox'></label>
-            </td>
-            <td class='list-table-sort-td'>
-                <label><input data-action-blur="{:request()->url()}" data-value="id#{$vo.id};action#sort;sort#{value}" data-loading="false" value="{$vo.sort}" class="list-sort-input"></label>
-            </td>
-            <td class="text-left nowrap">
-                {notempty name='vo.qrc'}
-                <i class="layui-icon layui-icon-cols font-s12 pointer margin-right-5" data-load="{$vo.qrc}" data-time="false" data-tips-text="生成关键字二维码"></i>
-                {/notempty}
-                {$vo.keys}
-            </td>
-            <td class="text-center nowrap">{$vo.type}</td>
-            <td class="text-center nowrap notselect">
-                {if $vo.type eq '音乐'}
-                <a data-phone-view='{:url("@wechat/api.view/music")}?title={$vo.music_title|urlencode}&desc={$vo.music_desc|urlencode}'>预览</i></a>
-                {elseif in_array($vo.type,['文字','转客服'])}
-                <a data-phone-view='{:url("@wechat/api.view/text")}?content={$vo.content|urlencode}'>预览</i></a>
-                {elseif $vo.type eq '图片'}
-                <a data-phone-view='{:url("@wechat/api.view/image")}?content={$vo.image_url|urlencode}'>预览</i></a>
-                {elseif $vo.type eq '图文'}
-                <a data-phone-view='{:url("@wechat/api.view/news")}?id={$vo.news_id}'>预览</i></a>
-                {elseif $vo.type eq '视频'}
-                <a data-phone-view='{:url("@wechat/api.view/video")}?title={$vo.video_title|urlencode}&desc={$vo.video_desc|urlencode}&url={$vo.video_url|urlencode}'>预览</i></a>
-                {elseif $vo.type eq '语音'}
-                <a data-phone-view='{:url("@wechat/api.view/voice")}?content={$vo.voice_url|urlencode}'>预览</i></a>
-                {else} {$vo.content} {/if}
-            </td>
-            <td class="text-left nowrap">{$vo.create_at|format_datetime}</td>
-            <td class='text-left nowrap'>{if $vo.status eq 0}<span class="color-red">已禁用</span>{elseif $vo.status eq 1}<span class="color-green">已激活</span>{/if}</td>
-            <td class='text-left nowrap'>
-
-                <!--{if auth("edit")}-->
-                <a class="layui-btn layui-btn-sm" data-open='{:url("edit")}?id={$vo.id}'>编 辑</a>
-                <!--{/if}-->
-
-                <!--{if auth("state") and $vo.status eq 1}-->
-                <a class="layui-btn layui-btn-sm layui-btn-warm" data-action="{:url('state')}" data-value="id#{$vo.id};status#0" data-csrf="{:systoken('state')}">禁 用</a>
-                <!--{elseif auth("state") and $vo.status eq 0}-->
-                <a class="layui-btn layui-btn-sm layui-btn-warm" data-action="{:url('state')}" data-value="id#{$vo.id};status#1" data-csrf="{:systoken('state')}">激 活</a>
-                <!--{/if}-->
-
-                <!--{if auth("remove")}-->
-                <a class="layui-btn layui-btn-sm layui-btn-danger" data-confirm="确定要删除该规则吗？" data-action="{:url('remove')}" data-value="id#{$vo.id}" data-csrf="{:systoken('remove')}">删 除</a>
-                <!--{/if}-->
-
-            </td>
-        </tr>
-        {/foreach}
-        </tbody>
-    </table>
-    {empty name='list'}<span class="notdata">没有记录哦</span>{else}{$pagehtml|raw|default=''}{/empty}
+{block name="content"}
+<div class="layui-tab layui-tab-card think-bg-white">
+    <ul class="layui-tab-title">
+        {foreach ['index'=>'回复规则','recycle'=>'回 收 站'] as $k=>$v}
+        {if isset($type) and $type eq $k}
+        <li class="layui-this" data-open="{:url('index')}?type={$k}">{$v}</li>
+        {else}
+        <li data-open="{:url('index')}?type={$k}">{$v}</li>
+        {/if}{/foreach}
+    </ul>
+    <div class="layui-tab-content">
+        {include file='keys/index_search'}
+        <table id="RuleTable" data-url="{:sysuri()}" data-target-search="form.form-search"></table>
+    </div>
 </div>
+{/block}
+
+{block name='script'}
+<script>
+    $(function () {
+        $('#RuleTable').layTable({
+            even: true, height: 'full',
+            sort: {field: 'sort desc,id', type: 'desc'},
+            where: {type: '{$type|default="index"}'},
+            cols: [[
+                {checkbox: true},
+                {field: 'sort', title: '排序权重', width: 100, align: 'center', sort: true, templet: '#SortInputTpl'},
+                {
+                    field: 'keys', title: '关键字', minWidth: 100, templet: function (d) {
+                        d.className = 'layui-icon layui-icon-cols font-s12 pointer margin-right-5 pull-left';
+                        return laytpl('<i class="{{d.className}}" data-load="{{d.qrc}}" data-time="false" data-tips-text="生成关键字二维码"></i> {{d.keys}}').render(d);
+                    }
+                },
+                {field: 'type', title: '消息类型', align: "center", minWidth: 100},
+                {field: 'code', title: '在线预览', align: "center", minWidth: 100, templet: '#PreViewTpl'},
+                {field: 'status', title: '使用状态', align: 'center', minWidth: 110, templet: '#StatusSwitchTpl'},
+                {field: 'create_at', title: '添加时间', align: 'center', minWidth: 170},
+                {toolbar: '#toolbar', title: '操作面板', align: 'center', fixed: 'right'}
+            ]]
+        });
+
+        // 数据状态切换操作
+        layui.form.on('switch(StatusSwitch)', function (obj, data) {
+            data = {id: obj.value, status: obj.elem.checked > 0 ? 1 : 0};
+            $.form.load("{:url('state')}", data, 'post', function (ret) {
+                if (ret.code < 1) $.msg.error(ret.info, 3, function () {
+                    $('#RuleTable').trigger('reload');
+                }); else {
+                    $('#RuleTable').trigger('reload');
+                }
+                return false;
+            }, false);
+        });
+    });
+</script>
+
+<script type="text/html" id="PreViewTpl">
+    {{# if(d.type==='音乐'){ }}
+    <a data-phone-view='{:url("@wechat/api.view/music")}?title={{d.music_title}}&desc={{d.music_desc}}'>预览</a>
+    {{# }else if(d.type==='图片'){ }}
+    <a data-phone-view='{:url("@wechat/api.view/image")}?content={{d.image_url}}'>预览</a>
+    {{# }else if(d.type==='图文'){ }}
+    <a data-phone-view='{:url("@wechat/api.view/news")}?id={{d.news_id}}'>预览</a>
+    {{# }else if(d.type==='视频'){ }}
+    <a data-phone-view='{:url("@wechat/api.view/video")}?title={{d.video_title}}&desc={{d.video_desc}}&url={{d.video_url}}'>预览</a>
+    {{# }else if(d.type==='语音'){ }}
+    <a data-phone-view='{:url("@wechat/api.view/voice")}?content={{d.voice_url}}'>预览</a>
+    {{# }else if(d.type==='文字'||d.type==='转客服'){ }}
+    <a data-phone-view='{:url("@wechat/api.view/text")}?content={{d.content}}'>预览</a>
+    {{# }else{ }}
+    {{d.content}}
+    {{# } }}
+</script>
+
+<!-- 列表排序权重模板 -->
+<script type="text/html" id="SortInputTpl">
+    <input type="number" min="0" data-blur-number="0" data-action-blur="{:sysuri()}" data-value="id#{{d.id}};action#sort;sort#{value}" data-loading="false" value="{{d.sort}}" class="layui-input text-center">
+</script>
+
+<!-- 状态切换模板 -->
+<script type="text/html" id="StatusSwitchTpl">
+    <!--{if auth("state")}-->
+    <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="已激活|已禁用" lay-filter="StatusSwitch" {{-d.status>0?'checked':''}}>
+    <!--{else}-->
+    {{-d.status ? '<b class="color-red">已激活</b>' : '<b class="color-green">已禁用</b>'}}
+    <!--{/if}-->
+</script>
+
+<!-- 操作面板模板 -->
+<script type="text/html" id="toolbar">
+    <!--{if auth("edit") and isset($type) and $type eq 'index'}-->
+    <a class="layui-btn layui-btn-sm" data-open="{:url('edit')}?id={{d.id}}" data-title="编辑回复规则">编 辑</a>
+    <!--{/if}-->
+    <!--{if auth("remove") and isset($type) and $type neq 'index'}-->
+    <a class="layui-btn layui-btn-sm layui-btn-danger" data-action="{:url('remove')}" data-value="id#{{d.id}}" data-confirm="确定要删除该用户吗？">删 除</a>
+    <!--{/if}-->
+</script>
 {/block}
\ No newline at end of file
diff --git a/app/wechat/view/keys/index_search.html b/app/wechat/view/keys/index_search.html
index 9c9129987..dec781a98 100644
--- a/app/wechat/view/keys/index_search.html
+++ b/app/wechat/view/keys/index_search.html
@@ -1,18 +1,20 @@
 <fieldset>
     <legend>条件搜索</legend>
     <form class="layui-form layui-form-pane form-search" action="{:request()->url()}" onsubmit="return false" method="get" autocomplete="off">
+
         <div class="layui-form-item layui-inline">
-            <label class="layui-form-label">匹配规则</label>
+            <label class="layui-form-label">匹配内容</label>
             <div class="layui-input-inline">
-                <input name="keys" value="{$get.keys|default=''}" placeholder="请输入匹配规则" class="layui-input">
+                <input name="keys" value="{$get.keys|default=''}" placeholder="请输入匹配内容" class="layui-input">
             </div>
         </div>
+
         <div class="layui-form-item layui-inline">
             <label class="layui-form-label">规则类型</label>
             <div class="layui-input-inline">
-                <select class="layui-select" name="type">
+                <select class="layui-select" name="mtype">
                     <option value="">-- 全部 --</option>
-                    {foreach $types as $k => $v}{if $k.'' eq input('type')}
+                    {foreach $types as $k => $v}{if $k.'' eq input('mtype')}
                     <option selected value="{$k}">{$v}</option>
                     {else}
                     <option value="{$k}">{$v}</option>
@@ -20,6 +22,7 @@
                 </select>
             </div>
         </div>
+
         <div class="layui-form-item layui-inline">
             <label class="layui-form-label">使用状态</label>
             <div class="layui-input-inline">
@@ -34,12 +37,14 @@
                 </select>
             </div>
         </div>
+
         <div class="layui-form-item layui-inline">
             <label class="layui-form-label">创建时间</label>
             <div class="layui-input-inline">
                 <input data-date-range name="create_at" value="{$get.create_at|default=''}" placeholder="请选择创建时间" class="layui-input">
             </div>
         </div>
+
         <div class="layui-form-item layui-inline">
             <button class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe615;</i> 搜 索</button>
         </div>