fix：设置添加页面切换动画

web/src/view/layout/index.vue

@@ -23,7 +23,7 @@
         v-if="config.side_mode === 'combination' && device !== 'mobile'"
         mode="normal"
       />
-      <div class="flex-1 p-2 w-0 h-full">
+      <div class="flex-1 px-2 w-0 h-full">
         <gva-tabs v-if="config.showTabs" />
         <div
           class="overflow-auto"
@@ -34,7 +34,7 @@
               id="gva-base-load-dom"
               class="gva-body-h bg-gray-50 dark:bg-slate-800"
             >
-              <transition mode="out-in" name="el-fade-in-linear">
+              <transition mode="out-in" :name="config.transition_type">
                 <keep-alive :include="routerStore.keepAliveRouters">
                   <component :is="Component" :key="route.fullPath" />
                 </keep-alive>
@@ -61,6 +61,7 @@
   import { useUserStore } from '@/pinia/modules/user'
   import { useAppStore } from '@/pinia'
   import { storeToRefs } from 'pinia'
+  import '@/style/transition.scss'
   const appStore = useAppStore()
   const { config, isDark, device } = storeToRefs(appStore)
 

web/src/view/layout/setting/index.vue

@@ -14,8 +14,8 @@
     </template>
     <div class="flex flex-col">
       <div class="mb-8">
-        <div class="text-gray-800 dark:text-gray-100">默认主题</div>
-        <div class="mt-2 text-sm p-2 flex items-center gap-2">
+        <Title title="默认主题"></Title>
+        <div class="mt-2 text-sm p-2 flex items-center justify-center gap-2">
           <el-segmented
             v-model="config.darkMode"
             :options="options"
@@ -25,8 +25,8 @@
         </div>
       </div>
       <div class="mb-8">
-        <div class="text-gray-800 dark:text-gray-100">主题色</div>
-        <div class="mt-2 text-sm p-2 flex items-center gap-2">
+        <Title title="主题色"></Title>
+        <div class="mt-2 text-sm p-2 flex items-center gap-2 justify-center">
           <div
             v-for="item in colors"
             :key="item"
@@ -45,8 +45,8 @@
         </div>
       </div>
       <div class="mb-8">
-        <div class="text-gray-800 dark:text-gray-100">界面显示</div>
-        <div class="mt-2 text-sm p-2">
+        <Title title="主题配置"></Title>
+        <div class="mt-2 text-md p-2 flex flex-col gap-2">
           <div class="flex items-center justify-between">
             <div>展示水印</div>
             <el-switch
@@ -73,14 +73,6 @@
               size="default"
               @change="appStore.toggleSideMode"
             />
-            <!-- <el-select
-              v-model="config.side_mode"
-              @change="handleSideModelChange"
-            >
-              <el-option value="normal" label="标准模式" />
-              <el-option value="head" label="顶部导航栏" />
-              <el-option value="multilayer" disabled label="多侧边导航模式" />
-            </el-select> -->
           </div>
 
           <div class="flex items-center justify-between">
@@ -90,12 +82,25 @@
               @change="appStore.toggleTabs"
             />
           </div>
+          <div class="flex items-center justify-between gap-2">
+            <div class="flex-shrink-0">页面切换动画</div>
+            <el-select
+              v-model="config.transition_type"
+              @change="appStore.toggleTransition"
+              class="w-40"
+            >
+              <el-option value="fade" label="淡入淡出" />
+              <el-option value="slide" label="滑动" />
+              <el-option value="zoom" label="缩放" />
+              <el-option value="none" label="无动画" />
+            </el-select>
+          </div>
         </div>
       </div>
 
       <div class="mb-8">
-        <div class="text-gray-800 dark:text-gray-100">layout 大小配置</div>
-        <div class="mt-2 text-sm p-2">
+        <Title title="layout 大小配置"></Title>
+        <div class="mt-2 text-md p-2 flex flex-col gap-2">
           <div class="flex items-center justify-between mb-2">
             <div>侧边栏展开宽度</div>
             <el-input-number
@@ -138,6 +143,7 @@
   import { ref, computed } from 'vue'
   import { ElMessage } from 'element-plus'
   import { setSelfSetting } from '@/api/user'
+  import Title from './title.vue'
   const appStore = useAppStore()
   const { config, device } = storeToRefs(appStore)
   defineOptions({

web/src/view/layout/setting/title.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="title relative my-2">
+    <div class="flex-shrink-0 text-center text-xl text-gray-600">
+      {{ title }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+  defineOptions({
+    name: 'layoutSettingTitle'
+  })
+
+  defineProps({
+    title: String
+  })
+</script>
+
+<style scoped>
+  .title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4rem;
+  }
+
+  .title::before,
+  .title::after {
+    content: '';
+    height: 1px;
+    width: 100%;
+    background-color: #e3e3e3;
+  }
+</style>