|
@@ -1,15 +1,15 @@
|
|
|
<script setup lang="ts">
|
|
|
+import { $t } from "/@/plugins/i18n";
|
|
|
import { emitter } from "/@/utils/mitt";
|
|
|
import { RouteConfigs } from "../../types";
|
|
|
import { useTags } from "../../hooks/useTag";
|
|
|
import { routerArrays } from "/@/layout/types";
|
|
|
import { isEqual, isEmpty } from "lodash-unified";
|
|
|
-import { toggleClass, removeClass } from "@pureadmin/utils";
|
|
|
-import { useResizeObserver, useDebounceFn } from "@vueuse/core";
|
|
|
import { useSettingStoreHook } from "/@/store/modules/settings";
|
|
|
+import { ref, watch, unref, nextTick, onBeforeMount } from "vue";
|
|
|
import { handleAliveRoute, delAliveRoutes } from "/@/router/utils";
|
|
|
import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
|
|
|
-import { ref, watch, unref, toRaw, nextTick, onBeforeMount } from "vue";
|
|
|
+import { useResizeObserver, useDebounceFn, useFullscreen } from "@vueuse/core";
|
|
|
|
|
|
const {
|
|
|
route,
|
|
@@ -23,6 +23,7 @@ const {
|
|
|
buttonLeft,
|
|
|
showModel,
|
|
|
translateX,
|
|
|
+ pureSetting,
|
|
|
activeIndex,
|
|
|
getTabStyle,
|
|
|
iconIsActive,
|
|
@@ -34,12 +35,15 @@ const {
|
|
|
onMounted,
|
|
|
onMouseenter,
|
|
|
onMouseleave,
|
|
|
- transformI18n
|
|
|
+ transformI18n,
|
|
|
+ onContentFullScreen
|
|
|
} = useTags();
|
|
|
|
|
|
const tabDom = ref();
|
|
|
const containerDom = ref();
|
|
|
const scrollbarDom = ref();
|
|
|
+let isShowArrow = ref(false);
|
|
|
+const { isFullscreen, toggle } = useFullscreen();
|
|
|
|
|
|
const dynamicTagView = () => {
|
|
|
const index = multiTags.value.findIndex(item => {
|
|
@@ -66,6 +70,9 @@ const moveToView = (index: number): void => {
|
|
|
: 0;
|
|
|
// 已有标签页总长度(包含溢出部分)
|
|
|
const tabDomWidth = tabDom.value ? tabDom.value?.offsetWidth : 0;
|
|
|
+ scrollbarDomWidth <= tabDomWidth
|
|
|
+ ? (isShowArrow.value = true)
|
|
|
+ : (isShowArrow.value = false);
|
|
|
if (tabDomWidth < scrollbarDomWidth || tabItemElOffsetLeft === 0) {
|
|
|
translateX.value = 0;
|
|
|
} else if (tabItemElOffsetLeft < -translateX.value) {
|
|
@@ -143,16 +150,11 @@ function dynamicRouteTag(value: string, parentPath: string): void {
|
|
|
|
|
|
/** 刷新路由 */
|
|
|
function onFresh() {
|
|
|
- const refreshButton = "refresh-button";
|
|
|
- toggleClass(true, refreshButton, document.querySelector(".rotate"));
|
|
|
const { fullPath, query } = unref(route);
|
|
|
router.replace({
|
|
|
path: "/redirect" + fullPath,
|
|
|
query: query
|
|
|
});
|
|
|
- setTimeout(() => {
|
|
|
- removeClass(document.querySelector(".rotate"), refreshButton);
|
|
|
- }, 600);
|
|
|
}
|
|
|
|
|
|
function deleteDynamicTag(obj: any, current: any, tag?: string) {
|
|
@@ -277,6 +279,32 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
|
|
|
});
|
|
|
router.push("/welcome");
|
|
|
break;
|
|
|
+ case 6:
|
|
|
+ // 整体页面全屏
|
|
|
+ toggle();
|
|
|
+ setTimeout(() => {
|
|
|
+ if (isFullscreen.value) {
|
|
|
+ tagsViews[6].icon = "exit-fullscreen";
|
|
|
+ tagsViews[6].text = $t("buttons.hswholeExitFullScreen");
|
|
|
+ } else {
|
|
|
+ tagsViews[6].icon = "fullscreen";
|
|
|
+ tagsViews[6].text = $t("buttons.hswholeFullScreen");
|
|
|
+ }
|
|
|
+ }, 100);
|
|
|
+ break;
|
|
|
+ case 7:
|
|
|
+ // 内容区全屏
|
|
|
+ onContentFullScreen();
|
|
|
+ setTimeout(() => {
|
|
|
+ if (pureSetting.hiddenSideBar) {
|
|
|
+ tagsViews[7].icon = "exit-fullscreen";
|
|
|
+ tagsViews[7].text = $t("buttons.hscontentExitFullScreen");
|
|
|
+ } else {
|
|
|
+ tagsViews[7].icon = "fullscreen";
|
|
|
+ tagsViews[7].text = $t("buttons.hscontentFullScreen");
|
|
|
+ }
|
|
|
+ }, 100);
|
|
|
+ break;
|
|
|
}
|
|
|
setTimeout(() => {
|
|
|
showMenuModel(route.fullPath, route.query);
|
|
@@ -467,9 +495,9 @@ onMounted(() => {
|
|
|
|
|
|
<template>
|
|
|
<div ref="containerDom" class="tags-view" v-if="!showTags">
|
|
|
- <div class="arrow-left">
|
|
|
+ <span v-show="isShowArrow" class="arrow-left">
|
|
|
<IconifyIconOffline icon="arrow-left-s-line" @click="handleScroll(200)" />
|
|
|
- </div>
|
|
|
+ </span>
|
|
|
<div ref="scrollbarDom" class="scroll-container">
|
|
|
<div class="tab" ref="tabDom" :style="getTabStyle">
|
|
|
<div
|
|
@@ -512,7 +540,7 @@ onMounted(() => {
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <span class="arrow-right">
|
|
|
+ <span v-show="isShowArrow" class="arrow-right">
|
|
|
<IconifyIconOffline
|
|
|
icon="arrow-right-s-line"
|
|
|
@click="handleScroll(-200)"
|
|
@@ -527,59 +555,41 @@ onMounted(() => {
|
|
|
class="contextmenu"
|
|
|
>
|
|
|
<div
|
|
|
- v-for="(item, key) in tagsViews"
|
|
|
+ v-for="(item, key) in tagsViews.slice(0, 6)"
|
|
|
:key="key"
|
|
|
style="display: flex; align-items: center"
|
|
|
>
|
|
|
<li v-if="item.show" @click="selectTag(key, item)">
|
|
|
- <component :is="toRaw(item.icon)" :key="key" />
|
|
|
+ <IconifyIconOffline :icon="item.icon" />
|
|
|
{{ transformI18n(item.text) }}
|
|
|
</li>
|
|
|
</div>
|
|
|
</ul>
|
|
|
</transition>
|
|
|
<!-- 右侧功能按钮 -->
|
|
|
- <ul class="right-button">
|
|
|
- <li>
|
|
|
- <span
|
|
|
- :title="transformI18n('buttons.hsrefreshRoute')"
|
|
|
- class="el-icon-refresh-right rotate"
|
|
|
- @click="onFresh"
|
|
|
- >
|
|
|
- <IconifyIconOffline icon="refresh-right" />
|
|
|
- </span>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <el-dropdown
|
|
|
- trigger="click"
|
|
|
- placement="bottom-end"
|
|
|
- @command="handleCommand"
|
|
|
- >
|
|
|
- <IconifyIconOffline icon="arrow-down" class="dark:text-white" />
|
|
|
- <template #dropdown>
|
|
|
- <el-dropdown-menu>
|
|
|
- <el-dropdown-item
|
|
|
- v-for="(item, key) in tagsViews"
|
|
|
- :key="key"
|
|
|
- :command="{ key, item }"
|
|
|
- :divided="item.divided"
|
|
|
- :disabled="item.disabled"
|
|
|
- >
|
|
|
- <component
|
|
|
- :is="toRaw(item.icon)"
|
|
|
- :key="key"
|
|
|
- style="margin-right: 6px"
|
|
|
- />
|
|
|
- {{ transformI18n(item.text) }}
|
|
|
- </el-dropdown-item>
|
|
|
- </el-dropdown-menu>
|
|
|
- </template>
|
|
|
- </el-dropdown>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <slot />
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ <el-dropdown
|
|
|
+ trigger="click"
|
|
|
+ placement="bottom-end"
|
|
|
+ @command="handleCommand"
|
|
|
+ >
|
|
|
+ <span class="arrow-down">
|
|
|
+ <IconifyIconOffline icon="arrow-down" class="dark:text-white" />
|
|
|
+ </span>
|
|
|
+ <template #dropdown>
|
|
|
+ <el-dropdown-menu>
|
|
|
+ <el-dropdown-item
|
|
|
+ v-for="(item, key) in tagsViews"
|
|
|
+ :key="key"
|
|
|
+ :command="{ key, item }"
|
|
|
+ :divided="item.divided"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ >
|
|
|
+ <IconifyIconOffline :icon="item.icon" />
|
|
|
+ {{ transformI18n(item.text) }}
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </template>
|
|
|
+ </el-dropdown>
|
|
|
</div>
|
|
|
</template>
|
|
|
|