diff --git a/front-end/h5/src/components/core/editor/left-panel/index.js b/front-end/h5/src/components/core/editor/left-panel/index.js
index 6a91a3bc..f01fc955 100644
--- a/front-end/h5/src/components/core/editor/left-panel/index.js
+++ b/front-end/h5/src/components/core/editor/left-panel/index.js
@@ -1,5 +1,6 @@
 import RenderShortcutsPanel from './shortcuts-panel/index'
 import RenderPageManager from './page-manager/index'
+import RenderPageTree from './page-tree/index'
 
 export default {
   name: 'EditorLeftPanel',
@@ -16,6 +17,9 @@ export default {
           <a-tab-pane key='page-manager' tab={this.$t('editor.sidebar.pages')}>
             <RenderPageManager />
           </a-tab-pane>
+          <a-tab-pane key='page-tree' tab={this.$t('editor.sidebar.tree')}>
+            <RenderPageTree />
+          </a-tab-pane>
         </a-tabs>
       </a-layout-sider>
     )
diff --git a/front-end/h5/src/components/core/editor/left-panel/page-tree/index.vue b/front-end/h5/src/components/core/editor/left-panel/page-tree/index.vue
new file mode 100644
index 00000000..168ced9a
--- /dev/null
+++ b/front-end/h5/src/components/core/editor/left-panel/page-tree/index.vue
@@ -0,0 +1,44 @@
+<template>
+  <a-tree
+    class="draggable-tree"
+    :default-expanded-keys="expandedKeys"
+    draggable
+    :tree-data="treeData"
+    @dragenter="onDragEnter"
+    @drop="onDrop"
+  />
+</template>
+
+<script>
+import { mapState } from 'vuex'
+function getTreeNode (ele) {
+  return {
+    title: ele.name,
+    key: ele.uuid,
+    children: (ele.children || []).map(getTreeNode)
+  }
+}
+
+export default {
+  computed: {
+    ...mapState('editor', {
+      elements: state => state.editingPage.elements
+    }),
+    treeData () {
+      return this.elements.map(getTreeNode)
+    }
+  },
+  data () {
+    return {
+      gData: [],
+      expandedKeys: []
+    }
+  },
+  methods: {
+    onDragEnter (info) {
+    },
+    onDrop (info) {
+    }
+  }
+}
+</script>
diff --git a/front-end/h5/src/locales/lang/en-US.js b/front-end/h5/src/locales/lang/en-US.js
index a9bb99a5..b27d8b43 100755
--- a/front-end/h5/src/locales/lang/en-US.js
+++ b/front-end/h5/src/locales/lang/en-US.js
@@ -32,7 +32,8 @@ export default {
     sidebar: {
       components: 'Components',
       pages: 'Pages',
-      templates: 'Templates'
+      templates: 'Templates',
+      tree: 'Tree'
     },
     pageManager: {
       title: 'Page {index}',
diff --git a/front-end/h5/src/locales/lang/zh-CN.js b/front-end/h5/src/locales/lang/zh-CN.js
index d8e519a4..6008ab76 100755
--- a/front-end/h5/src/locales/lang/zh-CN.js
+++ b/front-end/h5/src/locales/lang/zh-CN.js
@@ -2,7 +2,7 @@
  * @Author: ly525
  * @Date: 2019-11-24 18:51:58
  * @LastEditors: ly525
- * @LastEditTime: 2020-10-13 00:51:57
+ * @LastEditTime: 2020-10-13 01:29:21
  * @FilePath: /h5/src/locales/lang/zh-CN.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: Do not edit
@@ -42,7 +42,8 @@ export default {
     sidebar: {
       components: '组件列表',
       pages: '页面管理',
-      templates: '模板'
+      templates: '模板',
+      tree: '组件树'
     },
     pageManager: {
       title: '第{index}页面',