@opendesign-plus/components 0.0.1-rc.16

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>

package/src/draft/ItemSwiper.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { OFigure, OLink } from '@opensig/opendesign';
+import type { PropType } from 'vue';
+
+interface ItemLogoT {
+  logo: {
+    [key: string]: string;
+  };
+  href: string;
+  hrefEn: string;
+}
+
+defineProps({
+  // 轮播数据
+  data: {
+    type: Array as PropType<ItemLogoT[]>,
+    default: () => {
+      [];
+    },
+  },
+  // 反向轮播
+  reverseDirection: {
+    type: Boolean,
+    default: false,
+  },
+  // 语言
+  lang: {
+    type: String as PropType<'zh' | 'en'>,
+    default: 'zh',
+  },
+  // 风格
+  theme: {
+    type: String as PropType<'light' | 'dark'>,
+    default: 'light',
+  },
+  // 指定在何处显示链接的资源
+  target: {
+    type: String as PropType<'_blank' | '_parent' | '_self' | '_top'>,
+    default: '_blank',
+  },
+});
+</script>
+
+<template>
+  <div v-if="data.length > 0" class="swiper">
+    <div class="swiper-list" :class="{ 'swiper-reverse': reverseDirection }">
+      <div v-for="(item, i) in data" :key="i" class="swiper-item">
+        <OLink v-if="item.href || item.hrefEn" :href="lang === 'en' ? item.hrefEn || item.href : item.href" :target="target">
+          <div class="swiper-card">
+            <OFigure :src="item.logo[theme]" />
+          </div>
+        </OLink>
+        <div v-else class="swiper-card">
+          <OFigure :src="item.logo[theme]" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.swiper {
+  display: flex;
+  white-space: nowrap;
+  overflow: hidden;
+  position: relative;
+}
+.swiper-list {
+  display: flex;
+  animation: marque 100s linear infinite;
+  @include respond-to('>phone') {
+    @include hover {
+      animation-play-state: paused;
+    }
+  }
+}
+.swiper-reverse {
+  animation: marquere 100s linear infinite;
+}
+
+.swiper-item {
+  display: flex;
+}
+
+.swiper-card {
+  width: 269px;
+  background-color: var(--o-color-fill2);
+  border-radius: var(--o-radius-xs);
+  margin-right: 24px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  pointer-events: auto;
+}
+.o-figure {
+  width: 100%;
+  border-radius: var(--o-radius-xs);
+  :deep(img) {
+    width: 100%;
+  }
+}
+
+:deep(.o-link) {
+  .o-link-label {
+    display: flex;
+  }
+}
+
+@keyframes marque {
+  0% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+@keyframes marquere {
+  0% {
+    transform: translateX(-50%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@include respond-to('phone') {
+  .swiper-card {
+    width: 160px;
+    margin-right: 12px;
+  }
+}
+</style>

package/src/draft/Logo.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { computed, type PropType } from 'vue';
+import { ORow, OCol, OLink, OFigure } from '@opensig/opendesign';
+
+import ItemSwiper from '@component/ItemSwiper.vue';
+import ContentWrapper from '@component/ContentWrapper.vue';
+
+import { publisher } from '@/data/logo';
+
+interface ItemLogoT {
+  logo: {
+    [key: string]: string;
+  };
+  href: string;
+  hrefEn: string;
+}
+interface ItemSwiperT {
+  children: ItemLogoT[];
+  reverseDirection: boolean;
+}
+
+defineProps({
+  // 语言
+  lang: {
+    type: String as PropType<'zh' | 'en'>,
+    default: 'zh',
+  },
+  // 风格
+  theme: {
+    type: String as PropType<'light' | 'dark'>,
+    default: 'light',
+  },
+  // 指定在何处显示链接的资源
+  target: {
+    type: String as PropType<'_blank' | '_parent' | '_self' | '_top'>,
+    default: '_blank',
+  },
+});
+
+const total = publisher.length;
+
+const list = computed(() => {
+  const row = total > 15 ? 3 : 2;
+  const num = total / row;
+  let arr = [] as ItemSwiperT[];
+  for (let i = 0; i < row; i++) {
+    arr.push({
+      children: [...publisher.slice(i * num, (i + 1) * num).map(item => ({ ...item, hrefEn: item.hrefEn || '' })), ...publisher.slice(i * num, (i + 1) * num).map(item => ({ ...item, hrefEn: item.hrefEn || '' }))],
+      reverseDirection: false,
+    });
+    if (i === row - 1) {
+      arr[i].children = [...publisher.slice(i * num).map(item => ({ ...item, hrefEn: item.hrefEn || '' })), ...publisher.slice(i * num).map(item => ({ ...item, hrefEn: item.hrefEn || '' }))];
+    }
+    if (i % 2 === 1) {
+      arr[i].reverseDirection = true;
+    }
+  }
+  return arr;
+});
+
+const col = computed(() => {
+  let num = 5;
+  if (total < 6) {
+    num = total;
+  } else if (total < 7) {
+    num = 3;
+  } else if (total < 9) {
+    num = 4;
+  }
+  return num;
+});
+</script>
+
+<template>
+  <div class="logo-swiper">
+    <template v-if="total > 10">
+      <ItemSwiper v-for="(item, index) in list" :key="index" :data="item.children"
+        :reverse-direction="item.reverseDirection" :lang="lang" :theme="theme" :target="target"
+        class="partner-swiper" />
+    </template>
+    <template v-else>
+      <ContentWrapper>
+        <ORow gap="24px 24px" wrap="wrap" class="logo-data">
+          <OCol v-for="item in publisher" :key="item.href" :flex="`0 0 ${100 / col}%`">
+            <div class="item-logo">
+              <OLink v-if="item.href || item.hrefEn" :href="lang === 'en' ? item.hrefEn || item.href : item.href"
+                :target="target">
+                <div class="logo-card">
+                  <OFigure :src="item.logo[theme]" />
+                </div>
+              </OLink>
+              <div v-else class="logo-card">
+                <OFigure :src="item.logo[theme]" />
+              </div>
+            </div>
+          </OCol>
+        </ORow>
+      </ContentWrapper>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.logo-swiper {
+  width: 100%;
+  overflow: hidden;
+}
+
+.partner-swiper {
+  &+.partner-swiper {
+    margin-top: 24px;
+
+    @include respond-to('laptop') {
+      margin-top: 20px;
+    }
+
+    @include respond-to('pad_h') {
+      margin-top: 16px;
+    }
+
+    @include respond-to('<=pad_v') {
+      margin-top: 12px;
+    }
+  }
+}
+
+.item-logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--o-color-fill2);
+  border-radius: var(--o-radius-xs);
+
+  .o-figure {
+    :deep(img) {
+      width: auto;
+      max-height: 90px;
+    }
+  }
+}
+</style>

package/src/draft/LogoCard.vue

@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { OCard, ORow, OCol, OFigure } from '@opensig/opendesign';
+import { useScreen } from '@/composables/useScreen';
+
+const { lePadV, isPhone } = useScreen();
+
+interface CardT {
+    title: string;
+    content: string;
+    cover: string;
+    time: string;
+}
+
+defineProps({
+    cards: {
+        type: Array as () => CardT[],
+        default: () => [],
+    },
+});
+
+const columns = computed(() => {
+    if (isPhone.value) {
+        return '0 1 100%';
+    } else if (lePadV.value) {
+        return '0 1 50%';
+    }
+    return '0 1 33.3333%';
+});
+
+</script>
+
+<template>
+    <div class="card-wrapper">
+        <ORow gap="var(--grid-column-gutter)">
+            <OCol v-for="(card, index) in cards" :key="index" :flex="columns">
+                <OCard :title="card.title" :detail="card.content" :cover-ratio="16 / 9" :layout="'v'">
+                    <template #cover>
+                        <div class="cover-box">
+                            <OFigure :src="card.cover" alt="Card Cover" class="cover-image" />
+                        </div>
+                    </template>
+                    <template #footer>
+                        <div class="timestamp">
+                            <span class="time">{{ card.time }}</span>
+                        </div>
+                    </template>
+                </OCard>
+            </OCol>
+        </ORow>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.card-wrapper {
+    --grid-column-gutter: var(--o3-gap-6);
+    --card-detail-max-row: 2
+}
+
+.cover-box {
+    height: 100px;
+
+    :deep(.cover-image) {
+        height: 100%;
+    }
+
+    @include respond-to('<=pad_v') {
+        height: 72px;
+    }
+
+    @include respond-to('phone') {
+        height: 68px;
+    }
+}
+</style>

package/src/draft/LogoV2.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import {} from '@opensig/opendesign';
+
+interface companyT {
+  href: string;
+  hrefEn: string;
+  logo: {
+    dark: string;
+    light: string;
+  };
+}
+defineProps<{
+  logos?: companyT[];
+}>();
+</script>
+<template>
+  <div>logo</div>
+</template>
+<style lang="scss" scoped></style>

package/src/draft/MainCard.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+import type { LinkCardItemT } from './OInfoCard.vue';
+import OInfoCard from './OInfoCard.vue';
+
+defineProps({
+  cards: {
+    type: Array as PropType<LinkCardItemT[]>,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="card-list">
+    <OInfoCard v-for="(card, index) in cards" :key="index" :item="card" class="card-item"></OInfoCard>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.card-list {
+  display: grid;
+  grid-template-columns: 3.95fr 6.05fr;
+  gap: var(--o3-gap-6);
+
+  .card-item {
+    &:first-child {
+      grid-row-start: 1;
+      grid-row-end: 3;
+
+      :deep(.o-card-main) {
+        display: flex;
+        justify-content: end;
+      }
+    }
+  }
+}
+</style>

package/src/draft/MultiCard.vue

@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { OCard, OButton, OScroller } from '@opensig/opendesign';
+import { useScreen } from '@/composables/useScreen';
+
+const { lePadV } = useScreen();
+
+interface CardT {
+    title: string;
+    content: string;
+    cover: string;
+    buttons?: { text: string; href?: string }[];
+}
+
+const props = defineProps({
+    cards: {
+        type: Array as () => CardT[],
+        default: () => [],
+    },
+});
+
+const cardCount = computed(() => props.cards.length);
+const cardWidth = computed(() => {
+    if (lePadV.value) {
+        if (cardCount.value <= 2) {
+            return `calc((100% - var(--card-gap) * 1) / 2)`;
+        }
+        return `calc((100% - var(--card-gap) * 2) / 3)`;
+    } else {
+        if (cardCount.value <= 4) {
+            return `calc((100% - var(--card-gap) * ${cardCount.value - 1}) / ${cardCount.value})`;
+        }
+        return `calc((100% - var(--card-gap) * 3) / 4)`;
+    }
+
+});
+const coverRatio = computed(() => {
+    return cardCount.value === 2 ? 3 : 16 / 9;
+});
+</script>
+
+<template>
+    <div class="multi-card-wrapper">
+        <OScroller class="pane" size="small" :show-type="lePadV ? 'never' : 'always'" disabled-y>
+            <template v-for="card in cards" :key="card.title">
+                <OCard :title="card.title" :detail="card.content" :cover="card.cover"
+                    :cover-ratio="lePadV ? undefined : coverRatio" :layout="'v'" class="multi-card-item"
+                    :style="{ width: cardWidth }">
+                    <template #footer>
+                        <div class="buttons">
+                            <OButton v-for="(button, btnIndex) in card.buttons" :key="btnIndex" :href="button.href"
+                                color="primary" round="pill" variant="outline" class="button">{{ button.text }}
+                            </OButton>
+                        </div>
+                    </template>
+                </OCard>
+            </template>
+        </OScroller>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.multi-card-wrapper {
+    width: 100%;
+    --card-gap: var(--o3-gap-5);
+}
+
+.pane {
+    white-space: nowrap;
+
+    :deep(.o-scrollbar) {
+        --scrollbar-x-bottom: calc(-1 * var(--o3-gap-5) - 4px)
+    }
+}
+
+.multi-card-item {
+    display: inline-flex;
+    margin-right: var(--card-gap);
+
+    &:last-child {
+        margin-right: 0;
+    }
+
+    @include respond-to('<=pad_v') {
+        :deep(.o-card-cover-img) {
+            height: 120px;
+        }
+    }
+}
+
+.buttons {
+    display: flex;
+    gap: 8px;
+}
+</style>