From 5f82fcc8c1ed8bad48fedb7136edfede9d446bc3 Mon Sep 17 00:00:00 2001
From: chuan_wuhao <443547225@qq.com>
Date: Tue, 22 Nov 2022 17:13:45 +0800
Subject: [PATCH] =?UTF-8?q?ray=20template=203.0=20=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E7=BB=86=E8=8A=82=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                                   |  8 -------
 .../RayTransitionComponent/index.vue          | 22 +++++++++----------
 src/layout/index.tsx                          |  1 +
 src/styles/animate.scss                       | 19 +++-------------
 src/views/rely/index.tsx                      |  4 ++--
 src/views/rely/views/rely-about/index.tsx     |  4 ++--
 6 files changed, 19 insertions(+), 39 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 3365e51b..ad25fe1f 100644
--- a/src/App.tsx
+++ b/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() {
diff --git a/src/components/RayTransitionComponent/index.vue b/src/components/RayTransitionComponent/index.vue
index 49567c76..a3d80be3 100644
--- a/src/components/RayTransitionComponent/index.vue
+++ b/src/components/RayTransitionComponent/index.vue
@@ -1,21 +1,21 @@
 <template>
-  <router-view v-slot="{ Component, route }">
-    <transition
-      :name="transitionPropName"
-      :mode="transitionMode"
-      :appear="transitionAppear"
-    >
-      <keep-alive include="layout">
-        <component :is="Component" :key="route" />
-      </keep-alive>
-    </transition>
+  <router-view>
+    <template #default="{ Component, route }">
+      <transition
+        :name="transitionPropName"
+        :mode="transitionMode"
+        :appear="transitionAppear"
+      >
+        <component :is="Component" :key="route.fullPath" />
+      </transition>
+    </template>
   </router-view>
 </template>
 <script lang="ts" setup>
 defineProps({
   transitionPropName: {
     type: String,
-    default: 'fade-transform',
+    default: 'fade',
   },
   transitionMode: {
     type: String,
diff --git a/src/layout/index.tsx b/src/layout/index.tsx
index 6d0d86bf..903ebd41 100644
--- a/src/layout/index.tsx
+++ b/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'
diff --git a/src/styles/animate.scss b/src/styles/animate.scss
index fc986980..c4590c20 100644
--- a/src/styles/animate.scss
+++ b/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-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 {
+.fade-enter-from {
   opacity: 0;
   transform: translateX(-30px);
 }
 
-.fade-transform-leave-to {
+.fade-leave-to {
   opacity: 0;
   transform: translateX(30px);
 }
diff --git a/src/views/rely/index.tsx b/src/views/rely/index.tsx
index 9f64f577..6a6728a6 100644
--- a/src/views/rely/index.tsx
+++ b/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 />
   },
 })
 
diff --git a/src/views/rely/views/rely-about/index.tsx b/src/views/rely/views/rely-about/index.tsx
index c2f2589b..2606a6be 100644
--- a/src/views/rely/views/rely-about/index.tsx
+++ b/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">