deploy

package.json

@@ -74,7 +74,7 @@
     "zx-count": "^0.3.7",
     "zx-icon": "^1.1.8",
     "zx-keel": "^0.9.4",
-    "zx-layouts": "^0.6.0",
+    "zx-layouts": "^0.6.2",
     "zx-magnifie": "^0.4.0",
     "zx-markdown-editor": "^0.0.2",
     "zx-player": "^0.9.6",

src/colorfulIcon/index.js

@@ -1,5 +1,5 @@
 import Vue from "vue";
-import ColorfullIcon from "@/components/ColorfullIcon";
+import ColorfullIcon from "zx-layouts/ColorfullIcon";
 
 Vue.component("vab-colorful-icon", ColorfullIcon);
 const req = require.context("./svg", false, /\.svg$/),

src/components/ColorfullIcon/index.vue

@@ -1,65 +0,0 @@
-<template>
-  <img
-    v-if="isExternal"
-    :src="styleExternalIcon"
-    class="svg-external-icon svg-icon"
-    v-on="$listeners"
-  />
-  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
-    <use :xlink:href="iconName" />
-  </svg>
-</template>
-
-<script>
-import { isExternal } from "@/utils/validate";
-
-export default {
-  name: "ColorfulIcon",
-  props: {
-    iconClass: {
-      type: String,
-      required: true,
-    },
-    className: {
-      type: String,
-      default: "",
-    },
-  },
-  computed: {
-    isExternal() {
-      return isExternal(this.iconClass);
-    },
-    iconName() {
-      return `#colorful-icon-${this.iconClass}`;
-    },
-    svgClass() {
-      if (this.className) {
-        return "svg-icon " + this.className;
-      } else {
-        return "svg-icon";
-      }
-    },
-    styleExternalIcon() {
-      return this.iconClass;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.svg-icon {
-  width: 1em;
-  height: 1em;
-  overflow: hidden;
-  vertical-align: -0.15em;
-  fill: currentColor;
-
-  &:hover {
-    opacity: 0.8;
-  }
-}
-
-.svg-external-icon {
-  display: inline-block;
-}
-</style>

src/components/RemixIcon/index.vue

@@ -1,69 +0,0 @@
-<template>
-  <div
-    v-if="isExternal"
-    :style="styleExternalIcon"
-    class="svg-external-icon svg-icon"
-    v-on="$listeners"
-  />
-  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
-    <use :xlink:href="iconName" />
-  </svg>
-</template>
-
-<script>
-import { isExternal } from "@/utils/validate";
-
-export default {
-  name: "RemixIcon",
-  props: {
-    iconClass: {
-      type: String,
-      required: true,
-    },
-    className: {
-      type: String,
-      default: "",
-    },
-  },
-  computed: {
-    isExternal() {
-      return isExternal(this.iconClass);
-    },
-    iconName() {
-      return `#remix-icon-${this.iconClass}`;
-    },
-    svgClass() {
-      if (this.className) {
-        return "svg-icon " + this.className;
-      } else {
-        return "svg-icon";
-      }
-    },
-    styleExternalIcon() {
-      return {
-        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
-        "-webkit-mask": `url(${this.iconClass}) no-repeat 50% 50%`,
-      };
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.svg-icon {
-  width: 1.125em;
-  height: 1.125em;
-  overflow: hidden;
-  fill: currentColor;
-
-  &:hover {
-    opacity: 0.8;
-  }
-}
-
-.svg-external-icon {
-  display: inline-block;
-  background-color: currentColor;
-  mask-size: cover !important;
-}
-</style>

src/components/VabQueryForm/VabQueryFormBottomPanel.vue

@@ -1,20 +0,0 @@
-<template>
-  <el-col :span="24">
-    <div class="bottom-panel">
-      <slot></slot>
-    </div>
-  </el-col>
-</template>
-
-<script>
-export default {
-  name: "VabQueryFormBottomPanel",
-  props: {},
-  data() {
-    return {};
-  },
-  created() {},
-  mounted() {},
-  methods: {},
-};
-</script>

src/components/VabQueryForm/VabQueryFormLeftPanel.vue

@@ -1,25 +0,0 @@
-<template>
-  <el-col :xs="24" :sm="24" :md="24" :lg="span" :xl="span">
-    <div class="left-panel">
-      <slot></slot>
-    </div>
-  </el-col>
-</template>
-
-<script>
-export default {
-  name: "VabQueryFormLeftPanel",
-  props: {
-    span: {
-      type: Number,
-      default: 14,
-    },
-  },
-  data() {
-    return {};
-  },
-  created() {},
-  mounted() {},
-  methods: {},
-};
-</script>

src/components/VabQueryForm/VabQueryFormRightPanel.vue

@@ -1,25 +0,0 @@
-<template>
-  <el-col :xs="24" :sm="24" :md="24" :lg="span" :xl="span">
-    <div class="right-panel">
-      <slot></slot>
-    </div>
-  </el-col>
-</template>
-
-<script>
-export default {
-  name: "VabQueryFormRightPanel",
-  props: {
-    span: {
-      type: Number,
-      default: 10,
-    },
-  },
-  data() {
-    return {};
-  },
-  created() {},
-  mounted() {},
-  methods: {},
-};
-</script>

src/components/VabQueryForm/VabQueryFormTopPanel.vue

@@ -1,20 +0,0 @@
-<template>
-  <el-col :span="24">
-    <div class="top-panel">
-      <slot></slot>
-    </div>
-  </el-col>
-</template>
-
-<script>
-export default {
-  name: "VabQueryFormTopPanel",
-  props: {},
-  data() {
-    return {};
-  },
-  created() {},
-  mounted() {},
-  methods: {},
-};
-</script>

src/components/VabQueryForm/index.vue

@@ -1,63 +0,0 @@
-<template>
-  <el-row :gutter="0" class="vab-query-form">
-    <slot></slot>
-  </el-row>
-</template>
-
-<script>
-export default {
-  name: "VabQueryForm",
-  props: {},
-  data() {
-    return {};
-  },
-  created() {},
-  mounted() {},
-  methods: {},
-};
-</script>
-
-<style lang="scss" scoped>
-@mixin panel {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.vab-query-form {
-  margin-bottom: 10px;
-
-  ::v-deep {
-    .top-panel {
-      @include panel;
-    }
-
-    .bottom-panel {
-      @include panel;
-
-      padding-top: 14px;
-      border-top: 1px solid #dcdfe6;
-    }
-
-    .left-panel {
-      @include panel;
-
-      > .el-button,
-      .el-form-item {
-        margin: 5px;
-      }
-    }
-
-    .right-panel {
-      @include panel;
-
-      justify-content: flex-end;
-
-      .el-form-item {
-        margin: 5px;
-      }
-    }
-  }
-}
-</style>

src/components/VabQuill/index.vue

@@ -1,124 +0,0 @@
-<template>
-  <div class="vab-quill" :class="classes">
-    <div ref="editor" :style="styles"></div>
-  </div>
-</template>
-
-<script>
-import Quill from "quill";
-import "quill/dist/quill.core.css";
-import "quill/dist/quill.snow.css";
-import "quill/dist/quill.bubble.css";
-
-export default {
-  name: "VabQuill",
-  props: {
-    value: {
-      type: String,
-      default: "",
-    },
-    border: {
-      type: Boolean,
-      default: false,
-    },
-    height: {
-      type: Number,
-      default: null,
-    },
-    minHeight: {
-      type: Number,
-      default: null,
-    },
-  },
-  data() {
-    return {
-      Quill: null,
-      currentValue: "",
-      options: {
-        theme: "snow",
-        bounds: document.body,
-        debug: "warn",
-        modules: {
-          toolbar: [
-            ["bold", "italic", "underline", "strike"],
-            [{ header: [1, 2, 3, 4, 5, 6, false] }],
-            [{ size: ["small", false, "large", "huge"] }],
-            [{ color: [] }, { background: [] }],
-            ["blockquote", "code-block"],
-            [{ list: "ordered" }, { list: "bullet" }],
-            [{ indent: "-1" }, { indent: "+1" }],
-            [{ align: [] }],
-            [{ direction: "rtl" }],
-            ["clean"],
-            ["link", "image"],
-          ],
-        },
-        placeholder: "内容...",
-        readOnly: false,
-      },
-    };
-  },
-  computed: {
-    classes() {
-      return [
-        {
-          "vab-quill-no-border": !this.border,
-        },
-      ];
-    },
-    styles() {
-      let style = {};
-      if (this.minHeight) {
-        style.minHeight = `${this.minHeight}px`;
-      }
-      if (this.height) {
-        style.height = `${this.height}px`;
-      }
-      return style;
-    },
-  },
-  watch: {
-    value: {
-      handler(val) {
-        if (val !== this.currentValue) {
-          this.currentValue = val;
-          if (this.Quill) {
-            this.Quill.pasteHTML(this.value);
-          }
-        }
-      },
-      immediate: true,
-    },
-  },
-  mounted() {
-    this.init();
-  },
-  beforeDestroy() {
-    this.Quill = null;
-  },
-  methods: {
-    init() {
-      const editor = this.$refs.editor;
-      this.Quill = new Quill(editor, this.options);
-      this.Quill.pasteHTML(this.currentValue);
-      this.Quill.on("text-change", (delta, oldDelta, source) => {
-        const html = this.$refs.editor.children[0].innerHTML;
-        const text = this.Quill.getText();
-        const quill = this.Quill;
-        this.currentValue = html;
-        this.$emit("input", html);
-        this.$emit("on-change", { html, text, quill });
-      });
-      this.Quill.on("text-change", (delta, oldDelta, source) => {
-        this.$emit("on-text-change", delta, oldDelta, source);
-      });
-      this.Quill.on("selection-change", (range, oldRange, source) => {
-        this.$emit("on-selection-change", range, oldRange, source);
-      });
-      this.Quill.on("editor-change", (eventName, ...args) => {
-        this.$emit("on-editor-change", eventName, ...args);
-      });
-    },
-  },
-};
-</script>

src/directive/drag/drag.js

@@ -1,77 +0,0 @@
-export default {
-  bind(el, binding, vnode) {
-    if (
-      el.querySelector(".el-dialog__header") &&
-      el.querySelector(".el-dialog")
-    ) {
-      const dialogHeaderEl = el.querySelector(".el-dialog__header");
-      const dragDom = el.querySelector(".el-dialog");
-      dialogHeaderEl.style.cssText += ";cursor:move;";
-      dragDom.style.cssText += ";top:0;";
-
-      const getStyle = (function () {
-        if (window.document.currentStyle) {
-          return (dom, attr) => dom.currentStyle[attr];
-        } else {
-          return (dom, attr) => getComputedStyle(dom, false)[attr];
-        }
-      })();
-
-      dialogHeaderEl.onmousedown = (e) => {
-        const disX = e.clientX - dialogHeaderEl.offsetLeft;
-        const disY = e.clientY - dialogHeaderEl.offsetTop;
-
-        const dragDomWidth = dragDom.offsetWidth;
-        const dragDomHeight = dragDom.offsetHeight;
-
-        const screenWidth = document.body.clientWidth;
-        const screenHeight = document.body.clientHeight;
-
-        const minDragDomLeft = dragDom.offsetLeft;
-        const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
-
-        const minDragDomTop = dragDom.offsetTop;
-        const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight;
-
-        let styL = getStyle(dragDom, "left");
-        let styT = getStyle(dragDom, "top");
-
-        if (styL.includes("%")) {
-          styL = +document.body.clientWidth * (+styL / 100);
-          styT = +document.body.clientHeight * (+styT / 100);
-        } else {
-          styL = +styL.replace(/\px/g, "");
-          styT = +styT.replace(/\px/g, "");
-        }
-
-        document.onmousemove = function (e) {
-          let left = e.clientX - disX;
-          let top = e.clientY - disY;
-
-          if (-left > minDragDomLeft) {
-            left = -minDragDomLeft;
-          } else if (left > maxDragDomLeft) {
-            left = maxDragDomLeft;
-          }
-
-          if (-top > minDragDomTop) {
-            top = -minDragDomTop;
-          } else if (top > maxDragDomTop) {
-            top = maxDragDomTop;
-          }
-
-          dragDom.style.cssText += `;left:${left + styL}px;top:${
-            top + styT
-          }px;`;
-
-          vnode.child.$emit("dragDialog");
-        };
-
-        document.onmouseup = function (e) {
-          document.onmousemove = null;
-          document.onmouseup = null;
-        };
-      };
-    }
-  },
-};

src/directive/drag/index.js

@@ -1,13 +0,0 @@
-import drag from "./drag";
-
-const install = function (Vue) {
-  Vue.directive("drag", drag);
-};
-
-if (window.Vue) {
-  window["drag"] = drag;
-  Vue.use(install);
-}
-
-drag.install = install;
-export default drag;

src/directive/permissions/index.js

@@ -1,13 +0,0 @@
-import permissions from "./permissions";
-
-const install = function (Vue) {
-  Vue.directive("permissions", permissions);
-};
-
-if (window.Vue) {
-  window["permissions"] = permissions;
-  Vue.use(install);
-}
-
-permissions.install = install;
-export default permissions;

src/directive/permissions/permissions.js

@@ -1,18 +0,0 @@
-import store from "@/store";
-
-export default {
-  inserted(el, binding) {
-    const { value } = binding;
-    const permissions = store.getters["user/permissions"];
-
-    if (value && value instanceof Array && value.length > 0) {
-      const hasPermission = permissions.some((role) => {
-        return value.includes(role);
-      });
-
-      if (!hasPermission) {
-        el.parentNode && el.parentNode.removeChild(el);
-      }
-    }
-  },
-};

src/plugins/index.js

@@ -3,21 +3,17 @@ import Vue from "vue";
 import "./element";
 import "./support";
 import "@/styles/vab.scss";
-import vab from "@/utils/vab";
 import "@/remixIcon";
 import "@/colorfulIcon";
 import "@/config/permission";
 import "@/utils/errorLog";
-import drag from "@/directive/drag";
-import permissions from "@/directive/permissions";
 import "./vabIcon";
-import VabCount from "zx-count";
 
-import VabQueryForm from "@/components/VabQueryForm";
-import VabQueryFormTopPanel from "@/components/VabQueryForm/VabQueryFormTopPanel";
-import VabQueryFormBottomPanel from "@/components/VabQueryForm/VabQueryFormBottomPanel";
-import VabQueryFormLeftPanel from "@/components/VabQueryForm/VabQueryFormLeftPanel";
-import VabQueryFormRightPanel from "@/components/VabQueryForm/VabQueryFormRightPanel";
+import Vab from "@/utils/vab";
+import VabDrag from "zx-layouts/Drag";
+import VabPermissions from "zx-layouts/Permissions";
+import VabCount from "zx-count";
+import VabQueryForm from "zx-layouts/VabQueryForm/export";
 import VueAMap from "vue-amap";
 
 VueAMap.initAMapApiLoader({
@@ -25,14 +21,9 @@ VueAMap.initAMapApiLoader({
   plugin: ["Autocomplete", "PlaceSearch", "PolyEditor", "CircleEditor"],
   v: "1.4.4",
 });
+Vue.use(Vab);
+Vue.use(VabPermissions);
+Vue.use(VabDrag);
+Vue.use(VabQueryForm);
 Vue.use(VueAMap);
 Vue.use(VabCount);
-Vue.use(permissions);
-Vue.use(drag);
-Vue.use(vab);
-
-Vue.component("vab-query-form", VabQueryForm);
-Vue.component("vab-query-form-left-panel", VabQueryFormLeftPanel);
-Vue.component("vab-query-form-right-panel", VabQueryFormRightPanel);
-Vue.component("vab-query-form-top-panel", VabQueryFormTopPanel);
-Vue.component("vab-query-form-bottom-panel", VabQueryFormBottomPanel);

src/remixIcon/index.js

@@ -1,5 +1,5 @@
 import Vue from "vue";
-import RemixIcon from "@/components/RemixIcon";
+import RemixIcon from "zx-layouts/RemixIcon";
 
 Vue.component("vab-remix-icon", RemixIcon);
 const req = require.context("./svg", false, /\.svg$/),