Merge branch 'master' into pr/gaoshijun1993/1605

2019-02-28 15:29:51 +08:00 · 2019-02-28 15:29:51 +08:00 · 743ceb404f
parent a8f3a866de c2495545a5
commit 743ceb404f
14 changed files with 144 additions and 91 deletions
--- a/src/components/ThemePicker/index.vue
+++ b/src/components/ThemePicker/index.vue
@ -67,11 +67,18 @@ export default {

  methods: {
    updateStyle(style, oldCluster, newCluster) {
-      let newStyle = style
+      const colorOverrides = [] // only capture color overides
      oldCluster.forEach((color, index) => {
-        newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
+        const value = newCluster[index]
+        const color_plain = color.replace(/([()])/g, '\\$1')
+        const repl = new RegExp(`(^|})([^{]+{[^{}]+)${color_plain}\\b([^}]*)(?=})`, 'gi')
+        const nestRepl = new RegExp(color_plain, 'ig') // for greed matching before the 'color'
+        let v
+        while ((v = repl.exec(style))) {
+          colorOverrides.push(v[2].replace(nestRepl, value) + value + v[3] + '}') // '}' not captured in the regexp repl to reserve it as locator-boundary
+        }
      })
-      return newStyle
+      return colorOverrides.join('')
    },

    getCSSString(url, callback, variable) {
--- a/src/store/modules/tagsView.js
+++ b/src/store/modules/tagsView.js
@ -38,12 +38,9 @@ const tagsView = {
    },

    DEL_OTHERS_VISITED_VIEWS: (state, view) => {
-      for (const [i, v] of state.visitedViews.entries()) {
-        if (v.path === view.path) {
-          state.visitedViews = state.visitedViews.slice(i, i + 1)
-          break
-        }
-      }
+      state.visitedViews = state.visitedViews.filter(v => {
+        return v.meta.affix || v.path === view.path
+      })
    },
    DEL_OTHERS_CACHED_VIEWS: (state, view) => {
      for (const i of state.cachedViews) {
@ -56,7 +53,9 @@ const tagsView = {
    },

    DEL_ALL_VISITED_VIEWS: state => {
-      state.visitedViews = []
+      // keep affix tags
+      const affixTags = state.visitedViews.filter(tag => tag.meta.affix)
+      state.visitedViews = affixTags
    },
    DEL_ALL_CACHED_VIEWS: state => {
      state.cachedViews = []
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@ -170,8 +170,27 @@
  .nest-menu .el-submenu>.el-submenu__title,
  .el-menu-item {
    &:hover {
-      // You can use $subMenuHover
+      // you can use $subMenuHover
      background-color: $menuHover !important;
    }
  }
+
+  // the scroll bar appears when the subMenu is too long
+  >.el-menu--popup {
+    max-height: 100vh;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar-track-piece {
+      background: #d3dce6;
+    }
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #99a9bf;
+      border-radius: 20px;
+    }
+  }
 }
--- a/src/utils/createUniqueString.js
+++ b/src/utils/createUniqueString.js
@ -1,8 +0,0 @@
-/**
- * Created by jiachenpan on 17/3/8.
- */
-export default function createUniqueString() {
-  const timestamp = +new Date() + ''
-  const randomNum = parseInt((1 + Math.random()) * 65536) + ''
-  return (+(randomNum + timestamp)).toString(32)
-}
--- a/src/utils/index.js
+++ b/src/utils/index.js
@ -239,7 +239,7 @@ export function debounce(func, wait, immediate) {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp

-    // 上次被包装函数被调用时间间隔last小于设定时间间隔wait
+    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last)
    } else {
@ -291,6 +291,8 @@ export function uniqueArr(arr) {
  return Array.from(new Set(arr))
 }

-export function isExternal(path) {
-  return /^(https?:|mailto:|tel:)/.test(path)
+export function createUniqueString() {
+  const timestamp = +new Date() + ''
+  const randomNum = parseInt((1 + Math.random()) * 65536) + ''
+  return (+(randomNum + timestamp)).toString(32)
 }
--- a/src/utils/validate.js
+++ b/src/utils/validate.js
@ -2,31 +2,35 @@
 * Created by jiachenpan on 16/11/18.
 */

-export function isvalidUsername(str) {
+export function isExternal(path) {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}
+
+export function validUsername(str) {
  const valid_map = ['admin', 'editor']
  return valid_map.indexOf(str.trim()) >= 0
 }

 /* 合法uri*/
-export function validateURL(textval) {
-  const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
-  return urlregex.test(textval)
+export function validURL(url) {
+  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
+  return reg.test(url)
 }

 /* 小写字母*/
-export function validateLowerCase(str) {
+export function validLowerCase(str) {
  const reg = /^[a-z]+$/
  return reg.test(str)
 }

 /* 大写字母*/
-export function validateUpperCase(str) {
+export function validUpperCase(str) {
  const reg = /^[A-Z]+$/
  return reg.test(str)
 }

 /* 大小写字母*/
-export function validateAlphabets(str) {
+export function validAlphabets(str) {
  const reg = /^[A-Za-z]+$/
  return reg.test(str)
 }
@ -36,7 +40,7 @@ export function validateAlphabets(str) {
 * @param email
 * @returns {boolean}
 */
-export function validateEmail(email) {
+export function validEmail(email) {
  const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  return re.test(email)
 }
--- a/src/views/example/components/ArticleDetail.vue
+++ b/src/views/example/components/ArticleDetail.vue
@ -78,7 +78,7 @@ import Tinymce from '@/components/Tinymce'
 import Upload from '@/components/Upload/singleImage3'
 import MDinput from '@/components/MDinput'
 import Sticky from '@/components/Sticky' // 粘性header组件
-import { validateURL } from '@/utils/validate'
+import { validURL } from '@/utils/validate'
 import { fetchArticle } from '@/api/article'
 import { userSearch } from '@/api/remoteSearch'
 import Warning from './Warning'
@ -121,7 +121,7 @@ export default {
    }
    const validateSourceUri = (rule, value, callback) => {
      if (value) {
-        if (validateURL(value)) {
+        if (validURL(value)) {
          callback()
        } else {
          this.$message({
--- a/src/views/layout/components/Sidebar/FixiOSBug.js
+++ b/src/views/layout/components/Sidebar/FixiOSBug.js
@ -5,16 +5,16 @@ export default {
    }
  },
  mounted() {
-    // In order to fix the click on menu on the ios device will trigger the mouseeleave bug
+    // In order to fix the click on menu on the ios device will trigger the mouseleave bug
    // https://github.com/PanJiaChen/vue-element-admin/issues/1135
    this.fixBugIniOS()
  },
  methods: {
    fixBugIniOS() {
-      const $submenu = this.$refs.submenu
-      if ($submenu) {
-        const handleMouseleave = $submenu.handleMouseleave
-        $submenu.handleMouseleave = (e) => {
+      const $subMenu = this.$refs.subMenu
+      if ($subMenu) {
+        const handleMouseleave = $subMenu.handleMouseleave
+        $subMenu.handleMouseleave = (e) => {
          if (this.device === 'mobile') {
            return
          }
--- a/src/views/layout/components/Sidebar/Link.vue
+++ b/src/views/layout/components/Sidebar/Link.vue
@ -7,7 +7,7 @@
 </template>

 <script>
-import { isExternal } from '@/utils'
+import { isExternal } from '@/utils/validate'

 export default {
  props: {
--- a/src/views/layout/components/Sidebar/SidebarItem.vue
+++ b/src/views/layout/components/Sidebar/SidebarItem.vue
@ -1,36 +1,25 @@
 <template>
-  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+  <div v-if="!item.hidden" class="menu-wrapper">

    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
      <app-link :to="resolvePath(onlyOneChild.path)">
        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="generateTitle(onlyOneChild.meta.title)" />
+          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="generateTitle(onlyOneChild.meta.title)" />
        </el-menu-item>
      </app-link>
    </template>

-    <el-submenu v-else ref="submenu" :index="resolvePath(item.path)">
+    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)">
      <template slot="title">
-        <item v-if="item.meta" :icon="item.meta.icon" :title="generateTitle(item.meta.title)" />
-      </template>
-
-      <template v-for="child in item.children">
-        <template v-if="!child.hidden">
-          <sidebar-item
-            v-if="child.children&&child.children.length>0"
-            :is-nest="true"
-            :item="child"
-            :key="child.path"
-            :base-path="resolvePath(child.path)"
-            class="nest-menu" />
-
-          <app-link v-else :to="resolvePath(child.path)" :key="child.name">
-            <el-menu-item :index="resolvePath(child.path)">
-              <item v-if="child.meta" :icon="child.meta.icon" :title="generateTitle(child.meta.title)" />
-            </el-menu-item>
-          </app-link>
-        </template>
+        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="generateTitle(item.meta.title)" />
      </template>
+      <sidebar-item
+        v-for="child in item.children"
+        :is-nest="true"
+        :item="child"
+        :key="child.path"
+        :base-path="resolvePath(child.path)"
+        class="nest-menu" />
    </el-submenu>

  </div>
@ -39,7 +28,7 @@
 <script>
 import path from 'path'
 import { generateTitle } from '@/utils/i18n'
-import { isExternal } from '@/utils'
+import { isExternal } from '@/utils/validate'
 import Item from './Item'
 import AppLink from './Link'
 import FixiOSBug from './FixiOSBug'
@ -64,12 +53,13 @@ export default {
    }
  },
  data() {
-    return {
-      onlyOneChild: null
-    }
+    // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
+    // TODO: refactor with render function
+    this.onlyOneChild = null
+    return {}
  },
  methods: {
-    hasOneShowingChild(children, parent) {
+    hasOneShowingChild(children = [], parent) {
      const showingChildren = children.filter(item => {
        if (item.hidden) {
          return false
@ -94,14 +84,12 @@ export default {
      return false
    },
    resolvePath(routePath) {
-      if (this.isExternalLink(routePath)) {
+      if (isExternal(routePath)) {
        return routePath
      }
      return path.resolve(this.basePath, routePath)
    },
-    isExternalLink(routePath) {
-      return isExternal(routePath)
-    },
+
    generateTitle
  }
 }
--- a/src/views/layout/components/Sidebar/index.vue
+++ b/src/views/layout/components/Sidebar/index.vue
@ -1,7 +1,6 @@
 <template>
  <el-scrollbar wrap-class="scrollbar-wrapper">
    <el-menu
-      :show-timeout="200"
      :default-active="$route.path"
      :collapse="isCollapse"
      :background-color="variables.menuBg"
--- a/src/views/layout/components/TagsView.vue
+++ b/src/views/layout/components/TagsView.vue
@ -12,14 +12,15 @@
        @click.middle.native="closeSelectedTag(tag)"
        @contextmenu.prevent.native="openMenu(tag,$event)">
        {{ generateTitle(tag.title) }}
-        <span class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
      </router-link>
    </scroll-pane>
    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
      <li @click="refreshSelectedTag(selectedTag)">{{ $t('tagsView.refresh') }}</li>
-      <li @click="closeSelectedTag(selectedTag)">{{ $t('tagsView.close') }}</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">{{
+      $t('tagsView.close') }}</li>
      <li @click="closeOthersTags">{{ $t('tagsView.closeOthers') }}</li>
-      <li @click="closeAllTags">{{ $t('tagsView.closeAll') }}</li>
+      <li @click="closeAllTags(selectedTag)">{{ $t('tagsView.closeAll') }}</li>
    </ul>
  </div>
 </template>
@ -27,6 +28,7 @@
 <script>
 import ScrollPane from '@/components/ScrollPane'
 import { generateTitle } from '@/utils/i18n'
+import path from 'path'

 export default {
  components: { ScrollPane },
@ -35,17 +37,21 @@ export default {
      visible: false,
      top: 0,
      left: 0,
-      selectedTag: {}
+      selectedTag: {},
+      affixTags: []
    }
  },
  computed: {
    visitedViews() {
      return this.$store.state.tagsView.visitedViews
+    },
+    routers() {
+      return this.$store.state.permission.routers
    }
  },
  watch: {
    $route() {
-      this.addViewTags()
+      this.addTags()
      this.moveToCurrentTag()
    },
    visible(value) {
@ -57,14 +63,44 @@ export default {
    }
  },
  mounted() {
-    this.addViewTags()
+    this.initTags()
+    this.addTags()
  },
  methods: {
    generateTitle, // generateTitle by vue-i18n
    isActive(route) {
      return route.path === this.$route.path
    },
-    addViewTags() {
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          tags.push({
+            path: path.resolve(basePath, route.path),
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routers)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
      const { name } = this.$route
      if (name) {
        this.$store.dispatch('addView', this.$route)
@ -101,12 +137,7 @@ export default {
    closeSelectedTag(view) {
      this.$store.dispatch('delView', view).then(({ visitedViews }) => {
        if (this.isActive(view)) {
-          const latestView = visitedViews.slice(-1)[0]
-          if (latestView) {
-            this.$router.push(latestView)
-          } else {
-            this.$router.push('/')
-          }
+          this.toLastView(visitedViews)
        }
      })
    },
@ -116,9 +147,22 @@ export default {
        this.moveToCurrentTag()
      })
    },
-    closeAllTags() {
-      this.$store.dispatch('delAllViews')
-      this.$router.push('/')
+    closeAllTags(view) {
+      this.$store.dispatch('delAllViews').then(({ visitedViews }) => {
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews)
+      })
+    },
+    toLastView(visitedViews) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // You can set another route
+        this.$router.push('/')
+      }
    },
    openMenu(tag, e) {
      const menuMinWidth = 105
--- a/src/views/layout/mixin/ResizeHandler.js
+++ b/src/views/layout/mixin/ResizeHandler.js
@ -1,8 +1,7 @@
 import store from '@/store'

 const { body } = document
-const WIDTH = 1024
-const RATIO = 3
+const WIDTH = 992 // refer to Bootstrap's responsive design

 export default {
  watch: {
@ -25,7 +24,7 @@ export default {
  methods: {
    isMobile() {
      const rect = body.getBoundingClientRect()
-      return rect.width - RATIO < WIDTH
+      return rect.width - 1 < WIDTH
    },
    resizeHandler() {
      if (!document.hidden) {
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@ -71,7 +71,7 @@
 </template>

 <script>
-import { isvalidUsername } from '@/utils/validate'
+import { validUsername } from '@/utils/validate'
 import LangSelect from '@/components/LangSelect'
 import SocialSign from './socialsignin'

@ -80,7 +80,7 @@ export default {
  components: { LangSelect, SocialSign },
  data() {
    const validateUsername = (rule, value, callback) => {
-      if (!isvalidUsername(value)) {
+      if (!validUsername(value)) {
        callback(new Error('Please enter the correct user name'))
      } else {
        callback()