version: 4.6.1

2025-04-05 19:42:07 +08:00 · 2024-01-22 17:28:16 +08:00 · 2024-01-22 17:28:16 +08:00 · a3341450f1
commit a3341450f1
parent b97e2ee701
23 changed files with 190 additions and 156 deletions
--- 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,
  },
 })
 ```
--- 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",
--- 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:
--- a/src/app-components/README.md
+++ b/src/app-components/README.md
@ -3,4 +3,4 @@
 该包存放与模板深度绑定的组件：

 - app：存放与模板数据绑定的组件
- sys：存放模板注入类组件
+- provider：存放模板注入类组件
--- 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<string>(storageKey, version, 'localStorage')
+        setStorage<string>(storageKey, version, 'localStorage')
+      }
    }

    return {
--- 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',
+  },
+]
--- a/src/app-config/regexConfig.ts
+++ b/src/app-config/regexConfig.ts
@ -17,6 +17,6 @@

 export const APP_REGEX: Record<string, RegExp> = {
  /** 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)$/,
 }
--- 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
  }

  /**
--- 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
--- 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<T = any> extends AxiosRequestConfig<T> {
--- 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);
      }
    }
  }
--- a/src/components/RCollapseGrid/src/index.tsx
+++ b/src/components/RCollapseGrid/src/index.tsx
@ -85,7 +85,7 @@ export default defineComponent({
            >
              {this.$slots.default?.()}
              <NGridItem suffix class="ray-collapse-grid__suffix--btn">
-                <NFlex justify="end">
+                <NFlex justify="end" align="center">
                  {this.$slots.action?.()}
                  {this.CollapseIcon()}
                </NFlex>
--- 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)
    }
  }
--- a/src/icons/expanded.svg
+++ b/src/icons/expanded.svg
@ -1,6 +1,5 @@
-<svg t="1672122187346" class="icon" viewBox="0 0 1024 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" p-id="6246" width="64" height="64">
-  <path fill="currentColor"
-    d="M806.4 319.2L512 613.6 221.6 323.2 176 368l290.4 290.4L512 704l45.6-45.6 294.4-294.4z"
-    p-id="6247"></path>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+  viewBox="0 0 512 512" data-v-5de898af="">
+  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+    stroke-width="48" d="M328 112L184 256l144 144"></path>
 </svg>
--- a/src/icons/reload.svg
+++ b/src/icons/reload.svg
@ -1,6 +1,7 @@
-<svg t="1669082370283" class="icon" viewBox="0 0 1024 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" p-id="3070" width="200" height="200">
-  <path
-    d="M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1 1.5-4.2-0.7-8.9-4.9-10.3l-56.7-19.5c-4.1-1.4-8.6 0.7-10.1 4.8-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4-31.6 31.6-68.4 56.4-109.3 73.8-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133.8-27-40.9-17.3-77.7-42.1-109.3-73.8-31.6-31.6-56.4-68.4-73.7-109.4-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5 9.1 133.8 27 40.9 17.3 77.7 42.1 109.3 73.8 9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47c-5.3 4.1-3.5 12.5 3 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l0.8-180.9c-0.1-6.6-7.8-10.3-13-6.2z"
-    p-id="3071" fill="currentColor"></path>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+  viewBox="0 0 512 512">
+  <path d="M320 146s24.36-12-64-12a160 160 0 1 0 160 160" fill="none" stroke="currentColor"
+    stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"></path>
+  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+    stroke-width="32" d="M256 58l80 80l-80 80"></path>
 </svg>
--- 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 {
--- 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({
                            }}
                          </span>
                          {(curr.closeable || getMenuTagOptions.length === 1) &&
-                          curr.key !== getRootPath ? (
+                          curr.fullPath !== getRootPath ? (
                            <NIcon
                              class="menu-tag__btn-icon"
                              {...{
@ -533,7 +533,7 @@ export default defineComponent({
                            // 默认使用一个空 NIcon 占位，避免不能正确的触发动画
                            <NIcon
                              class={[
-                                curr.key !== getRootPath
+                                curr.fullPath !== getRootPath
                                  ? 'menu-tag__btn-icon'
                                  : 'menu-tag__btn-icon--hidden',
                              ]}
--- a/src/layout/components/SiderBar/components/Breadcrumb/index.scss
+++ b/src/layout/components/SiderBar/components/Breadcrumb/index.scss
@ -1,11 +1,11 @@
 .n-breadcrumb .n-breadcrumb-item {
  &.breadcrumb-enter-active,
  &.breadcrumb-leave-active {
-    transition: all 0.5s;
+    transition: all 0.3s var(--r-bezier);
  }

  & .breadcrumb-move {
-    transition: all 0.5s;
+    transition: all 0.3s var(--r-bezier);
  }

  &.breadcrumb-enter-from,
--- a/src/layout/components/SiderBar/components/SettingDrawer/index.tsx
+++ b/src/layout/components/SiderBar/components/SettingDrawer/index.tsx
@ -23,7 +23,7 @@ import {
 } from 'naive-ui'
 import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch'

-import { APP_THEME } from '@/app-config'
+import { APP_THEME, CONTENT_TRANSITION_OPTIONS } from '@/app-config'
 import { useSettingGetters, useSettingActions } from '@/store'

 import type { PropType } from 'vue'
@ -64,25 +64,6 @@ const SettingDrawer = defineComponent({
        emit('update:show', bool)
      },
    })
-    // 过渡效果下拉
-    const contentTransitionOptions = [
-      {
-        label: '无',
-        value: 'none',
-      },
-      {
-        label: '缩放效果',
-        value: 'scale',
-      },
-      {
-        label: '淡入淡出',
-        value: 'fade',
-      },
-      {
-        label: '闪入效果',
-        value: 'opacity',
-      },
-    ]
    const modelSwitchReactive = reactive({
      getMenuTagSwitch: getMenuTagSwitch.value,
      getBreadcrumbSwitch: getBreadcrumbSwitch.value,
@ -96,7 +77,6 @@ const SettingDrawer = defineComponent({
      changePrimaryColor,
      getAppTheme,
      getPrimaryColorOverride,
-      contentTransitionOptions,
      updateSettingState,
      modelSwitchReactive,
    }
@ -129,7 +109,7 @@ const SettingDrawer = defineComponent({
            </NDivider>
            <NSelect
              v-model:value={this.modelSwitchReactive.getContentTransition}
-              options={this.contentTransitionOptions}
+              options={CONTENT_TRANSITION_OPTIONS}
              onUpdateValue={(value) => {
                this.updateSettingState('contentTransition', value)
              }}
--- 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);
+}
--- 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<string>(size, 'String') &&
-    APP_REGEX.validCSSUnit.test(size)
+    APP_REGEX.cssUnit.test(size)
  ) {
    return size
  } else {
--- 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,
        },
      },
      {
--- 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;
 }