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

package/src/layouts/basic/layout.vue

@@ -0,0 +1,478 @@
+<script lang="ts" setup>
+import type { SetupContext } from 'vue';
+
+import type { MenuRecordRaw } from '@melt-js/libs-vben/types';
+
+import { computed, useSlots, watch } from 'vue';
+
+import { useRefresh } from '@melt-js/libs-vben/hooks';
+import { $t, i18n } from '@melt-js/libs-vben/locales';
+import {
+  preferences,
+  updatePreferences,
+  usePreferences,
+} from '@melt-js/libs-vben/preferences';
+import { useAccessStore, useTabbarStore, useTimezoneStore } from '@melt-js/libs-vben/stores';
+import { cloneDeep, mapTree } from '@melt-js/libs-vben/utils';
+
+import { VbenAdminLayout } from '@melt-js/comps-vben/layout-ui';
+import { VbenBackTop, VbenLogo } from '@melt-js/comps-vben/shadcn-ui';
+import { ELEMENT_ID_LAYOUT_SCROLL } from '@melt-js/libs-vben/shared/constants';
+
+import { Breadcrumb, CheckUpdates, Preferences } from '../widgets';
+import { LayoutContent, LayoutContentSpinner } from './content';
+import { Copyright } from './copyright';
+import { LayoutFooter } from './footer';
+import { LayoutHeader } from './header';
+import {
+  LayoutExtraMenu,
+  LayoutMenu,
+  LayoutMixedMenu,
+  useExtraMenu,
+  useMixedMenu,
+} from './menu';
+import { LayoutTabbar } from './tabbar';
+import { useLayoutScroll } from './use-layout-scroll';
+
+defineOptions({ name: 'BasicLayout' });
+
+const props = withDefaults(defineProps<Props>(), {
+  logoSrc: '',
+  logoSrcDark: '',
+  logoText: '',
+  avatar: '',
+  text: '',
+});
+
+const emit = defineEmits<{
+  clearPreferencesAndLogout: [];
+  clickLogo: [];
+  logout: [];
+}>();
+
+interface Props {
+  /** 自定义 Logo 图片地址，不传则使用偏好设置默认值 */
+  logoSrc?: string;
+  /** 自定义暗色主题 Logo 图片地址 */
+  logoSrcDark?: string;
+  /** 自定义 Logo 文本，不传则使用偏好设置默认值 */
+  logoText?: string;
+  /** 用户头像图片地址 */
+  avatar?: string;
+  /** 用户文本（如用户名） */
+  text?: string;
+}
+
+/** 最终使用的 Logo 图片地址（自定义优先，否则使用默认） */
+const finalLogoSrc = computed(() => props.logoSrc || preferences.logo.source);
+/** 最终使用的暗色 Logo 图片地址 */
+const finalLogoSrcDark = computed(
+  () => props.logoSrcDark || preferences.logo.sourceDark,
+);
+/** 最终使用的 Logo 文本（自定义优先，否则使用默认应用名称） */
+const finalLogoText = computed(() => props.logoText || preferences.app.name);
+
+const {
+  isDark,
+  isHeaderNav,
+  isMixedNav,
+  isMobile,
+  isSideMode,
+  isSideMixedNav,
+  isHeaderMixedNav,
+  isHeaderSidebarNav,
+  layout,
+  preferencesButtonPosition,
+  sidebarCollapsed,
+  theme,
+} = usePreferences();
+const accessStore = useAccessStore();
+const timezoneStore = useTimezoneStore();
+const { refresh } = useRefresh();
+const layoutScrollTarget = `#${ELEMENT_ID_LAYOUT_SCROLL}`;
+
+useLayoutScroll();
+
+const sidebarTheme = computed(() => {
+  const dark = isDark.value || preferences.theme.semiDarkSidebar;
+  return dark ? 'dark' : 'light';
+});
+
+const sidebarThemeSub = computed(() => {
+  const dark = isDark.value || preferences.theme.semiDarkSidebarSub;
+  return dark ? 'dark' : 'light';
+});
+
+const headerTheme = computed(() => {
+  const dark = isDark.value || preferences.theme.semiDarkHeader;
+  return dark ? 'dark' : 'light';
+});
+
+const logoClass = computed(() => {
+  const { collapsedShowTitle } = preferences.sidebar;
+  const classes: string[] = [];
+
+  if (collapsedShowTitle && sidebarCollapsed.value && !isMixedNav.value) {
+    classes.push('mx-auto');
+  }
+
+  if (isSideMixedNav.value) {
+    classes.push('flex-center');
+  }
+
+  return classes.join(' ');
+});
+
+const isMenuRounded = computed(() => {
+  return preferences.navigation.styleType === 'rounded';
+});
+
+const logoCollapsed = computed(() => {
+  if (isMobile.value && sidebarCollapsed.value) {
+    return true;
+  }
+  if (isHeaderNav.value || isMixedNav.value || isHeaderSidebarNav.value) {
+    return false;
+  }
+  return (
+    sidebarCollapsed.value || isSideMixedNav.value || isHeaderMixedNav.value
+  );
+});
+
+const showHeaderNav = computed(() => {
+  return (
+    !isMobile.value &&
+    (isHeaderNav.value || isMixedNav.value || isHeaderMixedNav.value)
+  );
+});
+
+const logoTheme = computed(() => {
+  const showLogoInHeader =
+    !isSideMode.value ||
+    isHeaderSidebarNav.value ||
+    isMixedNav.value ||
+    isMobile.value;
+  return showLogoInHeader ? headerTheme.value : sidebarTheme.value;
+});
+
+/**
+ * layout-sidebar扩展区域插槽extra-title的高度
+ */
+const sidebarExtraTitleHeight = computed<number | undefined>(() => {
+  const showSideExtraTitle =
+    preferences.logo.enable && preferences.logo.showText;
+  return showSideExtraTitle ? undefined : 0;
+});
+
+const {
+  handleMenuSelect,
+  handleMenuOpen,
+  headerActive,
+  headerMenus,
+  sidebarActive,
+  sidebarMenus,
+  mixHeaderMenus,
+  sidebarVisible,
+} = useMixedMenu();
+
+// 侧边多列菜单
+const {
+  extraActiveMenu,
+  extraMenus,
+  handleDefaultSelect,
+  handleMenuMouseEnter,
+  handleMixedMenuSelect,
+  handleSideMouseLeave,
+  sidebarExtraVisible,
+} = useExtraMenu(mixHeaderMenus);
+
+/**
+ * 包装菜单，翻译菜单名称
+ * @param menus 原始菜单数据
+ * @param deep 是否深度包装。对于双列布局，只需要包装第一层，因为更深层的数据会在扩展菜单中重新包装
+ */
+function wrapperMenus(menus: MenuRecordRaw[], deep: boolean = true) {
+  return deep
+    ? mapTree(menus, (item) => {
+        return { ...cloneDeep(item), name: $t(item.name) };
+      })
+    : menus.map((item) => {
+        return { ...cloneDeep(item), name: $t(item.name) };
+      });
+}
+
+function toggleSidebar() {
+  updatePreferences({
+    sidebar: {
+      hidden: !preferences.sidebar.hidden,
+    },
+  });
+}
+
+function clearPreferencesAndLogout() {
+  emit('clearPreferencesAndLogout');
+}
+
+function handleLogout() {
+  emit('logout');
+}
+
+function clickLogo() {
+  emit('clickLogo');
+}
+
+watch(
+  () => preferences.app.layout,
+  async (val) => {
+    if (val === 'sidebar-mixed-nav' && preferences.sidebar.hidden) {
+      updatePreferences({
+        sidebar: {
+          hidden: false,
+        },
+      });
+    }
+  },
+);
+
+const tabbarStore = useTabbarStore();
+
+function refreshAll() {
+  tabbarStore.cachedTabs.clear();
+  refresh();
+}
+
+// 语言更新后，刷新页面
+// i18n.global.locale会在preference.app.locale变更之后才会更新，因此watchpreference.app.locale是不合适的，刷新页面时可能语言配置尚未完全加载完成
+watch(i18n.global.locale, refreshAll, { flush: 'post' });
+
+// 时区更新后，刷新页面
+watch(() => timezoneStore.timezone, refreshAll, { flush: 'post' });
+
+const slots: SetupContext['slots'] = useSlots();
+const headerSlots = computed(() => {
+  return Object.keys(slots).filter((key) => key.startsWith('header-'));
+});
+</script>
+
+<template>
+  <VbenAdminLayout
+    v-model:sidebar-extra-visible="sidebarExtraVisible"
+    :content-compact="preferences.app.contentCompact"
+    :content-compact-width="preferences.app.contentCompactWidth"
+    :content-padding="preferences.app.contentPadding"
+    :content-padding-bottom="preferences.app.contentPaddingBottom"
+    :content-padding-left="preferences.app.contentPaddingLeft"
+    :content-padding-right="preferences.app.contentPaddingRight"
+    :content-padding-top="preferences.app.contentPaddingTop"
+    :footer-enable="preferences.footer.enable"
+    :footer-fixed="preferences.footer.fixed"
+    :footer-height="preferences.footer.height"
+    :header-height="preferences.header.height"
+    :header-hidden="preferences.header.hidden"
+    :header-mode="preferences.header.mode"
+    :header-theme="headerTheme"
+    :header-toggle-sidebar-button="preferences.widget.sidebarToggle"
+    :header-visible="preferences.header.enable"
+    :is-mobile="preferences.app.isMobile"
+    :layout="layout"
+    :sidebar-draggable="preferences.sidebar.draggable"
+    :sidebar-collapse="preferences.sidebar.collapsed"
+    :sidebar-collapse-show-title="preferences.sidebar.collapsedShowTitle"
+    :sidebar-enable="sidebarVisible"
+    :sidebar-collapsed-button="preferences.sidebar.collapsedButton"
+    :sidebar-fixed-button="preferences.sidebar.fixedButton"
+    :sidebar-expand-on-hover="preferences.sidebar.expandOnHover"
+    :sidebar-extra-collapse="preferences.sidebar.extraCollapse"
+    :sidebar-extra-collapsed-width="preferences.sidebar.extraCollapsedWidth"
+    :sidebar-extra-title-height="sidebarExtraTitleHeight"
+    :sidebar-hidden="preferences.sidebar.hidden"
+    :sidebar-mixed-width="preferences.sidebar.mixedWidth"
+    :sidebar-theme="sidebarTheme"
+    :sidebar-theme-sub="sidebarThemeSub"
+    :sidebar-width="preferences.sidebar.width"
+    :side-collapse-width="preferences.sidebar.collapseWidth"
+    :sidebar-logo-visible="preferences.logo.enable"
+    :tabbar-enable="preferences.tabbar.enable"
+    :tabbar-height="preferences.tabbar.height"
+    :z-index="preferences.app.zIndex"
+    @side-mouse-leave="handleSideMouseLeave"
+    @toggle-sidebar="toggleSidebar"
+    @update:sidebar-collapse="
+      (value: boolean) => updatePreferences({ sidebar: { collapsed: value } })
+    "
+    @update:sidebar-enable="
+      (value: boolean) => updatePreferences({ sidebar: { enable: value } })
+    "
+    @update:sidebar-expand-on-hover="
+      (value: boolean) =>
+        updatePreferences({ sidebar: { expandOnHover: value } })
+    "
+    @update:sidebar-extra-collapse="
+      (value: boolean) =>
+        updatePreferences({ sidebar: { extraCollapse: value } })
+    "
+    @update:sidebar-width="
+      (value: number) => updatePreferences({ sidebar: { width: value } })
+    "
+  >
+    <!-- logo -->
+    <template #logo>
+      <VbenLogo
+        v-if="preferences.logo.enable"
+        :fit="preferences.logo.fit"
+        :class="logoClass"
+        :collapsed="logoCollapsed"
+        :src="finalLogoSrc"
+        :src-dark="finalLogoSrcDark"
+        :text="finalLogoText"
+        :show-text="preferences.logo.showText"
+        :logo-mode="preferences.logo.logoMode"
+        :full-logo-height="preferences.logo.fullLogoHeight"
+        :theme="logoTheme"
+        @click="clickLogo"
+      >
+        <template v-if="$slots['logo-text']" #text>
+          <slot name="logo-text"></slot>
+        </template>
+      </VbenLogo>
+    </template>
+    <!-- 头部区域 -->
+    <template #header>
+      <LayoutHeader
+        :avatar="avatar"
+        :theme="theme"
+        :text="text"
+        @clear-preferences-and-logout="clearPreferencesAndLogout"
+        @logout="handleLogout"
+      >
+        <template
+          v-if="!showHeaderNav && preferences.breadcrumb.enable"
+          #breadcrumb
+        >
+          <Breadcrumb
+            :hide-when-only-one="preferences.breadcrumb.hideOnlyOne"
+            :show-home="preferences.breadcrumb.showHome"
+            :show-icon="preferences.breadcrumb.showIcon"
+            :type="preferences.breadcrumb.styleType"
+          />
+        </template>
+        <template v-if="showHeaderNav" #menu>
+          <LayoutMenu
+            :default-active="headerActive"
+            :menus="wrapperMenus(headerMenus)"
+            :rounded="isMenuRounded"
+            :theme="headerTheme"
+            class="w-full"
+            mode="horizontal"
+            @select="handleMenuSelect"
+          />
+        </template>
+        <template #user-dropdown>
+          <slot name="user-dropdown"></slot>
+        </template>
+        <template #notification>
+          <slot name="notification"></slot>
+        </template>
+        <template v-for="item in headerSlots" #[item]>
+          <slot :name="item"></slot>
+        </template>
+      </LayoutHeader>
+    </template>
+    <!-- 侧边菜单区域 -->
+    <template #menu>
+      <LayoutMenu
+        :accordion="preferences.navigation.accordion"
+        :collapse="preferences.sidebar.collapsed"
+        :collapse-show-title="preferences.sidebar.collapsedShowTitle"
+        :default-active="sidebarActive"
+        :menus="wrapperMenus(sidebarMenus)"
+        :rounded="isMenuRounded"
+        :theme="sidebarTheme"
+        mode="vertical"
+        @open="handleMenuOpen"
+        @select="handleMenuSelect"
+      />
+    </template>
+    <template #mixed-menu>
+      <LayoutMixedMenu
+        :active-path="extraActiveMenu"
+        :menus="wrapperMenus(mixHeaderMenus, false)"
+        :rounded="isMenuRounded"
+        :theme="sidebarTheme"
+        @default-select="handleDefaultSelect"
+        @enter="handleMenuMouseEnter"
+        @select="handleMixedMenuSelect"
+      />
+    </template>
+    <!-- 侧边额外区域 -->
+    <template #side-extra>
+      <LayoutExtraMenu
+        :accordion="preferences.navigation.accordion"
+        :collapse="preferences.sidebar.extraCollapse"
+        :menus="wrapperMenus(extraMenus)"
+        :rounded="isMenuRounded"
+        :theme="sidebarThemeSub"
+      />
+    </template>
+    <template #side-extra-title>
+      <VbenLogo
+        v-if="preferences.logo.enable"
+        :fit="preferences.logo.fit"
+        :text="finalLogoText"
+        :show-text="preferences.logo.showText"
+        :theme="sidebarThemeSub"
+      >
+        <template v-if="$slots['logo-text']" #text>
+          <slot name="logo-text"></slot>
+        </template>
+      </VbenLogo>
+    </template>
+
+    <template #tabbar>
+      <LayoutTabbar
+        v-if="preferences.tabbar.enable"
+        :show-icon="preferences.tabbar.showIcon"
+        :theme="theme"
+      />
+    </template>
+
+    <!-- 主体内容 -->
+    <template #content>
+      <LayoutContent />
+    </template>
+
+    <template v-if="preferences.transition.loading" #content-overlay>
+      <LayoutContentSpinner />
+    </template>
+
+    <!-- 页脚 -->
+    <template v-if="preferences.footer.enable" #footer>
+      <LayoutFooter>
+        <Copyright
+          v-if="preferences.copyright.enable"
+          v-bind="preferences.copyright"
+        />
+      </LayoutFooter>
+    </template>
+
+    <template #extra>
+      <slot name="extra"></slot>
+      <CheckUpdates
+        v-if="preferences.app.enableCheckUpdates"
+        :check-updates-interval="preferences.app.checkUpdatesInterval"
+      />
+
+      <Transition v-if="preferences.widget.lockScreen" name="slide-up">
+        <slot v-if="accessStore.isLockScreen" name="lock-screen"></slot>
+      </Transition>
+
+      <template v-if="preferencesButtonPosition.fixed">
+        <Preferences
+          class="fixed top-1/2 right-0 z-100 -translate-y-1/2 transform"
+          @clear-preferences-and-logout="clearPreferencesAndLogout"
+        />
+      </template>
+      <VbenBackTop :target="layoutScrollTarget" />
+    </template>
+  </VbenAdminLayout>
+</template>

