From 6b74aeacaf13b0e05ab2763b0a350fb70c1421fe Mon Sep 17 00:00:00 2001
From: From-wh <from-wh@hotmail.com>
Date: Thu, 23 Feb 2023 12:08:41 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=8F=9C=E5=8D=95=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../main/components/fullscreen/fullscreen.vue |  2 +-
 .../sider-trigger/sider-trigger.less          |  3 -
 .../sider-trigger/sider-trigger.vue           |  6 +-
 .../main/components/header-notice/index.vue   |  4 +-
 .../main/components/reload/reload.vue         |  9 ++-
 .../components/side-menu/collapsed-menu.vue   |  4 +-
 .../main/components/side-menu/side-menu.less  |  4 +-
 .../main/components/side-menu/side-menu.vue   | 74 ++++++++++++++++---
 .../main/components/tags-nav/tags-nav.less    |  2 +-
 template/admin/src/components/main/main.vue   |  3 +-
 template/admin/src/styles/style.css           |  1 -
 11 files changed, 81 insertions(+), 31 deletions(-)

diff --git a/template/admin/src/components/main/components/fullscreen/fullscreen.vue b/template/admin/src/components/main/components/fullscreen/fullscreen.vue
index 2a38beadb..0b0379b81 100644
--- a/template/admin/src/components/main/components/fullscreen/fullscreen.vue
+++ b/template/admin/src/components/main/components/fullscreen/fullscreen.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="showFullScreenBtn" class="full-screen-btn-con">
     <Tooltip :content="value ? '退出全屏' : '全屏'" placement="bottom">
-      <Icon @click.native="handleChange" :type="value ? 'ios-contract' : 'ios-qr-scanner'" :size="23"></Icon>
+      <Icon @click.native="handleChange" :type="value ? 'ios-contract' : 'ios-qr-scanner'" :size="22"></Icon>
     </Tooltip>
   </div>
 </template>
