更新 admin 模块的页面和接口

manager/src/main/java/cn/reghao/devops/manager/admin/PostController.java

@@ -36,14 +36,18 @@ public class PostController {
 
     @ApiOperation(value = "视频稿件")
     @GetMapping("/video")
-    public String videoPage(Model model) {
+    public String videoPage(@RequestParam(value = "title", required = false) String title, Model model) {
+        if (title != null) {
+            model.addAttribute("title", title);
+        }
+
         PageRequest pageRequest = PageSort.pageRequest();
         PageList<?> pageList = PageList.empty();
         Page<?> page = new PageImpl<>(pageList.getList(), pageRequest, pageList.getTotalSize());
 
         model.addAttribute("page", page);
         model.addAttribute("list", page.getContent());
-        return "/post/index";
+        return "/post/videolist";
     }
 
     @GetMapping("/audio")

manager/src/main/java/cn/reghao/devops/manager/admin/SiteController.java

@@ -33,7 +33,7 @@ public class SiteController {
 
         model.addAttribute("page", page);
         model.addAttribute("list", page.getContent());
-        return "/site/account";
+        return "/site/config";
     }
 
     @ApiOperation(value = "账户")

manager/src/main/resources/static/js/build.js

@@ -0,0 +1,172 @@
+layui.use(['element', 'laydate', 'form'], function () {
+    var $ = layui.jquery;
+    var form = layui.form;
+    var laydate = layui.laydate;
+
+    var build = $(".build-panel");
+
+    //初始化laydate实例
+    laydate.render({
+        elem: '#laydate'
+    });
+
+    // 禁止选择网页文本
+    $(document).on('selectstart', '.layui-card', function(){
+        return false;
+    });
+
+    // 移动操作
+    var downPosi, target = null, dragDom = null, timer = null;
+    var areaPosi;
+    $(document).on("mousedown", ".layui-form-item", function (e) {
+        $this = $(this);
+        timer = setTimeout(function () {
+            downPosi = {'left': e.clientX - $this.offset().left,
+                'top': e.clientY - $this.offset().top + 10};
+            areaPosi = {'ltX': build.offset().left, 'ltY': build.offset().top,
+                'rbX': build.offset().left + build.width(),
+                'rbY': build.offset().top + build.height()};
+            target = $this;
+        }, 200);
+    });
+    $(document).on("mousemove", function (e) {
+        if(dragDom == null && target != null){
+            dragDom = $("<div class='layui-form timo-compile element-panel'></div>");
+            dragDom.append(target.clone());
+            dragDom.addClass("drag-box");
+            dragDom.css("width", target.width());
+            $("body").append(dragDom);
+            var buildItem = target.parent('.build-item');
+            if(buildItem.length > 0){
+                buildItem.remove();
+            }
+        }
+        if(dragDom != null){
+            dragDom.css("left", e.clientX - downPosi.left);
+            dragDom.css("top", e.clientY - downPosi.top);
+        }
+        if(dragDom != null){
+            if(e.clientX > areaPosi.ltX && e.clientY > areaPosi.ltY
+                && e.clientX < areaPosi.rbX && e.clientY < areaPosi.rbY){
+                build.addClass("active");
+                buildItemPosi(e.clientY);
+            }else{
+                build.removeClass("active");
+                shellItem.remove();
+            }
+        }
+    });
+    $(document).on("mouseup", function (e) {
+        if(dragDom != null){
+            if(build.hasClass("active")){
+                buildAdd(dragDom);
+            }
+            dragDom.remove();
+            dragDom = null;
+            target = null;
+            build.removeClass("active");
+            shellItem.remove();
+        }
+        if(timer != null){
+            clearTimeout(timer);
+            timer = null;
+        }
+    });
+
+    // 构建项位置
+    var shellItem = $("<div id='shell-item'></div>");
+    var buildItemPosi = function(clientY){
+        build.children('.build-item').each(function(key, val){
+            var $this = $(val);
+            var ty = $this.offset().top;
+            var by = $this.offset().top + $this.height();
+            if(clientY > ty &&  clientY < by ){
+                if(clientY < (ty + by) / 2){
+                    $this.before(shellItem);
+                }else{
+                    $this.after(shellItem);
+                }
+            }
+        });
+        shellItem.css('height', dragDom.height());
+        if($('#shell-item').length == 0){
+            build.append(shellItem);
+        }
+    };
+
+    // 加入构建面板
+    var buildAdd = function(dragDom){
+        var elem = dragDom.children(".layui-form-item").clone();
+        elem.children('div').children('div').remove();
+        elem.removeAttr('style');
+        elem.removeClass('drag-box');
+        var item = $("<div class='build-item'>" +
+            "<div class='control'><a class='edit'>编辑HTML</a> | " +
+            "<a class='remove'>删除</a></div>" +
+            "</div>");
+        shellItem.after(item.append(elem));
+
+        form.render();
+    };
+
+    // 编辑构建项
+    var buildItem, index;
+    build.on('click', '.edit', function(){
+        buildItem = $(this).parents('.build-item');
+        var elem = buildItem.children('.layui-form-item').clone();
+        elem.children('div').children('div').remove();
+        elem.find('.layui-upload-file').remove();
+
+        var box = $("<div class='build-edit-box'></div>");
+        var edit = $("<textarea class='build-edit'></textarea>").text(elem.prop('outerHTML'));
+        box.append(edit).append("<button class='build-edit-btn'>更新</button></div>");
+
+        index = layer.open({
+            title: '编辑HTML',
+            type: 1,
+            skin: 'build-item-edit', //样式类名
+            shadeClose: true, //开启遮罩关闭
+            area: ['500px', '360px'],
+            content: box.prop('outerHTML')
+        });
+    });
+
+    // 更新HTML
+    $(document).on('click', '.build-edit-btn', function(){
+        var val = $(this).parent().children('textarea').val();
+        buildItem.children('.layui-form-item').remove();
+        buildItem.append($(val));
+        form.render();
+        layer.close(index);
+    });
+
+    // 删除构建项
+    build.on('click', '.remove', function(){
+        $(this).parents('.build-item').remove();
+    });
+
+    // 生成代码
+    $(document).on('click', '.build-generate', function(){
+        var genHtml = '';
+        build.find(".layui-form-item").each(function (key, val) {
+            var item = $(val).clone();
+            item.children('div').children('div').remove();
+            item.find('.layui-upload-file').remove();
+            genHtml += item.prop('outerHTML') + "\n";
+        });
+        var box = $("<div class='build-edit-box'></div>");
+        var edit = $("<textarea class='build-edit'></textarea>").text(genHtml);
+        box.append(edit);
+
+        index = layer.open({
+            title: '复制HTML代码',
+            type: 1,
+            skin: 'build-item-edit', //样式类名
+            shadeClose: true, //开启遮罩关闭
+            area: ['500px', '360px'],
+            content: box.prop('outerHTML')
+        });
+        $('.build-edit').focus().select();
+    });
+
+});

manager/src/main/resources/templates/post/index.html

@@ -6,7 +6,7 @@
 <body class="timo-layout-page">
 <div class="layui-card">
     <div class="layui-card-header timo-card-header">
-        <span><i class="fa fa-bars"></i> 帐号列表</span>
+        <span><i class="fa fa-bars"></i> 稿件列表</span>
         <i class="layui-icon layui-icon-refresh refresh-btn"></i>
     </div>
     <div class="layui-card-body">

manager/src/main/resources/templates/post/videolist.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org"
+      xmlns:mo="https://gitee.com/aun/Timo">
+<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})"></head>
+
+<body class="timo-layout-page">
+<div class="layui-card">
+    <div class="layui-card-header timo-card-header">
+        <span><i class="fa fa-bars"></i> 视频稿件列表</span>
+        <i class="layui-icon layui-icon-refresh refresh-btn"></i>
+    </div>
+    <div class="layui-card-body">
+        <div class="layui-row timo-card-screen put-row">
+            <div class="layui-row timo-card-screen put-row">
+                <div class="pull-left layui-form-pane">
+                    <!--<div class="layui-inline">
+                        <label class="layui-form-label">环境</label>
+                        <div class="layui-input-block timo-search-status">
+                            <select id="getPageByEnv" class="timo-search-select" name="env" onchange="getPageByEnv()"
+                                    mo:dict="ENVIRONMENT" mo-selected="${env}"></select>
+                        </div>
+                    </div>-->
+                    <div class="layui-inline timo-search-box">
+                        <label class="layui-form-label">标题</label>
+                        <div class="layui-input-block">
+                            <input type="text" name="title" th:value="${param.title}" placeholder="请输入视频标题"
+                                   autocomplete="off" class="layui-input">
+                        </div>
+                    </div>
+                    <div class="layui-inline">
+                        <button class="layui-btn timo-search-btn">
+                            <i class="fa fa-search"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="pull-right">
+                    <div class="btn-group-right">
+                        <div class="btn-group">
+                            <button class="layui-btn">批量处理<span class="caret"></span></button>
+                            <dl class="layui-nav-child layui-anim layui-anim-upbit">
+                                <dd><a class="ajax-status" th:href="@{/api/machine/host/delete}">批量删除</a></dd>
+                            </dl>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="timo-table-wrap">
+            <table class="layui-table timo-table">
+                <thead>
+                <tr>
+                    <th class="timo-table-checkbox">
+                        <label class="timo-checkbox"><input type="checkbox">
+                            <i class="layui-icon layui-icon-ok"></i></label>
+                    </th>
+                    <th data-field="avatarUrl">封面</th>
+                    <th data-field="userId">视频 ID</th>
+                    <th data-field="screenName">标题</th>
+                    <th data-field="gender">描述</th>
+                    <th data-field="signature">可见范围</th>
+                    <th data-field="following">状态</th>
+                    <th data-field="follower">粉丝</th>
+                    <th>操作</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr th:each="item:${list}">
+                    <td><label class="timo-checkbox"><input type="checkbox" th:value="${item.userId}">
+                        <i class="layui-icon layui-icon-ok"></i></label></td>
+                    <td>
+                        <img class="layui-side-user-avatar" data-size="320,240" th:src="@{${item.avatarUrl}}" alt="头像">
+                    </td>
+                    <td th:text="${item.userId}"></td>
+                    <td th:text="${item.screenName}"></td>
+                    <td th:text="${item.gender}"></td>
+                    <td th:text="${item.signature}"></td>
+                    <td th:text="${item.following}"></td>
+                    <td th:text="${item.follower}"></td>
+                    <td>
+                        <a class="open-popup" data-title="机器详细信息" th:attr="data-url=@{'/machine/host/detail/'+${item.userId}}"
+                           data-size="960,480" href="#">预览</a>
+                        <a class="ajax-delete" th:attr="data-msg='确定要修改 '+ ${item.userId} + ' 的状态?'"
+                           th:href="@{'/api/machine/host/' + ${item.userId}}">修改状态</a>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+        <div th:replace="/common/fragment :: page"></div>
+    </div>
+</div>
+
+<script th:replace="/common/template :: script"></script>
+<script type="text/javascript" th:src="@{/js/plugins/jquery-2.2.4.min.js}"></script>
+<script type="text/javascript">
+    function getPageByEnv() {
+        var selectedOption = $("#getPageByEnv option:selected")
+        var param = selectedOption.text()
+        url = '?env=' + param
+        window.location.href = window.location.pathname + url;
+    }
+
+    $(".machine-status").each(function () {
+        var text = $(this).text().trim()
+        if (text === 'Online') {
+            $(this).css("color", "#009688")
+        } else {
+            $(this).css("color", "#ff0000")
+        }
+    })
+</script>
+</body>
+</html>

