diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 54f79d3b..b7c3dd29 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -14,7 +14,7 @@ ### ⚡ Performance Improvements -- 页面切换 loading 逻辑修改。对于已经加载过的页面不管有没有关闭,再次打开不会在显示 loading(已经打开过的页面在此打开速度比较快),刷新后恢复。 +- 页面切换 loading 逻辑修改。对于已经加载过的页面不管有没有关闭,再次打开不会在显示 loading(已经打开过的页面再次打开速度比较快,可以不需要 loading,同理顶部进度条逻辑也一样),刷新后恢复。 ### 🎫 Chores diff --git a/build/vite/plugin/index.ts b/build/vite/plugin/index.ts index 9a184e36..86323b11 100644 --- a/build/vite/plugin/index.ts +++ b/build/vite/plugin/index.ts @@ -75,6 +75,7 @@ export function createVitePlugins(viteEnv: ViteEnv) { createMockServer({ ignore: /^\_/, mockPath: 'mock', + showTime: true, }) ); } diff --git a/package.json b/package.json index d2449bc4..27f9b3cb 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "devDependencies": { "@commitlint/cli": "^11.0.0", "@commitlint/config-conventional": "^11.0.0", - "@iconify/json": "^1.1.267", + "@iconify/json": "^1.1.267yar", "@ls-lint/ls-lint": "^1.9.2", "@purge-icons/generated": "^0.4.1", "@types/echarts": "^4.9.2", @@ -99,7 +99,7 @@ "typescript": "^4.1.2", "vite": "^1.0.0-rc.13", "vite-plugin-html": "^1.0.0-beta.2", - "vite-plugin-mock": "^1.0.6", + "vite-plugin-mock": "^1.0.9", "vite-plugin-purge-icons": "^0.4.5", "vite-plugin-pwa": "^0.1.7", "vue-eslint-parser": "^7.2.0", diff --git a/src/App.vue b/src/App.vue index 54aa8871..3f1afebf 100644 --- a/src/App.vue +++ b/src/App.vue @@ -16,7 +16,6 @@ import { useLockPage } from '/@/hooks/web/useLockPage'; import { useLocale } from '/@/hooks/web/useLocale'; - import { createBreakpointListen } from '/@/hooks/event/useBreakpoint'; export default defineComponent({ name: 'App', @@ -25,9 +24,6 @@ // Initialize vuex internal system configuration initAppConfigStore(); - // Create a global breakpoint monitor - createBreakpointListen(); - // Get ConfigProvider configuration const { transformCellText } = getConfigProvider(); diff --git a/src/hooks/event/useBreakpoint.ts b/src/hooks/event/useBreakpoint.ts index e2e10c65..c8bb5fe7 100644 --- a/src/hooks/event/useBreakpoint.ts +++ b/src/hooks/event/useBreakpoint.ts @@ -6,6 +6,12 @@ let globalScreenRef: ComputedRef; let globalWidthRef: ComputedRef; let globalRealWidthRef: ComputedRef; +export interface CreateCallbackParams { + screen: ComputedRef; + width: ComputedRef; + realWidth: ComputedRef; +} + export function useBreakpoint() { return { screenRef: computed(() => unref(globalScreenRef)), @@ -16,7 +22,7 @@ export function useBreakpoint() { } // Just call it once -export function createBreakpointListen(fn?: Fn) { +export function createBreakpointListen(fn?: (opt: CreateCallbackParams) => void) { const screenRef = ref(sizeEnum.XL); const realWidthRef = ref(window.innerWidth); @@ -46,8 +52,9 @@ export function createBreakpointListen(fn?: Fn) { useEventListener({ el: window, name: 'resize', + listener: () => { - fn && fn(); + resizeFn(); getWindowWidth(); }, }); @@ -56,6 +63,17 @@ export function createBreakpointListen(fn?: Fn) { globalScreenRef = computed(() => unref(screenRef)); globalWidthRef = computed((): number => screenMap.get(unref(screenRef)!)!); globalRealWidthRef = computed((): number => unref(realWidthRef)); + + function resizeFn() { + fn && + fn({ + screen: globalScreenRef, + width: globalWidthRef, + realWidth: globalRealWidthRef, + }); + } + + resizeFn(); return { screenRef: globalScreenRef, screenEnum, diff --git a/src/layouts/default/header/LayoutHeader.tsx b/src/layouts/default/header/LayoutHeader.tsx index 4f79eda1..c8e7ae15 100644 --- a/src/layouts/default/header/LayoutHeader.tsx +++ b/src/layouts/default/header/LayoutHeader.tsx @@ -45,6 +45,7 @@ import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum'; import { AppLocalePicker } from '/@/components/Application'; import { useI18n } from '/@/hooks/web/useI18n'; import { propTypes } from '/@/utils/propTypes'; +import { useLayoutContext } from '../useLayoutContext'; interface TooltipItemProps { title: string; @@ -71,6 +72,9 @@ export default defineComponent({ // const logoWidthRef = ref(200); const logoRef = ref(null); + + const injectValue = useLayoutContext(); + const { refreshPage } = useTabs(); const { t } = useI18n(); @@ -116,6 +120,10 @@ export default defineComponent({ return theme ? `layout-header__header--${theme}` : ''; }); + const isPc = computed(() => { + return !unref(injectValue.isMobile); + }); + const getSplitType = computed(() => { return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE; }); @@ -147,11 +155,13 @@ export default defineComponent({ {unref(getShowHeaderTrigger) && ( )} - {unref(getShowBread) && } + {unref(getShowBread) && unref(isPc) && ( + + )} )} - {unref(getShowTopMenu) && ( + {unref(getShowTopMenu) && unref(isPc) && ( //
- {unref(getUseErrorHandle) && ( + {unref(getUseErrorHandle) && unref(isPc) && ( {() => ( )} - {unref(getUseLockPage) && ( + {unref(getUseLockPage) && unref(isPc) && ( {() => renderActionDefault(LockOutlined, handleLockPage)} )} - {unref(getShowNotice) && ( + {unref(getShowNotice) && unref(isPc) && ( {() => } )} - {unref(getShowRedo) && ( + {unref(getShowRedo) && unref(isPc) && ( {() => renderActionDefault(RedoOutlined, refreshPage)} )} - {unref(getShowFullScreen) && ( + {unref(getShowFullScreen) && unref(isPc) && ( { const style: CSSProperties = {}; if (unref(getFixed)) { - style.width = unref(getCalcContentWidth); + style.width = unref(injectValue.isMobile) ? '100%' : unref(getCalcContentWidth); } if (unref(getShowFullHeaderRef)) { style.top = `${unref(fullHeaderHeightRef)}px`; @@ -81,7 +81,7 @@ export default defineComponent({ nextTick(() => { const headerEl = unref(headerElRef)?.$el; const tabEl = unref(tabElRef)?.$el; - const fullHeaderEl = unref(injectValue.fullHeaderRef)?.$el; + const fullHeaderEl = unref(injectValue.fullHeader)?.$el; let height = 0; if (headerEl && !unref(getShowFullHeaderRef)) { diff --git a/src/layouts/default/index.tsx b/src/layouts/default/index.tsx index 9802ec16..80e6946e 100644 --- a/src/layouts/default/index.tsx +++ b/src/layouts/default/index.tsx @@ -21,14 +21,20 @@ import { useRootSetting } from '/@/hooks/setting/useRootSetting'; import { createLayoutContext } from './useLayoutContext'; import { registerGlobComp } from '/@/components/registerGlobComp'; - +import { createBreakpointListen } from '/@/hooks/event/useBreakpoint'; +import { isMobile } from '/@/utils/is'; export default defineComponent({ name: 'DefaultLayout', setup() { const { currentRoute } = useRouter(); const headerRef = ref(null); + const isMobileRef = ref(false); - createLayoutContext({ fullHeaderRef: headerRef }); + createLayoutContext({ fullHeader: headerRef, isMobile: isMobileRef }); + + createBreakpointListen(() => { + isMobileRef.value = isMobile(); + }); // ! Only register global components here // ! Can reduce the size of the first screen code diff --git a/src/layouts/default/sider/index.tsx b/src/layouts/default/sider/index.tsx index 2ed7426c..5aac32fd 100644 --- a/src/layouts/default/sider/index.tsx +++ b/src/layouts/default/sider/index.tsx @@ -81,7 +81,7 @@ export default defineComponent({ topRef.value = 0; if (unref(getUnFixedAndFull)) return; nextTick(() => { - const fullHeaderEl = unref(injectValue.fullHeaderRef)?.$el; + const fullHeaderEl = unref(injectValue.fullHeader)?.$el; if (!fullHeaderEl) return; topRef.value = fullHeaderEl.offsetHeight; }); @@ -121,10 +121,9 @@ export default defineComponent({ return () => { return ( <> - {unref(getMenuFixed) && ( + {unref(getMenuFixed) && !unref(injectValue.isMobile) && (
)} - ; + fullHeader: Ref; + isMobile: Ref; } const layoutContextInjectKey: InjectionKey = Symbol(); diff --git a/src/store/modules/tab.ts b/src/store/modules/tab.ts index b699d964..8195cef1 100644 --- a/src/store/modules/tab.ts +++ b/src/store/modules/tab.ts @@ -97,10 +97,10 @@ class Tab extends VuexModule { const pageCacheSet = new Set(); this.tabsState.forEach((tab) => { const item = getRoute(tab); - const needCache = !item.meta.ignoreKeepAlive; + const needCache = !item.meta?.ignoreKeepAlive; if (!needCache) return; - if (item.meta.affix) { + if (item.meta?.affix) { const name = item.name as string; pageCacheSet.add(name); } else if (item.matched && needCache) { diff --git a/src/utils/is.ts b/src/utils/is.ts index b53e7e89..99250504 100644 --- a/src/utils/is.ts +++ b/src/utils/is.ts @@ -73,3 +73,9 @@ export function isImageDom(o: Element) { export const isTextarea = (element: Element | null): element is HTMLTextAreaElement => { return element !== null && element.tagName.toLowerCase() === 'textarea'; }; + +export const isMobile = (): boolean => { + return !!navigator.userAgent.match( + /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i + ); +}; diff --git a/yarn.lock b/yarn.lock index a10bf191..e76fb8d8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1061,10 +1061,10 @@ resolved "https://registry.npmjs.org/@iconify/iconify/-/iconify-2.0.0-rc.2.tgz#c4a95ddc06ca9b9496df03604e66fdefb39f4c4b" integrity sha512-BybEHU5/I9EQ0CcwKAqmreZ2bMnAXrqLCTptAc6vPetHMbrXdZfejP5mt57e/8PNSt/qE7BHniU5PCYA+PGIHw== -"@iconify/json@^1.1.267": - version "1.1.267" - resolved "https://registry.npmjs.org/@iconify/json/-/json-1.1.267.tgz#52ab5390fcaf95e0d68260523a3a3fbc575dfe01" - integrity sha512-VKNvyALvbuwsXO7r2XvdoqdctmvJzp1/XYOXRfhJ4w+sjtWYp8T3oRGDJ0AZTafzGiBBUaMwCZVP+j87rqgD3w== +"@iconify/json@^1.1.267yar": + version "1.1.268" + resolved "https://registry.npmjs.org/@iconify/json/-/json-1.1.268.tgz#a2691302a6b49b52bc7c47da80e4a5f8fc8919db" + integrity sha512-eGk+KuK0Ld/XGb+SzRV2TVBddiGThTiw0ZT+19eMvt8yufRWzi9DeSaogvd5pZoXaDFH25r1fb06nz6PEMqefw== "@koa/cors@^3.1.0": version "3.1.0" @@ -1174,6 +1174,18 @@ is-module "^1.0.0" resolve "^1.17.0" +"@rollup/plugin-node-resolve@^11.0.0": + version "11.0.0" + resolved "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.0.0.tgz#770458fb26691a686c5f29f37dded94832ffce59" + integrity sha512-8Hrmwjn1pLYjUxcv7U7IPP0qfnzEJWHyHE6CaZ8jbLM+8axaarJRB1jB6JgKTDp5gNga+TpsgX6F8iuvgOerKQ== + dependencies: + "@rollup/pluginutils" "^3.1.0" + "@types/resolve" "1.17.1" + builtin-modules "^3.1.0" + deepmerge "^4.2.2" + is-module "^1.0.0" + resolve "^1.19.0" + "@rollup/plugin-node-resolve@^7.1.1": version "7.1.3" resolved "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz#80de384edfbd7bfc9101164910f86078151a3eca" @@ -1198,18 +1210,6 @@ is-module "^1.0.0" resolve "^1.17.0" -"@rollup/plugin-node-resolve@^9.0.0": - version "9.0.0" - resolved "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-9.0.0.tgz#39bd0034ce9126b39c1699695f440b4b7d2b62e6" - integrity sha512-gPz+utFHLRrd41WMP13Jq5mqqzHL3OXrfj3/MkSyB6UBIcuNt9j60GCbarzMzdf1VHFpOxfQh/ez7wyadLMqkg== - dependencies: - "@rollup/pluginutils" "^3.1.0" - "@types/resolve" "1.17.1" - builtin-modules "^3.1.0" - deepmerge "^4.2.2" - is-module "^1.0.0" - resolve "^1.17.0" - "@rollup/plugin-replace@^2.3.1", "@rollup/plugin-replace@^2.3.3": version "2.3.4" resolved "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-2.3.4.tgz#7dd84c17755d62b509577f2db37eb524d7ca88ca" @@ -1227,7 +1227,7 @@ estree-walker "^1.0.1" picomatch "^2.2.2" -"@rollup/pluginutils@^4.0.0", "@rollup/pluginutils@^4.1.0": +"@rollup/pluginutils@^4.1.0": version "4.1.0" resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.0.tgz#0dcc61c780e39257554feb7f77207dceca13c838" integrity sha512-TrBhfJkFxA+ER+ew2U2/fHbebhLT/l/2pRk0hfj9KusXUuRXd2v0R58AfaZK9VXDQ4TogOSEmICVrQAA3zFnHQ== @@ -2557,7 +2557,7 @@ chardet@^0.7.0: resolved "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e" integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA== -chokidar@^3.4.2: +chokidar@^3.4.2, chokidar@^3.4.3: version "3.4.3" resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz#c1df38231448e45ca4ac588e6c79573ba6a57d5b" integrity sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ== @@ -3170,6 +3170,11 @@ dateformat@^3.0.0: resolved "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae" integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q== +dayjs@^1.9.6: + version "1.9.6" + resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.9.6.tgz#6f0c77d76ac1ff63720dd1197e5cb87b67943d70" + integrity sha512-HngNLtPEBWRo8EFVmHFmSXAjtCX8rGNqeXQI0Gh7wCTSqwaKgPIDqu9m07wABVopNwzvOeCb+2711vQhDlcIXw== + de-indent@^1.0.2: version "1.0.2" resolved "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d" @@ -3542,11 +3547,6 @@ esbuild-register@^1.1.1: source-map-support "^0.5.19" strip-json-comments "^3.1.1" -esbuild@^0.7.19: - version "0.7.22" - resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.7.22.tgz#9149b903f8128b7c45a754046c24199d76bbe08e" - integrity sha512-B43SYg8LGWYTCv9Gs0RnuLNwjzpuWOoCaZHTWEDEf5AfrnuDMerPVMdCEu7xOdhFvQ+UqfP2MGU9lxEy0JzccA== - esbuild@^0.8.12: version "0.8.15" resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.8.15.tgz#cbc4d82a7fc4571d455233456e6fba83fd0364f1" @@ -3557,6 +3557,11 @@ esbuild@^0.8.17: resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.8.17.tgz#1c16c6d5988dcfdcf27a7e1612b7fd05e1477c54" integrity sha512-ReHap+Iyn5BQF0B8F3xrLwu+j57ri5uDUw2ej9XTPAuFDebYiWwRzBY4jhF610bklveXLbCGim/8/2wQKQlu1w== +esbuild@^0.8.18: + version "0.8.18" + resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.8.18.tgz#4a8c70df8fffa27164a26daa3ec58ce6f1315446" + integrity sha512-EPbCSr7Ems1loeoy1faUGnJOwTwSrGcoYVQ4f4T4JMKjxJxrWAg+zqXkZK7GvqxfvokPp3HV6Raqn6rqAuW7+Q== + escalade@^3.1.1: version "3.1.1" resolved "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40" @@ -6955,7 +6960,7 @@ resolve-url@^0.2.1: resolved "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a" integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo= -resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.3.2: +resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.19.0, resolve@^1.3.2: version "1.19.0" resolved "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz#1af5bf630409734a067cae29318aac7fa29a267c" integrity sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg== @@ -7021,12 +7026,12 @@ rollup-plugin-dynamic-import-variables@^1.1.0: globby "^11.0.0" magic-string "^0.25.7" -rollup-plugin-esbuild@^2.5.2: - version "2.5.2" - resolved "https://registry.npmjs.org/rollup-plugin-esbuild/-/rollup-plugin-esbuild-2.5.2.tgz#fd7d4a88518898012a9d07e4c3ef8b4009c244d3" - integrity sha512-E4q3ac1AlMd0m0ZRYffdiorOt2eZcxfbdPaqBLs7JLnPE8krgIAihOD6cTUc54UJjoOMA9WcY63TR+JKWLzYNw== +rollup-plugin-esbuild@^2.6.0: + version "2.6.0" + resolved "https://registry.npmjs.org/rollup-plugin-esbuild/-/rollup-plugin-esbuild-2.6.0.tgz#80336399b113a179ccb2af5bdf7c03f061f37146" + integrity sha512-wtyDAX8kNABrBfwkrrG2xLRKRGSWUyMBURS067IRvRMpgJlLRo14WcFl95uGc4iYWfdAx436/z1LMzYqdlY4ig== dependencies: - "@rollup/pluginutils" "^4.0.0" + "@rollup/pluginutils" "^4.1.0" joycon "^2.2.5" strip-json-comments "^3.1.1" @@ -7135,6 +7140,13 @@ rollup@^2.32.1: optionalDependencies: fsevents "~2.1.2" +rollup@^2.34.1: + version "2.34.1" + resolved "https://registry.npmjs.org/rollup/-/rollup-2.34.1.tgz#a387230df02c58b242794a213dfb68b42de2c8fb" + integrity sha512-tGveB6NU5x4MS/iXaIsjfUkEv4hxzJJ4o0FRy5LO62Ndx3R2cmE1qsLYlSfRkvHUUPqWiFoxEm8pRftzh1a5HA== + optionalDependencies: + fsevents "~2.1.2" + run-async@^2.2.0: version "2.4.1" resolved "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455" @@ -8281,19 +8293,20 @@ vite-plugin-html@^1.0.0-beta.2: html-minifier-terser "^5.1.1" lodash "^4.17.20" -vite-plugin-mock@^1.0.6: - version "1.0.6" - resolved "https://registry.npmjs.org/vite-plugin-mock/-/vite-plugin-mock-1.0.6.tgz#4f47f193fd48a02c66641fc7242bd5329f99b471" - integrity sha512-+IeCiZBgQt2BpKKzYwoB5bWrrUwiksQh/9zWUrsegGw14PXmXtXXmgHr3CkKjyIChZmvuBs1BPieHD8SyBQAGQ== +vite-plugin-mock@^1.0.9: + version "1.0.9" + resolved "https://registry.npmjs.org/vite-plugin-mock/-/vite-plugin-mock-1.0.9.tgz#035a63787f70f1094f3b3928ea0c0419dc353619" + integrity sha512-qWiF56y/U82EdyckZBxhEkrDQBaUc7QhLPcRN+Lu5eI0diA0MvVvucgCueq4/0mEYJpBcaVWsy83cAGb49AQsA== dependencies: - "@rollup/plugin-node-resolve" "^9.0.0" + "@rollup/plugin-node-resolve" "^11.0.0" chalk "^4.1.0" - chokidar "^3.4.2" - esbuild "^0.7.19" + chokidar "^3.4.3" + dayjs "^1.9.6" + esbuild "^0.8.18" glob "^7.1.6" koa-bodyparser "^4.3.0" - rollup "^2.32.1" - rollup-plugin-esbuild "^2.5.2" + rollup "^2.34.1" + rollup-plugin-esbuild "^2.6.0" vite-plugin-purge-icons@^0.4.5: version "0.4.5"