'admin-21.01.11:新增布局配置布局切换'

2021-01-10 23:59:43 +08:00 · 2021-01-10 23:59:43 +08:00 · de03cda45e
commit de03cda45e
parent f54128568d
22 changed files with 621 additions and 62 deletions
--- a/vue-admin-wonderful-next/src/store/index.ts
+++ b/vue-admin-wonderful-next/src/store/index.ts
@ -11,8 +11,10 @@ export interface RootStateTypes {
        danger: string,
        topBar: string,
        menuBar: string,
+        columnsMenuBar: string,
        topBarColor: string,
        menuBarColor: string,
+        columnsMenuBarColor: string,
        isTopBarColorGradual: boolean,
        isMenuBarColorGradual: boolean,
        isMenuBarColorHighlight: boolean,
@ -32,7 +34,8 @@ export interface RootStateTypes {
        isWartermark: boolean,
        wartermarkText: string,
        tagsStyle: string,
-        animation: string
+        animation: string,
+        layout: string
    }
 }

--- a/vue-admin-wonderful-next/src/theme/app.scss
+++ b/vue-admin-wonderful-next/src/theme/app.scss
@ -45,22 +45,34 @@ body,
  }
  .el-main {
    padding: 0 !important;
+    overflow: hidden;
  }
  .el-scrollbar {
    width: 100%;
  }
+  .layout-el-aside-br-color {
+    border-top: 1px solid rgb(238, 238, 238);
+    border-right: 1px solid rgb(238, 238, 238);
+  }
  .layout-aside-width-default {
-    width: 240px !important;
+    width: 220px !important;
    transition: width 0.3s ease;
  }
  .layout-aside-width64 {
    width: 64px !important;
    transition: width 0.3s ease;
  }
+  .layout-aside-width1 {
+    width: 1px !important;
+    transition: width 0.3s ease;
+  }
  .layout-scrollbar {
    @extend .el-scrollbar;
    padding: 15px;
  }
+  .layout-mian-height-50 {
+    height: calc(100vh - 50px);
+  }
 }

 /* element plus 全局样式
--- a/vue-admin-wonderful-next/src/theme/common/var.scss
+++ b/vue-admin-wonderful-next/src/theme/common/var.scss
@ -60,8 +60,10 @@ $--color-danger-light-8: mix($--color-whites, $--color-danger, 80%) !default;
 $--color-danger-light-9: mix($--color-whites, $--color-danger, 90%) !default;
 $--bg-topBar: #ffffff;
 $--bg-menuBar: #29384d;
+$--bg-columnsMenuBar: #6bb4ff;
 $--bg-topBarColor: #606266;
 $--bg-menuBarColor: #e6e6e6;
+$--bg-columnsMenuBarColor: #e6e6e6;

 /* 赋值给:root
 ------------------------------- */
@ -120,6 +122,8 @@ $--bg-menuBarColor: #e6e6e6;
  --color-danger-light-9: #{$--color-danger-light-9};
  --bg-topBar: #{$--bg-topBar};
  --bg-menuBar: #{$--bg-menuBar};
+  --bg-columnsMenuBar: #{$--bg-columnsMenuBar};
  --bg-topBarColor: #{$--bg-topBarColor};
  --bg-menuBarColor: #{$--bg-menuBarColor};
+  --bg-columnsMenuBarColor: #{$--bg-columnsMenuBarColor};
 }
--- a/vue-admin-wonderful-next/src/theme/element.scss
+++ b/vue-admin-wonderful-next/src/theme/element.scss
@ -717,6 +717,13 @@
 .el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
  color: set-color(primary);
 }
+.el-menu.el-menu--horizontal {
+  border-bottom: none !important;
+}
+.el-menu--horizontal > .el-menu-item,
+.el-menu--horizontal > .el-submenu .el-submenu__title {
+  color: var(--bg-menuBarColor);
+}
 // 外部链接时
 .el-menu-item a,
 .el-menu-item a:hover,
