@melt-js/comps-vben 0.0.0-stage → 2026.11.8-2

package/src/layouts/authentication/index.ts

@@ -0,0 +1,2 @@
+export { default as AuthPageLayout } from './authentication.vue';
+export * from './types';

package/src/layouts/authentication/toolbar.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { ToolbarType } from './types';
+
+import { computed } from 'vue';
+
+import { preferences } from '@melt-js/libs-vben/preferences';
+
+import {
+  AuthenticationColorToggle,
+  AuthenticationLayoutToggle,
+  LanguageToggle,
+  ThemeToggle,
+} from '../widgets';
+
+interface Props {
+  toolbarList?: ToolbarType[];
+}
+
+defineOptions({
+  name: 'AuthenticationToolbar',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  toolbarList: () => ['color', 'language', 'layout', 'theme'],
+});
+
+const showColor = computed(() => props.toolbarList.includes('color'));
+const showLayout = computed(() => props.toolbarList.includes('layout'));
+const showLanguage = computed(() => props.toolbarList.includes('language'));
+const showTheme = computed(() => props.toolbarList.includes('theme'));
+</script>
+
+<template>
+  <div
+    :class="{
+      'rounded-3xl bg-accent px-3 py-1': toolbarList.length > 1,
+    }"
+    class="absolute top-4 right-2 z-10 flex-center"
+  >
+    <!-- Only show on medium and larger screens -->
+    <div class="hidden md:flex">
+      <AuthenticationColorToggle v-if="showColor" />
+      <AuthenticationLayoutToggle v-if="showLayout" />
+    </div>
+    <!-- Always show Language and Theme toggles -->
+    <LanguageToggle v-if="showLanguage && preferences.widget.languageToggle" />
+    <ThemeToggle v-if="showTheme && preferences.widget.themeToggle" />
+  </div>
+</template>

package/src/layouts/authentication/types.ts

@@ -0,0 +1 @@
+export type ToolbarType = 'color' | 'language' | 'layout' | 'theme';

package/src/layouts/basic/README.md

@@ -0,0 +1,7 @@
+## layout
+
+### header
+
+- 支持N个自定义插槽，命名方式：header-right-n，header-left-n
+- header-left-n ，排序方式：0-19 ,breadcrumb 21-x
+- header-right-n ，排序方式：0-49，global-search，51-59，theme-toggle，61-69，language-toggle，71-79，fullscreen，81-89，notification，91-149，user-dropdown，151-x

package/src/layouts/basic/content/content-spinner.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import { VbenSpinner } from '@melt-js/comps-vben/shadcn-ui';
+
+import { useContentSpinner } from './use-content-spinner';
+
+defineOptions({ name: 'LayoutContentSpinner' });
+
+const { spinning } = useContentSpinner();
+</script>
+<template>
+  <VbenSpinner :spinning="spinning" />
+</template>

package/src/layouts/basic/content/content.vue

