add ThemePicker to setting

Author: PanJiaChen

src/components/RightPanel/index.vue

@@ -2,9 +2,7 @@
   <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
     <div class="rightPanel-background" />
     <div class="rightPanel">
-      <div class="handle-button" :style="{'top':buttonTop+'px'}" type="primary" circle @click="show=!show">
-        <i :class="show?'el-icon-close':'el-icon-setting'" />
-      </div>
+      <el-button class="handle-button" :style="{'top':buttonTop+'px'}" type="primary" circle :icon="show?'el-icon-close':'el-icon-setting'" @click="show=!show" />
       <div class="rightPanel-items">
         <slot />
       </div>
@@ -121,20 +119,12 @@ export default {
  .handle-button {
    position: absolute;
    left: -48px;
-   border-radius: 4px 0 0 4px !important;
+   border-radius: 6px 0 0 6px !important;
    width: 48px;
    height: 48px;
-   background: #1890ff;
-   cursor: pointer;
    pointer-events: auto;
    z-index: 0;
+   font-size: 24px;
    text-align: center;
-   color: #fff;
-   line-height: 48px;
-
-   i {
-     font-size: 24px;
-     line-height: 48px;
-   }
  }
 </style>

src/components/ThemePicker/index.vue

@@ -19,12 +19,21 @@ export default {
     }
   },
   watch: {
-    theme(val) {
+    async theme(val) {
       const oldVal = this.theme
       if (typeof val !== 'string') return
       const themeCluster = this.getThemeCluster(val.replace('#', ''))
       const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
       console.log(themeCluster, originalCluster)
+
+      const $message = this.$message({
+        message: '  Compiling the theme',
+        customClass: 'theme-message',
+        type: 'success',
+        duration: 0,
+        iconClass: 'el-icon-loading'
+      })
+
       const getHandler = (variable, id) => {
         return () => {
           const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
@@ -40,15 +49,15 @@ export default {
         }
       }
 
-      const chalkHandler = getHandler('chalk', 'chalk-style')
-
       if (!this.chalk) {
         const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
-        this.getCSSString(url, chalkHandler, 'chalk')
-      } else {
-        chalkHandler()
+        await this.getCSSString(url, 'chalk')
       }
 
+      const chalkHandler = getHandler('chalk', 'chalk-style')
+
+      chalkHandler()
+
       const styles = [].slice.call(document.querySelectorAll('style'))
         .filter(style => {
           const text = style.innerText
@@ -59,39 +68,32 @@ export default {
         if (typeof innerText !== 'string') return
         style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
       })
-      this.$message({
-        message: '换肤成功',
-        type: 'success'
-      })
+
+      $message.close()
     }
   },
 
   methods: {
     updateStyle(style, oldCluster, newCluster) {
-      const colorOverrides = [] // only capture color overides
+      let newStyle = style
       oldCluster.forEach((color, index) => {
-        const value = newCluster[index]
-        const color_plain = color.replace(/([()])/g, '\\$1')
-        const repl = new RegExp(`(^|})([^{]+{[^{}]+)${color_plain}\\b([^}]*)(?=})`, 'gi')
-        const nestRepl = new RegExp(color_plain, 'ig') // for greed matching before the 'color'
-        let v
-        while ((v = repl.exec(style))) {
-          colorOverrides.push(v[2].replace(nestRepl, value) + value + v[3] + '}') // '}' not captured in the regexp repl to reserve it as locator-boundary
-        }
+        newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
       })
-      return colorOverrides.join('')
+      return newStyle
     },
 
-    getCSSString(url, callback, variable) {
-      const xhr = new XMLHttpRequest()
-      xhr.onreadystatechange = () => {
-        if (xhr.readyState === 4 && xhr.status === 200) {
-          this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
-          callback()
+    getCSSString(url, variable) {
+      return new Promise(resolve => {
+        const xhr = new XMLHttpRequest()
+        xhr.onreadystatechange = () => {
+          if (xhr.readyState === 4 && xhr.status === 200) {
+            this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
+            resolve()
+          }
         }
-      }
-      xhr.open('GET', url)
-      xhr.send()
+        xhr.open('GET', url)
+        xhr.send()
+      })
     },
 
     getThemeCluster(theme) {
@@ -143,10 +145,14 @@ export default {
 </script>
 
 <style>
+.theme-message,
+.theme-picker-dropdown {
+  z-index: 99999 !important;
+}
+
 .theme-picker .el-color-picker__trigger {
-  margin-top: 12px;
-  height: 26px!important;
-  width: 26px!important;
+  height: 26px !important;
+  width: 26px !important;
   padding: 2px;
 }
 

src/layout/components/Navbar.vue

@@ -18,9 +18,6 @@
 
         <lang-select class="right-menu-item hover-effect" />
 
-        <el-tooltip :content="$t('navbar.theme')" effect="dark" placement="bottom">
-          <theme-picker class="right-menu-item hover-effect" />
-        </el-tooltip>
       </template>
 
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
@@ -56,7 +53,6 @@ import ErrorLog from '@/components/ErrorLog'
 import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
 import LangSelect from '@/components/LangSelect'
-import ThemePicker from '@/components/ThemePicker'
 import Search from '@/components/HeaderSearch'
 
 export default {
@@ -67,7 +63,6 @@ export default {
     Screenfull,
     SizeSelect,
     LangSelect,
-    ThemePicker,
     Search
   },
   computed: {

src/layout/components/Settings/index.vue

@@ -6,20 +6,23 @@
       </h3>
 
       <div class="drawer-item">
-        <span>开启  Tags-View</span>
+        <span>开启 Tags-View</span>
         <el-switch v-model="tagsView" class="drawer-switch" />
       </div>
 
-      <!-- <div class="drawer-item">
-        <span>显示 Logo</span>
-        <el-switch v-model="sidebarLogo" class="drawer-switch" />
-      </div> -->
+      <div class="drawer-item">
+        <span>主题色</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 5px 0 0;" />
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import ThemePicker from '@/components/ThemePicker'
+
 export default {
+  components: { ThemePicker },
   data() {
     return {
       sidebarLogo: true