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

云

10 小时以前 91bfcf61f44f353dfebc54a57b5b774721de3e9a

 src/packages/@core/ui-kit/menu-ui/src/components/menu.vue

@@ -149,7 +149,7 @@
  const computedStyle = getComputedStyle(menuItem);
  const marginLeft = Number.parseInt(computedStyle.marginLeft, 10);
  const marginRight = Number.parseInt(computedStyle.marginRight, 10);
  return menuItem.offsetWidth + marginLeft + marginRight || 0;
  return menuItem.getBoundingClientRect().width + marginLeft + marginRight || 0;
}

function calcSliceIndex() {
@@ -163,17 +163,24 @@
      (item.nodeName !== '#text' || item.nodeValue),
  ) as HTMLElement[];

  const moreItemWidth = 46;
  const computedMenuStyle = getComputedStyle(menu?.value);
  const moreItemWidth = Number.parseFloat(computedMenuStyle.getPropertyValue('--menu-overflow-width')) || 46;

  const paddingLeft = Number.parseInt(computedMenuStyle.paddingLeft, 10);
  const paddingRight = Number.parseInt(computedMenuStyle.paddingRight, 10);
  const menuWidth = menu.value?.clientWidth - paddingLeft - paddingRight;

  // Flexible portal items may fill the entire row. Reserve “more” only when
  // the complete menu actually overflows, otherwise the final item is hidden.
  const itemWidths = items.map(calcMenuItemWidth);
  if (itemWidths.reduce((total, width) => total + width, 0) <= menuWidth + 1) {
    return -1;
  }

  let calcWidth = 0;
  let sliceIndex = 0;
  items.forEach((item, index) => {
    calcWidth += calcMenuItemWidth(item);
  itemWidths.forEach((width, index) => {
    calcWidth += width;
    if (calcWidth <= menuWidth - moreItemWidth) {
      sliceIndex = index + 1;
    }
@@ -356,7 +363,8 @@
      </template>
      <SubMenu is-sub-menu-more path="sub-menu-more">
        <template #title>
          <Ellipsis class="size-4" />
          <Ellipsis class="size-4" aria-hidden="true" />
          <span v-if="overflowLabel" class="menu-overflow-label">{{ overflowLabel }}</span>
        </template>
        <template v-for="(item, index) in getSlot.slotMore" :key="index">
          <component :is="item" />