From 28db7e85a1e92282d081a9e28b0b9706804847e2 Mon Sep 17 00:00:00 2001
From: wf <2547096351@qq.com>
Date: Tue, 14 May 2024 13:05:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=8F=9C=E5=8D=95=E6=A0=91=E6=94=B9?=
=?UTF-8?q?=E4=B8=BA=E6=8E=A5=E6=94=B6=E5=80=BC=EF=BC=8C=E6=B7=B7=E5=90=88?=
=?UTF-8?q?=E5=B8=83=E5=B1=80=E4=B8=8B=E7=9A=84=E6=A8=AA=E5=90=91=E8=8F=9C?=
=?UTF-8?q?=E5=8D=95=E6=BF=80=E6=B4=BB=E3=80=81=E7=82=B9=E5=87=BB=E6=A8=AA?=
=?UTF-8?q?=E5=90=91=E8=8F=9C=E5=8D=95=E5=85=B3=E8=81=94=E5=B7=A6=E4=BE=A7?=
=?UTF-8?q?=E8=8F=9C=E5=8D=95=E6=A0=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/layout/components/Aside/index.vue | 6 +-
.../Header/components/header-left/index.vue | 2 +-
.../Header/components/header-right/index.vue | 2 +-
src/layout/components/Menu/index copy.vue | 46 +++++++++++++
src/layout/components/Menu/index.vue | 21 +++---
src/layout/layout-mixing/index.vue | 64 +++++++++++--------
6 files changed, 100 insertions(+), 41 deletions(-)
create mode 100644 src/layout/components/Menu/index copy.vue
diff --git a/src/layout/components/Aside/index.vue b/src/layout/components/Aside/index.vue
index 8831d19..1b64175 100644
--- a/src/layout/components/Aside/index.vue
+++ b/src/layout/components/Aside/index.vue
@@ -2,7 +2,7 @@
@@ -12,9 +12,11 @@ import Logo from "@/layout/components/Logo/index.vue";
import Menu from "@/layout/components/Menu/index.vue";
import { storeToRefs } from "pinia";
import { useThemeConfig } from "@/store/modules/theme-config";
-
+import { useRoutesListStore } from "@/store/modules/route-list";
const themeStore = useThemeConfig();
const { collapsed, asideDark } = storeToRefs(themeStore);
+const routerStore = useRoutesListStore();
+const { routeTree } = storeToRefs(routerStore);
diff --git a/src/layout/components/Menu/index.vue b/src/layout/components/Menu/index.vue
index 47cce20..d5f1152 100644
--- a/src/layout/components/Menu/index.vue
+++ b/src/layout/components/Menu/index.vue
@@ -10,7 +10,7 @@
:selected-keys="[currentRoute.name]"
@menu-item-click="onMenuItem"
>
-
+
@@ -23,10 +23,19 @@ import { useRouter } from "vue-router";
import { useRoutingMethod } from "@/hooks/useRoutingMethod";
const router = useRouter();
const routerStore = useRoutesListStore();
-const { routeTree, currentRoute } = storeToRefs(routerStore);
+const { currentRoute } = storeToRefs(routerStore);
const themeStore = useThemeConfig();
const { collapsed, isAccordion, layoutType, asideDark } = storeToRefs(themeStore);
+interface Props {
+ routeTree: Menu.MenuOptions[];
+}
+// props的数据类型
+// type类型参考：https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
+const props = withDefaults(defineProps(), {
+ routeTree: () => []
+});
+
/**
* @description 菜单点击事件
* @param {String} key
@@ -41,14 +50,6 @@ const onMenuItem = (key: string) => {
router.push("/404");
}
};
-
-// const mode = computed(() => {
-// if (layoutType.value === "layoutDefaults") {
-// return "vertical";
-// } else {
-// return "horizontal";
-// }
-// });
diff --git a/src/layout/layout-mixing/index.vue b/src/layout/layout-mixing/index.vue
index 597c462..890c789 100644
--- a/src/layout/layout-mixing/index.vue
+++ b/src/layout/layout-mixing/index.vue
@@ -3,7 +3,7 @@
@@ -19,22 +19,13 @@
-
-
-
-
-
-
- {{ $t(`language.${item.meta.title}`) }}
-
-
-
-
-
-
- {{ $t(`language.${item.meta.title}`) }}
-
-
+
+
+
+
+
+ {{ $t(`language.${item.meta.title}`) }}
+
@@ -52,7 +43,6 @@ import Main from "@/layout/components/Main/index.vue";
import Footer from "@/layout/components/Footer/index.vue";
import Menu from "@/layout/components/Menu/index.vue";
import HeaderRight from "@/layout/components/Header/components/header-right/index.vue";
-import MenuItem from "@/layout/components/Menu/menu-item.vue";
import MenuItemIcon from "@/layout/components/Menu/menu-item-icon.vue";
import { useRouter } from "vue-router";
import { useRoutesListStore } from "@/store/modules/route-list";
@@ -60,27 +50,47 @@ import { useRoutingMethod } from "@/hooks/useRoutingMethod";
import { storeToRefs } from "pinia";
import { useThemeConfig } from "@/store/modules/theme-config";
defineOptions({ name: "LayoutMixing" });
-
-const themeStore = useThemeConfig();
-const { isFooter, collapsed, asideDark } = storeToRefs(themeStore);
-
+const route = useRoute();
const router = useRouter();
const routerStore = useRoutesListStore();
-const { routeTree, currentRoute } = storeToRefs(routerStore);
+const themeStore = useThemeConfig();
+const { isFooter, collapsed, asideDark } = storeToRefs(themeStore);
+const { routeTree } = storeToRefs(routerStore);
// 折叠
const onCollapsed = () => {
themeStore.setCollapsed(!collapsed.value);
};
-/**
- * @description 菜单点击事件
- * @param {String} key
- */
+
+console.log("路由信息", route);
+
+// 由于刷新后，路由信息丢失，所以需要重新获取
+// 混合布局的横向菜单为顶层路由下的一级菜单
+// 这里通过当前路由信息直接获取
+const aciveRoute = computed(() => {
+ if (route.matched.length >= 2) {
+ return route.matched[1].name;
+ } else {
+ return route.matched[0].name;
+ }
+});
+
+// 横向菜单点击事件
+// 将一级菜单下的children给左侧菜单
+// 如果没有children则直接自身菜单给左侧菜单
+const routeList = ref([]);
const onMenuItem = (key: string) => {
const { findLinearArray } = useRoutingMethod();
const find = findLinearArray(key);
// 路由存在则存入并跳转，不存在则跳404
if (find) {
+ // 将父级的chindren给左侧树
+ if (find.children && find.children.length > 0) {
+ routeList.value = find.children;
+ } else {
+ // 如果没有则直接将父级给左侧树，做一级兜底
+ routeList.value = [find];
+ }
router.push(find.path);
} else {
router.push("/404");