@logicflow/react-node-registry 1.2.0-alpha.2 → 1.2.0-alpha.4

package/lib/view.d.ts

@@ -2,12 +2,21 @@ import { Root } from 'react-dom/client';
 import { HtmlNode } from '@logicflow/core';
 export declare class ReactNodeView extends HtmlNode {
     root?: Root;
+    private containerEl?;
+    private __resizeObserver?;
+    private __resizeRafId?;
+    private __lastWidth?;
+    private __lastHeight?;
+    private __fallbackUnlisten?;
+    private __throttledUpdate;
     protected targetId(): string;
     componentWillUnmount(): void;
     setHtml(rootEl: SVGForeignObjectElement): void;
-    confirmUpdate(_rootEl: SVGForeignObjectElement): void;
     protected renderReactComponent(container: HTMLElement): void;
     protected unmountReactComponent(): void;
     unmount(): void;
+    private measureAndUpdate;
+    private startResizeObserver;
+    private stopResizeObserver;
 }
 export default ReactNodeView;

package/lib/view.js

@@ -19,13 +19,70 @@ exports.ReactNodeView = void 0;
 var react_1 = require("react");
 var client_1 = require("react-dom/client");
 var core_1 = require("@logicflow/core");
+var lodash_es_1 = require("lodash-es");
 var wrapper_1 = require("./wrapper");
 var portal_1 = require("./portal");
 var react_dom_1 = require("react-dom");
 var ReactNodeView = /** @class */ (function (_super) {
     __extends(ReactNodeView, _super);
     function ReactNodeView() {
-        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.containerEl;
+                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) {
+                console.error('measureAndUpdate error', err);
+            }
+        };
+        return _this;
+        // TODO: 确认是否需要重写 onMouseDown 方法
+        // handleMouseDown(ev: MouseEvent, x: number, y: number) {
+        //   const target = ev.target as Element
+        //   const tagName = target.tagName.toLowerCase()
+        //   if (tagName === 'input') {
+        //     const type = target.getAttribute('type')
+        //     if (
+        //       type == null ||
+        //       [
+        //         'text',
+        //         'password',
+        //         'number',
+        //         'email',
+        //         'search',
+        //         'tel',
+        //         'url',
+        //       ].includes(type)
+        //     ) {
+        //       return
+        //     }
+        //   }
+        //
+        //   console.log('pointer position, x:', x, 'y: ', y)
+        //   // TODO
+        //   // super.handleMouseDown(ev)
+        // }
     }
     ReactNodeView.prototype.targetId = function () {
         return "".concat(this.props.graphModel.flowId, ":").concat(this.props.model.id);
@@ -35,15 +92,23 @@ var ReactNodeView = /** @class */ (function (_super) {
         this.unmount();
     };
     ReactNodeView.prototype.setHtml = function (rootEl) {
-        var el = document.createElement('div');
-        el.className = 'custom-react-node-content';
-        this.renderReactComponent(el);
-        rootEl.appendChild(el);
-    };
-    ReactNodeView.prototype.confirmUpdate = function (_rootEl) {
-        // TODO: 如有需要，可以先通过继承的方式，自定义该节点的更新逻辑；我们后续会根据实际需求，丰富该功能
-        console.log('_rootEl', _rootEl);
+        var existed = rootEl.querySelector('.custom-react-node-content');
+        if (existed) {
+            this.containerEl = existed;
+        }
+        else {
+            var el = document.createElement('div');
+            el.className = 'custom-react-node-content';
+            this.containerEl = el;
+            this.renderReactComponent(el);
+            rootEl.appendChild(el);
+        }
+        this.startResizeObserver();
     };
+    // confirmUpdate(_rootEl: SVGForeignObjectElement) {
+    //   // TODO: 如有需要，可以先通过继承的方式，自定义该节点的更新逻辑；我们后续会根据实际需求，丰富该功能
+    //   console.log('_rootEl', _rootEl)
+    // }
     ReactNodeView.prototype.renderReactComponent = function (container) {
         this.unmountReactComponent();
         var _a = this.props, model = _a.model, graphModel = _a.graphModel;
@@ -67,6 +132,7 @@ var ReactNodeView = /** @class */ (function (_super) {
     };
     ReactNodeView.prototype.unmountReactComponent = function () {
         if (this.rootEl && this.root) {
+            this.stopResizeObserver();
             this.root.unmount();
             this.root = undefined;
             this.rootEl.innerHTML = '';
@@ -76,6 +142,54 @@ var ReactNodeView = /** @class */ (function (_super) {
     ReactNodeView.prototype.unmount = function () {
         this.unmountReactComponent();
     };
+    ReactNodeView.prototype.startResizeObserver = function () {
+        var _this = this;
+        var _a;
+        var root = this.containerEl;
+        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);
+                    _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) {
+            console.error('startResizeObserver error', err);
+        }
+    };
+    ReactNodeView.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) {
+            console.error('stopResizeObserver error', err);
+        }
+    };
     return ReactNodeView;
 }(core_1.HtmlNode));
 exports.ReactNodeView = ReactNodeView;

package/lib/view.js.map

@@ -1 +1 @@
-{"version":3,"file":"view.js","sourceRoot":"","sources":["../src/view.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,+BAAkD;AAClD,2CAAmD;AACnD,wCAA0C;AAC1C,qCAAmC;AACnC,mCAAiC;AACjC,uCAAwC;AAExC;IAAmC,iCAAQ;IAA3C;;IAuFA,CAAC;IApFW,gCAAQ,GAAlB;QACE,OAAO,UAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,cAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAE,CAAA;IACjE,CAAC;IAED,4CAAoB,GAApB;QACE,gBAAK,CAAC,oBAAoB,WAAE,CAAA;QAC5B,IAAI,CAAC,OAAO,EAAE,CAAA;IAChB,CAAC;IAED,+BAAO,GAAP,UAAQ,MAA+B;QACrC,IAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QACxC,EAAE,CAAC,SAAS,GAAG,2BAA2B,CAAA;QAE1C,IAAI,CAAC,oBAAoB,CAAC,EAAE,CAAC,CAAA;QAC7B,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,CAAA;IACxB,CAAC;IAED,qCAAa,GAAb,UAAc,OAAgC;QAC5C,sDAAsD;QACtD,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA;IACjC,CAAC;IAES,4CAAoB,GAA9B,UAA+B,SAAsB;QACnD,IAAI,CAAC,qBAAqB,EAAE,CAAA;QACtB,IAAA,KAAwB,IAAI,CAAC,KAAK,EAAhC,KAAK,WAAA,EAAE,UAAU,gBAAe,CAAA;QAExC,IAAI,SAAS,EAAE,CAAC;YACd,qBAAqB;YACrB,IAAM,IAAI,GAAG,IAAA,qBAAa,EAAC,iBAAO,EAAE;gBAClC,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,UAAU;aAClB,CAAC,CAAA;YAEF,IAAI,eAAM,CAAC,QAAQ,EAAE,EAAE,CAAC;gBACtB,YAAY;gBACZ,IAAM,MAAM,GAAG,IAAA,wBAAY,EAAC,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,CAAgB,CAAA;gBACrE,eAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,CAAC,CAAA;YACzC,CAAC;iBAAM,CAAC;gBACN,aAAa;gBACb,IAAI,CAAC,IAAI,GAAG,IAAA,mBAAU,EAAC,SAAS,CAAC,CAAA;gBACjC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;YACxB,CAAC;QACH,CAAC;IACH,CAAC;IAES,6CAAqB,GAA/B;QACE,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YAC7B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAA;YACnB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAA;YACrB,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,EAAE,CAAA;QAC5B,CAAC;IACH,CAAC;IAED,4CAA4C;IAC5C,+BAAO,GAAP;QACE,IAAI,CAAC,qBAAqB,EAAE,CAAA;IAC9B,CAAC;IA4BH,oBAAC;AAAD,CAAC,AAvFD,CAAmC,eAAQ,GAuF1C;AAvFY,sCAAa;AAyF1B,kBAAe,aAAa,CAAA"}
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../src/view.ts"],"names":[],"mappings":"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"}

package/lib/wrapper.d.ts

@@ -11,6 +11,6 @@ export declare class Wrapper extends PureComponent<IWrapperProps, IWrapperState>
     constructor(props: IWrapperProps);
     componentDidMount(): void;
     clone(elem: React.ReactElement): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+    render(): React.JSX.Element | null;
 }
 export default Wrapper;

package/lib/wrapper.js

@@ -37,11 +37,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
 var react_1 = __importStar(require("react"));
 var core_1 = require("@logicflow/core");
 var registry_1 = require("./registry");
+var Container_1 = __importDefault(require("./components/Container"));
 var Wrapper = /** @class */ (function (_super) {
     __extends(Wrapper, _super);
     function Wrapper(props) {
@@ -76,12 +80,13 @@ var Wrapper = /** @class */ (function (_super) {
         var content = registry_1.reactNodesMap[node.type];
         if (!content)
             return null;
+        var _a = (node.properties || {})._showTitle, _showTitle = _a === void 0 ? false : _a;
         var component = content.component;
         if (react_1.default.isValidElement(component)) {
-            return this.clone(component);
+            return _showTitle ? (react_1.default.createElement(Container_1.default, { node: this.props.node, graph: this.props.graph }, this.clone(component))) : (this.clone(component));
         }
         var FC = component;
-        return this.clone(react_1.default.createElement(FC, null));
+        return _showTitle ? (react_1.default.createElement(Container_1.default, { node: this.props.node, graph: this.props.graph }, this.clone(react_1.default.createElement(FC, null)))) : (this.clone(react_1.default.createElement(FC, null)));
     };
     return Wrapper;
 }(react_1.PureComponent));

package/lib/wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"wrapper.js","sourceRoot":"","sources":["../src/wrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA4C;AAC5C,wCAAsE;AACtE,uCAA0C;AAW1C;IAA6B,2BAA2C;IACtE,iBAAY,KAAoB;QAC9B,YAAA,MAAK,YAAC,KAAK,CAAC,SAAA;QACZ,KAAI,CAAC,KAAK,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,CAAA;;IAC1B,CAAC;IAED,mCAAiB,GAAjB;QAAA,iBAgBC;QAfC,iCAAiC;QAC3B,IAAA,KAAkB,IAAI,CAAC,KAAK,EAA1B,IAAI,UAAA,EAAE,KAAK,WAAe,CAAA;QAClC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,gBAAS,CAAC,sBAAsB,EAAE,UAAC,SAAS;YAC/D,IAAM,IAAI,GAAG,SAAS,CAAC,IAAgB,CAAA;YACvC,IAAM,OAAO,GAAG,wBAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAExC,IAAI,OAAO,IAAI,SAAS,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,EAAE,CAAC;gBAChC,IAAA,QAAM,GAAK,OAAO,OAAZ,CAAY;gBAE1B,4DAA4D;gBAC5D,IAAI,CAAC,QAAM,IAAI,IAAI,CAAC,IAAI,CAAC,UAAC,GAAG,IAAK,OAAA,QAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,EAApB,CAAoB,CAAC,EAAE,CAAC;oBACxD,KAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAI,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,CAAA;gBAC9C,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,uBAAK,GAAL,UAAM,IAAwB;QACtB,IAAA,KAAkB,IAAI,CAAC,KAAK,EAA1B,IAAI,UAAA,EAAE,KAAK,WAAe,CAAA;QAElC,OAAO,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ;YAClC,CAAC,CAAC,eAAK,CAAC,YAAY,CAAC,IAAI,CAAC;YAC1B,CAAC,CAAC,eAAK,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,IAAI,MAAA,EAAE,KAAK,OAAA,EAAE,CAAC,CAAA;IAC/C,CAAC;IAED,wBAAM,GAAN;QACU,IAAA,IAAI,GAAK,IAAI,CAAC,KAAK,KAAf,CAAe;QAC3B,IAAM,OAAO,GAAG,wBAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAExC,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAA;QAEjB,IAAA,SAAS,GAAK,OAAO,UAAZ,CAAY;QAC7B,IAAI,eAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC;YACpC,OAAO,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;QAC9B,CAAC;QACD,IAAM,EAAE,GAAG,SAAqB,CAAA;QAChC,OAAO,IAAI,CAAC,KAAK,CAAC,8BAAC,EAAE,OAAG,CAAC,CAAA;IAC3B,CAAC;IACH,cAAC;AAAD,CAAC,AA7CD,CAA6B,qBAAa,GA6CzC;AA7CY,0BAAO;AA+CpB,kBAAe,OAAO,CAAA"}
+{"version":3,"file":"wrapper.js","sourceRoot":"","sources":["../src/wrapper.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/react-node-registry",
-  "version": "1.2.0-alpha.2",
+  "version": "1.2.0-alpha.4",
   "description": "LogicFlow React Shape",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -18,7 +18,7 @@
   "peerDependencies": {
     "react": ">= 18.0.0",
     "react-dom": ">= 18.0.0",
-    "@logicflow/core": "2.2.0-alpha.2"
+    "@logicflow/core": "2.2.0-alpha.4"
   },
   "dependencies": {
     "@types/react": "^18.0.25",
@@ -26,7 +26,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "lodash-es": "^4.17.21",
-    "@logicflow/core": "2.2.0-alpha.2"
+    "@logicflow/core": "2.2.0-alpha.4"
   },
   "scripts": {
     "clean:turbo": "rss",

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/components/Container.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { BaseNodeModel, GraphModel } from '@logicflow/core'
+import TitleBar from './TitleBar'
+
+export type ContainerProps = {
+  node: BaseNodeModel
+  graph: GraphModel
+  children?: React.ReactNode
+}
+
+export const Container: React.FC<ContainerProps> = ({
+  node,
+  graph,
+  children,
+}) => {
+  const props: any = node?.properties || {}
+  const titleColor = props.style?.titleColor || '#E5EEFC'
+  const expanded = props._expanded === true
+
+  return (
+    <div
+      className="lf-vue-node-container"
+      style={{
+        background: `linear-gradient(180deg, ${titleColor} 0%, #FFFFFF 24px)`,
+      }}
+    >
+      {props._showTitle && <TitleBar node={node} graph={graph} />}
+      {expanded && <div className="lf-vue-node-content-wrap">{children}</div>}
+    </div>
+  )
+}
+
+export default Container

package/src/components/TitleBar.tsx

@@ -0,0 +1,149 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { BaseNodeModel, GraphModel } from '@logicflow/core'
+import { isNumber } from 'lodash-es'
+
+export type TitleBarProps = {
+  node: BaseNodeModel
+  graph: GraphModel
+}
+
+export const TitleBar: React.FC<TitleBarProps> = ({ node, graph }) => {
+  const props: any = node?.properties || {}
+  const icon = props._icon
+  const title = props._title || ''
+  const expanded = !!props._expanded
+  const titleHeight = isNumber(props._titleHeight) ? props._titleHeight : 28
+  const actProps = props._titleActions || []
+  const privActs = (node as any).__actions || []
+  const actions =
+    Array.isArray(privActs) && privActs.length > 0 ? privActs : actProps
+  const showMoreAction = Array.isArray(actions) && actions.length > 0
+  const trigger = props.titleTrigger === 'hover' ? 'hover' : 'click'
+  const [showTooltip, setShowTooltip] = useState(false)
+  const moreBtnRef = useRef<HTMLButtonElement | null>(null)
+  const tooltipRef = useRef<HTMLDivElement | null>(null)
+
+  const toggleExpand = () => {
+    const cur = !!node?.properties?._expanded
+    node?.setProperty('_expanded', !cur)
+  }
+
+  const runAction = (act: any) => {
+    const fn =
+      act?.callback ||
+      (privActs || []).find((a: any) => a?.name === act?.name)?.callback
+    typeof fn === 'function' && fn(node, graph)
+  }
+
+  useEffect(() => {
+    if (trigger === 'hover') {
+      const mb = moreBtnRef.current
+      const tt = tooltipRef.current
+      const onEnter = () => setShowTooltip(true)
+      const onLeave = () => setShowTooltip(false)
+      mb?.addEventListener('mouseenter', onEnter)
+      mb?.addEventListener('mouseleave', onLeave)
+      tt?.addEventListener('mouseenter', onEnter)
+      tt?.addEventListener('mouseleave', onLeave)
+      return () => {
+        mb?.removeEventListener('mouseenter', onEnter)
+        mb?.removeEventListener('mouseleave', onLeave)
+        tt?.removeEventListener('mouseenter', onEnter)
+        tt?.removeEventListener('mouseleave', onLeave)
+      }
+    }
+    const onDoc = (e: MouseEvent) => {
+      const mb = moreBtnRef.current
+      const tt = tooltipRef.current
+      const t = e.target as Node
+      if (showTooltip && mb && tt && !mb.contains(t) && !tt.contains(t)) {
+        setShowTooltip(false)
+      }
+    }
+    document.addEventListener('click', onDoc)
+    return () => document.removeEventListener('click', onDoc)
+  }, [trigger, showTooltip])
+
+  return (
+    <div
+      className={
+        expanded
+          ? 'lf-vue-node-title lf-vue-node-title-expanded'
+          : 'lf-vue-node-title'
+      }
+      style={{ height: expanded ? titleHeight : 18 }}
+      title={title}
+    >
+      <div className="lf-vue-node-title-left">
+        {icon ? <i className="lf-vue-node-title-icon">{icon}</i> : null}
+        <span className="lf-vue-node-title-text">{title}</span>
+      </div>
+      <div className="lf-vue-node-title-actions">
+        <button
+          className="lf-vue-node-title-expand"
+          onClick={(e) => {
+            e.stopPropagation()
+            toggleExpand()
+          }}
+        >
+          <svg
+            width={14}
+            height={12}
+            viewBox="0 0 14 12"
+            xmlns="http://www.w3.org/2000/svg"
+            className="lf-vue-node-title-expand-icon"
+            style={{ transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)' }}
+          >
+            <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"
+            />
+            <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"
+            />
+          </svg>
+        </button>
+        {showMoreAction && (
+          <button
+            ref={moreBtnRef}
+            className="lf-vue-node-title-more"
+            onClick={(e) => {
+              e.stopPropagation()
+              if (trigger === 'click') setShowTooltip(!showTooltip)
+            }}
+          >
+            <i className="lf-vue-node-title-more-icon">⋯</i>
+          </button>
+        )}
+        {showMoreAction && (
+          <div
+            ref={tooltipRef}
+            className="lf-vue-node-title-tooltip"
+            style={{
+              opacity: showTooltip ? 1 : 0,
+              pointerEvents: showTooltip ? 'auto' : 'none',
+            }}
+          >
+            <div className="lf-vue-node-title-tooltip-list">
+              {actions.map((act: any, idx: number) => (
+                <div
+                  key={idx}
+                  className="lf-vue-node-title-tooltip-item"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    runAction(act)
+                  }}
+                >
+                  {act?.name || ''}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default TitleBar

package/src/index.less

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

package/src/model.ts

@@ -1,5 +1,17 @@
-import LogicFlow, { HtmlNodeModel, IHtmlNodeProperties } from '@logicflow/core'
-import { cloneDeep } from 'lodash-es'
+import LogicFlow, {
+  HtmlNodeModel,
+  IHtmlNodeProperties,
+  BaseNodeModel,
+  GraphModel,
+} from '@logicflow/core'
+import { cloneDeep, isNil, isArray, isEmpty } from 'lodash-es'
+
+import NodeConfig = LogicFlow.NodeConfig
+
+export type NodeAction = {
+  name: string
+  callback?: (node: BaseNodeModel, graph: GraphModel) => void
+}
 
 export interface ReactCustomProperties extends IHtmlNodeProperties {
   // 形状属性
@@ -14,22 +26,81 @@ export interface ReactCustomProperties extends IHtmlNodeProperties {
   // 样式属性
   style?: LogicFlow.CommonTheme
   textStyle?: LogicFlow.TextNodeTheme
+  // 标题配置
+  _showTitle?: boolean
+  _title?: string
+  _icon?: string
+  _titleHeight?: number
+  _expanded?: boolean
 }
 
 export class ReactNodeModel<
   P extends ReactCustomProperties = ReactCustomProperties,
 > extends HtmlNodeModel<P> {
+  private __baseHeight?: number
+  public __actions?: {
+    name: string
+    callback?: (node: BaseNodeModel, graph: GraphModel) => void
+  }[]
+  constructor(data: NodeConfig<P>, graphModel: GraphModel) {
+    super(data, graphModel)
+    const { properties } = data
+    if (properties) {
+      const { _showTitle = false, style = {} } = properties
+      if (_showTitle) {
+        this.minWidth = 160
+        this.minHeight = 80
+        this.text.editable = false
+        // 判断当前节点宽高是否小于最小宽高，如果是，强制设置为最小宽高
+        const newWidth = this.width < this.minWidth ? this.minWidth : this.width
+        const newHeight =
+          this.height < this.minHeight ? this.minHeight : this.height
+
+        this.setProperties({
+          _expanded: false,
+          ...properties,
+          style: {
+            overflow: 'visible',
+            ...cloneDeep(style),
+          },
+          width: newWidth,
+          height: newHeight,
+        })
+        this.setNodeActions([
+          {
+            name: '复制',
+            callback: (nodeModel: BaseNodeModel, graphModel: GraphModel) => {
+              graphModel.cloneNode(nodeModel.id)
+            },
+          },
+          {
+            name: '删除',
+            callback: (nodeModel: BaseNodeModel, graphModel: GraphModel) => {
+              graphModel.deleteNode(nodeModel.id)
+            },
+          },
+        ])
+      }
+    }
+  }
+
   setAttributes() {
-    const { width, height, radius } = this.properties
-    if (width) {
+    const { width, height, radius, _showTitle, _titleHeight } = this.properties
+    if (!isNil(width)) {
       this.width = width
     }
-    if (height) {
+    if (!isNil(height)) {
       this.height = height
     }
-    if (radius) {
+    if (!isNil(radius)) {
       this.radius = radius
     }
+    if (this.__baseHeight === undefined) {
+      this.__baseHeight = isNil(height) ? this.height : height
+    }
+    const extra = _showTitle ? (_titleHeight ?? 28) : 0
+    const base = isNil(height) ? this.__baseHeight : height
+    this.height = base + extra
   }
 
   getTextStyle(): LogicFlow.TextNodeTheme {
@@ -59,6 +130,11 @@ export class ReactNodeModel<
       // ry: radius,
     }
   }
+
+  setNodeActions(actions: NodeAction[]) {
+    this.__actions =
+      isArray(actions) && !isEmpty(actions) ? cloneDeep(actions) : []
+  }
 }
 
 export default ReactNodeModel