mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-07 08:57:19 +08:00
RealityBoy
GitHub
parent
4d1a9ea8e7
commit
c119328176
@ -18,6 +18,10 @@ buttons:
|
||||
hscloseRightTabs: Close RightTabs
|
||||
hscloseOtherTabs: Close OtherTabs
|
||||
hscloseAllTabs: Close AllTabs
|
||||
hswholeFullScreen: Whole FullScreen
|
||||
hswholeExitFullScreen: Whole ExitFullScreen
|
||||
hscontentFullScreen: Content FullScreen
|
||||
hscontentExitFullScreen: Content ExitFullScreen
|
||||
menus:
|
||||
hshome: Home
|
||||
hslogin: Login
|
||||
|
||||
@ -18,6 +18,10 @@ buttons:
|
||||
hscloseRightTabs: 关闭右侧标签页
|
||||
hscloseOtherTabs: 关闭其他标签页
|
||||
hscloseAllTabs: 关闭全部标签页
|
||||
hswholeFullScreen: 整体页面全屏
|
||||
hswholeExitFullScreen: 整体页面退出全屏
|
||||
hscontentFullScreen: 内容区全屏
|
||||
hscontentExitFullScreen: 内容区退出全屏
|
||||
menus:
|
||||
hshome: 首页
|
||||
hslogin: 登录
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
"driver.js": "^0.9.8",
|
||||
"echarts": "^5.3.3",
|
||||
"el-table-infinite-scroll": "^3.0.1",
|
||||
"element-plus": "^2.2.16",
|
||||
"element-plus": "^2.2.17",
|
||||
"element-resize-detector": "^1.2.3",
|
||||
"js-cookie": "^3.0.1",
|
||||
"jsbarcode": "^3.11.5",
|
||||
|
||||
16
pnpm-lock.yaml
generated
16
pnpm-lock.yaml
generated
@ -57,7 +57,7 @@ specifiers:
|
||||
driver.js: ^0.9.8
|
||||
echarts: ^5.3.3
|
||||
el-table-infinite-scroll: ^3.0.1
|
||||
element-plus: ^2.2.16
|
||||
element-plus: ^2.2.17
|
||||
element-resize-detector: ^1.2.3
|
||||
eslint: ^8.8.0
|
||||
eslint-plugin-prettier: ^4.0.0
|
||||
@ -145,7 +145,7 @@ dependencies:
|
||||
driver.js: 0.9.8
|
||||
echarts: 5.3.3
|
||||
el-table-infinite-scroll: 3.0.1
|
||||
element-plus: 2.2.16_vue@3.2.39
|
||||
element-plus: 2.2.17_vue@3.2.39
|
||||
element-resize-detector: 1.2.4
|
||||
js-cookie: 3.0.1
|
||||
jsbarcode: 3.11.5
|
||||
@ -1392,7 +1392,7 @@ packages:
|
||||
}
|
||||
dependencies:
|
||||
"@element-plus/icons-vue": 2.0.9_vue@3.2.39
|
||||
element-plus: 2.2.16_vue@3.2.39
|
||||
element-plus: 2.2.17_vue@3.2.39
|
||||
vue: 3.2.39
|
||||
transitivePeerDependencies:
|
||||
- "@vue/composition-api"
|
||||
@ -1404,7 +1404,7 @@ packages:
|
||||
integrity: sha512-mJBpMj0YkaqTM5TDz+ek/f8h74qRLhDc/gLJhBq0wpyfCgG++Jd/9i+QUj8gedA5oN8IL6LOSFbcvlGDYxHgkw==
|
||||
}
|
||||
dependencies:
|
||||
element-plus: 2.2.16_vue@3.2.39
|
||||
element-plus: 2.2.17_vue@3.2.39
|
||||
vue: 3.2.39
|
||||
transitivePeerDependencies:
|
||||
- "@vue/composition-api"
|
||||
@ -3901,7 +3901,7 @@ packages:
|
||||
}
|
||||
dependencies:
|
||||
core-js: 3.25.1
|
||||
element-plus: 2.2.16_vue@3.2.39
|
||||
element-plus: 2.2.17_vue@3.2.39
|
||||
vue: 3.2.39
|
||||
transitivePeerDependencies:
|
||||
- "@vue/composition-api"
|
||||
@ -3914,10 +3914,10 @@ packages:
|
||||
}
|
||||
dev: true
|
||||
|
||||
/element-plus/2.2.16_vue@3.2.39:
|
||||
/element-plus/2.2.17_vue@3.2.39:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-rvaTMFIujec9YDC5lyaiQv2XVUCHuhVDq2k+9vQxP78N8Wd07iEOGa9pvEVOO2uYc75l4rSl2RE/IWPH/6Mdzw==
|
||||
integrity: sha512-MGwMIE/q+FFD3kgS23x8HIe5043tmD1cTRwjhIX9o6fim1avFnUkrsfYRvybbz4CkyqSb185EheZS5AUPpXh2g==
|
||||
}
|
||||
peerDependencies:
|
||||
vue: ^3.2.0
|
||||
@ -8790,7 +8790,7 @@ packages:
|
||||
ace-builds: 1.10.1
|
||||
ant-design-vue: 3.2.12_vue@3.2.39
|
||||
core-js: 3.25.1
|
||||
element-plus: 2.2.16_vue@3.2.39
|
||||
element-plus: 2.2.17_vue@3.2.39
|
||||
lodash: 4.17.21
|
||||
uuid: 8.3.2
|
||||
vue: 3.2.39
|
||||
|
||||
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 36 36"><path d="M19.41 18l8.29-8.29a1 1 0 0 0-1.41-1.41L18 16.59l-8.29-8.3a1 1 0 0 0-1.42 1.42l8.3 8.29l-8.3 8.29A1 1 0 1 0 9.7 27.7l8.3-8.29l8.29 8.29a1 1 0 0 0 1.41-1.41z" fill="currentColor"></path></svg>
|
||||
|
Before Width: | Height: | Size: 395 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 36 36"><path d="M26 17H10a1 1 0 0 0 0 2h16a1 1 0 0 0 0-2z" fill="currentColor"></path></svg>
|
||||
|
Before Width: | Height: | Size: 279 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none"><path d="M7 12l7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 12l7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M21 12H7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" ></path><path d="M3 3v18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
|
||||
|
Before Width: | Height: | Size: 647 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M3 5h14V3H3v2zm12 8V7H5v6h10zM3 17h14v-2H3v2z" fill="currentColor"></path></svg>
|
||||
|
Before Width: | Height: | Size: 284 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g transform="translate(24 0) scale(-1 1)"><g fill="none"><path d="M7 12l7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 12l7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M21 12H7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path><path d="M3 3v18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 693 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"><path d="M400 148l-21.12-24.57A191.43 191.43 0 0 0 240 64C134 64 48 150 48 256s86 192 192 192a192.09 192.09 0 0 0 181.07-128" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="32"></path><path d="M464 68.45V220a4 4 0 0 1-4 4H308.45a4 4 0 0 1-2.83-6.83L457.17 65.62a4 4 0 0 1 6.83 2.83z" fill="currentColor"></path></svg>
|
||||
|
Before Width: | Height: | Size: 561 B |
@ -7,13 +7,11 @@ import Menu from "@iconify-icons/ep/menu";
|
||||
import HomeFilled from "@iconify-icons/ep/home-filled";
|
||||
import SetUp from "@iconify-icons/ep/set-up";
|
||||
import Edit from "@iconify-icons/ep/edit";
|
||||
import Setting from "@iconify-icons/ep/setting";
|
||||
import Lollipop from "@iconify-icons/ep/lollipop";
|
||||
import Link from "@iconify-icons/ep/link";
|
||||
import Position from "@iconify-icons/ep/position";
|
||||
import Histogram from "@iconify-icons/ep/histogram";
|
||||
import RefreshRight from "@iconify-icons/ep/refresh-right";
|
||||
import ArrowDown from "@iconify-icons/ep/arrow-down";
|
||||
import Close from "@iconify-icons/ep/close";
|
||||
import CloseBold from "@iconify-icons/ep/close-bold";
|
||||
import Bell from "@iconify-icons/ep/bell";
|
||||
@ -36,13 +34,11 @@ addIcon("menu", Menu);
|
||||
addIcon("home-filled", HomeFilled);
|
||||
addIcon("set-up", SetUp);
|
||||
addIcon("edit", Edit);
|
||||
addIcon("setting", Setting);
|
||||
addIcon("lollipop", Lollipop);
|
||||
addIcon("link", Link);
|
||||
addIcon("position", Position);
|
||||
addIcon("histogram", Histogram);
|
||||
addIcon("refresh-right", RefreshRight);
|
||||
addIcon("arrow-down", ArrowDown);
|
||||
addIcon("close", Close);
|
||||
addIcon("close-bold", CloseBold);
|
||||
addIcon("bell", Bell);
|
||||
@ -89,6 +85,14 @@ import User from "@iconify-icons/ri/user-3-fill";
|
||||
import Lock from "@iconify-icons/ri/lock-fill";
|
||||
import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
|
||||
import MenuFold from "@iconify-icons/ri/menu-fold-fill";
|
||||
import Setting from "@iconify-icons/ri/settings-3-line";
|
||||
import ArrowDown from "@iconify-icons/ri/arrow-down-s-line";
|
||||
import CloseLeftTags from "@iconify-icons/ri/text-direction-r";
|
||||
import CloseRightTags from "@iconify-icons/ri/text-direction-l";
|
||||
import CloseOtherTags from "@iconify-icons/ri/text-spacing";
|
||||
import CloseAllTags from "@iconify-icons/ri/subtract-line";
|
||||
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
|
||||
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
|
||||
addIcon("arrow-right-s-line", ArrowRightSLine);
|
||||
addIcon("arrow-left-s-line", ArrowLeftSLine);
|
||||
addIcon("logout-circle-r-line", LogoutCircleRLine);
|
||||
@ -116,6 +120,14 @@ addIcon("user", User);
|
||||
addIcon("lock", Lock);
|
||||
addIcon("menu-unfold", MenuUnfold);
|
||||
addIcon("menu-fold", MenuFold);
|
||||
addIcon("setting", Setting);
|
||||
addIcon("arrow-down", ArrowDown);
|
||||
addIcon("close-left-tags", CloseLeftTags);
|
||||
addIcon("close-right-tags", CloseRightTags);
|
||||
addIcon("close-other-tags", CloseOtherTags);
|
||||
addIcon("close-all-tags", CloseAllTags);
|
||||
addIcon("fullscreen", Fullscreen);
|
||||
addIcon("exit-fullscreen", ExitFullscreen);
|
||||
|
||||
// Font Awesome 4
|
||||
import FaUser from "@iconify-icons/fa/user";
|
||||
|
||||
@ -5,9 +5,7 @@ import mixNav from "./sidebar/mixNav.vue";
|
||||
import avatars from "/@/assets/avatars.jpg";
|
||||
import { useNav } from "/@/layout/hooks/useNav";
|
||||
import Breadcrumb from "./sidebar/breadCrumb.vue";
|
||||
import { deviceDetection } from "@pureadmin/utils";
|
||||
import topCollapse from "./sidebar/topCollapse.vue";
|
||||
import screenfull from "../components/screenfull/index.vue";
|
||||
import { useTranslationLang } from "../hooks/useTranslationLang";
|
||||
import globalization from "/@/assets/svg/globalization.svg?component";
|
||||
|
||||
@ -50,8 +48,6 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
|
||||
<Search />
|
||||
<!-- 通知 -->
|
||||
<Notice id="header-notice" />
|
||||
<!-- 全屏 -->
|
||||
<screenfull id="header-screenfull" v-show="!deviceDetection()" />
|
||||
<!-- 国际化 -->
|
||||
<el-dropdown id="header-translation" trigger="click">
|
||||
<globalization
|
||||
|
||||
@ -5,8 +5,6 @@ import Notice from "../notice/index.vue";
|
||||
import SidebarItem from "./sidebarItem.vue";
|
||||
import avatars from "/@/assets/avatars.jpg";
|
||||
import { useNav } from "/@/layout/hooks/useNav";
|
||||
import screenfull from "../screenfull/index.vue";
|
||||
import { deviceDetection } from "@pureadmin/utils";
|
||||
import { useTranslationLang } from "../../hooks/useTranslationLang";
|
||||
import { usePermissionStoreHook } from "/@/store/modules/permission";
|
||||
import globalization from "/@/assets/svg/globalization.svg?component";
|
||||
@ -62,8 +60,6 @@ watch(
|
||||
<Search />
|
||||
<!-- 通知 -->
|
||||
<Notice id="header-notice" />
|
||||
<!-- 全屏 -->
|
||||
<screenfull id="header-screenfull" v-show="!deviceDetection()" />
|
||||
<!-- 国际化 -->
|
||||
<el-dropdown id="header-translation" trigger="click">
|
||||
<globalization
|
||||
|
||||
@ -4,8 +4,6 @@ import Notice from "../notice/index.vue";
|
||||
import avatars from "/@/assets/avatars.jpg";
|
||||
import { useNav } from "/@/layout/hooks/useNav";
|
||||
import { transformI18n } from "/@/plugins/i18n";
|
||||
import screenfull from "../screenfull/index.vue";
|
||||
import { deviceDetection } from "@pureadmin/utils";
|
||||
import { ref, toRaw, watch, onMounted } from "vue";
|
||||
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
||||
import { getParentPaths, findRouteByPath } from "/@/router/utils";
|
||||
@ -94,8 +92,6 @@ watch(
|
||||
<Search />
|
||||
<!-- 通知 -->
|
||||
<Notice id="header-notice" />
|
||||
<!-- 全屏 -->
|
||||
<screenfull id="header-screenfull" v-show="!deviceDetection()" />
|
||||
<!-- 国际化 -->
|
||||
<el-dropdown id="header-translation" trigger="click">
|
||||
<globalization
|
||||
|
||||
@ -121,21 +121,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.right-button {
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 38px;
|
||||
border-right: 1px solid #ccc;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
/* 右键菜单 */
|
||||
.contextmenu {
|
||||
margin: 0;
|
||||
@ -196,6 +181,9 @@
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
:deep(.el-dropdown-menu__item--divided) {
|
||||
margin: 1px 0;
|
||||
}
|
||||
.el-dropdown-menu__item--divided::before {
|
||||
margin: 0;
|
||||
}
|
||||
@ -223,7 +211,8 @@
|
||||
}
|
||||
|
||||
.arrow-left,
|
||||
.arrow-right {
|
||||
.arrow-right,
|
||||
.arrow-down {
|
||||
width: 40px;
|
||||
height: 38px;
|
||||
color: var(--el-text-color-primary);
|
||||
@ -248,7 +237,7 @@
|
||||
|
||||
.arrow-right {
|
||||
box-shadow: -5px 0 5px -6px #ccc;
|
||||
border-right: 1px solid #ccc;
|
||||
border-right: 0.5px solid #ccc;
|
||||
|
||||
&:hover {
|
||||
cursor: e-resize;
|
||||
@ -305,8 +294,3 @@
|
||||
background: var(--el-color-primary);
|
||||
animation: scheduleOutWidth 400ms ease-in;
|
||||
}
|
||||
|
||||
/* 刷新按钮动画效果 */
|
||||
.refresh-button {
|
||||
animation: rotate 600ms linear infinite;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -14,20 +14,15 @@ import type { StorageConfigs } from "/#/index";
|
||||
import { useEventListener } from "@vueuse/core";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { transformI18n, $t } from "/@/plugins/i18n";
|
||||
import { useSettingStoreHook } from "/@/store/modules/settings";
|
||||
import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
|
||||
import { storageLocal, toggleClass, hasClass } from "@pureadmin/utils";
|
||||
|
||||
import close from "/@/assets/svg/close.svg?component";
|
||||
import refresh from "/@/assets/svg/refresh.svg?component";
|
||||
import closeAll from "/@/assets/svg/close_all.svg?component";
|
||||
import closeLeft from "/@/assets/svg/close_left.svg?component";
|
||||
import closeOther from "/@/assets/svg/close_other.svg?component";
|
||||
import closeRight from "/@/assets/svg/close_right.svg?component";
|
||||
|
||||
export function useTags() {
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const instance = getCurrentInstance();
|
||||
const pureSetting = useSettingStoreHook();
|
||||
|
||||
const buttonTop = ref(0);
|
||||
const buttonLeft = ref(0);
|
||||
@ -53,46 +48,60 @@ export function useTags() {
|
||||
|
||||
const tagsViews = reactive<Array<tagsViewsType>>([
|
||||
{
|
||||
icon: refresh,
|
||||
icon: "refresh-right",
|
||||
text: $t("buttons.hsreload"),
|
||||
divided: false,
|
||||
disabled: false,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: close,
|
||||
icon: "close",
|
||||
text: $t("buttons.hscloseCurrentTab"),
|
||||
divided: false,
|
||||
disabled: multiTags.value.length > 1 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: closeLeft,
|
||||
icon: "close-left-tags",
|
||||
text: $t("buttons.hscloseLeftTabs"),
|
||||
divided: true,
|
||||
disabled: multiTags.value.length > 1 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: closeRight,
|
||||
icon: "close-right-tags",
|
||||
text: $t("buttons.hscloseRightTabs"),
|
||||
divided: false,
|
||||
disabled: multiTags.value.length > 1 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: closeOther,
|
||||
icon: "close-other-tags",
|
||||
text: $t("buttons.hscloseOtherTabs"),
|
||||
divided: true,
|
||||
disabled: multiTags.value.length > 2 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: closeAll,
|
||||
icon: "close-all-tags",
|
||||
text: $t("buttons.hscloseAllTabs"),
|
||||
divided: false,
|
||||
disabled: multiTags.value.length > 1 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: "fullscreen",
|
||||
text: $t("buttons.hswholeFullScreen"),
|
||||
divided: true,
|
||||
disabled: false,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: "fullscreen",
|
||||
text: $t("buttons.hscontentFullScreen"),
|
||||
divided: false,
|
||||
disabled: false,
|
||||
show: true
|
||||
}
|
||||
]);
|
||||
|
||||
@ -172,6 +181,12 @@ export function useTags() {
|
||||
}
|
||||
}
|
||||
|
||||
function onContentFullScreen() {
|
||||
pureSetting.hiddenSideBar
|
||||
? pureSetting.changeSetting({ key: "hiddenSideBar", value: false })
|
||||
: pureSetting.changeSetting({ key: "hiddenSideBar", value: true });
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!showModel.value) {
|
||||
const configure = storageLocal.getItem<StorageConfigs>(
|
||||
@ -201,6 +216,7 @@ export function useTags() {
|
||||
buttonTop,
|
||||
buttonLeft,
|
||||
translateX,
|
||||
pureSetting,
|
||||
activeIndex,
|
||||
getTabStyle,
|
||||
iconIsActive,
|
||||
@ -213,6 +229,7 @@ export function useTags() {
|
||||
onMounted,
|
||||
onMouseenter,
|
||||
onMouseleave,
|
||||
transformI18n
|
||||
transformI18n,
|
||||
onContentFullScreen
|
||||
};
|
||||
}
|
||||
|
||||
@ -7,16 +7,13 @@ import { useSettingStoreHook } from "/@/store/modules/settings";
|
||||
import { deviceDetection, useDark, useGlobal } from "@pureadmin/utils";
|
||||
import { h, reactive, computed, onMounted, defineComponent } from "vue";
|
||||
|
||||
import backTop from "/@/assets/svg/back_top.svg?component";
|
||||
import fullScreen from "/@/assets/svg/full_screen.svg?component";
|
||||
import exitScreen from "/@/assets/svg/exit_screen.svg?component";
|
||||
|
||||
import navbar from "./components/navbar.vue";
|
||||
import tag from "./components/tag/index.vue";
|
||||
import appMain from "./components/appMain.vue";
|
||||
import setting from "./components/setting/index.vue";
|
||||
import Vertical from "./components/sidebar/vertical.vue";
|
||||
import Horizontal from "./components/sidebar/horizontal.vue";
|
||||
import backTop from "/@/assets/svg/back_top.svg?component";
|
||||
|
||||
const { isDark } = useDark();
|
||||
const { layout } = useLayout();
|
||||
@ -102,12 +99,6 @@ onMounted(() => {
|
||||
}
|
||||
});
|
||||
|
||||
function onFullScreen() {
|
||||
pureSetting.hiddenSideBar
|
||||
? pureSetting.changeSetting({ key: "hiddenSideBar", value: false })
|
||||
: pureSetting.changeSetting({ key: "hiddenSideBar", value: true });
|
||||
}
|
||||
|
||||
const layoutHeader = defineComponent({
|
||||
render() {
|
||||
return h(
|
||||
@ -127,31 +118,11 @@ const layoutHeader = defineComponent({
|
||||
!pureSetting.hiddenSideBar &&
|
||||
(layout.value.includes("vertical") || layout.value.includes("mix"))
|
||||
? h(navbar)
|
||||
: h("div"),
|
||||
: null,
|
||||
!pureSetting.hiddenSideBar && layout.value.includes("horizontal")
|
||||
? h(Horizontal)
|
||||
: h("div"),
|
||||
h(
|
||||
tag,
|
||||
{},
|
||||
{
|
||||
default: () => [
|
||||
h(
|
||||
"span",
|
||||
{
|
||||
onClick: onFullScreen
|
||||
},
|
||||
{
|
||||
default: () => [
|
||||
!pureSetting.hiddenSideBar
|
||||
? h(fullScreen, { class: "dark:text-white" })
|
||||
: h(exitScreen, { class: "dark:text-white" })
|
||||
]
|
||||
}
|
||||
)
|
||||
]
|
||||
}
|
||||
)
|
||||
: null,
|
||||
h(tag)
|
||||
]
|
||||
}
|
||||
);
|
||||
@ -226,10 +197,6 @@ const layoutHeader = defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
.main-hidden {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.app-mask {
|
||||
background: #000;
|
||||
opacity: 0.3;
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { Component } from "vue";
|
||||
export const routerArrays: Array<RouteConfigs> = [
|
||||
{
|
||||
path: "/welcome",
|
||||
@ -33,7 +32,7 @@ export type multiTagsType = {
|
||||
};
|
||||
|
||||
export type tagsViewsType = {
|
||||
icon: Component;
|
||||
icon: string;
|
||||
text: string;
|
||||
divided: boolean;
|
||||
disabled: boolean;
|
||||
|
||||
@ -45,8 +45,7 @@ html.dark {
|
||||
}
|
||||
|
||||
.arrow-left,
|
||||
.arrow-right,
|
||||
.right-button li {
|
||||
.arrow-right {
|
||||
border-right: 1px solid $border-style;
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,14 +15,6 @@ const steps = [
|
||||
position: "left"
|
||||
}
|
||||
},
|
||||
{
|
||||
element: "#header-screenfull",
|
||||
popover: {
|
||||
title: "全屏",
|
||||
description: "你可以在这里进行全屏切换",
|
||||
position: "left"
|
||||
}
|
||||
},
|
||||
{
|
||||
element: "#header-translation",
|
||||
popover: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user