@chenghongyu/xpt-file-viewer 1.1.0

package/src/components/file/preview/VideoPlayer.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/file/preview/VideoPlayerAsyncLoading.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="zfile-async-loading">
+    <el-skeleton class="w-full h-[40vh] sm:h-[80vh]" animated>
+      <template #template>
+        <div class="flex justify-center items-center h-full loading">
+          <i-custom-file-type-video class="w-16 h-16" />
+        </div>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+onMounted(() => {
+  document.querySelector(".el-dialog .z-dialog-title").innerHTML = '加载中...';
+})
+</script>
+
+<style lang="scss" scoped>
+
+.zfile-async-loading {
+  :deep(.el-skeleton__item) {
+    height: 100%;
+  }
+
+  .loading {
+    background: linear-gradient(
+        100deg,
+        rgba(255, 255, 255, 0) 40%,
+        rgba(255, 255, 255, .5) 50%,
+        rgba(255, 255, 255, 0) 60%
+    ) #ededed;
+    background-size: 200% 100%;
+    background-position-x: 180%;
+    animation: 1s loading ease-in-out infinite;
+  }
+
+  @keyframes loading {
+    to {
+      background-position-x: -20%;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,51 @@
+<template>
+  <z-dialog
+    v-model="visible"
+    draggable
+    top="5vh"
+    width="90%"
+    class="zfile-video-player-dialog"
+    :title="name"
+    :showFooter="false"
+  >
+    <video-player v-if="visible" />
+  </z-dialog>
+</template>
+
+<script setup>
+import { defineAsyncComponent } from "vue";
+import ZDialog from "~/components/common/dialog/ZDialog.vue";
+import VideoPlayerAsyncLoading from "~/components/file/preview/VideoPlayerAsyncLoading.vue";
+
+const VideoPlayer = defineAsyncComponent({
+  loader: () => import("~/components/file/preview/VideoPlayer.vue"),
+  loadingComponent: VideoPlayerAsyncLoading
+})
+
+import useVideoPlayerDialog from "~/composables/file/useVideoPlayerDialog";
+const { visible, name } = useVideoPlayerDialog();
+</script>
+
+<style scoped lang="scss">
+:deep(.el-dialog) {
+  // 视频无边框
+  @apply p-0;
+
+  // 标题有边框
+  .el-dialog__header {
+    @apply p-2;
+  }
+
+  // 全屏时，视频播放器高度 90vh
+  &.is-fullscreen {
+    .artplayer-app {
+      @apply h-[50vh] md:h-[80vh];
+    }
+  }
+
+  // 隐藏底部按钮
+  .el-dialog__footer {
+    display: none;
+  }
+}
+</style>

package/src/components/file/selectFolder/SelectFolder.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="zfile-select-folder-body">
+    <el-dialog width="400px" v-model="props.show" :title="title" @close="handlerClose('cancel')">
+      <div class="zfile-select-folder-breadcrumb h-12">
+        <breadcrumb class="h-12" :items="breadcrumbData" @breadcrumb-click="onClickBreadcrumb" />
+      </div>
+      <div class="zfile-select-folder-body" v-loading="listLoading">
+        <nav class="space-y-1" aria-label="Sidebar">
+          <a v-for="item in fileList"
+             @click="onChangePath(item)"
+             :key="item.name"
+             :href="item.href"
+             :class="['text-gray-600 hover:bg-gray-50 hover:text-gray-900', 'group flex items-center rounded-md px-3 py-2 text-sm font-medium select-none']">
+            <i-custom-file-type-folder name="file-type-folder" class="text-2xl mr-3 h-6 w-6 flex-shrink-0" />
+            <span class="truncate select-none">{{ item.name }}</span>
+          </a>
+          <div v-if="fileList.length === 0">
+            <div class="flex items-center justify-center h-20">
+              <span class="text-gray-500">无文件夹</span>
+            </div>
+          </div>
+        </nav>
+      </div>
+      <div class="zfile-select-folder-footer">
+        <div>
+          <i-lucide-folder-plus class="h-6 w-6 cursor-pointer text-blue-400" v-show="storageConfigStore.permission.newFolder" @click="onNewFolder"/>
+        </div>
+        <div>
+          <el-button type="info" @click="handlerClose('cancel')">取消</el-button>
+          <el-button type="primary" :loading="loading"  @click="handlerClose('confirm')">确认</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { concatPath } from "~/utils";
+import { ElMessage } from "element-plus";
+
+import { inject } from 'vue'
+import { loadFileListReq } from "~/api/home/home";
+
+import useStorageConfigStore from "~/stores/storage-config";
+let storageConfigStore = useStorageConfigStore();
+
+import useFilePwd from "~/composables/file/useFilePwd";
+let { getPathPwd, putPathPwd, popPassword } = useFilePwd();
+
+import useFileOperator from "~/composables/file/useFileOperator";
+const { newFolder } = useFileOperator();
+
+const onNewFolder = () => {
+  newFolder(selectPath.value).then(() => {
+    loadFileList();
+  });
+};
+
+// 组件传参及回写
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: '选择文件夹'
+  },
+  storageKey: {
+    type: String,
+    required: true
+  },
+  basePath: {
+    type: String,
+    default: '/'
+  },
+  onClose: {
+    type: Function,
+    default: () => {}
+  }
+});
+
+const loading = inject('loading');
+
+const selectPath = ref('');
+const fileList = ref([]);
+const breadcrumbData = computed(() => {
+  let data = [
+    {
+      name: '根目录',
+      href: "/",
+      disable: false
+    }
+  ];
+
+  let paths = selectPath.value.split('/');
+  if (paths) {
+    // 去除 paths 中所有空白字符
+    paths = paths.filter((item) => {
+      return !!item;
+    })
+
+    paths.forEach((item, index, arr) => {
+      let breadcrumbItem = {
+        name: item,
+        href: concatPath('/', arr.slice(0, index + 1).join('/')),
+        disable: index === arr.length - 1
+      }
+      data.push(breadcrumbItem);
+    })
+  }
+  return data;
+})
+
+onMounted(() => {
+  // 初始化路径
+  selectPath.value = props.basePath;
+  // 加载文件列表
+  loadFileList();
+})
+
+
+const listLoading = ref(false);
+
+const loadFileList = async (password, rememberPassword) => {
+  const param = {
+    storageKey: props.storageKey,
+    path: selectPath.value,
+    password: password || getPathPwd(selectPath.value, true)
+  };
+	listLoading.value = true;
+  loadFileListReq(param).then((res) => {
+    // 过滤所有 type 为 FOLDER 的数据
+    res.data.files = res.data.files.filter((item) => {
+      return item.type === 'FOLDER';
+    });
+
+    let passwordPattern = res.data.passwordPattern;
+    putPathPwd(passwordPattern, param.password, rememberPassword);
+
+    fileList.value = res.data.files;
+  }).catch((error) => {
+    const onConfirm = (password, rememberPassword) => {
+      loadFileList(password, rememberPassword);
+    };
+    let data = error.response.data;
+    // 如果需要密码或密码错误进行提示, 并弹出输入密码的框.
+    if (data.code === constant.responseCode.INVALID_PASSWORD) {
+      ElMessage.warning('密码错误，请重新输入！');
+      popPassword(onConfirm);
+    } else if (data.code === constant.responseCode.REQUIRED_PASSWORD) {
+      popPassword(onConfirm);
+    } else {
+      ElMessage.error(data.msg);
+    }
+  }).finally(() => {
+	  listLoading.value = false;
+  });
+};
+
+const onChangePath = (file) => {
+  selectPath.value = concatPath(file.path + '/' + file.name);
+  loadFileList();
+};
+
+const onClickBreadcrumb = (item) => {
+  if (item.href) {
+    selectPath.value = decodeURI(item.href);
+    loadFileList();
+  }
+}
+
+// 响应关闭事件
+const emit = defineEmits(['update:show'])
+const handlerClose = (type) => {
+  const result = {
+    value: selectPath.value,
+    type
+  }
+
+  if (type === 'confirm') {
+    loading.value = true;
+  }
+
+  emit('update:show', false)
+  props.onClose(result)
+}
+</script>
+
+<style lang="scss" scoped>
+
+.zfile-select-folder-body {
+  @apply h-96 overflow-y-auto;
+
+  :deep(.el-dialog) {
+    @apply w-96;
+  }
+
+  :deep(.el-dialog__body) {
+    @apply py-0;
+  }
+}
+
+.zfile-select-folder-footer {
+  @apply h-20 flex items-center justify-between;
+}
+
+</style>

