Merge branch 'updata' of https://github.com/zouzhibin/vue-admin-perfect

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'
@@ -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 {
@@ -158,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>

src/layout/Sidebar/components/Logo.vue

@@ -1,15 +1,9 @@
 <template>
-  <div class="sidebar-logo-container" :class="{ collapse: isCollapse }">
+  <div class="sidebar-logo-container" >
-    <transition name="sidebarLogoFade">
+    <router-link  key="collapse" class="sidebar-logo-link" to="/">
-      <router-link v-if="isCollapse" key="collapse" class="sidebar-logo-link" to="/">
+      <img :src="logo" class="sidebar-logo" />
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
+      <h1 class="sidebar-title" v-if="!isCollapse">{{ title }} </h1>
-        <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>
 </template>
 
@@ -27,14 +21,14 @@
 </script>
 
 <style lang="scss" scoped>
-  .sidebarLogoFade-enter-active {
+  //.sidebarLogoFade-enter-active {
-    transition: opacity 1.5s;
+  //  transition: opacity 1.5s;
-  }
+  //}
-
+  //
-  .sidebarLogoFade-enter,
+  //.sidebarLogoFade-enter,
-  .sidebarLogoFade-leave-to {
+  //.sidebarLogoFade-leave-to {
-    opacity: 0;
+  //  opacity: 0;
-  }
+  //}
 
   .sidebar-logo-container {
     position: relative;

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

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>
+      <sub-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>

src/layout/Sidebar/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div :class="{ 'has-logo': isCollapse }">
+    <logo :collapse="isCollapse" />
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <u-menu/>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script lang="ts" setup>
+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()
+
+// 是否折叠
+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>

src/layout/components/Sidebar/SidebarItem.vue

@@ -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>

src/layout/components/Sidebar/index.vue

@@ -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>

src/layout/index.vue

@@ -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 './components/Sidebar/index.vue'
+  import Sidebar from './Sidebar/index.vue'
-  import UHeader from './components/UHeader/index.vue'
+  import UHeader from './Header/index.vue'
-  import AppMain from './components/AppMain.vue'
+  import UMain from './Main/index.vue'
   import { useResizeHandler } from './hooks/useResizeHandler'
 
   import { useStore } from 'vuex'
@@ -30,7 +30,7 @@
     components: {
       Sidebar,
       UHeader,
-      AppMain,
+      UMain,
     },
     setup() {
       const store = useStore()