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

package/src/components/header/OHeaderMoblie.vue

@@ -1,152 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { OIcon, OIconArrowLeft } from '@opensig/opendesign';
-
-import ContentWrapper from '../common/ContentWrapper.vue';
-import HeaderNavMoblie from './components/HeaderNavMoblie.vue';
-
-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({
-  logo: undefined,
-  navData: undefined,
-  codeData: undefined,
-  isSimpleHeader: undefined,
-  headerTitle: undefined,
-});
-
-const goBack = () => {
-  emit('go-back');
-};
-const goHome = () => {
-  emit('go-home');
-};
-
-const menuShow = ref(false);
-const menuPanel = () => {
-  setTimeout(() => {
-    menuShow.value = !menuShow.value;
-    document.body.style.overflow = menuShow.value ? 'hidden' : '';
-  }, 200);
-};
-
-const mobileClick = () => {
-  menuPanel();
-};
-</script>
-
-<template>
-  <div class="header">
-    <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>
-        <HeaderNavMoblie ref="mobileNav" :nav-data="navData" :code-data="codeData" :menu-show="menuShow" @link-click="mobileClick">
-          <template #tool>
-            <slot name="tool"></slot>
-          </template>
-        </HeaderNavMoblie>
-        <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>
-</template>
-
-<style lang="scss" scoped>
-.header {
-  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);
-  --o-header-height: 56px;
-}
-.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;
-}
-</style>

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>