4.0.74 可在pcClient的main.js里配置菜单背景色

package.json

@@ -1,7 +1,7 @@
 {
   "name": "client-base-v4",
   "description": "Leanwo Prodog Client",
-  "version": "4.0.73",
+  "version": "4.0.74",
   "author": "yangzhijie1488 <yangzhijie1488@163.com>",
   "scripts": {
     "dev": "cross-env webpack serve --config ./webpack.dev.js",

src/App.vue

@@ -19,7 +19,14 @@
           >
             <div>
               <keep-alive>
-                <MenuWidget :width="width" />
+                <MenuWidget
+                  :width="width"
+                  :logo-width="logoWidth"
+                  :left-color="color"
+                  :menu-color="menuColor"
+                  :select-color="selectColor"
+                  :search-color="searchColor"
+                />
               </keep-alive>
               <div class="resize-handle" @mousedown="handleMouseDown" />
             </div>
@@ -81,6 +88,11 @@ export default {
       startX: 0,
       startWidth: 0,
       width: 230,
+      logoWidth: 152, // 不同logo不同适应宽度
+      color: '#2a3f54', // 左边菜单栏颜色配置 #277fd0
+      selectColor: '#495d70', // 三级菜单悬浮颜色配置 #6db0ee
+      searchColor: '#1c3e4b', // 菜单栏搜索框颜色配置 #1673c0
+      menuColor: 'linear-gradient(#334556, #2c4257), #2a3f54', // 二级菜单颜色配置 #2e8ee7
     };
   },
 
@@ -108,10 +120,23 @@ export default {
       localStorage.setItem('menuWidth', 230);
     }
 
+    this.getMenuSetting();
     this.computerComponentVisible();
   },
 
   methods: {
+    // 获取菜单栏配置
+    getMenuSetting() {
+      const setting = JSON.parse(localStorage.getItem('menuSetting'));
+      if (setting) {
+        this.logoWidth = setting.logoWidth;
+        this.color = setting.mainColor;
+        this.selectColor = setting.threeLevelColor;
+        this.searchColor = setting.searchInputColor;
+        this.menuColor = setting.secondLevelColor;
+      }
+    },
+
     throttle(func, limit) {
       let inThrottle;
       return function () {
@@ -344,6 +369,9 @@ export default {
 <!-- 已确定的CSS样式 -->
 <style>
 .site_title {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   text-overflow: ellipsis;
   overflow: hidden;
   font-weight: 400;
@@ -352,10 +380,10 @@ export default {
   color: #ecf0f1 !important;
   margin-left: 0 !important;
   line-height: 59px;
-  display: block;
-  height: 55px;
+  /* display: block; */
+  height: 80px;
   margin: 0;
-  padding-left: 10px;
+  /* padding-left: 10px; */
 }
 
 .site_title:hover,
@@ -520,7 +548,7 @@ body .container.body .right_col {
 .nav_title {
   width: 230px;
   float: left;
-  background: #2a3f54;
+  /* background: #2a3f54; */
   border-radius: 0;
   height: 57px;
 }

src/client/MenuNode.vue

@@ -31,6 +31,7 @@
       v-if="model.menuNodeType == "Branch""
       class="menu-branch"
       :class="{'active': model.expand}"
+      :style="{backgroundColor: menuColor}"
       @click="selectMenuNode(model)"
     >
       <i
@@ -88,6 +89,14 @@ export default {
         return null;
       },
     },
+    menuColor: {
+      type: String,
+      default: 'linear-gradient(#334556, #2c4257), #2a3f54',
+    },
+    selectColor: {
+      type: String,
+      default: '#495d70',
+    },
   },
   emits: ['selectNode'],
 
@@ -229,7 +238,8 @@ export default {
 <style>
 .menu-branch.active {
     text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 0;
-    background: linear-gradient(#334556, #2c4257), #2a3f54;
+    /* background: linear-gradient(#334556, #2c4257), #2a3f54; */
+    background: v-bind(menuColor);
     box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0,
         inset rgba(255, 255, 255, 0.16) 0 1px 0;
 }

src/client/MenuWidget.vue

@@ -1,7 +1,13 @@
 <template>
-  <div class="menu-side left_col scroll-view" :style="{width: width+ 'px'}">
+  <div
+    class="menu-side left_col scroll-view"
+    :style="{ width: width + 'px', backgroundColor: leftColor }"
+  >
     <div class="navbar nav_title" style="border: 0">
-      <a href="#/desktop/dashboard" class="site_title"><img style="width: 150px;" src="/static/assets/client-base-v4/image/template-logo_42.png" /></a>
+      <a href="#/desktop/dashboard" class="site_title"><img
+        :style="{ width: logoWidth + 'px'}"
+        :src="logoUrl"
+      /></a>
     </div>
 
     <div class="clearfix" />
@@ -15,6 +21,7 @@
             type="text"
             class="form-control menu-search"
             :placeholder="$t('lang.menuWidget.searchMenu')"
+            :style="{ backgroundColor: searchColor }"
           />
         </div>
 
@@ -36,9 +43,13 @@
                 class="nav menu-nav child_menu"
                 :class="{ active: rootNode.expand == true }"
               >
-                <template v-for="subMenuItem in rootNode.subMenus" :key="subMenuItem.uuid">
+                <template
+                  v-for="subMenuItem in rootNode.subMenus"
+                  :key="subMenuItem.uuid"
+                >
                   <MenuNode
-                    
+                    :menu-color="menuColor"
+                    :select-color="selectColor"
                     :model="subMenuItem"
                     @select-node="selectNode($event, rootNode.subMenus)"
                   />
@@ -60,22 +71,42 @@ import MenuNode from './MenuNode.vue';
 import { Uuid } from 'pc-component-v3';
 
 export default {
-
   components: {
     MenuNode,
   },
   props: {
-    width:{
-      default:230,
-      type:Number,
+    width: {
+      default: 230,
+      type: Number,
+    },
+    logoWidth: {
+      default: 152,
+      type: Number,
+    },
+    leftColor: {
+      default: '#2a3f54',
+      type: String,
+    },
+    menuColor: {
+      default: 'linear-gradient(#334556, #2c4257), #2a3f54',
+      type: String,
     },
-  }, 
+    searchColor: {
+      default: '#1c3e4b',
+      type: String,
+    },
+    selectColor: {
+      default: '#495d70',
+      type: String,
+    },
+  },
   data: function () {
     this.Language = Language;
     return {
       rootNodes: [],
       selectedNode: {}, // 选择的节点
       searchText: '',
+      logoUrl: '', // logo路径
     };
   },
 
@@ -88,6 +119,7 @@ export default {
   mounted: function () {
     var _self = this;
     this.loadMenuData();
+    this.getLogoName();
   },
 
   methods: {
@@ -111,10 +143,10 @@ export default {
               Common.addTokenToRequest(request);
             },
             success: function (data1) {
-              if(data1 != null){
+              if (data1 != null) {
                 console.log(data1);
                 _self.formateCollectionMenuData(data, data1);
-              }else{
+              } else {
                 _self.formateMenuData(data);
               }
             },
@@ -157,11 +189,13 @@ export default {
       });
     },
 
-
     // 格式化菜单数据
     formateCollectionMenuData: function (datas, collections) {
       var _self = this;
-      if ((datas == null || datas.length == 0) && (collections == null || collections.length == 0)) {
+      if (
+        (datas == null || datas.length == 0) &&
+        (collections == null || collections.length == 0)
+      ) {
         return;
       }
       // 对菜单进行排序和设置expand
@@ -172,7 +206,7 @@ export default {
             node.show = true;
             node.uuid = Uuid.createUUID();
             collectionDatas.forEach(collectionData => {
-              if(node.no == collectionData.no){
+              if (node.no == collectionData.no) {
                 node.favorite = true;
               }
             });
@@ -183,7 +217,7 @@ export default {
         }
       }
 
-      initNode(datas,collections);
+      initNode(datas, collections);
       this.rootNodes = datas;
       _self.$nextTick(function () {
         _self.initView();
@@ -254,11 +288,11 @@ export default {
           });
         }
       }
-      
+
       /**
-         * 递归修改属性为可见的节点的父节点为可见
-         * @param {Object} node
-         */
+       * 递归修改属性为可见的节点的父节点为可见
+       * @param {Object} node
+       */
       function parseParent(node, level) {
         // 防止循环数据
         if (level > 5) {
@@ -279,12 +313,10 @@ export default {
       var _self = this;
       _self.setNodeView();
       if (inputText) {
-        
         //遍历所有根节点与传销内容无关的设置不可见
         this.rootNodes.forEach(function (node) {
           filterNode(node);
         });
-        
 
         this.rootNodes.forEach(function (node) {
           parseParent(node, 0);
@@ -316,11 +348,37 @@ export default {
       }
       initNode(_self.rootNodes);
     },
+    // 查询系统logo
+    getLogoName: function () {
+      const _self = this;
+      $.ajax({
+        type: 'GET',
+        url: Common.getApiURL('clientLogoResource/selectByClientId'),
+        dataType: 'json',
+        beforeSend: function (request) {
+          Common.addTokenToRequest(request);
+        },
+        success: function (res) {
+          if (res.errorCode === 0) {
+            _self.logoUrl = `/Files/0/Images/com.leanwo.prodog.system.model.ClientLogo/${res.data.imageName}`;
+          }
+        },
+        error: function (XMLHttpRequest, textStatus, errorThrown) {
+          Common.processException(XMLHttpRequest, textStatus, errorThrown);
+        },
+      });
+    },
   },
 };
 </script>
 
 <style scoped>
+.menu-side {
+  background: var(--leftColor);
+}
+.menu-search {
+  background: var(--searchColor);
+}
 .menu-div {
   padding-left: 10px;
   padding-right: 10px;
@@ -379,7 +437,8 @@ export default {
 }
 .main_menu .nav.side-menu > li > a,
 .main_menu .nav.child_menu > li > a {
-  color: #e7e7e7;
+  /* color: #e7e7e7; */
+  color: #fff;
   font-weight: 500;
 }
 .main_menu .nav.side-menu > li.current-page,
@@ -433,7 +492,7 @@ export default {
 }
 .main_menu .nav.child_menu li li:hover,
 .main_menu .nav.child_menu li li.active {
-  background-color: #495d70;
+  background-color: v-bind(selectColor);
 }
 .main_menu .nav.child_menu li li a:hover,
 .main_menu .nav.child_menu li li a.active {
@@ -473,7 +532,7 @@ export default {
   background-color: transparent !important;
 }
 .main_menu .menu-search {
-  background-color: #1c3e4b;
+  /* background-color: #1c3e4b; */
   color: #fff;
 }
 </style>