From 06fb8a260302fac3469c0d08664b908072e8ef35 Mon Sep 17 00:00:00 2001
From: hui <770260999@qq.com>
Date: Mon, 6 May 2024 08:56:51 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/store/modules/menu.js            | 19 +++++-
 .../components/RecentPages/ContextMenu.vue    | 36 ++++++++++
 .../components/RecentPages/index.vue          | 66 ++++++++++++-------
 ruoyi-ui/vue.config.js                        |  4 +-
 4 files changed, 97 insertions(+), 28 deletions(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/components/RecentPages/ContextMenu.vue

diff --git a/ruoyi-ui/src/store/modules/menu.js b/ruoyi-ui/src/store/modules/menu.js
index 6f0103f4..c8d81166 100644
--- a/ruoyi-ui/src/store/modules/menu.js
+++ b/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;
     }
 
   }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/RecentPages/ContextMenu.vue b/ruoyi-ui/src/views/JiHeExpressway/components/RecentPages/ContextMenu.vue
new file mode 100644
index 00000000..8d61145c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/RecentPages/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/RecentPages/index.vue
index 1450ffd4..eede637f 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/RecentPages/index.vue
+++ b/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="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*14+'px'}">
-                        {{item.title}}
-                    </p>
-                    <i class="btn_close iconfont icon-guanbi" @click="onRemoveItem(item)"></i>
+    <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="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'}">
+                            {{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>
-        <div class="btn_right" @click="onRight" :class="{ 'disabled': lastIndex == -1 || lastIndex >= widthArr.length - 1 }"><i class="iconfont icon-right"></i></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;
diff --git a/ruoyi-ui/vue.config.js b/ruoyi-ui/vue.config.js
index 77f27227..59319d90 100644
--- a/ruoyi-ui/vue.config.js
+++ b/ruoyi-ui/vue.config.js
@@ -52,8 +52,8 @@ module.exports = {
         // target: `http://10.0.81.204:8087`, //现场后台 刘文阁
         // target: `http://10.168.69.255:8087`, //正晨后台 连现场物联 刘文阁
         // target: `http://10.168.78.135:8087`,  //王钦
-        target: `http://10.168.66.196:8087`, //正晨后台 连现场物联 刘文阁2
-        // target: `http://10.168.68.42:8087`, //王思祥
+        // target: `http://10.168.66.196:8087`, //正晨后台 连现场物联 刘文阁2
+        target: `http://10.168.68.42:8087`, //王思祥
         // target: `http://10.168.72.174:8087`, //赵祥龙
         // target: `http://10.168.65.156:8097`, //孟
         // target: `http://10.168.56.165:8087`, //王家宝