1

static/scss/global/global.scss

@@ -283,6 +283,22 @@ uni-content {
     padding-left: px2rpx(280) !important;
 }
 
+uni-left-window.collapsed {
+    width: px2rpx(64) !important;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+uni-left-window.collapsed:hover {
+    width: px2rpx(280) !important;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+uni-content.collapsed {
+    padding-left: px2rpx(64) !important;
+}
+
 @media screen and (max-width: 1100px) {
     uni-left-window {
         width: px2rpx(64) !important;

windows/left-window.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="cwg-sidebar">
+  <view class="cwg-sidebar" :class="{ 'sidebar-collapsed': isCollapsed }">
     <view class="menu-list">
       <view class="menu" v-for="(item, index) in menus" :key="item.path + index">
         <view class="menu-item" @click="handleClick(index)">
@@ -39,10 +39,26 @@
 import { ref } from 'vue'
 import { useMenuSplit } from '@/composables/useMenuSplit'
 const { menus, setSubmenuRef, setMode, handleClick, handleSubmenuClick, mode } = useMenuSplit()
+
+// 控制侧边栏折叠状态
+const isCollapsed = ref(false)
+
 // 固定菜单项点击事件
 function handleFixedMenuClick() {
-  // 这里可以添加固定菜单的点击处理逻辑
-  console.log('Fixed menu clicked')
+  // 切换侧边栏折叠状态
+  isCollapsed.value = !isCollapsed.value
+  // 更新全局样式
+  const leftWindow = document.querySelector('uni-left-window')
+  const content = document.querySelector('uni-content')
+  if (leftWindow && content) {
+    if (isCollapsed.value) {
+      leftWindow.classList.add('collapsed')
+      content.classList.add('collapsed')
+    } else {
+      leftWindow.classList.remove('collapsed')
+      content.classList.remove('collapsed')
+    }
+  }
 }
 </script>
 <style scoped lang="scss">
@@ -148,6 +164,22 @@ function handleFixedMenuClick() {
   }
 }
 
+.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;
+}
+
+.sidebar-collapsed .fixed {
+  display: flex;
+}
+
 @media screen and (max-width: 1100px) {
 
   .cwg-sidebar:not(:hover) .menu-label,