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

Author: bypanghu

Diff for: web/src/pathInfo.json

@@ -32,6 +32,7 @@
   "/src/view/layout/screenfull/index.vue": "Screenfull",
   "/src/view/layout/search/search.vue": "BtnBox",
   "/src/view/layout/setting/index.vue": "GvaSetting",
+  "/src/view/layout/setting/title.vue": "layoutSettingTitle",
   "/src/view/layout/tabs/index.vue": "HistoryComponent",
   "/src/view/login/index.vue": "Login",
   "/src/view/person/person.vue": "Person",

Diff for: web/src/pinia/modules/app.js

@@ -17,14 +17,16 @@ export const useAppStore = defineStore('app', () => {
     layout_side_collapsed_width: 80,
     layout_side_item_height: 48,
     show_watermark: true,
-    side_mode: 'normal'
+    side_mode: 'normal',
+    // 页面过渡动画配置
+    transition_type: 'slide'
   })
 
   const isDark = useDark({
     selector: 'html',
     attribute: 'class',
     valueDark: 'dark',
-    valueLight: 'light',
+    valueLight: 'light'
   })
 
   const preferredDark = usePreferredDark()
@@ -50,10 +52,10 @@ export const useAppStore = defineStore('app', () => {
   }
 
   const toggleDevice = (e) => {
-    if(e === 'mobile'){
+    if (e === 'mobile') {
       drawerSize.value = '100%'
       operateMinWith.value = '80'
-    }else {
+    } else {
       drawerSize.value = '800'
       operateMinWith.value = '240'
     }
@@ -93,7 +95,11 @@ export const useAppStore = defineStore('app', () => {
     config.side_mode = e
   }
 
-    // 监听色弱模式和灰色模式
+  const toggleTransition = (e) => {
+    config.transition_type = e
+  }
+
+  // 监听色弱模式和灰色模式
   watchEffect(() => {
     document.documentElement.classList.toggle('html-weakenss', config.weakness)
     document.documentElement.classList.toggle('html-grey', config.grey)
@@ -121,6 +127,7 @@ export const useAppStore = defineStore('app', () => {
     toggleConfigSideCollapsedWidth,
     toggleConfigSideItemHeight,
     toggleConfigWatermark,
-    toggleSideMode
+    toggleSideMode,
+    toggleTransition
   }
 })

Diff for: web/src/pinia/modules/user.js

@@ -28,9 +28,12 @@ export const useUserStore = defineStore('user', () => {
     userInfo.value = val
     if (val.originSetting) {
       Object.keys(appStore.config).forEach((key) => {
-        appStore.config[key] = val.originSetting[key]
+        if (val.originSetting[key]) {
+          appStore.config[key] = val.originSetting[key]
+        }
       })
     }
+    console.log(appStore.config)
   }
 
   const setToken = (val) => {
@@ -66,7 +69,7 @@ export const useUserStore = defineStore('user', () => {
       })
 
       const res = await login(loginInfo)
-      
+
       if (res.code !== 0) {
         ElMessage.error(res.message || '登录失败')
         return false

Diff for: web/src/style/main.scss

@@ -1,4 +1,5 @@
 @use '@/style/iconfont.css';
+@use "./transition.scss";
 
 .html-grey {
   filter: grayscale(100%);

Diff for: web/src/style/transition.scss

@@ -0,0 +1,68 @@
+
+// 淡入淡出动画
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.header {
+  border-radius: 0 0 10px 10px;
+}
+
+.body {
+  height: calc(100% - 6rem);
+}
+
+@keyframes slideDown {
+  from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+// 缩放动画
+.zoom-enter-active,
+.zoom-leave-active {
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.zoom-enter-from,
+.zoom-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+
+/* fade-slide */
+.slide-leave-active,
+.slide-enter-active {
+  transition: all 0.3s;
+}
+.slide-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+.slide-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}

Diff for: 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)
 

Diff for: 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({

Diff for: 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>