diff --git a/src/components/TableFormatters/TwoTabFormatter.vue b/src/components/TableFormatters/TwoTabFormatter.vue
new file mode 100644
index 000000000..7bd94cb54
--- /dev/null
+++ b/src/components/TableFormatters/TwoTabFormatter.vue
@@ -0,0 +1,61 @@
+<template>
+  <el-row :gutter="10">
+    <div v-if="isAllEmpty()" style="text-align: center">
+      {{ this.$t('common.NoContent') }}
+    </div>
+    <div v-else>
+      <el-col :span="rightEmpty() ? 24 : 12">
+        <div v-if="!leftEmpty()">
+          <el-alert type="info" effect="dark" :closable="false" style="width: 100%;">{{ row.leftTitle }}</el-alert>
+          <div v-for="(value, key, index) in row.left" :key="index" class="text item">
+            <el-tag type="info" :hit="true"><strong>{{ key }}: </strong>>{{ value }}</el-tag>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="leftEmpty() ? 24 : 12">
+        <div v-if="!rightEmpty()">
+          <el-alert type="success" effect="dark" :closable="false" style="width: 100%;">{{ row.rightTitle }}</el-alert>
+          <div v-for="(value, key, index) in row.right" :key="index">
+            <el-tag type="info" :hit="true"><strong>{{ key }}: </strong>{{ value }}</el-tag>
+          </div>
+        </div>
+      </el-col>
+    </div>
+  </el-row>
+</template>
+
+<script>
+
+export default {
+  name: 'TwoTabFormatter',
+  props: {
+    row: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    isEmpty(content) {
+      return !content || JSON.stringify(content) === '{}'
+    },
+    leftEmpty() {
+      return this.isEmpty(this.row.left)
+    },
+    rightEmpty() {
+      return this.isEmpty(this.row.right)
+    },
+    isAllEmpty() {
+      return this.leftEmpty() && this.rightEmpty()
+    }
+  }
+}
+
+</script>
+
+<style scoped>
+  .el-tag{
+    width: 100%;
+    white-space: normal;
+    height:auto;
+}
+</style>
diff --git a/src/components/TableFormatters/index.js b/src/components/TableFormatters/index.js
index 8cbb56dde..016da83ca 100644
--- a/src/components/TableFormatters/index.js
+++ b/src/components/TableFormatters/index.js
@@ -12,6 +12,7 @@ import DialogDetailFormatter from './DialogDetailFormatter'
 import EditableInputFormatter from './EditableInputFormatter'
 import StatusFormatter from './StatusFormatter'
 import TagsFormatter from './TagsFormatter'
