user_handbook/docs/.vuepress/components/LongPicSplit.vue

<script setup>
import { ref, onMounted, computed } from 'vue'
import { SITE_BASE, CDN_BASE} from '../constants';

const props = defineProps({
  src: { type: String, required: true },
  alt: { type: String, default: '长图' },
  chunkHeight: { type: Number, default: 2000 },
  // 【新增】可选：传入原图宽高以实现完美的无抖动占位
  originalWidth: { type: Number, default: 0 },
  originalHeight: { type: Number, default: 0 },
  maxWidth: { type: [String, Number], default: '100%' }

})

const imageList = ref([])
const isLoading = ref(true)

// 预览层状态
const showViewer = ref(false)
const currentIndex = ref(0)
const viewImg = ref('')

// 缩放状态
const scale = ref(1)
const startScale = ref(1)
const startDistance = ref(0)

// 滑动状态
const startX = ref(0)

// 计算宽高比，用于 CSS aspect-ratio
const aspectRatioStyle = computed(() => {
  if (props.originalWidth && props.originalHeight) {
    return `${props.originalWidth} / ${props.originalHeight}`
  }
  return undefined
})

// 打开预览
const openView = (idx) => {
  if (imageList.value.length === 0) return
  currentIndex.value = idx
  viewImg.value = imageList.value[idx]
  showViewer.value = true
  scale.value = 1
  document.body.style.overflow = 'hidden'
}

// 关闭预览
const closeView = () => {
  showViewer.value = false
  document.body.style.overflow = ''
}

// 上一张
const prevImg = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--
    viewImg.value = imageList.value[currentIndex.value]
    scale.value = 1
  }
}

// 下一张
const nextImg = () => {
  if (currentIndex.value < imageList.value.length - 1) {
    currentIndex.value++
    viewImg.value = imageList.value[currentIndex.value]
    scale.value = 1
  }
}

// 触摸开始
const onTouchStart = (e) => {
  if (e.touches.length === 1) {
    startX.value = e.touches[0].clientX
  }
  if (e.touches.length === 2) {
    startDistance.value = getDistance(e.touches[0], e.touches[1])
    startScale.value = scale.value
  }
}

// 触摸移动
const onTouchMove = (e) => {
  // 阻止默认滚动行为，确保缩放和滑动流畅
  if (e.touches.length === 2 || (e.touches.length === 1 && scale.value > 1)) {
    // e.preventDefault() 在 passive listener 中可能无效，但在 Vue 事件修饰符 .prevent 中有效
    // 这里主要逻辑在模板中处理了 .prevent
  }

  if (e.touches.length === 2) {
    const dist = getDistance(e.touches[0], e.touches[1])
    // 限制缩放范围 1x - 5x
    scale.value = Math.min(5, Math.max(1, startScale.value * (dist / startDistance.value)))
  }
}

// 触摸结束
const onTouchEnd = (e) => {
  if (e.changedTouches.length === 1) {
    const diff = e.changedTouches[0].clientX - startX.value
    // 滑动阈值 60px
    if (Math.abs(diff) > 60) {
      diff > 0 ? prevImg() : nextImg()
    }
  }
}

// 计算双指距离
const getDistance = (p1, p2) => {
  return Math.hypot(p2.clientX - p1.clientX, p2.clientY - p1.clientY)
}

// 🔥 最大宽度样式
const wrapperStyle = computed(() => {
  let maxW = props.maxWidth
  if (typeof maxW === 'number') maxW = maxW + 'px'
  return {
    aspectRatio: aspectRatioStyle.value,
    maxWidth: maxW
  }
})


