From e98ad2cf668f00ff3816565bd596fd2440ad3156 Mon Sep 17 00:00:00 2001
From: zouzhibin <3517876561@qq.com>
Date: Sat, 30 Apr 2022 21:19:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=B8=BB=E9=A2=98=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                 |   4 +
 src/components/u-setting/index.vue          | 126 ++++++++++++++++++++
 src/layout/components/AppMain.vue           |  14 ++-
 src/layout/components/Sidebar/index.vue     |  51 ++++----
 src/layout/components/Sidebar/menuSlide.vue |  55 +++++++++
 src/layout/components/TagsView/index.vue    |   2 +
 src/layout/components/UHeader/index.vue     |  26 +++-
 src/layout/index.vue                        |  27 ++++-
 src/store/index.ts                          |   4 +-
 src/store/modules/setting.ts                |  33 +++++
 src/styles/sidebar.scss                     |  10 ++
 11 files changed, 308 insertions(+), 44 deletions(-)
 create mode 100644 src/components/u-setting/index.vue
 create mode 100644 src/layout/components/Sidebar/menuSlide.vue
 create mode 100644 src/store/modules/setting.ts

diff --git a/src/App.vue b/src/App.vue
index 02a521e..d403b7b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,6 +9,8 @@
   position: relative;
   width: 100%;
   height: 100%;
