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

package/dist/theme/components/Banner.vue

@@ -0,0 +1,377 @@
+<script setup lang="ts">
+import { ref, watch, computed, onMounted } from 'vue'
+import { useBanner } from '../composables/banner'
+
+const open = ref(false) // 默认不显示，避免闪烁
+const BANNER_STORAGE_KEY = 'wot-banner-dismissed-time'
+const TWENTY_FOUR_HOURS = 24 * 60 * 60 * 1000 // 24小时的毫秒数
+
+// 使用 banner composable 获取远程数据
+const { data: bannerData } = useBanner()
+
+// 计算当前要显示的 banner 信息（取第一个）
+const currentBanner = computed(() => {
+  return bannerData.value && bannerData.value.length > 0 ? bannerData.value[0] : null
+})
+
+/**
+ * 检查是否应该显示横幅
+ */
+function checkShouldShowBanner() {
+  if (typeof window === 'undefined') return true
+
+  const dismissedTime = localStorage.getItem(BANNER_STORAGE_KEY)
+  if (!dismissedTime) {
+    // 首次访问，添加 banner-show class 以显示横幅
+    document.documentElement.classList.add('banner-show')
+    return true
+  }
+
+  const dismissedTimestamp = parseInt(dismissedTime, 10)
+  const currentTime = Date.now()
+
+  // 如果超过24小时，清除记录并显示横幅
+  if (currentTime - dismissedTimestamp > TWENTY_FOUR_HOURS) {
+    localStorage.removeItem(BANNER_STORAGE_KEY)
+    document.documentElement.classList.add('banner-show')
+    return true
+  }
+
+  // 未超过24小时，确保不显示横幅
+  document.documentElement.classList.remove('banner-show')
+  return false
+}
+
+function dismiss() {
+  open.value = false
+  document.documentElement.classList.remove('banner-show')
+
+  // 存储当前时间戳到 localStorage
+  if (typeof window !== 'undefined') {
+    localStorage.setItem(BANNER_STORAGE_KEY, Date.now().toString())
+  }
+}
+
+// 监听 banner 数据变化，只有当有数据时才进行展示逻辑校验
+watch(
+  currentBanner,
+  (newBanner) => {
+    if (newBanner) {
+      // 有 banner 数据时，检查是否应该显示
+      const shouldShow = checkShouldShowBanner()
+      open.value = shouldShow
+    } else {
+      // 没有 banner 数据时，不显示横幅
+      open.value = false
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <div class="banner" v-if="open && currentBanner">
+    <div class="vt-banner-text">
+      <p class="vt-banner-title">{{ currentBanner.title }}</p>
+      <a target="_blank" class="vt-primary-action" :href="currentBanner.link">
+        {{ currentBanner.action }}
+      </a>
+    </div>
+    <button aria-label="close" @click="dismiss">
+      <svg class="close" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+        <path
+          d="M18.9,10.9h-6v-6c0-0.6-0.4-1-1-1s-1,0.4-1,1v6h-6c-0.6,0-1,0.4-1,1s0.4,1,1,1h6v6c0,0.6,0.4,1,1,1s1-0.4,1-1v-6h6c0.6,0,1-0.4,1-1S19.5,10.9,18.9,10.9z"
+        />
+      </svg>
+    </button>
+    <div class="glow glow--purple"></div>
+    <div class="glow glow--blue"></div>
+  </div>
+</template>
+
+<style>
+html.banner-show {
+  --vp-layout-top-height: 64px;
+}
+
+/* 移动端优化高度 */
+@media (max-width: 768px) {
+  html.banner-show {
+    --vp-layout-top-height: 56px;
+  }
+}
+
+@media (max-width: 480px) {
+  html.banner-show {
+    --vp-layout-top-height: 48px;
+  }
+}
+</style>
+
+<style scoped>
+.banner {
+  position: fixed;
+  z-index: 100;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--vp-layout-top-height, 64px);
+  padding: 0 48px 0 12px;
+  text-align: center;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--vp-c-white);
+  background: var(--vp-c-bg-alt);
+  display: none;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+html.banner-show .banner {
+  display: flex;
+}
+
+.glow.glow--purple {
+  position: absolute;
+  bottom: -15%;
+  left: -75%;
+  width: 80%;
+  aspect-ratio: 1.5;
+  pointer-events: none;
+  border-radius: 100%;
+  background: linear-gradient(270deg, var(--vt-c-accent-purple), var(--vt-c-brand-2) 60% 80%, transparent);
+  filter: blur(15vw);
+  transform: none;
+  opacity: 0.6;
+}
+
+.glow.glow--blue {
+  position: absolute;
+  bottom: -15%;
+  right: -40%;
+  width: 80%;
+  aspect-ratio: 1.5;
+  pointer-events: none;
+  border-radius: 100%;
+  background: linear-gradient(180deg, var(--vt-c-accent-cyan), transparent);
+  filter: blur(15vw);
+  transform: none;
+  opacity: 0.3;
+}
+
+button {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 4px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.2s ease;
+}
+
+button:hover {
+  opacity: 0.8;
+}
+
+button:active {
+  opacity: 0.6;
+}
+
+.close {
+  width: 28px;
+  height: 28px;
+  fill: var(--vp-c-white);
+  transform: rotate(45deg);
+  transition: transform 0.2s ease;
+}
+
+button:hover .close {
+  transform: rotate(45deg) scale(1.1);
+}
+
+.vt-banner-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  color: var(--vp-c-white);
+  font-size: 18px;
+  line-height: 1.4;
+  padding: 8px 0;
+}
+
+.vt-banner-title {
+  display: inline-block;
+  background: linear-gradient(90deg, var(--vt-c-accent-purple) 0%, var(--vt-c-accent-cyan) 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  text-align: center;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+.vt-primary-action {
+  display: inline-block;
+  background: radial-gradient(140.35% 140.35% at 175% 94.74%, var(--vt-c-accent-mint), transparent),
+    radial-gradient(89.94% 89.94% at 18.42% 15.79%, var(--vt-c-brand-1), transparent);
+  color: var(--vp-c-white);
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: all 0.2s ease-in-out;
+  white-space: nowrap;
+}
+
+.vt-primary-action:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.28);
+}
+
+.vt-primary-action:active {
+  transform: translateY(0);
+}
+
+/* 桌面端优化 */
+@media (min-width: 769px) {
+  .banner {
+    padding: 0 60px 0 20px;
+  }
+
+  .glow.glow--blue {
+    top: -15%;
+    right: -40%;
+    width: 80%;
+  }
+
+  .glow.glow--purple {
+    bottom: -15%;
+    left: -40%;
+    width: 80%;
+  }
+
+  .vt-banner-text {
+    gap: 12px;
+  }
+}
+
+/* 平板端优化 */
+@media (max-width: 768px) {
+  .banner {
+    padding: 0 40px 0 10px;
+  }
+
+  button {
+    right: 6px;
+  }
+
+  .close {
+    width: 24px;
+    height: 24px;
+  }
+
+  .vt-banner-text {
+    font-size: 16px;
+    gap: 6px;
+  }
+
+  .vt-banner-title {
+    font-size: 16px;
+  }
+
+  .vt-primary-action {
+    font-size: 14px;
+    padding: 5px 10px;
+  }
+}
+
+/* 手机端优化 */
+@media (max-width: 640px) {
+  .banner {
+    padding: 0 36px 0 8px;
+  }
+
+  .vt-banner-text {
+    font-size: 14px;
+    gap: 6px;
+  }
+
+  .vt-banner-title {
+    font-size: 14px;
+  }
+
+  .vt-primary-action {
+    font-size: 13px;
+    padding: 4px 8px;
+  }
+}
+
+/* 小屏手机优化 */
+@media (max-width: 480px) {
+  .banner {
+    padding: 0 32px 0 6px;
+  }
+
+  button {
+    right: 4px;
+    padding: 2px;
+  }
+
+  .close {
+    width: 20px;
+    height: 20px;
+  }
+
+  .vt-banner-text {
+    font-size: 12px;
+    gap: 4px;
+    flex-direction: column;
+    line-height: 1.3;
+  }
+
+  .vt-banner-title {
+    font-size: 12px;
+  }
+
+  .vt-primary-action {
+    font-size: 12px;
+    padding: 3px 8px;
+    border-radius: 4px;
+  }
+}
+
+/* 超小屏优化 */
+@media (max-width: 375px) {
+  .banner {
+    padding: 0 28px 0 4px;
+  }
+
+  .vt-banner-text {
+    font-size: 11px;
+    gap: 3px;
+  }
+
+  .vt-banner-title {
+    font-size: 11px;
+  }
+
+  .vt-primary-action {
+    font-size: 11px;
+    padding: 2px 6px;
+  }
+}
+</style>

package/dist/theme/components/CustomFooter.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useData } from 'vitepress'
+import { useLayout } from 'vitepress/theme'
+
+const { theme }: any = useData()
+const { hasSidebar } = useLayout()
+
+const isNetlify = ref<boolean>(false)
+const isWotUiDomain = ref<boolean>(false)
+
+const copyright = computed(() => {
+  let copyrightText = theme.value.footer.copyright
+
+  if (isWotUiDomain.value) {
+    copyrightText += ' | <a href="https://beian.miit.gov.cn/" target="_blank" style="text-decoration: none;">沪ICP备2024070925号-4</a>'
+  }
+
+  if (isNetlify.value) {
+    copyrightText += ' | <a style="text-decoration: none;" href="https://www.netlify.com">This site is powered by Netlify</a>'
+  }
+
+  return copyrightText
+})
+
+onMounted(() => {
+  if (typeof window !== 'undefined') {
+    isNetlify.value = window.location.href.includes('netlify')
+    isWotUiDomain.value = window.location.hostname.includes('wot-ui.cn')
+  }
+})
+</script>
+
+<template>
+  <footer v-if="theme.footer" class="VPFooter" :class="{ 'has-sidebar': hasSidebar }">
+    <div class="container">
+      <p v-if="theme.footer.message" class="message" v-html="theme.footer.message"></p>
+      <p v-if="copyright" class="copyright" v-html="copyright"></p>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.VPFooter {
+  position: relative;
+  z-index: var(--vp-z-index-footer);
+  border-top: 1px solid var(--vp-c-gutter);
+  padding: 40px 24px 32px;
+  background: linear-gradient(135deg, var(--vp-c-bg) 0%, var(--vp-c-bg-soft) 100%);
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
+  transition: all 0.3s ease;
+}
+
+.VPFooter.has-sidebar {
+  display: none;
+}
+
+.VPFooter :deep(a) {
+  color: var(--vp-c-brand-1);
+  text-decoration: none;
+  padding: 2px 6px;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+  position: relative;
+  font-weight: 500;
+}
+
+.VPFooter :deep(a:hover) {
+  color: var(--vp-c-brand-2);
+  background-color: var(--vp-c-brand-soft);
+  transform: translateY(-1px);
+}
+
+.VPFooter :deep(a:active) {
+  transform: translateY(0);
+}
+
+@media (min-width: 768px) {
+  .VPFooter {
+    padding: 48px 32px 40px;
+  }
+}
+
+@media (max-width: 767px) {
+  .VPFooter {
+    padding: 32px 20px 24px;
+  }
+
+  .message,
+  .copyright {
+    font-size: 13px;
+    line-height: 20px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: var(--vp-layout-max-width);
+  text-align: center;
+}
+
+.message {
+  line-height: 28px;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin-bottom: 16px;
+  opacity: 0.9;
+}
+
+.copyright {
+  line-height: 26px;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--vp-c-text-2);
+  opacity: 0.8;
+  transition: opacity 0.3s ease;
+}
+
+.copyright:hover {
+  opacity: 1;
+}
+</style>

