refine settings

update
refine script and css
2019-03-26 11:43:37 +08:00 · 2019-03-25 18:37:22 +08:00 · 2019-03-25 17:57:14 +08:00 · 2019-03-25 16:36:40 +08:00 · 2019-03-25 15:49:13 +08:00 · 2019-03-25 15:18:52 +08:00
46 changed files with 290 additions and 125 deletions
--- a/build/index.js
+++ b/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 {
--- a/package.json
+++ b/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",
-    "build:report": "node build/index.js --report",
+    "preview": "node build/index.js --preview",
    "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",
-    "element-ui": "2.6.1",
+    "echarts": "4.2.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",
-    "tui-editor": "1.3.2",
-    "vue": "2.6.8",
+    "sortablejs": "1.8.4",
+    "tui-editor": "1.3.3",
+    "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",
-    "vuedraggable": "2.17.0",
+    "vue-splitpane": "1.0.4",
+    "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-unit-jest": "3.5.0",
-    "@vue/cli-service": "3.5.0",
+    "@vue/cli-plugin-babel": "3.5.1",
+    "@vue/cli-plugin-unit-jest": "3.5.1",
+    "@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",
--- a/src/components/Breadcrumb/index.vue
+++ b/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;
--- a/src/components/DndList/index.vue
+++ b/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;
--- a/src/components/Kanban/index.vue
+++ b/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">
--- a/src/components/MDinput/index.vue
+++ b/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;
--- a/src/components/RightPanel/index.vue
+++ b/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 {
--- a/src/components/Share/dropdownMenu.vue
+++ b/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 {
--- a/src/components/Tinymce/components/editorImage.vue
+++ b/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 {
--- a/src/components/Upload/singleImage.vue
+++ b/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%;
--- a/src/components/Upload/singleImage2.vue
+++ b/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%;
--- a/src/components/Upload/singleImage3.vue
+++ b/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%;
--- a/src/lang/en.js
+++ b/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'
  }
 }
--- a/src/lang/es.js
+++ b/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'
  }
 }
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -163,5 +163,12 @@ export default {
    close: '关闭',
    closeOthers: '关闭其它',
    closeAll: '关闭所有'
+  },
+  settings: {
+    title: '系统布局配置',
+    theme: '主题色',
+    tagsView: '开启 Tags-View',
+    fixedHeader: '固定 Header',
+    sidebarLogo: '侧边栏 Logo'
  }
 }
--- a/src/layout/Layout.vue
+++ b/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{
+
+    &.mobile.openSidebar {
      position: fixed;
      top: 0;
    }
  }
