From bd7f63ac92c20506c7079ca8c84ae0d3a80271d7 Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Fri, 20 Jun 2025 15:15:16 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E5=AF=BC=E8=88=AA=E5=AF=B9?=
 =?UTF-8?q?=E5=BA=94=E9=AB=98=E4=BA=AE=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SetLeftMenu.vue | 288 +++++++++++++++++++++--------------------
 src/store/index.js             |  19 +++
 src/views/SiteSetting.vue      |   3 +-
 3 files changed, 169 insertions(+), 141 deletions(-)

diff --git a/src/components/SetLeftMenu.vue b/src/components/SetLeftMenu.vue
index 727c21f..4298215 100644
--- a/src/components/SetLeftMenu.vue
+++ b/src/components/SetLeftMenu.vue
@@ -1,15 +1,17 @@
 <template>
   <aside class="sidebar">
     <ul>
-      <li v-for="(item, index) in menuList" :key="item.path">
-        <div :class="[$route.path == item.path ? 'active' : '', 'flex', $route.path == item.path ? curIndex = index : '']"
-          @click="gotoPath(item.path,index)">
-          <SvgIcon1 :iconPath="require(`@/assets/${item.img}`)" defaultColor="#8A9099" :size="16"
-                activeColor="#006AFF" :isActive="$route.path == item.path" />
-          <span class="title_text" >{{ item.name }}</span>
+      <li v-for="(item, index) in menuList" :key="item.path + random()">
+        <div
+          :class="[($route.path == item.path) || (item.noToPath && curIndex == index) ? 'active' : '', 'flex', ($route.path == item.path) ? curIndex = index : '']"
+          >
+          <!-- @click="gotoPath(item, index)" 暂时先注释 -->
+          <SvgIcon1 :iconPath="require(`@/assets/${item.img}`)" defaultColor="#8A9099" :size="16" activeColor="#006AFF"
+            :isActive="($route.path == item.path || (item.noToPath && curIndex == index))" />
+          <span class="title_text">{{ item.name }}</span>
         </div>
-        <p :class="['flex', activeFloor == item1.desc ? 'curActive' : '']"
-          v-for="(item1) in item.list" @click="setActiveCur(item1.desc,item)" :key="item1.name">{{ item1.name }}</p>
+        <p :class="['flex', activeFloor == item1.desc ? 'curActive' : '']" v-for="(item1) in item.list"
+          @click="setActiveCur(item1.desc, item)" :key="item1.name">{{ item1.name }}</p>
       </li>
     </ul>
   </aside>
