@chenghongyu/xpt-file-viewer 1.1.0

package/src/components/common/dialog/ZDialog.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="z-dialog-wrapper">
+    <el-dialog
+      v-bind="attrs"
+      :model-value="modelValue"
+      :draggable="draggable"
+      :show-close="false"
+      :fullscreen="attrs?.fullscreen ?? isFullscreen"
+      :before-close="handleNativeClose"
+    >
+      <template #header>
+        <div class="z-dialog-title">
+          <template v-if="slots.header">
+            <slot name="header"></slot>
+          </template>
+          <template v-else>
+            {{ title }}
+          </template>
+        </div>
+        <div class="z-dialog-title-btns">
+          <el-icon v-if="isFullScreenBtn" @click="handleFullscreen"><ArrowsPointingOutIcon /></el-icon>
+          <el-icon size="20" @click="handleClose('close')"><XMarkIcon /></el-icon>
+        </div>
+      </template>
+
+      <div class="z-dialog-content" v-loading="loading">
+        <slot></slot>
+      </div>
+
+      <template #footer>
+        <span v-if="!slots.footer && showFooter" class="z-dialog-footer">
+          <el-button type="primary" @click="handleConfirm">{{ confirmText }}</el-button>
+          <el-button @click="handleClose('cancel')">{{ cancelText }}</el-button>
+        </span>
+        <slot v-else name="footer"></slot>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref, useAttrs, useSlots } from "vue";
+import { ArrowsPointingOutIcon, XMarkIcon } from '@heroicons/vue/24/outline';
+import { ElDialog, ElIcon, ElButton } from "element-plus";
+import type { DialogCloseType, PropsType } from "./types";
+
+const attrs = useAttrs();
+const slots = useSlots();
+
+const props = withDefaults(defineProps<PropsType>(), {
+  title: "",
+  isDraggable: false,
+  modelValue: false,
+  hiddenFullBtn: false,
+  loading: false,
+  confirmText: "确认",
+  cancelText: "关闭",
+  destroyOnClose: false,
+  draggable: false,
+  autoFullScreen: false,
+  onClose: null,
+  showFooter: true,
+});
+
+const emits = defineEmits<{
+  (e: "update:modelValue"): void;
+  (e: "confirm"): void;
+  (e: "close", type: DialogCloseType): void;
+}>();
+
+const isFullscreen = ref(props.autoFullScreen ? window.innerWidth < 768 : false);
+const isFullScreenBtn = computed(() => {
+  // 如果指定了原生的 fullscreen 属性，则不显示全屏按钮
+  if (attrs?.fullscreen) return false;
+  return !props.hiddenFullBtn;
+});
+
+const handleFullscreen = () => {
+  // 如果指定了原生的 fullscreen 属性，则不响应全屏按钮的操作
+  if (attrs?.fullscreen) return;
+  isFullscreen.value = !isFullscreen.value;
+};
+
+// 发生了原生的关闭事件(点击遮罩，按 esc 键)
+const handleNativeClose = () => {
+  handleClose("close");
+};
+
+const handleClose = (type: DialogCloseType) => {
+  // 如果定义了原生的 before-close 属性，则先执行 before-close 方法
+  if (Reflect.has(attrs, "before-close") && typeof attrs["before-close"] === "function") {
+    attrs["before-close"]();
+  }
+
+  // 判断 emits 里是否有 close 事件，有则触发，没有则直接更新 modelValue
+  if (props.onClose) {
+    emits("close", type)
+  } else {
+    emits("update:modelValue");
+  }
+};
+
+const handleConfirm = () => {
+  emits("confirm");
+};
+
+defineExpose({
+  isVisible: props.modelValue,
+});
+</script>
+
+<style lang="scss" scoped>
+// 去除默认的顶部 padding，使得标题可以紧贴顶部，不会显得距离顶部比距离正文多
+:deep(.el-dialog) {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+// 标题区样式，左侧标题，右侧按钮，下方分割线
+:deep(.el-dialog__header) {
+  border-bottom: 1px solid #eee;
+  padding: 12px 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+// 标题文字样式，居左显示，超出后显示省略号
+.z-dialog-title {
+  width: 100%;
+  line-height: 24px;
+  font-size: 18px;
+  color: #303133;
+  text-align: left;
+
+  margin-right: 16px;
+  // 标题超出后显示省略号
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
+// 标题按钮区样式，右侧按钮区域，按钮之间有间距, 按钮 hover 时颜色变化
+.z-dialog-title-btns {
+  display: flex;
+  align-items: center;
+  i {
+    margin-right: 8px;
+
+    font-size: 16px;
+    cursor: pointer;
+  }
+  i:hover, i:focus {
+    color: var(--el-color-primary);
+  }
+  i:last-child {
+    margin-right: 0;
+  }
+}
+
+.z-dialog-content {
+  height: 100%;
+}
+
+.z-dialog-wrapper {
+  :deep(.el-dialog__footer) {
+    @apply pb-4;
+  }
+}
+
+</style>

package/src/components/common/dialog/types.ts

@@ -0,0 +1,19 @@
+export interface PropsType {
+  title?: string;
+  isDraggable?: boolean;
+  modelValue?: boolean;
+  hiddenFullBtn?: boolean;
+  loading?: boolean;
+  confirmText?: string;
+  cancelText?: string;
+  destroyOnClose?: boolean;
+  draggable?: boolean;
+  /*
+  是否根据设备是否是移动端来自动设置全屏
+   */
+  autoFullScreen?: boolean;
+  onClose?: Function | null;
+  showFooter?: boolean;
+}
+
+export declare type DialogCloseType = 'cancel' | 'close';

package/src/components/common/dialog/useDialog.ts

@@ -0,0 +1,18 @@
+import { ref } from "vue";
+
+export default function useDialog() {
+  const visible = ref(false);
+  const loading = ref(false);
+  const openDialog = () => (visible.value = true);
+  const closeDialog = () => (visible.value = false);
+  const openLoading = () => (loading.value = true);
+  const closeLoading = () => (loading.value = false);
+  return {
+    visible,
+    loading,
+    openDialog,
+    closeDialog,
+    openLoading,
+    closeLoading,
+  };
+}

package/src/components/common/dialog/useDialogWithForm.ts

@@ -0,0 +1,21 @@
+import { FormInstance } from "element-plus";
+import { Ref, ref } from "vue";
+
+export default function useDialogFn(
+  formInstance: Ref<FormInstance|undefined>
+) {
+
+  const visible = ref(false);
+
+  const closeDialog = () => {
+    formInstance.value?.resetFields();
+    visible.value = false;
+  };
+
+  const openDialog = () => {
+    visible.value = true;
+    formInstance.value?.resetFields();
+  };
+
+  return { visible, openDialog, closeDialog };
+}

package/src/components/copy.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { concatPath, getFileType, buildShareBasePath } from '~/utils'
+import PdfViewer from '~/components/file/preview/PdfViewer.vue'
+import VideoPlayer from '~/components/file/preview/VideoPlayer.vue'
+import AudioPlayer from '~/components/file/preview/AudioPlayer.vue'
+// import TextViewer from '~/components/file/preview/TextViewer.vue'
+// import MarkdownViewer from '~/components/file/preview/MarkdownViewer.vue'
+import OfficeViewer from '~/components/file/preview/OfficeViewer.vue'
+import KkFileViewer from '~/components/file/preview/KkFileViewer.vue'
+import Three3dPreview from '~/components/file/preview/Three3dPreview.vue'
+const fileType = ref('')
+// 文件列表数据
+const files = ref([
+  { name: '文档1.pdf', path: 'https://gylfile.newbtob.cn/2025/06/27/80ea498ede08499295caf1951e3a60f1.pdf', type: 'FILE', fileType: 'pdf' },
+  { name: '视频1.mp4', path: 'https://mp4.vjshi.com/2025-09-08/02a4a8bdaedf499da50480359a65860f.mp4', type: 'FILE' },
+  { name: '音频1.mp3', path: '/testfile/音频1.mp3', type: 'FILE' },
+  { name: '文档3.txt', path: '/testfile/规格型号1.txt', type: 'FILE' },
+  { name: 'useFileContextMenu.js', path: '/testfile/useFileContextMenu.js', type: 'FILE' },
+  { name: '接收函.docx', path: '/testfile/接收函.docx', type: 'FILE' },
+  { name: 'README.md', path: '/testfile/README.md', type: 'FILE' }
+])
+
+// 当前选中的文件
+const selectedFile = ref(null)
+
+// 处理文件点击事件
+const selectFile = (file) => {
+  selectedFile.value = file
+  fileType.value = getFileType(file.name);
+}
+</script>
+
+<template>
+  <div class="container">
+    <!-- 文件列表 -->
+    <div class="file-list">
+      <h3>文件列表</h3>
+      <ul>
+        <li 
+          v-for="file in files" 
+          :key="file.name" 
+          @click="selectFile(file)"
+          :class="{ active: selectedFile === file }"
+        >
+          {{ file.name }}
+        </li>
+      </ul>
+    </div>
+
+    <!-- PDF 预览区域 -->
+    <div class="preview-area">
+      <h3>文件预览</h3>
+      <!-- PDF预览 -->
+      <div v-if="fileType === 'pdf'">
+        <PdfViewer :file-name="selectedFile.name" :file-url="selectedFile.path" />
+      </div>
+      <!-- 视频预览 -->
+      <div v-else-if="fileType === 'video'">
+        <VideoPlayer :file-name="selectedFile.name" :file-url="selectedFile.path" />
+      </div>
+      <!-- 音频预览 -->
+      <div v-else-if="fileType === 'audio'">
+        <AudioPlayer :file-name="selectedFile.name" :file-url="selectedFile.path" />
+      </div>
+      <!-- 文本预览 -->
+      <div class="textviewer" v-else-if="fileType === 'text'">
+        <!-- <TextViewer :key="selectedFile?.path" :file-name="selectedFile.name" :file-url="selectedFile.path" v-if="selectedFile.name.indexOf('.md') === -1" /> -->
+        <!-- <MarkdownViewer :file-name="selectedFile.name" :file-url="selectedFile.path" v-if="selectedFile.name.indexOf('.md') !== -1"></MarkdownViewer> -->
+      </div>
+      <!-- 图片预览 -->
+      <div v-else-if="fileType === 'image'">
+
+      </div>
+      <div v-else-if="fileType === 'office'">
+        <OfficeViewer :file-name="selectedFile.name" :file-url="selectedFile.path"></OfficeViewer>
+      </div>
+      <div v-else-if="fileType === 'kkfileview'">
+        <KkFileViewer :file-name="selectedFile.name" :file-url="selectedFile.path"></KkFileViewer>
+      </div>
+      <div v-else-if="fileType === 'three3d'">
+        <Three3dPreview :file-name="selectedFile.name" :file-url="selectedFile.path"></Three3dPreview>
+      </div>
+      <div v-else-if="selectedFile">
+        <p>当前文件不支持预览</p>
+      </div>
+      <div v-else>
+        <p>请选择一个文件进行预览</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  gap: 20px;
+  padding: 20px;
+}
+
+.file-list, .preview-area {
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 15px;
+  height: 500px;
+}
+
+.file-list ul {
+  list-style: none;
+  padding: 0;
+}
+
+.file-list li {
+  padding: 10px;
+  cursor: pointer;
+  border-bottom: 1px solid #eee;
+}
+
+.file-list li:hover {
+  background-color: #f5f5f5;
+}
+
+.file-list li.active {
+  background-color: #e6f7ff;
+  font-weight: bold;
+}
+
+.preview-area {
+  min-height: 400px;
+}
+.textviewer{
+  height: 100%;
+}
+</style>

package/src/components/file/preview/AudioPlayer.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>