diff --git a/src/router/settings/index.js b/src/router/settings/index.js
index 6af949c97..4cdcb7629 100644
--- a/src/router/settings/index.js
+++ b/src/router/settings/index.js
@@ -93,7 +93,7 @@ export default {
         {
           path: ':id',
           name: 'TerminalDetail',
-          component: () => import('@/views/settings/Terminal/Component/TerminalDetail'),
+          component: () => import('@/views/settings/Terminal/Component/TerminalDetail/index'),
           meta: {
             title: i18n.t('route.Terminal'),
             permissions: ['terminal.view_terminal']
diff --git a/src/views/settings/Terminal/Component/TerminalDetail.vue b/src/views/settings/Terminal/Component/TerminalDetail.vue
deleted file mode 100644
index 8bc68ff13..000000000
--- a/src/views/settings/Terminal/Component/TerminalDetail.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-  <GenericDetailPage :object.sync="terminalData" v-bind="config">
-    <div>
-      <el-row :gutter="20">
-        <el-col :md="14" :sm="24">
-          <AutoDetailCard :url="url" :object="terminalData" />
-        </el-col>
-      </el-row>
-    </div>
-  </GenericDetailPage>
-
-</template>
-
-<script>
-import { GenericDetailPage } from '@/layout/components'
-import AutoDetailCard from '@/components/DetailCard/auto'
-
-export default {
-  name: 'TerminalDetail',
-  components: {
-    GenericDetailPage,
-    AutoDetailCard
-  },
-  data() {
-    return {
-      terminalData: {},
-      loading: true,
-      config: {
-        submenu: [
-          {
-            title: this.$t('sessions.terminalDetail'),
-            name: 'detail'
-          }
-        ],
-        hasDelete: false,
-        actions: {
-          canUpdate: this.$hasPerm('terminal.change_terminal'),
-          hasDelete: false,
-          canDelete: false,
-          detailApiUrl: `/api/v1/terminal/terminals/${this.$route.params.id}/`
-        }
-      },
-      url: `/api/v1/terminal/terminals/${this.$route.params.id}/`
-    }
-  },
-  computed: {
-    cardTitle() {
-      return this.terminalData.name
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/settings/Terminal/Component/TerminalDetail/Detail.vue b/src/views/settings/Terminal/Component/TerminalDetail/Detail.vue
new file mode 100644
index 000000000..bac176e92
--- /dev/null
+++ b/src/views/settings/Terminal/Component/TerminalDetail/Detail.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <el-row :gutter="20">
+      <el-col :md="14" :sm="24">
+        <AutoDetailCard :url="url" :object="object" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import AutoDetailCard from '@/components/DetailCard/auto'
+
+export default {
+  name: 'TerminalDetail',
+  components: {
+    AutoDetailCard
+  },
+  props: {
+    object: {
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  data() {
+    return {
+      url: `/api/v1/terminal/terminals/${this.object.id}/`
+    }
+  },
+  computed: {
+    cardTitle() {
+      return this.object.name
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/settings/Terminal/Component/TerminalDetail/index.vue b/src/views/settings/Terminal/Component/TerminalDetail/index.vue
new file mode 100644
index 000000000..7179cb435
--- /dev/null
+++ b/src/views/settings/Terminal/Component/TerminalDetail/index.vue
@@ -0,0 +1,55 @@
+<template>
+  <GenericDetailPage
+    :active-menu.sync="config.activeMenu"
+    :object.sync="terminal"
+    v-bind="config"
+    v-on="$listeners"
+  >
+    <keep-alive>
+      <component :is="config.activeMenu" :object="terminal" />
+    </keep-alive>
+  </GenericDetailPage>
+</template>
+
+<script>
+import { GenericDetailPage, TabPage } from '@/layout/components'
+import Detail from './Detail'
+
+export default {
+  name: 'TerminalDetail',
+  components: {
+    GenericDetailPage,
+    TabPage,
+    Detail
+  },
+  data() {
+    return {
+      terminal: {},
+      config: {
+        url: '/api/v1/terminal/terminals',
+        activeMenu: 'Detail',
+        submenu: [
+          {
+            'title': this.$t('common.Detail'),
+            'name': 'Detail'
+          }
+        ],
+        hasRightSide: true,
+        actions: {
+          canUpdate: this.$hasPerm('terminal.change_terminal'),
+          hasDelete: this.$hasPerm('terminal.delete_terminal'),
+          canDelete: this.$hasPerm('terminal.delete_terminal'),
+          detailApiUrl: `/api/v1/terminal/terminals/${this.$route.params.id}/`
+        },
+        titlePrefix: this.$t('sessions.terminalDetail')
+      }
+    }
+  },
+  mounted() {
+  }
+}
+</script>
+
+<style scoped>
+
+</style>