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

package/src/components/header/components/HeaderNavMoblie.vue

@@ -1,346 +0,0 @@
-<script lang="ts" setup>
-import { ref, onMounted, watch } from 'vue';
-import { OIcon, OTag } from '@opensig/opendesign';
-
-const props = defineProps({
-  menuShow: {
-    type: Boolean,
-    default() {
-      return false;
-    },
-  },
-  navData: undefined,
-  codeData: undefined,
-});
-
-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.list;
-  } else {
-    navActive.value = item.id;
-    navInfo.value = item;
-  }
-};
-
-const emit = defineEmits(['link-click']);
-const linkClick = (url: string, target?: string) => {
-  window.open(url, target ? target : '_self');
-  emit('link-click');
-};
-
-onMounted(() => {
-  navActive.value = props.navData[0].id;
-  navInfo.value = props.navData[0];
-});
-
-watch(
-  () => props.navData || props.codeData,
-  () => {
-    navInfo.value = navActive.value === 'source_code' ? props.codeData.list : props.navData.find((item) => item.id === navActive.value);
-  },
-  {
-    deep: true,
-  }
-);
-</script>
-
-<template>
-  <div class="header-content-mb">
-    <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)">{{ item.label }}</span>
-          </li>
-        </ul>
-        <div class="nav-aside">
-          <ul v-if="navActive !== 'source_code'" class="nav-aside-wrapper">
-            <li v-for="item in navInfo.children" :value="item.label" :title="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="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" />
-                      </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="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" />
-                  </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="linkClick(item.href, item?.target)" 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-code"
-          @click="handleNavClick(null)"
-          :class="{
-            active: navActive === 'source_code',
-          }"
-        >
-          {{ codeData.label }}
-        </div>
-        <div v-if="$slots.tool">
-          <slot name="tool"></slot>
-        </div>
-      </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-content-mb {
-  position: fixed;
-  top: var(--o-header-height);
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: var(--o-color-fill2);
-  z-index: 98;
-}
-
-.header-nav {
-  flex: 1;
-  justify-content: space-between;
-  width: 100%;
-  position: fixed;
-  left: 0;
-  overflow: hidden;
-  top: var(--o-header-height);
-  height: calc(100vh - var(--o-header-height));
-  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-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 {
-    margin-top: 8px;
-    @include text2;
-
-    .icon {
-      height: 16px;
-      width: 16px;
-      margin-left: var(--o-gap-2);
-    }
-  }
-
-  .content-container-mobile {
-    margin-top: var(--o-gap-3);
-
-    &: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 text1;
-        @include text-truncate(2);
-      }
-    }
-  }
-}
-
-.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-code {
-  width: 99px;
-  @include nav-item;
-  @include text1;
-}
-</style>