package/dist/theme/components/ExternalLink.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { defineComponent, h } from 'vue'
+defineProps({
+  href: {
+    type: String,
+    required: true
+  }
+})
+
+const ExternalLinkIconComponent = defineComponent({
+  name: 'ExternalLinkIcon',
+  render() {
+    const ExternalLinkIcon = {
+      template: `
+        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+          <g fill="none">
+            <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
+            <path fill="currentColor" d="M11 6a1 1 0 1 1 0 2H5v11h11v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm9-3a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-8.293 8.293a1 1 0 0 1-1.414-1.414L17.586 5H15a1 1 0 1 1 0-2Z" />
+          </g>
+        </svg>
+      `
+    }
+
+    return h('div', {
+      innerHTML: ExternalLinkIcon.template
+    })
+  }
+})
+</script>
+
+<template>
+  <el-link :href="href" target="_blank" style="text-decoration: none; font-size: 1.2em" :underline="false">
+    <slot />
+    <ExternalLinkIconComponent style="margin-left: 0.25em"></ExternalLinkIconComponent>
+  </el-link>
+</template>

package/dist/theme/components/HomeCases.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useCaseData } from '../composables/cases'
+import { useData } from 'vitepress'
+import VPFeature from './VPFeature.vue'
+
+const { data } = useCaseData()
+const { lang } = useData()
+
+const cases = computed(() => {
+  return lang.value === 'en-US' ? [] : data.value.length ? data.value : []
+})
+
+const grid = computed(() => {
+  const length = cases.value.length || 0
+  if (!length) {
+    return
+  } else {
+    return 'grid-4'
+  }
+})
+</script>
+
+<template>
+  <div v-if="cases && cases.length" class="VPFeatures">
+    <div class="container">
+      <h1 class="cases-title">优秀案例</h1>
+
+      <div class="items">
+        <div v-for="(item, index) in cases" :key="index" class="item" :class="[grid]">
+          <VPFeature
+            :icon="{ src: item.image, height: '48px', width: 'auto' }"
+            :title="item.name"
+            :details="item.description"
+            :image-preview="true"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPFeatures {
+  position: relative;
+  padding: 0 24px;
+}
+
+:deep(.VPImage) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+  border-radius: 6px;
+  /* background-color: var(--vp-c-default-soft); */
+  width: 48px;
+  height: 48px;
+  font-size: 24px;
+  transition: background-color 0.25s;
+}
+
+@media (min-width: 640px) {
+  .VPFeatures {
+    padding: 0 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPFeatures {
+    padding: 0 64px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 1152px;
+}
+
+.cases-title {
+  text-align: center;
+  margin-bottom: 50px;
+  margin-top: 50px;
+  font-size: 24px;
+}
+
+.items {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -8px;
+}
+
+.item {
+  padding: 8px;
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .item.grid-2,
+  .item.grid-4,
+  .item.grid-6 {
+    width: calc(100% / 2);
+  }
+}
+
+@media (min-width: 768px) {
+  .item.grid-2 {
+    width: calc(100% / 2);
+  }
+
+  .item.grid-3,
+  .item.grid-4,
+  .item.grid-6 {
+    width: calc(100% / 3);
+  }
+}
+
+@media (min-width: 960px) {
+  .item.grid-4 {
+    width: calc(100% / 4);
+  }
+}
+</style>