优化优化

src/app/components/AdminSidebarMenu.test.ts

@@ -105,4 +105,17 @@ describe('AdminSidebarMenu', () => {
     expect(wrapper.findAll('[data-kind="group"]')).toHaveLength(2)
     expect(wrapper.get('[data-kind="item"]').attributes('data-index')).toBe('/tracking')
   })
+
+  it('recreates the menu when asynchronously loaded groups change', async () => {
+    const wrapper = mount(AdminSidebarMenu, {
+      props: { items: [adminNavigation[0]], activePath: '/dashboard', collapsed: false },
+      global: { stubs },
+    })
+    const initialMenu = wrapper.get('nav').element
+
+    await wrapper.setProps({ items: visibleNavigation })
+
+    expect(wrapper.get('nav').element).not.toBe(initialMenu)
+    expect(wrapper.text()).toContain('系统管理')
+  })
 })

src/app/components/AdminSidebarMenu.vue

@@ -16,10 +16,12 @@ function getGroupKeys(nodes: AdminNavigationNode[]): string[] {
 }
 
 const defaultOpeneds = computed(() => getGroupKeys(props.items))
+const menuInstanceKey = computed(() => `${props.collapsed ? 'collapsed' : 'expanded'}:${defaultOpeneds.value.join('|')}`)
 </script>
 
 <template>
   <el-menu
+    :key="menuInstanceKey"
     class="side-nav-menu"
     :default-active="activePath"
     :collapse="collapsed"