From dc5cfab319c7fae36be5c9568208fb2c512576ec Mon Sep 17 00:00:00 2001 From: Vben Date: Mon, 26 Aug 2024 22:58:49 +0800 Subject: [PATCH] fix: tabbar does not meet expectations in a mixed layout (#4242) --- docs/src/en/guide/in-depth/access.md | 4 ++-- docs/src/guide/in-depth/access.md | 4 ++-- packages/@core/ui-kit/layout-ui/src/vben-layout.vue | 2 +- packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts | 1 + 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/docs/src/en/guide/in-depth/access.md b/docs/src/en/guide/in-depth/access.md index fd06fa28..6a20d6a1 100644 --- a/docs/src/en/guide/in-depth/access.md +++ b/docs/src/en/guide/in-depth/access.md @@ -11,7 +11,7 @@ The framework has built-in two types of access control methods: ## Frontend Access Control -**Implementation Principle**: The permissions for routes are hardcoded on the frontend, specifying which permissions are required to view certain routes. Only general routes are initialized, and routes that require permissions are not added to the route table. After logging in or obtaining user roles through other means, the roles are used to traverse the route table to generate a route table that the role can access. This table is then added to the router instance using `router.addRoutes`, achieving permission filtering. +**Implementation Principle**: The permissions for routes are hardcoded on the frontend, specifying which permissions are required to view certain routes. Only general routes are initialized, and routes that require permissions are not added to the route table. After logging in or obtaining user roles through other means, the roles are used to traverse the route table to generate a route table that the role can access. This table is then added to the router instance using `router.addRoute`, achieving permission filtering. **Disadvantage**: The permissions are relatively inflexible; if the backend changes roles, the frontend needs to be adjusted accordingly. This is suitable for systems with relatively fixed roles. @@ -71,7 +71,7 @@ Sometimes, we need the menu to be visible but access to it forbidden. This can b ## Backend Access Control -**Implementation Principle**: It is achieved by dynamically generating a routing table through an API, which returns data following a certain structure. The frontend processes this data into a recognizable structure, then adds it to the routing instance using `router.addRoutes`, realizing the dynamic generation of permissions. +**Implementation Principle**: It is achieved by dynamically generating a routing table through an API, which returns data following a certain structure. The frontend processes this data into a recognizable structure, then adds it to the routing instance using `router.addRoute`, realizing the dynamic generation of permissions. **Disadvantage**: The backend needs to provide a data structure that meets the standards, and the frontend needs to process this structure. This is suitable for systems with more complex permissions. diff --git a/docs/src/guide/in-depth/access.md b/docs/src/guide/in-depth/access.md index 25e294d7..1bfee2ef 100644 --- a/docs/src/guide/in-depth/access.md +++ b/docs/src/guide/in-depth/access.md @@ -11,7 +11,7 @@ outline: deep ## 前端访问控制 -**实现原理**: 在前端固定写死路由的权限，指定路由有哪些权限可以查看。只初始化通用的路由，需要权限才能访问的路由没有被加入路由表内。在登陆后或者其他方式获取用户角色后，通过角色去遍历路由表，获取该角色可以访问的路由表，生成路由表，再通过 `router.addRoutes` 添加到路由实例，实现权限的过滤。 +**实现原理**: 在前端固定写死路由的权限，指定路由有哪些权限可以查看。只初始化通用的路由，需要权限才能访问的路由没有被加入路由表内。在登陆后或者其他方式获取用户角色后，通过角色去遍历路由表，获取该角色可以访问的路由表，生成路由表，再通过 `router.addRoute` 添加到路由实例，实现权限的过滤。 **缺点**: 权限相对不自由，如果后台改动角色，前台也需要跟着改动。适合角色较固定的系统 @@ -71,7 +71,7 @@ authStore.setUserInfo(userInfo); ## 后端访问控制 -**实现原理**: 是通过接口动态生成路由表，且遵循一定的数据结构返回。前端根据需要处理该数据为可识别的结构，再通过 router.addRoutes 添加到路由实例，实现权限的动态生成。 +**实现原理**: 是通过接口动态生成路由表，且遵循一定的数据结构返回。前端根据需要处理该数据为可识别的结构，再通过 `router.addRoute` 添加到路由实例，实现权限的动态生成。 **缺点**: 后端需要提供符合规范的数据结构，前端需要处理数据结构，适合权限较为复杂的系统。 diff --git a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue index 7abfa220..2e2c981c 100644 --- a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue +++ b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue @@ -242,7 +242,7 @@ const tabbarStyle = computed((): CSSProperties => { let marginLeft = 0; // 如果不是混合导航，tabbar 的宽度为 100% - if (!isMixedNav.value) { + if (!isMixedNav.value || props.sidebarHidden) { width = '100%'; } else if (sidebarEnable.value) { // 鼠标在侧边栏上时，且侧边栏展开时的宽度 diff --git a/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts b/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts index 72529d59..a56b3821 100644 --- a/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts +++ b/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts @@ -73,6 +73,7 @@ export function useTabsViewScroll(props: TabsProps) { resizeObserver = new ResizeObserver( useDebounceFn((_entries: ResizeObserverEntry[]) => { calcShowScrollbarButton(); + scrollToActiveIntoView(); }, 100), ); resizeObserver.observe(viewportEl);