// 🔥🔥🔥 核心修复：自动拼接 VuePress 本地图片路径
const getImageUrl = (url) => {
  // 如果是网络图片直接返回
  if (url.startsWith('http')) return url

  // 如果是本地图片，自动拼接基准路径（解决 404）
  const base = SITE_BASE || '/'
  return base + url.replace(/^\//, '')
}
// 切割长图
const sliceImage = () => {
  isLoading.value = true
  const img = new Image()
  // 处理跨域问题，如果图片在同源可忽略，但加上更稳健
  img.crossOrigin = 'anonymous'
  img.src = getImageUrl(props.src)

  img.onload = () => {
    const { width, height } = img
    const num = Math.ceil(height / props.chunkHeight)
    const slices = []

    for (let i = 0; i < num; i++) {
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      const h = Math.min(props.chunkHeight, height - i * props.chunkHeight)

      canvas.width = width
      canvas.height = h

      // 绘制切片
      ctx.drawImage(img, 0, i * props.chunkHeight, width, h, 0, 0, width, h)
      // 转为 base64
      slices.push(canvas.toDataURL('image/jpeg', 0.9)) // 0.9 质量平衡体积与清晰度
    }

    imageList.value = slices
    isLoading.value = false
  }

  img.onerror = () => {
    console.error('图片加载失败:', props.src)
    isLoading.value = false
  }

  // img.src = props.src
}

onMounted(() => {
  sliceImage()
})
</script>

<template>
  <div
      class="long-pic-slice no-medium-zoom"
      :style="wrapperStyle"
  >
    <!-- 加载中占位提示 -->
    <div v-if="isLoading" class="loading-state">
      <span class="loading-text">正在加载长图...</span>
    </div>

    <!-- 切片列表 -->
    <img
        v-for="(data, idx) in imageList"
        :key="idx"
        :src="data"
        :alt="`${alt}-${idx}`"
        class="slice-img no-zoom"
        loading="eager"
        @click="openView(idx)"
    />

    <!-- 全屏预览层 -->
<!--    <Teleport to="body">-->
<!--      <transition name="viewer-fade">-->
        <div v-if="showViewer" class="viewer" @click="closeView">
          <!-- 左箭头 -->
          <div
              class="arrow arrow-left"
              @click.stop="prevImg"
              :class="{ disabled: currentIndex <= 0 }"
          >
            ‹
          </div>

          <!-- 图片容器 (防止点击穿透) -->
          <div class="viewer-content">
            <img
                :src="viewImg"
                class="viewer-img"
                :style="{ transform: `scale(${scale})` }"
                @touchstart.prevent="onTouchStart"
                @touchmove.prevent="onTouchMove"
                @touchend.prevent="onTouchEnd"
            />
          </div>

          <!-- 右箭头 -->
          <div
              class="arrow arrow-right"
              @click.stop="nextImg"
              :class="{ disabled: currentIndex >= imageList.length - 1 }"
          >
            ›
          </div>

          <!-- 底部指示器 -->
          <div class="indicator">
            {{ currentIndex + 1 }} / {{ imageList.length }}
          </div>

          <!-- 关闭按钮 (可选) -->
          <div class="close-btn" @click.stop="closeView">×</div>
        </div>
<!--      </transition>-->
<!--    </Teleport>-->
  </div>
</template>

<style scoped>
.long-pic-slice {
  width: 100%;
  max-width: 100%;
  margin: 12px 0;
  position: relative;
  background-color: #f5f5f5; /* 加载时的背景色 */

  /* 【核心修复】设置最小高度，防止锚点定位错误 */
  /* 如果没有传入宽高比，至少占据 300px，避免高度为 0 */
  min-height: 300px;

  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
}

/* 加载状态样式 */
.loading-state {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  color: #999;
  font-size: 14px;
  background: rgba(255,255,255,0.5);
}

.slice-img {
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
  position: relative;
  z-index: 1;
  /* 移除图片底部的微小间隙 */
  vertical-align: bottom;
}

/* --- 全屏预览样式 --- */
.viewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  backdrop-filter: blur(5px);
}

.viewer-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* 防止放大后出现滚动条 */
}

.viewer-img {
  max-width: 90%;
  max-height: 90vh;
  object-fit: contain;
  transition: transform 0.15s ease-out; /* 缩放过渡更跟手 */
  user-select: none;
  -webkit-user-drag: none;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* 箭头样式 */
.arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  user-select: none;
  transition: all 0.2s;
  border: 1px solid rgba(255,255,255,0.1);
}

.arrow:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.1);
}

.arrow-left { left: 20px; }
.arrow-right { right: 20px; }

.arrow.disabled {
  opacity: 0.2;
  cursor: not-allowed;
  pointer-events: none;
}

/* 指示器 */
.indicator {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.6);
  padding: 6px 16px;
  border-radius: 20px;
  z-index: 100;
  font-family: monospace;
  letter-spacing: 1px;
}

/* 关闭按钮 */
.close-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  background: rgba(0,0,0,0.2);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  z-index: 100;
  transition: background 0.2s;
}
.close-btn:hover {
  background: rgba(255,255,255,0.4);
}

/* 淡入淡出动画 */
.viewer-fade-enter-active,
.viewer-fade-leave-active {
  transition: opacity 0.3s ease;
}
.viewer-fade-enter-from,
.viewer-fade-leave-to {
  opacity: 0;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .arrow {
    width: 36px;
    height: 36px;
    font-size: 24px;
  }
  .arrow-left { left: 10px; }
  .arrow-right { right: 10px; }
  .viewer-img {
    max-width: 100%;
    max-height: 100vh;
  }
}
</style>