Merge branch 'develop'

Former-commit-id: bee347d420a659006dd75c0312bd7cb9edee30ce [formerly ce6e0e17a5ebc92b40f6abe4df89b7fd10678c3c] [formerly bee347d420a659006dd75c0312bd7cb9edee30ce [formerly ce6e0e17a5ebc92b40f6abe4df89b7fd10678c3c] [formerly bee347d420a659006dd75c0312bd7cb9edee30ce [formerly ce6e0e17a5ebc92b40f6abe4df89b7fd10678c3c] [formerly ce6e0e17a5ebc92b40f6abe4df89b7fd10678c3c [formerly ebd2547c909a541457025d40d89be4c4ff4e8262 [formerly 6a66d5167110f581c6db56022d39784f22ef7693]]]]] Former-commit-id: 8bd502454df5b006e1fdbd66e90d4f868854eb2c Former-commit-id: 79594ac3d47dd223bc2adde192f8f79679dc568f Former-commit-id: 7e569e974dc8b833bfe5bc1baa424720cb734647 [formerly 2ea6d2b532661f960ecc2001af16da649112ea92] Former-commit-id: 061582f24b13f694a1056bb7c20d09e3fc2e9aae Former-commit-id: be3f42845b133f5e1aefc9052a6a85f03313ac7e Former-commit-id: 56ab6d2601612a3a438d5b4984f00d905f1b957d Former-commit-id: 66cd21c7fe2b64341fcc3aa79c65ae36d18b82f3 Former-commit-id: 4bd107c89a309117430b6608e55ad0cb42b85093
2018-11-16 16:09:57 +08:00
parent 265efe3ad9 199e49799b
commit b8cff46a51
22 changed files with 541 additions and 127 deletions
--- a/README.md
+++ b/README.md
@@ -130,8 +130,6 @@

 D2Admin 是完全开源免费的项目，旨在帮助开发者更方便地进行管理系统开发，同时也提供 2000 人的 QQ 交流群和微信群，前后端的朋友可以相互答疑，项目组成员全部在内，所有 D2 相关项目使用问题欢迎在群内提问。

