Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin

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

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { CSSProperties } from 'vue';
+
+import { VbenSpinner } from '@vben-core/shadcn-ui';
+
+import { useContentSpinner } from './use-content-spinner';
+
+defineOptions({ name: 'LayoutContentSpinner' });
+
+defineProps<{ overlayStyle: CSSProperties }>();
+
+const { spinning } = useContentSpinner();
+</script>
+<template>
+  <VbenSpinner :spinning="spinning" :style="overlayStyle" />
+</template>

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

@@ -7,20 +7,15 @@ import type {
 import { type VNode } from 'vue';
 import { RouterView } from 'vue-router';
 
-import { useContentHeight } from '@vben/hooks';
 import { preferences, usePreferences } from '@vben/preferences';
 import { storeToRefs, useTabbarStore } from '@vben/stores';
-import { VbenSpinner } from '@vben-core/shadcn-ui';
 
 import { IFrameRouterView } from '../../iframe';
-import { useContentSpinner } from './use-content-spinner';
 
 defineOptions({ name: 'LayoutContent' });
 
 const tabbarStore = useTabbarStore();
 const { keepAlive } = usePreferences();
-const { spinning } = useContentSpinner();
-const { contentStyles } = useContentHeight();
 
 const { getCachedTabs, getExcludeCachedTabs, renderRouteView } =
   storeToRefs(tabbarStore);
@@ -86,11 +81,6 @@ function transformComponent(
 
 <template>
   <div class="relative h-full">
-    <VbenSpinner
-      v-if="preferences.transition.loading"
-      :spinning="spinning"
-      :style="contentStyles"
-    />
     <IFrameRouterView />
     <RouterView v-slot="{ Component, route }">
       <Transition :name="getTransitionName(route)" appear mode="out-in">

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

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

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

@@ -16,7 +16,7 @@ import { VbenAdminLayout } from '@vben-core/layout-ui';
 import { Toaster, VbenBackTop, VbenLogo } from '@vben-core/shadcn-ui';
 
 import { Breadcrumb, CheckUpdates, Preferences } from '../widgets';
-import { LayoutContent } from './content';
+import { LayoutContent, LayoutContentSpinner } from './content';
 import { Copyright } from './copyright';
 import { LayoutFooter } from './footer';
 import { LayoutHeader } from './header';
@@ -297,6 +297,12 @@ const headerSlots = computed(() => {
     <template #content>
       <LayoutContent />
     </template>
+    <template
+      v-if="preferences.transition.loading"
+      #content-overlay="{ overlayStyle }"
+    >
+      <LayoutContentSpinner :overlay-style="overlayStyle" />
+    </template>
 
     <!-- 页脚 -->
     <template v-if="preferences.footer.enable" #footer>

packages/effects/layouts/src/basic/tabbar/use-tab-view-scroll.ts

@@ -0,0 +1,50 @@
+import { ref } from 'vue';
+
+type El = HTMLElement | null | undefined;
+
+export function useTabViewScroll(scrollDistance: number = 150) {
+  const scrollbarEl = ref<El>(null);
+  const scrollViewportEl = ref<El>(null);
+
+  function setScrollBarEl(el: El) {
+    scrollbarEl.value = el;
+  }
+
+  function setScrollViewEl(el: El) {
+    scrollViewportEl.value = el;
+  }
+
+  function getScrollClientWidth() {
+    if (!scrollbarEl.value || !scrollViewportEl.value) return {};
+
+    const scrollbarWidth = scrollbarEl.value.clientWidth;
+    const scrollViewWidth = scrollViewportEl.value.clientWidth;
+
+    return {
+      scrollbarWidth,
+      scrollViewWidth,
+    };
+  }
+
+  function scrollDirection(
+    direction: 'left' | 'right',
+    distance: number = scrollDistance,
+  ) {
+    const { scrollbarWidth, scrollViewWidth } = getScrollClientWidth();
+
+    if (!scrollbarWidth || !scrollViewWidth) return;
+
+    if (scrollbarWidth > scrollViewWidth) return;
+
+    scrollViewportEl.value?.scrollBy({
+      behavior: 'smooth',
+      left: direction === 'left' ? -distance : +distance,
+    });
+  }
+
+  return {
+    scrollDirection,
+    setScrollBarEl,
+    setScrollViewEl,
+  };
+}