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

package/lib/style/raw.js

@@ -0,0 +1,9 @@
+"use strict";
+/* eslint-disable */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.content = void 0;
+/**
+ * Auto generated file, do not modify it!
+ */
+exports.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/lib/style/raw.js.map

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

package/lib/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/lib/utils/size.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shouldUpdateSize = exports.computeBaseHeight = void 0;
+function computeBaseHeight(measuredHeight, _showTitle, _titleHeight) {
+    var extra = _showTitle
+        ? typeof _titleHeight === 'number'
+            ? _titleHeight
+            : 28
+        : 0;
+    return Math.max(1, Math.round(measuredHeight) - extra);
+}
+exports.computeBaseHeight = computeBaseHeight;
+function shouldUpdateSize(prevW, prevH, w, h) {
+    if (!w || !h)
+        return false;
+    return !(prevW === Math.round(w) && prevH === Math.round(h));
+}
+exports.shouldUpdateSize = shouldUpdateSize;
+//# sourceMappingURL=size.js.map

package/lib/utils/size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.js","sourceRoot":"","sources":["../../src/utils/size.ts"],"names":[],"mappings":";;;AAAA,SAAgB,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;AAXD,8CAWC;AAED,SAAgB,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;AARD,4CAQC"}

package/lib/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/lib/view.js

@@ -17,14 +17,50 @@ var __extends = (this && this.__extends) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VueNodeView = void 0;
 var vue_demi_1 = require("vue-demi");
+// Vue2/3 兼容 API；使用 vue-demi 保持两端一致
+var lodash_es_1 = require("lodash-es");
 var core_1 = require("@logicflow/core");
 var registry_1 = require("./registry");
 var teleport_1 = require("./teleport");
