NEZ-1325 feat：系统外观配置

2021-11-24 15:55:18 +08:00
parent 9f734e9743
commit f697be20cc
4 changed files with 76 additions and 28 deletions
--- a/nezha-fronted/src/components/common/login.vue
+++ b/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>
--- a/nezha-fronted/src/components/layout/leftMenu.vue
+++ b/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 () {
--- a/nezha-fronted/src/permission.js
+++ b/nezha-fronted/src/permission.js
@@ -8,13 +8,31 @@ 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 => {
+      const appearance = new Promise(resolve => {
+        get(config.body.baseUrl + '/sys/appearance').then(res => {
+          // console.log(res)
+          if (res.code === 200) {
+            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) {
@@ -33,6 +51,7 @@ router.beforeEach((to, from, next) => {
          })
        }
      })
+    })
  } else if (sessionStorage.getItem('nz-token')) {
    const i18nRequest = new Promise(resolve => {
      // 从localStorage加载i18n
@@ -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)
+  }
+}
--- a/nezha-fronted/src/store/user.js
+++ b/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)