@vipl520/dk-ui 1.0.1

package/lib/packages/dk-ui/src/video-input/src/props.js

@@ -0,0 +1,12 @@
+'use strict';
+
+const videoInputProps = {
+  modelValue: { type: String, default: "" },
+  placeholder: { type: String, default: "" },
+  showInput: { type: Boolean, default: true },
+  imgSize: { type: Number, default: 100 },
+  accept: { type: String, default: "" }
+};
+
+exports.videoInputProps = videoInputProps;
+//# sourceMappingURL=props.js.map

package/lib/packages/dk-ui/src/video-input/src/props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.js","sources":["../../../../../../src/video-input/src/props.ts"],"sourcesContent":["import type { ExtractPropTypes } from 'vue'\n\nexport const videoInputProps = {\n  modelValue: { type: String, default: '' },\n  placeholder: { type: String, default: '' },\n  showInput: { type: Boolean, default: true },\n  imgSize: { type: Number, default: 100 },\n  accept: { type: String, default: '' },\n}\n\nexport type VideoInputProps = ExtractPropTypes<typeof videoInputProps>\n"],"names":[],"mappings":";;AAEO,MAAM,eAAkB,GAAA;AAAA,EAC7B,UAAY,EAAA,EAAE,IAAM,EAAA,MAAA,EAAQ,SAAS,EAAG,EAAA;AAAA,EACxC,WAAa,EAAA,EAAE,IAAM,EAAA,MAAA,EAAQ,SAAS,EAAG,EAAA;AAAA,EACzC,SAAW,EAAA,EAAE,IAAM,EAAA,OAAA,EAAS,SAAS,IAAK,EAAA;AAAA,EAC1C,OAAS,EAAA,EAAE,IAAM,EAAA,MAAA,EAAQ,SAAS,GAAI,EAAA;AAAA,EACtC,MAAQ,EAAA,EAAE,IAAM,EAAA,MAAA,EAAQ,SAAS,EAAG,EAAA;AACtC;;;;"}

package/lib/packages/dk-ui/src/video-input/src/video-input.vue.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var videoInput_vue_vue_type_script_setup_true_lang = require('./video-input.vue2.js');
+var _pluginVue_exportHelper = require('../../../../../_virtual/_plugin-vue_export-helper.js');
+
+var _VideoInput = /* @__PURE__ */ _pluginVue_exportHelper.default(videoInput_vue_vue_type_script_setup_true_lang.default, [["__file", "E:\\project\\monster-admin\\system\\dkgs-ui_test\\dk-ui-all\\packages\\dk-ui\\src\\video-input\\src\\video-input.vue"]]);
+
+exports.default = _VideoInput;
+//# sourceMappingURL=video-input.vue.js.map

package/lib/packages/dk-ui/src/video-input/src/video-input.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-input.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/lib/packages/dk-ui/src/video-input/src/video-input.vue2.js

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var utils = require('@vipl520/utils');
+var props = require('./props.js');
+
+const __default__ = vue.defineComponent({
+  name: "DkVideoInput"
+});
+var _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: props.videoInputProps,
+  emits: ["input", "update:modelValue", "change"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const [_, bem] = utils.createNamespace("video-input");
+    const input = vue.ref(props.modelValue);
+    vue.watch(
+      () => props.modelValue,
+      (val) => {
+        input.value = val;
+      }
+    );
+    vue.watch(
+      () => input.value,
+      (val) => {
+        handleInput(val);
+      }
+    );
+    const handleInput = (val) => {
+      emit("update:modelValue", val);
+      emit("input", val);
+      emit("change", val);
+    };
+    return (_ctx, _cache) => {
+      const _component_dk_file_input = vue.resolveComponent("dk-file-input");
+      return vue.openBlock(), vue.createBlock(_component_dk_file_input, vue.mergeProps(_ctx.$attrs, {
+        modelValue: input.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => input.value = $event),
+        type: 3,
+        class: vue.unref(bem)()
+      }), null, 16, ["modelValue", "class"]);
+    };
+  }
+});
+
+exports.default = _sfc_main;
+//# sourceMappingURL=video-input.vue2.js.map

