refactor: optimization

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

@@ -1,8 +1,7 @@
 <template>
   <div :class="`${classname}__body`" :style="bodyStyle">
-    <slot v-if="isCustomBody"/>
-    <d2-scroll v-else class="body__scroll">
-      <slot/>
+    <d2-scroll class="body__scroll">
+      <router-view/>
     </d2-scroll>
   </div>
   <div :class="`${classname}__header`" :style="headerStyle">
@@ -18,17 +17,18 @@
 <script>
 import { makeNameByUrl, makeClassNameByUrl } from 'd2/utils/component.js'
 import { computed, ref } from 'vue'
-import { storeToRefs } from 'pinia'
+// import { storeToRefs } from 'pinia'
 import { cssUnit } from 'd2/utils/css.js'
 import { useCssPosition } from 'd2/use/css-position.js'
-import { useD2AdminLayoutHeaderAsideStore } from 'd2/components/d2/admin/layout/header-aside/store/index.js'
+// import { useD2AdminLayoutHeaderAsideStore } from 'd2/components/d2/admin/layout/header-aside/store/index.js'
 
 export default {
   name: makeNameByUrl(import.meta.url),
   setup () {
     const classname = makeClassNameByUrl(import.meta.url)
 
-    const { isCustomBody } = storeToRefs(useD2AdminLayoutHeaderAsideStore())
+    // const d2AdminLayoutHeaderAsideStore = useD2AdminLayoutHeaderAsideStore()
+    // const { isCustomBody } = storeToRefs(d2AdminLayoutHeaderAsideStore)
     
     const headerHeight = ref(46)
     const asideWidth = ref(200)
@@ -48,8 +48,7 @@ export default {
       classname,
       bodyStyle,
       headerStyle,
-      asideStyle,
-      isCustomBody
+      asideStyle
     }
   }
 }

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

@@ -15,7 +15,7 @@
 
 <script>
 import { makeNameByUrl } from 'd2/utils/component.js'
-import { useMenuMainStore } from 'd2/store/menu-main.js'
+import { useD2AdminMenuMainStore } from 'd2/store/menu-main.js'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { compact } from 'lodash-es'
@@ -31,7 +31,7 @@ export default {
     const menu = useMenu()
     const { navigateByMenu } = menu
 
-    const menuStore = useMenuMainStore()
+    const menuStore = useD2AdminMenuMainStore()
     const { menus } = storeToRefs(menuStore)
     const { getMenuById, getMenuByUrl, getMenuPids } = menuStore
 

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

@@ -14,7 +14,7 @@
 
 <script>
 import { makeNameByUrl } from 'd2/utils/component.js'
-import { useMenuSecondaryStore } from 'd2/store/menu-secondary.js'
+import { useD2AdminMenuSecondaryStore } from 'd2/store/menu-secondary.js'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { compact } from 'lodash-es'
@@ -30,7 +30,7 @@ export default {
     const menu = useMenu()
     const { navigateByMenu } = menu
 
-    const menuStore = useMenuSecondaryStore()
+    const menuStore = useD2AdminMenuSecondaryStore()
     const { menus } = storeToRefs(menuStore)
     const { getMenuById, getMenuByUrl } = menuStore
 

d2/components/d2/admin/layout/header-aside/use/index.js

@@ -1,16 +0,0 @@
-import { onUnmounted } from 'vue'
-import { useD2AdminLayoutHeaderAsideStore } from 'd2/components/d2/admin/layout/header-aside/store/index.js'
-
-export function useD2AdminLayoutHeaderAside () {
-  const d2AdminLayoutHeaderAsideStore = useD2AdminLayoutHeaderAsideStore()
-
-  function activateCustomBody () {
-    d2AdminLayoutHeaderAsideStore.activateCustomBody()
-  }
-  onUnmounted(() => {
-    d2AdminLayoutHeaderAsideStore.disableCustomBody()
-  })
-  return {
-    activateCustomBody
-  }
-}

d2/menus/index.js

@@ -69,7 +69,6 @@ export const demoLayoutHeaderAsideMenus = new Menu('HeaderAside')
   .add(new Menu('absolute').url('/absolute'))
   .add(new Menu('full').url('/full'))
   .add(new Menu('page-width').url('/page-width'))
-  .add(new Menu('custom-body').url('/custom-body'))
 
 export const demoLayoutMenus = new Menu('布局')
   .icon('icon-park-outline:page')

d2/store/menu-main.js

@@ -1,3 +1,3 @@
-import { defineMenuStore } from './utils/menu.js'
+import { defineD2AdminMenuStore } from './utils/menu.js'
 
-export const useMenuMainStore = defineMenuStore('d2-admin-menu-main')
+export const useD2AdminMenuMainStore = defineD2AdminMenuStore('d2-admin-menu-main')

d2/store/menu-secondary.js

@@ -1,3 +1,3 @@
-import { defineMenuStore } from './utils/menu.js'
+import { defineD2AdminMenuStore } from './utils/menu.js'
 
-export const useMenuSecondaryStore = defineMenuStore('d2-admin-menu-secondary')
+export const useD2AdminMenuSecondaryStore = defineD2AdminMenuStore('d2-admin-menu-secondary')

d2/store/utils/menu.js

@@ -2,7 +2,7 @@ import { fromPairs } from 'lodash-es'
 import { defineStore } from 'pinia'
 import { flattenMenus, getMenuId, getMenuUrl, getMenuPidIndex } from 'd2/utils/menu.js'
 
-export function defineMenuStore (namespace) {
+export function defineD2AdminMenuStore (namespace) {
   return defineStore(namespace, {
     state: () => {
       return {

d2/views/dashboard/demo/layout/header-aside/custom-body.vue

@@ -1,14 +0,0 @@
-<template>
-  isCustomBody
-</template>
-
-<script>
-import { useD2AdminLayoutHeaderAside } from 'd2/components/d2/admin/layout/header-aside/use/index.js'
-
-export default {
-  setup () {
-    const { activateCustomBody } = useD2AdminLayoutHeaderAside()
-    activateCustomBody()
-  }
-}
-</script>

src/App.vue

@@ -8,12 +8,12 @@
 </template>
 
 <script setup>
-import { useMenuMainStore } from 'd2/store/menu-main.js'
-import { useMenuSecondaryStore } from 'd2/store/menu-secondary.js'
+import { useD2AdminMenuMainStore } from 'd2/store/menu-main.js'
+import { useD2AdminMenuSecondaryStore } from 'd2/store/menu-secondary.js'
 import { menuMain, menuSecondary } from '@/menus/index.js'
 
-const menuMainStore = useMenuMainStore()
-const menuSecondaryStore = useMenuSecondaryStore()
+const menuMainStore = useD2AdminMenuMainStore()
+const menuSecondaryStore = useD2AdminMenuSecondaryStore()
 
 menuMainStore.setMenus(menuMain)
 menuSecondaryStore.setMenus(menuSecondary)

src/views/dashboard.vue

@@ -7,7 +7,5 @@
 </route>
 
 <template>
-  <d2-admin-layout-header-aside>
-    <router-view/>
-  </d2-admin-layout-header-aside>
+  <d2-admin-layout-header-aside/>
 </template>