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

package/src/layout-ui/components/layout-footer.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue';
+
+import { computed } from 'vue';
+
+interface Props {
+  /**
+   * 是否固定在底部
+   */
+  fixed?: boolean;
+  height: number;
+  /**
+   * 是否显示
+   * @default true
+   */
+  show?: boolean;
+  width: string;
+  zIndex: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  show: true,
+});
+
+const style = computed((): CSSProperties => {
+  const { fixed, height, show, width, zIndex } = props;
+  return {
+    height: `${height}px`,
+    marginBottom: show ? '0' : `-${height}px`,
+    position: fixed ? 'fixed' : 'static',
+    transform: show ? 'translateY(0)' : 'translateY(100%)',
+    width,
+    zIndex,
+  };
+});
+</script>
+
+<template>
+  <footer
+    :style="style"
+    data-layout-region="footer"
+    class="bottom-0 w-full shrink-0 bg-background-deep transition-all duration-200"
+  >
+    <slot></slot>
+  </footer>
+</template>

package/src/layout-ui/components/layout-header.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue';
+
+import { computed, useSlots } from 'vue';
+
+interface Props {
+  /**
+   * 横屏
+   */
+  fullWidth: boolean;
+  /**
+   * 高度
+   */
+  height: number;
+  /**
+   * 是否移动端
+   */
+  isMobile: boolean;
+  /**
+   * logo是否显示
+   */
+  logoVisible?: boolean;
+  /**
+   * 是否显示
+   */
+  show: boolean;
+  /**
+   * 侧边菜单宽度
+   */
+  sidebarWidth: number;
+  /**
+   * 主题
+   */
+  theme: string | undefined;
+  /**
+   * 宽度
+   */
+  width: string;
+  /**
+   * zIndex
+   */
+  zIndex: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  logoVisible: true,
+});
+
+const slots = useSlots();
+
+const style = computed((): CSSProperties => {
+  const { fullWidth, height, show } = props;
+  const right = !show || !fullWidth ? undefined : 0;
+
+  return {
+    height: `${height}px`,
+    marginTop: show ? 0 : `-${height}px`,
+    right,
+  };
+});
+
+const logoStyle = computed((): CSSProperties => {
+  if (!props.logoVisible) {
+    return {
+      minWidth: '12px',
+    };
+  }
+
+  return {
+    minWidth: `${props.isMobile ? 40 : props.sidebarWidth}px`,
+  };
+});
+</script>
+
+<template>
+  <header
+    :class="theme"
+    :style="style"
+    class="top-0 flex w-full flex-[0_0_auto] items-center border-b border-border bg-header pl-2 transition-[margin-top] duration-200"
+  >
+    <div v-if="slots.logo || (!logoVisible && !isMobile)" :style="logoStyle">
+      <slot name="logo"></slot>
+    </div>
+
+    <slot name="toggle-button"> </slot>
+
+    <slot></slot>
+  </header>
+</template>

package/src/layout-ui/components/layout-sidebar.vue

