homeIndex 替换 并添加源码

dgtly-admin/src/main/resources/static/assets/js/index.e1888b97.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"./assets/js/index.e1888b97.js","sources":["webpack:///./assets/js/index.e1888b97.js"],"mappings":"AAAA;;;;;;;;;;;;;AAy0EA;;;;;;;;;;;AA6fA;;;;;;;;AAu2YA;;;;;;;AA2jkBA","sourceRoot":""}

dgtly-admin/src/main/resources/templates/homeIndexSrc/.babelrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+    presets: [
+        ["@babel/preset-env", {
+            modules: 'cjs',
+            targets: {
+                browsers: [
+                    "> 1%",
+                    "last 2 versions",
+                    "not ie <= 8"]
+            },
+
+            "corejs": {
+                "version": 3,
+                "proposals": true,
+            },
+            "useBuiltIns": "usage",
+        }]
+    ]
+
+}

dgtly-admin/src/main/resources/templates/homeIndexSrc/.eslintrc.js

@@ -0,0 +1,37 @@
+/**
+ * AlloyTeam ESLint 规则
+ *
+ * 包含所有 ESLint 规则
+ * 使用 babel-eslint 作为解析器
+ *
+ * @fixable 表示此配置支持 --fix
+ * @off 表示此配置被关闭了，并且后面说明了关闭的原因
+ */
+
+module.exports = {
+    // parser: 'babel-eslint',
+    parser: '@typescript-eslint/parser',
+    plugins: ["@typescript-eslint", "prettier"],
+
+    parserOptions: {
+        ecmaVersion: 2017,
+        sourceType: 'module',
+        ecmaFeatures: {
+            // @TODO Deprecated https://eslint.org/docs/user-guide/configuring#deprecated
+            experimentalObjectRestSpread: true,
+            jsx: true,
+            modules: true
+        }
+    },
+    env: {
+        browser: true,
+        node: true,
+        commonjs: true,
+        es6: true
+    },
+    // 以当前目录为根目录，不再向上查找 .eslintrc.js
+    root: true,
+    rules: {
+        "prettier/prettier": "error" // prettier 检测到的标红展示
+    }
+};

dgtly-admin/src/main/resources/templates/homeIndexSrc/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "citie",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "cross-env NODE_ENV=development webpack-dev-server  ",
+    "build": "cross-env NODE_ENV=production webpack  "
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.6.4",
+    "@babel/core": "^7.6.4",
+    "@babel/preset-env": "^7.6.3",
+    "@babel/runtime": "^7.6.3",
+    "@types/axios": "^0.14.0",
+    "@types/jquery": "^3.3.31",
+    "@types/lodash": "^4.14.149",
+    "@types/qs": "^6.9.0",
+    "@typescript-eslint/eslint-plugin": "^2.7.0",
+    "@typescript-eslint/parser": "^2.7.0",
+    "autoprefixer": "^9.7.0",
+    "babel-eslint": "^10.0.3",
+    "babel-loader": "^8.0.6",
+    "body-parser": "^1.19.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "concurrently": "^5.0.0",
+    "copy-webpack-plugin": "^5.0.4",
+    "core-js": "^3.3.5",
+    "cross-env": "^6.0.3",
+    "css-loader": "^3.2.0",
+    "eslint": "^6.6.0",
+    "eslint-plugin-prettier": "^3.1.2",
+    "file-loader": "^4.2.0",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.8.0",
+    "node-sass": "^4.13.0",
+    "postcss-loader": "^3.0.0",
+    "sass-loader": "^8.0.0",
+    "ts-loader": "^6.2.1",
+    "ts-node-dev": "^1.0.0-pre.44",
+    "typescript": "^3.7.2",
+    "url-loader": "^2.2.0",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.9",
+    "webpack-dev-server": "^3.9.0"
+  },
+  "dependencies": {
+    "axios": "^0.19.0",
+    "jquery": "^3.4.1",
+    "lodash": "^4.17.15"
+  }
+}

dgtly-admin/src/main/resources/templates/homeIndexSrc/src/global.d.ts

@@ -0,0 +1,35 @@
+interface Magnet {
+    menuId: string // 标示
+    row: number, // 所在行
+    col: number, // 所在列
+    rowSpan: number, // 跨行 0表示未放置
+    colSpan: number, // 跨列 0表示未放置
+    bgColor: string, // 背景颜色
+    icon: string, // 图标
+    menuName: string, // 名称
+    titleColor: string, // 字体颜色
+    titlePosition: string, // 标题位置
+    titleFontSize: string, // 标题字体大小
+    titleAlign: string, // 标题对齐方式
+    url: string,
+    appType: number, // 1 全屏 2半屏 3 新窗口
+    isrefresh: boolean, // 是否刷新
+    [index: string]: any
+}
+interface IMsg {
+    title: string,
+    createDate: string,
+    msgType: number,
+    sendUserName: string
+}
+interface IMsgList {
+    data: IMsg[]
+    pageIndex: number
+    pageTotal: number
+    rowTotal: number
+}
+interface IResult {
+    code: number,
+    msg: string,
+    data: any
+}

dgtly-admin/src/main/resources/templates/homeIndexSrc/src/index.html

