refine settings

build/index.js

@@ -5,7 +5,7 @@ const rawArgv = process.argv.slice(2)
 const args = rawArgv.join(' ')
 
 if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
-  run(`vue-cli-service build ${args}`)
+  run(`vue-cli-service build ${args} --report`)
 
   const port = 9526
   const publicPath = config.publicPath
@@ -23,7 +23,10 @@ if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
 
   app.listen(port, function() {
     console.log(
-      chalk.green(`> Listening at  http://localhost:${port}${publicPath}`)
+      chalk.green(`> Preview at  http://localhost:${port}${publicPath}`)
+    )
+    console.log(
+      chalk.green(`> Report at  http://localhost:${port}${publicPath}/report.html`)
     )
   })
 } else {

package.json

@@ -8,8 +8,7 @@
     "dev": "vue-cli-service serve",
     "build:prod": "vue-cli-service build",
     "build:stage": "vue-cli-service build --mode staging",
-    "build:preview": "node build/index.js --preview",
+    "preview": "node build/index.js --preview",
-    "build:report": "node build/index.js --report",
     "lint": "eslint --ext .js,.vue src",
     "test": "npm run lint",
     "test:unit": "vue-cli-service test:unit",
@@ -44,48 +43,49 @@
   "dependencies": {
     "axios": "0.18.0",
     "clipboard": "1.7.1",
-    "codemirror": "5.44.0",
+    "codemirror": "5.45.0",
     "driver.js": "0.9.5",
     "dropzone": "5.5.1",
-    "echarts": "4.1.0",
+    "echarts": "4.2.1",
-    "element-ui": "2.6.1",
+    "element-ui": "2.6.3",
     "file-saver": "2.0.1",
     "fuse.js": "3.4.4",
     "js-cookie": "2.2.0",
     "jsonlint": "1.6.3",
-    "jszip": "3.2.0",
+    "jszip": "3.2.1",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
-    "screenfull": "4.0.1",
+    "screenfull": "4.1.0",
     "showdown": "1.9.0",
-    "sortablejs": "1.8.3",
+    "sortablejs": "1.8.4",
-    "tui-editor": "1.3.2",
+    "tui-editor": "1.3.3",
-    "vue": "2.6.8",
+    "vue": "2.6.10",
     "vue-count-to": "1.0.13",
     "vue-i18n": "7.3.2",
     "vue-router": "3.0.2",
-    "vue-splitpane": "1.0.2",
+    "vue-splitpane": "1.0.4",
-    "vuedraggable": "2.17.0",
+    "vuedraggable": "2.20.0",
     "vuex": "3.1.0",
     "xlsx": "0.14.1"
   },
   "devDependencies": {
     "@babel/core": "7.0.0",
     "@babel/register": "7.0.0",
-    "@vue/cli-plugin-babel": "3.5.0",
+    "@vue/cli-plugin-babel": "3.5.1",
-    "@vue/cli-plugin-unit-jest": "3.5.0",
+    "@vue/cli-plugin-unit-jest": "3.5.1",
-    "@vue/cli-service": "3.5.0",
+    "@vue/cli-service": "3.5.1",
     "@vue/test-utils": "1.0.0-beta.29",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.0.1",
     "babel-jest": "23.6.0",
     "chalk": "2.4.2",
     "connect": "3.6.6",
-    "eslint": "5.15.1",
+    "eslint": "5.15.3",
     "eslint-plugin-vue": "5.2.2",
+    "html-webpack-plugin": "3.2.0",
     "husky": "1.3.1",
-    "lint-staged": "7.2.2",
+    "lint-staged": "8.1.5",
     "mockjs": "1.0.1-beta3",
     "node-sass": "^4.9.0",
     "plop": "2.3.0",
@@ -96,7 +96,7 @@
     "serve-static": "^1.13.2",
     "svg-sprite-loader": "4.1.3",
     "svgo": "1.2.0",
-    "vue-template-compiler": "2.6.8"
+    "vue-template-compiler": "2.6.10"
   },
   "engines": {
     "node": ">=8.9",

src/components/Breadcrumb/index.vue

@@ -58,7 +58,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
   .app-breadcrumb.el-breadcrumb {
     display: inline-block;
     font-size: 14px;

src/components/DndList/index.vue

@@ -2,7 +2,7 @@
   <div class="dndList">
     <div :style="{width:width1}" class="dndList-list">
       <h3>{{ list1Title }}</h3>
-      <draggable :list="list1" :options="{group:'article'}" class="dragArea">
+      <draggable :list="list1" group="article" class="dragArea">
         <div v-for="element in list1" :key="element.id" class="list-complete-item">
           <div class="list-complete-item-handle">
             {{ element.id }}[{{ element.author }}] {{ element.title }}
@@ -17,7 +17,7 @@
     </div>
     <div :style="{width:width2}" class="dndList-list">
       <h3>{{ list2Title }}</h3>
-      <draggable :list="list2" :options="{group:'article'}" class="dragArea">
+      <draggable :list="list2" group="article" class="dragArea">
         <div v-for="element in list2" :key="element.id" class="list-complete-item">
           <div class="list-complete-item-handle2" @click="pushEle(element)">
             {{ element.id }} [{{ element.author }}] {{ element.title }}
@@ -99,7 +99,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .dndList {
   background: #fff;
   padding-bottom: 40px;

src/components/Kanban/index.vue

@@ -5,7 +5,7 @@
     </div>
     <draggable
       :list="list"
-      :options="options"
+      v-bind="$attrs"
       class="board-column-content"
     >
       <div v-for="element in list" :key="element.id" class="board-item">

src/components/MDinput/index.vue

@@ -197,7 +197,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
   // Fonts:
   $font-size-base: 16px;
   $font-size-small: 18px;

src/components/RightPanel/index.vue

@@ -21,7 +21,7 @@ export default {
       type: Boolean
     },
     buttonTop: {
-      default: 240,
+      default: 250,
       type: Number
     }
   },
@@ -77,7 +77,7 @@ export default {
 }
 </style>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .rightPanel-background {
   opacity: 0;
   transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
@@ -108,7 +108,6 @@ export default {
 }
 
 .show {
-
   transition: all .3s cubic-bezier(.7, .3, .1, 1);
 
   .rightPanel-background {

src/components/Share/dropdownMenu.vue

@@ -37,7 +37,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" >
+<style lang="scss" >
 $n: 8; //和items.length 相同
 $t: .1s;
 .share-dropdown-menu {

src/components/Tinymce/components/editorImage.vue

@@ -101,7 +101,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .editor-slide-upload {
   margin-bottom: 20px;
   /deep/ .el-upload--picture-card {

src/components/Upload/singleImage.vue

@@ -78,7 +78,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
     @import "~@/styles/mixin.scss";
     .upload-container {
         width: 100%;

src/components/Upload/singleImage2.vue

@@ -76,7 +76,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .upload-container {
   width: 100%;
   height: 100%;

src/components/Upload/singleImage3.vue

@@ -85,7 +85,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 @import "~@/styles/mixin.scss";
 .upload-container {
   width: 100%;

src/lang/en.js

@@ -163,5 +163,12 @@ export default {
     close: 'Close',
     closeOthers: 'Close Others',
     closeAll: 'Close All'
+  },
+  settings: {
+    title: 'Page style setting',
+    theme: 'Theme Color',
+    tagsView: 'Open Tags-View',
+    fixedHeader: 'Fixed Header',
+    sidebarLogo: 'Sidebar Logo'
   }
 }

src/lang/es.js

@@ -163,5 +163,12 @@ export default {
     close: 'Cerrar',
     closeOthers: 'Cerrar otros',
     closeAll: 'Cerrar todos'
+  },
+  settings: {
+    title: 'Page style setting',
+    theme: 'Theme Color',
+    tagsView: 'Open Tags-View',
+    fixedHeader: 'Fixed Header',
+    sidebarLogo: 'Sidebar Logo'
   }
 }

src/lang/zh.js

@@ -163,5 +163,12 @@ export default {
     close: '关闭',
     closeOthers: '关闭其它',
     closeAll: '关闭所有'
+  },
+  settings: {
+    title: '系统布局配置',
+    theme: '主题色',
+    tagsView: '开启 Tags-View',
+    fixedHeader: '固定 Header',
+    sidebarLogo: '侧边栏 Logo'
   }
 }

src/layout/Layout.vue

@@ -57,7 +57,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
   @import "~@/styles/mixin.scss";
   @import "~@/styles/variables.scss";
 
@@ -66,11 +66,13 @@ export default {
     position: relative;
     height: 100%;
     width: 100%;
+
     &.mobile.openSidebar {
       position: fixed;
       top: 0;
     }
   }
+
   .drawer-bg {
     background: #000;
     opacity: 0.3;
@@ -80,6 +82,7 @@ export default {
     position: absolute;
     z-index: 999;
   }
+
   .fixed-header {
     position: fixed;
     top: 0;
@@ -88,9 +91,11 @@ export default {
     width: calc(100% - #{$sideBarWidth});
     transition: width 0.28s;
   }
+
   .hideSidebar .fixed-header {
     width: calc(100% - 54px)
   }
+
   .mobile .fixed-header {
     width: 100%;
   }

src/layout/components/AppMain.vue

@@ -22,7 +22,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .app-main {
   /* 50= navbar  50  */
   min-height: calc(100vh - 50px);
@@ -32,7 +32,7 @@ export default {
 }
 
 .fixed-header+.app-main {
-  margin-top: 50px;
+  padding-top: 50px;
 }
 
 .hasTagsView {
@@ -42,7 +42,7 @@ export default {
   }
 
   .fixed-header+.app-main {
-    margin-top: 80px;
+    padding-top: 84px;
   }
 }
 </style>

src/layout/components/Navbar.vue

@@ -85,7 +85,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .hasTagsView {
   .navbar {
     border-bottom: none;
@@ -105,6 +105,7 @@ export default {
     float: left;
     cursor: pointer;
     transition: background .3s;
+    -webkit-tap-highlight-color:transparent;
 
     &:hover {
       background: rgba(0, 0, 0, .025)

src/layout/components/Settings/index.vue

@@ -1,25 +1,28 @@
 <template>
   <div class="drawer-container">
     <div>
-      <h3 class="drawer-title">
+      <h3 class="drawer-title">{{ $t('settings.title') }}</h3>
-        系统布局配置
-      </h3>
 
       <div class="drawer-item">
-        <span>主题色</span>
+        <span>{{ $t('settings.theme') }}</span>
-        <theme-picker style="float: right;height: 26px;margin: -3px 5px 0 0;" />
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" />
       </div>
 
       <div class="drawer-item">
-        <span>开启 Tags-View</span>
+        <span>{{ $t('settings.tagsView') }}</span>
         <el-switch v-model="tagsView" class="drawer-switch" />
       </div>
 
       <div class="drawer-item">
-        <span>固定 Header</span>
+        <span>{{ $t('settings.fixedHeader') }}</span>
         <el-switch v-model="fixedHeader" class="drawer-switch" />
       </div>
 
+      <div class="drawer-item">
+        <span>{{ $t('settings.sidebarLogo') }}</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
     </div>
   </div>
 </template>
@@ -30,9 +33,7 @@ import ThemePicker from '@/components/ThemePicker'
 export default {
   components: { ThemePicker },
   data() {
-    return {
+    return {}
-      sidebarLogo: true
-    }
   },
   computed: {
     fixedHeader: {
@@ -56,12 +57,23 @@ export default {
           value: val
         })
       }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
     }
   }
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .drawer-container {
   padding: 24px;
   font-size: 14px;

src/layout/components/Sidebar/Logo.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
+    <transition name="sidebarLogoFade">
+      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
+        <img v-if="logo" :src="logo" class="sidebar-logo">
+        <h1 v-else class="sidebar-title">{{ title }} </h1>
+      </router-link>
+      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
+        <img v-if="logo" :src="logo" class="sidebar-logo">
+        <h1 class="sidebar-title">{{ title }} </h1>
+      </router-link>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SidebarLogo',
+  props: {
+    collapse: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      title: 'Vue Element Admin',
+      logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sidebarLogoFade-enter-active {
+  transition: opacity 1.5s;
+}
+
+.sidebarLogoFade-enter,
+.sidebarLogoFade-leave-to {
+  opacity: 0;
+}
+
+.sidebar-logo-container {
+  position: relative;
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  background: #2b2f3a;
+  text-align: center;
+  overflow: hidden;
+
+  & .sidebar-logo-link {
+    height: 100%;
+    width: 100%;
+
+    & .sidebar-logo {
+      width: 32px;
+      height: 32px;
+      vertical-align: middle;
+      margin-right: 12px;
+    }
+
+    & .sidebar-title {
+      display: inline-block;
+      margin: 0;
+      color: #fff;
+      font-weight: 600;
+      line-height: 50px;
+      font-size: 14px;
+      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+      vertical-align: middle;
+    }
+  }
+
+  &.collapse {
+    .sidebar-logo {
+      margin-right: 0px;
+    }
+  }
+}
+</style>

src/layout/components/Sidebar/index.vue

@@ -1,4 +1,6 @@
 <template>
+  <div :class="{'has-logo':showLogo}">
+    <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
         :default-active="$route.path"
@@ -12,20 +14,25 @@
         <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
       </el-menu>
     </el-scrollbar>
+  </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import variables from '@/styles/variables.scss'
 
 export default {
-  components: { SidebarItem },
+  components: { SidebarItem, Logo },
   computed: {
     ...mapGetters([
       'permission_routes',
       'sidebar'
     ]),
+    showLogo() {
+      return this.$store.state.settings.sidebarLogo
+    },
     variables() {
       return variables
     },

src/layout/components/TagsView/ScrollPane.vue

@@ -67,7 +67,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .scroll-container {
   white-space: nowrap;
   position: relative;

src/layout/components/TagsView/index.vue

@@ -196,7 +196,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .tags-view-container {
   height: 34px;
   width: 100%;
@@ -264,7 +264,7 @@ export default {
 }
 </style>
 
-<style rel="stylesheet/scss" lang="scss">
+<style lang="scss">
 //reset element css of el-icon-close
 .tags-view-wrapper {
   .tags-view-item {

src/router/index.js

@@ -33,6 +33,12 @@ import nestedRouter from './modules/nested'
     affix: true                  if true, the tag will affix in the tags-view
   }
 **/
+
+/**
+ * constantRoutes
+ * a base page that does not have permission requirements
+ * all roles can be accessed
+ * */
 export const constantRoutes = [
   {
     path: '/redirect',
@@ -105,6 +111,10 @@ export const constantRoutes = [
   }
 ]
 
+/**
+ * asyncRoutes
+ * the routes that need to be dynamically loaded based on user roles
+*/
 export const asyncRoutes = [
   {
     path: '/permission',
@@ -160,7 +170,7 @@ export const asyncRoutes = [
     ]
   },
 
-  /** When your routing table is too long, you can split it into small modules**/
+  /** when your routing map is too long, you can split it into small modules **/
   componentsRouter,
   chartsRouter,
   nestedRouter,

src/settings.js

@@ -1,6 +1,4 @@
 export default {
-  title: 'vue-element-admin',
-
   /**
    * @type {boolean} true | false
    * @description Whether show the settings right-panel
@@ -17,7 +15,13 @@ export default {
    * @type {boolean} true | false
    * @description Whether fix the header
    */
-  fixedHeader: true,
+  fixedHeader: false,
+
+  /**
+   * @type {boolean} true | false
+   * @description Whether show the logo in sidebar
+   */
+  sidebarLogo: false,
 
   /**
    * @type {string | array} 'production' | ['production','development']

src/store/modules/settings.js

@@ -1,10 +1,11 @@
 import defaultSettings from '@/settings'
-const { showSettings, tagsView, fixedHeader } = defaultSettings
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
 
 const state = {
   showSettings: showSettings,
   tagsView: tagsView,
-  fixedHeader: fixedHeader
+  fixedHeader: fixedHeader,
+  sidebarLogo: sidebarLogo
 }
 
 const mutations = {

src/styles/sidebar.scss

@@ -38,6 +38,16 @@
       right: 0px;
     }
 
+    .el-scrollbar {
+      height: 100%;
+    }
+
+    &.has-logo {
+      .el-scrollbar {
+        height: calc(100% - 50px);
+      }
+    }
+
     .is-horizontal {
       display: none;
     }
@@ -100,6 +110,7 @@
 
       .el-tooltip {
         padding: 0 !important;
+
         .svg-icon {
           margin-left: 20px;
         }
@@ -111,6 +122,7 @@
 
       &>.el-submenu__title {
         padding: 0 !important;
+
         .svg-icon {
           margin-left: 20px;
         }

src/styles/transition.scss

@@ -1,4 +1,4 @@
-//globl transition css
+//global transition css
 
 /*fade*/
 .fade-enter-active,

src/views/components-demo/countTo.vue

@@ -26,10 +26,10 @@
         <input v-model.number="setDuration" type="number" name="durationInput">
       </label>
       <div class="startBtn example-btn" @click="start">
-        开始
+        Start
       </div>
       <div class="pause-resume-btn example-btn" @click="pauseResume">
-        暂停/恢复
+        pause/resume
       </div>
       <br>
       <label class="label" for="decimalsInput">decimals:

src/views/components-demo/dragKanban.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="components-container board">
-    <Kanban :key="1" :list="list1" :options="options" class="kanban todo" header-text="Todo" />
+    <Kanban :key="1" :list="list1" :group="group" class="kanban todo" header-text="Todo" />
-    <Kanban :key="2" :list="list2" :options="options" class="kanban working" header-text="Working" />
+    <Kanban :key="2" :list="list2" :group="group" class="kanban working" header-text="Working" />
-    <Kanban :key="3" :list="list3" :options="options" class="kanban done" header-text="Done" />
+    <Kanban :key="3" :list="list3" :group="group" class="kanban done" header-text="Done" />
   </div>
 </template>
 <script>
@@ -15,9 +15,7 @@ export default {
   },
   data() {
     return {
-      options: {
+      group: 'mission',
-        group: 'mission'
-      },
       list1: [
         { name: 'Mission', id: 1 },
         { name: 'Mission', id: 2 },

src/views/components-demo/jsonEditor.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="components-container">
-    <code>JsonEditor is base on  <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a> , lint base on json-lint </code>
+    <code>Json-Editor is base on <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a>. Lint
+      base on <a
+        href="https://github.com/codemirror/CodeMirror/blob/master/addon/lint/json-lint.js"
+        target="_blank"
+      >json-lint</a>.</code>
     <div class="editor-container">
       <json-editor ref="jsonEditor" v-model="value" />
     </div>

src/views/components-demo/markdown.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="components-container">
     <code>Markdown is based on
-      <a href="https://github.com/nhnent/tui.editor" target="_blank">tui.editor</a> ，Simply encapsulated in Vue.
+      <a href="https://github.com/nhnent/tui.editor" target="_blank">tui.editor</a> ，simply wrapped with Vue.
-      <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/feature/component/markdown-editor.html">
+      <a
+        target="_blank"
+        href="https://panjiachen.github.io/vue-element-admin-site/feature/component/markdown-editor.html"
+      >
         Documentation </a>
     </code>
 
@@ -10,33 +13,33 @@
       <el-tag class="tag-title">
         Basic:
       </el-tag>
-      <markdown-editor v-model="content" height="300px" />
+      <markdown-editor v-model="content1" height="300px" />
     </div>
 
     <div class="editor-container">
       <el-tag class="tag-title">
         Markdown Mode:
       </el-tag>
-      <markdown-editor ref="markdownEditor" v-model="content" :options="{hideModeSwitch:true,previewStyle:'tab'}" height="200px" />
+      <markdown-editor ref="markdownEditor" v-model="content2" :options="{hideModeSwitch:true,previewStyle:'tab'}" height="200px" />
     </div>
 
     <div class="editor-container">
       <el-tag class="tag-title">
         Customize Toolbar:
       </el-tag>
-      <markdown-editor
+      <markdown-editor v-model="content3" :options="{ toolbarItems: ['heading','bold','italic']}" />
-        ref="markdownEditor"
-        v-model="content"
-        :options="{ toolbarItems: ['heading','bold','italic']}"
-      />
     </div>
 
     <div class="editor-container">
       <el-tag class="tag-title">
         I18n:
       </el-tag>
-      <el-alert :closable="false" title="You can change the language of the admin system to see the effect" type="success" />
+      <el-alert
-      <markdown-editor v-model="content" :language="language" height="300px" />
+        :closable="false"
+        title="You can change the language of the admin system to see the effect"
+        type="success"
+      />
+      <markdown-editor ref="markdownEditor" v-model="content4" :language="language" height="300px" />
     </div>
 
     <el-button style="margin-top:80px;" type="primary" icon="el-icon-document" @click="getHtml">
@@ -62,7 +65,10 @@ export default {
   components: { MarkdownEditor },
   data() {
     return {
-      content: content,
+      content1: content,
+      content2: content,
+      content3: content,
+      content4: content,
       html: '',
       languageTypeList: {
         'en': 'en_US',

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

@@ -61,14 +61,14 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" >
+<style lang="scss" >
 .box-card-component{
   .el-card__header {
     padding: 0px!important;
   }
 }
 </style>
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .box-card-component {
   .box-card-header {
     position: relative;

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

@@ -70,7 +70,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .panel-group {
   margin-top: 18px;
   .card-panel-col{

src/views/dashboard/admin/index.vue

@@ -96,7 +96,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .dashboard-editor-container {
   padding: 32px;
   background-color: rgb(240, 242, 245);

src/views/dashboard/editor/index.vue

@@ -40,7 +40,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
   .emptyGif {
     display: block;
     width: 45%;

src/views/documentation/index.vue

@@ -29,7 +29,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .documentation-container {
   margin: 50px;
   .document-btn {

src/views/errorPage/401.vue

@@ -58,7 +58,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
   .errPage-container {
     width: 800px;
     max-width: 100%;

src/views/errorPage/404.vue

@@ -41,7 +41,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .wscn-http404-container{
   transform: translate(-50%,-50%);
   position: absolute;

src/views/example/components/ArticleDetail.vue

@@ -234,7 +234,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 @import "~@/styles/mixin.scss";
 .createPost-container {
   position: relative;

src/views/login/index.vue

@@ -171,7 +171,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss">
+<style lang="scss">
 /* 修复input 背景不协调 和光标变色 */
 /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
 
@@ -222,7 +222,7 @@ $cursor: #fff;
 }
 </style>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 $bg:#2d3a4b;
 $dark_gray:#889aa4;
 $light_gray:#eee;

src/views/login/socialsignin.vue

@@ -35,7 +35,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
   .social-signup-container {
     margin: 20px 0;
     .sign-btn {

src/views/pdf/download.vue

@@ -42,7 +42,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss">
+<style lang="scss">
 @mixin clearfix {
   &:before {
     display: table;

src/views/permission/directive.vue

@@ -89,7 +89,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .app-container {
   /deep/ .permission-alert {
     width: 320px;

src/views/svg-icons/index.vue

@@ -42,7 +42,7 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .icons-container {
   margin: 10px 20px 0;
   overflow: hidden;

vue.config.js

@@ -103,13 +103,13 @@ module.exports = {
       .when(process.env.NODE_ENV !== 'development',
         config => {
           config
-          // .plugin('ScriptExtHtmlWebpackPlugin')
+            .plugin('ScriptExtHtmlWebpackPlugin')
-          // .after('html')
+            .after('html')
-          // .use('script-ext-html-webpack-plugin', [{
+            .use('script-ext-html-webpack-plugin', [{
-          //   // `runtime` must same as runtimeChunk name. default is `runtime`
+            // `runtime` must same as runtimeChunk name. default is `runtime`
-          //   inline: /runtime\..*\.js$/
+              inline: /runtime\..*\.js$/
-          // }])
+            }])
-          // .end()
+            .end()
           config
             .optimization.splitChunks({
               chunks: 'all',