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