feat: 新增视频床与文件床，视频支持 HLS 转码

文件床 - 新增 files/ 存储前缀与 media_type 索引列，图片、视频、文件三类资源独立 - 新增文件上传、列表、删除、批量删除接口，禁止 html/htm/svg - 支持公开直链与 Token 访问两种模式，后台可切换，直链强制附件下载视频床 - 新增 videos/ 存储前缀与视频上传接口，单文件上限 500MB - 接入 ffmpeg 转码队列，并发数与单任务核心数可配，默认串行 - 五档转码质量：直接封装 / 速度 / 平衡 / 质量 / 压缩（压缩档可调码率比例） - 码率控制避免转码后体积反超源文件，音频跟随源音轨不放大不压缩 - 转码进度实时上报，成功后删除源文件，失败时保留源文件与可用链接 - 上传时自动抽帧生成封面，视频与封面各有独立链接 - 删除视频时中断转码并清理切片、封面与源文件媒体库 - 图库、视频库、文件库三套独立统计，含趋势、占用与来源分布 - 统一筛选、多选、批量删除、批量标签、网格/列表切换，显示方式按类型分别记忆 - 视频详情对齐图片详情，视频库支持在线播放（hls.js，兼容回退原文件）修复 - 清理无主的切片、封面与开发期遗留的 ffmpeg 进程 - 源文件按设计删除后，索引不再被启动孤儿清理误删 - 视频统计口径与列表一致，转码中的视频不计入统计 - 转码失败时回收已写入的部分切片，避免残留 - 设置页停用检查更新（与上游版本号已不对应）其他 - Docker 镜像安装 ffmpeg - git remote 指向内网仓库
2026-10-17 03:14:57 +08:00
1 parent 05cc3895f1
commit 89ea2fb25d
@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import type { FileItem } from '~/types/file'
+
+const props = defineProps<{
+  item: FileItem
+  /** 已按访问模式拼接好的视频直链 */
+  link: string
+  /** 缩略图直链 */
+  thumbLink: string
+  /** 原始视频下载地址 */
+  downloadLink: string
+  selected?: boolean
+  selectable?: boolean
+}>()
+
+const emit = defineEmits<{
+  'play': []
+  'delete': []
+  'update:selected': [value: boolean]
+}>()
+
+const { formatFileSize } = useFileSize()
+const { t, locale } = useI18n()
+
+/** 转码完成后按 HLS 播放列表展示 */
+const displayName = computed(() => {
+  if (!props.item.hlsUrl) return props.item.originalName
+  const dot = props.item.originalName.lastIndexOf('.')
+  const base = dot > 0 ? props.item.originalName.slice(0, dot) : props.item.originalName
+  return `${base}.m3u8`
+})
+
+const uploadedLabel = computed(() => {
+  try {
+    return new Date(props.item.uploadedAt).toLocaleString(locale.value, { hour12: false })
+  } catch {
+    return props.item.uploadedAt
+  }
+})
+
+const thumbFailed = ref(false)
+
+watch(() => props.item.thumbUrl, () => {
+  thumbFailed.value = false
+})
+</script>
+
+<template>
+  <div class="flex flex-col overflow-hidden rounded-xl border border-default bg-elevated">
+    <div class="relative aspect-video shrink-0 overflow-hidden bg-muted">
+      <img
+        v-if="item.thumbUrl && !thumbFailed"
+        :src="thumbLink"
+        :alt="displayName"
+        loading="lazy"
+        class="size-full object-cover object-center"
+        @error="thumbFailed = true"
+      >
+      <div
+        v-else
+        class="flex size-full items-center justify-center"
+      >
+        <UIcon
+          name="i-lucide-film"
+          class="size-10 text-dimmed"
+        />
+      </div>
+
+      <button
+        type="button"
+        class="absolute inset-0 flex items-center justify-center transition-colors hover:bg-black/20"
+        :aria-label="t('library.play')"
+        @click="emit('play')"
+      >
+        <span class="rounded-full bg-black/55 p-3 text-white backdrop-blur-sm">
+          <UIcon
+            name="i-lucide-play"
+            class="size-6"
+          />
+        </span>
+      </button>
+
+      <div
+        v-if="selectable"
+        class="absolute top-2 left-2 z-10"
+        @click.stop
+      >
+        <UCheckbox
+          :model-value="selected"
+          @update:model-value="emit('update:selected', $event === true)"
+        />
+      </div>
+
+      <div
+        class="absolute top-2 right-2 z-10"
+        @click.stop
+      >
+        <UBadge
+          v-if="item.hlsUrl"
+          color="success"
+          variant="solid"
+          size="xs"
+        >
+          m3u8
+        </UBadge>
+        <UBadge
+          v-else-if="item.transcodeStatus === 'failed'"
+          color="error"
+          variant="solid"
+          size="xs"
+        >
+          {{ t('library.transcodeFailed') }}
+        </UBadge>
+      </div>
+    </div>
+
+    <div class="flex flex-1 flex-col gap-1.5 p-3">
+      <p
+        class="truncate text-sm font-semibold"
+        :title="displayName"
+      >
+        {{ displayName }}
+      </p>
+      <p class="truncate text-xs text-muted">
+        {{ uploadedLabel }} · {{ formatFileSize(item.size) }}
+      </p>
+      <div
+        v-if="item.tags?.length"
+        class="flex flex-wrap gap-1"
+      >
+        <TagBadge
+          v-for="tag in item.tags"
+          :key="tag.id"
+          :tag="tag"
+        />
+      </div>
+    </div>
+
+    <div class="flex items-center justify-around border-t border-default px-2 py-2">
+      <CopyButton
+        icon="i-lucide-link"
+        icon-only
+        :label="t('library.copyVideoLink')"
+        :value="link"
+        :success-title="t('copy.copiedUrl')"
+      />
+      <CopyButton
+        icon="i-lucide-image"
+        icon-only
+        :label="t('library.copyThumbLink')"
+        :value="thumbLink"
+        :success-title="t('copy.copiedUrl')"
+      />
+      <UButton
+        v-if="!item.sourceDeleted"
+        icon="i-lucide-download"
+        variant="ghost"
+        color="neutral"
+        size="sm"
+        :to="downloadLink"
+        target="_blank"
+        rel="noopener"
+        :aria-label="t('files.download')"
+      />
+      <UButton
+        icon="i-lucide-trash-2"
+        variant="ghost"
+        color="neutral"
+        size="sm"
+        :aria-label="t('common.delete')"
+        @click="emit('delete')"
+      />
+    </div>
+  </div>
+</template>