From c51130cff96bc63739afe49be46ce5f38d20a34e Mon Sep 17 00:00:00 2001
From: FairyEver <1711467488@qq.com>
Date: Sat, 11 Dec 2021 11:32:19 +0800
Subject: [PATCH] feat: padding var

---
 .../layout/dashboard/container/index.vue      | 94 +++++++++++--------
 d2/components/d2/size-sensor/index.jsx        |  7 +-
 .../src/layout/dashboard/src/style.scss       | 10 +-
 .../default/src/layout/dashboard/src/var.scss |  9 ++
 d2/use/css-var.js                             | 12 +++
 .../component/d2-size-sensor/playground.vue   |  5 +-
 6 files changed, 88 insertions(+), 49 deletions(-)
 create mode 100644 d2/use/css-var.js

diff --git a/d2/components/d2/admin/layout/dashboard/container/index.vue b/d2/components/d2/admin/layout/dashboard/container/index.vue
index 2713683b..c5b90edb 100644
--- a/d2/components/d2/admin/layout/dashboard/container/index.vue
+++ b/d2/components/d2/admin/layout/dashboard/container/index.vue
@@ -3,24 +3,25 @@
 </route>
 
 <template>
-  <d2-scroll ref="scrollbar" class="body__scroll">
-    <div class="scroll__body" :style="scrollInnerStyle">
+  <d2-scroll ref="scrollbar" class="body__main">
+    <div class="main__inner" :style="scrollInnerStyle">
       <slot/>
     </div>
   </d2-scroll>
-  <div ref="header" class="body__header container__blur">
+  <d2-size-sensor class="body__header container__blur" @resize="onHeaderResize">
+    {{ cssVar }}
     <slot name="header"/>
-  </div>
-  <div ref="footer" class="body__footer container__blur">
+  </d2-size-sensor>
+  <d2-size-sensor class="body__footer container__blur" @resize="onFooterResize">
     <slot name="footer"/>
-  </div>
+  </d2-size-sensor>
 </template>
 
 <script>
-import { computed, onBeforeUnmount, onBeforeUpdate, onMounted, ref } from 'vue'
-import { bind, clear } from 'size-sensor'
+import { computed, ref } from 'vue'
 import { makeNameByUrl } from 'd2/utils/component.js'
-import { px, getStyle, getCssVar } from 'd2/utils/css.js'
+import { px } from 'd2/utils/css.js'
+import { useCssVar } from 'd2/use/css-var.js'
 
 export default {
   name: makeNameByUrl(import.meta.url),
@@ -33,46 +34,65 @@ export default {
     const headerHeight = ref(0)
     const footerHeight = ref(0)
 
+    const cssVar = useCssVar('--d2-admin-layout-dashboard-body-padding')
+
     const scrollInnerStyle = computed(() => ({
       paddingTop: px(headerHeight),
       paddingBottom: px(footerHeight)
     }))
 
-    onBeforeUpdate(() => {
-      console.log('onBeforeUpdate')
-    })
+    function onHeaderResize ({ style }) {
+      const { offsetHeight } = style
+      headerHeight.value = offsetHeight
+    }
 
-    onMounted(() => {
-      console.log(getCssVar('--d2-admin-layout-dashboard-body-padding'))
-      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__body')[0]
-        let scrollInnerMarginTop = getStyle(scrollInner, 'marginTop')
-        scrollbarVertical.style.top = px(Number(scrollInnerMarginTop.replace('px', '')) + element.offsetHeight)
-      })
-      bind(footer.value, element => {
-        footerHeight.value = element.offsetHeight
-        const scrollbarElement = scrollbar.value.$el
-        const scrollbarVertical = scrollbarElement.getElementsByClassName('os-scrollbar-vertical')[0]        
-        scrollbarVertical.style.bottom = px(element.offsetHeight)
-      })
-    })
+    function onFooterResize ({ style }) {
+      const { offsetHeight } = style
+      footerHeight.value = offsetHeight
+    }
 
-    onBeforeUnmount(() => {
-      clear(header.value)
-      clear(footer.value)
-    })
+    function getScrollbarVertical () {
+      return scrollbar.value.$el.getElementsByClassName('os-scrollbar-vertical')[0]
+    }
+
+    function updateScrollbarVerticalMarginTop () {
+      const scrollbarVertical = getScrollbarVertical()
+      scrollbarVertical.style.top = px(value)
+    }
+
+    function updateScrollbarVerticalMarginBottom () {
+      const scrollbarVertical = getScrollbarVertical()
+      scrollbarVertical.style.bottom = px(value)
+    }
+
+    // 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('main__inner')[0]
+    //     let scrollInnerMarginTop = getStyle(scrollInner, 'marginTop')
+    //     scrollbarVertical.style.top = px(Number(scrollInnerMarginTop.replace('px', '')) + element.offsetHeight)
+    //   })
+    //   bind(footer.value, element => {
+    //     footerHeight.value = element.offsetHeight
+    //     const scrollbarElement = scrollbar.value.$el
+    //     const scrollbarVertical = scrollbarElement.getElementsByClassName('os-scrollbar-vertical')[0]        
+    //     scrollbarVertical.style.bottom = px(element.offsetHeight)
+    //   })
+    // })
 
     return {
+      cssVar,
       scrollbar,
       header,
       footer,
-      scrollInnerStyle
+      scrollInnerStyle,
+      onHeaderResize,
+      onFooterResize
     }
   }
 }
