@opendesign-plus-test/components 0.0.1-rc.26 → 0.0.1-rc.27

package/src/components/header/components/HeaderNav.vue

@@ -0,0 +1,280 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, nextTick } from 'vue';
+import { OIcon, OTag } from '@opensig/opendesign';
+
+import IconCaretLeft from '~icons/components/icon-caret-left.svg';
+import IconCaretRight from '~icons/components/icon-caret-right.svg';
+
+import { useTheme } from '@opendesign-plus/composables';
+
+import { useDebounceFn } from '@vueuse/core';
+
+export interface OHeaderEmitsT {
+  (e: 'handle-mouseenter', val: any): void;
+  (e: 'handle-mouseleave', val: any): void;
+  (e: 'handle-click', val: any): void;
+}
+
+const emit = defineEmits<OHeaderEmitsT>();
+const { isDark } = useTheme();
+
+const props = defineProps({
+  navData: undefined,
+  activeIndex: undefined,
+  hoverId: undefined,
+});
+
+const navRef = ref();
+const navListRef = ref();
+const resizeTimer = ref(null);
+const navVisibleRight = ref(false);
+const navVisibleLeft = ref(false);
+
+const hoverIndex = ref();
+
+const toggleDebounced = useDebounceFn((item: any | null, id: string) => {
+  hoverIndex.value = item?.id;
+  if (id === 'mouseenter') {
+    emit('handle-mouseenter', item);
+  }
+  if (id === 'mouseleave') {
+    hoverIndex.value = '';
+    emit('handle-mouseleave', item);
+  }
+}, 100);
+
+const handleClick = (item: any) => {
+  emit('handle-click', item);
+};
+
+const scrollNavRight = () => {
+  navVisibleLeft.value = true;
+  nextTick(() => {
+    navRef.value.scrollTo({
+      left: navRef.value.clientWidth,
+      behavior: 'smooth',
+    });
+  });
+};
+const scrollNavLeft = () => {
+  navRef.value.scrollTo({
+    left: 0,
+    behavior: 'smooth',
+  });
+  navVisibleLeft.value = false;
+};
+
+const calculateLayout = () => {
+  if (navRef.value?.clientWidth < navListRef.value?.clientWidth) {
+    navVisibleRight.value = true;
+  } else {
+    navVisibleRight.value = false;
+  }
+};
+
+// ------------导航埋点------------
+// 首次hover时间
+let hoverTime = 0;
+// 最终点击导航所用步骤
+let steps = 0;
+
+const onHoverHeader = () => (steps = 0);
+
+const onHoverNav = (name: string) => {
+  if (steps > 0) return void steps++;
+  steps++;
+  hoverTime = Date.now();
+  return {
+    event: 'hover',
+    properties: {
+      module: 'navigation',
+      level1: name,
+      target: name,
+    },
+  };
+};
+
+const onClickNavItem = (item: any) => {
+  const res = {
+    properties: {
+      module: 'navigation',
+      level1: item.label,
+      target: item.label,
+      steps: steps,
+      url: item.href,
+      duration: Date.now() - hoverTime,
+    },
+  };
+  return res;
+};
+
+onMounted(() => {
+  window.addEventListener('resize', calculateLayout);
+  // 确保 DOM 完全渲染后再计算
+  nextTick(() => {
+    calculateLayout();
+    resizeTimer.value = setTimeout(() => {
+      calculateLayout();
+    }, 1000);
+  });
+});
+
+// 清理
+onUnmounted(() => {
+  window.removeEventListener('resize', calculateLayout);
+  clearTimeout(resizeTimer.value);
+});
+</script>
+
+<template>
+  <div class="header-nav-wrap">
+    <div class="header-nav" :class="{ 'header-nav-scroll': navVisibleLeft }">
+      <div class="right-icon" v-if="navVisibleLeft">
+        <OIcon @click="scrollNavLeft"><IconCaretLeft /></OIcon>
+      </div>
+      <div ref="navRef" class="o-nav" :class="{ 'o-nav-scroll': navVisibleLeft || !navVisibleRight, dark: isDark }">
+        <ul ref="navListRef" class="o-nav-list" @mouseenter="onHoverHeader">
+          <li
+            v-for="(item, idx) in navData"
+            :key="item.id"
+            :class="{
+              'is-selected': hoverIndex === item.id || props.hoverId === item.id,
+              'is-active': props.activeIndex === idx,
+            }"
+            @mouseenter="toggleDebounced(item, 'mouseenter')"
+            @mouseleave="toggleDebounced(item, 'mouseleave')"
+            v-analytics:mouseenter="onHoverNav(item.label)"
+            v-analytics.catchBubble="onClickNavItem(item)"
+          >
+            <div v-if="item?.children?.length" :id="'tour_headerNav_' + item.id" class="nav-item">
+              <span class="nav-text">{{ item.label }}</span>
+            </div>
+            <div v-else :id="'tour_headerNav_' + item.id" class="nav-item item-other" @click="handleClick(item)">
+              <span class="nav-text">{{ item.label }}</span>
+              <OTag v-if="item.tag" round="pill" color="danger" size="small" class="content-tag">{{ item.tag }}</OTag>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="right-icon" v-if="navVisibleRight && !navVisibleLeft">
+        <OIcon @click="scrollNavRight"><IconCaretRight /></OIcon>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-nav-wrap {
+  height: 100%;
+  .header-nav {
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    width: calc(100% - 64px);
+    align-items: center;
+  }
+  .header-nav-scroll {
+    width: calc(100% - 64px - 24px);
+  }
+}
+.o-nav {
+  height: 100%;
+  position: relative;
+  overflow-y: hidden;
+  overflow-x: auto;
+  &::after {
+    content: '';
+    position: absolute;
+    width: 50px;
+    height: 100%;
+    right: 0;
+    top: 0;
+    background-image: linear-gradient(90deg, rgba(var(--o-mixedgray-1), 0) 0%, rgba(var(--o-mixedgray-1), 1) 100%);
+    z-index: 0;
+  }
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  &.dark {
+    &::after {
+      background-image: linear-gradient(90deg, rgba(var(--o-mixedgray-4), 0) 0%, rgba(var(--o-mixedgray-4), 1) 100%);
+    }
+  }
+}
+.o-nav-scroll {
+  &::after {
+    display: none;
+  }
+}
+.o-nav-list {
+  display: flex;
+  height: 100%;
+  width: fit-content;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  padding: 0;
+  margin: 0;
+  li {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    color: var(--o-color-info1);
+    transition: all var(--o-duration-s) var(--o-easing-standard);
+    .nav-text {
+      position: relative;
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        opacity: 0;
+        bottom: -24px;
+        width: 100%;
+        height: 2px;
+        border-radius: 1px;
+        background: var(--o-color-primary1);
+        transition: all var(--o-duration-s) var(--o-easing-standard);
+      }
+    }
+    &.is-selected,
+    &.is-active {
+      .nav-text {
+        color: var(--o-color-primary1);
+        z-index: 99;
+        font-weight: 500;
+        &::after {
+          content: '';
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .nav-item {
+    cursor: default;
+    display: flex;
+    align-items: center;
+    padding: 22px var(--o-gap-4);
+    @include text1;
+
+    @include respond-to('laptop') {
+      padding: 22px 12px;
+    }
+    @include respond-to('pad_h') {
+      padding: 22px 8px;
+    }
+    &.en {
+      @media (min-width: 841px) and (max-width: 1000px) {
+        padding: var(--o-gap-2);
+      }
+    }
+  }
+  .item-other {
+    cursor: pointer;
+    .content-tag {
+      margin-left: var(--o-gap-2);
+      --layout-pkg-radius: var(--o-radius-xs);
+    }
+  }
+}
+</style>

package/src/components/{common → header/components}/HeaderNavMoblie.vue

@@ -17,9 +17,13 @@ const navActive = ref('');
 const navInfo = ref({});
 
 const handleNavClick = (item: any) => {
+  if (item?.href) {
+    window.open(item?.href, '_self');
+    return true;
+  }
   if (!item) {
     navActive.value = 'source_code';
-    navInfo.value = props.codeData;
+    navInfo.value = props.codeData.list;
   } else {
     navActive.value = item.id;
     navInfo.value = item;
@@ -27,8 +31,8 @@ const handleNavClick = (item: any) => {
 };
 
 const emit = defineEmits(['link-click']);
-const linkClick = (url: string, target: string) => {
-  window.open(url, target);
+const linkClick = (url: string, target?: string) => {
+  window.open(url, target ? target : '_self');
   emit('link-click');
 };
 
@@ -40,7 +44,7 @@ onMounted(() => {
 watch(
   () => props.navData || props.codeData,
   () => {
-    navInfo.value = navActive.value === 'source_code' ? props.codeData : props.navData.find((item) => item.id === navActive.value);
+    navInfo.value = navActive.value === 'source_code' ? props.codeData.list : props.navData.find((item) => item.id === navActive.value);
   },
   {
     deep: true,
@@ -70,7 +74,7 @@ watch(
                 <p class="content-label">{{ item.label }}</p>
                 <div class="container-mobile">
                   <div v-for="subItem in item?.children" :key="subItem.label" class="content-container-mobile">
-                    <a @click="linkClick(subItem.href, '_blank')" rel="noopener noreferrer" class="content-subtitle">
+                    <a @click="linkClick(subItem.href, subItem?.target)" rel="noopener noreferrer" class="content-subtitle">
                       <span class="item-label">{{ subItem.label }}</span>
                       <OIcon v-if="subItem.icon">
                         <component :is="subItem.icon" class="icon" />
@@ -84,7 +88,7 @@ watch(
                 </div>
               </template>
               <template v-else>
-                <a @click="linkClick(item.href, '_blank')" rel="noopener noreferrer" class="content-subtitle item-not-children">
+                <a @click="linkClick(item.href, item?.target)" rel="noopener noreferrer" class="content-subtitle item-not-children">
                   <span class="item-label">{{ item.label }}</span>
                   <OIcon v-if="item.icon">
                     <component :is="item.icon" class="icon" />
@@ -95,7 +99,7 @@ watch(
             </li>
           </ul>
           <div v-else class="nav-aside-wrapper">
-            <a v-for="item in navInfo" :key="item.label" @click="linkClick(item.href, '_blank')" class="source-code-item">
+            <a v-for="item in navInfo" :key="item.label" @click="linkClick(item.href, item?.target)" class="source-code-item">
               <span>{{ item.label }}</span>
               <OIcon v-if="item.icon">
                 <component :is="item.icon" class="icon" />
@@ -115,7 +119,7 @@ watch(
             active: navActive === 'source_code',
           }"
         >
-          源码
+          {{ codeData.label }}
         </div>
         <div v-if="$slots.tool">
           <slot name="tool"></slot>
@@ -136,6 +140,7 @@ watch(
   &.active {
     color: var(--o-color-primary1);
     background: var(--o-color-fill2);
+    font-weight: 500;
   }
 }
 
@@ -164,6 +169,7 @@ watch(
   transition-property: all;
   transition-timing-function: cubic-bezier(0.5, 0, 0.84, 0.25);
   display: block;
+  opacity: 0;
 
   &.active {
     opacity: 1;
@@ -189,7 +195,7 @@ watch(
     > li {
       position: relative;
       text-align: center;
-      @include tip1;
+      @include text2;
       @include nav-item;
     }
   }
@@ -226,8 +232,7 @@ watch(
       }
       .content-label {
         color: var(--o-color-info3);
-        font-weight: 500;
-        @include tip1;
+        @include text2;
       }
 
       .item-not-children {
@@ -275,7 +280,6 @@ watch(
   }
 
   .container-mobile {
-    color: var(--o-color-primary1);
     margin-top: 8px;
     @include text2;
 
@@ -287,7 +291,6 @@ watch(
   }
 
   .content-container-mobile {
-    margin-right: var(--o-gap-1);
     margin-top: var(--o-gap-3);
 
     &:last-child {
@@ -295,11 +298,10 @@ watch(
     }
 
     .content-subtitle {
-      font-weight: 500;
-      color: var(--o-color-primary1);
+      color: var(--o-color-info1);
       display: flex;
       align-items: center;
-      @include tip1;
+      @include text2;
     }
 
     .content-tag {
@@ -316,7 +318,7 @@ watch(
         margin-top: var(--o-gap-1);
         text-align: justify;
         word-break: normal;
-        @include tip2;
+        @include text1;
         @include text-truncate(2);
       }
     }
@@ -339,6 +341,6 @@ watch(
 .header-tool-code {
   width: 99px;
   @include nav-item;
-  @include h4;
+  @include text1;
 }
 </style>

package/src/components/{common → header/components}/HeaderUbmcNav.vue

@@ -246,11 +246,11 @@ const handelHref = (href: string) => {
   <nav class="header-nav-ubmc" ref="wrapperRef">
     <ul
       class="nav-list"
-      @mouseleave="onCancelNav"
       ref="listRef"
       :style="{
         '--more-left': leftWidth,
       }"
+      @mouseleave="onCancelNav"
     >
       <li
         v-for="(item, idx) in [...navs, moreItem]"
@@ -281,7 +281,7 @@ const handelHref = (href: string) => {
                 <template v-if="childTab.disabled">
                   <div class="tab-disabled">
                     <span>{{ childTab.label }}</span>
-                    <span class="disabled-tag">待上线</span>
+                    <span class="disabled-tag">{{ locale === 'zh' ? '待上线' : 'Coming soon' }}</span>
                   </div>
                 </template>
                 <template v-else-if="childTab?.children">
@@ -298,6 +298,7 @@ const handelHref = (href: string) => {
                     class="dropdown-link"
                     :target="isHttpUrl(childTab.href) ? '_blank' : '_self'"
                     :rel="isHttpUrl(childTab.href) ? 'noopener noreferrer' : ''"
+                    v-analytics="() => onRedirect(childTab)"
                   >
                     <span>{{ childTab.label }}</span>
                     <OTag
@@ -315,37 +316,6 @@ const handelHref = (href: string) => {
                 </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>
@@ -365,6 +335,7 @@ const handelHref = (href: string) => {
   height: 100%;
   width: fit-content;
   flex-wrap: nowrap;
+  list-style: none;
 }
 .nav-item {
   position: relative;
@@ -386,6 +357,7 @@ const handelHref = (href: string) => {
     display: flex;
     align-items: center;
     transition: color var(--o-duration-s) var(--o-easing-standard);
+    text-decoration: none;
   }
   &::after {
     content: '';
@@ -407,6 +379,7 @@ const handelHref = (href: string) => {
     .info-wrap {
       color: var(--o-color-primary1);
       font-weight: 500;
+      cursor: default;
     }
     &::after {
       opacity: 1;
@@ -506,37 +479,7 @@ const handelHref = (href: string) => {
         }
       }
     }
-    .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;

package/src/components/header/index.ts

@@ -0,0 +1,16 @@
+import _OHeader from './OHeader.vue';
+import _OHeaderMoblie from './OHeaderMoblie.vue';
+import type { App } from 'vue';
+
+const OHeader = Object.assign(_OHeader, {
+  install(app: App) {
+    app.component('OEventsCalendar', _OHeader);
+  },
+});
+const OHeaderMoblie = Object.assign(_OHeaderMoblie, {
+  install(app: App) {
+    app.component('OEventsList', _OHeaderMoblie);
+  },
+});
+
+export { OHeader, OHeaderMoblie };

package/src/components/meeting/OMeetingCalendar.vue

@@ -79,14 +79,27 @@ const sig = ref('');
 const sigOptions = ref<GroupItemT[]>([]);
 const getSummitData = async (date) => {
   if (props.getSummitListRequest) {
-    summitData.value = await props.getSummitListRequest(date);
+    const list = await props.getSummitListRequest(date);
+    summitData.value = (list || []).map(v => {
+      return {
+
+        ...v,
+        type: 'summit',
+      };
+    });
   } else {
     summitData.value = [];
   }
 };
 const getActivityData = async (date) => {
   if (props.getEventsListRequest) {
-    eventsData.value = await props.getEventsListRequest(date);
+    const list = await props.getEventsListRequest(date);
+    eventsData.value = (list || []).map(v => {
+      return {
+        ...v,
+        type: 'activity',
+      };
+    });
   } else {
     eventsData.value = [];
   }
@@ -367,6 +380,7 @@ const create = () => {
   .o-select {
     flex-grow: 1;
     max-width: 320px;
+    --select-radius: var(--o-radius-xs);
   }
 
   .el-calendar-table {