Merge pull request #3 from thofx/lint_fix

修复样式问题

src/@layouts/styles/_default-layout.scss

@@ -6,11 +6,15 @@
 
 html {
   min-height: calc(100% + env(safe-area-inset-top));
-  //background: rgb(var(--v-theme-background));
+}
+
+@media screen and (max-width: 900px) {
+  html, body {
+    background: rgb(var(--v-theme-background));
+  }
 }
 
 body {
-  //background: rgb(var(--v-theme-background));
   overscroll-behavior-y: contain;
   --webkit-overflow-scrolling: touch;
 }
@@ -34,10 +38,21 @@ body,
   @include mixins.boxed-content(true);
 
   flex-grow: 1;
-  overflow:hidden;
+  overflow: hidden;
   // TODO: Use grid gutter variable here
   padding-block: 0.5rem;
   padding-top: calc(env(safe-area-inset-top) + 70px);
+  display: flex;
+
+  .page-content-container {
+    flex: 1;
+    display: flex;
+
+    & > div:first-child {
+      flex: auto;
+      position: relative;
+    }
+  }
 }
 
 .layout-footer {

src/components/NoDataFound.vue

@@ -54,17 +54,21 @@ interface Props {
 <style lang="scss">
 @use '@core/scss/pages/misc.scss';
 
-.misc-wrapper .misc-footer-tree {
-  position: absolute;
-  z-index: 1;
-  inline-size: 15.625rem;
-  inset-block-end: 3.5rem;
-  inset-inline-start: 0.375rem;
-}
+.misc-wrapper {
+  position: relative;
 
-.misc-wrapper .misc-footer-img {
-  position: absolute;
-  inline-size: 100%;
-  inset-block-end: 0;
+  .misc-footer-tree {
+    position: absolute;
+    z-index: 1;
+    inline-size: 15.625rem;
+    inset-block-end: 3.5rem;
+    inset-inline-start: 0.375rem;
+  }
+
+  .misc-footer-img {
+    position: absolute;
+    inline-size: 100%;
+    inset-block-end: 0;
+  }
 }
 </style>

src/components/cards/MediaCard.vue

@@ -16,7 +16,7 @@ const props = defineProps({
 })
 
 // 提示框
-const $toast = useToast()
+const $toast = useToast({ position: 'top' })
 
 // 图片加载状态
 const isImageLoaded = ref(false)

src/layouts/default.vue

@@ -4,11 +4,16 @@ import DefaultLayoutWithVerticalNav from './components/DefaultLayoutWithVertical
 
 <template>
   <DefaultLayoutWithVerticalNav>
-    <RouterView />
+    <router-view v-slot="{ Component }">
+      <keep-alive>
+        <component :is="Component" v-if="$route.meta.keepAlive" :key="$route.name" />
+      </keep-alive>
+      <component :is="Component" v-if="!$route.meta.keepAlive" :key="$route.name" />
+    </router-view>
   </DefaultLayoutWithVerticalNav>
 </template>
 
 <style lang="scss">
 // As we are using `layouts` plugin we need its styles to be imported
-@use "@layouts/styles/default-layout";
+@use '@layouts/styles/default-layout';
 </style>

src/pages/ranking.vue

@@ -166,7 +166,7 @@ import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
   </div>
 </template>
 
-<style type="text/css">
+<style lang="css">
 .slider-header {
   position: relative;
   display: flex;

src/router/index.ts

@@ -23,6 +23,7 @@ const router = createRouter({
           path: 'ranking',
           component: () => import('../pages/ranking.vue'),
           meta: {
+            keepAlive: true,
             requiresAuth: true,
           },
         },

src/styles/styles.scss

@@ -53,21 +53,6 @@
 
 
 
-/* router view transition fade-slide */
-.fade-slide-leave-active,
-.fade-slide-enter-active {
-  transition: all 0.3s;
-}
-
-.fade-slide-enter-from {
-  opacity: 0;
-  transform: translateX(-30px);
-}
-
-.fade-slide-leave-to {
-  opacity: 0;
-  transform: translateX(30px);
-}
 
 /* router view transition fade-slide */
 .fade-slide-leave-active,
@@ -77,10 +62,10 @@
 
 .fade-slide-enter-from {
   opacity: 0;
-  transform: translateX(-45px);
+  transform: translateY(-45px);
 }
 
 .fade-slide-leave-to {
   opacity: 0;
-  transform: translateX(45px);
+  transform: translateY(45px);
 }

src/views/plugin/PluginCardListView.vue

@@ -87,7 +87,7 @@ onBeforeMount(fetchData)
         icon="mdi-plus"
         v-bind="props"
         size="x-large"
-        class="fixed right-5 bottom-5"
+        class="fixed right-5"
       />
     </template>