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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design/pro-layout",
-  "version": "1.0.0-beta.424",
+  "version": "1.0.0-beta.426",
   "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/components/pro-layout-header/pro-layout-logo/index.vue

@@ -10,8 +10,8 @@
       <Col>
         <div class="system-name" :style="nameStyle">{{systemName}}</div>
       </Col>
-      <Col v-if="'1' === systemInfo.backToHome">
-        <Button class="home-btn" shape="circle" icon="ios-home">返回工作台</Button>
+      <Col v-if="'1' === systemInfo.backToHome && 'button' === systemInfo.backToHomeStyle">
+        <Button class="home-btn" shape="circle" icon="ios-home">{{ systemInfo.backToHomeText || '返回工作台' }}</Button>
       </Col>
     </Row>
   </div>
@@ -185,7 +185,7 @@ export default {
     cursor: pointer;
     border: none;
     outline: none;
-    color: var(--primary-color) !important;
+    color: var(--primary-color,@_primary-color) !important;
     background: #FFFFFF !important;
     padding: 8px 14px;
     display: flex;

package/src/components/pro-layout-header/pro-layout-nav/index.vue

@@ -131,15 +131,29 @@ export default {
       }
     },
     initNav(data) {
+      // 过滤掉首页项，获取真实的业务数据
+      const realData = data.filter(item => item.appId !== 'backHome');
       if (
-          _.some(data, (app) => app.children?.length) || // 分组以后会死循环调用，中断一下
-          (arraysEqual(this.originNavList, data) &&
+          _.some(realData, (app) => app.children?.length) || // 分组以后会死循环调用，中断一下
+          (arraysEqual(this.originNavList, realData) &&
               this.topMenuNum === this.lastTopMenuNum)
       ) {
         return;
       }
-      this.originNavList = data;
-      let dataClone = _.cloneDeep(data);
+      this.originNavList = realData;
+      let dataClone = _.cloneDeep(realData);
+
+      // 如果配置了显示首页且显示样式是应用式，在列表最前面添加首页项
+      if (dataClone && dataClone.length > 0 && this.systemInfo.backToHome && this.systemInfo.backToHomeStyle === "app") {
+        const homeItem = {
+          appId: 'backHome',
+          name: this.systemInfo.backToHomeText || '首页',
+          icon: 'ios-home',
+          selected: false
+        };
+        dataClone.unshift(homeItem);
+      }
+
       let parentNameEnum = {};
       _.forEach(dataClone, (app) => {
         let extendProps = app.extendProps;
@@ -190,6 +204,9 @@ export default {
       }
       if (this.navList.length > 0) {
         let appId = this.navList[0].appId;
+        if (this.systemInfo.backToHome && this.systemInfo.backToHomeStyle === "app") {
+          appId = this.navList[1].appId;
+        }
         for (let i = 0; i < this.navList.length; i++) {
           if (this.navList[i].selected == true) {
             appId = this.navList[i].appId;
@@ -209,6 +226,13 @@ export default {
     },
     selectApp(appId) {
       if (appId) {
+        if (appId === 'backHome') {
+          Bus.$emit("change-app", {
+            appId,
+            appInfo: {}
+          });
+          return;
+        }
         let res = this.originNavList.filter((app) => app.appId == appId);
         if (res && res.length > 0) {
           Bus.$emit("change-app", { appId, appInfo: res[0] });

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;