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 = () => (
-
-);
+export const ContainerNodeBorder: FC = () => {
+ const { node } = useNodeRender();
+ const transformData = node.getData(FlowNodeTransformData);
+ const topWidth = Math.max(transformData.padding.top - 50, 50);
+
+ return (
+
+ );
+};
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 = ({ children }) => {
@@ -20,6 +20,13 @@ export const ContainerNodeContainer: FC = ({ children }
const [width, setWidth] = useState(size.width);
const [height, setHeight] = useState(size.height);
+ const updatePorts = () => {
+ requestAnimationFrame(() => {
+ const portsData = node.getData(WorkflowNodePortsData);
+ portsData.updateDynamicPorts();
+ });
+ };
+
useEffect(() => {
const updateSize = () => {
// 无子节点时
@@ -39,6 +46,7 @@ export const ContainerNodeContainer: FC = ({ 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 {form.render()};
+};
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 = ({ children }) => {
+ const { startDrag, onFocus, onBlur } = useNodeRender();
return (
{
onFocus={onFocus}
onBlur={onBlur}
>
- {title}
+ {children}
);
};
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 = (props) => (
+export const ContainerNodeRender: FC = () => (
-
-
+
+
+
+
);