@chenghongyu/xpt-file-viewer 1.1.0

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

@@ -0,0 +1,341 @@
+<template>
+  <div class="video-player-container">
+    <!-- 视频播放器区域 -->
+    <div class="artplayer-app" ref="playerRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import Mpegts from "mpegts.js"
+import Hls from 'hls.js/dist/hls.light.min'
+import Artplayer from "artplayer"
+import { ElMessage } from 'element-plus'
+
+// 组件接收的属性
+const props = defineProps({
+  // 视频文件 URL
+  fileUrl: {
+    type: String,
+    required: true
+  },
+  // 视频文件名
+  fileName: {
+    type: String,
+    required: true
+  },
+  // 是否允许下载
+  allowDownload: {
+    type: Boolean,
+    default: true
+  },
+  // 视频列表（用于上下视频切换）
+  videoList: {
+    type: Array,
+    default: () => []
+  },
+  // 自动播放
+  autoPlay: {
+    type: Boolean,
+    default: true
+  }
+})
+
+// 发射事件
+const emit = defineEmits(['error', 'ready', 'ended'])
+
+// 响应式数据
+const playerRef = ref(null)
+const hiddenTools = ref(false)
+const isMobile = ref(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
+const currentVideo = ref({ name: '', url: '' })
+const prevVideo = ref(null)
+const nextVideo = ref(null)
+let art = null
+let hlsInstance = null
+
+// 初始化播放器
+const initArtPlayer = async (name, url) => {
+  currentVideo.value = { name, url }
+  
+  // 销毁旧实例
+  if (art) {
+    art.destroy(true)
+  }
+  if (hlsInstance) {
+    hlsInstance.destroy()
+  }
+
+  // 判断视频类型
+  let videoType = 'mp4'
+  const nameLower = name.toLowerCase()
+  if (nameLower.endsWith('flv')) {
+    videoType = 'flv'
+  } else if (nameLower.endsWith('m3u8')) {
+    videoType = 'm3u8'
+  }
+
+  // 播放器配置
+  const options = {
+    container: playerRef.value,
+    title: name,
+    url: url,
+    type: videoType,
+    setting: true,
+    playbackRate: true,
+    flip: true,
+    fullscreen: true,
+    fastForward: true,
+    autoOrientation: true,
+    aspectRatio: true,
+    fullscreenWeb: true,
+    theme: '#23ade5',
+    lock: true,
+    miniProgressBar: true,
+    autoplay: props.autoPlay,
+    whitelist: ['*'],
+    airplay: true,
+    moreVideoAttr: {
+      'x5-video-player-type': 'h5',
+      'x5-video-player-fullscreen': false,
+      'x5-video-orientation': 'portraint',
+      preload: "metadata",
+      crossOrigin: 'anonymous',
+    },
+    // 自定义类型处理
+    customType: {
+      flv: function(video, url) {
+        if (Mpegts.isSupported()) {
+          const flvPlayer = Mpegts.createPlayer({
+            type: 'flv',
+            url: url,
+          })
+          flvPlayer.attachMediaElement(video)
+          flvPlayer.load()
+        } else {
+          ElMessage.error('不支持播放格式：flv')
+        }
+      },
+      m3u8: function(video, url) {
+        if (Hls.isSupported()) {
+          hlsInstance = new Hls()
+          hlsInstance.loadSource(url)
+          hlsInstance.attachMedia(video)
+        } else {
+          const canPlay = video.canPlayType('application/vnd.apple.mpegurl')
+          if (canPlay === 'probably' || canPlay === 'maybe') {
+            video.src = url
+          } else {
+            ElMessage.error('不支持播放格式：m3u8')
+          }
+        }
+      },
+    },
+    // 右键菜单
+    contextmenu: props.allowDownload ? [
+      {
+        html: '下载',
+        click: function() {
+          window.open(url)
+        },
+      },
+    ] : [],
+    // 控制栏
+    controls: [
+      {
+        name: 'hidden-tools',
+        position: 'right',
+        html: hiddenTools.value ? '🙈' : '👁️',
+        click: function(_, event) {
+          hiddenTools.value = !hiddenTools.value
+          event.target.innerHTML = hiddenTools.value ? '🙈' : '👁️'
+        },
+      },
+    ],
+  }
+
+  // 创建播放器实例
+  art = new Artplayer(options)
+
+  // 错误处理
+  art.on("error", (error) => {
+    emit('error', error)
+    ElMessage.error('视频加载失败')
+  })
+
+  // 就绪事件
+  art.on('ready', () => {
+    emit('ready', { name, url })
+    updatePrevNextVideo(name)
+  })
+
+  // 播放结束事件
+  art.on('video:ended', () => {
+    emit('ended', { name, url })
+  })
+}
+
+// 更新上下视频信息
+const updatePrevNextVideo = (currentName) => {
+  if (!props.videoList || props.videoList.length === 0) {
+    prevVideo.value = null
+    nextVideo.value = null
+    return
+  }
+
+  const currentIndex = props.videoList.findIndex(v => v.name === currentName)
+  if (currentIndex !== -1) {
+    prevVideo.value = props.videoList[currentIndex - 1] || null
+    nextVideo.value = props.videoList[currentIndex + 1] || null
+  }
+}
+
+// 播放上一个视频
+const playPrevVideo = () => {
+  if (prevVideo.value) {
+    initArtPlayer(prevVideo.value.name, prevVideo.value.url)
+  }
+}
+
+// 播放下一个视频
+const playNextVideo = () => {
+  if (nextVideo.value) {
+    initArtPlayer(nextVideo.value.name, nextVideo.value.url)
+  }
+}
+
+// 打开外部播放器
+const openTarget = (mode) => {
+  const url = currentVideo.value.url
+  const name = currentVideo.value.name
+  
+  const handlers = {
+    download: () => { window.location = url },
+    thunder: () => { window.location = `thunder://${btoa('AA' + url + 'ZZ')}` },
+    motrix: () => { window.location = `motrix://new-task?uri=${encodeURIComponent(url)}&out=${encodeURIComponent(name)}` },
+    potplayer: () => { window.location = `potplayer://${url}` },
+    vlc: () => { window.location = `vlc://${url}` },
+  }
+
+  if (handlers[mode]) {
+    handlers[mode]()
+  }
+}
+
+// 监听属性变化
+watch(() => [props.fileUrl, props.fileName], ([newUrl, newName]) => {
+  if (newUrl && newName) {
+    initArtPlayer(newName, newUrl)
+  }
+}, { immediate: true })
+
+// 生命周期
+onMounted(() => {
+  if (props.fileUrl && props.fileName) {
+    initArtPlayer(props.fileName, props.fileUrl)
+  }
+})
+
+onUnmounted(() => {
+  if (art) {
+    art.destroy(true)
+  }
+  if (hlsInstance) {
+    hlsInstance.destroy()
+  }
+})
+
+// 暴露方法给父组件
+defineExpose({
+  play: () => art?.play(),
+  pause: () => art?.pause(),
+  destroy: () => art?.destroy(true),
+})
+</script>
+
+<style scoped lang="scss">
+.video-player-container {
+  width: 100%;
+  background-color: #f5f5f5;
+}
+
+.artplayer-app {
+  width: 100%;
+  height: 60vh;
+  min-height: 400px;
+  background-color: #000;
+
+  :deep(.art-controls .art-control) {
+    min-width: 14px;
+    min-height: 14px;
+    
+    @media (min-width: 640px) {
+      min-width: 46px;
+      min-height: 46px;
+    }
+    
+    .art-icon {
+      width: 28px;
+    }
+  }
+}
+
+.zfile-video-switch-tools {
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 20px;
+  background-color: #f9fafb;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.zfile-video-tools {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0;
+  padding: 12px;
+  background-color: #f9fafb;
+
+  @media (min-width: 640px) {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 16px;
+  }
+
+  .zfile-video-tools-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 12px;
+    margin: 4px;
+    background-color: #fff;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      transform: translateY(-2px);
+    }
+
+    img {
+      width: 32px;
+      height: 32px;
+    }
+  }
+}
+
+.zfile-video-tools-tips {
+  padding: 8px;
+  text-align: center;
+  color: #6b7280;
+  font-size: 12px;
+  background-color: #f9fafb;
+}
+
+.hidden-important {
+  display: none !important;
+}
+</style>

