减少不必要的代码

Former-commit-id: 8c704c1c9e29c1f8887eb3b899977b35b8a5e4bd

src/components/d2-container/components/d2-container-card-bs.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="d2-container-card-bs">
+    <div v-if="$slots.header" class="d2-container-card-bs__header" ref="header">
+      <slot name="header"/>
+    </div>
+    <div class="d2-container-card-bs__body" ref="wrapper">
+      <div class="d2-container-card-bs__body-wrapper-inner">
+        <div class="d2-container-card-bs__body-card">
+          <slot/>
+        </div>
+      </div>
+    </div>
+    <div v-if="$slots.footer" class="d2-container-card-bs__footer" ref="footer">
+      <slot name="footer"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import bs from './mixins/bs'
+export default {
+  name: 'd2-container-card-bs',
+  mixins: [
+    bs
+  ]
+}
+</script>

src/components/d2-container/components/d2-container-card.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="d2-container-card">
+    <div v-if="$slots.header" class="d2-container-card__header" ref="header">
+      <slot name="header"/>
+    </div>
+    <div class="d2-container-card__body">
+      <div class="d2-container-card__body-card">
+        <slot/>
+      </div>
+    </div>
+    <div v-if="$slots.footer" class="d2-container-card__footer" ref="footer">
+      <slot name="footer"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'd2-container-card'
+}
+</script>

src/components/d2-container/components/d2-container-full-bs.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="d2-container-full-bs">
+    <div v-if="$slots.header" class="d2-container-full-bs__header" ref="header">
+      <slot name="header"/>
+    </div>
+    <div class="d2-container-full-bs__body" ref="wrapper">
+      <div class="d2-container-full-bs__body-wrapper-inner">
+        <slot/>
+      </div>
+    </div>
+    <div v-if="$slots.footer" class="d2-container-full-bs__footer" ref="footer">
+      <slot name="footer"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import bs from './mixins/bs'
+export default {
+  name: 'd2-container-card-bs',
+  mixins: [
+    bs
+  ]
+}
+</script>

src/components/d2-container/components/d2-container-full.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="d2-container-full">
+    <div v-if="$slots.header" class="d2-container-full__header" ref="header">
+      <slot name="header"/>
+    </div>
+    <div class="d2-container-full__body">
+      <slot/>
+    </div>
+    <div v-if="$slots.footer" class="d2-container-full__footer" ref="footer">
+      <slot name="footer"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'd2-container-full'
+}
+</script>

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

@@ -0,0 +1,23 @@
+<template>
+  <div class="d2-container-ghost-bs">
+    <div v-if="$slots.header" class="d2-container-ghost-bs__header" ref="header">
+      <slot name="header"/>
+    </div>
+    <div class="d2-container-ghost-bs__body" ref="wrapper">
+      <slot/>
+    </div>
+    <div v-if="$slots.footer" class="d2-container-ghost-bs__footer" ref="footer">
+      <slot name="footer"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import bs from './mixins/bs'
+export default {
+  name: 'd2-container-card-bs',
+  mixins: [
+    bs
+  ]
+}
+</script>

src/components/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/d2-container/components/mixins/bs.js

@@ -0,0 +1,37 @@
+import BScroll from 'better-scroll'
+export default {
+  props: {
+    betterScrollOptions: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      BS: null
+    }
+  },
+  mounted () {
+    this.scrollInit()
+  },
+  beforeDestroy () {
+    this.scrollDestroy()
+  },
+  methods: {
+    scrollInit () {
+      this.BS = new BScroll(this.$refs.wrapper, Object.assign({
+        mouseWheel: true,
+        scrollbar: {
+          fade: true,
+          interactive: false
+        }
+      }, this.betterScrollOptions))
+    },
+    scrollDestroy () {
+      if (this.BS) {
+        this.BS.destroy()
+      }
+    }
+  }
+}

