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

package/src/layouts/basic/tabbar/use-tabbar.ts

@@ -0,0 +1,229 @@
+import type { RouteLocationNormalizedGeneric } from 'vue-router';
+
+import type { TabDefinition } from '@melt-js/libs-vben/types';
+
+import type { IContextMenuItem } from '@melt-js/comps-vben/tabs-ui';
+
+import { computed, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { useContentMaximize, useTabs } from '@melt-js/libs-vben/hooks';
+import {
+  ArrowLeftToLine,
+  ArrowRightLeft,
+  ArrowRightToLine,
+  ExternalLink,
+  FoldHorizontal,
+  Fullscreen,
+  Minimize2,
+  Pin,
+  PinOff,
+  RotateCw,
+  X,
+} from '@melt-js/libs-vben/icons';
+import { $t, useI18n } from '@melt-js/libs-vben/locales';
+import { getTabKey, useAccessStore, useTabbarStore } from '@melt-js/libs-vben/stores';
+import { filterTree } from '@melt-js/libs-vben/utils';
+
+export function useTabbar() {
+  const router = useRouter();
+  const route = useRoute();
+  const accessStore = useAccessStore();
+  const tabbarStore = useTabbarStore();
+  const { contentIsMaximize, toggleMaximize } = useContentMaximize();
+  const {
+    closeAllTabs,
+    closeCurrentTab,
+    closeLeftTabs,
+    closeOtherTabs,
+    closeRightTabs,
+    closeTabByKey,
+    getTabDisableState,
+    openTabInNewWindow,
+    refreshTab,
+    toggleTabPin,
+  } = useTabs();
+
+  /**
+   * 当前路径对应的tab的key
+   */
+  const currentActive = computed(() => {
+    return getTabKey(route);
+  });
+
+  const { locale } = useI18n();
+  const currentTabs = ref<RouteLocationNormalizedGeneric[]>();
+  watch(
+    [
+      () => tabbarStore.getTabs,
+      () => tabbarStore.updateTime,
+      () => locale.value,
+    ],
+    ([tabs]) => {
+      currentTabs.value = tabs.map((item) => wrapperTabLocale(item));
+    },
+  );
+
+  /**
+   * 初始化固定标签页
+   */
+  const initAffixTabs = () => {
+    const affixTabs = filterTree(router.getRoutes(), (route) => {
+      return !!route.meta?.affixTab;
+    });
+    tabbarStore.setAffixTabs(affixTabs);
+  };
+
+  // 点击tab,跳转路由
+  const handleClick = (key: string) => {
+    const { fullPath, path } = tabbarStore.getTabByKey(key);
+    void router.push(fullPath || path);
+  };
+
+  // 关闭tab
+  const handleClose = async (key: string) => {
+    await closeTabByKey(key);
+  };
+
+  function wrapperTabLocale(tab: RouteLocationNormalizedGeneric) {
+    return {
+      ...tab,
+      meta: {
+        ...tab?.meta,
+        title: $t(tab?.meta?.title),
+      },
+    };
+  }
+
+  watch(
+    () => accessStore.accessMenus,
+    () => {
+      initAffixTabs();
+    },
+    { immediate: true },
+  );
+
+  watch(
+    () => route.fullPath,
+    () => {
+      const meta = route.matched?.[route.matched.length - 1]?.meta;
+      tabbarStore.addTab({
+        ...route,
+        // key 用合并后的 route.meta 计算，父级的 fullPathKey 同样生效
+        key: getTabKey(route),
+        meta: meta || route.meta,
+      });
+    },
+    { immediate: true },
+  );
+
+  const createContextMenus = (tab: TabDefinition) => {
+    const {
+      disabledCloseAll,
+      disabledCloseCurrent,
+      disabledCloseLeft,
+      disabledCloseOther,
+      disabledCloseRight,
+      disabledRefresh,
+    } = getTabDisableState(tab);
+
+    const affixTab = tab?.meta?.affixTab ?? false;
+
+    const menus: IContextMenuItem[] = [
+      {
+        disabled: disabledCloseCurrent,
+        handler: async () => {
+          await closeCurrentTab(tab);
+        },
+        icon: X,
+        key: 'close',
+        text: $t('preferences.tabbar.contextMenu.close'),
+      },
+      {
+        handler: async () => {
+          await toggleTabPin(tab);
+        },
+        icon: affixTab ? PinOff : Pin,
+        key: 'affix',
+        text: affixTab
+          ? $t('preferences.tabbar.contextMenu.unpin')
+          : $t('preferences.tabbar.contextMenu.pin'),
+      },
+      {
+        handler: async () => {
+          if (!contentIsMaximize.value) {
+            await router.push(tab.fullPath);
+          }
+          toggleMaximize();
+        },
+        icon: contentIsMaximize.value ? Minimize2 : Fullscreen,
+        key: contentIsMaximize.value ? 'restore-maximize' : 'maximize',
+        text: contentIsMaximize.value
+          ? $t('preferences.tabbar.contextMenu.restoreMaximize')
+          : $t('preferences.tabbar.contextMenu.maximize'),
+      },
+      {
+        disabled: disabledRefresh,
+        handler: () => refreshTab(),
+        icon: RotateCw,
+        key: 'reload',
+        text: $t('preferences.tabbar.contextMenu.reload'),
+      },
+      {
+        handler: async () => {
+          await openTabInNewWindow(tab);
+        },
+        icon: ExternalLink,
+        key: 'open-in-new-window',
+        separator: true,
+        text: $t('preferences.tabbar.contextMenu.openInNewWindow'),
+      },
+
+      {
+        disabled: disabledCloseLeft,
+        handler: async () => {
+          await closeLeftTabs(tab);
+        },
+        icon: ArrowLeftToLine,
+        key: 'close-left',
+        text: $t('preferences.tabbar.contextMenu.closeLeft'),
+      },
+      {
+        disabled: disabledCloseRight,
+        handler: async () => {
+          await closeRightTabs(tab);
+        },
+        icon: ArrowRightToLine,
+        key: 'close-right',
+        separator: true,
+        text: $t('preferences.tabbar.contextMenu.closeRight'),
+      },
+      {
+        disabled: disabledCloseOther,
+        handler: async () => {
+          await closeOtherTabs(tab);
+        },
+        icon: FoldHorizontal,
+        key: 'close-other',
+        text: $t('preferences.tabbar.contextMenu.closeOther'),
+      },
+      {
+        disabled: disabledCloseAll,
+        handler: closeAllTabs,
+        icon: ArrowRightLeft,
+        key: 'close-all',
+        text: $t('preferences.tabbar.contextMenu.closeAll'),
+      },
+    ];
+
+    return menus.filter((item) => tabbarStore.getMenuList.includes(item.key));
+  };
+
+  return {
+    createContextMenus,
+    currentActive,
+    currentTabs,
+    handleClick,
+    handleClose,
+  };
+}

package/src/layouts/basic/use-layout-scroll.ts

@@ -0,0 +1,85 @@
+import type { Router } from 'vue-router';
+
+import { nextTick, onScopeDispose } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { getLayoutScrollElement } from '@melt-js/libs-vben/shared/utils';
+
+type LayoutScrollRouter = Pick<Router, 'afterEach' | 'beforeEach'>;
+
+function getHistoryPosition() {
+  if (typeof window === 'undefined') {
+    return undefined;
+  }
+  const position = (window.history.state as null | { position?: unknown })
+    ?.position;
+  return typeof position === 'number' ? position : undefined;
+}
+
+function getHashTarget(scrollElement: HTMLElement, hash: string) {
+  if (!hash.startsWith('#')) {
+    return null;
+  }
+
+  const id = hash.slice(1);
+  try {
+    return scrollElement.querySelector<HTMLElement>(
+      `#${CSS.escape(decodeURIComponent(id))}`,
+    );
+  } catch {
+    return scrollElement.querySelector<HTMLElement>(`#${CSS.escape(id)}`);
+  }
+}
+
+export function useLayoutScroll(router: LayoutScrollRouter = useRouter()) {
+  const scrollPositions = new Map<number, number>();
+  let currentHistoryPosition = getHistoryPosition();
+  let isHistoryNavigation = false;
+
+  const removeBeforeGuard = router.beforeEach(() => {
+    const scrollElement = getLayoutScrollElement();
+    if (scrollElement && currentHistoryPosition !== undefined) {
+      scrollPositions.set(currentHistoryPosition, scrollElement.scrollTop);
+    }
+
+    const nextHistoryPosition = getHistoryPosition();
+    isHistoryNavigation =
+      currentHistoryPosition !== undefined &&
+      nextHistoryPosition !== undefined &&
+      currentHistoryPosition !== nextHistoryPosition;
+  });
+
+  const removeAfterHook = router.afterEach(async (to, _from, failure) => {
+    const nextHistoryPosition = getHistoryPosition();
+
+    if (!failure) {
+      await nextTick();
+      const scrollElement = getLayoutScrollElement();
+      if (scrollElement) {
+        const savedPosition =
+          isHistoryNavigation && nextHistoryPosition !== undefined
+            ? scrollPositions.get(nextHistoryPosition)
+            : undefined;
+
+        if (savedPosition === undefined) {
+          const hashTarget = getHashTarget(scrollElement, to.hash);
+          if (hashTarget) {
+            hashTarget.scrollIntoView({ behavior: 'smooth', block: 'start' });
+          } else {
+            scrollElement.scrollTo({ top: 0 });
+          }
+        } else {
+          scrollElement.scrollTo({ top: savedPosition });
+        }
+      }
+    }
+
+    currentHistoryPosition = nextHistoryPosition;
+    isHistoryNavigation = false;
+  });
+
+  onScopeDispose(() => {
+    removeBeforeGuard();
+    removeAfterHook();
+  });
+}

package/src/layouts/hooks/index.ts

@@ -0,0 +1,98 @@
+import type { VNode } from 'vue';
+import type {
+  RouteLocationNormalizedLoaded,
+  RouteLocationNormalizedLoadedGeneric,
+} from 'vue-router';
+
+import { computed } from 'vue';
+
+import { preferences, usePreferences } from '@melt-js/libs-vben/preferences';
+
+/**
+ * 转换组件，自动添加 name
+ * @param component
+ * @param route
+ */
+export function transformComponent(
+  component: VNode,
+  route: RouteLocationNormalizedLoadedGeneric,
+) {
+  // 组件视图未找到，如果有设置后备视图，则返回后备视图，如果没有，则抛出错误
+  if (!component) {
+    console.error(
+      'Component view not found，please check the route configuration',
+    );
+    return undefined;
+  }
+
+  const routeName = route.name as string;
+  // 如果组件没有 name，则直接返回
+  if (!routeName) {
+    return component;
+  }
+  const componentName = (component?.type as any)?.name;
+
+  // 已经设置过 name，则直接返回
+  if (componentName) {
+    return component;
+  }
+
+  // componentName 与 routeName 一致，则直接返回
+  if (componentName === routeName) {
+    return component;
+  }
+
+  // 设置 name
+  component.type ||= {};
+  (component.type as any).name = routeName;
+
+  return component;
+}
+
+/**
+ * Layout相关hook
+ */
+export function useLayoutHook() {
+  const { keepAlive } = usePreferences();
+  /**
+   * 是否使用动画
+   */
+  const getEnabledTransition = computed(() => {
+    const { transition } = preferences;
+    const transitionName = transition.name;
+    return transitionName && transition.enable;
+  });
+
+  /**
+   * 获取路由过渡动画
+   * @param _route
+   */
+  function getTransitionName(_route: RouteLocationNormalizedLoaded) {
+    // 如果偏好设置未设置，则不使用动画
+    const { tabbar, transition } = preferences;
+    const transitionName = transition.name;
+    if (!transitionName || !transition.enable) {
+      return undefined;
+    }
+
+    // 标签页未启用或者未开启缓存，则使用全局配置动画
+    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;
+    return transitionName;
+  }
+
+  return {
+    getEnabledTransition,
+    getTransitionName,
+  };
+}

package/src/layouts/iframe/iframe-router-view.vue

@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import type { RouteLocationNormalized } from 'vue-router';
+
+import { computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { preferences } from '@melt-js/libs-vben/preferences';
+import { useTabbarStore } from '@melt-js/libs-vben/stores';
+
+import { VbenSpinner } from '@melt-js/comps-vben/shadcn-ui';
+
+defineOptions({ name: 'IFrameRouterView' });
+
+const spinningList = ref<boolean[]>([]);
+const tabbarStore = useTabbarStore();
+const route = useRoute();
+
+const enableTabbar = computed(() => preferences.tabbar.enable);
+
+const iframeRoutes = computed(() => {
+  if (!enableTabbar.value) {
+    return route.meta.iframeSrc ? [route] : [];
+  }
+  return tabbarStore.getTabs.filter((tab) => !!tab.meta?.iframeSrc);
+});
+
+const tabNames = computed(
+  () => new Set(iframeRoutes.value.map((item) => item.name as string)),
+);
+
+const showIframe = computed(() => iframeRoutes.value.length > 0);
+
+function routeShow(tabItem: RouteLocationNormalized) {
+  return tabItem.name === route.name;
+}
+
+function canRender(tabItem: RouteLocationNormalized) {
+  const { meta, name } = tabItem;
+
+  if (!name || !tabbarStore.renderRouteView) {
+    return false;
+  }
+
+  if (!enableTabbar.value) {
+    return routeShow(tabItem);
+  }
+
+  // 跟随 keepAlive 状态,与其他tab页保持一致
+  if (
+    !meta?.keepAlive &&
+    tabNames.value.has(name as string) &&
+    name !== route.name
+  ) {
+    return false;
+  }
+  return tabbarStore.getTabs.some((tab) => tab.name === name);
+}
+
+function hideLoading(index: number) {
+  spinningList.value[index] = false;
+}
+
+function showSpinning(index: number) {
+  const curSpinning = spinningList.value[index];
+  // 首次加载时显示loading
+  return curSpinning === undefined ? true : curSpinning;
+}
+</script>
+<template>
+  <template v-if="showIframe">
+    <template v-for="(item, index) in iframeRoutes" :key="item.fullPath">
+      <div
+        v-if="canRender(item)"
+        v-show="routeShow(item)"
+        class="relative size-full"
+      >
+        <VbenSpinner :spinning="showSpinning(index)" />
+        <iframe
+          :src="item.meta.iframeSrc as string"
+          class="size-full"
+          @load="hideLoading(index)"
+        ></iframe>
+      </div>
+    </template>
+  </template>
+</template>

package/src/layouts/iframe/iframe-view.vue

@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>

package/src/layouts/iframe/index.ts

@@ -0,0 +1,2 @@
+export { default as IFrameRouterView } from './iframe-router-view.vue';
+export { default as IFrameView } from './iframe-view.vue';

package/src/layouts/index.ts

@@ -0,0 +1,4 @@
+export * from './authentication';
+export * from './basic';
+export * from './iframe';
+export * from './widgets';

package/src/layouts/route-cached/cached-tab-keys.ts

@@ -0,0 +1,13 @@
+import type { TabDefinition } from '@melt-js/libs-vben/typings';
+
+import { getTabKey } from '@melt-js/libs-vben/stores';
+
+/**
+ * 需要保留缓存的路由 key。已存标签页以自身 key 为准，
+ * 避免从 meta 重新推导时与 addCachedRoute 用的 key 不一致而误删缓存。
+ */
+export function getCachedTabKeys(tabs: TabDefinition[]): string[] {
+  return tabs
+    .filter((item) => item.meta.domCached)
+    .map((item) => item.key ?? getTabKey(item));
+}

package/src/layouts/route-cached/index.ts

@@ -0,0 +1,2 @@
+export { default as RouteCachedPage } from './route-cached-page.vue';
+export { default as RouteCachedView } from './route-cached-view.vue';

package/src/layouts/route-cached/route-cached-page.vue

@@ -0,0 +1,36 @@
+<!-- 本组件用于获取缓存的route并保存到pinia -->
+<script setup lang="ts">
+import type { VNode } from 'vue';
+import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router';
+
+import { watch } from 'vue';
+
+import { useTabbarStore } from '@melt-js/libs-vben/stores';
+
+interface Props {
+  component?: VNode;
+  route: RouteLocationNormalizedLoadedGeneric;
+}
+
+/**
+ * 这是页面缓存组件，不做任何的的实际渲染
+ */
+defineOptions({
+  render() {
+    return null;
+  },
+});
+const props = defineProps<Props>();
+
+const { addCachedRoute } = useTabbarStore();
+
+watch(
+  () => props.route,
+  () => {
+    if (props.component && props.route.meta.domCached) {
+      addCachedRoute(props.component, props.route);
+    }
+  },
+  { immediate: true },
+);
+</script>

package/src/layouts/route-cached/route-cached-view.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed, unref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { preferences } from '@melt-js/libs-vben/preferences';
+import { getTabKey, storeToRefs, useTabbarStore } from '@melt-js/libs-vben/stores';
+
+import { transformComponent, useLayoutHook } from '../hooks';
+import { getCachedTabKeys } from './cached-tab-keys';
+
+const route = useRoute();
+
+const tabbarStore = useTabbarStore();
+
+const { getTabs, getCachedRoutes, getExcludeCachedTabs } =
+  storeToRefs(tabbarStore);
+const { removeCachedRoute } = tabbarStore;
+
+const { getEnabledTransition, getTransitionName } = useLayoutHook();
+
+/**
+ * 是否启用tab
+ */
+const enableTabbar = computed(() => preferences.tabbar.enable);
+
+const computedCachedRouteKeys = computed(() => {
+  if (!unref(enableTabbar)) {
+    return [];
+  }
+  return getCachedTabKeys(unref(getTabs));
+});
+
+/**
+ * 监听缓存路由变化，删除不存在的缓存路由
+ */
+watch(computedCachedRouteKeys, (keys) => {
+  unref(getCachedRoutes).forEach((item) => {
+    if (!keys.includes(item.key)) {
+      removeCachedRoute(item.key);
+    }
+  });
+});
+
+/**
+ * 所有缓存的route
+ */
+const computedCachedRoutes = computed(() => {
+  if (!unref(enableTabbar)) {
+    return [];
+  }
+  // 刷新路由可刷新缓存
+  const excludeCachedTabKeys = unref(getExcludeCachedTabs);
+  return [...unref(getCachedRoutes).values()].filter((item) => {
+    const componentType: any = item.component.type || {};
+    let componentName = componentType.name;
+    if (!componentName) {
+      componentName = item.route.name;
+    }
+    return !excludeCachedTabKeys.includes(componentName);
+  });
+});
+
+/**
+ * 是否显示
+ */
+const computedShowView = computed(() => unref(computedCachedRoutes).length > 0);
+
+const computedCurrentRouteKey = computed(() => {
+  return getTabKey(route);
+});
+</script>
+
+<template>
+  <template v-if="computedShowView">
+    <template v-for="item in computedCachedRoutes" :key="item.key">
+      <Transition
+        v-if="getEnabledTransition"
+        appear
+        mode="out-in"
+        :name="getTransitionName(item.route)"
+      >
+        <component
+          v-show="item.key === computedCurrentRouteKey"
+          :is="transformComponent(item.component, item.route)"
+        />
+      </Transition>
+      <template v-else>
+        <component
+          v-show="item.key === computedCurrentRouteKey"
+          :is="transformComponent(item.component, item.route)"
+        />
+      </template>
+    </template>
+  </template>
+</template>
+
+<style scoped></style>

package/src/layouts/widgets/breadcrumb-routes.ts

@@ -0,0 +1,41 @@
+import type { RouteLocationNormalizedLoaded } from 'vue-router';
+
+type MatchedRoutes = RouteLocationNormalizedLoaded['matched'];
+
+interface BreadcrumbRoute {
+  matched: MatchedRoutes;
+  meta: RouteLocationNormalizedLoaded['meta'];
+}
+
+type BreadcrumbRouteResolver = (path: string) => { matched: MatchedRoutes };
+
+/**
+ * 解析用于渲染当前面包屑的路由匹配记录。
+ */
+export function resolveBreadcrumbMatches(
+  route: BreadcrumbRoute,
+  resolveRoute: BreadcrumbRouteResolver,
+): MatchedRoutes {
+  const { activePath, breadcrumbUseActivePath } = route.meta;
+
+  if (!breadcrumbUseActivePath || !activePath) {
+    return route.matched;
+  }
+
+  const activeMatches = resolveRoute(activePath).matched;
+  if (activeMatches.length === 0) {
+    return route.matched;
+  }
+
+  const seen = new Set(activeMatches.map((match) => match.name ?? match));
+  const currentMatches = route.matched.filter((match) => {
+    const key = match.name ?? match;
+    if (seen.has(key)) {
+      return false;
+    }
+    seen.add(key);
+    return true;
+  });
+
+  return [...activeMatches, ...currentMatches];
+}