refactor: clear components

src/components/GlobalFooter/index.vue

@@ -1,6 +1,7 @@
 <template>
   <global-footer class="footer custom-render">
     <template v-slot:links>
+      <a href="https://www.github.com/vueComponent/pro-layout" target="_blank">Pro Layout</a>
       <a href="https://www.github.com/vueComponent/ant-design-vue-pro" target="_blank">Github</a>
       <a href="https://www.github.com/sendya/" target="_blank">@Sendya</a>
     </template>

src/components/SettingDrawer/SettingDrawer.vue

@@ -171,18 +171,15 @@
 </template>
 
 <script>
-import { DetailList } from '@/components'
 import SettingItem from './SettingItem'
 import config from '@/config/defaultSettings'
 import { updateTheme, updateColorWeak, colorList } from './settingConfig'
-import { mixin, mixinDevice } from '@/utils/mixin'
 
 export default {
   components: {
-    DetailList,
     SettingItem
   },
-  mixins: [mixin, mixinDevice],
+  mixins: [],
   data () {
     return {
       visible: false,

src/components/SettingDrawer/settingConfig.js

@@ -1,9 +1,8 @@
-import { message } from 'ant-design-vue/es'
+import message from 'ant-design-vue/es/message'
 // import defaultSettings from '../defaultSettings';
 import themeColor from './themeColor.js'
 
 // let lessNodesAppended
-
 const colorList = [
   {
     key: '薄暮', color: '#F5222D'
@@ -33,72 +32,13 @@ const colorList = [
 
 const updateTheme = newPrimaryColor => {
   const hideMessage = message.loading('正在切换主题！', 0)
-  themeColor.changeColor(newPrimaryColor).finally(t => {
+  themeColor.changeColor(newPrimaryColor).finally(() => {
     setTimeout(() => {
       hideMessage()
     }, 10)
   })
 }
 
-/*
-const updateTheme = primaryColor => {
-  // Don't compile less in production!
-  /* if (process.env.NODE_ENV === 'production') {
-    return;
-  } * /
-  // Determine if the component is remounted
-  if (!primaryColor) {
-    return
-  }
-  const hideMessage = message.loading('正在编译主题！', 0)
-  function buildIt () {
-    if (!window.less) {
-      return
-    }
-    setTimeout(() => {
-      window.less
-        .modifyVars({
-          '@primary-color': primaryColor
-        })
-        .then(() => {
-          hideMessage()
-        })
-        .catch(() => {
-          message.error('Failed to update theme')
-          hideMessage()
-        })
-    }, 200)
-  }
-  if (!lessNodesAppended) {
-    // insert less.js and color.less
-    const lessStyleNode = document.createElement('link')
-    const lessConfigNode = document.createElement('script')
-    const lessScriptNode = document.createElement('script')
-    lessStyleNode.setAttribute('rel', 'stylesheet/less')
-    lessStyleNode.setAttribute('href', '/color.less')
-    lessConfigNode.innerHTML = `
-      window.less = {
-        async: true,
-        env: 'production',
-        javascriptEnabled: true
-      };
-    `
-    lessScriptNode.src = 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js'
-    lessScriptNode.async = true
-    lessScriptNode.onload = () => {
-      buildIt()
-      lessScriptNode.onload = null
-    }
-    document.body.appendChild(lessStyleNode)
-    document.body.appendChild(lessConfigNode)
-    document.body.appendChild(lessScriptNode)
-    lessNodesAppended = true
-  } else {
-    buildIt()
-  }
-}
-*/
-
 const updateColorWeak = colorWeak => {
   // document.body.className = colorWeak ? 'colorWeak' : '';
   const app = document.body.querySelector('#app')

src/config/router.config.js

@@ -1,7 +1,6 @@
 // eslint-disable-next-line
 import { UserLayout, BasicLayout, BlankLayout } from '@/layouts'
 import { bxAnaalyse } from '@/core/icons'
-import PageView from '@/layouts/PageView'
 
 const RouteView = {
   name: 'RouteView',
@@ -92,7 +91,7 @@ export const asyncRouterMap = [
           {
             path: '/list/basic-list',
             name: 'BasicList',
-            component: () => import('@/views/list/StandardList'),
+            component: () => import('@/views/list/BasicList'),
             meta: { title: '标准列表', keepAlive: true, permission: [ 'table' ] }
           },
           {
@@ -217,7 +216,7 @@ export const asyncRouterMap = [
           {
             path: '/account/center',
             name: 'center',
-            component: () => import('@/views/account/center/Index'),
+            component: () => import('@/views/account/center'),
             meta: { title: '个人中心', keepAlive: true, permission: [ 'user' ] }
           },
           {
@@ -261,9 +260,10 @@ export const asyncRouterMap = [
             ]
           }
         ]
-      },
+      }
 
       // other
+      /*
       {
         path: '/other',
         name: 'otherPage',
@@ -323,6 +323,7 @@ export const asyncRouterMap = [
           }
         ]
       }
+      */
     ]
   },
   {

src/layouts/UserLayout.vue

@@ -31,12 +31,11 @@
 
 <script>
 import RouteView from './RouteView'
-import { mixinDevice } from '@/utils/mixin'
 
 export default {
   name: 'UserLayout',
   components: { RouteView },
-  mixins: [mixinDevice],
+  mixins: [],
   data () {
     return {}
   },

src/store/mutation-types.js

@@ -17,3 +17,8 @@ export const CONTENT_WIDTH_TYPE = {
   Fluid: 'Fluid',
   Fixed: 'Fixed'
 }
+
+export const NAV_THEME = {
+  LIGHT: 'light',
+  DARK: 'dark'
+}

src/views/account/center/Index.vue → src/views/account/center/index.vue

@@ -5,9 +5,9 @@
         <a-card :bordered="false">
           <div class="account-center-avatarHolder">
             <div class="avatar">
-              <img :src="avatar()">
+              <img :src="avatar">
             </div>
-            <div class="username">{{ nickname() }}</div>
+            <div class="username">{{ nickname }}</div>
             <div class="bio">海纳百川，有容乃大</div>
           </div>
           <div class="account-center-detail">
@@ -33,14 +33,14 @@
                   <a-tag
                     :key="tag"
                     :closable="index !== 0"
-                    :afterClose="() => handleTagClose(tag)"
+                    :close="() => handleTagClose(tag)"
                   >{{ `${tag.slice(0, 20)}...` }}</a-tag>
                 </a-tooltip>
                 <a-tag
                   v-else
                   :key="tag"
                   :closable="index !== 0"
-                  :afterClose="() => handleTagClose(tag)"
+                  :close="() => handleTagClose(tag)"
                 >{{ tag }}</a-tag>
               </template>
               <a-input
@@ -136,12 +136,13 @@ export default {
       noTitleKey: 'app'
     }
   },
+  computed: {
+    ...mapGetters(['nickname', 'avatar'])
+  },
   mounted () {
     this.getTeams()
   },
   methods: {
-    ...mapGetters(['nickname', 'avatar']),
-
     getTeams () {
       this.$http.get('/workplace/teams').then(res => {
         this.teams = res.result

src/views/account/settings/Custom.vue

@@ -1,30 +1,52 @@
+<template>
+  <a-list itemLayout="horizontal">
+    <a-list-item>
+      <a-list-item-meta>
+        <template v-slot:title>
+          <a>风格配色</a>
+        </template>
+        <template v-slot:description>
+          <span>
+            整体风格配色设置
+          </span>
+        </template>
+      </a-list-item-meta>
+      <template v-slot:actions>
+        <a-switch checkedChildren="暗色" unCheckedChildren="白色" :defaultChecked="navTheme === 'dark' && true || false" @change="onChange" />
+      </template>
+    </a-list-item>
+    <a-list-item>
+      <a-list-item-meta>
+        <template v-slot:title>
+          <a>主题色</a>
+        </template>
+        <template v-slot:description>
+          <span>
+            页面风格配色： <a>{{ colorFilter(primaryColor) }}</a>
+          </span>
+        </template>
+      </a-list-item-meta>
+    </a-list-item>
+  </a-list>
+</template>
 <script>
 import { colorList } from '@/components/SettingDrawer/settingConfig'
-import ASwitch from 'ant-design-vue/es/switch'
-import AList from 'ant-design-vue/es/list'
-import AListItem from 'ant-design-vue/es/list/Item'
-import { mixin } from '@/utils/mixin'
+import { baseMixin } from '@/store/app-mixin'
+import { NAV_THEME, TOGGLE_NAV_THEME } from '@/store/mutation-types'
 
-const Meta = AListItem.Meta
+const themeMap = {
+  'dark': '暗色',
+  'light': '白色'
+}
 
 export default {
-  components: {
-    AListItem,
-    AList,
-    ASwitch,
-    Meta
-  },
-  mixins: [mixin],
+  mixins: [baseMixin],
   data () {
     return {
     }
   },
   filters: {
     themeFilter (theme) {
-      const themeMap = {
-        'dark': '暗色',
-        'light': '白色'
-      }
       return themeMap[theme]
     }
   },
@@ -36,40 +58,11 @@ export default {
 
     onChange (checked) {
       if (checked) {
-        this.$store.dispatch('ToggleTheme', 'dark')
+        this.$store.commit(TOGGLE_NAV_THEME, NAV_THEME.DARK)
       } else {
-        this.$store.dispatch('ToggleTheme', 'light')
+        this.$store.commit(TOGGLE_NAV_THEME, NAV_THEME.LIGHT)
       }
     }
-  },
-  render () {
-    return (
-      <AList itemLayout="horizontal">
-        <AListItem>
-          <Meta>
-            <a slot="title">风格配色</a>
-            <span slot="description">
-                整体风格配色设置
-            </span>
-          </Meta>
-          <div slot="actions">
-            <ASwitch checkedChildren="暗色" unCheckedChildren="白色" defaultChecked={this.navTheme === 'dark' && true || false} onChange={this.onChange} />
-          </div>
-        </AListItem>
-        <AListItem>
-          <Meta>
-            <a slot="title">主题色</a>
-            <span slot="description">
-                页面风格配色： <a domPropsInnerHTML={ this.colorFilter(this.primaryColor) }/>
-            </span>
-          </Meta>
-        </AListItem>
-      </AList>
-    )
   }
 }
 </script>
-
-<style scoped>
-
-</style>

src/views/account/settings/Index.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="page-header-index-wide">
     <a-card :bordered="false" :bodyStyle="{ padding: '16px 0', height: '100%' }" :style="{ height: '100%' }">
-      <div class="account-settings-info-main" :class="device">
+      <div class="account-settings-info-main" :class="{ 'mobile': isMobile }">
         <div class="account-settings-info-left">
           <a-menu
-            :mode="device == 'mobile' ? 'horizontal' : 'inline'"
-            :style="{ border: '0', width: device == 'mobile' ? '560px' : 'auto'}"
+            :mode="isMobile ? 'horizontal' : 'inline'"
+            :style="{ border: '0', width: isMobile ? '560px' : 'auto'}"
             :selectedKeys="selectedKeys"
             type="inner"
             @openChange="onOpenChange"
@@ -49,15 +49,14 @@
 </template>
 
 <script>
-import { PageView, RouteView } from '@/layouts'
-import { mixinDevice } from '@/utils/mixin.js'
+import { RouteView } from '@/layouts'
+import { baseMixin } from '@/store/app-mixin'
 
 export default {
   components: {
-    RouteView,
-    PageView
+    RouteView
   },
-  mixins: [mixinDevice],
+  mixins: [baseMixin],
   data () {
     return {
       // horizontal  inline

src/views/dashboard/Analysis.vue

@@ -99,7 +99,7 @@
       </div>
     </a-card>
 
-    <div class="antd-pro-pages-dashboard-analysis-twoColLayout" :class="isDesktop() ? 'desktop' : ''">
+    <div class="antd-pro-pages-dashboard-analysis-twoColLayout" :class="!isMobile && 'desktop'">
       <a-row :gutter="24" type="flex" :style="{ marginTop: '24px' }">
         <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
           <a-card :loading="loading" :bordered="false" title="线上热门搜索" :style="{ height: '100%' }">
@@ -213,8 +213,18 @@
 
 <script>
 import moment from 'moment'
-import { ChartCard, MiniArea, MiniBar, MiniProgress, RankList, Bar, Trend, NumberInfo, MiniSmoothArea } from '@/components'
-import { mixinDevice } from '@/utils/mixin'
+import {
+  ChartCard,
+  MiniArea,
+  MiniBar,
+  MiniProgress,
+  RankList,
+  Bar,
+  Trend,
+  NumberInfo,
+  MiniSmoothArea
+} from '@/components'
+import { baseMixin } from '@/store/app-mixin'
 
 const barData = []
 const barData2 = []
@@ -317,7 +327,7 @@ const pieData = dv.rows
 
 export default {
   name: 'Analysis',
-  mixins: [mixinDevice],
+  mixins: [baseMixin],
   components: {
     ChartCard,
     MiniArea,

src/views/exception/403.vue

@@ -1,7 +1,7 @@
 <template>
   <a-result status="403" title="403" sub-title="Sorry, you don't have access to this page.">
     <template #extra>
-      <a-button type="primary">
+      <a-button type="primary" @click="toHome">
         Back Home
       </a-button>
     </template>
@@ -10,6 +10,11 @@
 
 <script>
 export default {
-  name: 'Exception403'
+  name: 'Exception403',
+  methods: {
+    toHome () {
+      this.$router.push({ path: '/' })
+    }
+  }
 }
 </script>

src/views/exception/404.vue

@@ -1,7 +1,7 @@
 <template>
   <a-result status="404" title="404" sub-title="Sorry, the page you visited does not exist.">
     <template #extra>
-      <a-button type="primary">
+      <a-button type="primary" @click="toHome">
         Back Home
       </a-button>
     </template>
@@ -10,6 +10,11 @@
 
 <script>
 export default {
-  name: 'Exception404'
+  name: 'Exception404',
+  methods: {
+    toHome () {
+      this.$router.push({ path: '/' })
+    }
+  }
 }
 </script>

src/views/exception/500.vue

@@ -1,7 +1,7 @@
 <template>
   <a-result status="500" title="500" sub-title="Sorry, the server is reporting an error.">
     <template #extra>
-      <a-button type="primary">
+      <a-button type="primary" @click="toHome">
         Back Home
       </a-button>
     </template>
@@ -10,6 +10,11 @@
 
 <script>
   export default {
-    name: 'Exception500'
+    name: 'Exception500',
+    methods: {
+      toHome () {
+        this.$router.push({ path: '/' })
+      }
+    }
   }
 </script>

src/views/list/StandardList.vue → src/views/list/BasicList.vue

@@ -3,13 +3,13 @@
     <a-card :bordered="false">
       <a-row>
         <a-col :sm="8" :xs="24">
-          <head-info title="我的待办" content="8个任务" :bordered="true"/>
+          <info title="我的待办" value="8个任务" :bordered="true" />
         </a-col>
         <a-col :sm="8" :xs="24">
-          <head-info title="本周任务平均处理时间" content="32分钟" :bordered="true"/>
+          <info title="本周任务平均处理时间" value="32分钟" :bordered="true" />
         </a-col>
         <a-col :sm="8" :xs="24">
-          <head-info title="本周完成任务数" content="24个"/>
+          <info title="本周完成任务数" value="24个" />
         </a-col>
       </a-row>
     </a-card>
@@ -70,8 +70,8 @@
 </template>
 
 <script>
-import HeadInfo from '@/components/tools/HeadInfo'
 import TaskForm from './modules/TaskForm'
+import Info from './components/Info'
 
 const data = []
 data.push({
@@ -129,8 +129,8 @@ data.push({
 export default {
   name: 'StandardList',
   components: {
-    HeadInfo,
-    TaskForm
+    TaskForm,
+    Info
   },
   data () {
     return {
@@ -162,25 +162,25 @@ export default {
 </script>
 
 <style lang="less" scoped>
-    .ant-avatar-lg {
-        width: 48px;
-        height: 48px;
-        line-height: 48px;
-    }
+.ant-avatar-lg {
+    width: 48px;
+    height: 48px;
+    line-height: 48px;
+}
 
-    .list-content-item {
-        color: rgba(0, 0, 0, .45);
-        display: inline-block;
-        vertical-align: middle;
-        font-size: 14px;
-        margin-left: 40px;
-        span {
-            line-height: 20px;
-        }
-        p {
-            margin-top: 4px;
-            margin-bottom: 0;
-            line-height: 22px;
-        }
+.list-content-item {
+    color: rgba(0, 0, 0, .45);
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 14px;
+    margin-left: 40px;
+    span {
+        line-height: 20px;
     }
+    p {
+        margin-top: 4px;
+        margin-bottom: 0;
+        line-height: 22px;
+    }
+}
 </style>

src/views/list/components/Info.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="header-info">
+    <span>{{ title }}</span>
+    <p>{{ value }}</p>
+    <em v-if="bordered" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Info',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    bordered: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~ant-design-vue/es/style/themes/default.less";
+
+.header-info {
+  position: relative;
+  text-align: center;
+  & > span {
+    display: inline-block;
+    margin-bottom: 4px;
+    color: @text-color-secondary;
+    font-size: @font-size-base;
+    line-height: 22px;
+  }
+  & > p {
+    margin: 0;
+    color: @heading-color;
+    font-size: 24px;
+    line-height: 32px;
+  }
+  & > em {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 1px;
+    height: 56px;
+    background-color: @border-color-split;
+  }
+}
+</style>

src/views/profile/basic/index.vue

@@ -1,20 +1,20 @@
 <template>
   <page-header-wrapper>
     <a-card :bordered="false">
-      <detail-list title="退款申请">
-        <detail-list-item term="取货单号">1000000000</detail-list-item>
-        <detail-list-item term="状态">已取货</detail-list-item>
-        <detail-list-item term="销售单号">1234123421</detail-list-item>
-        <detail-list-item term="子订单">3214321432</detail-list-item>
-      </detail-list>
+      <a-descriptions title="退款申请">
+        <a-descriptions-item label="取货单号">1000000000</a-descriptions-item>
+        <a-descriptions-item label="状态">已取货</a-descriptions-item>
+        <a-descriptions-item label="销售单号">1234123421</a-descriptions-item>
+        <a-descriptions-item label="子订单">3214321432</a-descriptions-item>
+      </a-descriptions>
       <a-divider style="margin-bottom: 32px"/>
-      <detail-list title="用户信息">
-        <detail-list-item term="用户姓名">付小小</detail-list-item>
-        <detail-list-item term="联系电话">18100000000</detail-list-item>
-        <detail-list-item term="常用快递">菜鸟仓储</detail-list-item>
-        <detail-list-item term="取货地址">浙江省杭州市西湖区万塘路18号</detail-list-item>
-        <detail-list-item term="备注">	无</detail-list-item>
-      </detail-list>
+      <a-descriptions title="用户信息">
+        <a-descriptions-item label="用户姓名">付小小</a-descriptions-item>
+        <a-descriptions-item label="联系电话">18100000000</a-descriptions-item>
+        <a-descriptions-item label="常用快递">菜鸟仓储</a-descriptions-item>
+        <a-descriptions-item label="取货地址">浙江省杭州市西湖区万塘路18号</a-descriptions-item>
+        <a-descriptions-item label="备注">	无</a-descriptions-item>
+      </a-descriptions>
       <a-divider style="margin-bottom: 32px"/>
 
       <div class="title">退货商品</div>
@@ -45,16 +45,10 @@
 </template>
 
 <script>
-import { PageView } from '@/layouts'
 import { STable } from '@/components'
-import DetailList from '@/components/tools/DetailList'
-const DetailListItem = DetailList.Item
 
 export default {
   components: {
-    PageView,
-    DetailList,
-    DetailListItem,
     STable
   },
   data () {

src/views/result/Success.vue

@@ -22,7 +22,7 @@
             2016-12-12 ~ 2017-12-12
           </a-col>
         </a-row>
-        <a-steps :current="1" :direction="isMobile() && directionType.vertical || directionType.horizontal" progressDot>
+        <a-steps :current="1" :direction="isMobile && directionType.vertical || directionType.horizontal" progressDot>
           <a-step >
             <span style="font-size: 14px" slot="title">创建项目</span>
             <template slot="description">
@@ -60,7 +60,7 @@
 </template>
 
 <script>
-import { mixinDevice } from '@/utils/mixin.js'
+import { baseMixin } from '@/store/app-mixin'
 
 const directionType = {
   horizontal: 'horizontal',
@@ -69,7 +69,7 @@ const directionType = {
 
 export default {
   name: 'Success',
-  mixins: [mixinDevice],
+  mixins: [baseMixin],
   data () {
     this.directionType = directionType
     return {

src/views/role/RoleList.vue

@@ -63,14 +63,14 @@
 </template>
 
 <script>
+import pick from 'lodash.pick'
 import { getRoleList, getPermissions } from '@/api/manage'
-import { mixinDevice } from '@/utils/mixin'
 import { actionToObject } from '@/utils/permissions'
-import pick from 'lodash.pick'
+import { baseMixin } from '@/store/app-mixin'
 
 export default {
   name: 'RoleList',
-  mixins: [mixinDevice],
+  mixins: [baseMixin],
   components: {},
   data () {
     return {

src/views/user/Register.vue

@@ -99,7 +99,6 @@
 </template>
 
 <script>
-import { mixinDevice } from '@/utils/mixin.js'
 import { getSmsCaptcha } from '@/api/login'
 
 const levelNames = {
@@ -124,7 +123,7 @@ export default {
   name: 'Register',
   components: {
   },
-  mixins: [mixinDevice],
+  mixins: [],
   data () {
     return {
       form: this.$form.createForm(this),