优化布局组件

Former-commit-id: 65e8be3a3e4781706d13890b3ab1c4161da5eb48 [formerly 6ee3fa6bda1f3dfeac14e1bde981df71453a4cf4] [formerly 65e8be3a3e4781706d13890b3ab1c4161da5eb48 [formerly 6ee3fa6bda1f3dfeac14e1bde981df71453a4cf4] [formerly 65e8be3a3e4781706d13890b3ab1c4161da5eb48 [formerly 6ee3fa6bda1f3dfeac14e1bde981df71453a4cf4] [formerly 6ee3fa6bda1f3dfeac14e1bde981df71453a4cf4 [formerly 296675d3e38d15024de3440733209ad8a968f519 [formerly 593f575acfed4f454810508bf2fdd590ffd096d4]]]]]
Former-commit-id: 660493d5ad50e8f690d130df0749e5395ac84fa0
Former-commit-id: c00a4141fc9a1f187d9b1a1c1f63f975c0c59e0c
Former-commit-id: 4c4331890a61259ada6be7840dda6747628493bc [formerly 2bab08dc4546c14790740aa245062d30fa1542fa]
Former-commit-id: 10a14d376c22b186870e745f089cfce167c3e9d2
Former-commit-id: 6552bbc1565c9fb5e08c71c60ad9330f4f067def
Former-commit-id: 7a3edf22710ba4c82278abe86b69eb8004484e05
Former-commit-id: bdf4a9137b275c53b8ae6268de6e3d09aee61525
Former-commit-id: 5f28a623c7fa1f64e31d4536b206d0613207d982

src/assets/style/theme/theme-base.scss

@@ -301,13 +301,24 @@
             }
             // 隐形布局组件
             .d2-container-ghost {
-              margin-right: 20px;
+              position: absolute;
-              margin-bottom: 20px;
+              top: 0px;
-              .d2-container-ghost-header {
+              right: 20px;
-                border-top: none;
+              bottom: 0px;
-                border-top-left-radius: 0px;
+              left: 0px;
-                border-top-right-radius: 0px;
+              display: flex;
-                margin-bottom: 20px;
+              flex-direction: column;
+              overflow: hidden;
+              .d2-container-ghost__header {
+                padding: 20px;
+              }
+              .d2-container-ghost__body {
+                flex-grow: 1;
+                overflow: auto;
+                position: relative;
+              }
+              .d2-container-ghost__footer {
+                padding: 20px;
               }
             }
           }

src/assets/style/theme/theme.scss

