@logicflow/vue-node-registry 1.2.0-alpha.1 → 1.2.0-alpha.3

package/es/style/index.css

@@ -0,0 +1,122 @@
+.lf-vue-node-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 6px;
+  color: #474747;
+  border-radius: 12px;
+  box-shadow: 0 0 10px #cad2e15f;
+}
+.lf-vue-node-content-wrap {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: center;
+}
+.lf-vue-node-title {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  box-sizing: border-box;
+  margin-bottom: 4px;
+  padding: 0 8px;
+  backdrop-filter: saturate(180%) blur(4px);
+}
+.lf-vue-node-title-expanded {
+  margin-bottom: 6px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #eaeaea;
+}
+@supports not (backdrop-filter: blur(1px)) {
+  .lf-vue-node-title {
+    backdrop-filter: none;
+  }
+}
+.lf-vue-node-title-left {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  min-width: 0;
+}
+.lf-vue-node-title-icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  color: #666;
+  font-style: normal;
+  line-height: 16px;
+  text-align: center;
+}
+.lf-vue-node-title-text {
+  overflow: hidden;
+  color: #333;
+  font-weight: 500;
+  font-size: 14px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.lf-vue-node-title-actions {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.lf-vue-node-title-expand,
+.lf-vue-node-title-more {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 2px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  appearance: none;
+}
+.lf-vue-node-title-expand:hover,
+.lf-vue-node-title-more:hover {
+  background: rgba(0, 0, 0, 0.06);
+}
+.lf-vue-node-title-expand-icon {
+  color: #666;
+  font-style: normal;
+  transition: transform 0.3s ease;
+}
+.lf-vue-node-title-more-icon {
+  color: #666;
+  font-style: normal;
+}
+.lf-vue-node-title-tooltip {
+  position: absolute;
+  top: -50px;
+  right: -135px;
+  min-width: 120px;
+  max-width: 240px;
+  padding: 6px 8px;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+  transform: translateY(calc(100% + 4px));
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+.lf-vue-node-title-tooltip-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.lf-vue-node-title-tooltip-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 6px;
+  color: #333;
+  font-size: 12px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.lf-vue-node-title-tooltip-item:hover {
+  background: rgba(0, 0, 0, 0.05);
+}

package/es/style/index.less

@@ -0,0 +1,140 @@
+.lf-vue-node-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 6px;
+  color: #474747;
+  border-radius: 12px;
+  box-shadow: 0 0 10px #cad2e15f;
+}
+
+.lf-vue-node-content-wrap {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: center;
+}
+
+.lf-vue-node-title {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  box-sizing: border-box;
+  margin-bottom: 4px;
+  padding: 0 8px;
+  backdrop-filter: saturate(180%) blur(4px);
+
+  &-expanded {
+    margin-bottom: 6px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #eaeaea;
+  }
+}
+
+@supports not (backdrop-filter: blur(1px)) {
+  .lf-vue-node-title {
+    backdrop-filter: none;
+  }
+}
+
+.lf-vue-node-title-left {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  min-width: 0;
+}
+
+.lf-vue-node-title-icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  color: #666;
+  font-style: normal;
+  line-height: 16px;
+  text-align: center;
+}
+
+.lf-vue-node-title-text {
+  overflow: hidden;
+  color: #333;
+  font-weight: 500;
+  font-size: 14px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.lf-vue-node-title-actions {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.lf-vue-node-title-expand,
+.lf-vue-node-title-more {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 2px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  appearance: none;
+}
+
+.lf-vue-node-title-expand:hover,
+.lf-vue-node-title-more:hover {
+  background: rgb(0 0 0 / 6%);
+}
+
+.lf-vue-node-title-expand-icon {
+  color: #666;
+  font-style: normal;
+  transition: transform 0.3s ease;
+}
+
+.lf-vue-node-title-more-icon {
+  color: #666;
+  font-style: normal;
+}
+
+.lf-vue-node-title-tooltip {
+  position: absolute;
+  top: -50px;
+  right: -135px;
+  min-width: 120px;
+  max-width: 240px;
+  padding: 6px 8px;
+  background: #fff;
+  border: 1px solid rgb(0 0 0 / 10%);
+  border-radius: 6px;
+  box-shadow: 0 6px 20px rgb(0 0 0 / 12%);
+  transform: translateY(calc(100% + 4px));
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease;
+}
+
+.lf-vue-node-title-tooltip-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.lf-vue-node-title-tooltip-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 6px;
+  color: #333;
+  font-size: 12px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.lf-vue-node-title-tooltip-item:hover {
+  background: rgb(0 0 0 / 5%);
+}

package/es/style/raw.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Auto generated file, do not modify it!
+ */
+export declare const content = ".lf-vue-node-container {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 6px;\n  color: #474747;\n  border-radius: 12px;\n  box-shadow: 0 0 10px #cad2e15f;\n}\n.lf-vue-node-content-wrap {\n  display: flex;\n  flex: 1 1 auto;\n  justify-content: center;\n}\n.lf-vue-node-title {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  box-sizing: border-box;\n  margin-bottom: 4px;\n  padding: 0 8px;\n  backdrop-filter: saturate(180%) blur(4px);\n}\n.lf-vue-node-title-expanded {\n  margin-bottom: 6px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid #eaeaea;\n}\n@supports not (backdrop-filter: blur(1px)) {\n  .lf-vue-node-title {\n    backdrop-filter: none;\n  }\n}\n.lf-vue-node-title-left {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  min-width: 0;\n}\n.lf-vue-node-title-icon {\n  display: inline-block;\n  width: 16px;\n  height: 16px;\n  color: #666;\n  font-style: normal;\n  line-height: 16px;\n  text-align: center;\n}\n.lf-vue-node-title-text {\n  overflow: hidden;\n  color: #333;\n  font-weight: 500;\n  font-size: 14px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.lf-vue-node-title-actions {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n}\n.lf-vue-node-title-expand,\n.lf-vue-node-title-more {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  padding: 2px;\n  background: transparent;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background 0.15s ease;\n  appearance: none;\n}\n.lf-vue-node-title-expand:hover,\n.lf-vue-node-title-more:hover {\n  background: rgba(0, 0, 0, 0.06);\n}\n.lf-vue-node-title-expand-icon {\n  color: #666;\n  font-style: normal;\n  transition: transform 0.3s ease;\n}\n.lf-vue-node-title-more-icon {\n  color: #666;\n  font-style: normal;\n}\n.lf-vue-node-title-tooltip {\n  position: absolute;\n  top: -50px;\n  right: -135px;\n  min-width: 120px;\n  max-width: 240px;\n  padding: 6px 8px;\n  background: #fff;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  border-radius: 6px;\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);\n  transform: translateY(calc(100% + 4px));\n  transition: opacity 0.15s ease, transform 0.15s ease;\n}\n.lf-vue-node-title-tooltip-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.lf-vue-node-title-tooltip-item {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: 6px;\n  color: #333;\n  font-size: 12px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n.lf-vue-node-title-tooltip-item:hover {\n  background: rgba(0, 0, 0, 0.05);\n}\n";

package/es/style/raw.js

@@ -0,0 +1,6 @@
+/* eslint-disable */
+/**
+ * Auto generated file, do not modify it!
+ */
+export var content = ".lf-vue-node-container {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: 6px;\n  color: #474747;\n  border-radius: 12px;\n  box-shadow: 0 0 10px #cad2e15f;\n}\n.lf-vue-node-content-wrap {\n  display: flex;\n  flex: 1 1 auto;\n  justify-content: center;\n}\n.lf-vue-node-title {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  box-sizing: border-box;\n  margin-bottom: 4px;\n  padding: 0 8px;\n  backdrop-filter: saturate(180%) blur(4px);\n}\n.lf-vue-node-title-expanded {\n  margin-bottom: 6px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid #eaeaea;\n}\n@supports not (backdrop-filter: blur(1px)) {\n  .lf-vue-node-title {\n    backdrop-filter: none;\n  }\n}\n.lf-vue-node-title-left {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  min-width: 0;\n}\n.lf-vue-node-title-icon {\n  display: inline-block;\n  width: 16px;\n  height: 16px;\n  color: #666;\n  font-style: normal;\n  line-height: 16px;\n  text-align: center;\n}\n.lf-vue-node-title-text {\n  overflow: hidden;\n  color: #333;\n  font-weight: 500;\n  font-size: 14px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.lf-vue-node-title-actions {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n}\n.lf-vue-node-title-expand,\n.lf-vue-node-title-more {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  padding: 2px;\n  background: transparent;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background 0.15s ease;\n  appearance: none;\n}\n.lf-vue-node-title-expand:hover,\n.lf-vue-node-title-more:hover {\n  background: rgba(0, 0, 0, 0.06);\n}\n.lf-vue-node-title-expand-icon {\n  color: #666;\n  font-style: normal;\n  transition: transform 0.3s ease;\n}\n.lf-vue-node-title-more-icon {\n  color: #666;\n  font-style: normal;\n}\n.lf-vue-node-title-tooltip {\n  position: absolute;\n  top: -50px;\n  right: -135px;\n  min-width: 120px;\n  max-width: 240px;\n  padding: 6px 8px;\n  background: #fff;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  border-radius: 6px;\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);\n  transform: translateY(calc(100% + 4px));\n  transition: opacity 0.15s ease, transform 0.15s ease;\n}\n.lf-vue-node-title-tooltip-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.lf-vue-node-title-tooltip-item {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: 6px;\n  color: #333;\n  font-size: 12px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n.lf-vue-node-title-tooltip-item:hover {\n  background: rgba(0, 0, 0, 0.05);\n}\n";
+//# sourceMappingURL=raw.js.map

package/es/style/raw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"raw.js","sourceRoot":"","sources":["../../src/style/raw.ts"],"names":[],"mappings":"AAAA,oBAAoB;AAEpB;;GAEG;AAEH,MAAM,CAAC,IAAM,OAAO,GAAG,unFA0HtB,CAAA"}

package/es/utils/size.d.ts

@@ -0,0 +1,2 @@
+export declare function computeBaseHeight(measuredHeight: number, _showTitle?: boolean, _titleHeight?: number): number;
+export declare function shouldUpdateSize(prevW?: number, prevH?: number, w?: number, h?: number): boolean;

package/es/utils/size.js

@@ -0,0 +1,14 @@
+export function computeBaseHeight(measuredHeight, _showTitle, _titleHeight) {
+    var extra = _showTitle
+        ? typeof _titleHeight === 'number'
+            ? _titleHeight
+            : 28
+        : 0;
+    return Math.max(1, Math.round(measuredHeight) - extra);
+}
+export function shouldUpdateSize(prevW, prevH, w, h) {
+    if (!w || !h)
+        return false;
+    return !(prevW === Math.round(w) && prevH === Math.round(h));
+}
+//# sourceMappingURL=size.js.map

package/es/utils/size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.js","sourceRoot":"","sources":["../../src/utils/size.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,iBAAiB,CAC/B,cAAsB,EACtB,UAAoB,EACpB,YAAqB;IAErB,IAAM,KAAK,GAAG,UAAU;QACtB,CAAC,CAAC,OAAO,YAAY,KAAK,QAAQ;YAChC,CAAC,CAAC,YAAY;YACd,CAAC,CAAC,EAAE;QACN,CAAC,CAAC,CAAC,CAAA;IACL,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,CAAA;AACxD,CAAC;AAED,MAAM,UAAU,gBAAgB,CAC9B,KAAc,EACd,KAAc,EACd,CAAU,EACV,CAAU;IAEV,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;QAAE,OAAO,KAAK,CAAA;IAC1B,OAAO,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;AAC9D,CAAC"}

package/es/view.d.ts

@@ -2,12 +2,21 @@ import { HtmlNode } from '@logicflow/core';
 export declare class VueNodeView extends HtmlNode {
     root?: any;
     private vm;
+    private __resizeObserver?;
+    private __resizeRafId?;
+    private __lastWidth?;
+    private __lastHeight?;
+    private __fallbackUnlisten?;
+    private __throttledUpdate;
     getComponentContainer(): any;
     protected targetId(): string;
     componentWillUnmount(): void;
     setHtml(rootEl: SVGForeignObjectElement): void;
     confirmUpdate(_rootEl: SVGForeignObjectElement): void;
     protected renderVueComponent(): void;
+    private measureAndUpdate;
+    private startResizeObserver;
+    private stopResizeObserver;
     protected unmountVueComponent(): any;
     unmount(): void;
 }

package/es/view.js

@@ -13,15 +13,51 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-import { isVue2, isVue3, createApp, h, Vue2 } from 'vue-demi';
+import { isVue2, isVue3, createApp, h, Vue2, defineComponent } from 'vue-demi';
+// Vue2/3 兼容 API；使用 vue-demi 保持两端一致
+import { throttle, round, get, isFunction, isArray, clamp, isNumber, } from 'lodash-es';
 import { HtmlNode } from '@logicflow/core';
 import { vueNodesMap } from './registry';
 import { isActive, connect, disconnect } from './teleport';
+import { Container } from './components/container';
 var VueNodeView = /** @class */ (function (_super) {
     __extends(VueNodeView, _super);
     function VueNodeView() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.__throttledUpdate = throttle(function () { return _this.measureAndUpdate(); }, 80);
+        _this.measureAndUpdate = function () {
+            try {
+                // 读取子组件（或容器本身）的实际尺寸并更新模型属性
+                var root = _this.getComponentContainer();
+                if (!root)
+                    return;
+                var target = root.firstElementChild || root;
+                var rect = target.getBoundingClientRect();
+                var width = round(rect.width);
+                var height = round(rect.height);
+                if (width <= 0 || height <= 0)
+                    return;
+                if (width === _this.__lastWidth && height === _this.__lastHeight)
+                    return;
+                _this.__lastWidth = width;
+                _this.__lastHeight = height;
+                var props = _this.props.model.properties;
+                var extra = get(props, '_showTitle')
+                    ? isNumber(get(props, '_titleHeight'))
+                        ? get(props, '_titleHeight')
+                        : 28
+                    : 0;
+                // 去掉标题占用的高度，保证内容区域与模型高度一致
+                var baseHeight = clamp(height - extra, 1, Number.MAX_SAFE_INTEGER);
+                _this.props.model.setProperties({ width: width, height: baseHeight });
+            }
+            catch (err) {
+                // swallow error
+            }
+        };
+        return _this;
     }
+    // private isMounted: boolean = false
     VueNodeView.prototype.getComponentContainer = function () {
         return this.root;
     };
@@ -33,31 +69,61 @@ var VueNodeView = /** @class */ (function (_super) {
         this.unmount();
     };
     VueNodeView.prototype.setHtml = function (rootEl) {
-        var el = document.createElement('div');
-        el.className = 'custom-vue-node-content';
-        this.root = el;
-        rootEl.appendChild(el);
+        // 创建节点内容容器并注入到 foreignObject（若已存在则复用）
+        var existed = rootEl.querySelector('.custom-vue-node-content');
+        if (!existed) {
+            var el = document.createElement('div');
+            el.className = 'custom-vue-node-content';
+            this.root = el;
+            rootEl.appendChild(el);
+        }
+        // 渲染 Vue 组件并启用尺寸监听
         this.renderVueComponent();
+        this.startResizeObserver();
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     VueNodeView.prototype.confirmUpdate = function (_rootEl) {
         // TODO: 如有需要，可以先通过继承的方式，自定义该节点的更新逻辑；我们后续会根据实际需求，丰富该功能
-        // console.log('_rootEl', _rootEl)
+        var model = this.props.model;
+        var _a = (model.properties || {})._showTitle, _showTitle = _a === void 0 ? false : _a;
+        if (_showTitle) {
+            this.setHtml(_rootEl);
+        }
     };
     VueNodeView.prototype.renderVueComponent = function () {
         var _a;
         this.unmountVueComponent();
         var root = this.getComponentContainer();
         var _b = this.props, model = _b.model, graphModel = _b.graphModel;
+        var _c = (model.properties || {})._showTitle, _showTitle = _c === void 0 ? false : _c;
+        var wrapWithContainer = function (child) {
+            return defineComponent({
+                name: 'LFVueNodeContainerWrapper',
+                props: {
+                    node: { type: Object, required: true },
+                    graph: { type: Object, required: true },
+                },
+                render: function () {
+                    // 根据 _showTitle 决定是否用 Container 包裹，避免无标题时额外结构
+                    if (!_showTitle) {
+                        return h(child, { node: this.node, graph: this.graph });
+                    }
+                    return h(Container, { node: this.node, graph: this.graph }, [
+                        h(child, { node: this.node, graph: this.graph }),
+                    ]);
+                },
+            });
+        };
         if (root) {
-            var component_1 = vueNodesMap[model.type].component;
-            if (component_1) {
+            var component = vueNodesMap[model.type].component;
+            if (component) {
                 if (isVue2) {
                     var Vue = Vue2;
+                    var Composed_1 = wrapWithContainer(component);
                     this.vm = new Vue({
                         el: root,
                         render: function (h) {
-                            return h(component_1, {
+                            return h(Composed_1, {
                                 node: model,
                                 graph: graphModel,
                             });
@@ -71,13 +137,16 @@ var VueNodeView = /** @class */ (function (_super) {
                     });
                 }
                 else if (isVue3) {
+                    console.log('isActive', isActive());
                     if (isActive()) {
-                        connect(this.targetId(), component_1, root, model, graphModel);
+                        var Composed = wrapWithContainer(component);
+                        connect(this.targetId(), Composed, root, model, graphModel);
                     }
                     else {
+                        var Composed_2 = wrapWithContainer(component);
                         this.vm = createApp({
                             render: function () {
-                                return h(component_1, {
+                                return h(Composed_2, {
                                     node: model,
                                     graph: graphModel,
                                 });
@@ -90,13 +159,68 @@ var VueNodeView = /** @class */ (function (_super) {
                             },
                         });
                         (_a = this.vm) === null || _a === void 0 ? void 0 : _a.mount(root);
+                        // this.isMounted = true
                     }
                 }
             }
         }
     };
+    VueNodeView.prototype.startResizeObserver = function () {
+        var _this = this;
+        var _a;
+        // 启动尺寸监听：优先使用 ResizeObserver，退化到 window.resize
+        var root = this.getComponentContainer();
+        if (!root)
+            return;
+        try {
+            if (isFunction(window.ResizeObserver)) {
+                this.__resizeObserver = new window.ResizeObserver(function (entries) {
+                    if (!isArray(entries) || !entries.length)
+                        return;
+                    if (_this.__resizeRafId)
+                        cancelAnimationFrame(_this.__resizeRafId);
+                    // 使用 RAF 对齐绘制帧，再用节流函数合并频繁变更
+                    _this.__resizeRafId = requestAnimationFrame(_this.__throttledUpdate);
+                });
+                var target = root.firstElementChild || root;
+                (_a = this.__resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(target);
+            }
+            else {
+                // 退化监听：在窗口尺寸变化时尝试更新
+                window.addEventListener('resize', function () { return _this.__throttledUpdate(); });
+                this.__fallbackUnlisten = function () {
+                    return window.removeEventListener('resize', function () { return _this.__throttledUpdate(); });
+                };
+            }
+        }
+        catch (err) {
+            // swallow error
+        }
+    };
+    VueNodeView.prototype.stopResizeObserver = function () {
+        try {
+            // 停止所有监听与异步回调，避免内存泄漏
+            if (this.__resizeObserver) {
+                this.__resizeObserver.disconnect();
+                this.__resizeObserver = undefined;
+            }
+            if (this.__resizeRafId) {
+                cancelAnimationFrame(this.__resizeRafId);
+                this.__resizeRafId = undefined;
+            }
+            if (this.__fallbackUnlisten) {
+                this.__fallbackUnlisten();
+                this.__fallbackUnlisten = undefined;
+            }
+        }
+        catch (err) {
+            // swallow error
+        }
+    };
     VueNodeView.prototype.unmountVueComponent = function () {
         var root = this.getComponentContainer();
+        // 在卸载 Vue 实例前先停止尺寸监听
+        this.stopResizeObserver();
         if (this.vm) {
             isVue2 && this.vm.$destroy();
             isVue3 && this.vm.unmount();
@@ -108,6 +232,7 @@ var VueNodeView = /** @class */ (function (_super) {
         return root;
     };
     VueNodeView.prototype.unmount = function () {
+        // Teleport 模式下断开连接，并清理视图与监听
         if (isActive()) {
             disconnect(this.targetId(), this.props.graphModel.flowId);
         }

package/es/view.js.map

@@ -1 +1 @@
-{"version":3,"file":"view.js","sourceRoot":"","sources":["../src/view.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../src/view.ts"],"names":[],"mappings":"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"}

package/lib/components/container.d.ts

@@ -0,0 +1,19 @@
+export declare const Container: import("vue-demi").DefineComponent<{
+    node: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    graph: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}, unknown, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    node: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    graph: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>>, {}, {}>;

package/lib/components/container.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Container = void 0;
+var vue_demi_1 = require("vue-demi");
+var titleBar_1 = require("./titleBar");
+exports.Container = (0, vue_demi_1.defineComponent)({
+    name: 'LFVueNodeContainer',
+    props: {
+        node: { type: Object, required: true },
+        graph: { type: Object, required: true },
+    },
+    render: function () {
+        var _a, _b;
+        var props = ((_a = this.node) === null || _a === void 0 ? void 0 : _a.properties) || {};
+        var children = [];
+        var titleColor = props.style.titleColor || '#E5EEFC';
+        if (props._showTitle) {
+            children.push((0, vue_demi_1.h)(titleBar_1.TitleBar, { node: this.node, graph: this.graph }));
+        }
+        console.log('props._expanded', props._expanded);
+        if (props._expanded === true) {
+            children.push((0, vue_demi_1.h)('div', { class: 'lf-vue-node-content-wrap' }, ((_b = this.$slots) === null || _b === void 0 ? void 0 : _b.default) ? this.$slots.default() : []));
+        }
+        return (0, vue_demi_1.h)('div', {
+            class: 'lf-vue-node-container',
+            style: " background: linear-gradient(180deg, ".concat(titleColor, " 0%, #FFFFFF 24px)"),
+        }, children);
+    },
+});
+//# sourceMappingURL=container.js.map

package/lib/components/container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../src/components/container.ts"],"names":[],"mappings":";;;AAAA,qCAA6C;AAC7C,uCAAqC;AAExB,QAAA,SAAS,GAAG,IAAA,0BAAe,EAAC;IACvC,IAAI,EAAE,oBAAoB;IAC1B,KAAK,EAAE;QACL,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;QACtC,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;KACxC;IACD,MAAM;;QACJ,IAAM,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,KAAI,EAAE,CAAA;QACzC,IAAM,QAAQ,GAAU,EAAE,CAAA;QAC1B,IAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,IAAI,SAAS,CAAA;QACtD,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC;YACrB,QAAQ,CAAC,IAAI,CAAC,IAAA,YAAC,EAAC,mBAAQ,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;QACpE,CAAC;QACD,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;QAC/C,IAAI,KAAK,CAAC,SAAS,KAAK,IAAI,EAAE,CAAC;YAC7B,QAAQ,CAAC,IAAI,CACX,IAAA,YAAC,EACC,KAAK,EACL,EAAE,KAAK,EAAE,0BAA0B,EAAE,EACrC,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,EAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,CAClD,CACF,CAAA;QACH,CAAC;QACD,OAAO,IAAA,YAAC,EACN,KAAK,EACL;YACE,KAAK,EAAE,uBAAuB;YAC9B,KAAK,EAAE,+CAAwC,UAAU,uBAAoB;SAC9E,EACD,QAAQ,CACT,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}

package/lib/components/titleBar.d.ts

@@ -0,0 +1,24 @@
+export declare const TitleBar: import("vue-demi").DefineComponent<{
+    node: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    graph: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}, unknown, {
+    showTooltip: boolean;
+}, {}, {
+    toggleExpand(): void;
+    runAction(act: any): void;
+}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    node: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    graph: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>>, {}, {}>;