@tmagic/editor 1.6.1 → 1.7.0-beta.0

package/dist/style.css

@@ -119,6 +119,17 @@
   display: inline-flex;
 }
 
+.m-form-container.has-tip {
+  display: flex;
+  align-items: baseline;
+}
+.m-form-container.has-tip .tmagic-design-form-item {
+  flex: 1;
+}
+.m-form-container .tmagic-design-form-item.show-diff {
+  background: #f7dadd;
+}
+
 .m-form-dialog .el-dialog__body {
   padding: 0 !important;
 }
@@ -156,18 +167,27 @@
   max-width: 50%;
   height: 100%;
 }
-.m-form .el-table .cell > div.m-form-container {
+.m-form .tmagic-design-table .cell > div.m-form-container {
   display: block;
 }
-.m-form .el-tabs {
+.m-form .tmagic-design-table .cell > div.m-form-container.has-tip {
+  display: flex;
+}
+.m-form .tmagic-design-tabs {
   margin-bottom: 10px;
 }
-.m-form .el-form-item.tmagic-form-hidden > .el-form-item__label {
+.m-form .tmagic-design-form-item.tmagic-form-hidden > .el-form-item__label {
   display: none;
 }
 .m-form .t-form__item.tmagic-form-hidden > .t-form__label {
   display: none;
 }
+.m-form .t-form__item.tmagic-form-hidden > .t-form__controls {
+  margin-left: 0 !important;
+}
+.m-form.t-form:not(.t-form-inline) .t-form__item:last-of-type {
+  margin-bottom: var(--td-comp-margin-xxl);
+}
 
 .magic-datetime-picker-popper .el-picker-panel__footer button:first-child {
   display: none;
@@ -437,6 +457,7 @@ fieldset.m-fieldset .m-form-tip {
 }
 .m-editor-nav-menu > div {
   display: flex;
+  gap: 3px;
   height: 100%;
   z-index: 1;
   align-items: center;
@@ -485,6 +506,10 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-nav-menu .menu-item.rule .el-icon {
   transform: rotate(-90deg);
 }
+.m-editor-nav-menu .menu-item .t-button {
+  padding-left: 1px;
+  padding-right: 1px;
+}
 
 .m-editor {
   display: flex;
@@ -1762,12 +1787,16 @@ fieldset.m-fieldset .m-form-tip {
   width: 80px;
   height: auto;
 }
-.background-position-container .presets-value-list .el-button + .el-button {
+.background-position-container .presets-value-list .tmagic-design-button + .tmagic-design-button {
   margin-left: 2px;
 }
-.background-position-container .presets-value-list .el-button:nth-child(3n+1) {
+.background-position-container .presets-value-list .tmagic-design-button:nth-child(3n+1) {
   margin-left: 0 !important;
 }
+.background-position-container .presets-value-list .t-button--variant-text {
+  padding-left: 2px;
+  padding-right: 2px;
+}
 .background-position-container .presets-value-list .position-icon {
   position: relative;
   width: 14px;
@@ -1775,7 +1804,7 @@ fieldset.m-fieldset .m-form-tip {
   border: 1px solid #1d1f24;
 }
 .background-position-container .presets-value-list .position-icon.active {
-  background-color: var(--el-color-primary);
+  background-color: var(#2882e0);
 }
 .background-position-container .presets-value-list .position-icon.active::after {
   border: 1px solid #fff;

package/dist/tmagic-editor.js

@@ -7,7 +7,7 @@ export { default as formPlugin } from '@tmagic/form';
 import tablePlugin__default, { MagicTable } from '@tmagic/table';
 export * from '@tmagic/table';
 export { default as tablePlugin } from '@tmagic/table';
-import { defineComponent, createBlock, createElementBlock, openBlock, unref, withCtx, createVNode, createElementVNode, normalizeClass, resolveDynamicComponent, toRaw, ref, useTemplateRef, watch, onMounted, onBeforeUnmount, onUnmounted, Teleport, normalizeStyle, createCommentVNode, nextTick, computed, reactive, resolveComponent, inject, Fragment, renderList, mergeProps, mergeModels, useModel, provide, renderSlot, toDisplayString, shallowReactive, createTextVNode, isRef, createStaticVNode, watchEffect, markRaw, withDirectives, vModelText, vShow, shallowRef, withModifiers, toHandlers, createSlots, getCurrentInstance, Transition, resolveDirective, mergeDefaults } from 'vue';
+import { defineComponent, createBlock, createElementBlock, openBlock, unref, withCtx, createVNode, createElementVNode, normalizeClass, resolveDynamicComponent, toRaw, ref, useTemplateRef, watch, onMounted, onBeforeUnmount, onUnmounted, Teleport, normalizeStyle, createCommentVNode, nextTick, computed, reactive, resolveComponent, inject, Fragment, renderList, mergeProps, mergeModels, useModel, provide, renderSlot, toDisplayString, shallowReactive, createTextVNode, isRef, createStaticVNode, watchEffect, markRaw, withDirectives, vShow, shallowRef, withModifiers, createSlots, toHandlers, getCurrentInstance, Transition, resolveDirective, mergeDefaults } from 'vue';
 import { Edit, FullScreen, View, Close, Coin, Delete, Plus, Grid, ArrowDown, ArrowLeftBold, ArrowRightBold, Files, Search, DocumentCopy, CaretBottom, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Document, Sugar, ArrowRight, CopyDocument, Hide, EditPen, List, Goods, CloseBold, Top, Bottom } from '@element-plus/icons-vue';
 import { throttle, isEmpty, isObject, cloneDeep, mergeWith, uniq, get, map, has, pick, keys } from 'lodash-es';
 import serialize from 'serialize-javascript';
@@ -2161,6 +2161,7 @@ class Editor extends BaseService {
   }
   /**
    * 更新节点
+   * update后会触发依赖收集，收集完后会掉stage.update方法
    * @param config 新的节点配置，配置中需要有id信息
    * @returns 更新后的节点配置
    */
@@ -6216,7 +6217,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
         {
           type: "table",
           name: "cond",
-          operateColWidth: 100,
+          operateColWidth: 80,
           enableToggleMode: false,
           items: [
             parentFields.value.length ? {
@@ -6250,7 +6251,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
               type: "cond-op-select",
               parentFields: parentFields.value,
               label: "条件",
-              width: 160,
+              width: 140,
               name: "op"
             },
             {
@@ -7311,7 +7312,7 @@ const _hoisted_2$c = {
   class: "help-txt"
 };
 const _hoisted_3$5 = { class: "next-input" };
-const _hoisted_4$4 = ["onUpdate:modelValue", "title", "disabled", "onChange"];
+const _hoisted_4$4 = ["model-value", "title", "disabled", "onChange"];
 const _sfc_main$W = /* @__PURE__ */ defineComponent({
   __name: "Box",
   props: {
@@ -7384,15 +7385,13 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
                   /* TEXT */
                 )) : createCommentVNode("v-if", true),
                 createElementVNode("span", _hoisted_3$5, [
-                  withDirectives(createElementVNode("input", {
-                    "onUpdate:modelValue": ($event) => __props.model[item.name] = $event,
+                  createElementVNode("input", {
+                    "model-value": __props.model[item.name],
                     placeholder: "0",
                     title: __props.model[item.name],
                     disabled: __props.disabled,
                     onChange: ($event) => change($event, item.name)
-                  }, null, 40, _hoisted_4$4), [
-                    [vModelText, __props.model[item.name]]
-                  ])
+                  }, null, 40, _hoisted_4$4)
                 ])
               ],
               2
@@ -8129,7 +8128,8 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TMagicCollapse), {
         class: "m-fields-style-setter",
-        "model-value": collapseValue.value
+        modelValue: collapseValue.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => collapseValue.value = $event)
       }, {
         default: withCtx(() => [
           (openBlock(), createElementBlock(
@@ -8167,7 +8167,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
         ]),
         _: 1
         /* STABLE */
-      }, 8, ["model-value"]);
+      }, 8, ["modelValue"]);
     };
   }
 });
@@ -8688,23 +8688,31 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
                     size: "small",
                     link: "",
                     disabled: disabled.value
-                  }, {
-                    default: withCtx(() => [
-                      __props.data.icon ? (openBlock(), createBlock(_sfc_main$1r, {
-                        key: 0,
-                        icon: __props.data.icon
-                      }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
-                      createElementVNode(
-                        "span",
-                        null,
-                        toDisplayString(__props.data.text),
-                        1
-                        /* TEXT */
-                      )
-                    ]),
-                    _: 1
-                    /* STABLE */
-                  }, 8, ["disabled"])
+                  }, createSlots({
+                    _: 2
+                    /* DYNAMIC */
+                  }, [
+                    __props.data.icon ? {
+                      name: "icon",
+                      fn: withCtx(() => [
+                        createVNode(_sfc_main$1r, {
+                          icon: __props.data.icon
+                        }, null, 8, ["icon"])
+                      ]),
+                      key: "0"
+                    } : void 0,
+                    __props.data.text ? {
+                      name: "default",
+                      fn: withCtx(() => [
+                        createTextVNode(
+                          toDisplayString(__props.data.text),
+                          1
+                          /* TEXT */
+                        )
+                      ]),
+                      key: "1"
+                    } : void 0
+                  ]), 1032, ["disabled"])
                 ]),
                 _: 1
                 /* STABLE */
@@ -8714,23 +8722,31 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
                 link: "",
                 disabled: disabled.value,
                 title: __props.data.text
-              }, {
-                default: withCtx(() => [
-                  __props.data.icon ? (openBlock(), createBlock(_sfc_main$1r, {
-                    key: 0,
-                    icon: __props.data.icon
-                  }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
-                  createElementVNode(
-                    "span",
-                    null,
-                    toDisplayString(__props.data.text),
-                    1
-                    /* TEXT */
-                  )
-                ]),
-                _: 1
-                /* STABLE */
-              }, 8, ["disabled", "title"]))
+              }, createSlots({
+                _: 2
+                /* DYNAMIC */
+              }, [
+                __props.data.icon ? {
+                  name: "icon",
+                  fn: withCtx(() => [
+                    createVNode(_sfc_main$1r, {
+                      icon: __props.data.icon
+                    }, null, 8, ["icon"])
+                  ]),
+                  key: "0"
+                } : void 0,
+                __props.data.text ? {
+                  name: "default",
+                  fn: withCtx(() => [
+                    createTextVNode(
+                      toDisplayString(__props.data.text),
+                      1
+                      /* TEXT */
+                    )
+                  ]),
+                  key: "1"
+                } : void 0
+              ]), 1032, ["disabled", "title"]))
             ],
             64
             /* STABLE_FRAGMENT */
