add logo text mode

Author: ZhaoJiSen

src/layout/components/NavHeader/index.vue

@@ -42,8 +42,7 @@
     <ul class="navbar-left">
       <li class="left-item">
         <div class="nav-logo">
-          <!-- TODO 根据 INTERFACE store 的开关动态设置 -->
-          <Logo v-if="showLogo" :collapse="true" />
+          <Logo v-if="showLogo" />
         </div>
       </li>
       <li v-if="orgsShow" class="left-item" style="margin-left: 20px">

src/layout/components/NavLeft/Logo.vue

@@ -1,7 +1,7 @@
 <template>
-  <div :class="{ collapse: collapse }" class="sidebar-logo-container">
+  <div :class="{ collapse: logoTextMode }" class="sidebar-logo-container">
     <transition name="sidebarLogoFade">
-      <a v-if="collapse" key="collapse" class="sidebar-logo-link" @click="handleClick">
+      <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>
@@ -17,17 +17,8 @@ import { mapGetters } from 'vuex'
 
 export default {
   name: 'SidebarLogo',
-  props: {
-    collapse: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {}
-  },
   computed: {
-    ...mapGetters(['viewRoutes', 'publicSettings']),
+    ...mapGetters(['viewRoutes', 'publicSettings', 'logoTextMode']),
     // eslint-disable-next-line vue/return-in-computed-property
     logoTextSrc() {
       return this.publicSettings['INTERFACE']['logo_index']
@@ -61,7 +52,6 @@ export default {
       }
     }
   },
-  created() {},
   methods: {
     handleClick() {
       const currentPath = this.$route.path

src/store/getters.js

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

src/store/modules/settings.js

@@ -5,13 +5,17 @@ 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,
   publicSettings: {},
   hasValidLicense: false,
   authMethods: {},
@@ -34,6 +38,9 @@ const mutations = {
       state.hasValidLicense = settings['XPACK_LICENSE_IS_VALID']
     }
   },
+  SET_LOGO_TEXT_MODE: (state, value) => {
+    state.logoTextMode = value
+  },
   SET_SECURITY_WATERMARK_ENABLED: (state, value) => {
     state.publicSettings['SECURITY_WATERMARK_ENABLED'] = value
   },
@@ -50,6 +57,7 @@ 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 || {}