feat(server): modularize backend and admin console
This commit is contained in:
@@ -0,0 +1,213 @@
|
||||
<script setup lang="ts">
|
||||
import LayFrame from "../lay-frame/index.vue";
|
||||
import LayFooter from "../lay-footer/index.vue";
|
||||
import { useTags } from "@/layout/hooks/useTag";
|
||||
import { useGlobal, isNumber } from "@pureadmin/utils";
|
||||
import BackTopIcon from "@/assets/svg/back_top.svg?component";
|
||||
import { h, computed, Transition, defineComponent } from "vue";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
|
||||
const props = defineProps({
|
||||
fixedHeader: Boolean
|
||||
});
|
||||
|
||||
const { showModel } = useTags();
|
||||
const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
|
||||
|
||||
const isKeepAlive = computed(() => {
|
||||
return $config?.KeepAlive;
|
||||
});
|
||||
|
||||
const transitions = computed(() => {
|
||||
return route => {
|
||||
return route.meta.transition;
|
||||
};
|
||||
});
|
||||
|
||||
const hideTabs = computed(() => {
|
||||
return $storage?.configure.hideTabs;
|
||||
});
|
||||
|
||||
const hideFooter = computed(() => {
|
||||
return $storage?.configure.hideFooter;
|
||||
});
|
||||
|
||||
const stretch = computed(() => {
|
||||
return $storage?.configure.stretch;
|
||||
});
|
||||
|
||||
const layout = computed(() => {
|
||||
return $storage?.layout.layout === "vertical";
|
||||
});
|
||||
|
||||
const getMainWidth = computed(() => {
|
||||
return isNumber(stretch.value)
|
||||
? stretch.value + "px"
|
||||
: stretch.value
|
||||
? "1440px"
|
||||
: "100%";
|
||||
});
|
||||
|
||||
const getSectionStyle = computed(() => {
|
||||
return [
|
||||
hideTabs.value && layout ? "padding-top: 48px;" : "",
|
||||
!hideTabs.value && layout
|
||||
? showModel.value == "chrome"
|
||||
? "padding-top: 85px;"
|
||||
: "padding-top: 81px;"
|
||||
: "",
|
||||
hideTabs.value && !layout.value ? "padding-top: 48px;" : "",
|
||||
!hideTabs.value && !layout.value
|
||||
? showModel.value == "chrome"
|
||||
? "padding-top: 85px;"
|
||||
: "padding-top: 81px;"
|
||||
: "",
|
||||
props.fixedHeader
|
||||
? ""
|
||||
: `padding-top: 0;${
|
||||
hideTabs.value
|
||||
? "min-height: calc(100vh - 48px);"
|
||||
: "min-height: calc(100vh - 86px);"
|
||||
}`
|
||||
];
|
||||
});
|
||||
|
||||
const transitionMain = defineComponent({
|
||||
props: {
|
||||
route: {
|
||||
type: undefined,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
render() {
|
||||
const transitionName =
|
||||
transitions.value(this.route)?.name || "fade-transform";
|
||||
const enterTransition = transitions.value(this.route)?.enterTransition;
|
||||
const leaveTransition = transitions.value(this.route)?.leaveTransition;
|
||||
return h(
|
||||
Transition,
|
||||
{
|
||||
name: enterTransition ? "pure-classes-transition" : transitionName,
|
||||
enterActiveClass: enterTransition
|
||||
? `animate__animated ${enterTransition}`
|
||||
: undefined,
|
||||
leaveActiveClass: leaveTransition
|
||||
? `animate__animated ${leaveTransition}`
|
||||
: undefined,
|
||||
mode: "out-in",
|
||||
appear: true
|
||||
},
|
||||
{
|
||||
default: () => [this.$slots.default()]
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section
|
||||
:class="[fixedHeader ? 'app-main' : 'app-main-nofixed-header']"
|
||||
:style="getSectionStyle"
|
||||
>
|
||||
<router-view>
|
||||
<template #default="{ Component, route }">
|
||||
<LayFrame :currComp="Component" :currRoute="route">
|
||||
<template #default="{ Comp, fullPath, frameInfo }">
|
||||
<el-scrollbar
|
||||
v-if="fixedHeader"
|
||||
:wrap-style="{
|
||||
display: 'flex',
|
||||
'flex-wrap': 'wrap',
|
||||
'max-width': getMainWidth,
|
||||
margin: '0 auto',
|
||||
transition: 'all 300ms cubic-bezier(0.4, 0, 0.2, 1)'
|
||||
}"
|
||||
:view-style="{
|
||||
display: 'flex',
|
||||
flex: 'auto',
|
||||
overflow: 'hidden',
|
||||
'flex-direction': 'column'
|
||||
}"
|
||||
>
|
||||
<el-backtop
|
||||
title="回到顶部"
|
||||
target=".app-main .el-scrollbar__wrap"
|
||||
>
|
||||
<BackTopIcon />
|
||||
</el-backtop>
|
||||
<div class="grow">
|
||||
<transitionMain :route="route">
|
||||
<keep-alive
|
||||
v-if="isKeepAlive"
|
||||
:include="usePermissionStoreHook().cachePageList"
|
||||
>
|
||||
<component
|
||||
:is="Comp"
|
||||
:key="fullPath"
|
||||
:frameInfo="frameInfo"
|
||||
class="main-content"
|
||||
/>
|
||||
</keep-alive>
|
||||
<component
|
||||
:is="Comp"
|
||||
v-else
|
||||
:key="fullPath"
|
||||
:frameInfo="frameInfo"
|
||||
class="main-content"
|
||||
/>
|
||||
</transitionMain>
|
||||
</div>
|
||||
<LayFooter v-if="!hideFooter" />
|
||||
</el-scrollbar>
|
||||
<div v-else class="grow">
|
||||
<transitionMain :route="route">
|
||||
<keep-alive
|
||||
v-if="isKeepAlive"
|
||||
:include="usePermissionStoreHook().cachePageList"
|
||||
>
|
||||
<component
|
||||
:is="Comp"
|
||||
:key="fullPath"
|
||||
:frameInfo="frameInfo"
|
||||
class="main-content"
|
||||
/>
|
||||
</keep-alive>
|
||||
<component
|
||||
:is="Comp"
|
||||
v-else
|
||||
:key="fullPath"
|
||||
:frameInfo="frameInfo"
|
||||
class="main-content"
|
||||
/>
|
||||
</transitionMain>
|
||||
</div>
|
||||
</template>
|
||||
</LayFrame>
|
||||
</template>
|
||||
</router-view>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<LayFooter v-if="!hideFooter && !fixedHeader" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.app-main {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.app-main-nofixed-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin: 24px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
import { getConfig } from "@/config";
|
||||
|
||||
const TITLE = getConfig("Title");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer
|
||||
class="layout-footer text-[rgba(0,0,0,0.6)] dark:text-[rgba(220,220,242,0.8)]"
|
||||
>
|
||||
{{ TITLE }}
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.layout-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 0 0 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,79 @@
|
||||
<script setup lang="ts">
|
||||
import { getConfig } from "@/config";
|
||||
import { useMultiFrame } from "@/layout/hooks/useMultiFrame";
|
||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||
import { type Component, shallowRef, watch, computed } from "vue";
|
||||
import { type RouteRecordRaw, RouteLocationNormalizedLoaded } from "vue-router";
|
||||
|
||||
const props = defineProps<{
|
||||
currRoute: RouteLocationNormalizedLoaded;
|
||||
currComp: Component;
|
||||
}>();
|
||||
|
||||
const compList = shallowRef([]);
|
||||
const { setMap, getMap, MAP, delMap } = useMultiFrame();
|
||||
|
||||
const keep = computed(() => {
|
||||
return (
|
||||
getConfig().KeepAlive &&
|
||||
props.currRoute.meta?.keepAlive &&
|
||||
!!props.currRoute.meta?.frameSrc
|
||||
);
|
||||
});
|
||||
// 避免重新渲染 LayFrame
|
||||
const normalComp = computed(() => !keep.value && props.currComp);
|
||||
|
||||
watch(useMultiTagsStoreHook().multiTags, (tags: any) => {
|
||||
if (!Array.isArray(tags) || !keep.value) {
|
||||
return;
|
||||
}
|
||||
const iframeTags = tags.filter(i => i.meta?.frameSrc);
|
||||
// tags必须是小于MAP，才是做了关闭动作，因为MAP插入的顺序在tags变化后发生
|
||||
if (iframeTags.length < MAP.size) {
|
||||
for (const i of MAP.keys()) {
|
||||
if (!tags.some(s => s.path === i)) {
|
||||
delMap(i);
|
||||
compList.value = getMap();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.currRoute.fullPath,
|
||||
path => {
|
||||
const multiTags = useMultiTagsStoreHook().multiTags as RouteRecordRaw[];
|
||||
const iframeTags = multiTags.filter(i => i.meta?.frameSrc);
|
||||
if (keep.value) {
|
||||
if (iframeTags.length !== MAP.size) {
|
||||
const sameKey = [...MAP.keys()].find(i => path === i);
|
||||
if (!sameKey) {
|
||||
// 添加缓存
|
||||
setMap(path, props.currComp);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (MAP.size > 0) {
|
||||
compList.value = getMap();
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<template v-for="[fullPath, Comp] in compList" :key="fullPath">
|
||||
<div v-show="fullPath === currRoute.fullPath" class="w-full h-full">
|
||||
<slot
|
||||
:fullPath="fullPath"
|
||||
:Comp="Comp"
|
||||
:frameInfo="{ frameSrc: currRoute.meta?.frameSrc, fullPath }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<div v-show="!keep" class="w-full h-full">
|
||||
<slot :Comp="normalComp" :fullPath="currRoute.fullPath" frameInfo />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,123 @@
|
||||
<script setup lang="ts">
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
import LaySearch from "../lay-search/index.vue";
|
||||
import LayNavMix from "../lay-sidebar/NavMix.vue";
|
||||
import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue";
|
||||
import LaySidebarBreadCrumb from "../lay-sidebar/components/SidebarBreadCrumb.vue";
|
||||
import LaySidebarTopCollapse from "../lay-sidebar/components/SidebarTopCollapse.vue";
|
||||
|
||||
import LogoutCircleRLine from "~icons/ri/logout-circle-r-line";
|
||||
|
||||
const {
|
||||
layout,
|
||||
device,
|
||||
logout,
|
||||
pureApp,
|
||||
username,
|
||||
userAvatar,
|
||||
avatarsStyle,
|
||||
toggleSideBar
|
||||
} = useNav();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="navbar bg-[#fff] shadow-xs shadow-[rgba(0,21,41,0.08)]">
|
||||
<LaySidebarTopCollapse
|
||||
v-if="device === 'mobile'"
|
||||
class="hamburger-container"
|
||||
:is-active="pureApp.sidebar.opened"
|
||||
@toggleClick="toggleSideBar"
|
||||
/>
|
||||
|
||||
<LaySidebarBreadCrumb
|
||||
v-if="layout !== 'mix' && device !== 'mobile'"
|
||||
class="breadcrumb-container"
|
||||
/>
|
||||
|
||||
<LayNavMix v-if="layout === 'mix'" />
|
||||
|
||||
<div v-if="layout === 'vertical'" class="vertical-header-right">
|
||||
<!-- 菜单搜索 -->
|
||||
<LaySearch id="header-search" />
|
||||
<!-- 全屏 -->
|
||||
<LaySidebarFullScreen id="full-screen" />
|
||||
<!-- 退出登录 -->
|
||||
<el-dropdown trigger="click">
|
||||
<span class="el-dropdown-link navbar-bg-hover select-none">
|
||||
<img :src="userAvatar" :style="avatarsStyle" />
|
||||
<p v-if="username" class="dark:text-white">{{ username }}</p>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="logout">
|
||||
<el-dropdown-item @click="logout">
|
||||
<IconifyIconOffline
|
||||
:icon="LogoutCircleRLine"
|
||||
style="margin: 5px"
|
||||
/>
|
||||
退出系统
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navbar {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
overflow: hidden;
|
||||
|
||||
.hamburger-container {
|
||||
float: left;
|
||||
height: 100%;
|
||||
line-height: 48px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vertical-header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
min-width: 220px;
|
||||
height: 48px;
|
||||
color: #000000d9;
|
||||
|
||||
.el-dropdown-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
height: 48px;
|
||||
padding: 10px;
|
||||
color: #000000d9;
|
||||
cursor: pointer;
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-container {
|
||||
float: left;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.logout {
|
||||
width: 120px;
|
||||
|
||||
::v-deep(.el-dropdown-menu__item) {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,61 @@
|
||||
<script setup lang="ts">
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
import MdiKeyboardEsc from "@/assets/svg/keyboard_esc.svg?component";
|
||||
import EnterOutlined from "@/assets/svg/enter_outlined.svg?component";
|
||||
import ArrowUpLine from "~icons/ri/arrow-up-line";
|
||||
import ArrowDownLine from "~icons/ri/arrow-down-line";
|
||||
|
||||
withDefaults(defineProps<{ total?: number }>(), {
|
||||
total: 0
|
||||
});
|
||||
|
||||
const { device } = useNav();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="search-footer text-[#333] dark:text-white">
|
||||
<span class="search-footer-item">
|
||||
<EnterOutlined class="icon" />
|
||||
确认
|
||||
</span>
|
||||
<span class="search-footer-item">
|
||||
<IconifyIconOffline :icon="ArrowUpLine" class="icon" />
|
||||
<IconifyIconOffline :icon="ArrowDownLine" class="icon" />
|
||||
切换
|
||||
</span>
|
||||
<span class="search-footer-item">
|
||||
<MdiKeyboardEsc class="icon" />
|
||||
关闭
|
||||
</span>
|
||||
<p v-if="device !== 'mobile' && total > 0" class="search-footer-total">
|
||||
{{ `共 ${total} 项` }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-footer {
|
||||
display: flex;
|
||||
|
||||
.search-footer-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding: 2px;
|
||||
margin-right: 3px;
|
||||
font-size: 20px;
|
||||
box-shadow:
|
||||
inset 0 -2px #cdcde6,
|
||||
inset 0 0 1px 1px #fff,
|
||||
0 1px 2px 1px #1e235a66;
|
||||
}
|
||||
|
||||
.search-footer-total {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,198 @@
|
||||
<script setup lang="ts">
|
||||
import Sortable from "sortablejs";
|
||||
import SearchHistoryItem from "./SearchHistoryItem.vue";
|
||||
import type { optionsItem, dragItem, Props } from "../types";
|
||||
import { useEpThemeStoreHook } from "@/store/modules/epTheme";
|
||||
import { useResizeObserver, isArray, delay } from "@pureadmin/utils";
|
||||
import { ref, watch, nextTick, computed, getCurrentInstance } from "vue";
|
||||
|
||||
interface Emits {
|
||||
(e: "update:value", val: string): void;
|
||||
(e: "enter"): void;
|
||||
(e: "collect", val: optionsItem): void;
|
||||
(e: "delete", val: optionsItem): void;
|
||||
(e: "drag", val: dragItem): void;
|
||||
}
|
||||
|
||||
const historyRef = ref();
|
||||
const innerHeight = ref();
|
||||
/** 判断是否停止鼠标移入事件处理 */
|
||||
const stopMouseEvent = ref(false);
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
const instance = getCurrentInstance()!;
|
||||
const props = withDefaults(defineProps<Props>(), {});
|
||||
|
||||
const itemStyle = computed(() => {
|
||||
return item => {
|
||||
return {
|
||||
background:
|
||||
item?.path === active.value ? useEpThemeStoreHook().epThemeColor : "",
|
||||
color: item.path === active.value ? "#fff" : "",
|
||||
fontSize: item.path === active.value ? "16px" : "14px"
|
||||
};
|
||||
};
|
||||
});
|
||||
|
||||
const titleStyle = computed(() => {
|
||||
return {
|
||||
color: useEpThemeStoreHook().epThemeColor,
|
||||
fontWeight: 500
|
||||
};
|
||||
});
|
||||
|
||||
const active = computed({
|
||||
get() {
|
||||
return props.value;
|
||||
},
|
||||
set(val: string) {
|
||||
emit("update:value", val);
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
newValue => {
|
||||
if (newValue) {
|
||||
if (stopMouseEvent.value) {
|
||||
delay(100).then(() => (stopMouseEvent.value = false));
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const historyList = computed(() => {
|
||||
return props.options.filter(item => item.type === "history");
|
||||
});
|
||||
|
||||
const collectList = computed(() => {
|
||||
return props.options.filter(item => item.type === "collect");
|
||||
});
|
||||
|
||||
function handleCollect(item) {
|
||||
emit("collect", item);
|
||||
}
|
||||
|
||||
function handleDelete(item) {
|
||||
stopMouseEvent.value = true;
|
||||
emit("delete", item);
|
||||
}
|
||||
|
||||
/** 鼠标移入 */
|
||||
async function handleMouse(item) {
|
||||
if (!stopMouseEvent.value) active.value = item.path;
|
||||
}
|
||||
|
||||
function handleTo() {
|
||||
emit("enter");
|
||||
}
|
||||
|
||||
function resizeResult() {
|
||||
// el-scrollbar max-height="calc(90vh - 140px)"
|
||||
innerHeight.value = window.innerHeight - window.innerHeight / 10 - 140;
|
||||
}
|
||||
|
||||
useResizeObserver(historyRef, resizeResult);
|
||||
|
||||
function handleScroll(index: number) {
|
||||
const curInstance = instance?.proxy?.$refs[`historyItemRef${index}`];
|
||||
if (!curInstance) return 0;
|
||||
const curRef = isArray(curInstance)
|
||||
? (curInstance[0] as ElRef)
|
||||
: (curInstance as ElRef);
|
||||
const scrollTop = curRef.offsetTop + 128; // 128 两个history-item（56px+56px=112px）高度加上下margin（8px+8px=16px）
|
||||
return scrollTop > innerHeight.value ? scrollTop - innerHeight.value : 0;
|
||||
}
|
||||
|
||||
const handleChangeIndex = (evt): void => {
|
||||
emit("drag", { oldIndex: evt.oldIndex, newIndex: evt.newIndex });
|
||||
};
|
||||
|
||||
let sortableInstance = null;
|
||||
|
||||
watch(
|
||||
collectList,
|
||||
val => {
|
||||
if (val.length > 1) {
|
||||
nextTick(() => {
|
||||
const wrapper: HTMLElement =
|
||||
document.querySelector(".collect-container");
|
||||
if (!wrapper || sortableInstance) return;
|
||||
sortableInstance = Sortable.create(wrapper, {
|
||||
animation: 160,
|
||||
onStart: event => {
|
||||
event.item.style.cursor = "move";
|
||||
},
|
||||
onEnd: event => {
|
||||
event.item.style.cursor = "pointer";
|
||||
},
|
||||
onUpdate: handleChangeIndex
|
||||
});
|
||||
resizeResult();
|
||||
});
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
defineExpose({ handleScroll });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="historyRef" class="history">
|
||||
<template v-if="historyList.length">
|
||||
<div :style="titleStyle">搜索历史</div>
|
||||
<div
|
||||
v-for="(item, index) in historyList"
|
||||
:key="item.path"
|
||||
:ref="'historyItemRef' + index"
|
||||
class="history-item dark:bg-[#1d1d1d]"
|
||||
:style="itemStyle(item)"
|
||||
@click="handleTo"
|
||||
@mouseenter="handleMouse(item)"
|
||||
>
|
||||
<SearchHistoryItem
|
||||
:item="item"
|
||||
@delete-item="handleDelete"
|
||||
@collect-item="handleCollect"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="collectList.length">
|
||||
<div :style="titleStyle">
|
||||
{{ `收藏${collectList.length > 1 ? "（可拖拽排序）" : ""}` }}
|
||||
</div>
|
||||
<div class="collect-container">
|
||||
<div
|
||||
v-for="(item, index) in collectList"
|
||||
:key="item.path"
|
||||
:ref="'historyItemRef' + (index + historyList.length)"
|
||||
class="history-item dark:bg-[#1d1d1d]"
|
||||
:style="itemStyle(item)"
|
||||
@click="handleTo"
|
||||
@mouseenter="handleMouse(item)"
|
||||
>
|
||||
<SearchHistoryItem :item="item" @delete-item="handleDelete" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.history {
|
||||
padding-bottom: 12px;
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 56px;
|
||||
padding: 14px;
|
||||
margin: 8px auto 10px;
|
||||
cursor: pointer;
|
||||
border: 0.1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
transition: font-size 0.16s;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,52 @@
|
||||
<script setup lang="ts">
|
||||
import type { optionsItem } from "../types";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import StarIcon from "~icons/ep/star";
|
||||
import CloseIcon from "~icons/ep/close";
|
||||
|
||||
interface Props {
|
||||
item: optionsItem;
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: "collectItem", val: optionsItem): void;
|
||||
(e: "deleteItem", val: optionsItem): void;
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
withDefaults(defineProps<Props>(), {});
|
||||
|
||||
function handleCollect(item) {
|
||||
emit("collectItem", item);
|
||||
}
|
||||
|
||||
function handleDelete(item) {
|
||||
emit("deleteItem", item);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="useRenderIcon(item.meta?.icon)" />
|
||||
<span class="history-item-title">
|
||||
{{ item.meta?.title }}
|
||||
</span>
|
||||
<IconifyIconOffline
|
||||
v-show="item.type === 'history'"
|
||||
:icon="StarIcon"
|
||||
class="w-[18px] h-[18px] mr-2 hover:text-[#d7d5d4]"
|
||||
@click.stop="handleCollect(item)"
|
||||
/>
|
||||
<IconifyIconOffline
|
||||
:icon="CloseIcon"
|
||||
class="w-[18px] h-[18px] hover:text-[#d7d5d4] cursor-pointer"
|
||||
@click.stop="handleDelete(item)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.history-item-title {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
margin-left: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,334 @@
|
||||
<script setup lang="ts">
|
||||
import { match } from "pinyin-pro";
|
||||
import { getConfig } from "@/config";
|
||||
import { useRouter } from "vue-router";
|
||||
import SearchResult from "./SearchResult.vue";
|
||||
import SearchFooter from "./SearchFooter.vue";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
import SearchHistory from "./SearchHistory.vue";
|
||||
import type { optionsItem, dragItem } from "../types";
|
||||
import { ref, computed, shallowRef, watch } from "vue";
|
||||
import { useDebounceFn, onKeyStroke } from "@vueuse/core";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
import { cloneDeep, isAllEmpty, storageLocal } from "@pureadmin/utils";
|
||||
import SearchIcon from "~icons/ri/search-line";
|
||||
|
||||
interface Props {
|
||||
/** 弹窗显隐 */
|
||||
value: boolean;
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: "update:value", val: boolean): void;
|
||||
}
|
||||
|
||||
const { device } = useNav();
|
||||
const emit = defineEmits<Emits>();
|
||||
const props = withDefaults(defineProps<Props>(), {});
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const HISTORY_TYPE = "history";
|
||||
const COLLECT_TYPE = "collect";
|
||||
const LOCALEHISTORYKEY = "menu-search-history";
|
||||
const LOCALECOLLECTKEY = "menu-search-collect";
|
||||
|
||||
const keyword = ref("");
|
||||
const resultRef = ref();
|
||||
const historyRef = ref();
|
||||
const scrollbarRef = ref();
|
||||
const activePath = ref("");
|
||||
const historyPath = ref("");
|
||||
const resultOptions = shallowRef([]);
|
||||
const historyOptions = shallowRef([]);
|
||||
const handleSearch = useDebounceFn(search, 300);
|
||||
const historyNum = getConfig().MenuSearchHistory;
|
||||
const inputRef = ref<HTMLInputElement | null>(null);
|
||||
|
||||
/** 菜单树形结构 */
|
||||
const menusData = computed(() => {
|
||||
return cloneDeep(usePermissionStoreHook().wholeMenus);
|
||||
});
|
||||
|
||||
const show = computed({
|
||||
get() {
|
||||
return props.value;
|
||||
},
|
||||
set(val: boolean) {
|
||||
emit("update:value", val);
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
newValue => {
|
||||
if (newValue) getHistory();
|
||||
}
|
||||
);
|
||||
|
||||
const showSearchResult = computed(() => {
|
||||
return keyword.value && resultOptions.value.length > 0;
|
||||
});
|
||||
|
||||
const showSearchHistory = computed(() => {
|
||||
return !keyword.value && historyOptions.value.length > 0;
|
||||
});
|
||||
|
||||
const showEmpty = computed(() => {
|
||||
return (
|
||||
(!keyword.value && historyOptions.value.length === 0) ||
|
||||
(keyword.value && resultOptions.value.length === 0)
|
||||
);
|
||||
});
|
||||
|
||||
function getStorageItem(key) {
|
||||
return storageLocal().getItem<optionsItem[]>(key) || [];
|
||||
}
|
||||
|
||||
function setStorageItem(key, value) {
|
||||
storageLocal().setItem(key, value);
|
||||
}
|
||||
|
||||
/** 将菜单树形结构扁平化为一维数组，用于菜单查询 */
|
||||
function flatTree(arr) {
|
||||
const res = [];
|
||||
function deep(arr) {
|
||||
arr.forEach(item => {
|
||||
res.push(item);
|
||||
item.children && deep(item.children);
|
||||
});
|
||||
}
|
||||
deep(arr);
|
||||
return res;
|
||||
}
|
||||
|
||||
/** 查询 */
|
||||
function search() {
|
||||
const flatMenusData = flatTree(menusData.value);
|
||||
resultOptions.value = flatMenusData.filter(menu =>
|
||||
keyword.value
|
||||
? menu.meta?.title
|
||||
.toLocaleLowerCase()
|
||||
.includes(keyword.value.toLocaleLowerCase().trim()) ||
|
||||
!isAllEmpty(
|
||||
match(
|
||||
menu.meta?.title.toLocaleLowerCase(),
|
||||
keyword.value.toLocaleLowerCase().trim()
|
||||
)
|
||||
)
|
||||
: false
|
||||
);
|
||||
activePath.value =
|
||||
resultOptions.value?.length > 0 ? resultOptions.value[0].path : "";
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
show.value = false;
|
||||
/** 延时处理防止用户看到某些操作 */
|
||||
setTimeout(() => {
|
||||
resultOptions.value = [];
|
||||
historyPath.value = "";
|
||||
keyword.value = "";
|
||||
}, 200);
|
||||
}
|
||||
|
||||
function scrollTo(index) {
|
||||
const ref = resultOptions.value.length ? resultRef.value : historyRef.value;
|
||||
const scrollTop = ref.handleScroll(index);
|
||||
scrollbarRef.value.setScrollTop(scrollTop);
|
||||
}
|
||||
|
||||
/** 获取当前选项和路径 */
|
||||
function getCurrentOptionsAndPath() {
|
||||
const isResultOptions = resultOptions.value.length > 0;
|
||||
const options = isResultOptions ? resultOptions.value : historyOptions.value;
|
||||
const currentPath = isResultOptions ? activePath.value : historyPath.value;
|
||||
return { options, currentPath, isResultOptions };
|
||||
}
|
||||
|
||||
/** 更新路径并滚动到指定项 */
|
||||
function updatePathAndScroll(newIndex, isResultOptions) {
|
||||
if (isResultOptions) {
|
||||
activePath.value = resultOptions.value[newIndex].path;
|
||||
} else {
|
||||
historyPath.value = historyOptions.value[newIndex].path;
|
||||
}
|
||||
scrollTo(newIndex);
|
||||
}
|
||||
|
||||
/** key up */
|
||||
function handleUp() {
|
||||
const { options, currentPath, isResultOptions } = getCurrentOptionsAndPath();
|
||||
if (options.length === 0) return;
|
||||
const index = options.findIndex(item => item.path === currentPath);
|
||||
const prevIndex = (index - 1 + options.length) % options.length;
|
||||
updatePathAndScroll(prevIndex, isResultOptions);
|
||||
}
|
||||
|
||||
/** key down */
|
||||
function handleDown() {
|
||||
const { options, currentPath, isResultOptions } = getCurrentOptionsAndPath();
|
||||
if (options.length === 0) return;
|
||||
const index = options.findIndex(item => item.path === currentPath);
|
||||
const nextIndex = (index + 1) % options.length;
|
||||
updatePathAndScroll(nextIndex, isResultOptions);
|
||||
}
|
||||
|
||||
/** key enter */
|
||||
function handleEnter() {
|
||||
const { options, currentPath, isResultOptions } = getCurrentOptionsAndPath();
|
||||
if (options.length === 0 || currentPath === "") return;
|
||||
const index = options.findIndex(item => item.path === currentPath);
|
||||
if (index === -1) return;
|
||||
if (isResultOptions) {
|
||||
saveHistory();
|
||||
} else {
|
||||
updateHistory();
|
||||
}
|
||||
router.push(options[index].path);
|
||||
handleClose();
|
||||
}
|
||||
|
||||
/** 删除历史记录 */
|
||||
function handleDelete(item) {
|
||||
const key = item.type === HISTORY_TYPE ? LOCALEHISTORYKEY : LOCALECOLLECTKEY;
|
||||
let list = getStorageItem(key);
|
||||
list = list.filter(listItem => listItem.path !== item.path);
|
||||
setStorageItem(key, list);
|
||||
getHistory();
|
||||
}
|
||||
|
||||
/** 收藏历史记录 */
|
||||
function handleCollect(item) {
|
||||
let searchHistoryList = getStorageItem(LOCALEHISTORYKEY);
|
||||
let searchCollectList = getStorageItem(LOCALECOLLECTKEY);
|
||||
searchHistoryList = searchHistoryList.filter(
|
||||
historyItem => historyItem.path !== item.path
|
||||
);
|
||||
setStorageItem(LOCALEHISTORYKEY, searchHistoryList);
|
||||
if (!searchCollectList.some(collectItem => collectItem.path === item.path)) {
|
||||
searchCollectList.unshift({ ...item, type: COLLECT_TYPE });
|
||||
setStorageItem(LOCALECOLLECTKEY, searchCollectList);
|
||||
}
|
||||
getHistory();
|
||||
}
|
||||
|
||||
/** 存储搜索记录 */
|
||||
function saveHistory() {
|
||||
const { path, meta } = resultOptions.value.find(
|
||||
item => item.path === activePath.value
|
||||
);
|
||||
const searchHistoryList = getStorageItem(LOCALEHISTORYKEY);
|
||||
const searchCollectList = getStorageItem(LOCALECOLLECTKEY);
|
||||
const isCollected = searchCollectList.some(item => item.path === path);
|
||||
const existingIndex = searchHistoryList.findIndex(item => item.path === path);
|
||||
if (!isCollected) {
|
||||
if (existingIndex !== -1) searchHistoryList.splice(existingIndex, 1);
|
||||
if (searchHistoryList.length >= historyNum) searchHistoryList.pop();
|
||||
searchHistoryList.unshift({ path, meta, type: HISTORY_TYPE });
|
||||
storageLocal().setItem(LOCALEHISTORYKEY, searchHistoryList);
|
||||
}
|
||||
}
|
||||
|
||||
/** 更新存储的搜索记录 */
|
||||
function updateHistory() {
|
||||
let searchHistoryList = getStorageItem(LOCALEHISTORYKEY);
|
||||
const historyIndex = searchHistoryList.findIndex(
|
||||
item => item.path === historyPath.value
|
||||
);
|
||||
if (historyIndex !== -1) {
|
||||
const [historyItem] = searchHistoryList.splice(historyIndex, 1);
|
||||
searchHistoryList.unshift(historyItem);
|
||||
setStorageItem(LOCALEHISTORYKEY, searchHistoryList);
|
||||
}
|
||||
}
|
||||
|
||||
/** 获取本地历史记录 */
|
||||
function getHistory() {
|
||||
const searchHistoryList = getStorageItem(LOCALEHISTORYKEY);
|
||||
const searchCollectList = getStorageItem(LOCALECOLLECTKEY);
|
||||
historyOptions.value = [...searchHistoryList, ...searchCollectList];
|
||||
historyPath.value = historyOptions.value[0]?.path;
|
||||
}
|
||||
|
||||
/** 拖拽改变收藏顺序 */
|
||||
function handleDrag(item: dragItem) {
|
||||
const searchCollectList = getStorageItem(LOCALECOLLECTKEY);
|
||||
const [reorderedItem] = searchCollectList.splice(item.oldIndex, 1);
|
||||
searchCollectList.splice(item.newIndex, 0, reorderedItem);
|
||||
storageLocal().setItem(LOCALECOLLECTKEY, searchCollectList);
|
||||
historyOptions.value = [
|
||||
...getStorageItem(LOCALEHISTORYKEY),
|
||||
...getStorageItem(LOCALECOLLECTKEY)
|
||||
];
|
||||
historyPath.value = reorderedItem.path;
|
||||
}
|
||||
|
||||
onKeyStroke("Enter", handleEnter);
|
||||
onKeyStroke("ArrowUp", handleUp);
|
||||
onKeyStroke("ArrowDown", handleDown);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="show"
|
||||
top="5vh"
|
||||
class="pure-search-dialog"
|
||||
:show-close="false"
|
||||
:width="device === 'mobile' ? '80vw' : '40vw'"
|
||||
:before-close="handleClose"
|
||||
:style="{
|
||||
borderRadius: '6px'
|
||||
}"
|
||||
append-to-body
|
||||
@opened="inputRef.focus()"
|
||||
@closed="inputRef.blur()"
|
||||
>
|
||||
<el-input
|
||||
ref="inputRef"
|
||||
v-model="keyword"
|
||||
size="large"
|
||||
clearable
|
||||
placeholder="搜索菜单（支持拼音搜索）"
|
||||
@input="handleSearch"
|
||||
>
|
||||
<template #prefix>
|
||||
<IconifyIconOffline
|
||||
:icon="SearchIcon"
|
||||
class="text-primary w-[24px] h-[24px]"
|
||||
/>
|
||||
</template>
|
||||
</el-input>
|
||||
<div class="search-content">
|
||||
<el-scrollbar ref="scrollbarRef" max-height="calc(90vh - 140px)">
|
||||
<el-empty v-if="showEmpty" description="暂无搜索结果" />
|
||||
<SearchHistory
|
||||
v-if="showSearchHistory"
|
||||
ref="historyRef"
|
||||
v-model:value="historyPath"
|
||||
:options="historyOptions"
|
||||
@click="handleEnter"
|
||||
@delete="handleDelete"
|
||||
@collect="handleCollect"
|
||||
@drag="handleDrag"
|
||||
/>
|
||||
<SearchResult
|
||||
v-if="showSearchResult"
|
||||
ref="resultRef"
|
||||
v-model:value="activePath"
|
||||
:options="resultOptions"
|
||||
@click="handleEnter"
|
||||
/>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<template #footer>
|
||||
<SearchFooter :total="resultOptions.length" />
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-content {
|
||||
margin-top: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,113 @@
|
||||
<script setup lang="ts">
|
||||
import type { Props } from "../types";
|
||||
import { useResizeObserver } from "@pureadmin/utils";
|
||||
import { useEpThemeStoreHook } from "@/store/modules/epTheme";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { ref, computed, getCurrentInstance, onMounted } from "vue";
|
||||
import EnterOutlined from "@/assets/svg/enter_outlined.svg?component";
|
||||
|
||||
interface Emits {
|
||||
(e: "update:value", val: string): void;
|
||||
(e: "enter"): void;
|
||||
}
|
||||
|
||||
const resultRef = ref();
|
||||
const innerHeight = ref();
|
||||
const emit = defineEmits<Emits>();
|
||||
const instance = getCurrentInstance()!;
|
||||
const props = withDefaults(defineProps<Props>(), {});
|
||||
|
||||
const itemStyle = computed(() => {
|
||||
return item => {
|
||||
return {
|
||||
background:
|
||||
item?.path === active.value ? useEpThemeStoreHook().epThemeColor : "",
|
||||
color: item.path === active.value ? "#fff" : "",
|
||||
fontSize: item.path === active.value ? "16px" : "14px"
|
||||
};
|
||||
};
|
||||
});
|
||||
|
||||
const active = computed({
|
||||
get() {
|
||||
return props.value;
|
||||
},
|
||||
set(val: string) {
|
||||
emit("update:value", val);
|
||||
}
|
||||
});
|
||||
|
||||
/** 鼠标移入 */
|
||||
async function handleMouse(item) {
|
||||
active.value = item.path;
|
||||
}
|
||||
|
||||
function handleTo() {
|
||||
emit("enter");
|
||||
}
|
||||
|
||||
function resizeResult() {
|
||||
// el-scrollbar max-height="calc(90vh - 140px)"
|
||||
innerHeight.value = window.innerHeight - window.innerHeight / 10 - 140;
|
||||
}
|
||||
|
||||
useResizeObserver(resultRef, resizeResult);
|
||||
|
||||
function handleScroll(index: number) {
|
||||
const curInstance = instance?.proxy?.$refs[`resultItemRef${index}`];
|
||||
if (!curInstance) return 0;
|
||||
const curRef = curInstance[0] as ElRef;
|
||||
const scrollTop = curRef.offsetTop + 128; // 128 两个result-item（56px+56px=112px）高度加上下margin（8px+8px=16px）
|
||||
return scrollTop > innerHeight.value ? scrollTop - innerHeight.value : 0;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
resizeResult();
|
||||
});
|
||||
|
||||
defineExpose({ handleScroll });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="resultRef" class="result">
|
||||
<div
|
||||
v-for="(item, index) in options"
|
||||
:key="item.path"
|
||||
:ref="'resultItemRef' + index"
|
||||
class="result-item dark:bg-[#1d1d1d]"
|
||||
:style="itemStyle(item)"
|
||||
@click="handleTo"
|
||||
@mouseenter="handleMouse(item)"
|
||||
>
|
||||
<component :is="useRenderIcon(item.meta?.icon)" />
|
||||
<span class="result-item-title">
|
||||
{{ item.meta?.title }}
|
||||
</span>
|
||||
<EnterOutlined />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.result {
|
||||
padding-bottom: 12px;
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 56px;
|
||||
padding: 14px;
|
||||
margin-top: 8px;
|
||||
cursor: pointer;
|
||||
border: 0.1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
transition: font-size 0.16s;
|
||||
|
||||
&-title {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { useBoolean } from "../../hooks/useBoolean";
|
||||
import SearchModal from "./components/SearchModal.vue";
|
||||
|
||||
const { bool: show, toggle } = useBoolean();
|
||||
function handleSearch() {
|
||||
toggle();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover"
|
||||
@click="handleSearch"
|
||||
>
|
||||
<IconifyIconOffline icon="ri/search-line" />
|
||||
</div>
|
||||
<SearchModal v-model:value="show" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,20 @@
|
||||
interface optionsItem {
|
||||
path: string;
|
||||
type: "history" | "collect";
|
||||
meta: {
|
||||
icon?: string;
|
||||
title?: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface dragItem {
|
||||
oldIndex: number;
|
||||
newIndex: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
value: string;
|
||||
options: Array<optionsItem>;
|
||||
}
|
||||
|
||||
export type { optionsItem, dragItem, Props };
|
||||
@@ -0,0 +1,111 @@
|
||||
<script setup lang="ts">
|
||||
import { emitter } from "@/utils/mitt";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
import LaySearch from "../lay-search/index.vue";
|
||||
import { responsiveStorageNameSpace } from "@/config";
|
||||
import { ref, nextTick, computed, onMounted } from "vue";
|
||||
import { storageLocal, isAllEmpty } from "@pureadmin/utils";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
import LaySidebarItem from "../lay-sidebar/components/SidebarItem.vue";
|
||||
import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue";
|
||||
|
||||
import LogoutCircleRLine from "~icons/ri/logout-circle-r-line";
|
||||
|
||||
const menuRef = ref();
|
||||
const showLogo = ref(
|
||||
storageLocal().getItem<StorageConfigs>(
|
||||
`${responsiveStorageNameSpace()}configure`
|
||||
)?.showLogo ?? true
|
||||
);
|
||||
|
||||
const {
|
||||
route,
|
||||
title,
|
||||
logout,
|
||||
getLogo,
|
||||
username,
|
||||
userAvatar,
|
||||
backTopMenu,
|
||||
avatarsStyle
|
||||
} = useNav();
|
||||
|
||||
const defaultActive = computed(() =>
|
||||
!isAllEmpty(route.meta?.activePath) ? route.meta.activePath : route.path
|
||||
);
|
||||
|
||||
nextTick(() => {
|
||||
menuRef.value?.handleResize();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
emitter.on("logoChange", key => {
|
||||
showLogo.value = key;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-loading="usePermissionStoreHook().wholeMenus.length === 0"
|
||||
class="horizontal-header"
|
||||
>
|
||||
<div v-if="showLogo" class="horizontal-header-left" @click="backTopMenu">
|
||||
<img :src="getLogo()" alt="logo" />
|
||||
<span>{{ title }}</span>
|
||||
</div>
|
||||
<el-menu
|
||||
ref="menuRef"
|
||||
mode="horizontal"
|
||||
popper-class="pure-scrollbar"
|
||||
class="horizontal-header-menu"
|
||||
:default-active="defaultActive"
|
||||
>
|
||||
<LaySidebarItem
|
||||
v-for="route in usePermissionStoreHook().wholeMenus"
|
||||
:key="route.path"
|
||||
:item="route"
|
||||
:base-path="route.path"
|
||||
/>
|
||||
</el-menu>
|
||||
<div class="horizontal-header-right">
|
||||
<!-- 菜单搜索 -->
|
||||
<LaySearch id="header-search" />
|
||||
<!-- 全屏 -->
|
||||
<LaySidebarFullScreen id="full-screen" />
|
||||
<!-- 退出登录 -->
|
||||
<el-dropdown trigger="click">
|
||||
<span class="el-dropdown-link navbar-bg-hover">
|
||||
<img :src="userAvatar" :style="avatarsStyle" />
|
||||
<p v-if="username" class="dark:text-white">{{ username }}</p>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="logout">
|
||||
<el-dropdown-item @click="logout">
|
||||
<IconifyIconOffline
|
||||
:icon="LogoutCircleRLine"
|
||||
style="margin: 5px"
|
||||
/>
|
||||
退出系统
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-loading-mask) {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.logout {
|
||||
width: 120px;
|
||||
|
||||
::v-deep(.el-dropdown-menu__item) {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,131 @@
|
||||
<script setup lang="ts">
|
||||
import { isAllEmpty } from "@pureadmin/utils";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
import LaySearch from "../lay-search/index.vue";
|
||||
import { ref, toRaw, watch, onMounted, nextTick } from "vue";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { getParentPaths, findRouteByPath } from "@/router/utils";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
import LaySidebarExtraIcon from "../lay-sidebar/components/SidebarExtraIcon.vue";
|
||||
import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue";
|
||||
|
||||
import LogoutCircleRLine from "~icons/ri/logout-circle-r-line";
|
||||
|
||||
const menuRef = ref();
|
||||
const defaultActive = ref(null);
|
||||
|
||||
const {
|
||||
route,
|
||||
device,
|
||||
logout,
|
||||
resolvePath,
|
||||
username,
|
||||
userAvatar,
|
||||
getDivStyle,
|
||||
avatarsStyle
|
||||
} = useNav();
|
||||
|
||||
function getDefaultActive(routePath) {
|
||||
const wholeMenus = usePermissionStoreHook().wholeMenus;
|
||||
/** 当前路由的父级路径 */
|
||||
const parentRoutes = getParentPaths(routePath, wholeMenus)[0];
|
||||
defaultActive.value = !isAllEmpty(route.meta?.activePath)
|
||||
? route.meta.activePath
|
||||
: findRouteByPath(parentRoutes, wholeMenus)?.children[0]?.path;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getDefaultActive(route.path);
|
||||
});
|
||||
|
||||
nextTick(() => {
|
||||
menuRef.value?.handleResize();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => [route.path, usePermissionStoreHook().wholeMenus],
|
||||
() => {
|
||||
getDefaultActive(route.path);
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="device !== 'mobile'"
|
||||
v-loading="usePermissionStoreHook().wholeMenus.length === 0"
|
||||
class="horizontal-header"
|
||||
>
|
||||
<el-menu
|
||||
ref="menuRef"
|
||||
router
|
||||
mode="horizontal"
|
||||
popper-class="pure-scrollbar"
|
||||
class="horizontal-header-menu"
|
||||
:default-active="defaultActive"
|
||||
>
|
||||
<el-menu-item
|
||||
v-for="route in usePermissionStoreHook().wholeMenus"
|
||||
:key="route.path"
|
||||
:index="resolvePath(route) || route.redirect"
|
||||
>
|
||||
<template #title>
|
||||
<div
|
||||
v-if="toRaw(route.meta.icon)"
|
||||
:class="['sub-menu-icon', route.meta.icon]"
|
||||
>
|
||||
<component
|
||||
:is="useRenderIcon(route.meta && toRaw(route.meta.icon))"
|
||||
/>
|
||||
</div>
|
||||
<div :style="getDivStyle">
|
||||
<span class="select-none">
|
||||
{{ route.meta.title }}
|
||||
</span>
|
||||
<LaySidebarExtraIcon :extraIcon="route.meta.extraIcon" />
|
||||
</div>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
<div class="horizontal-header-right">
|
||||
<!-- 菜单搜索 -->
|
||||
<LaySearch id="header-search" />
|
||||
<!-- 全屏 -->
|
||||
<LaySidebarFullScreen id="full-screen" />
|
||||
<!-- 退出登录 -->
|
||||
<el-dropdown trigger="click">
|
||||
<span class="el-dropdown-link navbar-bg-hover select-none">
|
||||
<img :src="userAvatar" :style="avatarsStyle" />
|
||||
<p v-if="username" class="dark:text-white">{{ username }}</p>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="logout">
|
||||
<el-dropdown-item @click="logout">
|
||||
<IconifyIconOffline
|
||||
:icon="LogoutCircleRLine"
|
||||
style="margin: 5px"
|
||||
/>
|
||||
退出系统
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-loading-mask) {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.logout {
|
||||
width: 120px;
|
||||
|
||||
::v-deep(.el-dropdown-menu__item) {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,137 @@
|
||||
<script setup lang="ts">
|
||||
import { useRoute } from "vue-router";
|
||||
import { emitter } from "@/utils/mitt";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
import { responsiveStorageNameSpace } from "@/config";
|
||||
import { storageLocal, isAllEmpty } from "@pureadmin/utils";
|
||||
import { findRouteByPath, getParentPaths } from "@/router/utils";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
|
||||
import LaySidebarLogo from "../lay-sidebar/components/SidebarLogo.vue";
|
||||
import LaySidebarItem from "../lay-sidebar/components/SidebarItem.vue";
|
||||
import LaySidebarLeftCollapse from "../lay-sidebar/components/SidebarLeftCollapse.vue";
|
||||
import LaySidebarCenterCollapse from "../lay-sidebar/components/SidebarCenterCollapse.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const isShow = ref(false);
|
||||
const showLogo = ref(
|
||||
storageLocal().getItem<StorageConfigs>(
|
||||
`${responsiveStorageNameSpace()}configure`
|
||||
)?.showLogo ?? true
|
||||
);
|
||||
|
||||
const {
|
||||
device,
|
||||
pureApp,
|
||||
isCollapse,
|
||||
tooltipEffect,
|
||||
menuSelect,
|
||||
toggleSideBar
|
||||
} = useNav();
|
||||
|
||||
const subMenuData = ref([]);
|
||||
|
||||
const menuData = computed(() => {
|
||||
return pureApp.layout === "mix" && device.value !== "mobile"
|
||||
? subMenuData.value
|
||||
: usePermissionStoreHook().wholeMenus;
|
||||
});
|
||||
|
||||
const loading = computed(() =>
|
||||
pureApp.layout === "mix" ? false : menuData.value.length === 0 ? true : false
|
||||
);
|
||||
|
||||
const defaultActive = computed(() =>
|
||||
!isAllEmpty(route.meta?.activePath) ? route.meta.activePath : route.path
|
||||
);
|
||||
|
||||
function getSubMenuData() {
|
||||
let path = "";
|
||||
path = defaultActive.value;
|
||||
subMenuData.value = [];
|
||||
// path的上级路由组成的数组
|
||||
const parentPathArr = getParentPaths(
|
||||
path,
|
||||
usePermissionStoreHook().wholeMenus
|
||||
);
|
||||
// 当前路由的父级路由信息
|
||||
const parenetRoute = findRouteByPath(
|
||||
parentPathArr[0] || path,
|
||||
usePermissionStoreHook().wholeMenus
|
||||
);
|
||||
if (!parenetRoute?.children) return;
|
||||
subMenuData.value = parenetRoute?.children;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => [route.path, usePermissionStoreHook().wholeMenus],
|
||||
() => {
|
||||
if (route.path.includes("/redirect")) return;
|
||||
getSubMenuData();
|
||||
menuSelect(route.path);
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
getSubMenuData();
|
||||
|
||||
emitter.on("logoChange", key => {
|
||||
showLogo.value = key;
|
||||
});
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// 解绑`logoChange`公共事件，防止多次触发
|
||||
emitter.off("logoChange");
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-loading="loading"
|
||||
:class="['sidebar-container', showLogo ? 'has-logo' : 'no-logo']"
|
||||
@mouseenter.prevent="isShow = true"
|
||||
@mouseleave.prevent="isShow = false"
|
||||
>
|
||||
<LaySidebarLogo v-if="showLogo" :collapse="isCollapse" />
|
||||
<el-scrollbar
|
||||
wrap-class="scrollbar-wrapper"
|
||||
:class="[device === 'mobile' ? 'mobile' : 'pc']"
|
||||
>
|
||||
<el-menu
|
||||
unique-opened
|
||||
mode="vertical"
|
||||
popper-class="pure-scrollbar"
|
||||
class="outer-most select-none"
|
||||
:collapse="isCollapse"
|
||||
:collapse-transition="false"
|
||||
:popper-effect="tooltipEffect"
|
||||
:default-active="defaultActive"
|
||||
>
|
||||
<LaySidebarItem
|
||||
v-for="routes in menuData"
|
||||
:key="routes.path"
|
||||
:item="routes"
|
||||
:base-path="routes.path"
|
||||
class="outer-most select-none"
|
||||
/>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
<LaySidebarCenterCollapse
|
||||
v-if="device !== 'mobile' && (isShow || isCollapse)"
|
||||
:is-active="pureApp.sidebar.opened"
|
||||
@toggleClick="toggleSideBar"
|
||||
/>
|
||||
<LaySidebarLeftCollapse
|
||||
v-if="device !== 'mobile'"
|
||||
:is-active="pureApp.sidebar.opened"
|
||||
@toggleClick="toggleSideBar"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-loading-mask) {
|
||||
opacity: 0.45;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,120 @@
|
||||
<script setup lang="ts">
|
||||
import { isEqual } from "@pureadmin/utils";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { ref, watch, onMounted, toRaw } from "vue";
|
||||
import { getParentPaths, findRouteByPath } from "@/router/utils";
|
||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||
|
||||
const route = useRoute();
|
||||
const levelList = ref([]);
|
||||
const router = useRouter();
|
||||
const routes: any = router.options.routes;
|
||||
const multiTags: any = useMultiTagsStoreHook().multiTags;
|
||||
|
||||
const getBreadcrumb = (): void => {
|
||||
// 当前路由信息
|
||||
let currentRoute;
|
||||
|
||||
if (Object.keys(route.query).length > 0) {
|
||||
multiTags.forEach(item => {
|
||||
if (isEqual(route.query, item?.query)) {
|
||||
currentRoute = toRaw(item);
|
||||
}
|
||||
});
|
||||
} else if (Object.keys(route.params).length > 0) {
|
||||
multiTags.forEach(item => {
|
||||
if (isEqual(route.params, item?.params)) {
|
||||
currentRoute = toRaw(item);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
currentRoute = findRouteByPath(router.currentRoute.value.path, routes);
|
||||
}
|
||||
|
||||
// 当前路由的父级路径组成的数组
|
||||
const parentRoutes = getParentPaths(
|
||||
router.currentRoute.value.name as string,
|
||||
routes,
|
||||
"name"
|
||||
);
|
||||
// 存放组成面包屑的数组
|
||||
const matched = [];
|
||||
|
||||
// 获取每个父级路径对应的路由信息
|
||||
parentRoutes.forEach(path => {
|
||||
if (path !== "/") matched.push(findRouteByPath(path, routes));
|
||||
});
|
||||
|
||||
matched.push(currentRoute);
|
||||
|
||||
matched.forEach((item, index) => {
|
||||
if (currentRoute?.query || currentRoute?.params) return;
|
||||
if (item?.children) {
|
||||
item.children.forEach(v => {
|
||||
if (v?.meta?.title === item?.meta?.title) {
|
||||
matched.splice(index, 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
levelList.value = matched.filter(
|
||||
item => item?.meta && item?.meta.title !== false
|
||||
);
|
||||
};
|
||||
|
||||
const handleLink = item => {
|
||||
const { redirect, name, path } = item;
|
||||
if (redirect) {
|
||||
router.push(redirect as any);
|
||||
} else {
|
||||
if (name) {
|
||||
if (item.query) {
|
||||
router.push({
|
||||
name,
|
||||
query: item.query
|
||||
});
|
||||
} else if (item.params) {
|
||||
router.push({
|
||||
name,
|
||||
params: item.params
|
||||
});
|
||||
} else {
|
||||
router.push({ name });
|
||||
}
|
||||
} else {
|
||||
router.push({ path });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getBreadcrumb();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
getBreadcrumb();
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-breadcrumb class="leading-[50px]! select-none" separator="/">
|
||||
<transition-group name="breadcrumb">
|
||||
<el-breadcrumb-item
|
||||
v-for="item in levelList"
|
||||
:key="item.path"
|
||||
class="inline! items-stretch!"
|
||||
>
|
||||
<a @click.prevent="handleLink(item)">
|
||||
{{ item.meta.title }}
|
||||
</a>
|
||||
</el-breadcrumb-item>
|
||||
</transition-group>
|
||||
</el-breadcrumb>
|
||||
</template>
|
||||
@@ -0,0 +1,70 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { useGlobal } from "@pureadmin/utils";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
|
||||
import ArrowLeft from "~icons/ri/arrow-left-double-fill";
|
||||
|
||||
interface Props {
|
||||
isActive?: boolean;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
isActive: false
|
||||
});
|
||||
|
||||
const { tooltipEffect } = useNav();
|
||||
|
||||
const iconClass = computed(() => {
|
||||
return ["w-[16px]", "h-[16px]"];
|
||||
});
|
||||
|
||||
const { $storage } = useGlobal<GlobalPropertiesApi>();
|
||||
const themeColor = computed(() => $storage.layout?.themeColor);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "toggleClick"): void;
|
||||
}>();
|
||||
|
||||
const toggleClick = () => {
|
||||
emit("toggleClick");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-tippy="{
|
||||
content: isActive ? '点击折叠' : '点击展开',
|
||||
theme: tooltipEffect,
|
||||
hideOnClick: 'toggle',
|
||||
placement: 'right'
|
||||
}"
|
||||
class="center-collapse"
|
||||
@click="toggleClick"
|
||||
>
|
||||
<IconifyIconOffline
|
||||
:icon="ArrowLeft"
|
||||
:class="[iconClass, themeColor === 'light' ? '' : 'text-primary']"
|
||||
:style="{ transform: isActive ? 'none' : 'rotateY(180deg)' }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.center-collapse {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 2px;
|
||||
z-index: 1002;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 34px;
|
||||
cursor: pointer;
|
||||
background: var(--el-bg-color);
|
||||
border: 1px solid var(--pure-border-color);
|
||||
border-radius: 4px;
|
||||
transform: translate(12px, -50%);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
import { toRaw } from "vue";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
defineProps({
|
||||
extraIcon: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="extraIcon" class="flex justify-center items-center">
|
||||
<component
|
||||
:is="useRenderIcon(toRaw(extraIcon))"
|
||||
class="w-[30px] h-[30px]"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
|
||||
const screenIcon = ref();
|
||||
const { toggle, isFullscreen, Fullscreen, ExitFullscreen } = useNav();
|
||||
|
||||
isFullscreen.value = !!(
|
||||
document.fullscreenElement ||
|
||||
document.webkitFullscreenElement ||
|
||||
document.mozFullScreenElement ||
|
||||
document.msFullscreenElement
|
||||
);
|
||||
|
||||
watch(
|
||||
isFullscreen,
|
||||
full => {
|
||||
screenIcon.value = full ? ExitFullscreen : Fullscreen;
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="fullscreen-icon navbar-bg-hover" @click="toggle">
|
||||
<IconifyIconOffline :icon="screenIcon" />
|
||||
</span>
|
||||
</template>
|
||||
@@ -0,0 +1,228 @@
|
||||
<script setup lang="ts">
|
||||
import { getConfig } from "@/config";
|
||||
import { posix } from "path-browserify";
|
||||
import { menuType } from "@/layout/types";
|
||||
import { ReText } from "@/components/ReText";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
import SidebarLinkItem from "./SidebarLinkItem.vue";
|
||||
import SidebarExtraIcon from "./SidebarExtraIcon.vue";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import {
|
||||
type PropType,
|
||||
type CSSProperties,
|
||||
ref,
|
||||
toRaw,
|
||||
computed,
|
||||
useAttrs
|
||||
} from "vue";
|
||||
|
||||
import ArrowUp from "~icons/ep/arrow-up-bold";
|
||||
import EpArrowDown from "~icons/ep/arrow-down-bold";
|
||||
import ArrowLeft from "~icons/ep/arrow-left-bold";
|
||||
import ArrowRight from "~icons/ep/arrow-right-bold";
|
||||
|
||||
const attrs = useAttrs();
|
||||
const { layout, isCollapse, tooltipEffect, getDivStyle } = useNav();
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object as PropType<menuType>
|
||||
},
|
||||
isNest: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
basePath: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
|
||||
const getNoDropdownStyle = computed((): CSSProperties => {
|
||||
return {
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
alignItems: "center"
|
||||
};
|
||||
});
|
||||
|
||||
const getSubMenuIconStyle = computed((): CSSProperties => {
|
||||
return {
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
margin:
|
||||
layout.value === "horizontal"
|
||||
? "0 5px 0 0"
|
||||
: isCollapse.value
|
||||
? "0 auto"
|
||||
: "0 5px 0 0"
|
||||
};
|
||||
});
|
||||
|
||||
const textClass = computed(() => {
|
||||
const item = props.item;
|
||||
const baseClass = "w-full! text-inherit!";
|
||||
if (
|
||||
layout.value !== "horizontal" &&
|
||||
isCollapse.value &&
|
||||
!toRaw(item.meta.icon) &&
|
||||
((layout.value === "vertical" && item.parentId === null) ||
|
||||
(layout.value === "mix" && item.pathList.length === 2))
|
||||
) {
|
||||
return `${baseClass} min-w-[54px]! text-center! px-3!`;
|
||||
}
|
||||
return baseClass;
|
||||
});
|
||||
|
||||
const expandCloseIcon = computed(() => {
|
||||
if (!getConfig()?.MenuArrowIconNoTransition) return "";
|
||||
return {
|
||||
"expand-close-icon": useRenderIcon(EpArrowDown),
|
||||
"expand-open-icon": useRenderIcon(ArrowUp),
|
||||
"collapse-close-icon": useRenderIcon(ArrowRight),
|
||||
"collapse-open-icon": useRenderIcon(ArrowLeft)
|
||||
};
|
||||
});
|
||||
|
||||
const onlyOneChild: menuType = ref(null);
|
||||
|
||||
function hasOneShowingChild(children: menuType[] = [], parent: menuType) {
|
||||
const showingChildren = children.filter((item: any) => {
|
||||
onlyOneChild.value = item;
|
||||
return true;
|
||||
});
|
||||
|
||||
if (showingChildren[0]?.meta?.showParent) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (showingChildren.length === 1) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (showingChildren.length === 0) {
|
||||
onlyOneChild.value = { ...parent, path: "", noShowingChildren: true };
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function resolvePath(routePath) {
|
||||
const httpReg = /^http(s?):\/\//;
|
||||
if (httpReg.test(routePath) || httpReg.test(props.basePath)) {
|
||||
return routePath || props.basePath;
|
||||
} else {
|
||||
return posix.resolve(props.basePath, routePath);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SidebarLinkItem
|
||||
v-if="
|
||||
hasOneShowingChild(item.children, item) &&
|
||||
(!onlyOneChild.children || onlyOneChild.noShowingChildren)
|
||||
"
|
||||
:to="item"
|
||||
>
|
||||
<el-menu-item
|
||||
:index="resolvePath(onlyOneChild.path)"
|
||||
:class="{ 'submenu-title-noDropdown': !isNest }"
|
||||
:style="getNoDropdownStyle"
|
||||
v-bind="attrs"
|
||||
>
|
||||
<div
|
||||
v-if="toRaw(item.meta.icon)"
|
||||
class="sub-menu-icon"
|
||||
:style="getSubMenuIconStyle"
|
||||
>
|
||||
<component
|
||||
:is="
|
||||
useRenderIcon(
|
||||
toRaw(onlyOneChild.meta.icon) ||
|
||||
(item.meta && toRaw(item.meta.icon))
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<el-text
|
||||
v-if="
|
||||
(!item?.meta.icon &&
|
||||
isCollapse &&
|
||||
layout === 'vertical' &&
|
||||
item?.pathList?.length === 1) ||
|
||||
(!onlyOneChild.meta.icon &&
|
||||
isCollapse &&
|
||||
layout === 'mix' &&
|
||||
item?.pathList?.length === 2)
|
||||
"
|
||||
truncated
|
||||
class="w-full! px-3! min-w-[54px]! text-center! text-inherit!"
|
||||
>
|
||||
{{ onlyOneChild.meta.title }}
|
||||
</el-text>
|
||||
|
||||
<template #title>
|
||||
<div :style="getDivStyle">
|
||||
<ReText
|
||||
:tippyProps="{
|
||||
offset: [0, -10],
|
||||
theme: tooltipEffect
|
||||
}"
|
||||
class="w-full! text-inherit!"
|
||||
>
|
||||
{{ onlyOneChild.meta.title }}
|
||||
</ReText>
|
||||
<SidebarExtraIcon :extraIcon="onlyOneChild.meta.extraIcon" />
|
||||
</div>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</SidebarLinkItem>
|
||||
<el-sub-menu
|
||||
v-else
|
||||
ref="subMenu"
|
||||
teleported
|
||||
:index="resolvePath(item.path)"
|
||||
v-bind="expandCloseIcon"
|
||||
>
|
||||
<template #title>
|
||||
<div
|
||||
v-if="toRaw(item.meta.icon)"
|
||||
:style="getSubMenuIconStyle"
|
||||
class="sub-menu-icon"
|
||||
>
|
||||
<component :is="useRenderIcon(item.meta && toRaw(item.meta.icon))" />
|
||||
</div>
|
||||
<ReText
|
||||
v-if="
|
||||
layout === 'mix' && toRaw(item.meta.icon)
|
||||
? !isCollapse || item?.pathList?.length !== 2
|
||||
: !(
|
||||
layout === 'vertical' &&
|
||||
isCollapse &&
|
||||
toRaw(item.meta.icon) &&
|
||||
item.parentId === null
|
||||
)
|
||||
"
|
||||
:tippyProps="{
|
||||
offset: [0, -10],
|
||||
theme: tooltipEffect
|
||||
}"
|
||||
:class="textClass"
|
||||
>
|
||||
{{ item.meta.title }}
|
||||
</ReText>
|
||||
<SidebarExtraIcon v-if="!isCollapse" :extraIcon="item.meta.extraIcon" />
|
||||
</template>
|
||||
|
||||
<sidebar-item
|
||||
v-for="child in item.children"
|
||||
:key="child.path"
|
||||
:is-nest="true"
|
||||
:item="child"
|
||||
:base-path="resolvePath(child.path)"
|
||||
class="nest-menu"
|
||||
/>
|
||||
</el-sub-menu>
|
||||
</template>
|
||||
@@ -0,0 +1,69 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { useGlobal } from "@pureadmin/utils";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
|
||||
import MenuFold from "~icons/ri/menu-fold-fill";
|
||||
|
||||
interface Props {
|
||||
isActive?: boolean;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
isActive: false
|
||||
});
|
||||
|
||||
const { tooltipEffect } = useNav();
|
||||
|
||||
const iconClass = computed(() => {
|
||||
return [
|
||||
"ml-4",
|
||||
"mb-1",
|
||||
"w-[16px]",
|
||||
"h-[16px]",
|
||||
"inline-block!",
|
||||
"align-middle",
|
||||
"cursor-pointer",
|
||||
"duration-[100ms]"
|
||||
];
|
||||
});
|
||||
|
||||
const { $storage } = useGlobal<GlobalPropertiesApi>();
|
||||
const themeColor = computed(() => $storage.layout?.themeColor);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "toggleClick"): void;
|
||||
}>();
|
||||
|
||||
const toggleClick = () => {
|
||||
emit("toggleClick");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="left-collapse">
|
||||
<IconifyIconOffline
|
||||
v-tippy="{
|
||||
content: isActive ? '点击折叠' : '点击展开',
|
||||
theme: tooltipEffect,
|
||||
hideOnClick: 'toggle',
|
||||
placement: 'right'
|
||||
}"
|
||||
:icon="MenuFold"
|
||||
:class="[iconClass, themeColor === 'light' ? '' : 'text-primary']"
|
||||
:style="{ transform: isActive ? 'none' : 'rotateY(180deg)' }"
|
||||
@click="toggleClick"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.left-collapse {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
box-shadow: 0 0 6px -3px var(--el-color-primary);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,32 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { isUrl } from "@pureadmin/utils";
|
||||
import { menuType } from "@/layout/types";
|
||||
|
||||
const props = defineProps<{
|
||||
to: menuType;
|
||||
}>();
|
||||
|
||||
const isExternalLink = computed(() => isUrl(props.to.name));
|
||||
const getLinkProps = (item: menuType) => {
|
||||
if (isExternalLink.value) {
|
||||
return {
|
||||
href: item.name,
|
||||
target: "_blank",
|
||||
rel: "noopener"
|
||||
};
|
||||
}
|
||||
return {
|
||||
to: item
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component
|
||||
:is="isExternalLink ? 'a' : 'router-link'"
|
||||
v-bind="getLinkProps(to)"
|
||||
>
|
||||
<slot />
|
||||
</component>
|
||||
</template>
|
||||
@@ -0,0 +1,72 @@
|
||||
<script setup lang="ts">
|
||||
import { getTopMenu } from "@/router/utils";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
|
||||
defineProps({
|
||||
collapse: Boolean
|
||||
});
|
||||
|
||||
const { title, getLogo } = useNav();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sidebar-logo-container" :class="{ collapses: collapse }">
|
||||
<transition name="sidebarLogoFade">
|
||||
<router-link
|
||||
v-if="collapse"
|
||||
key="collapse"
|
||||
:title="title"
|
||||
class="sidebar-logo-link"
|
||||
:to="getTopMenu()?.path ?? '/'"
|
||||
>
|
||||
<img :src="getLogo()" alt="logo" />
|
||||
<span class="sidebar-title">{{ title }}</span>
|
||||
</router-link>
|
||||
<router-link
|
||||
v-else
|
||||
key="expand"
|
||||
:title="title"
|
||||
class="sidebar-logo-link"
|
||||
:to="getTopMenu()?.path ?? '/'"
|
||||
>
|
||||
<img :src="getLogo()" alt="logo" />
|
||||
<span class="sidebar-title">{{ title }}</span>
|
||||
</router-link>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sidebar-logo-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
overflow: hidden;
|
||||
|
||||
.sidebar-logo-link {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding-left: 10px;
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
margin: 2px 0 0 12px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 32px;
|
||||
color: var(--pure-theme-sub-menu-active-text);
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,33 @@
|
||||
<script setup lang="ts">
|
||||
import MenuFold from "~icons/ri/menu-fold-fill";
|
||||
import MenuUnfold from "~icons/ri/menu-unfold-fill";
|
||||
|
||||
interface Props {
|
||||
isActive?: boolean;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
isActive: false
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "toggleClick"): void;
|
||||
}>();
|
||||
|
||||
const toggleClick = () => {
|
||||
emit("toggleClick");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="px-3 mr-1 navbar-bg-hover"
|
||||
:title="isActive ? '点击折叠' : '点击展开'"
|
||||
@click="toggleClick"
|
||||
>
|
||||
<IconifyIconOffline
|
||||
:icon="isActive ? MenuFold : MenuUnfold"
|
||||
class="inline-block! align-middle hover:text-primary dark:hover:text-white!"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<svg class="w-full h-full">
|
||||
<defs>
|
||||
<symbol id="geometry-left" viewBox="0 0 214 36">
|
||||
<path d="M17 0h197v36H0v-2c4.5 0 9-3.5 9-8V8c0-4.5 3.5-8 8-8z" />
|
||||
</symbol>
|
||||
<symbol id="geometry-right" viewBox="0 0 214 36">
|
||||
<use xlink:href="#geometry-left" />
|
||||
</symbol>
|
||||
<clipPath>
|
||||
<rect width="100%" height="100%" x="0" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<svg width="51%" height="100%">
|
||||
<use
|
||||
xlink:href="#geometry-left"
|
||||
width="214"
|
||||
height="36"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<g transform="scale(-1, 1)">
|
||||
<svg width="51%" height="100%" x="-100%" y="0">
|
||||
<use
|
||||
xlink:href="#geometry-right"
|
||||
width="214"
|
||||
height="36"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,371 @@
|
||||
@keyframes schedule-in-width {
|
||||
from {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes schedule-out-width {
|
||||
from {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
to {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-view {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-primary);
|
||||
background: #fff;
|
||||
box-shadow: 0 0 1px #888;
|
||||
|
||||
.scroll-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 34px;
|
||||
padding-left: 6px;
|
||||
line-height: 34px;
|
||||
cursor: pointer;
|
||||
transition: all 0.4s;
|
||||
|
||||
&:not(:first-child) {
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
&.chrome-item {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
margin-right: -18px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.el-icon-close {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: var(--el-color-primary);
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transform: translate(0, -50%);
|
||||
transition:
|
||||
background-color 0.12s,
|
||||
color 0.12s;
|
||||
|
||||
&:hover {
|
||||
color: rgb(0 0 0 / 88%) !important;
|
||||
background-color: rgb(0 0 0 / 6%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tag-title {
|
||||
padding: 0 4px;
|
||||
color: var(--el-text-color-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
&.chrome-scroll-container {
|
||||
padding-top: 4px;
|
||||
|
||||
.fixed-tag {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tab {
|
||||
position: relative;
|
||||
float: left;
|
||||
overflow: visible;
|
||||
white-space: nowrap;
|
||||
list-style: none;
|
||||
|
||||
.scroll-item {
|
||||
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
|
||||
&:nth-child(1) {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
&.chrome-item {
|
||||
&:nth-child(1) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-tag {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 右键菜单 */
|
||||
.contextmenu {
|
||||
position: absolute;
|
||||
padding: 5px 0;
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
color: var(--el-text-color-primary);
|
||||
white-space: nowrap;
|
||||
outline: 0;
|
||||
list-style-type: none;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 7px 12px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dropdown-menu {
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item:not(.is-disabled):hover {
|
||||
color: #606266;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
:deep(.el-dropdown-menu__item) i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
:deep(.el-dropdown-menu__item--divided) {
|
||||
margin: 1px 0;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item--divided::before {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item.is-disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.scroll-item.is-active {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
box-shadow: 0 0 0.7px #888;
|
||||
|
||||
.chrome-tab {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.chrome-tab__bg {
|
||||
color: var(--el-color-primary-light-9) !important;
|
||||
}
|
||||
|
||||
.tag-title {
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
|
||||
.chrome-close-btn {
|
||||
color: var(--el-color-primary);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.chrome-tab-divider {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-left,
|
||||
.arrow-right,
|
||||
.arrow-down {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 34px;
|
||||
color: var(--el-text-color-primary);
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-left {
|
||||
box-shadow: 5px 0 5px -6px #ccc;
|
||||
|
||||
&:hover {
|
||||
cursor: w-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
border-right: 0.5px solid #ccc;
|
||||
box-shadow: -5px 0 5px -6px #ccc;
|
||||
|
||||
&:hover {
|
||||
cursor: e-resize;
|
||||
}
|
||||
}
|
||||
|
||||
/* 卡片模式下鼠标移入显示蓝色边框 */
|
||||
.card-in {
|
||||
color: var(--el-color-primary);
|
||||
|
||||
.tag-title {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* 卡片模式下鼠标移出隐藏蓝色边框 */
|
||||
.card-out {
|
||||
color: #666;
|
||||
border: none;
|
||||
|
||||
.tag-title {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
/* 灵动模式 */
|
||||
.schedule-active {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: var(--el-color-primary);
|
||||
}
|
||||
|
||||
/* 灵动模式下鼠标移入显示蓝色进度条 */
|
||||
.schedule-in {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: var(--el-color-primary);
|
||||
animation: schedule-in-width 200ms ease-in;
|
||||
}
|
||||
|
||||
/* 灵动模式下鼠标移出隐藏蓝色进度条 */
|
||||
.schedule-out {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: var(--el-color-primary);
|
||||
animation: schedule-out-width 200ms ease-in;
|
||||
}
|
||||
|
||||
/* 谷歌风格的页签 */
|
||||
.chrome-tab {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 24px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
||||
.tag-title {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.chrome-tab-divider {
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background-color: #2b2d2f;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
z-index: 10;
|
||||
|
||||
.chrome-tab__bg {
|
||||
color: #dee1e6;
|
||||
}
|
||||
|
||||
.tag-title {
|
||||
color: #1f1f1f;
|
||||
}
|
||||
|
||||
.chrome-tab-divider {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.chrome-tab__bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -10;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.chrome-close-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: #666;
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
background-color: #b1b3b8;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,690 @@
|
||||
<script setup lang="ts">
|
||||
import { emitter } from "@/utils/mitt";
|
||||
import NProgress from "@/utils/progress";
|
||||
import { RouteConfigs } from "../../types";
|
||||
import { useTags } from "../../hooks/useTag";
|
||||
import { routerArrays } from "@/layout/types";
|
||||
import { onClickOutside } from "@vueuse/core";
|
||||
import TagChrome from "./components/TagChrome.vue";
|
||||
import { handleAliveRoute, getTopMenu } from "@/router/utils";
|
||||
import { useSettingStoreHook } from "@/store/modules/settings";
|
||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
import { ref, watch, unref, toRaw, nextTick, onBeforeUnmount } from "vue";
|
||||
import {
|
||||
delay,
|
||||
isEqual,
|
||||
isAllEmpty,
|
||||
useResizeObserver
|
||||
} from "@pureadmin/utils";
|
||||
|
||||
import ExitFullscreen from "~icons/ri/fullscreen-exit-fill";
|
||||
import Fullscreen from "~icons/ri/fullscreen-fill";
|
||||
import ArrowDown from "~icons/ri/arrow-down-s-line";
|
||||
import ArrowRightSLine from "~icons/ri/arrow-right-s-line";
|
||||
import ArrowLeftSLine from "~icons/ri/arrow-left-s-line";
|
||||
|
||||
const {
|
||||
Close,
|
||||
route,
|
||||
router,
|
||||
visible,
|
||||
showTags,
|
||||
instance,
|
||||
multiTags,
|
||||
tagsViews,
|
||||
buttonTop,
|
||||
buttonLeft,
|
||||
showModel,
|
||||
translateX,
|
||||
isFixedTag,
|
||||
pureSetting,
|
||||
activeIndex,
|
||||
getTabStyle,
|
||||
isScrolling,
|
||||
iconIsActive,
|
||||
linkIsActive,
|
||||
currentSelect,
|
||||
scheduleIsActive,
|
||||
getContextMenuStyle,
|
||||
closeMenu,
|
||||
onMounted,
|
||||
onMouseenter,
|
||||
onMouseleave,
|
||||
onContentFullScreen
|
||||
} = useTags();
|
||||
|
||||
const tabDom = ref();
|
||||
const containerDom = ref();
|
||||
const scrollbarDom = ref();
|
||||
const contextmenuRef = ref();
|
||||
const isShowArrow = ref(false);
|
||||
const topPath = getTopMenu()?.path;
|
||||
const { VITE_HIDE_HOME } = import.meta.env;
|
||||
const fixedTags = [
|
||||
...routerArrays,
|
||||
...usePermissionStoreHook().flatteningRoutes.filter(v => v?.meta?.fixedTag)
|
||||
];
|
||||
|
||||
const dynamicTagView = async () => {
|
||||
await nextTick();
|
||||
const index = multiTags.value.findIndex(item => {
|
||||
if (!isAllEmpty(route.query)) {
|
||||
return isEqual(route.query, item.query);
|
||||
} else if (!isAllEmpty(route.params)) {
|
||||
return isEqual(route.params, item.params);
|
||||
} else {
|
||||
return route.path === item.path;
|
||||
}
|
||||
});
|
||||
moveToView(index);
|
||||
};
|
||||
|
||||
const moveToView = async (index: number): Promise<void> => {
|
||||
await nextTick();
|
||||
const tabNavPadding = 10;
|
||||
if (!instance.refs["dynamic" + index]) return;
|
||||
const tabItemEl = instance.refs["dynamic" + index][0];
|
||||
const tabItemElOffsetLeft = (tabItemEl as HTMLElement)?.offsetLeft;
|
||||
const tabItemOffsetWidth = (tabItemEl as HTMLElement)?.offsetWidth;
|
||||
// 标签页导航栏可视长度（不包含溢出部分）
|
||||
const scrollbarDomWidth = scrollbarDom.value
|
||||
? scrollbarDom.value?.offsetWidth
|
||||
: 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) {
|
||||
// 标签在可视区域左侧
|
||||
translateX.value = -tabItemElOffsetLeft + tabNavPadding;
|
||||
} else if (
|
||||
tabItemElOffsetLeft > -translateX.value &&
|
||||
tabItemElOffsetLeft + tabItemOffsetWidth <
|
||||
-translateX.value + scrollbarDomWidth
|
||||
) {
|
||||
// 标签在可视区域
|
||||
translateX.value = Math.min(
|
||||
0,
|
||||
scrollbarDomWidth -
|
||||
tabItemOffsetWidth -
|
||||
tabItemElOffsetLeft -
|
||||
tabNavPadding
|
||||
);
|
||||
} else {
|
||||
// 标签在可视区域右侧
|
||||
translateX.value = -(
|
||||
tabItemElOffsetLeft -
|
||||
(scrollbarDomWidth - tabNavPadding - tabItemOffsetWidth)
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleScroll = (offset: number): void => {
|
||||
const scrollbarDomWidth = scrollbarDom.value
|
||||
? scrollbarDom.value?.offsetWidth
|
||||
: 0;
|
||||
const tabDomWidth = tabDom.value ? tabDom.value.offsetWidth : 0;
|
||||
if (offset > 0) {
|
||||
translateX.value = Math.min(0, translateX.value + offset);
|
||||
} else {
|
||||
if (scrollbarDomWidth < tabDomWidth) {
|
||||
if (translateX.value >= -(tabDomWidth - scrollbarDomWidth)) {
|
||||
translateX.value = Math.max(
|
||||
translateX.value + offset,
|
||||
scrollbarDomWidth - tabDomWidth
|
||||
);
|
||||
}
|
||||
} else {
|
||||
translateX.value = 0;
|
||||
}
|
||||
}
|
||||
isScrolling.value = false;
|
||||
};
|
||||
|
||||
const handleWheel = (event: WheelEvent): void => {
|
||||
isScrolling.value = true;
|
||||
const scrollIntensity = Math.abs(event.deltaX) + Math.abs(event.deltaY);
|
||||
let offset = 0;
|
||||
if (event.deltaX < 0) {
|
||||
offset = scrollIntensity > 0 ? scrollIntensity : 100;
|
||||
} else {
|
||||
offset = scrollIntensity > 0 ? -scrollIntensity : -100;
|
||||
}
|
||||
|
||||
smoothScroll(offset);
|
||||
};
|
||||
|
||||
const smoothScroll = (offset: number): void => {
|
||||
// 每帧滚动的距离
|
||||
const scrollAmount = 20;
|
||||
let remaining = Math.abs(offset);
|
||||
|
||||
const scrollStep = () => {
|
||||
const scrollOffset = Math.sign(offset) * Math.min(scrollAmount, remaining);
|
||||
handleScroll(scrollOffset);
|
||||
remaining -= Math.abs(scrollOffset);
|
||||
|
||||
if (remaining > 0) {
|
||||
requestAnimationFrame(scrollStep);
|
||||
}
|
||||
};
|
||||
|
||||
requestAnimationFrame(scrollStep);
|
||||
};
|
||||
|
||||
function dynamicRouteTag(value: string): void {
|
||||
const hasValue = multiTags.value.some(item => {
|
||||
return item.path === value;
|
||||
});
|
||||
|
||||
function concatPath(arr: object[], value: string) {
|
||||
if (!hasValue) {
|
||||
arr.forEach((arrItem: any) => {
|
||||
if (arrItem.path === value) {
|
||||
useMultiTagsStoreHook().handleTags("push", {
|
||||
path: value,
|
||||
meta: arrItem.meta,
|
||||
name: arrItem.name
|
||||
});
|
||||
} else {
|
||||
if (arrItem.children && arrItem.children.length > 0) {
|
||||
concatPath(arrItem.children, value);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
concatPath(router.options.routes as any, value);
|
||||
}
|
||||
|
||||
/** 刷新路由 */
|
||||
function onFresh() {
|
||||
NProgress.start();
|
||||
const { fullPath, query } = unref(route);
|
||||
router.replace({
|
||||
path: "/redirect" + fullPath,
|
||||
query
|
||||
});
|
||||
handleAliveRoute(route as ToRouteType, "refresh");
|
||||
NProgress.done();
|
||||
}
|
||||
|
||||
function deleteDynamicTag(obj: any, current: any, tag?: string) {
|
||||
const valueIndex: number = multiTags.value.findIndex((item: any) => {
|
||||
if (item.query) {
|
||||
if (item.path === obj.path) {
|
||||
return item.query === obj.query;
|
||||
}
|
||||
} else if (item.params) {
|
||||
if (item.path === obj.path) {
|
||||
return item.params === obj.params;
|
||||
}
|
||||
} else {
|
||||
return item.path === obj.path;
|
||||
}
|
||||
});
|
||||
|
||||
const spliceRoute = (
|
||||
startIndex?: number,
|
||||
length?: number,
|
||||
other?: boolean
|
||||
): void => {
|
||||
if (other) {
|
||||
useMultiTagsStoreHook().handleTags(
|
||||
"equal",
|
||||
[
|
||||
VITE_HIDE_HOME === "false" ? fixedTags : toRaw(getTopMenu()),
|
||||
obj
|
||||
].flat()
|
||||
);
|
||||
} else {
|
||||
useMultiTagsStoreHook().handleTags("splice", "", {
|
||||
startIndex,
|
||||
length
|
||||
}) as any;
|
||||
}
|
||||
dynamicTagView();
|
||||
};
|
||||
|
||||
if (tag === "other") {
|
||||
spliceRoute(1, 1, true);
|
||||
} else if (tag === "left") {
|
||||
spliceRoute(fixedTags.length, valueIndex - fixedTags.length);
|
||||
} else if (tag === "right") {
|
||||
spliceRoute(valueIndex + 1, multiTags.value.length);
|
||||
} else {
|
||||
// 从当前匹配到的路径中删除
|
||||
spliceRoute(valueIndex, 1);
|
||||
}
|
||||
const newRoute = useMultiTagsStoreHook().handleTags("slice");
|
||||
if (current === route.path) {
|
||||
// 如果删除当前激活tag就自动切换到最后一个tag
|
||||
if (tag === "left") return;
|
||||
if (newRoute[0]?.query) {
|
||||
router.push({ name: newRoute[0].name, query: newRoute[0].query });
|
||||
} else if (newRoute[0]?.params) {
|
||||
router.push({ name: newRoute[0].name, params: newRoute[0].params });
|
||||
} else {
|
||||
router.push({ path: newRoute[0].path });
|
||||
}
|
||||
} else {
|
||||
if (!multiTags.value.length) return;
|
||||
if (multiTags.value.some(item => item.path === route.path)) return;
|
||||
if (newRoute[0]?.query) {
|
||||
router.push({ name: newRoute[0].name, query: newRoute[0].query });
|
||||
} else if (newRoute[0]?.params) {
|
||||
router.push({ name: newRoute[0].name, params: newRoute[0].params });
|
||||
} else {
|
||||
router.push({ path: newRoute[0].path });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function deleteMenu(item, tag?: string) {
|
||||
deleteDynamicTag(item, item.path, tag);
|
||||
handleAliveRoute(route as ToRouteType);
|
||||
}
|
||||
|
||||
function onClickDrop(key, item, selectRoute?: RouteConfigs) {
|
||||
if (item && item.disabled) return;
|
||||
|
||||
let selectTagRoute;
|
||||
if (selectRoute) {
|
||||
selectTagRoute = {
|
||||
path: selectRoute.path,
|
||||
meta: selectRoute.meta,
|
||||
name: selectRoute.name,
|
||||
query: selectRoute?.query,
|
||||
params: selectRoute?.params
|
||||
};
|
||||
} else {
|
||||
selectTagRoute = { path: route.path, meta: route.meta };
|
||||
}
|
||||
|
||||
// 当前路由信息
|
||||
switch (key) {
|
||||
case 0:
|
||||
// 刷新路由
|
||||
onFresh();
|
||||
break;
|
||||
case 1:
|
||||
// 关闭当前标签页
|
||||
deleteMenu(selectTagRoute);
|
||||
break;
|
||||
case 2:
|
||||
// 关闭左侧标签页
|
||||
deleteMenu(selectTagRoute, "left");
|
||||
break;
|
||||
case 3:
|
||||
// 关闭右侧标签页
|
||||
deleteMenu(selectTagRoute, "right");
|
||||
break;
|
||||
case 4:
|
||||
// 关闭其他标签页
|
||||
deleteMenu(selectTagRoute, "other");
|
||||
break;
|
||||
case 5:
|
||||
// 关闭全部标签页
|
||||
useMultiTagsStoreHook().handleTags("splice", "", {
|
||||
startIndex: fixedTags.length,
|
||||
length: multiTags.value.length
|
||||
});
|
||||
router.push(topPath);
|
||||
// router.push(fixedTags[fixedTags.length - 1]?.path);
|
||||
handleAliveRoute(route as ToRouteType);
|
||||
break;
|
||||
case 6:
|
||||
// 内容区全屏
|
||||
onContentFullScreen();
|
||||
setTimeout(() => {
|
||||
if (pureSetting.hiddenSideBar) {
|
||||
tagsViews[6].icon = ExitFullscreen;
|
||||
tagsViews[6].text = "内容区退出全屏";
|
||||
} else {
|
||||
tagsViews[6].icon = Fullscreen;
|
||||
tagsViews[6].text = "内容区全屏";
|
||||
}
|
||||
}, 100);
|
||||
break;
|
||||
}
|
||||
setTimeout(() => {
|
||||
showMenuModel(route.fullPath, route.query, route.params);
|
||||
});
|
||||
}
|
||||
|
||||
function handleCommand(command: any) {
|
||||
const { key, item } = command;
|
||||
onClickDrop(key, item);
|
||||
}
|
||||
|
||||
/** 触发右键中菜单的点击事件 */
|
||||
function selectTag(key, item) {
|
||||
closeMenu();
|
||||
onClickDrop(key, item, currentSelect.value);
|
||||
}
|
||||
|
||||
function showMenus(value: boolean) {
|
||||
Array.of(1, 2, 3, 4, 5).forEach(v => {
|
||||
tagsViews[v].show = value;
|
||||
});
|
||||
}
|
||||
|
||||
function disabledMenus(value: boolean, fixedTag = false) {
|
||||
Array.of(1, 2, 3, 4, 5).forEach(v => {
|
||||
tagsViews[v].disabled = value;
|
||||
});
|
||||
if (fixedTag) {
|
||||
tagsViews[2].show = false;
|
||||
tagsViews[2].disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
/** 检查当前右键的菜单两边是否存在别的菜单，如果左侧的菜单是顶级菜单，则不显示关闭左侧标签页，如果右侧没有菜单，则不显示关闭右侧标签页 */
|
||||
function showMenuModel(
|
||||
currentPath: string,
|
||||
query: object = {},
|
||||
params: object = {},
|
||||
refresh = false
|
||||
) {
|
||||
const allRoute = multiTags.value;
|
||||
const routeLength = multiTags.value.length;
|
||||
let currentIndex = -1;
|
||||
if (!isAllEmpty(params)) {
|
||||
currentIndex = allRoute.findIndex(v => isEqual(v.params, params));
|
||||
} else if (!isAllEmpty(query)) {
|
||||
currentIndex = allRoute.findIndex(v => isEqual(v.query, query));
|
||||
} else {
|
||||
currentIndex = allRoute.findIndex(v => v.path === currentPath);
|
||||
}
|
||||
function fixedTagDisabled() {
|
||||
if (allRoute[currentIndex]?.meta?.fixedTag) {
|
||||
Array.of(1, 2, 3, 4, 5).forEach(v => {
|
||||
tagsViews[v].disabled = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
showMenus(true);
|
||||
|
||||
if (refresh) {
|
||||
tagsViews[0].show = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* currentIndex为1时，左侧的菜单顶级菜单，则不显示关闭左侧标签页
|
||||
* 如果currentIndex等于routeLength-1，右侧没有菜单，则不显示关闭右侧标签页
|
||||
*/
|
||||
if (currentIndex === 1 && routeLength !== 2) {
|
||||
// 左侧的菜单是顶级菜单，右侧存在别的菜单
|
||||
tagsViews[2].show = false;
|
||||
Array.of(1, 3, 4, 5).forEach(v => {
|
||||
tagsViews[v].disabled = false;
|
||||
});
|
||||
tagsViews[2].disabled = true;
|
||||
fixedTagDisabled();
|
||||
} else if (currentIndex === 1 && routeLength === 2) {
|
||||
disabledMenus(false);
|
||||
// 左侧的菜单是顶级菜单，右侧不存在别的菜单
|
||||
Array.of(2, 3, 4).forEach(v => {
|
||||
tagsViews[v].show = false;
|
||||
tagsViews[v].disabled = true;
|
||||
});
|
||||
fixedTagDisabled();
|
||||
} else if (routeLength - 1 === currentIndex && currentIndex !== 0) {
|
||||
// 当前路由是所有路由中的最后一个
|
||||
tagsViews[3].show = false;
|
||||
Array.of(1, 2, 4, 5).forEach(v => {
|
||||
tagsViews[v].disabled = false;
|
||||
});
|
||||
tagsViews[3].disabled = true;
|
||||
if (allRoute[currentIndex - 1]?.meta?.fixedTag) {
|
||||
tagsViews[2].show = false;
|
||||
tagsViews[2].disabled = true;
|
||||
}
|
||||
fixedTagDisabled();
|
||||
} else if (currentIndex === 0 || currentPath === `/redirect${topPath}`) {
|
||||
// 当前路由为顶级菜单
|
||||
disabledMenus(true);
|
||||
} else {
|
||||
disabledMenus(false, allRoute[currentIndex - 1]?.meta?.fixedTag);
|
||||
fixedTagDisabled();
|
||||
}
|
||||
}
|
||||
|
||||
function openMenu(tag, e) {
|
||||
closeMenu();
|
||||
if (tag.path === topPath || tag?.meta?.fixedTag) {
|
||||
// 右键菜单为顶级菜单或拥有 fixedTag 属性，只显示刷新
|
||||
showMenus(false);
|
||||
tagsViews[0].show = true;
|
||||
} else if (route.path !== tag.path && route.name !== tag.name) {
|
||||
// 右键菜单不匹配当前路由，隐藏刷新
|
||||
tagsViews[0].show = false;
|
||||
showMenuModel(tag.path, tag.query, tag.params);
|
||||
} else if (multiTags.value.length === 2 && route.path !== tag.path) {
|
||||
showMenus(true);
|
||||
// 只有两个标签时不显示关闭其他标签页
|
||||
tagsViews[4].show = false;
|
||||
showMenuModel(tag.path, tag.query, tag.params);
|
||||
} else {
|
||||
showMenuModel(tag.path, tag.query, tag.params, true);
|
||||
}
|
||||
|
||||
currentSelect.value = tag;
|
||||
const menuMinWidth = 140;
|
||||
const offsetLeft = unref(containerDom).getBoundingClientRect().left;
|
||||
const offsetWidth = unref(containerDom).offsetWidth;
|
||||
const maxLeft = offsetWidth - menuMinWidth;
|
||||
const left = e.clientX - offsetLeft + 5;
|
||||
if (left > maxLeft) {
|
||||
buttonLeft.value = maxLeft;
|
||||
} else {
|
||||
buttonLeft.value = left;
|
||||
}
|
||||
useSettingStoreHook().hiddenSideBar
|
||||
? (buttonTop.value = e.clientY)
|
||||
: (buttonTop.value = e.clientY - 40);
|
||||
nextTick(() => {
|
||||
visible.value = true;
|
||||
});
|
||||
}
|
||||
|
||||
/** 触发tags标签切换 */
|
||||
function tagOnClick(item) {
|
||||
const { name, path } = item;
|
||||
if (name) {
|
||||
if (item.query) {
|
||||
router.push({
|
||||
name,
|
||||
query: item.query
|
||||
});
|
||||
} else if (item.params) {
|
||||
router.push({
|
||||
name,
|
||||
params: item.params
|
||||
});
|
||||
} else {
|
||||
router.push({ name });
|
||||
}
|
||||
} else {
|
||||
router.push({ path });
|
||||
}
|
||||
emitter.emit("tagOnClick", item);
|
||||
}
|
||||
|
||||
onClickOutside(contextmenuRef, closeMenu, {
|
||||
detectIframe: true
|
||||
});
|
||||
|
||||
watch(route, () => {
|
||||
activeIndex.value = -1;
|
||||
dynamicTagView();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (!instance) return;
|
||||
|
||||
// 根据当前路由初始化操作标签页的禁用状态
|
||||
showMenuModel(route.fullPath);
|
||||
|
||||
// 触发隐藏标签页
|
||||
emitter.on("tagViewsChange", (key: any) => {
|
||||
if (unref(showTags as any) === key) return;
|
||||
(showTags as any).value = key;
|
||||
});
|
||||
|
||||
// 改变标签风格
|
||||
emitter.on("tagViewsShowModel", key => {
|
||||
showModel.value = key;
|
||||
});
|
||||
|
||||
// 接收侧边栏切换传递过来的参数
|
||||
emitter.on("changLayoutRoute", indexPath => {
|
||||
dynamicRouteTag(indexPath);
|
||||
setTimeout(() => {
|
||||
showMenuModel(indexPath);
|
||||
});
|
||||
});
|
||||
|
||||
useResizeObserver(scrollbarDom, dynamicTagView);
|
||||
delay().then(() => dynamicTagView());
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// 解绑`tagViewsChange`、`tagViewsShowModel`、`changLayoutRoute`公共事件，防止多次触发
|
||||
emitter.off("tagViewsChange");
|
||||
emitter.off("tagViewsShowModel");
|
||||
emitter.off("changLayoutRoute");
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="!showTags" ref="containerDom" class="tags-view">
|
||||
<span v-show="isShowArrow" class="arrow-left">
|
||||
<IconifyIconOffline :icon="ArrowLeftSLine" @click="handleScroll(200)" />
|
||||
</span>
|
||||
<div
|
||||
ref="scrollbarDom"
|
||||
class="scroll-container"
|
||||
:class="showModel === 'chrome' && 'chrome-scroll-container'"
|
||||
@wheel.prevent="handleWheel"
|
||||
>
|
||||
<div ref="tabDom" class="tab select-none" :style="getTabStyle">
|
||||
<div
|
||||
v-for="(item, index) in multiTags"
|
||||
:ref="'dynamic' + index"
|
||||
:key="index"
|
||||
:class="[
|
||||
'scroll-item is-closable',
|
||||
linkIsActive(item),
|
||||
showModel === 'chrome' && 'chrome-item',
|
||||
isFixedTag(item) && 'fixed-tag'
|
||||
]"
|
||||
@contextmenu.prevent="openMenu(item, $event)"
|
||||
@mouseenter.prevent="onMouseenter(index)"
|
||||
@mouseleave.prevent="onMouseleave(index)"
|
||||
@click="tagOnClick(item)"
|
||||
>
|
||||
<template v-if="showModel !== 'chrome'">
|
||||
<span
|
||||
class="tag-title dark:text-text_color_primary! dark:hover:text-primary!"
|
||||
>
|
||||
{{ item.meta.title }}
|
||||
</span>
|
||||
<span
|
||||
v-if="
|
||||
isFixedTag(item)
|
||||
? false
|
||||
: iconIsActive(item, index) ||
|
||||
(index === activeIndex && index !== 0)
|
||||
"
|
||||
class="el-icon-close"
|
||||
@click.stop="deleteMenu(item)"
|
||||
>
|
||||
<IconifyIconOffline :icon="Close" />
|
||||
</span>
|
||||
<span
|
||||
v-if="showModel !== 'card'"
|
||||
:ref="'schedule' + index"
|
||||
:class="[scheduleIsActive(item)]"
|
||||
/>
|
||||
</template>
|
||||
<div v-else class="chrome-tab">
|
||||
<div class="chrome-tab__bg">
|
||||
<TagChrome />
|
||||
</div>
|
||||
<span class="tag-title">
|
||||
{{ item.meta.title }}
|
||||
</span>
|
||||
<span
|
||||
v-if="isFixedTag(item) ? false : index !== 0"
|
||||
class="chrome-close-btn"
|
||||
@click.stop="deleteMenu(item)"
|
||||
>
|
||||
<IconifyIconOffline :icon="Close" />
|
||||
</span>
|
||||
<span class="chrome-tab-divider" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span v-show="isShowArrow" class="arrow-right">
|
||||
<IconifyIconOffline :icon="ArrowRightSLine" @click="handleScroll(-200)" />
|
||||
</span>
|
||||
<!-- 右键菜单按钮 -->
|
||||
<transition name="el-zoom-in-top">
|
||||
<ul
|
||||
v-show="visible"
|
||||
ref="contextmenuRef"
|
||||
:key="Math.random()"
|
||||
:style="getContextMenuStyle"
|
||||
class="contextmenu"
|
||||
>
|
||||
<div
|
||||
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)">
|
||||
<IconifyIconOffline :icon="item.icon" />
|
||||
{{ item.text }}
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</transition>
|
||||
<!-- 右侧功能按钮 -->
|
||||
<el-dropdown
|
||||
trigger="click"
|
||||
placement="bottom-end"
|
||||
@command="handleCommand"
|
||||
>
|
||||
<span class="arrow-down">
|
||||
<IconifyIconOffline :icon="ArrowDown" 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" />
|
||||
{{ item.text }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import url("./index.scss");
|
||||
</style>
|
||||
@@ -0,0 +1,110 @@
|
||||
<script setup lang="ts">
|
||||
import { useRoute } from "vue-router";
|
||||
import { ref, unref, watch, onMounted, nextTick } from "vue";
|
||||
|
||||
defineOptions({
|
||||
name: "LayFrame"
|
||||
});
|
||||
|
||||
const props = defineProps<{
|
||||
frameInfo?: {
|
||||
frameSrc?: string;
|
||||
fullPath?: string;
|
||||
};
|
||||
}>();
|
||||
|
||||
const loading = ref(true);
|
||||
const currentRoute = useRoute();
|
||||
const frameSrc = ref<string>("");
|
||||
const frameRef = ref<HTMLElement | null>(null);
|
||||
const fallbackTimer = ref<number | null>(null);
|
||||
|
||||
if (unref(currentRoute.meta)?.frameSrc) {
|
||||
frameSrc.value = unref(currentRoute.meta)?.frameSrc as string;
|
||||
}
|
||||
|
||||
function clearFallbackTimer() {
|
||||
if (fallbackTimer.value !== null) {
|
||||
clearTimeout(fallbackTimer.value);
|
||||
fallbackTimer.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
function hideLoading() {
|
||||
loading.value = false;
|
||||
clearFallbackTimer();
|
||||
}
|
||||
|
||||
function init() {
|
||||
nextTick(() => {
|
||||
const iframe = unref(frameRef);
|
||||
if (!iframe) return;
|
||||
const _frame = iframe as any;
|
||||
if (_frame.attachEvent) {
|
||||
_frame.attachEvent("onload", hideLoading);
|
||||
} else {
|
||||
iframe.onload = hideLoading;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let isRedirect = false;
|
||||
|
||||
watch(
|
||||
() => currentRoute.fullPath,
|
||||
path => {
|
||||
if (
|
||||
currentRoute.name === "Redirect" &&
|
||||
props.frameInfo?.fullPath &&
|
||||
path.includes(props.frameInfo.fullPath)
|
||||
) {
|
||||
isRedirect = true;
|
||||
loading.value = true;
|
||||
return;
|
||||
}
|
||||
if (props.frameInfo?.fullPath === path && isRedirect) {
|
||||
loading.value = true;
|
||||
clearFallbackTimer();
|
||||
const url = new URL(props.frameInfo.frameSrc, window.location.origin);
|
||||
const joinChar = url.search ? "&" : "?";
|
||||
frameSrc.value = `${props.frameInfo.frameSrc}${joinChar}t=${Date.now()}`;
|
||||
fallbackTimer.value = window.setTimeout(() => {
|
||||
if (loading.value) {
|
||||
hideLoading();
|
||||
}
|
||||
}, 1500);
|
||||
isRedirect = false;
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-loading="loading" class="frame" element-loading-text="加载中...">
|
||||
<iframe ref="frameRef" :src="frameSrc" class="frame-iframe" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.frame {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
.frame-iframe {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin: 2px 0 0 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,26 @@
|
||||
import { ref } from "vue";
|
||||
|
||||
export function useBoolean(initValue = false) {
|
||||
const bool = ref(initValue);
|
||||
|
||||
function setBool(value: boolean) {
|
||||
bool.value = value;
|
||||
}
|
||||
function setTrue() {
|
||||
setBool(true);
|
||||
}
|
||||
function setFalse() {
|
||||
setBool(false);
|
||||
}
|
||||
function toggle() {
|
||||
setBool(!bool.value);
|
||||
}
|
||||
|
||||
return {
|
||||
bool,
|
||||
setBool,
|
||||
setTrue,
|
||||
setFalse,
|
||||
toggle
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,138 @@
|
||||
import { ref } from "vue";
|
||||
import { getConfig } from "@/config";
|
||||
import { useLayout } from "./useLayout";
|
||||
import { removeToken } from "@/utils/auth";
|
||||
import { routerArrays } from "@/layout/types";
|
||||
import { router, resetRouter } from "@/router";
|
||||
import type { themeColorsType } from "../types";
|
||||
import { useAppStoreHook } from "@/store/modules/app";
|
||||
import { useEpThemeStoreHook } from "@/store/modules/epTheme";
|
||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||
import { darken, lighten, useGlobal, storageLocal } from "@pureadmin/utils";
|
||||
|
||||
export function useDataThemeChange() {
|
||||
const { layoutTheme, layout } = useLayout();
|
||||
const themeColors = ref<Array<themeColorsType>>([
|
||||
/* 亮白色 */
|
||||
{ color: "#ffffff", themeColor: "light" },
|
||||
/* 道奇蓝 */
|
||||
{ color: "#1b2a47", themeColor: "default" },
|
||||
/* 深紫罗兰色 */
|
||||
{ color: "#722ed1", themeColor: "saucePurple" },
|
||||
/* 深粉色 */
|
||||
{ color: "#eb2f96", themeColor: "pink" },
|
||||
/* 猩红色 */
|
||||
{ color: "#f5222d", themeColor: "dusk" },
|
||||
/* 橙红色 */
|
||||
{ color: "#fa541c", themeColor: "volcano" },
|
||||
/* 绿宝石 */
|
||||
{ color: "#13c2c2", themeColor: "mingQing" },
|
||||
/* 酸橙绿 */
|
||||
{ color: "#52c41a", themeColor: "auroraGreen" }
|
||||
]);
|
||||
|
||||
const { $storage } = useGlobal<GlobalPropertiesApi>();
|
||||
const dataTheme = ref<boolean>($storage?.layout?.darkMode);
|
||||
const overallStyle = ref<string>($storage?.layout?.overallStyle);
|
||||
const body = document.documentElement as HTMLElement;
|
||||
|
||||
function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
|
||||
const targetEl = target || document.body;
|
||||
let { className } = targetEl;
|
||||
className = className.replace(clsName, "").trim();
|
||||
targetEl.className = flag ? `${className} ${clsName}` : className;
|
||||
}
|
||||
|
||||
/** 设置导航主题色 */
|
||||
function setLayoutThemeColor(
|
||||
theme = getConfig().Theme ?? "light",
|
||||
isClick = true
|
||||
) {
|
||||
layoutTheme.value.theme = theme;
|
||||
document.documentElement.setAttribute("data-theme", theme);
|
||||
// 如果非isClick，保留之前的themeColor
|
||||
const storageThemeColor = $storage.layout.themeColor;
|
||||
$storage.layout = {
|
||||
layout: layout.value,
|
||||
theme,
|
||||
darkMode: dataTheme.value,
|
||||
sidebarStatus: $storage.layout?.sidebarStatus,
|
||||
epThemeColor: $storage.layout?.epThemeColor,
|
||||
themeColor: isClick ? theme : storageThemeColor,
|
||||
overallStyle: overallStyle.value
|
||||
};
|
||||
|
||||
if (theme === "default" || theme === "light") {
|
||||
setEpThemeColor(getConfig().EpThemeColor);
|
||||
} else {
|
||||
const colors = themeColors.value.find(v => v.themeColor === theme);
|
||||
setEpThemeColor(colors.color);
|
||||
}
|
||||
}
|
||||
|
||||
function setPropertyPrimary(mode: string, i: number, color: string) {
|
||||
document.documentElement.style.setProperty(
|
||||
`--el-color-primary-${mode}-${i}`,
|
||||
dataTheme.value ? darken(color, i / 10) : lighten(color, i / 10)
|
||||
);
|
||||
}
|
||||
|
||||
/** 设置 `element-plus` 主题色 */
|
||||
const setEpThemeColor = (color: string) => {
|
||||
useEpThemeStoreHook().setEpThemeColor(color);
|
||||
document.documentElement.style.setProperty("--el-color-primary", color);
|
||||
for (let i = 1; i <= 2; i++) {
|
||||
setPropertyPrimary("dark", i, color);
|
||||
}
|
||||
for (let i = 1; i <= 9; i++) {
|
||||
setPropertyPrimary("light", i, color);
|
||||
}
|
||||
};
|
||||
|
||||
/** 浅色、深色整体风格切换 */
|
||||
function dataThemeChange(overall?: string) {
|
||||
overallStyle.value = overall;
|
||||
if (useEpThemeStoreHook().epTheme === "light" && dataTheme.value) {
|
||||
setLayoutThemeColor("default", false);
|
||||
} else {
|
||||
setLayoutThemeColor(useEpThemeStoreHook().epTheme, false);
|
||||
}
|
||||
|
||||
if (dataTheme.value) {
|
||||
document.documentElement.classList.add("dark");
|
||||
} else {
|
||||
if ($storage.layout.themeColor === "light") {
|
||||
setLayoutThemeColor("light", false);
|
||||
}
|
||||
document.documentElement.classList.remove("dark");
|
||||
}
|
||||
}
|
||||
|
||||
/** 清空缓存并返回登录页 */
|
||||
function onReset() {
|
||||
removeToken();
|
||||
storageLocal().clear();
|
||||
const { Grey, Weak, MultiTagsCache, EpThemeColor, Layout } = getConfig();
|
||||
useAppStoreHook().setLayout(Layout);
|
||||
setEpThemeColor(EpThemeColor);
|
||||
useMultiTagsStoreHook().multiTagsCacheChange(MultiTagsCache);
|
||||
toggleClass(Grey, "html-grey", document.querySelector("html"));
|
||||
toggleClass(Weak, "html-weakness", document.querySelector("html"));
|
||||
router.push("/login");
|
||||
useMultiTagsStoreHook().handleTags("equal", [...routerArrays]);
|
||||
resetRouter();
|
||||
}
|
||||
|
||||
return {
|
||||
body,
|
||||
dataTheme,
|
||||
overallStyle,
|
||||
layoutTheme,
|
||||
themeColors,
|
||||
onReset,
|
||||
toggleClass,
|
||||
dataThemeChange,
|
||||
setEpThemeColor,
|
||||
setLayoutThemeColor
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import { computed } from "vue";
|
||||
import { routerArrays } from "../types";
|
||||
import { useGlobal } from "@pureadmin/utils";
|
||||
import { useMultiTagsStore } from "@/store/modules/multiTags";
|
||||
|
||||
export function useLayout() {
|
||||
const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
|
||||
|
||||
const initStorage = () => {
|
||||
/** 路由 */
|
||||
if (
|
||||
useMultiTagsStore().multiTagsCache &&
|
||||
(!$storage.tags || $storage.tags.length === 0)
|
||||
) {
|
||||
$storage.tags = routerArrays;
|
||||
}
|
||||
/** 导航 */
|
||||
if (!$storage.layout) {
|
||||
$storage.layout = {
|
||||
layout: $config?.Layout ?? "vertical",
|
||||
theme: $config?.Theme ?? "light",
|
||||
darkMode: $config?.DarkMode ?? false,
|
||||
sidebarStatus: $config?.SidebarStatus ?? true,
|
||||
epThemeColor: $config?.EpThemeColor ?? "#409EFF",
|
||||
themeColor: $config?.Theme ?? "light",
|
||||
overallStyle: $config?.OverallStyle ?? "light"
|
||||
};
|
||||
}
|
||||
/** 灰色模式、色弱模式、隐藏标签页 */
|
||||
if (!$storage.configure) {
|
||||
$storage.configure = {
|
||||
grey: $config?.Grey ?? false,
|
||||
weak: $config?.Weak ?? false,
|
||||
hideTabs: $config?.HideTabs ?? false,
|
||||
hideFooter: $config.HideFooter ?? true,
|
||||
showLogo: $config?.ShowLogo ?? true,
|
||||
showModel: $config?.ShowModel ?? "smart",
|
||||
multiTagsCache: $config?.MultiTagsCache ?? false,
|
||||
stretch: $config?.Stretch ?? false
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
/** 清空缓存后从platform-config.json读取默认配置并赋值到storage中 */
|
||||
const layout = computed(() => {
|
||||
return $storage?.layout.layout;
|
||||
});
|
||||
|
||||
const layoutTheme = computed(() => {
|
||||
return $storage.layout;
|
||||
});
|
||||
|
||||
return {
|
||||
layout,
|
||||
layoutTheme,
|
||||
initStorage
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
const MAP = new Map();
|
||||
|
||||
export const useMultiFrame = () => {
|
||||
function setMap(path, Comp) {
|
||||
MAP.set(path, Comp);
|
||||
}
|
||||
|
||||
function getMap(path?) {
|
||||
if (path) {
|
||||
return MAP.get(path);
|
||||
}
|
||||
return [...MAP.entries()];
|
||||
}
|
||||
|
||||
function delMap(path) {
|
||||
MAP.delete(path);
|
||||
}
|
||||
|
||||
return {
|
||||
setMap,
|
||||
getMap,
|
||||
delMap,
|
||||
MAP
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,157 @@
|
||||
import { storeToRefs } from "pinia";
|
||||
import { getConfig } from "@/config";
|
||||
import { emitter } from "@/utils/mitt";
|
||||
import Avatar from "@/assets/user.jpg";
|
||||
import { getTopMenu } from "@/router/utils";
|
||||
import { useFullscreen } from "@vueuse/core";
|
||||
import type { routeMetaType } from "../types";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { router, remainingPaths } from "@/router";
|
||||
import { computed, type CSSProperties } from "vue";
|
||||
import { useAppStoreHook } from "@/store/modules/app";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { useGlobal, isAllEmpty } from "@pureadmin/utils";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
import ExitFullscreen from "~icons/ri/fullscreen-exit-fill";
|
||||
import Fullscreen from "~icons/ri/fullscreen-fill";
|
||||
|
||||
const errorInfo =
|
||||
"The current routing configuration is incorrect, please check the configuration";
|
||||
|
||||
export function useNav() {
|
||||
const route = useRoute();
|
||||
const pureApp = useAppStoreHook();
|
||||
const routers = useRouter().options.routes;
|
||||
const { isFullscreen, toggle } = useFullscreen();
|
||||
const { wholeMenus } = storeToRefs(usePermissionStoreHook());
|
||||
/** 平台`layout`中所有`el-tooltip`的`effect`配置，默认`light` */
|
||||
const tooltipEffect = getConfig()?.TooltipEffect ?? "light";
|
||||
|
||||
const getDivStyle = computed((): CSSProperties => {
|
||||
return {
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
overflow: "hidden"
|
||||
};
|
||||
});
|
||||
|
||||
/** 头像（如果头像为空则使用 src/assets/user.jpg ） */
|
||||
const userAvatar = computed(() => {
|
||||
return isAllEmpty(useUserStoreHook()?.avatar)
|
||||
? Avatar
|
||||
: useUserStoreHook()?.avatar;
|
||||
});
|
||||
|
||||
/** 昵称（如果昵称为空则显示用户名） */
|
||||
const username = computed(() => {
|
||||
return isAllEmpty(useUserStoreHook()?.nickname)
|
||||
? useUserStoreHook()?.username
|
||||
: useUserStoreHook()?.nickname;
|
||||
});
|
||||
|
||||
const avatarsStyle = computed(() => {
|
||||
return username.value ? { marginRight: "10px" } : "";
|
||||
});
|
||||
|
||||
const isCollapse = computed(() => {
|
||||
return !pureApp.getSidebarStatus;
|
||||
});
|
||||
|
||||
const device = computed(() => {
|
||||
return pureApp.getDevice;
|
||||
});
|
||||
|
||||
const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
|
||||
const layout = computed(() => {
|
||||
return $storage?.layout?.layout;
|
||||
});
|
||||
|
||||
const title = computed(() => {
|
||||
return $config.Title;
|
||||
});
|
||||
|
||||
/** 动态title */
|
||||
function changeTitle(meta: routeMetaType) {
|
||||
const Title = getConfig().Title;
|
||||
if (Title) document.title = `${meta.title} | ${Title}`;
|
||||
else document.title = meta.title;
|
||||
}
|
||||
|
||||
/** 退出登录 */
|
||||
function logout() {
|
||||
useUserStoreHook().logOut();
|
||||
}
|
||||
|
||||
function backTopMenu() {
|
||||
router.push(getTopMenu()?.path);
|
||||
}
|
||||
|
||||
function onPanel() {
|
||||
emitter.emit("openPanel");
|
||||
}
|
||||
|
||||
function toggleSideBar() {
|
||||
pureApp.toggleSideBar();
|
||||
}
|
||||
|
||||
function handleResize(menuRef) {
|
||||
menuRef?.handleResize();
|
||||
}
|
||||
|
||||
function resolvePath(route) {
|
||||
if (!route.children) return console.error(errorInfo);
|
||||
const httpReg = /^http(s?):\/\//;
|
||||
const routeChildPath = route.children[0]?.path;
|
||||
if (httpReg.test(routeChildPath)) {
|
||||
return route.path + "/" + routeChildPath;
|
||||
} else {
|
||||
return routeChildPath;
|
||||
}
|
||||
}
|
||||
|
||||
function menuSelect(indexPath: string) {
|
||||
if (wholeMenus.value.length === 0 || isRemaining(indexPath)) return;
|
||||
emitter.emit("changLayoutRoute", indexPath);
|
||||
}
|
||||
|
||||
/** 判断路径是否参与菜单 */
|
||||
function isRemaining(path: string) {
|
||||
return remainingPaths.includes(path);
|
||||
}
|
||||
|
||||
/** 获取`logo` */
|
||||
function getLogo() {
|
||||
return new URL("/logo.svg", import.meta.url).href;
|
||||
}
|
||||
|
||||
return {
|
||||
route,
|
||||
title,
|
||||
device,
|
||||
layout,
|
||||
logout,
|
||||
routers,
|
||||
$storage,
|
||||
isFullscreen,
|
||||
Fullscreen,
|
||||
ExitFullscreen,
|
||||
toggle,
|
||||
backTopMenu,
|
||||
onPanel,
|
||||
getDivStyle,
|
||||
changeTitle,
|
||||
toggleSideBar,
|
||||
menuSelect,
|
||||
handleResize,
|
||||
resolvePath,
|
||||
getLogo,
|
||||
isCollapse,
|
||||
pureApp,
|
||||
username,
|
||||
userAvatar,
|
||||
avatarsStyle,
|
||||
tooltipEffect
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,252 @@
|
||||
import {
|
||||
ref,
|
||||
unref,
|
||||
computed,
|
||||
reactive,
|
||||
onMounted,
|
||||
type CSSProperties,
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
import type { tagsViewsType } from "../types";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { responsiveStorageNameSpace } from "@/config";
|
||||
import { useSettingStoreHook } from "@/store/modules/settings";
|
||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||
import {
|
||||
isEqual,
|
||||
isBoolean,
|
||||
storageLocal,
|
||||
toggleClass,
|
||||
hasClass
|
||||
} from "@pureadmin/utils";
|
||||
|
||||
import Fullscreen from "~icons/ri/fullscreen-fill";
|
||||
import CloseAllTags from "~icons/ri/subtract-line";
|
||||
import CloseOtherTags from "~icons/ri/text-spacing";
|
||||
import CloseRightTags from "~icons/ri/text-direction-l";
|
||||
import CloseLeftTags from "~icons/ri/text-direction-r";
|
||||
import RefreshRight from "~icons/ep/refresh-right";
|
||||
import Close from "~icons/ep/close";
|
||||
|
||||
export function useTags() {
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const instance = getCurrentInstance();
|
||||
const pureSetting = useSettingStoreHook();
|
||||
|
||||
const buttonTop = ref(0);
|
||||
const buttonLeft = ref(0);
|
||||
const translateX = ref(0);
|
||||
const visible = ref(false);
|
||||
const activeIndex = ref(-1);
|
||||
// 当前右键选中的路由信息
|
||||
const currentSelect = ref({});
|
||||
const isScrolling = ref(false);
|
||||
|
||||
/** 显示模式，默认灵动模式 */
|
||||
const showModel = ref(
|
||||
storageLocal().getItem<StorageConfigs>(
|
||||
`${responsiveStorageNameSpace()}configure`
|
||||
)?.showModel || "smart"
|
||||
);
|
||||
/** 是否隐藏标签页，默认显示 */
|
||||
const showTags =
|
||||
ref(
|
||||
storageLocal().getItem<StorageConfigs>(
|
||||
`${responsiveStorageNameSpace()}configure`
|
||||
).hideTabs
|
||||
) ?? ref("false");
|
||||
const multiTags: any = computed(() => {
|
||||
return useMultiTagsStoreHook().multiTags;
|
||||
});
|
||||
|
||||
const tagsViews = reactive<Array<tagsViewsType>>([
|
||||
{
|
||||
icon: RefreshRight,
|
||||
text: "重新加载",
|
||||
divided: false,
|
||||
disabled: false,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: Close,
|
||||
text: "关闭当前标签页",
|
||||
divided: false,
|
||||
disabled: multiTags.value.length > 1 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: CloseLeftTags,
|
||||
text: "关闭左侧标签页",
|
||||
divided: true,
|
||||
disabled: multiTags.value.length > 1 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: CloseRightTags,
|
||||
text: "关闭右侧标签页",
|
||||
divided: false,
|
||||
disabled: multiTags.value.length > 1 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: CloseOtherTags,
|
||||
text: "关闭其他标签页",
|
||||
divided: true,
|
||||
disabled: multiTags.value.length > 2 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: CloseAllTags,
|
||||
text: "关闭全部标签页",
|
||||
divided: false,
|
||||
disabled: multiTags.value.length > 1 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: Fullscreen,
|
||||
text: "内容区全屏",
|
||||
divided: true,
|
||||
disabled: false,
|
||||
show: true
|
||||
}
|
||||
]);
|
||||
|
||||
function conditionHandle(item, previous, next) {
|
||||
const currentName = route.name || "";
|
||||
const itemName = item.name || "";
|
||||
|
||||
if (isBoolean(route?.meta?.showLink) && route?.meta?.showLink === false) {
|
||||
if (Object.keys(route.query).length > 0) {
|
||||
return currentName === itemName && isEqual(route.query, item.query)
|
||||
? previous
|
||||
: next;
|
||||
} else {
|
||||
return currentName === itemName && isEqual(route.params, item.params)
|
||||
? previous
|
||||
: next;
|
||||
}
|
||||
} else {
|
||||
return currentName === itemName ? previous : next;
|
||||
}
|
||||
}
|
||||
|
||||
const isFixedTag = computed(() => {
|
||||
return item => {
|
||||
return isBoolean(item?.meta?.fixedTag) && item?.meta?.fixedTag === true;
|
||||
};
|
||||
});
|
||||
|
||||
const iconIsActive = computed(() => {
|
||||
return (item, index) => {
|
||||
if (index === 0) return;
|
||||
return conditionHandle(item, true, false);
|
||||
};
|
||||
});
|
||||
|
||||
const linkIsActive = computed(() => {
|
||||
return item => {
|
||||
return conditionHandle(item, "is-active", "");
|
||||
};
|
||||
});
|
||||
|
||||
const scheduleIsActive = computed(() => {
|
||||
return item => {
|
||||
return conditionHandle(item, "schedule-active", "");
|
||||
};
|
||||
});
|
||||
|
||||
const getTabStyle = computed((): CSSProperties => {
|
||||
return {
|
||||
transform: `translateX(${translateX.value}px)`,
|
||||
transition: isScrolling.value ? "none" : "transform 0.5s ease-in-out"
|
||||
};
|
||||
});
|
||||
|
||||
const getContextMenuStyle = computed((): CSSProperties => {
|
||||
return { left: buttonLeft.value + "px", top: buttonTop.value + "px" };
|
||||
});
|
||||
|
||||
const closeMenu = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
/** 鼠标移入添加激活样式 */
|
||||
function onMouseenter(index) {
|
||||
if (index) activeIndex.value = index;
|
||||
if (unref(showModel) === "smart") {
|
||||
if (hasClass(instance.refs["schedule" + index][0], "schedule-active"))
|
||||
return;
|
||||
toggleClass(true, "schedule-in", instance.refs["schedule" + index][0]);
|
||||
toggleClass(false, "schedule-out", instance.refs["schedule" + index][0]);
|
||||
} else {
|
||||
if (hasClass(instance.refs["dynamic" + index][0], "is-active")) return;
|
||||
toggleClass(true, "card-in", instance.refs["dynamic" + index][0]);
|
||||
toggleClass(false, "card-out", instance.refs["dynamic" + index][0]);
|
||||
}
|
||||
}
|
||||
|
||||
/** 鼠标移出恢复默认样式 */
|
||||
function onMouseleave(index) {
|
||||
activeIndex.value = -1;
|
||||
if (unref(showModel) === "smart") {
|
||||
if (hasClass(instance.refs["schedule" + index][0], "schedule-active"))
|
||||
return;
|
||||
toggleClass(false, "schedule-in", instance.refs["schedule" + index][0]);
|
||||
toggleClass(true, "schedule-out", instance.refs["schedule" + index][0]);
|
||||
} else {
|
||||
if (hasClass(instance.refs["dynamic" + index][0], "is-active")) return;
|
||||
toggleClass(false, "card-in", instance.refs["dynamic" + index][0]);
|
||||
toggleClass(true, "card-out", instance.refs["dynamic" + index][0]);
|
||||
}
|
||||
}
|
||||
|
||||
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>(
|
||||
`${responsiveStorageNameSpace()}configure`
|
||||
);
|
||||
configure.showModel = "card";
|
||||
storageLocal().setItem(
|
||||
`${responsiveStorageNameSpace()}configure`,
|
||||
configure
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
Close,
|
||||
route,
|
||||
router,
|
||||
visible,
|
||||
showTags,
|
||||
instance,
|
||||
multiTags,
|
||||
showModel,
|
||||
tagsViews,
|
||||
buttonTop,
|
||||
buttonLeft,
|
||||
translateX,
|
||||
isFixedTag,
|
||||
pureSetting,
|
||||
activeIndex,
|
||||
getTabStyle,
|
||||
isScrolling,
|
||||
iconIsActive,
|
||||
linkIsActive,
|
||||
currentSelect,
|
||||
scheduleIsActive,
|
||||
getContextMenuStyle,
|
||||
closeMenu,
|
||||
onMounted,
|
||||
onMouseenter,
|
||||
onMouseleave,
|
||||
onContentFullScreen
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,232 @@
|
||||
<script setup lang="ts">
|
||||
import "animate.css";
|
||||
// 引入 src/components/ReIcon/src/offlineIcon.ts 文件中所有使用addIcon添加过的本地图标
|
||||
import "@/components/ReIcon/src/offlineIcon";
|
||||
import { setType } from "./types";
|
||||
import { useLayout } from "./hooks/useLayout";
|
||||
import { useAppStoreHook } from "@/store/modules/app";
|
||||
import { useSettingStoreHook } from "@/store/modules/settings";
|
||||
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
|
||||
import {
|
||||
h,
|
||||
ref,
|
||||
reactive,
|
||||
computed,
|
||||
onMounted,
|
||||
onBeforeMount,
|
||||
defineComponent
|
||||
} from "vue";
|
||||
import {
|
||||
useDark,
|
||||
useGlobal,
|
||||
deviceDetection,
|
||||
useResizeObserver
|
||||
} from "@pureadmin/utils";
|
||||
|
||||
import LayTag from "./components/lay-tag/index.vue";
|
||||
import LayNavbar from "./components/lay-navbar/index.vue";
|
||||
import LayContent from "./components/lay-content/index.vue";
|
||||
import NavVertical from "./components/lay-sidebar/NavVertical.vue";
|
||||
import NavHorizontal from "./components/lay-sidebar/NavHorizontal.vue";
|
||||
import BackTopIcon from "@/assets/svg/back_top.svg?component";
|
||||
|
||||
const appWrapperRef = ref();
|
||||
const { isDark } = useDark();
|
||||
const { layout } = useLayout();
|
||||
const isMobile = deviceDetection();
|
||||
const pureSetting = useSettingStoreHook();
|
||||
const { $storage } = useGlobal<GlobalPropertiesApi>();
|
||||
|
||||
const set: setType = reactive({
|
||||
sidebar: computed(() => {
|
||||
return useAppStoreHook().sidebar;
|
||||
}),
|
||||
|
||||
device: computed(() => {
|
||||
return useAppStoreHook().device;
|
||||
}),
|
||||
|
||||
fixedHeader: computed(() => {
|
||||
return pureSetting.fixedHeader;
|
||||
}),
|
||||
|
||||
classes: computed(() => {
|
||||
return {
|
||||
hideSidebar: !set.sidebar.opened,
|
||||
openSidebar: set.sidebar.opened,
|
||||
withoutAnimation: set.sidebar.withoutAnimation,
|
||||
mobile: set.device === "mobile"
|
||||
};
|
||||
}),
|
||||
|
||||
hideTabs: computed(() => {
|
||||
return $storage?.configure.hideTabs;
|
||||
})
|
||||
});
|
||||
|
||||
function setTheme(layoutModel: string) {
|
||||
window.document.body.setAttribute("layout", layoutModel);
|
||||
$storage.layout = {
|
||||
layout: `${layoutModel}`,
|
||||
theme: $storage.layout?.theme,
|
||||
darkMode: $storage.layout?.darkMode,
|
||||
sidebarStatus: $storage.layout?.sidebarStatus,
|
||||
epThemeColor: $storage.layout?.epThemeColor,
|
||||
themeColor: $storage.layout?.themeColor,
|
||||
overallStyle: $storage.layout?.overallStyle
|
||||
};
|
||||
}
|
||||
|
||||
function toggle(device: string, bool: boolean) {
|
||||
useAppStoreHook().toggleDevice(device);
|
||||
useAppStoreHook().toggleSideBar(bool, "resize");
|
||||
}
|
||||
|
||||
// 判断是否可自动关闭菜单栏
|
||||
let isAutoCloseSidebar = true;
|
||||
|
||||
useResizeObserver(appWrapperRef, entries => {
|
||||
if (isMobile) return;
|
||||
const entry = entries[0];
|
||||
const [{ inlineSize: width, blockSize: height }] = entry.borderBoxSize;
|
||||
useAppStoreHook().setViewportSize({ width, height });
|
||||
width <= 760 ? setTheme("vertical") : setTheme(useAppStoreHook().layout);
|
||||
/** width app-wrapper类容器宽度
|
||||
* 0 < width <= 760 隐藏侧边栏
|
||||
* 760 < width <= 990 折叠侧边栏
|
||||
* width > 990 展开侧边栏
|
||||
*/
|
||||
if (width > 0 && width <= 760) {
|
||||
toggle("mobile", false);
|
||||
isAutoCloseSidebar = true;
|
||||
} else if (width > 760 && width <= 990) {
|
||||
if (isAutoCloseSidebar) {
|
||||
toggle("desktop", false);
|
||||
isAutoCloseSidebar = false;
|
||||
}
|
||||
} else if (width > 990 && !set.sidebar.isClickCollapse) {
|
||||
toggle("desktop", true);
|
||||
isAutoCloseSidebar = true;
|
||||
} else {
|
||||
toggle("desktop", false);
|
||||
isAutoCloseSidebar = false;
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (isMobile) {
|
||||
toggle("mobile", false);
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeMount(() => {
|
||||
useDataThemeChange().dataThemeChange($storage.layout?.overallStyle);
|
||||
});
|
||||
|
||||
const LayHeader = defineComponent({
|
||||
name: "LayHeader",
|
||||
render() {
|
||||
return h(
|
||||
"div",
|
||||
{
|
||||
class: { "fixed-header": set.fixedHeader },
|
||||
style: [
|
||||
set.hideTabs && layout.value.includes("horizontal")
|
||||
? isDark.value
|
||||
? "box-shadow: 0 1px 4px #0d0d0d"
|
||||
: "box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08)"
|
||||
: ""
|
||||
]
|
||||
},
|
||||
{
|
||||
default: () => [
|
||||
!pureSetting.hiddenSideBar &&
|
||||
(layout.value.includes("vertical") || layout.value.includes("mix"))
|
||||
? h(LayNavbar)
|
||||
: null,
|
||||
!pureSetting.hiddenSideBar && layout.value.includes("horizontal")
|
||||
? h(NavHorizontal)
|
||||
: null,
|
||||
h(LayTag)
|
||||
]
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="appWrapperRef" :class="['app-wrapper', set.classes]">
|
||||
<div
|
||||
v-show="
|
||||
set.device === 'mobile' &&
|
||||
set.sidebar.opened &&
|
||||
layout.includes('vertical')
|
||||
"
|
||||
class="app-mask"
|
||||
@click="useAppStoreHook().toggleSideBar()"
|
||||
/>
|
||||
<NavVertical
|
||||
v-show="
|
||||
!pureSetting.hiddenSideBar &&
|
||||
(layout.includes('vertical') || layout.includes('mix'))
|
||||
"
|
||||
/>
|
||||
<div
|
||||
:class="[
|
||||
'main-container',
|
||||
pureSetting.hiddenSideBar ? 'main-hidden' : ''
|
||||
]"
|
||||
>
|
||||
<div v-if="set.fixedHeader">
|
||||
<LayHeader />
|
||||
<!-- 主体内容 -->
|
||||
<LayContent :fixed-header="set.fixedHeader" />
|
||||
</div>
|
||||
<el-scrollbar v-else>
|
||||
<el-backtop
|
||||
title="回到顶部"
|
||||
target=".main-container .el-scrollbar__wrap"
|
||||
>
|
||||
<BackTopIcon />
|
||||
</el-backtop>
|
||||
<LayHeader />
|
||||
<!-- 主体内容 -->
|
||||
<LayContent :fixed-header="set.fixedHeader" />
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&::after {
|
||||
clear: both;
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&.mobile.openSidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.app-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 2001;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.re-screen {
|
||||
margin-top: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
import { unref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
defineOptions({
|
||||
name: "Redirect"
|
||||
});
|
||||
|
||||
const { currentRoute, replace } = useRouter();
|
||||
|
||||
const { params, query } = unref(currentRoute);
|
||||
const { path } = params;
|
||||
|
||||
const _path = Array.isArray(path) ? path.join("/") : path;
|
||||
|
||||
replace({
|
||||
path: "/" + _path,
|
||||
query
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div />
|
||||
</template>
|
||||
@@ -0,0 +1,93 @@
|
||||
import type { FunctionalComponent } from "vue";
|
||||
const { VITE_HIDE_HOME } = import.meta.env;
|
||||
|
||||
export const routerArrays: Array<RouteConfigs> =
|
||||
VITE_HIDE_HOME === "false"
|
||||
? [
|
||||
{
|
||||
path: "/simcae/console",
|
||||
name: "SimCAEConsole",
|
||||
meta: {
|
||||
title: "服务端控制台",
|
||||
icon: "ep/platform"
|
||||
}
|
||||
}
|
||||
]
|
||||
: [];
|
||||
|
||||
export type routeMetaType = {
|
||||
title?: string;
|
||||
icon?: string | FunctionalComponent;
|
||||
showLink?: boolean;
|
||||
savedPosition?: boolean;
|
||||
auths?: Array<string>;
|
||||
};
|
||||
|
||||
export type RouteConfigs = {
|
||||
path?: string;
|
||||
query?: object;
|
||||
params?: object;
|
||||
meta?: routeMetaType;
|
||||
children?: RouteConfigs[];
|
||||
name?: string;
|
||||
};
|
||||
|
||||
export type multiTagsType = {
|
||||
tags: Array<RouteConfigs>;
|
||||
};
|
||||
|
||||
export type tagsViewsType = {
|
||||
icon: string | FunctionalComponent;
|
||||
text: string;
|
||||
divided: boolean;
|
||||
disabled: boolean;
|
||||
show: boolean;
|
||||
};
|
||||
|
||||
export interface setType {
|
||||
sidebar: {
|
||||
opened: boolean;
|
||||
withoutAnimation: boolean;
|
||||
isClickCollapse: boolean;
|
||||
};
|
||||
device: string;
|
||||
fixedHeader: boolean;
|
||||
classes: {
|
||||
hideSidebar: boolean;
|
||||
openSidebar: boolean;
|
||||
withoutAnimation: boolean;
|
||||
mobile: boolean;
|
||||
};
|
||||
hideTabs: boolean;
|
||||
}
|
||||
|
||||
export type menuType = {
|
||||
id?: number;
|
||||
name?: string;
|
||||
path?: string;
|
||||
noShowingChildren?: boolean;
|
||||
children?: menuType[];
|
||||
value: unknown;
|
||||
meta?: {
|
||||
icon?: string;
|
||||
title?: string;
|
||||
rank?: number;
|
||||
showParent?: boolean;
|
||||
extraIcon?: string;
|
||||
};
|
||||
showTooltip?: boolean;
|
||||
parentId?: number;
|
||||
pathList?: number[];
|
||||
redirect?: string;
|
||||
};
|
||||
|
||||
export type themeColorsType = {
|
||||
color: string;
|
||||
themeColor: string;
|
||||
};
|
||||
|
||||
export interface scrollbarDomType extends HTMLElement {
|
||||
wrap?: {
|
||||
offsetWidth: number;
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user