@@ -0,0 +1,260 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="./assets/styles/font-awesome.css">
+    <link rel="stylesheet" href="./assets/styles/bootstrap.css">
+    <link rel="stylesheet" href="./assets/styles/font-awesome.min.css">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+</head>
+
+<body>
+    <div class="y-container">
+        <div class="gbimg"></div>
+
+        <div class="layout">
+            <div class="nav">
+                <!-- <div class="admin-wrapper"></div>
+                <i class="icon-reorder"></i> -->
+                <div class="logo">
+                    <img src="./assets/imgs/logo.png" alt="" srcset="">
+                </div>
+                <ul>
+                    <li>
+                        <a class="toolbar">
+                            <i class="glyphicon glyphicon-envelope"></i>
+                        </a>
+
+                        <ul class="msgs">
+                            <li>
+                                <a href="javascript:void(0);">
+                                    <i class="fa fa-envelope"></i>
+                                    <strong>查看所有消息</strong>
+                                </a>
+
+                            </li>
+                        </ul>
+
+                    </li>
+                    <li>
+                        <a class="toolbar">
+                            <i class="glyphicon glyphicon-cog"></i>
+                        </a>
+                        <ul class="themeSetting">
+                            <li>
+                                <ul class="bgColor">
+
+                                    <li><a style="background-color: #CC0000"></a></li>
+
+                                    <li><a style="background-color: #955700"></a></li>
+
+                                    <li><a style="background-color: #A48A00"></a></li>
+
+                                    <li><a style="background-color: #FF9600"></a></li>
+
+                                    <li><a style="background-color: #FFCC00"></a></li>
+
+                                    <li><a style="background-color: #FFF000"></a></li>
+
+                                    <li><a style="background-color: #C7CD00"></a></li>
+
+                                    <li><a style="background-color: #6FAB04"></a></li>
+
+                                    <li><a style="background-color: #027902"></a></li>
+
+                                    <li><a style="background-color: #0092DB"></a></li>
+
+                                    <li><a style="background-color: #5D8CC2"></a></li>
+
+                                    <li><a style="background-color: #005EC2"></a></li>
+
+                                    <li><a style="background-color: #64128C"></a></li>
+
+                                    <li><a style="background-color: #980E66"></a></li>
+
+                                    <li><a style="background-color: #ED0175"></a></li>
+
+                                    <li><a style="background-color: #000000"></a></li>
+
+                                    <li><a style="background-color: #380000"></a></li>
+
+                                    <li><a style="background-color: #585858"></a></li>
+
+                                    <li><a style="background-color: #9a67cb"></a></li>
+
+                                </ul>
+
+                            </li>
+                            <li class="divider" />
+                            <li>
+                                <div class="bgImg">
+                                    <div>
+                                        <span>隐藏背景图片</span>
+                                        <input type="checkbox" checked>
+                                    </div>
+                                    <ul>
+                                        <li><img src="./assets/imgs/bgImg_1.jpg" alt=""></li>
+                                        <li><img src="./assets/imgs/bgImg_2.jpg" alt=""></li>
+                                        <li><img src="./assets/imgs/bgImg_3.jpg" alt=""></li>
+                                        <li><img src="./assets/imgs/bgImg_4.jpg" alt=""></li>
+                                        <li><img src="./assets/imgs/bgImg_5.jpg" alt=""></li>
+                                        <li><img src="./assets/imgs/bgImg_6.jpg" alt=""></li>
+                                        <li><img src="./assets/imgs/bgImg_7.png" alt=""></li>
+                                        <li><img src="./assets/imgs/bgImg_8.png" alt=""></li>
+                                    </ul>
+                                </div>
+                            </li>
+                            <li class="divider" />
+                            <li>
+                                <a href="#" class="magnetManager"><i class="glyphicon glyphicon-wrench"></i>磁贴设置</a>
+                            </li>
+                        </ul>
+
+
+                    </li>
+                    <li>
+
+                        <a class="toolbar">
+                            <i class="glyphicon glyphicon-plus-sign"></i>
+                        </a>
+                        <ul class="apps ">
+                            <li class="divider"></li>
+                            <li class="none">
+                                <h4>请拖到桌面</h4>
+                                <h4>无可添加应用</h4>
+                            </li>
+                        </ul>
+
+                    </li>
+                    <li>
+                        <a class="userinfo">
+                            <img src="./assets/imgs/tx.png">
+                            <span>
+                                Welcome
+                                <br>
+                                用户名
+                            </span>
+                            <i class="ace-icon fa fa-caret-down"></i>
+                        </a>
+                        <ul class="userinfos">
+                            <!-- <li>
+                                <a><i class="ace-icon fa fa-user"></i>个人中心</a>
+                            </li>
+                            <li class="divider"></li> -->
+                            <li><a href="/logout"><i class="ace-icon fa fa-power-off"></i>退出 </a></li>
+                        </ul>
+                    </li>
+                </ul>
+            </div>
+            <div class="content">
+                <div class="content-container">
+                    <div class="model"></div>
+                    <div class="tc del">
+                        <div class="arrow"></div>
+                        <h3>磁铁删除</h3>
+                        <div class="tc-content">
+                            <p>确认删除该桌面磁贴？</p>
+                            <div class="btns">
+                                <button>取消</button>
+                                <button class="qr">确认</button>
+                            </div>
+
+                        </div>
+                    </div>
+                    <div class="tc edit">
+                        <div class="arrow"></div>
+                        <h3>磁铁设置</h3>
+                        <div class="tc-content">
+                            <h3>文本内容</h3>
+                            <p magnet="title"></p>
+                            <h3>图标尺寸</h3>
+                            <div>
+                                行:
+                                <select magnet="rowSpan">
+                                    <option value="1">1</option>
+                                    <option value="2">2</option>
+                                    <option value="3">3</option>
+                                    <option value="4">4</option>
+                                </select>
+                                列:
+                                <select magnet="colSpan">
+                                    <option value="1">1</option>
+                                    <option value="2">2</option>
+                                    <option value="3">3</option>
+                                    <option value="4">4</option>
+                                </select>
+
+                            </div>
+                            <h3>字体大小</h3>
+                            <div>
+                                <select magnet="titleFontSize">
+                                    <option value="12px">12px</option>
+                                    <option value="14px">14px</option>
+                                    <option value="16px">16px</option>
+                                    <option value="18px">18px</option>
+                                    <option value="24px">24px</option>
+                                </select>
+                            </div>
+                            <h3>对齐文本</h3>
+                            <div class="btns">
+
+                                <div magnet="titleAlign">
+                                    <button type="button" data="left" class="glyphicon glyphicon-align-left"></button>
+                                    <button type="button" data="center"
+                                        class="glyphicon glyphicon-align-center"></button>
+                                    <button type="button" data="right" class="glyphicon glyphicon-align-right"></button>
+
+                                </div>
+                                <div magnet="titlePosition">
+                                    <button type="button" data="top">Top</button>
+                                    <button type="button" data="bottom">Bottom</button>
+                                </div>
+
+                            </div>
+                            <h3>背景颜色</h3>
+                            <ul class="boxcolor" magnet="bgColor">
+                                <li class="Purple"></li>
+                                <li class="violet"></li>
+                                <li class="DeliciousRed"></li>
+                                <li class="Red"></li>
+                                <li class="JuicyOrange"></li>
+                                <li class="ZestyGreen"></li>
+                                <li class="MintyAqua"></li>
+                                <li class="BoldBlue"></li>
+                                <li class="Black"></li>
+                                <li class="Gray"></li>
+                            </ul>
+                            <h3>文本颜色</h3>
+                            <ul class="boxcolor" magnet="titleColor">
+                                <li class="Purple"></li>
+                                <li class="violet"></li>
+                                <li class="DeliciousRed"></li>
+                                <li class="JuicyOrange"></li>
+                                <li class="ZestyGreen"></li>
+                                <li class="MintyAqua"></li>
+                                <li class="BoldBlue"></li>
+                                <li class="Black"></li>
+                                <li class="Gray"></li>
+                                <li class="White"></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div class="scroll">
+                    <div></div>
+                </div>
+            </div>
+            <div class="box">
+                <div class="close"></div>
+            </div>
+        </div>
+
+
+    </div>
+
+</body>
+
+</html>

dgtly-admin/src/main/resources/templates/homeIndexSrc/src/index.ts

@@ -0,0 +1,89 @@
+import $ from "jquery";
+import { post } from "./utils/request";
+// import { getTimeSpan, dateFormat } from './utils';
+import { debounce } from "lodash";
+import "./styles";
+import magnetManager from "./modules/index";
+$(async () => {
+  const container = $(".y-container"),
+    gbimg = $(">.gbimg", container),
+    themeSetting = $(".themeSetting", container).on("hidden", () => {
+      themeSetting.addClass("hide");
+      save(themeInfo);
+      setTimeout(() => themeSetting.removeClass("hide"), 500);
+    }),
+    bgColors = Array.from(
+      $(".boxcolor:eq(0) li").map((i, item) => $(item).css("backgroundColor"))
+    ),
+    save = debounce(x => post("/homeIndex/saveThemeInfo", x), 1e3);
+  let {
+    data: { themeInfo, magnets }
+  }: any = await post("/homeIndex/getThemeAndLayout");
+  themeInfo = themeInfo || {};
+  themeInfo.bgColorIndex = themeInfo.bgColorIndex | 0;
+  themeInfo.bgImgIndex = themeInfo.bgImgIndex | 0;
+  themeInfo.hideImg = themeInfo.hideImg === "true";
+  magnets.forEach((x: any) => {
+    x.appType = x.appType | 0;
+    x.row = x.row | 0;
+    x.col = x.col | 0;
+    x.rowSpan = x.rowSpan | 0;
+    x.colSpan = x.colSpan | 0;
+    x.bgColor =
+      x.bgColor || bgColors[Math.floor(Math.random() * bgColors.length)];
+    x.titleColor = x.titleColor || "#fff";
+    x.titlePosition = x.titlePosition || "bottom";
+    x.titleFontSize = x.titleFontSize || "14px";
+    x.titleAlign = x.titleAlign || "center";
+  });
+  magnetManager.init(container, magnets);
+  $(" .bgColor a", themeSetting).each((i, item) => {
+    const a = $(item).click(() => {
+      $(".glyphicon.glyphicon-ok", themeSetting).removeClass();
+      a.addClass("glyphicon glyphicon-ok");
+      container.css("background-color", a.css("background-color"));
+      themeInfo.bgColorIndex = i;
+      themeSetting.trigger("hidden");
+      return false;
+    });
+    i === themeInfo.bgColorIndex && a.click();
+  });
+  $(" .bgImg img", themeSetting).each((i, item) => {
+    const img = $(item).click(() => {
+        gbimg.css({
+          backgroundImage: `url(${src})`
+        });
+        themeInfo.bgImgIndex = i;
+        themeSetting.trigger("hidden");
+      }),
+      src = img.attr("src");
+    i === themeInfo.bgImgIndex && img.click();
+  });
+  const bgimgdel = $(".bgImg input", themeSetting).click(e => {
+    themeInfo.hideImg = (e.target as HTMLInputElement).checked;
+    gbimg[themeInfo.hideImg ? "removeClass" : "addClass"]("show");
+    save(themeInfo);
+  });
+  themeInfo.hideImg || bgimgdel.click();
+  $(".magnetManager", themeSetting).click(() => {
+    themeSetting.trigger("hidden");
+    magnetManager.showMask();
+  });
+  const userinfo = $(".userinfo").click(() => {
+    const ul = userinfo.next().slideToggle();
+    $(document).one("click", () => {
+      ul.slideUp();
+    });
+    return false;
+  });
+
+  // const { data: msglist, rowTotal } = await post('/sysmsg/getSysMsgList', { isRead: false, pageIndex: 0, pageSize: 3 });
+  // const msgs_arr: JQuery<HTMLElement>[] = [];
+  // msglist.forEach((x: any) => {
+  //     const li = $(`<li><a href="javascript:void(0);" ><div class="msg_title"><strong>${x.title}</strong>. <small>${getTimeSpan(x.createDate)}</small></div><small class="fl">${dateFormat(x.createDate, 'yyyy.MM.dd - hh:mm')}</small> <small class="fr">from:${x.msgType === 1 ? x.sendUserName : '系统消息'}</small></a></li>`);
+
+  //     msgs_arr.push(li, $('<li>').addClass('divider'));
+  // });
+  // const msga = $('.msgs', container).prepend(msgs_arr).prev();
+  // if (rowTotal) { msga.append($('<span>').text(rowTotal)) }
+});

