feat: add logo

package.json

@@ -19,8 +19,8 @@
     "cropperjs": "^1.5.11",
     "dayjs": "^1.10.4",
     "dotenv": "^8.2.0",
-    "echarts": "^5.1.0",
-    "element-plus": "^1.0.2-beta.40",
+    "echarts": "^5.1.1",
+    "element-plus": "^1.0.2-beta.41",
     "font-awesome": "^4.7.0",
     "lodash-es": "^4.17.21",
     "mitt": "^2.1.0",
@@ -46,7 +46,7 @@
     "@types/mockjs": "^1.0.3",
     "@types/node": "^14.14.14",
     "@types/nprogress": "^0.2.0",
-    "@vitejs/plugin-vue": "^1.2.1",
+    "@vitejs/plugin-vue": "^1.2.2",
     "@vitejs/plugin-vue-jsx": "^1.1.3",
     "@vue/compiler-sfc": "^3.0.11",
     "autoprefixer": "^10.2.4",
@@ -57,8 +57,8 @@
     "sass": "^1.32.8",
     "sass-loader": "^11.0.1",
     "typescript": "^4.2.4",
-    "vite": "^2.2.2",
+    "vite": "^2.2.3",
     "vite-plugin-mock": "^2.5.0",
-    "vite-plugin-style-import": "^0.9.2"
+    "vite-plugin-style-import": "^0.10.0"
   }
 }

src/components/FlowChart/src/Control.vue

@@ -116,10 +116,6 @@ export default defineComponent({
       });
     });
 
-    // onUnmounted(() => {
-    //   console.log(props.lf);
-    // });
-
     return {
       focusIndex,
       titleLists,

src/layout/components/setting/index.vue

@@ -1,5 +1,22 @@
 <template>
   <panel>
+    <el-divider>主题风格</el-divider>
+    <ul class="theme-stley">
+      <el-tooltip class="item" effect="dark" content="暗色主题" placement="bottom">
+        <li :class="dataTheme === 'dark' ? 'is-select' : ''" ref="firstTheme" @click="onDark">
+          <div></div>
+          <div></div>
+        </li>
+      </el-tooltip>
+
+      <el-tooltip class="item" effect="dark" content="亮色主题" placement="bottom">
+        <li :class="dataTheme === 'light' ? 'is-select' : ''" ref="secondTheme" @click="onLight">
+          <div></div>
+          <div></div>
+        </li>
+      </el-tooltip>
+    </ul>
+
     <el-divider>界面显示</el-divider>
     <ul class="setting">
       <li>
@@ -14,6 +31,17 @@
         <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>
@@ -24,23 +52,6 @@
       </li>
     </ul>
 
-    <el-divider>主题风格</el-divider>
-    <ul class="theme-stley">
-      <el-tooltip class="item" effect="dark" content="暗色主题" placement="bottom">
-        <li :class="dataTheme === 'dark' ? 'is-select' : ''" ref="firstTheme" @click="onDark">
-          <div></div>
-          <div></div>
-        </li>
-      </el-tooltip>
-
-      <el-tooltip class="item" effect="dark" content="亮色主题" placement="bottom">
-        <li :class="dataTheme === 'light' ? 'is-select' : ''" ref="secondTheme" @click="onLight">
-          <div></div>
-          <div></div>
-        </li>
-      </el-tooltip>
-    </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
     };
   }
 });

src/settings.ts

@@ -1,9 +1,9 @@
 export default {
-  title: "CURE Admin",
+  title: "PureAdmin",
 
   fixedHeader: false,
 
-  sidebarLogo: false,
+  sidebarLogo: true,
 
   hiddenSideBar: false,
 };