feat(layout): move setting button to tabs when fold (#3264)

src/layouts/default/feature/index.vue

@@ -12,6 +12,8 @@
 
   import SessionTimeoutLogin from '/@/views/sys/login/SessionTimeoutLogin.vue';
 
+  import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
+
   export default defineComponent({
     name: 'LayoutFeatures',
     components: {
@@ -41,12 +43,16 @@
         return settingButtonPosition === SettingButtonPositionEnum.FIXED;
       });
 
+      const { getShowMultipleTab } = useMultipleTabSetting();
+
       return {
         getTarget: () => document.body,
         getUseOpenBackTop,
         getIsFixedSettingDrawer,
         prefixCls,
         getIsSessionTimeout,
+        getShowMultipleTab,
+        getFullContent,
       };
     },
   });
@@ -55,7 +61,10 @@
 <template>
   <LayoutLockPage />
   <BackTop v-if="getUseOpenBackTop" :target="getTarget" />
-  <SettingDrawer v-if="getIsFixedSettingDrawer" :class="prefixCls" />
+  <SettingDrawer
+    v-if="getIsFixedSettingDrawer && (!getShowMultipleTab || getFullContent)"
+    :class="prefixCls"
+  />
   <SessionTimeoutLogin v-if="getIsSessionTimeout" />
 </template>
 

src/layouts/default/tabs/components/SettingButton.vue

@@ -0,0 +1,30 @@
+<template>
+  <span :class="`${prefixCls}__extra-fold`" @click="openDrawer(true)">
+    <Icon icon="ion:settings-outline" />
+    <SettingDrawer @register="register" />
+  </span>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import SettingDrawer from '/@/layouts/default/setting/SettingDrawer';
+  import Icon from '@/components/Icon/Icon.vue';
+
+  import { useDrawer } from '/@/components/Drawer';
+
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  export default defineComponent({
+    name: 'SettingButton',
+    components: { SettingDrawer, Icon },
+    setup() {
+      const [register, { openDrawer }] = useDrawer();
+      const { prefixCls } = useDesign('multiple-tabs-content');
+
+      return {
+        register,
+        openDrawer,
+        prefixCls,
+      };
+    },
+  });
+</script>

src/layouts/default/tabs/index.vue

@@ -19,6 +19,7 @@
       </template>
 
       <template #rightExtra v-if="getShowRedo || getShowQuick">
+        <SettingButton v-if="(getShowFold && getIsUnFold) || !getShowHeader" />
         <TabRedo v-if="getShowRedo" />
         <TabContent isExtra :tabItem="$route" v-if="getShowQuick" />
         <FoldButton v-if="getShowFold" />
@@ -53,6 +54,10 @@
   import { useMouse } from '@vueuse/core';
   import { multipleTabHeight } from '/@/settings/designSetting';
 
+  import SettingButton from './components/SettingButton.vue';
+  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+
   export default defineComponent({
     name: 'MultipleTabs',
     components: {
@@ -61,6 +66,7 @@
       Tabs,
       TabPane: Tabs.TabPane,
       TabContent,
+      SettingButton,
     },
     setup() {
       const affixTextList = initAffixTabs();
@@ -83,6 +89,10 @@
 
       const { y: mouseY } = useMouse();
 
+      const { getShowMenu } = useMenuSetting();
+      const { getShowHeader } = useHeaderSetting();
+      const getIsUnFold = computed(() => !unref(getShowMenu) && !unref(getShowHeader));
+
       const getWrapClass = computed(() => {
         return [
           prefixCls,
@@ -141,6 +151,8 @@
         getShowQuick,
         getShowRedo,
         getShowFold,
+        getIsUnFold,
+        getShowHeader,
       };
     },
   });