@opendesign-plus-test/components 0.0.1-rc.19 → 0.0.1-rc.191

package/src/components/OFooter.vue

@@ -1,540 +0,0 @@
-<script setup lang="ts">
-import { ODivider } from '@opensig/opendesign';
-
-import ContentWrapper from './common/ContentWrapper.vue';
-
-const props = defineProps({
-  simple: false,
-  atom: undefined,
-  lang: undefined,
-  quickNav: undefined,
-  friendshipLink: undefined,
-  footerLogo: undefined,
-  footerOption: undefined,
-  qrcode: undefined,
-  footerBg: undefined,
-});
-</script>
-
-<template>
-  <div :class="[props.simple ? 'app-footer-simple' : 'app-footer']">
-    <!-- 全局列表式导航 -->
-    <template v-if="!props.simple">
-      <!-- 网站信息 -->
-      <ContentWrapper v-if="$slots.atom || props.atom">
-        <slot name="atom">
-          <div v-if="props.atom" class="atom">
-            <p class="atom-text">{{ props.atom[props.lang].title }}</p>
-            <a :href="props.atom[props.lang].href" target="_blank">
-              <img :src="props.atom[props.lang].img" class="atom-logo" alt="" />
-            </a>
-          </div>
-          <ODivider :style="{ '--o-divider-bd-color': 'rgba(229, 229, 229, 0.12)', '--o-divider-gap': '16px' }" />
-        </slot>
-      </ContentWrapper>
-      <div class="footer-content" :style="{ backgroundImage: `url(${props.footerBg})` }">
-        <ContentWrapper>
-          <!-- 导航链接 -->
-          <template v-if="$slots.quickNav || props.quickNav">
-            <slot name="quickNav">
-              <div v-if="props.quickNav" class="quick-nav">
-                <div v-for="category in props.quickNav[props.lang]" :key="category.title" class="category">
-                  <div class="category-title">
-                    {{ category.title }}
-                  </div>
-                  <ul class="navs">
-                    <li v-for="nav in category.list" :key="nav.title" class="nav">
-                      <a :href="nav.link" target="_blank" rel="noopener noreferrer">{{ nav.title }}</a>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </slot>
-          </template>
-          <!-- 友情链接 -->
-          <template v-if="$slots.friendshipLink || props.friendshipLink">
-            <slot name="friendshipLink">
-              <div v-if="props.friendshipLink" class="friendship-link">
-                <div class="friendship-link-title">
-                  {{ props.friendshipLink.title[props.lang] }}
-                </div>
-                <div class="friendship-link-box">
-                  <a v-for="link in props.friendshipLink.link[props.lang]" :href="link.link" :key="link.link" target="_blank">{{ link.title }}</a>
-                </div>
-              </div>
-            </slot>
-          </template>
-          <!-- 底部信息 版权、隐私声明、联系方式 -->
-          <slot name="footer">
-            <div class="inner" :class="{ 'inner-en': props.lang === 'en' }">
-              <div v-if="props.footerLogo" class="footer-logo">
-                <img class="show-pc" :src="props.footerLogo.logo" alt="" />
-                <img class="show-mo" :src="props.footerLogo.logoMb" alt="" />
-                <p>
-                  <a class="email" :href="`mailto:${props.footerLogo.email}`" target="_blank">{{ props.footerLogo.email }}</a>
-                </p>
-              </div>
-              <div v-if="props.footerOption" class="footer-option">
-                <div class="footer-option-item">
-                  <template v-for="(link, index) in props.footerOption[props.lang].link" :key="link.url">
-                    <a target="_blank" :href="link.url">{{ link.name }}</a>
-                    <ODivider
-                      v-if="index !== props.footerOption[props.lang].link.length - 1"
-                      :style="{
-                        '--o-divider-bd-color': 'var(--o-color-white)',
-                        '--o-divider-label-gap': '0 8px',
-                      }"
-                      direction="v"
-                    />
-                  </template>
-                </div>
-                <p class="license">
-                  <span>{{ props.footerOption[props.lang].licenseText }}</span>
-                  {{ props.footerOption[props.lang].licenseInfo }}
-                </p>
-                <div class="copyright">
-                  <p>{{ props.footerOption[props.lang].copyright }}</p>
-                  <div class="filing">
-                    <a :href="props.footerOption[props.lang].beianLink" target="_blank">
-                      {{ props.footerOption[props.lang].beianInfo1 }}
-                    </a>
-                    <img :src="props.footerOption[props.lang].policeIcon" class="filing-img" />
-                    <p>{{ props.footerOption[props.lang].beianInfo2 }}</p>
-                  </div>
-                </div>
-              </div>
-              <div v-if="props.qrcode" class="footer-right">
-                <div v-if="props.lang === 'zh'" class="code-box">
-                  <div v-for="(item, index) in props.qrcode" :key="index" class="code-pop">
-                    <img :src="item.img" class="code-img" alt="" />
-                    <div class="code-layer">
-                      <img :src="item.code" alt="" />
-                      <p class="txt">{{ item.label }}</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </slot>
-        </ContentWrapper>
-      </div>
-    </template>
-    <!-- 沉浸式底部导航 -->
-    <ContentWrapper v-else>
-      <div class="app-footer-pc">
-        <template v-if="$slots.left || props.footerOption">
-          <slot name="left">
-            <div v-if="props.footerOption" class="footer-left">
-              <span>{{ props.footerOption[props.lang].copyright }}</span>
-              <a class="approval" :href="props.footerOption[props.lang].beianLink" target="_blank" rel="noopener noreferrer">{{
-                props.footerOption[props.lang].beianInfo1
-              }}</a>
-              <img class="police-img" :src="props.footerOption[props.lang].policeIcon" />
-              <span>{{ props.footerOption[props.lang].beianInfo2 }}</span>
-            </div>
-          </slot>
-        </template>
-
-        <template v-if="$slots.right || props.footerOption">
-          <slot name="right">
-            <div v-if="props.footerOption" class="footer-right">
-              <template v-for="(link, index) in props.footerOption[props.lang].link" :key="link.url">
-                <a target="_blank" :href="link.url" class="link">{{ link.name }}</a>
-                <ODivider v-if="index !== props.footerOption[props.lang].link.length - 1" direction="v" />
-              </template>
-            </div>
-          </slot>
-        </template>
-      </div>
-      <div class="app-footer-mb">
-        <template v-if="$slots.right || props.footerOption">
-          <slot name="right">
-            <div v-if="props.footerOption" class="links">
-              <template v-for="(link, index) in props.footerOption[props.lang].link" :key="link.url">
-                <a target="_blank" :href="link.url" class="link">{{ link.name }}</a>
-                <ODivider v-if="index !== props.footerOption[props.lang].link.length - 1" direction="v" />
-              </template>
-            </div>
-          </slot>
-        </template>
-        <slot name="copyright">
-          <div class="copyright">{{ props.footerOption[props.lang].copyright }}</div>
-        </slot>
-        <template v-if="$slots.left || props.footerOption">
-          <slot name="left">
-            <div v-if="props.footerOption" class="approval">
-              <a :href="props.footerOption[props.lang].beianLink" target="_blank" rel="noopener noreferrer">{{ props.footerOption[props.lang].beianInfo1 }}</a>
-              <img class="police-img" :src="props.footerOption[props.lang].policeIcon" />
-              <span>{{ props.footerOption[props.lang].beianInfo2 }}</span>
-            </div>
-          </slot>
-        </template>
-      </div>
-    </ContentWrapper>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.app-footer {
-  overflow: hidden;
-  background: #121214;
-  .atom {
-    text-align: center;
-    margin-top: 24px;
-    position: relative;
-
-    .atom-text {
-      color: var(--o-color-white);
-      @include h4;
-    }
-    .atom-logo {
-      height: 32px;
-      margin-top: 12px;
-
-      @include respond-to('<=pad_v') {
-        height: 30px;
-        margin-top: 16px;
-      }
-    }
-  }
-  .footer-content {
-    @include tip1;
-    background-position: bottom;
-    background-repeat: no-repeat;
-    background-size: cover;
-
-    a {
-      color: rgba(var(--o-white), 0.6);
-      text-decoration: none;
-      white-space: nowrap;
-      @include hover {
-        color: rgba(var(--o-white), 1);
-      }
-    }
-  }
-  .quick-nav {
-    margin: 16px auto 0;
-    display: flex;
-    justify-content: space-between;
-    max-width: 1140px;
-    @include respond-to('<=pad_v') {
-      display: none;
-    }
-    .category {
-      .category-title {
-        @include h4;
-        color: var(--o-color-white);
-      }
-      .navs {
-        display: flex;
-        flex-direction: column;
-        list-style: none outside none;
-        padding-left: 0;
-        .nav {
-          margin-top: 8px;
-          @include tip1;
-        }
-        .nav:first-child {
-          margin-top: 10px;
-        }
-      }
-    }
-  }
-  .friendship-link {
-    margin-top: 16px;
-    padding-bottom: 12px;
-    display: flex;
-    border-bottom: 1px solid rgba(229, 229, 229, 0.12);
-    @include tip2;
-    .friendship-link-title {
-      color: var(--o-color-white);
-      margin-right: 38px;
-      flex-shrink: 0;
-    }
-    a:not(:last-of-type) {
-      margin-right: 24px;
-    }
-
-    @include respond-to('<=pad') {
-      .friendship-link-title {
-        margin-right: 24px;
-        min-width: 48px;
-      }
-      a:not(:last-of-type) {
-        margin-right: 12px;
-      }
-    }
-
-    @include respond-to('<=pad_v') {
-      flex-direction: column;
-      padding-bottom: 16px;
-      .friendship-link-box {
-        margin-top: 12px;
-        display: flex;
-        flex-wrap: wrap;
-      }
-    }
-  }
-  .inner {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 0 32px;
-    position: relative;
-
-    @include respond-to('<=pad_v') {
-      margin: 0 auto;
-      padding: 12px 0 24px;
-      flex-direction: column;
-    }
-  }
-  .inner-en {
-    @include respond-to('<=pad_v') {
-      max-width: fit-content;
-    }
-  }
-  .footer-logo {
-    flex: 1;
-    img {
-      height: 46px;
-    }
-    .show-pc {
-      display: block;
-    }
-    .show-mo {
-      display: none;
-    }
-    .email {
-      color: var(--o-color-white);
-    }
-
-    @include respond-to('<=pad_v') {
-      text-align: center;
-      margin: 16px 0;
-      .show-pc {
-        display: none;
-      }
-      .show-mo {
-        display: inline-block;
-        height: 20px;
-      }
-    }
-  }
-  .footer-option {
-    text-align: center;
-    @include tip1;
-    a {
-      color: var(--o-color-white);
-      display: inline-block;
-    }
-    .footer-option-item {
-      align-items: center;
-    }
-
-    @include respond-to('<=pad_v') {
-      order: -1;
-    }
-  }
-  .license {
-    color: var(--o-color-white);
-    margin-top: 6px;
-    span {
-      color: rgba(var(--o-white), 0.6);
-    }
-
-    @include respond-to('<=pad_v') {
-      margin-top: 4px;
-    }
-  }
-  .copyright {
-    margin-top: 6px;
-    color: rgba(var(--o-white), 0.6);
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    p {
-      margin-bottom: 0;
-    }
-
-    .filing {
-      display: flex;
-      margin-left: 8px;
-      a {
-        color: rgba(var(--o-white), 0.6);
-        @include hover {
-          color: rgba(var(--o-white), 1);
-        }
-      }
-      .filing-img {
-        height: 16px;
-        align-self: center;
-        margin-left: 8px;
-      }
-      p {
-        margin-left: 8px;
-      }
-    }
-
-    @include respond-to('<=pad') {
-      flex-direction: column;
-      .filing {
-        margin-left: 6px;
-      }
-    }
-
-    @include respond-to('<=pad_v') {
-      margin-top: 4px;
-      .filing {
-        margin-left: 4px;
-      }
-    }
-  }
-  .footer-right {
-    flex-shrink: 0;
-    .code-box {
-      display: flex;
-      justify-content: right;
-      .code-pop {
-        cursor: pointer;
-        position: relative;
-        height: 20px;
-        display: block;
-        > img {
-          height: 100%;
-          object-fit: cover;
-        }
-        .code-layer {
-          position: absolute;
-          top: -105px;
-          left: -32px;
-          z-index: 99;
-          display: none;
-          background: var(--o-color-white);
-          padding: 6px;
-          img {
-            width: 78px;
-            height: 78px;
-          }
-          .txt {
-            margin-top: 8px;
-            color: var(--o-color-white);
-            display: none;
-          }
-          &::after {
-            border: 10px solid transparent;
-            content: '';
-            border-top-color: var(--o-color-white);
-            position: absolute;
-            bottom: -20px;
-            left: 50%;
-            transform: translateX(-50%);
-            display: block;
-          }
-        }
-        @include hover {
-          .code-layer {
-            display: block;
-          }
-        }
-
-        @include respond-to('pad_h') {
-          height: 18px;
-        }
-      }
-      .code-pop + .code-pop {
-        margin-left: 16px;
-      }
-    }
-
-    @include respond-to('<=pad_v') {
-      .code-box {
-        justify-content: space-between;
-        .code-pop {
-          height: auto;
-          > img {
-            display: none;
-          }
-          .code-layer {
-            display: block;
-            position: initial;
-            background: none;
-            padding: 0;
-            text-align: center;
-            &::after {
-              display: none !important;
-            }
-            .txt {
-              display: block;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.app-footer-simple {
-  background: var(--o-color-fill2);
-  .police-img {
-    width: 16px;
-    margin: 0 8px;
-  }
-  .app-footer-pc {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 12px;
-    color: var(--o-color-info3);
-    @include tip1;
-    .footer-left {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      margin-top: 2px;
-    }
-    .approval {
-      margin-left: 8px;
-    }
-    a {
-      color: var(--o-color-info3);
-      @include hover {
-        color: var(--o-color-link1);
-      }
-    }
-    .footer-right {
-      flex-shrink: 0;
-      margin-left: 16px;
-    }
-  }
-  .app-footer-mb {
-    display: none;
-    margin-top: 16px;
-    text-align: center;
-    color: var(--o-color-info4);
-    @include tip1;
-    .copyright {
-      margin-top: 4px;
-    }
-    .approval {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin-top: 4px;
-    }
-    a {
-      color: var(--o-color-info4);
-      @include hover {
-        color: var(--o-color-link1);
-      }
-    }
-  }
-  @include respond-to('<=pad') {
-    .app-footer-pc {
-      display: none;
-    }
-    .app-footer-mb {
-      display: block;
-    }
-  }
-}
-</style>

package/src/components/OHeader.vue

@@ -1,96 +0,0 @@
-<script setup lang="ts">
-import ContentWrapper from './common/ContentWrapper.vue';
-import HeaderEulerNav from './common/HeaderEulerNav.vue';
-import HeaderUbmcNav from './common/HeaderUbmcNav.vue';
-
-export interface OHeaderT {
-  (e: 'go-home'): void;
-}
-
-const emit = defineEmits<OHeaderT>();
-
-const props = defineProps({
-  logo: undefined,
-  lang: undefined,
-  community: undefined,
-  navData: undefined,
-  bgLeft: undefined,
-  bgRight: undefined,
-  tagMap: undefined,
-});
-
-const goHome = () => {
-  emit('go-home');
-};
-</script>
-
-<template>
-  <div class="header">
-    <ContentWrapper class="header-wrap">
-      <!-- logo -->
-      <div class="header-logo" @click="goHome">
-        <slot name="logo">
-          <img v-if="props.logo" class="logo" alt="logo" :src="props.logo" />
-        </slot>
-      </div>
-      <!-- openEuler nav -->
-      <div v-if="props.community === 'openEuler'" class="header-nav">
-        <slot name="nav">
-          <HeaderEulerNav v-if="props.navData" :nav-data="props.navData" :bg-left="props.bgLeft" :bg-right="props.bgRight" />
-        </slot>
-      </div>
-      <!-- openUBMC nav -->
-      <div v-if="props.community === 'openUBMC'" class="header-content">
-        <slot name="nav">
-          <HeaderUbmcNav v-if="props.navData" :nav-data="props.navData" :has-perm="true" :tag-map="tagMap" />
-        </slot>
-      </div>
-      <!-- toolbar -->
-      <div v-if="$slots.toolbar" class="header-toolbar">
-        <slot name="toolbar"></slot>
-      </div>
-    </ContentWrapper>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.header {
-  background-color: var(--o-color-fill2);
-  position: relative;
-  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: 72px;
-}
-.header-logo {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  margin-right: 24px;
-  flex-shrink: 0;
-  @include respond-to('<=pad_v') {
-    width: 100%;
-  }
-}
-.logo {
-  height: 32px;
-}
-.header-nav {
-  flex: 1;
-  height: 100%;
-  overflow: hidden;
-}
-.header-content {
-  flex: 1;
-  min-width: 0;
-  height: 100%;
-}
-.header-toolbar {
-  height: 100%;
-}
-</style>