feat: add logo

src/layout/components/setting/index.vue

@@ -1,29 +1,5 @@
 <template>
   <panel>
-    <el-divider>界面显示</el-divider>
-    <ul class="setting">
-      <li>
-        <span>灰色模式</span>
-        <vxe-switch v-model="greyVal" open-label="开" close-label="关" @change="greyChange"></vxe-switch>
-      </li>
-      <li>
-        <span>色弱模式</span>
-        <vxe-switch v-model="weekVal" open-label="开" close-label="关" @change="weekChange"></vxe-switch>
-      </li>
-      <li>
-        <span>隐藏标签页</span>
-        <vxe-switch v-model="tagsVal" open-label="开" close-label="关" @change="tagsChange"></vxe-switch>
-      </li>
-
-      <li>
-        <span>标签风格</span>
-        <vxe-radio-group v-model="markValue" @change="onChange">
-          <vxe-radio label="card" content="卡片"></vxe-radio>
-          <vxe-radio label="smart" content="灵动"></vxe-radio>
-        </vxe-radio-group>
-      </li>
-    </ul>
-
     <el-divider>主题风格</el-divider>
     <ul class="theme-stley">
       <el-tooltip class="item" effect="dark" content="暗色主题" placement="bottom">
@@ -41,6 +17,41 @@
       </el-tooltip>
     </ul>
 
+    <el-divider>界面显示</el-divider>
+    <ul class="setting">
+      <li>
+        <span>灰色模式</span>
+        <vxe-switch v-model="greyVal" open-label="开" close-label="关" @change="greyChange"></vxe-switch>
+      </li>
+      <li>
+        <span>色弱模式</span>
+        <vxe-switch v-model="weekVal" open-label="开" close-label="关" @change="weekChange"></vxe-switch>
+      </li>
+      <li>
+        <span>隐藏标签页</span>
+        <vxe-switch v-model="tagsVal" open-label="开" close-label="关" @change="tagsChange"></vxe-switch>
+      </li>
+      <li>
+        <span>侧边栏Logo</span>
+        <vxe-switch
+          v-model="logoVal"
+          open-value="1"
+          close-value="-1"
+          open-label="开"
+          close-label="关"
+          @change="logoChange"
+        ></vxe-switch>
+      </li>
+
+      <li>
+        <span>标签风格</span>
+        <vxe-radio-group v-model="markValue" @change="onChange">
+          <vxe-radio label="card" content="卡片"></vxe-radio>
+          <vxe-radio label="smart" content="灵动"></vxe-radio>
+        </vxe-radio-group>
+      </li>
+    </ul>
+
     <el-divider />
     <vxe-button
       status="danger"
@@ -71,12 +82,7 @@ export default {
     // 默认卡片模式
     const markValue = ref(storageLocal.getItem("showModel") || "card");
 
-    function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
-      const targetEl = target || document.body;
-      let { className } = targetEl;
-      className = className.replace(clsName, "");
-      targetEl.className = flag ? `${className} ${clsName} ` : className;
-    }
+    const logoVal = ref(storageLocal.getItem("logoVal") || "1");
 
     const localOperate = (key: string, value?: any, model?: string): any => {
       model && model === "set"
@@ -98,6 +104,13 @@ export default {
       ? localOperate("weekVal", false, "set")
       : document.querySelector("html")?.setAttribute("class", "html-weakness");
 
+    function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
+      const targetEl = target || document.body;
+      let { className } = targetEl;
+      className = className.replace(clsName, "");
+      targetEl.className = flag ? `${className} ${clsName} ` : className;
+    }
+
     // 灰色模式设置
     const greyChange = ({ value }): void => {
       toggleClass(
@@ -165,6 +178,13 @@ export default {
       toggleClass(true, isSelect, unref(secondTheme));
     }
 
+    function logoChange() {
+      unref(logoVal) === "1"
+        ? storageLocal.setItem("logoVal", "1")
+        : storageLocal.setItem("logoVal", "-1");
+      emitter.emit("logoChange", unref(logoVal));
+    }
+
     return {
       ...toRefs(settings),
       localOperate,
@@ -176,7 +196,9 @@ export default {
       onChange,
       onDark,
       onLight,
-      dataTheme
+      dataTheme,
+      logoVal,
+      logoChange
     };
   }
 };

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
     };
   }
 });