diff --git a/src/pages/node/list.vue b/src/pages/node/list.vue
index bb117407e7a2509d7ebe5b7144234108483a55f7..ee6e7df385c3084e038e9f80129423df09a25e94 100644
--- a/src/pages/node/list.vue
+++ b/src/pages/node/list.vue
@@ -43,6 +43,9 @@
     >
       <node-operation ref="operationForm" :temp="temp" />
     </a-modal>
+    <a-drawer class="nodeManager" :title="drawerTitle" placement="right" width="100%" :visible="drawerVisible" @close="onClose">
+      <node-layout v-if="drawerVisible" :node="temp" />
+    </a-drawer>
   </div>
 </template>
 
@@ -50,10 +53,12 @@
 import { getNodeList, deleteNode, getNodeStatus, getOsVersion, editNode } from '@/api/node'
 import { isIpAndPort } from '@/utils/validate'
 import NodeOperation from './components/node_operation.vue'
+import NodeLayout from './node-layout'
 
 export default {
   components: {
-    NodeOperation
+    NodeOperation,
+    NodeLayout
   },
   data() {
     return {
@@ -76,7 +81,8 @@ export default {
         { title: '操作', dataIndex: 'operation', key: 'operation', scopedSlots: { customRender: 'operation' }, width: 200, align: 'center' }
       ],
       timer: null,
-      editNodeVisible: false,      
+      editNodeVisible: false,
+      drawerVisible: false    
     }
   },
   watch: {
@@ -239,6 +245,25 @@ export default {
         this.editNodeVisible = false
         this.loadData()
       })
+    },
+    handleNode(record) {
+      setNodeLocalIp({ nodeId: record.id, nodeIp: record.url.split(':')[0] }).then(() => {
+        this.temp = Object.assign(record)
+        this.drawerTitle = `${this.temp.name} (${this.temp.url})`
+        this.drawerVisible = true
+        let nodeId = this.$route.query.nodeId
+        if (nodeId !== record.id) {
+          this.$router.push({
+            query: { nodeId: record.id }
+          })
+        }
+      })
+    },
+    onClose() {
+      this.drawerVisible = false
+      this.$router.push({
+        query: { nodeId: null }
+      })
     }
   }
 }
diff --git a/src/pages/node/node-layout/.keep b/src/pages/node/node-layout/.keep
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/pages/node/node-layout/index.vue b/src/pages/node/node-layout/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7f0a57ed20aa0fe51d2cabb0c53fc71f25894c96
--- /dev/null
+++ b/src/pages/node/node-layout/index.vue
@@ -0,0 +1,100 @@
+<template>
+  <a-layout>
+    <a-layout-sider theme="light" class="sider jpom-node-sider">
+      <a-menu theme="light" mode="inline" :default-selected-keys="selectedKeys" :default-open-keys="defaultOpenKey">
+        <template v-for="menu in nodeMenuList">
+          <a-sub-menu v-if="Array.isArray(menu.childs)" :key="menu.pid" :class="menu.id">
+            <span slot="title">
+              <a-icon v-if="menu.icon_v3" :type="menu.icon_v3" />
+              <span>{{ menu.title }}</span>
+            </span>
+            <a-menu-item v-for="subMenu in menu.childs" :key="subMenu.id" :class="subMenu.id" @click="handleMenuClick(subMenu.id, subMenu.pId)">
+              <span>{{ subMenu.title }}</span>
+            </a-menu-item>
+          </a-sub-menu>
+          <a-menu-item v-else :key="menu.id" @click="handleMenuClick(menu.id)">
+            <a-icon v-if="menu.icon_v3" :type="menu.icon_v3" />
+            <span>{{ menu.title }}</span>
+          </a-menu-item>
+        </template>
+      </a-menu>
+    </a-layout-sider>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { getNodeMenu } from '../../../api/menu'
+export default {
+  props: {
+    node: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      nodeMenuList: [],
+      selectedKeys: [this.$route.query.id || 'welcome']
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getGuideFlag'
+    ]),
+    currentId() {
+      return this.selectedKeys[0]
+    },
+    defaultOpenKey() {
+      let keyList = []
+      if (this.getGuideFlag && !this.$route.query.pId) {
+        keyList = ['systemConfig']
+      } else if (this.$route.query.pId) {
+        keyList = [this.$route.query.pId]
+      }
+      return keyList
+    }
+  },
+  created() {
+    this.loadNodeMenu()
+  },
+  methods: {
+    loadNodeMenu() {
+      getNodeMenu(this.node.id).then(res => {
+        if (res.code === 200) {
+          const data = res.data.map(item => {
+            const childs = item.childs && item.childs.map(sub => {
+              return { ...sub, pId: item.id }
+            })
+            return { ...item, childs }
+          })
+          this.nodeMenuList = data
+        }
+      })
+    },
+    handleMenuClick(id, pId) {
+      this.selectedKeys = [id]
+      this.$router.push({
+        query: {
+          ...this.$route.query,
+          pId: pId,
+          id: id
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.sider {
+  height: calc(100vh - 75px);
+  overflow-y: auto;
+}
+.layout-content {
+  height: calc(100vh - 95px);
+  overflow-y: auto;
+  margin: 10px 10px 0 10px;
+}
+</style>