Merge branch 'release/v1.1.6'

Former-commit-id: f1780b48ac3417478c4dd35ab2ea43ca495b3a33 [formerly f1780b48ac3417478c4dd35ab2ea43ca495b3a33 [formerly f1780b48ac3417478c4dd35ab2ea43ca495b3a33 [formerly f1780b48ac3417478c4dd35ab2ea43ca495b3a33 [formerly 77cd1a0 [formerly e99f62e7c35bcf3b15a7dca0d208a4a0d4b440f7]]]]]
Former-commit-id: 7348ae2
Former-commit-id: b005dfc
Former-commit-id: 5afdaafe8c09a772b52b120047b7d232c857dd2a [formerly 22e052cdff9318f6f336ad7a4b755a00803bcf43]
Former-commit-id: 57608bf479a46bf810a9c17f117a299497d2d442
Former-commit-id: b12f96ab0dc35bd57b608e6bce36587166d25b48
Former-commit-id: af538030b5a08453ec8f58ba0a74622bed9d1f1f
Former-commit-id: 72a0d3bb3ed4e52b8b1553c5d6e9d35e9aa93021
Former-commit-id: 32ef0ebdc48e866afe9cd8ea4f7175cc53a12927

docs/.vuepress/config.js

@@ -52,7 +52,7 @@ module.exports = {
           '/zh/guide/': sideBarGuide('指南'),
           '/zh/plugins/': sideBarPlugins('插件'),
           '/zh/components/': sideBarComponents('组件'),
-          '/zh/article/': sideBarArticle('版本更新'),
+          '/zh/article/': sideBarArticle('Cookbook', '版本更新'),
           '/zh/others/': sideBarOthers('其它')
         }
       }
@@ -109,13 +109,20 @@ function sideBarComponents (title) {
   ]
 }
 
