diff --git a/nezha-fronted/src/components/common/mixin/system/systemMixin.js b/nezha-fronted/src/components/common/mixin/system/systemMixin.js
new file mode 100644
index 000000000..b61375c77
--- /dev/null
+++ b/nezha-fronted/src/components/common/mixin/system/systemMixin.js
@@ -0,0 +1,109 @@
+import moment from 'moment-timezone'
+import bus from '@/libs/bus'
+
+export default {
+  methods: {
+    queryTimezone: function () {
+      this.$get('/sys/timezone').then(response => {
+        if (response.code == 200) {
+          this.timezoneOption = response.data.list
+        }
+      })
+    },
+    querySetInfo: function (type) { // 切换tab
+      if (!type) {
+        console.error('type is required')
+        return
+      }
+      if (type !== 'link' && type !== 'notification' && type !== 'apiKey') {
+        const t = +new Date()
+        this.updatePath({ t })
+      }
+      if (type == 'reset' || type == 'link' || type == 'notification' || type == 'apiKey' || type == 'license') {
+        return
+      }
+      this.$get('/sys/config/' + type).then(response => {
+        if (response.code == 200) {
+          for (const key in response.data) {
+            this[type][key] = response.data[key]
+          }
+          if (type == 'basic') {
+            localStorage.setItem('nz-sys-name', this.basic.system_name)
+            localStorage.setItem('nz-sys-timezone', this.basic.timezone)
+            localStorage.setItem('nz-sys-logo', this.basic.system_logo)
+            localStorage.setItem('nz-sys-default-cabinet-usize', this.basic.default_cabinet_usize)
+            localStorage.setItem('nz-unsaved-change', this.basic.unsaved_change)
+            this.basic.map_center_config = JSON.parse(this.basic.map_center_config)
+            this.basic.pin_policy = JSON.parse(this.basic.pin_policy)
+            this.basic.lnglat = `${this.basic.map_center_config.longitude},${this.basic.map_center_config.latitude}`
+          } else if (type == 'terminal') {
+            localStorage.setItem('nz-sys-terminal-timeout', this.terminal.terminal_timeout)
+            localStorage.setItem('nz-sys-terminal-telnet-user-tip', this.terminal.terminal_telnet_user_tip)
+            localStorage.setItem('nz-sys-terminal-telnet-pin-tip', this.terminal.terminal_telnet_pin_tip)
+            localStorage.setItem('nz-sys-terminal-record-local-retention', this.terminal.terminal_record_local_retention)
+          }
+          if (type == 'email') {
+            this.email.email_auth_password = ''
+            this.$refs.emailForm.clearValidate()
+          }
+          if (type == 'monitor') {
+
+          }
+          this[type + 'Copy'] = Object.assign({}, this[type])
+        }
+      })
+    },
+    saveSetInfo: function (type, formName) {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          const param = Object.assign({}, this[type])
+          if (type == 'basic') {
+            const mapConfig = this.$refs.latlngPicker.getAttribute()
+            param.map_center_config = JSON.stringify(mapConfig)
+            param.pin_policy = JSON.stringify(this.basic.pin_policy)
+          }
+          const postParam = Object.assign({}, param)
+          for (const key in postParam[type]) {
+            postParam[type][key] = postParam[type][key] + ''
+          }
+          this.$put('/sys/config/' + type, postParam).then(response => {
+            this.prevent_opt.save = false
+            if (response.code == 200) {
+              this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+              // this.resetForm(formName);
+              if (type == 'basic') {
+                localStorage.setItem('nz-sys-timezone', param.timezone)
+                localStorage.setItem('timezoneOffset', moment.tz(param.timezone).format('Z'))
+                localStorage.setItem('nz-default-dateFormat', param.date_format)
+              }
+              this.dateFormatTimer()
+              setTimeout(() => {
+                this.querySetInfo(type)
+              }, 200)
+            } else {
+              this.$message.error(response.msg)
+            }
+          })
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    },
+    dateFormatTimer () {
+      const date = new Date()
+      const milli = date.getTime()
+      this.dateFormatList.map(e => {
+        if (e.label === 'DD/MM/YYYY HH:mm:ss') {
+          e.time = bus.timeFormate(bus.computeTimezone(milli), e.label)
+        } else if (e.label === 'MM/DD/YYYY HH:mm:ss') {
+          e.time = bus.timeFormate(bus.computeTimezone(milli), e.label)
+        } else {
+          e.time = bus.timeFormate(bus.computeTimezone(milli), e.label)
+        }
+      })
+    }
+  }
+}
diff --git a/nezha-fronted/src/components/page/config/basic.vue b/nezha-fronted/src/components/page/config/basic.vue
index 003c18188..f0ce41294 100644
--- a/nezha-fronted/src/components/page/config/basic.vue
+++ b/nezha-fronted/src/components/page/config/basic.vue
@@ -9,7 +9,7 @@
                      v-model="basic.language"
                      popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside"
                      size="small">
