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

2024-12-22 21:22:33 +08:00 · 2021-01-06 18:41:05 +08:00 · 2021-01-06 18:41:05 +08:00 · 19d438d8f5
commit 19d438d8f5
parent 1251793913
14 changed files with 124 additions and 47 deletions
--- a/vue-admin-wonderful-next/src/store/index.ts
+++ b/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
    }
 }

--- a/vue-admin-wonderful-next/src/theme/app.scss
+++ b/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%
 ------------------------------- */
--- a/vue-admin-wonderful-next/src/utils/themeConfig.ts
+++ b/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
 }
--- a/vue-admin-wonderful-next/src/views/layout/component/aside.vue
+++ b/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 },
--- a/vue-admin-wonderful-next/src/views/layout/component/header.vue
+++ b/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>
--- a/vue-admin-wonderful-next/src/views/layout/component/main.vue
+++ b/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-scrollbar class="layout-scrollbar" style="min-height: calc(100vh - 84px);" ref="layoutScrollbarRef">
+  <el-main>
+    <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();
      }
--- a/vue-admin-wonderful-next/src/views/layout/defaults.vue
+++ b/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 />
-          <Main />
-        </div>
+        <Header v-if="!isFixedHeader" />
+        <Main />
      </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(() => {
-      return store.state.themeConfig;
+    const setingsRef = ref();
+    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
    }
  }
 }
--- a/vue-admin-wonderful-next/src/views/layout/footer/index.vue
+++ b/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>
--- a/vue-admin-wonderful-next/src/views/layout/logo/index.vue
+++ b/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;
--- a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/breadcrumb.vue
+++ b/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(() => {
-      return store.state.themeConfig.isCollapse;
+    const getThemeConfig = computed(() => {
+      return store.state.themeConfig;
    });
    onBeforeMount(() => {
      state.breadcrumbList = route.matched;
@ -57,7 +56,7 @@ export default {
    });
    return {
      onThemeConfigChange,
-      isCollapse,
+      getThemeConfig,
      onBreadcrumbClick,
      ...toRefs(state),
    };
--- a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/index.vue
+++ b/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);
 }
--- a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue
+++ b/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">
--- a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/user.vue
+++ b/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 Setings from "/@/views/layout/navBars/breadcrumb/setings.vue";
+import { ref, getCurrentInstance } from "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,
    };
  },
--- a/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue
+++ b/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;