package/src/layouts/basic/menu/extra-menu.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import type { MenuRecordRaw } from '@melt-js/libs-vben/types';
+
+import type { MenuProps } from '@melt-js/comps-vben/menu-ui';
+
+import { useRoute } from 'vue-router';
+
+import { Menu } from '@melt-js/comps-vben/menu-ui';
+
+import { useNavigation } from './use-navigation';
+
+interface Props extends MenuProps {
+  collapse?: boolean;
+  menus?: MenuRecordRaw[];
+}
+
+withDefaults(defineProps<Props>(), {
+  accordion: true,
+  menus: () => [],
+});
+
+const route = useRoute();
+const { navigation } = useNavigation();
+
+async function handleSelect(key: string) {
+  await navigation(key);
+}
+</script>
+
+<template>
+  <Menu
+    :accordion="accordion"
+    :collapse="collapse"
+    :default-active="route.meta?.activePath || route.path"
+    :menus="menus"
+    :rounded="rounded"
+    :theme="theme"
+    mode="vertical"
+    @select="handleSelect"
+  />
+</template>

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

@@ -0,0 +1,5 @@
+export { default as LayoutExtraMenu } from './extra-menu.vue';
+export { default as LayoutMenu } from './menu.vue';
+export { default as LayoutMixedMenu } from './mixed-menu.vue';
+export * from './use-extra-menu';
+export * from './use-mixed-menu';

