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

package/lib/components/titleBar.js

@@ -0,0 +1,163 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TitleBar = void 0;
+var vue_demi_1 = require("vue-demi");
+var lodash_es_1 = require("lodash-es");
+exports.TitleBar = (0, vue_demi_1.defineComponent)({
+    name: 'LFVueNodeTitleBar',
+    props: {
+        node: { type: Object, required: true },
+        graph: { type: Object, required: true },
+    },
+    data: function () {
+        return {
+            showTooltip: false,
+        };
+    },
+    mounted: function () {
+        var _this = this;
+        var _a, _b;
+        var trigger = ((_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.titleTrigger) === 'hover'
+            ? 'hover'
+            : 'click';
+        var moreBtn = this.$refs.moreBtn || null;
+        var tooltip = this.$refs.tooltip || null;
+        var onDoc = function (e) {
+            if (!tooltip || !moreBtn)
+                return;
+            var t = e.target;
+            if (_this.showTooltip && !tooltip.contains(t) && !moreBtn.contains(t)) {
+                _this.showTooltip = false;
+            }
+        };
+        if (trigger === 'hover' && moreBtn && tooltip) {
+            moreBtn.addEventListener('mouseenter', function () {
+                _this.showTooltip = true;
+            });
+            moreBtn.addEventListener('mouseleave', function () {
+                _this.showTooltip = false;
+            });
+        }
+        else if (trigger === 'click' && moreBtn) {
+            moreBtn.addEventListener('click', function (e) {
+                e.stopPropagation();
+                _this.showTooltip = !_this.showTooltip;
+            });
+            document.addEventListener('click', onDoc);
+            this.$once &&
+                this.$once('hook:beforeDestroy', function () {
+                    document.removeEventListener('click', onDoc);
+                });
+        }
+    },
+    methods: {
+        toggleExpand: function () {
+            var _a, _b, _c;
+            var cur = !!((_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b._expanded);
+            (_c = this.node) === null || _c === void 0 ? void 0 : _c.setProperty('_expanded', !cur);
+        },
+        runAction: function (act) {
+            try {
+                typeof (act === null || act === void 0 ? void 0 : act.callback) === 'function' &&
+                    act.callback(this.node, this.graph);
+            }
+            finally {
+                this.showTooltip = false;
+            }
+        },
+    },
+    render: function () {
+        var _this = this;
+        var _a, _b;
+        var props = ((_a = this.node) === null || _a === void 0 ? void 0 : _a.properties) || {};
+        var icon = props._icon;
+        var title = props._title || '';
+        var expanded = !!props._expanded;
+        var _titleHeight = (0, lodash_es_1.isNumber)(props._titleHeight) ? props._titleHeight : 28;
+        var actions = ((_b = this.node) === null || _b === void 0 ? void 0 : _b.__actions) || [];
+        var showMoreAction = !(0, lodash_es_1.isEmpty)(actions);
+        console.log('showMoreAction', actions, props._titleActions);
+        var bar = (0, vue_demi_1.h)('div', {
+            class: expanded
+                ? 'lf-vue-node-title lf-vue-node-title-expanded'
+                : 'lf-vue-node-title',
+            style: "height:".concat(expanded ? _titleHeight : 18, "px;"),
+            title: title,
+        }, [
+            (0, vue_demi_1.h)('div', { class: 'lf-vue-node-title-left' }, [
+                icon
+                    ? (0, vue_demi_1.h)('i', {
+                        class: 'lf-vue-node-title-icon',
+                    }, icon)
+                    : null,
+                (0, vue_demi_1.h)('span', {
+                    class: 'lf-vue-node-title-text',
+                }, title),
+            ]),
+            (0, vue_demi_1.h)('div', { class: 'lf-vue-node-title-actions' }, [
+                (0, vue_demi_1.h)('button', {
+                    ref: 'expandBtn',
+                    class: 'lf-vue-node-title-expand',
+                    onClick: function (e) {
+                        console.log('expandClicked');
+                        e.stopPropagation();
+                        _this.toggleExpand();
+                    },
+                    on: {
+                        click: function (e) {
+                            console.log('expandClicked');
+                            e.stopPropagation();
+                            _this.toggleExpand();
+                        },
+                    },
+                }, [
+                    (0, vue_demi_1.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:".concat(expanded ? 'rotate(180deg)' : 'rotate(0deg)', ";"),
+                    }, [
+                        (0, vue_demi_1.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',
+                        }),
+                        (0, vue_demi_1.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 &&
+                    (0, vue_demi_1.h)('button', {
+                        ref: 'moreBtn',
+                        class: 'lf-vue-node-title-more',
+                    }, [(0, vue_demi_1.h)('i', { class: 'lf-vue-node-title-more-icon' }, '⋯')]),
+                (0, vue_demi_1.h)('div', {
+                    ref: 'tooltip',
+                    class: 'lf-vue-node-title-tooltip',
+                    style: "opacity:".concat(this.showTooltip ? 1 : 0, ";pointer-events:").concat(this.showTooltip ? 'auto' : 'none', ";"),
+                }, [
+                    (0, vue_demi_1.h)('div', { class: 'lf-vue-node-title-tooltip-list' }, actions.map(function (act) {
+                        return (0, vue_demi_1.h)('div', {
+                            class: 'lf-vue-node-title-tooltip-item',
+                            onClick: function (e) {
+                                e.stopPropagation();
+                                _this.runAction(act);
+                            },
+                            on: {
+                                click: function (e) {
+                                    e.stopPropagation();
+                                    _this.runAction(act);
+                                },
+                            },
+                        }, (act === null || act === void 0 ? void 0 : act.name) || '');
+                    })),
+                ]),
+            ]),
+        ]);
+        return bar;
+    },
+});
+//# sourceMappingURL=titleBar.js.map

package/lib/components/titleBar.js.map

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

package/lib/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/lib/index.less

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

package/lib/model.d.ts

@@ -1,4 +1,9 @@
-import LogicFlow, { HtmlNodeModel, IHtmlNodeProperties } from '@logicflow/core';
+import LogicFlow, { GraphModel, BaseNodeModel, HtmlNodeModel, IHtmlNodeProperties } from '@logicflow/core';
+import NodeConfig = LogicFlow.NodeConfig;
+export type NodeAction = {
+    name: string;
+    callback?: (node: BaseNodeModel, graph: GraphModel) => void;
+};
 export interface VueCustomProperties extends IHtmlNodeProperties {
     width?: number;
     height?: number;
@@ -7,10 +12,22 @@ export interface VueCustomProperties extends IHtmlNodeProperties {
     refY?: number;
     style?: LogicFlow.CommonTheme;
     textStyle?: LogicFlow.TextNodeTheme;
+    _showTitle?: boolean;
+    _title?: string;
+    _icon?: string;
+    _titleHeight?: number;
+    _expanded?: boolean;
 }
 export declare class VueNodeModel<P extends VueCustomProperties = VueCustomProperties> extends HtmlNodeModel<P> {
+    private __baseHeight?;
+    __actions?: {
+        name: string;
+        callback?: (node: BaseNodeModel, graph: GraphModel) => void;
+    }[];
+    constructor(data: NodeConfig<P>, graphModel: GraphModel);
     setAttributes(): void;
     getTextStyle(): LogicFlow.TextNodeTheme;
     getNodeStyle(): LogicFlow.CommonTheme;
+    setNodeActions(actions: NodeAction[]): void;
 }
 export default VueNodeModel;

package/lib/model.js

@@ -31,12 +31,42 @@ var core_1 = require("@logicflow/core");
 var lodash_es_1 = require("lodash-es");
 var VueNodeModel = /** @class */ (function (_super) {
     __extends(VueNodeModel, _super);
-    function VueNodeModel() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function VueNodeModel(data, graphModel) {
+        var _this = _super.call(this, data, graphModel) || this;
+        var properties = data.properties;
+        // 如果需要展示标题，则重新设置一个能把节点内容都展示出来的最小宽高
+        if (properties) {
+            var _a = properties._showTitle, _showTitle = _a === void 0 ? false : _a, _b = properties.style, style = _b === void 0 ? {} : _b;
+            if (_showTitle) {
+                _this.minWidth = 160;
+                _this.minHeight = 80;
+                _this.text.editable = false;
+                // 判断当前节点宽高是否小于最小宽高，如果是，强制设置为最小宽高
+                var newWidth = _this.width < _this.minWidth ? _this.minWidth : _this.width;
+                var newHeight = _this.height < _this.minHeight ? _this.minHeight : _this.height;
+                _this.setProperties(__assign(__assign({ _expanded: false }, properties), { style: __assign({ overflow: 'visible' }, (0, lodash_es_1.cloneDeep)(style)), width: newWidth + 8, height: newHeight + 8 }));
+                _this.setNodeActions([
+                    {
+                        name: '复制',
+                        callback: function (nodeModel, graphModel) {
+                            graphModel.cloneNode(nodeModel.id);
+                        },
+                    },
+                    {
+                        name: '删除',
+                        callback: function (nodeModel, graphModel) {
+                            graphModel.deleteNode(nodeModel.id);
+                        },
+                    },
+                ]);
+            }
+        }
+        console.log('nodeModel', _this);
+        return _this;
     }
     VueNodeModel.prototype.setAttributes = function () {
         // DONE: 解决 width、height、radius 为 0 时的问题
-        var _a = this.properties, width = _a.width, height = _a.height, radius = _a.radius;
+        var _a = this.properties, width = _a.width, height = _a.height, radius = _a.radius, _showTitle = _a._showTitle, _titleHeight = _a._titleHeight;
         if (!(0, lodash_es_1.isNil)(width)) {
             this.width = width;
         }
@@ -46,6 +76,12 @@ var VueNodeModel = /** @class */ (function (_super) {
         if (!(0, lodash_es_1.isNil)(radius)) {
             this.radius = radius;
         }
+        if (this.__baseHeight === undefined) {
+            this.__baseHeight = (0, lodash_es_1.isNil)(height) ? this.height : height;
+        }
+        var extra = _showTitle ? (_titleHeight !== null && _titleHeight !== void 0 ? _titleHeight : 28) : 0;
+        var base = (0, lodash_es_1.isNil)(height) ? this.__baseHeight : height;
+        this.height = base + extra;
     };
     VueNodeModel.prototype.getTextStyle = function () {
         var _a = this.properties, _b = _a.refX, refX = _b === void 0 ? 0 : _b, _c = _a.refY, refY = _c === void 0 ? 0 : _c, textStyle = _a.textStyle;
@@ -58,6 +94,10 @@ var VueNodeModel = /** @class */ (function (_super) {
         var customNodeStyle = this.properties.style;
         return __assign(__assign({}, style), ((0, lodash_es_1.cloneDeep)(customNodeStyle) || {}));
     };
+    VueNodeModel.prototype.setNodeActions = function (actions) {
+        this.__actions =
+            (0, lodash_es_1.isArray)(actions) && !(0, lodash_es_1.isEmpty)(actions) ? (0, lodash_es_1.cloneDeep)(actions) : [];
+    };
     return VueNodeModel;
 }(core_1.HtmlNodeModel));
 exports.VueNodeModel = VueNodeModel;

package/lib/model.js.map

@@ -1 +1 @@
-{"version":3,"file":"model.js","sourceRoot":"","sources":["../src/model.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wCAA+E;AAC/E,uCAA4C;AAiB5C;IAEU,gCAAgB;IAF1B;;IA2CA,CAAC;IAxCC,oCAAa,GAAb;QACE,wCAAwC;QAClC,IAAA,KAA4B,IAAI,CAAC,UAAU,EAAzC,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAoB,CAAA;QACjD,IAAI,CAAC,IAAA,iBAAK,EAAC,KAAK,CAAC,EAAE,CAAC;YAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QACpB,CAAC;QACD,IAAI,CAAC,IAAA,iBAAK,EAAC,MAAM,CAAC,EAAE,CAAC;YACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QACtB,CAAC;QACD,IAAI,CAAC,IAAA,iBAAK,EAAC,MAAM,CAAC,EAAE,CAAC;YACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QACtB,CAAC;IACH,CAAC;IAED,mCAAY,GAAZ;QACQ,IAAA,KAAoC,IAAI,CAAC,UAAU,EAAjD,YAAQ,EAAR,IAAI,mBAAG,CAAC,KAAA,EAAE,YAAQ,EAAR,IAAI,mBAAG,CAAC,KAAA,EAAE,SAAS,eAAoB,CAAA;QACzD,IAAM,KAAK,GAAG,gBAAK,CAAC,YAAY,WAAE,CAAA;QAElC,6BAA6B;QAC7B,sCACK,KAAK,GACL,CAAC,IAAA,qBAAS,EAAC,SAAS,CAAC,IAAI,EAAE,CAAC,KAC/B,SAAS,EAAE,yBAAkB,IAAI,cAAI,IAAI,MAAG,IAC7C;IACH,CAAC;IAED,mCAAY,GAAZ;QACE,IAAM,KAAK,GAAG,gBAAK,CAAC,YAAY,WAAE,CAAA;QAEhC,IAAO,eAAe,GAEpB,IAAI,CAAC,UAAU,MAFK,CAEL;QAEnB,6BACK,KAAK,GACL,CAAC,IAAA,qBAAS,EAAC,eAAe,CAAC,IAAI,EAAE,CAAC,EAGtC;IACH,CAAC;IACH,mBAAC;AAAD,CAAC,AA3CD,CAEU,oBAAa,GAyCtB;AA3CY,oCAAY;AA6CzB,kBAAe,YAAY,CAAA"}
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../src/model.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wCAKwB;AACxB,uCAA8D;AA+B9D;IAEU,gCAAgB;IAMxB,sBAAY,IAAmB,EAAE,UAAsB;QACrD,YAAA,MAAK,YAAC,IAAI,EAAE,UAAU,CAAC,SAAA;QACf,IAAA,UAAU,GAAK,IAAI,WAAT,CAAS;QAC3B,mCAAmC;QACnC,IAAI,UAAU,EAAE,CAAC;YACP,IAAA,KAAmC,UAAU,WAA3B,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAAE,KAAe,UAAU,MAAf,EAAV,KAAK,mBAAG,EAAE,KAAA,CAAe;YACrD,IAAI,UAAU,EAAE,CAAC;gBACf,KAAI,CAAC,QAAQ,GAAG,GAAG,CAAA;gBACnB,KAAI,CAAC,SAAS,GAAG,EAAE,CAAA;gBACnB,KAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;gBAC1B,iCAAiC;gBACjC,IAAM,QAAQ,GAAG,KAAI,CAAC,KAAK,GAAG,KAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAI,CAAC,KAAK,CAAA;gBACxE,IAAM,SAAS,GACb,KAAI,CAAC,MAAM,GAAG,KAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAI,CAAC,MAAM,CAAA;gBAE7D,KAAI,CAAC,aAAa,qBAChB,SAAS,EAAE,KAAK,IACb,UAAU,KACb,KAAK,aACH,QAAQ,EAAE,SAAS,IAChB,IAAA,qBAAS,EAAC,KAAK,CAAC,GAErB,KAAK,EAAE,QAAQ,GAAG,CAAC,EACnB,MAAM,EAAE,SAAS,GAAG,CAAC,IACrB,CAAA;gBACF,KAAI,CAAC,cAAc,CAAC;oBAClB;wBACE,IAAI,EAAE,IAAI;wBACV,QAAQ,EAAE,UAAC,SAAS,EAAE,UAAU;4BAC9B,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;wBACpC,CAAC;qBACF;oBACD;wBACE,IAAI,EAAE,IAAI;wBACV,QAAQ,EAAE,UAAC,SAAS,EAAE,UAAU;4BAC9B,UAAU,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;wBACrC,CAAC;qBACF;iBACF,CAAC,CAAA;YACJ,CAAC;QACH,CAAC;QACD,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,KAAI,CAAC,CAAA;;IAChC,CAAC;IACD,oCAAa,GAAb;QACE,wCAAwC;QAClC,IAAA,KAAsD,IAAI,CAAC,UAAU,EAAnE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAA,EAAE,YAAY,kBAAoB,CAAA;QAC3E,IAAI,CAAC,IAAA,iBAAK,EAAC,KAAK,CAAC,EAAE,CAAC;YAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QACpB,CAAC;QACD,IAAI,CAAC,IAAA,iBAAK,EAAC,MAAM,CAAC,EAAE,CAAC;YACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QACtB,CAAC;QACD,IAAI,CAAC,IAAA,iBAAK,EAAC,MAAM,CAAC,EAAE,CAAC;YACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QACtB,CAAC;QACD,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS,EAAE,CAAC;YACpC,IAAI,CAAC,YAAY,GAAG,IAAA,iBAAK,EAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAA;QAC1D,CAAC;QACD,IAAM,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QACnD,IAAM,IAAI,GAAG,IAAA,iBAAK,EAAC,MAAM,CAAC,CAAC,CAAC,CAAE,IAAI,CAAC,YAAuB,CAAC,CAAC,CAAC,MAAM,CAAA;QACnE,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;IAC5B,CAAC;IAED,mCAAY,GAAZ;QACQ,IAAA,KAAoC,IAAI,CAAC,UAAU,EAAjD,YAAQ,EAAR,IAAI,mBAAG,CAAC,KAAA,EAAE,YAAQ,EAAR,IAAI,mBAAG,CAAC,KAAA,EAAE,SAAS,eAAoB,CAAA;QACzD,IAAM,KAAK,GAAG,gBAAK,CAAC,YAAY,WAAE,CAAA;QAElC,6BAA6B;QAC7B,sCACK,KAAK,GACL,CAAC,IAAA,qBAAS,EAAC,SAAS,CAAC,IAAI,EAAE,CAAC,KAC/B,SAAS,EAAE,yBAAkB,IAAI,cAAI,IAAI,MAAG,IAC7C;IACH,CAAC;IAED,mCAAY,GAAZ;QACE,IAAM,KAAK,GAAG,gBAAK,CAAC,YAAY,WAAE,CAAA;QAEhC,IAAO,eAAe,GAEpB,IAAI,CAAC,UAAU,MAFK,CAEL;QAEnB,6BACK,KAAK,GACL,CAAC,IAAA,qBAAS,EAAC,eAAe,CAAC,IAAI,EAAE,CAAC,EAGtC;IACH,CAAC;IAED,qCAAc,GAAd,UAAe,OAAqB;QAClC,IAAI,CAAC,SAAS;YACZ,IAAA,mBAAO,EAAC,OAAO,CAAC,IAAI,CAAC,IAAA,mBAAO,EAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAA,qBAAS,EAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IACnE,CAAC;IACH,mBAAC;AAAD,CAAC,AAtGD,CAEU,oBAAa,GAoGtB;AAtGY,oCAAY;AAwGzB,kBAAe,YAAY,CAAA"}

package/lib/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/lib/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/lib/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";