lisang
/
d2-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: menu

This commit is contained in:
FairyEver 2021-10-18 22:04:49 +08:00
parent e3d42acb27
commit a6d8e43b7f
4 changed files with 59 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
d2-admin/components/d2-admin/layout/header-aside/index.vue
View File

@ -33,7 +33,7 @@ import { computed, ref } from 'vue'
import { px } from 'd2-projects/d2-utils/css.js'
import { useCssPosition } from 'd2-projects/d2-use/use-css-position.js'
const headerHeight = ref(50)
const headerHeight = ref(60)
const asideWidth = ref(200)
const { position } = useCssPosition(headerHeight, 0, 0, asideWidth)

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

@ -1,44 +1,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 { useMenu } from 'd2-admin/use/menu.js'
import { getMenuId } from 'd2-admin/utils/menu.js'
import { renderMenus } from './utils/render.jsx'
import { defineMenuComponent } from './utils/define.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
})
export default defineMenuComponent({
store: useMenuMainStore,
props: {
mode: 'horizontal'
}
})

48
d2-admin/components/d2-admin/layout/header-aside/menu/utils/define.jsx Normal file
View File

@ -0,0 +1,48 @@
import { defineComponent, computed } from 'vue'
import { useRoute } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useMenu } from 'd2-admin/use/menu.js'
import { getMenuId } from 'd2-admin/utils/menu.js'
import { renderMenus } from './render.jsx'
export function defineMenuComponent ({
store,
props = {}
} = {}) {
return defineComponent({
setup () {
const route = useRoute()
const menu = useMenu()
const { navigateByMenu } = menu
const menuStore = store()
const { menus } = storeToRefs(menuStore)
const { getMenuById, getMenuByUrl } = menuStore
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, {
onSelect,
defaultActive,
...props
})
}
})
}

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

@ -1,44 +1,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 { useMenu } from 'd2-admin/use/menu.js'
import { getMenuId } from 'd2-admin/utils/menu.js'
import { renderMenus } from './utils/render.jsx'
import { defineMenuComponent } from './utils/define.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: 'vertical',
onSelect,
defaultActive
})
export default defineMenuComponent({
store: useMenuMainStore,
props: {
mode: 'vertical'
}
})