“最近访问”显隐、与主菜单联动

ruoyi-ui/src/assets/iconfont/demo_index.html

@@ -54,6 +54,18 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe601;</span>
+                <div class="name">卡片未激活</div>
+                <div class="code-name">&amp;#xe601;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe600;</span>
+                <div class="name">卡片</div>
+                <div class="code-name">&amp;#xe600;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe622;</span>
                 <div class="name">左</div>
@@ -90,9 +102,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1710383734701') format('woff2'),
-       url('iconfont.woff?t=1710383734701') format('woff'),
-       url('iconfont.ttf?t=1710383734701') format('truetype');
+  src: url('iconfont.woff2?t=1710497244093') format('woff2'),
+       url('iconfont.woff?t=1710497244093') format('woff'),
+       url('iconfont.ttf?t=1710497244093') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -118,6 +130,24 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-menu"></span>
+            <div class="name">
+              卡片未激活
+            </div>
+            <div class="code-name">.icon-menu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-menuactive"></span>
+            <div class="name">
+              卡片
+            </div>
+            <div class="code-name">.icon-menuactive
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-left"></span>
             <div class="name">
@@ -172,6 +202,22 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-menu"></use>
+                </svg>
+                <div class="name">卡片未激活</div>
+                <div class="code-name">#icon-menu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-menuactive"></use>
+                </svg>
+                <div class="name">卡片</div>
+                <div class="code-name">#icon-menuactive</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-left"></use>

ruoyi-ui/src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4466169 */
-  src: url('iconfont.woff2?t=1710383734701') format('woff2'),
-       url('iconfont.woff?t=1710383734701') format('woff'),
-       url('iconfont.ttf?t=1710383734701') format('truetype');
+  src: url('iconfont.woff2?t=1710497244093') format('woff2'),
+       url('iconfont.woff?t=1710497244093') format('woff'),
+       url('iconfont.ttf?t=1710497244093') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-menu:before {
+  content: "\e601";
+}
+
+.icon-menuactive:before {
+  content: "\e600";
+}
+
 .icon-left:before {
   content: "\e622";
 }

ruoyi-ui/src/assets/iconfont/iconfont.js

