Merge branch 'i18n' into deploy

2020-06-09 11:41:46 +08:00 · 2020-06-09 11:41:46 +08:00 · 8b5f4d00d6
parent e75e9a301a 9975a7a938
commit 8b5f4d00d6
33 changed files with 272 additions and 147 deletions
--- a/README.es.md
+++ b/README.es.md
@ -51,24 +51,26 @@ Vue Element Admin es una solución práctica basada en la nueva plataforma de de
 - Plantilla de Typescript: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Créditos: [@Armour](https://github.com/Armour))
 - [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)

-**Después de la versión `v4.1.0+`, la rama por defecto master no tendrá soporte para i18n. Por favor use [i18n](https://github.com/PanJiaChen/vue-element-admin/tree/i18n), los cambios serán incluidos en la rama master**
+**Después de la versión `v4.1.0+`, la rama por defecto master no tendrá soporte para i18n. Por favor utilice la rama [i18n](https://github.com/PanJiaChen/vue-element-admin/tree/i18n), los cambios serán incluidos en la rama master**

 **la versión actual es `v4.0+` construida con `vue-cli`. Si encuentra algún problema, por favor coloque un [issue](https://github.com/PanJiaChen/vue-element-admin/issues/new). Si desea usar la versión anterior, puede cambiar de rama a [tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0), no relacionado con `vue-cli`**

-**Este proyecto no está soportado para versiones muy viejas de navegadores (e.g. IE).**
+**Este proyecto no está soportado para versiones antigüas de navegadores (ej. IE).**

 ## Preparación

 Necesita instalar [node](https://nodejs.org/) y [git](https://git-scm.com/) localmente. El proyecto es basado en [ES2015+](https://es6.ruanyifeng.com/), [vue](https://cn.vuejs.org/index.html), [vuex](https://vuex.vuejs.org/zh-cn/), [vue-router](https://router.vuejs.org/zh-cn/), [vue-cli](https://github.com/vuejs/vue-cli) , [axios](https://github.com/axios/axios) and [element-ui](https://github.com/ElemeFE/element), toda la solicitud de datos simulada se realiza a través de [Mock.js](https://github.com/nuysoft/Mock).
 Entendiendo y aprendiendo esto pudiera ayudarle con su proyecto.

- <p align="center">
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/PanJiaChen/vue-element-admin/tree/CodeSandbox)
+
+<p align="center">
  <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
 </p>

 ## Patrocinantes

-Se un patrocinante y pon tu logo en nuestro README on GitHub con un enlace directo a tu sitio web. [[Se un Patrocinante]](https://www.patreon.com/panjiachen)
+Sea un patrocinante y coloque su logo en nuestro LEEME en GitHub con un enlace directo a su sitio web. [[Se un Patrocinante]](https://www.patreon.com/panjiachen)

 <a href="https://flatlogic.com/admin-dashboards?from=vue-element-admin"><img width="150px" src="https://wpimg.wallstcn.com/9c0b719b-5551-4c1e-b776-63994632d94a.png" /></a><p>Plantilla de Dashboard de administración hecha con Vue, React y Angular.</p>

@ -77,25 +79,28 @@ Se un patrocinante y pon tu logo en nuestro README on GitHub con un enlace direc
 ```
 - Iniciar / Cerrar Sesión

- Permisos de Authentication
+- Permisos de Autenticación
  - Página de Permisos
  - Directivas de permisos
  - Página de configuración de permisos
  - Autenticación por dos pasos

 - Construcción Multi-entorno
-  - dev sit stage  producción
+  - Desarrollo (dev)
+  - sit
+  - Escenario de pruebas (stage),
+  - Producción (prod)

 - Características Globales
  - I18n
  - Temas dinámicos
-  - Dynamic sidebar (soporte a rutas multi-nivel)
+  - Menu lateral dinámico (soporte a rutas multi-nivel)
  - Barra de rutas dinámica
-  - Tags-view (Tab page Support right-click operation)
+  - Tags-view (Pestañas de página, Soporta operación de clic derecho)
  - Svg Sprite
  - Datos de simulación con Mock
  - Pantalla completa
-  - Responsive Sidebar
+  - Menu lateral responsivo

 - Editor
  - Editor de Texto Enriquecido
@ -106,7 +111,7 @@ Se un patrocinante y pon tu logo en nuestro README on GitHub con un enlace direc
  - Exportación a Excel
  - Carga de Excel
  - Visualización de Excel
-  - Exportación como zip
+  - Exportación como ZIP

 - Tabla
  - Tabla Dinámica
@ -135,7 +140,7 @@ Se un patrocinante y pon tu logo en nuestro README on GitHub con un enlace direc
 - Página de Guías
 - ECharts (Gráficos)
 - Portapapeles
- Convertidor de Markdown a html
+- Convertidor de Markdown a HTML
 ```

 ## Iniciando
@ -208,7 +213,7 @@ Navegadores modernos e Internet Explorer 10+.

 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Safari |
 | --------- | --------- | --------- | --------- |
-| IE10, IE11, Edge| últimas 2 versiones| últimas 2 versiones| últimas 2 versiones
+| IE10, IE11, Edge | últimas 2 versiones | últimas 2 versiones | últimas 2 versiones |

 ## Licencia

--- a/README.ja.md
+++ b/README.ja.md
@ -30,7 +30,7 @@

 ## 概要

-[vue-element-admin](https://panjiachen.github.io/vue-element-admin) は管理画面のフロントエンドのインタフェース，[vue](https://github.com/vuejs/vue) と [element-ui](https://github.com/ElemeFE/element)を使っています。i18nの多言語対応、可変ルート、権限、典型的なビジネスアプリテンプレートであり、豊富なコンポーネントを提供しています、素早くビジネス用の管理画面の現型を構築に役立ちます。
+[vue-element-admin](https://panjiachen.github.io/vue-element-admin) は管理画面のフロントエンドのインタフェースで、[vue](https://github.com/vuejs/vue) と [element-ui](https://github.com/ElemeFE/element)を使っています。i18nの多言語対応、可変ルート、権限、典型的なビジネスアプリテンプレートであり、豊富なコンポーネントを提供しています。素早くビジネス用の管理画面の現型を構築に役立ちます。

 - [デモページ](https://panjiachen.github.io/vue-element-admin)

@ -44,22 +44,24 @@

 - おすすめシンプルテンプレート: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
 - デスクトップバージョン: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
- Typescriptバージョン: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (鸣谢: [@Armour](https://github.com/Armour))
+- Typescriptバージョン: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (感謝: [@Armour](https://github.com/Armour))
 - [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)

-**After the `v4.1.0+` version, the default master branch will not support i18n. Please use [i18n Branch](https://github.com/PanJiaChen/vue-element-admin/tree/i18n), it will keep up with the master update**
+**バージョン`v4.1.0+`以降について、デフォルトのmasterブランチではi18nをサポートしていません。masterブランチと共にアップデートされる[i18n Branch](https://github.com/PanJiaChen/vue-element-admin/tree/i18n)を使用してください。 **

-**現在のバージョン `v4.0+` は `vue-cli` で構築，バグ報告は[issue](https://github.com/PanJiaChen/vue-element-admin/issues/new)のissueでお願いします。旧バージョン[tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0)もあります。`vue-cli`に依存しないです。**
+**現在のバージョン `v4.0+` は `vue-cli` で構築していて、バグ報告は[issue](https://github.com/PanJiaChen/vue-element-admin/issues/new)のissueでお願いします。旧バージョン[tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0)もあります。こちらは`vue-cli`に依存しないです。**

 **低いバージョンのブラウザはサーポートしないです(例えば ie)，必要があれば polyfill を追加してください。 [詳細はこちら](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**

 ## 前準備

-ローカル環境に [node](http://nodejs.org/) と [git](https://git-scm.com/)をインストールが必要です。[ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 、[vue-cli](https://github.com/vuejs/vue-cli) 、[axios](https://github.com/axios/axios) 和 [element-ui](https://github.com/ElemeFE/element)で開発しています。Requestは[Mock.js](https://github.com/nuysoft/Mock)のモックデータを使っています。
+ローカル環境に [node](http://nodejs.org/) と [git](https://git-scm.com/)のインストールが必要です。[ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 、[vue-cli](https://github.com/vuejs/vue-cli) 、[axios](https://github.com/axios/axios) と [element-ui](https://github.com/ElemeFE/element)で開発しています。Requestは[Mock.js](https://github.com/nuysoft/Mock)のモックデータを使っています。

 **バグ修正や新規機能追加のissue と pull requestは大歓迎です。**

- <p align="center">
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/PanJiaChen/vue-element-admin/tree/CodeSandbox)
+
+<p align="center">
  <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
 </p>

@ -81,15 +83,18 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
  - 外部IDでログイン

 - 複数環境デプロイ
-  - dev sit stage prod
+  - dev
+  - sit
+  - stage
+  - prod

 - 共通機能
  - 多言語切替
  - テーマ切替
  - サイトメニュー（ルートから生成）
-  - Breadcrumb Navigation
-  - Tag Navigation
-  - Svg Sprite Icon
+  - パンくずリストナビゲーション
+  - タブナビゲーション
+  - Svg Sprite アイコン
  - ローカル/バックエンド モック データ
  - Screenfull

@ -104,33 +109,33 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
  - リード
  - Zip

- Table
-  - Dynamic Table
-  - Drag And Drop Table
-  - Inline Edit Table
+- テーブル
+  - ダイナミックテーブル
+  - ドラッグアンドドロップテーブル
+  - インラインエディットテーブル

- Error Page
+- エラーページ
  - 401
  - 404

 - コンポーネント
-  - Avatar Upload
-  - Back To Top
-  - Drag Dialog
-  - Drag Select
-  - Drag Kanban
-  - Drag List
-  - SplitPane
+  - アバターアップロード
+  - トップに戻る
+  - ドラッグダイアログ
+  - ドラッグ選択
+  - ドラッグKanban
+  - ドラッグリスト
+  - ペインの分割
  - Dropzone
-  - Sticky
+  - スティッキー
  - CountTo

- Advanced Example
- Error Log
- Dashboard
- Guide Page
+- 高度なサンプル
+- エラーログ
+- ダッシュボード
+- ガイドページ
 - ECharts
- Clipboard
+- クリップボード
 - Markdown to html
 ```

@ -150,7 +155,7 @@ npm install
 npm run dev
 ```

-This will automatically open http://localhost:9527
+http://localhost:9527 が自動的に開きます。

 ## Build

@ -178,11 +183,11 @@ npm run lint
 npm run lint -- --fix
 ```

-Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) for more information
+詳細は [Documentation](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) を参照してください。

 ## Changelog

-Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
+各リリースの詳細は [release notes](https://github.com/PanJiaChen/vue-element-admin/releases) にあります。

 ## Online Demo

@ -204,7 +209,7 @@ Modern browsers and Internet Explorer 10+.

 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Safari |
 | --------- | --------- | --------- | --------- |
-| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
+| IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions |

 ## License

--- a/README.md
+++ b/README.md
@ -62,7 +62,9 @@ English | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | [Spa
 You need to install [node](https://nodejs.org/) and [git](https://git-scm.com/) locally. The project is based on [ES2015+](https://es6.ruanyifeng.com/), [vue](https://cn.vuejs.org/index.html), [vuex](https://vuex.vuejs.org/zh-cn/), [vue-router](https://router.vuejs.org/zh-cn/), [vue-cli](https://github.com/vuejs/vue-cli) , [axios](https://github.com/axios/axios) and [element-ui](https://github.com/ElemeFE/element), all request data is simulated using [Mock.js](https://github.com/nuysoft/Mock).
 Understanding and learning this knowledge in advance will greatly help the use of this project.

- <p align="center">
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/PanJiaChen/vue-element-admin/tree/CodeSandbox)
+
+<p align="center">
  <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
 </p>

@ -84,7 +86,10 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
  - Two-step login

 - Multi-environment build
-  - dev sit stage prod
+  - Develop (dev)
+  - sit
+  - Stage Test (stage)
+  - Production (prod)

 - Global Features
  - I18n
@ -208,7 +213,7 @@ Modern browsers and Internet Explorer 10+.

 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Safari |
 | --------- | --------- | --------- | --------- |
-| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
+| IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions |

 ## License

--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@ -77,7 +77,9 @@

 **如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 和 pr**

- <p align="center">
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/PanJiaChen/vue-element-admin/tree/CodeSandbox)
+
+<p align="center">
  <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
 </p>

@ -99,7 +101,10 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
  - 二步登录

 - 多环境发布
-  - dev sit stage prod
+  - dev
+  - sit
+  - stage
+  - prod

 - 全局功能
  - 国际化多语言
@ -221,13 +226,17 @@ Detailed changes for each release are documented in the [release notes](https://

 [Buy me a coffee](https://www.buymeacoffee.com/Pan)

+## 购买贴纸
+
+你也可以通过 购买[官方授权的贴纸](https://smallsticker.com/product/vue-element-admin) 的方式来支持 vue-element-admin - 每售出一张贴纸，本项目将获得 2 元的捐赠。
+
 ## Browsers support

 Modern browsers and Internet Explorer 10+.

 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Safari |
 | --------- | --------- | --------- | --------- |
-| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
+| IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions |

 ## License

--- a/mock/index.js
+++ b/mock/index.js
@ -54,18 +54,4 @@ export function mockXHR() {
  }
 }

-// for mock server
-const responseFake = (url, type, respond) => {
-  return {
-    url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`),
-    type: type || 'get',
-    response(req, res) {
-      console.log('request invoke:' + req.path)
-      res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
-    }
-  }
-}
-
-export default mocks.map(route => {
-  return responseFake(route.url, route.type, route.response)
-})
+export default mocks
--- a/mock/mock-server.js
+++ b/mock/mock-server.js
@ -2,17 +2,21 @@ const chokidar = require('chokidar')
 const bodyParser = require('body-parser')
 const chalk = require('chalk')
 const path = require('path')
+const Mock = require('mockjs')

 const mockDir = path.join(process.cwd(), 'mock')

 function registerRoutes(app) {
  let mockLastIndex
  const { default: mocks } = require('./index.js')
-  for (const mock of mocks) {
+  const mocksForServer = mocks.map(route => {
+    return responseFake(route.url, route.type, route.response)
+  })
+  for (const mock of mocksForServer) {
    app[mock.type](mock.url, mock.response)
    mockLastIndex = app._router.stack.length
  }
-  const mockRoutesLength = Object.keys(mocks).length
+  const mockRoutesLength = Object.keys(mocksForServer).length
  return {
    mockRoutesLength: mockRoutesLength,
    mockStartIndex: mockLastIndex - mockRoutesLength
@ -27,6 +31,18 @@ function unregisterRoutes() {
  })
 }

+// for mock server
+const responseFake = (url, type, respond) => {
+  return {
+    url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`),
+    type: type || 'get',
+    response(req, res) {
+      console.log('request invoke:' + req.path)
+      res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
+    }
+  }
+}
+
 module.exports = app => {
  // es6 polyfill
  require('@babel/register')
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "vue-element-admin",
-  "version": "4.2.1",
+  "version": "4.3.0",
  "description": "A magical vue admin. An out-of-box UI solution for enterprise applications. Newest development stack of vue. Lots of awesome features",
  "author": "Pan <panfree23@gmail.com>",
  "license": "MIT",
@ -59,7 +59,9 @@
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "path-to-regexp": "2.4.0",
+    "pinyin": "2.9.0",
    "screenfull": "4.2.0",
+    "script-loader": "0.7.2",
    "showdown": "1.9.0",
    "sortablejs": "1.8.4",
    "tui-editor": "1.3.3",
@ -94,12 +96,11 @@
    "husky": "1.3.1",
    "lint-staged": "8.1.5",
    "mockjs": "1.0.1-beta3",
-    "node-sass": "^4.9.0",
    "plop": "2.3.0",
    "runjs": "^4.3.2",
+    "sass": "^1.26.2",
    "sass-loader": "^7.1.0",
    "script-ext-html-webpack-plugin": "2.1.3",
-    "script-loader": "0.7.2",
    "serve-static": "^1.13.2",
    "svg-sprite-loader": "4.1.3",
    "svgo": "1.2.0",
--- a/src/components/DragSelect/index.vue
+++ b/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>
--- a/src/components/HeaderSearch/index.vue
+++ b/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;
--- a/src/components/JsonEditor/index.vue
+++ b/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>
--- a/src/components/SvgIcon/index.vue
+++ b/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>

--- a/src/components/Tinymce/components/EditorImage.vue
+++ b/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%;
  }
 }
--- a/src/components/Tinymce/index.vue
+++ b/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;
 }
--- a/src/layout/components/Settings/index.vue
+++ b/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: {
--- a/src/layout/components/Sidebar/Link.vue
+++ b/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
      }
    }
  }
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/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;
    }
--- a/src/layout/components/TagsView/index.vue
+++ b/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()
    }
  }
 }
--- a/src/permission.js
+++ b/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
--- a/src/router/index.js
+++ b/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')
      }
    ]
--- a/src/settings.js
+++ b/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.
--- a/src/store/modules/settings.js
+++ b/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 = {
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@ -31,7 +31,7 @@
 .fixed-width {
  .el-button--mini {
    padding: 7px 10px;
-    width: 60px;
+    min-width: 60px;
  }
 }

--- a/src/styles/element-variables.scss
+++ b/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";

--- a/src/utils/index.js
+++ b/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
    }
--- a/src/views/components-demo/tinymce.vue
+++ b/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" />
--- a/src/views/dashboard/admin/components/BoxCard.vue
+++ b/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;
    }
  }
--- a/src/views/dashboard/admin/components/RaddarChart.vue
+++ b/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 }
--- a/src/views/example/components/ArticleDetail.vue
+++ b/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;
--- a/src/views/permission/directive.vue
+++ b/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;
  }
 }
--- a/src/views/profile/components/UserCard.vue
+++ b/src/views/profile/components/UserCard.vue
@ -65,7 +65,7 @@ export default {
          name: '',
          email: '',
          avatar: '',
-          roles: ''
+          role: ''
        }
      }
    }
--- a/src/views/tab/index.vue
+++ b/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: [
--- a/tests/unit/utils/parseTime.spec.js
+++ b/tests/unit/utils/parseTime.spec.js
@ -1,9 +1,15 @@
 import { parseTime } from '@/utils/index.js'
+
 describe('Utils:parseTime', () => {
  const d = new Date('2018-07-13 17:54:01') // "2018-07-13 17:54:01"
  it('timestamp', () => {
    expect(parseTime(d)).toBe('2018-07-13 17:54:01')
  })
+
+  it('timestamp string', () => {
+    expect(parseTime((d + ''))).toBe('2018-07-13 17:54:01')
+  })
+
  it('ten digits timestamp', () => {
    expect(parseTime((d / 1000).toFixed(0))).toBe('2018-07-13 17:54:01')
  })
@ -24,4 +30,8 @@ describe('Utils:parseTime', () => {
  it('empty argument', () => {
    expect(parseTime()).toBeNull()
  })
+
+  it('null', () => {
+    expect(parseTime(null)).toBeNull()
+  })
 })
--- a/vue.config.js
+++ b/vue.config.js
@ -80,12 +80,6 @@ module.exports = {
      })
      .end()

-    config
-      // https://webpack.js.org/configuration/devtool/#development
-      .when(process.env.NODE_ENV === 'development',
-        config => config.devtool('cheap-source-map')
-      )
-
    config
      .when(process.env.NODE_ENV !== 'development',
        config => {