@@ -12305,8 +12321,15 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         items: group.items.filter((item) => item.text.includes(searchText.value))
       }))
     );
-    const collapseValue = computed(
-      () => Array(list.value?.length).fill(1).map((x, i) => `${i}`)
+    const collapseValue = ref();
+    watch(
+      list,
+      () => {
+        collapseValue.value = Array(list.value?.length).fill(1).map((x, i) => `${i}`);
+      },
+      {
+        immediate: true
+      }
     );
     let timeout;
     let clientX;
@@ -12364,7 +12387,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "component-list", { componentGroupList: list.value }, () => [
             createVNode(unref(TMagicCollapse), {
               class: "ui-component-panel",
-              "model-value": collapseValue.value
+              modelValue: collapseValue.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => collapseValue.value = $event)
             }, {
               default: withCtx(() => [
                 (openBlock(true), createElementBlock(
@@ -12439,7 +12463,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
               ]),
               _: 3
               /* FORWARDED */
-            }, 8, ["model-value"])
+            }, 8, ["modelValue"])
           ])
         ]),
         _: 3

package/dist/tmagic-editor.umd.cjs

@@ -6954,6 +6954,7 @@
     }
     /**
      * 更新节点
+     * update后会触发依赖收集，收集完后会掉stage.update方法
      * @param config 新的节点配置，配置中需要有id信息
      * @returns 更新后的节点配置
      */
