From c83d06b5930a839c0aff8a2572f83934dc9ffd36 Mon Sep 17 00:00:00 2001
From: liuyangxing <liuyangxing@bytedance.com>
Date: Mon, 17 Mar 2025 19:18:56 +0800
Subject: [PATCH] feat(container): accessing form render

---
 .../components/border/index.tsx               | 20 ++++++++++++++++---
 .../components/border/style.ts                |  2 +-
 .../components/container/index.tsx            | 12 +++++++++--
 .../components/form/index.tsx                 | 13 ++++++++++++
 .../components/form/style.ts                  |  6 ++++++
 .../components/header/index.tsx               | 13 ++++++------
 .../components/header/style.ts                |  5 +----
 .../container-node-render/components/index.ts |  1 +
 .../src/container-node-render/render.tsx      |  9 ++++++---
 9 files changed, 62 insertions(+), 19 deletions(-)
 create mode 100644 packages/plugins/free-container-plugin/src/container-node-render/components/form/index.tsx
 create mode 100644 packages/plugins/free-container-plugin/src/container-node-render/components/form/style.ts

diff --git a/packages/plugins/free-container-plugin/src/container-node-render/components/border/index.tsx b/packages/plugins/free-container-plugin/src/container-node-render/components/border/index.tsx
index b9a1aec0..73f3d55e 100644
--- a/packages/plugins/free-container-plugin/src/container-node-render/components/border/index.tsx
+++ b/packages/plugins/free-container-plugin/src/container-node-render/components/border/index.tsx
@@ -1,7 +1,21 @@
 import React, { type FC } from 'react';
 
+import { useNodeRender } from '@flowgram.ai/free-layout-core';
+import { FlowNodeTransformData } from '@flowgram.ai/document';
+
 import { ContainerNodeBorderStyle } from './style';
 
-export const ContainerNodeBorder: FC = () => (
-  <ContainerNodeBorderStyle className="container-node-border" />
-);
+export const ContainerNodeBorder: FC = () => {
+  const { node } = useNodeRender();
+  const transformData = node.getData(FlowNodeTransformData);
+  const topWidth = Math.max(transformData.padding.top - 50, 50);
+
+  return (
+    <ContainerNodeBorderStyle
+      className="container-node-border"
+      style={{
+        borderTopWidth: topWidth,
+      }}
+    />
+  );
+};
diff --git a/packages/plugins/free-container-plugin/src/container-node-render/components/border/style.ts b/packages/plugins/free-container-plugin/src/container-node-render/components/border/style.ts
index 6b8f8313..06e4a6ff 100644
--- a/packages/plugins/free-container-plugin/src/container-node-render/components/border/style.ts
+++ b/packages/plugins/free-container-plugin/src/container-node-render/components/border/style.ts
@@ -15,7 +15,7 @@ export const ContainerNodeBorderStyle = styled.div`
   border: 1px solid var(--coz-stroke-plus, rgba(6, 7, 9, 15%));
   border-color: var(--coz-bg-plus, rgb(249, 249, 249));
   border-style: solid;
-  border-width: 48px 8px 8px;
+  border-width: 8px;
   border-radius: 8px;
   box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 4%), 0 4px 12px 0 rgba(0, 0, 0, 2%);
 
diff --git a/packages/plugins/free-container-plugin/src/container-node-render/components/container/index.tsx b/packages/plugins/free-container-plugin/src/container-node-render/components/container/index.tsx
index 930b21d9..2d29dc93 100644
--- a/packages/plugins/free-container-plugin/src/container-node-render/components/container/index.tsx
+++ b/packages/plugins/free-container-plugin/src/container-node-render/components/container/index.tsx
@@ -1,13 +1,13 @@
 import React, { useEffect, useState, type FC, type ReactNode } from 'react';
 
-import { useNodeRender } from '@flowgram.ai/free-layout-core';
+import { useNodeRender, WorkflowNodePortsData } from '@flowgram.ai/free-layout-core';
 import { FlowNodeTransformData } from '@flowgram.ai/document';
 
 import { useContainerNodeRenderProps } from '../../hooks';
 import { ContainerNodeContainerStyle } from './style';
 
 interface IContainerNodeContainer {
-  children: ReactNode[];
+  children: ReactNode | ReactNode[];
 }
 
 export const ContainerNodeContainer: FC<IContainerNodeContainer> = ({ children }) => {
@@ -20,6 +20,13 @@ export const ContainerNodeContainer: FC<IContainerNodeContainer> = ({ children }
   const [width, setWidth] = useState(size.width);
   const [height, setHeight] = useState(size.height);
 
+  const updatePorts = () => {
+    requestAnimationFrame(() => {
+      const portsData = node.getData<WorkflowNodePortsData>(WorkflowNodePortsData);
+      portsData.updateDynamicPorts();
+    });
+  };
+
   useEffect(() => {
     const updateSize = () => {
       // 无子节点时
@@ -39,6 +46,7 @@ export const ContainerNodeContainer: FC<IContainerNodeContainer> = ({ children }
     updateSize();
     const dispose = transform.onDataChange(() => {
       updateSize();
+      updatePorts();
     });
     return () => dispose.dispose();
   }, [transform]);
diff --git a/packages/plugins/free-container-plugin/src/container-node-render/components/form/index.tsx b/packages/plugins/free-container-plugin/src/container-node-render/components/form/index.tsx
new file mode 100644
index 00000000..a460f315
--- /dev/null
+++ b/packages/plugins/free-container-plugin/src/container-node-render/components/form/index.tsx
@@ -0,0 +1,13 @@
+import React, { type FC } from 'react';
+
+import { useNodeRender } from '@flowgram.ai/free-layout-core';
+
+import { ContainerNodeFormStyle } from './style';
+
+export const ContainerNodeForm: FC = () => {
+  const { form } = useNodeRender();
+  if (!form) {
+    return null;
+  }
+  return <ContainerNodeFormStyle>{form.render()}</ContainerNodeFormStyle>;
+};
diff --git a/packages/plugins/free-container-plugin/src/container-node-render/components/form/style.ts b/packages/plugins/free-container-plugin/src/container-node-render/components/form/style.ts
new file mode 100644
index 00000000..805df877
--- /dev/null
+++ b/packages/plugins/free-container-plugin/src/container-node-render/components/form/style.ts
@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const ContainerNodeFormStyle = styled.div`
+  background-color: #fff;
+  border-radius: 8px 8px 0 0;
+`;
diff --git a/packages/plugins/free-container-plugin/src/container-node-render/components/header/index.tsx b/packages/plugins/free-container-plugin/src/container-node-render/components/header/index.tsx
index 078187a6..38cf0d50 100644
--- a/packages/plugins/free-container-plugin/src/container-node-render/components/header/index.tsx
+++ b/packages/plugins/free-container-plugin/src/container-node-render/components/header/index.tsx
@@ -1,14 +1,15 @@
-import React, { type FC } from 'react';
+import React, { ReactNode, type FC } from 'react';
 
 import { useNodeRender } from '@flowgram.ai/free-layout-core';
 
-import { useContainerNodeRenderProps } from '../../hooks';
 import { ContainerNodeHeaderStyle } from './style';
 
-export const ContainerNodeHeader: FC = () => {
-  const { startDrag, onFocus, onBlur } = useNodeRender();
+interface IContainerNodeHeader {
+  children?: ReactNode | ReactNode[];
+}
 
-  const { title } = useContainerNodeRenderProps();
+export const ContainerNodeHeader: FC<IContainerNodeHeader> = ({ children }) => {
+  const { startDrag, onFocus, onBlur } = useNodeRender();
 
   return (
     <ContainerNodeHeaderStyle
@@ -20,7 +21,7 @@ export const ContainerNodeHeader: FC = () => {
       onFocus={onFocus}
       onBlur={onBlur}
     >
-      <p className="container-node-title">{title}</p>
+      {children}
     </ContainerNodeHeaderStyle>
   );
 };
diff --git a/packages/plugins/free-container-plugin/src/container-node-render/components/header/style.ts b/packages/plugins/free-container-plugin/src/container-node-render/components/header/style.ts
index b1e35684..f2f61f50 100644
--- a/packages/plugins/free-container-plugin/src/container-node-render/components/header/style.ts
+++ b/packages/plugins/free-container-plugin/src/container-node-render/components/header/style.ts
@@ -1,8 +1,6 @@
 import styled from 'styled-components';
 
 export const ContainerNodeHeaderStyle = styled.div`
