feat: activateCustomBody

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

@@ -1,6 +1,7 @@
 <template>
   <div :class="`${classname}__body`" :style="bodyStyle">
-    <d2-scroll class="body__scroll">
+    <slot v-if="isCustomBody"/>
+    <d2-scroll v-else class="body__scroll">
       <slot/>
     </d2-scroll>
   </div>
@@ -17,18 +18,17 @@
 <script>
 import { makeNameByUrl, makeClassNameByUrl } from 'd2/utils/component.js'
 import { computed, ref } from 'vue'
+import { storeToRefs } from 'pinia'
 import { cssUnit } from 'd2/utils/css.js'
 import { useCssPosition } from 'd2/use/css-position.js'
-import { useLayoutHeaderAsideStore } 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 layoutHeaderAsideStore = useLayoutHeaderAsideStore()
-
-    console.log(layoutHeaderAsideStore.customBody)
+    const { isCustomBody } = storeToRefs(useD2AdminLayoutHeaderAsideStore())
     
     const headerHeight = ref(46)
     const asideWidth = ref(200)
@@ -48,7 +48,8 @@ export default {
       classname,
       bodyStyle,
       headerStyle,
-      asideStyle
+      asideStyle,
+      isCustomBody
     }
   }
 }

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

@@ -1,9 +1,30 @@
 import { defineStore } from 'pinia'
 
-export const useLayoutHeaderAsideStore =  defineStore('d2-admin-layout-header-aside', {
+export const useD2AdminLayoutHeaderAsideStore =  defineStore('d2-admin-layout-header-aside', {
   state: () => {
     return {
-      customBody: false
+      isCustomBody: false
+    }
+  },
+  actions: {
+    /**
+     * set store isCustomBody value
+     * @param {boolean} value setting
+     */
+    setCustomBody (value) {
+      this.isCustomBody = value
+    },
+    /**
+     * activate custom body
+     */
+    activateCustomBody () {
+      this.setCustomBody(true)
+    },
+    /**
+     * disable custom body
+     */
+    disableCustomBody () {
+      this.setCustomBody(false)
     }
   }
 })

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

@@ -0,0 +1,16 @@
+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,6 +69,7 @@ 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/views/dashboard/demo/layout/header-aside/custom-body.vue

@@ -0,0 +1,14 @@
+<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>