fix setting drawer

updated ant-design-vue ver to 1.1.6

Author: sendya

package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@antv/data-set": "^0.8.9",
-    "ant-design-vue": "^1.1.3",
+    "ant-design-vue": "^1.1.6",
     "axios": "^0.18.0",
     "dayjs": "^1.7.5",
     "enquire.js": "^2.1.6",

src/components/layout/LayoutMain.vue

@@ -39,7 +39,7 @@
       </a-layout-footer>
     </a-layout>
 
-    <setting-drawer ref="settingdw"></setting-drawer>
+    <setting-drawer></setting-drawer>
   </a-layout>
 </template>
 
@@ -82,9 +82,6 @@
     },
     mounted() {
       this.collapsed = this.sidebarOpened
-
-      // this.$refs.settingdw.showDrawer()
-      // this.$refs.settingdw.onClose()
     },
     methods: {
       ...mapActions(['setSidebar']),

src/components/tools/SettingDrawer.vue

@@ -1,12 +1,12 @@
 <template>
-  <div>
+  <div class="setting-drawer">
     <a-drawer
       width="300"
-      :destroyOnClose="false"
       placement="right"
       :closable="false"
       @close="onClose"
       :visible="visible"
+      :style="{}"
     >
       <div class="setting-drawer-index-content">
 
@@ -45,16 +45,17 @@
           </div>
         </div>
       </div>
+      <div class="setting-drawer-index-handle" @click="toggle">
+        <a-icon type="setting" v-if="!visible"/>
+        <a-icon type="close" v-else/>
+      </div>
     </a-drawer>
-    <div class="setting-drawer-index-handle" :style="{ right: visible && '283px' || '0' }" @click="toggle">
-      <a-icon type="setting" v-if="!visible"/>
-      <a-icon type="close" v-else/>
-    </div>
   </div>
 </template>
 
 <script>
   import DetailList from '@/components/tools/DetailList'
+  import config from '@/defaultConfig'
   import { updateTheme } from '@/components/tools/setting'
 
   import { mapState } from 'vuex'
@@ -100,7 +101,7 @@
     },
     data() {
       return {
-        visible: false,
+        visible: true,
         colorList,
       }
     },
@@ -112,8 +113,13 @@
     },
     mounted () {
       const vm = this
-
-      updateTheme(this.colorObj.color)
+      setTimeout(() => {
+        vm.visible = false
+      }, 1)
+      // 当主题色不是默认色时，才进行主题编译
+      if (this.colorObj.color !== config.color.color) {
+        updateTheme(this.colorObj.color)
+      }
     },
     methods: {
       showDrawer() {
@@ -129,8 +135,10 @@
         this.$store.dispatch('ToggleTheme', theme)
       },
       changeColor(color) {
-        updateTheme(color.color)
-        this.$store.dispatch('ToggleColor', color)
+        if (this.colorObj.color !== color.color) {
+          this.$store.dispatch('ToggleColor', color)
+          updateTheme(color.color)
+        }
       }
     },
   }
@@ -198,7 +206,7 @@
     background: #1890ff;
     width: 48px;
     height: 48px;
-    right: 0;
+    right: 300px;
     display: flex;
     justify-content: center;
     align-items: center;

src/components/tools/setting.js

@@ -5,9 +5,9 @@ let lessNodesAppended;
 
 const updateTheme = primaryColor => {
   // Don't compile less in production!
-  if (process.env.NODE_ENV === 'production') {
+  /* if (process.env.NODE_ENV === 'production') {
     return;
-  }
+  } */
   // Determine if the component is remounted
   if (!primaryColor) {
     return;

src/defaultConfig.js

@@ -0,0 +1,8 @@
+export default {
+  color: {
+    key: 'daybreak',
+    color: '#1890FF'
+  },
+  theme: 'dark',
+  colorWeak: false
+}

src/main.js

@@ -14,7 +14,8 @@ import * as dayjs from 'dayjs' // 日期时间支持库
 
 import '@/permission' // permission control
 
-import {ACCESS_TOKEN, DEFAULT_COLOR, DEFAULT_THEME, SIDEBAR_TYPE} from "@/store/mutation-types"
+import { ACCESS_TOKEN, DEFAULT_COLOR, DEFAULT_THEME, SIDEBAR_TYPE } from "@/store/mutation-types"
+import config from '@/defaultConfig'
 
 Vue.filter('dayjs', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
   return dayjs(dataStr).format(pattern)
@@ -37,9 +38,9 @@ new Vue({
   router,
   store,
   mounted () {
-    store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
-    store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, 'dark'))
-    store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, { key: 'daybreak', color: '#1890FF' }))
+    store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, false))
+    store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.theme))
+    store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.color))
     store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
 
   },

yarn.lock

@@ -1150,9 +1150,9 @@ ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
-ant-design-vue@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/ant-design-vue/-/ant-design-vue-1.1.3.tgz#44d05c6d5991c4aca9202f44c4d7784d4f80403a"
+ant-design-vue@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/ant-design-vue/-/ant-design-vue-1.1.6.tgz#ec55979304fa995054528834713b8dad1e42861c"
   dependencies:
     add-dom-event-listener "^1.0.2"
     array-tree-filter "^2.1.0"