dgtly-admin/src/main/resources/templates/homeIndexSrc/src/login.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+</head>
+<style>
+    .imgcode {
+        width: 120px;
+        height: 45px;
+    }
+</style>
+
+<body>
+    <form>
+        <h4>登录：</h4>
+        <input type="text" name="username" placeholder="用户名" value="admin">
+        <input type="password" name="password" placeholder="密码" value="admin123">
+        <div>
+            <input type="text" name="validateCode" placeholder="验证码" maxlength="5">
+            <img src="/api/captcha/captchaImage?type=math" class="imgcode" width="85%">
+        </div>
+        <input type="hidden" name="rememberMe" value='true'>
+        <button>登录</button>
+    </form>
+</body>
+
+</html>

dgtly-admin/src/main/resources/templates/homeIndexSrc/src/login.ts

@@ -0,0 +1,17 @@
+import $ from 'jquery';
+import { post } from './utils/request';
+
+
+$(() => {
+    const form = $('form').submit(() => false);
+    const imgcode = $('.imgcode').click(() => {
+            imgcode.attr('src', imgcodesrc + '&s=' + new Date().getMilliseconds());
+        }),
+        imgcodesrc = imgcode.attr('src');
+    $('button').click(async () => {
+        const { code, msg } = await post('/login', form.serialize());
+        if (code !== 0) return alert(msg || '登陆失败');
+        location.href = '/';
+    });
+});
+

dgtly-admin/src/main/resources/templates/homeIndexSrc/src/modules/drag.ts

@@ -0,0 +1,107 @@
+import $ from 'jquery';
+import grid from './grid';
+import model from './index';
+class Drag {
+    public oSelf: JQuery<HTMLElement> | null = null
+    private targetPosition: { left: number, top: number } | null = null
+    private mouseClientX = 0
+    private mouseCurrentX = 0
+    private targetOffsetX = 0
+    private targetOffsetY = 0
+    public targetRowSpan = 0
+    public targetColSpan = 0
+    public model: JQuery<HTMLElement> | null = null
+    public container: JQuery<HTMLElement> | null = null
+    private _move: ((e: JQuery.MouseMoveEvent) => Boolean) | null = null
+    public init(container: JQuery<HTMLElement>) {
+        this.model = $('.model', this.container = container);
+    }
+    public move(e: JQuery.MouseMoveEvent) {
+        this._move && this._move(e);
+    }
+    public targetDown({ clientX, clientY, currentTarget }: JQuery.MouseDownEvent) {
+        this.oSelf = $(currentTarget);
+        const { rowSpan, colSpan } = this.oSelf.trigger('clear').data('magnet');
+        this.model!.css({
+            width: colSpan * grid.size - grid.Margin,
+            height: rowSpan * grid.size - grid.Margin,
+            ...this.oSelf.position()
+        }).show();
+        this.targetRowSpan = rowSpan;
+        this.targetColSpan = colSpan;
+        this.targetPosition = this.oSelf.position();
+        this.mouseClientX = this.mouseCurrentX = clientX;
+        const { left, top } = this.oSelf.offset()!;
+        this.targetOffsetX = clientX - left;
+        this.targetOffsetY = clientY - top;
+        this._move = this.targetMove;
+        return false;
+    }
+    private targetMove({ clientY, clientX, screenX }: JQuery.MouseMoveEvent) {
+        if (!this.oSelf || !this.container) return false;
+        const offset = this.container.offset()!,
+            maxLeft = this.container.width()! - this.oSelf.width()!,
+            maxTop = this.container.height()! - this.oSelf.height()!,
+            offsetX = clientX - this.mouseCurrentX,
+            left = Math.min(Math.max(clientX - offset.left - this.targetOffsetX, 0), maxLeft),
+            top = Math.min(Math.max(clientY - offset.top - this.targetOffsetY, 0), maxTop);
+        this.oSelf.css({ left, top });
+        if (screenX + 10 > window.screen.width) {
+            model.timer = model.timer || window.setInterval(() => {
+                if (left === maxLeft) { return model.resizeContainer() }
+                return model.moveContainerLeft();
+            }, 10);
+        } else if (screenX < 10) {
+            model.timer = model.timer || window.setInterval(model.moveContainerRight.bind(model), 15);
+        } else {
+            if (model.timer) {
+                clearInterval(model.timer);
+                model.timer = 0;
+            }
+            if (offsetX > 0 && left === maxLeft) {
+                model.resizeContainer(offsetX);
+            }
+        }
+        grid.check();
+        this.mouseCurrentX = clientX;
+        return false;
+    }
+    public containerDown({ clientX, currentTarget }: JQuery.MouseDownEvent) {
+        this.oSelf = $(currentTarget).addClass('move');
+        this.mouseClientX = this.mouseCurrentX = clientX;
+        this._move = this.containerMove;
+    }
+    private containerMove({ clientX }: JQuery.MouseMoveEvent) {
+        if (!this.oSelf) return false;
+        let offsetx = clientX - this.mouseCurrentX,
+            t = Math.min(Math.max(parseInt(this.oSelf.css('left')) + offsetx, model.dragWrapperWidth - this.oSelf.width()!), 0);
+
+        this.oSelf!.css('left', t);
+        model.scroll();
+        this.mouseCurrentX = clientX;
+        return false;
+    }
+    public clear({ clientX, target }: JQuery.MouseUpEvent) {
+        if (!this.oSelf || !this.model) return false;
+        if (model.timer) {
+            clearInterval(model.timer);
+            model.timer = 0;
+        }
+        const flag = clientX === this.mouseClientX;
+        if (!this.oSelf.hasClass('move')) {
+            this.oSelf.hasClass('err') && this.model.css(this.targetPosition!);
+            this.oSelf.trigger('setPosition', this.model.position());
+            this.oSelf.hasClass('addMagnet') ? this.oSelf.trigger('create') : this.oSelf.animate(this.model.position(), function () {
+                flag || $(this).trigger('save');
+            });
+            this.model.hide();
+        } else if (flag && target === this.oSelf.get(0)) {
+            model.hideMask();
+        }
+        this.oSelf.removeClass('err move');
+        this.mouseClientX = 0;
+        this.oSelf = this._move = null;
+    }
+}
+
+export default new Drag();

dgtly-admin/src/main/resources/templates/homeIndexSrc/src/modules/grid.ts

