diff --git a/src/pages/flowEditor/index.tsx b/src/pages/flowEditor/index.tsx
index fe239b2..933d17a 100644
--- a/src/pages/flowEditor/index.tsx
+++ b/src/pages/flowEditor/index.tsx
@@ -66,8 +66,9 @@ const FlowEditor: React.FC = () => {
 
       if (!reactFlowInstance) return;
 
-      const type = event.dataTransfer.getData('application/reactflow');
-      if (typeof type === 'undefined' || !type) {
+      const callBack = event.dataTransfer.getData('application/reactflow');
+      const nodeData = JSON.parse(callBack);
+      if (typeof nodeData.nodeType === 'undefined' || !nodeData.nodeType) {
         return;
       }
 
@@ -77,13 +78,16 @@ const FlowEditor: React.FC = () => {
       });
 
       const newNode = {
-        id: `${type}-${Date.now()}`,
-        type,
+        id: `${nodeData.nodeType}-${Date.now()}`,
+        type: nodeData.nodeType,
         position,
-        data: { label: `${type} node` }
+        data: { ...nodeData.data, title: nodeData.nodeName, type: nodeData.nodeType }
       };
 
+      console.log('newNode:', newNode);
+
       setNodes((nds) => nds.concat(newNode));
+      console.log('nodes:', nodes);
     },
     [reactFlowInstance]
   );
