@wot-ui/vitepress-theme 2.0.0-alpha.10

package/dist/theme/components/HomeFriendly.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useFriendly } from '../composables/friendly'
+import { useData } from 'vitepress'
+
+const { data } = useFriendly()
+const { lang } = useData()
+
+const links = computed(() => {
+  return lang.value === 'en-US' ? [] : data.value.length ? data.value : []
+})
+</script>
+
+<template>
+  <div v-if="links && links.length" class="VPFriendly">
+    <div class="container">
+      <h2 class="friendly-title">友情链接</h2>
+      <div class="links">
+        <a v-for="link in links" :key="link.title" :href="link.link" target="_blank" rel="noopener noreferrer" class="link-item">
+          <img v-if="link.icon" :src="link.icon" :alt="link.title" class="link-icon" />
+          <span class="link-title">{{ link.title }}</span>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPFriendly {
+  padding: 0 24px;
+}
+
+@media (min-width: 640px) {
+  .VPFriendly {
+    padding: 0 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPFriendly {
+    padding: 0 64px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 1152px;
+}
+
+.friendly-title {
+  text-align: center;
+  margin: 32px 0 20px;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+}
+
+.links {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
+}
+
+.link-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 20px;
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-2);
+  font-size: 13px;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.link-item:hover {
+  border-color: var(--vp-c-brand-1);
+  color: var(--vp-c-brand-1);
+  background: var(--vp-c-brand-soft);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.link-icon {
+  width: 18px;
+  height: 18px;
+  object-fit: contain;
+  border-radius: 3px;
+  flex-shrink: 0;
+}
+</style>

package/dist/theme/components/HomeTeam.vue

@@ -0,0 +1,250 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useTeam } from '../composables/team'
+import { useData } from 'vitepress'
+
+const { data } = useTeam()
+const { lang } = useData()
+
+const members = computed(() => {
+  return lang.value === 'en-US' ? [] : data.value.length ? data.value : []
+})
+
+const tagVariants = ['theme-primary', 'theme-success', 'theme-warning', 'theme-danger', 'theme-pink', 'theme-cyan', 'theme-purple', 'theme-volcano']
+
+const hashString = (text: string) => {
+  let hash = 0
+  for (let i = 0; i < text.length; i++) {
+    hash = (hash << 5) - hash + text.charCodeAt(i)
+    hash |= 0
+  }
+  return Math.abs(hash)
+}
+
+const getTagClass = (memberName: string, tag: string, index: number) => {
+  const variantIndex = hashString(`${memberName}-${tag}-${index}`) % tagVariants.length
+  return `status-tag ${tagVariants[variantIndex]}`
+}
+</script>
+
+<template>
+  <div v-if="members && members.length" class="VPTeam">
+    <div class="container">
+      <h1 class="team-title">团队成员</h1>
+      <div class="items">
+        <div v-for="member in members" :key="member.name" class="item grid-3">
+          <div class="VPFeature">
+            <article class="box">
+              <img :src="member.avatar" :alt="member.name" class="avatar" />
+              <h2 class="title">{{ member.name }}</h2>
+              <p class="subtitle">{{ member.title }}</p>
+              <div v-if="member.tags && member.tags.length" class="tags">
+                <span v-for="(tag, index) in member.tags" :key="`${member.name}-${tag}-${index}`" :class="getTagClass(member.name, tag, index)">
+                  {{ tag }}
+                </span>
+              </div>
+              <p v-if="member.desc" class="details">{{ member.desc }}</p>
+              <div class="socials">
+                <a v-if="member.github" :href="member.github" target="_blank" rel="noopener noreferrer" class="social-link" aria-label="GitHub">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+                    <path
+                      d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.155-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0 1 12 6.836a9.59 9.59 0 0 1 2.504.337c1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.202 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z"
+                    />
+                  </svg>
+                </a>
+              </div>
+            </article>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPTeam {
+  position: relative;
+  padding: 0 24px;
+}
+
+@media (min-width: 640px) {
+  .VPTeam {
+    padding: 0 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPTeam {
+    padding: 0 64px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 1152px;
+}
+
+.team-title {
+  text-align: center;
+  margin-bottom: 50px;
+  margin-top: 50px;
+  font-size: 24px;
+}
+
+/* 与 HomeCases 完全相同的网格体系 */
+.items {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -8px;
+}
+
+.item {
+  padding: 8px;
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .item.grid-3 {
+    width: calc(100% / 2);
+  }
+}
+
+@media (min-width: 768px) {
+  .item.grid-3 {
+    width: calc(100% / 3);
+  }
+}
+
+/* 与 VPFeature 完全相同的卡片样式 */
+.VPFeature {
+  display: block;
+  border: 1px solid var(--vp-c-bg-soft);
+  border-radius: 12px;
+  height: 100%;
+  background-color: var(--vp-c-bg-soft);
+  transition: border-color 0.25s, background-color 0.25s;
+}
+
+.VPFeature:hover {
+  border-color: var(--vp-c-brand-1);
+}
+
+.box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24px;
+  height: 100%;
+  text-align: center;
+}
+
+.avatar {
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-bottom: 20px;
+}
+
+.title {
+  line-height: 24px;
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0 0 4px;
+}
+
+.subtitle {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  margin: 0 0 8px;
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 6px;
+  margin: 0 0 12px;
+}
+
+.status-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+  border: 1px solid transparent;
+}
+
+.theme-primary {
+  color: #4d80f0;
+  background: #eaf1fa;
+}
+
+.theme-success {
+  color: #34d19d;
+  background: #e1f7f0;
+}
+
+.theme-warning {
+  color: #f0883a;
+  background: #fdf2eb;
+}
+
+.theme-danger {
+  color: #fa4350;
+  background: #fee9e7;
+}
+
+.theme-pink {
+  color: #e44386;
+  background: #fcecf3;
+}
+
+.theme-cyan {
+  color: #1a9fb8;
+  background: #e4f5f8;
+}
+
+.theme-purple {
+  color: #8c5ff2;
+  background: #f1ecfe;
+}
+
+.theme-volcano {
+  color: #e5603a;
+  background: #fceeea;
+}
+
+.details {
+  flex-grow: 1;
+  padding-top: 4px;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  margin: 0 0 16px;
+}
+
+.socials {
+  display: flex;
+  gap: 12px;
+  margin-top: auto;
+}
+
+.social-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--vp-c-text-3);
+  transition: color 0.2s ease;
+}
+
+.social-link:hover {
+  color: var(--vp-c-brand-1);
+}
+</style>