@@ -0,0 +1,96 @@
+import drag from "./drag";
+import model from "./index";
+class Grid {
+  private rows = 12;
+  private cols: number = 0;
+  public size: number = 0;
+  public Margin = 5;
+  private grid: number[][] = [];
+  public init(width: number, height: number, maxCol: number) {
+    this.size = (height / this.rows) | 0;
+    this.cols = Math.max((width / this.size) | 0, maxCol);
+    drag.container!.width(this.cols * this.size);
+    this.grid = [...Array(this.rows)].map(() => [...Array(this.cols)].fill(0));
+  }
+  public resize(height: number) {
+    this.size = (height / this.rows) | 0;
+    const width = this.cols * this.size;
+    drag.container!.animate(
+      {
+        width,
+        left: Math.min(
+          Math.max(
+            parseInt(drag.container!.css("left")),
+            model.dragWrapperWidth - width
+          ),
+          0
+        )
+      },
+      () => model.initScroll()
+    );
+  }
+  public check() {
+    if (!drag.oSelf || !drag.model) return;
+    const col = (parseInt(drag.oSelf.css("left")) / this.size) | 0,
+      row = (parseInt(drag.oSelf.css("top")) / this.size) | 0;
+    this.addCols(col - this.cols);
+    drag.oSelf[
+      this._check(row, col, drag.targetRowSpan, drag.targetColSpan)
+        ? "removeClass"
+        : "addClass"
+    ]("err");
+    drag.model.css({ top: row * this.size, left: col * this.size });
+  }
+  private _check(row: number, col: number, rowSpan: number, colSpan: number) {
+    if (row + rowSpan > this.rows) return false;
+    return !this.grid
+      .filter((r, i) => i >= row && i < row + rowSpan)
+      .map(x => x.slice(col, col + colSpan))
+      .flat(1)
+      .some(x => x);
+  }
+  public addCols(cols: number) {
+    if (cols <= 0) return;
+    this.grid.forEach(c => c.splice(c.length, 0, ...Array(cols).fill(0)));
+    this.cols += cols;
+    const xw = Math.max(this.cols * this.size - drag.container!.width()!, 0);
+    if (!xw) return;
+    drag.container!.css({
+      width: drag.container!.width()! + xw,
+      left: parseInt(drag.container!.css("left")) - xw
+    });
+    console.log(
+      drag.container!.css("width"),
+      drag.container!.width(),
+      this.cols * this.size
+    );
+  }
+  public set({ row, col, rowSpan, colSpan }: Magnet, value: number) {
+    if (!rowSpan || !colSpan) return false;
+    this.addCols(col + colSpan - this.cols);
+    return this.grid
+      .filter((r, i) => i >= row && i < row + rowSpan)
+      .forEach(x => x.splice(col, colSpan, ...Array(colSpan).fill(value)));
+  }
+  public getMax(magnet: Magnet) {
+    this.set(magnet, 0);
+    let { row, col, rowSpan, colSpan } = magnet,
+      xr = 4 - magnet.rowSpan,
+      xc = 4 - magnet.colSpan;
+    while (xr) {
+      if (this._check(row, col, rowSpan + xr, colSpan)) break;
+      xr--;
+    }
+    while (xc) {
+      if (this._check(row, col, rowSpan, colSpan + xc)) break;
+      xc--;
+    }
+    this.set(magnet, 1);
+
+    return {
+      maxRows: rowSpan + xr,
+      maxCols: colSpan + xc
+    };
+  }
+}
+export default new Grid();

dgtly-admin/src/main/resources/templates/homeIndexSrc/src/modules/index.ts

