From d0bb20547c918b7ceb5c0037023de1b2ea7f094b Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Thu, 12 Jun 2025 15:15:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=80=BB=E5=92=8C=E4=B8=A4=E4=B8=AA=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SetLeftMenu.vue | 198 +++++++++++++++++++++--------------------
 src/components/SliderMenu.vue  |  21 +++--
 src/style/theme/common.scss    |   2 +-
 src/views/SiteSetting.vue      |  13 ++-
 4 files changed, 126 insertions(+), 108 deletions(-)

diff --git a/src/components/SetLeftMenu.vue b/src/components/SetLeftMenu.vue
index b9180ec..fbc3bd7 100644
--- a/src/components/SetLeftMenu.vue
+++ b/src/components/SetLeftMenu.vue
@@ -4,9 +4,9 @@
       <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)">
-          <img v-if="$route.path == item.path" :src="item.imgActive" alt="">
-          <img v-else :src="item.img" alt="">
-          {{ item.name }}
+          <SvgIcon1 :iconPath="require(`@/assets/${item.img}`)" defaultColor="#8A9099" :size="16"
+                activeColor="#006AFF" :isActive="$route.path == item.path" />
+          <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>
@@ -16,16 +16,17 @@
 </template>
 
 <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
-    // },
+    menuList: {
+      type: Array,
+      required: true
+    },
     // activeFloor:{
     //   type:String
     // },
@@ -33,97 +34,100 @@ export default {
     //   type:Number
     // }
   },
+  components: {
+    SvgIcon1,
+  },
   data() {
     return {
       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'
-            },
-          ]
-        }
-      ]
+      // 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() {
@@ -219,6 +223,9 @@ export default {
 .ceshi {
   // animation: fadeInOut 2s infinite;
 }
+.title_text{
+  margin-left: 6px;
+}
 
 ul {
   list-style: none;
@@ -240,7 +247,8 @@ li {
   div {
     letter-spacing: 0.08em;
     color: #1E2226;
-    margin: 11px 0;
+    // margin: 12px 0;
+    height: 40px;
     cursor: pointer;
 
     img {
@@ -249,9 +257,9 @@ li {
   }
 
   p {
-    margin: 9px 0;
     letter-spacing: 0.08em;
     line-height: 18px;
+    height: 36px;
     color: #8A9099;
     cursor: pointer;
 
diff --git a/src/components/SliderMenu.vue b/src/components/SliderMenu.vue
index 8a5769c..ef4ddba 100644
--- a/src/components/SliderMenu.vue
+++ b/src/components/SliderMenu.vue
@@ -1,7 +1,6 @@
 <template>
   <transition name="menu-collapse">
-    <!-- :default-active="activeMenu" -->
-    <el-menu class="el-menu-vertical-demo custom-menu" @open="handleOpen"
+    <el-menu v-if="!customize" class="el-menu-vertical-demo custom-menu" @open="handleOpen"
     :default-active="currentMenuItem?.index"
       @close="handleClose" @select="handleSelect" :collapse="isCollapse" :collapse-transition="true"
       >
@@ -19,7 +18,7 @@
           <el-submenu v-if="item.children"  :key="item.index" :index="item.index">
             <template slot="title">
               <SvgIcon1 :iconPath="require(`@/assets/menu/${item.icon}.svg`)" defaultColor="#8A9099"
-                activeColor="#006AFF" :isActive="item.index == currentMenuItem?.index.substr(0,1) && isCollapse" />
+                activeColor="#006AFF" :isActive="item.index == currentMenuItem?.index?.substring(0,1) && isCollapse" />
               <span class="title_text" >{{ item.title }}</span>
             </template>
             <el-menu-item style="padding: 0 22px 0 32px;" v-for="subItem in item.children" :key="subItem.index"
@@ -37,28 +36,36 @@
         </template>
       </div>
     </el-menu>
+
+    <SetLeftMenu v-else :menuList="menuData"/>
+<!-- <div v-else>---akjshdjka</div> -->
   </transition>
 
 </template>
 <script>
+import SetLeftMenu from '@/components/SetLeftMenu.vue'
 import SvgIcon1 from '@/components/SvgIcon1.vue';
 import GuipToolTip from '@/components/GuipToolTip.vue';
 export default {
   name: 'SliderMenu',
   components: {
     SvgIcon1,
-    GuipToolTip
+    GuipToolTip,
+    SetLeftMenu
   },
   props: {
     menuData: {
       type: Array,
       default: () => []
     },
+    customize:{
+      type:Boolean,
+      default:false
+    }
   },
   data() {
     return {
       isCollapse: false,
-      activeMenu: '',
       routerList: [],
       currentMenuItem:'',
       currentMenuParent:''
@@ -110,10 +117,6 @@ export default {
       }
       return null;
     },
-    handleMenuItemClick(item) {
-      this.$router.push(item.path);
-      this.activeMenu = item.index;
-    },
   },
   mounted() {
     // console.log(this.$route.path,'this.$route.path----');
diff --git a/src/style/theme/common.scss b/src/style/theme/common.scss
index 8738e46..01734ca 100644
--- a/src/style/theme/common.scss
+++ b/src/style/theme/common.scss
@@ -756,7 +756,7 @@ body {
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  .svg-icon-wrapper{
+  .el-table .svg-icon-wrapper{
     width: 12px !important;
     height: 12px !important;
   }
diff --git a/src/views/SiteSetting.vue b/src/views/SiteSetting.vue
index 46b1187..d5ec1fa 100644
--- a/src/views/SiteSetting.vue
+++ b/src/views/SiteSetting.vue
@@ -1,6 +1,8 @@
 <template>
     <div class="siteSetting-wrap">
-        <SetLeftMenu />
+        <!-- <SetLeftMenu /> -->
+        <SliderMenu :menuData="siteSettingData" :customize="true"></SliderMenu>
+
         <!--:menuList="menuList" :activeFloor="activeFloor" :curIndex="curIndex" -->
         <!-- 主内容区域 -->
         <main class="main-content" ref="scrollContainer" id="main-content">
@@ -17,7 +19,9 @@
 // import SiteBaseSetting from './SiteBaseSetting.vue';
 import PageTitle from '@/components/PageTitle.vue';
 import Footer from '@/components/Footer.vue';
-import SetLeftMenu from '@/components/SetLeftMenu.vue'
+import { mapState } from 'vuex';
+
+import SliderMenu from '@/components/SliderMenu.vue'
 export default {
     // 站点设置
     name: '',
@@ -25,7 +29,7 @@ export default {
     components: {
         PageTitle,
         Footer,
-        SetLeftMenu,
+        SliderMenu,
         // SiteBaseSetting
     },
     data() {
@@ -38,6 +42,9 @@ export default {
         console.log(this.$route.path,'090-9090');
         // this.$refs.scrollContainer.scrollTo(0)
     },
+    computed: {
+    ...mapState(['siteSettingData']) // 从Vuex映射showSidebar状态到组件的计算属性中
+  },
     methods: {
     }
 }