首页优化（自加组件）

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

klp-ui/src/views/index.vue

@@ -19,7 +19,7 @@
             </p>
           </div>
 
-          <statistic-group />
+          <quick-access-group />
         </el-col>
 
         <!-- 右栏 -->
@@ -37,10 +37,6 @@
       </el-row>
     </div>
 
-    <!-- <div>
-      <statistic-group />
-    </div> -->
-    
     <!-- <AllApplications />    
     <el-row :gutter="10">
       <el-col :span="18">
@@ -54,7 +50,7 @@
 </template>
 
 <script>
-import StatisticGroup from '@/components/HomeModules/StatisticGroup.vue'
+import QuickAccessGroup from '@/components/HomeModules/QuickAccessGroup.vue'
 // import AllApplications from '@/components/HomeModules/AllApplications.vue'
 // import MiniCalendar from '@/components/HomeModules/MiniCalendar.vue'
 
@@ -62,7 +58,7 @@ export default {
   name: 'Index',
   components: {
     // PanelGroup,
-    StatisticGroup,
+    QuickAccessGroup,
     // AllApplications,
     // MiniCalendar,
   },
@@ -193,4 +189,4 @@ export default {
     }
   }
 }
-</style>
+</style>