--- a/vue-admin-wonderful-next/src/utils/themeConfig.ts
+++ b/vue-admin-wonderful-next/src/utils/themeConfig.ts
@ -8,8 +8,10 @@ export default {
    danger: "#f56c6c",
    topBar: "#ffffff",
    menuBar: "#29384d",
+    columnsMenuBar: '#6BB4FF',
    topBarColor: "#606266",
    menuBarColor: "#e6e6e6",
+    columnsMenuBarColor: '#e6e6e6',
    isTopBarColorGradual: false,
    isMenuBarColorGradual: false,
    isMenuBarColorHighlight: false,
@ -29,5 +31,6 @@ export default {
    isWartermark: false,
    wartermarkText: 'small@小柒',
    tagsStyle: 'tagsStyleOne',
-    animation: 'slideRight'
+    animation: 'slideRight',
+    layout: 'defaults'
 }
--- a/vue-admin-wonderful-next/src/views/layout/component/aside.vue
+++ b/vue-admin-wonderful-next/src/views/layout/component/aside.vue
@ -1,6 +1,6 @@
 <template>
-  <el-aside :class="getThemeConfig.isCollapse ? 'layout-aside-width64' : 'layout-aside-width-default'">
-    <Logo v-if="getThemeConfig.isShowLogo" />
+  <el-aside :class="setCollapseWidth">
+    <Logo v-if="setShowLogo" />
    <el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
      <Vertical :menuList="menuList" />
    </el-scrollbar>
@ -8,7 +8,14 @@
 </template>

 <script lang="ts">
-import { toRefs, reactive, computed, watch, getCurrentInstance } from "vue";
+import {
+  toRefs,
+  reactive,
+  computed,
+  watch,
+  getCurrentInstance,
+  ref,
+} from "vue";
 import { useStore } from "/@/store/index.ts";
 import Logo from "/@/views/layout/logo/index.vue";
 import Vertical from "/@/views/layout/navMenu/vertical.vue";
@ -67,16 +74,50 @@ export default {
        },
      ],
    });
