art-design/src/components/custom/files_previews.vue

<template>
  <el-dialog
    :model-value="visibleLocal"
    :title="currentFile?.name || '文件预览'"
    :close-on-click-modal="false"
    :destroy-on-close="false"
    width="90%"
    :fullscreen="isFullscreen"
    @close="handleClose"
  >
    <div class="file-preview-toolbar">
      <div class="left">
        <!-- <el-button-group>
          <el-button size="small" @click="prevFile" :disabled="!hasPrev">上一页</el-button>
          <el-button size="small" @click="nextFile" :disabled="!hasNext">下一页</el-button>
        </el-button-group>

        <el-divider direction="vertical" />

        <el-button size="small" @click="zoomOut">-</el-button>
        <el-button size="small" @click="resetZoom">重置</el-button>
        <el-button size="small" @click="zoomIn">+</el-button>

        <el-divider direction="vertical" /> -->

        <!-- <el-button size="small" @click="rotateLeft">⟲</el-button> -->
        <!-- <el-button size="small" @click="rotateRight">⟳</el-button> -->

        <!-- <el-divider direction="vertical" />

        <el-button size="small" @click="toggleFullscreen">{{
          isFullscreen ? '退出全屏' : '全屏'
        }}</el-button> -->
      </div>

      <div class="right">
        <!-- <el-button size="small" type="primary" :href="currentFile?.url" target="_blank"
          >在新标签打开</el-button
        > -->
        <!-- <el-button size="small" @click="downloadCurrent">下载</el-button> -->
        <el-button size="small" type="danger" @click="handleClose">关闭</el-button>
      </div>
    </div>

    <div class="file-preview-body">
      <template v-if="!currentFile">
        <div class="no-file">无要预览的文件</div>
      </template>

      <template v-else>
        <!-- IMAGE -->
        <div v-if="fileType === 'image'" class="viewer-wrap" :key="`image-${currentFile.url}`">
          <div class="viewer" :style="viewerStyle">
            <img
              :src="currentFile.url"
              :key="currentFile.url"
              @error="onError"
              @load="onLoadImage"
            />
          </div>
        </div>

        <!-- PDF -->
        <div v-else-if="fileType === 'pdf'" class="viewer-wrap" :key="`pdf-${currentFile.url}`">
          <div class="viewer" :style="viewerStyle">
            <!-- 使用 object / iframe 作为预览，支持大多数现代浏览器 -->
            <object
              :key="`pdf-obj-${currentFile.url}`"
              :data="appendPdfParams(currentFile.url)"
              type="application/pdf"
              width="100%"
              height="100%"
            >
              <iframe
                :key="`pdf-iframe-${currentFile.url}`"
                :src="appendPdfParams(currentFile.url)"
                width="100%"
                height="100%"
              ></iframe>
              <div class="fallback"
                >无法在浏览器内预览 PDF。<a :href="currentFile.url" target="_blank"
                  >点击打开</a
                ></div
              >
            </object>
          </div>
        </div>

        <!-- OFFICE (Word, Excel, PPT) 使用微软 Office 在线查看器，仅当文件对外可访问时有效 -->
        <div
          v-else-if="fileType === 'office'"
          class="viewer-wrap"
          :key="`office-${currentFile.url}`"
        >
          <div class="viewer" :style="viewerStyle">
            <template v-if="isHttpUrl(currentFile.url)">
              <iframe
                :key="`office-iframe-${currentFile.url}`"
                :src="officeViewerUrl(currentFile.url)"
                width="100%"
                height="100%"
                frameborder="0"
              ></iframe>
            </template>
            <template v-else>
              <div class="fallback"
                >Office 文件必须是可通过公网访问的 URL 才能使用在线预览。<a
                  :href="currentFile.url"
                  target="_blank"
                  >点击打开或下载</a
                ></div
              >
            </template>
          </div>
        </div>

        <!-- 文本 / 代码 -->
        <div v-else-if="fileType === 'text'" class="viewer-wrap" :key="`text-${currentFile.url}`">
          <div class="viewer text-viewer" :style="viewerStyle">
            <pre v-if="textContent !== null">{{ textContent }}</pre>
            <div v-else class="loading">正在加载文本内容...</div>
            <div v-if="textError" class="error">加载文本失败：{{ textError }}</div>
          </div>
        </div>

        <!-- 未知 -->
        <div v-else class="viewer-wrap unknown-viewer" :key="`unknown-${currentFile.url}`">
          <div class="viewer" :style="viewerStyle">
            <div class="unknown">
              <p>无法在线预览此类型文件。</p>
              <p><a :href="currentFile.url" target="_blank">点击打开或下载文件</a></p>
            </div>
          </div>
        </div>
      </template>
    </div>

    <template #footer>
      <div class="footer-info">{{ currentFile?.name || '' }}</div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup name="FilesPreviews">
  import { ref, computed, watch, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'

  // --- Props ---
  interface FileItem {
    file_name: any
    name?: string
    url: string
    mime?: string // 可选，优先使用
  }

  const props = defineProps<{
    modelValue: boolean
    file?: FileItem | null // 单文件
    files?: FileItem[] | null // 多文件
    startIndex?: number
    enableFullscreen?: boolean
  }>()

  const emit = defineEmits<{
    (e: 'update:modelValue', v: boolean): void
    (e: 'close'): void
  }>()

  // --- Local state ---
  const visibleLocal = ref<boolean>(!!props.modelValue)
  const currentIndex = ref<number>(props.startIndex ?? 0)
  const isFullscreen = ref<boolean>(!!props.enableFullscreen)
  const zoom = ref<number>(1)
  const rotate = ref<number>(0) // deg
  const textContent = ref<string | null>(null)
  const textError = ref<string | null>(null)

  // --- Computed ---
  const currentFile = computed((): FileItem | null => {
    if (props.files && props.files.length > 0) {
      const idx = Math.min(Math.max(0, currentIndex.value), props.files.length - 1)
      return props.files[idx]
    }
    return props.file ?? null
  })

  function resetViewState(clearText = true) {
    zoom.value = 1
    rotate.value = 0
    if (clearText) {
      textContent.value = null
      textError.value = null
    }
  }

  // --- Watchers ---
  watch(
    () => props.modelValue,
    (v) => (visibleLocal.value = v)
  )
  watch(visibleLocal, (v) => emit('update:modelValue', v))

  watch(
    () => props.file,
    () => {
      currentIndex.value = 0
      resetViewState()
      loadTextIfNeeded()
    }
  )

  watch(
    () => props.files,
    () => {
      currentIndex.value = props.startIndex ?? 0
      resetViewState()
      loadTextIfNeeded()
    }
  )

  watch(currentIndex, () => {
    resetViewState(false)
    loadTextIfNeeded()
  })

  // 监听当前文件变化，确保文件切换时正确更新
  watch(
    () => currentFile.value?.url,
    (newUrl, oldUrl) => {
      if (newUrl !== oldUrl && newUrl) {
        resetViewState()
        loadTextIfNeeded()
      }
    }
  )

  const hasNext = computed(
    () => !!(props.files && currentIndex.value < (props.files?.length ?? 0) - 1)
  )
  const hasPrev = computed(() => !!(props.files && currentIndex.value > 0))

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  function prevFile() {
    if (hasPrev.value) currentIndex.value -= 1
  }
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  function nextFile() {
    if (hasNext.value) currentIndex.value += 1
  }

  function handleClose() {
    visibleLocal.value = false
    emit('close')
  }

  // --- Viewer helpers ---
  function getExtension(name = '') {
    const m = name.split('.')
    return (m.length > 1 ? m[m.length - 1].toLowerCase() : '').trim()
  }

  function mimeFromName(name = '') {
    const ext = getExtension(name)
    const map: Record<string, string> = {
      pdf: 'application/pdf',
      png: 'image/png',
      jpg: 'image/jpeg',
      jpeg: 'image/jpeg',
      gif: 'image/gif',
      bmp: 'image/bmp',
      webp: 'image/webp',
      txt: 'text/plain',
      md: 'text/markdown',
      csv: 'text/csv',
      doc: 'application/msword',
      docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      xls: 'application/vnd.ms-excel',
      xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      ppt: 'application/vnd.ms-powerpoint',
      pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
    }
    return map[ext] ?? ''
  }

  const fileType = computed(() => {
    const f = currentFile.value
    if (!f) return 'unknown'
    let names = f.name
    if (names == '') {
      names = f.file_name
    }
    const mime = (f.mime || mimeFromName(names) || '').toLowerCase()
    const ext = getExtension(names)

    if (mime.startsWith('image/') || ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'].includes(ext))
      return 'image'
    if (mime === 'application/pdf' || ext === 'pdf') return 'pdf'
    if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(ext)) return 'office'
    if (mime.startsWith('text/') || ['txt', 'md', 'csv', 'log', 'json', 'xml'].includes(ext))
      return 'text'
    return 'unknown'
  })

  function isHttpUrl(u?: string) {
    return !!u && /^https?:\/\//i.test(u)
  }

  function officeViewerUrl(url: string) {
    // 使用微软 Office 在线查看器
    return `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(url)}`
  }

  function appendPdfParams(url: string) {
    // 某些浏览器可以在 pdf 后加参数调整行为，例如 #toolbar=0
    return url
  }

  // --- transform style for viewer ---
  const viewerStyle = computed(() => {
    return {
      transform: `scale(${zoom.value}) rotate(${rotate.value}deg)`,
      transformOrigin: 'center top'
    } as Record<string, string>
  })

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  function zoomIn() {
    zoom.value = Math.min(zoom.value + 0.25, 4)
  }
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  function zoomOut() {
    zoom.value = Math.max(zoom.value - 0.25, 0.25)
  }
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  function resetZoom() {
    zoom.value = 1
    rotate.value = 0
  }
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  function rotateLeft() {
    rotate.value = (rotate.value - 90) % 360
  }
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  function rotateRight() {
    rotate.value = (rotate.value + 90) % 360
  }

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  function toggleFullscreen() {
    isFullscreen.value = !isFullscreen.value
  }

  // --- text loading ---
  async function loadTextIfNeeded() {
    if (!currentFile.value) return
    if (fileType.value !== 'text') return

    textContent.value = null
    textError.value = null

    try {
      const resp = await fetch(currentFile.value.url)
      if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
      const txt = await resp.text()
      textContent.value = txt
    } catch (err: any) {
      textError.value = String(err?.message ?? err)
    }
  }

  // --- image handlers ---
  function onError() {
    ElMessage.warning('图片加载失败')
  }
  function onLoadImage() {
    // 可以在这里获取自然尺寸进行布局优化
  }

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  function downloadCurrent() {
    if (!currentFile.value) return
    // 打开下载链接（浏览器通常会下载）
    const a = document.createElement('a')
    a.href = currentFile.value.url
    a.download = currentFile.value.name || ''
    a.target = '_blank'
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
  }

  // expose some controls externally if needed
  onMounted(() => {
    if (props.modelValue) visibleLocal.value = true
    if (fileType.value === 'text') loadTextIfNeeded()
  })
  // 导出组件
  defineExpose({})
</script>

<style lang="scss" scoped>
  .file-preview-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  .file-preview-body {
    height: calc(80vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .viewer-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
  }
  .viewer {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .viewer img {
    max-width: 100%;
    max-height: 100%;
    display: block;
  }
  .text-viewer pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    text-align: left;
    padding: 12px;
    height: 100%;
    overflow: auto;
  }
  .unknown-viewer .unknown {
    text-align: center;
  }
  .no-file {
    color: #999;
  }
  .footer-info {
    color: #666;
  }
  .loading {
    color: #999;
  }
  .error {
    color: #f56c6c;
  }
</style>