package/lib/packages/dk-ui/src/video-input/src/video-input.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-input.vue2.js","sources":["../../../../../../src/video-input/src/video-input.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n  name: 'DkVideoInput',\n});\n</script>\n<template>\n  <dk-file-input v-bind=\"$attrs\" v-model=\"input\" :type=\"3\" :class=\"bem()\" />\n</template>\n\n<script lang=\"ts\" setup>\nimport { createNamespace } from '@vipl520/utils'\nimport { videoInputProps } from './props'\nimport { ref, watch } from 'vue'\nconst [_, bem] = createNamespace('video-input')\n\n\n\nconst props = defineProps(videoInputProps)\nconst input = ref(props.modelValue)\n\nconst emit = defineEmits(['input', 'update:modelValue', 'change'])\nwatch(\n  () => props.modelValue,\n  (val) => {\n    input.value = val\n  }\n)\n\nwatch(\n  () => input.value,\n  (val) => {\n    handleInput(val)\n  }\n)\n\nconst handleInput = (val: string) => {\n  emit('update:modelValue', val)\n  emit('input', val)\n  emit('change', val)\n}\n</script>\n"],"names":["__MACROS_defineComponent","createNamespace","ref","watch"],"mappings":";;;;;;;;AAEA,MAA6B,cAAAA,mBAAyB,CAAA;AAAA,EACpD,IAAM,EAAA,cAAA;AACR,CAAC,CAAA,CAAA;;;;;;;AAUD,IAAA,MAAM,CAAC,CAAA,EAAG,GAAG,CAAA,GAAIC,sBAAgB,aAAa,CAAA,CAAA;AAK9C,IAAM,MAAA,KAAA,GAAQC,OAAI,CAAA,KAAA,CAAM,UAAU,CAAA,CAAA;AAGlC,IAAAC,SAAA;AAAA,MACE,MAAM,KAAM,CAAA,UAAA;AAAA,MACZ,CAAC,GAAQ,KAAA;AACP,QAAA,KAAA,CAAM,KAAQ,GAAA,GAAA,CAAA;AAAA,OAChB;AAAA,KACF,CAAA;AAEA,IAAAA,SAAA;AAAA,MACE,MAAM,KAAM,CAAA,KAAA;AAAA,MACZ,CAAC,GAAQ,KAAA;AACP,QAAA,WAAA,CAAY,GAAG,CAAA,CAAA;AAAA,OACjB;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,GAAgB,KAAA;AACnC,MAAA,IAAA,CAAK,qBAAqB,GAAG,CAAA,CAAA;AAC7B,MAAA,IAAA,CAAK,SAAS,GAAG,CAAA,CAAA;AACjB,MAAA,IAAA,CAAK,UAAU,GAAG,CAAA,CAAA;AAAA,KACpB,CAAA;;;;;;;;;;;;;;;"}

package/lib/packages/dk-ui/src/video-list-input/index.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('@vipl520/utils');
+var videoListInput = require('./src/video-list-input.vue.js');
+var props = require('./src/props.js');
+
+const VideoListInput = utils.withInstall(videoListInput.default);
+
+exports.videoListInputProps = props.videoListInputProps;
+exports.VideoListInput = VideoListInput;
+exports.default = VideoListInput;
+//# sourceMappingURL=index.js.map

package/lib/packages/dk-ui/src/video-list-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/video-list-input/index.ts"],"sourcesContent":["import { withInstall } from '@vipl520/utils'\nimport _VideoListInput from './src/video-list-input.vue'\n\nexport const VideoListInput = withInstall(_VideoListInput)\nexport default VideoListInput\n\nexport * from './src/props'\n"],"names":["withInstall","_VideoListInput"],"mappings":";;;;;;;;AAGa,MAAA,cAAA,GAAiBA,kBAAYC,sBAAe;;;;;;"}

