feat: add logo

src/layout/components/sidebar/Logo.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
+    <transition name="sidebarLogoFade">
+      <router-link
+        v-if="collapse"
+        key="collapse"
+        :title="settings.title"
+        class="sidebar-logo-link"
+        to="/"
+      >
+        <i class="fa fa-optin-monster"></i>
+        <h1 class="sidebar-title">{{ settings.title }}</h1>
+      </router-link>
+      <router-link v-else key="expand" :title="settings.title" class="sidebar-logo-link" to="/">
+        <i class="fa fa-optin-monster"></i>
+        <h1 class="sidebar-title">{{ settings.title }}</h1>
+      </router-link>
+    </transition>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import settings from "/@/settings";
+export default defineComponent({
+  props: {
+    collapse: {
+      type: Boolean,
+      required: true
+    }
+  },
+  setup() {
+    return {
+      settings
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.sidebar-logo-container {
+  position: relative;
+  width: 100%;
+  height: 50px;
+  background: #2b2f3a;
+  text-align: center;
+  overflow: hidden;
+
+  .sidebar-logo-link {
+    height: 100%;
+
+    .sidebar-title {
+      display: inline-block;
+      margin: 0;
+      color: #fff;
+      font-weight: 600;
+      line-height: 50px;
+      font-size: 20px;
+      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+    }
+
+    .fa-optin-monster {
+      font-size: 38px;
+      color: #1890ff;
+      margin-top: 5px;
+    }
+  }
+
+  .collapse {
+    .sidebar-logo {
+      margin-right: 0px;
+    }
+  }
+}
+</style>

src/layout/components/sidebar/index.vue

@@ -1,35 +1,47 @@
 <template>
-  <el-scrollbar wrap-class="scrollbar-wrapper">
-    <el-menu
-      :default-active="activeMenu"
-      :collapse="isCollapse"
-      unique-opened
-      :collapse-transition="false"
-      mode="vertical"
-      @select="menuSelect"
-    >
-      <sidebar-item
-        v-for="route in routes"
-        :key="route.path"
-        :item="route"
-        :base-path="route.path"
-      />
-    </el-menu>
-  </el-scrollbar>
+  <div :class="{'has-logo': showLogo}">
+    <Logo v-if="showLogo === '1'" :collapse="isCollapse" />
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-menu
+        :default-active="activeMenu"
+        :collapse="isCollapse"
+        unique-opened
+        :collapse-transition="false"
+        mode="vertical"
+        @select="menuSelect"
+      >
+        <sidebar-item
+          v-for="route in routes"
+          :key="route.path"
+          :item="route"
+          :base-path="route.path"
+        />
+      </el-menu>
+    </el-scrollbar>
+  </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, unref, nextTick } from "vue";
+import {
+  computed,
+  defineComponent,
+  ref,
+  unref,
+  nextTick,
+  onBeforeMount
+} from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useStore } from "vuex";
 import SidebarItem from "./SidebarItem.vue";
 import { algorithm } from "../../../utils/algorithm";
 import { useDynamicRoutesHook } from "../tag/tagsHook";
 import { emitter } from "/@/utils/mitt";
+import Logo from "./Logo.vue";
+import { storageLocal } from "/@/utils/storage";
 
 export default defineComponent({
   name: "sidebar",
-  components: { SidebarItem },
+  components: { SidebarItem, Logo },
   setup() {
     const router = useRouter().options.routes;
 
@@ -37,6 +49,8 @@ export default defineComponent({
 
     const route = useRoute();
 
+    const showLogo = ref(storageLocal.getItem("logoVal") || "1");
+
     const activeMenu = computed(() => {
       const { meta, path } = route;
       if (meta.activeMenu) {
@@ -68,11 +82,18 @@ export default defineComponent({
       emitter.emit("changLayoutRoute", indexPath);
     };
 
+    onBeforeMount(() => {
+      emitter.on("logoChange", key => {
+        showLogo.value = key;
+      });
+    });
+
     return {
       routes: computed(() => algorithm.increaseIndexes(router)),
       activeMenu,
       isCollapse: computed(() => !store.getters.sidebar.opened),
-      menuSelect
+      menuSelect,
+      showLogo
     };
   }
 });