新版本流程编辑器

flowgram-editor/src/form-components/form-content/index.tsx

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { FlowNodeRegistry } from '@flowgram.ai/free-layout-editor';
+
+import { useIsSidebar, useNodeRenderContext } from '../../hooks';
+import { FormTitleDescription, FormWrapper } from './styles';
+
+/**
+ * @param props
+ * @constructor
+ */
+export function FormContent(props: { children?: React.ReactNode }) {
+  const { node, expanded } = useNodeRenderContext();
+  const isSidebar = useIsSidebar();
+  const registry = node.getNodeRegistry<FlowNodeRegistry>();
+  return (
+    <FormWrapper>
+      <>
+        {isSidebar && <FormTitleDescription>{registry.info?.description}</FormTitleDescription>}
+        {(expanded || isSidebar) && props.children}
+      </>
+    </FormWrapper>
+  );
+}

flowgram-editor/src/form-components/form-content/styles.tsx

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import styled from 'styled-components';
+
+export const FormWrapper = styled.div`
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  background-color: rgb(251, 251, 251);
+  border-radius: 0 0 8px 8px;
+  padding: 0 12px 12px;
+`;
+
+export const FormTitleDescription = styled.div`
+  color: var(--semi-color-text-2);
+  font-size: 12px;
+  line-height: 20px;
+  padding: 0px 4px;
+  word-break: break-all;
+  white-space: break-spaces;
+`;