'admin-21.01.06:编写布局配置及相关功能'

vue-admin-wonderful-next/src/store/index.ts

@@ -23,7 +23,10 @@ export interface RootStateTypes {
         isCollapse1: boolean,
         menuWidth1: number,
         isShowLogo: boolean,
-        isShowLogoChange: boolean
+        isShowLogoChange: boolean,
+        isBreadcrumb: boolean,
+        isTagsview: boolean,
+        isFooter: boolean
     }
 }
 

vue-admin-wonderful-next/src/theme/app.scss

@@ -39,18 +39,12 @@ body,
     overflow-x: hidden !important;
   }
   .el-header {
-    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
+    box-shadow: 0 1px 4px rgb(0 21 41 / 4%);
     padding: 0 !important;
   }
   .el-main {
     padding: 0 !important;
   }
-  .el-main-overflow-unset {
-    overflow: unset !important;
-  }
-  .el-main-overflow-auto {
-    overflow: auto !important;
-  }
   .el-scrollbar {
     width: 100%;
   }
@@ -66,10 +60,6 @@ body,
     @extend .el-scrollbar;
     padding: 15px;
   }
-  .layout-container-header-main {
-    display: flex;
-    flex-direction: column;
-  }
 }
 
 /* element plus 全局样式
@@ -96,6 +86,11 @@ body,
 .flex-auto {
   flex: 1;
 }
+.flex-center {
+  @extend .flex;
+  flex-direction: column;
+  width: 100%;
+}
 
 /* 宽高 100%
 ------------------------------- */

vue-admin-wonderful-next/src/utils/themeConfig.ts

@@ -20,5 +20,8 @@ export default {
     isCollapse1: false,
     menuWidth1: 200,
     isShowLogo: false,
-    isShowLogoChange: false
+    isShowLogoChange: false,
+    isBreadcrumb: true,
+    isTagsview: true,
+    isFooter: false
 }

vue-admin-wonderful-next/src/views/layout/component/aside.vue

@@ -8,10 +8,10 @@
 </template>
 
 <script lang="ts">
-import Logo from "/@/views/layout/logo/index.vue";
-import Vertical from "/@/views/layout/navMenu/vertical.vue";
 import { toRefs, reactive, computed, watch, getCurrentInstance } from "vue";
 import { useStore } from "/@/store/index.ts";
