upgrade d2admin version to 1.8.4

package.json

@@ -1,6 +1,6 @@
 {
   "name": "d2-admin-start-kit-plus",
-  "version": "1.8.0",
+  "version": "1.8.4",
   "license": "MIT",
   "repository": "[email protected]:hank_cp/lolth-client.git",
   "scripts": {
@@ -15,72 +15,72 @@
   "dependencies": {
     "axios": "^0.19.2",
     "better-scroll": "^1.15.2",
-    "core-js": "^3.6.4",
-    "dayjs": "^1.8.21",
-    "element-ui": "^2.13.0",
+    "core-js": "^3.6.5",
+    "dayjs": "^1.8.24",
+    "element-ui": "^2.13.1",
     "flex.css": "^1.1.7",
-    "fuse.js": "^3.4.6",
-    "hotkeys-js": "^3.7.3",
+    "fuse.js": "^5.2.1",
+    "hotkeys-js": "^3.7.6",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.15",
     "lowdb": "^1.0.0",
     "mockjs": "^1.1.0",
     "moment": "^2.24.0",
     "nprogress": "^0.2.0",
-    "qs": "^6.9.1",
+    "qs": "^6.9.3",
     "reflect-metadata": "^0.1.13",
     "screenfull": "^5.0.2",
     "sortablejs": "^1.10.2",
     "ua-parser-js": "^0.7.21",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
-    "vue-i18n": "^8.15.4",
-    "vue-property-decorator": "^8.4.0",
+    "vue-i18n": "^8.17.3",
+    "vue-property-decorator": "^8.4.1",
     "vue-router": "^3.1.6",
-    "vuex": "^3.1.2"
+    "vuex": "^3.2.0"
   },
   "devDependencies": {
-    "@cypress/webpack-preprocessor": "^4.1.2",
-    "@d2-projects/vue-filename-injector": "^1.1.0",
+    "@cypress/webpack-preprocessor": "^5.1.2",
+    "@d2-projects/vue-filename-injector": "^1.1.1",
     "@kazupon/vue-i18n-loader": "^0.5.0",
     "@types/core-js": "^2.5.3",
-    "@types/jest": "^25.1.3",
-    "@types/lodash": "^4.14.149",
+    "@types/jest": "^25.2.1",
+    "@types/lodash": "^4.14.150",
     "@types/qs": "^6.9.1",
-    "@typescript-eslint/eslint-plugin": "^2.21.0",
-    "@typescript-eslint/parser": "^2.21.0",
-    "@vue/cli-plugin-babel": "^4.2.2",
-    "@vue/cli-plugin-e2e-cypress": "^4.2.2",
-    "@vue/cli-plugin-eslint": "^4.2.2",
-    "@vue/cli-plugin-router": "^4.2.2",
-    "@vue/cli-plugin-typescript": "^4.2.2",
-    "@vue/cli-plugin-unit-jest": "^4.2.2",
-    "@vue/cli-plugin-vuex": "^4.2.2",
-    "@vue/cli-service": "^4.2.2",
+    "@typescript-eslint/eslint-plugin": "^2.28.0",
+    "@typescript-eslint/parser": "^2.28.0",
+    "@vue/cli-plugin-babel": "^4.3.1",
+    "@vue/cli-plugin-e2e-cypress": "^4.3.1",
+    "@vue/cli-plugin-eslint": "^4.3.1",
+    "@vue/cli-plugin-router": "^4.3.1",
+    "@vue/cli-plugin-typescript": "^4.3.1",
+    "@vue/cli-plugin-unit-jest": "^4.3.1",
+    "@vue/cli-plugin-vuex": "^4.3.1",
+    "@vue/cli-service": "^4.3.1",
     "@vue/eslint-config-standard": "^5.1.2",
     "@vue/eslint-config-typescript": "^5.0.2",
-    "@vue/test-utils": "1.0.0-beta.31",
+    "@vue/test-utils": "1.0.0-beta.33",
     "@web-types/vue": "^2.5.0-3",
     "babel-eslint": "^10.1.0",
     "compression-webpack-plugin": "^3.1.0",
-    "cypress-vue-unit-test": "^1.11.6",
+    "cypress-vue-unit-test": "^1.11.7",
     "eslint": "^6.8.0",
-    "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-node": "^11.0.0",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
-    "eslint-plugin-vue": "^6.2.1",
-    "lint-staged": "^10.0.8",
-    "sass": "^1.26.1",
+    "eslint-plugin-vue": "^6.2.2",
+    "lint-staged": "^10.1.6",
+    "sass": "^1.26.3",
     "sass-loader": "^8.0.2",
-    "svg-sprite-loader": "^4.2.1",
+    "svg-sprite-loader": "^4.2.5",
     "text-loader": "^0.0.1",
-    "typescript": "~3.8.2",
+    "typescript": "~3.8.3",
     "vue-cli-plugin-i18n": "^0.6.1",
     "vue-template-compiler": "^2.6.11",
-    "webpack": "^4.41.6",
-    "webpack-bundle-analyzer": "^3.6.0",
-    "webpack-theme-color-replacer": "^1.3.4"
+    "webpack": "^4.42.1",
+    "webpack-bundle-analyzer": "^3.7.0",
+    "webpack-theme-color-replacer": "^1.3.8"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"

src/d2admin/delegate/axios.ts

@@ -3,7 +3,7 @@ import util from '@/d2admin/libs/util'
 import { Message } from 'element-ui'
 import { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'
 import { delegate } from '@/d2admin/delegate/index'
-import AxiosDelegate = delegate.AxiosDelegate;
+import AxiosDelegate = delegate.AxiosDelegate
 
 // 创建一个错误
 export function errorCreate(msg: string) {

src/d2admin/delegate/menu.ts

@@ -1,7 +1,8 @@
 import { Store } from 'vuex'
 import { delegate } from '@/d2admin/delegate/index'
-import MenuDelegate = delegate.MenuDelegate;
-import MenuItem = delegate.MenuItem;
+import { supplementPath } from '@/d2admin/layout/header-aside/components/libs/util.menu'
+import MenuDelegate = delegate.MenuDelegate
+import MenuItem = delegate.MenuItem
 
 /**
  * @description 获取菜单代理
@@ -12,8 +13,8 @@ export class MenuDelegateDefault implements MenuDelegate {
    */
   loadMenu(store: Store<any>): Promise<void> {
     return new Promise((resolve) => {
-      const menuHeader: MenuItem = require('../../d2admin/menu/header').default
-      const menuAside: MenuItem = require('../../d2admin/menu/aside').default
+      const menuHeader: MenuItem = supplementPath(require('../../d2admin/menu/header').default)
+      const menuAside: MenuItem = supplementPath(require('../../d2admin/menu/aside').default)
       // 设置顶栏菜单
       store.commit('d2admin/menu/headerSet', menuHeader, { root: true })
       // 设置侧边栏菜单

src/d2admin/layout/header-aside/components/libs/util.menu.js

@@ -1,6 +1,8 @@
+import { uniqueId } from 'lodash'
+
 // 创建 el-menu-item
 export function elMenuItem(createElement, menu) {
-  return createElement('el-menu-item', { props: { index: menu.path } }, [
+  return createElement('el-menu-item', { key: menu.path, props: { index: menu.path } }, [
     ...menu.icon ? [
       createElement('i', { attrs: { class: `fa fa-${menu.icon}` } })
     ] : [],
@@ -16,7 +18,7 @@ export function elMenuItem(createElement, menu) {
 
 // 创建 el-submenu
 export function elSubmenu(createElement, menu) {
-  return createElement('el-submenu', { props: { index: menu.path } }, [
+  return createElement('el-submenu', { key: menu.path, props: { index: menu.path } }, [
     ...menu.icon ? [
       createElement('i', { slot: 'title', attrs: { class: `fa fa-${menu.icon}` } })
     ] : [],
@@ -30,3 +32,13 @@ export function elSubmenu(createElement, menu) {
     ...menu.children.map((child, childIndex) => (child.children === undefined ? elMenuItem : elSubmenu).call(this, createElement, child))
   ])
 }
+
+export function supplementPath(menu) {
+  return menu.map(e => ({
+    ...e,
+    path: e.path || uniqueId('d2-menu-empty-'),
+    ...e.children ? {
+      children: supplementPath(e.children)
+    } : {}
+  }))
+}

src/d2admin/layout/header-aside/components/menu-side/index.js

@@ -11,7 +11,7 @@ export default {
   render(createElement) {
     return createElement('div', { attrs: { class: 'd2-layout-header-aside-menu-side' } }, [
       createElement('el-menu', {
-        props: { collapse: this.asideCollapse, uniqueOpened: true, defaultActive: this.active },
+        props: { collapse: this.asideCollapse, uniqueOpened: true, defaultActive: this.$route.fullPath },
         ref: 'menu',
         on: { select: this.handleMenuSelect }
       }, this.aside.map(menu => (menu.children === undefined ? elMenuItem : elSubmenu).call(this, createElement, menu))),
@@ -25,7 +25,6 @@ export default {
   },
   data() {
     return {
-      active: '',
       asideHeight: 300,
       BS: null
     }
@@ -43,13 +42,6 @@ export default {
       setTimeout(() => {
         this.scrollInit()
       }, 500)
-    },
-    // 监听路由 控制侧边栏激活状态
-    '$route.fullPath': {
-      handler(value) {
-        this.active = value
-      },
-      immediate: true
     }
   },
   mounted() {

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

@@ -1,15 +1,7 @@
 <template>
-  <div
-    class="panel-search"
-    flex="dir:top">
-    <div
-      class="panel-search__input-group"
-      flex-box="0"
-      flex="dir:top main:center cross:center"
-      @click.self="handlePanelClick">
-      <d2-icon-svg
-        class="panel-search__logo"
-        name="d2-admin-text"/>
+  <div class="panel-search" flex="dir:top">
+    <div class="panel-search__input-group" flex-box="0" flex="dir:top main:center cross:center" @click.self="handlePanelClick">
+      <d2-icon-svg class="panel-search__logo" name="d2-admin-text"/>
       <el-autocomplete
         class="panel-search__input"
         ref="input"
@@ -21,9 +13,7 @@
         :clearable="true"
         @keydown.esc.native="handleEsc"
         @select="handleSelect">
-        <d2-panel-search-item
-          slot-scope="{ item }"
-          :item="item"/>
+        <d2-panel-search-item slot-scope="{ item }" :item="item"/>
       </el-autocomplete>
       <div class="panel-search__tip">
         您可以使用快捷键
@@ -33,10 +23,7 @@
         关闭
       </div>
     </div>
-    <div
-      v-if="resultsList.length > 0"
-      class="panel-search__results-group"
-      flex-box="1">
+    <div v-if="resultsList.length > 0" class="panel-search__results-group" flex-box="1">
       <el-card>
         <div class="panel-search__results-group-inner">
           <d2-panel-search-item

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

@@ -2,13 +2,8 @@
   <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 :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"
@@ -18,22 +13,12 @@
           @tab-click="handleClick"
           @edit="handleTabsEdit"
           @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"/>
         </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)">
+    <div class="d2-multiple-page-control-btn" flex-box="0">
+      <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">

vue.config.js

@@ -5,6 +5,7 @@ const forElementUI = require('webpack-theme-color-replacer/forElementUI')
 const cdnDependencies = require('./dependencies-cdn')
 const proxyConfig = require('./proxy.config')
 const ModuleDependencyWarning = require('webpack/lib/ModuleDependencyWarning')
+const { chain, set, each, keys } = require('lodash')
 
 class IgnoreNotFoundExportPlugin {
   apply(compiler) {
@@ -39,20 +40,28 @@ let publicPath = process.env.VUE_APP_PUBLIC_PATH || '/'
 
 // 设置不参与构建的库
 let externals = {}
-cdnDependencies.forEach(p => { externals[p.name] = p.library })
+cdnDependencies.forEach(pkg => { externals[pkg.name] = pkg.library })
 
 // 引入文件的 cdn 链接
 const cdn = {
   css: cdnDependencies.map(e => e.css).filter(e => e),
   js: cdnDependencies.map(e => e.js).filter(e => e)
 }
 
+// 多页配置，默认未开启，如需要请参考 https://cli.vuejs.org/zh/config/#pages
+const pages = undefined
+// const pages = {
+//   index: './src/main.js',
+//   subpage: './src/subpage.js'
+// }
+
 module.exports = {
   // 根据你的实际情况更改这里
   publicPath,
   lintOnSave: true,
   devServer: {
     publicPath, // 和 publicPath 保持一致
+    disableHostCheck: process.env.NODE_ENV === 'development', // 关闭 host check，方便使用 ngrok 之类的内网转发工具
     proxy: proxyConfig
   },
   css: {
@@ -63,6 +72,7 @@ module.exports = {
       }
     }
   },
+  pages,
   configureWebpack: config => {
     const configNew = {}
     if (process.env.NODE_ENV === 'production') {
@@ -78,26 +88,21 @@ module.exports = {
         })
       ]
     }
-    if (process.env.NODE_ENV === 'development') {
-      // 关闭 host check，方便使用 ngrok 之类的内网转发工具
-      configNew.devServer = {
-        disableHostCheck: true
-      }
-    }
     return configNew
   },
   // 默认设置: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-service/lib/config/base.js
   chainWebpack: config => {
     /**
      * 添加 CDN 参数到 htmlWebpackPlugin 配置中
+     * 已适配多页
      */
-    config.plugin('html').tap(args => {
-      if (process.env.NODE_ENV === 'production') {
-        args[0].cdn = cdn
-      } else {
-        args[0].cdn = []
-      }
-      return args
+    const htmlPluginNames = chain(pages).keys().map(page => 'html-' + page).value()
+    const targetHtmlPluginNames = htmlPluginNames.length ? htmlPluginNames : ['html']
+    each(targetHtmlPluginNames, name => {
+      config.plugin(name).tap(options => {
+        set(options, '[0].cdn', process.env.NODE_ENV === 'production' ? cdn : [])
+        return options
+      })
     })
     /**
      * 删除懒加载模块的 prefetch preload，降低带宽压力
@@ -169,11 +174,12 @@ module.exports = {
       .before('friendly-errors')
       .use(IgnoreNotFoundExportPlugin)
     // 判断环境加入模拟数据
-    const entry = config.entry('app')
-    if (process.env.MOCK) {
-      entry
-        .add('@/d2admin/mock')
-        .end()
+    if (process.env.MOCK === 'true') {
+      const multiEntry = keys(pages || {})
+      const entries = multiEntry.length ? multiEntry : ['app']
+      each(entries, entry => {
+        const e = config.entry(entry).add('@/d2admin/mock').end()
+      })
     }
     // 分析工具
     if (process.env.npm_config_report) {