refactor: update antd-vue 1.5.3

- merge components use js to lazy_use.js
- remove old Result components
- remove Vue.ls
- add `store.js`
- rename axios service

package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@antv/data-set": "^0.10.2",
-    "ant-design-vue": "1.5.0-rc.6",
+    "ant-design-vue": "1.5.3",
     "axios": "^0.19.0",
     "core-js": "^3.1.2",
     "enquire.js": "^2.1.6",
@@ -24,11 +24,11 @@
     "mockjs2": "1.0.8",
     "moment": "^2.24.0",
     "nprogress": "^0.2.0",
+    "store": "^2.0.12",
     "viser-vue": "^2.4.6",
     "vue": "^2.6.10",
     "vue-clipboard2": "^0.2.1",
     "vue-cropper": "0.4.9",
-    "vue-ls": "^3.2.1",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.1.2",
     "vue-svg-component-runtime": "^1.0.1",

src/api/index.js

@@ -1,12 +0,0 @@
-const api = {
-  Login: '/auth/login',
-  Logout: '/auth/logout',
-  ForgePassword: '/auth/forge-password',
-  Register: '/auth/register',
-  twoStepCode: '/auth/2step-code',
-  SendSms: '/account/sms',
-  SendSmsErr: '/account/sms_err',
-  // get my info
-  UserInfo: '/user/info'
-}
-export default api

src/api/login.js

