diff --git a/CHANGELOG.md b/CHANGELOG.md index e1f37839..7d078d38 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,23 @@ # CHANGE LOG +## 4.6.1 + +## Feats + +- 更新 `vite` 版本至 `5.0.11` +- 更新 `@vitejs/plugin-vue` 版本至 `5.0.3` +- `maximize` 方法 `options.scrollToOptions` 配置项现在仅在放大状态才会生效 +- 更新 `AppVersionProvider` 版本刷新逻辑 +- `axios` 相关 + - `cancelConfig` + - `needCancel` 配置项变更 为 `cancel` +- `icons` 相关 + - 变更 `reload` 图标 + - 变更 `expanded` 图标 +- 路由切换过渡动画优化，新增两个新过渡动画。默认绑定过渡动画更改为 `fade-slide` +- `app-config` 暴露 `CONTENT_TRANSITION_OPTIONS` 配置项，用于配置路由切换过渡动画 +- 变更 `regexConfig` 配置项 `validCSSUnit` 为 `cssUnit` + ## 4.6.0 破坏性更新，请谨慎更新。 @@ -676,7 +694,7 @@ const demo2 = null ### Feats -- 新增切换路由自动取消上一路由所有请求。但是可以通过配置 `useRequest` 与 `request` 方法的 `cancelConfig.needCancel` 属性控制是否需要自动取消该请求。该配置默认为 `true`，当配置为 `false` 时，则不会被取消器取消 +- 新增切换路由自动取消上一路由所有请求。但是可以通过配置 `useRequest` 与 `request` 方法的 `cancelConfig.cancel` 属性控制是否需要自动取消该请求。该配置默认为 `true`，当配置为 `false` 时，则不会被取消器取消 ```ts import { useRequest, useHookPlusRequest } from '@/axios/index' @@ -689,7 +707,7 @@ const { data, loading, run } = useRequest<{ url: 'https://jsonplaceholder.typicode.com/todos/1', method: 'get', cancelConfig: { - needCancel: true, + cancel: true, }, }, { @@ -702,7 +720,7 @@ request({ url: 'https://jsonplaceholder.typicode.com/todos/1', method: 'get', cancelConfig: { - needCancel: true, + cancel: true, }, }) ``` diff --git a/package.json b/package.json index 13a2993c..6ccfe2f1 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ray-template", "private": false, - "version": "4.6.0", + "version": "4.6.1", "type": "module", "engines": { "node": "^18.0.0 || >=20.0.0", @@ -67,7 +67,7 @@ "@types/mockjs": "1.0.7", "@typescript-eslint/eslint-plugin": "^6.5.0", "@typescript-eslint/parser": "^6.5.0", - "@vitejs/plugin-vue": "^5.0.0", + "@vitejs/plugin-vue": "^5.0.3", "@vitejs/plugin-vue-jsx": "^3.1.0", "@vue-hooks-plus/resolvers": "1.2.4", "@vue/eslint-config-prettier": "^8.0.0", @@ -93,7 +93,7 @@ "typescript": "^5.2.2", "unplugin-auto-import": "^0.16.6", "unplugin-vue-components": "^0.25.2", - "vite": "^5.0.10", + "vite": "^5.0.11", "vite-plugin-cdn2": "0.15.2", "vite-plugin-compression": "^0.5.1", "vite-plugin-ejs": "^1.7.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4235b784..b6f386ad 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -107,11 +107,11 @@ devDependencies: specifier: ^6.5.0 version: 6.5.0(eslint@8.52.0)(typescript@5.2.2) '@vitejs/plugin-vue': - specifier: ^5.0.0 - version: 5.0.0(vite@5.0.10)(vue@3.4.14) + specifier: ^5.0.3 + version: 5.0.3(vite@5.0.11)(vue@3.4.14) '@vitejs/plugin-vue-jsx': specifier: ^3.1.0 - version: 3.1.0(vite@5.0.10)(vue@3.4.14) + version: 3.1.0(vite@5.0.11)(vue@3.4.14) '@vue-hooks-plus/resolvers': specifier: 1.2.4 version: 1.2.4(vue-hooks-plus@1.8.5) @@ -185,32 +185,32 @@ devDependencies: specifier: ^0.25.2 version: 0.25.2(vue@3.4.14) vite: - specifier: ^5.0.10 - version: 5.0.10(@types/node@20.4.7)(sass@1.69.5) + specifier: ^5.0.11 + version: 5.0.11(@types/node@20.4.7)(sass@1.69.5) vite-plugin-cdn2: specifier: 0.15.2 version: 0.15.2 vite-plugin-compression: specifier: ^0.5.1 - version: 0.5.1(vite@5.0.10) + version: 0.5.1(vite@5.0.11) vite-plugin-ejs: specifier: ^1.7.0 - version: 1.7.0(vite@5.0.10) + version: 1.7.0(vite@5.0.11) vite-plugin-eslint: specifier: 1.8.1 - version: 1.8.1(eslint@8.52.0)(vite@5.0.10) + version: 1.8.1(eslint@8.52.0)(vite@5.0.11) vite-plugin-imp: specifier: ^2.4.0 - version: 2.4.0(vite@5.0.10) + version: 2.4.0(vite@5.0.11) vite-plugin-inspect: specifier: ^0.7.38 - version: 0.7.38(vite@5.0.10) + version: 0.7.38(vite@5.0.11) vite-plugin-mock-dev-server: specifier: 1.3.4 - version: 1.3.4(vite@5.0.10) + version: 1.3.4(vite@5.0.11) vite-plugin-svg-icons: specifier: ^2.0.1 - version: 2.0.1(vite@5.0.10) + version: 2.0.1(vite@5.0.11) vite-svg-loader: specifier: ^4.0.0 version: 4.0.0 @@ -2111,7 +2111,7 @@ packages: resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} dev: true - /@vitejs/plugin-vue-jsx@3.1.0(vite@5.0.10)(vue@3.4.14): + /@vitejs/plugin-vue-jsx@3.1.0(vite@5.0.11)(vue@3.4.14): resolution: {integrity: sha512-w9M6F3LSEU5kszVb9An2/MmXNxocAnUb3WhRr8bHlimhDrXNt6n6D2nJQR3UXpGlZHh/EsgouOHCsM8V3Ln+WA==} engines: {node: ^14.18.0 || >=16.0.0} peerDependencies: @@ -2121,20 +2121,20 @@ packages: '@babel/core': 7.23.6 '@babel/plugin-transform-typescript': 7.23.6(@babel/core@7.23.6) '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.23.6) - vite: 5.0.10(@types/node@20.4.7)(sass@1.69.5) + vite: 5.0.11(@types/node@20.4.7)(sass@1.69.5) vue: 3.4.14(typescript@5.2.2) transitivePeerDependencies: - supports-color dev: true - /@vitejs/plugin-vue@5.0.0(vite@5.0.10)(vue@3.4.14): - resolution: {integrity: sha512-7x5e8X4J1Wi4NxudGjJBd2OFerAi/0nzF80ojCzvfj347WVr0YSn82C8BSsgwSHzlk9Kw5xnZfj0/7RLnNwP5w==} + /@vitejs/plugin-vue@5.0.3(vite@5.0.11)(vue@3.4.14): + resolution: {integrity: sha512-b8S5dVS40rgHdDrw+DQi/xOM9ed+kSRZzfm1T74bMmBDCd8XO87NKlFYInzCtwvtWwXZvo1QxE2OSspTATWrbA==} engines: {node: ^18.0.0 || >=20.0.0} peerDependencies: vite: ^5.0.0 vue: ^3.2.25 dependencies: - vite: 5.0.10(@types/node@20.4.7)(sass@1.69.5) + vite: 5.0.11(@types/node@20.4.7)(sass@1.69.5) vue: 3.4.14(typescript@5.2.2) dev: true @@ -6474,15 +6474,6 @@ packages: source-map-js: 1.0.2 dev: true - /postcss@8.4.32: - resolution: {integrity: sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==} - engines: {node: ^10 || ^12 || >=14} - dependencies: - nanoid: 3.3.7 - picocolors: 1.0.0 - source-map-js: 1.0.2 - dev: true - /postcss@8.4.33: resolution: {integrity: sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==} engines: {node: ^10 || ^12 || >=14} @@ -7836,7 +7827,7 @@ packages: - supports-color dev: true - /vite-plugin-compression@0.5.1(vite@5.0.10): + /vite-plugin-compression@0.5.1(vite@5.0.11): resolution: {integrity: sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==} peerDependencies: vite: '>=2.0.0' @@ -7844,21 +7835,21 @@ packages: chalk: 4.1.2 debug: 4.3.4 fs-extra: 10.1.0 - vite: 5.0.10(@types/node@20.4.7)(sass@1.69.5) + vite: 5.0.11(@types/node@20.4.7)(sass@1.69.5) transitivePeerDependencies: - supports-color dev: true - /vite-plugin-ejs@1.7.0(vite@5.0.10): + /vite-plugin-ejs@1.7.0(vite@5.0.11): resolution: {integrity: sha512-JNP3zQDC4mSbfoJ3G73s5mmZITD8NGjUmLkq4swxyahy/W0xuokK9U9IJGXw7KCggq6UucT6hJ0p+tQrNtqTZw==} peerDependencies: vite: '>=5.0.0' dependencies: ejs: 3.1.9 - vite: 5.0.10(@types/node@20.4.7)(sass@1.69.5) + vite: 5.0.11(@types/node@20.4.7)(sass@1.69.5) dev: true - /vite-plugin-eslint@1.8.1(eslint@8.52.0)(vite@5.0.10): + /vite-plugin-eslint@1.8.1(eslint@8.52.0)(vite@5.0.11): resolution: {integrity: sha512-PqdMf3Y2fLO9FsNPmMX+//2BF5SF8nEWspZdgl4kSt7UvHDRHVVfHvxsD7ULYzZrJDGRxR81Nq7TOFgwMnUang==} peerDependencies: eslint: '>=7' @@ -7868,10 +7859,10 @@ packages: '@types/eslint': 8.44.2 eslint: 8.52.0 rollup: 2.79.1 - vite: 5.0.10(@types/node@20.4.7)(sass@1.69.5) + vite: 5.0.11(@types/node@20.4.7)(sass@1.69.5) dev: true - /vite-plugin-imp@2.4.0(vite@5.0.10): + /vite-plugin-imp@2.4.0(vite@5.0.11): resolution: {integrity: sha512-L/6/nvOw+MyNh4UxAlCZHsmKd5MitmHamqqAWB15sbUgVIEz/OQ8jpKr6kkQU0eA/AIe8fkCVbQBlP81ajrqWg==} peerDependencies: vite: '>= 2.0.0-beta.5' @@ -7883,12 +7874,12 @@ packages: chalk: 4.1.2 param-case: 3.0.4 pascal-case: 3.1.2 - vite: 5.0.10(@types/node@20.4.7)(sass@1.69.5) + vite: 5.0.11(@types/node@20.4.7)(sass@1.69.5) transitivePeerDependencies: - supports-color dev: true - /vite-plugin-inspect@0.7.38(vite@5.0.10): + /vite-plugin-inspect@0.7.38(vite@5.0.11): resolution: {integrity: sha512-+p6pJVtBOLGv+RBrcKAFUdx+euizg0bjL35HhPyM0MjtKlqoC5V9xkCmO9Ctc8JrTyXqODbHqiLWJKumu5zJ7g==} engines: {node: '>=14'} peerDependencies: @@ -7906,13 +7897,13 @@ packages: open: 9.1.0 picocolors: 1.0.0 sirv: 2.0.3 - vite: 5.0.10(@types/node@20.4.7)(sass@1.69.5) + vite: 5.0.11(@types/node@20.4.7)(sass@1.69.5) transitivePeerDependencies: - rollup - supports-color dev: true - /vite-plugin-mock-dev-server@1.3.4(vite@5.0.10): + /vite-plugin-mock-dev-server@1.3.4(vite@5.0.11): resolution: {integrity: sha512-50biXarRPdKYxR/q9an4vHMh2cbwFlEWHfLJdXg6gpS63CMMrCo9XQWYIkdytZNSEs/5AwykGB5Xo0ORMMttgQ==} engines: {node: ^14.18.0 || >=16} peerDependencies: @@ -7933,7 +7924,7 @@ packages: mime-types: 2.1.35 path-to-regexp: 6.2.1 picocolors: 1.0.0 - vite: 5.0.10(@types/node@20.4.7)(sass@1.69.5) + vite: 5.0.11(@types/node@20.4.7)(sass@1.69.5) ws: 8.13.0 transitivePeerDependencies: - bufferutil @@ -7941,7 +7932,7 @@ packages: - utf-8-validate dev: true - /vite-plugin-svg-icons@2.0.1(vite@5.0.10): + /vite-plugin-svg-icons@2.0.1(vite@5.0.11): resolution: {integrity: sha512-6ktD+DhV6Rz3VtedYvBKKVA2eXF+sAQVaKkKLDSqGUfnhqXl3bj5PPkVTl3VexfTuZy66PmINi8Q6eFnVfRUmA==} peerDependencies: vite: '>=2.0.0' @@ -7954,7 +7945,7 @@ packages: pathe: 0.2.0 svg-baker: 1.7.0 svgo: 2.8.0 - vite: 5.0.10(@types/node@20.4.7)(sass@1.69.5) + vite: 5.0.11(@types/node@20.4.7)(sass@1.69.5) transitivePeerDependencies: - supports-color dev: true @@ -7966,8 +7957,8 @@ packages: svgo: 3.0.2 dev: true - /vite@5.0.10(@types/node@20.4.7)(sass@1.69.5): - resolution: {integrity: sha512-2P8J7WWgmc355HUMlFrwofacvr98DAjoE52BfdbwQtyLH06XKwaL/FMnmKM2crF0iX4MpmMKoDlNCB1ok7zHCw==} + /vite@5.0.11(@types/node@20.4.7)(sass@1.69.5): + resolution: {integrity: sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true peerDependencies: @@ -7996,7 +7987,7 @@ packages: dependencies: '@types/node': 20.4.7 esbuild: 0.19.10 - postcss: 8.4.32 + postcss: 8.4.33 rollup: 4.9.1 sass: 1.69.5 optionalDependencies: diff --git a/src/app-components/README.md b/src/app-components/README.md index d59a2bc4..c70aaa84 100644 --- a/src/app-components/README.md +++ b/src/app-components/README.md @@ -3,4 +3,4 @@ 该包存放与模板深度绑定的组件： - app：存放与模板数据绑定的组件 -- sys：存放模板注入类组件 +- provider：存放模板注入类组件 diff --git a/src/app-components/provider/AppVersionProvider/index.tsx b/src/app-components/provider/AppVersionProvider/index.tsx index eb640fd7..800f48c5 100644 --- a/src/app-components/provider/AppVersionProvider/index.tsx +++ b/src/app-components/provider/AppVersionProvider/index.tsx @@ -31,10 +31,13 @@ export default defineComponent({ const modalShow = ref(false) const { logout } = useSigningActions() - if (version !== cacheVersion || !cacheVersion) { - modalShow.value = true + // 如果获取缓存版本号为 null，则说明是第一次访问，直接缓存版本号 + if (cacheVersion !== null) { + if (version !== cacheVersion) { + modalShow.value = true - setStorage(storageKey, version, 'localStorage') + setStorage(storageKey, version, 'localStorage') + } } return { diff --git a/src/app-config/appConfig.ts b/src/app-config/appConfig.ts index 7074a594..e11d1384 100644 --- a/src/app-config/appConfig.ts +++ b/src/app-config/appConfig.ts @@ -94,3 +94,34 @@ export const APP_CATCH_KEY = { token: 'token', appMenuKey: 'menuKey', } as const + +/** + * + * 系统内容切换动画配置 + */ +export const CONTENT_TRANSITION_OPTIONS = [ + { + label: '无', + value: 'none', + }, + { + label: '缩放出现', + value: 'scale', + }, + { + label: '缩放消退', + value: 'fade-scale', + }, + { + label: '滑入出现', + value: 'fade-slide', + }, + { + label: '淡入消退', + value: 'opacity', + }, + { + label: '底部消退', + value: 'fade-bottom', + }, +] diff --git a/src/app-config/regexConfig.ts b/src/app-config/regexConfig.ts index 60bd9986..ab84168c 100644 --- a/src/app-config/regexConfig.ts +++ b/src/app-config/regexConfig.ts @@ -17,6 +17,6 @@ export const APP_REGEX: Record = { /** css 尺寸单位匹配 */ - validCSSUnit: + cssUnit: /^\d+(\.\d+)?(px|em|rem|%|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ch|ex|q|s|ms|deg|rad|turn|grad|hz|khz|dpi|dpcm|dppx|fr|auto)$/, } diff --git a/src/axios/helper/RequestCanceler.ts b/src/axios/helper/RequestCanceler.ts index f35c642c..824e9bfa 100644 --- a/src/axios/helper/RequestCanceler.ts +++ b/src/axios/helper/RequestCanceler.ts @@ -27,7 +27,7 @@ export default class RequestCanceler { /** 是否需要加入取消请求表中 */ private isAppending(config: AppRawRequestConfig) { - return config.cancelConfig?.needCancel ?? true + return config.cancelConfig?.cancel ?? true } /** diff --git a/src/axios/instance.ts b/src/axios/instance.ts index 795a6f31..0f76e5bb 100644 --- a/src/axios/instance.ts +++ b/src/axios/instance.ts @@ -37,9 +37,7 @@ const { createAxiosInstance, beforeFetch, fetchError } = useAxiosInterceptor() server.interceptors.request.use( (request) => { createAxiosInstance(request, 'requestInstance') // 生成 request instance - setupRequestInterceptor() // 初始化拦截器所有已注入方法 - beforeFetch('requestInstance', 'implementRequestInterceptorArray', 'ok') // 执行拦截器所有已注入方法 return request diff --git a/src/axios/type.ts b/src/axios/type.ts index 4dcdb019..ea5581ac 100644 --- a/src/axios/type.ts +++ b/src/axios/type.ts @@ -23,7 +23,7 @@ export interface RequestHeaderOptions { } export interface CancelConfig { - needCancel?: boolean + cancel?: boolean } export interface AppRawRequestConfig extends AxiosRequestConfig { diff --git a/src/components/RCollapseGrid/src/index.scss b/src/components/RCollapseGrid/src/index.scss index 5bf1654c..f841bddf 100644 --- a/src/components/RCollapseGrid/src/index.scss +++ b/src/components/RCollapseGrid/src/index.scss @@ -10,10 +10,13 @@ > .collapse-icon--arrow { margin-left: 0.5em; - transition: color 0.3s var(--r-bezier), transform 0.3s var(--r-bezier); + transition: + color 0.3s var(--r-bezier), + transform 0.3s var(--r-bezier); + transform: rotate(270deg); &.collapse-icon--arrow__expanded { - transform: rotate(180deg); + transform: rotate(90deg); } } } diff --git a/src/components/RCollapseGrid/src/index.tsx b/src/components/RCollapseGrid/src/index.tsx index 6b3f4244..3d74a3dd 100644 --- a/src/components/RCollapseGrid/src/index.tsx +++ b/src/components/RCollapseGrid/src/index.tsx @@ -85,7 +85,7 @@ export default defineComponent({ > {this.$slots.default?.()} - + {this.$slots.action?.()} {this.CollapseIcon()} diff --git a/src/hooks/template/useMaximize.ts b/src/hooks/template/useMaximize.ts index 84e16a20..b5a39178 100644 --- a/src/hooks/template/useMaximize.ts +++ b/src/hooks/template/useMaximize.ts @@ -27,6 +27,10 @@ export interface MaximizeOptions extends UseElementFullscreenOptions { * * 配置全屏后滚动的位置，left、top、behavior * 基于 LAYOUT_CONTENT_REF 实现 + * + * 但是，该配置项仅在传递 true 时生效 + * + * @default undefined */ scrollToOptions?: ScrollToOptions } @@ -63,7 +67,7 @@ export const useMaximize = () => { setVariable('layoutContentMaximize', full) toggleFullscreen() - if (scrollToOptions) { + if (scrollToOptions && full) { LAYOUT_CONTENT_REF?.value?.scrollTo(scrollToOptions) } } diff --git a/src/icons/expanded.svg b/src/icons/expanded.svg index 09c0c573..b77c37e4 100644 --- a/src/icons/expanded.svg +++ b/src/icons/expanded.svg @@ -1,6 +1,5 @@ - - + + \ No newline at end of file diff --git a/src/icons/reload.svg b/src/icons/reload.svg index 9bfaa195..9281c215 100644 --- a/src/icons/reload.svg +++ b/src/icons/reload.svg @@ -1,6 +1,7 @@ - - + + + \ No newline at end of file diff --git a/src/layout/components/MenuTag/index.scss b/src/layout/components/MenuTag/index.scss index a22a1366..36b7f0b8 100644 --- a/src/layout/components/MenuTag/index.scss +++ b/src/layout/components/MenuTag/index.scss @@ -20,13 +20,9 @@ $menuTagWrapperWidth: 76px; cursor: pointer; } - & .menu-tag__left-arrow { - transform: rotate(90deg); - } - & .menu-tag__right-wrapper { & .menu-tag__right-arrow { - transform: rotate(270deg); + transform: rotate(180deg); } & .menu-tag__right-setting { diff --git a/src/layout/components/MenuTag/index.tsx b/src/layout/components/MenuTag/index.tsx index 65165439..956f57ca 100644 --- a/src/layout/components/MenuTag/index.tsx +++ b/src/layout/components/MenuTag/index.tsx @@ -295,7 +295,7 @@ export default defineComponent({ */ const setCurrentContextmenuIndex = () => { const index = getMenuTagOptions.value.findIndex( - (curr) => curr.key === getMenuKey.value, + (curr) => curr.fullPath === getMenuKey.value, ) currentContextmenuIndex = index @@ -307,7 +307,7 @@ export default defineComponent({ const menuTagMouseenter = (option: MenuTagOptions) => { if ( getMenuTagOptions.value.length > 1 && - option.key !== getRootPath.value + option.fullPath !== getRootPath.value ) { option.closeable = true } @@ -315,7 +315,7 @@ export default defineComponent({ /** 移出 MenuTag 时, 判断是否为当前已激活 key */ const menuTagMouseleave = (option: MenuTagOptions) => { - if (option.key !== getMenuKey.value) { + if (option.fullPath !== getMenuKey.value) { option.closeable = false } } @@ -517,7 +517,7 @@ export default defineComponent({ }} {(curr.closeable || getMenuTagOptions.length === 1) && - curr.key !== getRootPath ? ( + curr.fullPath !== getRootPath ? ( { this.updateSettingState('contentTransition', value) }} diff --git a/src/styles/animate.scss b/src/styles/animate.scss index 530adb9f..dc893d80 100644 --- a/src/styles/animate.scss +++ b/src/styles/animate.scss @@ -1,72 +1,48 @@ -// 采用 NSpin 组件进行 loading 效果，移除之前的 Transition 组件的国度 -// 避免闪烁添加此动画 -.layout-content-enter-active, -.layout-content-leave-active { - transition: all 0.35s; +// 模糊匹配内容区域切换过渡动画包含: transform-leave-active 的 class +[class*='transform-leave-active'] { + position: absolute; } -.layout-content-enter-from, -.layout-content-enter-to { +/* fade-slide-transform */ +.fade-slide-transform-leave-active, +.fade-slide-transform-enter-active { + transition: + transform 0.48s var(--r-bezier), + opacity 0.48s var(--r-bezier); +} + +.fade-slide-transform-enter-from { opacity: 0; + transform: translateX(-30px); } -.layout-content-leave-from, -.layout-content-leave-to { +.fade-slide-transform-leave-to { opacity: 0; -} - -/* fade-transform */ -.fade-transform-leave-active, -.fade-transform-enter-active { - transition: all 0.5s; -} - -.fade-transform-enter-from { - opacity: 0; - transform: translateX(-50px); -} - -.fade-transform-leave-to { - opacity: 0; - transform: translateX(50px); -} - -/* down-transform */ -.down-transform-leave-active, -.down-transform-enter-active { - transition: all 0.5s; -} - -.down-transform-enter-from { - opacity: 0; - transform: translateY(-50px); -} - -.down-transform-leave-to { - opacity: 0; - transform: translateY(50px); + transform: translateX(30px); } /* scale-transform */ -.scale-transform-leave-active, -.scale-transform-enter-active { - transition: all 0.5s; +.scale-transform-enter-active, +.scale-transform-leave-active { + transition: + transform 0.4s var(--r-bezier), + opacity 0.45s var(--r-bezier); } .scale-transform-enter-from { opacity: 0; - transform: scale(2); + transform: scale(0.92); } .scale-transform-leave-to { opacity: 0; - transform: scale(0.5); + transform: scale(1.06); } /* opacity-transform */ .opacity-transform-leave-active, .opacity-transform-enter-active { - transition: all 0.5s; + transition: opacity 0.55s var(--r-bezier); } .opacity-transform-enter-from { @@ -76,3 +52,37 @@ .opacity-transform-leave-to { opacity: 0; } + +/* fade-bottom-transform */ +.fade-bottom-transform-enter-active, +.fade-bottom-transform-leave-active { + transition: + opacity 0.55s var(--r-bezier), + transform 0.45s var(--r-bezier); +} + +.fade-bottom-transform-enter-from { + opacity: 0; + transform: translateY(-10%); +} + +.fade-bottom-transform-leave-to { + opacity: 0; + transform: translateY(10%); +} + +/* fade-scale-transform */ +.fade-scale-transform-leave-active, +.fade-scale-transform-enter-active { + transition: all 0.48s var(--r-bezier); +} + +.fade-scale-transform-enter-from { + opacity: 0; + transform: scale(1.2); +} + +.fade-scale-transform-leave-to { + opacity: 0; + transform: scale(0.8); +} diff --git a/src/utils/element.ts b/src/utils/element.ts index fe40f3bd..413f66e2 100644 --- a/src/utils/element.ts +++ b/src/utils/element.ts @@ -318,7 +318,7 @@ export const completeSize = (size: number | string, unit = 'px') => { return size.toString() + unit } else if ( isValueType(size, 'String') && - APP_REGEX.validCSSUnit.test(size) + APP_REGEX.cssUnit.test(size) ) { return size } else { diff --git a/src/views/demo/axios/index.tsx b/src/views/demo/axios/index.tsx index ae06a4f5..66d1b44a 100644 --- a/src/views/demo/axios/index.tsx +++ b/src/views/demo/axios/index.tsx @@ -50,7 +50,7 @@ const Axios = defineComponent({ url: 'https://jsonplaceholder.typicode.com/todos/1', method: 'get', cancelConfig: { - needCancel: true, + cancel: true, }, }, { diff --git a/src/views/login/components/QRCodeSigning/index.scss b/src/views/login/components/QRCodeSigning/index.scss index 30dafc15..baac4967 100644 --- a/src/views/login/components/QRCodeSigning/index.scss +++ b/src/views/login/components/QRCodeSigning/index.scss @@ -1,5 +1,5 @@ .qrcode-signing { width: 100%; - height: 220px; + height: 240px; @include flexCenter; }