菜单布局修改

src/assets/styles/sidebar.scss

@@ -4,8 +4,8 @@
 
   .main-container {
     min-height: 100%;
-    transition: margin-left .28s;
-    margin-left: vars.$base-sidebar-width;
+    // transition: margin-left .28s;
+    // margin-left: vars.$base-sidebar-width;
     position: relative;
   }
 
@@ -236,3 +236,46 @@
     }
   }
 }
+
+
+
+// 水平菜单样式调整
+.el-menu--horizontal {
+  background-color: rgba(33, 103, 217, 1);
+  > .el-menu-item,
+  > .el-sub-menu > .el-sub-menu__title {
+    height: 80px;
+    line-height: 80px;
+  }
+  
+  .el-menu-item,
+  .el-sub-menu__title {
+    padding: 0 20px;
+  }
+  
+  .el-menu--popup {
+    padding: 5px 0;
+    
+    .el-menu-item {
+      height: auto;
+      line-height: normal;
+    }
+  }
+}
+.el-sub-menu__title {
+  height: 80px;
+}
+.el-menu-item {
+  &:hover {
+    background-color: rgba(33, 103, 217, 1);
+  }
+}
+.el-menu-item.is-active {
+      border-bottom: 2px solid rgba(17, 200, 250, 1);
+}
+.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
+  background-color: rgba(19, 77, 171, 1);;
+}
+.el-sub-menu__title:hover {
+  background-color: rgba(19, 77, 171, 1);;
+}
\ No newline at end of file

src/components/HeaderSearch/index.vue

@@ -201,6 +201,7 @@ watch(searchPool, (list) => {
   .search-icon {
     cursor: pointer;
     font-size: 18px;
+    color: #fff;
     vertical-align: middle;
   }
 }

src/layout/components/AppMain.vue

@@ -6,7 +6,7 @@
       'has-header': hasHeader,
       [layout]: true
     }">
-    <el-scrollbar @scroll="onScroll">
+    <el-scrollbar @scroll="onScroll" class="all-back">
       <section class="app-main-container">
         <router-view v-slot="{ Component, route }">
           <transition name="fade-transform" mode="out-in">
@@ -73,5 +73,9 @@ function onScroll(val) {
     }
   }
 }
