feat: added settingButtonPosition configuration close #275

CHANGELOG.zh_CN.md

@@ -1,3 +1,9 @@
+## Wip
+
+### ✨ Features
+
+- 新增 `settingButtonPosition`配置项,用于配置`设置`按钮位置
+
 ## 2.0.0 (2021-02-18)
 
 ## (破坏性更新) Breaking changes

build/vite/plugin/compress.ts

@@ -1,5 +1,6 @@
 /**
  * Used to package and output gzip. Note that this does not work properly in Vite, the specific reason is still being investigated
+ * https://github.com/anncwb/vite-plugin-compression
  */
 import type { Plugin } from 'vite';
 

build/vite/plugin/imagemin.ts

@@ -1,4 +1,5 @@
 // Image resource files used to compress the output of the production environment
+// https://github.com/anncwb/vite-plugin-imagemin
 
 import viteImagemin from 'vite-plugin-imagemin';
 

build/vite/plugin/index.ts

@@ -4,7 +4,6 @@ import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import legacy from '@vitejs/plugin-legacy';
 
-import windiCSS from 'vite-plugin-windicss';
 import PurgeIcons from 'vite-plugin-purge-icons';
 
 import { ViteEnv } from '../../utils';
@@ -16,6 +15,7 @@ import { configStyleImportPlugin } from './styleImport';
 import { configVisualizerConfig } from './visualizer';
 import { configThemePlugin } from './theme';
 import { configImageminPlugin } from './imagemin';
+import { configWindiCssPlugin } from './windicss';
 
 export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   const { VITE_USE_IMAGEMIN, VITE_USE_MOCK, VITE_LEGACY, VITE_BUILD_COMPRESS } = viteEnv;
@@ -25,7 +25,6 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
     vue(),
     // have to
     vueJsx(),
-    ...windiCSS(),
   ];
 
   // @vitejs/plugin-legacy
@@ -34,6 +33,9 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   // vite-plugin-html
   vitePlugins.push(configHtmlPlugin(viteEnv, isBuild));
 
+  // vite-plugin-windicss
+  vitePlugins.push(configWindiCssPlugin());
+
   // vite-plugin-mock
   VITE_USE_MOCK && vitePlugins.push(configMockPlugin(isBuild));
 

build/vite/plugin/windicss.ts

@@ -0,0 +1,12 @@
+import windiCSS from 'vite-plugin-windicss';
+
+import type { Plugin } from 'vite';
+
+export function configWindiCssPlugin(): Plugin[] {
+  return windiCSS({
+    safelist: 'shadow shadow-xl',
+    preflight: {
+      enableAll: true,
+    },
+  });
+}

package.json

@@ -107,7 +107,7 @@
     "vite-plugin-pwa": "^0.4.7",
     "vite-plugin-style-import": "^0.7.2",
     "vite-plugin-theme": "^0.4.3",
-    "vite-plugin-windicss": "0.2.2",
+    "vite-plugin-windicss": "0.3.3",
     "vue-eslint-parser": "^7.5.0",
     "yargs": "^16.2.0"
   },

src/enums/appEnum.ts

@@ -22,6 +22,12 @@ export enum ThemeEnum {
   LIGHT = 'light',
 }
 
+export enum SettingButtonPositionEnum {
+  AUTO = 'auto',
+  HEADER = 'header',
+  FIXED = 'fixed',
+}
+
 /**
  * 权限模式
  */

src/hooks/event/useKeyPress.ts

@@ -160,13 +160,5 @@ export function getTargetElement(
   if (!target) {
     return defaultElement;
   }
-
-  let targetElement: TargetElement | undefined | null;
-
-  if (isFunction(target)) {
-    targetElement = target();
-  } else {
-    targetElement = unref(target);
-  }
-  return targetElement;
+  return isFunction(target) ? target() : unref(target);
 }

src/hooks/setting/useRootSetting.ts

@@ -16,6 +16,8 @@ const getPageLoading = computed(() => appStore.getPageLoading);
 
 const getOpenKeepAlive = computed(() => unref(getRootSetting).openKeepAlive);
 
