Merge pull request '侧边栏高亮优化' (#134) from 1205-rankList-fix into master

Reviewed-on: #134

src/components/SetLeftMenu.vue

@@ -3,14 +3,17 @@
     <ul style="margin: 0;">
       <li v-for="(item, index) in menuList" :key="item.path + random()">
         <div 
-          :class="[($route.path == item.path) || (!item.path && curIndex == index) ? 'active' : '', 'flex', ($route.path == item.path) ? curIndex = index : '']" @click="gotoPath(item, index)">
+        :class="[curIndex === index ? 'active' : '','flex']" @click="gotoPath(item, index)">
           <SvgIcon1 :iconPath="require(`@/assets/${item.img}`)" defaultColor="#8A9099" :size="16" activeColor="#006AFF"
-              :isActive="($route.path == item.path || (!item.path && curIndex == index))" />
+            :isActive="curIndex === index" />
-
           <span class="title_text">{{ item.name }}</span>
         </div>
-        <p :class="['flex', (activeFloor && (activeFloor == item1.desc || activeFloor == item1.path)) ? 'curActive' : '']" v-for="(item1) in item.list"
+        <p v-for="(item1) in item.list" :key="item1.name" :class="[
-          @click="setActiveCur(item1, item,index)" :key="item1.name">{{ item1.name }}</p>
+          'flex',
+          activeFloor === (item1.desc || item1.path || item1.componentsName) ? 'curActive' : ''
+        ]" @click="setActiveCur(item1, item, index)">
+          {{ item1.name }}
+        </p>
       </li>
     </ul>
   </aside>
@@ -18,22 +21,16 @@
 
 <script>
 import SvgIcon1 from '@/components/SvgIcon1.vue';
-// :class="[$route.path != item.path ? 'not-point' : '', 'flex', activeFloor == item1.desc ? 'curActive' : '']"
 import { mapState } from 'vuex';
 import store from '../store';
