feat: 侧边栏深色、logo组件

src/layout/components/Aside/index.vue

@@ -1,9 +1,6 @@
 <template>
   <div :class="asideDark ? 'aside dark' : 'aside'">
-    <div class="logo_head">
-      <img :src="Logo" class="logo" />
-      <span class="logo_title" v-if="!collapsed">dc admin</span>
-    </div>
+    <Logo />
     <a-layout-sider :collapsed="collapsed" breakpoint="xl" class="layout_side" :width="220">
       <a-scrollbar style="height: 100%; overflow: auto" outer-class="scrollbar"><Menu /></a-scrollbar>
     </a-layout-sider>
@@ -11,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import Logo from "@/assets/img/logo.jpg";
+import Logo from "@/layout/components/Logo/index.vue";
 import Menu from "@/layout/components/Menu/index.vue";
 import { storeToRefs } from "pinia";
 import { useThemeConfig } from "@/store/modules/theme-config";
@@ -27,22 +24,6 @@ const { collapsed, asideDark } = storeToRefs(themeStore);
 .dark {
   background: #232324;
 }
-// 头部
-.logo_head {
-  height: 60px;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  box-sizing: border-box;
-  border-right: $border-1 solid $color-border-2;
-  .logo {
-    width: 30px;
-  }
-  .logo_title {
-    font-weight: bold;
-    font-size: $font-size-title-2;
-  }
-}
 
 .layout_side {
   height: calc(100% - 60px);

src/layout/components/Logo/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="logo_head">
     <img :src="Logo" class="logo" />
-    <span class="logo_title" v-if="!collapsed">dc admin</span>
+    <span :class="isDark ? 'logo_title dark' : 'logo_title'" v-if="!collapsed">dc admin</span>
   </div>
 </template>
 
@@ -10,7 +10,15 @@ import Logo from "@/assets/img/logo.jpg";
 import { storeToRefs } from "pinia";
 import { useThemeConfig } from "@/store/modules/theme-config";
 const themeStore = useThemeConfig();
-const { collapsed } = storeToRefs(themeStore);
+const { collapsed, asideDark, layoutType } = storeToRefs(themeStore);
+
+const isDark = computed(() => {
+  if (asideDark.value && layoutType.value === "layoutDefaults") {
+    return true;
+  } else {
+    return false;
+  }
+});
 </script>
 
 <style lang="scss" scoped>
@@ -31,5 +39,8 @@ const { collapsed } = storeToRefs(themeStore);
     font-weight: bold;
     font-size: $font-size-title-2;
   }
+  .dark {
+    color: #fff;
+  }
 }
 </style>