@chenghongyu/xpt-file-viewer 1.1.0

package/src/components/file/preview/CopyCode.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="copy-content">
+    <!-- 复制按钮 -->
+    <div
+      class="copy-btn code-data-copy"
+      @click="copyMessage">
+      <i-ic-baseline-content-copy />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { toClipboard } from '@soerenmartius/vue3-clipboard'
+
+const props = defineProps({
+  code: String
+});
+
+const copyMessage = () => {
+  toClipboard(props.code).then(() => {
+    ElMessage.success('复制成功');
+  }).catch(() => {
+    ElMessage.success('复制失败');
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.copy-content {
+  height: 0;
+}
+.copy-btn {
+  user-select: none;
+  opacity: 0;
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  cursor: pointer;
+  padding: 5px;
+  border-radius: 3px;
+  transition: 0.3s;
+  background: rgba(255, 255, 255, 0.2);
+  &:active {
+    background: rgba(253, 253, 253, 0.575);
+  }
+}
+</style>

package/src/components/file/preview/FileGallery.vue

@@ -0,0 +1,199 @@
+<template>
+	<!-- 画廊模式 -->
+	<div class="zfile-gallery-body">
+		<div class="zfile-img-body" v-if="transferResult.length > 0">
+			<div class="zfile-img-row" v-for="(rowItem, index) in transferResult" :key="index">
+				<div class="zfile-img-col"
+				     @click="openGalleryImage(colItem)"
+				     :style="{ display: globalConfigStore.zfileConfig.gallery.showInfoMode === 'hover' ? 'flex' : 'block'}"
+				     v-for="colItem in rowItem">
+					<template v-if="colItem?.url">
+            <img class="zfile-gallery-img lazyload"
+                 data-sizes="auto"
+                 @load="loadImg"
+                 :class="globalConfigStore.zfileConfig.gallery.roundedBorder ? 'zfile-gallery-img-rounded' : ''"
+                 :data-src="colItem.url"
+                 loading="lazy"
+                 :alt="colItem.name"/>
+            <div v-if="globalConfigStore.zfileConfig.gallery.showInfo &&
+					    globalConfigStore.zfileConfig.gallery.showInfoMode === 'hover'"
+                 :class="globalConfigStore.zfileConfig.gallery.roundedBorder ? 'zfile-gallery-img-rounded' : ''"
+                 v-show="loadedList.includes(colItem.name)"
+                 class="zfile-gallery-img-hover-info">
+              <span class="zfile-gallery-img-text">{{colItem.name}}</span>
+              <span class="zfile-gallery-img-text">{{fileSizeFormat(colItem.size)}}</span>
+            </div>
+            <div
+              v-show="loadedList.includes(colItem.name)"
+              v-if="globalConfigStore.zfileConfig.gallery.showInfo &&
+						globalConfigStore.zfileConfig.gallery.showInfoMode === 'bottom'">
+              <span class="zfile-gallery-img-text"> {{ colItem.name }} </span>
+            </div>
+          </template>
+				</div>
+			</div>
+		</div>
+    <div v-else class="h-full">
+      <el-empty class="h-full" description="当前文件夹无图片">
+        <el-button type="primary" @click="fileDataStore.imgMode = false">退出画廊模式</el-button>
+      </el-empty>
+    </div>
+	</div>
+</template>
+
+<script setup>
+import { fileSizeFormat } from "~/utils";
+import {computed, reactive, ref} from "vue";
+
+
+import 'lazysizes';
+import useGlobalConfigStore from "~/stores/global-config";
+let globalConfigStore = useGlobalConfigStore();
+
+import useFileDataStore from "~/stores/file-data";
+let fileDataStore = useFileDataStore();
+
+// 计算图片二维列表, 多行 * 多列
+const transferResult = computed(() => {
+	// 获取图片列表
+	let imgList = fileDataStore.filterFileByType('image');
+
+  if (imgList.length === 0) {
+    return [];
+  }
+
+	// 图片二维数组, 表示每行每列的图片
+	let imgArray = ref([]);
+
+	// 图片列数
+	let galleryColumn = globalConfigStore.zfileConfig.gallery.column;
+
+	// 当前行数
+	let currRow = 0;
+
+	imgList.forEach((item, index) => {
+		if (index % galleryColumn === 0) {
+			if (index !== 0) {
+				currRow++;
+			}
+			imgArray.value[currRow] = [];
+		}
+		imgArray.value[currRow].push(item);
+	})
+
+	// 图片行转列函数
+	function transfer(oldArr) {
+		return oldArr[0].map((col, i) => oldArr.map(row => row[i]));
+	}
+
+	// 图片行转列完成后的数组
+	return transfer(imgArray.value);
+})
+
+// 图片行间距 px
+let galleryRowSpacingPx = computed(() => {
+	return globalConfigStore.zfileConfig.gallery.rowSpacing + 'px';
+});
+
+// 图片列间距 px
+let galleryColSpacingPx = computed(() => {
+  return `0 ${globalConfigStore.zfileConfig.gallery.columnSpacing / 2}px`;
+});
+
+// 图片外部容器宽度, 100 / 图片列数
+let galleryRowWidth = computed(() => {
+  // 图片列数
+  let galleryColumn = globalConfigStore.zfileConfig.gallery.column;
+  let galleryColumnSpacing = globalConfigStore.zfileConfig.gallery.columnSpacing;
+  return `calc(calc(100% / ${globalConfigStore.zfileConfig.gallery.column}) - calc(${(galleryColumn - 1) * galleryColumnSpacing}px / ${galleryColumn}))`;
+})
+
+
+// 引入文件预览组件
+import useFilePreview from '~/composables/file/useFilePreview';
+const { openImage } = useFilePreview();
+const openGalleryImage = (item) => {
+  if (!globalConfigStore.zfileConfig.imagePreview.gallery) {
+    return;
+  }
+  if (loadedList.includes(item.name)) {
+    openImage(item);
+  }
+}
+
+// 已加载完的图片列表, 已加载完才悬浮显示标题
+let loadedList = reactive([]);
+const loadImg = (e) => {
+  loadedList.push(e.currentTarget.alt);
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+.zfile-gallery-body {
+	height: 100%;
+  margin-top: 10px;
+
+	.zfile-img-body {
+		@apply flex h-full flex-wrap;
+	}
+
+	.zfile-img-row {
+		width: v-bind('galleryRowWidth');
+    margin: v-bind('galleryColSpacingPx');
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+  }
+
+	.zfile-img-col {
+		@apply flex overflow-hidden relative text-center;
+		margin-bottom: v-bind('galleryRowSpacingPx');
+
+		.zfile-gallery-img {
+			@apply border;
+		}
+
+    .zfile-gallery-img:not(.loaded) {
+      @apply w-full;
+    }
+
+    .zfile-gallery-img:not(.lazyloaded) {
+      @apply min-h-[150px];
+    }
+
+		.zfile-gallery-img-rounded {
+			@apply rounded-lg;
+		}
+
+		.zfile-gallery-img-text {
+			@apply overflow-ellipsis overflow-hidden whitespace-nowrap text-sm opacity-70;
+		}
+
+		.zfile-gallery-img-hover-info {
+			@apply absolute top-0 h-1/2 left-0 right-0 text-sm p-2
+			transition-opacity duration-300
+			flex justify-between
+			text-white space-x-10 opacity-0;
+			background: linear-gradient(180deg,rgba(0,0,0,.6),transparent 120px);
+
+			.zfile-gallery-img-text:last-child {
+				@apply text-right min-w-fit;
+			}
+		}
+
+		&:hover .zfile-gallery-img-hover-info {
+			@apply opacity-100;
+		}
+	}
+
+}
+
+</style>

package/src/components/file/preview/ImageViewer.vue

@@ -0,0 +1,432 @@
+<template>
+  <div class="image-preview-container">
+    <div ref="containerRef" class="preview-area">
+        <img :src="props.fileUrl" alt="">
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
+import { ElMessage } from 'element-plus'
+
+// ==================== Props ====================
+const props = defineProps({
+  // 单个图片 URL
+  fileUrl: {
+    type: String,
+    default: ''
+  },
+  // 单个图片名称
+  fileName: {
+    type: String,
+    default: ''
+  },
+  // 图片列表（可选）
+  imageList: {
+    type: Array,
+    default: () => []
+  },
+  // 默认显示索引
+  defaultIndex: {
+    type: Number,
+    default: 0
+  },
+  // 是否显示工具栏
+  showToolbar: {
+    type: Boolean,
+    default: true
+  },
+  // 是否显示缩略图
+  showThumbnail: {
+    type: Boolean,
+    default: true
+  },
+  // 初始缩放比例
+  initialZoom: {
+    type: Number,
+    default: 100
+  },
+  // 是否支持拖拽
+  draggable: {
+    type: Boolean,
+    default: true
+  },
+  // 是否支持鼠标滚轮缩放
+  wheelZoom: {
+    type: Boolean,
+    default: true
+  }
+})
+
+// ==================== Emits ====================
+const emit = defineEmits(['load', 'error', 'switch', 'zoom', 'rotate'])
+
+// ==================== 响应式数据 ====================
+const containerRef = ref(null)
+const currentImage = ref({ url: '', name: '' })
+const currentIndex = ref(0)
+const zoomLevel = ref(props.initialZoom)
+const rotation = ref(0)
+const translateX = ref(0)
+const translateY = ref(0)
+
+// 拖拽状态
+const isDragging = ref(false)
+const startX = ref(0)
+const startY = ref(0)
+
+// ==================== 计算属性 ====================
+// 获取图片列表
+const getImageList = () => {
+  if (props.imageList && props.imageList.length > 0) {
+    return props.imageList.map(item => ({
+      name: item.name || item.imageName || '未知图片',
+      url: item.url || item.imageUrl || item.path
+    }))
+  }
+
+  if (props.imageUrl) {
+    return [{ name: props.imageName || '图片', url: props.imageUrl }]
+  }
+
+  return []
+}
+
+// 图片样式
+const imageStyle = computed(() => ({
+  transform: `
+    scale(${zoomLevel.value / 100}) 
+    rotate(${rotation.value}deg) 
+    translate(${translateX.value}px, ${translateY.value}px)
+  `,
+  cursor: props.draggable ? (isDragging.value ? 'grabbing' : 'grab') : 'default'
+}))
+
+// ==================== 方法 ====================
+// 格式化单个图片
+const formatSingleImage = (url, name) => {
+  return {
+    name: name || '未知图片',
+    url: url
+  }
+}
+
+// 初始化图片
+const initImagePreview = async () => {
+  const list = getImageList()
+
+  if (!list || list.length === 0) {
+    console.warn('图片列表为空')
+    return
+  }
+
+  // 确保索引有效
+  let index = props.defaultIndex
+  if (index < 0 || index >= list.length) {
+    index = 0
+  }
+
+  currentIndex.value = index
+  currentImage.value = list[index]
+
+  await nextTick()
+  reset()
+}
+
+// 图片加载完成
+const handleImageLoad = (e) => {
+  emit('load', {
+    ...currentImage.value,
+    width: e.target.naturalWidth,
+    height: e.target.naturalHeight
+  })
+}
+
+// 图片加载失败
+const handleImageError = (e) => {
+  emit('error', {
+    ...currentImage.value,
+    error: e
+  })
+  ElMessage.error('图片加载失败，请检查文件路径或格式')
+}
+
+// 放大
+const zoomIn = () => {
+  if (zoomLevel.value < 500) {
+    zoomLevel.value += 25
+    emit('zoom', zoomLevel.value)
+  }
+}
+
+// 缩小
+const zoomOut = () => {
+  if (zoomLevel.value > 25) {
+    zoomLevel.value -= 25
+    emit('zoom', zoomLevel.value)
+  }
+}
+
+// 向左旋转
+const rotateLeft = () => {
+  rotation.value -= 90
+  emit('rotate', rotation.value)
+}
+
+// 向右旋转
+const rotateRight = () => {
+  rotation.value += 90
+  emit('rotate', rotation.value)
+}
+
+// 重置
+const reset = () => {
+  zoomLevel.value = props.initialZoom
+  rotation.value = 0
+  translateX.value = 0
+  translateY.value = 0
+  emit('zoom', zoomLevel.value)
+  emit('rotate', rotation.value)
+}
+
+// 上一张
+const prevImage = () => {
+  if (currentIndex.value > 0) {
+    switchImage(currentIndex.value - 1)
+  }
+}
+
+// 下一张
+const nextImage = () => {
+  if (currentIndex.value < getImageList().length - 1) {
+    switchImage(currentIndex.value + 1)
+  }
+}
+
+// 切换图片
+const switchImage = (index) => {
+  const list = getImageList()
+  if (index >= 0 && index < list.length) {
+    currentIndex.value = index
+    currentImage.value = list[index]
+    reset()
+    emit('switch', { ...currentImage.value, index })
+  }
+}
+
+// ==================== 拖拽相关 ====================
+const handleMouseDown = (e) => {
+  if (!props.draggable) return
+  isDragging.value = true
+  startX.value = e.clientX - translateX.value
+  startY.value = e.clientY - translateY.value
+}
+
+const handleMouseMove = (e) => {
+  if (!isDragging.value) return
+  e.preventDefault()
+  translateX.value = e.clientX - startX.value
+  translateY.value = e.clientY - startY.value
+}
+
+const handleMouseUp = () => {
+  isDragging.value = false
+}
+
+// ==================== 滚轮缩放 ====================
+const handleWheel = (e) => {
+  if (!props.wheelZoom) return
+  e.preventDefault()
+  
+  if (e.deltaY < 0) {
+    zoomIn()
+  } else {
+    zoomOut()
+  }
+}
+
+// ==================== 监听器 ====================
+// 监听单个图片 URL 变化
+watch(() => [props.imageUrl, props.imageName], async () => {
+  if (props.imageUrl) {
+    await initImagePreview()
+  }
+}, { immediate: true })
+
+// 监听图片列表变化
+watch(() => props.imageList, async (newList) => {
+  if (newList && newList.length > 0) {
+    await initImagePreview()
+  }
+}, { deep: true })
+
+// 监听默认索引变化
+watch(() => props.defaultIndex, (newIndex) => {
+  const list = getImageList()
+  if (newIndex >= 0 && newIndex < list.length) {
+    switchImage(newIndex)
+  }
+})
+
+// ==================== 生命周期 ====================
+onMounted(async () => {
+  await nextTick()
+  if (props.imageUrl || (props.imageList && props.imageList.length > 0)) {
+    await initImagePreview()
+  }
+})
+
+// ==================== 暴露方法 ====================
+defineExpose({
+  zoomIn,
+  zoomOut,
+  rotateLeft,
+  rotateRight,
+  reset,
+  prevImage,
+  nextImage,
+  switchImage,
+  getCurrentImage: () => currentImage.value,
+  getCurrentIndex: () => currentIndex.value
+})
+</script>
+
+<style scoped lang="scss">
+.image-preview-container {
+  width: 100%;
+  height: 100%;
+  min-height: 400px;
+  background-color: #f5f5f5;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .preview-area {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    background-color: #fff;
+
+    .image-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: transform 0.2s ease;
+      transform-origin: center center;
+
+      .preview-image {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+        user-select: none;
+        -webkit-user-drag: none;
+      }
+    }
+
+    .empty-state {
+      color: #999;
+      font-size: 14px;
+    }
+  }
+
+  .toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    padding: 12px;
+    background-color: #fff;
+    border-top: 1px solid #e0e0e0;
+
+    button {
+      width: 36px;
+      height: 36px;
+      border: 1px solid #dcdfe6;
+      background-color: #fff;
+      border-radius: 4px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s;
+
+      &:hover {
+        background-color: #23ade5;
+        border-color: #23ade5;
+        color: #fff;
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      span {
+        font-size: 16px;
+        font-weight: bold;
+      }
+    }
+
+    .zoom-level {
+      min-width: 50px;
+      text-align: center;
+      font-size: 14px;
+      color: #666;
+    }
+
+    .pagination {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-left: 16px;
+
+      .page-info {
+        font-size: 14px;
+        color: #666;
+        min-width: 60px;
+        text-align: center;
+      }
+    }
+  }
+
+  .thumbnail-list {
+    display: flex;
+    gap: 8px;
+    padding: 12px;
+    background-color: #fff;
+    border-top: 1px solid #e0e0e0;
+    overflow-x: auto;
+
+    .thumbnail-item {
+      width: 60px;
+      height: 60px;
+      border: 2px solid transparent;
+      border-radius: 4px;
+      overflow: hidden;
+      cursor: pointer;
+      flex-shrink: 0;
+      transition: all 0.2s;
+
+      &:hover {
+        border-color: #23ade5;
+      }
+
+      &.active {
+        border-color: #23ade5;
+        box-shadow: 0 0 8px rgba(35, 173, 229, 0.4);
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+}
+</style>