@tmagic/editor 1.2.14 → 1.2.15

package/dist/style.css

@@ -188,28 +188,46 @@
   border-color: #2882e0;
   color: #2882e0;
 }
-.m-editor-sidebar {
+.m-editor-sidebar.tmagic-design-tabs {
   height: 100%;
 }
-.m-editor-sidebar.el-tabs--left .el-tabs__header {
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header {
   background: #2882e0;
   border: 0;
+  height: 100%;
+}
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav--card,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav--card {
+  background-color: transparent;
 }
-.m-editor-sidebar.el-tabs--left .el-tabs__header.is-left {
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav--card.t-tabs__nav-item:not(.t-is-disabled):not(.t-is-active):hover,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav--card.t-tabs__nav-item:not(.t-is-disabled):not(.t-is-active):hover {
+  background-color: transparent;
+}
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header.is-left, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header.t-is-left,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header.is-left,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header.t-is-left {
   width: 40px;
   margin-right: 0;
 }
-.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__nav-wrap {
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__nav-wrap,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__nav-wrap {
   margin: 0;
 }
-.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__nav {
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__nav,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__nav {
   border: 0;
   border-radius: 0;
 }
-.m-editor-sidebar.el-tabs--left .el-tabs__header .tab-label {
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .tab-label,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .tab-label {
   margin-left: 2px;
 }
-.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left {
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left,
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item {
   line-height: 15px;
   border: 0;
   height: auto;
@@ -217,37 +235,86 @@
   color: white;
   box-sizing: border-box;
 }
-.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active {
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left.is-active, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left.t-is-active, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left.is-active, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left.t-is-active,
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left.is-active,
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left.t-is-active,
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left.is-active,
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left.t-is-active,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left.is-active,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left.t-is-active,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left.is-active,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left.t-is-active,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left.is-active,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left.t-is-active,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left.is-active,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left.t-is-active {
   background: #ffffff;
   border: 0;
 }
-.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active i {
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left.is-active i, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left.t-is-active i, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left.is-active i, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left.t-is-active i,
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left.is-active i,
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left.t-is-active i,
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left.is-active i,
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left.t-is-active i,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left.is-active i,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left.t-is-active i,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left.is-active i,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left.t-is-active i,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left.is-active i,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left.t-is-active i,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left.is-active i,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left.t-is-active i {
   color: #353140;
 }
-.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active .magic-editor-tab-panel-title {
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left.is-active .magic-editor-tab-panel-title, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left.t-is-active .magic-editor-tab-panel-title, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left.is-active .magic-editor-tab-panel-title, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left.t-is-active .magic-editor-tab-panel-title,
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left.is-active .magic-editor-tab-panel-title,
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left.t-is-active .magic-editor-tab-panel-title,
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left.is-active .magic-editor-tab-panel-title,
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left.t-is-active .magic-editor-tab-panel-title,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left.is-active .magic-editor-tab-panel-title,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left.t-is-active .magic-editor-tab-panel-title,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left.is-active .magic-editor-tab-panel-title,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left.t-is-active .magic-editor-tab-panel-title,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left.is-active .magic-editor-tab-panel-title,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left.t-is-active .magic-editor-tab-panel-title,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left.is-active .magic-editor-tab-panel-title,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left.t-is-active .magic-editor-tab-panel-title {
   color: #353140;
 }
-.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left:first-child {
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.is-left:first-child, .m-editor-sidebar.tmagic-design-tabs .el-tabs__header .el-tabs__item.is-left.t-is-left:first-child,
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.is-left:first-child,
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item.t-is-left:first-child,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.is-left:first-child,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .el-tabs__item.is-left.t-is-left:first-child,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.is-left:first-child,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item.t-is-left:first-child {
   border-right: 0;
 }
-.m-editor-sidebar.el-tabs--left .el-tabs__header i {
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .t-tabs__nav-item,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .t-tabs__nav-item {
+  padding: 7px;
+}
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header i,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header i {
   font-size: 25px;
   color: rgba(255, 255, 255, 0.6);
 }
-.m-editor-sidebar.el-tabs--left .el-tabs__header i:hover {
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header i:hover,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header i:hover {
   color: white;
 }
-.m-editor-sidebar.el-tabs--left .el-tabs__header .magic-editor-tab-panel-title {
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__header .magic-editor-tab-panel-title,
+.m-editor-sidebar.tmagic-design-tabs .t-tabs__header .magic-editor-tab-panel-title {
   font-size: 12px;
   white-space: normal;
 }
-.m-editor-sidebar .el-scrollbar {
+.m-editor-sidebar.tmagic-design-tabs .el-scrollbar {
   height: 100%;
 }
-.m-editor-sidebar .el-tree {
+.m-editor-sidebar.tmagic-design-tabs .el-tree {
   min-height: 100%;
 }
-.m-editor-sidebar .fold-icon {
+.m-editor-sidebar.tmagic-design-tabs .fold-icon {
   position: absolute;
   bottom: 8px;
   left: 0px;
@@ -258,11 +325,11 @@
   opacity: 0.8;
   cursor: pointer;
 }
-.m-editor-sidebar .fold-icon:hover {
+.m-editor-sidebar.tmagic-design-tabs .fold-icon:hover {
   background: rgba(0, 0, 0, 0.2);
 }
-.m-editor-sidebar .el-tabs__content,
-.m-editor-sidebar .el-tab-pane {
+.m-editor-sidebar.tmagic-design-tabs .el-tabs__content,
+.m-editor-sidebar.tmagic-design-tabs .el-tab-pane {
   height: 100%;
 }
 .magic-editor-layer-panel {
@@ -618,72 +685,16 @@
 .m-editor-code-block-list {
   height: 100%;
 }
-.m-editor-code-block-list .magic-editor-layer-tree {
-  padding-top: 48px;
-}
-.m-editor-code-block-list .code-header-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: 0;
-  width: 100%;
-  z-index: 1;
-}
-.m-editor-code-block-list .code-header-wrapper .search-input {
-  flex: 1;
-  position: relative;
-}
-.m-editor-code-block-list .code-header-wrapper .create-code-button {
-  margin-left: 2px;
-  margin-right: 10px;
-}
-.m-editor-code-block-list .divider {
-  margin: 10px 0 0 0;
-}
-.m-editor-code-block-list .list-container {
-  width: 100%;
-  overflow: hidden;
-}
-.m-editor-code-block-list .list-container .list-item {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  align-items: center;
-}
-.m-editor-code-block-list .list-container .list-item .right-tool {
-  display: flex;
-  width: fit-content !important;
-  align-items: center;
-  margin-right: 10px;
-}
-.m-editor-code-block-list .list-container .list-item .right-tool .edit-icon {
-  margin: 0 5px;
-}
 .m-editor-code-block-list .list-container .list-item .codeIcon {
-  width: 20px;
-  height: 20px;
+  width: 22px;
+  height: 22px;
   margin-right: 5px;
 }
 .m-editor-code-block-list .list-container .list-item .compIcon {
-  width: 15px;
-  height: 15px;
+  width: 22px;
+  height: 22px;
   margin-right: 5px;
 }
-.m-editor-code-block-list .list-container .list-item .code-name {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 0 !important;
-  flex: 1;
-  line-height: 22px;
-}
-.m-editor-code-block-list .list-container .list-item .code-name.code {
-  color: #000;
-}
-.m-editor-code-block-list .list-container .list-item .code-name.hook {
-  color: #909399;
-}
 .m-fields-code-select {
   width: 100%;
 }
@@ -842,4 +853,54 @@
   left: 5px;
   top: 5px;
   z-index: 10;
+}
+.m-editor-dep-list-panel .magic-editor-layer-tree {
+  padding-top: 48px;
+}
+.m-editor-dep-list-panel .search-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+}
+.m-editor-dep-list-panel .search-wrapper .search-input {
+  flex: 1;
+  position: relative;
+}
+.m-editor-dep-list-panel .search-wrapper .tmagic-design-button {
+  margin-right: 10px;
+}
+.m-editor-dep-list-panel .list-container {
+  width: 100%;
+  overflow: hidden;
+}
+.m-editor-dep-list-panel .list-container .list-item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+.m-editor-dep-list-panel .list-container .list-item .right-tool {
+  display: flex;
+  width: fit-content !important;
+  align-items: center;
+}
+.m-editor-dep-list-panel .list-container .list-item .right-tool .edit-icon {
+  margin: 0 5px;
+}
+.m-editor-dep-list-panel .list-container .list-item .name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 0 !important;
+  flex: 1;
+  line-height: 22px;
+}
+.m-editor-dep-list-panel .list-container .list-item .name.code {
+  color: #000;
+}
+.m-editor-dep-list-panel .list-container .list-item .name.hook {
+  color: #909399;
 }

package/dist/tmagic-editor.js

@@ -1,13 +1,13 @@
 import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, unref, reactive, watch, createElementBlock, normalizeClass, createVNode, withCtx, createElementVNode, resolveDynamicComponent, toRaw, inject, ref, Fragment, renderList, createTextVNode, withModifiers, createCommentVNode, toDisplayString, onMounted, onUnmounted, renderSlot, createSlots, normalizeProps, mergeProps, markRaw, getCurrentInstance, watchEffect, createStaticVNode, withDirectives, Teleport, vShow, nextTick, toHandlers, provide } from 'vue';
 import serialize from 'serialize-javascript';
 import { isEmpty, map, has, throttle, cloneDeep, mergeWith, isObject, uniq, forIn, difference, union, pick, keys } from 'lodash-es';
-import { TMagicCard, TMagicIcon, TMagicButton, TMagicTooltip, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, tMagicMessage, TMagicInput, tMagicMessageBox, TMagicDrawer, TMagicTree, TMagicCollapse, TMagicCollapseItem, getConfig as getConfig$1, TMagicTabs, TMagicPopover } from '@tmagic/design';
+import { TMagicCard, TMagicIcon, TMagicButton, TMagicTooltip, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, tMagicMessage, TMagicInput, tMagicMessageBox, TMagicDrawer, TMagicTree, TMagicCollapse, TMagicCollapseItem, getConfig as getConfig$1, TMagicPopover } from '@tmagic/design';
 import { HookType, ActionType, NodeType } from '@tmagic/schema';
 import { Edit, View, Delete, Close, Plus, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, Files, CopyDocument, Coin, EditPen, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Top, Bottom } from '@element-plus/icons-vue';
 import { createValues, MForm } from '@tmagic/form';
 import * as monaco from 'monaco-editor';
 import Gesto from 'gesto';
-import { isPop, getNodePath, isNumber, isPage, toLine, datetimeFormatter, removeClassNameByClassName } from '@tmagic/utils';
+import { isPop, getNodePath, isNumber, isPage, toLine, guid, datetimeFormatter, removeClassNameByClassName } from '@tmagic/utils';
 import KeyController from 'keycon';
 import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
 import { EventEmitter } from 'events';
@@ -1829,7 +1829,7 @@ class Props extends BaseService {
     };
   }
   async createId(type) {
-    return `${type}_${this.guid()}`;
+    return `${type}_${guid()}`;
   }
   /**
    * 将组件与组件的子元素配置中的id都设置成一个新的ID
@@ -1872,18 +1872,6 @@ class Props extends BaseService {
     this.removeAllListeners();
     this.removeAllPlugins();
   }
-  /**
-   * 生成指定位数的GUID，无【-】格式
-   * @param digit 位数，默认值8
-   * @returns
-   */
-  guid(digit = 8) {
-    return "x".repeat(digit).replace(/[xy]/g, (c) => {
-      const r = Math.random() * 16 | 0;
-      const v = c === "x" ? r : r & 3 | 8;
-      return v.toString(16);
-    });
-  }
 }
 const propsService = new Props();
 
@@ -3427,9 +3415,18 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         size: "small",
         placeholder: "输入关键字进行过滤",
         clearable: "",
-        "prefix-icon": unref(Search),
         onInput: filterTextChangeHandler
-      }, null, 8, ["modelValue", "prefix-icon"]);
+      }, {
+        prefix: withCtx(() => [
+          createVNode(unref(TMagicIcon), null, {
+            default: withCtx(() => [
+              createVNode(unref(Search))
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
     };
   }
 });
@@ -3444,11 +3441,7 @@ const _export_sfc = (sfc, props) => {
 
 const _sfc_main$j = {};
 
-const _hoisted_1$b = {
-  width: "16px",
-  height: "16px",
-  xmlns: "http://www.w3.org/2000/svg"
-};
+const _hoisted_1$b = { xmlns: "http://www.w3.org/2000/svg" };
 const _hoisted_2$6 = /*#__PURE__*/createElementVNode("g", {
   fill: "#7C878E",
   "fill-rule": "evenodd"
@@ -3471,20 +3464,18 @@ const AppManageIcon = /*#__PURE__*/_export_sfc(_sfc_main$j, [['render',_sfc_rend
 const _sfc_main$i = {};
 
 const _hoisted_1$a = {
-  width: "32px",
-  height: "32px",
   viewBox: "0 0 32 32",
   version: "1.1",
   xmlns: "http://www.w3.org/2000/svg",
   "xmlns:xlink": "http://www.w3.org/1999/xlink"
 };
-const _hoisted_2$5 = /*#__PURE__*/createStaticVNode("<title>gsd-icon-line-Universal-code</title><desc>Created with Sketch.</desc><defs><rect id=\"path-1\" x=\"0\" y=\"0\" width=\"32\" height=\"32\"></rect></defs><g id=\"组件规范\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"><g id=\"03图标\" transform=\"translate(-561.000000, -2356.000000)\"><g id=\"icon/line/Universal/code\" transform=\"translate(561.000000, 2356.000000)\"><g id=\"路径\"><mask id=\"mask-2\" fill=\"white\"><use xlink:href=\"#path-1\"></use></mask><use id=\"蒙版\" fill=\"#D8D8D8\" opacity=\"0\" xlink:href=\"#path-1\"></use><path d=\"M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z\" id=\"形状\" fill=\"#1D1F24\" mask=\"url(#mask-2)\"></path></g></g><g id=\"icon切图\" transform=\"translate(226.000000, 1782.000000)\"></g></g></g>", 4);
-const _hoisted_6 = [
+const _hoisted_2$5 = /*#__PURE__*/createStaticVNode("<defs><rect id=\"path-1\" x=\"0\" y=\"0\" width=\"32\" height=\"32\"></rect></defs><g id=\"组件规范\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"><g id=\"03图标\" transform=\"translate(-561.000000, -2356.000000)\"><g id=\"icon/line/Universal/code\" transform=\"translate(561.000000, 2356.000000)\"><g id=\"路径\"><mask id=\"mask-2\" fill=\"white\"><use xlink:href=\"#path-1\"></use></mask><use id=\"蒙版\" fill=\"#D8D8D8\" opacity=\"0\" xlink:href=\"#path-1\"></use><path d=\"M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z\" id=\"形状\" fill=\"#1D1F24\" mask=\"url(#mask-2)\"></path></g></g><g id=\"icon切图\" transform=\"translate(226.000000, 1782.000000)\"></g></g></g>", 2);
+const _hoisted_4$3 = [
   _hoisted_2$5
 ];
 
 function _sfc_render$1(_ctx, _cache) {
-  return (openBlock(), createElementBlock("svg", _hoisted_1$a, _hoisted_6))
+  return (openBlock(), createElementBlock("svg", _hoisted_1$a, _hoisted_4$3))
 }
 const CodeIcon = /*#__PURE__*/_export_sfc(_sfc_main$i, [['render',_sfc_render$1]]);
 
@@ -3914,7 +3905,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$6 = { class: "code-header-wrapper" };
+const _hoisted_1$6 = { class: "search-wrapper" };
 const _hoisted_2$2 = /* @__PURE__ */ createTextVNode("新增");
 const _hoisted_3 = ["id"];
 const _hoisted_4 = { class: "list-item" };
@@ -4010,7 +4001,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-editor-code-block-list" }, {
+      return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-editor-code-block-list m-editor-dep-list-panel" }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
             createElementVNode("div", _hoisted_1$6, [
@@ -4057,8 +4048,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     class: "compIcon"
                   })) : createCommentVNode("", true),
                   createElementVNode("span", {
-                    class: normalizeClass(["code-name", { code: data.type === "code", hook: data.type === "key" }])
-                  }, toDisplayString(data.name) + "（" + toDisplayString(data.id) + "）", 3),
+                    class: normalizeClass(["name", { code: data.type === "code", hook: data.type === "key" }])
+                  }, toDisplayString(data.name) + " (" + toDisplayString(data.id) + ")", 3),
                   data.type === "code" ? (openBlock(), createElementBlock("div", _hoisted_5, [
                     createVNode(unref(TMagicTooltip), {
                       effect: "dark",
@@ -4747,7 +4738,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   },
   setup(__props, { expose }) {
     const props = __props;
-    const uiComponent = getConfig$1("components").tabPane;
+    const tabPaneComponent = getConfig$1("components").tabPane;
+    const tabsComponent = getConfig$1("components").tabs;
     const activeTabName = ref(props.data?.status);
     const getItemConfig = (data) => {
       const map = {
@@ -4792,20 +4784,17 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       activeTabName
     });
     return (_ctx, _cache) => {
-      return __props.data.type === "tabs" && __props.data.items.length ? (openBlock(), createBlock(unref(TMagicTabs), {
+      return __props.data.type === "tabs" && __props.data.items.length ? (openBlock(), createBlock(resolveDynamicComponent(unref(tabsComponent).component), mergeProps({
         key: 0,
-        class: "m-editor-sidebar",
         modelValue: activeTabName.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTabName.value = $event),
-        type: "card",
-        "tab-position": "left"
-      }, {
+        class: "m-editor-sidebar tmagic-design-tabs"
+      }, unref(tabsComponent).props({ type: "card", tabPosition: "left" })), {
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(sideBarItems), (config, index) => {
-            return openBlock(), createBlock(resolveDynamicComponent(unref(uiComponent).component), {
-              key: config.$key || index,
-              name: config.text
-            }, {
+            return openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent).component), mergeProps(unref(tabPaneComponent).props({ name: config.text }), {
+              key: config.$key || index
+            }), {
               label: withCtx(() => [
                 (openBlock(), createElementBlock("div", {
                   key: config.text
@@ -4885,11 +4874,11 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 ]), 1040)) : createCommentVNode("", true)
               ]),
               _: 2
-            }, 1032, ["name"]);
+            }, 1040);
           }), 128))
         ]),
         _: 3
-      }, 8, ["modelValue"])) : createCommentVNode("", true);
+      }, 16, ["modelValue"])) : createCommentVNode("", true);
     };
   }
 });