diff --git a/.gitignore b/.gitignore
index 403adbc1..3e7fb000 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,4 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+ws.js
diff --git a/package-lock.json b/package-lock.json
index 541ea021..e6236dd0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2901,6 +2901,11 @@
         "resolve": "^1.12.0"
       }
     },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+    },
     "babel-loader": {
       "version": "8.2.2",
       "resolved": "https://registry.npm.taobao.org/babel-loader/download/babel-loader-8.2.2.tgz?cache=0&sync_timestamp=1606424508891&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-loader%2Fdownload%2Fbabel-loader-8.2.2.tgz",
@@ -2952,6 +2957,27 @@
         "@babel/helper-define-polyfill-provider": "^0.2.1"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbalanced-match%2Fdownload%2Fbalanced-match-1.0.2.tgz",
@@ -4663,8 +4689,7 @@
     "deepmerge": {
       "version": "1.5.2",
       "resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz",
-      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M=",
-      "dev": true
+      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
     },
     "default-gateway": {
       "version": "5.0.5",
@@ -5147,6 +5172,29 @@
         "batch-processor": "1.0.0"
       }
     },
+    "element-ui": {
+      "version": "2.15.2",
+      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.2.tgz",
+      "integrity": "sha512-S66VvOt1AR698uzxAnJeajnIPI1eIzlkKXHx2F2v94PAs/8JuyRcLOUGy100mJHIIaSkRlxVOtI+As2XTB8Oew==",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      },
+      "dependencies": {
+        "async-validator": {
+          "version": "1.8.5",
+          "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
+          "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+          "requires": {
+            "babel-runtime": "6.x"
+          }
+        }
+      }
+    },
     "elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.4.tgz",
@@ -12528,6 +12576,11 @@
         "neo-async": "^2.6.0"
       }
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.nlark.com/through/download/through-2.3.8.tgz",
diff --git a/package.json b/package.json
index 6686b5f6..5515ca8a 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "dayjs": "^1.10.5",
     "echarts": "^5.1.1",
     "element-plus": "^1.0.2-beta.44",
+    "element-ui": "^2.15.2",
     "lib-flexible": "^0.3.2",
     "lodash": "^4.17.21",
     "moment-timezone": "^0.5.33",
