Преглед изворни кода

菜单tab添加右键快捷操作

zengy пре 2 дана
родитељ
комит
71e8e17a2d
2 измењених фајлова са 36 додато и 28 уклоњено
  1. 17 6
      src/layout/components/Navbar.vue
  2. 19 22
      src/layout/components/TagsView/index.vue

+ 17 - 6
src/layout/components/Navbar.vue

@@ -18,7 +18,7 @@
         <!--        </el-tooltip>-->
         <!--        </el-tooltip>-->
 
 
         <el-tooltip content="返回门户" effect="dark" placement="bottom">
         <el-tooltip content="返回门户" effect="dark" placement="bottom">
-          <el-button style="margin: auto" size="large" type="success" @click="goToPortal">返回门户</el-button>
+          <el-button class="portal-btn" type="success" round @click="goToPortal">返回门户</el-button>
         </el-tooltip>
         </el-tooltip>
 
 
         <screenfull id="screenfull" class="right-menu-item hover-effect"/>
         <screenfull id="screenfull" class="right-menu-item hover-effect"/>
@@ -148,6 +148,16 @@ function setLayout() {
     vertical-align: top;
     vertical-align: top;
   }
   }
 
 
+  .portal-btn {
+    align-self: center;
+    margin: 0 10px;
+    // default 尺寸高 32px,在 50px 导航栏内留出呼吸空间
+    height: 32px;
+    padding: 0 18px;
+    font-size: 14px;
+    font-weight: 600;
+  }
+
   .right-menu {
   .right-menu {
     float: right;
     float: right;
     height: 100%;
     height: 100%;
@@ -180,21 +190,22 @@ function setLayout() {
       margin-right: 40px;
       margin-right: 40px;
 
 
       .avatar-wrapper {
       .avatar-wrapper {
-        margin-top: 5px;
+        // 36px 头像在 50px 导航栏内居中:(50 - 36) / 2
+        margin-top: 7px;
         position: relative;
         position: relative;
 
 
         .user-avatar {
         .user-avatar {
           cursor: pointer;
           cursor: pointer;
-          width: 40px;
-          height: 40px;
-          border-radius: 10px;
+          width: 36px;
+          height: 36px;
+          border-radius: 9px;
         }
         }
 
 
         i {
         i {
           cursor: pointer;
           cursor: pointer;
           position: absolute;
           position: absolute;
           right: -20px;
           right: -20px;
-          top: 25px;
+          top: 23px;
           font-size: 12px;
           font-size: 12px;
         }
         }
       }
       }

+ 19 - 22
src/layout/components/TagsView/index.vue

@@ -24,28 +24,25 @@
     </scroll-pane>
     </scroll-pane>
 
 
     <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
     <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
-      <!--      <li @click="refreshSelectedTag(selectedTag)">-->
-      <!--        <refresh-right style="width: 1em; height: 1em;" /> 刷新页面-->
-      <!--      </li>-->
-      <!-- 👇 首页不显示“关闭当前” -->
-      <!--      <li-->
-      <!--          v-if="!isAffix(selectedTag) && !isHomePage(selectedTag)"-->
-      <!--          @click="closeSelectedTag(selectedTag)"-->
-      <!--      >-->
-      <!--        <close style="width: 1em; height: 1em;" /> 关闭当前-->
-      <!--      </li>-->
-      <!--      <li @click="closeOthersTags">-->
-      <!--        <circle-close style="width: 1em; height: 1em;" /> 关闭其他-->
-      <!--      </li>-->
-      <!--      <li v-if="!isFirstView()" @click="closeLeftTags">-->
-      <!--        <back style="width: 1em; height: 1em;" /> 关闭左侧-->
-      <!--      </li>-->
-      <!--      <li v-if="!isLastView()" @click="closeRightTags">-->
-      <!--        <right style="width: 1em; height: 1em;" /> 关闭右侧-->
-      <!--      </li>-->
-      <!--      <li @click="closeAllTags(selectedTag)">-->
-      <!--        <circle-close style="width: 1em; height: 1em;" /> 全部关闭-->
-      <!--      </li>-->
+      <li @click="refreshSelectedTag(selectedTag)">
+        <refresh-right style="width: 1em; height: 1em;" /> 刷新页面
+      </li>
+      <!-- 固定标签、首页不显示“关闭当前” -->
+      <li
+          v-if="!isAffix(selectedTag) && !isHomePage(selectedTag)"
+          @click="closeSelectedTag(selectedTag)"
+      >
+        <close style="width: 1em; height: 1em;" /> 关闭当前
+      </li>
+      <li @click="closeOthersTags">
+        <circle-close style="width: 1em; height: 1em;" /> 关闭其他
+      </li>
+      <li v-if="!isFirstView()" @click="closeLeftTags">
+        <back style="width: 1em; height: 1em;" /> 关闭左侧
+      </li>
+      <li v-if="!isLastView()" @click="closeRightTags">
+        <right style="width: 1em; height: 1em;" /> 关闭右侧
+      </li>
     </ul>
     </ul>
   </div>
   </div>
 </template>
 </template>