1

src/App.vue

@@ -1,7 +1,11 @@
 <template>
   <v-app>
     <v-main>
-      <router-view />
+      <router-view v-slot="{ Component, route }">
+        <transition name="md3" mode="out-in">
+          <component :is="Component" :key="route.path" />
+        </transition>
+      </router-view>
     </v-main>
   </v-app>
 </template>
@@ -9,3 +13,19 @@
 <script setup>
   //
 </script>
+<style>
+
+.md3-enter-active,
+.md3-leave-active {
+  transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+
+.md3-enter-from {
+  opacity: 0;
+  transform: translateX(0.5vw);
+}
+
+.md3-leave-to {
+  opacity: 0;
+  transform: translateX(-0.5vw);
+}</style>

src/utils/settings.js

@@ -45,7 +45,7 @@ const settingsDefinitions = {
   },
   'server.provider': {  // 新增项
     type: 'string',
-    default: 'server',
+    default: 'localStorage',
     validate: value => ['server', 'localStorage'].includes(value),
     description: '数据提供者，用于决定数据存储方式'
   },