package/lib/packages/dk-ui/src/video-list-input/src/props.js

@@ -0,0 +1,12 @@
+'use strict';
+
+const videoListInputProps = {
+  modelValue: { default: () => [], type: Array },
+  disabled: { default: false, type: Boolean },
+  limit: { default: 3, type: Number },
+  imgSize: { default: 100, type: Number },
+  accept: { default: "", type: String }
+};
+
+exports.videoListInputProps = videoListInputProps;
+//# sourceMappingURL=props.js.map

package/lib/packages/dk-ui/src/video-list-input/src/props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.js","sources":["../../../../../../src/video-list-input/src/props.ts"],"sourcesContent":["import type { ExtractPropTypes } from 'vue'\n\nexport const videoListInputProps = {\n  modelValue: { default: () => [], type: Array },\n  disabled: { default: false, type: Boolean },\n  limit: { default: 3, type: Number },\n  imgSize: { default: 100, type: Number },\n  accept: { default: '', type: String },\n}\n\nexport type VideoListInputProps = ExtractPropTypes<typeof videoListInputProps>\n"],"names":[],"mappings":";;AAEO,MAAM,mBAAsB,GAAA;AAAA,EACjC,YAAY,EAAE,OAAA,EAAS,MAAM,EAAC,EAAG,MAAM,KAAM,EAAA;AAAA,EAC7C,QAAU,EAAA,EAAE,OAAS,EAAA,KAAA,EAAO,MAAM,OAAQ,EAAA;AAAA,EAC1C,KAAO,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,MAAM,MAAO,EAAA;AAAA,EAClC,OAAS,EAAA,EAAE,OAAS,EAAA,GAAA,EAAK,MAAM,MAAO,EAAA;AAAA,EACtC,MAAQ,EAAA,EAAE,OAAS,EAAA,EAAA,EAAI,MAAM,MAAO,EAAA;AACtC;;;;"}

package/lib/packages/dk-ui/src/video-list-input/src/video-list-input.vue.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var videoListInput_vue_vue_type_script_setup_true_lang = require('./video-list-input.vue2.js');
+var _pluginVue_exportHelper = require('../../../../../_virtual/_plugin-vue_export-helper.js');
+
+var _VideoListInput = /* @__PURE__ */ _pluginVue_exportHelper.default(videoListInput_vue_vue_type_script_setup_true_lang.default, [["__file", "E:\\project\\monster-admin\\system\\dkgs-ui_test\\dk-ui-all\\packages\\dk-ui\\src\\video-list-input\\src\\video-list-input.vue"]]);
+
+exports.default = _VideoListInput;
+//# sourceMappingURL=video-list-input.vue.js.map

package/lib/packages/dk-ui/src/video-list-input/src/video-list-input.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-list-input.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/lib/packages/dk-ui/src/video-list-input/src/video-list-input.vue2.js

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var utils = require('@vipl520/utils');
+var props = require('./props.js');
+
+const __default__ = vue.defineComponent({
+  name: "DkVideoListInput"
+});
+var _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: props.videoListInputProps,
+  emits: ["input", "update:modelValue", "change"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const [_, bem] = utils.createNamespace("video-list-input");
+    const input = vue.ref(props.modelValue);
+    vue.watch(
+      () => props.modelValue,
+      (val) => {
+        input.value = val;
+      }
+    );
+    vue.watch(
+      () => input.value,
+      (val) => {
+        handleInput(val);
+      }
+    );
+    const handleInput = (val) => {
+      emit("update:modelValue", val);
+      emit("input", val);
+      emit("change", val);
+    };
+    return (_ctx, _cache) => {
+      const _component_dk_file_list_input = vue.resolveComponent("dk-file-list-input");
+      return vue.openBlock(), vue.createBlock(_component_dk_file_list_input, vue.mergeProps(_ctx.$attrs, {
+        modelValue: input.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => input.value = $event),
+        class: vue.unref(bem)(),
+        type: 3,
+        onChange: _cache[1] || (_cache[1] = ($event) => handleInput(input.value))
+      }), null, 16, ["modelValue", "class"]);
+    };
+  }
+});
+
+exports.default = _sfc_main;
+//# sourceMappingURL=video-list-input.vue2.js.map