diff --git a/d2/components/d2/size-sensor/index.jsx b/d2/components/d2/size-sensor/index.jsx
index 3f64e717..6b043b9f 100644
--- a/d2/components/d2/size-sensor/index.jsx
+++ b/d2/components/d2/size-sensor/index.jsx
@@ -1,7 +1,7 @@
 import { defineComponent, getCurrentInstance, onBeforeUnmount, onMounted } from 'vue'
 import { bind } from 'size-sensor'
 import { makeName } from 'd2/utils/component.js'
-import { getStyle, convertCssUnit } from 'd2/utils/css.js'
+import { getStyle } from 'd2/utils/css.js'
 
 const name = 'size-sensor'
 
@@ -24,12 +24,9 @@ export default defineComponent({
       const targetElement = ctx.$el
       unbind = bind(targetElement, element => {
         const style = getStyle(element)
-        const { height, width } = style
         emit('resize', {
           element,
-          style,
-          height: convertCssUnit(height),
-          width: convertCssUnit(width)
+          style
         })
       })
     }
diff --git a/d2/style/themes/default/src/layout/dashboard/src/style.scss b/d2/style/themes/default/src/layout/dashboard/src/style.scss
index 2f615629..b6c759f3 100644
--- a/d2/style/themes/default/src/layout/dashboard/src/style.scss
+++ b/d2/style/themes/default/src/layout/dashboard/src/style.scss
@@ -30,23 +30,23 @@ html, body, #app {
     >.body__header {
       @apply absolute inset-x-0 overflow-hidden break-words border-b;
       top: calc(#{--var('header-height')} + #{--var('header-border-width')});
-      padding: --var('body-padding');
+      padding: --var('body-header-padding-y') --var('body-header-padding-x');
     }
     >.body__footer {
       @apply absolute inset-x-0 bottom-0 overflow-hidden break-words border-t;
-      padding: --var('body-padding');
+      padding: --var('body-footer-padding-y') --var('body-footer-padding-x');
     }
-    >.body__scroll {
+    >.body__main {
       @apply absolute inset-0;
       >.os-scrollbar-vertical {
         top: calc(#{--var('header-height')} + #{--var('header-border-width')});
       }
-      .scroll__body {
+      .main__inner {
         @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');
-        padding: --var('body-padding');
+        padding: --var('body-main-padding-y') --var('body-main-padding-x');
       }
     }
   }
diff --git a/d2/style/themes/default/src/layout/dashboard/src/var.scss b/d2/style/themes/default/src/layout/dashboard/src/var.scss
index 35442d3a..2f355c13 100644
--- a/d2/style/themes/default/src/layout/dashboard/src/var.scss
+++ b/d2/style/themes/default/src/layout/dashboard/src/var.scss
@@ -51,4 +51,13 @@ $color-bg-container: #FFFFFF;
   #{--key('footer-border-width')}: 1px;
   // body
   #{--key('body-padding')}: 16px;
+  #{--key('body-header-padding')}: --var('body-padding');
+  #{--key('body-header-padding-x')}: --var('body-header-padding');
+  #{--key('body-header-padding-y')}: --var('body-header-padding');
+  #{--key('body-footer-padding')}: --var('body-padding');
+  #{--key('body-footer-padding-x')}: --var('body-footer-padding');
+  #{--key('body-footer-padding-y')}: --var('body-footer-padding');
+  #{--key('body-main-padding')}: --var('body-padding');
+  #{--key('body-main-padding-x')}: --var('body-main-padding');
+  #{--key('body-main-padding-y')}: --var('body-main-padding');
 }
diff --git a/d2/use/css-var.js b/d2/use/css-var.js
new file mode 100644
index 00000000..b9ebac6a
--- /dev/null
+++ b/d2/use/css-var.js
@@ -0,0 +1,12 @@
+import { ref, onMounted } from 'vue'
+import { getCssVar } from 'd2/utils/css.js'
+
+export function useCssVar (name = '', defaultValue) {
+  const cssVarValue = ref(defaultValue)
+
+  onMounted(() => {
+    cssVarValue.value = getCssVar(name)
+  })
+
+  return cssVarValue
+}
diff --git a/d2/views/dashboard/demo/component/d2-size-sensor/playground.vue b/d2/views/dashboard/demo/component/d2-size-sensor/playground.vue
index c1edbe0c..cd1a0824 100644
--- a/d2/views/dashboard/demo/component/d2-size-sensor/playground.vue
+++ b/d2/views/dashboard/demo/component/d2-size-sensor/playground.vue
@@ -37,10 +37,11 @@ export default {
 
     const history = ref([])
 
-    function onResize ({ height }) {
+    function onResize ({ style }) {
+      const { offsetHeight } = style
       history.value.unshift({
         id: id(),
-        text: `[size change] height: ${height}px`
+        text: `[size change] offsetHeight: ${offsetHeight}px`
       })
     }