优化页签显示

This commit is contained in:
RuoYi
2026-03-23 11:44:22 +08:00
parent 8e484ae03e
commit 2542d2501d
2 changed files with 19 additions and 45 deletions

View File

@@ -38,56 +38,29 @@
</span> </span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu class="tags-dropdown-menu"> <el-dropdown-menu class="tags-dropdown-menu">
<el-dropdown-item command="refresh"> <el-dropdown-item v-if="!isAffix(selectedDropdownTag)" command="close"><close style="width: 1em; height: 1em;" />关闭当前</el-dropdown-item>
<refresh-right style="width: 1em; height: 1em;" /> 刷新页面 <el-dropdown-item command="closeOthers"><circle-close style="width: 1em; height: 1em;" />关闭其他</el-dropdown-item>
</el-dropdown-item> <el-dropdown-item command="closeLeft" :disabled="isFirstView()"><back style="width: 1em; height: 1em;" />关闭左侧</el-dropdown-item>
<el-dropdown-item v-if="!isAffix(selectedDropdownTag)" command="close"> <el-dropdown-item command="closeRight" :disabled="isLastView()"><right style="width: 1em; height: 1em;" />关闭右侧</el-dropdown-item>
<close style="width: 1em; height: 1em;" /> 关闭当前 <el-dropdown-item command="closeAll"><circle-close style="width: 1em; height: 1em;" />全部关闭</el-dropdown-item>
</el-dropdown-item> <el-dropdown-item command="fullscreen" divided><full-screen style="width: 1em; height: 1em;" />全屏显示</el-dropdown-item>
<el-dropdown-item command="closeOthers">
<circle-close style="width: 1em; height: 1em;" /> 关闭其他
</el-dropdown-item>
<el-dropdown-item command="closeLeft" :disabled="isFirstView()">
<back style="width: 1em; height: 1em;" /> 关闭左侧
</el-dropdown-item>
<el-dropdown-item command="closeRight" :disabled="isLastView()">
<right style="width: 1em; height: 1em;" /> 关闭右侧
</el-dropdown-item>
<el-dropdown-item command="closeAll" divided>
<circle-close style="width: 1em; height: 1em;" /> 全部关闭
</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
<!-- 全屏按钮 --> <!-- 刷新按钮 -->
<span class="tags-action-btn tags-fullscreen-btn" :title="isFullscreen ? '退出全屏' : '全屏'" @click="toggleFullscreen"> <span class="tags-action-btn tags-refresh-btn" title="刷新页面" @click="refreshSelectedTag(selectedDropdownTag)">
<el-icon> <el-icon><refresh-right/></el-icon> 刷新
<full-screen v-if="!isFullscreen" />
<aim v-else />
</el-icon>
</span> </span>
<!-- 右键上下文菜单 --> <!-- 右键上下文菜单 -->
<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)"> <li @click="refreshSelectedTag(selectedTag)"><refresh-right style="width: 1em; height: 1em;" />刷新页面</li>
<refresh-right style="width: 1em; height: 1em;" /> 刷新页面 <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><close style="width: 1em; height: 1em;" />关闭当前</li>
</li> <li @click="closeOthersTags"><circle-close style="width: 1em; height: 1em;" />关闭其他</li>
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"> <li v-if="!isFirstView()" @click="closeLeftTags"><back style="width: 1em; height: 1em;" />关闭左侧</li>
<close style="width: 1em; height: 1em;" /> 关闭当前 <li v-if="!isLastView()" @click="closeRightTags"><right style="width: 1em; height: 1em;" />关闭右侧</li>
</li> <li @click="closeAllTags(selectedTag)"><circle-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>
</ul> </ul>
</div> </div>
</template> </template>
@@ -285,6 +258,7 @@ function handleDropdownCommand(command) {
selectedTag.value = tag selectedTag.value = tag
switch (command) { switch (command) {
case 'refresh': refreshSelectedTag(tag); break case 'refresh': refreshSelectedTag(tag); break
case 'fullscreen': toggleFullscreen(); break
case 'close': closeSelectedTag(tag); break case 'close': closeSelectedTag(tag); break
case 'closeOthers': closeOthersTags(); break case 'closeOthers': closeOthersTags(); break
case 'closeLeft': closeLeftTags(); break case 'closeLeft': closeLeftTags(); break
@@ -431,6 +405,7 @@ function handleScroll() {
padding: 0 8px; padding: 0 8px;
font-size: 12px; font-size: 12px;
margin-left: 5px; margin-left: 5px;
border-radius: 3px;
&:first-of-type { margin-left: 6px; } &:first-of-type { margin-left: 6px; }
&:last-of-type { margin-right: 15px; } &:last-of-type { margin-right: 15px; }
@@ -483,8 +458,8 @@ function handleScroll() {
} }
} }
.tags-fullscreen-btn { .tags-refresh-btn {
border-left: $divider; width: 60px;
} }
.contextmenu { .contextmenu {

View File

@@ -129,7 +129,6 @@ const useTagsViewStore = defineStore(
} else { } else {
this.cachedViews = [] this.cachedViews = []
} }
saveVisitedViews(this.visitedViews)
resolve([...this.cachedViews]) resolve([...this.cachedViews])
}) })
}, },