@opendesign-plus-test/components 0.0.1-rc.22 → 0.0.1-rc.221

package/src/draft/Footer.vue

@@ -1,512 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, type PropType } from 'vue';
-
-import { linksData2, quickNav, friendshipLinks, filingData, localeData } from '@/data/footer';
-
-import { ODivider } from '@opensig/opendesign';
-import ContentWrapper from './ContentWrapper.vue';
-
-import LogoFooter from '@/assets/category/footer/footer-logo2.png';
-import LogoFooter1 from '@/assets/category/footer/footer-logo1.png';
-import LogoAtom from '@/assets/category/footer/atom-logo.png';
-
-// 公众号、小助手
-import CodeTitleXzs from '@/assets/category/footer/img-xzs.png';
-import CodeTitleGzh from '@/assets/category/footer/img-gzh.png';
-import CodeImgXzs from '@/assets/category/footer/code-xzs.png';
-import CodeImgZgz from '@/assets/category/footer/code-zgz.png';
-
-import { useLocale } from '@/composables/useLocale';
-
-const { t } = useLocale();
-
-const props = defineProps({
-  lang: {
-    type: String as PropType<'zh' | 'en'>,
-    default: document.documentElement.getAttribute('lang') || 'zh',
-  },
-  target: {
-    type: String,
-    default: '_blank',
-  },
-});
-
-const locale = ref({});
-watch(
-  () => props.lang,
-  (val) => {
-    locale.value = localeData[val];
-  },
-  { immediate: true }
-);
-
-// 公众号、小助手
-const footerCodeList = [
-  {
-    img: CodeTitleGzh,
-    code: CodeImgZgz,
-    label: locale.value.qrAssistant,
-  },
-  {
-    img: CodeTitleXzs,
-    code: CodeImgXzs,
-    label: locale.value.qrCode,
-  },
-];
-</script>
-
-<template>
-  <div id="tour_footer" class="footer">
-    <ContentWrapper :pc-top="0" :mobile-top="0">
-      <div class="atom">
-        <p class="atom-text">{{ t('footer.atomText') }}</p>
-        <a href="https://openatom.cn" target="_blank">
-          <img :src="LogoAtom" class="atom-logo" alt="" />
-        </a>
-      </div>
-      <ODivider
-        :style="{
-          '--o-divider-bd-color': 'rgba(229, 229, 229, 0.12)',
-          '--o-divider-gap': '16px',
-        }"
-      />
-    </ContentWrapper>
-    <div class="footer-content">
-      <ContentWrapper :pc-top="0" :mobile-top="0">
-        <div class="quick-nav">
-          <div v-for="category in quickNav[lang]" class="category" :key="category.title">
-            <div class="category-title">
-              {{ category.title }}
-            </div>
-            <ul class="navs">
-              <li v-for="nav in category.list" class="nav" :key="nav.link">
-                <a :href="nav.link" target="_blank" rel="noopener noreferrer">{{ nav.title }}</a>
-              </li>
-            </ul>
-          </div>
-        </div>
-        <div class="friendship-link">
-          <div class="friendship-link-title">
-            {{ locale.friendshipLink }}
-          </div>
-          <div class="friendship-link-box">
-            <a v-for="link in friendshipLinks[lang]" class="friendship-link-item" :href="link.link" :key="link.link" target="_blank">{{ link.title }}</a>
-          </div>
-        </div>
-        <div class="inner">
-          <div class="footer-logo">
-            <img class="show-pc" :src="LogoFooter" alt="" />
-            <img class="show-mo" :src="LogoFooter1" alt="" />
-            <p>
-              <a class="email" href="mailto:contact@openeuler.io" target="_blank"> contact@openeuler.io </a>
-            </p>
-          </div>
-          <div class="footer-option">
-            <div class="footer-option-item">
-              <template v-for="(link, index) in linksData2[lang]" :key="link.URL">
-                <a :target="target" :href="link.URL" class="link">{{ link.NAME }}</a>
-                <ODivider
-                  v-if="index !== linksData2[lang].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>{{ locale.license_1 }}</span>
-              {{ locale.license_2 }}
-            </p>
-            <div class="copyright">
-              <p>{{ locale.copyRight1 }} {{ new Date().getFullYear() }} {{ locale.copyRight2 }},</p>
-              <div class="filing">
-                <a :href="filingData.link" target="_blank" class="filing-link">
-                  {{ locale.filingText1 }}
-                </a>
-                <img :src="filingData.icon" class="filing-img" />
-                <p>{{ locale.filingText2 }}</p>
-              </div>
-            </div>
-          </div>
-          <div class="footer-right">
-            <div v-if="lang === 'zh'" class="code-box">
-              <div v-for="(item, index) in footerCodeList" :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>
-      </ContentWrapper>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-$color: #fff;
-.o-divider {
-  @include tip2;
-}
-.footer {
-  &.is-doc {
-    margin-left: 300px;
-    @media (max-width: 1100px) {
-      margin-left: 0;
-    }
-  }
-  overflow: hidden;
-  background: #121214;
-  :deep(.app-content) {
-    padding-bottom: 0;
-  }
-  .atom {
-    text-align: center;
-    margin-top: 24px;
-    position: relative;
-
-    .atom-text {
-      color: $color;
-      @include h4;
-    }
-    .atom-logo {
-      height: 32px;
-      margin-top: 12px;
-      @include respond-to('<=pad_v') {
-        margin-top: 16px;
-        height: 30px;
-      }
-    }
-  }
-
-  .footer-content {
-    @include tip1;
-    background: url('@/assets/category/footer/footer-bg.png') no-repeat bottom center;
-    @include respond-to('<=pad_v') {
-      background: url('@/assets/category/footer/footer-bg-mo.png') no-repeat bottom center;
-    }
-    .quick-nav {
-      margin: 16px auto 0;
-      display: flex;
-      justify-content: space-between;
-      max-width: 1140px;
-      @include respond-to('<=pad_v') {
-        display: none;
-      }
-      .category {
-        text-align: left;
-        .category-title {
-          @include h4;
-          color: var(--o-color-white);
-        }
-        .navs {
-          display: flex;
-          flex-direction: column;
-          .nav {
-            margin-top: 8px;
-            @include tip1;
-            a {
-              color: rgba(255, 255, 255, 0.6);
-              @include hover {
-                color: rgba(255, 255, 255, 1);
-              }
-            }
-          }
-          .nav:first-child {
-            margin-top: 10px;
-          }
-        }
-      }
-    }
-    .friendship-link {
-      margin-top: 16px;
-      padding-bottom: 12px;
-      display: flex;
-      @include tip2;
-      //TODO: 颜色变量
-      border-bottom: 1px solid rgba(229, 229, 229, 0.12);
-      @include respond-to('<=pad_v') {
-        flex-direction: column;
-        padding-bottom: 16px;
-        .friendship-link-box {
-          margin-top: 12px;
-        }
-      }
-      .friendship-link-title {
-        color: var(--o-color-white);
-        margin-right: 38px;
-        @include respond-to('<=pad') {
-          margin-right: 24px;
-          min-width: 48px;
-        }
-      }
-      .friendship-link-item {
-        white-space: nowrap;
-        &:not(:last-of-type) {
-          margin-right: 24px;
-          @include respond-to('<=pad') {
-            margin-right: 12px;
-          }
-        }
-        color: rgba(255, 255, 255, 0.6);
-        @include hover {
-          color: rgba(255, 255, 255, 1);
-        }
-      }
-    }
-    .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;
-        justify-content: space-between;
-        align-items: center;
-      }
-    }
-  }
-  .footer-logo {
-    flex: 1;
-    img {
-      height: 46px;
-    }
-    .show-pc {
-      display: block;
-    }
-    .show-mo {
-      display: none;
-    }
-    @include respond-to('<=pad_v') {
-      text-align: center;
-      margin: 16px 0;
-      .show-pc {
-        display: none;
-      }
-      .show-mo {
-        display: inline-block;
-        height: 20px;
-      }
-      p {
-        margin-top: 4px;
-      }
-    }
-  }
-
-  .copyright {
-    margin-top: 6px;
-    color: rgba(255, 255, 255, 0.6);
-    display: flex;
-    gap: var(--o-gap-2);
-
-    @include respond-to('<=pad') {
-      flex-direction: column;
-      gap: 6px;
-    }
-    @include respond-to('<=pad_v') {
-      margin-top: 4px;
-      gap: 4px;
-    }
-
-    .filing {
-      display: flex;
-      gap: var(--o-gap-2);
-
-      .filing-link {
-        color: rgba(255, 255, 255, 0.6);
-        @include hover {
-          color: rgba(255, 255, 255, 1);
-        }
-      }
-      .filing-img {
-        height: 16px;
-        width: 16px;
-        align-self: center;
-      }
-    }
-  }
-  .license {
-    color: $color;
-    margin-top: 6px;
-    span {
-      color: rgba(255, 255, 255, 0.6);
-    }
-    @include respond-to('<=pad_v') {
-      margin-top: 4px;
-    }
-  }
-
-  .footer-option {
-    text-align: center;
-    @include tip1;
-    .link {
-      color: $color;
-      display: inline-block;
-    }
-    .footer-option-item {
-      align-items: center;
-    }
-    @include respond-to('<=pad_v') {
-      order: -1;
-    }
-  }
-
-  .footer-right {
-    flex: 1;
-    .code-box {
-      display: flex;
-      justify-content: right;
-      gap: 16px;
-      .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: #fff;
-          padding: 6px;
-          img {
-            width: 78px;
-            height: 78px;
-          }
-          .txt {
-            margin-top: 8px;
-            color: $color;
-            display: none;
-          }
-          &::after {
-            border: 10px solid transparent;
-            content: '';
-            border-top-color: #fff;
-            position: absolute;
-            bottom: -20px;
-            left: 50%;
-            transform: translateX(-50%);
-            display: block;
-          }
-          @include respond-to('<=pad_v') {
-            display: block;
-            position: initial;
-            background: none;
-            padding: 0;
-            text-align: center;
-            &::after {
-              display: none !important;
-            }
-            .txt {
-              display: block;
-            }
-          }
-        }
-        @include hover {
-          .code-layer {
-            display: block;
-          }
-        }
-        @include respond-to('pad_h') {
-          height: 18px;
-        }
-        @include respond-to('<=pad_v') {
-          height: auto;
-          > img {
-            display: none;
-          }
-        }
-      }
-      @include respond-to('<=pad_v') {
-        justify-content: space-between;
-      }
-    }
-    .footer-links {
-      display: flex;
-      justify-content: right;
-      align-items: center;
-      gap: 12px;
-      margin-left: 24px;
-      .links-logo {
-        display: flex;
-        align-items: center;
-        height: 26px;
-        padding: 0 14px;
-        background-color: #2b2b2f;
-        border-radius: var(--o-radius-xs);
-        @include respond-to('pad_h') {
-          height: 26px;
-          padding: 0 8px;
-        }
-        @include respond-to('<=pad_v') {
-          height: 26px;
-          padding: 0 8px;
-        }
-        .logo {
-          object-fit: cover;
-        }
-      }
-      @include respond-to('pad_h') {
-        margin-left: 32px;
-      }
-      @include respond-to('<=pad_v') {
-        justify-content: center;
-        display: flex;
-        text-align: center;
-        margin-left: 0;
-      }
-      &.iszh {
-        margin-top: 12px;
-        gap: 12px 8px;
-        .links-logo {
-          padding: 0 9px;
-          height: 20px;
-        }
-        @include respond-to('<=pad') {
-          display: flex;
-          flex-wrap: wrap;
-          text-align: center;
-        }
-      }
-    }
-
-    p {
-      color: $color;
-      margin-top: var(--o-spacing-h8);
-    }
-  }
-
-  .email {
-    color: $color;
-  }
-}
-
-[lang='en'] {
-  .footer {
-    .footer-content {
-      .inner {
-        @include respond-to('<=pad_v') {
-          margin: 0 auto;
-          max-width: fit-content;
-          padding: 14px 0 24px;
-          flex-direction: column;
-          justify-content: space-between;
-          align-items: center;
-        }
-      }
-    }
-  }
-}
-</style>

