|
|
@ -1,18 +1,19 @@ |
|
|
<script setup lang="ts"> |
|
|
<script setup lang="ts"> |
|
|
import path from "path"; |
|
|
import path from "path"; |
|
|
import { getConfig } from "@/config"; |
|
|
import { getConfig } from "@/config"; |
|
|
|
|
|
import extraIcon from "./extraIcon.vue"; |
|
|
import { childrenType } from "../../types"; |
|
|
import { childrenType } from "../../types"; |
|
|
import { useNav } from "@/layout/hooks/useNav"; |
|
|
import { useNav } from "@/layout/hooks/useNav"; |
|
|
import { transformI18n } from "@/plugins/i18n"; |
|
|
import { transformI18n } from "@/plugins/i18n"; |
|
|
import { useRenderIcon } from "@/components/ReIcon/src/hooks"; |
|
|
import { useRenderIcon } from "@/components/ReIcon/src/hooks"; |
|
|
import { ref, toRaw, PropType, nextTick, computed, CSSProperties } from "vue"; |
|
|
import { ref, toRaw, PropType, nextTick, computed, CSSProperties } from "vue"; |
|
|
|
|
|
|
|
|
import ArrowUp from "@iconify-icons/ep/arrow-up"; |
|
|
|
|
|
import EpArrowDown from "@iconify-icons/ep/arrow-down"; |
|
|
|
|
|
import ArrowLeft from "@iconify-icons/ep/arrow-left"; |
|
|
|
|
|
import ArrowRight from "@iconify-icons/ep/arrow-right"; |
|
|
|
|
|
|
|
|
import ArrowUp from "@iconify-icons/ep/arrow-up-bold"; |
|
|
|
|
|
import EpArrowDown from "@iconify-icons/ep/arrow-down-bold"; |
|
|
|
|
|
import ArrowLeft from "@iconify-icons/ep/arrow-left-bold"; |
|
|
|
|
|
import ArrowRight from "@iconify-icons/ep/arrow-right-bold"; |
|
|
|
|
|
|
|
|
const { layout, isCollapse, tooltipEffect } = useNav(); |
|
|
|
|
|
|
|
|
const { layout, isCollapse, tooltipEffect, getDivStyle } = useNav(); |
|
|
|
|
|
|
|
|
const props = defineProps({ |
|
|
const props = defineProps({ |
|
|
item: { |
|
|
item: { |
|
|
@ -28,33 +29,17 @@ const props = defineProps({ |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const getExtraIconStyle = computed((): CSSProperties => { |
|
|
|
|
|
if (!isCollapse.value) { |
|
|
|
|
|
return { |
|
|
|
|
|
position: "absolute", |
|
|
|
|
|
right: "10px" |
|
|
|
|
|
}; |
|
|
|
|
|
} else { |
|
|
|
|
|
return { |
|
|
|
|
|
position: "static" |
|
|
|
|
|
}; |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
const getNoDropdownStyle = computed((): CSSProperties => { |
|
|
|
|
|
|
|
|
const getSpanStyle = computed((): CSSProperties => { |
|
|
return { |
|
|
return { |
|
|
display: "flex", |
|
|
|
|
|
alignItems: "center" |
|
|
|
|
|
|
|
|
width: "100%", |
|
|
|
|
|
textAlign: "center" |
|
|
}; |
|
|
}; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const getDivStyle = computed((): CSSProperties => { |
|
|
|
|
|
|
|
|
const getNoDropdownStyle = computed((): CSSProperties => { |
|
|
return { |
|
|
return { |
|
|
width: !isCollapse.value ? "" : "100%", |
|
|
|
|
|
display: "flex", |
|
|
display: "flex", |
|
|
alignItems: "center", |
|
|
|
|
|
justifyContent: "space-between", |
|
|
|
|
|
overflow: "hidden" |
|
|
|
|
|
|
|
|
alignItems: "center" |
|
|
}; |
|
|
}; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
@ -66,19 +51,54 @@ const getMenuTextStyle = computed(() => { |
|
|
}; |
|
|
}; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const getSubTextStyle = computed((): CSSProperties => { |
|
|
|
|
|
|
|
|
const getsubMenuIconStyle = computed((): CSSProperties => { |
|
|
return { |
|
|
return { |
|
|
width: !isCollapse.value ? "210px" : "", |
|
|
|
|
|
display: "inline-block", |
|
|
|
|
|
overflow: "hidden", |
|
|
|
|
|
textOverflow: "ellipsis" |
|
|
|
|
|
|
|
|
display: "flex", |
|
|
|
|
|
justifyContent: "center", |
|
|
|
|
|
alignItems: "center", |
|
|
|
|
|
margin: |
|
|
|
|
|
layout.value === "horizontal" |
|
|
|
|
|
? "0 5px 0 0" |
|
|
|
|
|
: isCollapse.value |
|
|
|
|
|
? "0 auto" |
|
|
|
|
|
: "0 5px 0 0" |
|
|
}; |
|
|
}; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const getSpanStyle = computed(() => { |
|
|
|
|
|
return { |
|
|
|
|
|
overflow: "hidden", |
|
|
|
|
|
textOverflow: "ellipsis" |
|
|
|
|
|
|
|
|
const getSubTextStyle = computed((): CSSProperties => { |
|
|
|
|
|
if (!isCollapse.value) { |
|
|
|
|
|
return { |
|
|
|
|
|
width: "210px", |
|
|
|
|
|
display: "inline-block", |
|
|
|
|
|
overflow: "hidden", |
|
|
|
|
|
textOverflow: "ellipsis" |
|
|
|
|
|
}; |
|
|
|
|
|
} else { |
|
|
|
|
|
return { |
|
|
|
|
|
width: "" |
|
|
|
|
|
}; |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
const getSubMenuDivStyle = computed((): any => { |
|
|
|
|
|
return item => { |
|
|
|
|
|
return !isCollapse.value |
|
|
|
|
|
? { |
|
|
|
|
|
width: "100%", |
|
|
|
|
|
display: "flex", |
|
|
|
|
|
alignItems: "center", |
|
|
|
|
|
justifyContent: "space-between", |
|
|
|
|
|
overflow: "hidden" |
|
|
|
|
|
} |
|
|
|
|
|
: { |
|
|
|
|
|
width: "100%", |
|
|
|
|
|
textAlign: |
|
|
|
|
|
item?.parentId === null |
|
|
|
|
|
? "center" |
|
|
|
|
|
: layout.value === "mix" && item?.pathList?.length === 2 |
|
|
|
|
|
? "center" |
|
|
|
|
|
: "" |
|
|
|
|
|
}; |
|
|
}; |
|
|
}; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
@ -115,6 +135,20 @@ function hoverMenu(key) { |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 左侧菜单折叠后，当菜单没有图标时只显示第一个文字并加上省略号 |
|
|
|
|
|
function overflowSlice(text, item?: any) { |
|
|
|
|
|
const newText = |
|
|
|
|
|
(text?.length > 1 ? text.toString().slice(0, 1) : text) + "..."; |
|
|
|
|
|
if (item && !(isCollapse.value && item?.parentId === null)) { |
|
|
|
|
|
return layout.value === "mix" && |
|
|
|
|
|
item?.pathList?.length === 2 && |
|
|
|
|
|
isCollapse.value |
|
|
|
|
|
? newText |
|
|
|
|
|
: text; |
|
|
|
|
|
} |
|
|
|
|
|
return newText; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
function hasOneShowingChild( |
|
|
function hasOneShowingChild( |
|
|
children: childrenType[] = [], |
|
|
children: childrenType[] = [], |
|
|
parent: childrenType |
|
|
parent: childrenType |
|
|
@ -151,84 +185,78 @@ function resolvePath(routePath) { |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<template> |
|
|
<template> |
|
|
<template |
|
|
|
|
|
|
|
|
<el-menu-item |
|
|
v-if=" |
|
|
v-if=" |
|
|
hasOneShowingChild(props.item.children, props.item) && |
|
|
hasOneShowingChild(props.item.children, props.item) && |
|
|
(!onlyOneChild.children || onlyOneChild.noShowingChildren) |
|
|
(!onlyOneChild.children || onlyOneChild.noShowingChildren) |
|
|
" |
|
|
" |
|
|
|
|
|
:index="resolvePath(onlyOneChild.path)" |
|
|
|
|
|
:class="{ 'submenu-title-noDropdown': !isNest }" |
|
|
|
|
|
:style="getNoDropdownStyle" |
|
|
> |
|
|
> |
|
|
<el-menu-item |
|
|
|
|
|
:index="resolvePath(onlyOneChild.path)" |
|
|
|
|
|
:class="{ 'submenu-title-noDropdown': !isNest }" |
|
|
|
|
|
:style="getNoDropdownStyle" |
|
|
|
|
|
|
|
|
<div |
|
|
|
|
|
v-if="toRaw(props.item.meta.icon)" |
|
|
|
|
|
class="sub-menu-icon" |
|
|
|
|
|
:style="getsubMenuIconStyle" |
|
|
> |
|
|
> |
|
|
<div class="sub-menu-icon" v-if="toRaw(props.item.meta.icon)"> |
|
|
|
|
|
<component |
|
|
|
|
|
:is=" |
|
|
|
|
|
useRenderIcon( |
|
|
|
|
|
toRaw(onlyOneChild.meta.icon) || |
|
|
|
|
|
(props.item.meta && toRaw(props.item.meta.icon)) |
|
|
|
|
|
) |
|
|
|
|
|
" |
|
|
|
|
|
/> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div |
|
|
|
|
|
v-if=" |
|
|
|
|
|
isCollapse && |
|
|
|
|
|
layout === 'vertical' && |
|
|
|
|
|
props.item?.pathList?.length === 1 |
|
|
|
|
|
|
|
|
<component |
|
|
|
|
|
:is=" |
|
|
|
|
|
useRenderIcon( |
|
|
|
|
|
toRaw(onlyOneChild.meta.icon) || |
|
|
|
|
|
(props.item.meta && toRaw(props.item.meta.icon)) |
|
|
|
|
|
) |
|
|
" |
|
|
" |
|
|
:style="getDivStyle" |
|
|
|
|
|
> |
|
|
|
|
|
<span :style="getMenuTextStyle"> |
|
|
|
|
|
{{ transformI18n(onlyOneChild.meta.title) }} |
|
|
|
|
|
</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div |
|
|
|
|
|
v-if=" |
|
|
|
|
|
isCollapse && layout === 'mix' && props.item?.pathList?.length === 2 |
|
|
|
|
|
" |
|
|
|
|
|
:style="getDivStyle" |
|
|
|
|
|
> |
|
|
|
|
|
<span :style="getMenuTextStyle"> |
|
|
|
|
|
|
|
|
/> |
|
|
|
|
|
</div> |
|
|
|
|
|
<span |
|
|
|
|
|
v-if=" |
|
|
|
|
|
!props.item?.meta.icon && |
|
|
|
|
|
isCollapse && |
|
|
|
|
|
layout === 'vertical' && |
|
|
|
|
|
props.item?.pathList?.length === 1 |
|
|
|
|
|
" |
|
|
|
|
|
:style="getSpanStyle" |
|
|
|
|
|
> |
|
|
|
|
|
{{ overflowSlice(transformI18n(onlyOneChild.meta.title)) }} |
|
|
|
|
|
</span> |
|
|
|
|
|
<span |
|
|
|
|
|
v-if=" |
|
|
|
|
|
!onlyOneChild.meta.icon && |
|
|
|
|
|
isCollapse && |
|
|
|
|
|
layout === 'mix' && |
|
|
|
|
|
props.item?.pathList?.length === 2 |
|
|
|
|
|
" |
|
|
|
|
|
:style="getSpanStyle" |
|
|
|
|
|
> |
|
|
|
|
|
{{ overflowSlice(transformI18n(onlyOneChild.meta.title)) }} |
|
|
|
|
|
</span> |
|
|
|
|
|
<template #title> |
|
|
|
|
|
<div :style="getDivStyle"> |
|
|
|
|
|
<span v-if="layout === 'horizontal'"> |
|
|
{{ transformI18n(onlyOneChild.meta.title) }} |
|
|
{{ transformI18n(onlyOneChild.meta.title) }} |
|
|
</span> |
|
|
</span> |
|
|
</div> |
|
|
|
|
|
<template #title> |
|
|
|
|
|
<div :style="getDivStyle"> |
|
|
|
|
|
<span v-if="layout === 'horizontal'"> |
|
|
|
|
|
|
|
|
<el-tooltip |
|
|
|
|
|
v-else |
|
|
|
|
|
placement="top" |
|
|
|
|
|
:effect="tooltipEffect" |
|
|
|
|
|
:offset="-10" |
|
|
|
|
|
:disabled="!onlyOneChild.showTooltip" |
|
|
|
|
|
> |
|
|
|
|
|
<template #content> |
|
|
{{ transformI18n(onlyOneChild.meta.title) }} |
|
|
{{ transformI18n(onlyOneChild.meta.title) }} |
|
|
</span> |
|
|
|
|
|
<el-tooltip |
|
|
|
|
|
v-else |
|
|
|
|
|
placement="top" |
|
|
|
|
|
:effect="tooltipEffect" |
|
|
|
|
|
:offset="-10" |
|
|
|
|
|
:disabled="!onlyOneChild.showTooltip" |
|
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
<span |
|
|
|
|
|
ref="menuTextRef" |
|
|
|
|
|
:style="getMenuTextStyle" |
|
|
|
|
|
@mouseover="hoverMenu(onlyOneChild)" |
|
|
> |
|
|
> |
|
|
<template #content> |
|
|
|
|
|
{{ transformI18n(onlyOneChild.meta.title) }} |
|
|
|
|
|
</template> |
|
|
|
|
|
<span |
|
|
|
|
|
ref="menuTextRef" |
|
|
|
|
|
:style="getMenuTextStyle" |
|
|
|
|
|
@mouseover="hoverMenu(onlyOneChild)" |
|
|
|
|
|
> |
|
|
|
|
|
{{ transformI18n(onlyOneChild.meta.title) }} |
|
|
|
|
|
</span> |
|
|
|
|
|
</el-tooltip> |
|
|
|
|
|
<FontIcon |
|
|
|
|
|
v-if="onlyOneChild.meta.extraIcon" |
|
|
|
|
|
width="30px" |
|
|
|
|
|
height="30px" |
|
|
|
|
|
:style="getExtraIconStyle" |
|
|
|
|
|
:icon="onlyOneChild.meta.extraIcon.name" |
|
|
|
|
|
:svg="onlyOneChild.meta.extraIcon.svg ? true : false" |
|
|
|
|
|
/> |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
</el-menu-item> |
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
{{ transformI18n(onlyOneChild.meta.title) }} |
|
|
|
|
|
</span> |
|
|
|
|
|
</el-tooltip> |
|
|
|
|
|
<extraIcon :extraIcon="onlyOneChild.meta.extraIcon" /> |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
</el-menu-item> |
|
|
|
|
|
|
|
|
<el-sub-menu |
|
|
<el-sub-menu |
|
|
v-else |
|
|
v-else |
|
|
@ -237,7 +265,11 @@ function resolvePath(routePath) { |
|
|
:index="resolvePath(props.item.path)" |
|
|
:index="resolvePath(props.item.path)" |
|
|
> |
|
|
> |
|
|
<template #title> |
|
|
<template #title> |
|
|
<div v-if="toRaw(props.item.meta.icon)" class="sub-menu-icon"> |
|
|
|
|
|
|
|
|
<div |
|
|
|
|
|
v-if="toRaw(props.item.meta.icon)" |
|
|
|
|
|
:style="getsubMenuIconStyle" |
|
|
|
|
|
class="sub-menu-icon" |
|
|
|
|
|
> |
|
|
<component |
|
|
<component |
|
|
:is="useRenderIcon(props.item.meta && toRaw(props.item.meta.icon))" |
|
|
:is="useRenderIcon(props.item.meta && toRaw(props.item.meta.icon))" |
|
|
/> |
|
|
/> |
|
|
@ -245,34 +277,38 @@ function resolvePath(routePath) { |
|
|
<span v-if="layout === 'horizontal'"> |
|
|
<span v-if="layout === 'horizontal'"> |
|
|
{{ transformI18n(props.item.meta.title) }} |
|
|
{{ transformI18n(props.item.meta.title) }} |
|
|
</span> |
|
|
</span> |
|
|
<el-tooltip |
|
|
|
|
|
v-else |
|
|
|
|
|
placement="top" |
|
|
|
|
|
:effect="tooltipEffect" |
|
|
|
|
|
:offset="-10" |
|
|
|
|
|
:disabled="!props.item.showTooltip" |
|
|
|
|
|
|
|
|
<div |
|
|
|
|
|
:style="getSubMenuDivStyle(props.item)" |
|
|
|
|
|
v-if=" |
|
|
|
|
|
!( |
|
|
|
|
|
isCollapse && |
|
|
|
|
|
toRaw(props.item.meta.icon) && |
|
|
|
|
|
props.item.parentId === null |
|
|
|
|
|
) |
|
|
|
|
|
" |
|
|
> |
|
|
> |
|
|
<template #content> |
|
|
|
|
|
{{ transformI18n(props.item.meta.title) }} |
|
|
|
|
|
</template> |
|
|
|
|
|
<div |
|
|
|
|
|
ref="menuTextRef" |
|
|
|
|
|
:style="getSubTextStyle" |
|
|
|
|
|
@mouseover="hoverMenu(props.item)" |
|
|
|
|
|
|
|
|
<el-tooltip |
|
|
|
|
|
v-if="layout !== 'horizontal'" |
|
|
|
|
|
placement="top" |
|
|
|
|
|
:effect="tooltipEffect" |
|
|
|
|
|
:offset="-10" |
|
|
|
|
|
:disabled="!props.item.showTooltip" |
|
|
> |
|
|
> |
|
|
<span :style="getSpanStyle"> |
|
|
|
|
|
|
|
|
<template #content> |
|
|
{{ transformI18n(props.item.meta.title) }} |
|
|
{{ transformI18n(props.item.meta.title) }} |
|
|
|
|
|
</template> |
|
|
|
|
|
<span |
|
|
|
|
|
ref="menuTextRef" |
|
|
|
|
|
:style="getSubTextStyle" |
|
|
|
|
|
@mouseover="hoverMenu(props.item)" |
|
|
|
|
|
> |
|
|
|
|
|
{{ |
|
|
|
|
|
overflowSlice(transformI18n(props.item.meta.title), props.item) |
|
|
|
|
|
}} |
|
|
</span> |
|
|
</span> |
|
|
</div> |
|
|
|
|
|
</el-tooltip> |
|
|
|
|
|
<FontIcon |
|
|
|
|
|
v-if="props.item.meta.extraIcon" |
|
|
|
|
|
width="30px" |
|
|
|
|
|
height="30px" |
|
|
|
|
|
style="position: absolute; right: 10px" |
|
|
|
|
|
:icon="props.item.meta.extraIcon.name" |
|
|
|
|
|
:svg="props.item.meta.extraIcon.svg ? true : false" |
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
</el-tooltip> |
|
|
|
|
|
<extraIcon v-if="!isCollapse" :extraIcon="props.item.meta.extraIcon" /> |
|
|
|
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
<sidebar-item |
|
|
<sidebar-item |
|
|
v-for="child in props.item.children" |
|
|
v-for="child in props.item.children" |
|
|
|
xiaoxian521
2 years ago