@@ -11009,7 +11010,7 @@
           {
             type: "table",
             name: "cond",
-            operateColWidth: 100,
+            operateColWidth: 80,
             enableToggleMode: false,
             items: [
               parentFields.value.length ? {
@@ -11043,7 +11044,7 @@
                 type: "cond-op-select",
                 parentFields: parentFields.value,
                 label: "条件",
-                width: 160,
+                width: 140,
                 name: "op"
               },
               {
@@ -12104,7 +12105,7 @@
     class: "help-txt"
   };
   const _hoisted_3$5 = { class: "next-input" };
-  const _hoisted_4$4 = ["onUpdate:modelValue", "title", "disabled", "onChange"];
+  const _hoisted_4$4 = ["model-value", "title", "disabled", "onChange"];
   const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
     __name: "Box",
     props: {
@@ -12177,15 +12178,13 @@
                     /* TEXT */
                   )) : vue.createCommentVNode("v-if", true),
                   vue.createElementVNode("span", _hoisted_3$5, [
-                    vue.withDirectives(vue.createElementVNode("input", {
-                      "onUpdate:modelValue": ($event) => __props.model[item.name] = $event,
+                    vue.createElementVNode("input", {
+                      "model-value": __props.model[item.name],
                       placeholder: "0",
                       title: __props.model[item.name],
                       disabled: __props.disabled,
                       onChange: ($event) => change($event, item.name)
-                    }, null, 40, _hoisted_4$4), [
-                      [vue.vModelText, __props.model[item.name]]
-                    ])
+                    }, null, 40, _hoisted_4$4)
                   ])
                 ],
                 2
