perf: update logo mode

src/layout/components/NavLeft/Logo.vue

@@ -1,12 +1,12 @@
 <template>
-  <div :class="{ collapse: logoTextMode }" class="sidebar-logo-container">
+  <div :class="{ collapse: !sidebar.opened, 'logo-mode-split': logoMode === 'split' }" class="sidebar-logo-container">
     <transition name="sidebarLogoFade">
-      <a v-if="logoTextMode" key="collapse" class="sidebar-logo-link" @click="handleClick">
-        <img :src="logoSrc" alt="logo" class="sidebar-logo" />
-        <span :style="logoTitleStyle" class="sidebar-title">{{ logoTitle }}</span>
+      <a v-if="logoMode === 'split'" key="collapse" class="sidebar-logo-link" @click="handleClick">
+        <img :src="logoSrc" alt="logo" class="sidebar-logo">
+        <span v-if="sidebar.opened" :style="logoTitleStyle" class="sidebar-title">{{ logoTitle }}</span>
       </a>
       <a v-else key="expand" class="sidebar-logo-link" @click="handleClick">
-        <img :src="logoTextSrc" alt="logo" class="sidebar-logo-text" />
+        <img :src="logoTextSrc" alt="logo" class="sidebar-logo-text">
       </a>
     </transition>
   </div>
