feat: horizontal menu

d2-admin/components/d2-admin/layout/header-aside/index.vue

@@ -21,7 +21,7 @@
     <slot/>
   </div>
   <div class="layout-header-aside__header" :style="headerStyle">
-    header
+    <d2-admin-layout-header-aside-menu-horizontal/>
   </div>
   <div class="layout-header-aside__aside" :style="asideStyle">
     <d2-admin-layout-header-aside-menu-vertical/>

d2-admin/components/d2-admin/layout/header-aside/menu/horizontal.jsx

@@ -0,0 +1,44 @@
+import { defineComponent, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { storeToRefs } from 'pinia'
+import { useMenuMainStore } from 'd2-admin/store/menu-main.js'
+import { useMenu } from 'd2-admin/use/menu.js'
+import { getMenuId } from 'd2-admin/utils/menu.js'
+import { renderMenus } from './utils/render.jsx'
+
+export default defineComponent({
+  setup () {
+    const route = useRoute()
+
+    const menu = useMenu()
+    const { navigateByMenu } = menu
+
+    const menuMainStore = useMenuMainStore()
+    const { menus } = storeToRefs(menuMainStore)
+    const { getMenuById, getMenuByUrl } = menuMainStore
+
+    function onSelect (id) {
+      navigateByMenu(getMenuById(id))
+    }
+
+    const defaultActive = computed(() => getMenuId(getMenuByUrl(route.fullPath)))
+
+    return {
+      menus,
+      onSelect,
+      defaultActive
+    }
+  },
+  render () {
+    const {
+      menus,
+      onSelect,
+      defaultActive
+    } = this
+    return renderMenus(menus, {
+      mode: 'horizontal',
+      onSelect,
+      defaultActive
+    })
+  }
+})

d2-admin/components/d2-admin/layout/header-aside/menu/utils/render.jsx

@@ -33,7 +33,10 @@ export const renderSub = menu => (
 
 export const renderMenu = menu => (hasChildren(menu) ? renderSub : renderItem)(menu)
 
-export const renderMenus = (menus = [], props = {}) => (
+export const renderMenus = (
+  menus = [],
+  props = {}
+) => (
   <el-menu {...props}>
     { menus.map(renderMenu) }
   </el-menu>

d2-admin/components/d2-admin/layout/header-aside/menu/vertical.jsx

@@ -2,9 +2,9 @@ import { defineComponent, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import { useMenuMainStore } from 'd2-admin/store/menu-main.js'
-import { getMenuId } from 'd2-admin/utils/menu.js'
 import { useMenu } from 'd2-admin/use/menu.js'
-import { renderMenus } from './render.jsx'
+import { getMenuId } from 'd2-admin/utils/menu.js'
+import { renderMenus } from './utils/render.jsx'
 
 export default defineComponent({
   setup () {
@@ -36,6 +36,7 @@ export default defineComponent({
       defaultActive
     } = this
     return renderMenus(menus, {
+      mode: 'vertical',
       onSelect,
       defaultActive
     })