feat: update 1.9.0

src/assets/style/theme/d2/setting.scss

@@ -5,6 +5,11 @@ $theme-bg-color: #ebf1f6;
 // 主题背景图片遮罩
 $theme-bg-mask: rgba(#000, 0);
 
+// 消息提示
+$theme-message-info-background-color: $color-bg;
+$theme-message-info-text-color: $color-text-normal;
+$theme-message-info-border-color: $color-border-1;
+
 // container组件
 $theme-container-background-color: rgba(#FFF, 1);
 $theme-container-header-footer-background-color: #FFF;

src/assets/style/theme/line/setting.scss

@@ -5,6 +5,11 @@ $theme-bg-color: #f8f8f9;
 // 主题背景图片遮罩
 $theme-bg-mask: rgba(#000, 0);
 
+// 消息提示
+$theme-message-info-background-color: $color-bg;
+$theme-message-info-text-color: $color-text-normal;
+$theme-message-info-border-color: $color-border-1;
+
 // container组件
 $theme-container-background-color: rgba(#FFF, .8);
 $theme-container-header-footer-background-color: #FFF;

src/assets/style/theme/star/setting.scss

@@ -5,6 +5,11 @@ $theme-bg-color: #EFF4F8;
 // 主题背景图片遮罩
 $theme-bg-mask: rgba(#000, .3);
 
+// 消息提示
+$theme-message-info-background-color: $color-bg;
+$theme-message-info-text-color: $color-text-normal;
+$theme-message-info-border-color: $color-border-1;
+
 // container组件
 $theme-container-background-color: rgba(#FFF, .9);
 $theme-container-header-footer-background-color: #FFF;

src/assets/style/theme/theme.scss

@@ -1,6 +1,14 @@
 // 每个主题特有的设置
 .theme-#{$theme-name} {
 
+  .el-message {
+    &.el-message--info {
+      background-color: $theme-message-info-background-color;
+      color: $theme-message-info-text-color;
+      border-color: $theme-message-info-border-color;
+    }
+  }
+
   .el-card {
     &.d2-card {
       border: $theme-container-border-outer;
@@ -255,9 +263,6 @@
                 &:hover {
                   padding: 0px 20px;
                 }
-                .el-icon-close {
-                  display: none;
-                }
               }
             }
             .el-tabs__item.is-active {

src/assets/style/theme/tomorrow-night-blue/setting.scss

@@ -5,6 +5,11 @@ $theme-bg-color: #002253;
 // 主题背景图片遮罩
 $theme-bg-mask: rgba(#000, 0);
 
+// 消息提示
+$theme-message-info-background-color: $color-bg;
+$theme-message-info-text-color: $color-text-normal;
+$theme-message-info-border-color: $color-border-1;
+
 // container组件
 $theme-container-background-color: rgba(#FFF, 1);
 $theme-container-header-footer-background-color: #FFF;

src/assets/style/theme/violet/setting.scss

@@ -5,6 +5,11 @@ $theme-bg-color: #000;
 // 主题背景图片遮罩
 $theme-bg-mask: rgba(#000, 0);
 
+// 消息提示
+$theme-message-info-background-color: $color-bg;
+$theme-message-info-text-color: $color-text-normal;
+$theme-message-info-border-color: $color-border-1;
+
 // container组件
 $theme-container-background-color: #FFF;
 $theme-container-header-footer-background-color: #FFF;

src/layout/header-aside/components/panel-search/index.vue

@@ -24,7 +24,7 @@
       </div>
     </div>
     <div v-if="resultsList.length > 0" class="panel-search__results-group" flex-box="1">
-      <el-card>
+      <el-card shadow="never">
         <div class="panel-search__results-group-inner">
           <d2-panel-search-item
             v-for="(item, index) in resultsList"
@@ -132,16 +132,15 @@ export default {
     /**
      * @description 接收用户在下拉菜单中选中事件
      */
-    handleSelect ({ path }) {
+    async handleSelect ({ path }) {
       // 如果用户选择的就是当前页面 就直接关闭搜索面板
       if (path === this.$route.path) {
         this.handleEsc()
         return
       }
       // 用户选择的是其它页面
-      this.$nextTick(() => {
+      await this.$nextTick()
       this.handleMenuSelect(path)
-      })
     },
     /**
      * @augments 关闭输入框的下拉菜单
@@ -161,11 +160,10 @@ export default {
     /**
      * @augments 接收用户触发的关闭
      */
-    handleEsc () {
+    async handleEsc () {
       this.closeSuggestion()
-      this.$nextTick(() => {
+      await this.$nextTick()
       this.$emit('close')
-      })
     }
   }
 }

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

@@ -2,23 +2,36 @@
   <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
-          <d2-contextmenu-list :menulist="tagName === '/index' ? contextmenuListIndex : contextmenuList" @rowClick="contextmenuClick"/>
+          :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 d2-multiple-page-sort"
           :value="current"
           type="card"
-          :closable="true"
           @tab-click="handleClick"
-          @edit="handleTabsEdit"
+          @tab-remove="handleTabRemove"
           @contextmenu.native="handleContextmenu">
-          <el-tab-pane v-for="page in opened" :key="page.fullPath" :label="page.meta.title || '未命名'" :name="page.fullPath"/>
+          <el-tab-pane
+            v-for="page in opened"
+            :key="page.fullPath"
+            :label="page.meta.title || '未命名'"
+            :name="page.fullPath"
+            :closable="isTabClosable(page)"/>
         </el-tabs>
       </div>
     </div>
     <div class="d2-multiple-page-control-btn" flex-box="0">
-      <el-dropdown size="default" split-button @click="closeAll" @command="command => handleControlItemClick(command)">
+      <el-dropdown
+        size="default"
+        split-button
+        @click="closeAll"
+        @command="command => handleControlItemClick(command)">
         <d2-icon name="times-circle"/>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item command="left">
@@ -46,6 +59,7 @@
 <script>
 import { mapState, mapActions } from 'vuex'
 import Sortable from 'sortablejs'
+
 export default {
   components: {
     D2Contextmenu: () => import('../contextmenu'),
@@ -83,12 +97,20 @@ export default {
       'closeAll',
       'openedSort'
     ]),
+    /**
+     * @description 计算某个标签页是否可关闭
+     * @param {Object} page 其中一个标签页
+     */
+    isTabClosable (page) {
+      return page.name !== 'index'
+    },
     /**
      * @description 右键菜单功能点击
+     * @param {Object} event 事件
      */
     handleContextmenu (event) {
       let target = event.target
-      // 解决 https://github.com/d2-projects/d2-admin/issues/54
+      // fix https://github.com/d2-projects/d2-admin/issues/54
       let flag = false
       if (target.className.indexOf('el-tabs__item') > -1) flag = true
       else if (target.parentNode.className.indexOf('el-tabs__item') > -1) {
@@ -105,59 +127,45 @@ export default {
       }
     },
     /**
-     * @description 右键菜单的row-click事件
+     * @description 右键菜单的 row-click 事件
+     * @param {String} command 事件类型
      */
     contextmenuClick (command) {
       this.handleControlItemClick(command, this.tagName)
     },
     /**
      * @description 接收点击关闭控制上选项的事件
+     * @param {String} command 事件类型
+     * @param {String} tagName tab 名称
      */
     handleControlItemClick (command, tagName = null) {
-      if (tagName) {
+      if (tagName) this.contextmenuFlag = false
-        this.contextmenuFlag = false
+      const params = { pageSelect: tagName }
-      }
-      const params = {
-        pageSelect: tagName
-      }
       switch (command) {
-        case 'left':
+        case 'left': this.closeLeft(params); break
-          this.closeLeft(params)
+        case 'right': this.closeRight(params); break
-          break
+        case 'other': this.closeOther(params); break
-        case 'right':
+        case 'all': this.closeAll(); break
-          this.closeRight(params)
+        default: this.$message.error('无效的操作'); break
-          break
-        case 'other':
-          this.closeOther(params)
-          break
-        case 'all':
-          this.closeAll()
-          break
-        default:
-          this.$message.error('无效的操作')
-          break
       }
     },
     /**
      * @description 接收点击 tab 标签的事件
+     * @param {object} tab 标签
+     * @param {object} event 事件
      */
     handleClick (tab, event) {
       // 找到点击的页面在 tag 列表里是哪个
       const page = this.opened.find(page => page.fullPath === tab.name)
       const { name, params, query } = page
-      if (page) {
+      if (page) this.$router.push({ name, params, query })
-        this.$router.push({ name, params, query })
-      }
     },
     /**
-     * @description 点击 tab 上的删除按钮触发这里 首页的删除按钮已经隐藏 因此这里不用判断是 index
+     * @description 点击 tab 上的删除按钮触发这里
+     * @param {String} tagName tab 名称
      */
-    handleTabsEdit (tagName, action) {
+    handleTabRemove (tagName) {
-      if (action === 'remove') {
+      this.close({ tagName })
-        this.close({
-          tagName
-        })
-      }
     }
   },
   mounted () {

src/store/modules/d2admin/modules/page.js

@@ -1,4 +1,4 @@
-import { get } from 'lodash'
+import { cloneDeep, uniq, get } from 'lodash'
 import router from '@/router'
 import setting from '@/setting.js'
 
@@ -11,7 +11,7 @@ export default {
     // 可以在多页 tab 模式下显示的页面
     pool: [],
     // 当前显示的多页面列表
-    opened: setting.page.opened,
+    opened: get(setting, 'page.opened', []),
     // 已经加载多标签页数据 https://github.com/d2-projects/d2-admin/issues/201
     openedLoaded: false,
     // 当前页面
@@ -28,9 +28,7 @@ export default {
       if (state.openedLoaded) return Promise.resolve()
       return new Promise(resolve => {
         const timer = setInterval(() => {
-          if (state.openedLoaded) {
+          if (state.openedLoaded) resolve(clearInterval(timer))
-            resolve(clearInterval(timer))
-          }
         }, 10)
       })
     },
@@ -39,8 +37,7 @@ export default {
      * @description 从持久化数据载入标签页列表
      * @param {Object} context
      */
-    openedLoad ({ state, commit, dispatch }) {
+    async openedLoad ({ state, commit, dispatch }) {
-      return new Promise(async resolve => {
       // store 赋值
       const value = await dispatch('d2admin/db/get', {
         dbName: 'sys',
@@ -54,7 +51,8 @@ export default {
       // valid 有效列表 1, 1, 0, 1 => 有效, 有效, 失效, 有效
       const valid = []
       // 处理数据
-        state.opened = value.map(opened => {
+      state.opened = value
+        .map(opened => {
           // 忽略首页
           if (opened.fullPath === '/index') {
             valid.push(1)
@@ -67,21 +65,18 @@ export default {
           // 返回合并后的数据 新的覆盖旧的
           // 新的数据中一般不会携带 params 和 query, 所以旧的参数会留存
           return Object.assign({}, opened, find)
-        }).filter((opened, index) => valid[index] === 1)
+        })
+        .filter((opened, index) => valid[index] === 1)
       // 标记已经加载多标签页数据 https://github.com/d2-projects/d2-admin/issues/201
       state.openedLoaded = true
       // 根据 opened 数据生成缓存设置
       commit('keepAliveRefresh')
-        // end
-        resolve()
-      })
     },
     /**
      * 将 opened 属性赋值并持久化 在这之前请先确保已经更新了 state.opened
      * @param {Object} context
      */
-    opened2db ({ state, dispatch }) {
+    async opened2db ({ state, dispatch }) {
-      return new Promise(async resolve => {
       // 设置数据
       dispatch('d2admin/db/set', {
         dbName: 'sys',
@@ -89,9 +84,6 @@ export default {
         value: state.opened,
         user: true
       }, { root: true })
-        // end
-        resolve()
-      })
     },
     /**
      * @class opened
@@ -99,8 +91,7 @@ export default {
      * @param {Object} context
      * @param {Object} payload { index, params, query, fullPath } 路由信息
      */
-    openedUpdate ({ state, commit, dispatch }, { index, params, query, fullPath }) {
+    async openedUpdate ({ state, commit, dispatch }, { index, params, query, fullPath }) {
-      return new Promise(async resolve => {
       // 更新页面列表某一项
       let page = state.opened[index]
       page.params = params || page.params
@@ -109,9 +100,6 @@ export default {
       state.opened.splice(index, 1, page)
       // 持久化
       await dispatch('opened2db')
-        // end
-        resolve()
-      })
     },
     /**
      * @class opened
@@ -119,17 +107,13 @@ export default {
      * @param {Object} context
      * @param {Object} payload { oldIndex, newIndex } 位置信息
      */
-    openedSort ({ state, commit, dispatch }, { oldIndex, newIndex }) {
+    async openedSort ({ state, commit, dispatch }, { oldIndex, newIndex }) {
-      return new Promise(async resolve => {
       // 重排页面列表某一项
       let page = state.opened[oldIndex]
       state.opened.splice(oldIndex, 1)
       state.opened.splice(newIndex, 0, page)
       // 持久化
       await dispatch('opened2db')
-        // end
-        resolve()
-      })
     },
     /**
      * @class opened
@@ -137,8 +121,7 @@ export default {
      * @param {Object} context
      * @param {Object} payload new tag info
      */
-    add ({ state, commit, dispatch }, { tag, params, query, fullPath }) {
+    async add ({ state, commit, dispatch }, { tag, params, query, fullPath }) {
-      return new Promise(async resolve => {
       // 设置新的 tag 在新打开一个以前没打开过的页面时使用
       let newTag = tag
       newTag.params = params || newTag.params
@@ -147,23 +130,17 @@ export default {
       // 添加进当前显示的页面数组
       state.opened.push(newTag)
       // 如果这个页面需要缓存 将其添加到缓存设置
-        if (isKeepAlive(newTag)) {
+      if (isKeepAlive(newTag)) commit('keepAlivePush', tag.name)
-          commit('keepAlivePush', tag.name)
-        }
       // 持久化
       await dispatch('opened2db')
-        // end
-        resolve()
-      })
     },
     /**
      * @class current
      * @description 打开一个新的页面
      * @param {Object} context
-     * @param {Object} payload 从路由钩子的 to 对象上获取 { name, params, query, fullPath } 路由信息
+     * @param {Object} payload 从路由钩子的 to 对象上获取 { name, params, query, fullPath, meta } 路由信息
      */
-    open ({ state, commit, dispatch }, { name, params, query, fullPath }) {
+    async open ({ state, commit, dispatch }, { name, params, query, fullPath, meta }) {
-      return new Promise(async resolve => {
       // 已经打开的页面
       let opened = state.opened
       // 判断此页面是否已经打开 并且记录位置
@@ -194,10 +171,10 @@ export default {
           })
         }
       }
+      // 如果这个页面需要缓存 将其添加到缓存设置
+      if (isKeepAlive({ meta })) commit('keepAlivePush', name)
+      // 设置当前的页面
       commit('currentSet', fullPath)
-        // end
-        resolve()
-      })
     },
     /**
      * @class opened
@@ -205,8 +182,7 @@ export default {
      * @param {Object} context
      * @param {Object} payload { tagName: 要关闭的标签名字 }
      */
-    close ({ state, commit, dispatch }, { tagName }) {
+    async close ({ state, commit, dispatch }, { tagName }) {
-      return new Promise(async resolve => {
       // 下个新的页面
       let newPage = state.opened[0]
       const isCurrent = state.current === tagName
@@ -216,11 +192,8 @@ export default {
         let len = state.opened.length
         for (let i = 1; i < len; i++) {
           if (state.opened[i].fullPath === tagName) {
-              if (i < len - 1) {
+            if (i < len - 1) newPage = state.opened[i + 1]
-                newPage = state.opened[i + 1]
+            else newPage = state.opened[i - 1] 
-              } else {
-                newPage = state.opened[i - 1]
-              }
             break
           }
         }
@@ -245,9 +218,6 @@ export default {
         }
         router.push(routerObj)
       }
-        // end
-        resolve()
-      })
     },
     /**
      * @class opened
@@ -255,28 +225,20 @@ export default {
      * @param {Object} context
      * @param {Object} payload { pageSelect: 当前选中的tagName }
      */
-    closeLeft ({ state, commit, dispatch }, { pageSelect } = {}) {
+    async closeLeft ({ state, commit, dispatch }, { pageSelect } = {}) {
-      return new Promise(async resolve => {
       const pageAim = pageSelect || state.current
       let currentIndex = 0
       state.opened.forEach((page, index) => {
-          if (page.fullPath === pageAim) {
+        if (page.fullPath === pageAim) currentIndex = index
-            currentIndex = index
-          }
       })
       if (currentIndex > 0) {
         // 删除打开的页面 并在缓存设置中删除
         state.opened.splice(1, currentIndex - 1).forEach(({ name }) => commit('keepAliveRemove', name))
       }
       state.current = pageAim
-        if (router.app.$route.fullPath !== pageAim) {
+      if (router.app.$route.fullPath !== pageAim) router.push(pageAim)
-          router.push(pageAim)
-        }
       // 持久化
       await dispatch('opened2db')
-        // end
-        resolve()
-      })
     },
     /**
      * @class opened
@@ -284,27 +246,19 @@ export default {
      * @param {Object} context
      * @param {Object} payload { pageSelect: 当前选中的tagName }
      */
-    closeRight ({ state, commit, dispatch }, { pageSelect } = {}) {
+    async closeRight ({ state, commit, dispatch }, { pageSelect } = {}) {
-      return new Promise(async resolve => {
       const pageAim = pageSelect || state.current
       let currentIndex = 0
       state.opened.forEach((page, index) => {
-          if (page.fullPath === pageAim) {
+        if (page.fullPath === pageAim) currentIndex = index
-            currentIndex = index
-          }
       })
       // 删除打开的页面 并在缓存设置中删除
       state.opened.splice(currentIndex + 1).forEach(({ name }) => commit('keepAliveRemove', name))
       // 设置当前的页面
       state.current = pageAim
-        if (router.app.$route.fullPath !== pageAim) {
+      if (router.app.$route.fullPath !== pageAim) router.push(pageAim)
-          router.push(pageAim)
-        }
       // 持久化
       await dispatch('opened2db')
-        // end
-        resolve()
-      })
     },
     /**
      * @class opened
@@ -312,14 +266,11 @@ export default {
      * @param {Object} context
      * @param {Object} payload { pageSelect: 当前选中的tagName }
      */
-    closeOther ({ state, commit, dispatch }, { pageSelect } = {}) {
+    async closeOther ({ state, commit, dispatch }, { pageSelect } = {}) {
-      return new Promise(async resolve => {
       const pageAim = pageSelect || state.current
       let currentIndex = 0
       state.opened.forEach((page, index) => {
-          if (page.fullPath === pageAim) {
+        if (page.fullPath === pageAim) currentIndex = index
-            currentIndex = index
-          }
       })
       // 删除打开的页面数据 并更新缓存设置
       if (currentIndex === 0) {
@@ -330,35 +281,24 @@ export default {
       }
       // 设置新的页面
       state.current = pageAim
-        if (router.app.$route.fullPath !== pageAim) {
+      if (router.app.$route.fullPath !== pageAim) router.push(pageAim)
-          router.push(pageAim)
-        }
       // 持久化
       await dispatch('opened2db')
-        // end
-        resolve()
-      })
     },
     /**
      * @class opened
      * @description 关闭所有 tag
      * @param {Object} context
      */
-    closeAll ({ state, commit, dispatch }) {
+    async closeAll ({ state, commit, dispatch }) {
-      return new Promise(async resolve => {
       // 删除打开的页面 并在缓存设置中删除
       state.opened.splice(1).forEach(({ name }) => commit('keepAliveRemove', name))
       // 持久化
       await dispatch('opened2db')
       // 关闭所有的标签页后需要判断一次现在是不是在首页
       if (router.app.$route.name !== 'index') {
-          router.push({
+        router.push({ name: 'index' })
-            name: 'index'
-          })
       }
-        // end
-        resolve()
-      })
     }
   },
   mutations: {
@@ -376,9 +316,8 @@ export default {
      * @param {String} name name
      */
     keepAliveRemove (state, name) {
-      const list = [ ...state.keepAlive ]
+      const list = cloneDeep(state.keepAlive)
       const index = list.findIndex(item => item === name)
-
       if (index !== -1) {
         list.splice(index, 1)
         state.keepAlive = list
@@ -390,9 +329,9 @@ export default {
      * @param {String} name name
      */
     keepAlivePush (state, name) {
-      const keep = [ ...state.keepAlive ]
+      const keep = cloneDeep(state.keepAlive)
       keep.push(name)
-      state.keepAlive = keep
+      state.keepAlive = uniq(keep)
     },
     /**
      * @description 清空页面缓存设置