361 lines
9.7 KiB
Vue
361 lines
9.7 KiB
Vue
<template>
|
|
<BaseLayout>
|
|
<!-- 顶部菜单栏 -->
|
|
<div class="layout__header">
|
|
<div class="layout__header-content">
|
|
<div v-if="showLogo" class="layout__header-logo">
|
|
<LayoutLogo :collapse="isLogoCollapsed" />
|
|
</div>
|
|
|
|
<!-- 顶部菜单 -->
|
|
<div class="layout__header-menu">
|
|
<el-menu
|
|
mode="horizontal"
|
|
:default-active="activeTopMenuPath"
|
|
:background-color="useMenuColors ? variables['menu-background'] : undefined"
|
|
:text-color="useMenuColors ? variables['menu-text'] : undefined"
|
|
:active-text-color="useMenuColors ? variables['menu-active-text'] : undefined"
|
|
@select="handleTopMenuSelect"
|
|
>
|
|
<el-menu-item v-for="item in topMenuItems" :key="item.path" :index="item.path">
|
|
<template v-if="item.meta">
|
|
<MenuIcon :icon="item.meta.icon" />
|
|
<span v-if="item.meta.title" class="ml-1">
|
|
{{ translateRouteTitle(item.meta.title) }}
|
|
</span>
|
|
</template>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</div>
|
|
|
|
<div class="layout__header-actions">
|
|
<LayoutToolbar />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主内容区容器 -->
|
|
<div class="layout__container">
|
|
<!-- 左侧菜单栏 -->
|
|
<div class="layout__sidebar--left" :class="{ 'layout__sidebar--collapsed': !isSidebarOpen }">
|
|
<el-scrollbar>
|
|
<el-menu
|
|
:default-active="activeSideMenuPath"
|
|
:collapse="!isSidebarOpen"
|
|
:collapse-transition="false"
|
|
:unique-opened="false"
|
|
:background-color="variables['menu-background']"
|
|
:text-color="variables['menu-text']"
|
|
:active-text-color="variables['menu-active-text']"
|
|
>
|
|
<LayoutSidebarItem
|
|
v-for="item in sideMenuRoutes"
|
|
:key="item.path"
|
|
:item="item"
|
|
:base-path="resolvePath(item.path)"
|
|
/>
|
|
</el-menu>
|
|
</el-scrollbar>
|
|
<div class="layout__sidebar-toggle">
|
|
<Hamburger :is-active="isSidebarOpen" @toggle-click="toggleSidebar" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主内容区 -->
|
|
<div :class="{ hasTagsView: showTagsView }" class="layout__main">
|
|
<LayoutTagsView v-if="showTagsView" />
|
|
<LayoutMain />
|
|
</div>
|
|
</div>
|
|
</BaseLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { LocationQueryRaw, RouteRecordRaw } from "vue-router";
|
|
import { useWindowSize } from "@vueuse/core";
|
|
import { useLayout } from "./useLayout";
|
|
import { useAppStore, usePermissionStore, useSettingsStore } from "@/store";
|
|
import { isExternal } from "@/utils/index";
|
|
import { translateRouteTitle } from "@/lang/utils";
|
|
import { SidebarColor } from "@/enums/settings";
|
|
import { ElIcon } from "element-plus";
|
|
import BaseLayout from "./BaseLayout.vue";
|
|
import LayoutLogo from "./components/LayoutLogo.vue";
|
|
import LayoutToolbar from "./components/LayoutToolbar.vue";
|
|
import LayoutTagsView from "./components/LayoutTagsView.vue";
|
|
import LayoutMain from "./components/LayoutMain.vue";
|
|
import LayoutSidebarItem from "./components/LayoutSidebarItem.vue";
|
|
import Hamburger from "@/components/Hamburger/index.vue";
|
|
import variables from "@/styles/variables.module.scss";
|
|
|
|
// 菜单图标渲染组件
|
|
const MenuIcon = defineComponent({
|
|
props: { icon: String },
|
|
setup(props) {
|
|
const isElIcon = computed(() => props.icon?.startsWith("el-icon"));
|
|
const iconName = computed(() => props.icon?.replace("el-icon-", ""));
|
|
|
|
return () => {
|
|
if (!props.icon) {
|
|
return h("div", { class: "i-svg:menu" });
|
|
}
|
|
|
|
// Element Plus 图标
|
|
if (isElIcon.value) {
|
|
return h(ElIcon, null, () => h(resolveComponent(iconName.value!)));
|
|
}
|
|
|
|
// SVG 图标
|
|
return h("div", { class: `i-svg:${props.icon}` });
|
|
};
|
|
},
|
|
});
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const { width } = useWindowSize();
|
|
|
|
const appStore = useAppStore();
|
|
const permissionStore = usePermissionStore();
|
|
const settingsStore = useSettingsStore();
|
|
|
|
const { showTagsView, showLogo, isSidebarOpen, toggleSidebar, sideMenuRoutes, activeTopMenuPath } =
|
|
useLayout();
|
|
|
|
const isLogoCollapsed = computed(() => width.value < 768);
|
|
|
|
// 是否使用深色菜单配色（暗色主题或经典蓝侧边栏）
|
|
const useMenuColors = computed(
|
|
() =>
|
|
settingsStore.theme === "dark" || settingsStore.sidebarColorScheme === SidebarColor.CLASSIC_BLUE
|
|
);
|
|
|
|
// 顶部菜单项（处理单子菜单显示优化）
|
|
const topMenuItems = computed(() => {
|
|
const routes = permissionStore.routes.filter((item) => !item.meta?.hidden);
|
|
|
|
return routes.map((route) => {
|
|
// alwaysShow 或无子菜单，直接返回
|
|
if (route.meta?.alwaysShow || !route.children?.length) return route;
|
|
|
|
// 过滤可见子菜单
|
|
const visibleChildren = route.children.filter((child) => !child.meta?.hidden);
|
|
|
|
// 仅一个可见子菜单时，显示子菜单信息
|
|
if (visibleChildren.length === 1) {
|
|
const child = visibleChildren[0];
|
|
return {
|
|
...route,
|
|
meta: {
|
|
...route.meta,
|
|
title: child.meta?.title || route.meta?.title,
|
|
icon: child.meta?.icon || route.meta?.icon,
|
|
},
|
|
};
|
|
}
|
|
return route;
|
|
});
|
|
});
|
|
|
|
// 左侧菜单激活路径
|
|
const activeSideMenuPath = computed(() => {
|
|
const { meta, path } = route;
|
|
return typeof meta?.activeMenu === "string" ? meta.activeMenu : path;
|
|
});
|
|
|
|
// 解析左侧菜单路径
|
|
function resolvePath(routePath: string) {
|
|
if (isExternal(routePath)) return routePath;
|
|
if (routePath.startsWith("/")) return activeTopMenuPath.value + routePath;
|
|
return `${activeTopMenuPath.value}/${routePath}`;
|
|
}
|
|
|
|
// 从路径提取顶级菜单路径
|
|
function extractTopMenuPath(path: string): string {
|
|
return path.split("/").filter(Boolean).length > 1 ? path.match(/^\/[^/]+/)?.[0] || "/" : "/";
|
|
}
|
|
|
|
// 顶部菜单点击
|
|
function handleTopMenuSelect(menuPath: string) {
|
|
if (menuPath === activeTopMenuPath.value) return;
|
|
|
|
appStore.activeTopMenu(menuPath);
|
|
permissionStore.setMixLayoutSideMenus(menuPath);
|
|
navigateToFirstMenu(permissionStore.mixLayoutSideMenus);
|
|
}
|
|
|
|
// 导航到第一个可访问菜单
|
|
function navigateToFirstMenu(menus: RouteRecordRaw[]) {
|
|
if (!menus.length) return;
|
|
|
|
const [first] = menus;
|
|
if (first.children?.length) {
|
|
navigateToFirstMenu(first.children as RouteRecordRaw[]);
|
|
} else if (first.name) {
|
|
router.push({
|
|
name: first.name,
|
|
query:
|
|
typeof first.meta?.params === "object"
|
|
? (first.meta.params as LocationQueryRaw)
|
|
: undefined,
|
|
});
|
|
}
|
|
}
|
|
|
|
// 监听路由变化，同步顶部菜单状态
|
|
watch(
|
|
() => route.path,
|
|
(newPath) => {
|
|
const topMenuPath = extractTopMenuPath(newPath);
|
|
if (topMenuPath !== activeTopMenuPath.value) {
|
|
appStore.activeTopMenu(topMenuPath);
|
|
permissionStore.setMixLayoutSideMenus(topMenuPath);
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.layout {
|
|
&__header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 999;
|
|
width: 100%;
|
|
height: $navbar-height;
|
|
background-color: var(--menu-background);
|
|
border-bottom: 1px solid var(--el-border-color-lighter);
|
|
|
|
&-content {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
&-logo {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
|
|
&-menu {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
min-width: 0;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
|
|
:deep(.el-menu) {
|
|
height: 100%;
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
|
|
:deep(.el-menu--horizontal) {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
|
|
.el-menu-item {
|
|
height: 100%;
|
|
line-height: $navbar-height;
|
|
border-bottom: none;
|
|
|
|
&.is-active {
|
|
background-color: rgba(255, 255, 255, 0.12);
|
|
border-bottom: 2px solid var(--el-color-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-actions {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
height: 100%;
|
|
padding: 0 16px;
|
|
}
|
|
}
|
|
|
|
&__container {
|
|
display: flex;
|
|
height: calc(100vh - $navbar-height);
|
|
padding-top: 0;
|
|
|
|
.layout__sidebar--left {
|
|
position: relative;
|
|
width: $sidebar-width;
|
|
height: 100%;
|
|
background-color: var(--menu-background);
|
|
transition: width 0.28s;
|
|
|
|
&.layout__sidebar--collapsed {
|
|
width: $sidebar-width-collapsed !important;
|
|
}
|
|
|
|
:deep(.el-scrollbar) {
|
|
height: calc(100vh - $navbar-height - 50px);
|
|
}
|
|
|
|
:deep(.el-menu) {
|
|
height: 100%;
|
|
border: none;
|
|
}
|
|
|
|
.layout__sidebar-toggle {
|
|
position: absolute;
|
|
bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
background-color: var(--menu-background);
|
|
box-shadow: 0 0 6px -2px var(--el-color-primary);
|
|
}
|
|
}
|
|
|
|
.layout__main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
height: 100%;
|
|
margin-left: 0;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.mobile) {
|
|
.layout__container {
|
|
.layout__sidebar--left {
|
|
position: fixed;
|
|
top: $navbar-height;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 1000;
|
|
transition: transform 0.28s;
|
|
}
|
|
}
|
|
|
|
&.hideSidebar {
|
|
.layout__sidebar--left {
|
|
width: $sidebar-width !important;
|
|
transform: translateX(-$sidebar-width);
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.hasTagsView) {
|
|
.app-main {
|
|
height: calc(100vh - $navbar-height - $tags-view-height) !important;
|
|
}
|
|
}
|
|
</style>
|