更新: 升级开发环境至 vue-cli3; 更新依赖库版本；解决 IE11 下不能正确显示问题；

src/components/analysis/HotSearch.vue

@@ -26,6 +26,7 @@
       :dataSource="searchData"
       :columns="columns" size="small"
       :pagination="{style: { marginBottom: 0 }, pageSize: 5}"
+      rowKey="index"
     >
       <a href="#/" slot="keyword" slot-scope="text">{{text}}</a>
       <span slot="rang" slot-scope="text">{{text}} %<a-icon type="caret-up" /> </span>

src/components/chart/MiniArea.vue

@@ -18,7 +18,7 @@ const beginDay = new Date().getTime()
 const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]
 for (let i = 0; i < fakeY.length; i += 1) {
   data.push({
-    x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'YYYY-MM-DD'),
+    x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
     y: fakeY[i]
   })
 }

src/components/chart/MiniBar.vue

@@ -18,7 +18,7 @@ const beginDay = new Date().getTime()
 const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]
 for (let i = 0; i < fakeY.length; i += 1) {
   data.push({
-    x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'YYYY-MM-DD'),
+    x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
     y: fakeY[i]
   })
 }

src/components/checkbox/ColorCheckbox.vue

@@ -102,7 +102,7 @@ export default {
   },
   inject: ['groupContext'],
   watch: {
-    'sChecked': function (val) {
+    'sChecked': function () {
       const value = {
         value: this.value,
         color: this.color,

src/components/checkbox/ImgCheckbox.vue

@@ -94,7 +94,7 @@ export default {
   },
   inject: ['groupContext'],
   watch: {
-    'sChecked': function (val) {
+    'sChecked': function () {
       const option = {
         value: this.value,
         checked: this.sChecked

src/components/menu/SiderMenu.vue

@@ -2,7 +2,7 @@
   <a-layout-sider :class="[theme, 'sider', isMobile ? null : 'shadow']" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
     <div :class="['logo', theme]">
       <router-link to="/dashboard/workplace">
-        <img src="static/img/vue-antd-logo.png">
+        <img src="@/assets/img/vue-antd-logo.png">
         <h1>{{systemName}}</h1>
       </router-link>
     </div>

src/components/menu/menu.js

@@ -98,8 +98,9 @@ export default {
         },
         [
           h(
-            'a',
-            {attrs: {href: '#' + menu.path}},
+            'RouterLink',
+            // {attrs: {href: '#' + menu.path}},
+            {attrs: {to: menu.path}},
             [
               this.renderIcon(h, menu.icon),
               h('span', [menu.name])

src/components/setting/Setting.vue

@@ -68,7 +68,6 @@
 
 <script>
 import SettingItem from './SettingItem'
-import StyleItem from './StyleItem'
 import ColorCheckbox from '../checkbox/ColorCheckbox'
 import ImgCheckbox from '../checkbox/ImgCheckbox'
 import Clipboard from 'clipboard'
@@ -78,7 +77,7 @@ const ImgCheckboxGroup = ImgCheckbox.Group
 
 export default {
   name: 'Setting',
-  components: {ImgCheckboxGroup, ImgCheckbox, ColorCheckboxGroup, ColorCheckbox, StyleItem, SettingItem},
+  components: {ImgCheckboxGroup, ImgCheckbox, ColorCheckboxGroup, ColorCheckbox, SettingItem},
   computed: {
     multipage () {
       return this.$store.state.setting.multipage

src/components/table/StandardTable.vue

@@ -4,12 +4,14 @@
       <a-alert type="info" :show-icon="true">
         <div slot="message">
           已选择&nbsp;<a style="font-weight: 600">{{selectedRows.length}}</a>&nbsp;项&nbsp;&nbsp;
-          <template  v-for="(item, index) in needTotalList" v-if="item.needTotal">
-            {{item.title}}总计&nbsp;
-            <a :key="index" style="font-weight: 600">
-            {{item.customRender ? item.customRender(item.total) : item.total}}
-            </a>&nbsp;&nbsp;
-          </template>
+          <div  v-for="(item, index) in needTotalList" :key="index">
+            <div v-if="item.needTotal">
+              {{item.title}}总计&nbsp;
+              <a :key="index" style="font-weight: 600">
+                {{item.customRender ? item.customRender(item.total) : item.total}}
+              </a>&nbsp;&nbsp;
+            </div>
+          </div>
           <a style="margin-left: 24px">清空</a>
         </div>
       </a-alert>

src/components/tool/Drawer.vue

@@ -2,10 +2,10 @@
   <div >
     <div :class="['mask', openDrawer ? 'open' : 'close']" @click="close"></div>
     <div :class="['drawer', placement, openDrawer ? 'open' : 'close']">
-      <div ref="drawer" style="position: relative; height: 100%;">
+      <div ref="drawer" class="content">
         <slot></slot>
       </div>
-      <div v-if="showHandler" :class="['handler-container', placement]" ref="handler" @click="handle">
+      <div v-if="showHandler" :class="['handler-container', placement, openDrawer ? 'open' : 'close']" ref="handler" @click="handle">
         <slot v-if="$slots.handler" name="handler"></slot>
         <div v-else class="handler">
           <a-icon :type="openDrawer ? 'close'  : 'bars'" />
@@ -44,11 +44,11 @@ export default {
     this.drawerWidth = this.getDrawerWidth()
   },
   watch: {
-    'drawerWidth': function (val) {
+    'drawerWidth': function () {
       if (this.placement === 'left') {
-        this.$refs.handler.style.left = val + 'px'
+        //this.$refs.handler.style.left = val + 'px'
       } else {
-        this.$refs.handler.style.right = val + 'px'
+        //this.$refs.handler.style.right = val + 'px'
       }
     }
   },
@@ -92,36 +92,48 @@ export default {
     &.left{
       left: 0px;
       &.open{
-        box-shadow: 2px 0 8px rgba(0,0,0,.15);
+        .content{
+          box-shadow: 2px 0 8px rgba(0,0,0,.15);
+        }
       }
       &.close{
-        transform: translateX(-100%);
+        transform: translateX(-100%) translateX(40px);
       }
     }
     &.right{
       right: 0px;
+      .content{
+        float: right;
+      }
       &.open{
-        box-shadow: -2px 0 8px rgba(0,0,0,.15);
+        .content{
+          box-shadow: -2px 0 8px rgba(0,0,0,.15);
+        }
       }
       &.close{
-        transform: translateX(100%);
+        transform: translateX(100%) translateX(-40px);
       }
     }
     .sider{
       height: 100%;
     }
   }
+  .content{
+    display: inline-block;
+    height: 100%;
+  }
   .handler-container{
-    position: fixed;
-    top: 200px;
+    display: inline-block;
     text-align: center;
     transition: all 0.5s;
     cursor: pointer;
+    vertical-align: top;
+    margin-top: 200px;
+    z-index: 100;
     .handler {
       height: 40px;
       width: 40px;
       background-color: #fff;
-      z-index: 100;
       font-size: 26px;
       box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
       line-height: 40px;

src/layouts/GlobalHeader.vue

@@ -2,7 +2,7 @@
   <a-layout-header :class="[theme, 'global-header']">
     <div :class="['global-header-wide', layout]">
       <router-link v-if="isMobile || layout === 'head'" to="/" :class="['logo', isMobile ? null : 'pc', theme]">
-        <img width="32" src="static/img/vue-antd-logo.png" />
+        <img width="32" src="@/assets/img/vue-antd-logo.png" />
         <h1 v-if="!isMobile">{{systemName}}</h1>
       </router-link>
       <a-divider v-if="isMobile" type="vertical" />

src/layouts/MenuView.vue

@@ -53,7 +53,7 @@ export default {
     this.activePage = this.$route.fullPath
   },
   watch: {
-    '$route': function (newRoute, oldRoute) {
+    '$route': function (newRoute) {
       this.activePage = newRoute.fullPath
       if (!this.multipage) {
         this.linkList = [newRoute.fullPath]
@@ -66,7 +66,7 @@ export default {
     'activePage': function (key) {
       this.$router.push(key)
     },
-    'multipage': function (newVal, oldVal) {
+    'multipage': function (newVal) {
       if (!newVal) {
         this.linkList = [this.$route.fullPath]
         this.pageList = [this.$route]

src/layouts/PageLayout.vue

@@ -11,7 +11,7 @@
           </template>
         </div>
       </div>
-      <slot slot="extra" name="extra"></slot>
+      <slot v-if="this.$refs.extra" slot="extra" name="extra"></slot>
     </page-header>
     <div ref="page" :class="['page-content', layout]" >
       <slot ></slot>

src/layouts/PageView.vue

@@ -13,11 +13,10 @@
 </template>
 
 <script>
-import PageHeader from '../components/page/PageHeader'
 import PageLayout from './PageLayout'
 export default {
   name: 'PageView',
-  components: {PageLayout, PageHeader},
+  components: {PageLayout},
   data () {
     return {
       title: '',

src/main.js

@@ -1,7 +1,5 @@
-// The Vue build version to load with the `import` command
-// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
-import App from './App'
+import App from './App.vue'
 import router from './router/lazy'
 import 'ant-design-vue/dist/antd.css'
 import Antd from 'ant-design-vue'
@@ -16,17 +14,14 @@ Vue.config.productionTip = false
 Vue.use(Viser)
 Vue.use(Antd)
 
-/* eslint-disable no-new */
 new Vue({
-  el: '#app',
   router,
   store,
-  components: { App },
-  template: '<App/>',
+  render: h => h(App),
   mounted () {
     var db = new PouchDB('admindb')
     db.get('currUser').then(doc => {
       this.$store.commit('account/setuser', doc.user)
     })
-  }
-})
+  },
+}).$mount('#app')

src/pages/dashboard/WorkPlace.vue

@@ -79,14 +79,13 @@
 </template>
 
 <script>
-import PageHeader from '../../components/page/PageHeader'
 import PageLayout from '../../layouts/PageLayout'
 import HeadInfo from '../../components/tool/HeadInfo'
 import Radar from '../../components/chart/Radar'
 
 export default {
   name: 'WorkPlace',
-  components: {Radar, HeadInfo, PageLayout, PageHeader},
+  components: {Radar, HeadInfo, PageLayout},
   data () {
     return {
       projects: [],

src/pages/form/advancedForm/TableForm.vue

@@ -5,7 +5,7 @@
       :dataSource="dataSource"
       :pagination="false"
     >
-      <template  v-for="(col, i) in ['name', 'workId', 'department']" :slot="col" slot-scope="text, record, index">
+      <template  v-for="(col, i) in ['name', 'workId', 'department']" :slot="col" slot-scope="text, record">
           <a-input
             :key="col"
             v-if="record.editable"
@@ -16,7 +16,7 @@
           />
           <template v-else>{{text}}</template>
       </template>
-      <template slot="operation" slot-scope="text, record, index">
+      <template slot="operation" slot-scope="text, record">
         <template v-if="record.editable">
           <span v-if="record.isNew">
             <a @click="saveRow(record.key)">添加</a>

src/pages/list/CardList.vue

@@ -4,8 +4,8 @@
       :grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
       :dataSource="dataSource"
     >
-      <a-list-item slot="renderItem" slot-scope="item, index">
-        <template v-if="item === null">
+      <a-list-item slot="renderItem" slot-scope="item">
+        <template v-if="item.add">
           <a-button class="new-btn" type="dashed">
             <a-icon type="plus" />新增产品
           </a-button>
@@ -28,7 +28,9 @@
 
 <script>
 const dataSource = []
-dataSource.push(null)
+dataSource.push({
+  add: true
+})
 for (let i = 0; i < 11; i++) {
   dataSource.push({
     title: 'Alipay',
@@ -64,7 +66,7 @@ export default {
     background-color: #fff;
     border-radius: 2px;
     width: 100%;
-    height: 188px;
+    height: 187px;
   }
   .meta-content{
     position: relative;

src/pages/login/Login.vue

@@ -3,7 +3,7 @@
     <div class="content">
       <div class="top">
         <div class="header">
-          <img alt="logo" class="logo" src="static/img/vue-antd-logo.png" />
+          <img alt="logo" class="logo" src="@/assets/img/vue-antd-logo.png" />
           <span class="title">{{systemName}}</span>
         </div>
         <div class="desc">Ant Design 是西湖区最具影响力的 Web 设计规范</div>
@@ -97,7 +97,7 @@ export default {
   methods: {
     onSubmit (e) {
       e.preventDefault()
-      this.form.validateFields((err, values) => {
+      this.form.validateFields((err) => {
         if (!err) {
           this.logging = true
           this.$axios.post('/login', {