feat: simple implementation

d2/components/d2/admin/layout/dashboard/container/index.vue

@@ -4,7 +4,7 @@
 
 <template>
   <d2-scroll ref="scrollbar" class="body__scroll">
-    <div class="scroll__inner" :style="scrollInnerStyle">
+    <div class="scroll__body" :style="scrollInnerStyle">
       <slot/>
     </div>
   </d2-scroll>
@@ -17,14 +17,14 @@
 </template>
 
 <script>
-import { computed, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onBeforeUpdate, onMounted, ref } from 'vue'
 import { bind, clear } from 'size-sensor'
 import { makeNameByUrl } from 'd2/utils/component.js'
 import { cssUnit } from 'd2/utils/css.js'
 
 export default {
   name: makeNameByUrl(import.meta.url),
-  setup () {
+  setup (props, { slots }) {
     const scrollbar = ref(null)
 
     const header = ref(null)
@@ -38,12 +38,19 @@ export default {
       paddingBottom: cssUnit(footerHeight.value)
     }))
 
+    onBeforeUpdate(() => {
+      console.log('onBeforeUpdate')
+    })
+
     onMounted(() => {
+      console.log(slots.default)
+      console.log(slots.header)
+      console.log(slots.footer)
       bind(header.value, element => {
         headerHeight.value = element.offsetHeight
         const scrollbarElement = scrollbar.value.$el
         const scrollbarVertical = scrollbarElement.getElementsByClassName('os-scrollbar-vertical')[0]
-        const scrollInner = document.getElementsByClassName('scroll__inner')[0]
+        const scrollInner = document.getElementsByClassName('scroll__body')[0]
         let scrollInnerMarginTop = 0
 
 
@@ -63,6 +70,11 @@ export default {
       })
     })
 
+    onBeforeUnmount(() => {
+      clear(header.value)
+      clear(footer.value)
+    })
+
     return {
       scrollbar,
       header,

d2/style/themes/default/src/layout/dashboard/src/style.scss

@@ -39,14 +39,12 @@ html, body, #app {
       >.os-scrollbar-vertical {
         top: calc(#{--var('header-height')} + #{--var('header-border-width')});
       }
-      .scroll__inner {
+      .scroll__body {
         @apply relative overflow-hidden;
         margin-top: calc(#{--var('header-height')} + #{--var('header-border-width')});
         min-height: calc(100vh - (#{--var('header-height')} + #{--var('header-border-width')}));
         background-color: --var('color-bg-container');
-        >.markdown-body {
-          padding: --var('body-padding-markdown');
-        }
+        padding: --var('body-padding');
       }
     }
   }

d2/style/themes/default/src/layout/dashboard/src/var.scss

@@ -51,5 +51,4 @@ $color-bg-container: #FFFFFF;
   #{--key('footer-border-width')}: 1px;
   // body
   #{--key('body-padding')}: 16px;
-  #{--key('body-padding-markdown')}: --var('body-padding');
 }