vome-core 0.0.20 → 0.0.21

package/dist/admin/crud/components/vm-image.vue

@@ -0,0 +1,413 @@
+<template>
+  <div v-if="src" class="vm-image" :class="{ 'is-video': isVideoKind }">
+    <button
+      type="button"
+      class="vm-image__trigger"
+      :style="thumbStyle"
+      :disabled="!preview"
+      :title="preview ? (isVideoKind ? '播放视频' : '查看大图') : undefined"
+      @click="openViewer"
+    >
+      <img
+        v-if="!isVideoKind"
+        class="vm-image__media"
+        :src="src"
+        alt=""
+        :style="mediaStyle"
+        @error="onThumbError"
+      />
+      <template v-else>
+        <img
+          v-if="videoFrameSrc"
+          class="vm-image__media"
+          :src="videoFrameSrc"
+          alt=""
+          :style="mediaStyle"
+        />
+        <video
+          v-else-if="frameFailed"
+          class="vm-image__media"
+          :src="src"
+          muted
+          playsinline
+          preload="metadata"
+          :style="mediaStyle"
+        />
+        <span v-else class="vm-image__loading" aria-hidden="true" />
+        <span class="vm-image__play" aria-hidden="true">
+          <i class="ri-play-fill" />
+        </span>
+      </template>
+    </button>
+  </div>
+  <span v-else class="vm-image is-empty">—</span>
+
+  <Teleport to="body">
+    <div
+      v-if="viewerOpen"
+      class="vm-image-viewer"
+      role="dialog"
+      aria-modal="true"
+      @click.self="closeViewer"
+    >
+      <button type="button" class="vm-image-viewer__close" title="关闭" @click="closeViewer">
+        <i class="ri-close-line" />
+      </button>
+
+      <div v-if="isVideoKind" class="vm-image-viewer__video-wrap">
+        <video
+          ref="videoRef"
+          class="vm-image-viewer__video"
+          :src="src"
+          controls
+          autoplay
+          playsinline
+        />
+      </div>
+
+      <template v-else>
+        <div
+          ref="stageRef"
+          class="vm-image-viewer__stage"
+          @wheel.prevent="onWheel"
+        >
+          <img
+            class="vm-image-viewer__img"
+            :src="src"
+            alt=""
+            :style="viewerImgStyle"
+            draggable="false"
+            @load="onViewerImgLoad"
+          />
+        </div>
+        <div class="vm-image-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>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
+import { useVideoFrame } from '../../lib/video-frame'
+
+defineOptions({ name: 'vm-image' })
+
+const VIDEO_EXT = /\.(mp4|webm|mov|m4v|ogv|ogg)(\?|#|$)/i
+
+const props = withDefaults(
+  defineProps<{
+    /** 图片或视频 URL（表格列绑定 modelValue） */
+    modelValue?: string | null
+    /** image | video | auto（按后缀推断） */
+    type?: 'image' | 'video' | 'auto'
+    /** 缩略图边长，默认 40 */
+    size?: number | string
+    /** 圆角，默认 8 */
+    radius?: number | string
+    /** 是否可点击预览/播放 */
+    preview?: boolean
+    fit?: 'cover' | 'contain'
+  }>(),
+  {
+    type: 'auto',
+    size: 40,
+    radius: 8,
+    preview: true,
+    fit: 'cover',
+  },
+)
+
+const viewerOpen = ref(false)
+const scale = ref(1)
+const rotate = ref(0)
+const videoRef = ref<HTMLVideoElement | null>(null)
+const stageRef = ref<HTMLElement | null>(null)
+
+const src = computed(() => {
+  const v = props.modelValue
+  if (v == null) return ''
+  return String(v).trim()
+})
+
+const isVideoKind = computed(() => {
+  if (props.type === 'video') return true
+  if (props.type === 'image') return false
+  return VIDEO_EXT.test(src.value)
+})
+
+const videoThumbSource = computed(() => (isVideoKind.value ? src.value : ''))
+const { videoFrameSrc, frameFailed } = useVideoFrame(videoThumbSource)
+
+function toCssUnit(v: number | string) {
+  return typeof v === 'number' ? `${v}px` : v
+}
+
+const thumbStyle = computed(() => ({
+  width: toCssUnit(props.size),
+  height: toCssUnit(props.size),
+  borderRadius: toCssUnit(props.radius),
+}))
+
+const mediaStyle = computed(() => ({
+  objectFit: props.fit,
+}))
+
+const viewerImgStyle = computed(() => ({
+  transform: `scale(${scale.value}) rotate(${rotate.value}deg)`,
+}))
+
+function onThumbError() {
+  /* 缩略图失败仍允许点开预览 */
+}
+
+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 (e.deltaY < 0) zoomIn()
+  else zoomOut()
+}
+
+function onViewerImgLoad() {
+  resetView()
+}
+
+function lockBody(lock: boolean) {
+  if (typeof document === 'undefined') return
+  document.body.style.overflow = lock ? 'hidden' : ''
+}
+
+function openViewer() {
+  if (!props.preview || !src.value) return
+  resetView()
+  viewerOpen.value = true
+  lockBody(true)
+  void nextTick(() => {
+    videoRef.value?.play?.().catch(() => undefined)
+  })
+}
+
+function closeViewer() {
+  viewerOpen.value = false
+  lockBody(false)
+  videoRef.value?.pause?.()
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (!viewerOpen.value) return
+  if (e.key === 'Escape') closeViewer()
+}
+
+watch(viewerOpen, (open) => {
+  if (typeof window === 'undefined') return
+  if (open) window.addEventListener('keydown', onKeydown)
+  else window.removeEventListener('keydown', onKeydown)
+})
+
+onUnmounted(() => {
+  lockBody(false)
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('keydown', onKeydown)
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.vm-image {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.vm-image.is-empty {
+  color: var(--muted-foreground);
+  font-size: 12px;
+}
+
+.vm-image__trigger {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
+  background: var(--muted);
+  cursor: pointer;
+  overflow: hidden;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+  &:hover:not(:disabled) {
+    border-color: var(--focus-border);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 12%, transparent);
+  }
+
+  &:disabled {
+    cursor: default;
+  }
+}
+
+.vm-image__media {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.vm-image__loading {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: color-mix(in srgb, var(--muted) 70%, var(--foreground) 8%);
+}
+
+.vm-image__play {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: rgb(20 24 40 / 28%);
+  color: #fff;
+  pointer-events: none;
+
+  i {
+    font-size: 18px;
+    line-height: 1;
+  }
+}
+</style>
+
+<style lang="scss">
+.vm-image-viewer {
+  position: fixed;
+  inset: 0;
+  z-index: 2200;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: rgb(10 12 20 / 88%);
+}
+
+.vm-image-viewer__close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 2;
+  display: inline-flex;
+  width: 36px;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 10px;
+  background: rgb(255 255 255 / 12%);
+  color: #fff;
+  font-size: 20px;
+  cursor: pointer;
+
+  &:hover {
+    background: rgb(255 255 255 / 22%);
+  }
+}
+
+.vm-image-viewer__stage {
+  display: flex;
+  width: 100%;
+  max-width: min(1200px, calc(100vw - 48px));
+  height: calc(100vh - 120px);
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.vm-image-viewer__img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  transition: transform 0.15s ease;
+  user-select: none;
+}
+
+.vm-image-viewer__video-wrap {
+  display: flex;
+  width: min(960px, calc(100vw - 48px));
+  max-height: calc(100vh - 80px);
+  align-items: center;
+  justify-content: center;
+}
+
+.vm-image-viewer__video {
+  width: 100%;
+  max-height: calc(100vh - 80px);
+  border-radius: 12px;
+  background: #000;
+  outline: none;
+}
+
+.vm-image-viewer__toolbar {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 8px;
+  border-radius: 12px;
+  background: rgb(24 28 40 / 92%);
+  transform: translateX(-50%);
+
+  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;
+    }
+  }
+}
+</style>