首页优化（自加组件）

klp-ui/src/layout/components/Sidebar/index.vue

@@ -23,7 +23,7 @@
                     <span class="top-menu-title">{{ (menu.meta && menu.meta.title) || menu.name }}</span>
                 </div>
             </div>
-            <div slot="reference" class="sidebar-section-title" :class="{ 'is-collapse': isCollapse }">
+            <div ref="topMenuTrigger" slot="reference" class="sidebar-section-title" :class="{ 'is-collapse': isCollapse }" tabindex="0">
                 <div class="section-title-inner">
                     <div class="section-icon">
                         <svg-icon v-if="activeTopMenuIcon" :icon-class="activeTopMenuIcon" />
@@ -141,6 +141,11 @@ export default {
         }
     },
     watch: {
+        sectionPopoverVisible: {
+            handler(val) {
+                if (!val) this.releasePopoverFocus()
+            }
+        },
         $route: {
             immediate: true,
             handler(newRoute) {
@@ -165,8 +170,16 @@ export default {
             this.$router.push('/')
             this.$nextTick(() => {
                 this.sectionPopoverVisible = false
+                this.releasePopoverFocus()
             })
         },
+        releasePopoverFocus() {
+            if (typeof document === 'undefined') return
+            const el = document.activeElement
+            if (el && typeof el.blur === 'function') el.blur()
+            const trigger = this.$refs && this.$refs.topMenuTrigger
+            if (trigger && typeof trigger.focus === 'function') trigger.focus()
+        },
         autoSelectTopMenu(currentPath) {
             const topMenus = this.$store.state.permission.topMenuList
             if (topMenus.length === 0) return