diff --git a/packages/editor-skeleton/src/layouts/left-area.tsx b/packages/editor-skeleton/src/layouts/left-area.tsx
index 6f8831954..7fb10e81a 100644
--- a/packages/editor-skeleton/src/layouts/left-area.tsx
+++ b/packages/editor-skeleton/src/layouts/left-area.tsx
@@ -25,7 +25,11 @@ class Contents extends Component<{ area: Area }> {
     const { area } = this.props;
     const top: any[] = [];
     const bottom: any[] = [];
-    area.container.items.forEach((item) => {
+    area.container.items.sort((a, b) => {
+      const index1 = a.config?.index || 0;
+      const index2 = b.config?.index || 0;
+      return index1 === index2 ? 0 : (index1 > index2 ? 1 : -1);
+    }).forEach((item) => {
       const content = <div key={`left-area-${item.name}`}>{item.content}</div>;
       if (item.align === 'bottom') {
         bottom.push(content);