docs: perfect demonstration

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

@@ -4,7 +4,7 @@
 
 <template>
   <d2-scroll ref="scrollbar" :class="bodyClass">
-    <div class="main__inner" :style="scrollInnerStyle">
+    <div class="main__inner" :style="mainInnerStyle">
       <slot/>
     </div>
   </d2-scroll>
@@ -26,9 +26,6 @@ import { px, convertCssUnit } from 'd2/utils/css.js'
 export default {
   name: makeNameByUrl(import.meta.url),
   setup (props, { slots }) {
-    const cssVarHeaderHeight = computed(() => convertCssUnit(useCssVar('--d2-admin-layout-dashboard-header-height')))
-    const cssVarHeaderBorderWidth = computed(() => convertCssUnit(useCssVar('--d2-admin-layout-dashboard-header-border-width')))
-
     const scrollbar = ref(null)
 
     const headerActive = ref(false)
@@ -37,10 +34,12 @@ export default {
     const bodyHeaderHeight = ref(0)
     const bodyFooterHeight = ref(0)
 
+    const cssVarHeaderHeight = computed(() => convertCssUnit(useCssVar('--d2-admin-layout-dashboard-header-height')))
+    const cssVarHeaderBorderWidth = computed(() => convertCssUnit(useCssVar('--d2-admin-layout-dashboard-header-border-width')))
     const bodyTopBase = computed(() => unref(cssVarHeaderHeight) + unref(cssVarHeaderBorderWidth))
     const scrollbarVerticalTop = computed(() => unref(bodyTopBase) + unref(bodyHeaderHeight))
 
-    const scrollInnerStyle = computed(() => ({
+    const mainInnerStyle = computed(() => ({
       ...(unref(headerActive) ? { paddingTop: px(bodyHeaderHeight) } : {}),
       ...(unref(footerActive) ? { paddingBottom: px(bodyFooterHeight) } : {})
     }))
@@ -89,7 +88,7 @@ export default {
 
     return {
       scrollbar,
-      scrollInnerStyle,
+      mainInnerStyle,
       bodyClass,
       onHeaderResize,
       onFooterResize,

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

@@ -1,5 +1,9 @@
 <route>
-{}
+{
+  "meta": {
+    "d2admin.menu.title": "绝对定位"
+  }
+}
 </route>
 
 <template>

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

@@ -1,5 +1,9 @@
 <route>
-{}
+{
+  "meta": {
+    "d2admin.menu.title": "基础"
+  }
+}
 </route>
 
 <template>

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

@@ -1,7 +1,8 @@
 <route>
 {
   "meta": {
-    "d2admin.layout.dashboard.customBody": true
+    "d2admin.layout.dashboard.customBody": true,
+    "d2admin.menu.title": "自定义"
   }
 }
 </route>
@@ -9,10 +10,10 @@
 <template>
   <d2-admin-layout-dashboard-container>
     <template v-if="headerActive" #header>
-      <a-button>Button</a-button>
+      <h1 class="text-lg">Header</h1>
     </template>
     <template v-if="footerActive" #footer>
-      <a-button>Button</a-button>
+      <h1 class="text-lg">Footer</h1>
     </template>
     <section class="bg-gray-100 border border-gray-200 rounded p-4 mb-4">
       <a-space>

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

@@ -1,5 +1,9 @@
 <route>
-{}
+{
+  "meta": {
+    "d2admin.menu.title": "完全填充"
+  }
+}
 </route>
 
 <template>

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

@@ -1,5 +1,9 @@
 <route>
-{}
+{
+  "meta": {
+    "d2admin.menu.title": "首页"
+  }
+}
 </route>
 
 <template>

d2/views/dashboard/demo/layout/dashboard/page-width.vue

@@ -1,5 +1,9 @@
 <route>
-{}
+{
+  "meta": {
+    "d2admin.menu.title": "内容宽度"
+  }
+}
 </route>
 
 <template>