@@ -0,0 +1,112 @@
+<script lang="ts" setup>
+import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router';
+
+import { unref } from 'vue';
+import { RouterView } from 'vue-router';
+
+import { usePreferences } from '@melt-js/libs-vben/preferences';
+import { getTabKey, storeToRefs, useTabbarStore } from '@melt-js/libs-vben/stores';
+
+import { transformComponent, useLayoutHook } from '../../hooks';
+import { IFrameRouterView } from '../../iframe';
+import { RouteCachedPage, RouteCachedView } from '../../route-cached';
+
+defineOptions({ name: 'LayoutContent' });
+
+const tabbarStore = useTabbarStore();
+const { keepAlive } = usePreferences();
+
+const { getCachedTabs, getExcludeCachedTabs, renderRouteView } =
+  storeToRefs(tabbarStore);
+
+const { getEnabledTransition, getTransitionName } = useLayoutHook();
+
+/**
+ * 是否显示component
+ * @param route
+ */
+const showComponent = (route: RouteLocationNormalizedLoadedGeneric) => {
+  return !route.meta.domCached && unref(renderRouteView);
+};
+</script>
+
+<template>
+  <div class="page-route-container relative h-full">
+    <IFrameRouterView />
+    <RouteCachedView />
+    <RouterView v-slot="{ Component, route }">
+      <RouteCachedPage
+        :component="Component"
+        :route="route"
+        v-if="route.meta.domCached"
+      />
+      <Transition
+        v-if="getEnabledTransition"
+        :name="getTransitionName(route)"
+        appear
+        :leave-active-class="`${getTransitionName(route)}-leave-active page-route-leave-active`"
+      >
+        <KeepAlive
+          v-if="keepAlive"
+          :exclude="getExcludeCachedTabs"
+          :include="getCachedTabs"
+        >
+          <component
+            :is="transformComponent(Component, route)"
+            v-if="showComponent(route)"
+            v-show="!route.meta.iframeSrc"
+            :key="getTabKey(route)"
+          />
+        </KeepAlive>
+        <component
+          :is="Component"
+          v-else-if="showComponent(route)"
+          :key="getTabKey(route)"
+        />
+      </Transition>
+      <template v-else>
+        <KeepAlive
+          v-if="keepAlive"
+          :exclude="getExcludeCachedTabs"
+          :include="getCachedTabs"
+        >
+          <component
+            :is="transformComponent(Component, route)"
+            v-if="showComponent(route)"
+            v-show="!route.meta.iframeSrc"
+            :key="getTabKey(route)"
+          />
+        </KeepAlive>
+        <component
+          :is="Component"
+          v-else-if="showComponent(route)"
+          :key="getTabKey(route)"
+        />
+      </template>
+    </RouterView>
+  </div>
+</template>
+
+<style>
+/* 优化router动画切换切换重叠问题 */
+.page-route-leave-active {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+/* 移除动画切换的横向滚动条 translateX(-30px) */
+.page-route-container:has(> .fade-slide-enter-active),
+.page-route-container:has(> .fade-slide-leave-active) {
+  overflow-x: hidden;
+}
+
+/* 移除动画切换的纵向滚动条 */
+.page-route-container:has(> .fade-up-enter-active),
+.page-route-container:has(> .fade-up-leave-active),
+.page-route-container:has(> .fade-down-enter-active),
+.page-route-container:has(> .fade-down-leave-active) {
+  overflow-y: hidden;
+}
+</style>

package/src/layouts/basic/content/index.ts

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

package/src/layouts/basic/content/use-content-spinner.ts

@@ -0,0 +1,98 @@
+import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { preferences } from '@melt-js/libs-vben/preferences';
+
+/**
+ * 内容切换 loading：
+ * - 延迟显示：导航在 showDelay 内完成时不渲染 spinner，
+ *   避免快速跳转时闪现半遮罩造成卡顿感（issue #8289）；
+ * - 最小展示：spinner 一旦显示，至少保留 minShowTime，避免一闪而过。
+ */
+function useContentSpinner() {
+  const spinning = ref(false);
+  const startTime = ref(0);
+  const router = useRouter();
+  const showDelay = 200; // 延迟显示时间：更快的导航不显示 loading
+  const minShowTime = 500; // 最小显示时间
+  const enableLoading = computed(() => preferences.transition.loading);
+
+  let hideTimer: null | ReturnType<typeof setTimeout> = null;
+  let navSeq = 0;
+  const routeSeq = new WeakMap<object, number>();
+  let showTimer: null | {
+    id: ReturnType<typeof setTimeout>;
+    seq: number;
+  } = null;
+
+  const clearTimers = () => {
+    if (hideTimer) {
+      clearTimeout(hideTimer);
+      hideTimer = null;
+    }
+    if (showTimer) {
+      clearTimeout(showTimer.id);
+      showTimer = null;
+    }
+  };
+
+  // 结束加载动画
+  const onEnd = (seq: number | undefined) => {
+    if (!enableLoading.value || seq !== navSeq) {
+      return;
+    }
+    if (showTimer?.seq === seq) {
+      clearTimeout(showTimer.id);
+      showTimer = null;
+    }
+    // spinner 尚未显示过（快速导航）：直接结束，不闪现
+    if (!spinning.value) {
+      return;
+    }
+    const processTime = performance.now() - startTime.value;
+    if (processTime < minShowTime) {
+      hideTimer = setTimeout(() => {
+        hideTimer = null;
+        spinning.value = false;
+      }, minShowTime - processTime);
+    } else {
+      spinning.value = false;
+    }
+  };
+
+  // 路由前置守卫
+  router.beforeEach((to) => {
+    if (to.meta.loaded || !enableLoading.value || to.meta.iframeSrc) {
+      return true;
+    }
+    clearTimers();
+    navSeq += 1;
+    const seq = navSeq;
+    routeSeq.set(to, seq);
+    const id = setTimeout(() => {
+      if (showTimer?.seq === seq) {
+        showTimer = null;
+      }
+      // 仅当仍是本次导航时才显示，避免陈旧定时器闪现
+      if (seq === navSeq && !spinning.value) {
+        startTime.value = performance.now();
+        spinning.value = true;
+      }
+    }, showDelay);
+    showTimer = { id, seq };
+    return true;
+  });
+
+  // 路由后置守卫
+  router.afterEach((to) => {
+    if (to.meta.loaded || !enableLoading.value || to.meta.iframeSrc) {
+      return true;
+    }
+    onEnd(routeSeq.get(to));
+    return true;
+  });
+
+  return { spinning };
+}
+
+export { useContentSpinner };

package/src/layouts/basic/copyright/copyright.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+interface Props {
+  companyName?: string;
+  companySiteLink?: string;
+  date?: string;
+  icp?: string;
+  icpLink?: string;
+}
+
+defineOptions({
+  name: 'Copyright',
+});
+
+withDefaults(defineProps<Props>(), {
+  companyName: 'Vben Admin',
+  companySiteLink: '',
+  date: '2024',
+  icp: '',
+  icpLink: '',
+});
+</script>
+
+<template>
+  <div class="text-md flex-center">
+    <!-- ICP Link -->
+    <a
+      v-if="icp"
+      :href="icpLink || 'https://beian.miit.gov.cn/'"
+      class="mx-1 hover:text-primary-hover"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      {{ icp }}
+    </a>
+
+    <!-- Copyright Text -->
+    Copyright © {{ date }}
+
+    <!-- Company Link -->
+    <a
+      v-if="companyName"
+      :href="companySiteLink || 'javascript:void(0)'"
+      class="mx-1 hover:text-primary-hover"
+      target="_blank"
+    >
+      {{ companyName }}
+    </a>
+  </div>
+</template>

package/src/layouts/basic/copyright/index.ts

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

package/src/layouts/basic/footer/footer.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+defineOptions({
+  name: 'LayoutFooter',
+});
+</script>
+
+<template>
+  <div class="relative flex-center size-full text-xs text-muted-foreground">
+    <slot></slot>
+  </div>
+</template>

package/src/layouts/basic/footer/index.ts

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