From 7de02556972119ae46113e7a24301372b22821b8 Mon Sep 17 00:00:00 2001
From: wang_fan_w <2547096351@qq.com>
Date: Sat, 24 Aug 2024 19:41:02 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=A8=AA=E5=90=91=E5=92=8C=E6=B7=B7?=
=?UTF-8?q?=E5=90=88=E5=B8=83=E5=B1=80=E5=88=87=E6=8D=A2=E5=9B=BD=E9=99=85?=
=?UTF-8?q?=E5=8C=96=E5=90=8E=E7=9A=84=E8=8F=9C=E5=8D=95=E6=BA=A2=E5=87=BA?=
=?UTF-8?q?=E3=80=81=E8=8F=9C=E5=8D=95=E9=9A=90=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/hooks/useMneuMethod.ts | 28 +++++++++++
src/layout/components/Menu/menu-item.vue | 12 +----
src/layout/components/Tabs/index.vue | 4 +-
src/layout/layout-head/index.vue | 60 ++++++++++++++++--------
src/layout/layout-mixing/index.vue | 42 ++++++++++++-----
src/router/route.ts | 2 +-
6 files changed, 105 insertions(+), 43 deletions(-)
create mode 100644 src/hooks/useMneuMethod.ts
diff --git a/src/hooks/useMneuMethod.ts b/src/hooks/useMneuMethod.ts
new file mode 100644
index 0000000..69f5861
--- /dev/null
+++ b/src/hooks/useMneuMethod.ts
@@ -0,0 +1,28 @@
+/**
+ * 菜单处理hooks，内置多种菜单处理场景
+ * @returns 菜单处理方法
+ */
+export const useMneuMethod = () => {
+ /**
+ * 多级菜单的显示隐藏
+ * @param {Menu.MenuOptions} item 菜单的item
+ * @returns 若多级菜单有children，并且不隐藏，返回true，否则返回false
+ */
+ const menuShow = (item: Menu.MenuOptions) => {
+ if (item.children && item.children?.length > 0 && !item.meta.hide) return true;
+ return false;
+ };
+ /**
+ * 单级菜单的显示隐藏
+ * @param {Menu.MenuOptions} item 菜单的item
+ * @returns 若单级菜单不隐藏，返回true，否则返回false
+ */
+ const aMenuShow = (item: Menu.MenuOptions) => {
+ if (!item.meta.hide) return true;
+ return false;
+ };
+ return {
+ menuShow,
+ aMenuShow
+ };
+};
diff --git a/src/layout/components/Menu/menu-item.vue b/src/layout/components/Menu/menu-item.vue
index 6b716cf..3d042c6 100644
--- a/src/layout/components/Menu/menu-item.vue
+++ b/src/layout/components/Menu/menu-item.vue
@@ -19,6 +19,7 @@
diff --git a/src/layout/components/Tabs/index.vue b/src/layout/components/Tabs/index.vue
index 7fb6944..dcc7848 100644
--- a/src/layout/components/Tabs/index.vue
+++ b/src/layout/components/Tabs/index.vue
@@ -90,10 +90,10 @@ const refresh = () => {
const themeStore = useThemeConfig();
themeStore.setRefreshPage(false);
currentRoute.value.meta.keepAlive && routerStore.removeRouteName(currentRoute.value.name);
- setTimeout(() => {
+ nextTick(() => {
themeStore.setRefreshPage(true);
currentRoute.value.meta.keepAlive && routerStore.setRouteNames(currentRoute.value.name);
- }, 0);
+ });
};
// 关闭当前
diff --git a/src/layout/layout-head/index.vue b/src/layout/layout-head/index.vue
index a2e9045..b2b9059 100644
--- a/src/layout/layout-head/index.vue
+++ b/src/layout/layout-head/index.vue
@@ -5,24 +5,32 @@
+
-
-
-
-
-
-
- {{ $t(`language.${item.meta.title}`) }}
-
-
-
-
-
-
- {{ $t(`language.${item.meta.title}`) }}
-
-
-
@@ -43,12 +51,21 @@ import { storeToRefs } from "pinia";
import { useRoutesListStore } from "@/store/modules/route-list";
import { useRoutingMethod } from "@/hooks/useRoutingMethod";
import { useThemeConfig } from "@/store/modules/theme-config";
+import { useMneuMethod } from "@/hooks/useMneuMethod";
defineOptions({ name: "LayoutHead" });
const router = useRouter();
const routerStore = useRoutesListStore();
const themeStore = useThemeConfig();
const { routeTree, currentRoute } = storeToRefs(routerStore);
-const { isFooter } = storeToRefs(themeStore);
+const { isFooter, language } = storeToRefs(themeStore);
+
+const { menuShow, aMenuShow } = useMneuMethod();
+
+const drawing = ref(true);
+watch(language, () => {
+ drawing.value = false;
+ nextTick(() => (drawing.value = true));
+});
/**
* @description 菜单点击事件
@@ -79,15 +96,20 @@ const onMenuItem = (key: string) => {
.header {
padding: 0 $padding;
height: 60px;
+ width: 100%;
box-sizing: border-box;
border-bottom: $border-1 solid $color-border-2;
display: flex;
- justify-content: space-between;
align-items: center;
overflow: hidden;
.header-logo {
max-width: 180px;
}
+ .layout-head-menu {
+ flex: 1;
+ display: flex;
+ overflow: hidden;
+ }
}
:deep(.arco-menu-pop) {
diff --git a/src/layout/layout-mixing/index.vue b/src/layout/layout-mixing/index.vue
index 13f05c2..a49d272 100644
--- a/src/layout/layout-mixing/index.vue
+++ b/src/layout/layout-mixing/index.vue
@@ -16,15 +16,24 @@
-
-
-
-
-
+
@@ -45,21 +54,27 @@ import { useRoutesListStore } from "@/store/modules/route-list";
import { useRoutingMethod } from "@/hooks/useRoutingMethod";
import { storeToRefs } from "pinia";
import { useThemeConfig } from "@/store/modules/theme-config";
+import { useMneuMethod } from "@/hooks/useMneuMethod";
defineOptions({ name: "LayoutMixing" });
const route = useRoute();
const router = useRouter();
const routerStore = useRoutesListStore();
const themeStore = useThemeConfig();
-const { isFooter, collapsed, asideDark } = storeToRefs(themeStore);
+const { isFooter, collapsed, asideDark, language } = storeToRefs(themeStore);
const { routeTree } = storeToRefs(routerStore);
+const { aMenuShow } = useMneuMethod();
+
+const drawing = ref(true);
+watch(language, () => {
+ drawing.value = false;
+ nextTick(() => (drawing.value = true));
+});
// 折叠
const onCollapsed = () => {
themeStore.setCollapsed(!collapsed.value);
};
-console.log("路由信息", route);
-
// 由于刷新后，路由信息丢失，所以需要重新获取
// 混合布局的横向菜单为顶层路由下的一级菜单
// 这里通过当前路由信息直接获取
@@ -181,6 +196,11 @@ const getAsideMenu = (key: string) => {
}
}
}
+ .layout-head-menu {
+ flex: 1;
+ display: flex;
+ overflow: hidden;
+ }
}
:deep(.arco-menu-pop) {
diff --git a/src/router/route.ts b/src/router/route.ts
index c90a345..4d35423 100644
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -533,7 +533,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
{
path: "/system-management",
name: "system-management",
- redirect: "/system-management/account management",
+ redirect: "/system-management/account-management",
meta: {
title: "system-management",
hide: false,