package/lib/packages/dk-ui/src/video-list-input/src/video-list-input.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-list-input.vue2.js","sources":["../../../../../../src/video-list-input/src/video-list-input.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({\n  name: 'DkVideoListInput',\n});\n</script>\n<template>\n  <dk-file-list-input\n    v-bind=\"$attrs\"\n    v-model=\"input\"\n    :class=\"bem()\"\n    :type=\"3\"\n    @change=\"handleInput(input)\"\n  />\n</template>\n\n<script lang=\"ts\" setup>\nimport { createNamespace } from '@vipl520/utils'\nimport { videoListInputProps } from './props'\nimport { ref, watch } from 'vue'\nconst [_, bem] = createNamespace('video-list-input')\n\n\n\nconst props = defineProps(videoListInputProps)\nconst input = ref(props.modelValue)\n\nconst emit = defineEmits(['input', 'update:modelValue', 'change'])\nwatch(\n  () => props.modelValue,\n  (val) => {\n    input.value = val\n  }\n)\n\nwatch(\n  () => input.value,\n  (val) => {\n    handleInput(val)\n  }\n)\n\nconst handleInput = (val: any) => {\n  emit('update:modelValue', val)\n  emit('input', val)\n  emit('change', val)\n}\n</script>\n"],"names":["__MACROS_defineComponent","createNamespace","ref","watch"],"mappings":";;;;;;;;AAEA,MAA6B,cAAAA,mBAAyB,CAAA;AAAA,EACpD,IAAM,EAAA,kBAAA;AACR,CAAC,CAAA,CAAA;;;;;;;AAgBD,IAAA,MAAM,CAAC,CAAA,EAAG,GAAG,CAAA,GAAIC,sBAAgB,kBAAkB,CAAA,CAAA;AAKnD,IAAM,MAAA,KAAA,GAAQC,OAAI,CAAA,KAAA,CAAM,UAAU,CAAA,CAAA;AAGlC,IAAAC,SAAA;AAAA,MACE,MAAM,KAAM,CAAA,UAAA;AAAA,MACZ,CAAC,GAAQ,KAAA;AACP,QAAA,KAAA,CAAM,KAAQ,GAAA,GAAA,CAAA;AAAA,OAChB;AAAA,KACF,CAAA;AAEA,IAAAA,SAAA;AAAA,MACE,MAAM,KAAM,CAAA,KAAA;AAAA,MACZ,CAAC,GAAQ,KAAA;AACP,QAAA,WAAA,CAAY,GAAG,CAAA,CAAA;AAAA,OACjB;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,GAAa,KAAA;AAChC,MAAA,IAAA,CAAK,qBAAqB,GAAG,CAAA,CAAA;AAC7B,MAAA,IAAA,CAAK,SAAS,GAAG,CAAA,CAAA;AACjB,MAAA,IAAA,CAAK,UAAU,GAAG,CAAA,CAAA;AAAA,KACpB,CAAA;;;;;;;;;;;;;;;;"}

package/lib/page-diy/style/dk-page-diy.css