+    /*background: #f6f8f9;*/
+    /*background: goldenrod;*/
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -16,6 +18,8 @@
 }
 html,body{
   height: 100%;
+    background: #f6f8f9;
+
 }
 *{
   margin: 0;
diff --git a/src/components/u-setting/index.vue b/src/components/u-setting/index.vue
new file mode 100644
index 0000000..f15b243
--- /dev/null
+++ b/src/components/u-setting/index.vue
@@ -0,0 +1,126 @@
+<template>
+    <div>
+        <div class="m-setting-fix">
+            <div class="item">
+                <div class="item-child" @click="operator(1)">
+                    <el-icon size="30" color="#3698fd" style="margin-bottom: 8px"><brush /></el-icon>
+                    主题配置
+                </div>
+                <div class="item-child item-child2" @click="operator(2)">
+                    <el-icon size="30"
+                             color="#3698fd"
+                             style="margin-bottom: 8px"><Link /></el-icon>
+                    源码拷贝
+                </div>
+            </div>
+        </div>
+        <el-drawer v-model="drawer" title="主题配置" size="300px">
+            <div class="drawer-item">
+                <label>布局</label>
+                <el-select v-model="layout"  placeholder="请选择" style="width: 150px" @change="(val)=>changeSwitch(val,2)">
+                    <el-option label="纵向" value="vertical"></el-option>
+                    <el-option label="横向" value="horizontal"></el-option>
+                </el-select>
+            </div>
+            <div class="drawer-item">
+                <label>标签</label>
+                <el-switch v-model="tag" @change="(val)=>changeSwitch(val,1)"/>
+            </div>
+        </el-drawer>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { ref } from 'vue'
+    const drawer = ref(false)
+    const tag = ref(true)
+    const layout = ref('vertical')
+    import {useStore} from "vuex";
+
+    const store = useStore()
+    const operator = (type)=>{
+        switch (type) {
+            case 1:
+                drawer.value = true
+                return
+            case 2:
+                window.open('https://github.com/zouzhibin/vue-admin-perfect')
+                return
+        }
+    }
+
+
+    const changeSwitch =(val,type)=>{
+        switch (type) {
+            // 是否显示tag
+            case 1:
+                store.dispatch('setting/setTag',val)
+                return
+            case 2:
+                store.dispatch('setting/setMode',val)
+                return
+        }
+    }
+
+</script>
+
+
+<style lang="scss" scoped>
+.m-setting-fix{
+    position: fixed;
+        top: 50%;
+        right: 0;
+        z-index: 1997;
+        padding: 10px 0 0 0;
+        margin: 0;
+        text-align: center;
+        cursor: pointer;
+        background: #fff;
+        border: 1px solid #dcdfe6;
+        border-top-left-radius: 5.5px;
+        border-bottom-left-radius: 5.5px;
+        box-shadow: 0 0 50px 0 rgb(82 63 105 / 15%);
+        transform: translateY(-50%);
+        .item{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            justify-content: center;
+            padding: 0 8px 10px 10px;
+            margin: 0;
+            list-style: none;
+        }
+    .item-child{
+        color: #3698fd;
+        width: 60px;
+        height: 60px;
+        /*padding-top: 10px;*/
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        background: #f6f8f9;
+        align-items: center;
+        justify-content: center;
+        border-radius: 5.5px;
+        font-size: 12px;
+        background: #ebf5ff;
+        transition: color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
+
+    }
+    .item-child2{
+        margin-top: 10px;
+        color: #b37feb;
+        background: #f7f2fd;
+        transition: color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
+    }
+
+}
+.drawer-item{
+    width: 100%;
+    display: flex;
+    margin-bottom: 15px;
+    align-items: center;
+    justify-content: space-between;
+}
+</style>
\ No newline at end of file
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 4db3876..e48062a 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -1,28 +1,32 @@
 <template>
-  <section class="app-main">
-
+  <section class="app-main" >
       <router-view v-slot="{ Component }">
         <transition name="fade-transform" mode="out-in">
           <component :is="Component" />
         </transition>
       </router-view>
-
+      <u-setting/>
   </section>
 </template>
 
-<script>
+<script lang="ts" setup>
+    import USetting from '@/components/u-setting/index.vue'
+
 
 </script>
 
 <style lang="scss" scoped>
   .app-main{
     padding: 20px;
-    padding-top: 110px;
+    /*padding-top: 110px;*/
     //min-height: 100%;
     //overflow: auto;
     //flex: 1;
     //overflow: auto;
+      overflow: hidden;
     box-sizing: border-box;
     //padding-top: 70px;
+      background: white;
   }
+
 </style>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index e9ea0ad..0369603 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -2,49 +2,40 @@
   <div :class="{'has-logo':isCollapse}">
     <logo :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
-      <el-menu
-          :default-active="activeMenu"
-          active-text-color="#ffd04b"
-          background-color="#304156"
-          text-color="#fff"
-          :collapse-transition="false"
-          class="el-menu-vertical-demo"
-          :collapse="isCollapse"
-      >
-        <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path"/>
-      </el-menu>
+      <menu-slide/>
     </el-scrollbar>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import SidebarItem from './SidebarItem.vue'
+  import MenuSlide from './menuSlide.vue'
+  // import SidebarItem from './SidebarItem.vue'
   import logo from './Logo.vue'
-  import {useRoute} from 'vue-router'
+  // import {useRoute} from 'vue-router'
   import { useStore,mapGetters } from 'vuex' // useStore ===vue2.0中的this.$store
   import { ref,computed } from 'vue'
 
   // 在setup中获取store
   const store = useStore()
-  const route = useRoute()
+  // const route = useRoute()
 
 
-  // 获取路由
-  const permission_routes = computed(()=>{
-    return store.state.permission.routes
-  })
-
-
-  console.log('permission_routes',permission_routes)
-
-  const activeMenu = computed(()=>{
-    const { meta, path } = route
-    // if set path, the sidebar will highlight the path you set
-    if (meta.activeMenu) {
-      return meta.activeMenu
-    }
-    return path
-  })
+  // // 获取路由
+  // const permission_routes = computed(()=>{
+  //   return store.state.permission.routes
+  // })
+  //
+  //
+  // console.log('permission_routes',permission_routes)
+  //
+  // const activeMenu = computed(()=>{
+  //   const { meta, path } = route
+  //   // if set path, the sidebar will highlight the path you set
+  //   if (meta.activeMenu) {
+  //     return meta.activeMenu
+  //   }
+  //   return path
+  // })
 
   // 是否折叠
   const isCollapse = computed(()=>{
diff --git a/src/layout/components/Sidebar/menuSlide.vue b/src/layout/components/Sidebar/menuSlide.vue
new file mode 100644
index 0000000..033b666
--- /dev/null
+++ b/src/layout/components/Sidebar/menuSlide.vue
@@ -0,0 +1,55 @@
+<template>
+       <el-menu
+               :default-active="activeMenu"
+               active-text-color="#ffd04b"
+               background-color="#304156"
+               text-color="#fff"
+               :mode="mode"
+               :collapse-transition="false"
+               class="el-menu-vertical-demo"
+               :collapse="isCollapse"
+       >
+           <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path"/>
+       </el-menu>
+</template>
+
+<script lang="ts" setup>
+
+    import SidebarItem from './SidebarItem.vue'
+    import logo from './Logo.vue'
+    import {useRoute} from 'vue-router'
+    import { useStore,mapGetters } from 'vuex' // useStore ===vue2.0中的this.$store
+    import { ref,computed } from 'vue'
+
+    // 在setup中获取store
+    const store = useStore()
+    const route = useRoute()
+
+
+    // 获取路由
+    const permission_routes = computed(()=>{
+        return store.state.permission.routes
+    })
+
+
+    // console.log('permission_routes',permission_routes)
+
+    const activeMenu = computed(()=>{
+        const { meta, path } = route
+        // if set path, the sidebar will highlight the path you set
+        if (meta.activeMenu) {
+            return meta.activeMenu
+        }
+        return path
+    })
+
+    // 是否折叠
+    const isCollapse = computed(()=>{
+        return !store.state.app.isCollapse
+    })
+
+    // 横向
+    const mode = computed(()=>{
+        return store.state.setting.mode
+    })
+</script>
\ No newline at end of file
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 09ff744..9e09566 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -162,6 +162,8 @@ import {computed, nextTick, onMounted, reactive, ref, watch} from "vue";
     background: #fff;
     padding: 0 8px;
     font-size: 12px;
+    padding: 0 10px;
+    box-sizing: border-box;
     margin-left: 5px;
     margin-top: 4px;
     &:first-of-type {
diff --git a/src/layout/components/UHeader/index.vue b/src/layout/components/UHeader/index.vue
index f119d42..baa4631 100644
--- a/src/layout/components/UHeader/index.vue
+++ b/src/layout/components/UHeader/index.vue
@@ -1,7 +1,13 @@
 <template>
-  <div class="m-layout-header" :style="{left:`${isCollapse?'56':'210'}px`}">
-    <div class="header">
-      <div class="left">
+  <div
+          class="m-layout-header"
+
+          :style="{left:`${mode==='horizontal'?0:isCollapse?'56':'210'}px`}">
+    <div class="header" :class="{
+            transverseMenu:mode==='horizontal'
+          }">
+      <menu-slide v-if="mode==='horizontal'"/>
+      <div class="left" v-if="mode==='vertical'">
         <div>
           <el-icon class="icon" v-if="isCollapse" @click="handleCollapse"><expand /></el-icon>
           <el-icon class="icon" v-else @click="handleCollapse"><fold/></el-icon>
@@ -27,7 +33,7 @@
         </el-dropdown>
       </div>
     </div>
-    <tag-views/>
+    <tag-views v-if="isShowTag"/>
     <personal ref="person"/>
   </div>
 </template>
@@ -37,6 +43,7 @@
   import TagViews from '../TagsView/index.vue'
   import UHamburger from "@/components/u-Hamburger/index.vue"
   import UScreenFull from '@/components/u-screenfull/index.vue'
+  import MenuSlide from '../Sidebar/menuSlide.vue'
   import {computed, ref,} from 'vue'
   import {useRouter} from 'vue-router'
   import { ElMessageBox, ElMessage } from 'element-plus'
@@ -49,6 +56,13 @@
   const isCollapse = computed(()=>{
     return !store.state.app.isCollapse
   })
+  const mode = computed(()=>{
+    return store.state.setting.mode
+  })
+
+  const isShowTag = computed(()=>{
+    return store.state.setting.isShowTag
+  })
 
   const userInfo = computed(()=>{
     return store.state.user.userInfo
@@ -115,6 +129,8 @@
     width: 100%;
     display: flex;
     align-items: center;
+    padding: 0 10px;
+    box-sizing: border-box;
     justify-content: space-between;
     .left{
       display: flex;
@@ -135,7 +151,7 @@
     transition: left 0.28s;
     flex-shrink: 0;
     box-sizing: border-box;
-    padding: 0 10px;
+
     box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
   }
   .el-dropdown{
diff --git a/src/layout/index.vue b/src/layout/index.vue
index eeef354..0b3fe6c 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,10 +1,14 @@
 <template>
   <div class="g-container-layout" :class="classObj" >
     <div v-if="device==='mobile'&&!isCollapse" class="drawer-bg" @click="handleClickOutside" />
-    <sidebar class="sidebar-container"/>
-    <div class="main-container">
+    <sidebar class="sidebar-container" v-if="mode==='vertical'"/>
+    <div class="main-container" :class="{
+      hideSliderLayout:mode==='horizontal'
+    }">
       <u-header />
-      <app-main/>
+      <div class="m-container-content" :class="{'app-main-hide-tag':!isShowTag}">
+        <app-main/>
+      </div>
     </div>
   </div>
 </template>
@@ -44,11 +48,20 @@
       const handleClickOutside = ()=> {
         store.dispatch('app/closeSideBar', { withoutAnimation: false })
       }
+      const isShowTag = computed(()=>{
+        return store.state.setting.isShowTag
+      })
 
+      const mode = computed(()=>{
+        return store.state.setting.mode
+      })
+      console.log('mode============',mode)
       return{
         isCollapse,
         device,
         classObj,
+        isShowTag,
+        mode,
         handleClickOutside
       }
     }
@@ -85,4 +98,12 @@
     position: absolute;
     z-index: 999;
   }
+  .m-container-content{
+    padding: 20px;
+    /*background: #f6f8f9;*/
+    padding-top: 110px;
+  }
+  .app-main-hide-tag{
+    padding-top: 80px;
+  }
 </style>
diff --git a/src/store/index.ts b/src/store/index.ts
index 49562b6..1eb2d0a 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -4,6 +4,7 @@ import permission from './modules/permission'
 import app from './modules/app'
 import user from './modules/user'
 import tagsView from './modules/tagsView'
+import setting from './modules/setting'
 
 import getters from './getters'
 
@@ -20,7 +21,8 @@ export default createStore({
     permission,
     app,
     user,
-    tagsView
+    tagsView,
+    setting
   },
   getters
 })
diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts
new file mode 100644
index 0000000..c13b781
--- /dev/null
+++ b/src/store/modules/setting.ts
@@ -0,0 +1,33 @@
+import {Module} from "vuex";
+
+const state = {
+    isShowTag: true,
+    mode: 'vertical',
+}
+
+const mutations = {
+    SET_TAG: (state, value) => {
+        state.isShowTag = value
+    },
+    SET_MODE: (state, value) => {
+        state.mode = value
+    },
+}
+const actions = {
+    setTag({ commit }, value) {
+        commit('SET_TAG', value)
+    },
+    setMode({ commit }, value) {
+        commit('SET_MODE', value)
+    },
+}
+
+
+const setting:Module<any, any> = {
+    namespaced:true,
+    state,
+    mutations,
+    actions
+}
+
+export default setting
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 3eba722..5a2cdba 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -7,6 +7,16 @@
     position: relative;
   }
 
+  .hideSliderLayout{
+    margin-left: 0;
+    .el-menu--horizontal{
+      border-bottom: none;
+    }
+  }
+  .transverseMenu{
+    background-color: $menuBg;
+  }
+
   .sidebar-container {
     transition: width 0.28s;
     width: $sideBarWidth !important;