-  cursor: move;
-
   z-index: 0;
 
   display: flex;
@@ -11,8 +9,7 @@ export const ContainerNodeHeaderStyle = styled.div`
   justify-content: flex-start;
 
   width: 100%;
-  height: 48px;
-  padding: 16px;
+  height: auto;
 
   border-radius: 8px 8px 0 0;
 
diff --git a/packages/plugins/free-container-plugin/src/container-node-render/components/index.ts b/packages/plugins/free-container-plugin/src/container-node-render/components/index.ts
index a14b5834..62e684a8 100644
--- a/packages/plugins/free-container-plugin/src/container-node-render/components/index.ts
+++ b/packages/plugins/free-container-plugin/src/container-node-render/components/index.ts
@@ -3,3 +3,4 @@ export { ContainerNodeBackground } from './background';
 export { ContainerNodeContainer } from './container';
 export { ContainerNodeBorder } from './border';
 export { ContainerNodePorts } from './ports';
+export { ContainerNodeForm } from './form';
diff --git a/packages/plugins/free-container-plugin/src/container-node-render/render.tsx b/packages/plugins/free-container-plugin/src/container-node-render/render.tsx
index 61a23755..a5dd7c84 100644
--- a/packages/plugins/free-container-plugin/src/container-node-render/render.tsx
+++ b/packages/plugins/free-container-plugin/src/container-node-render/render.tsx
@@ -7,13 +7,16 @@ import {
   ContainerNodePorts,
   ContainerNodeBorder,
   ContainerNodeContainer,
+  ContainerNodeForm,
 } from './components';
 
-export const ContainerNodeRender: FC<ContainerNodeRenderProps> = (props) => (
+export const ContainerNodeRender: FC<ContainerNodeRenderProps> = () => (
   <ContainerNodeContainer>
-    <ContainerNodeBorder />
     <ContainerNodeBackground />
-    <ContainerNodeHeader />
+    <ContainerNodeBorder />
+    <ContainerNodeHeader>
+      <ContainerNodeForm />
+    </ContainerNodeHeader>
     <ContainerNodePorts />
   </ContainerNodeContainer>
 );