vome-core 0.0.20 → 0.0.22

package/dist/admin/crud/components/vm-preview-viewer.vue

@@ -0,0 +1,524 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="vm-file-preview-viewer"
+      role="dialog"
+      aria-modal="true"
+      @click.self="close"
+    >
+      <header class="vm-file-preview-viewer__head">
+        <div class="vm-file-preview-viewer__meta">
+          <span class="vm-file-preview-viewer__name">{{ displayName }}</span>
+          <span class="vm-file-preview-viewer__tag">{{ kindLabel }}</span>
+        </div>
+        <div class="vm-file-preview-viewer__actions">
+          <a
+            class="vm-file-preview-viewer__link"
+            :href="src"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            新窗口打开
+          </a>
+          <button type="button" class="vm-file-preview-viewer__close" title="关闭" @click="close">
+            <i class="ri-close-line" />
+          </button>
+        </div>
+      </header>
+
+      <div
+        class="vm-file-preview-viewer__body vm-scroll"
+        :class="{ 'is-media': kind === 'image' || kind === 'video' }"
+      >
+        <p v-if="loading" class="vm-file-preview-viewer__hint">加载中…</p>
+        <p v-else-if="error" class="vm-file-preview-viewer__hint is-error">{{ error }}</p>
+
+        <template v-else-if="kind === 'image'">
+          <div class="vm-file-preview-viewer__image-stage" @wheel.prevent="onWheel">
+            <img
+              class="vm-file-preview-viewer__image"
+              :src="src"
+              :alt="displayName"
+              :style="viewerImgStyle"
+              draggable="false"
+              @load="resetView"
+            />
+          </div>
+          <div class="vm-file-preview-viewer__toolbar" @click.stop>
+            <button type="button" title="缩小" @click="zoomOut">
+              <i class="ri-subtract-line" />
+            </button>
+            <button type="button" title="放大" @click="zoomIn">
+              <i class="ri-add-line" />
+            </button>
+            <button type="button" title="原始尺寸" @click="resetView">
+              <i class="ri-aspect-ratio-line" />
+            </button>
+            <button type="button" title="逆时针旋转" @click="rotateLeft">
+              <i class="ri-anticlockwise-line" />
+            </button>
+            <button type="button" title="顺时针旋转" @click="rotateRight">
+              <i class="ri-clockwise-line" />
+            </button>
+          </div>
+        </template>
+
+        <div v-else-if="kind === 'video'" class="vm-file-preview-viewer__video-wrap">
+          <video
+            ref="videoRef"
+            class="vm-file-preview-viewer__video"
+            :src="src"
+            controls
+            autoplay
+            playsinline
+          />
+        </div>
+
+        <audio
+          v-else-if="kind === 'audio'"
+          class="vm-file-preview-viewer__audio"
+          :src="src"
+          controls
+        />
+
+        <iframe
+          v-else-if="kind === 'pdf'"
+          class="vm-file-preview-viewer__iframe"
+          :src="src"
+          title="PDF 预览"
+        />
+
+        <div
+          v-else-if="kind === 'excel' && excelHtml"
+          class="vm-file-preview-viewer__excel"
+          v-html="excelHtml"
+        />
+
+        <pre v-else-if="kind === 'text' && textContent" class="vm-file-preview-viewer__text">{{
+          textContent
+        }}</pre>
+
+        <div v-else-if="kind === 'office'" class="vm-file-preview-viewer__fallback">
+          <i class="ri-file-3-line" aria-hidden="true" />
+          <p>Word / PPT 等 Office 文档暂不支持浏览器内预览。</p>
+          <p>请点击上方「新窗口打开」或下载后使用本地 Office / WPS 查看。</p>
+        </div>
+
+        <div v-else class="vm-file-preview-viewer__fallback">
+          <i class="ri-file-3-line" aria-hidden="true" />
+          <p>该文件类型暂不支持在线预览。</p>
+          <p>请点击上方「新窗口打开」下载查看。</p>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
+import DOMPurify from 'dompurify'
+import {
+  fileDisplayName,
+  getMediaPreviewKind,
+  loadExcelPreviewHtml,
+  fetchFileText,
+  type MediaPreviewKind,
+} from '../../lib/file-preview'
+
+defineOptions({ name: 'vm-preview-viewer' })
+
+const KIND_LABEL: Record<MediaPreviewKind, string> = {
+  image: '图片',
+  video: '视频',
+  audio: '音频',
+  pdf: 'PDF',
+  excel: 'Excel',
+  text: '文本',
+  office: 'Office',
+  unsupported: '文件',
+}
+
+const props = defineProps<{
+  open: boolean
+  src: string
+  fileName?: string
+  /** 覆盖 URL 推断的媒体类型（vm-image 传 image / video） */
+  mediaKind?: MediaPreviewKind
+}>()
+
+const emit = defineEmits<{ 'update:open': [v: boolean] }>()
+
+const loading = ref(false)
+const error = ref('')
+const textContent = ref('')
+const excelHtml = ref('')
+const scale = ref(1)
+const rotate = ref(0)
+const videoRef = ref<HTMLVideoElement | null>(null)
+
+const kind = computed(
+  () => props.mediaKind ?? getMediaPreviewKind(props.fileName || props.src),
+)
+
+const kindLabel = computed(() => KIND_LABEL[kind.value])
+
+const displayName = computed(() =>
+  fileDisplayName(props.fileName || props.src, '未命名文件'),
+)
+
+const viewerImgStyle = computed(() => ({
+  transform: `scale(${scale.value}) rotate(${rotate.value}deg)`,
+}))
+
+function resetView() {
+  scale.value = 1
+  rotate.value = 0
+}
+
+function zoomIn() {
+  scale.value = Math.min(5, +(scale.value + 0.2).toFixed(2))
+}
+
+function zoomOut() {
+  scale.value = Math.max(0.2, +(scale.value - 0.2).toFixed(2))
+}
+
+function rotateLeft() {
+  rotate.value -= 90
+}
+
+function rotateRight() {
+  rotate.value += 90
+}
+
+function onWheel(e: WheelEvent) {
+  if (kind.value !== 'image') return
+  if (e.deltaY < 0) zoomIn()
+  else zoomOut()
+}
+
+function lockBody(lock: boolean) {
+  if (typeof document === 'undefined') return
+  document.body.style.overflow = lock ? 'hidden' : ''
+}
+
+async function loadPreview() {
+  if (!props.src) return
+  loading.value = true
+  error.value = ''
+  textContent.value = ''
+  excelHtml.value = ''
+
+  try {
+    if (kind.value === 'text') {
+      textContent.value = await fetchFileText(props.src)
+    } else if (kind.value === 'excel') {
+      excelHtml.value = DOMPurify.sanitize(await loadExcelPreviewHtml(props.src), {
+        USE_PROFILES: { html: true },
+      })
+    }
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : '预览失败'
+  } finally {
+    loading.value = false
+  }
+}
+
+function close() {
+  emit('update:open', false)
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (!props.open) return
+  if (e.key === 'Escape') close()
+}
+
+watch(
+  () => props.open,
+  (open) => {
+    lockBody(open)
+    if (typeof window === 'undefined') return
+    if (open) {
+      resetView()
+      window.addEventListener('keydown', onKeydown)
+      if (kind.value === 'text' || kind.value === 'excel') void loadPreview()
+      if (kind.value === 'video') {
+        void nextTick(() => {
+          videoRef.value?.play?.().catch(() => undefined)
+        })
+      }
+    } else {
+      window.removeEventListener('keydown', onKeydown)
+      loading.value = false
+      error.value = ''
+      textContent.value = ''
+      excelHtml.value = ''
+      videoRef.value?.pause?.()
+    }
+  },
+)
+
+onUnmounted(() => {
+  lockBody(false)
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('keydown', onKeydown)
+  }
+})
+</script>
+
+<style lang="scss">
+.vm-file-preview-viewer {
+  position: fixed;
+  inset: 0;
+  z-index: 2200;
+  display: flex;
+  flex-direction: column;
+  background: rgb(10 12 20 / 88%);
+}
+
+.vm-file-preview-viewer__head {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 18px;
+  border-bottom: 1px solid rgb(255 255 255 / 10%);
+  background: rgb(24 28 40 / 92%);
+}
+
+.vm-file-preview-viewer__meta {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 10px;
+}
+
+.vm-file-preview-viewer__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  font-weight: 650;
+  color: #fff;
+}
+
+.vm-file-preview-viewer__tag {
+  flex-shrink: 0;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: rgb(255 255 255 / 12%);
+  color: rgb(255 255 255 / 88%);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.vm-file-preview-viewer__actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 10px;
+}
+
+.vm-file-preview-viewer__link {
+  color: rgb(147 197 253);
+  font-size: 13px;
+  font-weight: 600;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.vm-file-preview-viewer__close {
+  display: inline-flex;
+  width: 34px;
+  height: 34px;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 10px;
+  background: rgb(255 255 255 / 12%);
+  color: #fff;
+  font-size: 18px;
+  cursor: pointer;
+
+  &:hover {
+    background: rgb(255 255 255 / 22%);
+  }
+}
+
+.vm-file-preview-viewer__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 16px;
+  overflow: auto;
+
+  &.is-media {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    overflow: hidden;
+  }
+}
+
+.vm-file-preview-viewer__hint {
+  margin: 24px auto;
+  color: rgb(255 255 255 / 80%);
+  text-align: center;
+
+  &.is-error {
+    color: #fca5a5;
+  }
+}
+
+.vm-file-preview-viewer__image-stage {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.vm-file-preview-viewer__image {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: min(1200px, calc(100vw - 48px));
+  max-height: calc(100vh - 140px);
+  object-fit: contain;
+  transition: transform 0.15s ease;
+  user-select: none;
+}
+
+.vm-file-preview-viewer__toolbar {
+  position: relative;
+  z-index: 2;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 4px;
+  margin: 0 auto 20px;
+  padding: 6px 8px;
+  border-radius: 12px;
+  background: rgb(24 28 40 / 92%);
+
+  button {
+    display: inline-flex;
+    width: 36px;
+    height: 36px;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    color: rgb(255 255 255 / 88%);
+    font-size: 18px;
+    cursor: pointer;
+
+    &:hover {
+      background: rgb(255 255 255 / 12%);
+      color: #fff;
+    }
+  }
+}
+
+.vm-file-preview-viewer__video-wrap {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+
+.vm-file-preview-viewer__video {
+  display: block;
+  width: min(960px, calc(100vw - 48px));
+  max-height: calc(100vh - 120px);
+  border-radius: 12px;
+  background: #000;
+  outline: none;
+}
+
+.vm-file-preview-viewer__audio {
+  display: block;
+  width: min(480px, 100%);
+  margin: 48px auto 0;
+}
+
+.vm-file-preview-viewer__iframe {
+  display: block;
+  width: min(1100px, 100%);
+  height: calc(100vh - 88px);
+  margin: 0 auto;
+  border: none;
+  border-radius: 12px;
+  background: #fff;
+}
+
+.vm-file-preview-viewer__excel {
+  max-width: min(1100px, 100%);
+  margin: 0 auto;
+  padding: 12px;
+  border-radius: 12px;
+  background: #fff;
+  overflow: auto;
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+  }
+
+  td,
+  th {
+    padding: 6px 8px;
+    border: 1px solid #e5e7eb;
+    white-space: nowrap;
+  }
+}
+
+.vm-file-preview-viewer__text {
+  max-width: min(960px, 100%);
+  margin: 0 auto;
+  padding: 16px 18px;
+  border-radius: 12px;
+  background: rgb(15 23 42 / 92%);
+  color: #e2e8f0;
+  font-size: 13px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.vm-file-preview-viewer__fallback {
+  display: grid;
+  gap: 8px;
+  max-width: 420px;
+  margin: 48px auto;
+  padding: 28px 24px;
+  border-radius: 16px;
+  background: rgb(255 255 255 / 8%);
+  color: rgb(255 255 255 / 88%);
+  text-align: center;
+
+  i {
+    font-size: 42px;
+    line-height: 1;
+    color: rgb(255 255 255 / 72%);
+  }
+
+  p {
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.6;
+  }
+}
+</style>