@@ -1 +1 @@
-window._iconfont_svg_string_4466169='<svg><symbol id="icon-left" viewBox="0 0 1024 1024"><path d="M268.9 488.3L681.6 75.6C688.2 69 697.3 65 707.4 65c20.2 0 36.5 16.3 36.5 36.5 0 10.1-4.1 19.2-10.7 25.8l-391 391 378.5 378.5c6 6.2 9.7 14.7 9.7 24.1 0 19.2-15.5 34.7-34.7 34.7-9.4 0-17.9-3.7-24.1-9.7L279.2 553.4c-4.7-4.8-8.1-11.1-9.3-18 0.7 4.9-0.3 5.5-1 4.4-6.6-6.6-10.7-15.7-10.7-25.8 0.1-10 4.1-19.1 10.7-25.7z m0 0"  ></path></symbol><symbol id="icon-right" viewBox="0 0 1024 1024"><path d="M755.1 535.7L342.4 948.4C335.8 955 326.70000001 959 316.60000001 959c-20.2 0-36.5-16.3-36.50000001-36.5 0-10.1 4.1-19.2 10.7-25.8l391-391-378.49999999-378.5c-6-6.2-9.7-14.7-9.70000001-24.1 0-19.2 15.5-34.7 34.7-34.7 9.4 0 17.9 3.7 24.1 9.7L744.8 470.6c4.7 4.8 8.1 11.1 9.30000001 18-0.7-4.9 0.3-5.5 0.99999999-4.4 6.6 6.6 10.69999999 15.7 10.7 25.8-0.1 10-4.1 19.1-10.7 25.7z m0 0"  ></path></symbol><symbol id="icon-recent" viewBox="0 0 1024 1024"><path d="M504 1024C225.6 1024 0 798.4 0 520S225.6 16 504 16s504 225.6 504 504-225.6 504-504 504z m0-939.2C264 84.8 68.8 280 68.8 520c0 240.8 195.2 436 436 436s436-195.2 436-436c-0.8-240-196-435.2-436.8-435.2z"  ></path><path d="M452 572.8V221.6h71.2v280h237.6v71.2H452z"  ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var o,i,c,d,s,a=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}o=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4466169,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?a(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),o()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(c=o,d=n.document,s=!1,r(),d.onreadystatechange=function(){"complete"==d.readyState&&(d.onreadystatechange=null,l())})}function l(){s||(s=!0,c())}function r(){try{d.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}l()}}(window);
+window._iconfont_svg_string_4466169='<svg><symbol id="icon-menu" viewBox="0 0 1024 1024"><path d="M512 747.52c-10.24 0-20.48-5.12-30.72-10.24l-414.72-256C51.2 476.16 40.96 460.8 40.96 445.44s10.24-30.72 25.6-40.96l414.72-256c15.36-10.24 40.96-10.24 56.32 0l414.72 256c15.36 10.24 25.6 25.6 25.6 40.96s-5.12 30.72-20.48 40.96l-414.72 256c-10.24 5.12-20.48 5.12-30.72 5.12zM117.76 445.44l394.24 240.64 394.24-240.64L512 204.8 117.76 445.44z m-20.48-10.24z"  ></path><path d="M512 936.96c-15.36 0-30.72-5.12-46.08-15.36l-378.88-230.4c-15.36-10.24-20.48-25.6-10.24-40.96s25.6-20.48 40.96-10.24L496.64 870.4c10.24 5.12 20.48 5.12 30.72 0l378.88-230.4c15.36-10.24 35.84-5.12 40.96 10.24s5.12 35.84-10.24 40.96L558.08 921.6c-15.36 10.24-30.72 15.36-46.08 15.36z"  ></path></symbol><symbol id="icon-menuactive" viewBox="0 0 1024 1024"><path d="M51.2 404.48c-10.24-5.12-10.24-15.36 0-25.6L501.76 102.4h20.48L972.8 378.88c10.24 5.12 10.24 20.48 0 25.6l-450.56 276.48c-5.12 5.12-15.36 5.12-20.48 0L51.2 404.48z" fill="#2c2c2c" ></path><path d="M512 906.24c-20.48 0-40.96-5.12-56.32-15.36l-378.88-230.4c-25.6-15.36-30.72-46.08-20.48-71.68 15.36-25.6 46.08-30.72 71.68-15.36l378.88 230.4h10.24l378.88-230.4c25.6-15.36 56.32-5.12 71.68 15.36 15.36 25.6 5.12 56.32-15.36 71.68l-378.88 230.4c-20.48 10.24-40.96 15.36-61.44 15.36z" fill="#2c2c2c" ></path></symbol><symbol id="icon-left" viewBox="0 0 1024 1024"><path d="M268.9 488.3L681.6 75.6C688.2 69 697.3 65 707.4 65c20.2 0 36.5 16.3 36.5 36.5 0 10.1-4.1 19.2-10.7 25.8l-391 391 378.5 378.5c6 6.2 9.7 14.7 9.7 24.1 0 19.2-15.5 34.7-34.7 34.7-9.4 0-17.9-3.7-24.1-9.7L279.2 553.4c-4.7-4.8-8.1-11.1-9.3-18 0.7 4.9-0.3 5.5-1 4.4-6.6-6.6-10.7-15.7-10.7-25.8 0.1-10 4.1-19.1 10.7-25.7z m0 0"  ></path></symbol><symbol id="icon-right" viewBox="0 0 1024 1024"><path d="M755.1 535.7L342.4 948.4C335.8 955 326.70000001 959 316.60000001 959c-20.2 0-36.5-16.3-36.50000001-36.5 0-10.1 4.1-19.2 10.7-25.8l391-391-378.49999999-378.5c-6-6.2-9.7-14.7-9.70000001-24.1 0-19.2 15.5-34.7 34.7-34.7 9.4 0 17.9 3.7 24.1 9.7L744.8 470.6c4.7 4.8 8.1 11.1 9.30000001 18-0.7-4.9 0.3-5.5 0.99999999-4.4 6.6 6.6 10.69999999 15.7 10.7 25.8-0.1 10-4.1 19.1-10.7 25.7z m0 0"  ></path></symbol><symbol id="icon-recent" viewBox="0 0 1024 1024"><path d="M504 1024C225.6 1024 0 798.4 0 520S225.6 16 504 16s504 225.6 504 504-225.6 504-504 504z m0-939.2C264 84.8 68.8 280 68.8 520c0 240.8 195.2 436 436 436s436-195.2 436-436c-0.8-240-196-435.2-436.8-435.2z"  ></path><path d="M452 572.8V221.6h71.2v280h237.6v71.2H452z"  ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var c,o,i,l,d,s=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}c=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4466169,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?s(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(c,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),c()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(i=c,l=n.document,d=!1,m(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,a())})}function a(){d||(d=!0,i())}function m(){try{l.documentElement.doScroll("left")}catch(t){return void setTimeout(m,50)}a()}}(window);

