From da04913ef324fff122732b445c1b1d1d662b87a3 Mon Sep 17 00:00:00 2001 From: vben Date: Thu, 18 Feb 2021 21:02:56 +0800 Subject: [PATCH] feat: added settingButtonPosition configuration close #275 --- CHANGELOG.zh_CN.md | 6 ++ build/vite/plugin/compress.ts | 1 + build/vite/plugin/imagemin.ts | 1 + build/vite/plugin/index.ts | 6 +- build/vite/plugin/windicss.ts | 12 ++++ package.json | 2 +- src/enums/appEnum.ts | 6 ++ src/hooks/event/useKeyPress.ts | 10 +-- src/hooks/setting/useRootSetting.ts | 3 + src/hooks/web/useFullScreen.ts | 7 +- src/layouts/default/feature/index.vue | 68 +++++++++++++++++-- .../header/components/user-dropdown/index.vue | 6 +- src/layouts/default/header/index.vue | 23 ++++++- src/layouts/default/setting/index.vue | 5 +- src/locales/lang/en/sys/app.ts | 4 +- src/locales/lang/zh_CN/sys/app.ts | 4 +- src/settings/projectSetting.ts | 11 ++- src/store/modules/permission.ts | 8 +-- src/store/modules/user.ts | 10 +-- src/types/config.d.ts | 9 ++- src/utils/helper/treeHelper.ts | 8 +-- src/utils/http/axios/checkStatus.ts | 2 +- src/utils/index.ts | 12 +--- src/views/sys/lock/LockPage.vue | 3 +- yarn.lock | 9 +-- 25 files changed, 168 insertions(+), 68 deletions(-) create mode 100644 build/vite/plugin/windicss.ts diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 77587746..4537a9ae 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -1,3 +1,9 @@ +## Wip + +### ✨ Features + +- 新增 `settingButtonPosition`配置项,用于配置`设置`按钮位置 + ## 2.0.0 (2021-02-18) ## (破坏性更新) Breaking changes diff --git a/build/vite/plugin/compress.ts b/build/vite/plugin/compress.ts index 3ad6c63f..be17fa0d 100644 --- a/build/vite/plugin/compress.ts +++ b/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'; diff --git a/build/vite/plugin/imagemin.ts b/build/vite/plugin/imagemin.ts index 1aa083cb..a3a0144d 100644 --- a/build/vite/plugin/imagemin.ts +++ b/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'; diff --git a/build/vite/plugin/index.ts b/build/vite/plugin/index.ts index 9c1bd96d..f1e5a146 100644 --- a/build/vite/plugin/index.ts +++ b/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)); diff --git a/build/vite/plugin/windicss.ts b/build/vite/plugin/windicss.ts new file mode 100644 index 00000000..b8c99ed6 --- /dev/null +++ b/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, + }, + }); +} diff --git a/package.json b/package.json index 8a35f8a3..d143db57 100644 --- a/package.json +++ b/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" }, diff --git a/src/enums/appEnum.ts b/src/enums/appEnum.ts index 4ff0ed83..afdeb0dd 100644 --- a/src/enums/appEnum.ts +++ b/src/enums/appEnum.ts @@ -22,6 +22,12 @@ export enum ThemeEnum { LIGHT = 'light', } +export enum SettingButtonPositionEnum { + AUTO = 'auto', + HEADER = 'header', + FIXED = 'fixed', +} + /** * 权限模式 */ diff --git a/src/hooks/event/useKeyPress.ts b/src/hooks/event/useKeyPress.ts index 2cabbbeb..d86a1497 100644 --- a/src/hooks/event/useKeyPress.ts +++ b/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); } diff --git a/src/hooks/setting/useRootSetting.ts b/src/hooks/setting/useRootSetting.ts index abd2ca2e..cb126f6b 100644 --- a/src/hooks/setting/useRootSetting.ts +++ b/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, diff --git a/src/hooks/web/useFullScreen.ts b/src/hooks/web/useFullScreen.ts index e52cbd11..0e5bef5e 100644 --- a/src/hooks/web/useFullScreen.ts +++ b/src/hooks/web/useFullScreen.ts @@ -57,12 +57,7 @@ export function useFullscreen( async function toggleFullscreen(): Promise { if (!unref(target)) return; - - if (isFullscreen()) { - return exitFullscreen(); - } else { - return enterFullscreen(); - } + return isFullscreen() ? exitFullscreen() : enterFullscreen(); } return { diff --git a/src/layouts/default/feature/index.vue b/src/layouts/default/feature/index.vue index 16b53b19..562e6fc8 100644 --- a/src/layouts/default/feature/index.vue +++ b/src/layouts/default/feature/index.vue @@ -1,26 +1,80 @@ - + + + + diff --git a/src/layouts/default/header/components/user-dropdown/index.vue b/src/layouts/default/header/components/user-dropdown/index.vue index 72ebbf0f..d00d1ecc 100644 --- a/src/layouts/default/header/components/user-dropdown/index.vue +++ b/src/layouts/default/header/components/user-dropdown/index.vue @@ -22,7 +22,7 @@ icon="ion:lock-closed-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': diff --git a/src/layouts/default/header/index.vue b/src/layouts/default/header/index.vue index c84bf1e7..dc615cbe 100644 --- a/src/layouts/default/header/index.vue +++ b/src/layouts/default/header/index.vue @@ -50,7 +50,7 @@ - + @@ -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, }; }, }); diff --git a/src/layouts/default/setting/index.vue b/src/layouts/default/setting/index.vue index 68dd3acf..fe0402d2 100644 --- a/src/layouts/default/setting/index.vue +++ b/src/layouts/default/setting/index.vue @@ -1,5 +1,5 @@