From 1be22ab94e71de7c73e5397bf01f0a1e52b1b961 Mon Sep 17 00:00:00 2001
From: Hooray Hu <304327508@qq.com>
Date: Wed, 12 Apr 2023 13:48:45 +0800
Subject: [PATCH] =?UTF-8?q?refactor!:=20=E8=B0=83=E6=95=B4=E5=BA=94?=
 =?UTF-8?q?=E7=94=A8=E9=85=8D=E7=BD=AE=E7=9A=84=E9=85=8D=E7=BD=AE=E9=A1=B9?=
 =?UTF-8?q?=EF=BC=8C=E5=B9=B6=E5=B0=86=E5=BA=94=E7=94=A8=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E4=BB=8E=E5=B7=A5=E5=85=B7=E6=A0=8F=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BREAKING CHANGE: 删除配置项 `toolbar.enableAppSetting` ，并替换为 `app.enableAppSetting`
---
 src/layouts/components/AppSetting/index.vue |  2 +-
 src/layouts/components/Tools/index.vue      |  5 ---
 src/layouts/index.vue                       | 39 +++++++++++++++++++--
 src/settings.default.ts                     |  2 +-
 src/types/global.d.ts                       | 10 +++---
 5 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/src/layouts/components/AppSetting/index.vue b/src/layouts/components/AppSetting/index.vue
index 52a475fe..70252041 100644
--- a/src/layouts/components/AppSetting/index.vue
+++ b/src/layouts/components/AppSetting/index.vue
@@ -22,7 +22,7 @@ watch(() => settingsStore.settings.menu.menuMode, (value) => {
 })
 
 onMounted(() => {
-  eventBus.on('global-theme-toggle', () => {
+  eventBus.on('global-app-setting-toggle', () => {
     isShow.value = !isShow.value
   })
 })
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 4668b386..4ba45874 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -62,11 +62,6 @@ function userCommand(command: 'home' | 'setting' | 'hotkeys' | 'logout') {
           <svg-icon v-show="settingsStore.settings.app.colorScheme === 'dark'" name="ep:moon" />
         </el-icon>
       </span>
-      <span v-if="settingsStore.settings.toolbar.enableAppSetting" class="item" @click="eventBus.emit('global-theme-toggle')">
-        <el-icon>
-          <svg-icon name="ep:setting" />
-        </el-icon>
-      </span>
     </div>
     <el-dropdown class="user-container" size="default" @command="userCommand">
       <div class="user-wrapper">
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 69027fe5..c7cba7d4 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -6,11 +6,12 @@ import MainSidebar from './components/MainSidebar/index.vue'
 import SubSidebar from './components/SubSidebar/index.vue'
 import Topbar from './components/Topbar/index.vue'
 import Search from './components/Search/index.vue'
-import AppSetting from './components/AppSetting/index.vue'
 import HotkeysIntro from './components/HotkeysIntro/index.vue'
+import AppSetting from './components/AppSetting/index.vue'
 import useSettingsStore from '@/store/modules/settings'
 import useKeepAliveStore from '@/store/modules/keepAlive'
 import useMenuStore from '@/store/modules/menu'
+import eventBus from '@/utils/eventBus'
 
 const routeInfo = useRoute()
 
@@ -87,8 +88,13 @@ onUnmounted(() => {
       <el-backtop :right="20" :bottom="20" title="回到顶部" />
     </div>
     <Search />
-    <AppSetting />
     <HotkeysIntro />
+    <div v-if="settingsStore.settings.app.enableAppSetting">
+      <el-icon class="app-setting" @click="eventBus.emit('global-app-setting-toggle')">
+        <svg-icon name="ep:setting" />
+      </el-icon>
+      <AppSetting />
+    </div>
   </div>
 </template>
 
@@ -222,6 +228,35 @@ header:not(.header-leave-active) + .wrapper {
   }
 }
 
+.app-setting {
+  position: fixed;
+  z-index: 10;
+  right: 0;
+  top: calc(50% + 250px);
+  width: 50px;
+  height: 50px;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+  font-size: 24px;
+  color: #fff;
+  background-color: var(--el-color-primary);
+  cursor: pointer;
+
+  svg {
+    animation: rotate 5s linear infinite;
+  }
+
+  @keyframes rotate {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}
+
 // 主内容区动画
 .main-enter-active {
   transition: 0.2s;
diff --git a/src/settings.default.ts b/src/settings.default.ts
index b8a12d9d..2807f5a9 100644
--- a/src/settings.default.ts
+++ b/src/settings.default.ts
@@ -11,6 +11,7 @@ const globalSettingsDefault: RecursiveRequired<Settings.all> = {
     enableProgress: true,
     enableDynamicTitle: false,
     routeBaseOn: 'frontend',
+    enableAppSetting: false,
   },
   home: {
     enable: true,
@@ -35,7 +36,6 @@ const globalSettingsDefault: RecursiveRequired<Settings.all> = {
     enableFullscreen: false,
     enablePageReload: false,
     enableColorScheme: false,
-    enableAppSetting: false,
   },
   breadcrumb: {
     enable: true,
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index b702ccf8..072c3aa5 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -50,6 +50,11 @@ declare namespace Settings {
      * @可选值 `'filesystem'` 文件系统
      */
     routeBaseOn?: 'frontend' | 'backend' | 'filesystem'
+    /**
+     * 是否开启应用配置，强烈建议在生产环境中关闭
+     * @默认值 `false`
+     */
+    enableAppSetting?: boolean
   }
   interface home {
     /**
@@ -135,11 +140,6 @@ declare namespace Settings {
      * @默认值 `false`
      */
     enableColorScheme?: boolean
-    /**
-     * 是否开启应用配置，强烈建议在生产环境中关闭
-     * @默认值 `false`
-     */
-    enableAppSetting?: boolean
   }
   interface breadcrumb {
     /**