@opendesign-plus/components 0.0.1-rc.2 → 0.0.1-rc.21

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

@@ -0,0 +1,278 @@
+<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 { type NavLiT } from '../types.ts';
+
+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<NavLiT>();
+
+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/header/components/HeaderNavMobile.vue

@@ -0,0 +1,380 @@
+<script lang="ts" setup>
+import { ref, onMounted, watch } from 'vue';
+import { OIcon, OTag } from '@opensig/opendesign';
+
+import { type NavMobileItemT, NavType, CodeItemT, LangItemT } from '../types.ts';
+
+export interface OHeaderEmitsT {
+  (e: 'on-click'): void;
+  (e: 'lang-click', val: LangItemT): void;
+  (e: 'handle-click', val: any): void;
+}
+const emit = defineEmits<OHeaderEmitsT>();
+
+const props = withDefaults(defineProps<NavMobileItemT>(), {
+  menuShow: false,
+  navData: () => [],
+  codeData: () => [],
+  langData: () => [],
+});
+
+const navActive = ref('');
+const navInfo = ref({});
+
+const handleNavClick = (item: any, val?: string) => {
+  if (val === NavType.NAV) {
+    if (item?.children?.length) {
+      navActive.value = item.id;
+      navInfo.value = item;
+    } else {
+      emit('handle-click', item);
+    }
+  } else if (val === NavType.CODE) {
+    navActive.value = val;
+    navInfo.value = props.codeData.list;
+  } else if (val === NavType.LANG) {
+    navActive.value = val;
+    navInfo.value = props.langData.list;
+  }
+};
+
+const onClick = (url: string, target?: string) => {
+  window.open(url, target ? target : '_self');
+  emit('on-click');
+};
+
+const onClickNav = (val: CodeItemT | LangItemT) => {
+  if (navActive.value === NavType.CODE) {
+    onClick(val.href, val?.target);
+  } else if (navActive.value === NavType.LANG) {
+    emit('lang-click', val);
+  }
+};
+
+onMounted(() => {
+  navActive.value = props.navData[0].id;
+  navInfo.value = props.navData[0];
+});
+
+watch(
+  () => props.navData || props.codeData || props.langData,
+  () => {
+    if (navActive.value === NavType.CODE) {
+      navInfo.value = props.codeData.list;
+    } else if (navActive.value === NavType.LANG) {
+      navInfo.value = props.langData.list;
+    } else {
+      navInfo.value = props.navData.find((item) => item.id === navActive.value);
+    }
+  },
+  {
+    deep: true,
+  }
+);
+</script>
+
+<template>
+  <div class="header-nav" :class="{ active: menuShow }">
+    <div class="o-nav">
+      <ul class="o-nav-list">
+        <li
+          v-for="item in navData"
+          :key="item.id"
+          :class="{
+            active: navActive === item.id,
+          }"
+        >
+          <span @click="handleNavClick(item, 'nav')">{{ item.label }}</span>
+        </li>
+      </ul>
+      <div class="nav-aside">
+        <ul v-if="navActive !== 'code' && navActive !== 'lang'" class="nav-aside-wrapper">
+          <li v-for="item in navInfo.children" :value="item.label" :key="item.label" class="nav-aside-content">
+            <template v-if="item?.children">
+              <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="onClick(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" />
+                    </OIcon>
+                    <OTag v-if="subItem.tag" round="pill" color="danger" size="small" class="content-tag">{{ subItem.tag }}</OTag>
+                  </a>
+                  <div class="desc-container">
+                    <p class="item-desc">{{ subItem.description }}</p>
+                  </div>
+                </div>
+              </div>
+            </template>
+            <template v-else>
+              <a @click="onClick(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" />
+                </OIcon>
+                <OTag v-if="item.tag" round="pill" color="danger" size="small">{{ item.tag }}</OTag>
+              </a>
+            </template>
+          </li>
+        </ul>
+        <div v-else class="nav-aside-wrapper">
+          <a v-for="item in navInfo" :key="item.label" @click="onClickNav(item)" class="source-code-item">
+            <span>{{ item.label }}</span>
+            <OIcon v-if="item.icon">
+              <component :is="item.icon" class="icon" />
+            </OIcon>
+          </a>
+        </div>
+      </div>
+    </div>
+    <!-- 移动端 tool -->
+    <div class="header-tool">
+      <!-- 源码 -->
+      <div
+        v-if="codeData"
+        class="header-tool-item"
+        @click="handleNavClick(null, 'code')"
+        :class="{
+          active: navActive === 'code',
+        }"
+      >
+        {{ codeData.label }}
+      </div>
+      <div
+        v-if="langData"
+        class="header-tool-item"
+        @click="handleNavClick(null, 'lang')"
+        :class="{
+          active: navActive === 'lang',
+        }"
+      >
+        {{ langData.label }}
+      </div>
+      <!-- 语言 -->
+      <div v-if="$slots.tool" class="other-tool">
+        <slot name="tool"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@mixin nav-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  color: var(--o-color-info1);
+
+  &.active {
+    color: var(--o-color-primary1);
+    background: var(--o-color-fill2);
+    font-weight: 500;
+  }
+}
+
+.header-nav {
+  flex: 1;
+  justify-content: space-between;
+  width: 100%;
+  overflow: hidden;
+  height: 100%;
+  background-color: var(--o-color-fill2);
+  transform: translateX(-130%);
+
+  transition-duration: 0.333s;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.5, 0, 0.84, 0.25);
+  display: block;
+  opacity: 0;
+
+  &.active {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(0);
+  }
+}
+
+.o-nav {
+  height: 100%;
+  position: relative;
+  width: 99px;
+  background: var(--o-color-fill1);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .o-nav-list {
+    padding: 0;
+    margin: 0;
+    height: auto;
+
+    > li {
+      position: relative;
+      text-align: center;
+      @include text2;
+      @include nav-item;
+    }
+  }
+}
+
+.nav-aside {
+  position: fixed;
+  background-color: var(--o-color-fill2);
+  top: 0;
+  left: 0;
+  width: calc(100% - 99px);
+  transform: translateX(99px);
+  height: 100%;
+  z-index: 190;
+  .nav-aside-wrapper {
+    overflow-y: auto;
+    padding: 16px 12px 32px;
+    height: 100%;
+    .nav-aside-content {
+      display: block;
+      flex: 0 1 auto;
+
+      & + .nav-aside-content {
+        position: relative;
+        padding-top: var(--o-gap-3);
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          width: 100%;
+          height: 1px;
+          background-color: rgba(var(--o-mixedgray-14), 0.1);
+        }
+      }
+      .content-label {
+        color: var(--o-color-info3);
+        @include text2;
+      }
+
+      .item-not-children {
+        margin-bottom: 12px;
+        display: flex;
+        align-items: center;
+        .o-tag {
+          margin-left: var(--o-gap-2);
+          --layout-pkg-radius: 100vh;
+        }
+        .o-icon {
+          margin-left: var(--o-gap-2);
+        }
+      }
+    }
+
+    .source-code-item {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      color: var(--o-color-info1);
+
+      &.active {
+        color: var(--o-color-primary1);
+      }
+
+      & + .source-code-item {
+        border-top: 1px solid var(--o-color-control4);
+      }
+
+      .icon {
+        margin-left: var(--o-gap-2);
+      }
+    }
+
+    &::-webkit-scrollbar-track {
+      border-radius: 3px;
+    }
+
+    &::-webkit-scrollbar {
+      width: 6px;
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 3px;
+      background: var(--o-color-control1);
+    }
+  }
+
+  .container-mobile {
+    @include text2;
+
+    .o-icon {
+      --icon-size: 16px;
+      margin-left: var(--o-gap-2);
+    }
+  }
+
+  .content-container-mobile {
+    margin-top: var(--o-gap-3);
+
+    &:first-child {
+      margin-top: 8px;
+    }
+    &:last-child {
+      margin-bottom: 12px;
+    }
+
+    .content-subtitle {
+      color: var(--o-color-info1);
+      display: flex;
+      align-items: center;
+      @include text2;
+    }
+
+    .content-tag {
+      margin-left: var(--o-gap-2);
+      --layout-pkg-radius: var(--o-radius-xs);
+    }
+
+    .desc-container {
+      overflow: hidden;
+      position: relative;
+
+      .item-desc {
+        color: var(--o-color-info2);
+        margin-top: var(--o-gap-1);
+        text-align: justify;
+        word-break: normal;
+        @include tip1;
+        @include text-truncate(2);
+        @include respond-to('phone') {
+          @include text1;
+        }
+      }
+    }
+  }
+}
+
+.header-tool {
+  position: absolute;
+  bottom: 36px;
+  left: 0;
+  width: 99px;
+
+  display: flex;
+  height: auto;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.header-tool-item {
+  width: 99px;
+  @include nav-item;
+  @include tip1;
+  @include respond-to('phone') {
+    @include text1;
+  }
+}
+.other-tool {
+  width: 99px;
+  margin-top: 8px;
+  text-align: center;
+}
+</style>

package/src/components/header/index.ts

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