refactor(project): business changed its name to effects, and universal-ui changed its name to common-ui

packages/effects/layouts/src/basic/content/content.vue

@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import type { RouteLocationNormalizedLoaded } from 'vue-router';
+
+import { preferences, usePreferences } from '@vben-core/preferences';
+import { Spinner } from '@vben-core/shadcn-ui';
+import { storeToRefs, useCoreTabbarStore } from '@vben-core/stores';
+
+import { IFrameRouterView } from '../../iframe';
+import { useContentSpinner } from './use-content-spinner';
+
+defineOptions({ name: 'LayoutContent' });
+
+const tabbarStore = useCoreTabbarStore();
+const { keepAlive } = usePreferences();
+const { spinning } = useContentSpinner();
+
+const { getCachedTabs, getExcludeCachedTabs, renderRouteView } =
+  storeToRefs(tabbarStore);
+
+// 页面切换动画
+function getTransitionName(route: RouteLocationNormalizedLoaded) {
+  // 如果偏好设置未设置，则不使用动画
+  const { tabbar, transition } = preferences;
+  const transitionName = transition.name;
+  if (!transitionName || !transition.enable) {
+    return;
+  }
+
+  // 标签页未启用或者未开启缓存，则使用全局配置动画
+  if (!tabbar.enable || !keepAlive) {
+    return transitionName;
+  }
+
+  // 如果页面已经加载过，则不使用动画
+  // if (route.meta.loaded) {
+  //   return;
+  // }
+  // 已经打开且已经加载过的页面不使用动画
+  const inTabs = getCachedTabs.value.includes(route.name as string);
+
+  return inTabs && route.meta.loaded ? undefined : transitionName;
+}
+</script>
+
+<template>
+  <div class="relative h-full">
+    <Spinner
+      v-if="preferences.transition.loading"
+      :spinning="spinning"
+      class="h-[var(--vben-content-client-height)]"
+    />
+    <IFrameRouterView />
+    <RouterView v-slot="{ Component, route }">
+      <Transition :name="getTransitionName(route)" appear mode="out-in">
+        <KeepAlive
+          v-if="keepAlive"
+          :exclude="getExcludeCachedTabs"
+          :include="getCachedTabs"
+        >
+          <component
+            :is="Component"
+            v-if="renderRouteView"
+            v-show="!route.meta.iframeSrc"
+            :key="route.fullPath"
+          />
+        </KeepAlive>
+        <component
+          :is="Component"
+          v-else-if="renderRouteView"
+          :key="route.fullPath"
+        />
+      </Transition>
+    </RouterView>
+  </div>
+</template>

packages/effects/layouts/src/basic/content/index.ts

@@ -0,0 +1 @@
+export { default as LayoutContent } from './content.vue';

packages/effects/layouts/src/basic/content/use-content-spinner.ts

@@ -0,0 +1,50 @@
+import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { preferences } from '@vben-core/preferences';
+
+function useContentSpinner() {
+  const spinning = ref(false);
+  const startTime = ref(0);
+  const router = useRouter();
+  const minShowTime = 500;
+  const enableLoading = computed(() => preferences.transition.loading);
+
+  const onEnd = () => {
+    if (!enableLoading.value) {
+      return;
+    }
+    const processTime = performance.now() - startTime.value;
+    if (processTime < minShowTime) {
+      setTimeout(() => {
+        spinning.value = false;
+      }, minShowTime - processTime);
+    } else {
+      spinning.value = false;
+    }
+  };
+
+  router.beforeEach((to) => {
+    if (to.meta.loaded || !enableLoading.value || to.meta.iframeSrc) {
+      return true;
+    }
+    startTime.value = performance.now();
+    spinning.value = true;
+    return true;
+  });
+
+  router.afterEach((to) => {
+    if (to.meta.loaded || !enableLoading.value || to.meta.iframeSrc) {
+      return true;
+    }
+
+    // 关闭加载动画
+    onEnd();
+
+    return true;
+  });
+
+  return { spinning };
+}
+
+export { useContentSpinner };