merge

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

@@ -29,6 +29,14 @@ const state = {
       mutations.saveRecent(state);
 
     },
+    pinRecent(state, item){
+      state.recentPages.forEach((unit, index) => {
+        if (unit.path == item.path) {
+          unit.isPinned = !unit.isPinned;
+        }
+      });
+      mutations.saveRecent(state);
+    },
     openRecent(state){
       state.isRecentOpen = true;
       sessionStorage.setItem("isRecentOpen", true);
@@ -43,9 +51,14 @@ const state = {
       mutations.saveRecent(state);
     },
     resetRecent(state, para){
-      state.isRecentOpen = false;
-      sessionStorage.setItem("isRecentOpen", false);
-      sessionStorage.removeItem("recentPages")
+      temp = JSON.parse(sessionStorage.getItem("recentPages") || "[]");
+      state.recentPages = [];
+      temp.forEach((unit, index) => {
+        if (unit.isPinned) {
+          state.recentPages.push(unit);
+        }
+      });
+      state.isRecentOpen = true;
     }
 
   }

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

@@ -0,0 +1,36 @@
+<template>
+    <div ref="ele" class="comp_box">
+        <slot></slot>
+            <ul class="sub_menu">
+                <li>菜单一</li>
+            </ul>
+    </div>
+</template>
+<script>
+export default{
+    name:"ContextMenu",
+    data(){
+        return {
+        }
+    },
+    computed:{
+    },
+    watch:{
+    },
+    mounted(){
+        this.$refs["ele"].addEventListener("contextmenu", this.showMenu)
+    },
+    methods:{
+        showMenu(e){
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.comp_box{
+    position: relative; border: 1px solid #f00;
+    .sub_menu{ position: absolute; z-index: 9999;border: 1px solid #0f0; left: 0; top:0; }
+}
+</style>

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

@@ -1,24 +1,34 @@
 <template>
-<div class="recent_pages">
-    <h4><i class="iconfont icon-recent"></i>最近访问:</h4>
+    <div class="recent_pages">
+        <h4><i class="iconfont icon-recent"></i>
+            <!-- <ContextMenu>最近访问:</ContextMenu> -->
+            最近访问:
+        </h4>
         <div class="history_buttons">
-        <div class="btn_left" @click="onLeft" :class="{'disabled' : startIndex <= 0 }"><i class="iconfont icon-left"></i></div>
+            <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*14+'px'}">
+                    <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*14+'px'}">
                             {{item.title}}
                         </p>
+                        <p class="btn_pin" :class="{active:item.isPinned}" @click="onPin(item)"><i></i></p>
                         <i class="btn_close iconfont icon-guanbi" @click="onRemoveItem(item)"></i>
                     </div>
                 </div>
             </div>
-        <div class="btn_right" @click="onRight" :class="{ 'disabled': lastIndex == -1 || lastIndex >= widthArr.length - 1 }"><i class="iconfont icon-right"></i></div>
+            <div class="btn_right" @click="onRight"
+                :class="{ 'disabled': lastIndex == -1 || lastIndex >= widthArr.length - 1 }"><i
+                    class="iconfont icon-right"></i></div>
+        </div>
     </div>
-</div>
 </template>
 <script>
 import { mapMutations, mapState } from 'vuex';
+import ContextMenu from './ContextMenu.vue';
 export default{
     data(){
         return {
@@ -31,6 +41,9 @@ export default{
             currentIndex : -1
         }
     },
+    components:{
+        ContextMenu
+    },
     computed:{
         ...mapState("menu", ["recentPages"]),
         btnListStyle(){
@@ -86,19 +99,15 @@ export default{
         }
     },
     mounted(){
-        // 测试数据
-        // for (let i = 0; i < 30; i++) {
-        //     this.addRecent({
-        //         title: `第${i}项菜单示例`,
-        //         path: "url" + i
-        //     });
-        // }
     },
     methods:{
-        ...mapMutations("menu", ["addRecent","removeRecent"]),
+        ...mapMutations("menu", ["addRecent", "removeRecent","pinRecent"]),
         onClickItem(item){
             this.$route.path != item.path && this.$router.push(item.path);
         },
+        onPin(item){
+            this.pinRecent(item);
+        },
         onRemoveItem(item){
             this.removeRecent(item);
             if(this.$route.path == item.path){
@@ -189,7 +198,7 @@ export default{
 <style lang="scss" scoped>
 .recent_pages{ 
     display: flex; flex-direction: row; align-items:stretch; padding: 0 20px;
-    h4{ width: 110px; height: 32px; line-height: 32px; text-align: center; margin: 0; padding: 0; font-weight: bold; color: #3de8ff;
+    h4{ width: 110px; height: 32px; line-height: 32px; text-align: center; margin: 0; padding: 0; font-weight: bold; color: #3de8ff; display: flex; align-items: center; justify-content: center;
         .iconfont{ margin-right: 3px;}
     }
     .history_buttons {
@@ -225,7 +234,18 @@ export default{
                             border:1px solid #03a9b1;
                         }
                     }
-
+                    .btn_pin{
+                        position: absolute;
+                        left:0;
+                        bottom:0;
+                        width:16px; height: 10px;
+                        display: flex; align-items: center; justify-content: center;
+                        i{
+                            display: block;
+                            width:6px; height: 6px; border-radius: 3px;
+                        }
+                        &.active i{ background-color: #FA0;}
+                    }
                     .btn_close {
                         position: absolute;
                         right: 6px;