From 8d64714126d054384a81d474b4b0a6b021ef02d5 Mon Sep 17 00:00:00 2001
From: yuntian001 <479820787@qq.com>
Date: Thu, 1 Sep 2022 09:26:25 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=AE=BE=E7=BD=AE=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

设置按钮显隐v-show改完v-if
设置菜单提取出来放入layout
顶栏隐藏时侧边栏悬浮设置按钮
---
 src/components/meSetting.vue     | 80 ++------------------------------
 src/components/meSettingMenu.vue | 79 +++++++++++++++++++++++++++++++
 src/layout/index.vue             | 17 ++++++-
 src/store/modules/setting.ts     |  1 +
 src/styles/variables.scss        |  2 +
 5 files changed, 100 insertions(+), 79 deletions(-)
 create mode 100644 src/components/meSettingMenu.vue

diff --git a/src/components/meSetting.vue b/src/components/meSetting.vue
index 936a3b19..94ac9dd0 100644
--- a/src/components/meSetting.vue
+++ b/src/components/meSetting.vue
@@ -1,85 +1,11 @@
 <template>
-  <div class="me-setting pointer" @click="show = true">
+  <div class="me-setting pointer" @click="setting.showSettingMenu = true">
     <mel-icon-setting class="icon"></mel-icon-setting>
-    <el-drawer v-model="show" :title="$t('项目配置')" size="300px" append-to-body>
-      <el-form label-position="left" label-width="170px">
-        <el-form-item :label="$t('主题色')">
-          <el-color-picker v-model="themeConfig.primaryColor" :predefine="predefinePrimaryColors" />
-        </el-form-item>
-        <el-form-item :label="$t('侧边栏背景色')">
-          <el-color-picker v-model="themeConfig.menuBg" :predefine="sidebarBgColors" />
-        </el-form-item>
-        <el-form-item :label="$t('折叠侧边栏')">
-          <el-switch v-model="themeConfig.menuCollapse"></el-switch>
-        </el-form-item>
-        <el-form-item :label="$t('侧边栏展开宽度')">
-          <el-input v-model="themeConfig.menuWidth"></el-input>
-        </el-form-item>
-        <el-form-item :label="$t('固定') + $t(' ') + $t('Header')">
-          <el-switch v-model="themeConfig.fixedHeader"></el-switch>
-        </el-form-item>
-        <el-form-item :label="$t('顶栏')">
-          <el-switch v-model="themeConfig.topBar"></el-switch>
-        </el-form-item>
-        <el-form-item :label="$t('模式') + $t(' ') + $t('切换')">
-          <el-switch v-model="themeConfig.showDark"></el-switch>
-        </el-form-item>
-        <el-form-item :label="$t('Size') + $t(' ') + $t('切换')">
-          <el-switch v-model="themeConfig.showSize"></el-switch>
-        </el-form-item>
-        <el-form-item :label="$t('面包屑')">
-          <el-switch v-model="themeConfig.breadcrumb"></el-switch>
-        </el-form-item>
-        <el-form-item :label="$t('标签栏')">
-          <el-switch v-model="themeConfig.tagBar"></el-switch>
-        </el-form-item>
-        <el-form-item :label="$t('标签栏') + $t(' ') + $t('刷新') + $t(' ') + $t('按钮')">
-          <el-switch v-model="themeConfig.tagBarRefresh"></el-switch>
-        </el-form-item>
-        <el-form-item :label="$t('标签栏') + $t(' ') + $t('菜单') + $t(' ') + $t('按钮')">
-          <el-switch v-model="themeConfig.tagBarMenu"></el-switch>
-        </el-form-item>
-        <el-button style="width: 100%" @click="Object.assign(themeConfig, origionThemeConfig)"
-          >{{ $t('重置') }}
-        </el-button>
-        <el-button style="width: 100%; margin: 10px 0" type="danger" @click="clear">
-          {{ $t('清除缓存') }}{{ $t(' ') }}{{ $t('并') }}{{ $t(' ') }}{{ $t('退出登录') }}
-        </el-button>
-      </el-form>
-    </el-drawer>
   </div>
 </template>
-
 <script setup lang="ts" name="meSetting">