+
  .drawer-bg {
    background: #000;
    opacity: 0.3;
@@ -80,18 +82,21 @@ export default {
    position: absolute;
    z-index: 999;
  }
-  .fixed-header{
+
+  .fixed-header {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9;
    width: calc(100% - #{$sideBarWidth});
-     transition: width 0.28s;
+    transition: width 0.28s;
  }
-  .hideSidebar .fixed-header{
-     width: calc(100% - 54px)
+
+  .hideSidebar .fixed-header {
+    width: calc(100% - 54px)
  }
-  .mobile .fixed-header{
+
+  .mobile .fixed-header {
    width: 100%;
  }
 </style>
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -22,9 +22,9 @@ export default {
 }
 </script>

-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
 .app-main {
-  /*50= navbar  50  */
+  /* 50= navbar  50  */
  min-height: calc(100vh - 50px);
  width: 100%;
  position: relative;
@@ -32,17 +32,17 @@ export default {
 }

 .fixed-header+.app-main {
-  margin-top: 50px;
+  padding-top: 50px;
 }

 .hasTagsView {
  .app-main {
-    /*84 = navbar + tags-view = 50 + 34 */
+    /* 84 = navbar + tags-view = 50 + 34 */
    min-height: calc(100vh - 84px);
  }

  .fixed-header+.app-main {
-    margin-top: 80px;
+    padding-top: 84px;
  }
 }
 </style>
--- a/src/layout/components/Navbar.vue
+++ b/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)
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -1,25 +1,28 @@
 <template>
  <div class="drawer-container">
    <div>
-      <h3 class="drawer-title">
-        系统布局配置
-      </h3>
+      <h3 class="drawer-title">{{ $t('settings.title') }}</h3>

      <div class="drawer-item">
-        <span>主题色</span>
-        <theme-picker style="float: right;height: 26px;margin: -3px 5px 0 0;" />
+        <span>{{ $t('settings.theme') }}</span>
+        <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 {
-      sidebarLogo: true
-    }
+    return {}
  },
  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;
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/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>
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -1,31 +1,38 @@
 <template>
-  <el-scrollbar wrap-class="scrollbar-wrapper">
-    <el-menu
-      :default-active="$route.path"
-      :collapse="isCollapse"
-      :background-color="variables.menuBg"
-      :text-color="variables.menuText"
-      :active-text-color="variables.menuActiveText"
-      :collapse-transition="false"
-      mode="vertical"
-    >
-      <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
-    </el-menu>
-  </el-scrollbar>
+  <div :class="{'has-logo':showLogo}">
+    <logo v-if="showLogo" :collapse="isCollapse" />
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-menu
+        :default-active="$route.path"
+        :collapse="isCollapse"
+        :background-color="variables.menuBg"
+        :text-color="variables.menuText"
+        :active-text-color="variables.menuActiveText"
+        :collapse-transition="false"
+        mode="vertical"
+      >
+        <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
    },
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/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;
--- a/src/layout/components/TagsView/index.vue
+++ b/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 {
--- a/src/router/index.js
+++ b/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,
--- a/src/settings.js
+++ b/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']
--- a/src/store/modules/settings.js
+++ b/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 = {
--- a/src/styles/sidebar.scss
+++ b/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;
        }
--- a/src/styles/transition.scss
+++ b/src/styles/transition.scss
@@ -1,4 +1,4 @@
-//globl transition css
+//global transition css

 /*fade*/
 .fade-enter-active,
--- a/src/views/components-demo/countTo.vue
+++ b/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:
--- a/src/views/components-demo/dragKanban.vue
+++ b/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="2" :list="list2" :options="options" class="kanban working" header-text="Working" />
-    <Kanban :key="3" :list="list3" :options="options" class="kanban done" header-text="Done" />
+    <Kanban :key="1" :list="list1" :group="group" class="kanban todo" header-text="Todo" />
+    <Kanban :key="2" :list="list2" :group="group" class="kanban working" header-text="Working" />
+    <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 },
--- a/src/views/components-demo/jsonEditor.vue
+++ b/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>
--- a/src/views/components-demo/markdown.vue
+++ b/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 target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/feature/component/markdown-editor.html">
+      <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"
+      >
        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
-        ref="markdownEditor"
-        v-model="content"
-        :options="{ toolbarItems: ['heading','bold','italic']}"
-      />
+      <markdown-editor v-model="content3" :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" />
-      <markdown-editor v-model="content" :language="language" height="300px" />
+      <el-alert
+        :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',
--- a/src/views/dashboard/admin/components/BoxCard.vue
+++ b/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;
--- a/src/views/dashboard/admin/components/PanelGroup.vue
+++ b/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{
--- a/src/views/dashboard/admin/index.vue
+++ b/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);
--- a/src/views/dashboard/editor/index.vue
+++ b/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%;
--- a/src/views/documentation/index.vue
+++ b/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 {
--- a/src/views/errorPage/401.vue
+++ b/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%;
--- a/src/views/errorPage/404.vue
+++ b/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;
--- a/src/views/example/components/ArticleDetail.vue
+++ b/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;
--- a/src/views/login/index.vue
+++ b/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;
--- a/src/views/login/socialsignin.vue
+++ b/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 {
--- a/src/views/pdf/download.vue
+++ b/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;
--- a/src/views/permission/directive.vue
+++ b/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;
--- a/src/views/svg-icons/index.vue
+++ b/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;
--- a/vue.config.js
+++ b/vue.config.js
@@ -103,13 +103,13 @@ module.exports = {
      .when(process.env.NODE_ENV !== 'development',
        config => {
          config
-          // .plugin('ScriptExtHtmlWebpackPlugin')
-          // .after('html')
-          // .use('script-ext-html-webpack-plugin', [{
-          //   // `runtime` must same as runtimeChunk name. default is `runtime`
-          //   inline: /runtime\..*\.js$/
-          // }])
-          // .end()
+            .plugin('ScriptExtHtmlWebpackPlugin')
+            .after('html')
+            .use('script-ext-html-webpack-plugin', [{
+            // `runtime` must same as runtimeChunk name. default is `runtime`
+              inline: /runtime\..*\.js$/
+            }])
+            .end()
          config
            .optimization.splitChunks({
              chunks: 'all',
Author	SHA1	Message	Date
Pan	3a796471c3	refine settings	2019-03-26 11:43:37 +08:00
Pan	387b206199	update	2019-03-25 18:37:22 +08:00
Pan	b9fd5ae6d3	refine script and css	2019-03-25 17:57:14 +08:00
Pan	297959083c	bump	2019-03-25 16:36:40 +08:00
Pan	5e3ae144b3	perf settings	2019-03-25 15:49:13 +08:00
Pan	c48777ff2d	rm	2019-03-25 15:18:52 +08:00
Pan	3c0415c86d	Merge branch 'v4.0' of https://github.com/PanJiaChen/vue-element-admin into v4.0	2019-03-25 15:16:13 +08:00
花裤衩	58a66d4902	feature: add sidebar logo (#1767 )	2019-03-25 15:15:40 +08:00
Pan	960b562e84	update vue.config.js	2019-03-25 14:12:23 +08:00
Pan	ea0602a50f	add comment	2019-03-25 10:42:30 +08:00