@@ -12922,7 +12921,8 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicCollapse), {
           class: "m-fields-style-setter",
-          "model-value": collapseValue.value
+          modelValue: collapseValue.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => collapseValue.value = $event)
         }, {
           default: vue.withCtx(() => [
             (vue.openBlock(), vue.createElementBlock(
@@ -12960,7 +12960,7 @@
           ]),
           _: 1
           /* STABLE */
-        }, 8, ["model-value"]);
+        }, 8, ["modelValue"]);
       };
     }
   });
@@ -13481,23 +13481,31 @@
                       size: "small",
                       link: "",
                       disabled: disabled.value
-                    }, {
-                      default: vue.withCtx(() => [
-                        __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$1r, {
-                          key: 0,
-                          icon: __props.data.icon
-                        }, null, 8, ["icon"])) : vue.createCommentVNode("v-if", true),
-                        vue.createElementVNode(
-                          "span",
-                          null,
-                          vue.toDisplayString(__props.data.text),
-                          1
-                          /* TEXT */
-                        )
-                      ]),
-                      _: 1
-                      /* STABLE */
-                    }, 8, ["disabled"])
+                    }, vue.createSlots({
+                      _: 2
+                      /* DYNAMIC */
+                    }, [
+                      __props.data.icon ? {
+                        name: "icon",
+                        fn: vue.withCtx(() => [
+                          vue.createVNode(_sfc_main$1r, {
+                            icon: __props.data.icon
+                          }, null, 8, ["icon"])
+                        ]),
+                        key: "0"
+                      } : void 0,
+                      __props.data.text ? {
+                        name: "default",
+                        fn: vue.withCtx(() => [
+                          vue.createTextVNode(
+                            vue.toDisplayString(__props.data.text),
+                            1
+                            /* TEXT */
+                          )
+                        ]),
+                        key: "1"
+                      } : void 0
+                    ]), 1032, ["disabled"])
                   ]),
                   _: 1
                   /* STABLE */
