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

package/src/components/header/OHeaderMobile.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OIcon, OIconArrowLeft } from '@opensig/opendesign';
+
+import ContentWrapper from '../common/ContentWrapper.vue';
+import HeaderNavMobile from './components/HeaderNavMobile.vue';
+
+import { type NavT } from './types.ts';
+
+import IconClose from '~icons/components/icon-close.svg';
+import IconMenu from '~icons/components/icon-header-menu.svg';
+
+export interface OHeaderT {
+  (e: 'go-back'): void;
+  (e: 'go-home'): void;
+}
+
+const emit = defineEmits<OHeaderT>();
+
+const props = defineProps<NavT>();
+
+const goBack = () => {
+  emit('go-back');
+};
+const goHome = () => {
+  emit('go-home');
+};
+
+const menuShow = ref(false);
+const menuPanel = () => {
+  setTimeout(() => {
+    menuShow.value = !menuShow.value;
+  }, 200);
+};
+
+const mobileClick = () => {
+  menuPanel();
+};
+
+const handleClick = () => {
+  menuPanel();
+};
+</script>
+
+<template>
+  <div class="header">
+    <div class="header-box">
+      <ContentWrapper class="header-wrap">
+        <!-- 二级路由简单头部 -->
+        <div v-if="isSimpleHeader" class="header-simple">
+          <div class="simple-header-left">
+            <OIcon @click="goBack">
+              <OIconArrowLeft />
+            </OIcon>
+            <div v-if="headerTitle" class="header-title">
+              {{ headerTitle }}
+            </div>
+          </div>
+          <div v-if="$slots.rightConfig" class="simple-header-right">
+            <slot name="rightConfig"></slot>
+          </div>
+        </div>
+        <template v-else>
+          <div class="header-left">
+            <OIcon @click="menuPanel">
+              <IconMenu v-if="!menuShow" />
+              <IconClose v-else />
+            </OIcon>
+          </div>
+          <div class="header-center">
+            <div class="header-logo" @click="goHome">
+              <slot name="logo">
+                <img v-if="props.logo" class="logo" alt="logo" :src="props.logo" />
+              </slot>
+            </div>
+          </div>
+          <div class="header-right">
+            <slot name="toolbar"></slot>
+          </div>
+        </template>
+      </ContentWrapper>
+    </div>
+    <div class="header-content-mb" :class="{ 'header-content-active': menuShow }">
+      <HeaderNavMobile
+        ref="mobileNav"
+        :nav-data="navData"
+        :code-data="codeData"
+        :lang-data="langData"
+        :menu-show="menuShow"
+        @handle-click="handleClick"
+        @on-click="mobileClick"
+      >
+        <template #tool>
+          <slot name="tool"></slot>
+        </template>
+      </HeaderNavMobile>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header {
+  --o-header-height: 56px;
+}
+.header-box {
+  background-color: var(--o-color-fill2);
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  z-index: 999;
+  box-shadow: 0 3px 9px 0 rgba(0, 18, 85, 0.08);
+  backdrop-filter: blur(5px);
+}
+.header-wrap {
+  display: flex;
+  align-items: center;
+  height: var(--o-header-height);
+  justify-content: space-between;
+  position: relative;
+}
+.header-simple {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .o-icon {
+    font-size: 24px;
+  }
+  .simple-header-left {
+    display: flex;
+    gap: 16px;
+    color: var(--o-color-info1);
+    overflow: hidden;
+    flex-grow: 1;
+    .header-title {
+      color: var(--o-color-info1);
+      font-weight: 500;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      @include text2;
+    }
+  }
+  .simple-header-right {
+    flex-shrink: 0;
+    color: var(--o-color-info1);
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+  }
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  .o-icon {
+    --icon-size: 24px;
+  }
+}
+.logo {
+  height: 24px;
+  width: auto;
+}
+
+.header-content-mb {
+  position: fixed;
+  top: var(--o-header-height);
+  left: 0;
+  height: 0;
+  z-index: 998;
+}
+.header-content-active {
+  width: 100%;
+  height: calc(100vh - var(--o-header-height));
+}
+</style>

package/src/components/header/components/HeaderContent.vue

@@ -6,6 +6,8 @@ import ContentWrapper from '../../common/ContentWrapper.vue';
 
 import { useLocale, useTheme } from '@opendesign-plus/composables';
 