package/src/layouts/basic/menu/menu.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import type { MenuRecordRaw } from '@melt-js/libs-vben/types';
+
+import type { MenuProps } from '@melt-js/comps-vben/menu-ui';
+
+import { Menu } from '@melt-js/comps-vben/menu-ui';
+
+interface Props extends MenuProps {
+  menus?: MenuRecordRaw[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  accordion: true,
+  menus: () => [],
+});
+
+const emit = defineEmits<{
+  open: [string, string[]];
+  select: [string, string?];
+}>();
+
+function handleMenuSelect(key: string) {
+  emit('select', key, props.mode);
+}
+
+function handleMenuOpen(key: string, path: string[]) {
+  emit('open', key, path);
+}
+</script>
+
+<template>
+  <Menu
+    :accordion="accordion"
+    :collapse="collapse"
+    :collapse-show-title="collapseShowTitle"
+    :default-active="defaultActive"
+    :menus="menus"
+    :mode="mode"
+    :rounded="rounded"
+    scroll-to-active
+    :theme="theme"
+    @open="handleMenuOpen"
+    @select="handleMenuSelect"
+  />
+</template>

package/src/layouts/basic/menu/mixed-menu.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import type { MenuRecordRaw } from '@melt-js/libs-vben/types';
+
+import type { NormalMenuProps } from '@melt-js/comps-vben/menu-ui';
+
+import { onBeforeMount } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { findMenuByPath } from '@melt-js/libs-vben/utils';
+
+import { NormalMenu } from '@melt-js/comps-vben/menu-ui';
+
+interface Props extends NormalMenuProps {}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  defaultSelect: [MenuRecordRaw, MenuRecordRaw?];
+  enter: [MenuRecordRaw];
+  select: [MenuRecordRaw];
+}>();
+
+const route = useRoute();
+
+onBeforeMount(() => {
+  const menu = findMenuByPath(props.menus || [], route.path);
+  if (menu) {
+    const rootMenu = (props.menus || []).find(
+      (item) => item.path === menu.parents?.[0],
+    );
+    emit('defaultSelect', menu, rootMenu);
+  }
+});
+</script>
+
+<template>
+  <NormalMenu
+    :active-path="activePath"
+    :collapse="collapse"
+    :menus="menus"
+    :rounded="rounded"
+    :theme="theme"
+    @enter="(menu) => emit('enter', menu)"
+    @select="(menu) => emit('select', menu)"
+  />
+</template>