From 5740774c2bff00c6a43419fead7af34658dac554 Mon Sep 17 00:00:00 2001
From: zouzhibing <zouzhibing@anthead.cn>
Date: Mon, 22 Aug 2022 16:42:33 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E8=BF=9B=E8=A1=8C=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Sidebar/Logo.vue  | 32 ++++++++++---------------
 src/layout/components/UHeader/index.vue |  3 +--
 src/layout/index.vue                    |  2 +-
 3 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index 45361a7..fc494b8 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -1,15 +1,9 @@
 <template>
-  <div class="sidebar-logo-container" :class="{ collapse: isCollapse }">
-    <transition name="sidebarLogoFade">
-      <router-link v-if="isCollapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 v-else class="sidebar-title">Perfect </h1>
-      </router-link>
-      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 class="sidebar-title"> {{ title }}</h1>
-      </router-link>
-    </transition>
+  <div class="sidebar-logo-container" >
+    <router-link  key="collapse" class="sidebar-logo-link" to="/">
+      <img :src="logo" class="sidebar-logo" />
+      <h1 class="sidebar-title" v-if="!isCollapse">{{ title }} </h1>
+    </router-link>
   </div>
 </template>
 
@@ -27,14 +21,14 @@
 </script>
 
 <style lang="scss" scoped>