@@ -0,0 +1 @@
+@charset "UTF-8";._fc-l,._fc-m,._fc-r{background:#fff;box-sizing:border-box;height:calc(100vh - 180px);position:relative}._fc-l::-webkit-scrollbar,._fc-m::-webkit-scrollbar,._fc-r::-webkit-scrollbar{display:none}._fc-l{overflow:inherit!important;display:flex;flex:0 0 auto;flex-direction:column;top:0}._fc-l ._fc-l-group{padding:0 12px}._fc-l ._fc-l-title{font-weight:600;font-size:14px;margin:18px 0 5px;-webkit-user-select:none;-moz-user-select:none;user-select:none}._fc-l ._fc-l-item{display:inline-block;background:#fff;color:#000;min-width:70px;width:80px;height:70px;line-height:1;text-align:center;transition:all .2s ease;cursor:pointer;border-radius:6px;position:relative}._fc-l ._fc-l-item.not-drag{cursor:not-allowed;background:#f6f6f6!important;color:#000!important}._fc-l ._fc-l-item ._fc-l-name{font-size:12px;-webkit-user-select:none;-moz-user-select:none;user-select:none}._fc-l ._fc-l-item ._fc-l-count{background-color:#409eff;border-radius:10px;color:#fff;display:inline-block;font-size:12px;height:18px;line-height:18px;padding:0 6px;text-align:center;white-space:nowrap;border:1px solid #fff;position:absolute;top:5px;right:20px;z-index:1;transform:translateY(-50%) translateX(100%)}._fc-l ._fc-l-item ._fc-l-icon{padding:10px 5px 12px}._fc-l ._fc-l-item:hover{background:#409eff;color:#fff}._fc-l.item-box ._fc-l-groups{height:calc(100vh - 220px);overflow:auto;flex:1 1 0%}._fc-l.item-box ._fc-l-groups::-webkit-scrollbar{display:none}._fc-l.item-box ._fc-l-groups ._fc-l-items ._fc-l-item{margin:5px;width:76px;box-shadow:1px 1px 4px rgba(0,0,0,.1019607843)}._fc-l:hover .aside-toggle{display:block}._fc-l .children-list{width:100%;position:relative;background:#fff;bottom:0;overflow:auto;z-index:2}._fc-l .children-list .child-title{cursor:pointer;text-align:center;font-size:14px;padding:4px;position:-webkit-sticky;position:sticky;z-index:2;top:0;background:#fff;border-top:1px solid #eaecef;border-right:0}._fc-l .children-list .child-title .dk-icon{position:absolute;right:10px}._fc-l .children-list .child-title .dk-icon:hover{color:#409eff!important}._fc-l .children-list .el-tree-node .close-rule{position:absolute;right:0;display:none;padding:0 10px}._fc-l .children-list .el-tree-node .close-rule:hover{color:#409eff!important}._fc-l .children-list .el-tree-node:hover .close-rule{display:inline-flex}._fc-l .children-list .aside-resizer{width:100%;height:4px;margin:-2px 0;cursor:n-resize;z-index:3}._fc-l .children-list::-webkit-scrollbar{display:none}._fc-m{background:#ebeced;width:100%}._fc-m ._fc-m-tools{background:#fff;height:40px;align-items:center;display:flex;justify-content:flex-end;border:1px solid #ececec;border-top:0 none}._fc-m ._fc-m-drag{overflow:auto;box-sizing:border-box}._fc-m .form-create ._fc-l-item{background:#409eff;width:100%;height:30px;overflow:hidden;transition:all .3s ease;display:flex;justify-content:center;align-items:center;color:#fff}._fc-m .form-create ._fc-l-item.sortable-chosen ._fc-l-count,._fc-m .form-create ._fc-l-item.sortable-chosen ._fc-l-icon,._fc-m .form-create ._fc-l-item.sortable-chosen ._fc-l-name{display:none}._fc-m .form-create ._fc-l-item.sortable-chosen:after{content:"放在这里";color:#fff;font-size:14px}._fc-m .form-create ._fc-l-item ._fc-l-icon{margin:0 10px}._fc-r{width:calc(100% - 800px);overflow:inherit!important}._fc-r .el-tabs__nav-wrap{padding:0 20px}._fc-r .el-tabs__nav{width:100%}._fc-r .el-tabs__item{width:33%;text-align:center}._fc-r .el-tabs__content{padding:0 20px;height:calc(100vh - 235px);overflow:auto}._fc-r .el-tabs__content::-webkit-scrollbar{width:5px}._fc-r .el-tabs__nav-wrap::after{height:1px;background-color:#ececec}._fc-r ._fc-r-tabs{display:flex;cursor:pointer;padding:0;border-bottom:1px solid #ececec}._fc-r ._fc-r-tab{height:40px;box-sizing:border-box;line-height:40px;display:inline-block;list-style:none;font-size:14px;font-weight:600;color:#303133;position:relative;flex:1;text-align:center}._fc-r ._fc-r-tab.active{color:#409eff;border-bottom:2px solid #409eff}._fc-r:hover .aside-toggle{display:block}._fc-r .el-form-item__content{display:block}._fc-r .el-form-item__content .form-help{line-height:1.5;margin-top:4px;color:#888;font-size:12px}._fc-m-drag,.draggable-drag{min-height:630px;height:100%;position:relative}._fc-m-drag .chosen,.draggable-drag .chosen{opacity:1!important}.aside-resizer{cursor:ew-resize;height:100%;margin:0 -2px;position:absolute;top:0;width:4px;z-index:1;right:0}.aside-resizer:hover{background:rgba(204,204,204,.5)}.aside-toggle{background:inherit;cursor:pointer;padding:20px 5px;position:absolute;top:50%;transform:translateY(-50%);z-index:1;display:none}

package/lib/page-diy/style/dk-page-diy.scss

@@ -0,0 +1,339 @@
+/* stylelint-disable */
+._fc-l,
+._fc-m,
+._fc-r {
+  background: #fff;
+  box-sizing: border-box;
+  height: calc(100vh - 180px);
+  position: relative;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+._fc-l {
+  overflow: inherit !important;
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  top: 0;
+
+  ._fc-l-group {
+    padding: 0 12px;
+  }
+
+  ._fc-l-title {
+    font-weight: 600;
+    font-size: 14px;
+    margin: 18px 0 5px;
+    user-select: none;
+  }
+
+  ._fc-l-item {
+    display: inline-block;
+    background: #fff;
+    color: #000;
+    min-width: 70px;
+    width: 80px;
+    height: 70px;
+    line-height: 1;
+    text-align: center;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    border-radius: 6px;
+    position: relative;
+
+    &.not-drag {
+      cursor: not-allowed;
+      background: #f6f6f6 !important;
+      color: #000 !important;
+    }
+
+    ._fc-l-name {
+      font-size: 12px;
+      user-select: none;
+    }
+
+    ._fc-l-count {
+      background-color: #409eff;
+      border-radius: 10px;
+      color: #fff;
+      display: inline-block;
+      font-size: 12px;
+      height: 18px;
+      line-height: 18px;
+      padding: 0 6px;
+      text-align: center;
+      white-space: nowrap;
+      border: 1px solid #fff;
+      position: absolute;
+      top: 5px;
+      right: 20px;
+      z-index: 1;
+      transform: translateY(-50%) translateX(100%);
+    }
+
+    ._fc-l-icon {
+      padding: 10px 5px 12px;
+    }
+
+    &:hover {
+      background: #409eff;
+      color: #fff;
+    }
+  }
+
+  &.item-box {
+    ._fc-l-groups {
+      height: calc(100vh - 220px);
+      overflow: auto;
+      flex: 1 1 0%;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      ._fc-l-items {
+        ._fc-l-item {
+          margin: 5px;
+          width: 76px;
+          box-shadow: 1px 1px 4px #0000001a;
+        }
+      }
+    }
+  }
+
+  &:hover .aside-toggle {
+    display: block;
+  }
+
+  .children-list {
+    width: 100%;
+    position: relative;
+    background: #fff;
+    bottom: 0;
+    overflow: auto;
+    z-index: 2;
+
+    .child-title {
+      cursor: pointer;
+      text-align: center;
+      font-size: 14px;
+      padding: 4px;
+      position: sticky;
+      z-index: 2;
+      top: 0;
+      background: #fff;
+      border-top: 1px solid #eaecef;
+      border-right: 0;
+
+      .dk-icon {
+        position: absolute;
+        right: 10px;
+
+        &:hover {
+          color: #409eff !important;
+        }
+      }
+    }
+
+    .el-tree-node {
+      .close-rule {
+        position: absolute;
+        right: 0px;
+        display: none;
+        padding: 0 10px;
+
+        &:hover {
+          color: #409eff !important;
+        }
+      }
+
+      &:hover .close-rule {
+        display: inline-flex;
+      }
+    }
+
+    .is-drop-inner {
+      //background-color:#409eff;
+    }
+
+    .aside-resizer {
+      width: 100%;
+      height: 4px;
+      margin: -2px 0;
+      cursor: n-resize;
+      z-index: 3;
+    }
+
+    &::-webkit-scrollbar {
+      display: none;
+      //width: 2px;
+    }
+  }
+}
+
+._fc-m {
+  background: #ebeced;
+  width: 100%;
+
+  ._fc-m-tools {
+    background: #fff;
+    height: 40px;
+    align-items: center;
+    display: flex;
+    justify-content: flex-end;
+    border: 1px solid #ececec;
+    border-top: 0 none;
+  }
+
+  ._fc-m-drag {
+    overflow: auto;
+    box-sizing: border-box;
+  }
+
+  .form-create {
+    ._fc-l-item {
+      background: #409eff;
+      width: 100%;
+      height: 30px;
+      overflow: hidden;
+      transition: all 0.3s ease;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #fff;
+
+      &.sortable-chosen {
+        ._fc-l-icon,
+        ._fc-l-name,
+        ._fc-l-count {
+          display: none;
+        }
+
+        &:after {
+          content: '放在这里';
+          color: #fff;
+          font-size: 14px;
+        }
+      }
+
+      ._fc-l-icon {
+        margin: 0 10px;
+      }
+    }
+  }
+}
+
+._fc-r {
+  width: calc(100% - 800px);
+  overflow: inherit !important;
+
+  .el-tabs__nav-wrap {
+    padding: 0 20px;
+  }
+
+  .el-tabs__nav {
+    width: 100%;
+  }
+
+  .el-tabs__item {
+    width: 33%;
+    text-align: center;
+  }
+
+  .el-tabs__content {
+    padding: 0 20px;
+    height: calc(100vh - 235px);
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      width: 5px;
+    }
+  }
+
+  .el-tabs__nav-wrap::after {
+    height: 1px;
+    background-color: #ececec;
+  }
+
+  ._fc-r-tabs {
+    display: flex;
+    cursor: pointer;
+    padding: 0;
+    border-bottom: 1px solid #ececec;
+  }
+
+  ._fc-r-tab {
+    height: 40px;
+    box-sizing: border-box;
+    line-height: 40px;
+    display: inline-block;
+    list-style: none;
+    font-size: 14px;
+    font-weight: 600;
+    color: #303133;
+    position: relative;
+    flex: 1;
+    text-align: center;
+  }
+
+  ._fc-r-tab.active {
+    color: #409eff;
+    border-bottom: 2px solid #409eff;
+  }
+
+  &:hover .aside-toggle {
+    display: block;
+  }
+
+  .el-form-item__content {
+    display: block;
+
+    .form-help {
+      line-height: 1.5;
+      margin-top: 4px;
+      color: #888;
+      font-size: 12px;
+    }
+  }
+}
+
+._fc-m-drag,
+.draggable-drag {
+  min-height: 630px;
+  height: 100%;
+  position: relative;
+
+  .chosen {
+    opacity: 1 !important;
+  }
+}
+
+.aside-resizer {
+  cursor: ew-resize;
+  height: 100%;
+  margin: 0 -2px;
+  position: absolute;
+  top: 0;
+  width: 4px;
+  z-index: 1;
+  right: 0;
+
+  &:hover {
+    background: rgba(204, 204, 204, 0.5);
+  }
+}
+
+.aside-toggle {
+  background: inherit;
+  cursor: pointer;
+  padding: 20px 5px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  display: none;
+}
+/* stylelint-enable */

package/lib/page-diy/style/drag-tool.css

@@ -0,0 +1 @@
+.drag-tool{padding:2px 0;position:relative;min-height:30px;box-sizing:border-box;word-wrap:break-word;word-break:break-all;margin:var(--margin);outline:var(--showDashed) dashed #a2d1ff}.drag-tool:hover{outline:2px dashed #a2d1ff}.drag-tool .drag-tool{margin:5px}.drag-tool+.drag-tool{margin-top:5px}.drag-tool .drag-content{overflow:hidden}.drag-tool .drag-content .drag-tool .del{right:0;top:0}.drag-tool .drag-r{display:block}.drag-tool .drag-r{position:absolute;right:2px;bottom:2px;z-index:1904}.drag-tool .drag-l{position:absolute;top:0;left:0;z-index:1904}.drag-tool .drag-btn{height:18px;width:18px;color:#fff;background-color:#666;text-align:center;line-height:20px;padding-bottom:1px;float:left;cursor:pointer;justify-content:center;display:none;opacity:.5}.drag-tool .drag-btn+.drag-btn{margin-left:2px}.drag-tool .drag-btn:hover{background-color:var(--el-color-primary);opacity:1}.drag-tool .drag-btn-danger{background-color:var(--el-color-danger)!important}.drag-tool .drag-btn i{font-size:13px}.drag-tool .drag-mask{z-index:1900;position:absolute;top:0;left:0;right:0;bottom:0}.drag-tool.active{outline:2px solid #409eff}.drag-tool.active>.drag-r .drag-btn{display:block}.drag-tool.active>.drag-l .drag-btn{display:block}.drag-tool.active>.del{display:block}.drag-tool.active>.op{display:block}

package/lib/page-diy/style/drag-tool.scss

@@ -0,0 +1,112 @@
+/* stylelint-disable */
+.drag-tool {
+  padding: 2px 0;
+  position: relative;
+  min-height: 30px;
+  box-sizing: border-box;
+  word-wrap: break-word;
+  word-break: break-all;
+  margin: var(--margin);
+  outline: var(--showDashed) dashed #a2d1ff;
+  //cursor: move;
+  &:hover {
+    outline: 2px dashed #a2d1ff;
+  }
+
+  .drag-tool {
+    margin: 5px;
+  }
+
+  & + .drag-tool {
+    margin-top: 5px;
+  }
+
+  .drag-content {
+    overflow: hidden;
+
+    .drag-tool .del {
+      right: 0;
+      top: 0;
+    }
+  }
+
+  //outline: 2px dashed #a2d1ff;
+
+  .drag-r {
+    display: block;
+  }
+
+  .drag-r {
+    position: absolute;
+    right: 2px;
+    bottom: 2px;
+    z-index: 1904;
+  }
+
+  .drag-l {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1904;
+  }
+
+  .drag-btn {
+    height: 18px;
+    width: 18px;
+    color: #fff;
+    background-color: #666;
+    text-align: center;
+    line-height: 20px;
+    padding-bottom: 1px;
+    float: left;
+    cursor: pointer;
+    justify-content: center;
+    display: none;
+    opacity: 0.5;
+    & + .drag-btn {
+      margin-left: 2px;
+    }
+    &:hover {
+      background-color: var(--el-color-primary);
+      opacity: 1;
+    }
+  }
+
+  .drag-btn-danger {
+    background-color: var(--el-color-danger) !important;
+  }
+
+  .drag-btn i {
+    font-size: 13px;
+  }
+
+  .drag-mask {
+    z-index: 1900;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  &.active {
+    outline: 2px solid #409eff;
+
+    & > .drag-r .drag-btn {
+      display: block;
+    }
+
+    & > .drag-l .drag-btn {
+      display: block;
+    }
+
+    & > .del {
+      display: block;
+    }
+
+    & > .op {
+      display: block;
+    }
+  }
+}
+/* stylelint-enable */