@@ -1,5 +1,17 @@
-import api from './index'
-import { axios } from '@/utils/request'
+import request from '@/utils/request'
+
+const userApi = {
+  Login: '/auth/login',
+  Logout: '/auth/logout',
+  ForgePassword: '/auth/forge-password',
+  Register: '/auth/register',
+  twoStepCode: '/auth/2step-code',
+  SendSms: '/account/sms',
+  SendSmsErr: '/account/sms_err',
+  // get my info
+  UserInfo: '/user/info',
+  UserMenu: '/user/nav'
+}
 
 /**
  * login func
@@ -13,24 +25,24 @@ import { axios } from '@/utils/request'
  * @returns {*}
  */
 export function login (parameter) {
-  return axios({
-    url: '/auth/login',
+  return request({
+    url: userApi.Login,
     method: 'post',
     data: parameter
   })
 }
 
 export function getSmsCaptcha (parameter) {
-  return axios({
-    url: api.SendSms,
+  return request({
+    url: userApi.SendSms,
     method: 'post',
     data: parameter
   })
 }
 
 export function getInfo () {
-  return axios({
-    url: '/user/info',
+  return request({
+    url: userApi.UserInfo,
     method: 'get',
     headers: {
       'Content-Type': 'application/json;charset=UTF-8'
@@ -38,16 +50,16 @@ export function getInfo () {
   })
 }
 
-export function getCurrentUserNav (token) {
-  return axios({
-    url: '/user/nav',
+export function getCurrentUserNav () {
+  return request({
+    url: userApi.UserMenu,
     method: 'get'
   })
 }
 
 export function logout () {
-  return axios({
-    url: '/auth/logout',
+  return request({
+    url: userApi.Logout,
     method: 'post',
     headers: {
       'Content-Type': 'application/json;charset=UTF-8'
@@ -60,8 +72,8 @@ export function logout () {
  * @param parameter {*}
  */
 export function get2step (parameter) {
-  return axios({
-    url: api.twoStepCode,
+  return request({
+    url: userApi.twoStepCode,
     method: 'post',
     data: parameter
   })

src/api/manage.js

@@ -1,4 +1,4 @@
-import { axios } from '@/utils/request'
+import request from '@/utils/request'
 
 const api = {
   user: '/user',
@@ -12,7 +12,7 @@ const api = {
 export default api
 
 export function getUserList (parameter) {
-  return axios({
+  return request({
     url: api.user,
     method: 'get',
     params: parameter
@@ -20,7 +20,7 @@ export function getUserList (parameter) {
 }
 
 export function getRoleList (parameter) {
-  return axios({
+  return request({
     url: api.role,
     method: 'get',
     params: parameter
@@ -28,7 +28,7 @@ export function getRoleList (parameter) {
 }
 
 export function getServiceList (parameter) {
-  return axios({
+  return request({
     url: api.service,
     method: 'get',
     params: parameter
@@ -36,7 +36,7 @@ export function getServiceList (parameter) {
 }
 
 export function getPermissions (parameter) {
-  return axios({
+  return request({
     url: api.permissionNoPager,
     method: 'get',
     params: parameter
@@ -44,7 +44,7 @@ export function getPermissions (parameter) {
 }
 
 export function getOrgTree (parameter) {
-  return axios({
+  return request({
     url: api.orgTree,
     method: 'get',
     params: parameter
@@ -54,7 +54,7 @@ export function getOrgTree (parameter) {
 // id == 0 add     post
 // id != 0 update  put
 export function saveService (parameter) {
-  return axios({
+  return request({
     url: api.service,
     method: parameter.id === 0 ? 'post' : 'put',
     data: parameter

src/components/GlobalFooter/GlobalFooter.vue

@@ -16,7 +16,7 @@
     </div>
     <div class="copyright">
       Copyright
-      <a-icon type="copyright" /> 2018 <span>白鹭学园技术组出品</span>
+      <a-icon type="copyright" /> 2018 <span>vueComponent</span>
     </div>
   </div>
 </template>

src/components/Result/Result.vue

@@ -1,109 +0,0 @@
-<template>
-  <div class="result">
-    <div>
-      <a-icon :class="{ 'icon': true, [`${type}`]: true }" :type="localIsSuccess ? 'check-circle' : 'close-circle'"/>
-    </div>
-    <div class="title">
-      <slot name="title">
-        {{ title }}
-      </slot>
-    </div>
-    <div class="description">
-      <slot name="description">
-        {{ description }}
-      </slot>
-    </div>
-    <div class="extra" v-if="$slots.default">
-      <slot></slot>
-    </div>
-    <div class="action" v-if="$slots.action">
-      <slot name="action"></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-const resultEnum = ['success', 'error']
-
-export default {
-  name: 'Result',
-  props: {
-    /** @Deprecated */
-    isSuccess: {
-      type: Boolean,
-      default: false
-    },
-    type: {
-      type: String,
-      default: resultEnum[0],
-      validator (val) {
-        return (val) => resultEnum.includes(val)
-      }
-    },
-    title: {
-      type: String,
-      default: ''
-    },
-    description: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    localIsSuccess: function () {
-      return this.type === resultEnum[0]
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-  .result {
-    text-align: center;
-    width: 72%;
-    margin: 0 auto;
-    padding: 24px 0 8px;
-
-    .icon {
-      font-size: 72px;
-      line-height: 72px;
-      margin-bottom: 24px;
-    }
-    .success {
-      color: #52c41a;
-    }
-    .error {
-      color: red;
-    }
-    .title {
-      font-size: 24px;
-      color: rgba(0, 0, 0, .85);
-      font-weight: 500;
-      line-height: 32px;
-      margin-bottom: 16px;
-    }
-    .description {
-      font-size: 14px;
-      line-height: 22px;
-      color: rgba(0, 0, 0, 0.45);
-      margin-bottom: 24px;
-    }
-    .extra {
-      background: #fafafa;
-      padding: 24px 40px;
-      border-radius: 2px;
-      text-align: left;
-    }
-    .action {
-      margin-top: 32px;
-    }
-  }
-
-  .mobile {
-    .result {
-      width: 100%;
-      margin: 0 auto;
-      padding: unset;
-    }
-  }
-</style>

src/components/Result/index.js

@@ -1,2 +0,0 @@
-import Result from './Result.vue'
-export default Result

src/components/SettingDrawer/SettingDrawer.vue

@@ -230,13 +230,7 @@ export default {
   autoHideHeader: ${this.autoHideHeader}, //  auto hide header
   colorWeak: ${this.colorWeak},
   multiTab: ${this.multiTab},
-  production: process.env.NODE_ENV === 'production' && process.env.VUE_APP_PREVIEW !== 'true',
-  // vue-ls options
-  storageOptions: {
-    namespace: 'pro__',
-    name: 'ls',
-    storage: 'local',
-  }
+  production: process.env.NODE_ENV === 'production' && process.env.VUE_APP_PREVIEW !== 'true'
 }`
       this.$copyText(text).then(message => {
         console.log('copy', message)

src/components/index.js

@@ -22,7 +22,6 @@ import Tree from '@/components/Tree/Tree'
 import Trend from '@/components/Trend'
 import STable from '@/components/Table'
 import MultiTab from '@/components/MultiTab'
-import Result from '@/components/Result'
 import IconSelector from '@/components/IconSelector'
 import TagSelect from '@/components/TagSelect'
 import ExceptionPage from '@/components/Exception'
@@ -55,7 +54,6 @@ export {
   Tree,
   STable,
   MultiTab,
-  Result,
   ExceptionPage,
   IconSelector,
   TagSelect,

src/config/defaultSettings.js

@@ -23,11 +23,5 @@ export default {
   autoHideHeader: false, //  auto hide header
   colorWeak: false,
   multiTab: false,
-  production: process.env.NODE_ENV === 'production' && process.env.VUE_APP_PREVIEW !== 'true',
-  // vue-ls options
-  storageOptions: {
-    namespace: 'pro__', // key prefix
-    name: 'ls', // name variable Vue.[ls] or this.[$ls],
-    storage: 'local' // storage name session, local, memory
-  }
+  production: process.env.NODE_ENV === 'production' && process.env.VUE_APP_PREVIEW !== 'true'
 }

src/core/bootstrap.js

@@ -1,5 +1,5 @@
-import Vue from 'vue'
 import store from '@/store/'
+import storage from 'store'
 import {
   ACCESS_TOKEN,
   DEFAULT_COLOR,
@@ -18,17 +18,17 @@ import config from '@/config/defaultSettings'
 export default function Initializer () {
   console.log(`API_URL: ${process.env.VUE_APP_API_BASE_URL}`)
 
-  store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
-  store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))
-  store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout))
-  store.commit('TOGGLE_FIXED_HEADER', Vue.ls.get(DEFAULT_FIXED_HEADER, config.fixedHeader))
-  store.commit('TOGGLE_FIXED_SIDERBAR', Vue.ls.get(DEFAULT_FIXED_SIDEMENU, config.fixSiderbar))
-  store.commit('TOGGLE_CONTENT_WIDTH', Vue.ls.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth))
-  store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader))
-  store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
-  store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
-  store.commit('TOGGLE_MULTI_TAB', Vue.ls.get(DEFAULT_MULTI_TAB, config.multiTab))
-  store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
+  store.commit('SET_SIDEBAR_TYPE', storage.get(SIDEBAR_TYPE, true))
+  store.commit('TOGGLE_THEME', storage.get(DEFAULT_THEME, config.navTheme))
+  store.commit('TOGGLE_LAYOUT_MODE', storage.get(DEFAULT_LAYOUT_MODE, config.layout))
+  store.commit('TOGGLE_FIXED_HEADER', storage.get(DEFAULT_FIXED_HEADER, config.fixedHeader))
+  store.commit('TOGGLE_FIXED_SIDERBAR', storage.get(DEFAULT_FIXED_SIDEMENU, config.fixSiderbar))
+  store.commit('TOGGLE_CONTENT_WIDTH', storage.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth))
+  store.commit('TOGGLE_FIXED_HEADER_HIDDEN', storage.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader))
+  store.commit('TOGGLE_WEAK', storage.get(DEFAULT_COLOR_WEAK, config.colorWeak))
+  store.commit('TOGGLE_COLOR', storage.get(DEFAULT_COLOR, config.primaryColor))
+  store.commit('TOGGLE_MULTI_TAB', storage.get(DEFAULT_MULTI_TAB, config.multiTab))
+  store.commit('SET_TOKEN', storage.get(ACCESS_TOKEN))
 
   // last step
 }

src/core/lazy_lib/components_use.js

@@ -1,99 +0,0 @@
-
-/* eslint-disable */
-/**
- * 该文件是为了按需加载，剔除掉了一些不需要的框架组件。
- * 减少了编译支持库包大小
- *
- * 当需要更多组件依赖时，在该文件加入即可
- */
-import Vue from 'vue'
-import {
-  ConfigProvider,
-  Layout,
-  Input,
-  InputNumber,
-  Button,
-  Switch,
-  Radio,
-  Checkbox,
-  Select,
-  Card,
-  Form,
-  Row,
-  Col,
-  Modal,
-  Table,
-  Tabs,
-  Icon,
-  Badge,
-  Popover,
-  Dropdown,
-  List,
-  Avatar,
-  Breadcrumb,
-  Steps,
-  Spin,
-  Menu,
-  Drawer,
-  Tooltip,
-  Alert,
-  Tag,
-  Divider,
-  DatePicker,
-  TimePicker,
-  Upload,
-  Progress,
-  Skeleton,
-  Popconfirm,
-  message,
-  notification
-} from 'ant-design-vue'
-// import VueCropper from 'vue-cropper'
-
-Vue.use(ConfigProvider)
-Vue.use(Layout)
-Vue.use(Input)
-Vue.use(InputNumber)
-Vue.use(Button)
-Vue.use(Switch)
-Vue.use(Radio)
-Vue.use(Checkbox)
-Vue.use(Select)
-Vue.use(Card)
-Vue.use(Form)
-Vue.use(Row)
-Vue.use(Col)
-Vue.use(Modal)
-Vue.use(Table)
-Vue.use(Tabs)
-Vue.use(Icon)
-Vue.use(Badge)
-Vue.use(Popover)
-Vue.use(Dropdown)
-Vue.use(List)
-Vue.use(Avatar)
-Vue.use(Breadcrumb)
-Vue.use(Steps)
-Vue.use(Spin)
-Vue.use(Menu)
-Vue.use(Drawer)
-Vue.use(Tooltip)
-Vue.use(Alert)
-Vue.use(Tag)
-Vue.use(Divider)
-Vue.use(DatePicker)
-Vue.use(TimePicker)
-Vue.use(Upload)
-Vue.use(Progress)
-Vue.use(Skeleton)
-Vue.use(Popconfirm)
-// Vue.use(VueCropper)
-Vue.use(notification)
-
-Vue.prototype.$confirm = Modal.confirm
-Vue.prototype.$message = message
-Vue.prototype.$notification = notification
-Vue.prototype.$info = Modal.info
-Vue.prototype.$success = Modal.success
-Vue.prototype.$error = Modal.error
-Vue.prototype.$warning = Modal.warning

src/core/lazy_use.js

@@ -1,9 +1,48 @@
 import Vue from 'vue'
-import VueStorage from 'vue-ls'
-import config from '@/config/defaultSettings'
 
 // base library
-import '@/core/lazy_lib/components_use'
+import {
+  ConfigProvider,
+  Layout,
+  Input,
+  InputNumber,
+  Button,
+  Switch,
+  Radio,
+  Checkbox,
+  Select,
+  Card,
+  Form,
+  Row,
+  Col,
+  Modal,
+  Table,
+  Tabs,
+  Icon,
+  Badge,
+  Popover,
+  Dropdown,
+  List,
+  Avatar,
+  Breadcrumb,
+  Steps,
+  Spin,
+  Menu,
+  Drawer,
+  Tooltip,
+  Alert,
+  Tag,
+  Divider,
+  DatePicker,
+  TimePicker,
+  Upload,
+  Progress,
+  Skeleton,
+  Popconfirm,
+  Result,
+  message,
+  notification
+} from 'ant-design-vue'
 import Viser from 'viser-vue'
 
 // ext library
@@ -14,12 +53,58 @@ import PageLoading from '@/components/PageLoading'
 import PermissionHelper from '@/utils/helper/permission'
 import './directives/action'
 
+Vue.use(ConfigProvider)
+Vue.use(Layout)
+Vue.use(Input)
+Vue.use(InputNumber)
+Vue.use(Button)
+Vue.use(Switch)
+Vue.use(Radio)
+Vue.use(Checkbox)
+Vue.use(Select)
+Vue.use(Card)
+Vue.use(Form)
+Vue.use(Row)
+Vue.use(Col)
+Vue.use(Modal)
+Vue.use(Table)
+Vue.use(Tabs)
+Vue.use(Icon)
+Vue.use(Badge)
+Vue.use(Popover)
+Vue.use(Dropdown)
+Vue.use(List)
+Vue.use(Avatar)
+Vue.use(Breadcrumb)
+Vue.use(Steps)
+Vue.use(Spin)
+Vue.use(Menu)
+Vue.use(Drawer)
+Vue.use(Tooltip)
+Vue.use(Alert)
+Vue.use(Tag)
+Vue.use(Divider)
+Vue.use(DatePicker)
+Vue.use(TimePicker)
+Vue.use(Upload)
+Vue.use(Progress)
+Vue.use(Skeleton)
+Vue.use(Popconfirm)
+Vue.use(Result)
+
+Vue.prototype.$confirm = Modal.confirm
+Vue.prototype.$message = message
+Vue.prototype.$notification = notification
+Vue.prototype.$info = Modal.info
+Vue.prototype.$success = Modal.success
+Vue.prototype.$error = Modal.error
+Vue.prototype.$warning = Modal.warning
+
 VueClipboard.config.autoSetContainer = true
 
 Vue.use(Viser)
 Vue.use(MultiTab)
 Vue.use(PageLoading)
-Vue.use(VueStorage, config.storageOptions)
 Vue.use(VueClipboard)
 Vue.use(PermissionHelper)
 Vue.use(VueCropper)

src/core/use.js

@@ -1,6 +1,4 @@
 import Vue from 'vue'
-import VueStorage from 'vue-ls'
-import config from '@/config/defaultSettings'
 
 // base library
 import Antd from 'ant-design-vue'
@@ -22,7 +20,6 @@ Vue.use(Antd)
 Vue.use(Viser)
 Vue.use(MultiTab)
 Vue.use(PageLoading)
-Vue.use(VueStorage, config.storageOptions)
 Vue.use(VueClipboard)
 Vue.use(PermissionHelper)
 Vue.use(VueCropper)

src/permission.js

@@ -1,7 +1,6 @@
-import Vue from 'vue'
 import router from './router'
 import store from './store'
-
+import storage from 'store'
 import NProgress from 'nprogress' // progress bar
 import '@/components/NProgress/nprogress.less' // progress bar custom style
 import notification from 'ant-design-vue/es/notification'
@@ -16,7 +15,7 @@ const defaultRoutePath = '/dashboard/workplace'
 router.beforeEach((to, from, next) => {
   NProgress.start() // start progress bar
   to.meta && (typeof to.meta.title !== 'undefined' && setDocumentTitle(`${to.meta.title} - ${domTitle}`))
-  if (Vue.ls.get(ACCESS_TOKEN)) {
+  if (storage.get(ACCESS_TOKEN)) {
     /* has token */
     if (to.path === '/user/login') {
       next({ path: defaultRoutePath })

src/store/modules/app.js

@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import storage from 'store'
 import {
   SIDEBAR_TYPE,
   DEFAULT_THEME,
@@ -29,10 +29,10 @@ const app = {
   mutations: {
     SET_SIDEBAR_TYPE: (state, type) => {
       state.sidebar = type
-      Vue.ls.set(SIDEBAR_TYPE, type)
+      storage.set(SIDEBAR_TYPE, type)
     },
     CLOSE_SIDEBAR: (state) => {
-      Vue.ls.set(SIDEBAR_TYPE, true)
+      storage.set(SIDEBAR_TYPE, true)
       state.sidebar = false
     },
     TOGGLE_DEVICE: (state, device) => {
@@ -40,39 +40,39 @@ const app = {
     },
     TOGGLE_THEME: (state, theme) => {
       // setStore('_DEFAULT_THEME', theme)
-      Vue.ls.set(DEFAULT_THEME, theme)
+      storage.set(DEFAULT_THEME, theme)
       state.theme = theme
     },
     TOGGLE_LAYOUT_MODE: (state, layout) => {
-      Vue.ls.set(DEFAULT_LAYOUT_MODE, layout)
+      storage.set(DEFAULT_LAYOUT_MODE, layout)
       state.layout = layout
     },
     TOGGLE_FIXED_HEADER: (state, fixed) => {
-      Vue.ls.set(DEFAULT_FIXED_HEADER, fixed)
+      storage.set(DEFAULT_FIXED_HEADER, fixed)
       state.fixedHeader = fixed
     },
     TOGGLE_FIXED_SIDERBAR: (state, fixed) => {
-      Vue.ls.set(DEFAULT_FIXED_SIDEMENU, fixed)
+      storage.set(DEFAULT_FIXED_SIDEMENU, fixed)
       state.fixSiderbar = fixed
     },
     TOGGLE_FIXED_HEADER_HIDDEN: (state, show) => {
-      Vue.ls.set(DEFAULT_FIXED_HEADER_HIDDEN, show)
+      storage.set(DEFAULT_FIXED_HEADER_HIDDEN, show)
       state.autoHideHeader = show
     },
     TOGGLE_CONTENT_WIDTH: (state, type) => {
-      Vue.ls.set(DEFAULT_CONTENT_WIDTH_TYPE, type)
+      storage.set(DEFAULT_CONTENT_WIDTH_TYPE, type)
       state.contentWidth = type
     },
     TOGGLE_COLOR: (state, color) => {
-      Vue.ls.set(DEFAULT_COLOR, color)
+      storage.set(DEFAULT_COLOR, color)
       state.color = color
     },
     TOGGLE_WEAK: (state, flag) => {
-      Vue.ls.set(DEFAULT_COLOR_WEAK, flag)
+      storage.set(DEFAULT_COLOR_WEAK, flag)
       state.weak = flag
     },
     TOGGLE_MULTI_TAB: (state, bool) => {
-      Vue.ls.set(DEFAULT_MULTI_TAB, bool)
+      storage.set(DEFAULT_MULTI_TAB, bool)
       state.multiTab = bool
     }
   },

src/store/modules/user.js

@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import storage from 'store'
 import { login, getInfo, logout } from '@/api/login'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
 import { welcome } from '@/utils/util'
@@ -38,7 +38,7 @@ const user = {
       return new Promise((resolve, reject) => {
         login(userInfo).then(response => {
           const result = response.result
-          Vue.ls.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000)
+          storage.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000)
           commit('SET_TOKEN', result.token)
           resolve()
         }).catch(error => {
@@ -89,7 +89,7 @@ const user = {
         }).finally(() => {
           commit('SET_TOKEN', '')
           commit('SET_ROLES', [])
-          Vue.ls.remove(ACCESS_TOKEN)
+          storage.remove(ACCESS_TOKEN)
         })
       })
     }

src/utils/request.js

@@ -1,20 +1,23 @@
-import Vue from 'vue'
 import axios from 'axios'
 import store from '@/store'
+import storage from 'store'
 import notification from 'ant-design-vue/es/notification'
 import { VueAxios } from './axios'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
 
 // 创建 axios 实例
-const service = axios.create({
-  baseURL: process.env.VUE_APP_API_BASE_URL, // api base_url
+const request = axios.create({
+  // API 请求的默认前缀
+  baseURL: process.env.VUE_APP_API_BASE_URL,
   timeout: 6000 // 请求超时时间
 })
 
-const err = (error) => {
+// 异常拦截处理器
+const errorHandler = (error) => {
   if (error.response) {
     const data = error.response.data
-    const token = Vue.ls.get(ACCESS_TOKEN)
+    // 从 localstorage 获取 token
+    const token = storage.get(ACCESS_TOKEN)
     if (error.response.status === 403) {
       notification.error({
         message: 'Forbidden',
@@ -39,27 +42,31 @@ const err = (error) => {
 }
 
 // request interceptor
-service.interceptors.request.use(config => {
-  const token = Vue.ls.get(ACCESS_TOKEN)
+request.interceptors.request.use(config => {
+  const token = storage.get(ACCESS_TOKEN)
+  // 如果 token 存在
+  // 让每个请求携带自定义 token 请根据实际情况自行修改
   if (token) {
-    config.headers['Access-Token'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
+    config.headers['Access-Token'] = token
   }
   return config
-}, err)
+}, errorHandler)
 
 // response interceptor
-service.interceptors.response.use((response) => {
+request.interceptors.response.use((response) => {
   return response.data
-}, err)
+}, errorHandler)
 
 const installer = {
   vm: {},
   install (Vue) {
-    Vue.use(VueAxios, service)
+    Vue.use(VueAxios, request)
   }
 }
 
+export default request
+
 export {
   installer as VueAxios,
-  service as axios
+  request as axios
 }

src/views/form/stepForm/Step3.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <a-form style="margin: 40px auto 0;">
-      <result title="操作成功" :is-success="true" description="预计两小时内到账" style="max-width: 560px;">
+      <a-result title="操作成功" :is-success="true" sub-title="预计两小时内到账" style="max-width: 560px;">
         <div class="information">
           <a-row>
             <a-col :sm="8" :xs="24">付款账户：</a-col>
@@ -20,23 +20,18 @@
             <a-col :sm="16" :xs="24"><span class="money">500</span> 元</a-col>
           </a-row>
         </div>
-        <div slot="action">
+        <template #extra>
           <a-button type="primary" @click="finish">再转一笔</a-button>
           <a-button style="margin-left: 8px" @click="toOrderList">查看账单</a-button>
-        </div>
-      </result>
+        </template>
+      </a-result>
     </a-form>
   </div>
 </template>
 
 <script>
-import { Result } from '@/components'
-
 export default {
   name: 'Step3',
-  components: {
-    Result
-  },
   data () {
     return {
       loading: false

src/views/result/Error.vue

@@ -1,10 +1,10 @@
 <template>
   <a-card :bordered="false" style="margin: -24px -24px 0px;">
-    <result type="error" :title="title" :description="description">
-      <template slot="action">
+    <a-result type="error" :title="title" :sub-title="description">
+      <template #extra>
         <a-button type="primary" >返回修改</a-button>
       </template>
-      <div>
+      <div class="desc">
         <div style="font-size: 16px; color: rgba(0, 0, 0, 0.85); font-weight: 500; margin-bottom: 16px">
           您提交的内容有如下错误：
         </div>
@@ -19,18 +19,14 @@
           <a style="margin-left: 16px">立即升级 <a-icon type="right" /></a>
         </div>
       </div>
-    </result>
+    </a-result>
   </a-card>
 </template>
 
 <script>
-import { Result } from '@/components'
 
 export default {
   name: 'Error',
-  components: {
-    Result
-  },
   data () {
     return {
       title: '提交失败',
@@ -39,7 +35,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-
-</style>

src/views/result/Success.vue

@@ -1,12 +1,12 @@
 <template>
   <a-card :bordered="false" style="margin: -24px -24px 0px;">
-    <result type="success" :description="description" :title="title">
-      <template slot="action">
+    <a-result type="success" :sub-title="description" :title="title">
+      <template #extra>
         <a-button type="primary">返回列表</a-button>
         <a-button style="margin-left: 8px">查看项目</a-button>
         <a-button style="margin-left: 8px">打印</a-button>
       </template>
-      <div>
+      <div class="content">
         <div style="font-size: 16px; color: rgba(0, 0, 0, 0.85); font-weight: 500; margin-bottom: 20px;">项目名称</div>
         <a-row style="margin-bottom: 16px">
           <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
@@ -55,12 +55,11 @@
           </a-step>
         </a-steps>
       </div>
-    </result>
+    </a-result>
   </a-card>
 </template>
 
 <script>
-import { Result } from '@/components'
 import { mixinDevice } from '@/utils/mixin.js'
 
 const directionType = {
@@ -70,23 +69,16 @@ const directionType = {
 
 export default {
   name: 'Success',
-  components: {
-    Result
-  },
   mixins: [mixinDevice],
   data () {
+    this.directionType = directionType
     return {
       title: '提交成功',
       description: '提交结果页用于反馈一系列操作任务的处理结果，\n' +
           ' 如果仅是简单操作，使用 Message 全局提示反馈即可。\n' +
           ' 本文字区域可以展示简单的补充说明，如果有类似展示\n' +
-          ' “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。',
-      directionType
+          ' “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。'
     }
   }
 }
 </script>
-
-<style scoped>
-
-</style>

src/views/user/RegisterResult.vue

@@ -1,26 +1,21 @@
 <template>
-  <result
+  <a-result
     :isSuccess="true"
     :content="false"
     :title="email"
-    :description="description">
+    :sub-title="description">
 
-    <template slot="action">
+    <template #extra>
       <a-button size="large" type="primary">查看邮箱</a-button>
       <a-button size="large" style="margin-left: 8px" @click="goHomeHandle">返回首页</a-button>
     </template>
 
-  </result>
+  </a-result>
 </template>
 
 <script>
-import { Result } from '@/components'
-
 export default {
   name: 'RegisterResult',
-  components: {
-    Result
-  },
   data () {
     return {
       description: '激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。',
@@ -30,8 +25,7 @@ export default {
   computed: {
     email () {
       const v = this.form && this.form.email || 'xxx'
-      const title = `你的账户：${v} 注册成功`
-      return title
+      return `你的账户：${v} 注册成功`
     }
   },
   created () {

yarn.lock

@@ -1970,10 +1970,10 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
-ant-design-vue@1.5.0-rc.6:
-  version "1.5.0-rc.6"
-  resolved "https://registry.yarnpkg.com/ant-design-vue/-/ant-design-vue-1.5.0-rc.6.tgz#a9616550e0386bf7a6b1bf00aae5cadc13159967"
-  integrity sha512-ILUyMCKa2oYAaymlWNlT2gVsNBugUCLZl28pUR+RAWjxYvxxqh6PCZj6hO9gRRgdz5WvwK1Z1gi5ua2JROOZfQ==
+ant-design-vue@1.5.3:
+  version "1.5.3"
+  resolved "https://registry.npm.taobao.org/ant-design-vue/download/ant-design-vue-1.5.3.tgz?cache=0&sync_timestamp=1588234595018&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fant-design-vue%2Fdownload%2Fant-design-vue-1.5.3.tgz#777a43a76dd233efc72abe9704103dbb2a95c558"
+  integrity sha1-d3pDp23SM+/HKr6XBBA9uyqVxVg=
   dependencies:
     "@ant-design/icons" "^2.1.1"
     "@ant-design/icons-vue" "^2.0.0"
@@ -2002,7 +2002,7 @@ ant-design-vue@1.5.0-rc.6:
     resize-observer-polyfill "^1.5.1"
     shallow-equal "^1.0.0"
     shallowequal "^1.0.2"
-    vue-ref "^1.0.4"
+    vue-ref "^2.0.0"
     warning "^4.0.0"
 
 any-promise@^1.0.0:
@@ -10002,6 +10002,11 @@ stealthy-require@^1.1.1:
   resolved "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
   integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
 
+store@^2.0.12:
+  version "2.0.12"
+  resolved "https://registry.npm.taobao.org/store/download/store-2.0.12.tgz#8c534e2a0b831f72b75fc5f1119857c44ef5d593"
+  integrity sha1-jFNOKguDH3K3X8XxEZhXxE711ZM=
+
 stream-browserify@^2.0.1:
   version "2.0.2"
   resolved "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"
@@ -10938,11 +10943,6 @@ vue-loader@^15.7.0:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
-vue-ls@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.npm.taobao.org/vue-ls/download/vue-ls-3.2.1.tgz#25d1c75b3a51c17018129de607b44bb120a3385a"
-  integrity sha1-JdHHWzpRwXAYEp3mB7RLsSCjOFo=
-
 vue-quill-editor@^3.0.6:
   version "3.0.6"
   resolved "https://registry.npm.taobao.org/vue-quill-editor/download/vue-quill-editor-3.0.6.tgz#1f85646211d68a31a80a72cb7f45bb2f119bc8fb"
@@ -10951,10 +10951,10 @@ vue-quill-editor@^3.0.6:
     object-assign "^4.1.1"
     quill "^1.3.4"
 
-vue-ref@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/vue-ref/-/vue-ref-1.0.4.tgz#c27862b15a2720cff6b792566d824d1c3ac53320"
-  integrity sha512-DDyR/HlHeeNSkEi4Uj/F/7rER9ma0lnqqx8j9uEhdh0UyBWUCI1HJnX01OjTpLMB4F4TZHlK/6H2I6lqq3QC3Q==
+vue-ref@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npm.taobao.org/vue-ref/download/vue-ref-2.0.0.tgz?cache=0&sync_timestamp=1586427296439&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-ref%2Fdownload%2Fvue-ref-2.0.0.tgz#483084d732abed11da796778a8266a3af0ea1a9c"
+  integrity sha1-SDCE1zKr7RHaeWd4qCZqOvDqGpw=
 
 vue-router@^3.1.2:
   version "3.1.3"