diff --git a/packages/designer/src/sidebar/outline-panel/components-tree.tsx b/packages/designer/src/sidebar/outline-panel/components-tree.tsx
index 6a2dfc3..b64d4b8 100644
--- a/packages/designer/src/sidebar/outline-panel/components-tree.tsx
+++ b/packages/designer/src/sidebar/outline-panel/components-tree.tsx
@@ -40,6 +40,17 @@ const filedNames = {
   children: 'children',
 };
 
+const getNodeKeys = (data: TangoViewNodeDataType[]) => {
+  const ids: string[] = [];
+  data?.forEach((node) => {
+    ids.push(node.id);
+    if (node.children) {
+      ids.push(...getNodeKeys(node.children));
+    }
+  });
+  return ids;
+};
+
 const OutlineTreeNode: React.FC<any> = observer(({ node }: { node: TangoViewNodeDataType }) => {
   const workspace = useWorkspace();
   const sandboxQuery = useSandboxQuery();
@@ -124,7 +135,7 @@ export const ComponentsTree = observer(() => {
         }}
         blockNode
         autoExpandParent
-        defaultExpandAll
+        expandedKeys={getNodeKeys(nodesTree)}
         draggable
         onDragStart={(data) => {
           const prototype = workspace.componentPrototypes.get(data.node.component);
diff --git a/tsconfig.json b/tsconfig.json
index 8d20bf9..9411ddb 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,6 +11,7 @@
       "@music163/tango-setting-form": ["packages/setting-form/src/index.ts"],
       "@music163/tango-helpers": ["packages/helpers/src/index.ts"],
       "@music163/tango": ["packages/designer/src/index.ts"],
+      "@music163/tango-ui": ["packages/ui/src/index.ts"],
     }
   }
 }