package/src/components/file/selectFolder/index.ts

@@ -0,0 +1,50 @@
+import { createApp } from "vue";
+import SelectFolder from "./SelectFolder.vue";
+import type { ConfirmResult } from "./types";
+
+const createDialog = (title: string,
+                      storageKey: string,
+                      basePath: string,
+                      onConfirm: Function)=> {
+  const mountNode = document.createElement('div')
+  const Instance = createApp(SelectFolder, {
+    show: true,
+    title,
+    storageKey,
+    basePath,
+    onClose: (res: ConfirmResult) => {
+
+      const stopLoading = () => {
+        loading.value = false;
+      }
+
+      const closeDialog = () => {
+        Instance.unmount();
+        document.body.removeChild(mountNode);
+      }
+
+      if (res.type === 'confirm') {
+        onConfirm({
+          ...res,
+          callback: {
+            stopLoading,
+            closeDialog
+          }
+        });
+      } else {
+        closeDialog();
+      }
+    }
+  })
+
+  // 通过 inject 方法获取 loading 的值
+  const loading = ref(false);
+  Instance.provide("loading", loading);
+
+  document.body.appendChild(mountNode)
+  Instance.mount(mountNode)
+};
+
+
+
+export default createDialog;

package/src/components/file/selectFolder/types.ts

@@ -0,0 +1,5 @@
+// 声明返回值类型
+export interface ConfirmResult {
+  value: String
+  type: 'cancel' | 'close' | 'confirm'
+}