v4.1.6

.vscode/settings.json

@@ -8,5 +8,6 @@
   "i18n-ally.sourceLanguage": "zh-CN",
   "i18n-ally.displayLanguage": "zh-CN",
   "i18n-ally.enabledFrameworks": ["vue", "react"],
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "synthwave84.disableGlow": true
 }

CHANGELOG.md

@@ -1,5 +1,18 @@
 # CHANGE LOG
 
+## 4.1.6
+
+### Feats
+
+- 现在支持切换内容区域的过渡动画效果
+- 优化了一些布局的样式细节
+- 将过渡动画与 Spin 动画结合
+- 拆分了布局组件，使得它看起来更合理
+
+### Fixes
+
+- 修复 RayChart 组件不能根据内容区域尺寸变化更新 chart 图
+
 ## 4.1.5
 
 ### Fixes

package.json

@@ -76,7 +76,7 @@
     "husky": "^8.0.3",
     "lint-staged": "^13.1.0",
     "postcss": "^8.1.0",
-    "postcss-px-to-viewport-update": "1.2.0",
+    "postcss-px-to-viewport-8-plugin": "1.2.2",
     "prettier": "^2.7.1",
     "rollup-plugin-visualizer": "^5.8.3",
     "svg-sprite-loader": "^6.0.11",

postcss.config.cjs

@@ -11,25 +11,26 @@ module.exports = {
       ],
       grid: true,
     },
-    // 由于该库的作者很久没更新了，导致 exclude include 并没有生效，所以使用的是其一个 fork 版本
-    // 'postcss-px-to-viewport-update': {
-    //   inlinePxToViewport: true,
-    //   /** 视窗的宽度(设计稿的宽度) */
-    //   viewportWidth: 1920,
-    //   /** 视窗的高度(设计稿高度, 一般无需指定) */
-    //   viewportHeight: 1080,
-    //   /** 指定 px 转换为视窗单位值的小数位数 */
-    //   unitPrecision: 3,
-    //   /** 指定需要转换成的视窗单位 */
-    //   viewportUnit: 'vw',
-    //   /** 指定不转换为视窗单位的类 */
-    //   selectorBlackList: ['.ignore'],
-    //   /** 小于或等于 1px 不转换为视窗单位 */
-    //   minPixelValue: 1,
-    //   /** 允许在媒体查询中转换 px */
-    //   mediaQuery: false,
-    //   exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
-    //   include: [/^src[/\\].*\.(vue|tsx|jsx|ts(?!d))$/],
-    // },
+    // 为了适配 postcss8.x 版本的转换库
+    'postcss-px-to-viewport-8-plugin': {
+      inlinePxToViewport: true,
+      /** 视窗的宽度(设计稿的宽度) */
+      viewportWidth: 1920,
+      /** 视窗的高度(设计稿高度, 一般无需指定) */
+      viewportHeight: 1080,
+      /** 指定 px 转换为视窗单位值的小数位数 */
+      unitPrecision: 3,
+      /** 指定需要转换成的视窗单位 */
+      viewportUnit: 'rem',
+      /** 指定不转换为视窗单位的类 */
+      selectorBlackList: ['.ignore'],
+      /** 小于或等于 1px 不转换为视窗单位 */
+      minPixelValue: 1,
+      /** 允许在媒体查询中转换 px */
+      mediaQuery: false,
+      // exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
+      include: [/^src[/\\].*\.(vue|tsx|jsx|ts(?!d))$/],
+      preserve: true,
+    },
   },
 }

src/app-components/provider/AppRequestCanceler/index.tsx

@@ -14,7 +14,7 @@
  * 路由更新前，取消上一路由所有请求
  *
  * 生命周期示意图：
- * beforeRouteUpdate -> cancelAllRequest -> routerUpdate
+ * beforeRouteUpdate -> cancelAllRequest -> routeUpdate
  */
 
 import { axiosCanceler } from '@/axios/helper/interceptor'

src/appConfig/appConfig.ts

@@ -61,7 +61,7 @@ export const ROOT_ROUTE: Readonly<RootRoute> = {
  *
  * 如果不设置该属性或者为空, 则不会渲染 LOGO
  */
-export const SIDE_BAR_LOGO: LayoutSideBarLogo = {
+export const SIDE_BAR_LOGO: LayoutSideBarLogo | undefined = {
   icon: 'ray',
   title: 'Ray Template',
   url: '/dashboard',

src/appConfig/routerConfig.ts

@@ -28,7 +28,7 @@ import type { LayoutInst } from 'naive-ui'
  * })
  * ```
  */
-export const LAYOUT_CONTENT_REF = ref<LayoutInst>()
+export const LAYOUT_CONTENT_REF = ref<LayoutInst | null>(null)
 
 export const SETUP_ROUTER_ACTION = {
   /** 是否启用路由切换时顶部加载条 */

src/components/RayChart/index.scss

@@ -4,4 +4,5 @@
   border: none;
   outline: none;
   box-sizing: border-box;
+  transition: width 0.35s var(--r-bezier);
 }

src/components/RayChart/index.tsx

@@ -43,6 +43,7 @@ import { cloneDeep, throttle } from 'lodash-es'
 import { on, off, completeSize } from '@/utils/element'
 import { call } from '@/utils/vue/index'
 import { setupChartTheme, loadingOptions } from './helper'
+import { LAYOUT_CONTENT_REF } from '@/appConfig/routerConfig'
 
 import type { PropType } from 'vue'
 import type { EChartsInstance } from '@/types/modules/component'
@@ -53,6 +54,7 @@ import type {
   AutoResize,
   ChartTheme,
 } from '@/components/RayChart/type'
+import type { UseResizeObserverReturn } from '@vueuse/core'
 
 export type EChartsExtensionInstallRegisters = typeof CanvasRenderer
 
@@ -186,6 +188,7 @@ const RayChart = defineComponent({
     const echartInstanceRef = ref<EChartsInstance>() // `echart` 拷贝实例, 解决直接使用响应式实例带来的问题
     let echartInstance: EChartsInstance // `echart` 实例
     let resizeThrottle: DebouncedFunc<AnyFC> // resize 防抖方法实例
+    let resizeOvserverReturn: UseResizeObserverReturn | undefined
 
     const cssVarsRef = computed(() => {
       const cssVars = {
@@ -431,10 +434,16 @@ const RayChart = defineComponent({
 
         /** 注册事件 */
         if (props.autoResize) {
-          resizeThrottle = throttle(resizeChart, 1000)
+          resizeThrottle = throttle(resizeChart, 500)
 
           on(window, 'resize', resizeThrottle)
         }
+
+        /** 监听内容区域尺寸变化更新 chart */
+        resizeOvserverReturn = useResizeObserver(
+          LAYOUT_CONTENT_REF.value as unknown as Ref<HTMLElement>,
+          resizeThrottle,
+        )
       })
     })
 
@@ -445,6 +454,7 @@ const RayChart = defineComponent({
       off(window, 'resize', resizeThrottle)
       /** 注销防抖 */
       resizeThrottle.cancel()
+      resizeOvserverReturn?.stop?.()
     })
 
     expose({

src/layout/components/Menu/components/SiderBarLogo/index.scss

@@ -2,7 +2,7 @@
  *
  * @author Ray <https://github.com/XiaoDaiGua-Ray>
  *
- * @date 2023-01-06
+ * @date 2023-08-08
  *
  * @workspace ray-template
  *
@@ -10,7 +10,7 @@
  */
 
 .ray-menu__logo {
-  height: 50px;
+  height: $layoutHeaderHeight;
   padding: 0 18px 0 24px;
   display: flex;
   flex-wrap: nowrap;

src/layout/components/Menu/components/SiderBarLogo/index.tsx

@@ -0,0 +1,74 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-08-08
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import './index.scss'
+
+import { NEllipsis } from 'naive-ui'
+import RayIcon from '@/components/RayIcon/index'
+
+const SiderBarLogo = defineComponent({
+  name: 'SiderBarLogo',
+  props: {
+    collapsed: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  setup() {
+    const router = useRouter()
+
+    const {
+      layout: { sideBarLogo },
+    } = __APP_CFG__
+
+    const handleSideBarLogoClick = () => {
+      if (sideBarLogo && sideBarLogo.url) {
+        sideBarLogo.jumpType === 'station'
+          ? router.push(sideBarLogo.url)
+          : window.open(sideBarLogo.url)
+      }
+    }
+
+    return {
+      sideBarLogo,
+      handleSideBarLogoClick,
+    }
+  },
+  render() {
+    return this.sideBarLogo?.icon && this.sideBarLogo?.title ? (
+      <div
+        class={[
+          'ray-menu__logo',
+          this.sideBarLogo?.url ? 'ray-menu__logo-url' : '',
+        ]}
+        onClick={this.handleSideBarLogoClick.bind(this)}
+      >
+        {this.sideBarLogo?.icon ? (
+          <RayIcon name={this.sideBarLogo.icon} size="30" />
+        ) : (
+          ''
+        )}
+        <h1
+          class={[
+            !this.collapsed ? 'ray-menu__logo-title--open' : '',
+            'ray-menu__logo-title',
+          ]}
+        >
+          <NEllipsis>{this.sideBarLogo?.title}</NEllipsis>
+        </h1>
+      </div>
+    ) : (
+      ''
+    )
+  },
+})
+
+export default SiderBarLogo

src/layout/components/Menu/index.tsx

@@ -1,11 +1,19 @@
-import './index.scss'
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2022-10-11
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
 
-import { NMenu, NLayoutSider, NEllipsis } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import { NMenu, NLayoutSider } from 'naive-ui'
+import SiderBarLogo from './components/SiderBarLogo/index'
 
 import { useMenu } from '@/store'
 import { APP_MENU_CONFIG } from '@/appConfig/appConfig'
-import { useVueRouter } from '@/router/helper/useVueRouter'
 
 import type { MenuInst } from 'naive-ui'
 import type { NaiveMenuOptions } from '@/types/modules/component'
@@ -17,7 +25,6 @@ const LayoutMenu = defineComponent({
     const menuRef = ref<MenuInst | null>(null)
 
     const menuStore = useMenu()
-    const { router } = useVueRouter()
 
     const { changeMenuModelValue, collapsedMenu } = menuStore
     const modelMenuKey = computed({
@@ -33,17 +40,6 @@ const LayoutMenu = defineComponent({
     })
     const modelMenuOptions = computed(() => menuStore.options)
     const modelCollapsed = computed(() => menuStore.collapsed)
-    const {
-      layout: { sideBarLogo },
-    } = __APP_CFG__
-
-    const handleSideBarLogoClick = () => {
-      if (sideBarLogo && sideBarLogo.url) {
-        sideBarLogo.jumpType === 'station'
-          ? router.push(sideBarLogo.url)
-          : window.open(sideBarLogo.url)
-      }
-    }
 
     const showMenuOption = () => {
       const key = modelMenuKey.value as string
@@ -59,8 +55,6 @@ const LayoutMenu = defineComponent({
       modelMenuOptions,
       modelCollapsed,
       collapsedMenu,
-      sideBarLogo,
-      handleSideBarLogoClick,
       menuRef,
     }
   },
@@ -74,31 +68,7 @@ const LayoutMenu = defineComponent({
         onUpdateCollapsed={this.collapsedMenu.bind(this)}
         nativeScrollbar={false}
       >
-        {this.sideBarLogo ? (
-          <div
-            class={[
-              'ray-menu__logo',
-              this.sideBarLogo.url ? 'ray-menu__logo-url' : '',
-            ]}
-            onClick={this.handleSideBarLogoClick.bind(this)}
-          >
-            {this.sideBarLogo.icon ? (
-              <RayIcon name={this.sideBarLogo.icon} size="30" />
-            ) : (
-              ''
-            )}
-            <h1
-              class={[
-                !this.modelCollapsed ? 'ray-menu__logo-title--open' : '',
-                'ray-menu__logo-title',
-              ]}
-            >
-              <NEllipsis>{this.sideBarLogo.title}</NEllipsis>
-            </h1>
-          </div>
-        ) : (
-          ''
-        )}
+        <SiderBarLogo collapsed={this.modelCollapsed} />
         <NMenu
           ref="menuRef"
           v-model:value={this.modelMenuKey}

src/layout/components/MenuTag/index.scss

@@ -6,6 +6,7 @@ $menuTagWrapperWidth: 76px;
   border-bottom: solid 1px var(--n-border-color);
   display: flex;
   align-items: center;
+  padding: 4px 0;
 
   & .menu-tag-sapce {
     width: calc(100% - $space * 2);

src/layout/components/MenuTag/index.tsx

@@ -388,7 +388,9 @@ const MenuTag = defineComponent({
         if (tags?.length) {
           const [menuTag] = tags
 
-          menuTag.scrollIntoView?.()
+          nextTick(() => {
+            menuTag.scrollIntoView?.()
+          })
         }
       })
     }

src/layout/components/SiderBar/components/Breadcrumb/index.tsx

@@ -22,7 +22,7 @@ import { NDropdown, NBreadcrumb, NBreadcrumbItem } from 'naive-ui'
 
 import { useMenu } from '@/store'
 
-import type { DropdownOption, MenuOption } from 'naive-ui'
+import type { DropdownOption } from 'naive-ui'
 import type {
   AppMenuOption,
   MenuTagOptions,

src/layout/components/SiderBar/components/SettingDrawer/index.tsx

@@ -1,4 +1,5 @@
 import './index.scss'
+
 import {
   NDrawer,
   NDrawerContent,
@@ -8,6 +9,7 @@ import {
   NColorPicker,
   NDescriptions,
   NDescriptionsItem,
+  NSelect,
 } from 'naive-ui'
 import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index'
 
@@ -39,7 +41,8 @@ const SettingDrawer = defineComponent({
     const { t } = useI18n()
     const settingStore = useSetting()
 
-    const { changePrimaryColor, changeSwitcher } = settingStore
+    const { changePrimaryColor, changeSwitcher, updateContentTransition } =
+      settingStore
     const {
       themeValue,
       primaryColorOverride,
@@ -47,6 +50,7 @@ const SettingDrawer = defineComponent({
       breadcrumbSwitch,
       invertSwitch,
       footerSwitch,
+      contentTransition,
     } = storeToRefs(settingStore)
 
     const modelShow = computed({
@@ -55,6 +59,24 @@ const SettingDrawer = defineComponent({
         emit('update:show', bool)
       },
     })
+    const contentTransitionOptions = [
+      {
+        label: '无',
+        value: 'none',
+      },
+      {
+        label: '缩放效果',
+        value: 'scale',
+      },
+      {
+        label: '淡入淡出',
+        value: 'fade',
+      },
+      {
+        label: '闪入效果',
+        value: 'opacity',
+      },
+    ]
 
     return {
       modelShow,
@@ -67,6 +89,9 @@ const SettingDrawer = defineComponent({
       breadcrumbSwitch,
       invertSwitch,
       footerSwitch,
+      contentTransitionOptions,
+      contentTransition,
+      updateContentTransition,
     }
   },
   render() {
@@ -92,6 +117,16 @@ const SettingDrawer = defineComponent({
               v-model:value={this.primaryColorOverride.common!.primaryColor}
               onUpdateValue={this.changePrimaryColor.bind(this)}
             />
+            <NDivider titlePlacement="center">
+              {t('headerSettingOptions.ContentTransition')}
+            </NDivider>
+            <NSelect
+              v-model:value={this.contentTransition}
+              options={this.contentTransitionOptions}
+              onUpdateValue={(value) => {
+                this.updateContentTransition(value)
+              }}
+            />
             <NDivider titlePlacement="center">
               {t('headerSettingOptions.InterfaceDisplay')}
             </NDivider>

src/layout/default/ContentWrapper/index.tsx

@@ -17,8 +17,8 @@
 
 import './index.scss'
 
-import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue'
 import { NSpin } from 'naive-ui'
+import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue'
 import AppRequestCanceler from '@/app-components/provider/AppRequestCanceler/index'
 
 import { useSetting } from '@/store'
@@ -31,7 +31,7 @@ const ContentWrapper = defineComponent({
     const settingStore = useSetting()
     const router = useRouter()
 
-    const { reloadRouteSwitch } = storeToRefs(settingStore)
+    const { reloadRouteSwitch, contentTransition } = storeToRefs(settingStore)
     const spinning = ref(false)
     const thmeOverridesSpin: GlobalThemeOverrides['Spin'] = {
       opacitySpinning: '0',
@@ -43,9 +43,7 @@ const ContentWrapper = defineComponent({
       })
 
       router.afterEach(() => {
-        setTimeout(() => {
-          spinning.value = false
-        }, 300)
+        spinning.value = false
       })
     }
 
@@ -55,6 +53,7 @@ const ContentWrapper = defineComponent({
       reloadRouteSwitch,
       spinning,
       thmeOverridesSpin,
+      contentTransition,
     }
   },
   render() {
@@ -69,7 +68,7 @@ const ContentWrapper = defineComponent({
         {this.reloadRouteSwitch ? (
           <RayTransitionComponent
             class="content-wrapper"
-            transitionPropName="layout-content"
+            transitionPropName={this.contentTransition + '-transform'}
           />
         ) : (
           ''

src/layout/default/FeatureWrapper/index.tsx

@@ -0,0 +1,24 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-08-09
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import MenuTag from '@/layout/components/MenuTag/index'
+
+const FeatureWrapper = defineComponent({
+  name: 'FeatureWrapper',
+  setup() {
+    return {}
+  },
+  render() {
+    return <MenuTag />
+  },
+})
+
+export default FeatureWrapper

src/layout/default/FooterWrapper/index.scss

@@ -1,4 +1,4 @@
 .layout-footer-wrapper {
-  padding: 20px;
+  padding: 0 20px 8px 20px;
   text-align: center;
 }

src/layout/default/HeaderWrapper/index.tsx

@@ -0,0 +1,29 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-08-09
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { NSpace } from 'naive-ui'
+import SiderBar from '@/layout/components/SiderBar/index'
+
+const HeaderWrapper = defineComponent({
+  name: 'HeaderWrapper',
+  setup() {
+    return {}
+  },
+  render() {
+    return (
+      <NSpace wrapItem={false} size={[0, 0]}>
+        <SiderBar />
+      </NSpace>
+    )
+  },
+})
+
+export default HeaderWrapper

src/layout/index.scss

@@ -1,4 +1,4 @@
-.r-layout-full.r-layout-full {
+.r-layout-full {
   position: fixed;
   inset: 0;
 

src/layout/index.tsx

@@ -11,19 +11,19 @@
 
 import './index.scss'
 
-import { NLayout, NLayoutContent, NScrollbar } from 'naive-ui'
+import { NLayout, NLayoutContent } from 'naive-ui'
 import Menu from './components/Menu/index'
-import SiderBar from './components/SiderBar/index'
-import MenuTag from './components/MenuTag/index'
 import ContentWrapper from '@/layout/default/ContentWrapper'
 import FooterWrapper from '@/layout/default/FooterWrapper'
+import HeaderWrapper from './default/HeaderWrapper'
+import FeatureWrapper from './default/FeatureWrapper'
 
 import { useSetting } from '@/store'
 import { LAYOUT_CONTENT_REF } from '@/appConfig/routerConfig'
 import { layoutHeaderCssVars } from '@/layout/layoutResize'
 import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar'
 
-const Layout = defineComponent({
+const RLayout = defineComponent({
   name: 'RLayout',
   setup() {
     const layoutSiderBarRef = ref<HTMLElement>()
@@ -57,8 +57,12 @@ const Layout = defineComponent({
       <NLayout class="r-layout-full" style={[this.cssVarsRef]} hasSider>
         <Menu />
         <NLayoutContent class="r-layout-full__viewer">
-          <SiderBar ref="layoutSiderBarRef" />
-          {this.modelMenuTagSwitch ? <MenuTag ref="layoutMenuTagRef" /> : ''}
+          <HeaderWrapper ref="layoutSiderBarRef" />
+          {this.modelMenuTagSwitch ? (
+            <FeatureWrapper ref="layoutMenuTagRef" />
+          ) : (
+            ''
+          )}
           <NLayoutContent
             ref="LAYOUT_CONTENT_REF"
             class="r-layout-full__viewer-content"
@@ -75,4 +79,4 @@ const Layout = defineComponent({
   },
 })
 
-export default Layout
+export default RLayout

src/locales/lang/en-US/headerSettingOptions.json

@@ -6,5 +6,6 @@
     "Light": "Light",
     "PrimaryColorConfig": "Primary Color"
   },
-  "InterfaceDisplay": "Display"
+  "InterfaceDisplay": "Display",
+  "ContentTransition": "Content Transition"
 }

src/locales/lang/zh-CN/headerSettingOptions.json

@@ -6,5 +6,6 @@
     "Light": "明亮",
     "PrimaryColorConfig": "主题色"
   },
-  "InterfaceDisplay": "界面显示"
+  "InterfaceDisplay": "界面显示",
+  "ContentTransition": "动画效果"
 }

src/router/README.md

@@ -55,7 +55,6 @@ interface RouteMeta {
   keepAlive?: boolean
   sameLevel?: boolean
   dev?: string | string[]
-  needCancel?: boolean
 }
 ```
 

src/store/modules/setting/index.ts

@@ -38,8 +38,14 @@ export const useSetting = defineStore(
       lockScreenSwitch: false, // 锁屏开关
       lockScreenInputSwitch: false, // 锁屏输入状态开关(预留该字段是为了方便拓展用, 但是舍弃了该字段, 改为使用 useAppLockScreen 方法)
       footerSwitch: true, // 底部区域开关
+      contentTransition: 'scale', // 切换过渡效果
     })
 
