@opendesign-plus/components 0.0.1-rc.35 → 0.0.1-rc.36

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

@@ -1,278 +0,0 @@
-<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-grey-1), 0) 0%, rgba(var(--o-grey-1), 1) 100%);
-    z-index: 0;
-  }
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  &.dark {
-    &::after {
-      background-image: linear-gradient(90deg, rgba(var(--o-grey-4), 0) 0%, rgba(var(--o-grey-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('laptop') {
-      padding: 22px 12px;
-    }
-    @include respond('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

@@ -1,380 +0,0 @@
-<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-grey-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('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('phone') {
-    @include text1;
-  }
-}
-.other-tool {
-  width: 99px;
-  margin-top: 8px;
-  text-align: center;
-}
-</style>

package/src/components/header/index.ts

@@ -1,18 +0,0 @@
-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 * from './types';
-export { OHeader, OHeaderMobile };