diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 77587746c0bcd0680a8259dcbaa72daba982f398..4537a9ae359fd224ffa9aaa7542ebffd98aa579c 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 3ad6c63f2f40e28689d94f30863d105183496713..be17fa0d95723096e4b79f3e1e40b3d56c8cfb75 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 1aa083cb749a7933d44105fc256e800f53442c2e..a3a0144d834b017f4d5455b8aa0262a54a6d1e92 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 9c1bd96d760093bd102fbce83a90bcf5ff99816b..f1e5a1460a01f36c9a718c49f5d63af4cb7794a7 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 0000000000000000000000000000000000000000..b8c99ed64d06f474fd8a32fa796c0ace8cd0fb1b --- /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 8a35f8a3a9c1610e92cecdf7a493ec23ffa78399..d143db57a89fd44bfbdc7d2f5be579de50b6c2de 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 4ff0ed83aec3f21a71b3bd0d1f2bc32988b4ecdc..afdeb0dd527c2066a9564d5cca9b0754a58db8a6 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 2cabbbeb62e7fe0cf19098f6c8685e7ae8319e7f..d86a14971cfa20d403964ac0ea8bb10630cfd849 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 abd2ca2e3ddccc3260a111e1334e9bd8f6116d88..cb126f6ba2c8cb7dd8512262158f33abea6546dc 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 e52cbd1196464b21394ede8523389824d3ac1d62..0e5bef5ea9976875eaa1bdff308002a4e160b65d 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 16b53b19249dd0ef0c3ba294f9cd1ada5f6e152e..562e6fc8de2526ff773cb986a4638a5fd13a76d3 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 72ebbf0f93fa2549c556607c9148334824a8c329..d00d1eccf582fdf222371aadbd3b1bcbf4a13616 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 c84bf1e7875af7239c22c5f7e527709015c4a1c6..dc615cbe3387af4284b34a8012be4b72e99585e5 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 68dd3acfd30b52832f55f34b720fa9568c329728..fe0402d28505853efb3c7d534a5096558c191d16 100644 --- a/src/layouts/default/setting/index.vue +++ b/src/layouts/default/setting/index.vue @@ -1,5 +1,5 @@