+var container_1 = require("./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 = (0, lodash_es_1.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 = (0, lodash_es_1.round)(rect.width);
+                var height = (0, lodash_es_1.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 = (0, lodash_es_1.get)(props, '_showTitle')
+                    ? (0, lodash_es_1.isNumber)((0, lodash_es_1.get)(props, '_titleHeight'))
+                        ? (0, lodash_es_1.get)(props, '_titleHeight')
+                        : 28
+                    : 0;
+                // 去掉标题占用的高度，保证内容区域与模型高度一致
+                var baseHeight = (0, lodash_es_1.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;
     };
@@ -36,31 +72,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 (0, vue_demi_1.defineComponent)({
+                name: 'LFVueNodeContainerWrapper',
+                props: {
+                    node: { type: Object, required: true },
+                    graph: { type: Object, required: true },
+                },
+                render: function () {
+                    // 根据 _showTitle 决定是否用 Container 包裹，避免无标题时额外结构
+                    if (!_showTitle) {
+                        return (0, vue_demi_1.h)(child, { node: this.node, graph: this.graph });
+                    }
+                    return (0, vue_demi_1.h)(container_1.Container, { node: this.node, graph: this.graph }, [
+                        (0, vue_demi_1.h)(child, { node: this.node, graph: this.graph }),
+                    ]);
+                },
+            });
+        };
         if (root) {
-            var component_1 = registry_1.vueNodesMap[model.type].component;
-            if (component_1) {
+            var component = registry_1.vueNodesMap[model.type].component;
+            if (component) {
                 if (vue_demi_1.isVue2) {
                     var Vue = vue_demi_1.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,
                             });
@@ -74,13 +140,16 @@ var VueNodeView = /** @class */ (function (_super) {
                     });
                 }
                 else if (vue_demi_1.isVue3) {
+                    console.log('isActive', (0, teleport_1.isActive)());
                     if ((0, teleport_1.isActive)()) {
-                        (0, teleport_1.connect)(this.targetId(), component_1, root, model, graphModel);
+                        var Composed = wrapWithContainer(component);
+                        (0, teleport_1.connect)(this.targetId(), Composed, root, model, graphModel);
                     }
                     else {
+                        var Composed_2 = wrapWithContainer(component);
                         this.vm = (0, vue_demi_1.createApp)({
                             render: function () {
-                                return (0, vue_demi_1.h)(component_1, {
+                                return (0, vue_demi_1.h)(Composed_2, {
                                     node: model,
                                     graph: graphModel,
                                 });
@@ -93,13 +162,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 ((0, lodash_es_1.isFunction)(window.ResizeObserver)) {
+                this.__resizeObserver = new window.ResizeObserver(function (entries) {
+                    if (!(0, lodash_es_1.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) {
             vue_demi_1.isVue2 && this.vm.$destroy();
             vue_demi_1.isVue3 && this.vm.unmount();
@@ -111,6 +235,7 @@ var VueNodeView = /** @class */ (function (_super) {
         return root;
     };
     VueNodeView.prototype.unmount = function () {
+        // Teleport 模式下断开连接，并清理视图与监听
         if ((0, teleport_1.isActive)()) {
             (0, teleport_1.disconnect)(this.targetId(), this.props.graphModel.flowId);
         }

package/lib/view.js.map

@@ -1 +1 @@
-{"version":3,"file":"view.js","sourceRoot":"","sources":["../src/view.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,qCAA6D;AAC7D,wCAA0C;AAC1C,uCAAwC;AACxC,uCAA0D;AAE1D;IAAiC,+BAAQ;IAAzC;;IAqGA,CAAC;IAjGC,2CAAqB,GAArB;QACE,OAAO,IAAI,CAAC,IAAI,CAAA;IAClB,CAAC;IAES,8BAAQ,GAAlB;QACE,OAAO,UAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,cAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAE,CAAA;IACjE,CAAC;IAED,0CAAoB,GAApB;QACE,gBAAK,CAAC,oBAAoB,WAAE,CAAA;QAC5B,IAAI,CAAC,OAAO,EAAE,CAAA;IAChB,CAAC;IAED,6BAAO,GAAP,UAAQ,MAA+B;QACrC,IAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QACxC,EAAE,CAAC,SAAS,GAAG,yBAAyB,CAAA;QACxC,IAAI,CAAC,IAAI,GAAG,EAAE,CAAA;QACd,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,CAAA;QAEtB,IAAI,CAAC,kBAAkB,EAAE,CAAA;IAC3B,CAAC;IAED,6DAA6D;IAC7D,mCAAa,GAAb,UAAc,OAAgC;QAC5C,sDAAsD;QACtD,kCAAkC;IACpC,CAAC;IAES,wCAAkB,GAA5B;;QACE,IAAI,CAAC,mBAAmB,EAAE,CAAA;QAC1B,IAAM,IAAI,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAA;QACnC,IAAA,KAAwB,IAAI,CAAC,KAAK,EAAhC,KAAK,WAAA,EAAE,UAAU,gBAAe,CAAA;QAExC,IAAI,IAAI,EAAE,CAAC;YACD,IAAA,WAAS,GAAK,sBAAW,CAAC,KAAK,CAAC,IAAI,CAAC,UAA5B,CAA4B;YAC7C,IAAI,WAAS,EAAE,CAAC;gBACd,IAAI,iBAAM,EAAE,CAAC;oBACX,IAAM,GAAG,GAAG,eAAW,CAAA;oBACvB,IAAI,CAAC,EAAE,GAAG,IAAI,GAAG,CAAC;wBAChB,EAAE,EAAE,IAAI;wBACR,MAAM,YAAC,CAAM;4BACX,OAAO,CAAC,CAAC,WAAS,EAAE;gCAClB,IAAI,EAAE,KAAK;gCACX,KAAK,EAAE,UAAU;6BAClB,CAAC,CAAA;wBACJ,CAAC;wBACD,OAAO;4BACL,OAAO;gCACL,OAAO,EAAE,cAAM,OAAA,KAAK,EAAL,CAAK;gCACpB,QAAQ,EAAE,cAAM,OAAA,UAAU,EAAV,CAAU;6BAC3B,CAAA;wBACH,CAAC;qBACF,CAAC,CAAA;gBACJ,CAAC;qBAAM,IAAI,iBAAM,EAAE,CAAC;oBAClB,IAAI,IAAA,mBAAQ,GAAE,EAAE,CAAC;wBACf,IAAA,kBAAO,EAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,WAAS,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,CAAC,CAAA;oBAC9D,CAAC;yBAAM,CAAC;wBACN,IAAI,CAAC,EAAE,GAAG,IAAA,oBAAS,EAAC;4BAClB,MAAM;gCACJ,OAAO,IAAA,YAAC,EAAC,WAAS,EAAE;oCAClB,IAAI,EAAE,KAAK;oCACX,KAAK,EAAE,UAAU;iCAClB,CAAC,CAAA;4BACJ,CAAC;4BACD,OAAO;gCACL,OAAO;oCACL,OAAO,EAAE,cAAM,OAAA,KAAK,EAAL,CAAK;oCACpB,QAAQ,EAAE,cAAM,OAAA,UAAU,EAAV,CAAU;iCAC3B,CAAA;4BACH,CAAC;yBACF,CAAC,CAAA;wBACF,MAAA,IAAI,CAAC,EAAE,0CAAE,KAAK,CAAC,IAAI,CAAC,CAAA;oBACtB,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAES,yCAAmB,GAA7B;QACE,IAAM,IAAI,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAA;QACzC,IAAI,IAAI,CAAC,EAAE,EAAE,CAAC;YACZ,iBAAM,IAAI,IAAI,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAA;YAC5B,iBAAM,IAAI,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,CAAA;YAC3B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAA;QAChB,CAAC;QACD,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,CAAC,SAAS,GAAG,EAAE,CAAA;QACrB,CAAC;QACD,OAAO,IAAI,CAAA;IACb,CAAC;IAED,6BAAO,GAAP;QACE,IAAI,IAAA,mBAAQ,GAAE,EAAE,CAAC;YACf,IAAA,qBAAU,EAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,MAAgB,CAAC,CAAA;QACrE,CAAC;QACD,IAAI,CAAC,mBAAmB,EAAE,CAAA;IAC5B,CAAC;IACH,kBAAC;AAAD,CAAC,AArGD,CAAiC,eAAQ,GAqGxC;AArGY,kCAAW;AAuGxB,kBAAe,WAAW,CAAA"}
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../src/view.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/vue-node-registry",
-  "version": "1.2.0-alpha.2",
+  "version": "1.2.0-alpha.3",
   "description": "LogicFlow Vue Component Node Registry",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,7 @@
   "peerDependencies": {
     "@vue/composition-api": "^1.0.0-rc.10",
     "vue": "^2.0.0 || >=3.0.0",
-    "@logicflow/core": "2.2.0-alpha.2"
+    "@logicflow/core": "2.2.0-alpha.3"
   },
   "peerDependenciesMeta": {
     "@vue/composition-api": {
@@ -29,7 +29,7 @@
   },
   "devDependencies": {
     "vue": "^3.0.0",
-    "@logicflow/core": "2.2.0-alpha.2"
+    "@logicflow/core": "2.2.0-alpha.3"
   },
   "author": {
     "name": "boyongjiong",

package/rollup.config.js

@@ -0,0 +1,52 @@
+import path from 'node:path'
+import postcss from 'rollup-plugin-postcss'
+import postcssUrl from 'postcss-url'
+import postcssImport from 'postcss-import'
+import { rollupConfig } from '../../rollup.config'
+
+export default [
+  {
+    input: 'src/index.less',
+    output: [
+      {
+        file: 'dist/index.css',
+      },
+      {
+        file: 'lib/index.css',
+      },
+      {
+        file: 'lib/style/index.css',
+      },
+      {
+        file: 'es/index.css',
+      },
+      {
+        file: 'es/style/index.css',
+      },
+    ],
+    plugins: [
+      postcss({
+        plugins: [
+          postcssImport({
+            resolve: (id) => {
+              if (id.startsWith('~')) {
+                return path.resolve('node_modules', id.slice(1))
+              }
+              return id
+            },
+          }),
+          postcssUrl({
+            url: 'inline', // 选择 'inline' 选项将外部资源内联到最终的 CSS 文件中
+            // maxSize: 10, // 以KB为单位的最大文件大小，超过此大小的文件将不会被内联
+          }),
+        ],
+        use: [['less', { javascriptEnabled: true }]],
+        extract: true,
+        // extract: 'index.css', // 提取到一个单独的 CSS 文件
+        // extract: path.resolve('dist/index.css'), // 提取到一个单独的 CSS 文件
+        minimize: true,
+      }),
+    ],
+  },
+  rollupConfig(),
+]

package/src/assets/arrow.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="14" height="12.5" viewBox="0 0 14 12.5">
+<g>
+  <g>
+    <path d="M0.5201124,5.47988755C0.23603013,5.7639699,0.24460429,6.2271326,0.53900635,6.5005059L6.3195491,11.8681526C6.7032304,12.2244282,7.2967696,12.2244282,7.6804514,11.8681526L13.460994,6.5005059C13.755396,6.2271326,13.76397,5.7639699,13.479888,5.47988755C13.211547,5.21154633,12.779465,5.20215771,12.499721,5.45858961L7.3378625,10.1902928C7.1467018,10.3655233,6.8532982,10.3655233,6.6621375,10.1902928L1.5002797,5.45858967C1.2205358,5.20215771,0.78845364,5.21154633,0.5201124,5.47988755Z" fill="#474747" fill-opacity="1"/>
+  </g>
+  <g>
+  <path d="M0.5201124,0.47988755C0.23603013,0.7639699,0.24460429,1.2271326,0.53900635,1.5005059L6.3195491,6.8681526C6.7032304,7.2244282,7.2967696,7.2244282,7.6804514,6.8681526L13.460994,1.5005059C13.755396,1.2271326,13.76397,0.7639699,13.479888,0.47988755C13.211547,0.21154633,12.779465,0.20215771,12.499721,0.45858961L7.3378625,5.1902928C7.1467018,5.3655233,6.8532982,5.3655233,6.6621375,5.1902928L1.5002797,0.45858967C1.2205358,0.20215771,0.78845364,0.21154633,0.5201124,0.47988755Z" fill="#9B9B9B" fill-opacity="1"/>
+  </g>
+</g>
+</svg>

package/src/components/container.ts

@@ -0,0 +1,36 @@
+import { defineComponent, h } from 'vue-demi'
+import { TitleBar } from './titleBar'
+
+export const Container = defineComponent({
+  name: 'LFVueNodeContainer',
+  props: {
+    node: { type: Object, required: true },
+    graph: { type: Object, required: true },
+  },
+  render(this: any) {
+    const props = this.node?.properties || {}
+    const children: any[] = []
+    const titleColor = props.style.titleColor || '#E5EEFC'
+    if (props._showTitle) {
+      children.push(h(TitleBar, { node: this.node, graph: this.graph }))
+    }
+    console.log('props._expanded', props._expanded)
+    if (props._expanded === true) {
+      children.push(
+        h(
+          'div',
+          { class: 'lf-vue-node-content-wrap' },
+          this.$slots?.default ? this.$slots.default() : [],
+        ),
+      )
+    }
+    return h(
+      'div',
+      {
+        class: 'lf-vue-node-container',
+        style: ` background: linear-gradient(180deg, ${titleColor} 0%, #FFFFFF 24px)`,
+      },
+      children,
+    )
+  },
+})

package/src/components/titleBar.ts

@@ -0,0 +1,189 @@
+import { defineComponent, h } from 'vue-demi'
+import { isNumber, isEmpty } from 'lodash-es'
+
+export const TitleBar = defineComponent({
+  name: 'LFVueNodeTitleBar',
+  props: {
+    node: { type: Object, required: true },
+    graph: { type: Object, required: true },
+  },
+  data() {
+    return {
+      showTooltip: false as boolean,
+    }
+  },
+  mounted() {
+    const trigger =
+      (this as any).node?.properties?.titleTrigger === 'hover'
+        ? 'hover'
+        : 'click'
+    const moreBtn: HTMLElement | null = (this.$refs as any).moreBtn || null
+    const tooltip: HTMLElement | null = (this.$refs as any).tooltip || null
+    const onDoc = (e: MouseEvent) => {
+      if (!tooltip || !moreBtn) return
+      const t = e.target as Node
+      if (this.showTooltip && !tooltip.contains(t) && !moreBtn.contains(t)) {
+        this.showTooltip = false
+      }
+    }
+    if (trigger === 'hover' && moreBtn && tooltip) {
+      moreBtn.addEventListener('mouseenter', () => {
+        this.showTooltip = true
+      })
+      moreBtn.addEventListener('mouseleave', () => {
+        this.showTooltip = false
+      })
+    } else if (trigger === 'click' && moreBtn) {
+      moreBtn.addEventListener('click', (e) => {
+        e.stopPropagation()
+        this.showTooltip = !this.showTooltip
+      })
+      document.addEventListener('click', onDoc)
+      ;(this as any).$once &&
+        (this as any).$once('hook:beforeDestroy', () => {
+          document.removeEventListener('click', onDoc)
+        })
+    }
+  },
+  methods: {
+    toggleExpand() {
+      const cur = !!this.node?.properties?._expanded
+      this.node?.setProperty('_expanded', !cur)
+    },
+    runAction(act: any) {
+      try {
+        typeof act?.callback === 'function' &&
+          act.callback((this as any).node, (this as any).graph)
+      } finally {
+        this.showTooltip = false
+      }
+    },
+  },
+  render(this: any) {
+    const props = this.node?.properties || {}
+    const icon = props._icon
+    const title = props._title || ''
+    const expanded = !!props._expanded
+    const _titleHeight = isNumber(props._titleHeight) ? props._titleHeight : 28
+    const actions = (this as any).node?.__actions || []
+    const showMoreAction = !isEmpty(actions)
+    console.log('showMoreAction', actions, props._titleActions)
+    const bar = h(
+      'div',
+      {
+        class: expanded
+          ? 'lf-vue-node-title lf-vue-node-title-expanded'
+          : 'lf-vue-node-title',
+        style: `height:${expanded ? _titleHeight : 18}px;`,
+        title,
+      },
+      [
+        h('div', { class: 'lf-vue-node-title-left' }, [
+          icon
+            ? h(
+                'i',
+                {
+                  class: 'lf-vue-node-title-icon',
+                },
+                icon,
+              )
+            : null,
+          h(
+            'span',
+            {
+              class: 'lf-vue-node-title-text',
+            },
+            title,
+          ),
+        ]),
+        h('div', { class: 'lf-vue-node-title-actions' }, [
+          h(
+            'button',
+            {
+              ref: 'expandBtn',
+              class: 'lf-vue-node-title-expand',
+              onClick: (e: MouseEvent) => {
+                console.log('expandClicked')
+                e.stopPropagation()
+                this.toggleExpand()
+              },
+              on: {
+                click: (e: MouseEvent) => {
+                  console.log('expandClicked')
+                  e.stopPropagation()
+                  this.toggleExpand()
+                },
+              },
+            },
+            [
+              h(
+                'svg',
+                {
+                  width: 14,
+                  height: 12,
+                  viewBox: '0 0 14 12',
+                  xmlns: 'http://www.w3.org/2000/svg',
+                  class: 'lf-vue-node-title-expand-icon',
+                  style: `transform:${expanded ? 'rotate(180deg)' : 'rotate(0deg)'};`,
+                },
+                [
+                  h('path', {
+                    d: 'M0.5201124,5.47988755C0.23603013,5.7639699,0.24460429,6.2271326,0.53900635,6.5005059L6.3195491,11.8681526C6.7032304,12.2244282,7.2967696,12.2244282,7.6804514,11.8681526L13.460994,6.5005059C13.755396,6.2271326,13.76397,5.7639699,13.479888,5.47988755C13.211547,5.21154633,12.779465,5.20215771,12.499721,5.45858961L7.3378625,10.1902928C7.1467018,10.3655233,6.8532982,10.3655233,6.6621375,10.1902928L1.5002797,5.45858967C1.2205358,5.20215771,0.78845364,5.21154633,0.5201124,5.47988755Z',
+                    fill: '#474747',
+                  }),
+                  h('path', {
+                    d: 'M0.5201124,0.47988755C0.23603013,0.7639699,0.24460429,1.2271326,0.53900635,1.5005059L6.3195491,6.8681526C6.7032304,7.2244282,7.2967696,7.2244282,7.6804514,6.8681526L13.460994,1.5005059C13.755396,1.2271326,13.76397,0.7639699,13.479888,0.47988755C13.211547,0.21154633,12.779465,0.20215771,12.499721,0.45858961L7.3378625,5.1902928C7.1467018,5.3655233,6.8532982,5.3655233,6.6621375,5.1902928L1.5002797,0.45858967C1.2205358,0.20215771,0.78845364,0.21154633,0.5201124,0.47988755Z',
+                    fill: '#9B9B9B',
+                  }),
+                ],
+              ),
+            ],
+          ),
+          showMoreAction &&
+            h(
+              'button',
+              {
+                ref: 'moreBtn',
+                class: 'lf-vue-node-title-more',
+              },
+              [h('i', { class: 'lf-vue-node-title-more-icon' }, '⋯')],
+            ),
+          h(
+            'div',
+            {
+              ref: 'tooltip',
+              class: 'lf-vue-node-title-tooltip',
+              style: `opacity:${this.showTooltip ? 1 : 0};pointer-events:${this.showTooltip ? 'auto' : 'none'};`,
+            },
+            [
+              h(
+                'div',
+                { class: 'lf-vue-node-title-tooltip-list' },
+                actions.map((act: any) =>
+                  h(
+                    'div',
+                    {
+                      class: 'lf-vue-node-title-tooltip-item',
+                      onClick: (e: MouseEvent) => {
+                        e.stopPropagation()
+                        this.runAction(act)
+                      },
+                      on: {
+                        click: (e: MouseEvent) => {
+                          e.stopPropagation()
+                          this.runAction(act)
+                        },
+                      },
+                    },
+                    act?.name || '',
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ]),
+      ],
+    )
+    return bar
+  },
+})

package/src/index.less

@@ -0,0 +1 @@
+@import url('./style/index.less');