-            <template v-for="item in languageList">f
+            <template v-for="item in languageList">
               <el-option :key="item.value" :label="item.label" :value="item.value"></el-option>
             </template>
           </el-select>
@@ -125,11 +125,12 @@ import linkTab from '@/components/page/config/system/linkTab'
 import apiKeyTab from '@/components/page/config/system/apiKeyTab'
 import License from '@/components/page/config/system/license'
 import { latlng, port, positiveInteger, uSize } from '@/components/common/js/validate'
-import moment from 'moment-timezone'
-import bus from "@/libs/bus";
+import systemMixin from '@/components/common/mixin/system/systemMixin'
+import routerPathParams from '@/components/common/mixin/routerPathParams'
 
 export default {
   name: 'basic',
+  mixins: [systemMixin, routerPathParams],
   components: { draggable, latlngPicker, notifyMethod, linkTab, apiKeyTab, License },
   data () {
     return {
@@ -174,7 +175,21 @@ export default {
           { required: true, message: this.$t('validate.required'), trigger: 'blur' },
           { validator: latlng, trigger: 'blur' }
         ]
-      }
+      },
+      timezoneOption: [],
+      languageList: [
+        { value: 'en', label: 'English' },
+        { value: 'zh', label: '简体中文' }
+      ],
+      themeList: [
+        { value: 'light', label: 'Light' },
+        { value: 'dark', label: 'Dark' }
+      ],
+      dateFormatList: [
+        { value: 'DD/MM/YYYY HH:mm:ss', label: 'DD/MM/YYYY HH:mm:ss', time: '' },
+        { value: 'MM/DD/YYYY HH:mm:ss', label: 'MM/DD/YYYY HH:mm:ss', time: '' },
+        { value: 'YYYY-MM-DD HH:mm:ss', label: 'YYYY-MM-DD HH:mm:ss', time: '' }
+      ]
     }
   },
   mounted () {
@@ -190,107 +205,15 @@ export default {
       this.basic.map_center_config.zoom = zoom
       this.basic.lnglat = lnglat
     },
-    queryTimezone: function () {
-      this.$get('/sys/timezone').then(response => {
-        if (response.code == 200) {
-          this.timezoneOption = response.data.list
-        }
-      })
-    },
-    querySetInfo: function (type) { // 切换tab
-      if (!type) {
-        console.error('type is required')
-        return
-      }
-      if (type !== 'link' && type !== 'notification' && type !== 'apiKey') {
-        const t = +new Date()
-        this.updatePath({ t })
-      }
-      if (type == 'reset' || type == 'link' || type == 'notification' || type == 'apiKey' || type == 'license') {
-        return
-      }
-      this.$get('/sys/config/' + type).then(response => {
-        if (response.code == 200) {
-          for (const key in response.data) {
-            this[type][key] = response.data[key]
-          }
-          if (type == 'basic') {
-            localStorage.setItem('nz-sys-name', this.basic.system_name)
-            localStorage.setItem('nz-sys-timezone', this.basic.timezone)
-            localStorage.setItem('nz-sys-logo', this.basic.system_logo)
-            localStorage.setItem('nz-sys-default-cabinet-usize', this.basic.default_cabinet_usize)
-            localStorage.setItem('nz-unsaved-change', this.basic.unsaved_change)
-            this.basic.map_center_config = JSON.parse(this.basic.map_center_config)
-            this.basic.pin_policy = JSON.parse(this.basic.pin_policy)
-            this.basic.lnglat = `${this.basic.map_center_config.longitude},${this.basic.map_center_config.latitude}`
-          } else if (type == 'terminal') {
-            localStorage.setItem('nz-sys-terminal-timeout', this.terminal.terminal_timeout)
-            localStorage.setItem('nz-sys-terminal-telnet-user-tip', this.terminal.terminal_telnet_user_tip)
-            localStorage.setItem('nz-sys-terminal-telnet-pin-tip', this.terminal.terminal_telnet_pin_tip)
-            localStorage.setItem('nz-sys-terminal-record-local-retention', this.terminal.terminal_record_local_retention)
-          }
-          if (type == 'email') {
-            this.email.email_auth_password = ''
-            this.$refs.emailForm.clearValidate()
-          }
-          if (type == 'monitor') {
+    timezoneOptionHandler: function (offset) {
+      const offsetHour = (offset / 1000 / 60 / 60).toFixed(0)
 
-          }
-          this[type + 'Copy'] = Object.assign({}, this[type])
-        }
-      })
-    },
-    saveSetInfo: function (type, formName) {
-      if (this.prevent_opt.save) { return } ;
-      this.prevent_opt.save = true
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          const param = Object.assign({}, this[type])
-          if (type == 'basic') {
-            const mapConfig = this.$refs.latlngPicker.getAttribute()
-            param.map_center_config = JSON.stringify(mapConfig)
-            param.pin_policy = JSON.stringify(this.basic.pin_policy)
-          }
-          const postParam = Object.assign({}, param)
-          for (const key in postParam[type]) {
-            postParam[type][key] = postParam[type][key] + ''
-          }
-          this.$put('/sys/config/' + type, postParam).then(response => {
-            this.prevent_opt.save = false
-            if (response.code == 200) {
-              this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
-              // this.resetForm(formName);
-              if (type == 'basic') {
-                localStorage.setItem('nz-sys-timezone', param.timezone)
-                localStorage.setItem('timezoneOffset', moment.tz(param.timezone).format('Z'))
-                localStorage.setItem('nz-default-dateFormat', param.date_format)
-              }
-              this.dateFormatTimer()
-              setTimeout(() => {
-                this.querySetInfo(type)
-              }, 200)
-            } else {
-              this.$message.error(response.msg)
-            }
-          })
-        } else {
-          this.prevent_opt.save = false
-          return false
-        }
-      })
-    },
-    dateFormatTimer () {
-      const date = new Date()
-      const milli = date.getTime()
-      this.dateFormatList.map(e => {
-        if (e.label === 'DD/MM/YYYY HH:mm:ss') {
-          e.time = bus.timeFormate(bus.computeTimezone(milli), e.label)
-        } else if (e.label === 'MM/DD/YYYY HH:mm:ss') {
-          e.time = bus.timeFormate(bus.computeTimezone(milli), e.label)
-        } else {
-          e.time = bus.timeFormate(bus.computeTimezone(milli), e.label)
-        }
-      })
+      const offsetMinute = offset % (1000 * 60 * 60) / (1000 * 60)
+
+      const hour = offsetHour > 0 ? (offsetHour < 9 ? '+0' + offsetHour : '+' + offsetHour) : (offsetHour == 0 ? (offsetMinute == 0 ? '' : '+00') : (offsetHour > -10 ? '-0' + Math.abs(offsetHour) : offsetHour))
+
+      const minute = offsetHour == 0 && offsetMinute == 0 ? '' : (offsetMinute == 0 ? ':00' : (Math.abs(offsetMinute) > 9 ? ':' + Math.abs(offsetMinute) : ':0' + Math.abs(offsetMinute)))
+      return 'UTC' + hour + minute
     }
   }
 }