Browse Source

fix: automatic hiding and displaying of headers can only be used on content (#4145)

Vben 7 months ago
parent
commit
3b0f72330a

+ 5 - 5
docs/src/guide/essentials/route.md

@@ -16,15 +16,15 @@ outline: deep
 
 ```ts
 // 有需要可以自行打开注释,并创建文件夹
-// const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true }); // [!code --]
+// const externalRouteFiles = import.meta.glob('./external/**/*.ts', { eager: true }); // [!code --]
 const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true }); // [!code ++]
 /** 动态路由 */
 const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles);
 
-/** 静态路由列表,访问这些页面可以不需要权限 */
-// const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles); // [!code --]
-const staticRoutes: RouteRecordRaw[] = []; // [!code --]
-const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles); // [!code ++]
+/** 外部路由列表,访问这些页面可以不需要Layout,可能用于内嵌在别的系统 */
+// const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles) // [!code --]
+const externalRoutes: RouteRecordRaw[] = []; // [!code --]
+const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles); // [!code ++]
 ```
 
 ### 动态路由

+ 7 - 5
packages/@core/ui-kit/layout-ui/src/vben-layout.vue

@@ -59,6 +59,11 @@ const sidebarExtraCollapse = defineModel<boolean>('sidebarExtraCollapse');
 const sidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover');
 const sidebarEnable = defineModel<boolean>('sidebarEnable', { default: true });
 
+// side是否处于hover状态展开菜单中
+const sidebarExpandOnHovering = ref(false);
+const headerIsHidden = ref(false);
+const contentRef = ref();
+
 const {
   arrivedState,
   directions,
@@ -66,11 +71,7 @@ const {
   y: scrollY,
 } = useScroll(document);
 
-const { y: mouseY } = useMouse({ type: 'client' });
-
-// side是否处于hover状态展开菜单中
-const sidebarExpandOnHovering = ref(false);
-const headerIsHidden = ref(false);
+const { y: mouseY } = useMouse({ target: contentRef, type: 'client' });
 
 const realLayout = computed(() =>
   props.isMobile ? 'sidebar-nav' : props.layout,
@@ -507,6 +508,7 @@ function handleOpenMenu() {
     </LayoutSidebar>
 
     <div
+      ref="contentRef"
       class="flex flex-1 flex-col overflow-hidden transition-all duration-300 ease-in"
     >
       <div