diff --git a/template/admin/src/components/main/components/header-bar/sider-trigger/sider-trigger.less b/template/admin/src/components/main/components/header-bar/sider-trigger/sider-trigger.less
index ac3ca9194..26fc7d857 100644
--- a/template/admin/src/components/main/components/header-bar/sider-trigger/sider-trigger.less
+++ b/template/admin/src/components/main/components/header-bar/sider-trigger/sider-trigger.less
@@ -4,12 +4,9 @@
 @size: 40px;
 .sider-trigger-a {
   padding: 6px;
-  width: @size;
-  height: @size;
   display: inline-block;
   text-align: center;
   // color: #fff;
-  margin-top: 5px;
   cursor: pointer;
   z-index: 9999;
   .iconcaidanshouqi {
diff --git a/template/admin/src/components/main/components/header-bar/sider-trigger/sider-trigger.vue b/template/admin/src/components/main/components/header-bar/sider-trigger/sider-trigger.vue
index 98db00fcd..61a6e4d8d 100644
--- a/template/admin/src/components/main/components/header-bar/sider-trigger/sider-trigger.vue
+++ b/template/admin/src/components/main/components/header-bar/sider-trigger/sider-trigger.vue
@@ -33,18 +33,16 @@ export default {
   max-width: 90px;
   left: 0;
   bottom: 0;
-  height: 50px;
+  height: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
-  border-top: 1px solid #d9dadd;
+  border-top: 1px solid #f2f2f2;
   color: #515a6e;
 }
 @import './sider-trigger.less';
 .sider-trigger-a {
   padding: 14px 6px;
-  margin-left: 10px;
-  line-height: 16px;
 }
 .iconcaidanshouqi {
   font-size: 16px;
diff --git a/template/admin/src/components/main/components/header-notice/index.vue b/template/admin/src/components/main/components/header-notice/index.vue
index 6a11956bf..747c9f8c4 100644
--- a/template/admin/src/components/main/components/header-notice/index.vue
+++ b/template/admin/src/components/main/components/header-notice/index.vue
@@ -3,7 +3,7 @@
     <Dropdown @on-click="jumpUrl" :transfer="true">
       <div>
         <Badge dot :count="needList.length ? needList.length : 0">
-          <Icon type="ios-notifications-outline" size="26"></Icon>
+          <Icon type="ios-notifications-outline" size="24"></Icon>
         </Badge>
       </div>
       <DropdownMenu slot="list">
@@ -24,7 +24,7 @@
   font-size: 14px !important;
   font-weight: 400;
   line-height: 22px;
-  color: #fff;
+  color: #515a6e;
 }
 .header-notice .ivu-dropdown-item ~ .ivu-dropdown-item {
   border-top: 1px solid #e8eaec;
diff --git a/template/admin/src/components/main/components/reload/reload.vue b/template/admin/src/components/main/components/reload/reload.vue
index 1eed029d4..52e03ce7a 100644
--- a/template/admin/src/components/main/components/reload/reload.vue
+++ b/template/admin/src/components/main/components/reload/reload.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="full-screen-btn-con" @click="handleReload">
-      <Icon class="icon" type="md-refresh" color='#fff' />
+  <div class="refresh-btn-con" @click="handleReload">
+      <Icon class="icon" type="ios-refresh" color="rgba(255,255,255,.8)" />
   </div>
 </template>
 
@@ -18,10 +18,11 @@ export default {
 };
 </script>
 <style scoped lang="less">
-.full-screen-btn-con {
+.refresh-btn-con {
   margin-right: 17px !important;
   cursor: pointer;
-  font-size: 20px;
+  font-size: 28px;
+  color: #f2f2f2;
 }
 .icon:hover{
   animation: rotate 6s linear infinite; 
diff --git a/template/admin/src/components/main/components/side-menu/collapsed-menu.vue b/template/admin/src/components/main/components/side-menu/collapsed-menu.vue
index 34a3575cc..fe2c94045 100644
--- a/template/admin/src/components/main/components/side-menu/collapsed-menu.vue
+++ b/template/admin/src/components/main/components/side-menu/collapsed-menu.vue
@@ -66,8 +66,8 @@ export default {
   },
   methods: {
     handleClick(name) {
-      console.log(name)
-      this.$emit('on-click', name);
+      console.log(name, this.activeMenuPath);
+      this.$emit('on-click', name, this.activeMenuPath);
     },
     handleMousemove(event, children) {
       const { pageY } = event;
diff --git a/template/admin/src/components/main/components/side-menu/side-menu.less b/template/admin/src/components/main/components/side-menu/side-menu.less
index 05a2ee1e9..7b0993698 100644
--- a/template/admin/src/components/main/components/side-menu/side-menu.less
+++ b/template/admin/src/components/main/components/side-menu/side-menu.less
@@ -35,9 +35,7 @@
     color: #495060;
   }
 }
-.ivu-select-dropdown{
-  // left: 95px !important;
-}
+
 .menu-title {
   // padding-left: 6px;
 }
diff --git a/template/admin/src/components/main/components/side-menu/side-menu.vue b/template/admin/src/components/main/components/side-menu/side-menu.vue
index 6ef47f2b9..21adadeb0 100644
--- a/template/admin/src/components/main/components/side-menu/side-menu.vue
+++ b/template/admin/src/components/main/components/side-menu/side-menu.vue
@@ -176,6 +176,10 @@ export default {
         console.log(newRoute, 'newRoutenewRoute');
         this.activePath = newRoute.path;
         // this.activeMenuPath = newRoute.matched[0].path;
+        if (this.collapsed) {
+          sessionStorage.setItem('menuActive', newRoute.matched[0].path);
+          this.activeMenuPath = newRoute.matched[0].path;
+        }
         this.handleUpdateMenuState();
       },
       immediate: true,
@@ -185,9 +189,9 @@ export default {
     console.log(this.menuList);
     this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName());
     if (sessionStorage.getItem('menuActive')) {
-      this.activeMenuPath = sessionStorage.getItem('menuActive');
-      this.catName = sessionStorage.getItem('menuActiveTitle');
-      this.getChildrenList(sessionStorage.getItem('menuActive'));
+      // this.activeMenuPath = sessionStorage.getItem('menuActive');
+      // this.catName = sessionStorage.getItem('menuActiveTitle');
+      // this.getChildrenList(sessionStorage.getItem('menuActive'));
     } else {
       this.handleSelect(this.openedNames[0]);
     }
@@ -202,9 +206,9 @@ export default {
     },
     handleCollpasedChange(state) {
       console.log(state);
-      this.collapsed = state;
+      // this.collapsed = state;
       this.$emit('on-coll-change', state);
-      setCookies('collapsed', state);
+      // setCookies('collapsed', state);
     },
     handleSelect(name, type) {
       this.childOptions = [];
@@ -252,8 +256,44 @@ export default {
       this.turnToPage(name);
     },
     collHandleSelect(name) {
+      this.activeMenuPath = this.findParentById(this.menuList, name);
       this.turnToPage(name);
     },
+    findParentById(arr, path) {
+      var parentId = '没有父元素',
+        hasParentId = (function loop(arr) {
+          return arr.some((item) => {
+            if (item.path === path) {
+              return true;
+            } else if (Array.isArray(item.children)) {
+              parentId = item.path;
+              return loop(item.children);
+            } else {
+              return false;
+            }
+          });
+        })(arr);
+      return hasParentId ? parentId : '未找到对应父元素';
+    },
+
+    // findParentsById(arr, id) {
+    //   var parentIds = [],
+    //     index = 0,
+    //     hasParentId = (function loop(arr, index) {
+    //       return arr.some((item) => {
+    //         if (item.MENU_ID === id) {
+    //           parentIds = parentIds.slice(0, index);
+    //           return true;
+    //         } else if (Array.isArray(item.MENU_INFO)) {
+    //           parentIds[index] = item.MENU_ID;
+    //           return loop(item.MENU_INFO, index + 1);
+    //         } else {
+    //           return false;
+    //         }
+    //       });
+    //     })(arr, index);
+    //   return hasParentId ? parentIds : [];
+    // },
     turnToPage(route, all) {
       let { path, name, params, query } = {};
       if (typeof route === 'string' && !all) path = route;
@@ -298,6 +338,7 @@ export default {
 </script>
 <style lang="less">
 @import './side-menu.less';
+
 .ivu-menu {
   .side-menu-wrapper {
     position: relative;
@@ -340,6 +381,7 @@ export default {
     background-color: #2d8cf0 !important;
     color: #fff !important;
   }
+
   .ivu-select-dropdown.ivu-dropdown-transfer
     .collased-menu-dropdown:hover
     > .ivu-dropdown-rel
@@ -393,8 +435,8 @@ export default {
       display: flex;
       align-items: center;
       .title {
-        font-size: 14px;
-        line-height: 14px;
+        font-size: 13px;
+        line-height: 13px;
       }
     }
     .ivu-menu-vertical .ivu-menu-item:first-child {
@@ -432,8 +474,8 @@ export default {
       line-height: 16px;
       font-weight: 600;
       color: #303133;
-      padding: 18px;
-      border-bottom: 1px solid #eee;
+      padding: 15px;
+      border-bottom: 1px solid #f2f2f2;
     }
   }
   > .ivu-menu {
@@ -447,8 +489,22 @@ export default {
     width: 0px;
   }
 }
+/deep/ .ivu-select-dropdown {
+  left: 95px !important;
+}
+.ivu-dropdown-rel {
+  min-width: 75px !important;
+}
 .menu-collapsed {
   padding: 0 8px;
+  .drop-menu-a:hover {
+    color: #1890ff;
+    background-color: rgba(24, 144, 255, 0.1) !important;
+    border-radius: 4px;
+    .ivu-icon {
+      color: #1890ff !important;
+    }
+  }
   .drop-menu-a.on {
     background-color: #1890ff !important;
     color: #fff !important;
diff --git a/template/admin/src/components/main/components/tags-nav/tags-nav.less b/template/admin/src/components/main/components/tags-nav/tags-nav.less
index 626c5eb86..b0a50c94e 100644
--- a/template/admin/src/components/main/components/tags-nav/tags-nav.less
+++ b/template/admin/src/components/main/components/tags-nav/tags-nav.less
@@ -31,7 +31,7 @@
     position: absolute;
     top: 0px;
     height: 100%;
-    // background: #fff;
+    background: #f5f7f9;
     padding-top: 3px;
     z-index: 10;
     button {
diff --git a/template/admin/src/components/main/main.vue b/template/admin/src/components/main/main.vue
index ca549ff19..036408ee4 100644
--- a/template/admin/src/components/main/main.vue
+++ b/template/admin/src/components/main/main.vue
@@ -9,8 +9,9 @@
         <user :message-unread-count="unreadCount" :user-avatar="userAvatar" />
         <language v-if="$config.useI18n" @on-lang-change="setLocal" style="margin-right: 10px" :lang="local" />
         <header-notice></header-notice>
-        <fullscreen v-model="isFullscreen" style="margin-right: 10px" />
         <Reload @on-reload="handleReload"></Reload>
+
+        <fullscreen v-model="isFullscreen" style="margin-right: 10px" />
         <error-store
           v-if="$config.plugin['error-store'] && $config.plugin['error-store'].showInHeader"
           :has-read="hasReadErrorPage"
diff --git a/template/admin/src/styles/style.css b/template/admin/src/styles/style.css
index 3696b7882..42c6c32f6 100644
--- a/template/admin/src/styles/style.css
+++ b/template/admin/src/styles/style.css
@@ -500,7 +500,6 @@ body {
 .ivu-mb-16 {
   margin-bottom: 16px !important;
 }
-.ivu-mt,
 .ivu-mt-16 {
   margin-top: 16px !important;
 }