src/components/d2-container/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="container-component" ref="container">
+    <!-- [card] 卡片容器 -->
+    <d2-container-card v-if="type === 'card' && !betterScroll">
+      <slot v-if="$slots.header" name="header" slot="header"/>
+      <slot/>
+      <slot v-if="$slots.footer" name="footer" slot="footer"/>
+    </d2-container-card>
+    <!-- [card] 卡片容器 滚动优化 -->
+    <d2-container-card-bs v-bind="$attrs" v-if="type === 'card' && betterScroll">
+      <slot v-if="$slots.header" name="header" slot="header"/>
+      <slot/>
+      <slot v-if="$slots.footer" name="footer" slot="footer"/>
+    </d2-container-card-bs>
+    <!-- [ghost] 隐形容器 -->
+    <d2-container-ghost v-if="type === 'ghost' && !betterScroll">
+      <slot v-if="$slots.header" name="header" slot="header"/>
+      <slot/>
+      <slot v-if="$slots.footer" name="footer" slot="footer"/>
+    </d2-container-ghost>
+    <!-- [ghost] 隐形容器 滚动优化 -->
+    <d2-container-ghost-bs v-bind="$attrs" v-if="type === 'ghost' && betterScroll">
+      <slot v-if="$slots.header" name="header" slot="header"/>
+      <slot/>
+      <slot v-if="$slots.footer" name="footer" slot="footer"/>
+    </d2-container-ghost-bs>
+    <!-- [container-full] 填充 -->
+    <d2-container-full v-if="type === 'full' && !betterScroll">
+      <slot v-if="$slots.header" name="header" slot="header"/>
+      <slot/>
+      <slot v-if="$slots.footer" name="footer" slot="footer"/>
+    </d2-container-full>
+    <!-- [container-full-bs] 填充 滚动优化 -->
+    <d2-container-full-bs v-bind="$attrs" v-if="type === 'full' && betterScroll">
+      <slot v-if="$slots.header" name="header" slot="header"/>
+      <slot/>
+      <slot v-if="$slots.footer" name="footer" slot="footer"/>
+    </d2-container-full-bs>
+  </div>
+</template>
+
+<script>
+// 组件
+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'
+import d2ContainerGhostBs from './components/d2-container-ghost-bs.vue'
+import d2ContainerCard from './components/d2-container-card.vue'
+import d2ContainerCardBs from './components/d2-container-card-bs.vue'
+export default {
+  name: 'd2-container',
+  components: {
+    'd2-container-full': d2ContainerFull,
+    'd2-container-full-bs': d2ContainerFullBs,
+    'd2-container-ghost': d2ContainerGhost,
+    'd2-container-ghost-bs': d2ContainerGhostBs,
+    'd2-container-card': d2ContainerCard,
+    'd2-container-card-bs': d2ContainerCardBs
+  },
+  props: {
+    // 容器样式
+    type: {
+      type: String,
+      required: false,
+      default: 'full'
+    },
+    // 滚动优化
+    betterScroll: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  }
+}
+</script>

src/components/d2-icon-svg/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg aria-hidden="true">
+    <use :xlink:href="icon"></use>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'd2-icon-svg',
+  props: {
+    name: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    icon () {
+      return `#d2-${this.name}`
+    }
+  }
+}
+</script>

src/components/d2-icon/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <i class="fa" :class="`fa-${name}`" aria-hidden="true"></i>
+</template>
+
+<script>
+import './font-awesome-4.7.0/css/font-awesome.min.css'
+export default {
+  name: 'd2-icon',
+  props: {
+    name: {
+      type: String,
+      required: false,
+      default: 'font-awesome'
+    }
+  }
+}
+</script>

src/components/d2-page-cover/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="page-cover">
+    <div class="page-cover__logo">
+      <slot/>
+    </div>
+    <p class="page-cover__title">{{title}}</p>
+    <p class="page-cover__sub-title d2-mt-0">{{subTitle}}</p>
+    <slot name="footer"/>
+    <a target="blank" href="https://github.com/d2-projects/d2-admin">
+      <img
+        style="position: absolute; top: 0; right: 0; border: 0; width: 150px;"
+        src="./image/darkblue@2x.png"
+        alt="Fork me on GitHub">
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: 'Title'
+    },
+    subTitle: {
+      type: String,
+      required: false,
+      default: 'subTitle'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/style/public.scss';
+.page-index-article-header {
+  overflow: hidden;
+  .page-index-article-header__title {
+    display: inline-block;
+    padding: 12px 20px;
+  }
+}
+.page-cover {
+  @extend %full;
+  @extend %unable-select;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  .page-cover__logo {
+    img {
+      width: 200px;
+    }
+  }
+  .page-cover__title {
+    color: $color-text-main;
+  }
+  .page-cover__sub-title {
+    color: $color-text-sub;
+  }
+}
+</style>

src/components/index.js

@@ -0,0 +1,10 @@
+import Vue from 'vue'
+
+import d2Container from './d2-container'
+
+// 注意 有些组件使用异步加载会有影响
+
+Vue.component('d2-container', d2Container)
+Vue.component('d2-page-cover', () => import('./d2-page-cover'))
+Vue.component('d2-icon', () => import('./d2-icon'))
+Vue.component('d2-icon-svg', () => import('./d2-icon-svg/index.vue'))