diff --git a/src/pages/flowEditor/node/draggableNode/DraggableNode.tsx b/src/pages/flowEditor/node/draggableNode/DraggableNode.tsx
index 77a6fb1..e680d8a 100644
--- a/src/pages/flowEditor/node/draggableNode/DraggableNode.tsx
+++ b/src/pages/flowEditor/node/draggableNode/DraggableNode.tsx
@@ -4,6 +4,7 @@ import styles from '@/pages/flowEditor/node/style/base.module.less';
 import NodeContent from '@/pages/flowEditor/components/nodeContent';
 
 const DraggableNode = ({ data, id }: { data: any; id: string }) => {
+  console.log(data, id );
   const title = data.title || '任务节点';
   
   // 获取节点选中状态 - 适配React Flow v12 API
diff --git a/src/pages/flowEditor/node/startNode/StartNode.tsx b/src/pages/flowEditor/node/startNode/StartNode.tsx
index ccafa6a..3aaf18a 100644
--- a/src/pages/flowEditor/node/startNode/StartNode.tsx
+++ b/src/pages/flowEditor/node/startNode/StartNode.tsx
@@ -18,9 +18,9 @@ interface StartNodeData {
 
 const StartNode = ({ data, id }: { data: StartNodeData; id: string }) => {
   const title = data.title || '开始';
-  
+
   // 获取节点选中状态 - 适配React Flow v12 API
-  const isSelected = useStore((state) => 
+  const isSelected = useStore((state) =>
     state.nodeLookup.get(id)?.selected || false
   );
 
diff --git a/src/pages/flowEditor/sideBar/config/localNodeData.ts b/src/pages/flowEditor/sideBar/config/localNodeData.ts
new file mode 100644
index 0000000..33f91a7
--- /dev/null
+++ b/src/pages/flowEditor/sideBar/config/localNodeData.ts
@@ -0,0 +1,46 @@
+const defaultParameters = {
+  apiIns: [{
+    name: 'start',
+    desc: '',
+    dataType: '',
+    defaultValue: ''
+  }],
+  apiOuts: [{
+    name: 'done',
+    desc: '',
+    dataType: '',
+    defaultValue: ''
+  }],
+  dataIns: [],
+  dataOuts: []
+};
+
+// 定义节点基本信息
+const nodeDefinitions = [
+  { nodeName: '条件选择', nodeType: 'CONDITION', nodeGroup: 'common' },
+  { nodeName: '与门', nodeType: 'AND', nodeGroup: 'common' },
+  { nodeName: '或门', nodeType: 'OR', nodeGroup: 'common' },
+  { nodeName: '等待', nodeType: 'WAIT', nodeGroup: 'common' },
+  { nodeName: '循环', nodeType: 'LOOP', nodeGroup: 'common' },
+  { nodeName: '周期', nodeType: 'CYCLE', nodeGroup: 'common' },
+  { nodeName: '事件接收', nodeType: 'EVENTLISTENE', nodeGroup: 'common' },
+  { nodeName: '事件发送', nodeType: 'EVENTSEND', nodeGroup: 'common' },
+  { nodeName: 'JSON转字符串', nodeType: 'JSON2STR', nodeGroup: 'common' },
+  { nodeName: '字符串转JSON', nodeType: 'STR2JSON', nodeGroup: 'common' },
+  { nodeName: 'JSON封装', nodeType: 'JSON_CONVERT', nodeGroup: 'common' },
+  { nodeName: '结果展示', nodeType: 'RESULT', nodeGroup: 'common' },
+  { nodeName: '图片展示', nodeType: 'IMAGE', nodeGroup: 'common' },
+  { nodeName: '代码编辑器', nodeType: 'CODE', nodeGroup: 'common' },
+  { nodeName: 'REST调用', nodeType: 'REST', nodeGroup: 'common' },
+  { nodeName: '任务节点', nodeType: 'draggable', nodeGroup: 'common' }
+];
+
+// 通过映射生成完整的节点数据数组
+export const localNodeData = nodeDefinitions.map(({ nodeName, nodeType, nodeGroup }) => ({
+  nodeName,
+  nodeType,
+  nodeGroup,
+  data: {
+    parameters: { ...defaultParameters }
+  }
+}));
diff --git a/src/pages/flowEditor/sideBar/sideBar.tsx b/src/pages/flowEditor/sideBar/sideBar.tsx
index 0669a75..f54ad7f 100644
--- a/src/pages/flowEditor/sideBar/sideBar.tsx
+++ b/src/pages/flowEditor/sideBar/sideBar.tsx
@@ -1,39 +1,42 @@
 import React from 'react';
+import styles from './style/style.module.less';
 import { Card } from '@arco-design/web-react';
+import { Collapse } from '@arco-design/web-react';
+import { localNodeData } from './config/localNodeData';
 
-const onDragStart = (event: React.DragEvent, nodeType: string) => {
-  event.dataTransfer.setData('application/reactflow', nodeType);
+const CollapseItem = Collapse.Item;
+
+const onDragStart = (event: React.DragEvent, nodeData: any) => {
+  event.dataTransfer.setData('application/reactflow', JSON.stringify(nodeData));
   event.dataTransfer.effectAllowed = 'move';
 };
 
 const SideBar: React.FC = () => {
   return (
-    <div style={{
-      width: 200,
-      padding: 10,
-      borderRight: '1px solid #eee',
-      backgroundColor: '#fafafa'
-    }}>
-      <div style={{ marginBottom: 20 }}>
+    <div className={styles['side-bar-container']}>
+      <div className={styles['title']}>
         <h3>节点库</h3>
         <p>将节点拖拽到画布中</p>
       </div>
 
-      <Card
-        style={{ marginBottom: 10, cursor: 'grab' }}
-        draggable
-        onDragStart={(event) => onDragStart(event, 'draggable')}
-      >
-        <div>任务节点 1</div>
-      </Card>
-
-      <Card
-        style={{ marginBottom: 10, cursor: 'grab' }}
-        draggable
-        onDragStart={(event) => onDragStart(event, 'textUpdater')}
-      >
-        <div>文本节点</div>
-      </Card>
+      <Collapse bordered={false} accordion>
+        <CollapseItem header="应用组件" name="1">
+        </CollapseItem>
+        <CollapseItem header="复合组件" name="2">
+        </CollapseItem>
+        <CollapseItem header="系统组件" name="3">
+          {localNodeData.map((item, index) => (
+            <Card
+              key={index}
+              style={{ marginBottom: 5, cursor: 'grab' }}
+              draggable
+              onDragStart={(event) => onDragStart(event, item)}
+            >
+              <div>{item.nodeName}</div>
+            </Card>
+          ))}
+        </CollapseItem>
+      </Collapse>
     </div>
   );
 };
diff --git a/src/pages/flowEditor/sideBar/style/style.module.less b/src/pages/flowEditor/sideBar/style/style.module.less
new file mode 100644
index 0000000..bb038d8
--- /dev/null
+++ b/src/pages/flowEditor/sideBar/style/style.module.less
@@ -0,0 +1,16 @@
+.side-bar-container {
+  width: 200px;
+  height: 95%;
+  overflow-y: auto;
+  padding: 10px;
+  border-right: 1px solid #eee;
+  background-color: #fafafa;
+
+  .title {
+    margin-bottom: 20px;
+  }
+
+  :global(.arco-collapse-item-content-box) {
+    padding: 4px 6px;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/flowEditor/test/exampleFlowData.ts b/src/pages/flowEditor/test/exampleFlowData.ts
index 6fa67cc..6f5d290 100644
--- a/src/pages/flowEditor/test/exampleFlowData.ts
+++ b/src/pages/flowEditor/test/exampleFlowData.ts
@@ -2,32 +2,32 @@ export const exampleFlowData = {
   'main': {
     'id': 'main',
     'lineConfigs': [
-      {
-        'id': '606f71c3-2051-4775-92a0-835d75b9ab91',
-        'lineType': 'API',
-        'next': {
-          'endpointId': 'start',
-          'nodeId': 'node_49'
-        },
-        'prev': {
-          'endpointId': 'start',
-          'nodeId': 'start'
-        },
-        'x6': '{"vertices":[]}'
-      },
-      {
-        'id': '480b362e-45c6-4d9f-b55c-532703ff64ec',
-        'lineType': 'API',
-        'next': {
-          'endpointId': 'end',
-          'nodeId': 'end'
-        },
-        'prev': {
-          'endpointId': 'done',
-          'nodeId': 'node_49'
-        },
-        'x6': '{"vertices":[]}'
-      }
+      // {
+      //   'id': '606f71c3-2051-4775-92a0-835d75b9ab91',
+      //   'lineType': 'API',
+      //   'next': {
+      //     'endpointId': 'start',
+      //     'nodeId': 'node_49'
+      //   },
+      //   'prev': {
+      //     'endpointId': 'start',
+      //     'nodeId': 'start'
+      //   },
+      //   'x6': '{"vertices":[]}'
+      // },
+      // {
+      //   'id': '480b362e-45c6-4d9f-b55c-532703ff64ec',
+      //   'lineType': 'API',
+      //   'next': {
+      //     'endpointId': 'end',
+      //     'nodeId': 'end'
+      //   },
+      //   'prev': {
+      //     'endpointId': 'done',
+      //     'nodeId': 'node_49'
+      //   },
+      //   'x6': '{"vertices":[]}'
+      // }
     ],
     'name': '',
     'nodeConfigs': [
@@ -44,47 +44,47 @@ export const exampleFlowData = {
         'nodeName': '',
         'x6': '{"position":{"x":-250,"y":0}}'
       },
-      {
-        'apiId': '',
-        'component': {
-          'compIdentifier': 'admin_connect_test',
-          'compInstanceIdentifier': 'admin_connect_test',
-          'customDef': '',
-          'type': 'BASIC'
-        },
-        'dataIns': [
-          {
-            'arrayType': null,
-            'dataType': null,
-            'defaultValue': null,
-            'desc': '',
-            'id': 'input'
-          }
-        ],
-        'dataOfPrevNodeMap': {},
-        'dataOuts': [
-          {
-            'arrayType': null,
-            'dataType': null,
-            'defaultValue': null,
-            'desc': '',
-            'id': 'output'
-          },
-          {
-            'arrayType': null,
-            'dataType': 'STRING',
-            'defaultValue': null,
-            'desc': '返回数据',
-            'id': 'returnData'
-          }
-        ],
-        'defaultValues': [],
-        'description': '',
-        'joinLines': {},
-        'nodeId': 'node_49',
-        'nodeName': '连接test',
-        'x6': '{"position":{"x":-90,"y":-60}}'
-      },
+      // {
+      //   'apiId': '',
+      //   'component': {
+      //     'compIdentifier': 'admin_connect_test',
+      //     'compInstanceIdentifier': 'admin_connect_test',
+      //     'customDef': '',
+      //     'type': 'BASIC'
+      //   },
+      //   'dataIns': [
+      //     {
+      //       'arrayType': null,
+      //       'dataType': null,
+      //       'defaultValue': null,
+      //       'desc': '',
+      //       'id': 'input'
+      //     }
+      //   ],
+      //   'dataOfPrevNodeMap': {},
+      //   'dataOuts': [
+      //     {
+      //       'arrayType': null,
+      //       'dataType': null,
+      //       'defaultValue': null,
+      //       'desc': '',
+      //       'id': 'output'
+      //     },
+      //     {
+      //       'arrayType': null,
+      //       'dataType': 'STRING',
+      //       'defaultValue': null,
+      //       'desc': '返回数据',
+      //       'id': 'returnData'
+      //     }
+      //   ],
+      //   'defaultValues': [],
+      //   'description': '',
+      //   'joinLines': {},
+      //   'nodeId': 'node_49',
+      //   'nodeName': '连接test',
+      //   'x6': '{"position":{"x":-90,"y":-60}}'
+      // },
       {
         'apiId': '',
         'component': null,
@@ -96,7 +96,7 @@ export const exampleFlowData = {
         'joinLines': {},
         'nodeId': 'end',
         'nodeName': '',
-        'x6': '{"position":{"x":250,"y":25}}'
+        'x6': '{"position":{"x":500,"y":0}}'
       }
     ]
   }