@@ -13507,23 +13515,31 @@
                   link: "",
                   disabled: disabled.value,
                   title: __props.data.text
-                }, {
-                  default: vue.withCtx(() => [
-                    __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$1r, {
-                      key: 0,
-                      icon: __props.data.icon
-                    }, null, 8, ["icon"])) : vue.createCommentVNode("v-if", true),
-                    vue.createElementVNode(
-                      "span",
-                      null,
-                      vue.toDisplayString(__props.data.text),
-                      1
-                      /* TEXT */
-                    )
-                  ]),
-                  _: 1
-                  /* STABLE */
-                }, 8, ["disabled", "title"]))
+                }, vue.createSlots({
+                  _: 2
+                  /* DYNAMIC */
+                }, [
+                  __props.data.icon ? {
+                    name: "icon",
+                    fn: vue.withCtx(() => [
+                      vue.createVNode(_sfc_main$1r, {
+                        icon: __props.data.icon
+                      }, null, 8, ["icon"])
+                    ]),
+                    key: "0"
+                  } : void 0,
+                  __props.data.text ? {
+                    name: "default",
+                    fn: vue.withCtx(() => [
+                      vue.createTextVNode(
+                        vue.toDisplayString(__props.data.text),
+                        1
+                        /* TEXT */
+                      )
+                    ]),
+                    key: "1"
+                  } : void 0
+                ]), 1032, ["disabled", "title"]))
               ],
               64
               /* STABLE_FRAGMENT */
@@ -17098,8 +17114,15 @@
           items: group.items.filter((item) => item.text.includes(searchText.value))
         }))
       );
-      const collapseValue = vue.computed(
-        () => Array(list.value?.length).fill(1).map((x, i) => `${i}`)
+      const collapseValue = vue.ref();
+      vue.watch(
+        list,
+        () => {
+          collapseValue.value = Array(list.value?.length).fill(1).map((x, i) => `${i}`);
+        },
+        {
+          immediate: true
+        }
       );
       let timeout;
       let clientX;
@@ -17157,7 +17180,8 @@
             vue.renderSlot(_ctx.$slots, "component-list", { componentGroupList: list.value }, () => [
               vue.createVNode(vue.unref(designPlugin.TMagicCollapse), {
                 class: "ui-component-panel",
-                "model-value": collapseValue.value
+                modelValue: collapseValue.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => collapseValue.value = $event)
               }, {
                 default: vue.withCtx(() => [
                   (vue.openBlock(true), vue.createElementBlock(
@@ -17232,7 +17256,7 @@
                 ]),
                 _: 3
                 /* FORWARDED */
-              }, 8, ["model-value"])
+              }, 8, ["modelValue"])
             ])
           ]),
           _: 3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.1",
+  "version": "1.7.0-beta.0",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.2",
     "sortablejs": "^1.15.6",
-    "@tmagic/design": "1.6.1",
-    "@tmagic/table": "1.6.1",
-    "@tmagic/form": "1.6.1",
-    "@tmagic/utils": "1.6.1",
-    "@tmagic/stage": "1.6.1"
+    "@tmagic/design": "1.7.0-beta.0",
+    "@tmagic/form": "1.7.0-beta.0",
+    "@tmagic/utils": "1.7.0-beta.0",
+    "@tmagic/stage": "1.7.0-beta.0",
+    "@tmagic/table": "1.7.0-beta.0"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -76,7 +76,7 @@
     "monaco-editor": "^0.48.0",
     "typescript": "^5.9.3",
     "vue": "^3.5.22",
-    "@tmagic/core": "1.6.1"
+    "@tmagic/core": "1.7.0-beta.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/components/ToolButton.vue

@@ -12,13 +12,20 @@
 
     <template v-else-if="data.type === 'button'">
       <TMagicTooltip v-if="data.tooltip" effect="dark" placement="bottom-start" :content="data.tooltip">