@@ -0,0 +1,484 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue';
+
+import { computed, onUnmounted, shallowRef, useSlots } from 'vue';
+
+import { useScrollLock } from '@melt-js/libs-vben/composables';
+import { VbenScrollbar } from '@melt-js/comps-vben/shadcn-ui';
+
+import { useSidebarDrag } from '../hooks/use-sidebar-drag';
+import { SidebarCollapseButton, SidebarFixedButton } from './widgets';
+
+interface Props {
+  /**
+   * 折叠区域高度
+   * @default 42
+   */
+  collapseHeight?: number;
+  /**
+   * 折叠宽度
+   * @default 48
+   */
+  collapseWidth?: number;
+  /**
+   * 隐藏的dom是否可见
+   * @default true
+   */
+  domVisible?: boolean;
+  /**
+   * 标准侧栏展开宽度
+   */
+  expandedWidth?: number;
+  /**
+   * 扩展区域extra-title的高度
+   */
+  extraTitleHeight?: number;
+  /**
+   * 扩展区域宽度
+   */
+  extraWidth: number;
+  /**
+   * 固定扩展区域
+   * @default false
+   */
+  fixedExtra?: boolean;
+  /**
+   * 头部高度
+   */
+  headerHeight: number;
+  /**
+   * 是否移动端抽屉模式
+   * @default false
+   */
+  isMobile?: boolean;
+  /**
+   * 是否侧边混合模式
+   * @default false
+   */
+  isSidebarMixed?: boolean;
+  /**
+   * 顶部margin
+   * @default 60
+   */
+  marginTop?: number;
+  /**
+   * 混合菜单宽度
+   * @default 80
+   */
+  mixedWidth?: number;
+  /**
+   * 顶部padding
+   * @default 60
+   */
+  paddingTop?: number;
+  /**
+   * 是否显示
+   * @default true
+   */
+  show?: boolean;
+  /**
+   * 显示折叠按钮
+   * @default true
+   */
+  showCollapseButton?: boolean;
+  /**
+   * 显示固定按钮
+   * @default true
+   */
+  showFixedButton?: boolean;
+  /**
+   * 主题
+   */
+  theme: string;
+  /**
+   * 子主题
+   */
+  themeSub: string;
+  /**
+   * 宽度
+   */
+  width: number;
+  /**
+   * zIndex
+   * @default 0
+   */
+  zIndex?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  collapseHeight: 42,
+  collapseWidth: 48,
+  domVisible: true,
+  expandedWidth: 180,
+  extraTitleHeight: undefined,
+  fixedExtra: false,
+  isMobile: false,
+  isSidebarMixed: false,
+  marginTop: 0,
+  mixedWidth: 70,
+  paddingTop: 0,
+  show: true,
+  showCollapseButton: true,
+  showFixedButton: true,
+  zIndex: 0,
+});
+
+const emit = defineEmits<{ leave: []; 'update:width': [value: number] }>();
+const draggable = defineModel<boolean>('draggable');
+const collapse = defineModel<boolean>('collapse');
+const extraCollapse = defineModel<boolean>('extraCollapse');
+const expandOnHovering = defineModel<boolean>('expandOnHovering');
+const expandOnHover = defineModel<boolean>('expandOnHover');
+const extraVisible = defineModel<boolean>('extraVisible');
+
+const isLocked = useScrollLock({ immediate: false });
+const slots = useSlots();
+
+const asideRef = shallowRef<HTMLElement | null>(null);
+const dragBarRef = shallowRef<HTMLElement | null>(null);
+
+const hiddenSideStyle = computed((): CSSProperties => {
+  const widthValue = props.show ? getMenuWidthValue(true) : '0px';
+  return {
+    flexBasis: widthValue,
+    flexGrow: 0,
+    flexShrink: 0,
+    overflow: 'hidden',
+  };
+});
+
+const sidebarVisualWidth = computed(() => {
+  const currentWidth = Number.parseFloat(getMenuWidthValue(false));
+  return !props.isMobile && !props.isSidebarMixed
+    ? Math.max(currentWidth, props.expandedWidth)
+    : currentWidth;
+});
+
+const dragBarStyle = computed((): CSSProperties => {
+  const currentWidth = Number.parseFloat(getMenuWidthValue(false));
+  return {
+    right: `${Math.max(0, sidebarVisualWidth.value - currentWidth)}px`,
+  };
+});
+
+/**
+ * 二级面板是否展开。可见性、占位宽度必须由同一判定驱动：
+ * 二者不一致时面板会浮在正文上（vben-layout 的 header 偏移只看 extraVisible）。
+ * fixedExtra 与 expandOnHover 在 vben-layout 里绑同一个偏好，但作为组件 API 不能假设调用方总是成对传。
+ */
+const extraPanelExpanded = computed(
+  () =>
+    props.isSidebarMixed &&
+    props.show &&
+    !collapse.value &&
+    !!extraVisible.value &&
+    (props.fixedExtra || expandOnHover.value || expandOnHovering.value),
+);
+
+const style = computed((): CSSProperties => {
+  const { marginTop, paddingTop, zIndex } = props;
+
+  return {
+    '--scroll-shadow': 'var(--sidebar)',
+    ...calcMenuWidthStyle(),
+    height: `calc(100% - ${marginTop}px)`,
+    marginTop: `${marginTop}px`,
+    paddingTop: `${paddingTop}px`,
+    zIndex,
+    ...(extraPanelExpanded.value ? { transition: 'none' } : {}),
+  };
+});
+
+const extraStyle = computed((): CSSProperties => {
+  const { extraWidth, width, zIndex } = props;
+
+  return {
+    left: `${width}px`,
+    width: extraPanelExpanded.value ? `${extraWidth}px` : 0,
+    zIndex,
+  };
+});
+
+const extraTitleStyle = computed((): CSSProperties => {
+  const { extraTitleHeight, headerHeight } = props;
+
+  return {
+    height: `${extraTitleHeight ?? headerHeight - 1}px`,
+  };
+});
+
+const contentWidthStyle = computed((): CSSProperties => {
+  const { fixedExtra, isSidebarMixed, mixedWidth } = props;
+  if (isSidebarMixed && fixedExtra) {
+    return { width: `${mixedWidth}px` };
+  }
+  return {};
+});
+
+const contentStyle = computed((): CSSProperties => {
+  const { collapseHeight, headerHeight } = props;
+
+  return {
+    height: `calc(100% - ${headerHeight + collapseHeight}px)`,
+    paddingTop: '8px',
+    ...contentWidthStyle.value,
+  };
+});
+
+const headerStyle = computed((): CSSProperties => {
+  const { headerHeight, isSidebarMixed } = props;
+
+  return {
+    ...(isSidebarMixed ? { display: 'flex', justifyContent: 'center' } : {}),
+    height: `${headerHeight - 1}px`,
+    ...contentWidthStyle.value,
+  };
+});
+
+const extraContentStyle = computed((): CSSProperties => {
+  const { collapseHeight, extraTitleHeight, headerHeight } = props;
+  const titleHeight = extraTitleHeight ?? headerHeight;
+  return {
+    height: `calc(100% - ${titleHeight + collapseHeight}px)`,
+  };
+});
+
+const collapseStyle = computed((): CSSProperties => {
+  return {
+    height: `${props.collapseHeight}px`,
+  };
+});
+
+function getMenuWidthValue(isHiddenDom: boolean) {
+  const { collapseWidth, extraWidth, mixedWidth, isSidebarMixed, width } =
+    props;
+
+  let widthValue =
+    width === 0
+      ? '0px'
+      : `${width + (extraPanelExpanded.value ? extraWidth : 0)}px`;
+
+  if (isHiddenDom && expandOnHovering.value && !expandOnHover.value) {
+    widthValue = isSidebarMixed ? `${mixedWidth}px` : `${collapseWidth}px`;
+  }
+  return widthValue;
+}
+
+function calcMenuWidthStyle(): CSSProperties {
+  const widthValue = getMenuWidthValue(false);
+  const currentWidth = Number.parseFloat(widthValue);
+  const clippedWidth = Math.max(0, sidebarVisualWidth.value - currentWidth);
+  let transform: CSSProperties['transform'];
+
+  if (props.isMobile) {
+    transform = undefined;
+  } else if (props.show) {
+    transform = 'translate3d(0, 0, 0)';
+  } else {
+    transform = 'translate3d(-100%, 0, 0)';
+  }
+
+  return {
+    ...(widthValue === '0px' ? { overflow: 'hidden' } : {}),
+    clipPath: `inset(0 ${clippedWidth}px 0 0)`,
+    transform,
+    width: `${sidebarVisualWidth.value}px`,
+  };
+}
+
+function handleMouseenter(e: MouseEvent) {
+  // 移动端抽屉模式不存在 hover 语义：合成 mouse 事件不得改写折叠状态
+  if (props.isMobile) {
+    return;
+  }
+  if (e?.offsetX < 10) {
+    return;
+  }
+
+  if (expandOnHover.value) {
+    if (props.isSidebarMixed) {
+      extraVisible.value = true;
+    }
+    return;
+  }
+  if (!expandOnHovering.value) {
+    collapse.value = false;
+  }
+  if (props.isSidebarMixed) {
+    isLocked.value = true;
+    extraVisible.value = true;
+  }
+  expandOnHovering.value = true;
+}
+
+function handleMouseleave() {
+  emit('leave');
+  if (props.isSidebarMixed) {
+    isLocked.value = false;
+  }
+  if (expandOnHover.value || props.isMobile) {
+    return;
+  }
+
+  expandOnHovering.value = false;
+  collapse.value = true;
+  extraVisible.value = false;
+}
+
+const { startDrag, endDrag } = useSidebarDrag();
+
+const handleDragSidebar = (e: MouseEvent) => {
+  const { isSidebarMixed, collapseWidth, width } = props;
+  const minLimit = isSidebarMixed ? width + collapseWidth : collapseWidth;
+  const maxLimit = isSidebarMixed ? width + 320 : 320;
+
+  startDrag(
+    e,
+    {
+      min: minLimit,
+      max: maxLimit,
+    },
+    {
+      target: asideRef.value,
+      dragBar: dragBarRef.value,
+    },
+    (newWidth) => {
+      if (isSidebarMixed) {
+        emit('update:width', newWidth - width);
+        extraCollapse.value = collapse.value =
+          newWidth - width <= collapseWidth;
+      } else {
+        emit('update:width', newWidth);
+        collapse.value = extraCollapse.value = newWidth <= collapseWidth;
+      }
+    },
+  );
+};
+
+onUnmounted(() => {
+  endDrag();
+});
+</script>
+
+<template>
+  <div
+    v-if="domVisible"
+    :class="theme"
+    :style="hiddenSideStyle"
+    class="h-full"
+  ></div>
+  <Transition name="mobile-sidebar">
+    <aside
+      v-if="!isMobile || !collapse"
+      ref="asideRef"
+      data-layout-region="sidebar"
+      :inert="!show || width === 0"
+      :style="style"
+      class="fixed left-0 top-0 h-full"
+      :class="[
+        theme,
+        {
+          'border-r border-border bg-sidebar transition-[clip-path,transform] duration-300 ease-out':
+            !isMobile && !isSidebarMixed,
+          'transition-transform duration-300 ease-out':
+            !isMobile && isSidebarMixed,
+        },
+      ]"
+      @mouseenter="handleMouseenter"
+      @mouseleave="handleMouseleave"
+    >
+      <div
+        class="h-full"
+        :class="[
+          {
+            'bg-sidebar-deep': isSidebarMixed,
+            'border-r border-border bg-sidebar': !isSidebarMixed,
+          },
+        ]"
+        :style="{ width: `${width}px` }"
+      >
+        <SidebarFixedButton
+          v-if="!collapse && !isSidebarMixed && showFixedButton"
+          v-model:collapse="collapse"
+          v-model:expand-on-hover="expandOnHover"
+          v-model:expand-on-hovering="expandOnHovering"
+          v-model:extra-visible="extraVisible"
+        />
+        <div v-if="slots.logo" :style="headerStyle">
+          <slot name="logo"></slot>
+        </div>
+        <VbenScrollbar :style="contentStyle" shadow shadow-border>
+          <slot></slot>
+        </VbenScrollbar>
+
+        <div :style="collapseStyle"></div>
+        <SidebarCollapseButton
+          v-if="showCollapseButton && !isSidebarMixed"
+          v-model:collapsed="collapse"
+        />
+      </div>
+      <div
+        v-if="isSidebarMixed"
+        :class="[
+          themeSub,
+          {
+            'border-l': extraPanelExpanded,
+          },
+        ]"
+        :style="extraStyle"
+        class="fixed top-0 h-full overflow-hidden border-r border-border bg-sidebar transition-[left,width] duration-300 ease-out"
+      >
+        <SidebarCollapseButton
+          v-if="isSidebarMixed && expandOnHover"
+          v-model:collapsed="extraCollapse"
+        />
+
+        <SidebarFixedButton
+          v-if="!extraCollapse"
+          v-model:collapse="collapse"
+          v-model:expand-on-hover="expandOnHover"
+          v-model:expand-on-hovering="expandOnHovering"
+          v-model:extra-visible="extraVisible"
+        />
+        <div v-if="!extraCollapse" :style="extraTitleStyle" class="pl-2">
+          <slot name="extra-title"></slot>
+        </div>
+        <VbenScrollbar
+          :style="extraContentStyle"
+          class="border-border py-2"
+          shadow
+          shadow-border
+        >
+          <slot name="extra"></slot>
+        </VbenScrollbar>
+      </div>
+      <div
+        v-if="draggable"
+        ref="dragBarRef"
+        :style="dragBarStyle"
+        class="absolute inset-y-0 -right-px z-1000 w-0.5 cursor-col-resize hover:bg-primary"
+        @mousedown="handleDragSidebar"
+      ></div>
+    </aside>
+  </Transition>
+</template>
+
+<style scoped>
+.mobile-sidebar-enter-active,
+.mobile-sidebar-leave-active {
+  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
+  will-change: transform;
+}
+
+.mobile-sidebar-enter-from,
+.mobile-sidebar-leave-to {
+  transform: translate3d(-100%, 0, 0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mobile-sidebar-enter-active,
+  .mobile-sidebar-leave-active {
+    transition-duration: 0ms;
+  }
+}
+</style>

package/src/layout-ui/components/layout-tabbar.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue';
+
+import { computed } from 'vue';
+
+interface Props {
+  /**
+   * 高度
+   */
+  height: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {});
+
+const style = computed((): CSSProperties => {
+  const { height } = props;
+  return {
+    height: `${height}px`,
+  };
+});
+</script>
+
+<template>
+  <section
+    :style="style"
+    class="flex w-full border-b border-border bg-background transition-colors duration-200"
+  >
+    <slot></slot>
+  </section>
+</template>

package/src/layout-ui/components/widgets/index.ts

@@ -0,0 +1,2 @@
+export { default as SidebarCollapseButton } from './sidebar-collapse-button.vue';
+export { default as SidebarFixedButton } from './sidebar-fixed-button.vue';

package/src/layout-ui/components/widgets/sidebar-collapse-button.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { useSimpleLocale } from '@melt-js/libs-vben/composables';
+import { ChevronsLeft, ChevronsRight } from '@melt-js/libs-vben/core-icons';
+
+const collapsed = defineModel<boolean>('collapsed');
+const { $t } = useSimpleLocale();
+
+function handleCollapsed() {
+  collapsed.value = !collapsed.value;
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    :aria-label="$t('toggleSidebar')"
+    :aria-pressed="collapsed"
+    data-layout-action="toggle-sidebar-collapse"
+    class="absolute bottom-2 left-3 z-10 flex-center cursor-pointer rounded-sm bg-accent p-1 text-foreground/60 hover:bg-accent-hover hover:text-foreground"
+    @click.stop="handleCollapsed"
+  >
+    <ChevronsRight v-if="collapsed" class="size-4" />
+    <ChevronsLeft v-else class="size-4" />
+  </button>
+</template>

package/src/layout-ui/components/widgets/sidebar-fixed-button.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Pin, PinOff } from '@melt-js/libs-vben/core-icons';
+
+const expandOnHover = defineModel<boolean>('expandOnHover');
+const expandOnHovering = defineModel<boolean>('expandOnHovering');
+const collapse = defineModel<boolean>('collapse');
+const extraVisible = defineModel<boolean>('extraVisible');
+
+function toggleFixed() {
+  expandOnHover.value = !expandOnHover.value;
+  collapse.value = false;
+  extraVisible.value = true;
+  if (!expandOnHover.value) {
+    expandOnHovering.value = true;
+  }
+}
+</script>
+
+<template>
+  <div
+    class="absolute right-3 bottom-2 z-10 flex-center cursor-pointer rounded-sm bg-accent p-1.25 text-foreground/60 transition-all duration-300 hover:bg-accent-hover hover:text-foreground"
+    @click="toggleFixed"
+  >
+    <PinOff v-show="!expandOnHover" class="size-3.5" />
+    <Pin v-show="expandOnHover" class="size-3.5" />
+  </div>
+</template>