diff --git a/src/App.vue b/src/App.vue
index 481d1274..037ec056 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,12 +13,12 @@ export default {
     get(`${process.env.BASE_URL}config.json?Timestamp=${new Date().getTime()}`).then(config => {
       axios.defaults.baseURL = config.baseUrl
     })
-    //处理刷新后  $dayJs的时区变为默认的问题
+    // 处理刷新后  $dayJs的时区变为默认的问题
     const timezone = localStorage.getItem('cn-sys-timezone') || ''
-    if (timezone){
-      $dayJs.tz.setDefault(timezone)
+    if (timezone) {
+      window.$dayJs.tz.setDefault(timezone)
     } else {
-      $dayJs.tz.setDefault()
+      window.$dayJs.tz.setDefault()
     }
   }
 
diff --git a/src/components/common/pagination.vue b/src/components/common/pagination.vue
index 71c96f10..c58abffc 100644
--- a/src/components/common/pagination.vue
+++ b/src/components/common/pagination.vue
@@ -104,7 +104,7 @@
 </template>
 
 <script>
-import {defaultPageSize} from '@/utils/constants'
+import { defaultPageSize } from '@/utils/constants'
 
 export default {
   name: 'pagination',
@@ -234,7 +234,7 @@ export default {
       immediate: true,
       deep: true,
       handler (n, o) {
-          // console.log(n)
+        // console.log(n)
       }
     }
   }
diff --git a/src/components/rightBox/settings/RoleBox.vue b/src/components/rightBox/settings/RoleBox.vue
index bab40f35..837e549e 100644
--- a/src/components/rightBox/settings/RoleBox.vue
+++ b/src/components/rightBox/settings/RoleBox.vue
@@ -24,7 +24,7 @@
               <button type="button" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new option-btn" @click="selectAllOrNone" :class="{'btn-active':selectAllFlag}"><span ><i class="nz-icon nz-icon-delete"></i></span></button>
             </div>-->
             <el-tree :data="menus" :default-expand-all="expandAllFlag" :props="{label:labelFormatter}"  @check-change="selectChange" class="tree-border" node-key="id" ref="menuTree" show-checkbox id="role-box-input-menus">
-              <template #default="{ node, data }">
+              <template #default="{ data }">
               <span>
                 <i v-if="data.type == '1'" class="el-icon-menu"></i>
                 <i v-if="data.type == '2'" class="el-icon-edit"></i>
@@ -48,8 +48,8 @@
 </template>
 
 <script>
-  import rightBoxMixin from '@/mixins/rightBox'
-  import { get, post, put } from '@/utils/http'
+import rightBoxMixin from '@/mixins/rightBox'
+import { get, post, put } from '@/utils/http'
 export default {
   name: 'userBox',
   mixins: [rightBoxMixin],
diff --git a/src/components/rightBox/settings/UserBox.vue b/src/components/rightBox/settings/UserBox.vue
index ff927337..31241efb 100644
--- a/src/components/rightBox/settings/UserBox.vue
+++ b/src/components/rightBox/settings/UserBox.vue
@@ -86,7 +86,6 @@
 
 <script>
 import rightBoxMixin from '@/mixins/rightBox'
-import { onMounted } from "vue";
 import { get, post, put } from '@/utils/http'
 export default {
   name: 'UserBox',
@@ -144,7 +143,7 @@ export default {
   },
   setup () {
   },
-  mounted() {
+  mounted () {
     this.getRoleData()
   },
   methods: {
@@ -190,8 +189,8 @@ export default {
         }
       })
     },
-   getRoleData (){
-     get('sys/role?pageSize=-1').then(response => {
+    getRoleData () {
+      get('sys/role?pageSize=-1').then(response => {
         if (response.code === 200) {
           this.roleData = response.data.list
         }
@@ -204,7 +203,7 @@ export default {
       immediate: true,
       handler (n) {
         this.editObject = JSON.parse(JSON.stringify(n))
-        if ( !this.editObject.roleIds && this.editObject.roles ) {
+        if (!this.editObject.roleIds && this.editObject.roles) {
           this.editObject.roleIds = this.editObject.roles[0].id
         }
       }
diff --git a/src/components/table/settings/OperationLogTable.vue b/src/components/table/settings/OperationLogTable.vue
new file mode 100644
index 00000000..bb611ca3
--- /dev/null
+++ b/src/components/table/settings/OperationLogTable.vue
@@ -0,0 +1,130 @@
+<template>
+  <el-table
+    id="roleTable"
+    ref="dataTable"
+    :data="tableData"
+    :height="height"
+    border
+    class="no-operation"
+    @header-dragend="dragend"
+    @sort-change="tableDataSort"
+    @selection-change="selectionChange"
+  >
+    <el-table-column
+      :resizable="false"
+      align="center"
+      type="selection"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      v-for="(item, index) in customTableTitle"
+      :key="`col-${index}`"
+      :fixed="item.fixed"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :sort-orders="['ascending', 'descending']"
+      :width="`${item.width}`"
+      class="data-column"
+    >
+      <template #header>
+        <span class="data-column__span">{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template  #default="scope">
+        <span v-if="item.prop === 'time'">
+                {{scope.row[item.prop]}} ms
+              </span>
+        <span v-else-if="item.prop === 'username'">{{formatUsername(scope.row)}}</span>
+        <span v-else-if="item.prop === 'ctime'">{{utcTimeToSysTime(scope.row[item.prop])}}</span>
+        <span v-else>{{scope.row[item.prop]}}</span>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import table from '@/mixins/table'
+export default {
+  name: 'roleTable',
+  mixins: [table],
+  data () {
+    return {
+      tableTitle: [
+        {
+          label: this.$t('config.operationlog.id'),
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('config.operationlog.username'),
+          prop: 'username',
+          show: true
+        },
+        {
+          label: this.$t('config.operationlog.ip'),
+          prop: 'ip',
+          show: true
+        },
+        {
+          label: this.$t('config.operationlog.operation'),
+          prop: 'operation',
+          show: true
+        },
+        {
+          label: this.$t('config.operationlog.type'),
+          prop: 'type',
+          show: true
+        },
+        {
+          label: this.$t('config.operationlog.state'),
+          prop: 'state',
+          show: true
+        },
+        // {
+        //   label: this.$t('config.operationlog.userId'),
+        //   prop: 'userId',
+        //   show: false,
+        // },
+        {
+          label: this.$t('config.operationlog.operaId'),
+          prop: 'operaId',
+          show: false
+        },
+        {
+          label: this.$t('config.operationlog.createDate'),
+          prop: 'ctime',
+          show: true
+        },
+        {
+          label: this.$t('config.operationlog.time'),
+          prop: 'time',
+          show: false
+        },
+        {
+          label: this.$t('config.operationlog.params'),
+          prop: 'params',
+          show: false
+        },
+        {
+          label: this.$t('config.operationlog.response'),
+          prop: 'response',
+          show: false
+        }
+      ]
+    }
+  },
+  methods: {
+    formatUsername (row) {
+      if (row.username) {
+        return row.username
+      } else if (row.operation === 'login' && !row.username) { // 如果是登录 且登录失败
+        return JSON.parse(row.params).username
+      } else {
+        return '-'
+      }
+    }
+  }
+}
+</script>
diff --git a/src/components/table/settings/RoleTable.vue b/src/components/table/settings/RoleTable.vue
index 396c801a..c67c7edd 100644
--- a/src/components/table/settings/RoleTable.vue
+++ b/src/components/table/settings/RoleTable.vue
@@ -75,8 +75,7 @@
 </template>
 
 <script>
-  import table from '@/mixins/table'
-  import { put } from '@/utils/http'
+import table from '@/mixins/table'
 export default {
   name: 'roleTable',
   mixins: [table],
@@ -88,12 +87,12 @@ export default {
           prop: 'id',
           show: true,
           width: 80,
-          sortable:'custom'
+          sortable: 'custom'
         }, {
           label: this.$t('config.roles.name'),
           prop: 'name',
           show: true,
-          sortable:'custom'
+          sortable: 'custom'
         }, {
           label: this.$t('overall.remark'),
           prop: 'remark',
diff --git a/src/components/table/settings/UserTable.vue b/src/components/table/settings/UserTable.vue
index a891499c..d128ec16 100644
--- a/src/components/table/settings/UserTable.vue
+++ b/src/components/table/settings/UserTable.vue
@@ -42,6 +42,7 @@
         </template>
         <template v-else-if="item.prop === 'status'">
           <el-switch
+                  v-if="scope.row.id"
                   v-model="scope.row.status"
                   :active-color="theme.themeColor"
                   active-value="1"
diff --git a/src/i18n/cn.js b/src/i18n/cn.js
index 5f8fecb5..49c03c30 100644
--- a/src/i18n/cn.js
+++ b/src/i18n/cn.js
@@ -257,7 +257,7 @@ const cn = {
         unknown: 'unknown'
       },
       response: '响应'
-    },
+    }
   }
 }
 
diff --git a/src/i18n/en.js b/src/i18n/en.js
index fcf6b901..82cdf578 100644
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -258,7 +258,7 @@ const en = {
         login: 'login',
         logout: 'logout'
       }
-    },
-  },
+    }
+  }
 }
 export default en
diff --git a/src/mixins/common.js b/src/mixins/common.js
index 5c779ad9..ccdd13a4 100644
--- a/src/mixins/common.js
+++ b/src/mixins/common.js
@@ -3,7 +3,7 @@ import { hasButton } from '@/permission'
 export default {
   data () {
     return {
-      dayJs: $dayJs,
+      dayJs: window.$dayJs,
       blockOperation: {
         save: false,
         import: false,
@@ -37,6 +37,20 @@ export default {
         refresh: false,
         query: false
       }
+    },
+    // 时间相关
+    utcTimeToSysTime (str) { // utc 0 到系统设置的时区
+      let date = ''
+      if (isNaN(str)) {
+        date = window.$dayJs(str).valueOf() + localStorage.getItem('timezone-local-offset') * 60 * 60 * 1000
+      } else {
+        date = str
+      }
+      date = window.$dayJs.tz(date).format('YYYY-MM-DD HH:mm:ss')
+      return date
+    },
+    utcTimeToLocalhost (str) { // 系统设置的时区 到 utc 0
+      return str
     }
   }
 }
diff --git a/src/mixins/dataList.js b/src/mixins/dataList.js
index b3bf04e4..04debf20 100644
--- a/src/mixins/dataList.js
+++ b/src/mixins/dataList.js
@@ -4,7 +4,7 @@ import { get, del } from '@/utils/http'
 import { ref } from 'vue'
 import pagination from '@/components/common/pagination'
 export default {
-  components:{
+  components: {
     pagination
   },
   data () {
diff --git a/src/router/index.js b/src/router/index.js
index 8c845c76..097afef2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -21,6 +21,10 @@ const routes = [
       {
         path: '/roles',
         component: () => import('@/views/settings/Roles')
+      },
+      {
+        path: '/operationLog',
+        component: () => import('@/views/settings/OperationLog')
       }
     ]
   }
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index b7f251a8..24d759ff 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -2,10 +2,9 @@ import { post } from '@/utils/http'
 import router from '@/router'
 import { sortByOrderNum, getWelcomeMenu } from '@/permission'
 import dayjs from 'dayjs'
-import utc from 'dayjs/plugin/utc' // dependent on utc plugin
+import utc from 'dayjs/plugin/utc'
+import { ElMessage } from 'element-plus' // dependent on utc plugin
 dayjs.extend(utc)
-import bus from '@/utils/bus'
-import { ElMessage } from 'element-plus'
 
 const user = {
   state () {
@@ -45,14 +44,15 @@ const user = {
   actions: {
     loginSuccess (store, res) {
       // res.data.timezone = 'America/New_York'
-      $dayJs.tz.setDefault(res.data.timezone)
+      window.$dayJs.tz.setDefault(res.data.timezone)
       sessionStorage.setItem('cn-token', res.data.token)
       localStorage.setItem('cn-sys-name', res.data.systemName)
       if (res.systemLogo) {
         localStorage.setItem('cn-sys-logo', res.data.systemLogo)
       }
       localStorage.setItem('cn-sys-timezone', res.data.timezone)
-      localStorage.setItem('timezone-offset', dayjs.tz().utcOffset()/60)
+      localStorage.setItem('timezone-offset', dayjs.tz().utcOffset() / 60)
+      localStorage.setItem('timezone-local-offset', dayjs().utcOffset() / 60)
       post('/sys/user/permissions', { token: res.data.token }).then(res => {
         const menuList = sortByOrderNum(res.data.menus)
         store.commit('setMenuList', menuList)
diff --git a/src/views/settings/OperationLog.vue b/src/views/settings/OperationLog.vue
new file mode 100644
index 00000000..fe0a2539
--- /dev/null
+++ b/src/views/settings/OperationLog.vue
@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <cn-data-list
+      ref="dataList"
+      :api="url"
+      :layout="['searchInput', 'elementSet']"
+      v-model:custom-table-title="tools.customTableTitle"
+      :from="fromRoute.operationLog"
+      @search="search"
+      :search-msg="searchMsg">
+      <template v-slot:default>
+        <operation-log-table
+          ref="dataTable"
+          v-loading="tools.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
+          :height="mainTableHeight"
+          :table-data="tableData"
+          @del="del"
+          @edit="edit"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange"
+          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></operation-log-table>
+      </template>
+      <!-- 分页组件 -->
+      <template #pagination>
+        <pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
+      </template>
+    </cn-data-list>
+  </div>
+</template>
+<script>
+import cnDataList from '@/components/table/CnDataList'
+import dataListMixin from '@/mixins/dataList'
+import operationLogTable from '@/components/table/settings/OperationLogTable'
+
+export default {
+  name: 'operationLog',
+  components: {
+    cnDataList,
+    operationLogTable
+  },
+  mixins: [dataListMixin],
+  data () {
+    return {
+      url: 'sys/log',
+      tableId: 'operationLogTable', // 需要分页的table的id，用于记录每页数量
+      searchMsg: { // 给搜索框子组件传递的信息
+        searchLabelList: [
+          {
+            id: 11,
+            name: this.$t('config.operationlog.type'),
+            type: 'input',
+            label: 'type',
+            disabled: false
+          }, {
+            id: 12,
+            name: this.$t('config.operationlog.username'),
+            type: 'input',
+            label: 'username',
+            disabled: false
+          }, {
+            id: 13,
+            name: this.$t('config.operationlog.operation'),
+            type: 'selectString',
+            label: 'operation',
+            disabled: false
+          }, {
+            id: 14,
+            name: this.$t('config.operationlog.operaId'),
+            type: 'input',
+            label: 'operaId',
+            disabled: false
+          }, {
+            id: 16,
+            name: this.$t('config.operationlog.state'),
+            type: 'selectString',
+            label: 'state',
+            disabled: false
+          }, {
+            id: 17,
+            name: this.$t('config.operationlog.params'),
+            type: 'input',
+            label: 'params',
+            disabled: false
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/settings/Roles.vue b/src/views/settings/Roles.vue
index 4d18061f..db5d5ebb 100644
--- a/src/views/settings/Roles.vue
+++ b/src/views/settings/Roles.vue
@@ -14,7 +14,7 @@
         </button>
         <delete-button id="role-list-batch-delete" v-has="'role_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
       </template>
-      <template v-slot:default="slotProps">
+      <template v-slot:default>
         <roles-table
           ref="dataTable"
           v-loading="tools.loading"
@@ -27,7 +27,7 @@
           @orderBy="tableDataSort"
           @reload="getTableData"
           @selectionChange="selectionChange"
-          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></roles-table>
+          @showBottomBox="(targetTab) => { $refs.dataList.showBottomBox(targetTab, object) }"></roles-table>
       </template>
       <!-- 分页组件 -->
       <template #pagination>
@@ -40,18 +40,17 @@
   </div>
 </template>
 <script>
-  import cnDataList from '@/components/table/CnDataList'
-  import dataListMixin from '@/mixins/dataList'
-  import rolesTable from '@/components/table/settings/RoleTable'
-  import roleBox from '@/components/rightBox/settings/RoleBox'
-  import { put } from '@/utils/http'
+import cnDataList from '@/components/table/CnDataList'
+import dataListMixin from '@/mixins/dataList'
+import rolesTable from '@/components/table/settings/RoleTable'
+import roleBox from '@/components/rightBox/settings/RoleBox'
 
 export default {
   name: 'roles',
   components: {
     cnDataList,
     roleBox,
-    rolesTable,
+    rolesTable
   },
   mixins: [dataListMixin],
   data () {