-import { useSettingStore, useUserStore } from '@/store';
-import { themeConfig as origionThemeConfig } from '@/config';
-const show = ref(false);
-let { themeConfig, clearCache } = useSettingStore();
-const userStore = useUserStore();
-const predefinePrimaryColors = reactive([
-  '#409EFF',
-  '#1890FF',
-  '#304156',
-  '#212121',
-  '#11A983',
-  '#13C2C2',
-  '#6959CD',
-  '#F5222D',
-]);
-const sidebarBgColors = reactive([
-  '#1d1e1f',
-  '#212121',
-  '#273352',
-  '#ffffff',
-  '#191b24',
-  '#191a23',
-  '#304156',
-  '#001628',
-]);
-const clear = () => {
-  clearCache();
-  userStore.logOut();
-};
+import { useSettingStore } from '@/store';
+let setting = useSettingStore();
 </script>
 <style lang="scss" scoped>
 .me-setting {
diff --git a/src/components/meSettingMenu.vue b/src/components/meSettingMenu.vue
new file mode 100644
index 00000000..e7e35871
--- /dev/null
+++ b/src/components/meSettingMenu.vue
@@ -0,0 +1,79 @@
+<template>
+  <el-drawer v-model="setting.showSettingMenu" :title="$t('项目配置')" size="300px" append-to-body>
+    <el-form label-position="left" label-width="170px">
+      <el-form-item :label="$t('主题色')">
+        <el-color-picker v-model="themeConfig.primaryColor" :predefine="predefinePrimaryColors" />
+      </el-form-item>
+      <el-form-item :label="$t('侧边栏背景色')">
+        <el-color-picker v-model="themeConfig.menuBg" :predefine="sidebarBgColors" />
+      </el-form-item>
+      <el-form-item :label="$t('折叠侧边栏')">
+        <el-switch v-model="themeConfig.menuCollapse"></el-switch>
+      </el-form-item>
+      <el-form-item :label="$t('侧边栏展开宽度')">
+        <el-input v-model="themeConfig.menuWidth"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('固定') + $t(' ') + $t('Header')">
+        <el-switch v-model="themeConfig.fixedHeader"></el-switch>
+      </el-form-item>
+      <el-form-item :label="$t('顶栏')">
+        <el-switch v-model="themeConfig.topBar"></el-switch>
+      </el-form-item>
+      <el-form-item :label="$t('模式') + $t(' ') + $t('切换')">
+        <el-switch v-model="themeConfig.showDark"></el-switch>
+      </el-form-item>
+      <el-form-item :label="$t('Size') + $t(' ') + $t('切换')">
+        <el-switch v-model="themeConfig.showSize"></el-switch>
+      </el-form-item>
+      <el-form-item :label="$t('面包屑')">
+        <el-switch v-model="themeConfig.breadcrumb"></el-switch>
+      </el-form-item>
+      <el-form-item :label="$t('标签栏')">
+        <el-switch v-model="themeConfig.tagBar"></el-switch>
+      </el-form-item>
+      <el-form-item :label="$t('标签栏') + $t(' ') + $t('刷新') + $t(' ') + $t('按钮')">
+        <el-switch v-model="themeConfig.tagBarRefresh"></el-switch>
+      </el-form-item>
+      <el-form-item :label="$t('标签栏') + $t(' ') + $t('菜单') + $t(' ') + $t('按钮')">
+        <el-switch v-model="themeConfig.tagBarMenu"></el-switch>
+      </el-form-item>
+      <el-button style="width: 100%" @click="Object.assign(themeConfig, origionThemeConfig)"
+        >{{ $t('重置') }}
+      </el-button>
+      <el-button style="width: 100%; margin: 10px 0" type="danger" @click="clear">
+        {{ $t('清除缓存') }}{{ $t(' ') }}{{ $t('并') }}{{ $t(' ') }}{{ $t('退出登录') }}
+      </el-button>
+    </el-form>
+  </el-drawer>
+</template>
+<script lang="ts" setup>
+import { themeConfig as origionThemeConfig } from '@/config';
+import { useSettingStore, useUserStore } from '@/store';
+const setting = useSettingStore();
+const themeConfig = setting.themeConfig;
+const userStore = useUserStore();
+const predefinePrimaryColors = reactive([
+  '#409EFF',
+  '#1890FF',
+  '#304156',
+  '#212121',
+  '#11A983',
+  '#13C2C2',
+  '#6959CD',
+  '#F5222D',
+]);
+const sidebarBgColors = reactive([
+  '#1d1e1f',
+  '#212121',
+  '#273352',
+  '#ffffff',
+  '#191b24',
+  '#191a23',
+  '#304156',
+  '#001628',
+]);
+const clear = () => {
+  setting.clearCache();
+  userStore.logOut();
+};
+</script>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 5cc3b155..91aecad1 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -4,12 +4,12 @@
       <layout-menu></layout-menu>
     </el-aside>
     <el-container>
-      <el-header v-show="themeConfig.fixedHeader" class="right-header" height="max-content">
+      <el-header v-if="themeConfig.fixedHeader" class="right-header" height="max-content">
         <layout-header></layout-header>
       </el-header>
       <el-main class="right-main">
         <el-scrollbar>
-          <layout-header v-show="!themeConfig.fixedHeader"></layout-header>
+          <layout-header v-if="!themeConfig.fixedHeader"></layout-header>
           <div class="main">
             <layout-page></layout-page>
           </div>
@@ -28,6 +28,8 @@
   >
     <layout-menu></layout-menu>
   </el-drawer>
+  <me-setting v-if="themeConfig.showSetting && !themeConfig.topBar" class="fixed-setting"></me-setting>
+  <me-setting-menu></me-setting-menu>
 </template>
 <script setup lang="ts" name="layout">
 import LayoutHeader from './components/header/index.vue';
@@ -62,4 +64,15 @@ const globalStore = useGlobalStore();
 .main {
   padding: $page-padding;
 }
+.fixed-setting {
+  position: fixed;
+  top: 50%;
+  right: 0;
+  padding: 10px;
+  border-radius: 3px 0 0 3px;
+  transform: translateY(-50%);
+  z-index: $z-index-top;
+  background-color: var(--el-color-primary);
+  color: var(--el-color-white);
+}
 </style>
diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts
index 35804b11..e7b7d31c 100644
--- a/src/store/modules/setting.ts
+++ b/src/store/modules/setting.ts
@@ -8,6 +8,7 @@ const useSettingStore = defineStore('setting', {
     themeConfig: useStorage(`${settingKey}-theme`, themeConfig),
     locale: useStorage(`${settingKey}-locale`, localeConfig.localeSetting.locale ?? 'zh-cn'),
     elLocale: undefined as Language | undefined,
+    showSettingMenu: false,
   }),
   actions: {
     setPrimaryStyle() {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index e0775779..59acbfe3 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,3 +1,5 @@
 $page-padding: 20px;
 $header-top-height: 48px;
 $header-tag-height: 35px;
+$z-index-top: 1999; //当前系统内最高但低于element-plus对应弹窗的z-index
+$z-index-higher: 3000; //高于element-plus对应弹窗的z-index