@@ -0,0 +1,475 @@
+import $ from "jquery";
+import drag from "./drag";
+import grid from "./grid";
+import { debounce } from "lodash";
+import { post } from "../utils/request";
+
+class MagnetManager {
+  private dragWrapper: JQuery<HTMLElement> | null = null;
+  private dragContainer: JQuery<HTMLElement> | null = null;
+  private scrollContainer: JQuery<HTMLElement> | null = null;
+  private appContainer: JQuery<HTMLElement> | null = null;
+  private scrollBar: JQuery<HTMLElement> | null = null;
+  private tcDel: JQuery<HTMLElement> | null = null;
+  private tcEdit: JQuery<HTMLElement> | null = null;
+  private box: JQuery<HTMLElement> | null = null;
+  private appLastLi: JQuery<HTMLElement> | null = null;
+  private nav: JQuery<HTMLElement> | null = null;
+  public dragWrapperWidth = 0;
+  private scrollWidth = 0;
+  private scrollBarWidth = 0;
+  private dragContainerHeight = 0;
+  public timer = 0;
+  private Magnets: JQuery<HTMLElement>[] = [];
+  private appCount = 0;
+  public init(wrapper: JQuery<HTMLElement>, items: Magnet[]) {
+    this.appCount = items.length;
+    this.dragWrapper = wrapper.find(".content");
+    this.nav = wrapper.find(".nav");
+    this.appContainer = this.nav.find(".apps");
+    this.appLastLi = this.appContainer.find("li:last");
+    this.dragContainer = wrapper
+      .find(".content-container")
+      .mousedown(e => drag.containerDown(e));
+    this.scrollContainer = this.dragContainer.next();
+    this.scrollBar = this.scrollContainer.find("div");
+    this.box = wrapper.find(".box");
+    this.tcDel = this.dragContainer.find(">.tc.del");
+    this.tcEdit = this.tcDel.next();
+    this.bind();
+    drag.init(this.dragContainer);
+    grid.init(
+      this.dragContainer.width()!,
+      (this.dragContainerHeight = this.dragContainer.height()!),
+      Math.max(...items.map(({ col = 0, colSpan = 0 }) => col + colSpan))
+    );
+    items.forEach(x => this.initMagnet(x));
+    this.checkAppList();
+  }
+  private initMagnet(magnet: Magnet) {
+    if (!magnet.rowSpan) return this._initMagnet(magnet);
+    const div = this.createMagnet(magnet),
+      a = $(`<a target="_blank" href="${magnet.url}" >${magnet.menuName}</a>`)
+        .addClass(magnet.titlePosition)
+        .css({
+          color: magnet.titleColor,
+          textAlign: magnet.titleAlign,
+          fontSize: magnet.titleFontSize
+        })
+        .click(() => magnet.appType === 3 || !div.trigger("showBox")),
+      i = $(`<i class="iconImg ${magnet.icon}" >`).on({
+        fontsize_change() {
+          i.css({
+            fontSize: magnet.colSpan * grid.size * 0.4 + "px"
+          });
+        }
+      });
+    div
+      .addClass("tmodel")
+      .css({
+        background: magnet.bgColor,
+        left: magnet.col * grid.size + "px",
+        top: magnet.row * grid.size + "px"
+      })
+      .append(
+        i,
+        a,
+        $("<div>")
+          .addClass("mask")
+          .append(
+            $('<img src="./assets/imgs/imgset.png">').click(() =>
+              div.trigger("showTc", [this.tcEdit])
+            ),
+            $('<img src="./assets/imgs/imgdel.png">').click(() =>
+              div.trigger("showTc", [this.tcDel])
+            )
+          )
+          .hide()
+      )
+      .on({
+        dblclick: () => a.get(0).click(),
+        mousedown: e => drag.targetDown(e),
+        titleAlign_change(e, x) {
+          a.css("textAlign", (magnet.titleAlign = x));
+          div.trigger("save");
+        },
+        titleFontSize_change(e, x) {
+          a.css("fontSize", (magnet.titleFontSize = x));
+          div.trigger("save");
+        },
+        titlePosition_change(e, x) {
+          a.removeClass().addClass((magnet.titlePosition = x));
+          div.trigger("save");
+        },
+        titleColor_change(e, x) {
+          a.css("color", (magnet.titleColor = x));
+          div.trigger("save");
+        },
+        bgColor_change(e, x) {
+          div.css("background", (magnet.bgColor = x)).trigger("save");
+        },
+        rowSpan_change(e, x) {
+          div.trigger("setSize", [x | 0, magnet.colSpan, true]);
+        },
+        colSpan_change(e, x) {
+          div.trigger("setSize", [magnet.rowSpan, x | 0, true]);
+          i.trigger("fontsize_change");
+        }
+      })
+      .appendTo(this.dragContainer!);
+    i.trigger("fontsize_change");
+    this.Magnets.push(div);
+    grid.set(magnet, 1);
+    return div;
+  }
+  private _initMagnet(magnet: Magnet) {
+    const div = this.createMagnet(magnet)
+        .append($("<i>").addClass(magnet.icon), magnet.menuName)
+        .mousedown(e => {
+          div
+            .addClass("addMagnet err")
+            .css({
+              left:
+                Math.abs(parseInt(this.dragContainer!.css("left"))) +
+                div.offset()!.left,
+              top: div.position()!.top
+            })
+            .trigger("setSize", [2, 2])
+            .appendTo(this.dragContainer!);
+          li.remove();
+          drag.targetDown(e);
+        }),
+      li = $("<li>")
+        .append(div)
+        .prependTo(this.appContainer!);
+  }
+  private createMagnet(magnet: Magnet) {
+    if (magnet.appType === 1) {
+      magnet.url = `/appIndex?menuId=${magnet.menuId}`;
+    }
+    magnet.url = `${process.env.BASE_API}${magnet.url}`;
+    const iframe = $("<iframe>").appendTo(this.box!);
+    const div = $("<div>")
+      .on({
+        clear: () => grid.set(magnet, 0),
+        setPosition(e, { left, top }: { left: number; top: number }) {
+          magnet.row = top / grid.size;
+          magnet.col = left / grid.size;
+          grid.set(magnet, 1);
+          div.trigger("setTc");
+        },
+        setSize(e, rs: number, cs: number, reset = false) {
+          div.trigger("clear");
+          magnet.rowSpan = rs;
+          magnet.colSpan = cs;
+          grid.set(magnet, 1);
+          reset && div.trigger("reset");
+          div.trigger("setTc").hasClass("addMagnet") || div.trigger("save");
+        },
+        reset() {
+          div.animate({
+            width: magnet.colSpan * grid.size - grid.Margin + "px",
+            height: magnet.rowSpan * grid.size - grid.Margin + "px",
+            left: magnet.col * grid.size + "px",
+            top: magnet.row * grid.size + "px"
+          });
+        },
+        create: () => {
+          if (div.remove().hasClass("err")) {
+            magnet.rowSpan = 0;
+            magnet.colSpan = 0;
+          }
+          this.Magnets.forEach(
+            (x, i) => x === div && this.Magnets.splice(i, 1)
+          );
+          const newdiv = this.initMagnet(magnet);
+          newdiv && newdiv.trigger("reset").trigger("save");
+          this.checkAppList();
+        },
+        showMask() {
+          div.find(".mask").fadeIn();
+        },
+        hideMask() {
+          div
+            .data("tc", null)
+            .find(".mask")
+            .fadeOut();
+        },
+        setTc() {
+          const tc = div.data("tc") as JQuery<HTMLElement> | null;
+          tc && tc.trigger("setPosition");
+        },
+        showTc: (e, tc: JQuery<HTMLElement>) => {
+          div.data(
+            "tc",
+            tc
+              .data("magnet", null)
+              .trigger("init", magnet)
+              .data("magnet", div)
+              .trigger("setPosition")
+          );
+        },
+        showBox: () => {
+          if (magnet.appType === 2) {
+            this.box!.addClass("t");
+            this.nav!.css("background-color", magnet.bgColor);
+          }
+          if (!iframe.attr("src") || magnet.isrefresh)
+            iframe.attr("src", magnet.url);
+          iframe
+            .show()
+            .siblings("iframe")
+            .hide();
+          this.box!.fadeIn(800).addClass("open");
+        },
+        save: async () => {
+          // 目前还无法根据返回data中的信息判断是否操作成功
+          await post("/homeIndex/saveModelLayout", magnet);
+          // const { status } = ;
+          // status || alert('保存失败');
+        }
+      })
+      .data("magnet", magnet);
+    return div;
+  }
+  private checkAppList() {
+    if (this.Magnets.length === this.appCount)
+      return this.appLastLi!.addClass("none");
+    this.appLastLi!.removeClass("none");
+  }
+  private bind() {
+    this.box!.find(">.close").click(
+      () =>
+        this.nav!.css("background-color", "rgba(255, 255, 255, 0.4)") &&
+        this.box!.removeClass("open").fadeOut(1e3, () =>
+          this.box!.removeClass("t")
+        )
+    );
+    this.tcDel!.find("button")
+      .click(() => !this.tcDel!.fadeOut(() => this.tcDel!.data("magnet", null)))
+      .last()
+      .click(() => {
+        const div = this.tcDel!.data("magnet") as JQuery<HTMLElement> | null;
+        div &&
+          div
+            .data("tc", null)
+            .trigger("setSize", [0, 0])
+            .trigger("create");
+      });
+    const magnets = $(
+      "[magnet]",
+      this.tcEdit!.on({
+        init(e, magnet: Magnet) {
+          magnets.trigger("_init", magnet);
+        },
+        validate: () => {
+          const div = this.tcEdit!.data("magnet") as JQuery<HTMLElement> | null,
+            magnet = div && (div.data("magnet") as Magnet);
+          if (!magnet) return;
+          const { maxRows, maxCols } = grid.getMax(magnet),
+            selects = this.tcEdit!.find("select:lt(2)");
+          selects.find(">").removeAttr("disabled");
+          selects.each((i, item) => {
+            $(item)
+              .find(`>:gt(${i ? maxCols : maxRows - 1})`)
+              .attr("disabled", "disabled");
+          });
+        }
+      })
+    ).each((i, item) => {
+      const $item = $(item).on({
+          save: (e, val) => {
+            const div = this.tcEdit!.data("magnet") as JQuery<
+              HTMLElement
+            > | null;
+            div && div.trigger(`${field}_change`, val);
+          }
+        }),
+        field = $item.attr("magnet")!;
+      switch (item.tagName.toLowerCase()) {
+        case "p":
+          $item.on({
+            _init(e, { menuName }: Magnet) {
+              $item.text(menuName);
+            }
+          });
+          break;
+        case "select":
+          $item.on({
+            change: () => {
+              $item.trigger("save", $item.val());
+              this.tcEdit!.trigger("validate");
+            },
+            _init(e, { [field]: x }: Magnet) {
+              $item.val(x);
+            }
+          });
+
+          break;
+        case "div":
+          $(
+            "button",
+            $item.on({
+              _init(e, { [field]: x }: Magnet) {
+                $item.find(`[data=${x}]`).click();
+              }
+            })
+          ).each((i, item) => {
+            const btn = $(item).click(() => {
+                btn
+                  .addClass("active")
+                  .siblings()
+                  .removeClass("active");
+                $item.trigger("save", data);
+              }),
+              data = btn.attr("data");
+          });
+          break;
+        case "ul":
+          $(
+            "li",
+            $item.on({
+              _init(e, { [field]: x }: Magnet) {
+                $item.find("li").each((i, item) => {
+                  const $item = $(item);
+                  $item.css("background-color") === x && $item.click();
+                });
+              }
+            })
+          ).each((i, item) => {
+            const li = $(item).click(() => {
+              li.addClass("glyphicon glyphicon-ok")
+                .siblings()
+                .removeClass("glyphicon glyphicon-ok");
+              $item.trigger("save", li.css("background-color"));
+            });
+          });
+          break;
+      }
+    });
+    [this.tcDel!, this.tcEdit!].forEach(tc =>
+      tc.on({
+        setPosition: () => {
+          const div = tc.data("magnet") as JQuery<HTMLElement> | null;
+          if (!div) return;
+          const magnet = div.data("magnet") as Magnet;
+          const tc_w = tc.outerWidth(true)!,
+            tc_h = tc.outerHeight(true)!,
+            _left = div.offset()!.left!,
+            r =
+              tc_w + _left + magnet.colSpan * grid.size < this.dragWrapperWidth,
+            mt =
+              16 +
+              Math.max(
+                magnet.row * grid.size - this.dragContainerHeight + tc_h,
+                0
+              );
+          tc.animate(
+            {
+              left: r
+                ? (magnet.col + magnet.colSpan) * grid.size
+                : magnet.col * grid.size - tc_w,
+              top: Math.min(
+                magnet.row * grid.size,
+                this.dragContainerHeight - tc_h
+              )
+            },
+            () =>
+              tc
+                .find(".arrow")
+                [r ? "removeClass" : "addClass"]("r")
+                .css("marginTop", mt)
+          )
+            .fadeIn(() => tc.trigger("validate"))
+            .siblings(".tc")
+            .fadeOut();
+        }
+      })
+    );
+    $(document).on({
+      mousemove: e => drag.move(e),
+      mouseup: e => drag.clear(e)
+    });
+    $(window)
+      .resize(
+        debounce(() => {
+          this.dragWrapperWidth = this.dragWrapper!.width()!;
+          this.scrollWidth = this.scrollContainer!.width()!;
+          grid.resize(
+            (this.dragContainerHeight = this.dragContainer!.height()!)
+          );
+          this.Magnets.forEach(x => x.trigger("reset"));
+        }, 300)
+      )
+      .trigger("resize");
+  }
+  public moveContainerLeft() {
+    let t = Math.min(
+      this.dragContainer!.width()! -
+        drag.oSelf!.width()! -
+        parseInt(drag.oSelf!.css("left")),
+      10
+    );
+    this.dragContainer!.css(
+      "left",
+      parseInt(this.dragContainer!.css("left")) - t
+    );
+    drag.oSelf!.css("left", drag.oSelf!.position().left + t);
+    if (t < 10 && this.timer) {
+      clearInterval(this.timer);
+      this.timer = setInterval(this.resizeContainer.bind(this), 15);
+    }
+    grid.check();
+    this.scroll();
+  }
+  public moveContainerRight() {
+    const _left = parseInt(this.dragContainer!.css("left")),
+      t = Math.min(Math.min(Math.abs(_left), 10), 10),
+      left = _left + t;
+    this.dragContainer!.css({ left });
+    drag.oSelf!.css("left", parseInt(drag.oSelf!.css("left")) - t);
+    if (!left && this.timer) {
+      clearInterval(this.timer);
+      this.timer = 0;
+    }
+    grid.check();
+    this.scroll();
+  }
+
+  public resizeContainer(size = 10) {
+    if (!this.dragContainer || !drag.oSelf) return;
+    this.dragContainer.css({
+      width: this.dragContainer.width()! + size,
+      left: parseInt(this.dragContainer.css("left")) - size
+    });
+    drag.oSelf.css("left", parseInt(drag.oSelf.css("left")) + size);
+    grid.check();
+    this.initScroll();
+  }
+  public initScroll() {
+    this.scrollBar!.width(
+      (this.scrollBarWidth =
+        Math.pow(this.scrollWidth, 2) / this.dragContainer!.width()!)
+    );
+    this.scroll();
+  }
+  public scroll() {
+    const hidden = this.dragContainer!.width()! - this.scrollWidth,
+      rate =
+        (hidden - Math.abs(parseInt(this.dragContainer!.css("left")))) / hidden;
+    this.scrollBar!.css(
+      "right",
+      (this.scrollWidth - this.scrollBarWidth) * rate
+    );
+  }
+  public showMask() {
+    this.Magnets.forEach(x => x.trigger("showMask"));
+  }
+  public hideMask() {
+    this.tcDel!.fadeOut();
+    this.tcEdit!.fadeOut();
+    this.Magnets.forEach(x => x.trigger("hideMask"));
+  }
+}
+
+export default new MagnetManager();

