Merge branch 'i18n' into deploy

src/components/DragSelect/index.vue

@@ -48,14 +48,18 @@ export default {
 }
 </script>
 
-<style scoped>
-.drag-select >>> .sortable-ghost {
-  opacity: .8;
-  color: #fff!important;
-  background: #42b983!important;
-}
+<style lang="scss" scoped>
+.drag-select {
+  ::v-deep {
+    .sortable-ghost {
+      opacity: .8;
+      color: #fff !important;
+      background: #42b983 !important;
+    }
 
-.drag-select >>> .el-tag {
-  cursor: pointer;
+    .el-tag {
+      cursor: pointer;
+    }
+  }
 }
 </style>

src/components/HeaderSearch/index.vue

@@ -41,6 +41,9 @@ export default {
     },
     lang() {
       return this.$store.getters.language
+    },
+    supportPinyinSearch() {
+      return this.$store.state.settings.supportPinyinSearch
     }
   },
   watch: {
@@ -51,6 +54,10 @@ export default {
       this.searchPool = this.generateRoutes(this.routes)
     },
     searchPool(list) {
+      // Support pinyin search
+      if (this.lang === 'zh' && this.supportPinyinSearch) {
+        this.addPinyinField(list)
+      }
       this.initFuse(list)
     },
     show(value) {
@@ -65,6 +72,23 @@ export default {
     this.searchPool = this.generateRoutes(this.routes)
   },
   methods: {
+    async addPinyinField(list) {
+      const { default: pinyin } = await import('pinyin')
+      if (Array.isArray(list)) {
+        list.forEach(element => {
+          const title = element.title
+          if (Array.isArray(title)) {
+            title.forEach(v => {
+              v = pinyin(v, {
+                style: pinyin.STYLE_NORMAL
+              }).join('')
+              element.pinyinTitle = v
+            })
+          }
+        })
+        return list
+      }
+    },
     click() {
       this.show = !this.show
       if (this.show) {
@@ -95,6 +119,9 @@ export default {
         keys: [{
           name: 'title',
           weight: 0.7
+        }, {
+          name: 'pinyinTitle',
+          weight: 0.3
         }, {
           name: 'path',
           weight: 0.3
@@ -105,29 +132,23 @@ export default {
     // And generate the internationalized title
     generateRoutes(routes, basePath = '/', prefixTitle = []) {
       let res = []
-
       for (const router of routes) {
         // skip hidden router
         if (router.hidden) { continue }
-
         const data = {
           path: path.resolve(basePath, router.path),
           title: [...prefixTitle]
         }
-
         if (router.meta && router.meta.title) {
           // generate internationalized title
           const i18ntitle = i18n.t(`route.${router.meta.title}`)
-
           data.title = [...data.title, i18ntitle]
-
           if (router.redirect !== 'noRedirect') {
             // only push the routes with title
             // special case: need to exclude parent router without redirect
             res.push(data)
           }
         }
-
         // recursive child routes
         if (router.children) {
           const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
@@ -152,13 +173,11 @@ export default {
 <style lang="scss" scoped>
 .header-search {
   font-size: 0 !important;
-
   .search-icon {
     cursor: pointer;
     font-size: 18px;
     vertical-align: middle;
   }
-
   .header-search-select {
     font-size: 18px;
     transition: width 0.2s;
@@ -169,7 +188,7 @@ export default {
     display: inline-block;
     vertical-align: middle;
 
-    /deep/ .el-input__inner {
+    ::v-deep .el-input__inner {
       border-radius: 0;
       border: 0;
       padding-left: 0;
@@ -179,7 +198,6 @@ export default {
       vertical-align: middle;
     }
   }
-
   &.show {
     .header-search-select {
       width: 210px;

src/components/JsonEditor/index.vue

@@ -54,19 +54,24 @@ export default {
 }
 </script>
 
-<style scoped>
-.json-editor{
+<style lang="scss" scoped>
+.json-editor {
   height: 100%;
   position: relative;
-}
-.json-editor >>> .CodeMirror {
-  height: auto;
-  min-height: 300px;
-}
-.json-editor >>> .CodeMirror-scroll{
-  min-height: 300px;
-}
-.json-editor >>> .cm-s-rubyblue span.cm-string {
-  color: #F08047;
+
+  ::v-deep {
+    .CodeMirror {
+      height: auto;
+      min-height: 300px;
+    }
+
+    .CodeMirror-scroll {
+      min-height: 300px;
+    }
+
+    .cm-s-rubyblue span.cm-string {
+      color: #F08047;
+    }
+  }
 }
 </style>

src/components/SvgIcon/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
   <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
-    <use :href="iconName" />
+    <use :xlink:href="iconName" />
   </svg>
 </template>
 

src/components/Tinymce/components/EditorImage.vue

@@ -104,7 +104,7 @@ export default {
 <style lang="scss" scoped>
 .editor-slide-upload {
   margin-bottom: 20px;
-  /deep/ .el-upload--picture-card {
+  ::v-deep .el-upload--picture-card {
     width: 100%;
   }
 }

src/components/Tinymce/index.vue

@@ -154,7 +154,11 @@ export default {
           editor.on('FullscreenStateChanged', (e) => {
             _this.fullscreen = e.state
           })
-        }
+        },
+        // it will try to keep these URLs intact
+        // https://www.tiny.cloud/docs-3x/reference/configuration/Configuration3x@convert_urls/
+        // https://stackoverflow.com/questions/5196205/disable-tinymce-absolute-to-relative-url-conversions
+        convert_urls: false
         // 整合七牛上传
         // images_dataimg_filter(img) {
         //   setTimeout(() => {
@@ -216,28 +220,37 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .tinymce-container {
   position: relative;
   line-height: normal;
 }
-.tinymce-container>>>.mce-fullscreen {
-  z-index: 10000;
+
+.tinymce-container {
+  ::v-deep {
+    .mce-fullscreen {
+      z-index: 10000;
+    }
+  }
 }
+
 .tinymce-textarea {
   visibility: hidden;
   z-index: -1;
 }
+
 .editor-custom-btn-container {
   position: absolute;
   right: 4px;
   top: 4px;
   /*z-index: 2005;*/
 }
+
 .fullscreen .editor-custom-btn-container {
   z-index: 10000;
   position: fixed;
 }
+
 .editor-upload-btn {
   display: inline-block;
 }

src/layout/components/Settings/index.vue

@@ -30,6 +30,11 @@
         />
       </a>
 
+      <div v-if="lang === 'zh'" class="drawer-item">
+        <span>菜单支持拼音搜索</span>
+        <el-switch v-model="supportPinyinSearch" class="drawer-switch" />
+      </div>
+
     </div>
   </div>
 </template>
@@ -78,6 +83,20 @@ export default {
           value: val
         })
       }
+    },
+    supportPinyinSearch: {
+      get() {
+        return this.$store.state.settings.supportPinyinSearch
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'supportPinyinSearch',
+          value: val
+        })
+      }
+    },
+    lang() {
+      return this.$store.getters.language
     }
   },
   methods: {

src/layout/components/Sidebar/Link.vue

@@ -1,7 +1,5 @@
-
 <template>
-  <!-- eslint-disable vue/require-component-is -->
-  <component v-bind="linkProps(to)">
+  <component :is="type" v-bind="linkProps(to)">
     <slot />
   </component>
 </template>
@@ -16,19 +14,28 @@ export default {
       required: true
     }
   },
+  computed: {
+    isExternal() {
+      return isExternal(this.to)
+    },
+    type() {
+      if (this.isExternal) {
+        return 'a'
+      }
+      return 'router-link'
+    }
+  },
   methods: {
-    linkProps(url) {
-      if (isExternal(url)) {
+    linkProps(to) {
+      if (this.isExternal) {
         return {
-          is: 'a',
-          href: url,
+          href: to,
           target: '_blank',
           rel: 'noopener'
         }
       }
       return {
-        is: 'router-link',
-        to: url
+        to: to
       }
     }
   }

src/layout/components/TagsView/ScrollPane.vue

@@ -19,12 +19,21 @@ export default {
       return this.$refs.scrollContainer.$refs.wrap
     }
   },
+  mounted() {
+    this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
+  },
+  beforeDestroy() {
+    this.scrollWrapper.removeEventListener('scroll', this.emitScroll)
+  },
   methods: {
     handleScroll(e) {
       const eventDelta = e.wheelDelta || -e.deltaY * 40
       const $scrollWrapper = this.scrollWrapper
       $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
     },
+    emitScroll() {
+      this.$emit('scroll')
+    },
     moveToTarget(currentTag) {
       const $container = this.$refs.scrollContainer.$el
       const $containerWidth = $container.offsetWidth
@@ -73,7 +82,7 @@ export default {
   position: relative;
   overflow: hidden;
   width: 100%;
-  /deep/ {
+  ::v-deep {
     .el-scrollbar__bar {
       bottom: 0px;
     }

src/layout/components/TagsView/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="tags-view-container" class="tags-view-container">
-    <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+    <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
       <router-link
         v-for="tag in visitedViews"
         ref="tag"
@@ -191,6 +191,9 @@ export default {
     },
     closeMenu() {
       this.visible = false
+    },
+    handleScroll() {
+      this.closeMenu()
     }
   }
 }

src/permission.js

@@ -24,7 +24,7 @@ router.beforeEach(async(to, from, next) => {
     if (to.path === '/login') {
       // if is logged in, redirect to the home page
       next({ path: '/' })
-      NProgress.done()
+      NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
     } else {
       // determine whether the user has obtained his permission roles through getInfo
       const hasRoles = store.getters.roles && store.getters.roles.length > 0

src/router/index.js

@@ -45,7 +45,7 @@ export const constantRoutes = [
     hidden: true,
     children: [
       {
-        path: '/redirect/:path*',
+        path: '/redirect/:path(.*)',
         component: () => import('@/views/redirect/index')
       }
     ]

src/settings.js

@@ -25,6 +25,13 @@ module.exports = {
    */
   sidebarLogo: false,
 
+  /**
+   * @type {boolean} true | false
+   * @description Whether support pinyin search in headerSearch
+   * Bundle size minified 47.3kb,minified + gzipped 63kb
+   */
+  supportPinyinSearch: true,
+
   /**
    * @type {string | array} 'production' | ['production', 'development']
    * @description Need show err logs component.

src/store/modules/settings.js

@@ -1,14 +1,15 @@
 import variables from '@/styles/element-variables.scss'
 import defaultSettings from '@/settings'
 
-const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const { showSettings, tagsView, fixedHeader, sidebarLogo, supportPinyinSearch } = defaultSettings
 
 const state = {
   theme: variables.theme,
-  showSettings: showSettings,
-  tagsView: tagsView,
-  fixedHeader: fixedHeader,
-  sidebarLogo: sidebarLogo
+  showSettings,
+  tagsView,
+  fixedHeader,
+  sidebarLogo,
+  supportPinyinSearch
 }
 
 const mutations = {

src/styles/element-ui.scss

@@ -31,7 +31,7 @@
 .fixed-width {
   .el-button--mini {
     padding: 7px 10px;
-    width: 60px;
+    min-width: 60px;
   }
 }
 

src/styles/element-variables.scss

@@ -6,7 +6,7 @@
 /* theme color */
 $--color-primary: #1890ff;
 $--color-success: #13ce66;
-$--color-warning: #FFBA00;
+$--color-warning: #ffba00;
 $--color-danger: #ff4949;
 // $--color-info: #1E1E1E;
 
@@ -17,10 +17,10 @@ $--button-font-weight: 400;
 $--border-color-light: #dfe4ed;
 $--border-color-lighter: #e6ebf5;
 
-$--table-border:1px solid#dfe6ec;
+$--table-border: 1px solid #dfe6ec;
 
 /* icon font path, required */
-$--font-path: '~element-ui/lib/theme-chalk/fonts';
+$--font-path: "~element-ui/lib/theme-chalk/fonts";
 
 @import "~element-ui/packages/theme-chalk/src/index";
 

src/utils/index.js

@@ -9,7 +9,7 @@
  * @returns {string | null}
  */
 export function parseTime(time, cFormat) {
-  if (arguments.length === 0) {
+  if (arguments.length === 0 || !time) {
     return null
   }
   const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
@@ -17,9 +17,17 @@ export function parseTime(time, cFormat) {
   if (typeof time === 'object') {
     date = time
   } else {
-    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
-      time = parseInt(time)
+    if ((typeof time === 'string')) {
+      if ((/^[0-9]+$/.test(time))) {
+        // support "1548221490638"
+        time = parseInt(time)
+      } else {
+        // support safari
+        // https://stackoverflow.com/questions/4310953/invalid-date-in-safari
+        time = time.replace(new RegExp(/-/gm), '/')
+      }
     }
+
     if ((typeof time === 'number') && (time.toString().length === 10)) {
       time = time * 1000
     }

src/views/components-demo/tinymce.vue

@@ -2,7 +2,7 @@
   <div class="components-container">
     <aside>
       {{ $t('components.tinymceTips') }}
-      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/component/rich-editor.html"> {{ $t('components.documentation') }}</a>
+      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html"> {{ $t('components.documentation') }}</a>
     </aside>
     <div>
       <tinymce v-model="content" :height="300" />

src/views/dashboard/admin/components/BoxCard.vue

@@ -101,7 +101,7 @@ export default {
     background-color: #fff;
     margin: auto;
     box-shadow: none!important;
-    /deep/ .pan-info {
+    ::v-deep .pan-info {
       box-shadow: none!important;
     }
   }

src/views/dashboard/admin/components/RaddarChart.vue

@@ -70,7 +70,7 @@ export default {
           indicator: [
             { name: 'Sales', max: 10000 },
             { name: 'Administration', max: 20000 },
-            { name: 'Information Techology', max: 20000 },
+            { name: 'Information Technology', max: 20000 },
             { name: 'Customer Support', max: 20000 },
             { name: 'Development', max: 20000 },
             { name: 'Marketing', max: 20000 }

src/views/example/components/ArticleDetail.vue

@@ -279,7 +279,7 @@ export default {
   }
 }
 
-.article-textarea /deep/ {
+.article-textarea ::v-deep {
   textarea {
     padding-right: 40px;
     resize: none;

src/views/permission/directive.vue

@@ -91,7 +91,7 @@ export default {
 
 <style lang="scss" scoped>
 .app-container {
-  /deep/ .permission-alert {
+  ::v-deep .permission-alert {
     width: 320px;
     margin-top: 15px;
     background-color: #f0f9eb;
@@ -100,10 +100,10 @@ export default {
     border-radius: 4px;
     display: inline-block;
   }
-  /deep/ .permission-sourceCode {
+  ::v-deep .permission-sourceCode {
     margin-left: 15px;
   }
-  /deep/ .permission-tag {
+  ::v-deep .permission-tag {
     background-color: #ecf5ff;
   }
 }

src/views/profile/components/UserCard.vue

@@ -65,7 +65,7 @@ export default {
           name: '',
           email: '',
           avatar: '',
-          roles: ''
+          role: ''
         }
       }
     }

src/views/tab/index.vue

@@ -13,11 +13,11 @@
 </template>
 
 <script>
-import tabPane from './components/TabPane'
+import TabPane from './components/TabPane'
 
 export default {
   name: 'Tab',
-  components: { tabPane },
+  components: { TabPane },
   data() {
     return {
       tabMapOptions: [