Merge pull request #3 from PanJiaChen/master

更新

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) {

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;
+    }
+  }
 }

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)
-}

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 {
@@ -284,6 +284,8 @@ export function uniqueArr(arr) {
   return Array.from(new Set(arr))
 }
 
-export function isExternal(path) {
+export function createUniqueString() {
-  return /^(https?:|mailto:|tel:)/.test(path)
+  const timestamp = +new Date() + ''
+  const randomNum = parseInt((1 + Math.random()) * 65536) + ''
+  return (+(randomNum + timestamp)).toString(32)
 }

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) {
+export function validURL(url) {
-  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.,?'\\+&%$#=~_-]+))*$/
+  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 urlregex.test(textval)
+  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)
 }

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({

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: {

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)">
       <template slot="title">
-        <item v-if="item.meta" :icon="item.meta.icon" :title="generateTitle(item.meta.title)" />
+        <item v-if="item.meta" :icon="item.meta && 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>
       </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 {
+    // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
-      onlyOneChild: null
+    // 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
   }
 }

src/views/layout/mixin/ResizeHandler.js

@@ -1,8 +1,7 @@
 import store from '@/store'
 
 const { body } = document
-const WIDTH = 1024
+const WIDTH = 992 // refer to Bootstrap's responsive design
-const RATIO = 3
 
 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) {

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()