dgtly-admin/src/main/resources/templates/homeIndexSrc/src/styles/index.scss

@@ -0,0 +1,625 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+html,
+body {
+  width: 100%;
+  height: 100%;
+  .addMagnet {
+    position: absolute;
+    background-color: #fbf4f4;
+    z-index: 5;
+    width: 208px;
+
+    cursor: pointer;
+    line-height: 32px;
+    height: 32px;
+    padding-left: 12px;
+    border-radius: 6px;
+    i {
+      display: inline-block;
+      width: 32px;
+      text-align: center;
+      font-size: 22px;
+    }
+  }
+}
+li {
+  list-style: none;
+}
+a {
+  color: #333;
+  cursor: pointer;
+  text-decoration: none !important;
+  &:hover {
+    color: #333;
+  }
+}
+.fl {
+  float: left;
+}
+.fr {
+  float: right;
+}
+.y-container {
+  width: 100%;
+  height: 100%;
+  // background: red;
+  overflow: hidden;
+  transition: background-Color 1s;
+  .hide {
+    display: none !important;
+  }
+  > .gbimg {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    // background: url(../imgs/bg03.jpg);
+    background-size: cover;
+    opacity: 0;
+    transition: all 2s;
+    &.show {
+      opacity: 0.5;
+    }
+  }
+  .layout {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    > .nav {
+      background-color: rgba(255, 255, 255, 0.4);
+      height: 50px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      padding: 0 5px;
+      transition: background-color 1s;
+      z-index: 11;
+      // .admin-wrapper {
+      //   float: left;
+      //   width: 71px;
+      //   height: 50px;
+      //   line-height: 50px;
+      //   text-align: center;
+      //   transform-origin: 0 100%;
+      //   transform: rotate(-45deg);
+      //   background: rgba(255, 255, 255, 0.4);
+      //   box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
+      // }
+      // .icon-reorder {
+      //   position: absolute;
+      //   top: 7px;
+      //   left: 5px;
+      //   font-size: 20px;
+      //   color: #fff;
+      // }
+      .logo {
+        float: left;
+        height: 50px;
+        padding: 5px;
+        // margin-left: -30px;
+        img {
+          height: 100%;
+        }
+      }
+      > ul {
+        float: right;
+        height: 50px;
+        margin-bottom: 0;
+        > li {
+          float: left;
+
+          height: 100%;
+          position: relative;
+          font-size: 18px;
+          a.toolbar {
+            display: block;
+            width: 50px;
+            color: #fff;
+            text-align: center;
+            border-right: 1px #fff solid;
+            position: relative;
+            height: 100%;
+            padding: 15px;
+            span {
+              position: absolute;
+              left: auto;
+              right: 0px;
+              top: 5px;
+              background-color: #f8ac59;
+              display: inline-block;
+              min-width: 10px;
+              padding: 3px 7px;
+              font-size: 12px;
+              font-weight: bold;
+              line-height: 1;
+              color: #fff;
+              text-align: center;
+              white-space: nowrap;
+              vertical-align: baseline;
+
+              border-radius: 10px;
+            }
+          }
+          a.userinfo {
+            padding: 5px;
+            display: block;
+            height: 100%;
+            img {
+              border-radius: 100%;
+              border: 2px solid #fff;
+              max-width: 40px;
+              width: 40px;
+              height: 40px;
+            }
+            span {
+              display: inline-block;
+              vertical-align: middle;
+              line-height: 20px;
+              color: #777777;
+              text-shadow: 0 1px 0 #ffffff;
+              font-size: 16px;
+              text-align: center;
+              margin-right: 3px;
+            }
+            i {
+              color: #000;
+            }
+          }
+          > ul {
+            position: absolute;
+            top: 100%;
+            right: 0;
+            margin: 0;
+            background: #fff;
+            font-size: 14px;
+            border: 1px solid rgba(0, 0, 0, 0.15);
+            border-radius: 4px;
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+            display: none;
+            width: 220px;
+            padding: 5px;
+            z-index: 3;
+            li.divider {
+              height: 1px;
+              margin: 10px 0;
+              background: #e5e5e5;
+            }
+            &.msgs {
+              padding: 10px;
+              width: 310px;
+              a {
+                display: block;
+                overflow: hidden;
+                .msg_title {
+                  margin-bottom: 5px;
+                }
+                .fl {
+                  color: #777;
+                }
+              }
+              li:last-child {
+                text-align: center;
+              }
+            }
+            &.apps li {
+              div {
+                cursor: pointer;
+                line-height: 32px;
+                height: 32px;
+                padding-left: 12px;
+                border-radius: 6px;
+                &:hover {
+                  background-color: #fbf4f4;
+                  i {
+                    font-size: 22px;
+                  }
+                }
+                i {
+                  display: inline-block;
+                  width: 32px;
+                  text-align: center;
+                  transition: font-size 0.3s;
+                }
+              }
+              h4 {
+                cursor: default;
+                margin: 10px;
+                text-align: center;
+                color: #777;
+                font-size: 18px;
+                text-align: center;
+                &:first-child {
+                  display: block;
+                }
+                &:last-child {
+                  display: none;
+                }
+              }
+              &.none h4 {
+                &:first-child {
+                  display: none;
+                }
+                &:last-child {
+                  display: block;
+                }
+              }
+            }
+            &.themeSetting li {
+              ul {
+                overflow: hidden;
+              }
+              .bgColor li {
+                margin: 3px;
+                float: left;
+                cursor: pointer;
+                a {
+                  display: block;
+                  width: 20px;
+                  height: 20px;
+                  color: #fff;
+                  line-height: 20px;
+                  text-align: center;
+                }
+              }
+
+              .bgImg li {
+                float: left;
+                width: 40px;
+                height: 40px;
+                margin: 5px;
+                cursor: pointer;
+                background-color: rgb(0, 146, 219);
+                img {
+                  height: 100%;
+                  width: 100%;
+                  border: 2px solid transparent;
+                  &:hover {
+                    border: 2px solid #5ab3df;
+                    box-shadow: 0px 0px 3px 0px #5ab3df;
+                  }
+                }
+              }
+              .magnetManager {
+                display: block;
+                text-align: center;
+                color: #333;
+                i {
+                  margin-right: 5px;
+                }
+              }
+            }
+            &.userinfos {
+              width: 160px;
+              padding: 5px 0;
+              a {
+                padding: 3px 20px;
+                display: block;
+                &:hover {
+                  background: #f5f5f5;
+                }
+              }
+
+              i {
+                margin-right: 5px;
+              }
+            }
+          }
+          &:hover {
+            .toolbar {
+              background: rgba(238, 238, 238, 0.5);
+            }
+            .toolbar + ul {
+              display: block;
+              z-index: 2;
+            }
+          }
+        }
+      }
+    }
+    > .content {
+      padding: 55px 15px 5px;
+      height: 100%;
+      box-sizing: border-box;
+      .content-container {
+        width: 100%;
+        height: 100%;
+        min-height: 490px;
+        position: relative;
+        .err {
+          border-color: #ce1126 !important;
+          box-shadow: 0px 0px 5px 3px #ce1126 !important;
+          cursor: not-allowed;
+          z-index: 2;
+        }
+        &.move {
+          cursor: move;
+        }
+        > div {
+          position: absolute;
+        }
+        .model {
+          background: #00b7c6;
+          opacity: 0.3;
+          display: none;
+        }
+        .tmodel {
+          &:hover {
+            border-color: rgb(95, 95, 95);
+            box-shadow: 0px 0px 5px 3px rgb(95, 95, 95);
+            z-index: 1;
+          }
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 0;
+          height: 0;
+          overflow: hidden;
+          transition: background-color 1s;
+          i {
+            font-size: 55px;
+            color: #fff;
+          }
+          a {
+            display: block;
+            position: absolute;
+            color: #fff;
+            cursor: pointer;
+            width: 100%;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            padding: 0 5px;
+            transition: all 1s;
+            &.top {
+              top: 0;
+            }
+            &.bottom {
+              bottom: 0;
+            }
+          }
+          .mask {
+            background: rgba(0, 0, 0, 0.5);
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0px;
+            left: 0px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            img {
+              width: 40%;
+              cursor: pointer;
+            }
+          }
+        }
+        .tc {
+          position: absolute;
+          border-radius: 6px;
+          display: none;
+          margin: 0 10px;
+          z-index: 2;
+          .arrow {
+            border: 10px solid transparent;
+            border-right-color: #fff;
+            position: absolute;
+            left: -20px;
+            &.r {
+              border-right-color: transparent;
+              border-left-color: #fff;
+              right: -20px;
+              left: auto;
+            }
+          }
+
+          > h3 {
+            background-color: #f7f7f7;
+            border-bottom: 1px solid #ebebeb;
+            padding: 8px 14px;
+            margin: 0;
+            border-radius: 5px 5px 0 0;
+            font-size: 14px;
+          }
+          > .tc-content {
+            background-color: #fff;
+            padding: 9px 14px;
+            border-radius: 0 0 5px 5px;
+          }
+          &.del .tc-content {
+            p {
+              margin: 5px;
+              font-size: 16px;
+              color: #777;
+            }
+            .btns {
+              text-align: right;
+              border-top: 1px solid #e5e5e5;
+              padding-top: 10px;
+              button {
+                padding: 1px 5px;
+                font-size: 12px;
+                border-radius: 3px;
+                line-height: 1.5;
+                border-color: #ccc;
+                color: #333;
+                &.qr {
+                  color: #fff;
+                  background-color: #d9534f;
+                  border-color: #d43f3a;
+                  margin-left: 5px;
+                }
+              }
+            }
+          }
+          &.edit .tc-content {
+            h3 {
+              font-size: 14px;
+              font-weight: bold;
+              margin: 5px 0;
+            }
+            select {
+              margin: 3px;
+              outline: none;
+            }
+            button {
+              padding: 3px;
+              margin: 3px;
+              background: #fff;
+              outline: none;
+              border-radius: 3px;
+              line-height: 1.5;
+              color: #333;
+              background-color: #fff;
+              border-color: #ccc;
+              &:hover,
+              &.active {
+                background-color: #e6e6e6;
+                border-color: #adadad;
+              }
+            }
+            ul {
+              overflow: hidden;
+              li {
+                float: left;
+                margin-right: 3px;
+                width: 20px;
+                height: 20px;
+                cursor: pointer;
+              }
+            }
+          }
+        }
+      }
+      &:hover .scroll {
+        opacity: 1;
+      }
+      .scroll {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 3px;
+        background: #fff;
+        opacity: 0;
+        transition: opacity 0.5s;
+        div {
+          height: 100%;
+          background: rgba(0, 0, 0, 0.5);
+          position: absolute;
+          width: 100%;
+        }
+      }
+    }
+    > .box {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      transition: all 1s;
+      transform: rotateY(180deg) scale(0.01);
+      display: none;
+      background: #fff;
+      &.open {
+        transform: rotateY(0deg) scale(1);
+        z-index: 12;
+      }
+      &.t {
+        margin-top: 50px;
+      }
+      iframe {
+        width: 100%;
+        height: 100%;
+        display: none;
+      }
+      .close {
+        cursor: pointer;
+        border: 3px solid rgba(255, 255, 255, 1);
+        background: rgba(0, 0, 0, 0.3);
+        border-radius: 50%;
+        position: absolute;
+        left: 10px;
+        bottom: 10px;
+        width: 50px;
+        height: 50px;
+        transform: rotate(45deg);
+        transition: 0.2s;
+        opacity: 0.5;
+        &::before {
+          content: "";
+          position: absolute;
+          background: #fff;
+          top: 47%;
+          left: 10%;
+          height: 6%;
+          width: 80%;
+        }
+        &::after {
+          content: "";
+          position: absolute;
+          background: #fff;
+          top: 10%;
+          left: 47%;
+          height: 80%;
+          width: 6%;
+        }
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+    }
+  }
+}
+
+.boxcolor {
+  .glyphicon {
+    color: #fff;
+    text-align: center;
+  }
+  .Purple {
+    background-color: rgb(79, 33, 112);
+  }
+  .DeliciousRed {
+    background-color: #cc0000;
+  }
+  .Black {
+    background-color: rgb(0, 0, 0);
+  }
+  .Gray {
+    background-color: rgb(95, 95, 95);
+  }
+  .White {
+    background-color: rgb(255, 255, 255);
+    border: 1px solid #ccc;
+    &.glyphicon {
+      color: #000;
+    }
+  }
+  .JuicyOrange {
+    background-color: #ff9600;
+  }
+  .ZestyGreen {
+    background-color: #c7cd00;
+  }
+  .ToastyYellow {
+    background-color: rgb(252, 209, 22);
+  }
+  .MintyAqua {
+    background-color: #0092db;
+  }
+  .BoldBlue {
+    background-color: rgb(0, 54, 163);
+  }
+  .violet {
+    background-color: #9f0e66;
+  }
+
+  .Red {
+    background-color: #f95602;
+  }
+}

dgtly-admin/src/main/resources/templates/homeIndexSrc/src/utils/index.ts

@@ -0,0 +1,51 @@
+
+export const parseDate = (s: string) => new Date(Date.parse(s.replace(/-/g, '/')));
+
+export const getTimeSpan = (s: string | Date) => {
+    const date = typeof s === 'string' ? parseDate(s) : s;
+    const second = (new Date().getTime() - date.getTime()) / 1000;
+    if (second < 60) {
+        return second + '秒前';
+    }
+    if (second < 3600) {
+        return Math.floor(second / 60) + '分钟前';
+    }
+    if (second < 3600 * 24) {
+        return Math.floor(second / 60 / 60) + '小时前';
+    }
+    if (second < 24 * 3600 * 31) {
+        return Math.floor(second / 60 / 60 / 24) + '天前';
+    }
+    if (second < 24 * 3600 * 31 * 12) {
+        return Math.floor(second / 60 / 60 / 24 / 31) + '月前';
+    }
+    return Math.floor(second / 60 / 60 / 24 / 31 / 12) + '年前';
+};
+
+export const dateFormat = (s: string | Date, _fmt = 'yyyy-MM-dd hh:mm:ss') => {
+    const date = typeof s === 'string' ? parseDate(s) : s;
+    let fmt = _fmt;
+    const o: {
+        [index: string]: any
+    } = {
+        'M+': date.getMonth() + 1, // 月份
+        'd+': date.getDate(), // 日
+        'h+': date.getHours(), // 小时
+        'm+': date.getMinutes(), // 分
+        's+': date.getSeconds(), // 秒
+        'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
+        'S': date.getMilliseconds() // 毫秒
+    };
+
+    if (/(y+)/.test(_fmt)) { fmt = fmt.replace(RegExp.$1, (String(date.getFullYear())).substr(4 - RegExp.$1.length)) }
+
+
+    for (let k in o) {
+        if (new RegExp('(' + k + ')').test(fmt)) {
+            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr((String(o[k])).length)));
+        }
+    }
+    return fmt;
+
+
+};

