@opendesign-plus/components 0.0.1-rc.16

package/src/components/common/HeaderUbmcNav.vue

@@ -0,0 +1,597 @@
+<script setup lang="ts">
+import { ref, onMounted, watch, computed, nextTick, onUnmounted } from 'vue';
+
+import { OIcon, OIconChevronRight, OTag } from '@opensig/opendesign';
+
+import { ElCascaderPanel } from 'element-plus';
+
+import { useLocale, useScreen } from '@opendesign-plus/composables';
+
+const props = defineProps({
+  navData: undefined,
+  hasPerm: undefined,
+  tagMap: undefined,
+  currentPath: undefined,
+});
+
+const { locale } = useLocale();
+const { lePadV } = useScreen();
+const route = {};
+
+const MORE_ID = 'more';
+// -------------------- hover事件 --------------------
+const cascaderRef = ref({});
+const activeIndex = ref(-1);
+const onMouseEnter = (idx: number) => {
+  activeIndex.value = idx;
+};
+const onMouseLeave = (idx) => {
+  activeIndex.value = -1;
+  cascaderRef.value[idx]?.clearCheckedNodes();
+};
+// -------------------- 选中事件 --------------------
+const selectedIndex = ref(-1);
+
+const getSelectedIndex = () => {
+  const path = route?.fullPath?.split('/').slice(0, 3).join('/');
+  selectedIndex.value = [...navs.value, moreItem.value].findIndex((nav) => {
+    const sharpIdx = path?.indexOf('#');
+    if (visibleIds.value.length && !visibleIds.value.includes(nav.id) && nav.id !== MORE_ID) {
+      return false;
+    }
+    return (
+      handelHref(nav.href) === path ||
+      nav.children?.some((item) => {
+        if (item.children?.length) {
+          return item.children.some((v) => {
+            return handelHref(v.href) === path;
+          });
+        }
+        return handelHref(item.href) === path;
+      }) ||
+      nav.keys?.includes(path?.slice(1, sharpIdx !== -1 ? sharpIdx : path?.length))
+    );
+  });
+};
+
+onMounted(() => {
+  getSelectedIndex();
+});
+
+watch(
+  () => route.path,
+  () => {
+    getSelectedIndex();
+  }
+);
+
+const checkVisible = (date: string, lang: 'zh' | 'en'): boolean => {
+  let flag = true;
+  if (date) {
+    flag = flag && new Date(date).getTime() >= Date.now();
+  }
+  if (lang) {
+    flag = flag && locale.value === lang;
+  }
+  return flag;
+};
+
+const filterPerm = (navItem: any, permMap: any) => {
+  if (navItem.checkPermKey) {
+    return permMap[navItem.checkPermKey];
+  }
+  return true;
+};
+
+const moreItem = computed(() => {
+  return {
+    id: MORE_ID,
+    label: '更多',
+    children: navs.value.filter((v) => !visibleIds.value.includes(v.id)) || [],
+  };
+});
+const navs = computed(() => {
+  const path = [] as string[];
+  let currentNavs = [] as any[];
+  const permMap = {
+    meeting: props.hasPerm,
+  };
+  try {
+    currentNavs = props.navData
+      .filter((navItem) => filterPerm(navItem, permMap))
+      .map(function fn(navItem: any) {
+        path.push(navItem.label);
+        const res = {
+          ...navItem,
+          _path: [...path],
+        };
+        if (navItem.children) {
+          res.children = navItem.children.filter((navItem) => filterPerm(navItem, permMap)).map(fn);
+        }
+        path.pop();
+        return res;
+      });
+  } catch {
+    currentNavs = props.navData;
+  }
+  return currentNavs;
+});
+
+// ----------------埋点----------------
+// 导航埋点
+let lastHoverTime = 0;
+let steps = 0; // 触发初始导航到最终完成跳转所用步数
+
+const onRedirect = (navItem: any) => {
+  const timeUsed = Date.now() - lastHoverTime;
+  const _steps = steps + 1;
+  lastHoverTime = 0;
+  steps = 0;
+  if (navItem._path) {
+    const levels = {} as Record<string, string>;
+    navItem._path.forEach((name: string, idx: number) => {
+      levels[`level${idx + 1}`] = name;
+    });
+    return {
+      properties: {
+        module: 'navigation',
+        timeUsed,
+        steps: _steps,
+        ...levels,
+      },
+    };
+  }
+};
+
+const onNavHover = (navItem: any) => {
+  steps++;
+  if (lastHoverTime) {
+    return;
+  }
+  lastHoverTime = Date.now();
+  return {
+    event: 'hover',
+    properties: {
+      module: 'navigation',
+      target: navItem.label,
+    },
+  };
+};
+
+const onCancelNav = () => {
+  lastHoverTime = 0;
+  steps = 0;
+};
+
+const isHttpUrl = (url: string) => {
+  return url ? url.startsWith('http') : false;
+};
+
+const wrapperRef = ref(null);
+const listRef = ref(null);
+const visibleIds = ref([]);
+const resizeTimer = ref(null);
+const leftWidth = ref(0);
+
+const calculateLayout = () => {
+  if (!wrapperRef.value) {
+    return;
+  }
+  visibleIds.value = [];
+  leftWidth.value = wrapperRef.value.clientWidth;
+  if (lePadV.value) {
+    visibleIds.value = navs.value.map((v) => v.id);
+  }
+  // 计算可用宽度
+  if (wrapperRef.value.clientWidth >= listRef.value.clientWidth) {
+    // 重置
+    visibleIds.value = navs.value.map((v) => v.id);
+    return;
+  }
+  leftWidth.value = 0;
+  const moreEle = listRef.value.querySelector(`li.nav-item#${MORE_ID}`);
+  let availableWidth = wrapperRef.value.clientWidth - moreEle.clientWidth;
+  const allItems = listRef.value.querySelectorAll('li.nav-item');
+  let done = false;
+  [...allItems].forEach((item, idx) => {
+    if (item.id !== MORE_ID && availableWidth > item.clientWidth && !done) {
+      availableWidth -= item.clientWidth;
+      visibleIds.value.push(navs.value[idx].id);
+      leftWidth.value += item.clientWidth;
+    } else {
+      done = true;
+    }
+  });
+};
+
+onMounted(() => {
+  window.addEventListener('resize', calculateLayout);
+  // 确保 DOM 完全渲染后再计算
+  nextTick(() => {
+    calculateLayout();
+    resizeTimer.value = setTimeout(() => {
+      calculateLayout();
+    }, 1000);
+  });
+});
+
+// 清理
+onUnmounted(() => {
+  window.removeEventListener('resize', calculateLayout);
+  clearTimeout(resizeTimer.value);
+});
+// 监听 items 变化
+watch(
+  () => navs.value,
+  () => {
+    nextTick(() => {
+      calculateLayout();
+    });
+  },
+  { deep: true }
+);
+
+const handelHref = (href: string) => {
+  if (href === '/') {
+    href = '';
+  }
+  if (isHttpUrl(href)) {
+    return href;
+  }
+  return `/${locale.value}${href}`;
+};
+</script>
+
+<template>
+  <nav class="header-nav-ubmc" ref="wrapperRef">
+    <ul
+      class="nav-list"
+      @mouseleave="onCancelNav"
+      ref="listRef"
+      :style="{
+        '--more-left': leftWidth,
+      }"
+    >
+      <li
+        v-for="(item, idx) in [...navs, moreItem]"
+        :key="item.id"
+        :id="item.id"
+        class="nav-item"
+        :class="{
+          'is-selected': selectedIndex === idx,
+          'is-active': activeIndex === idx,
+          hidden: (!visibleIds.includes(item.id) && item.id !== MORE_ID) || (item.id === MORE_ID && item.children.length === 0),
+        }"
+        @mouseenter="onMouseEnter(idx)"
+        @mouseleave="onMouseLeave(idx)"
+        v-analytics:mouseenter="() => onNavHover(item)"
+      >
+        <a class="info-wrap clickable" v-if="!item.children?.length && item.href" :href="handelHref(item.href)">
+          <span>
+            <span>{{ item.label }}</span>
+          </span>
+        </a>
+        <div class="info-wrap" v-else>
+          <span>
+            <span>{{ item.label }}</span>
+          </span>
+          <div class="dropdown-wrapper">
+            <el-cascader-panel :options="item.children" value="id" expandTrigger="hover" :ref="(ref) => (cascaderRef[idx] = ref)">
+              <template #default="{ data: childTab }">
+                <template v-if="childTab.disabled">
+                  <div class="tab-disabled">
+                    <span>{{ childTab.label }}</span>
+                    <span class="disabled-tag">待上线</span>
+                  </div>
+                </template>
+                <template v-else-if="childTab?.children">
+                  <div class="tab-expand">
+                    <span>{{ childTab.label }}</span>
+                    <OIcon>
+                      <OIconChevronRight />
+                    </OIcon>
+                  </div>
+                </template>
+                <template v-else>
+                  <a
+                    :href="handelHref(childTab.href)"
+                    class="dropdown-link"
+                    :target="isHttpUrl(childTab.href) ? '_blank' : '_self'"
+                    :rel="isHttpUrl(childTab.href) ? 'noopener noreferrer' : ''"
+                  >
+                    <span>{{ childTab.label }}</span>
+                    <OTag
+                      v-if="(tagMap[childTab?.href?.slice(1)] || childTab.tag) && checkVisible(childTab.tagExpire, childTab.tagLang)"
+                      color="danger"
+                      size="small"
+                      round="pill"
+                    >
+                      {{ tagMap[childTab?.href?.slice(1)] || childTab.tag }}
+                    </OTag>
+                    <OIcon v-if="childTab.icon" class="jump-out-icon">
+                      <component :is="childTab.icon" class="icon" />
+                    </OIcon>
+                  </a>
+                </template>
+              </template>
+            </el-cascader-panel>
+            <div class="dropdown-body-wrapper" style="display: none !important">
+              <div class="dropdown-body" v-for="(childTab, index) in item.children" :key="index" @mouseenter="onMouseEnter(idx)" @mouseleave="onMouseLeave">
+                <div class="dropdown-item" v-if="childTab.disabled">
+                  <div class="tab-disabled">
+                    <span>{{ childTab.label }}</span>
+                    <span class="disabled-tag">待上线</span>
+                  </div>
+                </div>
+                <div class="dropdown-item" v-else v-analytics="() => onRedirect(childTab)">
+                  <a
+                    :href="handelHref(childTab.href)"
+                    class="dropdown-link"
+                    :target="isHttpUrl(childTab.href) ? '_blank' : '_self'"
+                    :rel="isHttpUrl(childTab.href) ? 'noopener noreferrer' : ''"
+                  >
+                    <span>{{ childTab.label }}</span>
+                    <OTag
+                      v-if="(tagMap[childTab?.href?.slice(1)] || childTab.tag) && checkVisible(childTab.tagExpire, childTab.tagLang)"
+                      color="danger"
+                      size="small"
+                      round="pill"
+                    >
+                      {{ tagMap[childTab?.href?.slice(1)] || childTab.tag }}
+                    </OTag>
+                    <OIcon v-if="childTab.icon" class="jump-out-icon">
+                      <component :is="childTab.icon" class="icon" />
+                    </OIcon>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<style lang="scss" scoped>
+.header-nav-ubmc {
+  height: 100%;
+  min-width: 0;
+  flex: 1;
+  position: relative;
+}
+.nav-list {
+  display: flex;
+  height: 100%;
+  width: fit-content;
+  flex-wrap: nowrap;
+}
+.nav-item {
+  position: relative;
+  height: 100%;
+  color: var(--o-color-info1);
+  pointer-events: auto;
+  transition: color var(--o-duration-s) var(--o-easing-standard);
+  @include text1;
+  &.hidden {
+    opacity: 0;
+  }
+  &#more {
+    position: absolute;
+    left: calc(var(--more-left) * 1px);
+  }
+
+  a {
+    color: var(--o-color-info2);
+    display: flex;
+    align-items: center;
+    transition: color var(--o-duration-s) var(--o-easing-standard);
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: var(--o-gap-4);
+    width: calc(100% - var(--o-gap-4) * 2);
+    height: 2px;
+    border-radius: 2px;
+    background-color: var(--o-color-primary1);
+    transition: opacity var(--o-duration-m2) var(--o-easing-standard);
+    opacity: 0;
+    @include respond-to('pad_h') {
+      left: var(--o-gap-3);
+    }
+  }
+  &.is-active,
+  &.is-selected {
+    .info-wrap {
+      color: var(--o-color-primary1);
+      font-weight: 500;
+    }
+    &::after {
+      opacity: 1;
+    }
+  }
+}
+
+.info-wrap {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 var(--o-gap-4);
+  color: var(--o-color-info1);
+  word-break: keep-all;
+  position: relative;
+  font-weight: normal;
+  &:hover {
+    color: var(--o-color-primary1);
+  }
+  & > span {
+    display: flex;
+    align-items: flex-end;
+    white-space: nowrap;
+    @include respond-to('pad_h') {
+      height: 28px;
+    }
+  }
+  &.clickable {
+    cursor: pointer;
+  }
+  @include respond-to('pad_h') {
+    padding: 0 var(--o-gap-3);
+  }
+  .dropdown-wrapper {
+    font-weight: 400;
+    position: absolute;
+    top: calc(100% - 4px);
+    left: 0;
+    display: none;
+    padding-top: 8px;
+    transition: opacity var(--o-duration-s) var(--o-easing-standard);
+    :deep(.el-cascader-panel) {
+      box-shadow: var(--o-shadow-2);
+      border: none;
+      background-color: var(--o-color-fill2);
+      display: flex;
+      .el-cascader-menu {
+        min-width: 100px;
+        border-right: none;
+      }
+      .el-cascader-menu + .el-cascader-menu {
+        border-left: 1px solid var(--o-color-control4);
+        height: auto;
+      }
+      .el-cascader-node {
+        .el-icon {
+          display: none;
+        }
+        &.is-active {
+          color: inherit;
+          font-weight: normal;
+        }
+        &.in-active-path {
+          font-weight: normal;
+          color: var(--o-color-primary1);
+        }
+      }
+
+      .tab-expand {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        .o-icon {
+          font-size: 16px;
+        }
+      }
+      .el-cascader-menu__wrap {
+        height: fit-content;
+      }
+      .el-cascader-menu__list {
+        padding: 6px;
+        li {
+          padding: 6px 12px;
+          border-radius: 4px;
+          cursor: pointer;
+          &:hover {
+            background-color: var(--o-color-control2-light);
+            color: var(--o-color-primary1);
+          }
+          & > span {
+            padding: 0;
+            &:not(.o-tag) {
+              color: var(--o-color-info1);
+            }
+          }
+        }
+      }
+    }
+    .dropdown-body-wrapper {
+      background-color: var(--o-color-control-light);
+      border-radius: var(--o-radius-s);
+      box-shadow: var(--o-shadow-2);
+    }
+
+    .dropdown-item {
+      font-weight: 400;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      padding: 6px 12px;
+      min-width: 100px;
+      border-radius: var(--o-radius-s);
+      color: var(--o-color-info2);
+      background-color: transparent;
+      transition: background-color var(--o-duration-s) var(--o-easing-standard);
+      cursor: pointer;
+      @include text1;
+      @include hover {
+        background-color: var(--o-color-control2-light);
+        color: var(--o-color-primary1);
+      }
+      &.dropdown-item {
+        display: flex;
+        justify-content: space-between;
+        .o-icon {
+          font-size: 16px;
+        }
+      }
+    }
+    .dropdown-link {
+      color: inherit;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      .o-tag {
+        margin-left: var(--o-gap-2);
+        transform: scale(0.75);
+        transform-origin: left center;
+        --layout-pkg-radius: 100vh;
+      }
+    }
+    :deep(.jump-out-icon) {
+      font-size: 16px;
+      margin-left: 4px;
+      path {
+        fill: currentColor;
+        stroke: transparent;
+      }
+      path[fill='none'] {
+        display: none;
+      }
+    }
+  }
+}
+.nav-item {
+  @include hover {
+    .dropdown-wrapper {
+      display: block;
+    }
+  }
+}
+.tab-disabled {
+  color: var(--o-color-info4);
+  display: flex;
+  align-items: center;
+  cursor: not-allowed;
+
+  .disabled-tag {
+    margin-left: var(--o-gap-1);
+    border: 1px solid rgba(224, 226, 230, 1);
+    border-radius: var(--o-radius-xs);
+    font-size: 10px;
+    color: var(--o-color-info3);
+    height: 16px;
+    width: 38px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>
+
+<style lang="scss">
+.navs-dropdown {
+  border-radius: 4px;
+}
+</style>