@lambo-design/pro-layout 1.0.0-beta.424 → 1.0.0-beta.425

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design/pro-layout",
-  "version": "1.0.0-beta.424",
+  "version": "1.0.0-beta.425",
   "description": "",
   "main": "index.js",
   "author": "lambo",
@@ -10,8 +10,8 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@lambo-design/shared": "^1.0.0-beta.346",
-    "@lambo-design/core": "^4.7.1-beta.176"
+    "@lambo-design/core": "^4.7.1-beta.176",
+    "@lambo-design/shared": "^1.0.0-beta.346"
   },
   "scripts": {
     "release-pro-layout": "pnpm release-beta && git push --follow-tags && pnpm re-publish",

package/src/index.vue

@@ -23,14 +23,21 @@
       </LamboProLayoutHeader>
     </i-header>
     <i-layout>
-      <i-sider v-show="isHideLeftMenu"
+      <i-sider
+          v-show="isHideLeftMenu"
           class="pro-layout-sider"
           hide-trigger
           collapsible
-          :width="220"
+          :width="siderWidth"
           :collapsed-width="64"
           v-model="collapsed">
         <LamboProLayoutSider ref="sider"></LamboProLayoutSider>
+        <!-- 拖拽条 -->
+        <div
+            v-show="isHideLeftMenu"
+            class="sider-resize-bar"
+            @mousedown.stop.prevent="startResize"
+        ></div>
       </i-sider>
       <i-content class="pro-layout-content">
         <i-layout class="pro-layout-content-layout">
@@ -44,6 +51,13 @@
         </i-layout>
       </i-content>
     </i-layout>
+    <!-- 拖拽时的全局捕获层 -->
+    <div
+        v-if="isResizing"
+        class="resize-mask"
+        @mousemove="onMouseMove"
+        @mouseup="stopResize"
+    ></div>
   </i-layout>
 </template>
 
@@ -121,7 +135,11 @@ export default {
       appId: '',
       activeName: '',
       tagList: [],
-      isHideLeftMenu: true
+      isHideLeftMenu: true,
+      siderWidth: 220,
+      isResizing: false,
+      minWidth: 180,
+      maxWidth: 600,
     }
   },
   components: {
@@ -169,9 +187,41 @@ export default {
       },
       immediate: true,
       deep: true
+    },
+    collapsed(val) {
+      if (val) {
+        this.siderWidth = 64
+      } else {
+        const savedWidth = localStorage.getItem('siderWidth')
+        this.siderWidth = savedWidth ? parseInt(savedWidth) : 220
+      }
     }
   },
   methods: {
+    startResize(e) {
+      e.preventDefault()
+      e.stopPropagation()
+
+      this.isResizing = true
+      this.startX = e.clientX
+      this.startWidth = this.siderWidth
+    },
+
+    onMouseMove(e) {
+      if (!this.isResizing) return
+
+      const moveX = e.clientX - this.startX
+      const newWidth = this.startWidth + moveX
+
+      if (newWidth < this.minWidth) return
+      if (newWidth > this.maxWidth) return
+
+      this.siderWidth = newWidth
+    },
+
+    stopResize() {
+      this.isResizing = false
+    },
     initListener(){
       Bus.$on('trigger-change',(data)=>{
         this.triggerChange(data)
@@ -357,6 +407,10 @@ export default {
   },
   mounted(){
     this.initTags();
+    const savedWidth = localStorage.getItem('siderWidth')
+    if (savedWidth) {
+      this.siderWidth = parseInt(savedWidth)
+    }
   },
   created(){
     this.initListener();
@@ -370,6 +424,34 @@ export default {
 <style lang="less">
 @import "@lambo-design/core/src/styles/default";
 @import "styles/color";
+.resize-mask {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 999999; /* 比所有菜单、浮层都高 */
+  background: transparent;
+  cursor: col-resize;
+}
+.sider-resize-bar {
+  position: absolute;
+  right: -3px;
+  top: 0;
+  width: 6px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 99999;
+  background: transparent;
+}
+
+.sider-resize-bar:hover {
+  background: #ddd;
+}
+
+.sider-resize-bar:hover {
+  background: #ddd;
+}
 .pro-layout {
   height: 100vh;
   width: 100%;
@@ -380,6 +462,7 @@ export default {
   }
   .pro-layout-sider {
     overflow: hidden;
+    position: relative;
     .ivu-layout-sider-children {
       height: calc(100vh - 65px);
       overflow-y: scroll;