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

package/dist/theme/components/VPIframe.vue

@@ -0,0 +1,445 @@
+<template>
+  <ClientOnly>
+    <!-- 大屏幕：原有的固定容器 -->
+    <div
+      v-if="href && !isSmallScreen"
+      class="demo-model"
+      :class="{
+        collapsed: !expanded,
+        'transition-end': transitionEnd
+      }"
+      @transitionend="onTransitionEnd"
+    >
+      <!-- 头部控制栏 -->
+      <div class="demo-header">
+        <ExternalLink :href="href" class="demo-link" :style="`${expanded ? '' : 'height:0;width:0;opacity:0'}`"></ExternalLink>
+        <QrCode class="demo-qrcode" :src="qrcode" v-if="expanded && qrcode"></QrCode>
+        <el-icon class="expand-icon" style="cursor: pointer" @click="toggleExpand">
+          <component :is="expanded ? Fold : Expand" />
+        </el-icon>
+      </div>
+      <!-- iframe 容器 -->
+      <div class="iframe-container">
+        <iframe v-if="expanded && transitionEnd" ref="iframe" id="demo" class="iframe" scrolling="auto" frameborder="0" :src="href" />
+      </div>
+    </div>
+
+    <!-- 小屏幕：触发按钮 -->
+    <div v-if="href && isSmallScreen && !isTinyScreen" class="demo-trigger" @click="openDrawer">
+      <el-icon class="trigger-icon">
+        <component :is="Expand" />
+      </el-icon>
+    </div>
+
+    <!-- 小屏幕：Drawer抽屉 -->
+    <view v-if="isSmallScreen && !isTinyScreen" class="drawer-container">
+      <el-drawer v-model="drawerVisible" direction="rtl" size="380px" :modal="false" :lock-scroll="false" :before-close="closeDrawer">
+        <div class="demo-header">
+          <ExternalLink :href="href" class="demo-link"></ExternalLink>
+          <QrCode class="demo-qrcode" :src="qrcode" v-if="qrcode"></QrCode>
+        </div>
+        <div class="drawer-content">
+          <iframe v-if="drawerVisible" ref="drawerIframe" class="drawer-iframe" scrolling="auto" frameborder="0" :src="href" />
+        </div>
+      </el-drawer>
+    </view>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import { Expand, Fold } from '@element-plus/icons-vue'
+import { ElDrawer, ElIcon } from 'element-plus'
+import { useRoute, useData } from 'vitepress'
+import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'
+import QrCode from './QrCode.vue'
+import { wotThemeOptionsKey } from '../options'
+
+interface Props {
+  /** 是否展开状态 */
+  expanded?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  expanded: true
+})
+
+// 状态管理
+const baseUrl = ref('')
+const iframe = ref<HTMLIFrameElement | null>(null)
+const drawerIframe = ref<HTMLIFrameElement | null>(null)
+const transitionEnd = ref(true)
+const drawerVisible = ref(false)
+const isSmallScreen = ref(false)
+const isTinyScreen = ref(false)
+
+const emit = defineEmits<{
+  'update:expanded': [boolean] // 更新展开状态
+  'state-change': [boolean] // 状态变化通知
+}>()
+
+const route = useRoute()
+const vitepressData = useData()
+const themeOptions = inject(wotThemeOptionsKey)
+const demoIframeOptions = themeOptions?.demoIframe
+const assetBase = demoIframeOptions && demoIframeOptions.assetBase ? demoIframeOptions.assetBase : '/wxqrcode'
+
+const href = computed(() => {
+  const path = route.path
+  const paths = path ? path.split('.')[0].split('/') : []
+
+  if (!paths.length) return baseUrl.value
+
+  return baseUrl.value + `subPages/${kebabToCamel(paths[paths.length - 1])}/Index`
+})
+
+const qrcode = computed(() => {
+  const path = route.path
+  const paths = path ? path.split('.')[0].split('/') : []
+  if (!paths.length) return ''
+
+  return `${assetBase}/${paths[paths.length - 1]}.png`
+})
+
+// 获取页面标题
+const pageTitle = computed(() => {
+  const path = route.path
+  const paths = path ? path.split('.')[0].split('/') : []
+  if (!paths.length) return '预览Demo'
+
+  // 将kebab-case转换为更友好的标题格式
+  const pageName = paths[paths.length - 1]
+  return pageName
+    .split('-')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+})
+
+// 工具函数：转换 kebab-case 为 camelCase
+function kebabToCamel(input: string): string {
+  return input.replace(/-([a-z])/g, (match, group) => group.toUpperCase())
+}
+
+// 监听 props.expanded 变化
+watch(
+  () => props.expanded,
+  (newVal) => {
+    if (newVal) {
+      transitionEnd.value = false
+    }
+  }
+)
+
+// 展开/收起控制
+function toggleExpand() {
+  // 触发事件通知父组件
+  emit('update:expanded', !props.expanded)
+  emit('state-change', !props.expanded)
+  transitionEnd.value = false
+}
+
+// 小屏幕抽屉控制
+function openDrawer() {
+  drawerVisible.value = true
+}
+
+function closeDrawer() {
+  drawerVisible.value = false
+}
+
+// 检查屏幕尺寸
+function checkScreenSize() {
+  isSmallScreen.value = window.innerWidth <= 1439
+  isTinyScreen.value = window.innerWidth < 1280
+}
+
+// 监听窗口大小变化
+function handleResize() {
+  checkScreenSize()
+}
+
+// 过渡结束处理
+function onTransitionEnd() {
+  transitionEnd.value = true
+}
+
+// iframe 消息通信
+function sendMessage() {
+  const targetIframe = isSmallScreen.value ? drawerIframe.value : iframe.value
+  if (targetIframe?.contentWindow) {
+    const targetOrigin = new URL(href.value, location.origin).origin
+    targetIframe.contentWindow.postMessage(vitepressData.isDark.value, targetOrigin)
+  }
+}
+
+// 发送语言信息给iframe
+function sendLanguageMessage() {
+  const targetIframe = isSmallScreen.value ? drawerIframe.value : iframe.value
+  if (targetIframe?.contentWindow) {
+    const targetOrigin = new URL(href.value, location.origin).origin
+    targetIframe.contentWindow.postMessage(vitepressData.lang.value, targetOrigin)
+  }
+}
+
+onMounted(() => {
+  baseUrl.value =
+    process.env.NODE_ENV === 'production' ? `${location.origin}/demo/?timestamp=${new Date().getTime()}#/` : 'http://localhost:5173/demo/#/'
+
+  // 初始化屏幕尺寸检查
+  checkScreenSize()
+  window.addEventListener('resize', handleResize)
+
+  // 监听 iframe 加载完成事件
+  iframe.value?.addEventListener('load', () => {
+    sendMessage()
+    sendLanguageMessage()
+  })
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
+
+// 监听抽屉iframe加载完成
+watch(drawerIframe, (newVal) => {
+  if (newVal) {
+    newVal.addEventListener('load', () => {
+      sendMessage()
+      sendLanguageMessage()
+    })
+  }
+})
+
+watch(() => vitepressData.isDark.value, sendMessage)
+
+// 监听语言变化
+watch(() => vitepressData.lang.value, sendLanguageMessage)
+</script>
+
+<style scoped>
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.demo-model {
+  position: fixed;
+  z-index: 10;
+  right: 32px;
+  top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px);
+  width: 330px;
+  font-size: 16px;
+  background: var(--vp-c-bg-alt);
+  border-radius: 12px;
+  box-shadow: var(--vp-shadow-4);
+  overflow: hidden;
+  transition: all 0.3s ease-in-out;
+}
+
+.iframe-container {
+  height: calc(100% - 56px);
+  overflow: hidden;
+  transition: all 0.3s ease-in-out;
+}
+
+.collapsed .iframe-container {
+  height: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active,
+.fade-enter,
+.fade-leave-to {
+  display: none;
+}
+
+.iframe {
+  height: 100%;
+  width: 100%;
+}
+
+.demo-header {
+  position: relative;
+  height: 48px;
+  width: 100%;
+  padding: 8px 12px;
+  border-radius: 6px 6px 0px 0px;
+  box-sizing: border-box;
+  background: var(--vp-sidebar-bg-color);
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  font-size: 28px;
+  cursor: pointer;
+}
+
+.demo-link {
+  font-size: 28px !important;
+  transition: all 0.3s ease-in-out;
+  position: absolute;
+  left: 0;
+  --color: inherit;
+  fill: currentColor;
+  color: var(--color);
+}
+
+.demo-qrcode {
+  font-size: 28px !important;
+  transition: all 0.3s ease-in-out;
+  position: absolute;
+  left: calc(50% - 14px);
+  --color: inherit;
+  fill: currentColor;
+  color: var(--color);
+}
+
+.expand-icon {
+  position: absolute;
+  right: 8px;
+  cursor: pointer;
+}
+
+.collapsed {
+  width: 48px !important;
+  height: 48px;
+  border-radius: 12px;
+}
+
+.collapsed.transition-end .demo-header {
+  justify-content: center;
+  /* 动画结束后居中对齐 */
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.fade-enter,
+.fade-leave-to
+
+/* .fade-leave-active in <2.1.8 */ {
+  opacity: 0;
+}
+
+@media screen and (min-width: 1440px) {
+  .demo-model {
+    width: 280px;
+    height: calc(320px * 143.6 / 70.9);
+    right: 12px;
+  }
+
+  .collapsed {
+    height: 48px;
+  }
+}
+
+@media screen and (min-width: 1600px) {
+  .demo-model {
+    width: 340px;
+    height: calc(340px * 143.6 / 70.9);
+    right: 24px;
+  }
+
+  .collapsed {
+    height: 48px;
+  }
+}
+
+/* 小屏幕触发按钮样式 */
+.demo-trigger {
+  position: fixed;
+  z-index: 10;
+  right: 16px;
+  top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px);
+  width: 48px;
+  height: 48px;
+  background: var(--vp-c-bg-alt);
+  border-radius: 12px;
+  box-shadow: var(--vp-shadow-4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+}
+
+.demo-trigger:hover {
+  transform: scale(1.05);
+}
+
+.trigger-icon {
+  font-size: 24px;
+  color: var(--vp-c-text-1);
+}
+
+/* 抽屉内容样式 */
+.drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 0;
+  border-bottom: 1px solid var(--vp-c-divider);
+  margin-bottom: 16px;
+}
+
+.drawer-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  flex: 1;
+}
+
+.drawer-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.drawer-actions .demo-link {
+  font-size: 20px !important;
+  color: var(--vp-c-text-2);
+  transition: color 0.3s ease;
+}
+
+.drawer-actions .demo-link:hover {
+  color: var(--vp-c-brand-1);
+}
+
+.drawer-actions .demo-qrcode {
+  font-size: 20px !important;
+  color: var(--vp-c-text-2);
+}
+
+.drawer-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 340px;
+  height: calc(340px * 143.6 / 70.9);
+}
+
+.drawer-iframe {
+  width: 340px;
+  height: calc(340px * 143.6 / 70.9);
+  border: none;
+  border-radius: 20px;
+  box-shadow: var(--vp-shadow-3);
+  background: var(--vp-c-bg);
+  overflow: hidden;
+}
+
+.drawer-container {
+  --el-drawer-bg-color: var(--vp-c-bg);
+  :deep() {
+    .el-drawer {
+      background-color: var(--vp-c-bg) !important;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .demo-trigger {
+    display: none;
+  }
+}
+</style>

package/dist/theme/components/VPLocalNav.vue

@@ -0,0 +1,151 @@
+<script lang="ts" setup>
+import { onContentUpdated } from 'vitepress'
+import { useWindowScroll } from '@vueuse/core'
+import { computed, onMounted, ref } from 'vue'
+import VPLocalNavOutlineDropdown from 'vitepress/dist/client/theme-default/components/VPLocalNavOutlineDropdown.vue'
+import { useData } from 'vitepress'
+import { useLayout } from 'vitepress/theme'
+import { getHeaders } from 'vitepress/dist/client/theme-default/composables/outline.js'
+
+defineProps<{
+  open: boolean
+}>()
+
+defineEmits<{
+  (e: 'open-menu'): void
+}>()
+
+const { theme, frontmatter }: any = useData()
+const { hasSidebar, headers: layoutHeaders } = useLayout()
+const { y } = useWindowScroll()
+
+const navHeight = ref(0)
+const headers = ref(layoutHeaders.value)
+
+onMounted(() => {
+  navHeight.value = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--vp-nav-height'))
+})
+
+onContentUpdated(() => {
+  headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
+})
+
+const empty = computed(() => {
+  return headers.value.length === 0
+})
+
+const emptyAndNoSidebar = computed(() => {
+  return empty.value && !hasSidebar.value
+})
+
+const classes = computed(() => {
+  return {
+    VPLocalNav: true,
+    'has-sidebar': hasSidebar.value,
+    empty: empty.value,
+    fixed: emptyAndNoSidebar.value
+  }
+})
+</script>
+
+<template>
+  <div v-if="frontmatter.layout !== 'home' && (!emptyAndNoSidebar || y >= navHeight)" :class="classes">
+    <div class="container">
+      <button v-if="hasSidebar" class="menu" :aria-expanded="open" aria-controls="VPSidebarNav" @click="$emit('open-menu')">
+        <span class="vpi-align-left menu-icon"></span>
+        <span class="menu-text">
+          {{ theme.sidebarMenuLabel || 'Menu' }}
+        </span>
+      </button>
+
+      <VPLocalNavOutlineDropdown :headers="headers" :navHeight="navHeight" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPLocalNav {
+  position: sticky;
+  top: 0;
+  /*rtl:ignore*/
+  left: 0;
+  z-index: var(--vp-z-index-local-nav);
+  border-bottom: 1px solid var(--vp-c-gutter);
+  padding-top: var(--vp-layout-top-height, 0px);
+  width: 100%;
+  background-color: var(--vp-local-nav-bg-color);
+}
+
+.VPLocalNav.fixed {
+  position: fixed;
+}
+
+@media (min-width: 960px) {
+  .VPLocalNav {
+    top: var(--vp-nav-height);
+  }
+
+  .VPLocalNav.has-sidebar {
+    padding-left: var(--vp-sidebar-width);
+  }
+
+  .VPLocalNav.empty {
+    display: none;
+  }
+}
+
+@media (min-width: 1280px) {
+  .VPLocalNav {
+    display: none;
+  }
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.menu {
+  display: flex;
+  align-items: center;
+  padding: 12px 24px 11px;
+  line-height: 24px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  transition: color 0.5s;
+}
+
+.menu:hover {
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+@media (min-width: 768px) {
+  .menu {
+    padding: 0 32px;
+  }
+}
+
+@media (min-width: 960px) {
+  .menu {
+    display: none;
+  }
+}
+
+.menu-icon {
+  margin-right: 8px;
+  font-size: 14px;
+}
+
+.VPOutlineDropdown {
+  padding: 12px 24px 11px;
+}
+
+@media (min-width: 768px) {
+  .VPOutlineDropdown {
+    padding: 12px 32px 11px;
+  }
+}
+</style>