-        <TMagicButton size="small" link :disabled="disabled"
-          ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></TMagicButton
-        >
+        <TMagicButton size="small" link :disabled="disabled">
+          <template #icon v-if="data.icon">
+            <MIcon :icon="data.icon"></MIcon>
+          </template>
+          <template #default v-if="data.text">{{ data.text }}</template>
+        </TMagicButton>
       </TMagicTooltip>
-      <TMagicButton v-else size="small" link :disabled="disabled" :title="data.text"
-        ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></TMagicButton
-      >
+
+      <TMagicButton v-else size="small" link :disabled="disabled" :title="data.text">
+        <template #icon v-if="data.icon">
+          <MIcon :icon="data.icon"></MIcon>
+        </template>
+        <template #default v-if="data.text">{{ data.text }}</template>
+      </TMagicButton>
     </template>
 
     <TMagicDropdown

package/src/fields/DisplayConds.vue

@@ -55,7 +55,7 @@ const config = computed<GroupListConfig>(() => ({
     {
       type: 'table',
       name: 'cond',
-      operateColWidth: 100,
+      operateColWidth: 80,
       enableToggleMode: false,
       items: [
         parentFields.value.length
@@ -93,7 +93,7 @@ const config = computed<GroupListConfig>(() => ({
           type: 'cond-op-select',
           parentFields: parentFields.value,
           label: '条件',
-          width: 160,
+          width: 140,
           name: 'op',
         },
         {

package/src/fields/StyleSetter/Index.vue

@@ -1,5 +1,5 @@
 <template>
-  <TMagicCollapse class="m-fields-style-setter" :model-value="collapseValue">
+  <TMagicCollapse class="m-fields-style-setter" v-model="collapseValue">
     <template v-for="(item, index) in list" :key="index">
       <TMagicCollapseItem :name="`${index}`">
         <template #title><MIcon :icon="Grid"></MIcon>{{ item.title }}</template>

package/src/fields/StyleSetter/components/Box.vue

@@ -4,7 +4,7 @@
       <span class="help-txt" v-if="item.text">{{ item.text }}</span>
       <span class="next-input">
         <input
-          v-model="model[item.name]"
+          :model-value="model[item.name]"
           placeholder="0"
           :title="model[item.name]"
           :disabled="disabled"

package/src/fields/StyleSetter/components/Position.vue

@@ -3,7 +3,7 @@
     <div v-for="(item, index) in list" :key="index" :class="item.class">
       <span class="next-input">
         <input
-          v-model="model[item.name]"
+          :model-value="model[item.name]"
           placeholder="0"
           :title="model[item.name]"
           :disabled="disabled"

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -5,7 +5,7 @@
     <SearchInput @search="filterTextChangeHandler"></SearchInput>
 
     <slot name="component-list" :component-group-list="list">
-      <TMagicCollapse class="ui-component-panel" :model-value="collapseValue">
+      <TMagicCollapse class="ui-component-panel" v-model="collapseValue">
         <template v-for="(group, index) in list">
           <TMagicCollapseItem v-if="group.items && group.items.length" :key="index" :name="`${index}`">
             <template #title><MIcon :icon="Grid"></MIcon>{{ group.title }}</template>
@@ -34,7 +34,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref } from 'vue';
+import { computed, inject, ref, watch } from 'vue';
 import { Grid } from '@element-plus/icons-vue';
 import serialize from 'serialize-javascript';
 
@@ -74,10 +74,19 @@ const list = computed<ComponentGroup[]>(() =>
     items: group.items.filter((item: ComponentItem) => item.text.includes(searchText.value)),
   })),
 );
-const collapseValue = computed(() =>
-  Array(list.value?.length)
-    .fill(1)
-    .map((x, i) => `${i}`),
+
+const collapseValue = ref();
+
+watch(
+  list,
+  () => {
+    collapseValue.value = Array(list.value?.length)
+      .fill(1)
+      .map((x, i) => `${i}`);
+  },
+  {
+    immediate: true,
+  },
 );
 
 let timeout: ReturnType<typeof setTimeout> | undefined;

package/src/services/editor.ts

@@ -574,8 +574,6 @@ class Editor extends BaseService {
     nodes.splice(targetIndex, 1, newConfig);
     this.set('nodes', [...nodes]);
 
-    // update后会触发依赖收集，收集完后会掉stage.update方法
-
     if (isPage(newConfig) || isPageFragment(newConfig)) {
       this.set('page', newConfig as MPage | MPageFragment);
     }
@@ -591,6 +589,7 @@ class Editor extends BaseService {
 
   /**
    * 更新节点
+   * update后会触发依赖收集，收集完后会掉stage.update方法
    * @param config 新的节点配置，配置中需要有id信息
    * @returns 更新后的节点配置
    */

package/src/theme/nav-menu.scss

@@ -18,6 +18,7 @@
 
   > div {
     display: flex;
+    gap: 3px;
     height: 100%;
     z-index: 1;
     align-items: center;
@@ -76,5 +77,10 @@
         transform: rotate(-90deg);
       }
     }
+
+    .t-button {
+      padding-left: 1px;
+      padding-right: 1px;
+    }
   }
 }

package/src/theme/style-setter/background.scss

@@ -1,3 +1,5 @@
+@use "../common/var" as *;
+
 .background-position-container {
   display: flex;
   width: 100%;
@@ -6,8 +8,8 @@
     flex-wrap: wrap;
     width: 80px;
     height: auto;
-    .el-button {
-      & + .el-button {
+    .tmagic-design-button {
+      & + .tmagic-design-button {
         margin-left: 2px;
       }
       &:nth-child(3n + 1) {
@@ -15,13 +17,18 @@
       }
     }
 
+    .t-button--variant-text {
+      padding-left: 2px;
+      padding-right: 2px;
+    }
+
     .position-icon {
       position: relative;
       width: 14px;
       height: 14px;
       border: 1px solid #1d1f24;
       &.active {
-        background-color: var(--el-color-primary);
+        background-color: var($theme-color);
         &::after {
           border: 1px solid #fff;
         }

package/src/utils/props.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *

package/types/index.d.ts

@@ -449,6 +449,7 @@ declare class Editor extends export_default {
     }>;
     /**
      * 更新节点
+     * update后会触发依赖收集，收集完后会掉stage.update方法
      * @param config 新的节点配置，配置中需要有id信息
      * @returns 更新后的节点配置
      */
@@ -2669,12 +2670,12 @@ declare const __VLS_base$9: _vue_runtime_core.DefineComponent<__VLS_Props$g, {
     filter: (text: string | string[]) => void;
     deleteCode: (id: string) => Promise<void>;
 }, {}, {}, {}, _vue_runtime_core.ComponentOptionsMixin, _vue_runtime_core.ComponentOptionsMixin, {
-    "node-contextmenu": (event: MouseEvent, data: TreeNodeData) => any;
     remove: (id: string) => any;
+    "node-contextmenu": (event: MouseEvent, data: TreeNodeData) => any;
     edit: (id: string) => any;
 }, string, _vue_runtime_core.PublicProps, Readonly<__VLS_Props$g> & Readonly<{
-    "onNode-contextmenu"?: ((event: MouseEvent, data: TreeNodeData) => any) | undefined;
     onRemove?: ((id: string) => any) | undefined;
+    "onNode-contextmenu"?: ((event: MouseEvent, data: TreeNodeData) => any) | undefined;
     onEdit?: ((id: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, _vue_runtime_core.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export$h: __VLS_WithSlots$9<typeof __VLS_base$9, __VLS_Slots$9>;
@@ -3729,20 +3730,20 @@ type __VLS_Props$5 = {
     emptyText?: string;
 };
 declare const __VLS_base$1: _vue_runtime_core.DefineComponent<__VLS_Props$5, {}, {}, {}, {}, _vue_runtime_core.ComponentOptionsMixin, _vue_runtime_core.ComponentOptionsMixin, {
-    "node-click": (event: MouseEvent, data: TreeNodeData) => any;
-    "node-contextmenu": (event: MouseEvent, data: TreeNodeData) => any;
     "node-dragstart": (event: DragEvent, data: TreeNodeData) => any;
     "node-dragleave": (event: DragEvent, data: TreeNodeData) => any;
     "node-dragend": (event: DragEvent, data: TreeNodeData) => any;
+    "node-contextmenu": (event: MouseEvent, data: TreeNodeData) => any;
     "node-mouseenter": (event: MouseEvent, data: TreeNodeData) => any;
+    "node-click": (event: MouseEvent, data: TreeNodeData) => any;
     "node-dragover": (event: DragEvent) => any;
 }, string, _vue_runtime_core.PublicProps, Readonly<__VLS_Props$5> & Readonly<{
-    "onNode-click"?: ((event: MouseEvent, data: TreeNodeData) => any) | undefined;
-    "onNode-contextmenu"?: ((event: MouseEvent, data: TreeNodeData) => any) | undefined;
     "onNode-dragstart"?: ((event: DragEvent, data: TreeNodeData) => any) | undefined;
     "onNode-dragleave"?: ((event: DragEvent, data: TreeNodeData) => any) | undefined;
     "onNode-dragend"?: ((event: DragEvent, data: TreeNodeData) => any) | undefined;
+    "onNode-contextmenu"?: ((event: MouseEvent, data: TreeNodeData) => any) | undefined;
     "onNode-mouseenter"?: ((event: MouseEvent, data: TreeNodeData) => any) | undefined;
+    "onNode-click"?: ((event: MouseEvent, data: TreeNodeData) => any) | undefined;
     "onNode-dragover"?: ((event: DragEvent) => any) | undefined;
 }>, {
     emptyText: string;
@@ -3777,19 +3778,19 @@ type __VLS_Props$4 = {
     nextLevelIndentIncrement?: number;
 };
 declare const __VLS_base: _vue_runtime_core.DefineComponent<__VLS_Props$4, {}, {}, {}, {}, _vue_runtime_core.ComponentOptionsMixin, _vue_runtime_core.ComponentOptionsMixin, {
-    "node-click": (event: MouseEvent, data: TreeNodeData) => any;
-    "node-contextmenu": (event: MouseEvent, data: TreeNodeData) => any;
     "node-dragstart": (event: DragEvent, data: TreeNodeData) => any;
     "node-dragleave": (event: DragEvent, data: TreeNodeData) => any;
     "node-dragend": (event: DragEvent, data: TreeNodeData) => any;
+    "node-contextmenu": (event: MouseEvent, data: TreeNodeData) => any;
     "node-mouseenter": (event: MouseEvent, data: TreeNodeData) => any;
+    "node-click": (event: MouseEvent, data: TreeNodeData) => any;
 }, string, _vue_runtime_core.PublicProps, Readonly<__VLS_Props$4> & Readonly<{
-    "onNode-click"?: ((event: MouseEvent, data: TreeNodeData) => any) | undefined;
-    "onNode-contextmenu"?: ((event: MouseEvent, data: TreeNodeData) => any) | undefined;
     "onNode-dragstart"?: ((event: DragEvent, data: TreeNodeData) => any) | undefined;
     "onNode-dragleave"?: ((event: DragEvent, data: TreeNodeData) => any) | undefined;
     "onNode-dragend"?: ((event: DragEvent, data: TreeNodeData) => any) | undefined;
+    "onNode-contextmenu"?: ((event: MouseEvent, data: TreeNodeData) => any) | undefined;
     "onNode-mouseenter"?: ((event: MouseEvent, data: TreeNodeData) => any) | undefined;
+    "onNode-click"?: ((event: MouseEvent, data: TreeNodeData) => any) | undefined;
 }>, {
     indent: number;
     parentsId: Id[];