+import TwoTabFormatter from './TwoTabFormatter'
 
 export default {
   DetailFormatter,
@@ -27,7 +28,8 @@ export default {
   ArrayFormatter,
   EditableInputFormatter,
   StatusFormatter,
-  TagsFormatter
+  TagsFormatter,
+  TwoTabFormatter
 }
 
 export {
@@ -44,5 +46,6 @@ export {
   ArrayFormatter,
   EditableInputFormatter,
   StatusFormatter,
-  TagsFormatter
+  TagsFormatter,
+  TwoTabFormatter
 }
diff --git a/src/i18n/langs/en.json b/src/i18n/langs/en.json
index 0aecf2c7e..a56140933 100644
--- a/src/i18n/langs/en.json
+++ b/src/i18n/langs/en.json
@@ -245,7 +245,9 @@
     "View": "View",
     "LoginIP": "Login IP",
     "LoginCity": "Login city",
-    "LoginDate": "Login date"
+    "LoginDate": "Login date",
+    "BeforeChange": "Before change",
+    "AfterChange": "After change"
   },
   "auth": {
     "LoginRequiredMsg": "You account has logout, Please login again",
@@ -255,6 +257,7 @@
     "ReLoginErr": "Login time has exceeded 5 minutes, please login again"
   },
   "common": {
+    "NoContent": "No content",
     "NeedAddAppsOrSystemUserErrMsg": "Please add apps or system user",
     "VerificationCodeSent": "The verification code has been sent",
     "SendVerificationCode": "Send verification code",
diff --git a/src/i18n/langs/ja.json b/src/i18n/langs/ja.json
index 01dd04940..7611a6090 100644
--- a/src/i18n/langs/ja.json
+++ b/src/i18n/langs/ja.json
@@ -250,7 +250,9 @@
     "SystemUserName": "システムユーザー名",
     "LoginIP": "ログインIP",
     "LoginCity": "ログイン都市",
-    "LoginDate": "ログイン日"
+    "LoginDate": "ログイン日",
+    "BeforeChange": "変更前",
+    "AfterChange": "変更後"
   },
   "auth": {
     "LoginRequiredMsg": "アカウントが終了しました。ログインし直してください",
@@ -260,6 +262,7 @@
     "ReLoginErr": "ログイン時間が 5 分を超えました。もう一度ログインしてください"
   },
   "common": {
+    "NoContent": "まだ内容がない",
     "NeedAddAppsOrSystemUserErrMsg": "アプリケーションまたはシステムユーザーを追加してください",
     "VerificationCodeSent": "検証コードが送信されました",
     "SendVerificationCode": "認証コードの送信",
diff --git a/src/i18n/langs/zh.json b/src/i18n/langs/zh.json
index dcb93f876..c9426cdd1 100644
--- a/src/i18n/langs/zh.json
+++ b/src/i18n/langs/zh.json
@@ -250,7 +250,9 @@
     "SystemUserName": "系统用户名",
     "LoginIP": "登录IP",
     "LoginCity": "登录城市",
-    "LoginDate": "登录日期"
+    "LoginDate": "登录日期",
+    "BeforeChange": "变更前",
+    "AfterChange": "变更后"
   },
   "auth": {
     "LoginRequiredMsg": "账号已退出，请重新登录",
@@ -260,6 +262,7 @@
     "ReLoginErr": "登录时长已超过 5 分钟，请重新登录"
   },
   "common": {
+    "NoContent": "暂无内容",
     "NeedAddAppsOrSystemUserErrMsg": "需要添加应用或系统用户",
     "VerificationCodeSent": "验证码已发送",
     "SendVerificationCode": "发送验证码",
diff --git a/src/views/audits/OperateLogList.vue b/src/views/audits/OperateLogList.vue
index 5a1234f8c..cb21b4916 100644
--- a/src/views/audits/OperateLogList.vue
+++ b/src/views/audits/OperateLogList.vue
@@ -1,23 +1,43 @@
 <template>
-  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+  <div>
+    <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+    <el-dialog
+      :title="this.$t('route.OperateLog')"
+      :visible.sync="logDetailVisible"
+      width="70%"
+    >
+      <TwoTabFormatter :row="rowObj" />
+    </el-dialog>
+  </div>
 </template>
 
 <script>
 import GenericListPage from '@/layout/components/GenericListPage'
 import { getDaysAgo, getDaysFuture } from '@/utils/common'
+import TwoTabFormatter from '@/components/TableFormatters/TwoTabFormatter'
+import { ActionsFormatter } from '@/components/TableFormatters'
 
 export default {
   components: {
-    GenericListPage
+    GenericListPage,
+    TwoTabFormatter
   },
   data() {
+    const vm = this
     const now = new Date()
     const dateFrom = getDaysAgo(7, now).toISOString()
     const dateTo = getDaysFuture(1, now).toISOString()
     return {
+      rowObj: {
+        left: '',
+        rigth: '',
+        leftTitle: vm.$t('audits.BeforeChange'),
+        rightTitle: vm.$t('audits.AfterChange')
+      },
+      logDetailVisible: false,
       tableConfig: {
         url: '/api/v1/audits/operate-logs/',
-        columns: ['user', 'action_display', 'resource_type_display', 'resource', 'remote_addr', 'datetime'],
+        columns: ['user', 'action_display', 'resource_type_display', 'resource', 'remote_addr', 'datetime', 'actions'],
         columnsMeta: {
           user: {
             showOverflowTooltip: true
@@ -36,7 +56,35 @@ export default {
             width: '140px'
           },
           action_display: {
-            width: '90px'
+            width: '70px'
+          },
+          actions: {
+            width: '70px',
+            formatter: ActionsFormatter,
+            formatterArgs: {
+              hasUpdate: false,
+              canUpdate: false,
+              hasDelete: false,
+              canDelete: false,
+              hasClone: false,
+              canClone: false,
+              extraActions: [
+                {
+                  name: 'View',
+                  title: this.$t('common.View'),
+                  type: 'primary',
+                  callback: ({ row }) => {
+                    vm.$axios.get(
+                      `/api/v1/audits/operate-logs/${row.id}/?type=action_detail`,
+                    ).then(res => {
+                      vm.rowObj.left = res.before
+                      vm.rowObj.right = res.after
+                      vm.logDetailVisible = true
+                    })
+                  }
+                }
+              ]
+            }
           }
         },
         extraQuery: {