feat(free-container-plugin): support customizable tip text and React elements (#355)

Co-authored-by: husky-dot <xiaozhi@xiaozhideMacBook-Pro.local>

packages/plugins/free-container-plugin/src/sub-canvas/components/render/index.tsx

@@ -10,9 +10,15 @@ interface ISubCanvasRender {
   offsetY?: number;
   className?: string;
   style?: CSSProperties;
+  tipText?: string | React.ReactNode;
 }
 
-export const SubCanvasRender: FC<ISubCanvasRender> = ({ className, style, offsetY = 0 }) => {
+export const SubCanvasRender: FC<ISubCanvasRender> = ({
+  className,
+  style,
+  offsetY = 0,
+  tipText,
+}) => {
   const nodeSize = useNodeSize();
   const nodeHeight = nodeSize?.height ?? 0;
 
@@ -32,7 +38,7 @@ export const SubCanvasRender: FC<ISubCanvasRender> = ({ className, style, offset
     >
       <SubCanvasBorder>
         <SubCanvasBackground />
-        <SubCanvasTips />
+        <SubCanvasTips tipText={tipText} />
       </SubCanvasBorder>
     </SubCanvasRenderStyle>
   );

packages/plugins/free-container-plugin/src/sub-canvas/components/tips/index.tsx

@@ -5,9 +5,15 @@ import { SubCanvasTipsStyle } from './style';
 import { isMacOS } from './is-mac-os';
 import { IconClose } from './icon-close';
 
-export const SubCanvasTips = () => {
+interface SubCanvasTipsProps {
+  tipText?: string | React.ReactNode;
+}
+
+export const SubCanvasTips = ({ tipText }: SubCanvasTipsProps) => {
   const { visible, close, closeForever } = useControlTips();
 
+  const displayContent = tipText || `Hold ${isMacOS ? 'Cmd ⌘' : 'Ctrl'} to drag node out`;
+
   if (!visible) {
     return null;
   }
@@ -15,7 +21,11 @@ export const SubCanvasTips = () => {
     <SubCanvasTipsStyle className={'sub-canvas-tips'}>
       <div className="container">
         <div className="content">
-          <p className="text">{`Hold ${isMacOS ? 'Cmd ⌘' : 'Ctrl'} to drag node out`}</p>
+          {typeof displayContent === 'string' ? (
+            <p className="text">{displayContent}</p>
+          ) : (
+            <div className="custom-content">{displayContent}</div>
+          )}
           <div
             className="space"
             style={{

packages/plugins/free-container-plugin/src/sub-canvas/components/tips/style.ts

@@ -31,6 +31,23 @@ export const SubCanvasTipsStyle = styled.div`
         text-overflow: ellipsis;
       }
 
+      .custom-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+
+        /* 为自定义内容提供默认样式，但允许覆盖 */
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        color: rgba(15, 21, 40, 82%);
+
+        /* 确保自定义内容不会超出容器 */
+        overflow: hidden;
+      }
+
       .space {
         width: 128px;
       }