-
+.all-back {
+  background-image: url("@/assets/images/allBack.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
 </style>

src/layout/components/Navbar.vue

@@ -192,7 +192,7 @@ function toggleTheme() {
       padding-right: 0px;
 
       .avatar-wrapper {
-        margin-top: 10px;
+        // margin-top: 10px;
         right: 5px;
         position: relative;
 

src/layout/components/Sidebar/Logo.vue

@@ -58,9 +58,10 @@ const getLogoTextColor = computed(() => {
 
 .sidebar-logo-container {
   position: relative;
-  width: 100%;
-  height: 50px;
-  line-height: 50px;
+  // width: 100%;
+  width: 150px;
+  height: 80px;
+  line-height: 80px;
   background: v-bind(getLogoBackground);
   text-align: center;
   overflow: hidden;

src/layout/components/Sidebar/SidebarItem.vue

 <template>
-  <div v-if="!item.hidden">
+<div v-if="!item.hidden">
     <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
-      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }" @click="pageLuyou(onlyOneChild)">
+      <app-link :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
+        <el-menu-item style="height: 80px;"   :index="resolvePath(onlyOneChild.path)" @click="pageLuyou(onlyOneChild)">
           <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/>
-          <template #title><span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)" >{{ onlyOneChild.meta.title }}</span></template>
+          <span class="menu-title" style="color: #fff;">{{ onlyOneChild.meta.title }}</span>
         </el-menu-item>
       </app-link>
     </template>
 
-    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported >
+    <el-sub-menu style="height: 80px;line-height: 80px;"  v-else :index="resolvePath(item.path)" teleported>
       <template  v-if="item.meta" #title>
         <svg-icon :icon-class="item.meta && item.meta.icon" />
-        <span class="menu-title" :title="hasTitle(item.meta.title)" @click="pageLuyou(item)">{{ item.meta.title }}</span>
+        <span class="menu-title" style="color: #fff;">{{ item.meta.title }}</span>
       </template>
-
       <sidebar-item
         v-for="(child, index) in item.children"
         :key="child.path + index"
-        :is-nest="true"
         :item="child"
         :base-path="resolvePath(child.path)"
-        class="nest-menu"
       />
     </el-sub-menu>
   </div>

src/layout/components/Sidebar/index.vue

 <template>
-  <div :class="{ 'has-logo': showLogo }" class="sidebar-container">
-    <logo v-if="showLogo" :collapse="isCollapse" />
-    <el-scrollbar wrap-class="scrollbar-wrapper">
-      <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="getMenuBackground"
-        :text-color="getMenuTextColor" :unique-opened="true" :active-text-color="theme" :collapse-transition="false"
-        mode="vertical" :class="sideTheme">
-        <sidebar-item v-for="(route, index) in menuShowData" :key="route.id || route.path + index" :item="route"
-          :base-path="route.path" />
-        <!-- <div v-for="(route, index) in processedRouters">{{ route.path }}</div> -->
+<div class="horizontal-navbar">
+    <logo v-if="showLogo" :collapse="isCollapse" class="navbar-logo" />
+    <el-scrollbar class="scrollbar-wrapper">
+      <el-menu
+        :default-active="activeMenu"
+        mode="horizontal"
+        :background-color="getMenuBackground"
+        :text-color="getMenuTextColor"
+        :active-text-color="'#fff'"
+        :unique-opened="false"
+      >
+        <sidebar-item
+          v-for="(route, index) in menuShowData"
+          :key="route.id || route.path + index"
+          :item="route"
+          :base-path="route.path"
+        />
       </el-menu>
     </el-scrollbar>
+
+    <div class="right-menu">
+      <!-- 这里可以放用户信息、设置按钮等 -->
+       <header-search id="header-search" class="right-menu-item" />
+
+
+        <el-dropdown style="margin-left: 20px;" @command="handleCommand" class="avatar-container right-menu-item hover-effect" trigger="hover">
+          <div class="avatar-wrapper">
+            <div class="user-avatar"  style="background-color: #69a6cb;"></div>
+            <div class="user-nickname" style="position: absolute;text-align:center;width: 30px;"> {{ user.realname || '' }} </div>
+          </div>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <!-- <router-link to="/user/profile">
+                <el-dropdown-item>个人中心</el-dropdown-item>
+              </router-link> -->
+              <el-dropdown-item command="logout">
+                <span>退出登录</span>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+    </div>
   </div>
 </template>
 
 <script setup>
+import { ElMessageBox } from 'element-plus'
+import HeaderSearch from '@/components/HeaderSearch'
 import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import variables from '@/assets/styles/variables.module.scss'
 import useAppStore from '@/store/modules/app'
 import useSettingsStore from '@/store/modules/settings'
+import useUserStore from '@/store/modules/user'
 import usePermissionStore from '@/store/modules/permission'
 import { computed } from 'vue'
 
 const route = useRoute()
 const appStore = useAppStore()
+const userStore = useUserStore()
 const settingsStore = useSettingsStore()
 const permissionStore = usePermissionStore()
 // 转换接口数据为组件需要的格式
 const processedRouters = computed(() => {
   return permissionStore.sidebarRouters
 })
-
+const user = JSON.parse(sessionStorage.getItem('userInfo')).user??{}
 // 菜单类型获取
 const navType = computed(() => {
   const navStatus = appStore.navStatus
@@ -86,8 +121,119 @@ const activeMenu = computed(() => {
   }
   return path
 })
+
+function handleCommand(command) {
+  switch (command) {
+    case "setLayout":
+      setLayout()
+      break
+    case "logout":
+      logout()
+      break
+    default:
+      break
+  }
+}
+
+
+const emits = defineEmits(['setLayout'])
+function setLayout() {
+  emits('setLayout')
+}
+
+function logout() {
+  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    userStore.logOut().then(() => {
+      // location.href = '/index'
+      appStore.signOut('logout')
+      appStore.setNavStatus({type: 'manage'})
+      appStore.setQueryData({
+        projectId: ''
+      })
+       window.location.replace(`${import.meta.env.BASE_URL}`)
+
+    })
+  }).catch(() => { })
+}
+
 </script>
 
 <style lang="scss" scoped>
-/* 保持原有样式不变 */
+.horizontal-navbar {
+  display: flex;
+  align-items: center;
+  height: 80px;
+
+  .navbar-logo {
+    flex-shrink: 0;
+    // width: vars.$base-sidebar-width;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .scrollbar-wrapper {
+    flex: 1;
+    overflow: hidden;
+    
+    :deep(.el-scrollbar__view) {
+      height: 100%;
+      
+    }
+    
+    .el-menu {
+      border-bottom: none;
+      height: 100%;
+      
+      &--horizontal {
+        white-space: nowrap;
+      }
+    }
+  }
+  
+  .right-menu {
+    display: flex;
+    flex-shrink: 0;
+    padding-right: 15px;
+  }
+}
+
+.avatar-container {
+      margin-right: 0px;
+      padding-right: 0px;
+
+      .avatar-wrapper {
+        // margin-top: 10px;
+        right: 5px;
+        position: relative;
+
+        .user-avatar {
+          cursor: pointer;
+          width: 30px;
+          height: 30px;
+          border-radius: 50%;
+        }
+
+        .user-nickname{
+          position: relative;
+          // left: 5px;
+          bottom: 10px;
+          font-size: 10px;
+          font-weight: bold;
+        }
+
+        i {
+          cursor: pointer;
+          position: absolute;
+          right: -20px;
+          top: 25px;
+          font-size: 12px;
+        }
+      }
+    }
 </style>
\ No newline at end of file

src/layout/index.vue

 <template>
-  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
+  <!-- <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
     <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
     <sidebar v-if="!sidebar.hide" class="sidebar-container" />
     <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
@@ -10,6 +10,18 @@
       <app-main :need-tags-view="needTagsView" />
       <settings ref="settingRef" />
     </div>
+  </div> -->
+  <div class="app-wrapper" :style="{ '--current-color': theme }">
+    <div class="main-container">
+      <div class="top-nav-container">
+        <sidebar  @setLayout="setLayout"/>
+         <!-- <navbar @setLayout="setLayout" /> -->
+      </div>
+      <div class="content-container">
+        <app-main :need-tags-view="needTagsView" />
+        <settings ref="settingRef" />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -67,46 +79,75 @@ function setLayout() {
 @use "@/assets/styles/mixin.scss" as mix;
 @use "@/assets/styles/variables.module.scss" as vars;
 
-.app-wrapper {
-  @include mix.clearfix;
-  position: relative;
-  height: 100%;
-  width: 100%;
+// .app-wrapper {
+//   @include mix.clearfix;
+//   position: relative;
+//   height: 100%;
+//   width: 100%;
+
+//   &.mobile.openSidebar {
+//     position: fixed;
+//     top: 0;
+//   }
+// }
+
+// .drawer-bg {
+//   background: #000;
+//   opacity: 0.3;
+//   width: 100%;
+//   top: 0;
+//   height: 100%;
+//   position: absolute;
+//   z-index: 999;
+// }
+
+// .fixed-header {
+//   position: fixed;
+//   top: 0;
+//   right: 0;
+//   z-index: 9;
+//   width: calc(100% - #{vars.$base-sidebar-width});
+//   transition: width 0.28s;
+// }
+
+// .hideSidebar .fixed-header {
+//   width: calc(100% - 54px);
+// }
+
+// .sidebarHide .fixed-header {
+//   width: 100%;
+// }
+
+// .mobile .fixed-header {
+//   width: 100%;
+// }
 
-  &.mobile.openSidebar {
-    position: fixed;
-    top: 0;
-  }
-}
 
-.drawer-bg {
-  background: #000;
-  opacity: 0.3;
+.app-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
   width: 100%;
-  top: 0;
-  height: 100%;
-  position: absolute;
-  z-index: 999;
-}
   
-.fixed-header {
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: 9;
-  width: calc(100% - #{vars.$base-sidebar-width});
-  transition: width 0.28s;
-}
+  .main-container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
     
-.hideSidebar .fixed-header {
-  width: calc(100% - 54px);
-}
-
-.sidebarHide .fixed-header {
+    .top-nav-container {
       width: 100%;
-}
+      background: rgba(33, 103, 217, 1);
+      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+      z-index: 10;
+    }
     
-.mobile .fixed-header {
-  width: 100%;
+    .content-container {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: auto;
+    }
+  }
 }
 </style>
\ No newline at end of file