update docs

Author: wu-clan

docs/.vuepress/components/SponsorExclusivePopup.vue

@@ -7,7 +7,8 @@
     </span>
 
     <span class="sh-pop-body">
-      <img v-if="hasBrand" :src="homeSponsor.link" :alt="homeSponsor.alt" class="sh-pop-img" />
+      <SponsorMedia v-if="hasBrand" :src="homeSponsor.link" :alt="homeSponsor.alt" :ink="homeSponsor.ink" fit="cover"
+        loading="eager" />
       <span v-else class="sh-pop-cta">
         <GradientText :text="t('sponsorHome.inquireNow')" :colors="['#009485', '#c8abfa']" :animation-speed="3" />
       </span>
@@ -23,6 +24,7 @@ import { withBase } from 'vuepress/client'
 import { homeSponsor, shouldShowSponsor } from '../data/sponsors'
 import { useI18n } from '../composables/useI18n'
 import GradientText from './bits/GradientText.vue'
+import SponsorMedia from './SponsorMedia.vue'
 
 const { t, withLocale } = useI18n()
 const hasBrand = computed(() => shouldShowSponsor(homeSponsor))
@@ -117,17 +119,6 @@ const isExternal = computed(() => hasBrand.value && /^https?:/.test(targetHref.v
   overflow: hidden;
 }
 
-.sh-pop-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-[data-theme="dark"] .sh-pop-img {
-  filter: grayscale(1) invert(1);
-}
-
 .sh-pop-cta {
   display: inline-flex;
   align-items: center;

docs/.vuepress/components/SponsorHome.vue

@@ -5,7 +5,7 @@
     <template v-if="hasBrand">
       <span class="sh-inline-label">{{ t('sponsorHome.exclusive') }}</span>
       <span class="sh-inline-body">
-        <img :src="homeSponsor.link" :alt="homeSponsor.alt" class="sh-inline-img" />
+        <SponsorMedia :src="homeSponsor.link" :alt="homeSponsor.alt" :ink="homeSponsor.ink" fit="cover" />
       </span>
       <span class="sh-inline-label sh-inline-label-right">{{ t('sponsorHome.partner') }}</span>
     </template>
@@ -22,6 +22,7 @@ import { homeSponsor, shouldShowSponsor } from '../data/sponsors'
 import { useI18n } from '../composables/useI18n'
 import GradientText from './bits/GradientText.vue'
 import SponsorExclusivePopup from './SponsorExclusivePopup.vue'
+import SponsorMedia from './SponsorMedia.vue'
 
 const route = useRoute()
 const { t, withLocale } = useI18n()
@@ -114,17 +115,6 @@ watch(() => route.path, () => scheduleCheck())
   background: var(--vp-c-bg-soft);
 }
 
-.sh-inline-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-[data-theme="dark"] .sh-inline-img {
-  filter: grayscale(1) invert(1);
-}
-
 .sh-inline-empty {
   flex: 1;
   display: flex;

docs/.vuepress/components/SponsorMedia.vue

@@ -0,0 +1,45 @@
+<template>
+  <span
+    class="sponsor-media"
+    :class="{
+      'is-cover': fit === 'cover',
+      'is-ink-white': ink === 'white',
+      'is-ink-black': ink === 'black',
+      'is-fallback': showFallback,
+    }"
+  >
+    <img
+      v-if="hasSrc && !failed"
+      :src="src"
+      :alt="label"
+      :loading="loading"
+      decoding="async"
+      @error="failed = true"
+    >
+    <span v-if="showFallback" class="sponsor-media__name">{{ label }}</span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+const props = withDefaults(defineProps<{
+  src?: string
+  alt?: string
+  ink?: 'white' | 'black'
+  fit?: 'contain' | 'cover'
+  loading?: 'lazy' | 'eager'
+}>(), {
+  fit: 'contain',
+  loading: 'lazy',
+})
+
+const failed = ref(false)
+const label = computed(() => props.alt?.trim() || '')
+const hasSrc = computed(() => Boolean(props.src))
+const showFallback = computed(() => !hasSrc.value || failed.value)
+
+watch(() => props.src, () => {
+  failed.value = false
+})
+</script>

docs/.vuepress/components/SponsorPanel.vue

@@ -6,13 +6,13 @@
     <div class="gold-sponsors">
       <div v-for="brand in goldSponsors" v-show="shouldShowSponsor(brand)" class="brand-item gold"
         @click="openSponsorLink(brand.href, '_blank')">
-        <img :alt="brand.alt" :src="brand.link" class="brand-image" />
+        <SponsorMedia :src="brand.link" :alt="brand.alt" :ink="brand.ink" fit="cover" />
       </div>
     </div>
     <div class="general-sponsors">
       <div v-for="brand in generalSponsors" v-show="shouldShowSponsor(brand)" class="brand-item"
         @click="openSponsorLink(brand.href, '_blank')">
-        <img :alt="brand.alt" :src="brand.link" class="brand-image" />
+        <SponsorMedia :src="brand.link" :alt="brand.alt" :ink="brand.ink" />
       </div>
     </div>
     <div v-if="shouldShowExtraBecomeSponsor" class="brand-item become-brand" @click="openSponsorLink(localeSponsorUrl)">
@@ -31,6 +31,7 @@ import {
   shouldShowSponsor,
 } from "../data/sponsors";
 import { useI18n } from "../composables/useI18n";
+import SponsorMedia from "./SponsorMedia.vue";
 
 const { t, withLocale } = useI18n();
 const localeSponsorUrl = computed(() => withBase(withLocale('/sponsors.html')));
@@ -77,26 +78,20 @@ const shouldShowExtraBecomeSponsor = computed(() => {
   align-items: center;
   justify-content: center;
   height: 66px;
-  transition: all 0.3s ease;
+  overflow: hidden;
+  transition: outline-color 0.3s ease;
   position: relative;
 }
 
 .brand-item:hover {
-  border: 1px solid var(--vp-c-brand);
+  outline: 1px solid var(--vp-c-brand);
+  outline-offset: -1px;
 }
 
 .brand-item.gold {
   height: 96px;
 }
 
-.brand-image {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  transition: opacity 0.3s ease;
-}
-
 .brand-text {
   color: var(--vp-c-text-3);
   font-size: 10px;
@@ -107,7 +102,8 @@ const shouldShowExtraBecomeSponsor = computed(() => {
   padding: 0 8px;
 }
 
-.brand-item.gold .brand-text {
+.brand-item.gold .brand-text,
+.brand-item.gold :deep(.sponsor-media__name) {
   font-size: 13px;
 }
 

docs/.vuepress/components/SponsorSidebar.vue

@@ -5,7 +5,8 @@
   <div class="brand-container">
     <div class="sidebar-brand">
       <div class="brand" @click="openSponsorLink(homeSponsor.href)">
-        <img v-if="shouldShowSponsor(homeSponsor)" :alt="homeSponsor.alt" :src="homeSponsor.link" class="brand-image" />
+        <SponsorMedia v-if="shouldShowSponsor(homeSponsor)" :src="homeSponsor.link" :alt="homeSponsor.alt"
+          :ink="homeSponsor.ink" fit="cover" />
         <span v-else class="brand-text">{{ t('sponsorUi.becomeSponsor') }}</span>
       </div>
     </div>
@@ -15,6 +16,7 @@
 <script setup>
 import { homeSponsor, openSponsorLink, shouldShowSponsor } from "../data/sponsors";
 import { useI18n } from "../composables/useI18n";
+import SponsorMedia from "./SponsorMedia.vue";
 
 const { t } = useI18n();
 </script>
@@ -45,16 +47,12 @@ const { t } = useI18n();
   align-items: center;
   justify-content: center;
   height: 89px;
+  overflow: hidden;
 }
 
 .brand:hover {
-  border: 1px solid var(--vp-c-brand);
-}
-
-.brand-image {
-  width: 100%;
-  height: 100%;
-  object-fit: fill;
+  outline: 1px solid var(--vp-c-brand);
+  outline-offset: -1px;
 }
 
 .brand-text {

docs/.vuepress/components/SponsorSwiper.vue

@@ -3,37 +3,81 @@
     <header class="ss-header">
       <h2 class="ss-title">{{ t('sponsorUi.goldTitle') }}</h2>
     </header>
-    <Swiper v-if="processedGoldSponsors.length > 0" :items="processedGoldSponsors" mode="broadcast" :loop="false"
-      :height="162" :slides-per-view="3" :space-between="10" mousewheel />
-    <p v-else class="ss-empty">{{ t('sponsorUi.seatWaiting') }} <a :href="sponsorsHref">{{ t('sponsorUi.beFirst') }}</a></p>
+    <ClientOnly v-if="goldSponsorsList.length > 0">
+      <Swiper class="vp-swiper" :style="{ width: '100%', height: '162px' }" :modules="goldModules" :slides-per-view="3"
+        :space-between="10" :loop="false" :navigation="true" :pagination="{ dynamicBullets: true, clickable: true }"
+        :mousewheel="true" :speed="300">
+        <SwiperSlide v-for="(item, index) in goldSponsorsList" :key="(item.link || item.alt || '') + index">
+          <a v-if="item.href" :href="item.href" target="_blank" rel="noopener noreferrer"
+            class="swiper-slide-link no-icon">
+            <SponsorMedia :src="item.link" :alt="item.alt" :ink="item.ink" fit="cover" />
+          </a>
+          <SponsorMedia v-else :src="item.link" :alt="item.alt" :ink="item.ink" fit="cover" />
+        </SwiperSlide>
+      </Swiper>
+    </ClientOnly>
+    <p v-else class="ss-empty">{{ t('sponsorUi.seatWaiting') }} <a :href="sponsorsHref">{{ t('sponsorUi.beFirst') }}</a>
+    </p>
 
     <header class="ss-header">
       <h2 class="ss-title">{{ t('sponsorUi.silverTitle') }}</h2>
     </header>
-    <Swiper v-if="processedGeneralSponsors.length > 0" :items="processedGeneralSponsors" mode="carousel" :height="168"
-      :slides-per-view="4" :space-between="10" :speed="5000" />
-    <p v-else class="ss-empty">{{ t('sponsorUi.seatWaiting') }} <a :href="sponsorsHref">{{ t('sponsorUi.beFirst') }}</a></p>
+    <ClientOnly v-if="generalSponsorsList.length > 0">
+      <Swiper class="vp-swiper swiper-no-swiping" :style="{ width: '100%', height: '168px' }" :modules="silverModules"
+        :autoplay="{ delay: 0, disableOnInteraction: false }" :slides-per-view="4" :space-between="10"
+        :loop="generalSponsorsList.length > 4" :speed="5000" @swiper="onSilverSwiper">
+        <SwiperSlide v-for="(item, index) in generalSponsorsList" :key="(item.link || item.alt || '') + index">
+          <a v-if="item.href" :href="item.href" target="_blank" rel="noopener noreferrer"
+            class="swiper-slide-link no-icon">
+            <SponsorMedia :src="item.link" :alt="item.alt" :ink="item.ink" />
+          </a>
+          <SponsorMedia v-else :src="item.link" :alt="item.alt" :ink="item.ink" />
+        </SwiperSlide>
+      </Swiper>
+    </ClientOnly>
+    <p v-else class="ss-empty">{{ t('sponsorUi.seatWaiting') }} <a :href="sponsorsHref">{{ t('sponsorUi.beFirst') }}</a>
+    </p>
   </section>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { useMutationObserver } from '@vueuse/core'
+import { Autoplay, Mousewheel, Navigation, Pagination } from 'swiper/modules'
+import type { Swiper as SwiperType } from 'swiper/types'
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { computed, onMounted } from 'vue'
 import { withBase } from 'vuepress/client'
-// @ts-ignore
-import Swiper from 'vuepress-theme-plume/features/Swiper.vue'
 import { goldSponsors, generalSponsors, shouldShowSponsor } from '../data/sponsors'
 import { useI18n } from '../composables/useI18n'
+import SponsorMedia from './SponsorMedia.vue'
+
+import 'swiper/css'
+import 'swiper/css/navigation'
+import 'swiper/css/pagination'
 
 const { t, withLocale } = useI18n()
 const sponsorsHref = computed(() => withBase(withLocale('/sponsors.html')))
 
-const processedGoldSponsors = computed(() =>
-  goldSponsors.filter(sponsor => shouldShowSponsor(sponsor) && sponsor.link)
-)
+const goldSponsorsList = computed(() => goldSponsors.filter(shouldShowSponsor))
+const generalSponsorsList = computed(() => generalSponsors.filter(shouldShowSponsor))
+
+const goldModules = [Navigation, Pagination, Mousewheel]
+const silverModules = [Autoplay]
+
+let silverSwiper: SwiperType | undefined
+
+function onSilverSwiper(swiper: SwiperType) {
+  silverSwiper = swiper
+}
 
-const processedGeneralSponsors = computed(() =>
-  generalSponsors.filter(sponsor => shouldShowSponsor(sponsor) && sponsor.link)
-)
+onMounted(() => {
+  useMutationObserver(() => document.documentElement, () => {
+    if (!silverSwiper)
+      return
+    silverSwiper.wrapperEl.style.transform = 'translate3d(0px, 0px, 0px)'
+    setTimeout(() => silverSwiper?.update(), 350)
+  }, { attributeFilter: ['data-theme'] })
+})
 </script>
 
 <style scoped>
@@ -78,7 +122,26 @@ const processedGeneralSponsors = computed(() =>
   text-decoration: underline;
 }
 
+.sponsor-swiper :deep(.vp-swiper) {
+  margin: 24px 0;
+}
+
+.sponsor-swiper :deep(.swiper) {
+  --swiper-theme-color: var(--vp-c-bg);
+  --swiper-pagination-bullet-inactive-color: var(--vp-c-bg);
+  --swiper-pagination-bullet-inactive-opacity: 0.4;
+}
+
+.sponsor-swiper :deep(.swiper-slide) {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--vp-c-bg-soft);
+}
+
 .sponsor-swiper :deep(.swiper-slide-link) {
+  display: flex;
+  height: 100%;
   border: 1px solid transparent;
   transition: border-color 0.3s ease;
 }
@@ -87,11 +150,7 @@ const processedGeneralSponsors = computed(() =>
   border: 1px solid var(--vp-c-brand-1);
 }
 
-.sponsor-swiper :deep(.swiper-slide) {
-  background-color: var(--vp-c-bg-soft);
-}
-
-.sponsor-swiper :deep(.swiper-slide-img) {
-  object-fit: contain !important
+.sponsor-swiper :deep(.swiper-wrapper) {
+  transition-timing-function: linear;
 }
 </style>

docs/.vuepress/data/sponsors.ts

@@ -9,6 +9,8 @@ export interface Sponsor {
     href?: string;
     alt?: string;
     expiryTime: string; // ISO 格式日期：2099-12-31T23:59:59
+    /** 透明单色 Logo 的墨色：white 浅色主题反色，black 深色主题反色，满版/带背景图不填 */
+    ink?: 'white' | 'black';
 }
 
 export const defaultSponsor: Sponsor = {
@@ -36,6 +38,7 @@ export const generalSponsors: Sponsor[] = [
         href: 'https://u.bws.lol/register?aff=SLMYG84W',
         alt: 'Bywave',
         expiryTime: '2099-12-31T23:59:59',
+        ink: 'white',
     },
     {
         link: '',