@@ -18,7 +18,7 @@ import { mapGetters } from 'vuex'
 export default {
   name: 'SidebarLogo',
   computed: {
-    ...mapGetters(['viewRoutes', 'publicSettings', 'logoTextMode']),
+    ...mapGetters(['viewRoutes', 'publicSettings', 'logoMode', 'sidebar']),
     // eslint-disable-next-line vue/return-in-computed-property
     logoTextSrc() {
       return this.publicSettings['INTERFACE']['logo_index']
@@ -90,6 +90,12 @@ export default {
   text-align: center;
   overflow: hidden;
 
+  // &.collapse.logo-mode-split {
+  //   .sidebar-logo-link {
+  //     margin-left: 8px;
+  //   }
+  // }
+
   & .sidebar-logo-link {
     box-sizing: border-box;
     display: flex;

src/store/getters.js

@@ -22,7 +22,7 @@ const getters = {
   currentViewRoute: state => state.permission.currentViewRoute,
   viewRoutes: state => state.permission.addRoutes,
   publicSettings: state => state.settings.publicSettings,
-  logoTextMode: state => state.settings.logoTextMode,
+  logoMode: state => state.settings.logoMode,
   currentOrgRoles: state => state.users.roles,
   currentOrgPerms: state => state.users.perms,
   MFAVerifyAt: state => state.users.MFAVerifyAt,

src/store/modules/settings.js

@@ -5,17 +5,14 @@ import { changeMenuColor } from '@/utils/theme/color'
 import request from '@/utils/request'
 import { scopedLocalStorage as localStorage } from '@/utils/storage'
 
-const parseBooleanEnv = value => String(value).trim() === '1'
-
 const { showSettings, fixedHeader, sidebarLogo, tagsView } = defaultSettings
-const envLogoTextMode = parseBooleanEnv(process.env.VUE_APP_LOGO_TEXT_MODE)
 
 const state = {
   showSettings: showSettings,
   fixedHeader: fixedHeader,
   sidebarLogo: sidebarLogo,
   tagsView: tagsView,
-  logoTextMode: envLogoTextMode,
+  logoMode: 'combine',
   publicSettings: {},
   hasValidLicense: false,
   authMethods: {},
@@ -23,6 +20,50 @@ const state = {
   tableActionButtonType: 'default'
 }
 
+function updateThemeColors(state, interfaceSettings) {
+  const responseThemeColors = interfaceSettings?.theme_info?.colors
+  const cachedThemeColors = (() => {
+    if (state.themeColors && Object.keys(state.themeColors).length > 0) {
+      return state.themeColors
+    }
+    try {
+      return JSON.parse(localStorage.getItem('themeColors')) || {}
+    } catch (error) {
+      return {}
+    }
+  })()
+
+  const themeColors =
+     Object.keys(responseThemeColors).length > 0 ? responseThemeColors : cachedThemeColors
+
+  const settings = {
+    ...(interfaceSettings || {}),
+    theme_info: {
+      ...(interfaceSettings?.theme_info || {}),
+      colors: themeColors
+    }
+  }
+
+  changeThemeColors(themeColors || {})
+  return settings
+}
+
+function updateTitleIcon(interfaceSettings) {
+  const faviconURL = interfaceSettings?.favicon
+  let link = document.querySelector("link[rel*='icon']")
+  if (!link) {
+    link = document.createElement('link')
+    link.type = 'image/x-icon'
+    link.rel = 'shortcut icon'
+    document.getElementsByTagName('head')[0].appendChild(link)
+  }
+  if (faviconURL) {
+    link.href = faviconURL
+  }
+  // 动态修改Title
+  document.title = interfaceSettings?.login_title || ''
+}
+
 const mutations = {
   CHANGE_SETTING: (state, { key, value }) => {
     if (state.hasOwnProperty(key)) {
@@ -38,8 +79,8 @@ const mutations = {
       state.hasValidLicense = settings['XPACK_LICENSE_IS_VALID']
     }
   },
-  SET_LOGO_TEXT_MODE: (state, value) => {
-    state.logoTextMode = value
+  SET_LOGO_MODE: (state, value) => {
+    state.logoMode = value
   },
   SET_SECURITY_WATERMARK_ENABLED: (state, value) => {
     state.publicSettings['SECURITY_WATERMARK_ENABLED'] = value
@@ -57,54 +98,22 @@ const actions = {
   // get user Profile
   getPublicSettings({ commit, state }, isOpen) {
     return new Promise((resolve, reject) => {
-      commit('SET_LOGO_TEXT_MODE', envLogoTextMode)
       getPublicSettings(isOpen)
         .then(response => {
           const data = response || {}
           if (isOpen) {
-            const faviconURL = data['INTERFACE']?.favicon
-            let link = document.querySelector("link[rel*='icon']")
-            if (!link) {
-              link = document.createElement('link')
-              link.type = 'image/x-icon'
-              link.rel = 'shortcut icon'
-              document.getElementsByTagName('head')[0].appendChild(link)
+            updateTitleIcon(data?.INTERFACE)
+            const interfaceSettings = updateThemeColors(state, data?.INTERFACE)
+            const nextSettings = {
+              ...data,
+              INTERFACE: interfaceSettings
             }
-            if (faviconURL) {
-              link.href = faviconURL
+            if (interfaceSettings.logo_mode !== 'combine') {
+              commit('SET_LOGO_MODE', interfaceSettings.logo_mode)
             }
-            // 动态修改Title
-            document.title = data?.INTERFACE?.login_title || ''
+            commit('SET_PUBLIC_SETTINGS', nextSettings)
           }
 
-          const responseThemeColors = data?.INTERFACE?.theme_info?.colors || {}
-
-          const cachedThemeColors = (() => {
-            if (state.themeColors && Object.keys(state.themeColors).length > 0) {
-              return state.themeColors
-            }
-            try {
-              return JSON.parse(localStorage.getItem('themeColors')) || {}
-            } catch (error) {
-              return {}
-            }
-          })()
-
-          const themeColors =
-            Object.keys(responseThemeColors).length > 0 ? responseThemeColors : cachedThemeColors
-          const nextSettings = {
-            ...data,
-            INTERFACE: {
-              ...(data?.INTERFACE || {}),
-              theme_info: {
-                ...(data?.INTERFACE?.theme_info || {}),
-                colors: themeColors
-              }
-            }
-          }
-
-          commit('SET_PUBLIC_SETTINGS', nextSettings)
-          changeThemeColors(themeColors || {})
           resolve(response)
         })
         .catch(error => {