refactor: clear components

Author: sendya

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 renamed to 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