-  .sidebarLogoFade-enter-active {
-    transition: opacity 1.5s;
-  }
-
-  .sidebarLogoFade-enter,
-  .sidebarLogoFade-leave-to {
-    opacity: 0;
-  }
+  //.sidebarLogoFade-enter-active {
+  //  transition: opacity 1.5s;
+  //}
+  //
+  //.sidebarLogoFade-enter,
+  //.sidebarLogoFade-leave-to {
+  //  opacity: 0;
+  //}
 
   .sidebar-logo-container {
     position: relative;
diff --git a/src/layout/components/UHeader/index.vue b/src/layout/components/UHeader/index.vue
index 88c2d52..4b2d48c 100644
--- a/src/layout/components/UHeader/index.vue
+++ b/src/layout/components/UHeader/index.vue
@@ -141,10 +141,9 @@
     left: 0;
     z-index: 99;
     right: 0;
-    transition: left 0.28s;
+    transition: left 0.3s;
     flex-shrink: 0;
     box-sizing: border-box;
-
     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 c09f242..3115c85 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -18,7 +18,7 @@
 
 <script lang="ts">
   import { computed, defineComponent, ref } from 'vue'
-  import Sidebar from './components/Sidebar/index.vue'
+  import Sidebar from './Sidebar/index.vue'
   import UHeader from './components/UHeader/index.vue'
   import AppMain from './components/AppMain.vue'
   import { useResizeHandler } from './hooks/useResizeHandler'

From 5b9bd733405b79a2fdf7128d3b835996a653804c Mon Sep 17 00:00:00 2001
From: zouzhibing <zouzhibing@anthead.cn>
Date: Wed, 24 Aug 2022 16:48:03 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E8=BF=9B=E8=A1=8C=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/Sidebar/components/Link.vue    | 49 ++++++++++++++
 src/layout/Sidebar/components/Logo.vue    | 71 ++++++++++++++++++++
 src/layout/Sidebar/components/Menu.vue    | 56 ++++++++++++++++
 src/layout/Sidebar/components/SubItem.vue | 79 +++++++++++++++++++++++
 src/layout/Sidebar/index.vue              | 36 +++++++++++
 src/layout/index.vue                      |  6 +-
 6 files changed, 294 insertions(+), 3 deletions(-)
 create mode 100644 src/layout/Sidebar/components/Link.vue
 create mode 100644 src/layout/Sidebar/components/Logo.vue
 create mode 100644 src/layout/Sidebar/components/Menu.vue
 create mode 100644 src/layout/Sidebar/components/SubItem.vue
 create mode 100644 src/layout/Sidebar/index.vue

diff --git a/src/layout/Sidebar/components/Link.vue b/src/layout/Sidebar/components/Link.vue
new file mode 100644
index 0000000..7673683
--- /dev/null
+++ b/src/layout/Sidebar/components/Link.vue
@@ -0,0 +1,49 @@
+<template>
+  <component :is="type" v-bind="linkProps(to)">
+    <slot />
+  </component>
+</template>
+
+<script lang="ts">
+  import { isExternal } from '@/utils/validate.js'
+
+  export default {
+    props: {
+      to: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      isExternal() {
+        return isExternal(this.to)
+      },
+      type() {
+        if (this.isExternal) {
+          return 'a'
+        }
+        return 'router-link'
+      },
+    },
+    methods: {
+      linkProps(to) {
+        if (this.isExternal) {
+          return {
+            href: to,
+            target: '_blank',
+            rel: 'noopener',
+          }
+        }
+        return {
+          to: to,
+        }
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  a {
+    text-decoration: none;
+  }
+</style>
diff --git a/src/layout/Sidebar/components/Logo.vue b/src/layout/Sidebar/components/Logo.vue
new file mode 100644
index 0000000..fc494b8
--- /dev/null
+++ b/src/layout/Sidebar/components/Logo.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="sidebar-logo-container" >
+    <router-link  key="collapse" class="sidebar-logo-link" to="/">
+      <img :src="logo" class="sidebar-logo" />
+      <h1 class="sidebar-title" v-if="!isCollapse">{{ title }} </h1>
+    </router-link>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, reactive, ref } from 'vue'
+  import { useStore } from 'vuex' // useStore ===vue2.0中的this.$store
+  import logo from '@/assets/logo.png'
+
+  const store = useStore()
+  const title = ref<string>('Vue Admin Perfect')
+
+  const isCollapse = computed(() => {
+    return !store.state.app.isCollapse
+  })
+</script>
+
+<style lang="scss" scoped>
+  //.sidebarLogoFade-enter-active {
+  //  transition: opacity 1.5s;
+  //}
+  //
+  //.sidebarLogoFade-enter,
+  //.sidebarLogoFade-leave-to {
+  //  opacity: 0;
+  //}
+
+  .sidebar-logo-container {
+    position: relative;
+    width: 100%;
+    height: 60px;
+    line-height: 60px;
+    background: #2b2f3a;
+    text-align: center;
+    overflow: hidden;
+
+    & .sidebar-logo-link {
+      height: 100%;
+      width: 100%;
+
+      & .sidebar-logo {
+        width: 32px;
+        height: 32px;
+        vertical-align: middle;
+        margin-right: 12px;
+      }
+
+      & .sidebar-title {
+        display: inline-block;
+        margin: 0;
+        color: #fff;
+        font-weight: 600;
+        line-height: 50px;
+        font-size: 14px;
+        font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+        vertical-align: middle;
+      }
+    }
+
+    &.collapse {
+      .sidebar-logo {
+        margin-right: 0px;
+      }
+    }
+  }
+</style>
diff --git a/src/layout/Sidebar/components/Menu.vue b/src/layout/Sidebar/components/Menu.vue
new file mode 100644
index 0000000..388659c
--- /dev/null
+++ b/src/layout/Sidebar/components/Menu.vue
@@ -0,0 +1,56 @@
+<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(() => {
+    console.log('permission_routes', store.state.permission.routes)
+    return store.state.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>
diff --git a/src/layout/Sidebar/components/SubItem.vue b/src/layout/Sidebar/components/SubItem.vue
new file mode 100644
index 0000000..58d7dfa
--- /dev/null
+++ b/src/layout/Sidebar/components/SubItem.vue
@@ -0,0 +1,79 @@
+<template>
+  <template v-if="!item.hidden">
+    <template v-if="!item.alwaysShow && hasOneShowingChild(item.children, item)">
+      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)">
+          <el-icon :size="20">
+            <component :is="onlyOneChild?.meta.icon"></component>
+          </el-icon>
+          <template #title>{{ onlyOneChild.meta && onlyOneChild.meta.title }}</template>
+        </el-menu-item>
+      </app-link>
+    </template>
+    <el-sub-menu :index="resolvePath(item.path)" v-else popper-append-to-body>
+      <template #title>
+        <el-icon :size="20"> <component :is="item.meta?.icon"></component></el-icon>
+        <span>{{ item.meta && item.meta.title }}</span>
+      </template>
+      <sidebar-item
+          v-for="child in item.children"
+          :key="child.path"
+          :item="child"
+          :base-path="resolvePath(child.path)"
+      />
+    </el-sub-menu>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { isExternal } from '@/utils/validate.js'
+import AppLink from './Link.vue'
+import path from 'path-browserify'
+import { ref, computed } from 'vue'
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+  basePath: {
+    type: String,
+    default: '',
+  },
+})
+
+const onlyOneChild = ref(null)
+const hasOneShowingChild = (children = [], parent) => {
+  const showingChildren = children.filter((item) => {
+    // 过滤掉需要隐藏的菜单
+    if (item.hidden) {
+      return false
+    } else {
+      // 临时设置（如果只有一个显示子项，则将使用）
+      onlyOneChild.value = item
+      return true
+    }
+  })
+
+  // 当只有一个子路由器时，默认情况下会显示该子路由器
+  if (showingChildren.length === 1) {
+    return true
+  }
+  // 如果没有要显示的子路由器，则显示父路由器
+  if (showingChildren.length === 0) {
+    onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
+    return true
+  }
+
+  return false
+}
+
+const resolvePath = (routePath) => {
+  if (isExternal(routePath)) {
+    return routePath
+  }
+  if (isExternal(props.basePath)) {
+    return props.basePath
+  }
+  return path.resolve(props.basePath, routePath)
+}
+</script>
diff --git a/src/layout/Sidebar/index.vue b/src/layout/Sidebar/index.vue
new file mode 100644
index 0000000..73f04ea
--- /dev/null
+++ b/src/layout/Sidebar/index.vue
@@ -0,0 +1,36 @@
+<template>
+  <div :class="{ 'has-logo': isCollapse }">
+    <logo :collapse="isCollapse" />
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <menu/>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Menu from './components/Menu.vue'
+import logo from './components/Logo.vue'
+import { useStore, mapGetters } from 'vuex' // useStore ===vue2.0中的this.$store
+import { ref, computed } from 'vue'
+
+// 在setup中获取store
+const store = useStore()
+
+// 是否折叠
+const isCollapse = computed(() => {
+  return !store.state.app.isCollapse
+})
+</script>
+
+<style lang="scss">
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  //width: 200px;
+  height: 100%;
+}
+.crollbar-wrapper {
+  height: 100%;
+  .el-scrollbar__view {
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 3115c85..2f9fbd0 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="g-container-layout" :class="classObj">
     <div v-if="device === 'mobile' && !isCollapse" class="drawer-bg" @click="handleClickOutside" />
-    <sidebar class="sidebar-container" v-if="mode === 'vertical'" />
+<!--    <sidebar class="sidebar-container" v-if="mode === 'vertical'" />-->
     <div
       class="main-container"
       :class="{
@@ -18,7 +18,7 @@
 
 <script lang="ts">
   import { computed, defineComponent, ref } from 'vue'
-  import Sidebar from './Sidebar/index.vue'
+  // import Sidebar from './Sidebar/index.vue'
   import UHeader from './components/UHeader/index.vue'
   import AppMain from './components/AppMain.vue'
   import { useResizeHandler } from './hooks/useResizeHandler'
@@ -28,7 +28,7 @@
   export default defineComponent({
     name: 'layout',
     components: {
-      Sidebar,
+      // Sidebar,
       UHeader,
       AppMain,
     },

From 9d82a1e6f844822e7a2f3f6029eae4d99947495c Mon Sep 17 00:00:00 2001
From: zouzhibing <zouzhibing@anthead.cn>
Date: Wed, 24 Aug 2022 17:53:08 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feature:=E8=B0=83=E6=95=B4=E7=9B=AE?=
 =?UTF-8?q?=E5=BD=95=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components}/Personal.vue                  |  0
 .../UHeader => Header/components}/expand.vue  |  0
 .../{components/UHeader => Header}/index.vue  | 18 ++++-
 .../AppMain.vue => Main/index.vue}            |  0
 src/layout/Sidebar/components/Menu.vue        |  4 +-
 src/layout/Sidebar/components/SubItem.vue     |  2 +-
 src/layout/Sidebar/index.vue                  |  5 +-
 .../TagsView/betterScroll.vue                 |  0
 .../{components => }/TagsView/index.vue       |  0
 src/layout/components/Sidebar/Link.vue        | 49 ------------
 src/layout/components/Sidebar/Logo.vue        | 71 -----------------
 src/layout/components/Sidebar/SidebarItem.vue | 79 -------------------
 src/layout/components/Sidebar/index.vue       | 36 ---------
 src/layout/components/Sidebar/menuSlide.vue   | 56 -------------
 src/layout/index.vue                          | 14 ++--
 src/router/index.ts                           |  4 -
 16 files changed, 28 insertions(+), 310 deletions(-)
 rename src/layout/{components/UHeader => Header/components}/Personal.vue (100%)
 rename src/layout/{components/UHeader => Header/components}/expand.vue (100%)
 rename src/layout/{components/UHeader => Header}/index.vue (91%)
 rename src/layout/{components/AppMain.vue => Main/index.vue} (100%)
 rename src/layout/{components => }/TagsView/betterScroll.vue (100%)
 rename src/layout/{components => }/TagsView/index.vue (100%)
 delete mode 100644 src/layout/components/Sidebar/Link.vue
 delete mode 100644 src/layout/components/Sidebar/Logo.vue
 delete mode 100644 src/layout/components/Sidebar/SidebarItem.vue
 delete mode 100644 src/layout/components/Sidebar/index.vue
 delete mode 100644 src/layout/components/Sidebar/menuSlide.vue

diff --git a/src/layout/components/UHeader/Personal.vue b/src/layout/Header/components/Personal.vue
similarity index 100%
rename from src/layout/components/UHeader/Personal.vue
rename to src/layout/Header/components/Personal.vue
diff --git a/src/layout/components/UHeader/expand.vue b/src/layout/Header/components/expand.vue
similarity index 100%
rename from src/layout/components/UHeader/expand.vue
rename to src/layout/Header/components/expand.vue
diff --git a/src/layout/components/UHeader/index.vue b/src/layout/Header/index.vue
similarity index 91%
rename from src/layout/components/UHeader/index.vue
rename to src/layout/Header/index.vue
index 4b2d48c..9ed0f18 100644
--- a/src/layout/components/UHeader/index.vue
+++ b/src/layout/Header/index.vue
@@ -9,7 +9,7 @@
         transverseMenu: mode === 'horizontal',
       }"
     >
-      <menu-slide v-if="mode === 'horizontal'" />
+      <u-menu v-if="mode === 'horizontal'" />
       <div class="left" v-if="mode === 'vertical'">
         <div>
           <el-icon class="icon" v-if="isCollapse" @click="handleCollapse"><expand /></el-icon>
@@ -45,12 +45,12 @@
 
 <script lang="ts" setup>
   import { UserFilled } from '@element-plus/icons-vue'
-  import Personal from './Personal.vue'
+  import Personal from './components/Personal.vue'
   import TagViews from '../TagsView/index.vue'
   import UHamburger from '@/components/u-Hamburger/index.vue'
   import UScreenFull from '@/components/u-screenfull/index.vue'
   import UInfo from '@/components/u-info/index.vue'
-  import MenuSlide from '../Sidebar/menuSlide.vue'
+  import UMenu from '../Sidebar/components/Menu.vue'
   import { computed, ref } from 'vue'
   import { useRouter } from 'vue-router'
   import { ElMessageBox, ElMessage } from 'element-plus'
@@ -157,4 +157,16 @@
     display: flex;
     align-items: center;
   }
