mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-12-21 15:00:28 +08:00
refactor: 重构layout文件命名规范，更易读 (#1110)
This commit is contained in:
xiaoming
GitHub
172
src/layout/components/lay-sidebar/NavHorizontal.vue
Normal file
172
src/layout/components/lay-sidebar/NavHorizontal.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<script setup lang="ts">
|
||||
import { isAllEmpty } from "@pureadmin/utils";
|
||||
import { ref, nextTick, computed } from "vue";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
import LaySearch from "../lay-search/index.vue";
|
||||
import LayNotice from "../lay-notice/index.vue";
|
||||
import { useTranslationLang } from "../../hooks/useTranslationLang";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
import LaySidebarItem from "../lay-sidebar/components/SidebarItem.vue";
|
||||
import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue";
|
||||
|
||||
import GlobalizationIcon from "@/assets/svg/globalization.svg?component";
|
||||
import AccountSettingsIcon from "@iconify-icons/ri/user-settings-line";
|
||||
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
|
||||
import Setting from "@iconify-icons/ri/settings-3-line";
|
||||
import Check from "@iconify-icons/ep/check";
|
||||
|
||||
const menuRef = ref();
|
||||
|
||||
const { t, route, locale, translationCh, translationEn } =
|
||||
useTranslationLang(menuRef);
|
||||
const {
|
||||
title,
|
||||
logout,
|
||||
onPanel,
|
||||
getLogo,
|
||||
username,
|
||||
userAvatar,
|
||||
backTopMenu,
|
||||
avatarsStyle,
|
||||
toAccountSettings,
|
||||
getDropdownItemStyle,
|
||||
getDropdownItemClass
|
||||
} = useNav();
|
||||
|
||||
const defaultActive = computed(() =>
|
||||
!isAllEmpty(route.meta?.activePath) ? route.meta.activePath : route.path
|
||||
);
|
||||
|
||||
nextTick(() => {
|
||||
menuRef.value?.handleResize();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-loading="usePermissionStoreHook().wholeMenus.length === 0"
|
||||
class="horizontal-header"
|
||||
>
|
||||
<div class="horizontal-header-left" @click="backTopMenu">
|
||||
<img :src="getLogo()" alt="logo" />
|
||||
<span>{{ title }}</span>
|
||||
</div>
|
||||
<el-menu
|
||||
ref="menuRef"
|
||||
router
|
||||
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" />
|
||||
<!-- 国际化 -->
|
||||
<el-dropdown id="header-translation" trigger="click">
|
||||
<GlobalizationIcon
|
||||
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
|
||||
/>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="translation">
|
||||
<el-dropdown-item
|
||||
:style="getDropdownItemStyle(locale, 'zh')"
|
||||
:class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
|
||||
@click="translationCh"
|
||||
>
|
||||
<span v-show="locale === 'zh'" class="check-zh">
|
||||
<IconifyIconOffline :icon="Check" />
|
||||
</span>
|
||||
简体中文
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
:style="getDropdownItemStyle(locale, 'en')"
|
||||
:class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
|
||||
@click="translationEn"
|
||||
>
|
||||
<span v-show="locale === 'en'" class="check-en">
|
||||
<IconifyIconOffline :icon="Check" />
|
||||
</span>
|
||||
English
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<!-- 全屏 -->
|
||||
<LaySidebarFullScreen id="full-screen" />
|
||||
<!-- 消息通知 -->
|
||||
<LayNotice id="header-notice" />
|
||||
<!-- 退出登录 -->
|
||||
<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-item @click="toAccountSettings">
|
||||
<IconifyIconOffline
|
||||
:icon="AccountSettingsIcon"
|
||||
style="margin: 5px"
|
||||
/>
|
||||
{{ t("buttons.pureAccountSettings") }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-menu class="logout">
|
||||
<el-dropdown-item @click="logout">
|
||||
<IconifyIconOffline
|
||||
:icon="LogoutCircleRLine"
|
||||
style="margin: 5px"
|
||||
/>
|
||||
{{ t("buttons.pureLoginOut") }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<span
|
||||
class="set-icon navbar-bg-hover"
|
||||
:title="t('buttons.pureOpenSystemSet')"
|
||||
@click="onPanel"
|
||||
>
|
||||
<IconifyIconOffline :icon="Setting" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-loading-mask) {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.translation {
|
||||
::v-deep(.el-dropdown-menu__item) {
|
||||
padding: 5px 40px;
|
||||
}
|
||||
|
||||
.check-zh {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.check-en {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.logout {
|
||||
width: 120px;
|
||||
|
||||
::v-deep(.el-dropdown-menu__item) {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
205
src/layout/components/lay-sidebar/NavMix.vue
Normal file
205
src/layout/components/lay-sidebar/NavMix.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<script setup lang="ts">
|
||||
import { isAllEmpty } from "@pureadmin/utils";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
import { transformI18n } from "@/plugins/i18n";
|
||||
import LaySearch from "../lay-search/index.vue";
|
||||
import LayNotice from "../lay-notice/index.vue";
|
||||
import { ref, toRaw, watch, onMounted, nextTick } from "vue";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { getParentPaths, findRouteByPath } from "@/router/utils";
|
||||
import { useTranslationLang } from "../../hooks/useTranslationLang";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
import LaySidebarExtraIcon from "../lay-sidebar/components/SidebarExtraIcon.vue";
|
||||
import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue";
|
||||
|
||||
import GlobalizationIcon from "@/assets/svg/globalization.svg?component";
|
||||
import AccountSettingsIcon from "@iconify-icons/ri/user-settings-line";
|
||||
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
|
||||
import Setting from "@iconify-icons/ri/settings-3-line";
|
||||
import Check from "@iconify-icons/ep/check";
|
||||
|
||||
const menuRef = ref();
|
||||
const defaultActive = ref(null);
|
||||
|
||||
const { t, route, locale, translationCh, translationEn } =
|
||||
useTranslationLang(menuRef);
|
||||
const {
|
||||
device,
|
||||
logout,
|
||||
onPanel,
|
||||
resolvePath,
|
||||
username,
|
||||
userAvatar,
|
||||
getDivStyle,
|
||||
avatarsStyle,
|
||||
toAccountSettings,
|
||||
getDropdownItemStyle,
|
||||
getDropdownItemClass
|
||||
} = 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">
|
||||
{{ transformI18n(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" />
|
||||
<!-- 国际化 -->
|
||||
<el-dropdown id="header-translation" trigger="click">
|
||||
<GlobalizationIcon
|
||||
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
|
||||
/>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="translation">
|
||||
<el-dropdown-item
|
||||
:style="getDropdownItemStyle(locale, 'zh')"
|
||||
:class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
|
||||
@click="translationCh"
|
||||
>
|
||||
<span v-show="locale === 'zh'" class="check-zh">
|
||||
<IconifyIconOffline :icon="Check" />
|
||||
</span>
|
||||
简体中文
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
:style="getDropdownItemStyle(locale, 'en')"
|
||||
:class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
|
||||
@click="translationEn"
|
||||
>
|
||||
<span v-show="locale === 'en'" class="check-en">
|
||||
<IconifyIconOffline :icon="Check" />
|
||||
</span>
|
||||
English
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<!-- 全屏 -->
|
||||
<LaySidebarFullScreen id="full-screen" />
|
||||
<!-- 消息通知 -->
|
||||
<LayNotice id="header-notice" />
|
||||
<!-- 退出登录 -->
|
||||
<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-item @click="toAccountSettings">
|
||||
<IconifyIconOffline
|
||||
:icon="AccountSettingsIcon"
|
||||
style="margin: 5px"
|
||||
/>
|
||||
{{ t("buttons.pureAccountSettings") }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-menu class="logout">
|
||||
<el-dropdown-item @click="logout">
|
||||
<IconifyIconOffline
|
||||
:icon="LogoutCircleRLine"
|
||||
style="margin: 5px"
|
||||
/>
|
||||
{{ t("buttons.pureLoginOut") }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<span
|
||||
class="set-icon navbar-bg-hover"
|
||||
:title="t('buttons.pureOpenSystemSet')"
|
||||
@click="onPanel"
|
||||
>
|
||||
<IconifyIconOffline :icon="Setting" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-loading-mask) {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.translation {
|
||||
::v-deep(.el-dropdown-menu__item) {
|
||||
padding: 5px 40px;
|
||||
}
|
||||
|
||||
.check-zh {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.check-en {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.logout {
|
||||
width: 120px;
|
||||
|
||||
::v-deep(.el-dropdown-menu__item) {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
138
src/layout/components/lay-sidebar/NavVertical.vue
Normal file
138
src/layout/components/lay-sidebar/NavVertical.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<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
|
||||
router
|
||||
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,121 @@
|
||||
<script setup lang="ts">
|
||||
import { isEqual } from "@pureadmin/utils";
|
||||
import { transformI18n } from "@/plugins/i18n";
|
||||
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)">
|
||||
{{ transformI18n(item.meta.title) }}
|
||||
</a>
|
||||
</el-breadcrumb-item>
|
||||
</transition-group>
|
||||
</el-breadcrumb>
|
||||
</template>
|
||||
@@ -0,0 +1,74 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useGlobal } from "@pureadmin/utils";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
|
||||
import ArrowLeft from "@iconify-icons/ri/arrow-left-double-fill";
|
||||
|
||||
interface Props {
|
||||
isActive: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
isActive: false
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
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
|
||||
? t('buttons.pureClickCollapse')
|
||||
: t('buttons.pureClickExpand'),
|
||||
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";
|
||||
|
||||
const props = 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>
|
||||
223
src/layout/components/lay-sidebar/components/SidebarItem.vue
Normal file
223
src/layout/components/lay-sidebar/components/SidebarItem.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<script setup lang="ts">
|
||||
import path from "path";
|
||||
import { getConfig } from "@/config";
|
||||
import { menuType } from "@/layout/types";
|
||||
import { ReText } from "@/components/ReText";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
import { transformI18n } from "@/plugins/i18n";
|
||||
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 "@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 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 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 {
|
||||
// 使用path.posix.resolve替代path.resolve 避免windows环境下使用electron出现盘符问题
|
||||
return path.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-4 !text-inherit"
|
||||
>
|
||||
{{ transformI18n(onlyOneChild.meta.title) }}
|
||||
</el-text>
|
||||
|
||||
<template #title>
|
||||
<div :style="getDivStyle">
|
||||
<ReText
|
||||
:tippyProps="{
|
||||
offset: [0, -10],
|
||||
theme: tooltipEffect
|
||||
}"
|
||||
class="!w-full !text-inherit"
|
||||
>
|
||||
{{ transformI18n(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="{
|
||||
'!w-full': true,
|
||||
'!text-inherit': true,
|
||||
'!px-4':
|
||||
layout !== 'horizontal' &&
|
||||
isCollapse &&
|
||||
!toRaw(item.meta.icon) &&
|
||||
item.parentId === null
|
||||
}"
|
||||
>
|
||||
{{ transformI18n(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,73 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useGlobal } from "@pureadmin/utils";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
|
||||
import MenuFold from "@iconify-icons/ri/menu-fold-fill";
|
||||
|
||||
interface Props {
|
||||
isActive: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
isActive: false
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
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
|
||||
? t('buttons.pureClickCollapse')
|
||||
: t('buttons.pureClickExpand'),
|
||||
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>
|
||||
72
src/layout/components/lay-sidebar/components/SidebarLogo.vue
Normal file
72
src/layout/components/lay-sidebar/components/SidebarLogo.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<script setup lang="ts">
|
||||
import { getTopMenu } from "@/router/utils";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
|
||||
const props = 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;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 32px;
|
||||
color: $subMenuActiveText;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,38 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import MenuFold from "@iconify-icons/ri/menu-fold-fill";
|
||||
import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
|
||||
|
||||
interface Props {
|
||||
isActive: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
isActive: false
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "toggleClick"): void;
|
||||
}>();
|
||||
|
||||
const toggleClick = () => {
|
||||
emit("toggleClick");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="px-3 mr-1 navbar-bg-hover"
|
||||
:title="
|
||||
isActive ? t('buttons.pureClickCollapse') : t('buttons.pureClickExpand')
|
||||
"
|
||||
@click="toggleClick"
|
||||
>
|
||||
<IconifyIconOffline
|
||||
:icon="isActive ? MenuFold : MenuUnfold"
|
||||
class="inline-block align-middle hover:text-primary dark:hover:!text-white"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user