feat:侧边栏

composables/useLeftSidebarCollapse.ts

@@ -1,15 +1,20 @@
 import { ref } from 'vue'
 
 const isCollapsed = ref(false)
+const isCollapsedByToggle = ref(false)
 
 function syncCollapsedFromDom() {
   if (typeof document === 'undefined') return
   const leftWindow = document.querySelector('uni-left-window')
   isCollapsed.value = leftWindow?.classList.contains('collapsed') ?? false
+  isCollapsedByToggle.value = isCollapsed.value
 }
 
-function toggleLeftSidebar() {
+function toggleLeftSidebar(isFromToggle = true) {
   isCollapsed.value = !isCollapsed.value
+  if (isFromToggle) {
+    isCollapsedByToggle.value = isCollapsed.value
+  }
   const leftWindow = document.querySelector('uni-left-window')
   const content = document.querySelector('uni-content')
   if (!leftWindow || !content) return
@@ -26,6 +31,7 @@ function toggleLeftSidebar() {
 export function useLeftSidebarCollapse() {
   return {
     isCollapsed,
+    isCollapsedByToggle,
     toggleLeftSidebar,
     syncCollapsedFromDom,
   }

static/scss/global/global.scss

@@ -662,6 +662,11 @@ uni-content {
     padding-left: px2rpx(280) !important;
 }
 
+uni-left-window.collapsed:hover {
+  width: px2rpx(280) !important;
+  white-space: nowrap;
+  overflow: hidden;
+}
 uni-left-window.collapsed {
     width: px2rpx(64) !important;
     white-space: nowrap;
@@ -676,7 +681,9 @@ uni-content.collapsed {
     uni-left-window:not(.collapsed) {
         width: px2rpx(280) !important;
     }
-
+  uni-left-window:hover {
+    width: px2rpx(280) !important;
+  }
     uni-left-window.collapsed {
         width: px2rpx(64) !important;
     }
@@ -706,6 +713,9 @@ uni-content.collapsed {
     uni-content.collapsed {
         padding-left: 0 !important;
     }
+  uni-left-window:hover {
+    width: px2rpx(280) !important;
+  }
 }
 
 .search-btn {

windows/left-window.vue

@@ -1,6 +1,5 @@
 <template>
-  <view class="left-window-root">
-    <view class="cwg-sidebar bg-body" :class="{ 'sidebar-collapsed': isCollapsed, 'dark': isDark }">
+    <view class="cwg-sidebar bg-body" :class="{ 'sidebar-collapsed': isCollapsed, 'dark': isDark }" @mouseenter="handleHoverEnter" @mouseleave="handleHoverLeave">
       <view class="menu-list">
       <view class="menu" v-for="(item, index) in menus" :key="item.path + index">
         <view class="menu-item" @click="handleClick(index)">
@@ -41,7 +40,6 @@
       </view>
     </view>
     </view>
-  </view>
 </template>
 
 <script lang="ts" setup>
@@ -56,12 +54,25 @@ const { userInfo } = storeToRefs(userStore)
 import useGlobalStore from '@/stores/use-global-store'
 const globalStore = useGlobalStore()
 const isDark = computed(() => globalStore.theme === 'dark')
-const { isCollapsed, syncCollapsedFromDom } = useLeftSidebarCollapse()
+const { isCollapsed, isCollapsedByToggle, syncCollapsedFromDom,toggleLeftSidebar } = useLeftSidebarCollapse()
 
 onMounted(() => {
   syncCollapsedFromDom()
 })
 
+// 处理侧边栏 hover 展开/折叠
+const handleHoverEnter = () => {
+  if (isCollapsed.value) {
+    toggleLeftSidebar(false)
+  }
+}
+
+const handleHoverLeave = () => {
+  if (!isCollapsed.value && isCollapsedByToggle.value) {
+    toggleLeftSidebar(false)
+  }
+}
+
 // ib按钮展示
 const ibStatus = computed(() => {
   return userInfo.value?.customInfo?.ibInvalid == 0 && !!userInfo.value?.ibInfo
@@ -70,11 +81,6 @@ const ibStatus = computed(() => {
 <style scoped lang="scss">
 @import "@/uni.scss";
 
-.left-window-root {
-  position: relative;
-  width: 100%;
-  height: calc(100vh - 56px);
-}
 
 .cwg-sidebar {
   width: 100%;
@@ -191,11 +197,16 @@ const ibStatus = computed(() => {
     gap: px2rpx(8);
   }
 }
-
-.sidebar-collapsed .menu-label,
-.sidebar-collapsed .submenu-box,
-.sidebar-collapsed .chevron-icon {
-  display: none !important;
+.sidebar-collapsed:not(:hover) .menu-label,
+.sidebar-collapsed:not(:hover) .submenu-box,
+.sidebar-collapsed:not(:hover) .chevron-icon {
+  display: none;
+}
+.sidebar-collapsed:hover .menu-label,
+.sidebar-collapsed:hover .submenu-box,
+.sidebar-collapsed:hover .chevron-icon {
+  display: block;
+  //display: none;
 }
 
 .sidebar-collapsed .fixed {