xiaoxian521
3 years ago
21 changed files with 1229 additions and 745 deletions
-
4README.en-US.md
-
4README.md
-
24package.json
-
989pnpm-lock.yaml
-
2public/serverConfig.json
-
71src/layout/components/navbar.vue
-
83src/layout/components/setting/index.vue
-
122src/layout/components/sidebar/horizontal.vue
-
239src/layout/components/sidebar/mixNav.vue
-
32src/layout/components/sidebar/sidebarItem.vue
-
82src/layout/components/sidebar/vertical.vue
-
17src/layout/components/tag/index.vue
-
110src/layout/hooks/nav.ts
-
8src/layout/index.vue
-
16src/layout/types.ts
-
5src/plugins/i18n/index.ts
-
14src/router/index.ts
-
3src/router/modules/index.ts
-
15src/store/modules/epTheme.ts
-
61src/style/sidebar.scss
-
67src/utils/tree.ts
989
pnpm-lock.yaml
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,239 @@ |
|||
<script setup lang="ts"> |
|||
import { useI18n } from "vue-i18n"; |
|||
import Notice from "../notice/index.vue"; |
|||
import { useNav } from "../../hooks/nav"; |
|||
import { templateRef } from "@vueuse/core"; |
|||
import avatars from "/@/assets/avatars.jpg"; |
|||
import { transformI18n } from "/@/plugins/i18n"; |
|||
import screenfull from "../screenfull/index.vue"; |
|||
import { useRoute, useRouter } from "vue-router"; |
|||
import { deviceDetection } from "/@/utils/deviceDetection"; |
|||
import { useRenderIcon } from "/@/components/ReIcon/src/hooks"; |
|||
import { useEpThemeStoreHook } from "/@/store/modules/epTheme"; |
|||
import { getParentPaths, findRouteByPath } from "/@/router/utils"; |
|||
import { usePermissionStoreHook } from "/@/store/modules/permission"; |
|||
import globalization from "/@/assets/svg/globalization.svg?component"; |
|||
import { ref, watch, nextTick, onMounted, getCurrentInstance } from "vue"; |
|||
|
|||
const route = useRoute(); |
|||
const { locale } = useI18n(); |
|||
const routers = useRouter().options.routes; |
|||
const menuRef = templateRef<ElRef | null>("menu", null); |
|||
const instance = |
|||
getCurrentInstance().appContext.config.globalProperties.$storage; |
|||
|
|||
const { |
|||
logout, |
|||
onPanel, |
|||
changeTitle, |
|||
toggleSideBar, |
|||
handleResize, |
|||
menuSelect, |
|||
resolvePath, |
|||
pureApp, |
|||
usename, |
|||
getDropdownItemStyle |
|||
} = useNav(); |
|||
|
|||
let defaultActive = ref(null); |
|||
|
|||
function getDefaultActive(routePath) { |
|||
const wholeMenus = usePermissionStoreHook().wholeMenus; |
|||
// 当前路由的父级路径 |
|||
const parentRoutes = getParentPaths(routePath, wholeMenus)[0]; |
|||
defaultActive.value = findRouteByPath( |
|||
parentRoutes, |
|||
wholeMenus |
|||
)?.children[0]?.path; |
|||
} |
|||
|
|||
onMounted(() => { |
|||
getDefaultActive(route.path); |
|||
nextTick(() => { |
|||
handleResize(menuRef.value); |
|||
}); |
|||
}); |
|||
|
|||
watch( |
|||
() => locale.value, |
|||
() => { |
|||
changeTitle(route.meta); |
|||
} |
|||
); |
|||
|
|||
watch( |
|||
() => route.path, |
|||
() => { |
|||
getDefaultActive(route.path); |
|||
} |
|||
); |
|||
|
|||
function translationCh() { |
|||
instance.locale = { locale: "zh" }; |
|||
locale.value = "zh"; |
|||
handleResize(menuRef.value); |
|||
} |
|||
|
|||
function translationEn() { |
|||
instance.locale = { locale: "en" }; |
|||
locale.value = "en"; |
|||
handleResize(menuRef.value); |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="horizontal-header"> |
|||
<div |
|||
:class="classes.container" |
|||
:title="pureApp.sidebar.opened ? '点击折叠' : '点击展开'" |
|||
@click="toggleSideBar" |
|||
> |
|||
<svg |
|||
:fill="useEpThemeStoreHook().fill" |
|||
:class="[ |
|||
'hamburger', |
|||
pureApp.sidebar.opened ? 'is-active-hamburger' : '' |
|||
]" |
|||
viewBox="0 0 1024 1024" |
|||
xmlns="http://www.w3.org/2000/svg" |
|||
width="64" |
|||
height="64" |
|||
> |
|||
<path |
|||
d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" |
|||
/> |
|||
</svg> |
|||
</div> |
|||
<el-menu |
|||
ref="menu" |
|||
class="horizontal-header-menu" |
|||
mode="horizontal" |
|||
:default-active="defaultActive" |
|||
router |
|||
@select="indexPath => menuSelect(indexPath, routers)" |
|||
> |
|||
<el-menu-item |
|||
v-for="route in usePermissionStoreHook().wholeMenus" |
|||
:key="route.path" |
|||
:index="resolvePath(route) || route.redirect" |
|||
> |
|||
<template #title> |
|||
<el-icon v-show="route.meta.icon" :class="route.meta.icon"> |
|||
<component |
|||
:is="useRenderIcon(route.meta && route.meta.icon)" |
|||
></component> |
|||
</el-icon> |
|||
<span>{{ transformI18n(route.meta.title, route.meta.i18n) }}</span> |
|||
<FontIcon |
|||
v-if="route.meta.extraIcon" |
|||
width="30px" |
|||
height="30px" |
|||
style="position: absolute; right: 10px" |
|||
:icon="route.meta.extraIcon.name" |
|||
:svg="route.meta.extraIcon.svg ? true : false" |
|||
></FontIcon> |
|||
</template> |
|||
</el-menu-item> |
|||
</el-menu> |
|||
<div class="horizontal-header-right"> |
|||
<!-- 通知 --> |
|||
<Notice id="header-notice" /> |
|||
<!-- 全屏 --> |
|||
<screenfull id="header-screenfull" v-show="!deviceDetection()" /> |
|||
<!-- 国际化 --> |
|||
<el-dropdown id="header-translation" trigger="click"> |
|||
<globalization /> |
|||
<template #dropdown> |
|||
<el-dropdown-menu class="translation"> |
|||
<el-dropdown-item |
|||
:style="getDropdownItemStyle(locale, 'zh')" |
|||
@click="translationCh" |
|||
><el-icon class="check-zh" v-show="locale === 'zh'" |
|||
><IconifyIconOffline icon="check" /></el-icon |
|||
>简体中文</el-dropdown-item |
|||
> |
|||
<el-dropdown-item |
|||
:style="getDropdownItemStyle(locale, 'en')" |
|||
@click="translationEn" |
|||
><el-icon class="check-en" v-show="locale === 'en'" |
|||
><IconifyIconOffline icon="check" /></el-icon |
|||
>English</el-dropdown-item |
|||
> |
|||
</el-dropdown-menu> |
|||
</template> |
|||
</el-dropdown> |
|||
<!-- 退出登陆 --> |
|||
<el-dropdown trigger="click"> |
|||
<span class="el-dropdown-link"> |
|||
<img :src="avatars" /> |
|||
<p>{{ usename }}</p> |
|||
</span> |
|||
<template #dropdown> |
|||
<el-dropdown-menu class="logout"> |
|||
<el-dropdown-item @click="logout"> |
|||
<IconifyIconOffline |
|||
icon="logout-circle-r-line" |
|||
style="margin: 5px" |
|||
/> |
|||
{{ $t("buttons.hsLoginOut") }}</el-dropdown-item |
|||
> |
|||
</el-dropdown-menu> |
|||
</template> |
|||
</el-dropdown> |
|||
<el-icon |
|||
class="el-icon-setting" |
|||
:title="$t('buttons.hssystemSet')" |
|||
@click="onPanel" |
|||
> |
|||
<IconifyIconOffline icon="setting" /> |
|||
</el-icon> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style module="classes" scoped> |
|||
.container { |
|||
padding: 0 15px; |
|||
} |
|||
</style> |
|||
|
|||
<style lang="scss" scoped> |
|||
.hamburger { |
|||
width: 20px; |
|||
height: 20px; |
|||
|
|||
&:hover { |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.is-active-hamburger { |
|||
transform: rotate(180deg); |
|||
} |
|||
|
|||
.translation { |
|||
::v-deep(.el-dropdown-menu__item) { |
|||
padding: 5px 40px; |
|||
} |
|||
|
|||
.check-zh { |
|||
position: absolute; |
|||
left: 20px; |
|||
} |
|||
|
|||
.check-en { |
|||
position: absolute; |
|||
left: 20px; |
|||
} |
|||
} |
|||
|
|||
.logout { |
|||
max-width: 120px; |
|||
|
|||
::v-deep(.el-dropdown-menu__item) { |
|||
min-width: 100%; |
|||
display: inline-flex; |
|||
flex-wrap: wrap; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,110 @@ |
|||
import { computed } from "vue"; |
|||
import { router } from "/@/router"; |
|||
import { emitter } from "/@/utils/mitt"; |
|||
import { routeMetaType } from "../types"; |
|||
import { transformI18n } from "/@/plugins/i18n"; |
|||
import { storageSession } from "/@/utils/storage"; |
|||
import { useAppStoreHook } from "/@/store/modules/app"; |
|||
import { Title } from "../../../public/serverConfig.json"; |
|||
import { useEpThemeStoreHook } from "/@/store/modules/epTheme"; |
|||
|
|||
export function useNav() { |
|||
const pureApp = useAppStoreHook(); |
|||
// 用户名
|
|||
const usename: string = storageSession.getItem("info")?.username; |
|||
|
|||
// 设置国际化选中后的样式
|
|||
const getDropdownItemStyle = computed(() => { |
|||
return (locale, t) => { |
|||
return { |
|||
background: locale === t ? useEpThemeStoreHook().epThemeColor : "", |
|||
color: locale === t ? "#f4f4f5" : "#000" |
|||
}; |
|||
}; |
|||
}); |
|||
|
|||
const isCollapse = computed(() => { |
|||
return !pureApp.getSidebarStatus; |
|||
}); |
|||
|
|||
// 动态title
|
|||
function changeTitle(meta: routeMetaType) { |
|||
if (Title) |
|||
document.title = `${transformI18n(meta.title, meta.i18n)} | ${Title}`; |
|||
else document.title = transformI18n(meta.title, meta.i18n); |
|||
} |
|||
|
|||
// 退出登录
|
|||
function logout() { |
|||
storageSession.removeItem("info"); |
|||
router.push("/login"); |
|||
} |
|||
|
|||
function backHome() { |
|||
router.push("/welcome"); |
|||
} |
|||
|
|||
function onPanel() { |
|||
emitter.emit("openPanel"); |
|||
} |
|||
|
|||
function toggleSideBar() { |
|||
pureApp.toggleSideBar(); |
|||
} |
|||
|
|||
function handleResize(menuRef) { |
|||
menuRef.handleResize(); |
|||
} |
|||
|
|||
function resolvePath(route) { |
|||
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, routers): void { |
|||
let parentPath = ""; |
|||
const parentPathIndex = indexPath.lastIndexOf("/"); |
|||
if (parentPathIndex > 0) { |
|||
parentPath = indexPath.slice(0, parentPathIndex); |
|||
} |
|||
// 找到当前路由的信息
|
|||
function findCurrentRoute(indexPath: string, routes) { |
|||
return routes.map(item => { |
|||
if (item.path === indexPath) { |
|||
if (item.redirect) { |
|||
findCurrentRoute(item.redirect, item.children); |
|||
} else { |
|||
// 切换左侧菜单 通知标签页
|
|||
emitter.emit("changLayoutRoute", { |
|||
indexPath, |
|||
parentPath |
|||
}); |
|||
} |
|||
} else { |
|||
if (item.children) findCurrentRoute(indexPath, item.children); |
|||
} |
|||
}); |
|||
} |
|||
findCurrentRoute(indexPath, routers); |
|||
} |
|||
|
|||
return { |
|||
logout, |
|||
backHome, |
|||
onPanel, |
|||
changeTitle, |
|||
toggleSideBar, |
|||
menuSelect, |
|||
handleResize, |
|||
resolvePath, |
|||
isCollapse, |
|||
pureApp, |
|||
usename, |
|||
getDropdownItemStyle |
|||
}; |
|||
} |
|||
@ -0,0 +1,67 @@ |
|||
/** |
|||
* 提取菜单树中的每一项uniqueId |
|||
* @param {Array} {menuTree 菜单树} |
|||
* @param {return}} expandedPaths 每一项uniqueId组成的数组 |
|||
*/ |
|||
const expandedPaths = []; |
|||
export function extractPathList(menuTree) { |
|||
if (!Array.isArray(menuTree)) { |
|||
console.warn("menuTree must be an array"); |
|||
return; |
|||
} |
|||
if (!menuTree || menuTree.length === 0) return; |
|||
for (const node of menuTree) { |
|||
const hasChildren = node.children && node.children.length > 0; |
|||
if (hasChildren) { |
|||
extractPathList(node.children); |
|||
} |
|||
expandedPaths.push(node.uniqueId); |
|||
} |
|||
return expandedPaths; |
|||
} |
|||
|
|||
/** |
|||
* 如果父级下children的length为1，删除children并自动组建唯一uniqueId |
|||
* @param {Array} {menuTree 菜单树} |
|||
* @param {Array} {pathList 每一项的id组成的数组} |
|||
* @param {return}} |
|||
*/ |
|||
export function deleteChildren(menuTree, pathList = []) { |
|||
if (!Array.isArray(menuTree)) { |
|||
console.warn("menuTree must be an array"); |
|||
return; |
|||
} |
|||
if (!menuTree || menuTree.length === 0) return; |
|||
for (const [key, node] of menuTree.entries()) { |
|||
if (node.children && node.children.length === 1) delete node.children; |
|||
node.id = key; |
|||
node.parentId = pathList.length ? pathList[pathList.length - 1] : null; |
|||
node.pathList = [...pathList, node.id]; |
|||
node.uniqueId = |
|||
node.pathList.length > 1 ? node.pathList.join("-") : node.pathList[0]; |
|||
const hasChildren = node.children && node.children.length > 0; |
|||
if (hasChildren) { |
|||
deleteChildren(node.children, node.pathList); |
|||
} |
|||
} |
|||
return menuTree; |
|||
} |
|||
|
|||
// 创建层级关系
|
|||
export function buildHierarchyTree(menuTree, pathList = []) { |
|||
if (!Array.isArray(menuTree)) { |
|||
console.warn("menuTree must be an array"); |
|||
return; |
|||
} |
|||
if (!menuTree || menuTree.length === 0) return; |
|||
for (const [key, node] of menuTree.entries()) { |
|||
node.id = key; |
|||
node.parentId = pathList.length ? pathList[pathList.length - 1] : null; |
|||
node.pathList = [...pathList, node.id]; |
|||
const hasChildren = node.children && node.children.length > 0; |
|||
if (hasChildren) { |
|||
buildHierarchyTree(node.children, node.pathList); |
|||
} |
|||
} |
|||
return menuTree; |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue