ray template 3.0 部分细节更改

src/App.tsx

@@ -1,21 +1,13 @@
 import RayGlobalProvider from '@/components/RayGlobalProvider/index'
-import { useSetting } from '@/store'
 import { RouterView } from 'vue-router'
 
 const App = defineComponent({
   name: 'App',
   setup() {
-    const settingStore = useSetting()
     const { height: windowHeight } = useWindowSize()
-    const { settingState } = $(storeToRefs(settingStore))
-
-    // const naiveTheme = computed(() =>
-    //   settingState.themeValue ? darkTheme : undefined,
-    // )
 
     return {
       windowHeight,
-      // naiveTheme,
     }
   },
   render() {

src/components/RayTransitionComponent/index.vue

@@ -1,21 +1,21 @@
 <template>
-  <router-view v-slot="{ Component, route }">
+  <router-view>
-    <transition
+    <template #default="{ Component, route }">
-      :name="transitionPropName"
+      <transition
-      :mode="transitionMode"
+        :name="transitionPropName"
-      :appear="transitionAppear"
+        :mode="transitionMode"
-    >
+        :appear="transitionAppear"
-      <keep-alive include="layout">
+      >
-        <component :is="Component" :key="route" />
+        <component :is="Component" :key="route.fullPath" />
-      </keep-alive>
+      </transition>
-    </transition>
+    </template>
   </router-view>
 </template>
 <script lang="ts" setup>
 defineProps({
   transitionPropName: {
     type: String,
-    default: 'fade-transform',
+    default: 'fade',
   },
   transitionMode: {
     type: String,

src/layout/index.tsx

@@ -1,4 +1,5 @@
 import './index.scss'
+import { Transition } from 'vue'
 import { NLayout, NLayoutContent } from 'naive-ui'
 import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue'
 import LayoutMenu from './Menu/index'

src/styles/animate.scss

@@ -1,27 +1,14 @@
-/* fade */
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.28s var(--r-bezier);
+  transition: all 0.35s;
 }
 
-.fade-enter-from,
+.fade-enter-from {
-.fade-leave-active {
-  opacity: 0;
-  transition: all 0.5s var(--r-bezier);
-}
-
-/* fade-transform */
-.fade-transform-leave-active,
-.fade-transform-enter-active {
-  transition: all 0.5s var(--r-bezier);
-}
-
-.fade-transform-enter-from {
   opacity: 0;
   transform: translateX(-30px);
 }
 
-.fade-transform-leave-to {
+.fade-leave-to {
   opacity: 0;
   transform: translateX(30px);
 }

src/views/rely/index.tsx

@@ -1,4 +1,4 @@
-import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue'
+import { RouterView } from 'vue-router'
 
 const Rely = defineComponent({
   name: 'Rely',
@@ -6,7 +6,7 @@ const Rely = defineComponent({
     return {}
   },
   render() {
-    return <RayTransitionComponent />
+    return <RouterView />
   },
 })
 

src/views/rely/views/rely-about/index.tsx

@@ -90,8 +90,8 @@ const RelyAbout = defineComponent({
       <div class="rely-about">
         <NCard title="关于项目">
           ray-template 是一个基于 vue3、vite3、TypeScript 的中后台解决方案,
-          它可以帮助你快速搭建企业级中后台项目,
+          相对于市面上已有的成熟模板, 此项目的特点便是轻巧.
-          相信不管是从新技术使用还是其他方面, 都能帮助到你,持续更新中.
+          不需要手动去剔除冗余的、不相关的东西. 持续更新中.
         </NCard>
         <NCard title="项目信息">
           <NDescriptions bordered labelPlacement="left">