feat: 菜单增加单独的动画选择机制

server/model/system/sys_base_menu.go

@@ -27,6 +27,7 @@ type Meta struct {
 	Title          string `json:"title" gorm:"comment:菜单名"`                       // 菜单名
 	Icon           string `json:"icon" gorm:"comment:菜单图标"`                      // 菜单图标
 	CloseTab       bool   `json:"closeTab" gorm:"comment:自动关闭tab"`               // 自动关闭tab
+	TransitionType string `json:"transitionType" gorm:"comment:路由切换动画"`        // 路由切换动画
 }
 
 type SysBaseMenuParameter struct {

server/service/system/sys_base_menu.go

@@ -72,6 +72,7 @@ func (baseMenuService *BaseMenuService) UpdateBaseMenu(menu system.SysBaseMenu)
 	var oldMenu system.SysBaseMenu
 	upDateMap := make(map[string]interface{})
 	upDateMap["keep_alive"] = menu.KeepAlive
+	upDateMap["transition_type"] = menu.TransitionType
 	upDateMap["close_tab"] = menu.CloseTab
 	upDateMap["default_menu"] = menu.DefaultMenu
 	upDateMap["parent_id"] = menu.ParentId

web/src/view/layout/index.vue

@@ -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="config.transition_type">
+              <transition mode="out-in" :name="route.meta.transitionType || config.transition_type">
                 <keep-alive :include="routerStore.keepAliveRouters">
                   <component :is="Component" :key="route.fullPath" />
                 </keep-alive>

web/src/view/superAdmin/menu/menu.vue

@@ -300,6 +300,34 @@
               </el-select>
             </el-form-item>
           </el-col>
+          <el-col :span="8">
+            <el-form-item>
+              <template #label>
+                <div>
+                  <span> 路由切换动画 </span>
+                  <el-tooltip
+                      content="如果设置了路由切换动画，在本路由下的动画优先级高于全局动画切换优先级。"
+                      placement="top"
+                      effect="light"
+                  >
+                    <el-icon><QuestionFilled /></el-icon>
+                  </el-tooltip>
+                </div>
+              </template>
+
+              <el-select
+                  v-model="form.meta.transitionType"
+                  style="width: 100%"
+                  placeholder="跟随全局"
+                  clearable
+              >
+                <el-option value="fade" label="淡入淡出" />
+                <el-option value="slide" label="滑动" />
+                <el-option value="zoom" label="缩放" />
+                <el-option value="none" label="无动画" />
+              </el-select>
+            </el-form-item>
+          </el-col>
         </el-row>
       </el-form>
       <div>