+import { type NavLiItemT } from '../types.ts';
+
 export interface OHeaderEmitsT {
   (e: 'handle-mouseenter-sub', val: any): void;
   (e: 'handle-mouseleave-sub', val: any): void;
@@ -13,14 +15,7 @@ export interface OHeaderEmitsT {
 
 const emit = defineEmits<OHeaderEmitsT>();
 
-const props = defineProps({
-  itemData: undefined,
-  itemVisible: undefined,
-  community: undefined,
-  bgLeft: undefined,
-  bgRight: undefined,
-  hoverIndex: undefined,
-});
+const props = defineProps<NavLiItemT>();
 
 const { locale } = useLocale();
 const { theme } = useTheme();
@@ -142,9 +137,7 @@ const onClickShortcut = (item: any) => {
                     <p class="review-label">
                       {{ shortcut.label }}
                     </p>
-                    <div class="review-property">
-                      <span>{{ shortcut.remark }}</span>
-                    </div>
+                    <div class="review-property">{{ shortcut.remark }}</div>
                   </div>
                 </a>
               </template>
@@ -939,4 +932,190 @@ const onClickShortcut = (item: any) => {
     z-index: -1;
   }
 }
+
+.openubmc {
+  &.download {
+    .item-sub {
+      margin-left: 80px;
+      &:nth-of-type(1) {
+        margin-left: 0;
+        .content-container {
+          width: 464px;
+          :deep(.content-item) {
+            margin-left: 64px;
+            &:nth-child(2n + 1) {
+              margin-left: 0;
+            }
+            &:nth-of-type(2) {
+              margin-top: 0;
+            }
+          }
+        }
+      }
+
+      @include respond-to('<=laptop') {
+        margin-left: 24px;
+        &:nth-of-type(1) {
+          .content-container {
+            width: 364px;
+            :deep(.content-item) {
+              margin-left: 24px;
+            }
+          }
+        }
+        &:nth-of-type(3) {
+          .content-container {
+            width: 170px;
+          }
+        }
+      }
+
+      @include respond-to('pad_h') {
+        &:nth-of-type(1) {
+          .content-container {
+            width: 344px;
+          }
+        }
+      }
+    }
+
+    @include respond-to('pad_h') {
+      .content-left {
+        .item-sub {
+          max-width: 25%;
+          flex: 1 1 auto;
+          .content-container {
+            width: auto;
+            :deep(.content-item) {
+              width: 100%;
+            }
+          }
+          &:nth-of-type(1) {
+            max-width: 50%;
+            .content-container {
+              :deep(.content-item) {
+                width: calc(50% - 12px);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  &.development,
+  &.learn,
+  &.support,
+  &.trends {
+    .content-item {
+      margin-left: 80px;
+      margin-top: 0;
+      &:first-of-type {
+        margin-left: 0;
+      }
+    }
+  }
+  &.docs {
+    .item-sub {
+      &:nth-of-type(1) {
+        .content-container {
+          :deep(.content-item) {
+            margin-right: 64px;
+            &:nth-child(-n + 4) {
+              margin-top: 0;
+            }
+            &:nth-of-type(4) {
+              margin-right: 0;
+            }
+
+            @include respond-to('<=laptop') {
+              margin-right: 24px;
+            }
+          }
+          @media (min-width: 1441px) and (max-width: 1505px) {
+            :deep(.content-item) {
+              margin-right: 40px;
+            }
+          }
+          @include respond-to('>laptop') {
+            width: 992px;
+          }
+          @include respond-to('laptop') {
+            width: 752px;
+          }
+          @include respond-to('pad_h') {
+            width: auto;
+          }
+        }
+      }
+    }
+
+    @include respond-to('pad_h') {
+      .content-left {
+        .item-sub {
+          max-width: 80%;
+          flex: 1 1 auto;
+          .content-container {
+            :deep(.content-item) {
+              width: calc(25% - 18px);
+            }
+          }
+        }
+      }
+    }
+  }
+  &.community {
+    .item-sub {
+      margin-left: 48px;
+      .content-container {
+        width: 448px;
+        :deep(.content-item) {
+          margin-left: 48px;
+          &:nth-child(2n + 1) {
+            margin-left: 0;
+          }
+          &:nth-child(-n + 2) {
+            margin-top: 0;
+          }
+        }
+      }
+      &:nth-of-type(1) {
+        margin-left: 0;
+      }
+
+      @include respond-to('<=laptop') {
+        margin-left: 24px;
+        .content-container {
+          :deep(.content-item) {
+            margin-left: 24px;
+          }
+        }
+      }
+      @include respond-to('laptop') {
+        .content-container {
+          width: 364px;
+        }
+      }
+
+      @include respond-to('pad_h') {
+        .content-container {
+          width: auto;
+        }
+      }
+    }
+
+    @include respond-to('pad_h') {
+      .content-left {
+        .item-sub {
+          max-width: 40%;
+          flex: 1 1 auto;
+          .content-container {
+            :deep(.content-item) {
+              width: calc(50% - 24px);
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>

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

@@ -5,6 +5,8 @@ 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';
@@ -18,11 +20,7 @@ export interface OHeaderEmitsT {
 const emit = defineEmits<OHeaderEmitsT>();
 const { isDark } = useTheme();
 
-const props = defineProps({
-  navData: undefined,
-  activeIndex: undefined,
-  hoverId: undefined,
-});
+const props = defineProps<NavLiT>();
 
 const navRef = ref();
 const navListRef = ref();