@@ -17,7 +19,6 @@
 
 <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 {
@@ -42,149 +43,139 @@ export default {
       activeFloor: null,
       curIndex: 0,
       scrollLock: false,
-      // menuList: [
-      //   {
-      //     name: '基本设置',
-      //     path: '/siteSetting/siteBaseSetting',
-      //     img: require('@/assets/site/sitebase.svg'),
-      //     imgActive: require('@/assets/site/sitebase_active.svg'),
-      //     list: [
-      //       {
-      //         name: '站点信息',
-      //         desc: 'siteMessage1'
-      //       },
-      //       {
-      //         name: '域名设置',
-      //         desc: 'siteMessage2'
-      //       },
-      //       {
-      //         name: '收款方式',
-      //         desc: 'siteMessage3'
-      //       },
-      //     ]
-      //   },
-      //   {
-      //     name: '个性化设置',
-      //     path: '/siteSetting/sitePersonalization',
-      //     img: require('@/assets/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: '/siteSetting/siteH5',
-      //     img: require('@/assets/site/siteh5.svg'),
-      //     imgActive: require('@/assets/site/sitebase_active.svg'),
-      //     list: [
-      //       {
-      //         name: '微信H5',
-      //         desc: 'siteMessage9'
-      //       },
-      //       {
-      //         name: '小程序',
-      //         desc: 'siteMessage10'
-      //       },
-      //     ]
-      //   },
-      //   {
-      //     name: '营销推广',
-      //     path: '/siteSetting/siteSem',
-      //     img: require('@/assets/site/sitesem.svg'),
-      //     imgActive: require('@/assets/site/sitebase_active.svg'),
-      //     list: [
-      //       {
-      //         name: 'SEO设置',
-      //         desc: 'siteMessage11'
-      //       },
-      //       {
-      //         name: 'SEM设置',
-      //         desc: 'siteMessage12'
-      //       },
-      //       {
-      //         name: '访问统计',
-      //         desc: 'siteMessage13'
-      //       },
-      //     ]
-      //   }
-      // ]
     }
   },
   mounted() {
-    // console.log(this.curIndex,'this.curIndex');
-    this.activeFloor = this.menuList[this.curIndex]['list'][0]['desc'];
-    this.calculateFloorOffsets();
+    this.activeFloor = this.menuList[this.curIndex]?.list?.[0]?.desc;
     this.$nextTick(() => {
-      // console.log(this.$parent.$refs.scrollContainer, 'this.$refs.scrollContainer--');
-      this.$parent.$refs.scrollContainer.addEventListener('scroll', this.handleScroll);
-    })
+      // 更可靠的获取滚动容器方式
+      this.scrollContainer = document.querySelector('.main-content') ||
+        document.getElementById('main-content') ||
+        window;
+      console.log(this.scrollContainer,'this.scrollContainer---');
+      if (this.scrollContainer) {
+        this.scrollContainer.addEventListener('scroll', this.handleScroll);
+        this.calculateFloorOffsets();
+      } else {
+        console.error('未找到滚动容器');
+      }
+    });
+  },
+  watch: {
+  '$route'(to, from) {
+    console.log(to, from);
+    // 路由变化时重新计算位置
+    this.$nextTick(() => {
+      this.calculateFloorOffsets();
+      this.handleScroll(); // 立即检查当前位置
+    });
+  }
+},
+  beforeDestroy() {
+    if (this.scrollContainer) {
+      this.scrollContainer.removeEventListener('scroll', this.handleScroll);
+    }
   },
   created() {
-    // console.log(this.$parent.$refs.scrollContainer,'this.$refs.sc--rollContainer--');
   },
   computed: {
-        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
-    },
-  beforeDestroy() {
-    this.$parent.$refs.scrollContainer.removeEventListener('scroll', this.handleScroll);
+    ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
   },
   methods: {
+    random() {
+      var randomNumber = Math.random();
+      return randomNumber
+    },
+    // calculateFloorOffsets() {
+    //   this.menuList.forEach(item => {
+    //     item.list.forEach(every => {
+    //       const el = document.getElementById(every.desc);
+    //       if (el) {
+    //         every.offsetTop = el.offsetTop;
+    //       }
+    //     })
+    //   });
+    // },
+    // handleScroll() {
+    //   if (this.scrollLock) return
+    //   const scrollContainer = this.$parent.$refs.scrollContainer;
+    //   const scrollHeight = scrollContainer.scrollTop;
+    //   let activeFloor = this.menuList[this.curIndex]['list'][0]['desc'];
+    //   this.menuList[this.curIndex]['list'].forEach(item => {
+    //     if (scrollHeight + 72 >= item.offsetTop) {
+    //       activeFloor = item.desc; // 更新当前激活的楼层ID
+    //     } else {
+    //       return false; // 一旦找到第一个小于当前滚动位置的楼层，停止循环
+    //     }
+    //   });
+    //   this.activeFloor = activeFloor; // 更新数据以触发视图更新
+    // },
     calculateFloorOffsets() {
       this.menuList.forEach(item => {
-        item.list.forEach(every => {
+        item.list?.forEach(every => {
           const el = document.getElementById(every.desc);
           if (el) {
-            every.offsetTop = el.offsetTop;
+            // 获取元素相对于视口顶部的距离
+            every.offsetTop = el.getBoundingClientRect().top + window.pageYOffset;
           }
-        })
+        });
       });
     },
+
     handleScroll() {
-      if (this.scrollLock) return
-      const scrollContainer = this.$parent.$refs.scrollContainer;
-      const scrollHeight = scrollContainer.scrollTop;
-      let activeFloor = this.menuList[this.curIndex]['list'][0]['desc'];
-      this.menuList[this.curIndex]['list'].forEach(item => {
-        if (scrollHeight + 72 >= item.offsetTop) {
-          activeFloor = item.desc; // 更新当前激活的楼层ID
-        } else {
-          return false; // 一旦找到第一个小于当前滚动位置的楼层，停止循环
+      if (this.scrollLock || !this.menuList[this.curIndex]?.list) return;
+
+      const scrollPosition = this.getScrollPosition();
+      let activeFloor = null;
+
+      // 从下往上查找当前可见区域对应的楼层
+      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;
         }
-      });
-      this.activeFloor = activeFloor; // 更新数据以触发视图更新
+      }
+
+      if (activeFloor && this.activeFloor !== activeFloor) {
+        this.activeFloor = activeFloor;
+      }
     },