dgtly-admin/src/main/resources/templates/homeIndexSrc/src/utils/request.ts

@@ -0,0 +1,22 @@
+import axios from "axios";
+import qs from "qs";
+
+const instance = axios.create({
+  baseURL: process.env.NODE_ENV !== "production" ? "/api" : "/",
+  headers: {
+    "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
+  },
+  transformRequest: [
+    function(data, headers) {
+      if (typeof data === "object") {
+        return qs.stringify(data);
+      }
+      return data;
+    }
+  ]
+});
+
+export const post = async (url: string, obj = {}) => {
+  const data = await instance.post<IResult>(url, obj);
+  return data.data;
+};

dgtly-admin/src/main/resources/templates/homeIndexSrc/tsconfig.json

@@ -0,0 +1,64 @@
+{
+  "include": [
+    "src/**/*"
+  ],
+  "compilerOptions": {
+    /* Basic Options */
+    // "incremental": true,                   /* Enable incremental compilation */
+    "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
+    "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "lib": [
+      "esnext",
+      "dom"
+    ], /* Specify library files to be included in the compilation. */
+    // "allowJs": true,                       /* Allow javascript files to be compiled. */
+    // "checkJs": true,                       /* Report errors in .js files. */
+    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    "sourceMap": true, /* Generates corresponding '.map' file. */
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    "outDir": "./pulic", /* Redirect output structure to the directory. */
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                     /* Enable project compilation */
+    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    // "noEmit": true,                        /* Do not emit outputs. */
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+    /* Strict Type-Checking Options */
+    "strict": true, /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,              /* Enable strict null checks. */
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+    /* Additional Checks */
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+    /* Module Resolution Options */
+    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    // "types": [],                           /* Type declaration files to be included in compilation. */
+    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
+    /* Source Map Options */
+    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+  }
+}