+import Logo from "/@/views/layout/logo/index.vue";
+import Vertical from "/@/views/layout/navMenu/vertical.vue";
 export default {
   name: "layoutAside",
   components: { Logo, Vertical },

vue-admin-wonderful-next/src/views/layout/component/header.vue

@@ -1,13 +1,24 @@
 <template>
-  <el-header height="84px">
+  <el-header :height="getThemeConfig.isTagsview ? '84px' : '50px'">
     <NavBarsIndex />
   </el-header>
 </template>
 
 <script lang="ts">
+import { computed } from "vue";
+import { useStore } from "/@/store/index.ts";
 import NavBarsIndex from "/@/views/layout/navBars/index.vue";
 export default {
   name: "layoutHeader",
   components: { NavBarsIndex },
+  setup() {
+    const store = useStore();
+    const getThemeConfig = computed(() => {
+      return store.state.themeConfig;
+    });
+    return {
+      getThemeConfig,
+    };
+  },
 };
 </script>

vue-admin-wonderful-next/src/views/layout/component/main.vue

@@ -1,6 +1,7 @@
 <template>
-  <el-main :class="getThemeConfig.isFixedHeader ? 'el-main-overflow-auto' : 'el-main-overflow-unset'">
+  <el-main>
-    <el-scrollbar class="layout-scrollbar" style="min-height: calc(100vh - 84px);" ref="layoutScrollbarRef">
+    <el-scrollbar class="layout-scrollbar" :style="{minHeight: `calc(100vh - ${headerHeight}`}"
+      ref="layoutScrollbarRef">
       <router-view v-slot="{ Component }">
         <transition :name="transitionName" mode="out-in">
           <div :key="key">
@@ -10,6 +11,7 @@
           </div>
         </transition>
       </router-view>
+      <Footer v-if="getThemeConfig.isFooter" />
     </el-scrollbar>
   </el-main>
 </template>
@@ -25,14 +27,17 @@ import {
 } from "vue";
 import { useRoute, onBeforeRouteUpdate } from "vue-router";
 import { useStore } from "/@/store/index.ts";
+import Footer from "/@/views/layout/footer/index.vue";
 export default defineComponent({
   name: "layoutMain",
+  components: { Footer },
   setup() {
     const { proxy } = getCurrentInstance();
     const store = useStore();
     const route = useRoute();
     const state = reactive({
       transitionName: "slide-right",
+      headerHeight: "84px",
     });
     const getThemeConfig = computed(() => {
       return store.state.themeConfig;
@@ -43,6 +48,7 @@ export default defineComponent({
         to.meta.index > from.meta.index ? "slide-right" : "slide-left";
     });
     watch(store.state.themeConfig, (val) => {
+      state.headerHeight = val.isTagsview ? "84px" : "50px";
       if (val.isFixedHeaderChange !== val.isFixedHeader) {
         proxy.$refs.layoutScrollbarRef.update();
       }

vue-admin-wonderful-next/src/views/layout/defaults.vue

@@ -1,33 +1,48 @@
 <template>
   <el-container class="layout-container">
     <Aside />
-    <el-container>
+    <el-container class="flex-center">
+      <Header v-if="isFixedHeader" />
       <el-scrollbar>
-        <div class="layout-container-header-main" :class="{'vh100': getThemeConfig.isFixedHeader}">
+        <Header v-if="!isFixedHeader" />
-          <Header />
+        <Main />
-          <Main />
-        </div>
       </el-scrollbar>
     </el-container>
   </el-container>
+  <Setings ref="setingsRef" />
 </template>
 
 <script>
-import { computed } from 'vue'
+import { computed, ref, getCurrentInstance, onBeforeMount, onUnmounted } from 'vue'
 import { useStore } from "/@/store/index.ts";
 import Aside from '/@/views/layout/component/aside.vue';
 import Header from '/@/views/layout/component/header.vue';
 import Main from '/@/views/layout/component/main.vue';
+import Setings from "/@/views/layout/navBars/breadcrumb/setings.vue";
 export default {
   name: 'layoutFashion',
-  components: { Aside, Header, Main },
+  components: { Aside, Header, Main, Setings },
   setup() {
+    const { proxy } = getCurrentInstance();
     const store = useStore();
-    const getThemeConfig = computed(() => {
+    const setingsRef = ref();
-      return store.state.themeConfig;
+    const isFixedHeader = computed(() => {
+      return store.state.themeConfig.isFixedHeader;
+    });
+    const openSetingsDrawer = () => {
+      setingsRef.value.openDrawer();
+    }
+    onBeforeMount(() => {
+      proxy.mittBus.on("openSetingsDrawer", () => {
+        openSetingsDrawer();
+      });
+    });
+    onUnmounted(() => {
+      proxy.mittBus.off("openSetingsDrawer", () => { });
     });
     return {
-      getThemeConfig
+      setingsRef,
+      isFixedHeader
     }
   }
 }

vue-admin-wonderful-next/src/views/layout/footer/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="layout-footer mt15" v-show="isDelayFooter">
+    <div class="layout-footer-warp">
+      <div>vue-admin-wonderful，Made by lyt with ❤️</div>
+      <div class="mt5">Copyright &copy 深圳市 xxx 软件科技有限公司</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from "vue";
+import { onBeforeRouteUpdate } from "vue-router";
+export default {
+  name: "layoutFooter",
+  setup() {
+    const state = reactive({
+      isDelayFooter: true,
+    });
+    onBeforeRouteUpdate((to, from) => {
+      state.isDelayFooter = false;
+      setTimeout(() => {
+        state.isDelayFooter = true;
+      }, 800);
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.layout-footer {
+  width: 100%;
+  display: flex;
+  &-warp {
+    margin: auto;
+    color: #9e9e9e;
+    text-align: center;
+    animation: logoAnimation 0.3s ease-in-out;
+  }
+}
+</style>

vue-admin-wonderful-next/src/views/layout/logo/index.vue

@@ -28,7 +28,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: rgb(0 21 41 / 2%) 0px 1px 4px;
+  box-shadow: rgb(0 21 41 / 3%) 0px 1px 4px;
   color: var(--color-primary);
   font-size: 16px;
   animation: logoAnimation 0.3s ease-in-out;

vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/breadcrumb.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="layout-navbars-breadcrumb">
-    <i class="layout-navbars-breadcrumb-icon" :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
+    <i class="layout-navbars-breadcrumb-icon" :class="getThemeConfig.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
       @click="onThemeConfigChange"></i>
-    <el-breadcrumb>
+    <el-breadcrumb v-show="getThemeConfig.isBreadcrumb">
       <transition-group name="breadcrumb" mode="out-in">
         <el-breadcrumb-item v-for="(v,k) in breadcrumbList" :key="v.meta.title">
           <span v-if="k === breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">{{v.meta.title}}</span>
@@ -44,10 +44,9 @@ export default {
     const onThemeConfigChange = () => {
       proxy.mittBus.emit("onMenuClick");
       store.state.themeConfig.isCollapse = !store.state.themeConfig.isCollapse;
-      store.dispatch("setThemeConfig", store.state.themeConfig);
     };
-    const isCollapse = computed(() => {
+    const getThemeConfig = computed(() => {
-      return store.state.themeConfig.isCollapse;
+      return store.state.themeConfig;
     });
     onBeforeMount(() => {
       state.breadcrumbList = route.matched;
@@ -57,7 +56,7 @@ export default {
     });
     return {
       onThemeConfigChange,
-      isCollapse,
+      getThemeConfig,
       onBreadcrumbClick,
       ...toRefs(state),
     };

vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/index.vue

@@ -19,7 +19,6 @@ export default {
   height: 50px;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid rgb(230, 230, 230);
   padding: 0 15px;
   background: var(--bg-topBar);
 }

vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue

@@ -136,19 +136,19 @@
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">面包屑 Breadcrumb</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="getThemeConfig.isCollapse1"></el-switch>
+            <el-switch v-model="getThemeConfig.isBreadcrumb"></el-switch>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">开启 Tagsview</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="getThemeConfig.isCollapse1"></el-switch>
+            <el-switch v-model="getThemeConfig.isTagsview"></el-switch>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">开启 Footer</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
-            <el-switch v-model="getThemeConfig.isCollapse1"></el-switch>
+            <el-switch v-model="getThemeConfig.isFooter"></el-switch>
           </div>
         </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">

vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/user.vue

@@ -26,22 +26,18 @@
       </template>
     </el-dropdown>
   </div>
-  <Setings ref="setingsRef" />
 </template>
 
 <script lang="ts">
-import { ref } from "vue";
+import { ref, getCurrentInstance } from "vue";
-import Setings from "/@/views/layout/navBars/breadcrumb/setings.vue";
 export default {
   name: "layoutBreadcrumbUser",
-  components: { Setings },
   setup() {
-    const setingsRef = ref();
+    const { proxy } = getCurrentInstance();
     const onLayoutSetingClick = () => {
-      setingsRef.value.openDrawer();
+      proxy.mittBus.emit("openSetingsDrawer");
     };
     return {
-      setingsRef,
       onLayoutSetingClick,
     };
   },

vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="layout-navbars-tagsview">
+  <div class="layout-navbars-tagsview" v-show="getThemeConfig.isTagsview">
     <Scroll ref="scrollRef">
       <ul class="layout-navbars-tagsview-ul">
         <li v-for="(v,k) in arr2" :key="k" class="layout-navbars-tagsview-ul-li" :class="{'is-active':isActive(v.path)}"
@@ -29,6 +29,7 @@ import {
   onBeforeUpdate,
 } from "vue";
 import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
+import { useStore } from "/@/store/index.ts";
 import Sortable from "sortablejs";
 import Contextmenu from "/@/views/layout/navBars/tagsView/contextmenu.vue";
 import Scroll from "/@/views/layout/navBars/tagsView/scroll.vue";
@@ -39,6 +40,7 @@ export default {
     const tagsRefs = ref([]);
     const scrollRef = ref();
     const contextmenuRef = ref();
+    const store = useStore();
     const route = useRoute();
     const router = useRouter();
     const state = reactive({
@@ -56,6 +58,9 @@ export default {
         { id: 1, name: "文档3", path: "/docs3" },
       ],
     });
+    const getThemeConfig = computed(() => {
+      return store.state.themeConfig;
+    });
     const initSortable = () => {
       const el = document.querySelector(".layout-navbars-tagsview-ul");
       const sortable = Sortable.create(el, { animation: 300 });
@@ -104,6 +109,7 @@ export default {
       tagsRefs,
       contextmenuRef,
       scrollRef,
+      getThemeConfig,
       ...toRefs(state),
     };
   },
@@ -114,6 +120,7 @@ export default {
 .layout-navbars-tagsview {
   flex: 1;
   background-color: #ffffff;
+  border-top: 1px solid rgb(238, 238, 238);
   &-ul {
     list-style: none;
     margin: 0;