-function sideBarArticle (titleUpdate) {
+function sideBarArticle (titleCookBook, titleUpdate) {
   return [
+    {
+      title: titleCookBook,
+      collapsable: false,
+      children: [
+        'cookbook/what-is-cookbook',
+        'cookbook/combinable-questionnaire',
+      ]
+    },
     {
       title: titleUpdate,
       collapsable: false,
       children: [
-        '',
         'update/1.1.5',
         'update/1.1.4',
         'update/0.0.0'

docs/zh/article/README.md

@@ -1,3 +1,3 @@
-# 章节介绍
+# 文章
 
-这个章节下收录关于 D2Admin 的一些介绍，用法，以及每次发布新版本时的推广文章，也是每篇新文章的首发地址。
+请在侧边栏目录选择文章阅读

docs/zh/article/cookbook/combinable-questionnaire.md.REMOVED.git-id

@@ -0,0 +1 @@
+19d478d2f8f1eaf254a2f27de23d407916d28d0d

docs/zh/article/cookbook/what-is-cookbook.md

@@ -0,0 +1,3 @@
+# 什么是 Cookbook
+
+计算机领域的 Cookbook 指的是实用经典案例的意思，是对一些普遍性问题的解决方案的总结和整理。

package.json

@@ -1,6 +1,6 @@
 {
   "name": "d2-admin",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --open",

src/layout/header-aside/components/contextmenu/components/contentmenuList/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    class="d2-contentmenu-list"
+    @click="rowClick">
+    <div
+      v-for="item in menulist"
+      :key="item.value"
+      :data-value="item.value"
+      class="d2-contentmenu-item"
+      flex="cross:center main:center">
+      <d2-icon
+        v-if="item.icon"
+        :name="item.icon"/>
+      <div
+        class="d2-contentmenu-item-title"
+        flex-box="1">
+        {{item.title}}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'd2-contextmenu-list',
+    props: {
+      menulist: {
+        type: Array,
+        default: () => []
+      }
+    },
+    methods: {
+      rowClick (event) {
+        let target = event.target
+        while(!target.dataset.value) {
+          target = target.parentNode
+        }
+        this.$emit('rowClick', target.dataset.value)
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+.d2-contentmenu-list {
+  .d2-contentmenu-item {
+    padding: 8px 20px 8px 15px;
+    margin: 0;
+    font-size: 14px;
+    color: #606266;
+    cursor: pointer;
+    &:hover {
+      background: #ecf5ff;
+      color: #66b1ff;
+    }
+    .d2-contentmenu-item-title {
+      margin-left: 10px;
+    }
+  }
+}
+</style>

src/layout/header-aside/components/contextmenu/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div
+    class="d2-contextmenu"
+    v-show="flag"
+    :style="style">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'd2-contextmenu',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    x: {
+      type: Number,
+      default: 0
+    },
+    y: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    flag: {
+      get () {
+        if (this.visible) {
+          // 注册全局监听事件 [ 目前只考虑鼠标解除触发 ]
+          window.addEventListener('mousedown', this.watchContextmenu)
+        }
+        return this.visible
+      },
+      set (newVal) {
+        this.$emit('update:visible', newVal)
+      }
+    },
+    style () {
+      return {
+        left: this.x + 'px',
+        top: this.y + 'px',
+        display: this.visible ? 'block' : 'none '
+      }
+    }
+  },
+  methods: {
+    watchContextmenu (event) {
+      if (!this.$el.contains(event.target)) this.flag = false
+      window.removeEventListener('mousedown', this.watchContextmenu)
+    }
+  },
+  mounted () {
+    // 将菜单放置到body下
+    document.querySelector('body').appendChild(this.$el)
+  }
+}
+</script>
+
+<style>
+.d2-contextmenu {
+  position: absolute;
+  padding: 5px 0;
+  z-index: 2018;
+  background: #FFF;
+  border: 1px solid #cfd7e5;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+}
+</style>

src/layout/header-aside/components/tabs/index.vue

@@ -2,23 +2,34 @@
   <div class="d2-multiple-page-control-group" flex>
     <div class="d2-multiple-page-control-content" flex-box="1">
       <div class="d2-multiple-page-control-content-inner">
+        <d2-contextmenu
+          :visible.sync="contextmenuFlag"
+          :x="contentmenuX"
+          :y="contentmenuY">
+          <d2-contextmenu-list
+            :menulist="tagName === 'index' ? contextmenuListIndex : contextmenuList"
+            @rowClick="contextmenuClick"/>
+        </d2-contextmenu>
         <el-tabs
           class="d2-multiple-page-control"
           :value="pageCurrent"
           type="card"
           :closable="true"
           @tab-click="handleClick"
-          @edit="handleTabsEdit">
+          @edit="handleTabsEdit"
+          @contextmenu.native="handleContextmenu">
           <el-tab-pane
+            class="hello"
             v-for="(page, index) in pageOpenedList"
             :key="index"
             :label="page.meta.title || '未命名'"
-            :name="page.name">
-          </el-tab-pane>
+            :name="page.name"/>
         </el-tabs>
       </div>
     </div>
-    <div class="d2-multiple-page-control-btn" flex-box="0">
+    <div
+      class="d2-multiple-page-control-btn"
+      flex-box="0">
       <el-dropdown
         split-button
         @click="handleControlBtnClick"
@@ -50,6 +61,27 @@
 <script>
 import { mapState, mapMutations } from 'vuex'
 export default {
+  components: {
+    D2Contextmenu: () => import('../contextmenu'),
+    D2ContextmenuList: () => import('../contextmenu/components/contentmenuList')
+  },
+  data () {
+    return {
+      contextmenuFlag: false,
+      contentmenuX: 0,
+      contentmenuY: 0,
+      contextmenuListIndex: [
+        { icon: 'times-circle', title: '关闭全部', value: 'all' }
+      ],
+      contextmenuList: [
+        { icon: 'arrow-left', title: '关闭左侧', value: 'left' },
+        { icon: 'arrow-right', title: '关闭右侧', value: 'right' },
+        { icon: 'times', title: '关闭其它', value: 'other' },
+        { icon: 'times-circle', title: '关闭全部', value: 'all' }
+      ],
+      tagName: 'index'
+    }
+  },
   computed: {
     ...mapState({
       pageOpenedList: state => state.d2admin.pageOpenedList,
@@ -63,19 +95,46 @@ export default {
       'd2adminTagCloseOther',
       'd2adminTagCloseAll'
     ]),
+    /**
+     * @description 右键菜单功能点击
+     */
+    handleContextmenu (event) {
+      let target = event.target
+      if (target.className.indexOf('el-tabs__item') > -1 || target.parentNode.className.indexOf('el-tabs__item') > -1) {
+        event.preventDefault()
+        event.stopPropagation()
+        this.contentmenuX = event.clientX
+        this.contentmenuY = event.clientY
+        this.tagName = target.getAttribute('aria-controls').slice(5)
+        this.contextmenuFlag = true
+      }
+    },
+    /**
+     * @description 右键菜单的row-click事件
+     */
+    contextmenuClick (command) {
+      this.handleControlItemClick(command, this.tagName)
+    },
     /**
      * @description 接收点击关闭控制上选项的事件
      */
-    handleControlItemClick (command) {
+    handleControlItemClick (command, tagName = null) {
+      if (tagName) {
+        this.contextmenuFlag = false
+      }
+      const params = {
+        pageSelect: tagName,
+        vm: this
+      }
       switch (command) {
         case 'left':
-          this.d2adminTagCloseLeft()
+          this.d2adminTagCloseLeft(params)
           break
         case 'right':
-          this.d2adminTagCloseRight()
+          this.d2adminTagCloseRight(params)
           break
         case 'other':
-          this.d2adminTagCloseOther()
+          this.d2adminTagCloseOther(params)
           break
         case 'all':
           this.d2adminTagCloseAll(this)

src/store/modules/d2admin.js.REMOVED.git-id

@@ -1 +1 @@
-2b2ad59e01ff445075c4b6d63e425cba12153aec
+f6b747b5dbf484da5c8b5876c9d54212c90c3550