NEZ-1325 feat： 系统外观配置

nezha-fronted/src/components/common/login.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="login">
+  <div class="login" id="login-bgimg">
     <div class="model"></div>
     <div class="login-main">
       <div class="logo"><img src="../../assets/img/logo-big.png"></div>
@@ -142,7 +142,8 @@ export default {
       dialogLoading: false,
       fileShow: false,
       fileContent: '',
-      recoveryCode: []
+      recoveryCode: [],
+      bgImg: '' // 背景图
     }
   },
   methods: {
@@ -157,7 +158,7 @@ export default {
           if (res.code == 200) {
             // 登录成功，记录用户名、token和lang
             this.authToken = res.data.authToken
-            this.lang = res.data.user.lang
+            this.lang = res.data.user.lang || localStorage.getItem('nz-language')
             this.$i18n.locale = this.lang
             // 获取可选语言
             get('/sys/dict/all?type=lang').then(response => {
@@ -329,6 +330,10 @@ export default {
     document.getElementById('usernameInput').focus()
     this.licenseStat()
     this.initEvent()
+    this.bgImg = localStorage.getItem('nz-sys-bgImg')
+    if (this.bgImg) {
+      document.getElementById('login-bgimg').style['background-image'] = `url(${this.bgImg})`
+    }
   }
 }
 </script>

nezha-fronted/src/components/layout/leftMenu.vue

@@ -50,6 +50,7 @@ export default {
         self.logo = e.value
       }
     })
+    this.logo = localStorage.getItem('nz-sys-logo')
   },
   computed: {
     menuList () {

nezha-fronted/src/permission.js

@@ -8,30 +8,49 @@ import VueResource from 'vue-resource'
 
 Vue.use(VueResource)
 
-const loginWhiteList = ['/setup', '/sys/license/upload', '/sys/license/state'] // 免登陆白名单
+const loginWhiteList = ['/setup', '/sys/license/upload', '/sys/license/state', '/sys/appearance'] // 免登陆白名单
 const permissionWhiteList = ['/profile', '/menu', ...loginWhiteList] // 权限白名单
 
 router.beforeEach((to, from, next) => {
   const configUrl = 'static/config.json?Timestamp=' + new Date().getTime()
-  if (to.path === '/login') { // 拦截登录页面，系统初始化检查
+  if (to.path === '/login') { // 拦截登录页面，现货区外观设置 再系统初始化检查
     Vue.http.get(configUrl).then(config => {
-      get(config.body.baseUrl + 'setup/inited').then(res => {
-        if (res.code === 200) {
-          if (res.inited === 0) {
-            next({ path: '/setup' })
-          } else {
-            next()
-          }
-        }
-      })
-      if (!store.getters.i18nIsReady) {
-        get(config.body.baseUrl + 'sys/i18n/lang').then(res => {
+      const appearance = new Promise(resolve => {
+        get(config.body.baseUrl + '/sys/appearance').then(res => {
+          // console.log(res)
           if (res.code === 200) {
-            loadI18n(res.data)
-            store.commit('i18nReady', true)
+            localStorage.setItem('nz-sys-name', res.data.system_name)
+            localStorage.setItem('nz-sys-logo', res.data.system_logo)
+            localStorage.setItem('nz-sys-favicon', res.data.system_favicon)
+            localStorage.setItem('nz-language', res.data.lang)
+            localStorage.setItem('nz-sys-timezone', res.data.timezone)
+            localStorage.setItem('nz-sys-bgImg', res.data.system_bgImg)
+            localStorage.setItem('nz-default-theme', res.data.theme)
+            localStorage.setItem('nz-default-dateFormat', res.data.dateFormat)
+            changeFavicon(res.data.system_favicon)
+          }
+          resolve()
+        })
+      })
+      appearance.then(() => {
+        get(config.body.baseUrl + 'setup/inited').then(res => {
+          if (res.code === 200) {
+            if (res.inited === 0) {
+              next({ path: '/setup' })
+            } else {
+              next()
+            }
           }
         })
-      }
+        if (!store.getters.i18nIsReady) {
+          get(config.body.baseUrl + 'sys/i18n/lang').then(res => {
+            if (res.code === 200) {
+              loadI18n(res.data)
+              store.commit('i18nReady', true)
+            }
+          })
+        }
+      })
     })
   } else if (sessionStorage.getItem('nz-token')) {
     const i18nRequest = new Promise(resolve => {
@@ -166,3 +185,17 @@ export function sortByOrderNum (menuList) {
 function getChildMenu (menu) {
   return menu.children.filter(m => m.type == 1)
 }
+function changeFavicon (link) { // 设置网页标签的图片
+  let $favicon = document.querySelector('link[rel="icon"]')
+  // If a <link rel="icon"> element already exists,
+  // change its href to the given link.
+  if ($favicon !== null) {
+    $favicon.href = link
+    // Otherwise, create a new element and append it to <head>.
+  } else {
+    $favicon = document.createElement('link')
+    $favicon.rel = 'icon'
+    $favicon.href = link
+    document.head.appendChild($favicon)
+  }
+}

nezha-fronted/src/store/user.js

@@ -47,26 +47,35 @@ const user = {
   },
   actions: {
     loginSuccess (store, res) {
-      sessionStorage.setItem('nz-token', res.data.token)
-      localStorage.setItem('nz-sys-name', res.data.systemName)
-      if (res.systemLogo) {
-        localStorage.setItem('nz-sys-logo', res.data.systemLogo)
+      const defaultAppearance = {
+        system_name: localStorage.getItem('nz-sys-name'),
+        system_logo: localStorage.getItem('nz-sys-logo'),
+        system_favicon: localStorage.getItem('nz-sys-favicon'),
+        language: localStorage.getItem('nz-language'),
+        timezone: localStorage.getItem('nz-sys-timezone'),
+        theme: localStorage.getItem('nz-default-theme'),
+        system_bgImg: localStorage.getItem('nz-sys-bgImg'),
+        dateFormat: localStorage.getItem('nz-default-dateFormat')
       }
-      localStorage.setItem('nz-sys-timezone', res.data.timezone)
+      sessionStorage.setItem('nz-token', res.data.token)
+      localStorage.setItem('nz-sys-name', res.data.systemName || defaultAppearance.system_name)
+      if (res.systemLogo || defaultAppearance.system_logo) {
+        localStorage.setItem('nz-sys-logo', res.data.systemLogo || defaultAppearance.system_logo)
+      }
+      localStorage.setItem('nz-sys-timezone', res.data.timezone || defaultAppearance.timezone)
 
-      const currentTheme = res.data.user.theme ? theme.find(t => t.value === res.data.user.theme).label : 'light'
+      const currentTheme = res.data.user.theme ? theme.find(t => t.value === res.data.user.theme).label : defaultAppearance.theme
       localStorage.setItem(`nz-user-${res.data.user.id}-theme`, currentTheme)
       const body = document.getElementsByTagName('body')[0]
       body.setAttribute('class', `theme-${currentTheme}`)
 
-      localStorage.setItem('timezoneOffset', moment.tz(res.data.timezone).format('Z'))
+      localStorage.setItem('timezoneOffset', moment.tz(res.data.timezone || defaultAppearance.timezone).format('Z'))
       localStorage.setItem('nz-sys-default-cabinet-usize', res.data.defaultCabinetUsize)
       localStorage.setItem('nz-sys-max-terminal-num', res.data.maxTerminalNum)
       localStorage.setItem('nz-sys-asset-ping-switch', res.data.assetPingSwitch)
       localStorage.setItem('nz-unnsaved-change', res.data.unsavedChange)
       localStorage.setItem('nz-mfa-enable', Number(res.data.mfaAuthEnable) ? 1 : 0)
-      store.commit('setLanguage', res.data.user.lang)
-      console.log(res.data.user.lang)
+      store.commit('setLanguage', res.data.user.lang || defaultAppearance.language)
       post('/sys/user/permissions', { token: res.data.token }).then(res => {
         const menuList = sortByOrderNum(res.data.menus)
         store.commit('setMenuList', menuList)