From 264806b27513ef66d13b079df9f65f8f376a5e1b Mon Sep 17 00:00:00 2001
From: zouzhibing <zouzhibing@anthead.cn>
Date: Wed, 24 Aug 2022 18:53:05 +0800
Subject: [PATCH] =?UTF-8?q?feature:=E4=BC=98=E5=8C=96=E7=BB=86=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{u-setting => u-theme}/index.vue          | 23 +++++++++++++++----
 src/layout/Header/index.vue                   |  8 +++----
 src/layout/Main/index.vue                     |  4 ++--
 src/layout/Sidebar/components/Menu.vue        |  3 +--
 src/layout/index.vue                          | 10 ++++----
 src/store/modules/setting.ts                  | 12 ++++++++--
 6 files changed, 40 insertions(+), 20 deletions(-)
 rename src/components/{u-setting => u-theme}/index.vue (85%)

diff --git a/src/components/u-setting/index.vue b/src/components/u-theme/index.vue
similarity index 85%
rename from src/components/u-setting/index.vue
rename to src/components/u-theme/index.vue
index e967a6f..608db78 100644
--- a/src/components/u-setting/index.vue
+++ b/src/components/u-theme/index.vue
@@ -13,8 +13,12 @@
       </div>
     </div>
     <el-drawer v-model="drawer" title="主题配置" size="300px">
-      <div class="drawer-item">
-        <label>布局</label>
+      <div class="theme-item">
+        <label>标签</label>
+        <el-color-picker v-model="themeConfig.primary" :predefine="colorList" @change="changePrimary" />
+      </div>
+      <div class="theme-item">
+        <label>菜单布局</label>
         <el-select
           v-model="layout"
           placeholder="请选择"
@@ -25,7 +29,7 @@
           <el-option label="横向" value="horizontal"></el-option>
         </el-select>
       </div>
-      <div class="drawer-item">
+      <div class="theme-item">
         <label>标签</label>
         <el-switch v-model="tag" @change="(val) => changeSwitch(val, 1)" />
       </div>
@@ -34,7 +38,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref } from 'vue'
+import {computed, ref} from 'vue'
   const drawer = ref(false)
   const tag = ref(true)
   const layout = ref('vertical')
@@ -52,6 +56,8 @@
     }
   }
 
+  const themeConfig = computed(()=>store.state.setting.themeConfig)
+
   const changeSwitch = (val, type) => {
     switch (type) {
       // 是否显示tag
@@ -116,11 +122,18 @@
         box-shadow 0.15s ease;
     }
   }
-  .drawer-item {
+
+  ::v-deep(.el-drawer__title) {
+    font-weight: bold;
+    color: black;
+  }
+  .theme-item {
     width: 100%;
     display: flex;
     margin-bottom: 15px;
     align-items: center;
+    font-size: 14px;
+    color: black;
     justify-content: space-between;
   }
 </style>
diff --git a/src/layout/Header/index.vue b/src/layout/Header/index.vue
index 9ed0f18..a78b83e 100644
--- a/src/layout/Header/index.vue
+++ b/src/layout/Header/index.vue
@@ -38,7 +38,7 @@
         </el-dropdown>
       </div>
     </div>
-    <tag-views v-if="isShowTag" />
+    <tag-views v-if="showTag" />
     <personal ref="person" />
   </div>
 </template>
@@ -64,11 +64,11 @@
     return !store.state.app.isCollapse
   })
   const mode = computed(() => {
-    return store.state.setting.mode
+    return store.state.setting.themeConfig.mode
   })
 
-  const isShowTag = computed(() => {
-    return store.state.setting.isShowTag
+  const showTag = computed(() => {
+    return store.state.setting.themeConfig.showTag
   })
 
   const userInfo = computed(() => {
diff --git a/src/layout/Main/index.vue b/src/layout/Main/index.vue
index 8982cb3..b97cb77 100644
--- a/src/layout/Main/index.vue
+++ b/src/layout/Main/index.vue
@@ -8,12 +8,12 @@
         <component :is="Component" :key="route.path" v-else />
       </transition>
     </router-view>
-    <u-setting />
+    <u-theme />
   </section>
 </template>
 
 <script lang="ts" setup>
-  import USetting from '@/components/u-setting/index.vue'
+  import UTheme from '@/components/u-theme/index.vue'
   import { useStore } from 'vuex'
   import { computed, ref } from 'vue'
   const store = useStore()
diff --git a/src/layout/Sidebar/components/Menu.vue b/src/layout/Sidebar/components/Menu.vue
index d84362c..5a5e91f 100644
--- a/src/layout/Sidebar/components/Menu.vue
+++ b/src/layout/Sidebar/components/Menu.vue
@@ -31,7 +31,6 @@
 
   // 获取路由
   const permission_routes = computed(() => {
-    console.log('permission_routes', store.state.permission.routes)
     return store.state.permission.routes
   })
 
@@ -51,6 +50,6 @@
 
   // 横向
   const mode = computed(() => {
-    return store.state.setting.mode
+    return store.state.setting.themeConfig.mode
   })
 </script>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 7c0fdf0..7af0581 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -9,7 +9,7 @@
       }"
     >
       <u-header />
-      <div class="m-container-content" :class="{ 'app-main-hide-tag': !isShowTag }">
+      <div class="m-container-content" :class="{ 'app-main-hide-tag': !showTag }">
         <u-main />
       </div>
     </div>
@@ -51,18 +51,18 @@
       const handleClickOutside = () => {
         store.dispatch('app/closeSideBar', { withoutAnimation: false })
       }
-      const isShowTag = computed(() => {
-        return store.state.setting.isShowTag
+      const showTag = computed(() => {
+        return store.state.setting.themeConfig.showTag
       })
 
       const mode = computed(() => {
-        return store.state.setting.mode
+        return store.state.setting.themeConfig.mode
       })
       return {
         isCollapse,
         device,
         classObj,
-        isShowTag,
+        showTag,
         mode,
         handleClickOutside,
       }
diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts
index c13b781..ebf7b09 100644
--- a/src/store/modules/setting.ts
+++ b/src/store/modules/setting.ts
@@ -1,16 +1,24 @@
 import {Module} from "vuex";
 
 const state = {
+    themeConfig:{
+        // 菜单展示模式 默认 vertical   horizontal / vertical
+        mode: 'vertical',
+        // tagsView 是否展示
+        showTag:true, // 默认展示
+        // 页脚
+        footer: true
+    },
     isShowTag: true,
     mode: 'vertical',
 }
 
 const mutations = {
     SET_TAG: (state, value) => {
-        state.isShowTag = value
+        state.themeConfig.showTag = value
     },
     SET_MODE: (state, value) => {
-        state.mode = value
+        state.themeConfig.mode = value
     },
 }
 const actions = {