package/src/draft/HorizontalAnchor.vue

@@ -1,165 +0,0 @@
-<script lang="ts" setup>
-import { ref, type PropType } from 'vue';
-
-import { useIntersectionObserver } from '@vueuse/core';
-
-import { OAnchor, OAnchorItem } from '@opensig/opendesign';
-import ContentWrapper from './ContentWrapper.vue';
-
-const target = ref(null);
-const showAnchor = ref(false);
-defineProps({
-  anchorData: {
-    type: Object,
-    required: true,
-    default: () => null,
-  },
-  wrapClass: {
-    type: [String, Array] as PropType<string | any[]>,
-    default: undefined,
-  },
-  transparent: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-useIntersectionObserver(target, ([entry]) => {
-  showAnchor.value = !entry?.isIntersecting;
-});
-</script>
-<template>
-  <div v-show="showAnchor" :class="[transparent ? 'anchor-transparent' : 'anchor-header', wrapClass]">
-    <ContentWrapper :style="{
-      '--content-wrapper-vertical-paddingTop': '0',
-      '--content-wrapper-vertical-paddingBottom': '0',
-    }">
-      <div class="anchor-container">
-        <OAnchor container="#app > .o-scroller > .o-scroller-container" :targetOffset="160">
-          <OAnchorItem v-for="anchor in anchorData" :key="anchor.id" :title="anchor.title" :href="`#${anchor.id}`">
-          </OAnchorItem>
-        </OAnchor>
-      </div>
-    </ContentWrapper>
-  </div>
-  <div ref="target"></div>
-</template>
-
-<style lang="scss" scoped>
-.anchor-header {
-  position: fixed;
-  top: 0;
-  height: 68px;
-  z-index: 10;
-  background-color: var(--o-color-control2-light);
-  @include text1;
-
-  @include respond-to('<=pad_v') {
-    top: 48px;
-    height: 54px;
-  }
-
-  .anchor-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    max-width: 920px;
-    margin: 0 auto;
-    height: 68px;
-
-    @include respond-to('<=pad_v') {
-      height: 54px;
-    }
-
-
-    :deep(.o-anchor) {
-      width: 100%;
-
-      .o-anchor-line {
-        display: none;
-      }
-
-      .o-anchor-items {
-        display: flex;
-        max-width: 920px;
-        width: 100%;
-        gap: var(--o-gap-4);
-        background-color: var(--o-color-control3-light);
-        padding: var(--o-gap-1);
-        border-radius: var(--o-radius-xs);
-      }
-
-      .o-anchor-item {
-        flex: 1 1 auto;
-        --anchor-item-link-bg-color-hover: transparent;
-        --anchor-item-link-color-hover: --anchor-item-link-gap: 0;
-        --anchor-item-link-radius: var(--o-radius-xs);
-        --anchor-item-min-width: 60px;
-        --anchor-item-link-gap: 0px;
-
-        .o-anchor-item-link {
-          @include text1;
-          --anchor-item-link-bg-color-active: var(--o-color-control5-light);
-          --anchor-item-link-color-active: var(--o-color-primary1);
-          --anchor-item-link-color-hover: var(--o-color-primary1);
-          --anchor-item-link-color: var(--o-color-info2);
-          --anchor-item-link-padding: 6px 0;
-          font-weight: 500;
-          display: block;
-          text-align: center;
-        }
-      }
-    }
-  }
-}
-
-.anchor-transparent {
-  position: fixed;
-  top: 0;
-  height: 48px;
-  backdrop-filter: blur(10px);
-  z-index: 10;
-  background-color: rgba($color: var(--o-mixedgray-1), $alpha: 0.25);
-  @include text1;
-
-  @include respond-to('<=pad_v') {
-    display: none;
-  }
-
-  .anchor-container {
-    display: flex;
-    align-items: center;
-    height: 48px;
-
-    :deep(.o-anchor) {
-      .o-anchor-line {
-        display: none;
-      }
-
-      .o-anchor-items {
-        display: flex;
-        flex-wrap: wrap;
-      }
-
-      .o-anchor-item {
-        --anchor-item-width: auto;
-        --anchor-item-min-width: auto;
-        --anchor-item-link-bg-color-hover: transparent;
-        --anchor-item-link-bg-color-active: transparent;
-        --anchor-item-link-color: var(--o-color-info3);
-        --anchor-item-link-color-active: var(--o-color-info1);
-        --anchor-item-link-color-hover: --anchor-item-link-gap: 0;
-        --anchor-item-link-padding: 0 32px 0 0;
-
-        .o-anchor-item-link {
-          @include hover {
-            &:not(.is-active) {
-              color: var(--o-color-info2);
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</style>