-> 隐性福利：重要通知会发群红包
-
 ![join](https://raw.githubusercontent.com/FairyEver/d2-admin/master/doc/image/join@2x.png)

 ## License
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "d2-admin",
-  "version": "1.6.0",
+  "version": "1.6.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --open",
--- a/src/components/d2-container/components/d2-container-card.vue
+++ b/src/components/d2-container/components/d2-container-card.vue
@@ -3,7 +3,7 @@
    <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" ref="body">
      <div class="d2-container-card__body-card">
        <slot/>
      </div>
@@ -15,7 +15,19 @@
 </template>

 <script>
+import scroll from './mixins/normal'
 export default {
-  name: 'd2-container-card'
+  name: 'd2-container-card',
+  mixins: [
+    scroll
+  ],
+  mounted () {
+    // 增加滚动事件监听
+    this.addScrollListener()
+  },
+  beforeDestroy () {
+    // 移除滚动事件监听
+    this.removeScrollListener()
+  }
 }
 </script>
--- a/src/components/d2-container/components/d2-container-full.vue
+++ b/src/components/d2-container/components/d2-container-full.vue
@@ -3,7 +3,7 @@
    <div v-if="$slots.header" class="d2-container-full__header" ref="header">
      <slot name="header"/>
    </div>
-    <div class="d2-container-full__body">
+    <div class="d2-container-full__body" ref="body">
      <slot/>
    </div>
    <div v-if="$slots.footer" class="d2-container-full__footer" ref="footer">
@@ -13,7 +13,19 @@
 </template>

 <script>
+import scroll from './mixins/normal'
 export default {
-  name: 'd2-container-full'
+  name: 'd2-container-full',
+  mixins: [
+    scroll
+  ],
+  mounted () {
+    // 增加滚动事件监听
+    this.addScrollListener()
+  },
+  beforeDestroy () {
+    // 移除滚动事件监听
+    this.removeScrollListener()
+  }
 }
 </script>
--- a/src/components/d2-container/components/d2-container-ghost.vue
+++ b/src/components/d2-container/components/d2-container-ghost.vue
@@ -3,7 +3,7 @@
    <div v-if="$slots.header" class="d2-container-ghost__header" ref="header">
      <slot name="header"/>
    </div>
-    <div class="d2-container-ghost__body">
+    <div class="d2-container-ghost__body" ref="body">
      <slot/>
    </div>
    <div v-if="$slots.footer" class="d2-container-ghost__footer" ref="footer">
@@ -11,3 +11,21 @@
    </div>
  </div>
 </template>
+
+<script>
+import scroll from './mixins/normal'
+export default {
+  name: 'd2-container-ghost',
+  mixins: [
+    scroll
+  ],
+  mounted () {
+    // 增加滚动事件监听
+    this.addScrollListener()
+  },
+  beforeDestroy () {
+    // 移除滚动事件监听
+    this.removeScrollListener()
+  }
+}
+</script>
--- a/src/components/d2-container/components/d2-source.vue
+++ b/src/components/d2-container/components/d2-source.vue
@@ -0,0 +1,74 @@
+<template>
+  <div
+    class="d2-source"
+    :class="{ 'd2-source--active': isActive }"
+    @click="handleClick">
+    <d2-icon name="code"/> SourceCode
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    // 文件路径
+    filename: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      isActive: false
+    }
+  },
+  mounted () {
+    // 一秒后显示按钮
+    setTimeout(() => {
+      this.isActive = true
+    }, 1000)
+  },
+  methods: {
+    // 点击按钮的时候跳转到源代码
+    handleClick () {
+      const file = this.filename.split('?')[0]
+      const url = file
+        ? `https://github.com/d2-projects/d2-admin/blob/master/${file}`
+        : 'https://github.com/d2-projects/d2-admin'
+      this.$open(url)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/style/public.scss';
+.d2-source {
+  $borderRadius: 4px;
+  $paddingLR: 15px;
+  $paddingTB: 7px;
+  $fontSize: 12px;
+  $rightOuter: $paddingLR / 2;
+  opacity: 0;
+  position: absolute;
+  right: - $borderRadius - $rightOuter;
+  bottom: 20px;
+  font-size: $fontSize;
+  line-height: $fontSize;
+  font-weight: bold;
+  border-radius: $borderRadius;
+  padding: $paddingTB $paddingLR;
+  padding-right: $borderRadius + $paddingLR;
+  background-color: rgba(#000, .7);
+  border: 1px solid #000;
+  color: #FFF;
+  transition: all .3s;
+  @extend %unable-select;
+  &.d2-source--active {
+    opacity: 1;
+  }
+  &:hover {
+    right: - $borderRadius;
+    background-color: rgba(#000, .9);
+  }
+}
+</style>
--- a/src/components/d2-container/components/mixins/bs.js
+++ b/src/components/d2-container/components/mixins/bs.js
@@ -1,6 +1,7 @@
 import BScroll from 'better-scroll'
 export default {
  props: {
+    // 滚动优化的选项
    betterScrollOptions: {
      type: Object,
      required: false,
@@ -20,6 +21,7 @@ export default {
  },
  methods: {
    scrollInit () {
+      // 初始化 bs
      this.BS = new BScroll(this.$refs.wrapper, Object.assign({
        mouseWheel: true,
        scrollbar: {
@@ -27,6 +29,11 @@ export default {
          interactive: false
        }
      }, this.betterScrollOptions))
+      // 滚动时发出事件 并且统一返回的数据格式
+      this.BS.on('scroll', ({x, y}) => this.$emit('scroll', {
+        x: -x,
+        y: -y
+      }))
    },
    scrollDestroy () {
      // https://github.com/d2-projects/d2-admin/issues/75
@@ -36,6 +43,19 @@ export default {
        delete this.BS
        this.BS = null
      }
+    },
+    // 外部调用的方法 返回顶部
+    scrollToTop () {
+      if (this.BS) this.BS.scrollTo(0, 0, 300)
+    },
+    // 手动发出滚动事件
+    scroll () {
+      if (this.BS) {
+        this.$emit('scroll', {
+          x: -this.BS.x,
+          y: -this.BS.y
+        })
+      }
    }
  }
 }
--- a/src/components/d2-container/components/mixins/normal.js
+++ b/src/components/d2-container/components/mixins/normal.js
@@ -0,0 +1,67 @@
+// 提供滚动方面的功能
+// 非滚动优化模式通用
+
+import { throttle } from 'lodash'
+
+// 生成滚动事件的 handler
+function handleMaker (wait) {
+  return throttle(e => {
+    this.$emit('scroll', {
+      x: e.target.scrollLeft,
+      y: e.target.scrollTop
+    })
+  }, wait)
+}
+
+export default {
+  props: {
+    // 滚动事件节流间隔
+    scrollDelay: {
+      type: Number,
+      required: false,
+      default: 10
+    }
+  },
+  data () {
+    return {
+      handleScroll: null
+    }
+  },
+  watch: {
+    scrollDelay (val) {
+      // 移除旧的监听
+      this.removeScrollListener()
+      // 生成新的 handle 方法
+      this.handleScroll = handleMaker.call(this, val)
+      // 添加新的监听
+      this.addScrollListener()
+    }
+  },
+  methods: {
+    // 增加滚动事件监听
+    addScrollListener () {
+      if (typeof this.handleScroll !== 'function') {
+        // mounted 生命周期内调用这个方法的时候会进入这里的判断
+        this.handleScroll = handleMaker.call(this, this.scrollDelay)
+      }
+      // 添加监听
+      this.$refs.body.addEventListener('scroll', this.handleScroll)
+    },
+    // 移除滚动事件监听
+    removeScrollListener () {
+      this.$refs.body.removeEventListener('scroll', this.handleScroll)
+    },
+    // 外部调用的方法 返回顶部
+    scrollToTop () {
+      const smoothscroll = () => {
+        const body = this.$refs.body
+        const currentScroll = body.scrollTop
+        if (currentScroll > 0) {
+          window.requestAnimationFrame(smoothscroll)
+          body.scrollTo(0, currentScroll - (currentScroll / 5))
+        }
+      }
+      smoothscroll()
+    }
+  }
+}
--- a/src/components/d2-container/index.js
+++ b/src/components/d2-container/index.js
@@ -0,0 +1,111 @@
+// 组件
+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'
+import d2Source from './components/d2-source.vue'
+
+export default {
+  name: 'd2-container',
+  props: {
+    // 容器样式
+    type: {
+      type: String,
+      required: false,
+      default: 'full'
+    },
+    // 滚动优化
+    betterScroll: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    // 始终返回渲染组件
+    component () {
+      if (this.type === 'card' && !this.betterScroll) return d2ContainerCard
+      if (this.type === 'card' && this.betterScroll) return d2ContainerCardBs
+      if (this.type === 'ghost' && !this.betterScroll) return d2ContainerGhost
+      if (this.type === 'ghost' && this.betterScroll) return d2ContainerGhostBs
+      if (this.type === 'full' && !this.betterScroll) return d2ContainerFull
+      if (this.type === 'full' && this.betterScroll) return d2ContainerFullBs
+      else {
+        return 'div'
+      }
+    }
+  },
+  render (h) {
+    const slots = [
+      h('div', this.$slots.default)
+    ]
+    if (this.$slots.header) slots.push(h('div', { slot: 'header' }, [ this.$slots.header ]))
+    if (this.$slots.footer) slots.push(h('div', { slot: 'footer' }, [ this.$slots.footer ]))
+    return h('div', {
+      ref: 'container',
+      class: 'container-component'
+    }, [
+      h(this.component, {
+        ref: 'component',
+        props: this.$attrs,
+        on: {
+          scroll: e => this.$emit('scroll', e)
+        }
+      }, slots),
+      // 只在预览和开发模式下显示源码按钮
+      process.env.VUE_APP_BUILD_MODE === 'TRAVIS' || process.env.NODE_ENV === 'development' ? h(d2Source, {
+        props: this.$attrs
+      }) : undefined
+    ])
+  },
+  methods: {
+    // 返回顶部
+    scrollToTop () {
+      this.$refs.component.scrollToTop()
+      // 如果开启了 better scroll 还需要手动触发一遍 scroll 事件
+      const bs = this.$refs.component.BS
+      if (bs) this.$refs.component.scroll()
+    },
+    // 用法同原生方法 scrollBy
+    scrollBy (x = 0, y = 0, time = 300) {
+      if (this.betterScroll) {
+        const bs = this.$refs.component.BS
+        if (bs) {
+          bs.scrollBy(-x, -y, time)
+          // 手动触发一遍 scroll 事件
+          this.$refs.component.scroll()
+        }
+      } else {
+        this.$refs.component.$refs.body.scrollBy(x, y)
+      }
+    },
+    // 用法同原生方法 scrollTo
+    scrollTo (x = 0, y = 0, time = 300) {
+      if (this.betterScroll) {
+        const bs = this.$refs.component.BS
+        if (bs) {
+          bs.scrollTo(-x, -y, time)
+          // 手动触发一遍 scroll 事件
+          this.$refs.component.scroll()
+        }
+      } else {
+        this.$refs.component.$refs.body.scrollTo(x, y)
+      }
+    },
+    // 用法同原生方法 scrollTop
+    scrollTop (top = 0, time = 300) {
+      if (this.betterScroll) {
+        const bs = this.$refs.component.BS
+        if (bs) {
+          bs.scrollTo(bs.x, -top, time)
+          // 手动触发一遍 scroll 事件
+          this.$refs.component.scroll()
+        }
+      } else {
+        this.$refs.component.$refs.body.scrollTop = top
+      }
+    }
+  }
+}
--- a/src/components/d2-container/index.vue
+++ b/src/components/d2-container/index.vue
@@ -1,75 +0,0 @@
-<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>
--- a/src/layout/header-aside/components/components/menu-item/index.vue
+++ b/src/layout/header-aside/components/components/menu-item/index.vue
@@ -1,8 +1,8 @@
 <template>
  <el-menu-item :index="menu.path || uniqueId">
    <i v-if="menu.icon" :class="`fa fa-${menu.icon}`"></i>
-    <d2-icon-svg v-else-if="menu.iconSvg" :name="menu.iconSvg"/>
-    <i v-else class="fa fa-file-o"></i>
+    <i v-if="menu.icon === undefined" class="fa fa-file-o"></i>
+    <d2-icon-svg v-if="menu.iconSvg" :name="menu.iconSvg"/>
    <span slot="title">{{menu.title || '未命名菜单'}}</span>
  </el-menu-item>
 </template>
--- a/src/layout/header-aside/components/components/menu-sub/index.vue
+++ b/src/layout/header-aside/components/components/menu-sub/index.vue
@@ -2,8 +2,8 @@
  <el-submenu :index="menu.path || uniqueId">
    <template slot="title">
      <i v-if="menu.icon" :class="`fa fa-${menu.icon}`"></i>
-      <d2-icon-svg v-else-if="menu.iconSvg" :name="menu.iconSvg"/>
-      <i v-else class="fa fa-folder-o"></i>
+      <i v-if="menu.icon === undefined" class="fa fa-folder-o"></i>
+      <d2-icon-svg v-if="menu.iconSvg" :name="menu.iconSvg"/>
      <span slot="title">{{menu.title}}</span>
    </template>
    <template v-for="(child, childIndex) in menu.children">
--- a/src/layout/header-aside/components/tabs/index.vue
+++ b/src/layout/header-aside/components/tabs/index.vue
@@ -19,8 +19,8 @@
          @edit="handleTabsEdit"
          @contextmenu.native="handleContextmenu">
          <el-tab-pane
-            v-for="(page, index) in opened"
-            :key="index"
+            v-for="page in opened"
+            :key="page.fullPath"
            :label="page.meta.title || '未命名'"
            :name="page.fullPath"/>
        </el-tabs>
--- a/src/menu/modules/demo-components.js
+++ b/src/menu/modules/demo-components.js
@@ -9,15 +9,37 @@ export default {
      title: '布局容器',
      icon: 'window-restore',
      children: [
-        { path: `${pre}container/full`, title: '填充' },
-        { path: `${pre}container/full-slot`, title: '填充 插槽' },
-        { path: `${pre}container/full-bs`, title: '填充 滚动优化' },
-        { path: `${pre}container/ghost`, title: '隐形' },
-        { path: `${pre}container/ghost-slot`, title: '隐形 插槽' },
-        { path: `${pre}container/ghost-bs`, title: '隐形 滚动优化' },
-        { path: `${pre}container/card`, title: '卡片' },
-        { path: `${pre}container/card-slot`, title: '卡片 插槽' },
-        { path: `${pre}container/card-bs`, title: '卡片 滚动优化' }
+        {
+          title: '填充型',
+          children: [
+            { path: `${pre}container/full`, title: '基础', icon: '' },
+            { path: `${pre}container/full-slot`, title: '插槽', icon: '' },
+            { path: `${pre}container/full-bs`, title: '滚动优化', icon: '' }
+          ]
+        },
+        {
+          title: '隐形模式',
+          children: [
+            { path: `${pre}container/ghost`, title: '基础', icon: '' },
+            { path: `${pre}container/ghost-slot`, title: '插槽', icon: '' },
+            { path: `${pre}container/ghost-bs`, title: '滚动优化', icon: '' }
+          ]
+        },
+        {
+          title: '卡片型',
+          children: [
+            { path: `${pre}container/card`, title: '基础', icon: '' },
+            { path: `${pre}container/card-slot`, title: '插槽', icon: '' },
+            { path: `${pre}container/card-bs`, title: '滚动优化', icon: '' }
+          ]
+        },
+        {
+          title: '方法',
+          children: [
+            { path: `${pre}container/api?bs=false`, title: '滚动控制', icon: '' },
+            { path: `${pre}container/api?bs=true`, title: '滚动控制 BS', icon: '' }
+          ]
+        }
      ]
    },
    {
--- a/src/pages/demo/components/container/api.vue
+++ b/src/pages/demo/components/container/api.vue
@@ -0,0 +1,105 @@
+<template>
+  <d2-container
+    ref="container"
+    :type="containerType"
+    :better-scroll="betterScroll"
+    :scroll-delay="scrollDelay"
+    @scroll="({x, y}) => { scrollTop = y }">
+    <template slot="header">
+      <el-form
+        :inline="true"
+        size="mini">
+        <el-form-item
+          label="布局类型"
+          class="d2-mb-0">
+          <el-radio-group v-model="containerType">
+            <el-radio-button label="full"></el-radio-button>
+            <el-radio-button label="card"></el-radio-button>
+            <el-radio-button label="ghost"></el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item
+          label="滚动距离"
+          class="d2-mb-0">
+          <el-input
+            :value="scrollTop"
+            style="width: 130px;">
+            <template slot="append">px</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item
+          v-if="!betterScroll"
+          label="事件延迟(ms)"
+          class="d2-mb-0">
+          <el-input-number
+            v-model="scrollDelay"
+            :min="10"
+            :max="2000"
+            :step="100"
+            style="width: 110px;"/>
+        </el-form-item>
+        <el-form-item class="d2-mb-0">
+          <el-button
+            v-if="scrollTop >= 55"
+            type="primary"
+            @click="$refs.container.scrollToTop">
+            回到顶部
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </template>
+    <el-alert
+      type="success"
+      :title="`${betterScroll ? '此示例开启了 BetterScroll ' : ''}请向下滚动`"
+      class="d2-mb-10"
+      center/>
+    <d2-demo-article
+      v-for="i in 10"
+      :key="i"
+      :style="articleStyle"
+      long/>
+    <template slot="footer">
+      <el-form
+        :inline="true"
+        size="mini">
+        <el-form-item class="d2-mb-0">
+          <el-button @click="$refs.container.scrollBy(0, 30)">相对滚动 (0, 30) 像素</el-button>
+        </el-form-item>
+        <el-form-item class="d2-mb-0">
+          <el-button @click="$refs.container.scrollTo(0, 100)">滚动到 (0, 100) 像素位置</el-button>
+        </el-form-item>
+        <el-form-item class="d2-mb-0">
+          <el-button @click="$refs.container.scrollTop(100)">滚动到垂直位置 100</el-button>
+        </el-form-item>
+      </el-form>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import d2DemoArticle from './components/d2-demo-article'
+export default {
+  components: {
+    'd2-demo-article': d2DemoArticle
+  },
+  data () {
+    return {
+      containerType: 'full',
+      scrollDelay: 10,
+      scrollTop: 0
+    }
+  },
+  computed: {
+    // 是否开启 better scroll
+    betterScroll () {
+      return this.$route.query.bs === 'true'
+    },
+    // 根据滚动位置返回文章的样式
+    articleStyle () {
+      return {
+        opacity: this.scrollTop > 55 ? '1' : '.1'
+      }
+    }
+  }
+}
+</script>
--- a/src/pages/demo/components/container/components/d2-demo-article.vue
+++ b/src/pages/demo/components/container/components/d2-demo-article.vue
@@ -1,37 +1,50 @@
 <template>
-  <div>
-    <div class="d2-demo-article-control">
+  <div class="d2-demo-article">
+    <div v-if="!long" class="d2-demo-article__control">
      <el-switch
        v-model="isLong"
        active-text="长内容"
-        inactive-text="短内容">
-      </el-switch>
+        inactive-text="短内容"/>
    </div>
-    <d2-markdown v-show="isLong" :source="long"/>
-    <d2-markdown v-show="!isLong" :source="short"/>
+    <d2-markdown v-show="isLong" :source="sourceLong"/>
+    <d2-markdown v-show="!isLong" :source="sourceShort"/>
  </div>
 </template>

 <script>
-import long from '../md/long.md'
-import short from '../md/short.md'
+import sourceLong from '../md/long.md'
+import sourceShort from '../md/short.md'
 export default {
+  props: {
+    // 指定为长文本
+    long: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
  data () {
    return {
-      long,
-      short,
+      sourceLong,
+      sourceShort,
      isLong: false
    }
+  },
+  created () {
+    this.isLong = this.long
  }
 }
 </script>

 <style lang="scss" scoped>
-.d2-demo-article-control {
-  padding: 8px 16px;
-  margin-bottom: 10px;
-  box-sizing: border-box;
-  border-radius: 4px;
-  background-color: #f4f4f5;
+.d2-demo-article {
+  transition: opacity .3s;
+  .d2-demo-article__control {
+    padding: 8px 16px;
+    margin-bottom: 10px;
+    box-sizing: border-box;
+    border-radius: 4px;
+    background-color: #f4f4f5;
+  }
 }
 </style>
--- a/src/pages/demo/playground/env/index.vue
+++ b/src/pages/demo/playground/env/index.vue
@@ -1,9 +1,7 @@
 <template>
  <d2-container type="card">
    <template slot="header">process.env</template>
-    <p class="d2-mt-0">NODE_ENV = {{env}}</p>
-    <p>BASE_URL = {{baseUrl}}</p>
-    <p class="d2-mb-0">VUE_APP_TITLE = {{title}}</p>
+    <d2-highlight :code="env"/>
  </d2-container>
 </template>

@@ -11,9 +9,7 @@
 export default {
  data () {
    return {
-      env: process.env.NODE_ENV,
-      baseUrl: process.env.BASE_URL,
-      title: process.env.VUE_APP_TITLE
+      env: JSON.stringify(process.env, null, 2)
    }
  }
 }
--- a/src/pages/demo/playground/page-cache/params.vue
+++ b/src/pages/demo/playground/page-cache/params.vue
@@ -3,19 +3,35 @@
    <template slot="header">这个页面会被 keep-alive</template>
    <h2 class="d2-mt-0">编号：{{id}}</h2>
    <p class="d2-mt-0">在下面的输入框输入任意字符后，切换到其它页面，再回到此页时输入框文字保留，证明被缓存</p>
-    <el-input v-model="value" placeholder="input here"></el-input>
+    <!-- 使用 el-input 会出现显示值与 v-model 不一致的情况，解决问题前暂时使用 input -->
+    <input v-model="data.value" placeholder="input here" />
  </d2-container>
 </template>

 <script>
+const datas = {}
+
 export default {
  name: 'demo-playground-page-cache-params',
  props: {
-    id: String
+    id: {
+      type: String,
+      required: true
+    }
  },
-  data () {
-    return {
-      value: ''
+  computed: {
+    /**
+     * 带参路由多组参数使用同一个组件实例，需要在组件内部对多个参数的情况进行统一处理
+     * 这里简单演示如何根据 id 管理多组数据对象
+     */
+    data: function () {
+      const id = this.id
+      let data = datas[id]
+      if (!data) {
+        data = { value: '' }
+        datas[id] = data
+      }
+      return data
    }
  }
 }
--- a/src/pages/index/page.vue
+++ b/src/pages/index/page.vue
@@ -1,5 +1,7 @@
 <template>
-  <d2-container class="page">
+  <d2-container
+    class="page"
+    :filename="filename">
    <d2-page-cover
      :title="`D2 Admin ${version}`"
      sub-title="优雅的中后台集成方案">
@@ -43,6 +45,11 @@ export default {
    D2HelpBtn,
    D2Badge
  },
+  data () {
+    return {
+      filename: __filename
+    }
+  },
  computed: {
    ...mapState('d2admin/releases', [
      'version'
--- a/src/router/modules/components.js
+++ b/src/router/modules/components.js
@@ -18,6 +18,7 @@ export default {
    { path: 'container/card', name: `${pre}container-card`, component: () => import('@/pages/demo/components/container/card.vue'), meta: { ...meta, title: '布局组件 卡片' } },
    { path: 'container/card-slot', name: `${pre}container-card-slot`, component: () => import('@/pages/demo/components/container/card-slot.vue'), meta: { ...meta, title: '布局组件 卡片 插槽' } },
    { path: 'container/card-bs', name: `${pre}container-card-bs`, component: () => import('@/pages/demo/components/container/card-bs.vue'), meta: { ...meta, title: '布局组件 卡片 滚动优化' } },
+    { path: 'container/api', name: `${pre}container-api`, component: () => import('@/pages/demo/components/container/api.vue'), meta: { ...meta, title: '布局组件 API' } },
    { path: 'contextmenu/simple', name: `${pre}contextmenu-simple`, component: () => import('@/pages/demo/components/contextmenu/simple.vue'), meta: { ...meta, title: '右键菜单 基础' } },
    { path: 'contextmenu/divier', name: `${pre}contextmenu-divier`, component: () => import('@/pages/demo/components/contextmenu/divier.vue'), meta: { ...meta, title: '右键菜单 分割线' } },
    { path: 'contextmenu/group', name: `${pre}contextmenu-group`, component: () => import('@/pages/demo/components/contextmenu/group.vue'), meta: { ...meta, title: '右键菜单 分组' } },
--- a/src/store/modules/d2admin/modules/theme.js
+++ b/src/store/modules/d2admin/modules/theme.js
@@ -48,12 +48,25 @@ export default {
    load ({ state, commit, dispatch }) {
      return new Promise(async resolve => {
        // store 赋值
-        state.activeName = await dispatch('d2admin/db/get', {
+        let activeName = await dispatch('d2admin/db/get', {
          dbName: 'sys',
          path: 'theme.activeName',
          defaultValue: state.list[0].name,
          user: true
        }, { root: true })
+        // 检查这个主题在主题列表里是否存在
+        if (state.list.find(e => e.name === activeName)) {
+          state.activeName = activeName
+        } else {
+          state.activeName = state.list[0].name
+          // 持久化
+          await dispatch('d2admin/db/set', {
+            dbName: 'sys',
+            path: 'theme.activeName',
+            value: state.activeName,
+            user: true
+          }, { root: true })
+        }
        // 将 vuex 中的主题应用到 dom
        commit('dom')
        // end
--- a/vue.config.js
+++ b/vue.config.js
@@ -52,6 +52,10 @@ module.exports = {
    // 重新设置 alias
    config.resolve.alias
      .set('@', resolve('src'))
+    // node
+    config.node
+      .set('__dirname', true)
+      .set('__filename', true)
    // babel-polyfill 加入 entry
    const entry = config.entry('app')
    entry