@opentiny/tiny-engine-canvas 2.0.0 → 2.1.0-rc.0

package/LICENSE

@@ -1,22 +1,22 @@
-MIT License
-
-Copyright (c) 2023 - present TinyEngine Authors.
-Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2023 - present TinyEngine Authors.
+Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,36 +1,36 @@
-# tiny-engine-canvas
-
-## build
-
-Note: tiny-engine-canvas module contains two parts， *canvas-container* and *canvas*, and canvas is rendered in iframe window
-During the build phase, they are built separately. The build products use different external strategies, and the *canvas* product will be embedded in base64 format within the *canvas-container* product,
-since the library-mode-build now only supports embed dependent assets in base64 format, and the embedded base64 format is more general for other build and pack tools.
-You should notice the difference between the products of *canvas-container* and *canvas*. The product of *canvas-container* works fine with other *tiny-engine-\** packages with unfixed versions. The product of *canvas* only externalizes `vue` and `vue-i18n`; the rest of the dependent packages will be packed and won't be replaceable with other versions. (This means you will not be able to joint-debug the dependent packages inside the *canvas* product code. You should joint-debug using the canvas module source code.)
-
-Develop and debug the canvas module in development mode requires:
-
-1) Setting the Vite config with `devAlias` (`resolve.alias`), which points the canvas package name to the canvas module source code.
-2) Using the `canvas-dev-external` plugin.
-
-Vite uses esbuild in development. The `devAlias` configuration makes the source code of the canvas module work and allows for joint debugging.
-However, esbuild won't perceive the external configuration for rollup; it will resolve `vue` and other dependencies (that we originally wanted to exclude and let them naturally point to the package addresses in the `importmap`) to `node_modules`.
-For this reason, we need the `canvas-dev-external` plugin. It can externalize the dependencies specified in the `importmap` of *canvas* for esbuild.
-On the other hand, externalizing the dependencies will affect all other packages in the same runtime. This plugin will generate another `importmap` that points all affected dependencies to `node_modules` to eliminate the side effects.
-
-Finally, modules inside and outside the *canvas* iframe can joint-debug well, and we accomplish the goal of decoupling the versions of `vue` and other dependencies inside and outside the *canvas*. (That is, we can use completely different versions of `vue` inside or outside the *canvas*; we don’t need to synchronize the versions.
-In some cases, we may want to use a lower or higher version for better support.)
-
-## 构建
-
-注意： tiny-engine-canvas模块目前含有两部分，*画布容器*和*画布*， 其中*画布*在iframe内进行渲染。
-在构建阶段canvas包使用分开构建，在构建完的产物中，*画布容器*和*画布*使用了不同的external策略，打包完后*画布*源码会base64内嵌到*画布容器*源码中。
-目前库打包依赖资源仅支持base64，且base64内嵌普适性较高，在其他非vite打包工具下能正常工作。
-所以使用canvas包产物应该注意到，*画布容器*打包后仍然可以和其他*tiny-engine-\**的包的不同版本配合工作，而*画布*本身打包完后内容就固化了，不会再和其他包联动。
-
-开发态开发和调试canvas包需要:
-1） vite配置中 devAlias（`resolve.alias`）将canvas包名指向canvas的src源码
-2） 搭配canvas-dev-external插件使用
-当前开发态vite使用了esbuild， devAlias配置将能正常工作和联调， 但是esbuild不接收来自rollup配置的externals，将导致原本画布应该走`importmap`解析的内容指向了`node_modules`,
-故需要搭配canvas-dev-external插件，一方面将*画布*的external项排除，另一方面，对*画布*外也造成的影响将通过另一个指向`node_modules`的`importmap`进行补偿
-
-最后，通过以上方式，画布内外能够很好地联调，并且完成了画布内外vue版本的解耦（即可以支持使用完全不同的vue版本）
+# tiny-engine-canvas
+
+## build
+
+Note: tiny-engine-canvas module contains two parts， *canvas-container* and *canvas*, and canvas is rendered in iframe window
+During the build phase, they are built separately. The build products use different external strategies, and the *canvas* product will be embedded in base64 format within the *canvas-container* product,
+since the library-mode-build now only supports embed dependent assets in base64 format, and the embedded base64 format is more general for other build and pack tools.
+You should notice the difference between the products of *canvas-container* and *canvas*. The product of *canvas-container* works fine with other *tiny-engine-\** packages with unfixed versions. The product of *canvas* only externalizes `vue` and `vue-i18n`; the rest of the dependent packages will be packed and won't be replaceable with other versions. (This means you will not be able to joint-debug the dependent packages inside the *canvas* product code. You should joint-debug using the canvas module source code.)
+
+Develop and debug the canvas module in development mode requires:
+
+1) Setting the Vite config with `devAlias` (`resolve.alias`), which points the canvas package name to the canvas module source code.
+2) Using the `canvas-dev-external` plugin.
+
+Vite uses esbuild in development. The `devAlias` configuration makes the source code of the canvas module work and allows for joint debugging.
+However, esbuild won't perceive the external configuration for rollup; it will resolve `vue` and other dependencies (that we originally wanted to exclude and let them naturally point to the package addresses in the `importmap`) to `node_modules`.
+For this reason, we need the `canvas-dev-external` plugin. It can externalize the dependencies specified in the `importmap` of *canvas* for esbuild.
+On the other hand, externalizing the dependencies will affect all other packages in the same runtime. This plugin will generate another `importmap` that points all affected dependencies to `node_modules` to eliminate the side effects.
+
+Finally, modules inside and outside the *canvas* iframe can joint-debug well, and we accomplish the goal of decoupling the versions of `vue` and other dependencies inside and outside the *canvas*. (That is, we can use completely different versions of `vue` inside or outside the *canvas*; we don’t need to synchronize the versions.
+In some cases, we may want to use a lower or higher version for better support.)
+
+## 构建
+
+注意： tiny-engine-canvas模块目前含有两部分，*画布容器*和*画布*， 其中*画布*在iframe内进行渲染。
+在构建阶段canvas包使用分开构建，在构建完的产物中，*画布容器*和*画布*使用了不同的external策略，打包完后*画布*源码会base64内嵌到*画布容器*源码中。
+目前库打包依赖资源仅支持base64，且base64内嵌普适性较高，在其他非vite打包工具下能正常工作。
+所以使用canvas包产物应该注意到，*画布容器*打包后仍然可以和其他*tiny-engine-\**的包的不同版本配合工作，而*画布*本身打包完后内容就固化了，不会再和其他包联动。
+
+开发态开发和调试canvas包需要:
+1） vite配置中 devAlias（`resolve.alias`）将canvas包名指向canvas的src源码
+2） 搭配canvas-dev-external插件使用
+当前开发态vite使用了esbuild， devAlias配置将能正常工作和联调， 但是esbuild不接收来自rollup配置的externals，将导致原本画布应该走`importmap`解析的内容指向了`node_modules`,
+故需要搭配canvas-dev-external插件，一方面将*画布*的external项排除，另一方面，对*画布*外也造成的影响将通过另一个指向`node_modules`的`importmap`进行补偿
+
+最后，通过以上方式，画布内外能够很好地联调，并且完成了画布内外vue版本的解耦（即可以支持使用完全不同的vue版本）

