@opendesign-plus/components 0.0.1-rc.16

package/src/components/common/HeaderNavMoblie.vue

@@ -0,0 +1,344 @@
+<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) {
+    navActive.value = 'source_code';
+    navInfo.value = props.codeData;
+  } else {
+    navActive.value = item.id;
+    navInfo.value = item;
+  }
+};
+
+const emit = defineEmits(['link-click']);
+const linkClick = (url: string, target: string) => {
+  window.open(url, target);
+  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 : 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, '_blank')" 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, '_blank')" 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, '_blank')" 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',
+          }"
+        >
+          源码
+        </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);
+  }
+}
+
+.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;
+
+  &.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 tip1;
+      @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);
+        font-weight: 500;
+        @include tip1;
+      }
+
+      .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 {
+    color: var(--o-color-primary1);
+    margin-top: 8px;
+    @include text2;
+
+    .icon {
+      height: 16px;
+      width: 16px;
+      margin-left: var(--o-gap-2);
+    }
+  }
+
+  .content-container-mobile {
+    margin-right: var(--o-gap-1);
+    margin-top: var(--o-gap-3);
+
+    &:last-child {
+      margin-bottom: 12px;
+    }
+
+    .content-subtitle {
+      font-weight: 500;
+      color: var(--o-color-primary1);
+      display: flex;
+      align-items: center;
+      @include tip1;
+    }
+
+    .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 tip2;
+        @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 h4;
+}
+</style>