version9

2

resources/Web/MicroCommunityWeb/html/components/frame/menu2/menu2.js

@@ -19,15 +19,35 @@
                 vm.subMenus = [];
                 vm.getMenus(_param.detail);
             }, false);
-        },
-        methods: {
-            _initSysInfo: function() {
-                let sysInfo = vc.getData("_sysInfo");
-                if (sysInfo == null) {
-                    this.logo = "HC";
+
+            // 点击页面空白处自动关闭二级菜单
+            document.addEventListener('click', (e) => {
+                const menuNav = document.getElementById('menu-nav');  // 整个菜单区域（包含一级和二级）
+                const flyoutMenu = document.querySelector('.vc-menu-sub.flyout');
+
+                // 如果点击的是菜单区域内部（一级菜单或二级菜单），不关闭
+                if (menuNav && menuNav.contains(e.target)) {
                     return;
                 }
-                this.logo = sysInfo.logo;
+
+                // 点击的是页面其他地方 → 关闭二级菜单
+                if (flyoutMenu && flyoutMenu.classList.contains('active')) {
+                    this._closeSubMenu();
+                }
+            });
+        },
+        methods: {
+            _initSysInfo: function () {
+                let sysInfo = vc.getData("java110SystemInfo");
+                let _that = this;
+                if (!sysInfo) {
+                    setTimeout(function () {
+                        sysInfo = vc.getData("java110SystemInfo");
+                        _that.logo = sysInfo.systemSimpleTitle;
+                    }, 2000);
+                    return;
+                }
+                this.logo = sysInfo.systemSimpleTitle;
             },
             _gotoIndex: function() {
                 vc.jumpToPage("/")
@@ -93,6 +113,38 @@
                 vm.subMenus = _menu.childs;
                 vm.curMenuName = _menu.name;
 
+                // 二级菜单样式调整
+                vm.$nextTick(() => {
+                    const activeItem = document.querySelector('.vc-menu-main li.active');
+                    const flyoutMenu = document.querySelector('.vc-menu-sub.flyout');
+                    const mainMenu = document.querySelector('.vc-menu-main'); // 一级菜单容器
+
+                    if (activeItem && flyoutMenu && mainMenu) {
+                        const itemTop = activeItem.offsetTop;
+                        const itemHeight = activeItem.offsetHeight;
+                        const menuHeight = flyoutMenu.offsetHeight;
+                        const mainMenuRect = mainMenu.getBoundingClientRect();
+                        const availableBottom = mainMenuRect.bottom - 20; // 距离视口底部留20px边距
+
+                        // 理想位置：垂直居中对齐当前项
+                        let desiredTop = itemTop + (itemHeight - menuHeight) / 2;
+
+                        // 限制：不能超出顶部
+                        if (desiredTop < 10) {
+                            desiredTop = 10;
+                        }
+
+                        // 限制：底部不能超过一级菜单可见底部
+                        const maxTop = window.innerHeight - menuHeight - 60; // 留出顶部导航和底部安全距
+                        if (desiredTop > maxTop) {
+                            desiredTop = maxTop;
+                        }
+
+                        flyoutMenu.style.top = desiredTop + 'px';
+                        flyoutMenu.classList.add('active');
+                    }
+                });
+
                 if (!_menu.childs || _menu.childs.length < 1) {
                     return;
                 }
@@ -147,7 +199,61 @@
                 vm.menus.forEach(item => {
                     item.active = false;
                 });
-            }
+            },
+            // 新增：鼠标进入一级菜单项
+            hoverMenu: function(_menu) {
+                // 高亮当前一级菜单
+                this.menus = this.refreshMenuActive(this.menus, _menu.id);
+                vc.setMenus(this.menus);
+
+                // 显示对应的二级菜单
+                this.subMenus = _menu.childs || [];
+                this.curMenuName = _menu.name;
+
+                // Vue渲染完成后定位并显示二级菜单
+                this.$nextTick(() => {
+                    const hoveredItem = document.querySelector('.vc-menu-main li.active');
+                    const flyoutMenu = document.querySelector('.vc-menu-sub.flyout');
+
+                    if (hoveredItem && flyoutMenu) {
+                        const itemTop = hoveredItem.offsetTop;
+                        const itemHeight = hoveredItem.offsetHeight;
+                        const menuHeight = flyoutMenu.offsetHeight;
+
+                        // 垂直居中对齐当前项
+                        let desiredTop = itemTop + (itemHeight - menuHeight) / 2;
+                        if (desiredTop < 10) desiredTop = 10;
+
+                        const maxTop = window.innerHeight - menuHeight - 60;
+                        if (desiredTop > maxTop) desiredTop = maxTop;
+
+                        flyoutMenu.style.top = desiredTop + 'px';
+                        flyoutMenu.classList.add('active');
+                    }
+                });
+            },
+
+            // 新增：鼠标离开一级菜单项时隐藏二级菜单
+            leaveMenu: function() {
+                // 延迟隐藏，防止鼠标快速移到二级菜单时闪烁
+                setTimeout(() => {
+                    const flyoutMenu = document.querySelector('.vc-menu-sub.flyout');
+                    const menuNav = document.getElementById('menu-nav');
+
+                    // 如果鼠标当前不在整个菜单区域内，才关闭
+                    if (flyoutMenu && menuNav && !menuNav.matches(':hover')) {
+                        this.subMenus = [];
+                        this.curMenuName = '';
+                        this.menus.forEach(item => item.active = false);
+                        flyoutMenu.classList.remove('active');
+                    }
+                }, 200); // 200ms 延迟，给用户时间把鼠标移到二级菜单上
+            },
+            // 鼠标在二级菜单上时保持打开
+            keepMenuOpen: function() {
+                // 可以什么都不做，只是阻止 leaveMenu 的定时器触发关闭
+                // 实际通过 :hover 判断已足够
+            },
         },
 
     });