优化分栏布局logo

src/layout/component/columnsAside.vue

@@ -1,6 +1,9 @@
 <template>
-  <div class="layout-columns-aside">
-    <el-scrollbar>
+  <div class="layout-columns-aside my-flex-column">
+    <div v-if="setShowLogo" class="layout-logo">
+      <img :src="logoMini" class="layout-logo-medium-img" />
+    </div>
+    <el-scrollbar class="my-flex-fill">
       <ul @mouseleave="onColumnsAsideMenuMouseleave()">
         <li
           v-for="(v, k) in state.columnsAsideList"
@@ -45,13 +48,14 @@
 </template>
 
 <script setup lang="ts" name="layoutColumnsAside">
-import { reactive, ref, onMounted, nextTick, watch, onUnmounted } from 'vue'
+import { reactive, ref, onMounted, nextTick, watch, onUnmounted, computed } from 'vue'
 import { useRoute, useRouter, onBeforeRouteUpdate, RouteRecordRaw } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import pinia from '/@/stores/index'
 import { useRoutesList } from '/@/stores/routesList'
 import { useThemeConfig } from '/@/stores/themeConfig'
 import mittBus from '/@/utils/mitt'
+import logoMini from '/@/assets/logo-mini.svg'
 
 // 定义变量内容
 const columnsAsideOffsetTopRefs = ref<RefType>([])
@@ -72,6 +76,12 @@ const state = reactive<ColumnsAsideState>({
   routeSplit: [],
 })
 
+// 设置显示/隐藏 logo
+const setShowLogo = computed(() => {
+  let { layout, isShowLogo } = themeConfig.value
+  return (isShowLogo && layout === 'defaults') || (isShowLogo && layout === 'columns')
+})
+
 // 设置菜单高亮位置移动
 const setColumnsAsideMove = (k: number) => {
   state.liIndex = k
@@ -269,4 +279,14 @@ watch(
     }
   }
 }
+
+.layout-logo {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &-medium-img {
+    width: 20px;
+  }
+}
 </style>

src/layout/logo/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="layout-logo" v-if="setShowLogo" @click="onThemeConfigChange">
-    <img :src="logoMini" class="layout-logo-medium-img" />
-    <span>{{ themeConfig.globalTitle }}</span>
+    <img v-if="showLogoMini" :src="logoMini" class="layout-logo-medium-img" />
+    <span class="my-line-1">{{ themeConfig.globalTitle }}</span>
   </div>
   <div class="layout-logo-size" v-else @click="onThemeConfigChange">
     <img :src="logoMini" class="layout-logo-size-img" />
@@ -23,6 +23,12 @@ const setShowLogo = computed(() => {
   let { isCollapse, layout } = themeConfig.value
   return !isCollapse || layout === 'classic' || document.body.clientWidth < 1000
 })
+
+const showLogoMini = computed(() => {
+  let { layout } = themeConfig.value
+  return layout !== 'columns'
+})
+
 // logo 点击实现菜单展开/收起
 const onThemeConfigChange = () => {
   if (themeConfig.value.layout === 'transverse') return false

src/theme/my-flex.scss

@@ -60,7 +60,7 @@
 
 // 自动伸缩
 .my-flex-fill {
-  flex: 1 1 auto;
+  flex: 1;
 }
 
 // 边界自动伸缩