package/dist/theme/components/QrCode.vue

@@ -0,0 +1,45 @@
+<template>
+  <div @mouseenter="showQRCode = true" @mouseleave="showQRCode = false">
+    <el-tooltip
+      placement="bottom"
+      effect="light"
+      :visible="showQRCode"
+      :popper-options="{ modifiers: [{ name: 'offset', options: { offset: [0, 20] } }] }"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+        <path
+          fill="currentColor"
+          d="M2 2h9v9H2zm2 2v5h5V4zm9-2h9v9h-9zm2 2v5h5V4zM5.5 5.5h2.004v2.004H5.5zm11 0h2.004v2.004H16.5zm-3.504 7.496H15V15h-2.004zm7 0H22V15h-2.004zM2 13h9v9H2zm2 2v5h5v-5zm11.996.996H18v2h2v2h2V22h-2.004v-2h-2v-2h-2zM5.5 16.5h2.004v2.004H5.5zm7.496 3.496H15V22h-2.004z"
+        ></path>
+      </svg>
+      <template #content>
+        <div class="qr-code">
+          <img :src="src" alt="二维码" />
+        </div>
+      </template>
+    </el-tooltip>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { ElTooltip } from 'element-plus'
+interface Props {
+  /** 二维码资源 */
+  src: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  src: ''
+})
+
+const showQRCode = ref(false)
+</script>
+
+<style scoped>
+.qr-code {
+  width: 130px; /* 设置二维码的宽度 */
+  height: auto; /* 高度自适应 */
+  transition: opacity 0.3s ease; /* 添加过渡效果 */
+}
+</style>

package/dist/theme/components/SidebarAds.vue

