@opendesign-plus-test/components 0.0.1-rc.2

package/src/draft/Footer.vue

@@ -0,0 +1,512 @@
+<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.qrAssistant,
+  },
+  {
+    img: CodeTitleXzs,
+    code: CodeImgXzs,
+    label: locale.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">
+            <div class="category-title">
+              {{ category.title }}
+            </div>
+            <ul class="navs">
+              <li v-for="nav in category.list" class="nav">
+                <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

@@ -0,0 +1,165 @@
+<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>