ruoyi-ui/src/assets/iconfont/iconfont.json

@@ -5,6 +5,20 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "39573034",
+      "name": "卡片未激活",
+      "font_class": "menu",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    },
+    {
+      "icon_id": "39573028",
+      "name": "卡片",
+      "font_class": "menuactive",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
     {
       "icon_id": "8483536",
       "name": "左",

ruoyi-ui/src/store/modules/menu.js

@@ -1,5 +1,6 @@
 const state = {
-  recentPages: []
+  recentPages: [],
+  isRecentOpen:false,
   }
   
   const mutations = {
@@ -21,6 +22,12 @@ const state = {
       }
 
     },
+    openRecent(state){
+      state.isRecentOpen = true;
+    },
+    closeRecent(state){
+      state.isRecentOpen = false;
+    },
     removeRecent(state, item) {
       let i = state.recentPages.findIndex(unit => unit.path == item.path);
       state.recentPages.splice(i, 1);

ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/CustomMenu.vue

@@ -65,7 +65,6 @@ export default {
   watch: {
     $route:{
       handler(newV){
-        console.log(newV , "匡扶汉室的xiaohandler");
         this.activeIndex = newV.meta.menuId
       },
       immediate: true

ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/UserArea.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="operations">
     <div class="opCon">
+       <div class="menu_recent" @click="onSwitchRecent">
+        <i class="iconfont icon-menuactive" v-if="menu.isRecentOpen"></i>
+          <i class="iconfont icon-menu" v-else></i>
+        </div>
       <el-dropdown class="userBox">
         <span class="user">
           <img
@@ -21,9 +25,9 @@
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
-      <div class="config">
+      <!-- <div class="config">
         <img class="icon" src="@/assets/jihe/images/user/set.png" alt="" />
-      </div>
+      </div> -->
       <div class="logout" @click="logout">
         <img class="icon" src="@/assets/jihe/images/user/out.png" alt="" />
       </div>
@@ -32,7 +36,7 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+import { mapGetters, mapState, mapMutations } from "vuex";
 import Breadcrumb from "@/components/Breadcrumb";
 import Hamburger from "@/components/Hamburger";
 import Screenfull from "@/components/Screenfull";
@@ -84,6 +88,7 @@ export default {
   },
   computed: {
     ...mapGetters(["sidebar", "avatar", "device"]),
+    ...mapState(["menu"]),
     setting: {
       get() {
         return this.$store.state.settings.showSettings;
@@ -107,6 +112,14 @@ export default {
     },
   },
   methods: {
+    ...mapMutations("menu", ["openRecent", "closeRecent"]),
+    onSwitchRecent(){
+      if(this.menu.isRecentOpen){
+        this.closeRecent();
+      }else{
+        this.openRecent();
+      }
+    },
     toggleSideBar() {
       this.$store.dispatch("app/toggleSideBar");
     },
@@ -140,6 +153,11 @@ export default {
     height: 16px;
     justify-content: space-between;
     align-items: center;
+    .menu_recent{
+      .iconfont{
+        font-size: 16px;
+      }
+    }
     .icon {
       height: 16px;
       width: 16px;

ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/index.vue

@@ -26,7 +26,6 @@ import CustomMenu from "./CustomMenu.vue";
 import Clock from "./Clock.vue";
 import UserArea from './UserArea.vue'
 import RecentPages from "../RecentPages/index.vue";
-
 export default {
   name: "HeaderMenu",
   data() {
@@ -56,6 +55,8 @@ export default {
     });
     // this.changeMenu(this.menuLeft[0]);
   },
+  computed:{
+  },
   mounted(){
     // this.activeIndex = "l_2-0-3";
     // console.log(this.activeIndex);

ruoyi-ui/src/views/JiHeExpressway/components/RecentPages/index.vue

@@ -1,12 +1,12 @@
 <template>
 <div class="recent_pages">
-    <h4><i class="iconfont icon-recent"></i>最近使用:</h4>
+    <h4><i class="iconfont icon-recent"></i>最近访问:</h4>
     <div class="history_buttons">
         <div class="btn_left" @click="onLeft" :class="{'disabled' : startIndex <= 0 }"><i class="iconfont icon-left"></i></div>
         <div class="list_box" ref="box">
             <div class="list" :style="btnListStyle" ref="btnlist">
                 <div class="unit" :class="isActive(item) ? 'active' : ''" v-for="item,index in recentPages" ref="unit">
-                    <p class="btn_main" @click="onClickItem(item)" :key="item.path" :style="{width:item.title.length*140+'px'}">
+                    <p class="btn_main" @click="onClickItem(item)" :key="item.path" :style="{width:item.title.length*14+'px'}">
                         {{item.title}}
                     </p>
                     <p class="btn_close" @click="onRemoveItem(item)">
@@ -50,7 +50,6 @@ export default{
                         this.widthBox = this.$refs["box"].offsetWidth;
                         this.widthTotal = this.$refs["btnlist"].offsetWidth;
                         let temp = 0;
-                        console.log(newV , "recentPagessssssssssssssss");
                         newV.forEach((item,index)=>{
                             let unitW = this.$refs["unit"][index].offsetWidth;
                             temp += unitW;
@@ -65,12 +64,13 @@ export default{
                             // console.log(this.startIndex, "startIndexstartIndex")
                             // console.log(this.lastIndex, "lastIndexlastIndex")
                         })
-
+                        if(this.widthTotal > this.widthBox){
                             if (this.currentIndex >= this.lastIndex) {
                                 this.moveByRight(this.currentIndex);
                             } else if (this.currentIndex <= this.startIndex) {
                                 this.moveByLeft(this.currentIndex);
                             }
+                        }
 
                 })
             },

ruoyi-ui/src/views/JiHeExpressway/index.vue

@@ -14,7 +14,7 @@
 import HeaderMenu from "./components/HeaderMenu/index.vue";
 import Adaptation from "./components/Adaptation.vue";
 import getBoardBaseData from '@/common/getBoardBaseData'
-
+import { mapState } from "vuex";
 export default {
   name: "ji_ze_gao_su",
   components: {
@@ -33,7 +33,21 @@ export default {
       },
     };
   },
+  watch:{
+    isRecentOpen:{
+      handler(newV){
+        if(newV){
+            this.header.originH = 100;
+          }else{
+            this.header.originH = 68;
+        }
+        this.calcHeaderScale();
+      },
+      immediate:true
+    }
+  },
   computed:{
+    ...mapState("menu",["isRecentOpen"]),
     headerStyle(){
       return {
         width : `${this.header.originW}px`,
@@ -61,9 +75,9 @@ export default {
       this.header.scale = winW / this.header.originW;
       this.headerHeight = this.header.scale * this.header.originH;
     },
-    handleChange(activeMenu) {
-      this.$route.path != activeMenu.path && this.$router.push(activeMenu.path);
-    }
+    // handleChange(activeMenu) {
+    //   this.$route.path != activeMenu.path && this.$router.push(activeMenu.path);
+    // }
   }
 };
 </script>
@@ -94,6 +108,8 @@ export default {
     position: fixed;
     transform-origin: left top;
     left: 0; top:0; z-index: 1000;
+    overflow: hidden;
+    transition: all ease-out 0.3s;
   }
 
   .content {