+  .transverseMenu{
+    display: flex;
+    .el-menu{
+      overflow: hidden;
+    }
+    .right{
+      display: flex;
+      justify-content: flex-end;
+      min-width:300px ;
+      flex-shrink: 0;
+    }
+  }
 </style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/Main/index.vue
similarity index 100%
rename from src/layout/components/AppMain.vue
rename to src/layout/Main/index.vue
diff --git a/src/layout/Sidebar/components/Menu.vue b/src/layout/Sidebar/components/Menu.vue
index 388659c..d84362c 100644
--- a/src/layout/Sidebar/components/Menu.vue
+++ b/src/layout/Sidebar/components/Menu.vue
@@ -9,7 +9,7 @@
     class="el-menu-vertical-demo"
     :collapse="isCollapse"
   >
-    <sidebar-item
+    <sub-item
       v-for="route in permission_routes"
       :key="route.path"
       :item="route"
@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts" setup>
-  import SidebarItem from './SidebarItem.vue'
+  import SubItem from './SubItem.vue'
   import logo from './Logo.vue'
   import { useRoute } from 'vue-router'
   import { useStore, mapGetters } from 'vuex' // useStore ===vue2.0中的this.$store
diff --git a/src/layout/Sidebar/components/SubItem.vue b/src/layout/Sidebar/components/SubItem.vue
index 58d7dfa..73d6938 100644
--- a/src/layout/Sidebar/components/SubItem.vue
+++ b/src/layout/Sidebar/components/SubItem.vue
@@ -15,7 +15,7 @@
         <el-icon :size="20"> <component :is="item.meta?.icon"></component></el-icon>
         <span>{{ item.meta && item.meta.title }}</span>
       </template>