dgtly-admin/src/main/resources/templates/homeIndexSrc/webpack.config.js

@@ -0,0 +1,125 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const {
+    CleanWebpackPlugin
+} = require('clean-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+let entry = { index: './src/index.ts' },
+    plugins = [
+        new CleanWebpackPlugin(),
+        new CopyWebpackPlugin([{
+            from: path.join(__dirname, './src/assets'),
+            to: path.join(__dirname, './dist/assets')
+        }]),
+        new MiniCssExtractPlugin({
+            filename: './assets/styles/index.[hash:8].css'
+        }),
+
+        new HtmlWebpackPlugin({
+            // favicon: './src/img/favicon.ico',
+            title: '磁铁布局',
+            template: './src/index.html',
+            filename: 'index.html',
+            minify: {
+                // 压缩
+                removeComments: true, // 移除HTML中的注释
+                collapseWhitespace: true, // 删除空白符与换行符
+                removeAttributeQuotes: true // 去除属性引用
+            },
+            chunks: ['index']
+        })
+    ];
+if (process.env.NODE_ENV !== 'production') {
+    entry.login = './src/login.ts';
+    plugins.push(
+        new HtmlWebpackPlugin({
+            title: '登陆',
+            template: './src/login.html',
+            filename: 'login.html',
+            minify: {
+                removeComments: true,
+                collapseWhitespace: true,
+                removeAttributeQuotes: true
+            },
+            chunks: ['login']
+        })
+    );
+}
+
+module.exports = {
+    mode: process.env.NODE_ENV,
+    entry,
+    devtool: process.env.NODE_ENV === 'production' ? 'cheap-module-source-map' : 'cheap-module-eval-source-map',
+    output: {
+        publicPath: '',
+        path: path.resolve(__dirname, 'dist'),
+        filename: './assets/js/[name].[hash:8].js'
+    },
+    resolve: {
+        extensions: ['.js', '.ts', '.scss'],
+        alias: {
+            // css: path.resolve(__dirname, './src/styles'),
+            imgs: path.resolve(__dirname, './src/assets/imgs')
+        }
+    },
+    module: {
+        rules: [{
+            test: /\.ts$/,
+            exclude: path.resolve(__dirname, 'node_modules'),
+            include: path.resolve(__dirname, 'src'),
+            loader: ['babel-loader', 'ts-loader']
+        },
+        {
+            test: /\.scss$/,
+            use: [
+                // {loader: "style-loader"},
+                {
+                    loader: MiniCssExtractPlugin.loader
+                },
+                {
+                    loader: 'css-loader',
+                    options: {
+                        url: false
+                        //    importLoaders: 1
+                    }
+                },
+                {
+                    // 自动添加前缀
+                    loader: 'postcss-loader',
+                    options: {
+                        plugins: [require('autoprefixer')]
+                    }
+                },
+                {
+                    loader: 'sass-loader'
+                }
+            ]
+        },
+        {
+            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+            loader: 'url-loader',
+            options: {
+                limit: 100,
+                name: './imgs/[name].[hash:7].[ext]'
+            }
+        }
+        ]
+    },
+    plugins,
+    devServer: {
+        host: '0.0.0.0',
+        port: 8083,
+        open: true,
+        proxy: {
+            '/api': {
+                target: 'http://192.168.100.254:10000/',
+                pathRewrite: {
+                    '^/api': ''
+                },
+                changeOrigin: true
+            }
+        }
+    }
+};