+const getSettingButtonPosition = computed(() => unref(getRootSetting).settingButtonPosition);
+
 const getCanEmbedIFramePage = computed(() => unref(getRootSetting).canEmbedIFramePage);
 
 const getPermissionMode = computed(() => unref(getRootSetting).permissionMode);
@@ -58,6 +60,7 @@ export function useRootSetting() {
   return {
     setRootSetting,
 
+    getSettingButtonPosition,
     getFullContent,
     getColorWeak,
     getGrayMode,

src/hooks/web/useFullScreen.ts

@@ -57,12 +57,7 @@ export function useFullscreen(
 
   async function toggleFullscreen(): Promise<void> {
     if (!unref(target)) return;
-
-    if (isFullscreen()) {
-      return exitFullscreen();
-    } else {
-      return enterFullscreen();
-    }
+    return isFullscreen() ? exitFullscreen() : enterFullscreen();
   }
 
   return {

src/layouts/default/feature/index.vue

@@ -1,26 +1,80 @@
-<template>
-  <LayoutLockPage />
-  <BackTop v-if="getUseOpenBackTop" :target="getTarget" />
-</template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
-  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+  import { defineComponent, computed, unref } from 'vue';
   import { BackTop } from 'ant-design-vue';
+
   import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  import { SettingButtonPositionEnum } from '/@/enums/appEnum';
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 
   export default defineComponent({
     name: 'LayoutFeatures',
     components: {
       BackTop,
       LayoutLockPage: createAsyncComponent(() => import('/@/views/sys/lock/index.vue')),
+      SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue')),
     },
     setup() {
-      const { getUseOpenBackTop } = useRootSetting();
+      const {
+        getUseOpenBackTop,
+        getShowSettingButton,
+        getSettingButtonPosition,
+        getFullContent,
+      } = useRootSetting();
+
+      const { prefixCls } = useDesign('setting-drawer-fearure');
+      const { getShowHeader } = useHeaderSetting();
+
+      const getIsFixedSettingDrawer = computed(() => {
+        if (!unref(getShowSettingButton)) {
+          return false;
+        }
+        const settingButtonPosition = unref(getSettingButtonPosition);
+
+        if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
+          return !unref(getShowHeader) || unref(getFullContent);
+        }
+        return settingButtonPosition === SettingButtonPositionEnum.FIXED;
+      });
 
       return {
         getTarget: () => document.body,
         getUseOpenBackTop,
+        getIsFixedSettingDrawer,
+        prefixCls,
       };
     },
   });
 </script>
+
+<template>
+  <LayoutLockPage />
+  <BackTop v-if="getUseOpenBackTop" :target="getTarget" />
+  <SettingDrawer v-if="getIsFixedSettingDrawer" :class="prefixCls" />
+</template>
+
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-setting-drawer-fearure';
+
+  .@{prefix-cls} {
+    position: absolute;
+    top: 45%;
+    right: 0;
+    z-index: 10;
+    display: flex;
+    padding: 10px;
+    color: @white;
+    cursor: pointer;
+    background: @primary-color;
+    border-radius: 6px 0 0 6px;
+    justify-content: center;
+    align-items: center;
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+</style>

src/layouts/default/header/components/user-dropdown/index.vue

@@ -22,7 +22,7 @@
           icon="ion:lock-closed-outline"
         />
         <MenuItem
-          key="loginOut"
+          key="logout"
           :text="t('layout.header.dropdownItemLoginOut')"
           icon="ion:power-outline"
         />
@@ -51,7 +51,7 @@
 
   import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 
-  type MenuEvent = 'loginOut' | 'doc' | 'lock';
+  type MenuEvent = 'logout' | 'doc' | 'lock';
 
   export default defineComponent({
     name: 'UserDropdown',
@@ -93,7 +93,7 @@
 
       function handleMenuClick(e: { key: MenuEvent }) {
         switch (e.key) {
-          case 'loginOut':
+          case 'logout':
             handleLoginOut();
             break;
           case 'doc':

src/layouts/default/header/index.vue

@@ -50,7 +50,7 @@
 
       <UserDropDown :theme="getHeaderTheme" />
 
-      <SettingDrawer v-if="getShowSettingButton" :class="`${prefixCls}-action__item`" />
+      <SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" />
     </div>
   </Header>
 </template>
@@ -72,6 +72,7 @@
   import { useLocaleSetting } from '/@/hooks/setting/useLocaleSetting';
 
   import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
+  import { SettingButtonPositionEnum } from '/@/enums/appEnum';
   import { AppLocalePicker } from '/@/components/Application';
 
   import { UserDropDown, LayoutBreadcrumb, FullScreen, Notify, ErrorAction } from './components';
@@ -112,7 +113,11 @@
         getIsMixSidebar,
       } = useMenuSetting();
       const { getShowLocale } = useLocaleSetting();
-      const { getUseErrorHandle, getShowSettingButton } = useRootSetting();
+      const {
+        getUseErrorHandle,
+        getShowSettingButton,
+        getSettingButtonPosition,
+      } = useRootSetting();
 
       const {
         getHeaderTheme,
@@ -122,6 +127,7 @@
         getShowContent,
         getShowBread,
         getShowHeaderLogo,
+        getShowHeader,
       } = useHeaderSetting();
 
       const { getIsMobile } = useAppInject();
@@ -138,6 +144,18 @@
         ];
       });
 
+      const getShowSetting = computed(() => {
+        if (!unref(getShowSettingButton)) {
+          return false;
+        }
+        const settingButtonPosition = unref(getSettingButtonPosition);
+
+        if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
+          return unref(getShowHeader);
+        }
+        return settingButtonPosition === SettingButtonPositionEnum.HEADER;
+      });
+
       const getLogoWidth = computed(() => {
         if (!unref(getIsMixMode) || unref(getIsMobile)) {
           return {};
@@ -175,6 +193,7 @@
         getLogoWidth,
         getIsMixSidebar,
         getShowSettingButton,
+        getShowSetting,
       };
     },
   });

src/layouts/default/setting/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div @click="openDrawer" :class="prefixCls">
+  <div @click="openDrawer">
     <Icon icon="ion:settings-outline" />
     <SettingDrawer @register="register" />
   </div>
@@ -10,17 +10,14 @@
   import Icon from '/@/components/Icon';
 
   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('setting-button');
       return {
-        prefixCls,
         register,
         openDrawer,
       };

src/locales/lang/en/sys/app.ts

@@ -1,5 +1,5 @@
 export default {
-  loginOutTip: 'Reminder',
-  loginOutMessage: 'Confirm to exit the system?',
+  logoutTip: 'Reminder',
+  logoutMessage: 'Confirm to exit the system?',
   menuLoading: 'Menu loading...',
 };

src/locales/lang/zh_CN/sys/app.ts

@@ -1,5 +1,5 @@
 export default {
-  loginOutTip: '温馨提醒',
-  loginOutMessage: '是否确认退出系统?',
+  logoutTip: '温馨提醒',
+  logoutMessage: '是否确认退出系统?',
   menuLoading: '菜单加载中...',
 };

src/settings/projectSetting.ts

@@ -2,14 +2,23 @@ import type { ProjectConfig } from '/@/types/config';
 
 import { MenuTypeEnum, MenuModeEnum, TriggerEnum, MixSidebarTriggerEnum } from '/@/enums/menuEnum';
 import { CacheTypeEnum } from '/@/enums/cacheEnum';
-import { ContentEnum, PermissionModeEnum, ThemeEnum, RouterTransitionEnum } from '/@/enums/appEnum';
+import {
+  ContentEnum,
+  PermissionModeEnum,
+  ThemeEnum,
+  RouterTransitionEnum,
+  SettingButtonPositionEnum,
+} from '/@/enums/appEnum';
 import { primaryColor, themeMode } from '../../build/config/themeConfig';
 
 // ! You need to clear the browser cache after the change
 const setting: ProjectConfig = {
   // Whether to show the configuration button
   showSettingButton: true,
 
+  // `Settings` button position
+  settingButtonPosition: SettingButtonPositionEnum.AUTO,
+
   // Permission mode
   permissionMode: PermissionModeEnum.ROLE,