+
 export default {
   name: 'Sidebar',
   props: {
     menuList: {
       type: Array,
       required: true
-    },
+    }
-    // activeFloor:{
-    //   type:String
-    // },
-    // curIndex:{
-    //   type:Number
-    // }
   },
   components: {
     SvgIcon1,
@@ -41,33 +38,31 @@ export default {
   data() {
     return {
       activeFloor: null,
-      curIndex: 0,
+      curIndex: -1, // 初始化为 -1，表示未找到匹配项
       scrollLock: false,
-      componentsName:''
+      componentsName: '',
+      // 记录每个子菜单项对应的父菜单索引
+      pathToIndexMap: {}
     }
   },
 
   watch: {
-    '$route'() {
+    '$route.path': {
-      // console.log(to, from);
+      immediate: true, // 立即执行一次
-      // 路由变化时重新计算位置
+      handler(newPath) {
-      this.$nextTick(() => {
+        this.updateActiveMenu(newPath);
-        this.calculateFloorOffsets();
+      }
-        this.handleScroll(); // 立即检查当前位置
-      });
     }
   },
+
   mounted() {
-    let curItem = this.menuList[this.curIndex];
+    // 初始化路径映射表
-    // 增加单项初始值判断
+    this.buildPathMap();
-    if(!curItem.list || !curItem.list.length){
+
-      this.activeFloor = curItem.path
+    // 根据当前路由更新激活状态
-    }else{
+    this.updateActiveMenu(this.$route.path);
-      this.activeFloor = curItem?.list?.[0]?.desc || curItem?.list?.[0]?.path;
+
-    }
-    this.componentsName = curItem?.list?.[0]?.componentsName;
     this.$nextTick(() => {
-      // 更可靠的获取滚动容器方式
       this.scrollContainer = document.querySelector('.main-content') ||
         document.getElementById('main-content') ||
         window;
@@ -80,55 +75,117 @@ export default {
       }
     });
   },
+
   beforeDestroy() {
     if (this.scrollContainer) {
       this.scrollContainer.removeEventListener('scroll', this.handleScroll);
     }
   },
-  created() {
+
-    // console.log(this.$parent.$refs.scrollContainer,'this.$refs.sc--rollContainer--');
-  },
   computed: {
-    ...mapState(['pageTitle', 'carryParam']) // 从Vuex映射showSidebar状态到组件的计算属性中
+    ...mapState(['pageTitle', 'carryParam'])
   },
+
   methods: {
+    // 构建路径到父菜单索引的映射
+    buildPathMap() {
+      const map = {};
+      this.menuList.forEach((item, parentIndex) => {
+        if (item.list && item.list.length) {
+          item.list.forEach(subItem => {
+            if (subItem.path) {
+              map[subItem.path] = parentIndex;
+            }
+          });
+        }
+      });
+      this.pathToIndexMap = map;
+    },
+
+    // 根据当前路由更新激活的菜单项
+    updateActiveMenu(currentPath) {
+      // 1. 先尝试匹配二级菜单路径
+      const parentIndex = this.pathToIndexMap[currentPath];
+      if (parentIndex !== undefined) {
+        this.curIndex = parentIndex;
+
+        // 找到对应的二级菜单项
+        const parentItem = this.menuList[parentIndex];
+        const subItem = parentItem.list.find(item => item.path === currentPath);
+
+        if (subItem) {
+          // 如果是组件切换模式
+          if (subItem.componentsName) {
+            this.activeFloor = subItem.componentsName;
+            store.commit('SET_COMPONENTS_NAME', subItem.componentsName);
+          } else {
+            // 如果是路由模式
+            this.activeFloor = subItem.desc || subItem.path;
+          }
+          return;
+        }
+      }
+
+      // 2. 如果找不到匹配的二级路径，尝试匹配一级路径
+      for (let i = 0; i < this.menuList.length; i++) {
+        const item = this.menuList[i];
+        if (item.path && item.path === currentPath) {
+          this.curIndex = i;
+          this.activeFloor = item.path;
+
+          // 如果有子菜单，默认选中第一个
+          if (item.list && item.list.length) {
+            const firstSubItem = item.list[0];
+            if (firstSubItem.componentsName) {
+              store.commit('SET_COMPONENTS_NAME', firstSubItem.componentsName);
+            }
+          }
+          return;
+        }
+      }
+
+      // 3. 如果都没有匹配，默认选中第一个菜单项
+      if (this.curIndex === -1 && this.menuList.length > 0) {
+        this.curIndex = 0;
+        const firstItem = this.menuList[0];
+        if (firstItem.list && firstItem.list.length) {
+          const firstSubItem = firstItem.list[0];
+          this.activeFloor = firstSubItem.desc || firstSubItem.path || firstSubItem.componentsName;
+          if (firstSubItem.componentsName) {
+            store.commit('SET_COMPONENTS_NAME', firstSubItem.componentsName);
+          }
+        } else {
+          this.activeFloor = firstItem.path;
+        }
+      }
+    },
+
     random() {
-      var randomNumber = Math.random();
+      return Math.random();
-      return randomNumber
     },
+
     calculateFloorOffsets() {
-      this.menuList.forEach(item => {
+      if (this.curIndex === -1 || !this.menuList[this.curIndex]?.list) return;
-        item.list?.forEach(every => {
+
+      this.menuList[this.curIndex].list?.forEach(every => {
         const el = document.getElementById(every.desc);
         if (el) {
-            // 获取元素相对于视口顶部的距离
           every.offsetTop = el.getBoundingClientRect().top + window.pageYOffset;
         }
       });
-      });
     },
 
     handleScroll() {
-      if (this.scrollLock || !this.menuList[this.curIndex]?.list) return;
+      if (this.scrollLock || this.curIndex === -1 || !this.menuList[this.curIndex]?.list) return;
 
       const scrollPosition = this.getScrollPosition();
       let activeFloor = null;
-      console.log(this.curIndex,scrollPosition,'this.curIndex===');
+
-
+      // 从上往下查找当前可见区域对应的楼层
-      // 从下往上查找当前可见区域对应的楼层
-      // for (let i = this.menuList[this.curIndex].list.length - 1; i >= 0; i--) {
-      //   const item = this.menuList[this.curIndex].list[i];
-      //   if (scrollPosition + 100 >= (item.offsetTop || 0)) { // 100是提前量
-      //     activeFloor = item.desc;
-      //     break;
-      //   }
-      // }
-      // 从上往下
       for (let i = 0; i < this.menuList[this.curIndex].list.length; i++) {
         const item = this.menuList[this.curIndex].list[i];
-        if (scrollPosition + 100 >= (item.offsetTop || 0)) { // 100是提前量
+        if (item.offsetTop && scrollPosition + 100 >= item.offsetTop) {
-          activeFloor = item.desc;
+          activeFloor = item.desc || item.componentsName;
-          break;
         }
       }
 
@@ -143,93 +200,89 @@ export default {
       }
       return this.scrollContainer.scrollTop;
     },
-    // setActiveCur(dom, item) {
+
-    //   if (this.$route.path != item.path) {
+    gotoPath(item, index) {
-    //     this.$router.push(item.path)
+      this.curIndex = index;
-    //     store.commit('SET_PAGETITLE', item.name);
-    //   }
-    //   setTimeout(() => {
-    //     this.activeFloor = dom;
-    //     this.setHighActive(dom)
-    //   }, 500)
-    // },
-
-    // setHighActive(dom) {
-    //   this.scrollLock = true;
-    //   const ele = document.getElementById(dom)
-    //   if (!ele) return
-    //   ele.classList.add('ceshi')
-    //   ele.scrollIntoView({ behavior: 'smooth', block: 'start' })
-    //   setTimeout(() => {
-    //     ele.classList.remove('ceshi')
-    //   }, 1000)
-    // }
-    gotoPath(item) {
       let path = item.path;
-      this.activeFloor = path
+
-      if (!path) {
+      // 如果菜单项没有自己的path但有子菜单，默认选中第一个子项
-        this.curIndex = 0;
+      if (!path && item.list && item.list.length) {
+        const firstSubItem = item.list[0];
+        if (firstSubItem.componentsName) {
+          this.activeFloor = firstSubItem.componentsName;
+          store.commit('SET_COMPONENTS_NAME', firstSubItem.componentsName);
+        } else if (firstSubItem.path) {
+          // 如果有二级路径，跳转到二级路径
+          this.setActiveCur(firstSubItem, item, index);
           return;
         }
-      if (this.$route.path != path) {
+      }
-        this.curIndex = 0;
+
+      this.activeFloor = path;
+      if (!path) {
         this.scrollLock = false;
         this.handleScroll();
+        return;
+      }
 
-        // 携带当前所有参数跳转
+      if (this.$route.path !== path) {
         this.$router.push({
           path: path,
-          query: { ...this.$route.query }, // 携带所有查询参数
+          query: { ...this.$route.query },
-          params: { ...this.$route.params } // 携带所有路由参数
+          params: { ...this.$route.params }
         });
 
-        // 重置页面滚动高度
         const dom = document.getElementById('main-content');
         if (dom) dom.scrollTop = 0;
       }
     },
 
-    setActiveCur(item1, item,index) {
+    setActiveCur(item1, item, index) {
       this.curIndex = index;
       let componentsName = item1?.componentsName;
-      // 如果采用的是 组件切换显示的办法
+
-      if(componentsName){
+      // 组件切换模式
+      if (componentsName) {
         this.activeFloor = componentsName;
-        // 同步 当前切换的组件名称
         store.commit('SET_COMPONENTS_NAME', componentsName);
-        return
+        return;
       }
+
       // 如果 是路由跳转
       // 如果 二级菜单同时存在路由 那么跳转以二级路由为优先
       // 如果 是同一页面 只是页面区域的滚动展示 那么跳转一级路由
       let path = item1.path || item.path;
-      if ( this.$route.path !== path) {
+      if (path && this.$route.path !== path) {
-        if(this.carryParam){
+        if (this.carryParam) {
-          // 携带当前所有参数跳转
           this.$router.push({
             path: path,
-            query: { ...this.$route.query }, // 携带所有查询参数
+            query: { ...this.$route.query },
-            params: { ...this.$route.params } // 携带所有路由参数
+            params: { ...this.$route.params }
           });
-        }else{
+        } else {
           this.$router.push(path);
         }
 
         store.commit('SET_PAGETITLE', item.name);
+
+        // 如果是跳转到新页面，重置滚动
+        const dom = document.getElementById('main-content');
+        if (dom) dom.scrollTop = 0;
       }
 
       this.scrollLock = true;
-      if(item1.desc){
+      if (item1.desc) {
         this.activeFloor = item1.desc;
       }
-      // 如果 二级路由存在跳转 那么不再进行页面的滚动
+      if (item1.path) {
-      if(item1.path){
         this.activeFloor = item1.path;
-        return
+        return;
       }
 
       this.$nextTick(() => {
+        if (item1.desc) {
           this.setHighActive(item1.desc);
+        }
         setTimeout(() => {
           this.scrollLock = false;
         }, 1000);
@@ -244,9 +297,9 @@ export default {
           eles[i].classList.remove('siteMessage-active');
         }
         ele.classList.add('siteMessage-active');
-        setTimeout(function (){
+        setTimeout(() => {
           ele.classList.remove('siteMessage-active');
-        },1000)
+        }, 1000);
         ele.scrollIntoView({
           behavior: 'smooth',
           block: 'start'
@@ -265,10 +318,12 @@ export default {
   background: #FFFFFF;
   box-shadow: 0px 0px 11px 2px rgba(147, 147, 147, 0.11);
 }
-ul{
+
+ul {
   height: 100%;
   overflow-y: auto;
 }
+
 .ceshi {
   // animation: fadeInOut 2s infinite;
 }

src/store/index.js

@@ -402,91 +402,6 @@ export default new Vuex.Store({
        ]
       }
     ],
-    siteSettingData1: [{
-        name: '基本设置',
-        path: '/agent/siteBaseSetting',
-        img: 'site/sitebase.svg',
-        imgActive: require('@/assets/site/sitebase_active.svg'),
-        list: [{
-            name: '站点信息',
-            desc: 'siteMessage1'
-          },
-          {
-            name: '域名设置',
-            desc: 'siteMessage2'
-          },
-          {
-            name: '渠道设置',
-            desc: 'siteMessage14'
-          },
-          {
-            name: '收款方式',
-            desc: 'siteMessage3'
-          },
-        ]
-      },
-      {
-        name: '个性化设置',
-        path: '/agent/sitePersonalization',
-        img: 'site/gexinghua.svg',
-        imgActive: require('@/assets/site/sitebase_active.svg'),
-        list: [{
-            name: '网页模板',
-            desc: 'siteMessage4'
-          },
-          {
-            name: '客服设置',
-            desc: 'siteMessage5'
-          },
-          {
-            name: '功能显隐',
-            desc: 'siteMessage6'
-          },
-          {
-            name: '安全提交',
-            desc: 'siteMessage7'
-          },
-          {
-            name: '初始订单数',
-            desc: 'siteMessage8'
-          },
-        ]
-      },
-      {
-        name: '移动端设置',
-        path: '/agent/siteMobileSetting',
-        img: 'site/siteh5.svg',
-        imgActive: require('@/assets/site/sitebase_active.svg'),
-        list: [{
-            name: '微信H5',
-            desc: 'siteMessage9'
-          },
-          {
-            name: '小程序',
-            desc: 'siteMessage10'
-          },
-        ]
-      },
-      {
-        name: '营销推广',
-        path: '/siteSetting/siteSem',
-        img: 'site/sitesem.svg',
-        imgActive: require('@/assets/site/sitebase_active.svg'),
-        list: [{
-            name: 'SEO设置',
-            desc: 'siteMessage11'
-          },
-          {
-            name: 'SEM设置',
-            desc: 'siteMessage12'
-          },
-          {
-            name: '访问统计',
-            desc: 'siteMessage13'
-          },
-        ]
-      }
-    ],
     siteSettingData: [ //第二种侧边栏 -- 点击单项进行页面滚动
       {
         name: '基本设置',