chore: modify the default route switching animation

vben
1 parent f65bed72
Showing 7 changed files with 16 additions and 15 deletions
src/components/Button/index.vue
src/design/transition/fade.less
src/enums/appEnum.ts
src/layouts/default/multitabs/TabContent.tsx
src/layouts/default/setting/SettingDrawer.tsx
src/settings/projectSetting.ts
src/views/demo/feat/msg/index.vue
@@ -4,9 +4,9 @@
       <slot :name="item" v-bind="data" />
     </template> -->
     <template #default="data">
-      <g-icon :icon="preIcon" class="mr-1" v-if="preIcon" />
+      <Icon :icon="preIcon" class="mr-1" v-if="preIcon" />
       <slot v-bind="data" />
-      <g-icon :icon="preIcon" class="ml-1" v-if="postIcon" />
+      <Icon :icon="postIcon" class="ml-1" v-if="postIcon" />
     </template>
   </Button>
 </template>
@@ -18,10 +18,11 @@
   // import { extendSlots } from '/@/utils/helper/tsxHelper';
   import { useThrottle } from '/@/hooks/core/useThrottle';
   import { isFunction } from '/@/utils/is';
+  import Icon from '/@/components/Icon';
   export default defineComponent({
     name: 'AButton',
     inheritAttrs: false,
-    components: { Button },
+    components: { Button, Icon },
     props: {
       // 按钮类型
       type: {
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.1s ease-in-out;
+  transition: opacity 0.2s ease-in-out;
 }
 .fade-enter-from,
@@ -8,18 +8,18 @@
   opacity: 0;
 }
-/* fade-transform */
-.slide-fade-leave-active,
-.slide-fade-enter-active {
-  transition: all 0.3s;
+/* fade-slide */
+.fade-slide-leave-active,
+.fade-slide-enter-active {
+  transition: all 0.5s;
 }
-.slide-fade-enter-from {
+.fade-slide-enter-from {
   opacity: 0;
   transform: translateX(-30px);
 }
-.slide-fade-leave-to {
+.fade-slide-leave-to {
   opacity: 0;
   transform: translateX(30px);
 }
@@ -29,7 +29,7 @@ export enum PermissionModeEnum {
 export enum RouterTransitionEnum {
   ZOOM_FADE = 'zoom-fade',
   ZOOM_OUT = 'zoom-out',
-  SIDE_FADE = 'slide-fade',
+  FADE_SIDE = 'fade-slide',
   FADE = 'fade',
   FADE_BOTTOM = 'fade-bottom',
 }
@@ -60,7 +60,7 @@ export default defineComponent({
       if (!tabItem) return;
       const icon = tabItem.meta && tabItem.meta.icon;
       if (!icon || !unref(getProjectConfigRef).multiTabsSetting.showIcon) return null;
-      return <Icon icon={icon} class="align-middle mb-1" />;
+      return <Icon icon={icon} class="align-middle " style={{ marginBottom: '2px' }} />;
     }
     function renderTabContent() {
       const { tabItem: { meta } = {} } = props;
@@ -65,7 +65,7 @@ const routerTransitionOptions = [
   RouterTransitionEnum.ZOOM_FADE,
   RouterTransitionEnum.FADE,
   RouterTransitionEnum.ZOOM_OUT,
-  RouterTransitionEnum.SIDE_FADE,
+  RouterTransitionEnum.FADE_SIDE,
   RouterTransitionEnum.FADE_BOTTOM,
 ].map((item) => {
   return {
@@ -104,7 +104,7 @@ const setting: ProjectConfig = {
   openRouterTransition: true,
   // 路由切换动画
-  routerTransition: RouterTransitionEnum.ZOOM_FADE,
+  routerTransition: RouterTransitionEnum.FADE_SIDE,
   // 是否开启登录安全校验
   openLoginVerify: true,
@@ -55,7 +55,7 @@
       function handleLoading() {
         createMessage.loading('Loading...');
       }
-      function handleConfirm(type: 'warning' | 'error' | 'success') {
+      function handleConfirm(type: 'warning' | 'error' | 'success' | 'info') {
         createConfirm({
           iconType: type,
           title: 'Tip',