@@ -1,323 +0,0 @@
-// 每个主题特有的设置
-.theme-#{$theme-name} {
-
-  // 背景图片和遮罩
-  .d2-layout-header-aside-group {
-    background-color: $theme-bg-color;
-    .d2-layout-header-aside-mask {
-      background: $theme-bg-mask;
-    }
-  }
-
-  // 菜单项目
-  @mixin theme-menu-hover-style {
-    color: $theme-menu-item-color-hover;
-    i.fa {
-      color: $theme-menu-item-color-hover;
-    }
-    background: $theme-menu-item-background-color-hover;
-  }
-  %icon {
-    i.fa {
-      display: inline-block;
-      width: 15px;
-      text-align: center;
-      margin-right: 5px;
-    }
-  }
-  .el-submenu__title {
-    @extend %unable-select;
-    @extend %icon;
-  }
-  .el-menu-item {
-    @extend %unable-select;
-    @extend %icon;
-  }
-  .el-submenu__title:hover {
-    @include theme-menu-hover-style;
-  }
-  .el-menu-item:hover {
-    @include theme-menu-hover-style;
-  }
-  .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
-    @include theme-menu-hover-style;
-  }
-  .el-menu--horizontal .el-menu .el-submenu__title:hover {
-    @include theme-menu-hover-style;
-  }
-  
-  // 顶栏
-  .d2-theme-header {
-    // 切换按钮
-    .toggle-aside-btn {
-      i {
-        color: $theme-header-item-color;
-        background: $theme-header-item-background-color;
-        &:hover {
-          color: $theme-header-item-color-hover;
-        }
-      }
-    }
-    // 顶栏菜单
-    .el-menu {
-      .el-menu-item {
-        transition: border-top-color 0s;
-        color: $theme-header-item-color;
-        background: $theme-header-item-background-color;
-        i.fa { color: inherit; }
-        &:hover {
-          color: $theme-header-item-color-hover;
-          background: $theme-header-item-background-color-hover;
-          i.fa { color: inherit; }
-        }
-        &:focus {
-          color: $theme-header-item-color-focus;
-          background: $theme-header-item-background-color-focus;
-          i.fa { color: inherit; }
-        }
-        &.is-active {
-          color: $theme-header-item-color-active;
-          background: $theme-header-item-background-color-active;
-          i.fa { color: inherit; }
-        }
-      }
-      .el-submenu {
-        .el-submenu__title {
-          transition: border-top-color 0s;
-          color: $theme-header-item-color;
-          background: $theme-header-item-background-color;
-          i.fa { color: inherit; }
-          .el-submenu__icon-arrow {
-            color: $theme-header-item-color;
-          }
-          &:hover {
-            color: $theme-header-item-color-hover;
-            background: $theme-header-item-background-color-hover;
-            i.fa { color: inherit; }
-            .el-submenu__icon-arrow {
-              color: $theme-header-item-color-hover;
-            }
-          }
-          &:focus {
-            color: $theme-header-item-color-focus;
-            background: $theme-header-item-background-color-focus;
-            i.fa { color: inherit; }
-            .el-submenu__icon-arrow {
-              color: $theme-header-item-color-focus;
-            }
-          }
-        }
-      }
-    }
-    // 顶栏右侧
-    .d2-header-right {
-      .btn-text {
-        color: $theme-header-item-color;
-        &.can-hover {
-          &:hover {
-            color: $theme-header-item-color-hover;
-            background: $theme-header-item-background-color-hover;
-          }
-        }
-      }
-    }
-  }
-  // [布局] 顶栏下面
-  .d2-theme-container {
-    // 侧边栏
-    .d2-theme-container-aside {
-      // 菜单为空的时候显示的信息
-      .d2-layout-header-aside-menu-empty {
-        background: $theme-aside-menu-empty-background-color;
-        i {
-          color: $theme-aside-menu-empty-icon-color;
-        }
-        span {
-          color: $theme-aside-menu-empty-text-color;
-        }
-        &:hover {
-          background: $theme-aside-menu-empty-background-color-hover;
-          i {
-            color: $theme-aside-menu-empty-icon-color-hover;
-          }
-          span {
-            color: $theme-aside-menu-empty-text-color-hover;
-          }
-        }
-      }
-      // [菜单] 正常状态
-      .el-menu {
-        .el-menu-item {
-          color: $theme-aside-item-color;
-          background: $theme-aside-item-background-color;
-          i {
-            color: $theme-aside-item-color;
-          }
-          &:hover {
-            color: $theme-aside-item-color-hover;
-            background: $theme-aside-item-background-color-hover;
-            i {
-              color: $theme-aside-item-color-hover;
-            }
-          }
-          &:focus {
-            color: $theme-aside-item-color-focus;
-            background: $theme-aside-item-background-color-focus;
-            i {
-              color: $theme-aside-item-color-focus;
-            }
-          }
-          &.is-active {
-            color: $theme-aside-item-color-active;
-            background: $theme-aside-item-background-color-active;
-            i {
-              color: $theme-aside-item-color-active;
-            }
-          }
-        }
-      }
-      .el-submenu {
-        .el-submenu__title {
-          color: $theme-aside-item-color;
-          background: $theme-aside-item-background-color;
-          i {
-            color: $theme-aside-item-color;
-          }
-          .el-submenu__icon-arrow {
-            color: $theme-aside-item-color;
-          }
-          &:hover {
-            color: $theme-aside-item-color-hover;
-            background: $theme-aside-item-background-color-hover;
-            i {
-              color: $theme-aside-item-color-hover;
-            }
-            .el-submenu__icon-arrow {
-              color: $theme-aside-item-color-hover;
-            }
-          }
-        }
-      }
-    }
-    .d2-theme-container-main {
-      // 主体部分分为多页面控制器 和主体
-      .d2-theme-container-main-header {
-        // 多页面控制器
-        .d2-multiple-page-control {
-          .el-tabs__header.is-top {
-            border-bottom-color: $theme-multiple-page-control-border-color;
-          }
-          .el-tabs__nav {
-            border-color: $theme-multiple-page-control-border-color;
-            .el-tabs__item {
-              @extend %unable-select;
-              color: $theme-multiple-page-control-color;
-              background-color: $theme-multiple-page-control-background-color;
-              border-left-color: $theme-multiple-page-control-border-color;
-              &:first-child {
-                border-left: none;
-                &:hover {
-                  padding: 0px 20px;
-                }
-                .el-icon-close {
-                  display: none;
-                }
-              }
-            }
-            .el-tabs__item.is-active {
-              color: $theme-multiple-page-control-color-active;
-              background-color: $theme-multiple-page-control-background-color-active;
-              border-bottom-color: $theme-multiple-page-control-border-color-active;
-            }
-          }
-          %el-tabs__nav {
-            font-size: 20px;
-          }
-          .el-tabs__nav-prev {
-            @extend %el-tabs__nav;
-            color: $theme-multiple-page-control-nav-prev-color;
-          }
-          .el-tabs__nav-next {
-            @extend %el-tabs__nav;
-            color: $theme-multiple-page-control-nav-next-color;
-          }
-        }
-        // 多页控制器的关闭控制
-        .d2-multiple-page-control-btn {
-          .el-dropdown {
-            .el-button-group {
-              .el-button {
-                border-color: $theme-multiple-page-control-border-color;
-              }
-            }
-          }
-        }
-      }
-      // 主体
-      .d2-theme-container-main-body {
-        // 布局组件
-        .container-component {
-          // [组件]
-          // d2-container-full 填充型
-          .d2-container-full {
-            border: $theme-container-border-outer;
-            border-top: none;
-            border-bottom: none;
-            .d2-container-full__header {
-              border-bottom: $theme-container-border-inner;
-              background: $theme-container-header-footer-background-color;
-            }
-            .d2-container-full__body {
-              background: $theme-container-background-color;
-            }
-            .d2-container-full__footer {
-              border-top: $theme-container-border-inner;
-              background: $theme-container-header-footer-background-color;
-            }
-          }
-          // [组件]
-          // d2-container-full-bs 填充型 滚动优化
-          .d2-container-full-bs {
-            border: $theme-container-border-outer;
-            border-top: none;
-            border-bottom: none;
-            .d2-container-full-bs__header {
-              border-bottom: $theme-container-border-inner;
-              background: $theme-container-header-footer-background-color;
-            }
-            .d2-container-full-bs__body {
-              background: $theme-container-background-color;
-            }
-            .d2-container-full-bs__footer {
-              border-top: $theme-container-border-inner;
-              background: $theme-container-header-footer-background-color;
-            }
-          }
-          // [组件]
-          // d2-container-card 卡片型
-          .d2-container-card {
-            border: $theme-container-border-outer;
-            border-top: none;
-            background: transparent;
-            &>.el-card__header {
-              border-bottom: $theme-container-border-inner;
-              background: $theme-container-header-footer-background-color;
-            }
-            &>.el-card__body {
-              background: $theme-container-background-color;
-            }
-          }
-          // 隐形布局组件
-          .d2-container-ghost {
-            .d2-container-ghost-header {
-              border: $theme-container-border-outer;
-              &>.el-card__body {
-                background: $theme-container-header-footer-background-color;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

src/assets/style/theme/theme.scss.REMOVED.git-id

@@ -0,0 +1 @@
+9007ccbb78f811d506e941aa3ac902e2aca4b106

src/components/core/d2-container/components/d2-container-ghost.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="d2-container-ghost">
+    <div v-if="$slots.header" class="d2-container-ghost__header" ref="header">
+      <slot name="header"/>
+    </div>
+    <div class="d2-container-ghost__body">
+      <slot/>
+    </div>
+    <div v-if="$slots.footer" class="d2-container-ghost__footer" ref="footer">
+      <slot name="footer"/>
+    </div>
+  </div>
+</template>

src/components/core/d2-container/index.vue

@@ -6,12 +6,11 @@
       <slot/>
     </el-card>
     <!-- [ghost] 隐形的容器 -->
-    <div v-if="type === 'ghost'" class="d2-container-ghost">
+    <d2-container-ghost v-if="type === 'ghost'">
-      <el-card v-if="$slots.header" shadow="never" class="d2-container-ghost-header">
+      <slot v-if="$slots.header" name="header" slot="header"/>
-        <slot name="header"/>
-      </el-card>
       <slot/>
-    </div>
+      <slot v-if="$slots.footer" name="footer" slot="footer"/>
+    </d2-container-ghost>
     <!-- [container-full] 填充 -->
     <d2-container-full v-if="type === 'full' && !scroll">
       <slot v-if="$slots.header" name="header" slot="header"/>
@@ -33,6 +32,7 @@ import BScroll from 'better-scroll'
 // 组件
 import d2ContainerFull from './components/d2-container-full.vue'
 import d2ContainerFullBs from './components/d2-container-full-bs.vue'
+import d2ContainerGhost from './components/d2-container-ghost.vue'
 export default {
   name: 'd2-container',
   props: {
@@ -51,7 +51,8 @@ export default {
   },
   components: {
     'd2-container-full': d2ContainerFull,
-    'd2-container-full-bs': d2ContainerFullBs
+    'd2-container-full-bs': d2ContainerFullBs,
+    'd2-container-ghost': d2ContainerGhost
   },
   data () {
     return {
@@ -59,12 +60,12 @@ export default {
     }
   },
   mounted () {
-    if (this.type === 'card' || this.type === 'ghost') {
+    if (this.type === 'card') {
       this.scrollInit()
     }
   },
   beforeDestroy () {
-    if (this.type === 'card' || this.type === 'ghost') {
+    if (this.type === 'card') {
       this.scrollDestroy()
     }
   },

src/menu/modules/demo-components.js

@@ -9,11 +9,12 @@ export default {
       title: '布局容器',
       icon: 'window-restore',
       children: [
-        { path: `${pre}container/full`, title: '填满' },
+        { path: `${pre}container/full`, title: '填充' },
-        { path: `${pre}container/full-bs`, title: '填满 滚动优化' },
+        { path: `${pre}container/full-slot`, title: '填充 插槽' },
-        { path: `${pre}container/card`, title: '卡片' },
+        { path: `${pre}container/full-bs`, title: '填充 滚动优化' },
         { path: `${pre}container/ghost`, title: '隐形' },
-        { path: `${pre}container/ghost-header`, title: '隐形带头部' }
+        { path: `${pre}container/ghost-slot`, title: '隐形 插槽' },
+        { path: `${pre}container/card`, title: '卡片' }
       ]
     },
     {

src/pages/demo/components/container/card.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import doc from './md/doc-card.md'
+import doc from './md/doc.md'
 export default {
   data () {
     return {

src/pages/demo/components/container/full-bs.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import doc from './md/doc-full-bs.md'
+import doc from './md/doc.md'
 export default {
   data () {
     return {

src/pages/demo/components/container/full-slot.vue

@@ -0,0 +1,18 @@
+<template>
+  <d2-container>
+    <template slot="header">header</template>
+    <d2-markdown :source="doc"/>
+    <template slot="footer">footer</template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './md/doc.md'
+export default {
+  data () {
+    return {
+      doc
+    }
+  }
+}
+</script>

src/pages/demo/components/container/full.vue

@@ -1,17 +1,11 @@
 <template>
   <d2-container>
-    <template slot="header">
-      我是插入到 header 中的内容
-    </template>
     <d2-markdown :source="doc"/>
-    <template slot="footer">
-      <d2-link-btn title="D2Admin" link="https://github.com/d2-projects/d2-admin"/>
-    </template>
   </d2-container>
 </template>
 
 <script>
-import doc from './md/doc-full.md'
+import doc from './md/doc.md'
 export default {
   data () {
     return {

src/pages/demo/components/container/ghost-header.vue

@@ -1,19 +0,0 @@
-<template>
-  <d2-container type="ghost">
-    <template slot="header">隐形页面容器头部</template>
-    <el-card shadow="never" style="width: 50%;">
-      <d2-markdown :source="doc"/>
-    </el-card>
-  </d2-container>
-</template>
-
-<script>
-import doc from './md/doc-ghost-header.md'
-export default {
-  data () {
-    return {
-      doc
-    }
-  }
-}
-</script>

src/pages/demo/components/container/ghost-slot.vue

@@ -0,0 +1,20 @@
+<template>
+  <d2-container type="ghost">
+    <template slot="header">隐形页面容器 header</template>
+    <el-card shadow="never" class="d2-mt d2-mb" style="width: 400px;">
+      <d2-markdown :source="doc"/>
+    </el-card>
+    <template slot="footer">隐形页面容器 footer</template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './md/doc.md'
+export default {
+  data () {
+    return {
+      doc
+    }
+  }
+}
+</script>

src/pages/demo/components/container/ghost.vue

@@ -1,13 +1,13 @@
 <template>
   <d2-container type="ghost">
-    <el-card shadow="never" class="d2-mt" style="width: 50%;">
+    <el-card shadow="never" class="d2-mt d2-mb" style="width: 400px;">
       <d2-markdown :source="doc"/>
     </el-card>
   </d2-container>
 </template>
 
 <script>
-import doc from './md/doc-ghost.md'
+import doc from './md/doc.md'
 export default {
   data () {
     return {

src/pages/demo/components/container/md/doc-card.md

@@ -1,16 +0,0 @@
-## 卡片型页面容器
-
-```
-<d2-container type="card">
-  主体内容
-</d2-container>
-```
-
-使用 `slot`
-
-```
-<d2-container type="card">
-  <template slot="header">我是插入到 header 中的内容</template>
-  主体内容
-</d2-container>
-```

src/pages/demo/components/container/md/doc-full-bs.md

@@ -1,77 +0,0 @@
-## 自适应填充页面容器 + 滚动优化
-
-无论内容高度多少，都会自动撑满页面，并有可选的 `header` 和 `footer` 插槽，**并且使用自定义滚动条代替原生滚动条**，是否启用此功能请自行取舍
-
-> 有些情况下使用滚动优化模式会有意外影响，例如页面内含有可拖拽的元素，这时候最好不要使用此模式
-
-示例：
-
-```
-<template>
-  <d2-container scroll>
-    <template slot="header">
-      可选的 header 内容 ...
-    </template>
-    主体内容 ...
-    <template slot="footer">
-      可选的 footer 内容 ...
-    </template>
-  </d2-container>
-</template>
-```
-
-下面是一个较长的演示文章，仅仅是为了演示一些文字的显示效果
-
-## vue.js
-
-**易用**
-
-已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
-
-**灵活**
-
-不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
-
-**高效**
-
-20kB min+gzip 运行大小
-
-超快虚拟 DOM
-
-最省心的优化
-
-**Vue.js 是什么**
-
-Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
-
-如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看对比其它框架。
-
-## Element
-
-Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
-
-**一致性** Consistency
-
-- 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
-
-- 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
-
-**反馈** Feedback
-
-- 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
-
-- 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
-
-**效率** Efficiency
-
-- 简化流程：设计简洁直观的操作流程；
-
-- 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
-
-- 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
-
-**可控** Controllability
-
-- 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
-
-- 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

src/pages/demo/components/container/md/doc-ghost-header.md

@@ -1,12 +0,0 @@
-## 隐形页面容器 带有头部
-
-不显示任何背景色和边框，但是有一个和分页组件效果融合的头部，看起来更舒服一点
-
-```
-<d2-container type="ghost">
-  <template slot="header">隐形页面容器头部</template>
-  主体内容
-</d2-container>
-```
-
-> 注意 如果设置了 header 插槽的内容，header 部分会自动具有 20px 的下外边距

src/pages/demo/components/container/md/doc-ghost.md

@@ -1,11 +0,0 @@
-## 隐形页面容器
-
-不显示任何背景色和边框
-
-```
-<d2-container type="ghost">
-  主体内容
-</d2-container>
-```
-
-如果你不希望内容紧贴上边，可以在内容外层容器设置 `class="d2-mt"`

src/pages/demo/components/container/md/doc.md

@@ -1,23 +1,3 @@
-## 自适应填充页面容器
-
-无论内容高度多少，都会自动撑满页面，并有可选的 `header` 和 `footer` 插槽
-
-示例：
-
-```
-<template>
-  <d2-container>
-    <template slot="header">
-      可选的 header 内容 ...
-    </template>
-    主体内容 ...
-    <template slot="footer">
-      可选的 footer 内容 ...
-    </template>
-  </d2-container>
-</template>
-```
-
 下面是一个较长的演示文章，仅仅是为了演示一些文字的显示效果
 
 ## vue.js

src/router/routes.js.REMOVED.git-id

@@ -1 +1 @@
-97be3f2fd593b87cf9c7a68081ce40feb76f9c1b
+81f6e5ee660a2f3bb538685b20c34e46f1bd5690