feat(auth): 更新门户认证页面布局和样式

云

14 小时以前 91bfcf61f44f353dfebc54a57b5b774721de3e9a

 src/packages/@core/ui-kit/layout-ui/src/vben-layout.vue

@@ -281,19 +281,13 @@
  // 如果不是混合导航，tabbar 的宽度为 100%
  if (!isMixedNav.value || props.sidebarHidden) {
    width = '100%';
  } else if (sidebarEnable.value) {
    // 鼠标在侧边栏上时，且侧边栏展开时的宽度
    const onHoveringWidth = sidebarExpandOnHover.value
      ? props.sidebarWidth
      : getSideCollapseWidth.value;

    // 设置 marginLeft，根据侧边栏是否折叠来决定
    marginLeft = sidebarCollapse.value
  } else if (sidebarEnable.value && showSidebar.value && !props.isMobile) {
    // 标签栏与实际侧栏对齐；临时悬停展开时才保留折叠宽度。
    const occupiedWidth = sidebarExpandOnHovering.value && !sidebarExpandOnHover.value
      ? getSideCollapseWidth.value
      : onHoveringWidth;

    // 设置 tabbar 的宽度，计算方式为 100% 减去侧边栏的宽度
    width = `calc(100% - ${sidebarCollapse.value ? getSidebarWidth.value : onHoveringWidth}px)`;
      : getSidebarWidth.value;
    marginLeft = occupiedWidth;
    width = `calc(100% - ${occupiedWidth}px)`;
  } else {
    // 默认情况下，tabbar 的宽度为 100%
    width = '100%';
@@ -495,7 +489,7 @@
</script>

<template>
  <div class="relative flex min-h-full w-full">
  <div class="relative flex h-full min-h-0 w-full">
    <LayoutSidebar
      v-if="sidebarEnableState"
      v-model:draggable="sidebarDraggable"
@@ -543,7 +537,7 @@

    <div
      ref="contentRef"
      class="flex flex-1 flex-col overflow-hidden transition-all duration-300 ease-in"
      class="flex min-h-0 flex-1 flex-col overflow-hidden transition-all duration-300 ease-in"
    >
      <div
        :class="[
@@ -573,6 +567,7 @@
          <template #toggle-button>
            <VbenIconButton
              v-if="showHeaderToggleButton"
              :aria-label="sidebarCollapse ? '展开导航菜单' : '收起导航菜单'"
              class="my-0 mr-1 rounded-md"
              @click="handleHeaderToggle"
            >
@@ -603,7 +598,7 @@
        :padding-right="contentPaddingRight"
        :padding-top="contentPaddingTop"
        :style="contentStyle"
        class="transition-[margin-top] duration-200"
        class="min-h-0 transition-[margin-top] duration-200"
      >
        <slot name="content"></slot>