From 1bc60d16e859066b180bb02a0d227453f6e6a81e Mon Sep 17 00:00:00 2001
From: Elune <201507802@qq.com>
Date: Sat, 7 Mar 2020 17:56:35 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=B8=BB=E9=A2=98=E5=9C=A8?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=88=B7=E6=96=B0=E5=90=8E=E9=87=8D=E7=BD=AE?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ThemePicker/index.vue |  7 ++++---
 src/layout/index.vue                 | 17 +++++++++++++++--
 src/store/modules/settings.js        |  1 -
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/ThemePicker/index.vue b/src/components/ThemePicker/index.vue
index 09a9254..15deadb 100644
--- a/src/components/ThemePicker/index.vue
+++ b/src/components/ThemePicker/index.vue
@@ -1,7 +1,7 @@
 <template>
   <el-color-picker
     v-model="theme"
-    :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
+    :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d']"
     class="theme-picker"
     popper-class="theme-picker-dropdown"
   />
@@ -10,7 +10,7 @@
 <script>
 const version = require('element-ui/package.json').version // element-ui version from node_modules
 const ORIGINAL_THEME = '#409EFF' // default color
-
+import Cookies from 'js-cookie'
 export default {
   data() {
     return {
@@ -31,7 +31,8 @@ export default {
       immediate: true
     },
     async theme(val) {
-      const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
+      Cookies.set('theme', val, { expires: 365 })
+      const oldVal = this.chalk ? this.theme : Cookies.get('theme') ? Cookies.get('theme') : ORIGINAL_THEME
       if (typeof val !== 'string') return
       const themeCluster = this.getThemeCluster(val.replace('#', ''))
       const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 9674163..df40e4d 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -12,6 +12,8 @@
         <settings />
       </right-panel>
     </div>
+    <!--  防止刷新后主题丢失  -->
+    <Theme v-show="false" ref="theme" />
   </div>
 </template>
 
@@ -20,7 +22,8 @@ import RightPanel from '@/components/RightPanel'
 import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
 import { mapState } from 'vuex'
-
+import Theme from '@/components/ThemePicker'
+import Cookies from 'js-cookie'
 export default {
   name: 'Layout',
   components: {
@@ -29,7 +32,8 @@ export default {
     RightPanel,
     Settings,
     Sidebar,
-    TagsView
+    TagsView,
+    Theme
   },
   mixins: [ResizeMixin],
   computed: {
@@ -49,6 +53,15 @@ export default {
       }
     }
   },
+  mounted() {
+    if (Cookies.get('theme')) {
+      this.$refs.theme.theme = Cookies.get('theme')
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: Cookies.get('theme')
+      })
+    }
+  },
   methods: {
     handleClickOutside() {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index c913e59..521885f 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -1,6 +1,5 @@
 import variables from '@/assets/styles/element-variables.scss'
 import defaultSettings from '@/settings'
-
 const { tagsView, fixedHeader, sidebarLogo, uniqueOpened, showFooter, footerTxt, caseNumber } = defaultSettings
 
 const state = {