-    setActiveCur(dom,item) {
-      if(this.$route.path != item.path){
-        this.$router.push(item.path)
-        store.commit('SET_PAGETITLE', item.name);
+
+    getScrollPosition() {
+      if (this.scrollContainer === window) {
+        return window.pageYOffset || document.documentElement.scrollTop;
       }
-      setTimeout(()=>{
-        this.activeFloor = dom;
-        this.setHighActive(dom)
-      },500)
+      return this.scrollContainer.scrollTop;
     },
-    gotoPath(path,index) {
-      if(this.$route.path != path){
+    // setActiveCur(dom, item) {
+    //   if (this.$route.path != item.path) {
+    //     this.$router.push(item.path)
+    //     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, index) {
+      let path = item.path;
+      if (!path) {
+        this.curIndex = index;
+        return
+      }
+      if (this.$route.path != path) {
         this.curIndex = index
         this.scrollLock = false;
         this.handleScroll()
@@ -197,15 +188,31 @@ export default {
     activeArea(type) {
       console.log(type);
     },
-    setHighActive(dom) {
+    setActiveCur(dom, item) {
+      if (item.path && this.$route.path !== item.path) {
+        this.$router.push(item.path);
+        store.commit('SET_PAGETITLE', item.name);
+      }
+
       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)
+      this.activeFloor = dom;
+
+      this.$nextTick(() => {
+        this.setHighActive(dom);
+        setTimeout(() => {
+          this.scrollLock = false;
+        }, 1000);
+      });
+    },
+
+    setHighActive(dom) {
+      const ele = document.getElementById(dom);
+      if (ele) {
+        ele.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start'
+        });
+      }
     }
   }
 }
@@ -213,7 +220,7 @@ export default {
 
 <style scoped lang="scss">
 .sidebar {
-  width: 158px;
+  min-width: 158px;
   padding: 21px;
   box-sizing: border-box;
   background: #FFFFFF;
@@ -223,7 +230,8 @@ export default {
 .ceshi {
   // animation: fadeInOut 2s infinite;
 }
-.title_text{
+
+.title_text {
   margin-left: 6px;
 }
 
diff --git a/src/store/index.js b/src/store/index.js
index 87e4954..543a788 100755
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -13,6 +13,8 @@ export default new Vuex.Store({
     pageTitle: '一般新文献', //页面标题
     addServiceList: [], //选中的服务
     isLoading: false, //页面loading
+    customize: false, //页面loading
+    slidermenu:[],
     rankMenuData: [{
         index: '1',
         title: '总利润',
@@ -221,6 +223,16 @@ export default new Vuex.Store({
     ]
   },
   actions: {
+    SET_CUSTOMIZE({
+      commit
+    }) {
+      commit('SET_CUSTOMIZE');
+    },
+    SET_SLIDER_MENU({
+      commit
+    }) {
+      commit('SET_SLIDER_MENU')
+    },
     SET_HEADER({
       commit
     }) {
@@ -263,6 +275,13 @@ export default new Vuex.Store({
     },
   },
   mutations: {
+    // 各自的侧边栏数据
+    SET_SLIDER_MENU(state,type){
+      state.slidermenu = state[type]
+    },
+    SET_CUSTOMIZE(state,show) {
+      state.customize = show
+    },
     SHOW_LOADING(state) {
       state.isLoading = true
       // state.loadingText = text || '加载中...'
diff --git a/src/views/SiteSetting.vue b/src/views/SiteSetting.vue
index d5ec1fa..ef6e815 100644
--- a/src/views/SiteSetting.vue
+++ b/src/views/SiteSetting.vue
@@ -52,7 +52,8 @@ export default {
 <style scoped lang="scss">
 .siteSetting-wrap {
     display: flex;
-    height: 100%;
+    height: calc(100vh - 62px);
+    overflow-y: auto;
 }
 
 // .sidebar {