diff --git a/src/components/ListTable/formatters/OutputExpandFormatter.vue b/src/components/ListTable/formatters/OutputExpandFormatter.vue
new file mode 100644
index 000000000..1594ff04f
--- /dev/null
+++ b/src/components/ListTable/formatters/OutputExpandFormatter.vue
@@ -0,0 +1,21 @@
+<template>
+  <pre style="border: none; background: none; white-space: pre-wrap">
+      {{ '$ '+ row.input }}
+      <br>
+      {{ row.output }}
+  </pre>
+</template>
+
+<script>
+import BaseFormatter from '@/components/ListTable/formatters/base'
+
+export default {
+  name: 'OutputExpandFormatter',
+  extends: BaseFormatter
+
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/ListTable/formatters/RouterFormatter.vue b/src/components/ListTable/formatters/RouterFormatter.vue
new file mode 100644
index 000000000..062ab04fa
--- /dev/null
+++ b/src/components/ListTable/formatters/RouterFormatter.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-link class="detail" :type="col.type || 'success'" @click="goDetail">{{ col.linkName }}</el-link>
+</template>
+
+<script>
+import BaseFormatter from './base'
+
+export default {
+  name: 'RouterFormatter',
+  extends: BaseFormatter,
+  methods: {
+    goDetail() {
+      const routeName = this.col.route || ''
+      this.$router.push({ name: routeName, params: { id: this.cellValue }})
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/ListTable/formatters/index.js b/src/components/ListTable/formatters/index.js
index 8aeb390f9..986d906b1 100644
--- a/src/components/ListTable/formatters/index.js
+++ b/src/components/ListTable/formatters/index.js
@@ -5,14 +5,7 @@ import ActionsFormatter from './ActionsFormatter'
 import ExpandPreFormatter from './ExpandPreFormatter'
 import LengthFormatter from './LengthFormatter'
 
-// export { default as DetailFormatter } from './DetailFormatter'
-// export { default as DisplayFormatter } from './DisplayFormatter'
-// export { default as BooleanFormatter } from './ChoicesFormatter'
-// export { default as ActionsFormatter } from './ActionsFormatter'
-// export { default as ExpandPreFormatter } from './ExpandPreFormatter'
-// export { default as LengthFormatter } from './LengthFormatter'
-
-export const modules = {
+export default {
   DetailFormatter,
   DisplayFormatter,
   BooleanFormatter,
@@ -21,7 +14,6 @@ export const modules = {
   LengthFormatter
 }
 
-export default modules
 export {
   DetailFormatter,
   DisplayFormatter,
diff --git a/src/i18n/langs/cn.js b/src/i18n/langs/cn.js
index 77947aa81..d69f95f84 100644
--- a/src/i18n/langs/cn.js
+++ b/src/i18n/langs/cn.js
@@ -90,6 +90,7 @@ const cn = {
     'Sessions': '会话管理',
     'SessionOnline': '在线会话',
     'SessionOffline': '历史会话',
+    'SessionDetail': '会话详情',
     'Commands': '命令记录',
     'WebTerminal': 'Web终端',
     'FileManager': '文件管理',
@@ -384,14 +385,15 @@ const cn = {
     'active': '激活中',
     'alive': '在线',
     'StorageConfiguration': '存储配置',
-    'join': '加入'
+    'join': '加入',
+    'goto': '转到'
   },
   jobcenter: {
     'RunTimes': '执行次数',
-    'hosts': '主机',
-    'success': '成功',
-    'date': '日期',
-    'time': '时间',
+    'Hosts': '主机',
+    'Success': '成功',
+    'Date': '日期',
+    'Time': '时间',
     'run': '执行'
   },
   tickets: {
diff --git a/src/i18n/langs/en.js b/src/i18n/langs/en.js
index 1c8d7d64c..5359545ef 100644
--- a/src/i18n/langs/en.js
+++ b/src/i18n/langs/en.js
@@ -18,7 +18,11 @@ const en = {
     'assets': 'Assets',
     'applications': 'Applications',
     'perms': 'Perms',
-    'sessions': 'Sessions',
+    'Sessions': 'Sessions',
+    'SessionOnline': 'Session Online',
+    'SessionOffline': 'Session Offline',
+    'SessionDetail': 'Session Detail',
+    'Goto': 'Goto',
     'jobcenter': 'Job Center'
   },
   users: {
@@ -289,7 +293,8 @@ const en = {
     'terminate_session': 'Terminate session',
     'confirm': 'Confirm',
     'commands': 'Commands',
-    'join': 'join'
+    'join': 'join',
+    'goto': 'Goto'
   },
   setting: {
     'setting': 'System Setting',
diff --git a/src/router/index.js b/src/router/index.js
index 06d452745..7f99f0113 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -274,6 +274,13 @@ export const constantRoutes = [
         component: () => import('@/views/sessions/CommandList'),
         meta: { title: 'Commands' }
       },
+      {
+        path: 'sessions/:id',
+        name: 'SessionDetail',
+        component: () => import('@/views/sessions/SessionDetail'),
+        meta: { title: 'SessionDetail' },
+        hidden: true
+      },
       {
         path: 'luna',
         name: 'WebTerminal',
diff --git a/src/views/jobcenter/TaskList.vue b/src/views/jobcenter/TaskList.vue
index 432e9bdaf..1c08ea5bc 100644
--- a/src/views/jobcenter/TaskList.vue
+++ b/src/views/jobcenter/TaskList.vue
@@ -3,8 +3,9 @@
 </template>
 
 <script>
+import { timeOffset, toSafeLocalDateStr } from '@/utils/common'
 import { GenericListPage } from '@/layout/components'
-import { DetailFormatter, ActionsFormatter } from '@/components/ListTable/formatters/index'
+import { ActionsFormatter } from '@/components/ListTable/formatters/index'
 
 export default {
   components: {
@@ -14,47 +15,71 @@ export default {
     return {
       tableConfig: {
         url: '/api/v1/ops/tasks/',
-        columns: [
-          {
-            prop: 'name',
+        columns: ['name', 'runtimes', 'host_amount', 'is_success', 'date_start', 'time', 'actions'],
+        columnsMeta: {
+          name: {
             label: this.$tc('Name'),
-            formatter: DetailFormatter,
-            sortable: 'custom',
-            route: 'UserDetail'
+            showOverflowTooltip: true
           },
-          {
-            prop: 'latest_execution',
-            label: this.$t('jobcenter.RunTimes')
+          runtimes: {
+            label: this.$t('jobcenter.RunTimes'),
+            formatter: function(row) {
+              const summary = <div>
+                <span class='text-primary'>{row.summary.success}</span>/
+                <span class='text-danger'>{row.summary.failed}</span>/
+                <span>{row.summary.total}</span>
+              </div>
+              return summary
+            }
           },
-          {
-            prop: 'latest_execution.hosts_amount',
-            label: this.$t('jobcenter.hosts')
+          host_amount: {
+            label: this.$t('jobcenter.Hosts'),
+            formatter: function(row) {
+              return row.latest_execution.hosts_amount
+            }
           },
-          {
-            prop: 'latest_execution.is_success',
-            label: this.$t('jobcenter.success')
+          is_success: {
+            label: this.$t('jobcenter.Success'),
+            formatter: row => {
+              if (row.latest_execution.is_success) {
+                return <i class='fa fa-check text-primary'/>
+              }
+              return <i class='fa fa-times text-danger'/>
+            }
           },
-          {
-            prop: 'latest_execution.date_start',
-            label: this.$t('jobcenter.date'),
-            sortable: 'custom'
+          date_start: {
+            label: this.$t('jobcenter.Date'),
+            formatter: function(row) {
+              return toSafeLocalDateStr(row.latest_execution.date_start)
+            }
           },
-          {
-            prop: 'latest_execution.timedelta',
-            label: this.$t('jobcenter.time')
+          time: {
+            label: this.$t('jobcenter.Time'),
+            formatter: function(row) {
+              return timeOffset(row.latest_execution.date_start, row.latest_execution.date_finished)
+            }
           },
-          {
+          actions: {
             prop: 'id',
             label: this.$tc('Action'),
-            align: 'center',
             formatter: ActionsFormatter,
-            width: '200px',
-            actions: [
-            ]
+            actions: {
+              hasUpdate: false,
+              extraActions: [
+                {
+                  name: 'run',
+                  title: this.$t('jobcenter.run'),
+                  type: 'primary',
+                  callback: function({ cellValue, tableData }) {
+                    // 跳转页面
+                    const replayUrl = '/ops/celery/task/' + cellValue
+                    window.open(replayUrl)
+                  }
+                }
+              ]
+            }
           }
-        ],
-        hasEdit: false,
-        hasDelete: false
+        }
       },
       headerActions: {
         hasCreate: false,
diff --git a/src/views/sessions/CommandList.vue b/src/views/sessions/CommandList.vue
index c3544ff95..48c6198b7 100644
--- a/src/views/sessions/CommandList.vue
+++ b/src/views/sessions/CommandList.vue
@@ -4,6 +4,8 @@
 
 <script>
 import { GenericListPage } from '@/layout/components'
+import { toSafeLocalDateStr } from '@/utils/common'
+import { RouterFormatter, OutputExpandFormatter } from '@/components/ListTable/formatters'
 
 export default {
   components: {
@@ -12,55 +14,47 @@ export default {
   data() {
     return {
       tableConfig: {
-        axiosConfig: {
-          raw: 1,
-          params: {
-            display: 1,
-            is_finished: 0
-          }
-        },
         hasSelection: false,
-        hasOperation: false,
         url: '/api/v1/terminal/commands/',
         columns: [
-          {
-            type: 'expand'
+          'expandCol', 'input', 'risk_level', 'user',
+          'asset', 'system_user', 'session', 'timestamp'
+        ],
+        columnsMeta: {
+          expandCol: {
+            type: 'expand',
+            prop: 'output',
+            formatter: OutputExpandFormatter
           },
-          {
-            prop: 'input',
+          input: {
             label: this.$t('sessions.command')
           },
-          {
-            prop: 'output',
-            label: '命令输出结果 (怎么放到隐藏内容 ？？)',
-            expand: true
-          },
-          {
-            prop: 'risk_level',
+          risk_level: {
             label: this.$t('sessions.RiskLevel')
           },
-          {
-            prop: 'user',
-            label: this.$t('sessions.user'),
-            sortable: true
+          user: {
+            label: this.$t('sessions.user')
           },
-          {
-            prop: 'asset',
+          asset: {
             label: this.$t('sessions.asset')
           },
-          {
-            prop: 'system_user',
+          system_user: {
             label: this.$t('sessions.systemUser')
           },
-          {
-            prop: 'session',
-            label: this.$t('sessions.session')
+          session: {
+            label: this.$t('sessions.session'),
+            formatter: RouterFormatter,
+            route: 'SessionDetail',
+            linkName: this.$t('sessions.goto')
           },
-          {
-            prop: 'timestamp',
-            label: this.$t('sessions.date')
+          timestamp: {
+            label: this.$t('sessions.date'),
+            formatter: function(row) {
+              return toSafeLocalDateStr(row.timestamp * 1000)
+            }
           }
-        ],
+
+        },
         tableActions: {
           hasEdit: false,
           hasDelete: false
diff --git a/src/views/sessions/SessionDetail.vue b/src/views/sessions/SessionDetail.vue
new file mode 100644
index 000000000..a159a2e6a
--- /dev/null
+++ b/src/views/sessions/SessionDetail.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>SessionDetail</div>
+</template>
+
+<script>
+export default {
+  name: 'SessionDetail'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/sessions/SessionOfflineList.vue b/src/views/sessions/SessionOfflineList.vue
index a95a88080..a422fd538 100644
--- a/src/views/sessions/SessionOfflineList.vue
+++ b/src/views/sessions/SessionOfflineList.vue
@@ -22,8 +22,10 @@ export default {
         ],
         columnsMeta: {
           index: {
-            type: 'index',
-            label: this.$t('sessions.id')
+            label: this.$t('sessions.id'),
+            formatter: function(row, column, cellValue, index) {
+              return <a class='detail el-link el-link--success is-underline' href= { '/terminal/sessions/' + row.id }>{ index + 1}</a>
+            }
           },
           command_amount: {
             label: this.$t('sessions.command')
diff --git a/src/views/sessions/SessionOnlineList.vue b/src/views/sessions/SessionOnlineList.vue
index 9facf05a0..fc12c2ef4 100644
--- a/src/views/sessions/SessionOnlineList.vue
+++ b/src/views/sessions/SessionOnlineList.vue
@@ -22,8 +22,10 @@ export default {
         ],
         columnsMeta: {
           index: {
-            type: 'index',
-            label: this.$t('sessions.id')
+            label: this.$t('sessions.id'),
+            formatter: function(row, column, cellValue, index) {
+              return <a class='detail el-link el-link--success is-underline' href= { '/terminal/sessions/' + row.id }>{ index + 1}</a>
+            }
           },
           command_amount: {
             label: this.$t('sessions.command')