package/src/components/messageBox/confirm/confirm.vue

@@ -0,0 +1,137 @@
+<template>
+	<TransitionRoot as="template" :show="show" >
+		<Dialog as="div" class="relative z-10" @close="handlerClose('clickModal')" :close-on-click-modal="closeOnClickModal">
+			<TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
+				<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+			</TransitionChild>
+
+			<div class="fixed inset-0 z-10 overflow-y-auto">
+				<div class="flex min-h-full justify-center p-4 text-center items-center sm:p-0">
+					<TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200" leave-from="opacity-100 translate-y-0 sm:scale-100" leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+						<DialogPanel class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 w-11/12 max-w-sm sm:w-full sm:max-w-md sm:p-6">
+							<div v-show="showCloseButton" class="absolute right-0 top-0 pr-4 pt-4 block cursor-pointer">
+								<div type="button" class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" @click="handlerClose('close')">
+									<span class="sr-only">Close</span>
+									<XMarkIcon class="h-7 w-7" aria-hidden="true" />
+								</div>
+							</div>
+							<div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left w-full space-y-3">
+								<DialogTitle as="h3" class="text-base font-semibold leading-6 text-gray-900">{{ title }}</DialogTitle>
+								<div class="flex flex-row items-center space-x-2">
+									<div>
+										<InformationCircleIcon v-if="type === 'info'" class="h-7 w-7 text-gray-400" aria-hidden="true" />
+										<ExclamationCircleIcon v-else-if="type === 'warning'" class="h-7 w-7 text-yellow-500" aria-hidden="true" />
+										<XCircleIcon v-else-if="type === 'error'" class="h-7 w-7 text-red-400" aria-hidden="true" />
+										<CheckCircleIcon v-else-if="type === 'success'" class="h-7 w-7 text-green-500" aria-hidden="true" />
+									</div>
+									<div>
+										<p class="text-gray-500 text-sm" v-if="dangerouslyUseHTMLString" v-html="message"></p>
+										<p class="text-gray-500 text-sm" v-else>{{ message }}</p>
+									</div>
+								</div>
+							</div>
+							<div
+								class="mt-5 sm:mt-4 sm:flex sm:justify-end">
+								<div class="space-y-4 sm:space-y-0 sm:space-x-2">
+									<button type="button"
+                          v-show="showCancelButton"
+													class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
+													@click="handlerClose('cancel')">
+										{{ props.cancelButtonText }}
+									</button>
+									<button type="button"
+													class="inline-flex w-full justify-center rounded-md bg-blue-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-400 sm:ml-3 sm:w-auto" @click="handlerClose('confirm')">
+										{{ confirmButtonText }}
+									</button>
+								</div>
+							</div>
+						</DialogPanel>
+					</TransitionChild>
+				</div>
+			</div>
+		</Dialog>
+	</TransitionRoot>
+</template>
+
+<script lang="ts" setup>
+import {
+	Dialog,
+	DialogPanel,
+	DialogTitle,
+	TransitionChild,
+	TransitionRoot
+} from "@headlessui/vue";
+import { XMarkIcon } from '@heroicons/vue/24/outline'
+import { InformationCircleIcon, ExclamationCircleIcon, XCircleIcon, CheckCircleIcon} from '@heroicons/vue/24/solid'
+import { MessageType } from "./types";
+
+const props = defineProps({
+	type: {
+    type: String as () => MessageType,
+		default: 'info'
+	},
+	show: {
+		type: Boolean,
+		default: false
+	},
+	title: {
+		type: String,
+		required: true,
+	},
+	message: {
+		type: String,
+		required: true,
+	},
+	confirmButtonText: {
+		type: String,
+		default: 'Confirm',
+	},
+	cancelButtonText: {
+		type: String,
+		default: 'Cancel',
+	},
+	onClose: {
+		type: Function,
+		default: () => {}
+	},
+	dangerouslyUseHTMLString: {
+		type: Boolean,
+		default: false,
+	},
+  showCancelButton: {
+    type: Boolean,
+    default: true
+  },
+  showCloseButton: {
+    type: Boolean,
+    default: true
+  },
+  closeOnClickModal: {
+    type: Boolean,
+    default: true
+  },
+  closeOnPressEscape: {
+    type: Boolean,
+    default: true
+  }
+})
+
+import { useMagicKeys } from '@vueuse/core'
+const { Escape } = useMagicKeys()
+
+// 响应关闭事件
+const emit = defineEmits(['update:show'])
+const handlerClose = (type: 'clickModal' | 'pressEscape' | 'cancel' | 'close' | 'confirm') => {
+  if (type === 'clickModal' && Escape.value) {
+    type = 'pressEscape'
+  }
+  if (type === 'clickModal' && !props.closeOnClickModal) {
+    return
+  }
+  if (type === 'pressEscape' && !props.closeOnPressEscape) {
+    return
+  }
+	emit('update:show', false)
+	props.onClose(type)
+}
+</script>

