feat: 项目结构重构优化
This commit is contained in:
Ray.Hao
245
src/layouts/components/LayoutSidebar.vue
Normal file
245
src/layouts/components/LayoutSidebar.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<!-- 闖懷黒扈<EFBFBD>ｻｶ -->
|
||||
<template>
|
||||
<el-menu
|
||||
ref="menuRef"
|
||||
:default-active="activeMenuPath"
|
||||
:collapse="!appStore.sidebar.opened"
|
||||
:background-color="menuThemeProps.backgroundColor"
|
||||
:text-color="menuThemeProps.textColor"
|
||||
:active-text-color="menuThemeProps.activeTextColor"
|
||||
:popper-effect="theme"
|
||||
:unique-opened="false"
|
||||
:collapse-transition="false"
|
||||
:mode="menuMode"
|
||||
@open="onMenuOpen"
|
||||
@close="onMenuClose"
|
||||
>
|
||||
<!-- 闖懷黒鬘?-->
|
||||
<LayoutSidebarItem
|
||||
v-for="route in data"
|
||||
:key="route.path"
|
||||
:item="route"
|
||||
:base-path="resolveFullPath(route.path)"
|
||||
/>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useRoute } from "vue-router";
|
||||
import path from "path-browserify";
|
||||
import type { MenuInstance } from "element-plus";
|
||||
import type { RouteRecordRaw } from "vue-router";
|
||||
import { SidebarColor } from "@/enums/settings";
|
||||
import { useSettingsStore, useAppStore } from "@/store";
|
||||
import { isExternal } from "@/utils/index";
|
||||
import LayoutSidebarItem from "./LayoutSidebarItem.vue";
|
||||
import variables from "@/styles/variables.module.scss";
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array as PropType<RouteRecordRaw[]>,
|
||||
default: () => [],
|
||||
},
|
||||
basePath: {
|
||||
type: String,
|
||||
required: true,
|
||||
example: "/system",
|
||||
},
|
||||
menuMode: {
|
||||
type: String as PropType<"vertical" | "horizontal">,
|
||||
default: "vertical",
|
||||
validator: (value: string) => ["vertical", "horizontal"].includes(value),
|
||||
},
|
||||
});
|
||||
|
||||
const menuRef = ref<MenuInstance>();
|
||||
const settingsStore = useSettingsStore();
|
||||
const appStore = useAppStore();
|
||||
const currentRoute = useRoute();
|
||||
|
||||
// 蟄伜お蟾ｲ螻募ｼ逧<C280>除蜊暮｡ｹ邏｢蠑<EFBDA2>
|
||||
const expandedMenuIndexes = ref<string[]>([]);
|
||||
|
||||
// 闔ｷ蜿紋ｸｻ鬚<EFBDBB>
|
||||
const theme = computed(() => settingsStore.theme);
|
||||
|
||||
// 闔ｷ蜿匁ｵ<E58C81>牡荳ｻ鬚倅ｸ狗噪萓ｧ霎ｹ譬城<E8ADAC>濶ｲ譁ｹ譯?
|
||||
const sidebarColorScheme = computed(() => settingsStore.sidebarColorScheme);
|
||||
|
||||
// 闖懷黒荳ｻ鬚伜ｱ樊?
|
||||
const menuThemeProps = computed(() => {
|
||||
const isDarkOrClassicBlue =
|
||||
theme.value === "dark" || sidebarColorScheme.value === SidebarColor.CLASSIC_BLUE;
|
||||
|
||||
return {
|
||||
backgroundColor: isDarkOrClassicBlue ? variables["menu-background"] : undefined,
|
||||
textColor: isDarkOrClassicBlue ? variables["menu-text"] : undefined,
|
||||
activeTextColor: isDarkOrClassicBlue ? variables["menu-active-text"] : undefined,
|
||||
};
|
||||
});
|
||||
|
||||
// 隶｡邂怜ｽ灘燕豼豢ｻ逧<EFBDBB>除蜊暮｡?
|
||||
const activeMenuPath = computed((): string => {
|
||||
const { meta, path } = currentRoute;
|
||||
|
||||
// 螯よ棡霍ｯ逕ｱmeta荳ｭ隶ｾ鄂ｮ莠<EFBDAE>ctiveMenu<6E>悟<EFBFBD>菴ｿ逕ｨ螳<EFBDA8>ｼ育畑莠主､<E4B8BB>炊荳莠帷音谿頑ュ蜀ｵ<E89C80>悟ｦりｯｦ諠<EFBDA6>｡ｵ<EFBDA1>?
|
||||
if (meta?.activeMenu && typeof meta.activeMenu === "string") {
|
||||
return meta.activeMenu;
|
||||
}
|
||||
|
||||
// 蜷ｦ蛻吩ｽｿ逕ｨ蠖灘燕霍ｯ逕ｱ霍ｯ蠕<EFBDAF>
|
||||
return path;
|
||||
});
|
||||
|
||||
/**
|
||||
* 闔ｷ蜿門ｮ梧紛霍ｯ蠕<EFBDAF>
|
||||
*
|
||||
* @param routePath 蠖灘燕霍ｯ逕ｱ逧<EFBDB1>嶌蟇ｹ霍ｯ蠕? /user
|
||||
* @returns 螳梧紛逧<E7B49B>ｻ晏ｯｹ霍ｯ蠕?D://vue3-element-admin/system/user
|
||||
*/
|
||||
function resolveFullPath(routePath: string) {
|
||||
if (isExternal(routePath)) {
|
||||
return routePath;
|
||||
}
|
||||
if (isExternal(props.basePath)) {
|
||||
return props.basePath;
|
||||
}
|
||||
|
||||
// 螯よ棡 basePath 荳ｺ遨ｺ<E981A8>磯｡ｶ驛ｨ蟶<EFBDA8>ｱ<EFBDB1>会ｼ檎峩謗･霑泌屓 routePath
|
||||
if (!props.basePath || props.basePath === "") {
|
||||
return routePath;
|
||||
}
|
||||
|
||||
// 隗｣譫占ｷｯ蠕<EFBDAF>ｼ檎函謌仙ｮ梧紛逧<E7B49B>ｻ晏ｯｹ霍ｯ蠕<EFBDAF>
|
||||
return path.resolve(props.basePath, routePath);
|
||||
}
|
||||
|
||||
/**
|
||||
* 謇灘ｼ闖懷黒
|
||||
*
|
||||
* @param index 蠖灘燕螻募ｼ逧<C280>除蜊暮｡ｹ邏｢蠑<EFBDA2>
|
||||
*/
|
||||
const onMenuOpen = (index: string) => {
|
||||
expandedMenuIndexes.value.push(index);
|
||||
};
|
||||
|
||||
/**
|
||||
* 蜈ｳ髣ｭ闖懷黒
|
||||
*
|
||||
* @param index 蠖灘燕謾ｶ襍ｷ逧<EFBDB7>除蜊暮｡ｹ邏｢蠑<EFBDA2>
|
||||
*/
|
||||
const onMenuClose = (index: string) => {
|
||||
expandedMenuIndexes.value = expandedMenuIndexes.value.filter((item) => item !== index);
|
||||
};
|
||||
|
||||
/**
|
||||
* 逶大成螻募ｼ逧<C280>除蜊暮｡ｹ蜿伜喧<E4BC9C>梧峩譁ｰ辷ｶ闖懷黒譬ｷ蠑<EFBDB7>
|
||||
*/
|
||||
watch(
|
||||
() => expandedMenuIndexes.value,
|
||||
() => {
|
||||
updateParentMenuStyles();
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* 逶大成闖懷黒讓｡蠑丞序蛹厄ｼ壼ｽ楢除蜊墓ｨ｡蠑丞<E8A091>謐｢荳ｺ豌ｴ蟷ｳ讓｡蠑乗慮<E4B997>悟<EFBFBD>髣ｭ謇譛牙ｱ募ｼ逧<C280>除蜊暮｡ｹ<EFBDA1>?
|
||||
* 驕ｿ蜈榊惠豌ｴ蟷ｳ讓｡蠑丈ｸ玖除蜊暮｡ｹ譏ｾ遉ｺ髞吩ｽ阪?
|
||||
*/
|
||||
watch(
|
||||
() => props.menuMode,
|
||||
(newMode) => {
|
||||
if (newMode === "horizontal" && menuRef.value) {
|
||||
expandedMenuIndexes.value.forEach((item) => menuRef.value!.close(item));
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* 逶大成豼豢ｻ闖懷黒蜿伜喧<E4BC9C>御ｸｺ蛹<EFBDBA>性豼豢ｻ蟄占除蜊慕噪辷ｶ闖懷黒豺ｻ蜉<EFBDBB>譬ｷ蠑冗ｱ?
|
||||
*/
|
||||
watch(
|
||||
() => activeMenuPath.value,
|
||||
() => {
|
||||
nextTick(() => {
|
||||
updateParentMenuStyles();
|
||||
});
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
/**
|
||||
* 逶大成霍ｯ逕ｱ蜿伜喧<E4BC9C>檎｡ｮ菫晁除蜊戊<E89C8A>髫週agsView蛻<77>困閠梧ｭ｣遑ｮ豼豢?
|
||||
*/
|
||||
watch(
|
||||
() => currentRoute.path,
|
||||
() => {
|
||||
nextTick(() => {
|
||||
updateParentMenuStyles();
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* 譖ｴ譁ｰ辷ｶ闖懷黒譬ｷ蠑?- 荳ｺ蛹<EFBDBA>性豼豢ｻ蟄占除蜊慕噪辷ｶ闖懷黒豺ｻ蜉<EFBDBB> has-active-child 邀?
|
||||
*/
|
||||
function updateParentMenuStyles() {
|
||||
if (!menuRef.value?.$el) return;
|
||||
|
||||
nextTick(() => {
|
||||
try {
|
||||
const menuEl = menuRef.value?.$el as HTMLElement;
|
||||
if (!menuEl) return;
|
||||
|
||||
// 遘ｻ髯､謇譛臥鴫譛臥噪 has-active-child 邀?
|
||||
const allSubMenus = menuEl.querySelectorAll(".el-sub-menu");
|
||||
allSubMenus.forEach((subMenu) => {
|
||||
subMenu.classList.remove("has-active-child");
|
||||
});
|
||||
|
||||
// 譟･謇ｾ蠖灘燕豼豢ｻ逧<EFBDBB>除蜊暮｡?
|
||||
const activeMenuItem = menuEl.querySelector(".el-menu-item.is-active");
|
||||
|
||||
if (activeMenuItem) {
|
||||
// 蜷台ｸ頑衍謇ｾ辷ｶ郤ｧ el-sub-menu 蜈<>ｴ<EFBFBD>
|
||||
let parent = activeMenuItem.parentElement;
|
||||
while (parent && parent !== menuEl) {
|
||||
if (parent.classList.contains("el-sub-menu")) {
|
||||
parent.classList.add("has-active-child");
|
||||
}
|
||||
parent = parent.parentElement;
|
||||
}
|
||||
} else {
|
||||
// 豌ｴ蟷ｳ讓｡蠑丈ｸ句庄閭ｽ髴隕∫音谿雁､<E99B81><EFBDA4>?
|
||||
if (props.menuMode === "horizontal") {
|
||||
// 蟇ｹ莠取ｰｴ蟷ｳ闖懷黒<E687B7>御ｽｿ逕ｨ霍ｯ蠕<EFBDAF>源驟肴擂謇ｾ蛻ｰ辷ｶ闖懷<E99796>?
|
||||
const currentPath = activeMenuPath.value;
|
||||
|
||||
// 譟･謇ｾ謇譛臥宛闖懷黒鬘ｹ<E9AC98>梧｣譟･蜩ｪ荳ｪ蛹<EFBDAA>性蠖灘燕霍ｯ蠕?
|
||||
allSubMenus.forEach((subMenu) => {
|
||||
const subMenuEl = subMenu as HTMLElement;
|
||||
const subMenuPath =
|
||||
subMenuEl.getAttribute("data-path") ||
|
||||
subMenuEl.querySelector(".el-sub-menu__title")?.getAttribute("data-path");
|
||||
|
||||
// 螯よ棡謇ｾ蛻ｰ蛹<EFBDB0>性蠖灘燕霍ｯ蠕<EFBDAF>噪辷ｶ闖懷黒<E687B7>悟<EFBFBD>豺ｻ蜉<EFBDBB>豼豢ｻ邀ｻ
|
||||
if (subMenuPath && currentPath.startsWith(subMenuPath)) {
|
||||
subMenuEl.classList.add("has-active-child");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error updating parent menu styles:", error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 扈<>ｻｶ謖りｽｽ蜷守ｫ句叉譖ｴ譁ｰ辷ｶ闖懷黒譬ｷ蠑<EFBDB7>
|
||||
*/
|
||||
onMounted(() => {
|
||||
// 遑ｮ菫晏惠扈<E683A0>ｻｶ謖りｽｽ蜷取峩譁ｰ譬ｷ蠑擾ｼ御ｸ堺ｾ晁ｵ紋ｺ主ｼよｭ･謫堺ｽ?
|
||||
updateParentMenuStyles();
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user