@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import { ElImageViewer } from 'element-plus'
+import { ref } from 'vue'
+import { useAds } from '../composables/adsData'
+
+const { data } = useAds()
+
+const showViewer = ref(false)
+const previewUrl = ref('')
+
+const handleClick = (ad: any) => {
+  if (ad.link) {
+    window.open(ad.link, '_blank')
+  } else if (ad.image) {
+    previewUrl.value = ad.image
+    showViewer.value = true
+  }
+}
+</script>
+
+<template>
+  <div class="sidebar-ad-container" v-if="data && data.length">
+    <slot name="sidebar-ad-content">
+      <!-- 默认广告内容 -->
+      <div class="sidebar-ad-list">
+        <div v-for="(ad, index) in data" :key="index" class="sidebar-ad-item">
+          <div class="sidebar-ad-link" @click="handleClick(ad)">
+            <img :src="ad.image" :alt="ad.title" class="sidebar-ad-img" />
+          </div>
+        </div>
+      </div>
+    </slot>
+    <el-image-viewer v-if="showViewer" :url-list="[previewUrl]" @close="showViewer = false" hide-on-click-modal teleported />
+  </div>
+</template>
+
+<style scoped>
+.sidebar-ad-container {
+  margin: 6px 0;
+  padding: 6px;
+  border-radius: 6px;
+  background-color: var(--vp-c-bg-soft);
+  box-sizing: border-box;
+  width: calc(100% - 6px);
+  margin-left: 3px;
+  margin-right: 3px;
+}
+
+.sidebar-ad-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.sidebar-ad-item {
+  width: 100%;
+}
+
+.sidebar-ad-link {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-decoration: none;
+  color: var(--vp-c-text-1);
+  cursor: pointer;
+}
+
+.sidebar-ad-img {
+  width: 100%;
+  height: auto;
+  max-height: 120px;
+  border-radius: 8px;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.sidebar-ad-img:hover {
+  transform: translateY(-2px);
+}
+
+.sidebar-ad-title {
+  margin-top: 4px;
+  font-size: 14px;
+  text-align: center;
+}
+</style>

package/dist/theme/components/SpecialSponsor.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useAdSponsor } from '../composables/adSponsor'
+
+interface Props {
+  title?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  title: '铂金赞助商'
+})
+
+const { data } = useAdSponsor()
+
+// 获取第一个铂金赞助商
+const platinumSponsor = computed(() => {
+  const platinum = data.value?.find((sponsor) => sponsor.tier === 'Platinum')
+  return platinum?.items?.[0] || null
+})
+</script>
+
+<template>
+  <section v-if="platinumSponsor" class="special-sponsor">
+    <h3>{{ title }}</h3>
+    <div class="special-sponsor-container">
+      <a class="logo" :href="platinumSponsor.url" target="_blank" rel="sponsored noopener">
+        <picture>
+          <img :src="platinumSponsor.img" :alt="platinumSponsor.name" style="height: 72px" />
+        </picture>
+      </a>
+      <span>{{ platinumSponsor.name }}</span>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.special-sponsor {
+  border-top: 1px solid var(--vp-c-gray-soft);
+  border-bottom: 1px solid var(--vp-c-gray-soft);
+  padding: 12px 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 64px;
+}
+
+.special-sponsor h3 {
+  text-align: center;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.special-sponsor-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.special-sponsor .logo {
+  display: flex;
+  justify-content: center;
+  padding: 0 20px;
+}
+
+.special-sponsor span {
+  color: var(--vp-c-text-2);
+  font-weight: 500;
+  font-size: 13px;
+  vertical-align: middle;
+  flex: 1;
+}
+
+.special-sponsor a {
+  display: flex;
+  justify-content: center;
+  padding: 0 24px;
+}
+
+.special-sponsor-empty {
+  border-top: 1px solid var(--vp-c-gray-soft);
+  border-bottom: 1px solid var(--vp-c-gray-soft);
+  padding: 12px 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 64px;
+}
+
+.special-sponsor-empty span:first-child {
+  text-align: right;
+}
+
+.special-sponsor-empty img {
+  height: 42px;
+  margin: -6px 0;
+}
+
+.dark .special-sponsor-empty img {
+  filter: grayscale(1) invert(1);
+}
+
+@media (max-width: 576px) {
+  .special-sponsor-empty {
+    flex-direction: column;
+    height: auto;
+  }
+  .special-sponsor-empty img {
+    height: 36px;
+    margin: 8px 0;
+  }
+  .special-sponsor-empty span {
+    text-align: center !important;
+  }
+}
+</style>

package/dist/theme/components/SvgImage.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{ svg: string }>()
+</script>
+
+<template>
+  <figure class="svg-image-root" v-html="svg" />
+</template>
+
+<style>
+.svg-image-root {
+  background-color: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  padding: 1ch;
+  margin: 1ch 0;
+}
+html.dark .svg-image-root {
+  background-color: var(--vp-c-bg-soft);
+}
+.svg-image-root svg text {
+  font-family: var(--vp-font-family-base);
+}
+</style>

package/dist/theme/components/VPContent.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import NotFound from 'vitepress/dist/client/theme-default//NotFound.vue'
+import VPDoc from './VPDoc.vue'
+import VPHome from 'vitepress/dist/client/theme-default/components/VPHome.vue'
+import VPPage from 'vitepress/dist/client/theme-default/components/VPPage.vue'
+import { useLayout } from 'vitepress/theme'
+
+const { page, frontmatter }: any = useData()
+const { hasSidebar } = useLayout()
+</script>
+
+<template>
+  <div
+    class="VPContent"
+    id="VPContent"
+    :class="{
+      'has-sidebar': hasSidebar,
+      'is-home': frontmatter.layout === 'home'
+    }"
+  >
+    <slot name="not-found" v-if="page.isNotFound"><NotFound /></slot>
+
+    <VPPage v-else-if="frontmatter.layout === 'page'">
+      <template #page-top><slot name="page-top" /></template>
+      <template #page-bottom><slot name="page-bottom" /></template>
+    </VPPage>
+
+    <VPHome v-else-if="frontmatter.layout === 'home'">
+      <template #home-hero-before><slot name="home-hero-before" /></template>
+      <template #home-hero-info-before><slot name="home-hero-info-before" /></template>
+      <template #home-hero-info><slot name="home-hero-info" /></template>
+      <template #home-hero-info-after><slot name="home-hero-info-after" /></template>
+      <template #home-hero-actions-after><slot name="home-hero-actions-after" /></template>
+      <template #home-hero-image><slot name="home-hero-image" /></template>
+      <template #home-hero-after><slot name="home-hero-after" /></template>
+      <template #home-features-before><slot name="home-features-before" /></template>
+      <template #home-features-after><slot name="home-features-after" /></template>
+    </VPHome>
+
+    <component v-else-if="frontmatter.layout && frontmatter.layout !== 'doc'" :is="frontmatter.layout" />
+
+    <VPDoc v-else>
+      <template #doc-top><slot name="doc-top" /></template>
+      <template #doc-bottom><slot name="doc-bottom" /></template>
+
+      <template #doc-footer-before><slot name="doc-footer-before" /></template>
+      <template #doc-before><slot name="doc-before" /></template>
+      <template #doc-after><slot name="doc-after" /></template>
+
+      <template #aside-top><slot name="aside-top" /></template>
+      <template #aside-outline-before><slot name="aside-outline-before" /></template>
+      <template #aside-outline-after><slot name="aside-outline-after" /></template>
+      <template #aside-ads-before><slot name="aside-ads-before" /></template>
+      <template #aside-ads-after><slot name="aside-ads-after" /></template>
+      <template #aside-bottom><slot name="aside-bottom" /></template>
+    </VPDoc>
+  </div>
+</template>
+
+<style scoped>
+.VPContent {
+  flex-grow: 1;
+  flex-shrink: 0;
+  margin: var(--vp-layout-top-height, 0px) auto 0;
+  width: 100%;
+}
+
+.VPContent.is-home {
+  width: 100%;
+  max-width: 100%;
+}
+
+.VPContent.has-sidebar {
+  margin: 0;
+}
+
+.VPNavBar.container {
+  max-width: none;
+}
+
+@media (min-width: 960px) {
+  .VPContent {
+    padding-top: var(--vp-nav-height);
+  }
+
+  .VPContent.has-sidebar {
+    margin: var(--vp-layout-top-height, 0px) 0 0;
+    padding-left: var(--vp-sidebar-width);
+  }
+}
+</style>