package/src/components/messageBox/confirm/index.ts

@@ -0,0 +1,27 @@
+import { createApp } from "vue";
+import Confirm from "./confirm.vue";
+import type { Props } from "./types";
+
+const createDialog = (message: string, title: string, options: Props = {}) => new Promise((resolve, reject) => {
+  const mountNode = document.createElement('div')
+  const Instance = createApp(Confirm, {
+    show: true,
+    message,
+    title,
+    ...options,
+    onClose: (type: string) => {
+      if (type === 'confirm') {
+        resolve(type);
+      } else {
+        reject(type);
+      }
+      Instance.unmount();
+      document.body.removeChild(mountNode);
+    }
+  })
+
+  document.body.appendChild(mountNode)
+  Instance.mount(mountNode)
+});
+
+export default createDialog;

package/src/components/messageBox/confirm/types.ts

@@ -0,0 +1,15 @@
+export declare type MessageType = '' | 'success' | 'warning' | 'info' | 'error';
+
+// 声明 Options 类型
+export interface Props {
+  type?: MessageType;
+  title?: String;
+  message?: String;
+  confirmButtonText?: String;
+  cancelButtonText?: String;
+  dangerouslyUseHTMLString?: Boolean;
+  showCancelButton?: Boolean;
+  showCloseButton?: Boolean;
+  closeOnClickModal?: Boolean;
+  closeOnPressEscape?: Boolean;
+}

package/src/components/messageBox/messageBox.ts

@@ -0,0 +1,9 @@
+import openPrompt from "./prompt/index";
+import openConfirm from "./confirm/index";
+
+const MessageBox = {
+  prompt: openPrompt,
+  confirm: openConfirm
+}
+
+export default MessageBox;

package/src/components/messageBox/prompt/index.ts

@@ -0,0 +1,27 @@
+import { createApp } from "vue";
+import Prompt from "./prompt.vue";
+import type { ConfirmResult, Props } from "./types";
+
+const createDialog = (message: string, title: string, options: Props = {}) => new Promise((resolve, reject) => {
+  const mountNode = document.createElement('div')
+  const Instance = createApp(Prompt, {
+    show: true,
+    message,
+    title,
+    ...options,
+    onClose: (res: ConfirmResult) => {
+      if (res.type === 'confirm') {
+        resolve(res);
+      } else {
+        reject(res);
+      }
+      Instance.unmount();
+      document.body.removeChild(mountNode);
+    }
+  })
+
+  document.body.appendChild(mountNode)
+  Instance.mount(mountNode)
+});
+
+export default createDialog;