-      <sidebar-item
+      <sub-item
           v-for="child in item.children"
           :key="child.path"
           :item="child"
diff --git a/src/layout/Sidebar/index.vue b/src/layout/Sidebar/index.vue
index 73f04ea..5ed1d30 100644
--- a/src/layout/Sidebar/index.vue
+++ b/src/layout/Sidebar/index.vue
@@ -2,17 +2,18 @@
   <div :class="{ 'has-logo': isCollapse }">
     <logo :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
-      <menu/>
+      <u-menu/>
     </el-scrollbar>
   </div>
 </template>
 
 <script lang="ts" setup>
-import Menu from './components/Menu.vue'
+import UMenu from './components/Menu.vue'
 import logo from './components/Logo.vue'
 import { useStore, mapGetters } from 'vuex' // useStore ===vue2.0中的this.$store
 import { ref, computed } from 'vue'
 
+
 // 在setup中获取store
 const store = useStore()
 
diff --git a/src/layout/components/TagsView/betterScroll.vue b/src/layout/TagsView/betterScroll.vue
similarity index 100%
rename from src/layout/components/TagsView/betterScroll.vue
rename to src/layout/TagsView/betterScroll.vue
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/TagsView/index.vue
similarity index 100%
rename from src/layout/components/TagsView/index.vue
rename to src/layout/TagsView/index.vue
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
deleted file mode 100644
index 7673683..0000000
--- a/src/layout/components/Sidebar/Link.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-  <component :is="type" v-bind="linkProps(to)">
-    <slot />
-  </component>
-</template>
-
-<script lang="ts">
-  import { isExternal } from '@/utils/validate.js'
-
-  export default {
-    props: {
-      to: {
-        type: String,
-        required: true,
-      },
-    },
-    computed: {
-      isExternal() {
-        return isExternal(this.to)
-      },
-      type() {
-        if (this.isExternal) {
-          return 'a'
-        }
-        return 'router-link'
-      },
-    },
-    methods: {
-      linkProps(to) {
-        if (this.isExternal) {
-          return {
-            href: to,
-            target: '_blank',
-            rel: 'noopener',
-          }
-        }
-        return {
-          to: to,
-        }
-      },
-    },
-  }
-</script>
-
-<style lang="scss" scoped>
-  a {
-    text-decoration: none;
-  }
-</style>
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
deleted file mode 100644
index fc494b8..0000000
--- a/src/layout/components/Sidebar/Logo.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-  <div class="sidebar-logo-container" >
-    <router-link  key="collapse" class="sidebar-logo-link" to="/">
-      <img :src="logo" class="sidebar-logo" />
-      <h1 class="sidebar-title" v-if="!isCollapse">{{ title }} </h1>
-    </router-link>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { computed, reactive, ref } from 'vue'
-  import { useStore } from 'vuex' // useStore ===vue2.0中的this.$store
-  import logo from '@/assets/logo.png'
-
-  const store = useStore()
-  const title = ref<string>('Vue Admin Perfect')
-
-  const isCollapse = computed(() => {
-    return !store.state.app.isCollapse
-  })
-</script>
-
-<style lang="scss" scoped>
-  //.sidebarLogoFade-enter-active {
-  //  transition: opacity 1.5s;
-  //}
-  //
-  //.sidebarLogoFade-enter,
-  //.sidebarLogoFade-leave-to {
-  //  opacity: 0;
-  //}
-
-  .sidebar-logo-container {
-    position: relative;
-    width: 100%;
-    height: 60px;
-    line-height: 60px;
-    background: #2b2f3a;
-    text-align: center;
-    overflow: hidden;
-
-    & .sidebar-logo-link {
-      height: 100%;
-      width: 100%;
-
-      & .sidebar-logo {
-        width: 32px;
-        height: 32px;
-        vertical-align: middle;
-        margin-right: 12px;
-      }
-
-      & .sidebar-title {
-        display: inline-block;
-        margin: 0;
-        color: #fff;
-        font-weight: 600;
-        line-height: 50px;
-        font-size: 14px;
-        font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
-        vertical-align: middle;
-      }
-    }
-
-    &.collapse {
-      .sidebar-logo {
-        margin-right: 0px;
-      }
-    }
-  }
-</style>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
deleted file mode 100644
index 979e1aa..0000000
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <template v-if="!item.hidden">
-    <template v-if="!item.alwaysShow && hasOneShowingChild(item.children, item)">
-      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)">
-          <el-icon :size="20">
-            <component :is="onlyOneChild?.meta.icon"></component>
-          </el-icon>
-          <template #title>{{ onlyOneChild.meta && onlyOneChild.meta.title }}</template>
-        </el-menu-item>
-      </app-link>
-    </template>
-    <el-sub-menu :index="resolvePath(item.path)" v-else popper-append-to-body>
-      <template #title>
-        <el-icon :size="20"> <component :is="item.meta?.icon"></component></el-icon>
-        <span>{{ item.meta && item.meta.title }}</span>
-      </template>
-      <sidebar-item
-        v-for="child in item.children"
-        :key="child.path"
-        :item="child"
-        :base-path="resolvePath(child.path)"
-      />
-    </el-sub-menu>
-  </template>
-</template>
-
-<script lang="ts" setup>
-  import { isExternal } from '@/utils/validate.js'
-  import AppLink from './Link.vue'
-  import path from 'path-browserify'
-  import { ref, computed } from 'vue'
-  const props = defineProps({
-    item: {
-      type: Object,
-      required: true,
-    },
-    basePath: {
-      type: String,
-      default: '',
-    },
-  })
-
-  const onlyOneChild = ref(null)
-  const hasOneShowingChild = (children = [], parent) => {
-    const showingChildren = children.filter((item) => {
-      // 过滤掉需要隐藏的菜单
-      if (item.hidden) {
-        return false
-      } else {
-        // 临时设置（如果只有一个显示子项，则将使用）
-        onlyOneChild.value = item
-        return true
-      }
-    })
-
-    // 当只有一个子路由器时，默认情况下会显示该子路由器
-    if (showingChildren.length === 1) {
-      return true
-    }
-    // 如果没有要显示的子路由器，则显示父路由器
-    if (showingChildren.length === 0) {
-      onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
-      return true
-    }
-
-    return false
-  }
-
-  const resolvePath = (routePath) => {
-    if (isExternal(routePath)) {
-      return routePath
-    }
-    if (isExternal(props.basePath)) {
-      return props.basePath
-    }
-    return path.resolve(props.basePath, routePath)
-  }
-</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
deleted file mode 100644
index b022865..0000000
--- a/src/layout/components/Sidebar/index.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div :class="{ 'has-logo': isCollapse }">
-    <logo :collapse="isCollapse" />
-    <el-scrollbar wrap-class="scrollbar-wrapper">
-      <menu-slide />
-    </el-scrollbar>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import MenuSlide from './menuSlide.vue'
-  import logo from './Logo.vue'
-  import { useStore, mapGetters } from 'vuex' // useStore ===vue2.0中的this.$store
-  import { ref, computed } from 'vue'
-
-  // 在setup中获取store
-  const store = useStore()
-
-  // 是否折叠
-  const isCollapse = computed(() => {
-    return !store.state.app.isCollapse
-  })
-</script>
-
-<style lang="scss">
-  .el-menu-vertical-demo:not(.el-menu--collapse) {
-    //width: 200px;
-    height: 100%;
-  }
-  .crollbar-wrapper {
-    height: 100%;
-    .el-scrollbar__view {
-      height: 100%;
-    }
-  }
-</style>
diff --git a/src/layout/components/Sidebar/menuSlide.vue b/src/layout/components/Sidebar/menuSlide.vue
deleted file mode 100644
index 388659c..0000000
--- a/src/layout/components/Sidebar/menuSlide.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<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(() => {
-    console.log('permission_routes', store.state.permission.routes)
-    return store.state.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>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 2f9fbd0..7c0fdf0 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="g-container-layout" :class="classObj">
     <div v-if="device === 'mobile' && !isCollapse" class="drawer-bg" @click="handleClickOutside" />
-<!--    <sidebar class="sidebar-container" v-if="mode === 'vertical'" />-->
+    <sidebar class="sidebar-container" v-if="mode === 'vertical'" />
     <div
       class="main-container"
       :class="{
@@ -10,7 +10,7 @@
     >
       <u-header />
       <div class="m-container-content" :class="{ 'app-main-hide-tag': !isShowTag }">
-        <app-main />
+        <u-main />
       </div>
     </div>
   </div>
@@ -18,9 +18,9 @@
 
 <script lang="ts">
   import { computed, defineComponent, ref } from 'vue'
-  // import Sidebar from './Sidebar/index.vue'
-  import UHeader from './components/UHeader/index.vue'
-  import AppMain from './components/AppMain.vue'
+  import Sidebar from './Sidebar/index.vue'
+  import UHeader from './Header/index.vue'
+  import UMain from './Main/index.vue'
   import { useResizeHandler } from './hooks/useResizeHandler'
 
   import { useStore } from 'vuex'
@@ -28,9 +28,9 @@
   export default defineComponent({
     name: 'layout',
     components: {
-      // Sidebar,
+      Sidebar,
       UHeader,
-      AppMain,
+      UMain,
     },
     setup() {
       const store = useStore()
diff --git a/src/router/index.ts b/src/router/index.ts
index ed4be59..0ce1026 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -33,10 +33,6 @@ import systemRouter from './modules/system'
  */
 
 export const constantRoutes: Array<RouteRecordRaw&extendRoute> = [
-    {
-        path: "/",
-        redirect: { name: "login" }
-    },
   {
     path: '/login',
     name: 'Login',