@vipl520/dk-ui 1.0.61 → 1.0.62

package/lib/page-diy/index.d.ts

@@ -322,6 +322,7 @@ export declare const PageDiy: import("@vipl520/utils").WithInstall<import("vue")
         hide: boolean;
         treeData: never[];
     }>;
+    leftTabsName: import("vue").Ref<string>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     type: {
         type: StringConstructor;

package/lib/page-diy/src/page-diy.vue.d.ts

@@ -322,6 +322,7 @@ declare const _default: import("vue").DefineComponent<{
         hide: boolean;
         treeData: never[];
     }>;
+    leftTabsName: import("vue").Ref<string>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     type: {
         type: StringConstructor;

package/lib/page-diy/src/page-diy.vue.js

@@ -234,6 +234,7 @@ const _sfc_main = vue.defineComponent({
         hide: true,
         treeData: [],
       },
+      leftTabsName: 'component',
     });
 
     function cleanTreeData(node) {
@@ -1087,20 +1088,23 @@ const _hoisted_5 = {
   class: "_fc-l-count",
   style: {}
 };
-const _hoisted_6 = /*#__PURE__*/vue.createElementVNode("span", null, "结构", -1 /* HOISTED */);
-const _hoisted_7 = { key: 0 };
+const _hoisted_6 = { class: "children-list" };
+const _hoisted_7 = {
+  key: 0,
+  class: "_fc-tree-node"
+};
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dk_icon = vue.resolveComponent("dk-icon");
   const _component_draggable = vue.resolveComponent("draggable");
+  const _component_el_tab_pane = vue.resolveComponent("el-tab-pane");
   const _component_el_tree = vue.resolveComponent("el-tree");
+  const _component_el_tabs = vue.resolveComponent("el-tabs");
   const _component_el_aside = vue.resolveComponent("el-aside");
   const _component_el_header = vue.resolveComponent("el-header");
   const _component_DragForm = vue.resolveComponent("DragForm");
   const _component_preview_phone = vue.resolveComponent("preview-phone");
   const _component_el_container = vue.resolveComponent("el-container");
-  const _component_el_tab_pane = vue.resolveComponent("el-tab-pane");
-  const _component_el_tabs = vue.resolveComponent("el-tabs");
   const _component_el_dialog = vue.resolveComponent("el-dialog");
   const _component_diy_cloud = vue.resolveComponent("diy-cloud");
   const _component_dk_dialog = vue.resolveComponent("dk-dialog");
@@ -1114,108 +1118,115 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         style: vue.normalizeStyle(_ctx.leftAside.style)
       }, {
         default: vue.withCtx(() => [
-          vue.createElementVNode("div", _hoisted_1, [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuList, (item, index) => {
-              return (vue.openBlock(), vue.createElementBlock("div", {
-                key: index,
-                class: "_fc-l-group"
-              }, [
-                vue.createElementVNode("h4", _hoisted_2, vue.toDisplayString(item.title), 1 /* TEXT */),
-                vue.createVNode(_component_draggable, {
-                  group: { name: 'default', pull: 'clone', put: false },
-                  sort: false,
-                  list: item.list,
-                  "item-key": "icon",
-                  filter: ".not-drag",
-                  class: "_fc-l-items"
-                }, {
-                  item: vue.withCtx(({ element }) => [
-                    (vue.openBlock(), vue.createElementBlock("div", {
-                      key: element.id,
-                      class: vue.normalizeClass(["_fc-l-item", element.count - (_ctx.countObj[element.name] || 0) <= 0 ? 'not-drag' : ''])
-                    }, [
-                      vue.createElementVNode("div", _hoisted_3, [
-                        vue.createVNode(_component_dk_icon, {
-                          icon: element.icon,
-                          size: 24
-                        }, null, 8 /* PROPS */, ["icon"])
+          vue.createVNode(_component_el_tabs, {
+            modelValue: _ctx.leftTabsName,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((_ctx.leftTabsName) = $event))
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_el_tab_pane, {
+                label: "组件列表",
+                name: "component"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createElementVNode("div", _hoisted_1, [
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuList, (item, index) => {
+                      return (vue.openBlock(), vue.createElementBlock("div", {
+                        key: index,
+                        class: "_fc-l-group"
+                      }, [
+                        vue.createElementVNode("h4", _hoisted_2, vue.toDisplayString(item.title), 1 /* TEXT */),
+                        vue.createVNode(_component_draggable, {
+                          group: { name: 'default', pull: 'clone', put: false },
+                          sort: false,
+                          list: item.list,
+                          "item-key": "icon",
+                          filter: ".not-drag",
+                          class: "_fc-l-items"
+                        }, {
+                          item: vue.withCtx(({ element }) => [
+                            (vue.openBlock(), vue.createElementBlock("div", {
+                              key: element.id,
+                              class: vue.normalizeClass(["_fc-l-item", element.count - (_ctx.countObj[element.name] || 0) <= 0 ? 'not-drag' : ''])
+                            }, [
+                              vue.createElementVNode("div", _hoisted_3, [
+                                vue.createVNode(_component_dk_icon, {
+                                  icon: element.icon,
+                                  size: 24
+                                }, null, 8 /* PROPS */, ["icon"])
+                              ]),
+                              vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(element.label), 1 /* TEXT */),
+                              (element.count)
+                                ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5, vue.toDisplayString(element.count - (_ctx.countObj[element.name] || 0)), 1 /* TEXT */))
+                                : vue.createCommentVNode("v-if", true)
+                            ], 2 /* CLASS */))
+                          ]),
+                          _: 2 /* DYNAMIC */
+                        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["list"])
+                      ]))
+                    }), 128 /* KEYED_FRAGMENT */))
+                  ])
+                ]),
+                _: 1 /* STABLE */
+              }),
+              vue.createVNode(_component_el_tab_pane, {
+                label: "结构大纲",
+                name: "tree"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createElementVNode("div", _hoisted_6, [
+                    vue.createVNode(_component_el_tree, {
+                      draggable: "",
+                      "highlight-current": "",
+                      data: _ctx.treeAside.treeData,
+                      props: { value: 'type', label: 'type' },
+                      "allow-drop": _ctx.allowDrop,
+                      "default-expand-all": true,
+                      onNodeDrop: _ctx.nodeDrop,
+                      onNodeClick: _ctx.nodeClick
+                    }, {
+                      default: vue.withCtx(({ data }) => [
+                        vue.createElementVNode("div", {
+                          class: "el-tree-node-content",
+                          style: vue.normalizeStyle(_ctx.activeRule && _ctx.activeRule._id === data._id ? 'color:#409eff' : '')
+                        }, [
+                          (data.config?.config.label)
+                            ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
+                                vue.createVNode(_component_dk_icon, {
+                                  icon: data.config?.config.icon,
+                                  class: "_fc-tree-icon"
+                                }, null, 8 /* PROPS */, ["icon"]),
+                                vue.createTextVNode(" " + vue.toDisplayString(data.config?.config.label), 1 /* TEXT */)
+                              ]))
+                            : vue.createCommentVNode("v-if", true),
+                          vue.createVNode(_component_dk_icon, {
+                            icon: "Close",
+                            class: "close-rule",
+                            onClick: vue.withModifiers($event => (_ctx.delRule(data._id)), ["stop"])
+                          }, null, 8 /* PROPS */, ["onClick"])
+                        ], 4 /* STYLE */)
                       ]),
-                      vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(element.label), 1 /* TEXT */),
-                      (element.count)
-                        ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5, vue.toDisplayString(element.count - (_ctx.countObj[element.name] || 0)), 1 /* TEXT */))
-                        : vue.createCommentVNode("v-if", true)
-                    ], 2 /* CLASS */))
-                  ]),
-                  _: 2 /* DYNAMIC */
-                }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["list"])
-              ]))
-            }), 128 /* KEYED_FRAGMENT */))
-          ]),
-          vue.createElementVNode("div", {
-            class: "children-list",
-            style: vue.normalizeStyle(_ctx.treeAside.style)
-          }, [
-            vue.createElementVNode("div", {
-              class: "child-title",
-              onClick: _cache[0] || (_cache[0] = $event => (_ctx.hideAside('tree')))
-            }, [
-              _hoisted_6,
-              vue.createVNode(_component_dk_icon, {
-                icon: _ctx.treeAside.hide ? 'ArrowUp' : 'ArrowDown'
-              }, null, 8 /* PROPS */, ["icon"])
+                      _: 1 /* STABLE */
+                    }, 8 /* PROPS */, ["data", "allow-drop", "onNodeDrop", "onNodeClick"])
+                  ])
+                ]),
+                _: 1 /* STABLE */
+              })
             ]),
