feat: headerBorder footerBorder

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

@@ -25,6 +25,10 @@ import { px, convertCssUnit } from 'd2/utils/css.js'
 
 export default {
   name: makeNameByUrl(import.meta.url),
+  props: {
+    headerBorder: { type: Boolean, default: false, required: false },
+    footerBorder: { type: Boolean, default: false, required: false }
+  },
   setup (props, { slots }) {
     const scrollbar = ref(null)
 
@@ -36,27 +40,30 @@ export default {
 
     const cssVarHeaderHeight = computed(() => convertCssUnit(useCssVar('--d2-admin-layout-dashboard-header-height')))
     const cssVarHeaderBorderWidth = computed(() => convertCssUnit(useCssVar('--d2-admin-layout-dashboard-header-border-width')))
+    const cssVarBodyPaddingY = computed(() => convertCssUnit(useCssVar('--d2-admin-layout-dashboard-body-main-padding-y')))
     const bodyTopBase = computed(() => unref(cssVarHeaderHeight) + unref(cssVarHeaderBorderWidth))
     const scrollbarVerticalTop = computed(() => unref(bodyTopBase) + unref(bodyHeaderHeight))
 
-    const mainInnerStyle = computed(() => ({
-      ...(unref(headerActive) ? { paddingTop: px(bodyHeaderHeight) } : {}),
-      ...(unref(footerActive) ? { paddingBottom: px(bodyFooterHeight) } : {})
-    }))
+    const mainInnerStyle = computed(() => {
+      const paddingTop = px(unref(bodyHeaderHeight) + (props.headerBorder ? unref(cssVarBodyPaddingY) : 0))
+      const paddingBottom = px(unref(bodyFooterHeight) + (props.footerBorder ? unref(cssVarBodyPaddingY) : 0))
+      return {
+        ...(unref(headerActive) ? { paddingTop } : {}),
+        ...(unref(footerActive) ? { paddingBottom } : {})
+      }
+    })
 
     const bodyClass = computed(() => makeClassnames('body__main', {
-      'body__main--with-header': unref(headerActive),
-      'body__main--with-footer': unref(footerActive)
+      'body__main--with-header-ghost': unref(headerActive) && !props.headerBorder,
+      'body__main--with-footer-ghost': unref(footerActive) && !props.footerBorder
     }))
 
     const headerClass = computed(() => makeClassnames('body__header', 'body__blur', {
-      'body__header--border': true,
-      'body__header--border-ghost': true
+      'body__header--border': props.headerBorder
     }))
 
     const footerClass = computed(() => makeClassnames('body__footer', 'body__blur', {
-      'body__footer--border': true,
-      'body__footer--border-ghost': true
+      'body__footer--border': props.footerBorder
     }))
 
     function onHeaderResize (element) {

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

@@ -31,33 +31,29 @@ html, body, #app {
       @apply absolute inset-x-0 overflow-hidden break-words;
       top: calc(#{--var('header-height')} + #{--var('header-border-width')});
       padding: --var('body-header-padding-y') --var('body-header-padding-x');
+      border-bottom-width: --var('body-header-border-width');
+      border-color: --var('body-header-border-color-ghost');
       &.body__header--border {
-        border-bottom-width: --var('body-header-border-width');
         border-color: --var('body-header-border-color');
-        &.body__header--border-ghost {
-          border-color: --var('body-header-border-color-ghost');
-        }
       }
     }
     >.body__footer {
       @apply absolute inset-x-0 bottom-0 overflow-hidden break-words;
       padding: --var('body-footer-padding-y') --var('body-footer-padding-x');
+      border-top-width: --var('body-footer-border-width');
+      border-color: --var('body-header-border-color-ghost');
       &.body__footer--border {
-        border-top-width: --var('body-footer-border-width');
         border-color: --var('body-footer-border-color');
-        &.body__footer--border-ghost {
-          border-color: --var('body-header-border-color-ghost');
-        }
       }
     }
     >.body__main {
       @apply absolute inset-0;
-      &.body__main--with-header {
+      &.body__main--with-header-ghost {
         >.os-scrollbar-vertical {
           padding-top: 0px;
         }
       }
-      &.body__main--with-footer {
+      &.body__main--with-footer-ghost {
         >.os-scrollbar-vertical {
           padding-bottom: 0px;
         }

d2/views/dashboard/demo/layout/dashboard/custom.vue

@@ -8,7 +8,10 @@
 </route>
 
 <template>
-  <d2-admin-layout-dashboard-container>
+  <d2-admin-layout-dashboard-container
+    :header-border="headerBorder"
+    :footer-border="footerBorder"
+  >
     <template v-if="headerActive" #header>
       <h1 class="text-lg">Header</h1>
     </template>
@@ -17,8 +20,10 @@
     </template>
     <section class="bg-gray-100 border border-gray-200 rounded p-4 mb-4">
       <a-space>
-        <a-button @click="headerToggle">切换顶栏显示</a-button>
-        <a-button @click="footerToggle">切换底栏显示</a-button>
+        <a-button @click="headerToggle">切换顶栏</a-button>
+        <a-button @click="footerToggle">切换底栏</a-button>
+        <a-button @click="headerBorderToggle">切换顶栏边框</a-button>
+        <a-button @click="footerBorderToggle">切换底栏边框</a-button>
       </a-space>
     </section>
     <demo-markdown-article/>
@@ -40,11 +45,25 @@ export default {
       toggle: footerToggle
     } = useSwitch(true)
 
+    const {
+      value: headerBorder,
+      toggle: headerBorderToggle
+    } = useSwitch(false)
+
+    const {
+      value: footerBorder,
+      toggle: footerBorderToggle
+    } = useSwitch(false)
+
     return {
       headerActive,
       headerToggle,
       footerActive,
-      footerToggle
+      footerToggle,
+      headerBorder,
+      headerBorderToggle,
+      footerBorder,
+      footerBorderToggle
     }
   }
 }