-    const getThemeConfig = computed(() => {
-      return store.state.themeConfig;
+    // 设置菜单展开/收起时的宽度
+    const setCollapseWidth = computed(() => {
+      let { layout, isCollapse, menuBar } = store.state.themeConfig;
+      let asideBrColor =
+        menuBar === "#FFFFFF" ||
+        menuBar === "#FFF" ||
+        menuBar === "#fff" ||
+        menuBar === "#ffffff"
+          ? "layout-el-aside-br-color"
+          : "";
+      if (layout === "columns") {
+        // 分栏布局，菜单收起时宽度给 1px
+        if (isCollapse) {
+          return ["layout-aside-width1", asideBrColor];
+        } else {
+          return ["layout-aside-width-default", asideBrColor];
+        }
+      } else {
+        // 其它布局给 64px
+        if (isCollapse) {
+          return ["layout-aside-width64", asideBrColor];
+        } else {
+          return ["layout-aside-width-default", asideBrColor];
+        }
+      }
    });
+    // 设置显示/隐藏 logo
+    const setShowLogo = computed(() => {
+      let { layout, isShowLogo } = store.state.themeConfig;
+      return (
+        (isShowLogo && layout === "defaults") ||
+        (isShowLogo && layout === "columns")
+      );
+    });
+    // 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
    watch(store.state.themeConfig, (val) => {
      if (val.isShowLogoChange !== val.isShowLogo) {
+        if (!proxy.$refs.layoutAsideScrollbarRef) return false;
        proxy.$refs.layoutAsideScrollbarRef.update();
      }
    });
    return {
-      getThemeConfig,
+      setCollapseWidth,
+      setShowLogo,
      ...toRefs(state),
    };
  },
--- a/vue-admin-wonderful-next/src/views/layout/component/columnsAside.vue
+++ b/vue-admin-wonderful-next/src/views/layout/component/columnsAside.vue
@ -0,0 +1,131 @@
+<template>
+  <div class="layout-columns-aside">
+    <el-scrollbar>
+      <ul>
+        <li v-for="(v,k) in columnsAsideList" :key="k" @click="onColumnsAsideDown(v,k)"
+          :ref="el => { if (el) columnsAsideOffsetTopRefs[k] = el }" :class="{'layout-columns-active': liIndex === k}">
+          <div class="layout-columns-aside-li-box">
+            <template v-if="!v.meta.isLink">
+              <i :class="v.meta.icon"></i>
+              <div class="layout-columns-aside-li-box-title">
+                {{v.meta.title}}
+              </div>
+            </template>
+            <template v-else>
+              <a :href="v.meta.isLink" target="_block">
+                <i :class="v.meta.icon"></i>
+                <div class="layout-columns-aside-li-box-title">
+                  {{v.meta.title}}
+                </div>
+              </a>
+            </template>
+          </div>
+        </li>
+        <div class="layout-columns-aside-active" ref="columnsAsideActiveRef"></div>
+      </ul>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, ref } from "vue";
+export default {
+  name: "layoutColumnsAside",
+  setup() {
+    const columnsAsideOffsetTopRefs = ref([]);
+    const columnsAsideActiveRef = ref();
+    const state = reactive({
+      columnsAsideList: [
+        {
+          path: "/home",
+          meta: {
+            title: "首页",
+            icon: "el-icon-medal-1",
+          },
+        },
+        {
+          path: "/home",
+          meta: {
+            title: "小米",
+            icon: "el-icon-trophy",
+          },
+        },
+        {
+          path: "/home",
+          meta: {
+            title: "谷歌",
+            icon: "el-icon-basketball",
+            isLink: "https://www.ele.me",
+          },
+        },
+        {
+          path: "/home",
+          meta: {
+            title: "苹果",
+            icon: "el-icon-coffee-cup",
+          },
+        },
+      ],
+      liIndex: 0,
+    });
+    // 设置高亮动态位置
+    const onColumnsAsideDown = (v: Object, k: number) => {
+      state.liIndex = k;
+      columnsAsideActiveRef.value.style.top = `${
+        columnsAsideOffsetTopRefs.value[k].offsetTop + 3
+      }px`;
+    };
+    return {
+      columnsAsideOffsetTopRefs,
+      columnsAsideActiveRef,
+      onColumnsAsideDown,
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.layout-columns-aside {
+  width: 64px;
+  height: 100%;
+  background: var(--bg-columnsMenuBar);
+  ul {
+    position: relative;
+    li {
+      color: var(--bg-columnsMenuBarColor);
+      width: 100%;
+      height: 50px;
+      text-align: center;
+      display: flex;
+      cursor: pointer;
+      position: relative;
+      z-index: 1;
+      .layout-columns-aside-li-box {
+        margin: auto;
+      }
+      a {
+        text-decoration: none;
+        color: var(--bg-columnsMenuBarColor);
+      }
+    }
+    .layout-columns-active {
+      color: #ffffff;
+      transition: 0.3s ease-in-out;
+    }
+    .layout-columns-aside-active {
+      background: var(--color-primary);
+      color: #ffffff;
+      position: absolute;
+      left: 50%;
+      top: 2px;
+      height: 44px;
+      width: 58px;
+      transform: translateX(-50%);
+      z-index: 0;
+      transition: 0.3s ease-in-out;
+      border-radius: 5px;
+    }
+  }
+}
+</style>
--- a/vue-admin-wonderful-next/src/views/layout/component/header.vue
+++ b/vue-admin-wonderful-next/src/views/layout/component/header.vue
@ -1,5 +1,5 @@
 <template>
-  <el-header :height="getThemeConfig.isTagsview ? '84px' : '50px'">
+  <el-header :height="setHeaderHeight">
    <NavBarsIndex />
  </el-header>
 </template>
@ -13,11 +13,14 @@ export default {
  components: { NavBarsIndex },
  setup() {
    const store = useStore();
-    const getThemeConfig = computed(() => {
-      return store.state.themeConfig;
+    // 设置 header 的高度
+    const setHeaderHeight = computed(() => {
+      let { isTagsview, layout } = store.state.themeConfig;
+      if (isTagsview && layout !== "classic") return "84px";
+      else return "50px";
    });
    return {
-      getThemeConfig,
+      setHeaderHeight,
    };
  },
 };
--- a/vue-admin-wonderful-next/src/views/layout/component/main.vue
+++ b/vue-admin-wonderful-next/src/views/layout/component/main.vue
@ -1,7 +1,7 @@
 <template>
  <el-main>
-    <el-scrollbar class="layout-scrollbar" :style="{minHeight: `calc(100vh - ${headerHeight}`}"
-      ref="layoutScrollbarRef">
+    <el-scrollbar class="layout-scrollbar" ref="layoutScrollbarRef"
+      :style="{minHeight: `calc(100vh - ${headerHeight}`}">
      <router-view v-slot="{ Component }">
        <transition :name="setTransitionName" mode="out-in">
          <div :key="key">
@ -39,6 +39,7 @@ export default defineComponent({
      transitionName: "slide-right",
      headerHeight: "84px",
    });
+    // 设置主界面切换动画
    const setTransitionName = computed(() => {
      let { animation } = store.state.themeConfig;
      if (animation === "slideRight")
@ -48,13 +49,17 @@ export default defineComponent({
      else if (animation === "opacitys")
        return (state.transitionName = "opacitys");
    });
+    // 获取布局配置信息
    const getThemeConfig = computed(() => {
      return store.state.themeConfig;
    });
+    // 设置路由唯一 key 值，防止页面切换动画不生效
    const key = computed(() => route.path);
+    // 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
    watch(store.state.themeConfig, (val) => {
      state.headerHeight = val.isTagsview ? "84px" : "50px";
      if (val.isFixedHeaderChange !== val.isFixedHeader) {
+        if (!proxy.$refs.layoutScrollbarRef) return false;
        proxy.$refs.layoutScrollbarRef.update();
      }
    });
--- a/vue-admin-wonderful-next/src/views/layout/index.vue
+++ b/vue-admin-wonderful-next/src/views/layout/index.vue
@ -1,11 +1,50 @@
 <template>
-  <Defaults />
+  <Defaults v-if="getThemeConfig.layout === 'defaults'" />
+  <Classic v-else-if="getThemeConfig.layout === 'classic'" />
+  <Transverse v-else-if="getThemeConfig.layout === 'transverse'" />
+  <Columns v-else-if="getThemeConfig.layout === 'columns'" />
+  <Setings ref="setingsRef" />
 </template>

 <script lang="ts">
-import Defaults from "/@/views/layout/defaults.vue";
+import {
+  computed,
+  ref,
+  getCurrentInstance,
+  onBeforeMount,
+  onUnmounted,
+} from "vue";
+import { useStore } from "/@/store/index.ts";
+import Defaults from "/@/views/layout/main/defaults.vue";
+import Classic from "/@/views/layout/main/classic.vue";
+import Transverse from "/@/views/layout/main/transverse.vue";
+import Columns from "/@/views/layout/main/columns.vue";
+import Setings from "/@/views/layout/navBars/breadcrumb/setings.vue";
 export default {
  name: "layout",
-  components: { Defaults },
+  components: { Defaults, Classic, Transverse, Columns, Setings },
+  setup() {
+    const { proxy } = getCurrentInstance();
+    const setingsRef = ref();
+    const store = useStore();
+    const getThemeConfig = computed(() => {
+      return store.state.themeConfig;
+    });
+    const openSetingsDrawer = () => {
+      setingsRef.value.openDrawer();
+    };
+    onBeforeMount(() => {
+      proxy.mittBus.on("openSetingsDrawer", () => {
+        openSetingsDrawer();
+      });
+    });
+    onUnmounted(() => {
+      proxy.mittBus.off("openSetingsDrawer", () => {});
+    });
+    return {
+      setingsRef,
+      getThemeConfig,
+    };
+  },
 };
 </script>
--- a/vue-admin-wonderful-next/src/views/layout/logo/index.vue
+++ b/vue-admin-wonderful-next/src/views/layout/logo/index.vue
@ -1,22 +1,34 @@
 <template>
-  <div class="layout-logo" v-if="!getThemeConfig.isCollapse">vue-admin-wonderful</div>
-  <div class="layout-logo-size" v-else>
+  <div class="layout-logo" v-if="setShowLogo" @click="onThemeConfigChange">
+    <span>vue-admin-wonderful</span>
+  </div>
+  <div class="layout-logo-size" v-else @click="onThemeConfigChange">
    <img src="/@/assets/logo-docs-mini.svg" class="layout-logo-size-img" />
  </div>
 </template>

 <script lang="ts">
-import { computed } from "vue";
+import { computed, getCurrentInstance } from "vue";
 import { useStore } from "/@/store/index.ts";
 export default {
  name: "layoutLogo",
  setup() {
+    const { proxy } = getCurrentInstance();
    const store = useStore();
-    const getThemeConfig = computed(() => {
-      return store.state.themeConfig;
+    // 设置 logo 的显示。classic 经典布局默认显示 logo
+    const setShowLogo = computed(() => {
+      let { isCollapse, layout } = store.state.themeConfig;
+      return !isCollapse || layout === "classic";
    });
+    // logo 点击实现菜单展开/收起
+    const onThemeConfigChange = () => {
+      if (store.state.themeConfig.layout === "transverse") return false;
+      proxy.mittBus.emit("onMenuClick");
+      store.state.themeConfig.isCollapse = !store.state.themeConfig.isCollapse;
+    };
    return {
-      getThemeConfig,
+      setShowLogo,
+      onThemeConfigChange,
    };
  },
 };
@ -24,23 +36,36 @@ export default {

 <style scoped lang="scss">
 .layout-logo {
-  height: 50px;
+  width: 220px;
+  height: 49px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: rgb(0 21 41 / 3%) 0px 1px 4px;
  color: var(--color-primary);
  font-size: 16px;
+  cursor: pointer;
  animation: logoAnimation 0.3s ease-in-out;
+  &:hover {
+    span {
+      color: var(--color-primary-light-2);
+    }
+  }
 }
 .layout-logo-size {
  width: 100%;
  height: 50px;
  display: flex;
+  cursor: pointer;
  animation: logoAnimation 0.3s ease-in-out;
  &-img {
    width: 30px;
    margin: auto;
  }
+  &:hover {
+    img {
+      animation: logoAnimation 0.3s ease-in-out;
+    }
+  }
 }
 </style>
--- a/vue-admin-wonderful-next/src/views/layout/main/classic.vue
+++ b/vue-admin-wonderful-next/src/views/layout/main/classic.vue
@ -0,0 +1,23 @@
+<template>
+  <el-container class="layout-container flex-center">
+    <Header />
+    <el-container class="layout-mian-height-50">
+      <Aside />
+      <div class="flex-center">
+        <TagsView />
+        <Main />
+      </div>
+    </el-container>
+  </el-container>
+</template>
+
+<script>
+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 TagsView from "/@/views/layout/navBars/tagsView/tagsView.vue";
+export default {
+  name: 'layoutClassic',
+  components: { Aside, Header, Main, TagsView }
+}
+</script>
--- a/vue-admin-wonderful-next/src/views/layout/main/columns.vue
+++ b/vue-admin-wonderful-next/src/views/layout/main/columns.vue
@ -0,0 +1,37 @@
+<template>
+  <el-container class="layout-container">
+    <ColumnsAside />
+    <div style="flex:1;display: flex;">
+      <Aside />
+      <el-container class="flex-center">
+        <Header v-if="isFixedHeader" />
+        <el-scrollbar>
+          <Header v-if="!isFixedHeader" />
+          <Main />
+        </el-scrollbar>
+      </el-container>
+    </div>
+  </el-container>
+</template>
+
+<script>
+import { computed } 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 ColumnsAside from '/@/views/layout/component/columnsAside.vue';
+export default {
+  name: 'layoutColumns',
+  components: { Aside, Header, Main, ColumnsAside },
+  setup() {
+    const store = useStore();
+    const isFixedHeader = computed(() => {
+      return store.state.themeConfig.isFixedHeader;
+    });
+    return {
+      isFixedHeader
+    }
+  }
+}
+</script>
--- a/vue-admin-wonderful-next/src/views/layout/main/defaults.vue
+++ b/vue-admin-wonderful-next/src/views/layout/main/defaults.vue
@ -9,39 +9,23 @@
      </el-scrollbar>
    </el-container>
  </el-container>
-  <Setings ref="setingsRef" />
 </template>

 <script>
-import { computed, ref, getCurrentInstance, onBeforeMount, onUnmounted } from 'vue'
+import { computed } 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, Setings },
+  name: 'layoutDefaults',
+  components: { Aside, Header, Main },
  setup() {
-    const { proxy } = getCurrentInstance();
    const store = useStore();
-    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 {
-      setingsRef,
      isFixedHeader
    }
  }
--- a/vue-admin-wonderful-next/src/views/layout/main/transverse.vue
+++ b/vue-admin-wonderful-next/src/views/layout/main/transverse.vue
@ -0,0 +1,17 @@
+<template>
+  <el-container class="layout-container flex-center">
+    <Header />
+    <Main />
+  </el-container>
+</template>
+
+<script>
+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 TagsView from "/@/views/layout/navBars/tagsView/tagsView.vue";
+export default {
+  name: 'layoutTransverse',
+  components: { Aside, Header, Main, TagsView }
+}
+</script>
--- 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">
+  <div class="layout-navbars-breadcrumb" v-show="getThemeConfig.isBreadcrumb">
    <i class="layout-navbars-breadcrumb-icon" :class="getThemeConfig.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
      @click="onThemeConfigChange"></i>
-    <el-breadcrumb v-show="getThemeConfig.isBreadcrumb">
+    <el-breadcrumb>
      <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>
@ -70,6 +70,7 @@ export default {
  height: inherit;
  display: flex;
  align-items: center;
+  padding-left: 15px;
  .layout-navbars-breadcrumb-icon {
    cursor: pointer;
    font-size: 18px;
--- a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/index.vue
+++ b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/index.vue
@ -1,16 +1,82 @@
 <template>
  <div class="layout-navbars-breadcrumb-index">
+    <Logo
+      v-if="getThemeConfig.isShowLogo && getThemeConfig.layout === 'classic' || getThemeConfig.isShowLogo && getThemeConfig.layout === 'transverse'" />
    <Breadcrumb />
+    <Horizontal :menuList="menuList" v-if="getThemeConfig.layout === 'transverse'" />
    <User />
  </div>
 </template>

 <script lang="ts">
+import { computed, reactive, toRefs } from "vue";
+import { useStore } from "/@/store/index.ts";
 import Breadcrumb from "/@/views/layout/navBars/breadcrumb/breadcrumb.vue";
 import User from "/@/views/layout/navBars/breadcrumb/user.vue";
+import Logo from "/@/views/layout/logo/index.vue";
+import Horizontal from "/@/views/layout/navMenu/horizontal.vue";
 export default {
  name: "layoutBreadcrumbIndex",
-  components: { Breadcrumb, User },
+  components: { Breadcrumb, User, Logo, Horizontal },
+  setup() {
+    const store = useStore();
+    const getThemeConfig = computed(() => {
+      return store.state.themeConfig;
+    });
+    const state = reactive({
+      menuList: [
+        {
+          path: "/home",
+          meta: {
+            title: "首页",
+            icon: "el-icon-s-home",
+          },
+          children: [
+            {
+              path: "/home",
+              meta: {
+                title: "微软",
+                icon: "el-icon-s-flag",
+              },
+            },
+            {
+              path: "/docs",
+              meta: {
+                title: "文档",
+                icon: "el-icon-s-flag",
+              },
+            },
+            {
+              path: "/docs1",
+              meta: {
+                title: "文档1",
+                icon: "el-icon-s-flag",
+              },
+            },
+          ],
+        },
+        {
+          path: "/docs2",
+          meta: {
+            title: "文档2",
+            icon: "el-icon-s-management",
+            isLink: "https://www.ele.me",
+          },
+        },
+        {
+          path: "/docs3",
+          meta: {
+            title: "文档3",
+            icon: "el-icon-s-management",
+          },
+        },
+      ],
+    });
+    return {
+      getThemeConfig,
+      ...toRefs(state),
+    };
+  },
 };
 </script>

@ -19,7 +85,8 @@ export default {
  height: 50px;
  display: flex;
  align-items: center;
-  padding: 0 15px;
+  padding-right: 15px;
  background: var(--bg-topBar);
+  overflow: hidden;
 }
 </style>
--- a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue
+++ b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue
@ -55,6 +55,14 @@
            </el-color-picker>
          </div>
        </div>
+        <div class="layout-breadcrumb-seting-bar-flex">
+          <div class="layout-breadcrumb-seting-bar-flex-label">分栏菜单背景</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-color-picker v-model="getThemeConfig.columnsMenuBar" size="small"
+              @change="onBgColorPickerChange('columnsMenuBar')">
+            </el-color-picker>
+          </div>
+        </div>
        <div class="layout-breadcrumb-seting-bar-flex">
          <div class="layout-breadcrumb-seting-bar-flex-label">顶栏默认字体颜色</div>
          <div class="layout-breadcrumb-seting-bar-flex-value">
@ -71,6 +79,14 @@
            </el-color-picker>
          </div>
        </div>
+        <div class="layout-breadcrumb-seting-bar-flex">
+          <div class="layout-breadcrumb-seting-bar-flex-label">分栏菜单默认字体颜色</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-color-picker v-model="getThemeConfig.columnsMenuBarColor" size="small"
+              @change="onBgColorPickerChange('columnsMenuBarColor')">
+            </el-color-picker>
+          </div>
+        </div>
        <div class="layout-breadcrumb-seting-bar-flex mt10">
          <div class="layout-breadcrumb-seting-bar-flex-label">顶栏背景渐变</div>
          <div class="layout-breadcrumb-seting-bar-flex-value">
@ -205,23 +221,25 @@
        <el-divider content-position="left">布局切换</el-divider>
        <div class="layout-drawer-content-flex">
          <!-- defaults 布局 -->
-          <div class="layout-drawer-content-item">
-            <section class="el-container drawer-layout-active el-circular">
+          <div class="layout-drawer-content-item" @click="onSetLayout('defaults')">
+            <section class="el-container el-circular"
+              :class="{'drawer-layout-active': getThemeConfig.layout === 'defaults'}">
              <aside class="el-aside" style="width: 20px"></aside>
              <section class="el-container is-vertical">
                <header class="el-header" style="height: 10px"></header>
                <main class="el-main"></main>
              </section>
            </section>
-            <div class="layout-tips-warp-active layout-tips-warp">
+            <div class="layout-tips-warp" :class="{'layout-tips-warp-active': getThemeConfig.layout === 'defaults'}">
              <div class="layout-tips-box">
                <p class="layout-tips-txt">默认</p>
              </div>
            </div>
          </div>
          <!-- classic 布局 -->
-          <div class="layout-drawer-content-item">
-            <section class="el-container is-vertical el-circular">
+          <div class="layout-drawer-content-item" @click="onSetLayout('classic')">
+            <section class="el-container is-vertical el-circular"
+              :class="{'drawer-layout-active': getThemeConfig.layout === 'classic'}">
              <header class="el-header" style="height: 10px"></header>
              <section class="el-container">
                <aside class="el-aside" style="width: 20px"></aside>
@ -230,15 +248,16 @@
                </section>
              </section>
            </section>
-            <div class="layout-tips-warp">
+            <div class="layout-tips-warp" :class="{'layout-tips-warp-active': getThemeConfig.layout === 'classic'}">
              <div class="layout-tips-box">
                <p class="layout-tips-txt">经典</p>
              </div>
            </div>
          </div>
          <!-- transverse 布局 -->
-          <div class="layout-drawer-content-item">
-            <section class="el-container is-vertical el-circular">
+          <div class="layout-drawer-content-item" @click="onSetLayout('transverse')">
+            <section class="el-container is-vertical el-circular"
+              :class="{'drawer-layout-active': getThemeConfig.layout === 'transverse'}">
              <header class="el-header" style="height: 10px"></header>
              <section class="el-container">
                <section class="el-container is-vertical">
@ -246,15 +265,16 @@
                </section>
              </section>
            </section>
-            <div class="layout-tips-warp">
+            <div class="layout-tips-warp" :class="{'layout-tips-warp-active': getThemeConfig.layout === 'transverse'}">
              <div class="layout-tips-box">
                <p class="layout-tips-txt">横向</p>
              </div>
            </div>
          </div>
          <!-- columns 布局 -->
-          <div class="layout-drawer-content-item">
-            <section class="el-container el-circular">
+          <div class="layout-drawer-content-item" @click="onSetLayout('columns')">
+            <section class="el-container el-circular"
+              :class="{'drawer-layout-active': getThemeConfig.layout === 'columns'}">
              <aside class="el-aside-dark" style="width: 10px"></aside>
              <aside class="el-aside" style="width: 20px"></aside>
              <section class="el-container is-vertical">
@ -262,7 +282,7 @@
                <main class="el-main"></main>
              </section>
            </section>
-            <div class="layout-tips-warp">
+            <div class="layout-tips-warp" :class="{'layout-tips-warp-active': getThemeConfig.layout === 'columns'}">
              <div class="layout-tips-box">
                <p class="layout-tips-txt">分栏</p>
              </div>
@ -346,6 +366,7 @@ export default defineComponent({
    const setGraduaFun = (el: string, bool: boolean, color: string) => {
      nextTick(() => {
        let els = document.querySelector(el);
+        if (!els) return false;
        if (bool)
          els.setAttribute(
            "style",
@ -414,7 +435,63 @@ export default defineComponent({
      if (getThemeConfig.value.isWartermark)
        Watermark.set(getThemeConfig.value.wartermarkText);
    };
+    const onSetLayout = (layout: string) => {
+      if (getThemeConfig.value.layout === layout) return false;
+      getThemeConfig.value.layout = layout;
+      getThemeConfig.value.isDrawer = false;
+      initLayoutStyle();
+    };
+    const initLayoutStyle = () => {
+      console.log(getThemeConfig);
+      if (getThemeConfig.value.layout === "classic") {
+        getThemeConfig.value.isShowLogo = true;
+        getThemeConfig.value.isBreadcrumb = false;
+        getThemeConfig.value.menuBar = "#FFFFFF";
+        getThemeConfig.value.menuBarColor = "#606266";
+        getThemeConfig.value.topBar = "#ffffff";
+        getThemeConfig.value.topBarColor = "#606266";
+        onBgColorPickerChange("menuBar");
+        onBgColorPickerChange("menuBarColor");
+        onBgColorPickerChange("topBar");
+        onBgColorPickerChange("topBarColor");
+      } else if (getThemeConfig.value.layout === "transverse") {
+        getThemeConfig.value.isShowLogo = true;
+        getThemeConfig.value.isBreadcrumb = false;
+        getThemeConfig.value.isTagsview = false;
+        getThemeConfig.value.menuBarColor = "#FFFFFF";
+        getThemeConfig.value.topBar = "#545c64";
+        getThemeConfig.value.topBarColor = "#FFFFFF";
+        onBgColorPickerChange("topBar");
+        onBgColorPickerChange("menuBarColor");
+        onBgColorPickerChange("topBarColor");
+      } else if (getThemeConfig.value.layout === "columns") {
+        getThemeConfig.value.isShowLogo = true;
+        getThemeConfig.value.isBreadcrumb = true;
+        getThemeConfig.value.isTagsview = true;
+        getThemeConfig.value.menuBar = "#FFFFFF";
+        getThemeConfig.value.menuBarColor = "#606266";
+        getThemeConfig.value.topBar = "#ffffff";
+        getThemeConfig.value.topBarColor = "#606266";
+        onBgColorPickerChange("menuBar");
+        onBgColorPickerChange("menuBarColor");
+        onBgColorPickerChange("topBar");
+        onBgColorPickerChange("topBarColor");
+      } else {
+        getThemeConfig.value.isShowLogo = false;
+        getThemeConfig.value.isBreadcrumb = true;
+        getThemeConfig.value.isTagsview = true;
+        getThemeConfig.value.menuBar = "#545c64";
+        getThemeConfig.value.menuBarColor = "#FFFFFF";
+        getThemeConfig.value.topBar = "#FFFFFF";
+        getThemeConfig.value.topBarColor = "#606266";
+        onBgColorPickerChange("menuBar");
+        onBgColorPickerChange("menuBarColor");
+        onBgColorPickerChange("topBar");
+        onBgColorPickerChange("topBarColor");
+      }
+    };
    onBeforeMount(() => {
+      initLayoutStyle();
      proxy.mittBus.on("onMenuClick", () => {
        onMenuBarHighlightChange();
      });
@ -438,6 +515,7 @@ export default defineComponent({
      onAddFilterChange,
      onWartermarkChange,
      onWartermarkTextInput,
+      onSetLayout,
    };
  },
 });
--- a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/user.vue
+++ b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/user.vue
@ -48,10 +48,13 @@ export default {
 .layout-navbars-breadcrumb-user {
  display: flex;
  align-items: center;
+  flex: 1;
+  justify-content: flex-end;
  &-link {
    height: 100%;
    display: flex;
    align-items: center;
+    white-space: nowrap;
    &-photo {
      width: 25px;
      height: 25px;
--- a/vue-admin-wonderful-next/src/views/layout/navBars/index.vue
+++ b/vue-admin-wonderful-next/src/views/layout/navBars/index.vue
@ -1,16 +1,28 @@
 <template>
  <div class="layout-navbars-container">
    <BreadcrumbIndex />
-    <TagsView />
+    <TagsView
+      v-if="getThemeConfig.layout === 'defaults' || getThemeConfig.layout === 'transverse' || getThemeConfig.layout === 'columns'" />
  </div>
 </template>

 <script lang="ts">
+import { computed } from "vue";
+import { useStore } from "/@/store/index.ts";
 import BreadcrumbIndex from "/@/views/layout/navBars/breadcrumb/index.vue";
 import TagsView from "/@/views/layout/navBars/tagsView/tagsView.vue";
 export default {
  name: "layoutNavBars",
  components: { BreadcrumbIndex, TagsView },
+  setup() {
+    const store = useStore();
+    const getThemeConfig = computed(() => {
+      return store.state.themeConfig;
+    });
+    return {
+      getThemeConfig,
+    };
+  },
 };
 </script>

--- 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,6 @@
 <template>
-  <div class="layout-navbars-tagsview" v-show="getThemeConfig.isTagsview">
+  <div class="layout-navbars-tagsview" :class="{'layout-navbars-tagsview-shadow': getThemeConfig.layout === 'classic'}"
+    v-show="getThemeConfig.isTagsview">
    <Scroll ref="scrollRef">
      <ul class="layout-navbars-tagsview-ul" :class="setTagsStyle">
        <li v-for="(v,k) in arr2" :key="k" class="layout-navbars-tagsview-ul-li" :class="{'is-active':isActive(v.path)}"
@ -308,4 +309,7 @@ export default {
    }
  }
 }
+.layout-navbars-tagsview-shadow {
+  box-shadow: rgb(0 21 41 / 4%) 0px 1px 4px;
+}
 </style>
--- a/vue-admin-wonderful-next/src/views/layout/navMenu/horizontal.vue
+++ b/vue-admin-wonderful-next/src/views/layout/navMenu/horizontal.vue
@ -0,0 +1,60 @@
+<template>
+  <el-menu router :default-active="defaultActive" background-color="transparent" mode="horizontal">
+    <template v-for="val in menuList">
+      <el-submenu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
+        <template #title>
+          <i :class="val.meta.icon ? val.meta.icon : ''"></i>
+          <span>{{ val.meta.title }}</span>
+        </template>
+        <SubItem :chil="val.children" />
+      </el-submenu>
+      <el-menu-item :index="val.path" :key="val.path" v-else>
+        <i :class="val.meta.icon ? val.meta.icon : ''"></i>
+        <template #title v-if="!val.meta.isLink">{{ val.meta.title }}</template>
+        <template #title v-else><a :href="val.meta.isLink" target="_blank">{{ val.meta.title }}</a></template>
+      </el-menu-item>
+    </template>
+  </el-menu>
+</template>
+
+<script lang="ts">
+import {
+  toRefs,
+  reactive,
+  computed,
+  defineComponent,
+  getCurrentInstance,
+} from "vue";
+import { useRoute, onBeforeRouteUpdate } from "vue-router";
+import SubItem from "/@/views/layout/navMenu/subItem.vue";
+export default defineComponent({
+  name: "navMenuHorizontal",
+  components: { SubItem },
+  props: {
+    menuList: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+  },
+  setup(props) {
+    const { proxy } = getCurrentInstance();
+    const route = useRoute();
+    const state = reactive({
+      defaultActive: route.path,
+    });
+    const menuList = computed(() => {
+      return props.menuList;
+    });
+    onBeforeRouteUpdate((to) => {
+      state.defaultActive = to.path;
+      proxy.mittBus.emit("onMenuClick");
+    });
+    return {
+      menuList,
+      ...toRefs(state),
+    };
+  },
+});
+</script>