-            vue.createCommentVNode("        <textarea style=\"width: 100%\">{{ treeAside.treeData }}</textarea>"),
-            vue.createVNode(_component_el_tree, {
-              draggable: "",
-              "highlight-current": "",
-              data: _ctx.treeAside.treeData,
-              props: { value: 'type', label: 'type' },
-              "allow-drop": _ctx.allowDrop,
-              "default-expand-all": true,
-              onNodeDrop: _ctx.nodeDrop,
-              onNodeClick: _ctx.nodeClick
-            }, {
-              default: vue.withCtx(({ data }) => [
-                vue.createElementVNode("div", {
-                  class: "el-tree-node-content",
-                  style: vue.normalizeStyle(_ctx.activeRule && _ctx.activeRule._id === data._id ? 'color:red' : '')
-                }, [
-                  vue.createTextVNode(vue.toDisplayString(data.type) + " ", 1 /* TEXT */),
-                  (data.config?.config.label)
-                    ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7, vue.toDisplayString(data.config?.config.label), 1 /* TEXT */))
-                    : vue.createCommentVNode("v-if", true),
-                  vue.createVNode(_component_dk_icon, {
-                    icon: "Close",
-                    class: "close-rule",
-                    onClick: vue.withModifiers($event => (_ctx.delRule(data._id)), ["stop"])
-                  }, null, 8 /* PROPS */, ["onClick"])
-                ], 4 /* STYLE */)
-              ]),
-              _: 1 /* STABLE */
-            }, 8 /* PROPS */, ["data", "allow-drop", "onNodeDrop", "onNodeClick"]),
-            (!_ctx.treeAside.hide)
-              ? (vue.openBlock(), vue.createElementBlock("div", {
-                  key: 0,
-                  class: "aside-resizer",
-                  onMousedown: _cache[1] || (_cache[1] = $event => (_ctx.onResizerMouseDown('tree', $event))),
-                  onMouseup: _cache[2] || (_cache[2] = $event => (_ctx.onResizerMouseUp('tree'))),
-                  onMousemove: _cache[3] || (_cache[3] = $event => (_ctx.onResizerMouseMove('tree')))
-                }, null, 32 /* HYDRATE_EVENTS */))
-              : vue.createCommentVNode("v-if", true)
-          ], 4 /* STYLE */),
+            _: 1 /* STABLE */
+          }, 8 /* PROPS */, ["modelValue"]),
           (!_ctx.leftAside.hide)
             ? (vue.openBlock(), vue.createElementBlock("div", {
                 key: 0,
                 class: "aside-resizer",
-                onMousedown: _cache[4] || (_cache[4] = $event => (_ctx.onResizerMouseDown('left', $event))),
-                onMouseup: _cache[5] || (_cache[5] = $event => (_ctx.onResizerMouseUp('left'))),
-                onMousemove: _cache[6] || (_cache[6] = $event => (_ctx.onResizerMouseMove('left')))
+                onMousedown: _cache[1] || (_cache[1] = $event => (_ctx.onResizerMouseDown('left', $event))),
+                onMouseup: _cache[2] || (_cache[2] = $event => (_ctx.onResizerMouseUp('left'))),
+                onMousemove: _cache[3] || (_cache[3] = $event => (_ctx.onResizerMouseMove('left')))
               }, null, 32 /* HYDRATE_EVENTS */))
             : vue.createCommentVNode("v-if", true),
           vue.createElementVNode("div", {
             class: "aside-toggle left-99%",
             style: vue.normalizeStyle(_ctx.leftAside.hide ? 'display:block' : ''),
-            onClick: _cache[7] || (_cache[7] = $event => (_ctx.hideAside('left')))
+            onClick: _cache[4] || (_cache[4] = $event => (_ctx.hideAside('left')))
           }, [
             vue.createVNode(_component_dk_icon, {
               icon: _ctx.leftAside.hide ? 'ArrowRight' : 'ArrowLeft'
@@ -1243,7 +1254,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             default: vue.withCtx(() => [
               vue.withDirectives(vue.createVNode(_component_DragForm, {
                 api: _ctx.dragForm.api,
-                "onUpdate:api": _cache[8] || (_cache[8] = $event => ((_ctx.dragForm.api) = $event)),
+                "onUpdate:api": _cache[5] || (_cache[5] = $event => ((_ctx.dragForm.api) = $event)),
                 rule: _ctx.dragForm.rule,
                 option: _ctx.dragForm.option
               }, null, 8 /* PROPS */, ["api", "rule", "option"]), [
@@ -1264,7 +1275,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         default: vue.withCtx(() => [
           vue.withDirectives(vue.createVNode(_component_el_tabs, {
             modelValue: _ctx.activeTab,
-            "onUpdate:modelValue": _cache[12] || (_cache[12] = $event => ((_ctx.activeTab) = $event))
+            "onUpdate:modelValue": _cache[9] || (_cache[9] = $event => ((_ctx.activeTab) = $event))
           }, {
             default: vue.withCtx(() => [
               (!!_ctx.activeRule)
@@ -1276,7 +1287,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                     default: vue.withCtx(() => [
                       vue.createVNode(_component_DragForm, {
                         api: _ctx.propsForm.api,
-                        "onUpdate:api": _cache[9] || (_cache[9] = $event => ((_ctx.propsForm.api) = $event)),
+                        "onUpdate:api": _cache[6] || (_cache[6] = $event => ((_ctx.propsForm.api) = $event)),
                         rule: _ctx.propsForm.rule,
                         option: _ctx.propsForm.options,
                         "model-value": _ctx.propsForm.value,
@@ -1296,7 +1307,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                     default: vue.withCtx(() => [
                       vue.withDirectives(vue.createVNode(_component_DragForm, {
                         api: _ctx.dkSettingForm.api,
-                        "onUpdate:api": _cache[10] || (_cache[10] = $event => ((_ctx.dkSettingForm.api) = $event)),
+                        "onUpdate:api": _cache[7] || (_cache[7] = $event => ((_ctx.dkSettingForm.api) = $event)),
                         rule: _ctx.dkSettingForm.rule,
                         option: _ctx.dkSettingForm.options,
                         "model-value": _ctx.dkSettingForm.value,
@@ -1315,7 +1326,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 default: vue.withCtx(() => [
                   vue.createVNode(_component_DragForm, {
                     api: _ctx.dkPageForm.api,
-                    "onUpdate:api": _cache[11] || (_cache[11] = $event => ((_ctx.dkPageForm.api) = $event)),
+                    "onUpdate:api": _cache[8] || (_cache[8] = $event => ((_ctx.dkPageForm.api) = $event)),
                     rule: _ctx.dkPageForm.rule,
                     option: _ctx.dkPageForm.options,
                     onChange: _ctx.dkPageChange
@@ -1332,15 +1343,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             ? (vue.openBlock(), vue.createElementBlock("div", {
                 key: 0,
                 class: "aside-resizer left-0",
-                onMousedown: _cache[13] || (_cache[13] = $event => (_ctx.onResizerMouseDown('right', $event))),
-                onMouseup: _cache[14] || (_cache[14] = $event => (_ctx.onResizerMouseUp('right'))),
-                onMousemove: _cache[15] || (_cache[15] = $event => (_ctx.onResizerMouseMove('right')))
+                onMousedown: _cache[10] || (_cache[10] = $event => (_ctx.onResizerMouseDown('right', $event))),
+                onMouseup: _cache[11] || (_cache[11] = $event => (_ctx.onResizerMouseUp('right'))),
+                onMousemove: _cache[12] || (_cache[12] = $event => (_ctx.onResizerMouseMove('right')))
               }, null, 32 /* HYDRATE_EVENTS */))
             : vue.createCommentVNode("v-if", true),
           vue.createElementVNode("div", {
             class: "aside-toggle right-99%",
             style: vue.normalizeStyle(_ctx.rightAside.hide ? 'display:block' : ''),
-            onClick: _cache[16] || (_cache[16] = $event => (_ctx.hideAside('right')))
+            onClick: _cache[13] || (_cache[13] = $event => (_ctx.hideAside('right')))
           }, [
             vue.createVNode(_component_dk_icon, {
               icon: _ctx.rightAside.hide ? 'ArrowLeft' : 'ArrowRight'
@@ -1352,7 +1363,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       vue.createCommentVNode("        右边操作区结束"),
       vue.createVNode(_component_el_dialog, {
         visible: _ctx.preview.state,
-        "onUpdate:visible": _cache[17] || (_cache[17] = $event => ((_ctx.preview.state) = $event)),
+        "onUpdate:visible": _cache[14] || (_cache[14] = $event => ((_ctx.preview.state) = $event)),
         width: "375px",
         "append-to-body": "",
         style: {"min-height":"700px"}
@@ -1368,7 +1379,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       }, 8 /* PROPS */, ["visible"]),
       vue.createVNode(_component_dk_dialog, {
         modelValue: _ctx.diyCloud.show,
-        "onUpdate:modelValue": _cache[18] || (_cache[18] = $event => ((_ctx.diyCloud.show) = $event)),
+        "onUpdate:modelValue": _cache[15] || (_cache[15] = $event => ((_ctx.diyCloud.show) = $event)),
         width: "1200px",
         "append-to-body": "",
         title: "DIY模板市场",