@chenghongyu/xpt-file-viewer 1.1.0

package/src/components/fileReview/AudioPlayer-copy.vue

@@ -0,0 +1,333 @@
+<template>
+  <div class="audio-player-container">
+    <div id="aplayer" ref="playerRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
+import APlayer from "aplayer"
+import "aplayer/dist/APlayer.min.css"
+import { ElMessage } from 'element-plus'
+
+// 组件接收的属性
+const props = defineProps({
+  // 单个音频文件URL
+  fileUrl: {
+    type: String,
+    default: ''
+  },
+  // 单个音频文件名
+  fileName: {
+    type: String,
+    default: ''
+  },
+  // 音频列表（可选）
+  audioList: {
+    type: Array,
+    default: () => []
+  },
+  // 默认播放索引
+  defaultIndex: {
+    type: Number,
+    default: 0
+  },
+  // 是否自动播放
+  autoPlay: {
+    type: Boolean,
+    default: true // ❌ 改为 false，避免浏览器阻止自动播放
+  },
+  // 是否固定底部
+  fixed: {
+    type: Boolean,
+    default: false
+  },
+  // 是否显示播放列表
+  showList: {
+    type: Boolean,
+    default: true
+  }
+})
+
+// 发射事件
+const emit = defineEmits(['play', 'pause', 'ended', 'error', 'switch'])
+
+// 响应式数据
+const playerRef = ref(null)
+let ap = null
+
+// 格式化单个音频文件
+const formatSingleAudio = (url, name) => {
+  return {
+    name: name || '未知音频',
+    artist: '未知艺术家',
+    url: url,
+    cover: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAACXBIWXMAAAsTAAALEwEAmpwYAAAF8WlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTAzLTIxVDE1OjE3OjQ0KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTAzLTIxVDE1OjE3OjQ0KzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOS0wMy0yMVQxNToxNzo0NCswODowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0NzQ3NjEwNy0xNGQ1LTA1NGYtYjQxNy1mNjYwNzE5MjU5NzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDc0NzYxMDctMTRkNS0wNTRmLWI0MTctZjY2MDcxOTI1OTc0IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NDc0NzYxMDctMTRkNS0wNTRmLWI0MTctZjY2MDcxOTI1OTc0IiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NDc0NzYxMDctMTRkNS0wNTRmLWI0MTctZjY2MDcxOTI1OTc0IiBzdEV2dDp3aGVuPSIyMDE5LTAzLTIxVDE1OjE3OjQ0KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+'
+  }
+}
+
+// 获取音频列表
+const getAudioList = () => {
+  if (props.audioList && props.audioList.length > 0) {
+    return props.audioList.map(item => ({
+      name: item.name || item.fileName || '未知音频',
+      artist: item.artist || '未知艺术家',
+      url: item.url || item.fileUrl || item.path,
+      cover: item.cover || formatSingleAudio().cover
+    }))
+  }
+
+  if (props.fileUrl) {
+    return [formatSingleAudio(props.fileUrl, props.fileName)]
+  }
+
+  return []
+}
+
+// 初始化音频播放器
+const initAudioPlayer = async () => {
+  const audioList = getAudioList()
+
+  if (!audioList || audioList.length === 0) {
+    console.warn('音频列表为空')
+    return
+  }
+
+  // 确保索引有效
+  let index = props.defaultIndex
+  if (index < 0 || index >= audioList.length) {
+    index = 0
+  }
+
+  // 销毁旧实例
+  if (ap) {
+    ap.destroy()
+    ap = null
+  }
+
+  // 等待 DOM 渲染完成
+  await nextTick()
+
+  if (!playerRef.value) {
+    console.error('播放器容器未找到')
+    return
+  }
+
+  // 清空容器
+  playerRef.value.innerHTML = ''
+
+  try {
+    ap = new APlayer({
+      container: playerRef.value,
+      audio: audioList,
+      fixed: props.fixed,
+      autoplay: false, // ❌ 关闭自动播放，防止浏览器拦截
+      preload: 'metadata',
+      theme: '#23ade5',
+      loop: 'all',
+      order: 'list',
+      volume: 0.7,
+      mutex: true,
+      listFolded: !props.showList,
+    })
+
+    // 绑定事件
+    ap.on('play', () => {
+      emit('play', getCurrentAudio())
+    })
+
+    ap.on('pause', () => {
+      emit('pause', getCurrentAudio())
+    })
+
+    ap.on('ended', () => {
+      emit('ended', getCurrentAudio())
+    })
+
+    ap.on('error', (error) => {
+      emit('error', error)
+      // ElMessage.error('音频加载失败，请检查文件路径或格式')
+    })
+
+    ap.on('listswitch', () => {
+      emit('switch', getCurrentAudio())
+    })
+
+    // 切换到指定索引并播放（需手动触发）
+    if (index >= 0 && index < audioList.length) {
+      ap.list.switch(index)
+      if (props.autoPlay) {
+        ap.play() // ⚠️ 注意：即使设置了 autoPlay=false，这里仍可调用 play()
+      }
+    }
+
+  } catch (error) {
+    console.error('APlayer初始化失败:', error)
+    ElMessage.error('播放器初始化失败')
+  }
+}
+
+// 获取当前播放的音频信息
+const getCurrentAudio = () => {
+  if (ap && ap.list && ap.list.audios) {
+    return ap.list.audios[ap.list.index]
+  }
+  return null
+}
+
+// 播放
+const play = () => {
+  if (ap) {
+    ap.play()
+  }
+}
+
+// 暂停
+const pause = () => {
+  if (ap) {
+    ap.pause()
+  }
+}
+
+// 切换歌曲
+const switchAudio = (index) => {
+  if (ap && index >= 0 && index < getAudioList().length) {
+    ap.list.switch(index)
+    ap.play()
+  }
+}
+
+// 销毁播放器
+const destroy = () => {
+  if (ap) {
+    ap.destroy()
+    ap = null
+  }
+}
+
+// 监听文件URL变化
+watch(() => [props.fileUrl, props.fileName], async () => {
+  if (props.fileUrl) {
+    await initAudioPlayer()
+  }
+}, { immediate: true })
+
+// 监听音频列表变化
+watch(() => props.audioList, async (newList) => {
+  if (newList && newList.length > 0) {
+    await initAudioPlayer()
+  }
+}, { deep: true })
+
+// 监听默认索引变化
+watch(() => props.defaultIndex, (newIndex) => {
+  if (ap && newIndex >= 0 && newIndex < getAudioList().length) {
+    ap.list.switch(newIndex)
+    if (props.autoPlay) {
+      ap.play()
+    }
+  }
+})
+
+// 生命周期
+onMounted(async () => {
+  await nextTick()
+  if (props.fileUrl || (props.audioList && props.audioList.length > 0)) {
+    await initAudioPlayer()
+  }
+})
+
+onUnmounted(() => {
+  destroy()
+})
+
+// 暴露方法给父组件
+defineExpose({
+  play,
+  pause,
+  switchAudio,
+  destroy,
+  getCurrentAudio
+})
+</script>
+
+<style scoped lang="scss">
+.audio-player-container {
+  width: 100%;
+  background-color: #f5f5f5;
+  border-radius: 8px;
+
+  :deep(.aplayer) {
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+    .aplayer-body {
+      background-color: #fff;
+    }
+
+    .aplayer-info {
+      border-top: 1px solid #e0e0e0;
+
+      .aplayer-music {
+        .aplayer-title {
+          color: #333;
+        }
+
+        .aplayer-author {
+          color: #666;
+        }
+      }
+
+      .aplayer-lrc {
+        &::before,
+        &::after {
+          background: linear-gradient(180deg, #fff 0, rgba(255, 255, 255, 0));
+        }
+
+        p {
+          color: #333;
+        }
+      }
+
+      .aplayer-controller {
+        .aplayer-time {
+          color: #666;
+        }
+
+        .aplayer-bar-wrap {
+          .aplayer-bar {
+            background: #cdcdcd;
+
+            .aplayer-played {
+              background: #23ade5;
+            }
+
+            .aplayer-thumb {
+              background: #23ade5;
+            }
+          }
+        }
+      }
+    }
+
+    .aplayer-list {
+      border-top: 1px solid #e0e0e0;
+
+      li {
+        &:hover {
+          background: #f5f5f5;
+        }
+
+        &.aplayer-list-light {
+          background: #e6f7ff;
+
+          .aplayer-list-title {
+            color: #23ade5;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/fileReview/PdfViewer-copy.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="zfile-pdf-viewer">
+    <div class="app-header">
+      <div v-if="isLoading">
+        <span v-if="loadingProgress < 100">
+          加载 {{ loadingProgress }}%
+        </span>
+        <span v-else>
+          渲染所有页面中...
+        </span>
+      </div>
+      <div v-else>
+        <span v-if="showAllPages">
+          共 {{ pageCount }} 页
+        </span>
+
+        <span v-else>
+          <button :disabled="page <= 1" @click="page--">❮</button>
+          {{ page }} / {{ pageCount }}
+          <button :disabled="page >= pageCount" @click="page++">❯</button>
+        </span>
+      </div>
+
+      <span v-show="!isLoading">
+        <button class="px-1 sm:px-4" @click="pdfViewCanvasWidthNum-=5">-</button>
+        <span>
+          <span class="hidden sm:inline">缩放比例</span>
+          {{pdfViewCanvasWidthNum}} %
+        </span>
+        <button class="px-1 sm:px-4" @click="pdfViewCanvasWidthNum+=5">+</button>
+      </span>
+
+      <label :class="isLoading ? 'invisible' : 'visible'">
+        <input v-model="showAllPages" type="checkbox">
+        显示所有页
+      </label>
+    </div>
+
+    <div class="app-content">
+      <vue-pdf-embed
+        annotationLayer
+        textLayer
+        ref="pdfRef"
+        :source="doc"
+        :page="page"
+        @rendered="handleDocumentRender"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+import VuePdfEmbed, { useVuePdfEmbed } from 'vue-pdf-embed'
+import { useMagicKeys } from '@vueuse/core'
+const { ArrowLeft, ArrowRight, NumpadAdd, NumpadSubtract } = useMagicKeys()
+
+// optional styles
+import 'vue-pdf-embed/dist/styles/annotationLayer.css'
+import 'vue-pdf-embed/dist/styles/textLayer.css'
+
+// 组件接收的属性：
+//  fileUrl:    文件下载路径
+//  fileName:   文件名
+const props = defineProps({
+  fileUrl: String,
+  fileName: String
+});
+
+const pdfRef = ref();
+
+const pdfViewCanvasWidthNum = ref(100);
+// 图片外部容器宽度, 100 / 图片列数
+let pdfViewCanvasWidth = computed(() => {
+  return `${pdfViewCanvasWidthNum.value}%`;
+})
+
+let isLoading = ref(true);
+let page = ref(null);
+let pageCount = ref(1);
+let showAllPages = ref(true);
+
+watch(() => showAllPages.value, () => {
+  page.value = showAllPages.value ? null : 1;
+});
+
+const handleDocumentRender = (a) => {
+  pageCount.value = pdfRef.value.doc.numPages;
+  isLoading.value = false;
+};
+
+const handlerDocumentError = (error) => {
+  isLoading.value = false;
+  ElMessage.error("PDF 加载失败");
+};
+
+const loadingProgress = ref(0);
+const handleDocumentLoadProgress = (progressData) => {
+  // 保留2位小数
+  loadingProgress.value = (progressData.loaded / progressData.total * 100).toFixed(2);
+};
+
+// 支持按键翻页
+watch(() => [ArrowLeft.value, ArrowRight.value], (value) => {
+  if (isLoading.value) return;
+  if (showAllPages.value) return;
+  if (value[0] && page.value > 1) {
+    page.value--;
+  }
+  if (value[1] && page.value < pageCount.value) {
+    page.value++;
+  }
+})
+
+// 支持按键缩放
+watch(() => [NumpadSubtract.value, NumpadAdd.value], (value) => {
+  if (value[0]) {
+    pdfViewCanvasWidthNum.value -= 5;
+  }
+  if (value[1]) {
+    pdfViewCanvasWidthNum.value += 5;
+  }
+})
+
+const { doc } = useVuePdfEmbed( {
+  source: props.fileUrl,
+  onProgress: handleDocumentLoadProgress,
+  onError: handlerDocumentError,
+})
+</script>
+
+<style scoped lang="scss">
+.vue-pdf-embed {
+  :deep(> div) {
+    box-shadow: 0 2px 8px 4px rgba(0, 0, 0, 0.1);
+    @apply w-full h-full mt-2;
+  }
+
+  :deep(canvas) {
+    width: v-bind('pdfViewCanvasWidth') !important;
+    height: 100% !important;
+    margin: 0 auto;
+  }
+}
+
+.app-header {
+  box-shadow: 0 2px 8px 4px rgba(0, 0, 0, 0.1);
+  background-color: #555;
+  color: #ddd;
+  @apply flex content-between justify-between p-2 sm:p-4 bg-gray-600;
+
+}
+
+.app-content {
+  padding: 24px 0;
+}
+</style>

package/src/components/fileReview/TextViewer-copy.vue

@@ -0,0 +1,44 @@
+<template>
+  <VueCodeEditor v-if="fileContent" :fileName="fileName" :modelValue="fileContent" :language="fileSuffix" 
+                :readonly="true"></VueCodeEditor>
+</template>
+
+<script setup>
+// import useStorageConfigStore from "~/stores/storage-config";
+// let storageConfigStore = useStorageConfigStore();
+import { ref, onMounted, reactive  } from "vue";
+import { getFileSuffix } from "../../utils";
+import VueCodeEditor from "../vue-codemirror/index.vue";
+
+// 组件接收的属性：
+//  fileUrl:    文件下载路径
+//  fileName:   文件名
+const props = defineProps({
+	fileUrl: String,
+	fileName: String
+});
+
+// 获取文件名后缀
+const fileSuffix = getFileSuffix(props.fileName);
+
+// 文件内容
+const fileContent = ref(null);
+
+import { getFileTextReq } from "../../api/home/common";
+
+// 挂载时，加载文件内容，并初始化播放器
+onMounted(() => {
+	let fileUrl = props.fileUrl;
+	getFileTextReq(fileUrl).then((res) => {
+		fileContent.value = res.request.response;
+	}).catch((e) => {
+    ElMessage({
+      message: `加载文本文件失败. 请检查此地址是否有效或是否限制了跨域访问.`,
+      type: 'error',
+      duration: 0,
+      showClose: true,
+      grouping: true,
+    })
+	});
+});
+</script>