菜单栏优化

ruoyi-ui/src/views/childRoom/LeftMenu.vue

@@ -2,7 +2,7 @@
   <div>
     <div
       class="floating-left-menu"
-      :class="{ 'hidden': isHidden, 'edit-mode': isEditMode, 'position-top': position === 'top', 'position-bottom': position === 'bottom', 'position-left': position === 'left', 'position-right': position === 'right' }"
+      :class="{ 'hidden': isHidden, 'edit-mode': isEditMode, 'position-top': position === 'top', 'position-bottom': position === 'bottom', 'position-left': position === 'left' }"
       @mouseenter="showTooltip = true"
       @mouseleave="showTooltip = false"
     >
@@ -18,6 +18,7 @@
       :options="dragOptions"
       :disabled="!isEditMode"
       @end="onDragEnd"
+      @wheel.native="handleWheel"
     >
       <div
         v-for="item in localMenuItems"
@@ -185,6 +186,14 @@ export default {
       this.showDeleteDialog = true
     },
 
+    handleWheel(event) {
+      if (this.position === 'top' || this.position === 'bottom') {
+        event.preventDefault()
+        const container = event.currentTarget
+        container.scrollLeft += event.deltaY
+      }
+    },
+
     confirmDelete() {
       if (this.itemToDelete) {
         const index = this.localMenuItems.findIndex(item => item.id === this.itemToDelete.id)
@@ -235,7 +244,7 @@ export default {
   max-width: 800px;
   height: 40px;
   flex-direction: row;
-  padding: 5px 15px;
+  padding: 5px 4px 5px 4px;
   display: flex;
   align-items: center;
 }
@@ -247,10 +256,10 @@ export default {
   transform: translateX(-50%);
   width: auto;
   min-width: 200px;
-  max-width: 800px;
+  max-width: 1100px;
   height: 40px;
   flex-direction: row;
-  padding: 5px 18px 5px 18px;
+  padding: 5px 5px 5px 5px;
   display: flex;
   align-items: center;
 }
@@ -261,13 +270,6 @@ export default {
   width: 42px;
 }
 
-.floating-left-menu.position-right {
-  top: 70px;
-  right: 20px;
-  left: auto;
-  width: 42px;
-}
-
 .floating-left-menu.hidden {
   opacity: 0;
   transform: translateX(-100%);
@@ -279,10 +281,6 @@ export default {
   transform: translateX(-50%) translateY(-100%);
 }
 
-.floating-left-menu.position-right.hidden {
-  transform: translateX(100%);
-}
-
 .hide-btn {
   position: absolute;
   top: 15px;
@@ -318,10 +316,6 @@ export default {
   transform: rotate(0deg);
 }
 
-.position-right .hide-btn i {
-  transform: rotate(180deg);
-}
-
 .menu-icons {
   display: flex;
   flex-direction: column;
@@ -337,17 +331,17 @@ export default {
 .position-top .menu-icons,
 .position-bottom .menu-icons {
   flex-direction: row;
-  margin: 0 0 0 30px;
+  margin: 0 0 0 40px;
   max-height: 40px;
-  max-width: calc(100% - 40px);
+  max-width: calc(100% - 50px);
   overflow-x: auto;
   overflow-y: hidden;
   flex: 1;
   padding-right: 10px;
+  scrollbar-width: none;
 }
 
-.position-left .menu-icons,
+.position-left .menu-icons {
-.position-right .menu-icons {
   flex-direction: column;
   margin-top: 30px;
   max-height: calc(100vh - 280px);
@@ -367,6 +361,21 @@ export default {
   display: none;
 }
 
+.position-top .menu-icons::-webkit-scrollbar,
+.position-bottom .menu-icons::-webkit-scrollbar {
+  display: none;
+}
+
+.position-top .menu-icons::-webkit-scrollbar-thumb,
+.position-bottom .menu-icons::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+
+.position-top .menu-icons::-webkit-scrollbar-track,
+.position-bottom .menu-icons::-webkit-scrollbar-track {
+  background: transparent;
+}
+
 .menu-item {
   display: flex;
   justify-content: center;
@@ -489,12 +498,11 @@ export default {
 
 .position-top .add-btn,
 .position-bottom .add-btn {
-  margin-left: 10px;
+  margin-left: 0px;
   margin-top: 0;
 }
 
-.position-left .add-btn,
+.position-left .add-btn {
-.position-right .add-btn {
   margin-top: 10px;
   margin-left: 0;
 }

ruoyi-ui/src/views/dialogs/PageLayoutDialog.vue

@@ -44,8 +44,7 @@ export default {
       positionOptions: [
         { value: 'top', label: '顶部', icon: 'el-icon-top' },
         { value: 'bottom', label: '底部', icon: 'el-icon-bottom' },
-        { value: 'left', label: '左侧', icon: 'el-icon-back' },
+        { value: 'left', label: '左侧', icon: 'el-icon-back' }
-        { value: 'right', label: '右侧', icon: 'el-icon-right' }
       ]
     };
   },
@@ -139,9 +138,10 @@ export default {
 }
 
 .position-options {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(2, 1fr);
+  flex-direction: row;
-  gap: 10px;
+  gap: 15px;
+  justify-content: space-between;
 }
 
 .position-option {
@@ -149,12 +149,14 @@ export default {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 15px 10px;
+  padding: 20px;
   border: 1px solid #e8e8e8;
-  border-radius: 6px;
+  border-radius: 8px;
   cursor: pointer;
   transition: all 0.3s;
   background: white;
+  flex: 1;
+  min-height: 80px;
 }
 
 .position-option:hover {