feat: osClassName

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

@@ -1,13 +1,11 @@
 <template>
   <!-- body -->
-  <div class="layout__body-background"/>
   <div class="layout__body">
     <d2-scroll class="body__scroll">
       <router-view/>
     </d2-scroll>
   </div>
   <!-- header -->
-  <div class="layout__header-background"/>
   <d2-flex class="layout__header" dir="left" box="justify">
     <d2-flex class="header__button-group">
       <d2-flex class="header__button header__button--icon" tag="button" @click="collapsedToggle" center>
@@ -29,23 +27,17 @@
     </d2-flex>
   </d2-flex>
   <!-- side -->
-  <div class="layout__side-background"/>
   <d2-flex class="layout__side" dir="top">
-    <d2-flex class="side__header" grow="0" center>
-      Hello World
-    </d2-flex>
-    <d2-flex class="side__body" grow="1" block>
-      <d2-scroll class="side__scroll">
+    <d2-scroll class="side__scroll">
+      <div class="side__container">
         <d2-admin-layout-dashboard-menu-side/>
-      </d2-scroll>
-    </d2-flex>
-    <d2-flex v-if="!collapsed && $slots['side-footer']" class="side__footer" grow="0" block>
-      <slot name="side-footer"/>
-    </d2-flex>
-    <d2-flex v-if="collapsed && $slots['side-footer-collapsed']" class="side__footer" grow="0" block>
-      <slot name="side-footer-collapsed"/>
-    </d2-flex>
+      </div>
+    </d2-scroll>
   </d2-flex>
+  <!-- logo -->
+  <div class="layout__logo">
+    logo
+  </div>
 </template>
 
 <script>

d2/components/d2/scroll/index.jsx

@@ -29,6 +29,7 @@ export const classname = makeClassName(name)
 
 export default defineComponent({
   name: componentName,
+  inheritAttrs: false,
   props: {
     options: { type: Object },
     extensions: { type: [String, Array, Object] },
@@ -44,17 +45,17 @@ export default defineComponent({
     'scroll-top',
     'scroll-bottom'
   ],
-  setup (props, { emit }) {
+  setup (props, { emit, attrs }) {
     const target = ref(null)
 
     const instance = ref(null)
 
     const isValid = () => os.valid(unref(instance))
 
-    const themeClassName = computed(() => `os-theme-${props.theme}`)
+    const osClassName = computed(() => makeClassnames(`os-theme-${props.theme}`, attrs.class))
 
     const optionsDefault = computed(() => ({
-      className: unref(themeClassName),
+      className: unref(osClassName),
       scrollbars: {
         autoHide: 'scroll',
         autoHideDelay: 300

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

@@ -9,36 +9,25 @@ html, body, #app {
     background-color: --var('color-bg-app');
   }
 
-  .layout__body-background,
   .layout__body {
+    background-color: --var('color-bg-content');
     position: absolute;
     top: --var('header-height');
     left: --var('side-width');
     right: 0px;
     bottom: 0px;
-  }
-
-  .layout__body-background {
-    background-color: --var('color-bg-content');
-  }
-
-  .layout__body {
     >.body__scroll {
       @apply w-full h-full;
     }
   }
-
-  .layout__header-background,
+  
   .layout__header {
+    @apply cursor-pointer select-none;
     position: absolute;
     top: 0px;
     left: --var('side-width');
     right: 0px;
     height: --var('header-height');
-  }
-  
-  .layout__header {
-    @apply cursor-pointer select-none;
     >.header__button-group {
       padding: 0 calc(#{--var('item-margin-x')} / 2);
       >.header__button {
@@ -78,29 +67,23 @@ html, body, #app {
     }
   }
 
-  .layout__side-background,
   .layout__side {
+    @apply cursor-pointer select-none;
     position: absolute;
     top: 0px;
     bottom: 0px;
     left: 0px;
     width: --var('side-width');
-  }
-
-  .layout__side {
-    @apply cursor-pointer select-none;
-    >.side__header {
-      min-height: --var('header-height');
-    }
-    >.side__body {
-      height: 0; // for safari
-      >.side__scroll {
-        @apply w-full h-full;
+    >.side__scroll {
+      @apply w-full h-full;
+      .side__container {
+        padding-top: --var('logo-height');
       }
     }
-    >.side__footer {
-      min-height: --var('header-height');
-      padding: calc((#{--var('item-line-height')} - #{--var('item-font-size')}) / 2);
-    }
+  }
+
+  .layout__logo {
+    height: --var('logo-height');
+    width: --var('logo-width');
   }
 }

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

@@ -35,4 +35,7 @@ $classname: '#{$namespace}-layout-dashboard';
   //
   #{--key('side-width')}: 220px;
   #{--key('side-width-collapsed')}: --var('item-height');
+  // logo
+  #{--key('logo-height')}: --var('header-height');
+  #{--key('logo-width')}: --var('side-width');
 }