manager/src/main/resources/templates/site/config.html

@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})"></head>
+
+<body class="timo-layout-page">
+<div class="layui-row layui-col-space20">
+    <div class="layui-col-md4">
+        <div class="layui-card">
+            <div class="layui-card-header timo-card-header">
+                <span><i class="fa fa-bars"></i> 站点公告</span>
+            </div>
+            <div class="layui-card-body">
+                <p>当前公告</p>
+                <blockquote class="layui-elem-quote layui-quote-nm">
+                    将表单元素拖拽到构建面板中即可生成表单块将表单元素拖拽到构建面板中即可生成表单块将表单元素拖拽到构建面板中即可生成表单块将表单元素拖拽到构建面板中即可生成表单块将表单元素拖拽到构建面板中即可生成表单
+                </blockquote>
+                <div class="layui-form timo-compile element-panel">
+                    <div class="layui-form-item layui-form-text">
+                        <textarea placeholder="请输入新公告" class="layui-textarea" name="desc"></textarea>
+                    </div>
+                    <div class="layui-form-item timo-finally">
+                        <button class="layui-btn ajax-submit"><i class="fa fa-check-circle"></i> 更新</button>
+                        <button class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 清空</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="layui-col-md4">
+        <div class="layui-card">
+            <div class="layui-card-header timo-card-header">
+                <span><i class="fa fa-bars"></i> 表单元素</span>
+            </div>
+            <div class="layui-card-body">
+                <blockquote class="layui-elem-quote layui-quote-nm">
+                    将表单元素拖拽到构建面板中即可生成表单块
+                </blockquote>
+                <div class="layui-form timo-compile element-panel">
+                    <div class="layui-form-item">
+                        <label class="layui-form-label">输入框</label>
+                        <div class="layui-input-inline">
+                            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
+                        </div>
+                    </div>
+                    <div class="layui-form-item">
+                        <label class="layui-form-label">密码框</label>
+                        <div class="layui-input-inline">
+                            <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
+                        </div>
+                    </div>
+                    <div class="layui-form-item">
+                        <label class="layui-form-label">选择框</label>
+                        <div class="layui-input-inline">
+                            <select name="interest" lay-filter="aihao">
+                                <option value=""></option>
+                                <option value="0">写作</option>
+                                <option value="1">阅读</option>
+                                <option value="2">游戏</option>
+                                <option value="3">音乐</option>
+                                <option value="4">旅行</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="layui-form-item">
+                        <label class="layui-form-label">上传图片</label>
+                        <div class="layui-input-inline">
+                            <button type="button" class="layui-btn upload-image" name="image[]"
+                                    th:attr="up-url=@{/upload/image}" up-field="path">
+                                <i class="layui-icon">&#xe67c;</i>上传图片
+                            </button>
+                        </div>
+                        <div class="upload-show"></div>
+                    </div>
+                    <div class="layui-form-item">
+                        <label class="layui-form-label">时间选择</label>
+                        <div class="layui-input-inline">
+                            <input type="text" class="layui-input" id="laydate" placeholder="yyyy-MM-dd">
+                        </div>
+                    </div>
+                    <div class="layui-form-item">
+                        <label class="layui-form-label">复选框</label>
+                        <div class="layui-input-block">
+                            <input type="checkbox" name="like[write]" title="写作">
+                            <input type="checkbox" name="like[read]" title="阅读" checked="">
+                            <input type="checkbox" name="like[game]" title="游戏">
+                        </div>
+                    </div>
+                    <div class="layui-form-item">
+                        <label class="layui-form-label">开关</label>
+                        <div class="layui-input-block">
+                            <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
+                        </div>
+                    </div>
+
+                    <div class="layui-form-item">
+                        <label class="layui-form-label">单选框</label>
+                        <div class="layui-input-block">
+                            <input type="radio" name="sex" value="男" title="男" checked="">
+                            <input type="radio" name="sex" value="女" title="女">
+                        </div>
+                    </div>
+                    <div class="layui-form-item layui-form-text">
+                        <label class="layui-form-label">文本域</label>
+                        <div class="layui-input-block">
+                            <textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
+                        </div>
+                    </div>
+                    <div class="layui-form-item timo-finally">
+                        <button class="layui-btn ajax-submit"><i class="fa fa-check-circle"></i> 保存</button>
+                        <button class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 关闭</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="layui-col-md4">
+        <div class="layui-card build-card">
+            <div class="layui-card-header timo-card-header">
+                <span><i class="fa fa-bars"></i> 构建面板</span>
+                <button class="layui-btn layui-btn-primary layui-btn-sm build-generate">生成HTML</button>
+            </div>
+            <div class="layui-card-body layui-form timo-compile build-panel"></div>
+        </div>
+    </div>
+</div>
+</body>
+
+<script th:replace="/common/template :: script"></script>
+<script type="text/javascript" th:src="@{/js/build.js}"></script>
+</html>