+    /** 更新过渡效果 */
+    const updateContentTransition = (value: string) => {
+      settingState.contentTransition = value
+    }
+
     /** 修改当前语言 */
     const updateLocale = (key: string) => {
       locale(key)
@@ -103,6 +109,7 @@ export const useSetting = defineStore(
       updateLocale,
       changePrimaryColor,
       changeSwitcher,
+      updateContentTransition,
     }
   },
   {

src/store/modules/setting/type.ts

@@ -14,4 +14,5 @@ export interface SettingState {
   lockScreenSwitch: boolean
   lockScreenInputSwitch: boolean
   footerSwitch: boolean
+  contentTransition: string
 }

src/styles/animate.scss

@@ -15,17 +15,64 @@
   opacity: 0;
 }
 
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.35s ease;
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all 0.5s;
 }
 
-.fade-enter-from {
+.fade-transform-enter-from {
   opacity: 0;
-  transform: translateX(-30px);
+  transform: translateX(-50px);
 }
 
-.fade-leave-to {
+.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);
+}
+
+/* scale-transform */
+.scale-transform-leave-active,
+.scale-transform-enter-active {
+  transition: all 0.5s;
+}
+
+.scale-transform-enter-from {
+  opacity: 0;
+  transform: scale(2);
+}
+
+.scale-transform-leave-to {
+  opacity: 0;
+  transform: scale(0.5);
+}
+
+/* opacity-transform */
+.opacity-transform-leave-active,
+.opacity-transform-enter-active {
+  transition: all 0.5s;
+}
+
+.opacity-transform-enter-from {
+  opacity: 0;
+}
+
+.opacity-transform-leave-to {
   opacity: 0;
-  transform: translateX(30px);
 }

vite.config.ts

@@ -67,7 +67,7 @@ export default defineConfig(async ({ mode }) => {
       alias: alias,
     },
     plugins: [
-      vue({ reactivityTransform: true }),
+      vue(),
       viteVueJSX(),
       title,
       viteVeI18nPlugin({}),