package/dist/_commonjsHelpers.js

@@ -0,0 +1,88 @@
+const u = (e, o) => {
+  const n = e.__vccOpts || e;
+  for (const [r, t] of o)
+    n[r] = t;
+  return n;
+}, d = "data-uid", f = "data-tag", p = "loop-id", y = {
+  DESIGN: "design",
+  // 设计态
+  RUNTIME: "runtime"
+  // 运行态
+}, m = (e, o = document) => new Promise((n, r) => {
+  const t = o.createElement("script");
+  t.setAttribute("type", "text/javascript"), t.setAttribute("src", e), t.async = !1, t.onload = n, t.onerror = r, o.querySelector("head").appendChild(t);
+}), c = (e, o = document) => new Promise((n, r) => {
+  const t = o.createElement("link");
+  t.setAttribute("href", e), t.setAttribute("rel", "stylesheet"), t.onload = n, t.onerror = r, o.querySelector("head").appendChild(t);
+}), i = (e) => {
+  if (typeof e == "object") {
+    if (!e)
+      return e;
+    if (Array.isArray(e))
+      return e.map(i);
+    const o = {};
+    Object.keys(e).forEach((t) => {
+      o[t] = i(e[t]);
+    });
+    const { componentName: n, id: r } = o;
+    return n && r && delete o.id, o;
+  }
+  return e;
+}, l = async ({ package: e, script: o, components: n }) => {
+  if (!o) return;
+  const r = o.startsWith(".") ? new URL(o, location.href).href : o;
+  if (!window.TinyComponentLibs[e]) {
+    const t = await import(
+      /* @vite-ignore */
+      r
+    );
+    window.TinyComponentLibs[e] = t;
+  }
+  Object.entries(n).forEach(([t, a]) => {
+    const s = window.TinyComponentLibs[e];
+    window.TinyLowcodeComponent[t] || (window.TinyLowcodeComponent[t] = s[a]);
+  });
+}, w = ({ detail: e }) => {
+  const { scripts: o = [], styles: n = [] } = e || {}, { styles: r } = window.thirdPartyDeps, t = [...n].filter((s) => !r.has(s));
+  t.forEach((s) => r.add(s));
+  const a = [...t].map((s) => c(s)).concat(o.map(l));
+  Promise.allSettled(a);
+};
+var b = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function h(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+function O(e) {
+  if (e.__esModule) return e;
+  var o = e.default;
+  if (typeof o == "function") {
+    var n = function r() {
+      return this instanceof r ? Reflect.construct(o, arguments, this.constructor) : o.apply(this, arguments);
+    };
+    n.prototype = o.prototype;
+  } else n = {};
+  return Object.defineProperty(n, "__esModule", { value: !0 }), Object.keys(e).forEach(function(r) {
+    var t = Object.getOwnPropertyDescriptor(e, r);
+    Object.defineProperty(n, r, t.get ? t : {
+      enumerable: !0,
+      get: function() {
+        return e[r];
+      }
+    });
+  }), n;
+}
+export {
+  y as D,
+  d as N,
+  u as _,
+  p as a,
+  c as b,
+  i as c,
+  m as d,
+  f as e,
+  b as f,
+  h as g,
+  O as h,
+  l as i,
+  w as u
+};

package/dist/index.css

@@ -1 +1 @@
-#tiny-bottom-panel[data-v-5d85802b]{width:100%;height:var(--base-bottom-panel-height, 30px);bottom:0;position:absolute;background-color:var(--ti-lowcode-breadcrumb-bg);z-index:90;border-top:1px solid var(--ti-lowcode-canvas-footer-border-top-color)}#tiny-bottom-panel .content .tip[data-v-5d85802b]{color:var(--ti-lowcode-breadcrumb-color);line-height:30px;height:30px;padding-left:10px}#tiny-bottom-panel .content[data-v-5d85802b] .tiny-steps-advanced li{width:unset!important;background:var(--ti-lowcode-breadcrumb-bg)}#tiny-bottom-panel .content[data-v-5d85802b] .tiny-steps-advanced li .label{padding:0 3px 0 16px;border-top:0;color:var(--ti-lowcode-breadcrumb-color);transition:.3s}#tiny-bottom-panel .content[data-v-5d85802b] .tiny-steps-advanced li .label:hover{cursor:pointer}#tiny-bottom-panel .content[data-v-5d85802b] .tiny-steps-advanced li .label:hover:after{border-left-color:var(--ti-steps-advanced-li-hover-bg-color)}#tiny-bottom-panel .content[data-v-5d85802b] .tiny-steps-advanced li:last-child .label{border-right:0px solid var(--ti-lowcode-breadcrumb-color);border-radius:0}#tiny-bottom-panel .content[data-v-5d85802b] .tiny-steps-advanced li:first-child .label{border-right:0px solid var(--ti-lowcode-breadcrumb-color);border-radius:0;border-left:unset}.context-menu[data-v-8a0ba437]{position:absolute;z-index:10}.menu-item[data-v-8a0ba437]{width:140px;line-height:20px;border-radius:6px;padding:8px 0;background-color:var(--ti-lowcode-canvas-menu-bg);box-shadow:0 1px 15px #0003;display:flex;flex-direction:column}.menu-item .li-item[data-v-8a0ba437]{border-bottom:1px solid var(--ti-lowcode-canvas-menu-border-color)}.menu-item .li-item-disabled[data-v-8a0ba437]{cursor:not-allowed;color:var(--ti-lowcode-canvas-menu-item-disabled-color)}.menu-item li[data-v-8a0ba437]{font-size:12px;color:var(--ti-lowcode-canvas-menu-item-color);padding:6px 15px;position:relative}.menu-item li>div[data-v-8a0ba437]{display:flex;width:100%;justify-content:space-between}.menu-item li[data-v-8a0ba437]:not(.menu-item-disabled):hover{background:var(--ti-lowcode-canvas-menu-item-hover-bg-color)}.menu-item li.menu-item-disabled[data-v-8a0ba437]{cursor:not-allowed;color:var(--ti-lowcode-canvas-menu-item-disabled-color)}.menu-item.sub-menu[data-v-8a0ba437]{width:100px;position:absolute;top:-2px}.header[data-v-761846f3]{display:flex;align-items:center;padding:0 10px;border-bottom:1px solid var(--ti-lowcode-toolbar-border-color, #333);height:36px}.header div[data-v-761846f3]{flex:1;margin:0 10px}.header .icon-setting[data-v-761846f3]{font-size:16px;fill:var(--ti-lowcode-toolbar-breadcrumb-color, #d9d9d9)}.header .icon-wrap[data-v-761846f3]{width:20px;height:20px;fill:var(--ti-lowcode-text-color, #6a6a6a);font-size:16px;border-radius:2px;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;transition:.3s}.header .icon-wrap[data-v-761846f3]:hover{fill:var(--ti-lowcode-toolbar-icon-color, #fff);background:var(--ti-lowcode-icon-hover-bg, rgba(255, 255, 255, .1))}.body[data-v-761846f3]{padding:0 12px}.body .properties-item[data-v-761846f3]{width:100%;padding:8px 0;display:flex;justify-content:space-between;align-items:center}.body .properties-item .item-label[data-v-761846f3]{width:40%;word-break:break-all}.body .properties-item .item-component[data-v-761846f3]{width:100%;padding-left:8px}.body .properties-item .nolabel[data-v-761846f3]{width:100%}.body .properties-item.col-6[data-v-761846f3]{width:50%;display:flex;flex-direction:row;align-items:flex-start}.body .properties-item.col-6 .item-label[data-v-761846f3]{width:auto;margin-bottom:6px}.body .properties-item.col-4[data-v-761846f3]{width:33.33%;flex-direction:column;align-items:flex-start}.body .properties-item.col-4 .item-label[data-v-761846f3]{width:auto;margin-bottom:6px}.footer[data-v-761846f3]{padding:8px;cursor:pointer}.footer span[data-v-761846f3]{width:100%;padding:4px 0;display:inline-block;background:var(--ti-lowcode-toolbar-view-hover-bg, #4d4d4d);border-radius:2px;display:flex;justify-content:center;align-items:center}.footer svg[data-v-761846f3]{fill:var(--ti-lowcode-toolbar-breadcrumb-color, #d9d9d9);margin-left:4px}.canvas-rect{position:absolute;box-sizing:border-box;pointer-events:none;border:1px solid var(--ti-lowcode-canvas-rect-border-color);z-index:2}.canvas-rect.absolute{pointer-events:all}.canvas-rect.hover{border-style:dashed;top:var(--20ac12da);left:var(--29b7cdea);height:var(--b7b2c2aa);width:var(--3cb28642)}.canvas-rect.hover .corner-mark-left{height:14px;top:-14px;padding-left:0;font-size:12px}.canvas-rect.line{border-color:transparent;top:var(--7e74c4c7);left:var(--35b31157);height:var(--f24e9812);width:var(--44029776)}.canvas-rect .hover-line.top{width:100%;height:5px;background:var(--ti-lowcode-icon-bind-color);position:absolute;top:-3px}.canvas-rect .hover-line.left{width:5px;height:100%;background:var(--ti-lowcode-icon-bind-color);position:absolute;left:-3px}.canvas-rect .hover-line.bottom{width:100%;height:5px;background:var(--ti-lowcode-icon-bind-color);position:absolute;bottom:-3px}.canvas-rect .hover-line.right{width:5px;height:100%;background:var(--ti-lowcode-icon-bind-color);position:absolute;right:-3px}.canvas-rect .hover-line.in{width:100%;height:100%;background:var(--ti-lowcode-canvas-hover-line-in-bg-color)}.canvas-rect .hover-line.forbidden:not(.in){background:var(--ti-lowcode-canvas-hover-line-forbid-bg-color)}.canvas-rect .hover-line.forbidden.in{background:var(--ti-lowcode-canvas-hover-line-in-forbid-bg-color)}.canvas-rect .choose-slots{display:flex;justify-content:left;align-items:left;height:100%}.canvas-rect .choose-slots>div{pointer-events:all;width:40px;border:1px solid var(--ti-lowcode-canvas-choose-slot-border-color);color:var(--ti-lowcode-canvas-choose-slot-color);overflow:hidden;font-size:10px;margin:2px;text-align:center}.canvas-rect .choose-slots>div:hover{background:#40a9ff;color:#fff}.canvas-rect .corner-mark-left{display:flex;align-items:center;font-size:14px;position:absolute;top:-24px;height:24px;color:var(--ti-lowcode-canvas-corner-mark-left-color);padding:0 8px}.canvas-rect .corner-mark-left .icon-setting{margin-left:4px;margin-bottom:2px}.canvas-rect .corner-mark-bottom-right{position:absolute;font-size:12px;right:-1px;color:var(--ti-lowcode-canvas-corner-mark-bottom-right-color);bottom:-20px;background:var(--ti-lowcode-canvas-corner-mark-bottom-right-bg-color);border:1px solid var(--ti-lowcode-canvas-corner-mark-bottom-right-border-color);padding:0 2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.canvas-rect .corner-mark-right{display:flex;align-items:center;position:absolute;height:24px;padding:0 4px;color:var(--ti-lowcode-canvas-corner-mark-right-color);background:var(--ti-lowcode-canvas-corner-mark-right-bg-color);pointer-events:all;cursor:pointer}.canvas-rect .corner-mark-right div{font-size:0}.canvas-rect .corner-mark-right div svg{margin:0 4px;font-size:16px}.canvas-rect.select{z-index:3;border-width:2px}.canvas-rect.select .corner-mark-left{white-space:nowrap;pointer-events:all;color:var(--ti-lowcode-canvas-select-corner-mark-left-color);background:var(--ti-lowcode-canvas-select-corner-mark-left-bg-color)}.canvas-rect.select .corner-mark-left svg{cursor:pointer}.short-cut-set.tiny-popper.tiny-popover{background:var(--ti-lowcode-toolbar-bg);padding:10px}.short-cut-set.tiny-popper.tiny-popover .body label,.short-cut-set.tiny-popper.tiny-popover .header{color:var(--ti-lowcode-dialog-font-color);font-size:12px}.short-cut-set.tiny-popper.tiny-popover .tiny-popover__title{color:var(--ti-lowcode-dialog-font-color)}.short-cut-set.tiny-popper.tiny-popover[x-placement^=bottom] .popper__arrow:after{border-bottom-color:var(--ti-lowcode-toolbar-bg)}.drag-resize{position:absolute;top:-6px;bottom:-6px;left:-6px;right:-6px;height:6px;width:6px;background-color:#409eff;cursor:pointer;pointer-events:auto!important}.drag-resize.resize-top{left:calc(50% - 3px);cursor:n-resize}.drag-resize.resize-bottom{left:calc(50% - 3px);top:auto;cursor:s-resize}.drag-resize.resize-left{top:calc(50% - 3px);cursor:e-resize}.drag-resize.resize-right{top:calc(50% - 3px);left:auto;cursor:e-resize}.drag-resize.resize-top-left{cursor:nw-resize}.drag-resize.resize-top-right{left:auto;cursor:ne-resize}.drag-resize.resize-bottom-left{top:auto;cursor:sw-resize}.drag-resize.resize-bottom-right{left:auto;top:auto;cursor:se-resize}.canvas-size-controller[data-v-4db4f09e]{height:100%}.canvas-size-controller .canvas-resize-handle[data-v-4db4f09e]{position:relative}.canvas-size-controller .canvas-resize-handle .handle[data-v-4db4f09e]{position:absolute;top:0;bottom:0;z-index:13}.canvas-size-controller .canvas-resize-handle .handle[data-v-4db4f09e]:before{content:"";position:absolute;top:0;left:-3px;width:4px;height:100%;background:var(--ti-lowcode-canvas-tab-handle-hover-bg);display:none}.canvas-size-controller .canvas-resize-handle .handle[data-v-4db4f09e]:hover:before{display:block}.canvas-size-controller .canvas-resize-handle .handle:hover .tab-handle[data-v-4db4f09e]{background:var(--ti-lowcode-canvas-tab-handle-hover-bg)}.canvas-size-controller .canvas-resize-handle .handle:hover .tab-handle[data-v-4db4f09e]:before,.canvas-size-controller .canvas-resize-handle .handle:hover .tab-handle[data-v-4db4f09e]:after{background:#fff}.canvas-size-controller .canvas-resize-handle .handle .gutter-handle[data-v-4db4f09e]{position:absolute;top:0;left:-3px;width:4px;height:100%;cursor:col-resize;pointer-events:all}.canvas-size-controller .canvas-resize-handle .handle .tab-handle[data-v-4db4f09e]{position:fixed;top:50%;width:14px;height:38px;margin-top:-19px;background:var(--ti-lowcode-canvas-iframe-scrollbar-thumb-color);cursor:col-resize;pointer-events:all;border-top-right-radius:3px;border-bottom-right-radius:3px}.canvas-size-controller .canvas-resize-handle .handle .tab-handle[data-v-4db4f09e]:before,.canvas-size-controller .canvas-resize-handle .handle .tab-handle[data-v-4db4f09e]:after{content:"";position:absolute;top:8px;bottom:8px;left:8px;width:1px;background:var(--ti-lowcode-canvas-tab-handle-color)}.canvas-size-controller .canvas-resize-handle .handle .tab-handle[data-v-4db4f09e]:before{left:5px}.canvas-size-controller .canvas-resize-handle .right-handle[data-v-4db4f09e]{right:-14px;width:14px}.divider-wrapper[data-v-b3cb73bb]{position:absolute;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background-color:var(--ti-lowcode-common-text-color-3);cursor:pointer;z-index:3}.divider-wrapper.divider-vertical[data-v-b3cb73bb]{transform:translate(-50%);top:var(--38fc75f1);left:var(--32e3022a)}.divider-wrapper.divider-horizontal[data-v-b3cb73bb]{transform:translate(10px,-50%) rotate(270deg);top:var(--71460a72);left:var(--91110aec)}.divider-wrapper[data-v-b3cb73bb]:hover{background-color:var(--ti-lowcode-common-primary-color)}.divider-wrapper:hover .divider[data-v-b3cb73bb]{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACbElEQVRIDZ2Vu2sVURCH9yZgbCxMsFFjKQkExScREgQtLISAXbS4GDu10fgHiL1gpxKDCLFRfICCCSpCwEiCYiNWFkYsImIRH4jgY/x+xzNy7t29614HvsycmfnN3j1nd5Nl0cysDrPwEV7DRVjn9Vaent7Y+wYvrWbUG/pJTIHsCzyBd1pg8v0NzcmC2kDswdkizIFmyKZCK4F+uWwGelxPfAx+wFPPpZ58JzyHX3DEa8TdoFmyesYf3ZKu+nd40nyJvGzEc+7JjYWK2aTn3JPXRTRzVhdYhjkvpp78KMieNeW7yGnPZYfSmsfktV3LHSSWoNVhro+CbTTvdzH+KGyI61batdSXdAcXQDYWBcGx1m2+ha/wHRZUwK+C9/ABtA3q6W7S+vadl6AH9LT8hAk4CKdAQtlJuBIis3340zE+gR+PsXqlkVYzNEsz/5wrQR/MQ2qfWYzHX72RWE+UnppPoP3vijUNVm9qCyz60rvSnXTAJtBjOwKr0wbWV8GtaDulkVYzdLbtGaLdINPed1ZVt3Mlf/21r8NVL1Cpj1+sM9IZvAK9uY8qCas2MfAGyPbC9RCZDVXVl/YxbHsc+FCNxDpE3cWDUmHVIoPug2yna4hvhYzZLs/9l2fInjjoZjqA3JaYn07zbccM0Qujw839TyB3B2Q72h4sAcIDQW52uWiABsf63aJ6aQ6h3uqX8A38q5nTULsHsq25YlkCweEgMzv3j77B2He7rK+hhmAFLII+YGsaigULevSU6bHdXFDOp2g8DrIz+Wo+Q99Q6Da7lq9mWdG3aCWNL+BskaA5V6vVHpPT8FpzTevfkrgJcwZ0OJIAAAAASUVORK5CYII=)}.divider-wrapper .divider[data-v-b3cb73bb]{width:12px;height:12px;color:var(--ti-lowcode-common-text-color-3);background-size:contain;background-repeat:no-repeat;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACO0lEQVRIDa2Uy6tNURzHN7cwMUAmHncot0QeV5QiBgZKmWEgzDDx+ANu5soMcUkxIY+iEFIKEZnIyMC9GZAMrke6hXt9Pvus1VnntPbZ53B/9dnrt36P7zpr7bVPUTRtD+5j+Arv4QwshDpbTIG1o2CvGmq12CVmk/ADnsGnMHccgCpbRiLWjuA/BTXUUrM0VzNwD+aVkcbjIMNveJnEUrePyWuYgP1JYi6+WmqWO3FLrpqKMy3tHE8LtzemLc99ITfcEm1MXERNtYsxcGs520nQBV61JWcyHw253W25OFVzbDqPj1D1MheF6tWM24LvcAD6w7yqdwF5tYvT4K90y6m5zQ/wE37BC9Bmw2f4Ah6DNdamFo/vlEHP3pvwB87CLjgGNrrwEbgY/K2MQ8E/zHg0+NbaY68aaqmpdmlLeT4HBSPf8RXQloA3ylvzDTx/34OmsLWxz9Hdqtlivo/l4NXy1syB1C4ziSK547THXjXU6tk20uECnn1fz91dNJynJu5gUxf1PZV4nr6DdzABj2BK7Rpq/votcDX4GxinxNagovjDoOZLdBcPwvy/h/souMDaROlGiK1PYv/kbg5C19u6V4b43bZ4z1M/GF/uQKbzFjF3NpjJdRXaEQQuVFQr7AK3K/Idw36Jb2Ec+jtU3iHnIqs61GRTe4naeDKbbQbXhbqbzVC9N4OSEfAPbD7UmbfMa7uirjDmD+H464/HQM3oB2f9lVxd7l9vFoVv4ESuIRN7QkzxaZlc8RcdnI7tMHZBlAAAAABJRU5ErkJggg==)}.divider-line[data-v-b3cb73bb]{position:absolute;border:1px dashed var(--ti-lowcode-common-primary-color);z-index:2}.resize-border[data-v-240bfa7b]{position:absolute;display:flex;justify-content:center;align-items:center;z-index:3;top:var(--39485b88);left:var(--20816798);width:var(--08c70739);height:var(--136a33d8)}.resize-border[data-v-240bfa7b]:after{content:"";display:block;border:1px solid var(--ti-lowcode-common-primary-color)}.resize-border.resize-vertical[data-v-240bfa7b]{cursor:ns-resize}.resize-border.resize-vertical[data-v-240bfa7b]:after{min-width:50%;height:4px}.resize-border.resize-horizontal[data-v-240bfa7b]{cursor:ew-resize}.resize-border.resize-horizontal[data-v-240bfa7b]:after{width:4px;height:100%}.insert-panel[data-v-4bc86b62]{z-index:4;position:fixed;top:200px;left:400px;width:480px}.insert-panel[data-v-4bc86b62] .components-wrap>.tiny-collapse{max-height:300px}.insert-panel[data-v-4bc86b62] #pane-blocks{max-height:400px}.datainit-tip[data-v-4bc86b62]{display:flex;height:100%;justify-content:center;align-items:center;color:#1890ff}#canvas-wrap[data-v-ae56bca2]{background:var(--ti-lowcode-canvas-wrap-bg);flex:1 1 0;border:none;display:flex;justify-content:center;position:relative}#canvas-wrap .site-canvas[data-v-ae56bca2]{background:var(--ti-lowcode-breadcrumb-hover-bg);position:absolute;overflow:hidden;margin:18px 0;transform-origin:top}
+#tiny-bottom-panel[data-v-c6686fd2]{width:100%;height:var(--base-bottom-panel-height, 30px);bottom:0;position:absolute;background-color:var(--ti-lowcode-breadcrumb-bg);z-index:90;border-top:1px solid var(--ti-lowcode-canvas-footer-border-top-color)}#tiny-bottom-panel .content .tip[data-v-c6686fd2]{color:var(--ti-lowcode-breadcrumb-color);line-height:30px;height:30px;padding-left:10px}#tiny-bottom-panel .content[data-v-c6686fd2] .tiny-steps-advanced li{width:unset!important;background:var(--ti-lowcode-breadcrumb-bg)}#tiny-bottom-panel .content[data-v-c6686fd2] .tiny-steps-advanced li .label{padding:0 3px 0 16px;border-top:0;color:var(--ti-lowcode-breadcrumb-color);transition:.3s}#tiny-bottom-panel .content[data-v-c6686fd2] .tiny-steps-advanced li .label:hover{cursor:pointer}#tiny-bottom-panel .content[data-v-c6686fd2] .tiny-steps-advanced li .label:hover:after{border-left-color:var(--ti-steps-advanced-li-hover-bg-color)}#tiny-bottom-panel .content[data-v-c6686fd2] .tiny-steps-advanced li:last-child .label{border-right:0px solid var(--ti-lowcode-breadcrumb-color);border-radius:0}#tiny-bottom-panel .content[data-v-c6686fd2] .tiny-steps-advanced li:first-child .label{border-right:0px solid var(--ti-lowcode-breadcrumb-color);border-radius:0;border-left:unset}.context-menu[data-v-8b8ff5ec]{position:absolute;z-index:10}.menu-item[data-v-8b8ff5ec]{width:140px;line-height:20px;border-radius:6px;padding:8px 0;background-color:var(--ti-lowcode-canvas-menu-bg);box-shadow:0 1px 15px #0003;display:flex;flex-direction:column}.menu-item .li-item[data-v-8b8ff5ec]{border-bottom:1px solid var(--ti-lowcode-canvas-menu-border-color)}.menu-item .li-item-disabled[data-v-8b8ff5ec]{cursor:not-allowed;color:var(--ti-lowcode-canvas-menu-item-disabled-color)}.menu-item li[data-v-8b8ff5ec]{font-size:12px;color:var(--ti-lowcode-canvas-menu-item-color);padding:6px 15px;position:relative}.menu-item li>div[data-v-8b8ff5ec]{display:flex;width:100%;justify-content:space-between}.menu-item li[data-v-8b8ff5ec]:not(.menu-item-disabled):hover{background:var(--ti-lowcode-canvas-menu-item-hover-bg-color)}.menu-item li.menu-item-disabled[data-v-8b8ff5ec]{cursor:not-allowed;color:var(--ti-lowcode-canvas-menu-item-disabled-color)}.menu-item.sub-menu[data-v-8b8ff5ec]{width:100px;position:absolute;top:-2px}.header[data-v-3fc59336]{display:flex;align-items:center;padding:0 10px;border-bottom:1px solid var(--te-common-border-default, #333);height:36px}.header div[data-v-3fc59336]{flex:1;margin:0 10px}.header .icon-setting[data-v-3fc59336]{font-size:16px;fill:var(--te-common-text-secondary, #d9d9d9)}.header .icon-wrap[data-v-3fc59336]{width:20px;height:20px;fill:var(--ti-lowcode-text-color, #6a6a6a);font-size:16px;border-radius:2px;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;transition:.3s}.header .icon-wrap[data-v-3fc59336]:hover{fill:var(--te-common-icon-primary, #fff);background:var(--ti-lowcode-icon-hover-bg, rgba(255, 255, 255, .1))}.body[data-v-3fc59336]{padding:0 12px}.body .properties-item[data-v-3fc59336]{width:100%;padding:8px 0;display:flex;justify-content:space-between;align-items:center}.body .properties-item .item-label[data-v-3fc59336]{width:40%;word-break:break-all}.body .properties-item .item-component[data-v-3fc59336]{width:100%;padding-left:8px}.body .properties-item .nolabel[data-v-3fc59336]{width:100%}.body .properties-item.col-6[data-v-3fc59336]{width:50%;display:flex;flex-direction:row;align-items:flex-start}.body .properties-item.col-6 .item-label[data-v-3fc59336]{width:auto;margin-bottom:6px}.body .properties-item.col-4[data-v-3fc59336]{width:33.33%;flex-direction:column;align-items:flex-start}.body .properties-item.col-4 .item-label[data-v-3fc59336]{width:auto;margin-bottom:6px}.footer[data-v-3fc59336]{padding:8px;cursor:pointer}.footer span[data-v-3fc59336]{width:100%;padding:4px 0;display:inline-block;background:var(--te-common-bg-container, #4d4d4d);border-radius:2px;display:flex;justify-content:center;align-items:center}.footer svg[data-v-3fc59336]{fill:var(--te-common-text-secondary, #d9d9d9);margin-left:4px}.canvas-rect{position:absolute;box-sizing:border-box;pointer-events:none;border:1px solid var(--ti-lowcode-canvas-rect-border-color);z-index:2}.canvas-rect.absolute{pointer-events:all}.canvas-rect.hover{border-style:dashed;top:var(--a53b7f5a);left:var(--3715f16a);height:var(--e616062a);width:var(--6d7f6002)}.canvas-rect.hover .corner-mark-left{height:14px;top:-14px;padding-left:0;font-size:12px}.canvas-rect.line{border-color:transparent;top:var(--30a779f2);left:var(--192949d2);height:var(--90b4e492);width:var(--3d5385b6)}.canvas-rect .hover-line.top{width:100%;height:5px;background:var(--ti-lowcode-icon-bind-color);position:absolute;top:-3px}.canvas-rect .hover-line.left{width:5px;height:100%;background:var(--ti-lowcode-icon-bind-color);position:absolute;left:-3px}.canvas-rect .hover-line.bottom{width:100%;height:5px;background:var(--ti-lowcode-icon-bind-color);position:absolute;bottom:-3px}.canvas-rect .hover-line.right{width:5px;height:100%;background:var(--ti-lowcode-icon-bind-color);position:absolute;right:-3px}.canvas-rect .hover-line.in{width:100%;height:100%;background:var(--ti-lowcode-canvas-hover-line-in-bg-color)}.canvas-rect .hover-line.forbidden:not(.in){background:var(--ti-lowcode-canvas-hover-line-forbid-bg-color)}.canvas-rect .hover-line.forbidden.in{background:var(--ti-lowcode-canvas-hover-line-in-forbid-bg-color)}.canvas-rect .choose-slots{display:flex;justify-content:left;align-items:left;height:100%}.canvas-rect .choose-slots>div{pointer-events:all;width:40px;border:1px solid var(--ti-lowcode-canvas-choose-slot-border-color);color:var(--ti-lowcode-canvas-choose-slot-color);overflow:hidden;font-size:10px;margin:2px;text-align:center}.canvas-rect .choose-slots>div:hover{background:#40a9ff;color:#fff}.canvas-rect .corner-mark-left{display:flex;align-items:center;font-size:14px;position:absolute;top:-24px;height:24px;color:var(--ti-lowcode-canvas-corner-mark-left-color);padding:0 8px}.canvas-rect .corner-mark-left .icon-setting{margin-left:4px;margin-bottom:2px}.canvas-rect .corner-mark-bottom-right{position:absolute;font-size:12px;right:-1px;color:var(--ti-lowcode-canvas-corner-mark-bottom-right-color);bottom:-20px;background:var(--ti-lowcode-canvas-corner-mark-bottom-right-bg-color);border:1px solid var(--ti-lowcode-canvas-corner-mark-bottom-right-border-color);padding:0 2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.canvas-rect .corner-mark-right{display:flex;align-items:center;position:absolute;height:24px;padding:0 4px;color:var(--ti-lowcode-canvas-corner-mark-right-color);background:var(--ti-lowcode-canvas-corner-mark-right-bg-color);pointer-events:all;cursor:pointer}.canvas-rect .corner-mark-right div{font-size:0}.canvas-rect .corner-mark-right div svg{margin:0 4px;font-size:16px}.canvas-rect.select{z-index:3;border-width:2px}.canvas-rect.select .corner-mark-left{white-space:nowrap;pointer-events:all;color:var(--ti-lowcode-canvas-select-corner-mark-left-color);background:var(--ti-lowcode-canvas-select-corner-mark-left-bg-color)}.canvas-rect.select .corner-mark-left svg{cursor:pointer}.short-cut-set.short-cut-set.tiny-popper.tiny-popover{padding:10px}.drag-resize{position:absolute;top:-6px;bottom:-6px;left:-6px;right:-6px;height:6px;width:6px;background-color:#409eff;cursor:pointer;pointer-events:auto!important}.drag-resize.resize-top{left:calc(50% - 3px);cursor:n-resize}.drag-resize.resize-bottom{left:calc(50% - 3px);top:auto;cursor:s-resize}.drag-resize.resize-left{top:calc(50% - 3px);cursor:e-resize}.drag-resize.resize-right{top:calc(50% - 3px);left:auto;cursor:e-resize}.drag-resize.resize-top-left{cursor:nw-resize}.drag-resize.resize-top-right{left:auto;cursor:ne-resize}.drag-resize.resize-bottom-left{top:auto;cursor:sw-resize}.drag-resize.resize-bottom-right{left:auto;top:auto;cursor:se-resize}.canvas-size-controller[data-v-075b297a]{height:100%}.canvas-size-controller .canvas-resize-handle[data-v-075b297a]{position:relative}.canvas-size-controller .canvas-resize-handle .handle[data-v-075b297a]{position:absolute;top:0;bottom:0;z-index:13}.canvas-size-controller .canvas-resize-handle .handle[data-v-075b297a]:before{content:"";position:absolute;top:0;left:-3px;width:4px;height:100%;background:var(--ti-lowcode-canvas-tab-handle-hover-bg);display:none}.canvas-size-controller .canvas-resize-handle .handle[data-v-075b297a]:hover:before{display:block}.canvas-size-controller .canvas-resize-handle .handle:hover .tab-handle[data-v-075b297a]{background:var(--ti-lowcode-canvas-tab-handle-hover-bg)}.canvas-size-controller .canvas-resize-handle .handle:hover .tab-handle[data-v-075b297a]:before,.canvas-size-controller .canvas-resize-handle .handle:hover .tab-handle[data-v-075b297a]:after{background:#fff}.canvas-size-controller .canvas-resize-handle .handle .gutter-handle[data-v-075b297a]{position:absolute;top:0;left:-3px;width:4px;height:100%;cursor:col-resize;pointer-events:all}.canvas-size-controller .canvas-resize-handle .handle .tab-handle[data-v-075b297a]{position:fixed;top:50%;width:14px;height:38px;margin-top:-19px;background:var(--ti-lowcode-canvas-iframe-scrollbar-thumb-color);cursor:col-resize;pointer-events:all;border-top-right-radius:3px;border-bottom-right-radius:3px}.canvas-size-controller .canvas-resize-handle .handle .tab-handle[data-v-075b297a]:before,.canvas-size-controller .canvas-resize-handle .handle .tab-handle[data-v-075b297a]:after{content:"";position:absolute;top:8px;bottom:8px;left:8px;width:1px;background:var(--ti-lowcode-canvas-tab-handle-color)}.canvas-size-controller .canvas-resize-handle .handle .tab-handle[data-v-075b297a]:before{left:5px}.canvas-size-controller .canvas-resize-handle .right-handle[data-v-075b297a]{right:-14px;width:14px}.divider-wrapper[data-v-73a3c244]{position:absolute;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background-color:var(--ti-lowcode-common-text-color-3);cursor:pointer;z-index:3}.divider-wrapper.divider-vertical[data-v-73a3c244]{transform:translate(-50%);top:var(--1b69803c);left:var(--5718f31a)}.divider-wrapper.divider-horizontal[data-v-73a3c244]{transform:translate(10px,-50%) rotate(270deg);top:var(--4923413e);left:var(--db4c790a)}.divider-wrapper[data-v-73a3c244]:hover{background-color:var(--te-common-bg-primary-checked)}.divider-wrapper:hover .divider[data-v-73a3c244]{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACbElEQVRIDZ2Vu2sVURCH9yZgbCxMsFFjKQkExScREgQtLISAXbS4GDu10fgHiL1gpxKDCLFRfICCCSpCwEiCYiNWFkYsImIRH4jgY/x+xzNy7t29614HvsycmfnN3j1nd5Nl0cysDrPwEV7DRVjn9Vaent7Y+wYvrWbUG/pJTIHsCzyBd1pg8v0NzcmC2kDswdkizIFmyKZCK4F+uWwGelxPfAx+wFPPpZ58JzyHX3DEa8TdoFmyesYf3ZKu+nd40nyJvGzEc+7JjYWK2aTn3JPXRTRzVhdYhjkvpp78KMieNeW7yGnPZYfSmsfktV3LHSSWoNVhro+CbTTvdzH+KGyI61batdSXdAcXQDYWBcGx1m2+ha/wHRZUwK+C9/ABtA3q6W7S+vadl6AH9LT8hAk4CKdAQtlJuBIis3340zE+gR+PsXqlkVYzNEsz/5wrQR/MQ2qfWYzHX72RWE+UnppPoP3vijUNVm9qCyz60rvSnXTAJtBjOwKr0wbWV8GtaDulkVYzdLbtGaLdINPed1ZVt3Mlf/21r8NVL1Cpj1+sM9IZvAK9uY8qCas2MfAGyPbC9RCZDVXVl/YxbHsc+FCNxDpE3cWDUmHVIoPug2yna4hvhYzZLs/9l2fInjjoZjqA3JaYn07zbccM0Qujw839TyB3B2Q72h4sAcIDQW52uWiABsf63aJ6aQ6h3uqX8A38q5nTULsHsq25YlkCweEgMzv3j77B2He7rK+hhmAFLII+YGsaigULevSU6bHdXFDOp2g8DrIz+Wo+Q99Q6Da7lq9mWdG3aCWNL+BskaA5V6vVHpPT8FpzTevfkrgJcwZ0OJIAAAAASUVORK5CYII=)}.divider-wrapper .divider[data-v-73a3c244]{width:12px;height:12px;color:var(--ti-lowcode-common-text-color-3);background-size:contain;background-repeat:no-repeat;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACO0lEQVRIDa2Uy6tNURzHN7cwMUAmHncot0QeV5QiBgZKmWEgzDDx+ANu5soMcUkxIY+iEFIKEZnIyMC9GZAMrke6hXt9Pvus1VnntPbZ53B/9dnrt36P7zpr7bVPUTRtD+5j+Arv4QwshDpbTIG1o2CvGmq12CVmk/ADnsGnMHccgCpbRiLWjuA/BTXUUrM0VzNwD+aVkcbjIMNveJnEUrePyWuYgP1JYi6+WmqWO3FLrpqKMy3tHE8LtzemLc99ITfcEm1MXERNtYsxcGs520nQBV61JWcyHw253W25OFVzbDqPj1D1MheF6tWM24LvcAD6w7yqdwF5tYvT4K90y6m5zQ/wE37BC9Bmw2f4Ah6DNdamFo/vlEHP3pvwB87CLjgGNrrwEbgY/K2MQ8E/zHg0+NbaY68aaqmpdmlLeT4HBSPf8RXQloA3ylvzDTx/34OmsLWxz9Hdqtlivo/l4NXy1syB1C4ziSK547THXjXU6tk20uECnn1fz91dNJynJu5gUxf1PZV4nr6DdzABj2BK7Rpq/votcDX4GxinxNagovjDoOZLdBcPwvy/h/souMDaROlGiK1PYv/kbg5C19u6V4b43bZ4z1M/GF/uQKbzFjF3NpjJdRXaEQQuVFQr7AK3K/Idw36Jb2Ec+jtU3iHnIqs61GRTe4naeDKbbQbXhbqbzVC9N4OSEfAPbD7UmbfMa7uirjDmD+H464/HQM3oB2f9lVxd7l9vFoVv4ESuIRN7QkzxaZlc8RcdnI7tMHZBlAAAAABJRU5ErkJggg==)}.divider-line[data-v-73a3c244]{position:absolute;border:1px dashed var(--te-common-border-checked);z-index:2}.resize-border[data-v-25c7c9cc]{position:absolute;display:flex;justify-content:center;align-items:center;z-index:3;top:var(--c4c672d6);left:var(--15f842c7);width:var(--aca639f4);height:var(--722083e7)}.resize-border[data-v-25c7c9cc]:after{content:"";display:block;border:1px solid var(--te-common-border-checked)}.resize-border.resize-vertical[data-v-25c7c9cc]{cursor:ns-resize}.resize-border.resize-vertical[data-v-25c7c9cc]:after{min-width:50%;height:4px}.resize-border.resize-horizontal[data-v-25c7c9cc]{cursor:ew-resize}.resize-border.resize-horizontal[data-v-25c7c9cc]:after{width:4px;height:100%}.insert-panel[data-v-cda5b426]{z-index:4;position:fixed;top:200px;left:400px;width:480px}.insert-panel[data-v-cda5b426] .components-wrap>.tiny-collapse{max-height:300px}.insert-panel[data-v-cda5b426] #pane-blocks{max-height:400px}.datainit-tip[data-v-cda5b426]{display:flex;height:100%;justify-content:center;align-items:center;color:#1890ff}#canvas-wrap[data-v-17f0fb7b]{background:var(--te-common-bg-container);flex:1 1 0;border:none;display:flex;justify-content:center;position:relative}#canvas-wrap .site-canvas[data-v-17f0fb7b]{background:var(--ti-lowcode-breadcrumb-hover-bg);position:absolute;overflow:hidden;margin:18px 0;transform-origin:top}