@opendesign-plus/components 0.0.1-rc.17 → 0.0.1-rc.19

package/src/components/header/components/HeaderUbmcNav.vue

@@ -1,540 +0,0 @@
-<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"
-      ref="listRef"
-      :style="{
-        '--more-left': leftWidth,
-      }"
-      @mouseleave="onCancelNav"
-    >
-      <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">{{ locale === 'zh' ? '待上线' : 'Coming soon' }}</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' : ''"
-                    v-analytics="() => onRedirect(childTab)"
-                  >
-                    <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>
-        </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;
-  list-style: none;
-}
-.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);
-    text-decoration: none;
-  }
-  &::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;
-      cursor: default;
-    }
-    &::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-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>