feat: 🎸 layout布局重构中

src/components/Logo/index.vue

@@ -1,13 +1,13 @@
 <template>
-  <router-link class="app-logo" to="/">
+  <router-link class="app-logo" to="/" :class="{'app-logo--Top': layout !== 'Classic'}">
     <img :src="require('@/assets/img/logo.png')">
     <div v-if="show" class="sidebar-title">{{ title }}</div>
   </router-link>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, watch, PropType } from 'vue'
-import config from '_p/index/config'
+import { defineComponent, ref, watch, PropType, computed } from 'vue'
+import { appStore } from '_p/index/store/modules/app'
 
 export default defineComponent({
   name: 'Logo',
@@ -19,21 +19,28 @@ export default defineComponent({
   },
   setup(props) {
     const show = ref<boolean>(true)
+    const title = computed(() => appStore.title)
+    const layout = computed(() => appStore.layout)
     watch(
       () => props.collapsed,
       (collapsed: boolean) => {
-        if (!collapsed) {
-          setTimeout(() => {
-            show.value = !collapsed
-          }, 400)
+        if (layout.value !== 'Classic') {
+          show.value = true
         } else {
-          show.value = !collapsed
+          if (!collapsed) {
+            setTimeout(() => {
+              show.value = !collapsed
+            }, 400)
+          } else {
+            show.value = !collapsed
+          }
         }
       }
     )
     return {
       show,
-      title: config.title
+      title,
+      layout
     }
   }
 })
@@ -44,7 +51,7 @@ export default defineComponent({
   display: flex;
   align-items: center;
   cursor: pointer;
-  height: @topSilderHeight;
+  height: @topSiderHeight;
   width: 100%;
   background-color: @menuBg;
   img {
@@ -59,7 +66,22 @@ export default defineComponent({
     margin-left: 12px;
   }
   .sidebar-title {
-    color: #fff;
+    color: @menuActiveText;
+  }
+}
+.app-logo--Top {
+  width: auto;
+  background-color: @topMenuBg;
+  transition: background 0.2s;
+  padding: 0 5px;
+  &:hover {
+    background: #f6f6f6;
+  }
+  img {
+    margin-left: 0;
+  }
+  .sidebar-title {
+    color: @topMenuText;
   }
 }
 </style>