feat: 新增视频床与文件床,视频支持 HLS 转码
ci / ci (22, ubuntu-latest) (push) Canceled after 0s

文件床
- 新增 files/ 存储前缀与 media_type 索引列,图片、视频、文件三类资源独立
- 新增文件上传、列表、删除、批量删除接口,禁止 html/htm/svg
- 支持公开直链与 Token 访问两种模式,后台可切换,直链强制附件下载

视频床
- 新增 videos/ 存储前缀与视频上传接口,单文件上限 500MB
- 接入 ffmpeg 转码队列,并发数与单任务核心数可配,默认串行
- 五档转码质量:直接封装 / 速度 / 平衡 / 质量 / 压缩(压缩档可调码率比例)
- 码率控制避免转码后体积反超源文件,音频跟随源音轨不放大不压缩
- 转码进度实时上报,成功后删除源文件,失败时保留源文件与可用链接
- 上传时自动抽帧生成封面,视频与封面各有独立链接
- 删除视频时中断转码并清理切片、封面与源文件

媒体库
- 图库、视频库、文件库三套独立统计,含趋势、占用与来源分布
- 统一筛选、多选、批量删除、批量标签、网格/列表切换,显示方式按类型分别记忆
- 视频详情对齐图片详情,视频库支持在线播放(hls.js,兼容回退原文件)

修复
- 清理无主的切片、封面与开发期遗留的 ffmpeg 进程
- 源文件按设计删除后,索引不再被启动孤儿清理误删
- 视频统计口径与列表一致,转码中的视频不计入统计
- 转码失败时回收已写入的部分切片,避免残留
- 设置页停用检查更新(与上游版本号已不对应)

其他
- Docker 镜像安装 ffmpeg
- git remote 指向内网仓库
This commit is contained in:
Yeomai committed 2026-10-17 03:14:57 +08:00
1 parent 05cc3895f1
commit 89ea2fb25d
61 files changed
+6637 -154

No files matched your search

+3
View File
@@ -18,6 +18,9 @@ FROM node:22-alpine
WORKDIR /app
# 视频床转码依赖 ffmpeg(单码率 HLS 切片)
RUN apk add --no-cache ffmpeg
ENV NODE_ENV=production \
NITRO_PORT=6892 \
DATA_DIR=/data
+69 -29
View File
@@ -13,7 +13,9 @@ const mobileUserOpen = ref(false)
const navItems = computed(() => {
const items = [
{ label: t('nav.api'), to: '/api', icon: 'i-lucide-code-2' },
{ label: t('nav.gallery'), to: '/gallery', icon: 'i-lucide-images' }
{ label: t('nav.gallery'), to: '/gallery', icon: 'i-lucide-images' },
{ label: t('nav.videoLibrary'), to: '/video-library', icon: 'i-lucide-film' },
{ label: t('nav.fileLibrary'), to: '/file-library', icon: 'i-lucide-folder-open' }
]
if (isAdmin.value) {
items.push({ label: t('nav.storage'), to: '/storage', icon: 'i-lucide-hard-drive' })
@@ -22,6 +24,28 @@ const navItems = computed(() => {
return items
})
/** 三个上传入口,与顶部 Logo 并列 */
const hostItems = computed(() => [
{
label: t('host.video'),
to: '/videos',
icon: 'i-lucide-film',
title: t('host.videoFull')
},
{
label: t('host.file'),
to: '/files',
icon: 'i-lucide-folder-open',
title: t('host.fileFull')
}
])
const mobileNavItems = computed(() => [...hostItems.value, ...navItems.value])
function isHostActive(to: string) {
return route.path === to || route.path.startsWith(`${to}/`)
}
const accountMenuItems = computed<DropdownMenuItem[]>(() => [
{
label: t('nav.changePassword'),
@@ -66,34 +90,50 @@ async function handleLogout() {
<header class="sticky top-0 z-40 border-b border-default bg-default/80 backdrop-blur">
<div class="mx-auto max-w-7xl px-4 py-2.5 sm:px-6">
<div class="flex items-center justify-between gap-3">
<NuxtLink
to="/"
:title="t('nav.backToUpload')"
class="group flex min-w-0 shrink items-center gap-2.5 transition-opacity hover:opacity-90 sm:gap-3"
>
<img
:src="logoLight"
alt="PicHost"
class="h-9 w-auto shrink-0 object-contain sm:h-11 dark:hidden"
decoding="async"
draggable="false"
<div class="flex min-w-0 items-center gap-2 sm:gap-3">
<NuxtLink
to="/"
:title="t('host.imageFull')"
class="group flex min-w-0 shrink items-center gap-2.5 transition-opacity hover:opacity-90 sm:gap-3"
>
<img
:src="logoDark"
alt="PicHost"
class="hidden h-9 w-auto shrink-0 object-contain sm:h-11 dark:block"
decoding="async"
draggable="false"
>
<div class="min-w-0 leading-tight">
<p class="text-[15px] font-bold tracking-tight sm:text-base">
<span class="text-highlighted">Pic</span><span class="text-primary">Host</span>
</p>
<p class="mt-0.5 hidden text-[11px] text-muted min-[380px]:block sm:text-xs">
{{ t('app.tagline') }}
</p>
</div>
</NuxtLink>
<img
:src="logoLight"
alt="PicHost"
class="h-9 w-auto shrink-0 object-contain sm:h-11 dark:hidden"
decoding="async"
draggable="false"
>
<img
:src="logoDark"
alt="PicHost"
class="hidden h-9 w-auto shrink-0 object-contain sm:h-11 dark:block"
decoding="async"
draggable="false"
>
<div class="min-w-0 leading-tight">
<p class="text-[15px] font-bold tracking-tight sm:text-base">
<span class="text-highlighted">Pic</span><span class="text-primary">Host</span>
</p>
<p class="mt-0.5 hidden text-[11px] text-muted min-[380px]:block sm:text-xs">
{{ t('app.tagline') }}
</p>
</div>
</NuxtLink>
<nav class="hidden items-center gap-1 sm:flex">
<UButton
v-for="item in hostItems"
:key="item.to"
:to="item.to"
:icon="item.icon"
:label="item.label"
:title="item.title"
size="sm"
:variant="isHostActive(item.to) ? 'soft' : 'ghost'"
:color="isHostActive(item.to) ? 'primary' : 'neutral'"
/>
</nav>
</div>
<ClientOnly>
<div class="flex shrink-0 items-center gap-0.5 sm:gap-1">
@@ -124,7 +164,7 @@ async function handleLogout() {
/>
<MobileNavMenu
v-model:open="mobileNavOpen"
:items="navItems"
:items="mobileNavItems"
/>
</div>
+16 -1
View File
@@ -1,10 +1,16 @@
<script setup lang="ts">
import type { MediaType } from '~/types/media'
const props = defineProps<{
open: boolean
count: number
loading?: boolean
/** 删除对象的类型,决定确认文案 */
kind?: MediaType
}>()
const kind = computed<MediaType>(() => props.kind ?? 'image')
const emit = defineEmits<{
'update:open': [value: boolean]
'confirm': []
@@ -12,7 +18,16 @@ const emit = defineEmits<{
const { t } = useI18n()
const description = computed(() => t('delete.confirmDesc', { count: props.count }))
const description = computed(() => {
switch (kind.value) {
case 'video':
return t('delete.confirmDescVideo', { count: props.count })
case 'file':
return t('delete.confirmDescFile', { count: props.count })
default:
return t('delete.confirmDesc', { count: props.count })
}
})
function close() {
emit('update:open', false)
+116
View File
@@ -0,0 +1,116 @@
<script setup lang="ts">
import type { FileItem } from '~/types/file'
import { formatFileSize as formatSize } from '~/composables/useFileSize'
const props = defineProps<{
item: FileItem
link: string
downloadLink: string
selected?: boolean
selectable?: boolean
}>()
const emit = defineEmits<{
'delete': []
'update:selected': [value: boolean]
}>()
const { t, locale } = useI18n()
const uploadedLabel = computed(() => {
try {
return new Date(props.item.uploadedAt).toLocaleString(locale.value, { hour12: false })
} catch {
return props.item.uploadedAt
}
})
function fileIcon(item: FileItem): string {
const type = item.contentType.toLowerCase()
if (type.startsWith('image/')) return 'i-lucide-image'
if (type.startsWith('video/')) return 'i-lucide-film'
if (type.startsWith('audio/')) return 'i-lucide-music'
if (type.includes('pdf')) return 'i-lucide-file-text'
if (
type.includes('zip')
|| type.includes('rar')
|| type.includes('7z')
|| type.includes('tar')
|| type.includes('gzip')
) {
return 'i-lucide-file-archive'
}
return 'i-lucide-file'
}
</script>
<template>
<div class="flex flex-col overflow-hidden rounded-xl border border-default bg-elevated">
<div class="relative flex aspect-[4/3] shrink-0 items-center justify-center bg-muted">
<UIcon
:name="fileIcon(item)"
class="size-12 text-dimmed"
/>
<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>
<div class="flex flex-1 flex-col gap-1.5 p-3">
<p
class="truncate text-sm font-semibold"
:title="item.originalName"
>
{{ item.originalName }}
</p>
<p class="truncate text-xs text-muted">
{{ uploadedLabel }} · {{ formatSize(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-only
icon="i-lucide-link"
:label="t('files.copyLink')"
:value="link"
/>
<UButton
size="xs"
variant="ghost"
color="neutral"
icon="i-lucide-download"
:to="downloadLink"
target="_blank"
rel="noopener"
:aria-label="t('files.download')"
/>
<UButton
size="xs"
variant="ghost"
color="neutral"
icon="i-lucide-trash-2"
:aria-label="t('common.delete')"
@click="emit('delete')"
/>
</div>
</div>
</template>
+713
View File
@@ -0,0 +1,713 @@
<script setup lang="ts">
import type { FileItem, FileListResponse } from '~/types/file'
import type { LibraryStatsData } from '~/types/media'
import { formatFileSize } from '~/composables/useFileSize'
const props = withDefaults(defineProps<{
/** 文件库(file)与视频库结构一致,保留参数以便复用 */
kind?: 'file' | 'video'
}>(), {
kind: 'file'
})
const { isAuthenticated, handleAuthError } = useAuth()
const toast = useToast()
const { t, locale } = useI18n()
const { items: tagItems, fetchTags, batchUpdateTags } = useTags()
const items = ref<FileItem[]>([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(20)
const totalPages = ref(1)
const loading = ref(false)
const stats = ref<LibraryStatsData | null>(null)
const searchQuery = ref('')
const activeSearch = ref('')
const accessMode = ref<'public' | 'token'>('public')
const apiToken = ref('')
const selectedKeys = ref<Set<string>>(new Set())
const deleteModalOpen = ref(false)
const deleteTargetKeys = ref<string[]>([])
const deleting = ref(false)
const batchTagOpen = ref(false)
const currentBackend = ref('all')
const currentSource = ref('all')
const backendOptions = ref<Array<{ id: string, name: string }>>([])
const activeTagIds = ref<number[]>([])
const activeTagMode = ref<'or' | 'and'>('or')
const activeUntaggedOnly = ref(false)
const { viewMode } = useLibraryView(props.kind)
const selectedCount = computed(() => selectedKeys.value.size)
const pageText = computed(() => props.kind === 'video'
? {
title: t('library.video.title'),
subtitle: t('library.video.subtitle'),
empty: t('library.video.empty')
}
: {
title: t('library.file.title'),
subtitle: t('library.file.subtitle'),
empty: t('library.file.empty')
})
const allSelected = computed(() =>
items.value.length > 0 && items.value.every(item => selectedKeys.value.has(item.key))
)
const backendItems = computed(() => [
{ label: t('stats.filterStorageAll'), value: 'all' },
...backendOptions.value.map(backend => ({ label: backend.name, value: backend.id }))
])
const sourceItems = computed(() => [
{ label: t('stats.filterSourceAll'), value: 'all' },
{ label: t('stats.sourceWeb'), value: 'web' },
{ label: t('stats.sourceApi'), value: 'api' }
])
function withToken(raw: string | undefined): string {
if (!raw) return ''
if (accessMode.value !== 'token' || !apiToken.value) return raw
const separator = raw.includes('?') ? '&' : '?'
return `${raw}${separator}token=${encodeURIComponent(apiToken.value)}`
}
function fileLink(item: FileItem): string {
return withToken(item.url)
}
function displayName(item: FileItem): string {
return item.originalName
}
function uploadedLabel(item: FileItem): string {
try {
return new Date(item.uploadedAt).toLocaleString(locale.value, { hour12: false })
} catch {
return item.uploadedAt
}
}
function fileIcon(item: FileItem): string {
const type = item.contentType.toLowerCase()
if (type.startsWith('image/')) return 'i-lucide-image'
if (type.startsWith('video/')) return 'i-lucide-film'
if (type.startsWith('audio/')) return 'i-lucide-music'
if (type.includes('pdf')) return 'i-lucide-file-text'
if (
type.includes('zip')
|| type.includes('rar')
|| type.includes('7z')
|| type.includes('tar')
|| type.includes('gzip')
) {
return 'i-lucide-file-archive'
}
return 'i-lucide-file'
}
async function loadApiToken() {
try {
const data = await $fetch<{ apiUploadToken: string }>('/api/user/api-token', {
credentials: 'include'
})
apiToken.value = data.apiUploadToken ?? ''
} catch {
apiToken.value = ''
}
}
async function loadBackendOptions() {
try {
const data = await $fetch<{ backends: Array<{ id: string, name: string }> }>(
'/api/storage-backends',
{ credentials: 'include' }
)
backendOptions.value = data.backends ?? []
} catch (error: unknown) {
handleAuthError(error)
}
}
async function fetchStats() {
if (!isAuthenticated.value) return
try {
stats.value = await $fetch<LibraryStatsData>('/api/library/stats', {
credentials: 'include',
query: { kind: props.kind }
})
} catch (error: unknown) {
handleAuthError(error)
}
}
async function fetchList(targetPage = page.value) {
if (!isAuthenticated.value) return
loading.value = true
try {
const response = await $fetch<FileListResponse>('/api/files', {
credentials: 'include',
query: {
limit: pageSize.value,
page: targetPage,
kind: props.kind,
...(activeSearch.value ? { q: activeSearch.value } : {}),
...(currentBackend.value !== 'all' ? { backendId: currentBackend.value } : {}),
...(currentSource.value !== 'all' ? { uploadSource: currentSource.value } : {}),
...(activeTagIds.value.length ? { tagIds: activeTagIds.value.join(',') } : {}),
...(activeUntaggedOnly.value ? { untagged: '1' } : {}),
...(activeTagMode.value === 'and' ? { tagMode: 'and' } : {})
}
})
items.value = response.items
total.value = response.total
page.value = response.page
totalPages.value = response.totalPages
accessMode.value = response.accessMode
const visible = new Set(response.items.map(item => item.key))
selectedKeys.value = new Set([...selectedKeys.value].filter(key => visible.has(key)))
if (response.accessMode === 'token' && !apiToken.value) {
await loadApiToken()
}
} catch (error: unknown) {
handleAuthError(error)
if (isAuthenticated.value) {
toast.add({ title: t('files.loadFailed'), color: 'error' })
}
} finally {
loading.value = false
}
}
async function refresh() {
await Promise.all([fetchList(1), fetchStats(), fetchTags()])
}
async function submitSearch() {
if (!isAuthenticated.value) return
activeSearch.value = searchQuery.value.trim()
await fetchList(1)
}
async function handleBackendChange(value: string) {
currentBackend.value = value
selectedKeys.value = new Set()
await fetchList(1)
}
async function handleSourceChange(value: string) {
currentSource.value = value
selectedKeys.value = new Set()
await fetchList(1)
}
async function handleTagIdsChange(tagIds: number[]) {
activeTagIds.value = tagIds
selectedKeys.value = new Set()
await fetchList(1)
}
async function handleTagModeChange(tagMode: 'or' | 'and') {
activeTagMode.value = tagMode
await fetchList(1)
}
async function handleUntaggedChange(untaggedOnly: boolean) {
activeUntaggedOnly.value = untaggedOnly
selectedKeys.value = new Set()
await fetchList(1)
}
async function resetFilters() {
searchQuery.value = ''
activeSearch.value = ''
currentBackend.value = 'all'
currentSource.value = 'all'
activeTagIds.value = []
activeTagMode.value = 'or'
activeUntaggedOnly.value = false
selectedKeys.value = new Set()
await fetchList(1)
}
function toggleSelected(key: string, value: boolean) {
const next = new Set(selectedKeys.value)
if (value) next.add(key)
else next.delete(key)
selectedKeys.value = next
}
function toggleSelectAll() {
selectedKeys.value = allSelected.value
? new Set()
: new Set(items.value.map(item => item.key))
}
function clearSelection() {
selectedKeys.value = new Set()
}
function setViewMode(mode: 'grid' | 'list') {
viewMode.value = mode
}
function openBatchTags() {
batchTagOpen.value = true
}
function requestDelete(item: FileItem) {
if (!isAuthenticated.value) return
deleteTargetKeys.value = [item.key]
deleteModalOpen.value = true
}
function requestBatchDelete() {
if (!isAuthenticated.value || !selectedCount.value) return
deleteTargetKeys.value = [...selectedKeys.value]
deleteModalOpen.value = true
}
async function confirmDelete() {
const keys = [...deleteTargetKeys.value]
if (!keys.length || !isAuthenticated.value) return
deleting.value = true
try {
if (keys.length === 1) {
await $fetch('/api/files', {
method: 'DELETE',
credentials: 'include',
query: { key: keys[0] }
})
} else {
const response = await $fetch<{ deleted: string[], failed: unknown[] }>(
'/api/files/batch-delete',
{ method: 'POST', credentials: 'include', body: { keys } }
)
if (response.failed.length) {
toast.add({
title: t('library.deletePartialFail', { n: response.failed.length }),
color: 'warning'
})
}
}
toast.add({ title: t('library.fileDeleted', { n: keys.length }), color: 'success' })
deleteModalOpen.value = false
deleteTargetKeys.value = []
selectedKeys.value = new Set()
await refresh()
} catch (error: unknown) {
handleAuthError(error)
if (isAuthenticated.value) {
toast.add({ title: t('files.deleteFailed'), color: 'error' })
}
} finally {
deleting.value = false
}
}
async function confirmBatchTags(tagIds: number[], action: 'add' | 'remove') {
const keys = [...selectedKeys.value]
if (!keys.length || !tagIds.length) return
try {
await batchUpdateTags(keys, tagIds, action)
batchTagOpen.value = false
selectedKeys.value = new Set()
toast.add({ title: t('tags.batchSuccess'), color: 'success' })
await Promise.all([fetchList(1), fetchStats(), fetchTags(true)])
} catch (error: unknown) {
handleAuthError(error)
toast.add({ title: t('tags.batchFailed'), color: 'error' })
}
}
async function handlePageChange(targetPage: number) {
selectedKeys.value = new Set()
await fetchList(targetPage)
}
async function handlePageSizeChange(size: number) {
pageSize.value = size
selectedKeys.value = new Set()
await fetchList(1)
}
onMounted(() => {
void loadBackendOptions()
})
defineExpose({ refresh })
</script>
<template>
<div class="space-y-6">
<div class="flex items-start justify-between gap-3">
<div class="min-w-0">
<h1 class="text-2xl font-semibold tracking-tight">
{{ pageText.title }}
</h1>
<p class="text-sm text-muted">
{{ pageText.subtitle }}
</p>
</div>
<UButton
icon="i-lucide-refresh-cw"
variant="ghost"
color="neutral"
size="sm"
class="mt-0.5 shrink-0"
:aria-label="t('common.refresh')"
:loading="loading"
@click="refresh"
/>
</div>
<LibraryStatsPanel
:kind="props.kind"
:stats="stats"
:loading="loading"
/>
<section class="space-y-3">
<div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
<div class="flex items-center gap-2 text-sm">
<UCheckbox
:model-value="allSelected"
:disabled="!items.length"
@update:model-value="toggleSelectAll"
/>
<span class="text-muted">
{{ t('library.selectedCount', { n: selectedCount }) }}
</span>
<UButton
v-if="selectedCount > 0"
variant="link"
color="primary"
size="xs"
:label="t('library.clearSelection')"
@click="clearSelection"
/>
</div>
<div class="flex flex-wrap items-center gap-2">
<UInput
v-model="searchQuery"
icon="i-lucide-search"
:placeholder="t('library.searchPlaceholder')"
size="sm"
class="w-44"
@keydown.enter.prevent="submitSearch"
/>
<USelect
:model-value="currentBackend"
:items="backendItems"
value-key="value"
size="sm"
class="w-32"
:aria-label="t('stats.filterStorageAll')"
@update:model-value="handleBackendChange"
/>
<USelect
:model-value="currentSource"
:items="sourceItems"
value-key="value"
size="sm"
class="w-28"
:aria-label="t('stats.filterSourceAll')"
@update:model-value="handleSourceChange"
/>
<TagFilterSelect
:model-value="activeTagIds"
:tag-mode="activeTagMode"
:untagged-only="activeUntaggedOnly"
:tags="tagItems"
:disabled="loading"
@update:model-value="handleTagIdsChange"
@update:tag-mode="handleTagModeChange"
@update:untagged-only="handleUntaggedChange"
/>
<UButton
icon="i-lucide-search"
size="sm"
:label="t('common.search')"
:loading="loading"
@click="submitSearch"
/>
<UButton
icon="i-lucide-rotate-ccw"
variant="outline"
color="neutral"
size="sm"
:label="t('library.reset')"
@click="resetFilters"
/>
<UButton
v-if="selectedCount > 0"
icon="i-lucide-tags"
variant="outline"
color="primary"
size="sm"
:disabled="!selectedCount || loading"
:label="t('tags.batchAdd')"
@click="openBatchTags"
/>
<UButton
icon="i-lucide-trash-2"
variant="outline"
color="error"
size="sm"
:disabled="!selectedCount || loading"
:label="t('library.batchDelete')"
@click="requestBatchDelete"
/>
<div class="flex gap-0.5 rounded-lg border border-default p-0.5">
<UButton
icon="i-lucide-layout-grid"
size="xs"
:variant="viewMode === 'grid' ? 'solid' : 'ghost'"
:color="viewMode === 'grid' ? 'primary' : 'neutral'"
:aria-label="t('stats.viewGrid')"
@click="setViewMode('grid')"
/>
<UButton
icon="i-lucide-list"
size="xs"
:variant="viewMode === 'list' ? 'solid' : 'ghost'"
:color="viewMode === 'list' ? 'primary' : 'neutral'"
:aria-label="t('stats.viewList')"
@click="setViewMode('list')"
/>
</div>
</div>
</div>
<div
v-if="loading && !items.length"
class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
>
<USkeleton
v-for="n in 8"
:key="n"
class="aspect-[4/3] rounded-xl"
/>
</div>
<p
v-else-if="!items.length"
class="rounded-lg border border-default py-10 text-center text-sm text-muted"
>
{{ activeSearch ? t('library.searchEmpty') : pageText.empty }}
</p>
<div
v-else-if="viewMode === 'grid'"
class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
>
<FileCard
v-for="item in items"
:key="item.key"
:item="item"
:link="fileLink(item)"
:download-link="fileLink(item)"
selectable
:selected="selectedKeys.has(item.key)"
@update:selected="toggleSelected(item.key, $event)"
@delete="requestDelete(item)"
/>
</div>
<div
v-else
class="overflow-hidden rounded-xl border border-default bg-default"
>
<div class="overflow-x-auto">
<table class="min-w-full text-xs">
<thead class="border-b border-default bg-elevated/40 text-muted">
<tr>
<th class="w-10 px-3 py-2.5 text-left font-medium">
<UCheckbox
:model-value="allSelected"
:aria-label="t('stats.selectAll')"
@update:model-value="toggleSelectAll"
/>
</th>
<th class="min-w-[14rem] px-3 py-2.5 text-left font-medium">
{{ t('stats.colFilename') }}
</th>
<th class="hidden w-24 px-3 py-2.5 text-left font-medium sm:table-cell">
{{ t('stats.colSource') }}
</th>
<th class="w-20 px-3 py-2.5 text-left font-medium">
{{ t('stats.colSize') }}
</th>
<th class="hidden w-28 px-3 py-2.5 text-left font-medium md:table-cell">
{{ t('stats.colType') }}
</th>
<th class="hidden w-40 px-3 py-2.5 text-left font-medium lg:table-cell">
{{ t('stats.colUploadedAt') }}
</th>
<th class="hidden min-w-[9rem] px-3 py-2.5 text-left font-medium md:table-cell">
{{ t('tags.column') }}
</th>
<th class="w-24 px-3 py-2.5 text-right font-medium">
{{ t('stats.colActions') }}
</th>
</tr>
</thead>
<tbody class="divide-y divide-default">
<tr
v-for="item in items"
:key="item.key"
class="transition-colors hover:bg-elevated/50"
:class="selectedKeys.has(item.key) ? 'bg-primary/5' : ''"
>
<td class="px-3 py-2">
<UCheckbox
:model-value="selectedKeys.has(item.key)"
@update:model-value="toggleSelected(item.key, $event === true)"
/>
</td>
<td class="px-3 py-2.5">
<div class="flex min-w-0 items-center gap-3">
<span class="flex size-10 shrink-0 items-center justify-center rounded-md border border-default bg-muted">
<UIcon
:name="fileIcon(item)"
class="size-4 text-dimmed"
/>
</span>
<p
class="min-w-0 flex-1 truncate text-highlighted"
:title="displayName(item)"
>
{{ displayName(item) }}
</p>
</div>
</td>
<td class="hidden px-3 py-2 sm:table-cell">
<span
v-if="item.uploadSource"
class="inline-flex items-center gap-1 rounded-md border border-default px-1.5 py-0.5 text-[11px] leading-4 text-muted"
>
<UIcon
:name="item.uploadSource === 'api' ? 'i-lucide-code-xml' : 'i-lucide-globe'"
class="size-3 shrink-0"
/>
{{ item.uploadSource === 'api' ? t('stats.tagApi') : t('stats.tagWeb') }}
</span>
<span
v-else
class="text-muted"
>—</span>
</td>
<td class="px-3 py-2 tabular-nums text-muted">
{{ formatFileSize(item.size) }}
</td>
<td class="hidden px-3 py-2 md:table-cell">
<span
v-if="item.storage"
class="inline-flex items-center gap-1 rounded-md border border-default px-1.5 py-0.5 text-[11px] leading-4 text-muted"
>
<UIcon
:name="item.storage.type === 'local' ? 'i-lucide-hard-drive' : 'i-lucide-cloud'"
class="size-3 shrink-0"
/>
{{ item.storage.name }}
</span>
<span
v-else
class="text-muted"
>—</span>
</td>
<td class="hidden px-3 py-2 text-muted lg:table-cell">
{{ uploadedLabel(item) }}
</td>
<td class="hidden px-3 py-2 md:table-cell">
<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>
<span
v-else
class="text-muted"
>{{ t('tags.unlabeled') }}</span>
</td>
<td class="px-3 py-2">
<div class="flex items-center justify-end gap-1">
<CopyButton
icon-only
icon="i-lucide-link"
:label="t('files.copyLink')"
:value="fileLink(item)"
/>
<UButton
size="xs"
variant="ghost"
color="neutral"
icon="i-lucide-download"
:to="fileLink(item)"
target="_blank"
rel="noopener"
:aria-label="t('files.download')"
/>
<UButton
size="xs"
variant="ghost"
color="error"
icon="i-lucide-trash-2"
:aria-label="t('common.delete')"
@click="requestDelete(item)"
/>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<PaginationBar
v-if="!loading && total > 0"
:page="page"
:total-pages="totalPages"
:total="total"
:page-size="pageSize"
unit=""
:loading="loading"
@update:page="handlePageChange"
@update:page-size="handlePageSizeChange"
/>
</section>
<DeleteConfirmModal
v-model:open="deleteModalOpen"
:count="deleteTargetKeys.length"
:loading="deleting"
:kind="props.kind"
@confirm="confirmDelete"
/>
<BatchTagModal
v-model:open="batchTagOpen"
:tags="tagItems"
:selected-count="selectedCount"
@confirm="confirmBatchTags"
/>
</div>
</template>
@@ -1,33 +1,31 @@
<script setup lang="ts">
export interface GalleryStatsData {
uploadToday: number
uploadYesterday: number
uploadMonth: number
uploadLastMonth: number
uploadTotal: number
storedCount: number
uploadBytesTotal: number
bySource: {
web: number
api: number
}
storageUsage: {
usedBytes: number
totalBytes: number | null
percent: number | null
}
}
import type { LibraryStatsData, MediaType } from '~/types/media'
const props = defineProps<{
stats: GalleryStatsData | null
const props = withDefaults(defineProps<{
stats: LibraryStatsData | null
/** 统计口径:图片 / 视频 / 文件各自独立 */
kind?: MediaType
loading?: boolean
}>()
}>(), {
kind: 'image'
})
const { t } = useI18n()
const { formatFileSize } = useFileSize()
const SOURCE_COLORS = ['var(--ui-primary)', '#10b981'] as const
const totalHint = computed(() => {
switch (props.kind) {
case 'video':
return t('library.statsTotalHintVideo')
case 'file':
return t('library.statsTotalHintFile')
default:
return t('library.statsTotalHintImage')
}
})
const sourceItems = computed(() => {
const bySource = props.stats?.bySource
if (!bySource) return []
@@ -147,7 +145,7 @@ function displayValue(value: number | undefined) {
{{ displayValue(stats?.uploadTotal) }}
</p>
<p class="mt-2 text-xs text-muted">
{{ t('stats.totalFiles') }}
{{ totalHint }}
</p>
</div>
+249
View File
@@ -0,0 +1,249 @@
<script setup lang="ts">
import type { FileItem } from '~/types/file'
import type { CopyFormat, UploadMediaKind } from '~/composables/useUploadPreferences'
const props = defineProps<{
item: FileItem
kind: UploadMediaKind
/** 已按访问模式拼接好的直链 */
link: string
/** 封面缩略图地址 */
thumbLink?: string
}>()
const emit = defineEmits<{
delete: []
}>()
const { formatFileSize } = useFileSize()
const { t, locale } = useI18n()
const { copyFormat } = useUploadPreferences(props.kind)
const copyFormatItems = computed(() => [
{ label: t('copy.url'), value: 'url' as const },
{ label: t('copy.markdown'), value: 'markdown' as const },
{ label: t('copy.html'), value: 'html' as const },
{ label: t('copy.bbcode'), value: 'bbcode' as const }
])
const uploadedLabel = computed(() => {
try {
return new Date(props.item.uploadedAt).toLocaleString(locale.value, { hour12: false })
} catch {
return props.item.uploadedAt
}
})
const previewValue = computed(() => {
switch (copyFormat.value) {
case 'markdown':
return `[${props.item.originalName}](${props.link})`
case 'html':
return `<a href="${props.link}">${props.item.originalName}</a>`
case 'bbcode':
return `[url=${props.link}]${props.item.originalName}[/url]`
default:
return props.link
}
})
const copySuccessTitle = computed(() => {
switch (copyFormat.value) {
case 'markdown':
return t('copy.copiedMarkdown')
case 'html':
return t('copy.copiedHtml')
case 'bbcode':
return t('copy.copiedBbcode')
default:
return t('copy.copiedUrl')
}
})
function selectCopyFormat(value: CopyFormat) {
copyFormat.value = value
}
const pending = computed(() => props.item.transcodeStatus === 'pending')
const running = computed(() => props.item.transcodeStatus === 'running')
/** 转码中源文件只是临时文件,链接还不能对外使用 */
const transcoding = computed(() => pending.value || running.value)
/** 转码完成后按 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 presetLabel = computed(() => {
const [name, value] = (props.item.transcodePreset ?? '').split(':')
switch (name) {
case 'copy':
return t('preferences.presetCopy')
case 'veryfast':
return t('preferences.presetSpeed')
case 'medium':
return t('preferences.presetBalanced')
case 'slow':
return t('preferences.presetQuality')
case 'compress':
return value
? `${t('preferences.presetCompress')} ${value}%`
: t('preferences.presetCompress')
default:
return null
}
})
</script>
<template>
<div class="flex flex-col overflow-hidden rounded-xl border border-default bg-elevated shadow-sm">
<div class="relative aspect-video shrink-0 overflow-hidden bg-muted">
<img
v-if="kind === 'video' && item.thumbUrl"
:src="thumbLink"
:alt="item.originalName"
loading="lazy"
class="size-full object-cover"
>
<div
v-else-if="kind === 'video'"
class="flex size-full items-center justify-center"
>
<UIcon
name="i-lucide-film"
class="size-10 text-dimmed"
/>
</div>
<div
v-else
class="flex size-full items-center justify-center"
>
<UIcon
name="i-lucide-file"
class="size-10 text-dimmed"
/>
</div>
<div class="absolute top-2 right-2">
<UButton
icon="i-lucide-trash-2"
variant="solid"
color="neutral"
size="xs"
class="bg-black/55 text-white hover:bg-black/70"
:aria-label="t('common.delete')"
@click="emit('delete')"
/>
</div>
</div>
<div class="flex flex-1 flex-col gap-2 p-3">
<p
class="truncate text-sm font-medium"
:title="displayName"
>
{{ displayName }}
</p>
<p class="flex items-center gap-2 text-xs text-muted">
<span class="truncate">{{ uploadedLabel }} · {{ formatFileSize(item.size) }}</span>
<UBadge
v-if="pending"
color="neutral"
variant="subtle"
size="xs"
class="shrink-0"
>
{{ t('library.transcodePending') }}
</UBadge>
<UBadge
v-else-if="running"
color="primary"
variant="subtle"
size="xs"
class="shrink-0"
>
{{ t('library.transcoding') }} {{ item.transcodeProgress ?? 0 }}%
</UBadge>
<UBadge
v-else-if="item.transcodeStatus === 'failed'"
color="error"
variant="subtle"
size="xs"
class="shrink-0"
>
{{ t('library.transcodeFailed') }}
</UBadge>
<UBadge
v-else-if="item.hlsUrl"
color="success"
variant="subtle"
size="xs"
class="shrink-0"
>
m3u8
</UBadge>
</p>
<UProgress
v-if="running"
:model-value="item.transcodeProgress ?? 0"
size="xs"
color="primary"
/>
<div
v-if="!transcoding"
class="flex gap-1 rounded-lg border border-default p-0.5"
>
<UButton
v-for="option in copyFormatItems"
:key="option.value"
size="xs"
class="flex-1 justify-center"
:variant="copyFormat === option.value ? 'solid' : 'ghost'"
:color="copyFormat === option.value ? 'primary' : 'neutral'"
:label="option.label"
@click="selectCopyFormat(option.value)"
/>
</div>
<div
v-if="!transcoding"
class="flex items-center gap-1"
>
<UInput
:model-value="previewValue"
readonly
size="xs"
class="min-w-0 flex-1 font-mono text-xs"
/>
<CopyButton
:label="t('common.copy')"
variant="solid"
color="primary"
:value="previewValue"
:success-title="copySuccessTitle"
/>
</div>
<p
v-else
class="flex flex-wrap items-center gap-1.5"
>
<UBadge
v-if="presetLabel"
color="primary"
variant="subtle"
size="xs"
>
{{ presetLabel }}
</UBadge>
</p>
</div>
</div>
</template>
+100
View File
@@ -0,0 +1,100 @@
<script setup lang="ts">
import type { FileItem } from '~/types/file'
const props = defineProps<{
/** 视频床或文件床的上传页 */
kind: 'video' | 'file'
}>()
const { t } = useI18n()
const toast = useToast()
const {
uploading,
progressItems,
sessionItems,
linkUrl,
thumbLink,
loadActiveTranscodes,
uploadFiles
} = useMediaUpload(props.kind)
onMounted(() => {
void loadActiveTranscodes()
})
const text = computed(() => props.kind === 'video'
? {
uploadTitle: t('library.video.uploadTitle'),
uploadHint: t('library.video.uploadHint'),
uploadFormats: t('library.video.uploadFormats')
}
: {
uploadTitle: t('library.file.uploadTitle'),
uploadHint: t('library.file.uploadHint'),
uploadFormats: t('library.file.uploadFormats')
})
const showProgress = computed(() =>
uploading.value
|| progressItems.value.some(
item =>
item.status === 'pending'
|| item.status === 'uploading'
|| item.status === 'error'
)
)
async function removeItem(item: FileItem) {
try {
await $fetch('/api/files', {
method: 'DELETE',
credentials: 'include',
query: { key: item.key }
})
sessionItems.value = sessionItems.value.filter(entry => entry.key !== item.key)
toast.add({ title: t('files.deleted'), color: 'success' })
} catch {
toast.add({ title: t('files.deleteFailed'), color: 'error' })
}
}
</script>
<template>
<div class="space-y-6">
<UploadFlipCard
:kind="kind"
:title="text.uploadTitle"
:hint="text.uploadHint"
:formats="text.uploadFormats"
:disabled="uploading"
@upload="uploadFiles"
/>
<UploadResult
v-if="showProgress"
:items="progressItems"
/>
<section
v-if="sessionItems.length"
class="space-y-4"
>
<h2 class="text-lg font-medium">
{{ t('upload.sessionTitle') }}
<span class="ml-1 text-sm font-normal text-muted">({{ sessionItems.length }})</span>
</h2>
<div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<MediaSessionCard
v-for="item in sessionItems"
:key="item.key"
:item="item"
:kind="kind"
:link="linkUrl(item)"
:thumb-link="thumbLink(item)"
@delete="removeItem(item)"
/>
</div>
</section>
</div>
</template>
@@ -2,9 +2,24 @@
import uploadCardBg from '~/assets/image/upload-card-bg.webp'
import uploadCardHero from '~/assets/image/upload-card-hero.webp'
const props = defineProps<{
const props = withDefaults(defineProps<{
disabled?: boolean
}>()
title?: string
hint?: string
formats?: string
accept?: string
heroImage?: string
backgroundImage?: string
showSettings?: boolean
pasteEnabled?: boolean
/** 拖拽/选择时的类型限制;图片页与视频页各自限定,文件页放开 */
mediaKind?: 'image' | 'video' | 'any'
}>(), {
accept: 'image/jpeg,image/png,image/webp,image/gif,image/svg+xml,image/x-icon,.svg,.ico',
showSettings: true,
pasteEnabled: true,
mediaKind: 'image'
})
const emit = defineEmits<{
'upload': [files: File[]]
@@ -18,9 +33,22 @@ const { t } = useI18n()
const { bindPaste } = useClipboardImage(ref(null))
bindPaste((files) => {
if (!props.disabled) emit('upload', files)
if (props.disabled || !props.pasteEnabled) return
emit('upload', files)
})
const heroSource = computed(() => props.heroImage ?? uploadCardHero)
const backgroundSource = computed(() => props.backgroundImage ?? uploadCardBg)
const titleText = computed(() => props.title ?? t('upload.title'))
const hintText = computed(() => props.hint ?? t('upload.hint', { ctrl: 'Ctrl', v: 'V' }))
const formatsText = computed(() => props.formats ?? t('upload.formats'))
function matchesMediaKind(file: File): boolean {
if (props.mediaKind === 'any') return true
if (!file.type) return true
return file.type.startsWith(`${props.mediaKind}/`)
}
function openFilePicker() {
if (props.disabled) return
fileInput.value?.click()
@@ -38,8 +66,7 @@ function onDrop(event: DragEvent) {
dragging.value = false
if (props.disabled) return
const files = Array.from(event.dataTransfer?.files ?? [])
.filter(file => file.type.startsWith('image/'))
const files = Array.from(event.dataTransfer?.files ?? []).filter(matchesMediaKind)
if (files.length) emit('upload', files)
}
@@ -83,7 +110,7 @@ function onKeydown(event: KeyboardEvent) {
<input
ref="fileInput"
type="file"
accept="image/jpeg,image/png,image/webp,image/gif,image/svg+xml,image/x-icon,.svg,.ico"
:accept="accept"
multiple
class="hidden"
:disabled="disabled"
@@ -91,7 +118,7 @@ function onKeydown(event: KeyboardEvent) {
>
<img
:src="uploadCardBg"
:src="backgroundSource"
alt=""
aria-hidden="true"
class="pointer-events-none absolute inset-0 size-full object-cover opacity-100 dark:opacity-[0.12]"
@@ -99,7 +126,10 @@ function onKeydown(event: KeyboardEvent) {
draggable="false"
>
<div class="absolute top-3 right-3 z-20">
<div
v-if="showSettings"
class="absolute top-3 right-3 z-20"
>
<button
type="button"
class="upload-settings-btn inline-flex size-8 items-center justify-center rounded-md bg-default/70 text-muted backdrop-blur-sm transition-colors hover:bg-elevated hover:text-highlighted disabled:pointer-events-none disabled:opacity-40"
@@ -117,7 +147,7 @@ function onKeydown(event: KeyboardEvent) {
<div class="relative z-10 mx-auto flex max-w-lg flex-col items-center">
<div class="flex flex-col items-center">
<img
:src="uploadCardHero"
:src="heroSource"
alt=""
aria-hidden="true"
class="h-24 w-auto -mb-3 select-none transition-transform duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] sm:-mb-4 sm:h-28 md:h-32"
@@ -128,16 +158,16 @@ function onKeydown(event: KeyboardEvent) {
<div class="space-y-2">
<p class="text-xl font-semibold tracking-tight text-highlighted sm:text-2xl">
{{ t('upload.title') }}
{{ titleText }}
</p>
<p class="text-sm text-muted sm:text-base">
{{ t('upload.hint', { ctrl: 'Ctrl', v: 'V' }) }}
{{ hintText }}
</p>
</div>
</div>
<p class="mt-4 max-w-md text-xs leading-relaxed text-dimmed sm:text-sm">
{{ t('upload.formats') }}
{{ formatsText }}
</p>
</div>
</div>
+37 -4
View File
@@ -1,7 +1,20 @@
<script setup lang="ts">
defineProps<{
import type { UploadMediaKind } from '~/composables/useUploadPreferences'
const props = withDefaults(defineProps<{
disabled?: boolean
}>()
/** 上传页类型:决定默认可选文件类型、粘贴支持与偏好面板内容 */
kind?: UploadMediaKind
title?: string
hint?: string
formats?: string
accept?: string
heroImage?: string
backgroundImage?: string
pasteEnabled?: boolean
}>(), {
kind: 'image'
})
const emit = defineEmits<{
upload: [files: File[]]
@@ -9,6 +22,15 @@ const emit = defineEmits<{
const flipped = ref(false)
const mediaKind = computed(() => (props.kind === 'file' ? 'any' : props.kind))
const pasteEnabled = computed(() => props.pasteEnabled ?? props.kind === 'image')
const defaultAccept = computed(() => {
if (props.kind === 'video') return 'video/*,.mp4,.webm,.mov,.mkv,.avi,.m4v'
if (props.kind === 'file') return ''
return undefined
})
const accept = computed(() => props.accept ?? defaultAccept.value)
function onOpenSettings() {
flipped.value = true
}
@@ -25,14 +47,25 @@ function onBack() {
>
<div class="upload-card-flip-inner">
<div class="upload-card-face upload-card-face--front">
<ImageUploader
<UploadCard
:disabled="disabled"
:title="title"
:hint="hint"
:formats="formats"
:accept="accept"
:hero-image="heroImage"
:background-image="backgroundImage"
:media-kind="mediaKind"
:paste-enabled="pasteEnabled"
@upload="emit('upload', $event)"
@open-settings="onOpenSettings"
/>
</div>
<div class="upload-card-face upload-card-face--back">
<UploadPreferencesPanel @back="onBack" />
<UploadPreferencesPanel
:kind="kind"
@back="onBack"
/>
</div>
</div>
</div>
+156 -4
View File
@@ -1,4 +1,13 @@
<script setup lang="ts">
import type { UploadMediaKind } from '~/composables/useUploadPreferences'
const props = withDefaults(defineProps<{
/** 每个上传页各自一份偏好 */
kind?: UploadMediaKind
}>(), {
kind: 'image'
})
const emit = defineEmits<{
back: []
}>()
@@ -8,8 +17,18 @@ const {
autoCopyMarkdown,
copyFormat,
clientWebpQuality,
transcodeToHls,
loadPreferences
} = useUploadPreferences()
} = useUploadPreferences(props.kind)
/** 视频床 / 文件床没有图片压缩相关选项 */
const isImageKind = computed(() => props.kind === 'image')
const isVideoKind = computed(() => props.kind === 'video')
const gridClass = computed(() => {
if (isImageKind.value) return 'sm:grid-cols-3 sm:gap-6'
if (isVideoKind.value) return 'sm:grid-cols-2 sm:gap-6'
return 'mx-auto w-full max-w-md'
})
const { t } = useI18n()
@@ -20,6 +39,32 @@ const {
load: loadUserSettings
} = useUserAutoDeleteSettings()
const { isAdmin } = useAuth()
const {
concurrency: transcodeConcurrency,
threads: transcodeThreads,
maxConcurrency: maxTranscodeConcurrency,
maxThreads: maxTranscodeThreads,
preset: transcodePreset,
bitratePercent: transcodeBitratePercent,
minBitratePercent,
maxBitratePercent,
load: loadTranscodeSettings
} = useTranscodeSettings()
const presetItems = computed(() => [
{ value: 'copy', label: t('preferences.presetCopy') },
{ value: 'veryfast', label: t('preferences.presetSpeed') },
{ value: 'medium', label: t('preferences.presetBalanced') },
{ value: 'slow', label: t('preferences.presetQuality') },
{ value: 'compress', label: t('preferences.presetCompress') }
])
function onBitrateInput(event: Event) {
const value = Number((event.target as HTMLInputElement).value)
transcodeBitratePercent.value = Number.isFinite(value) ? value : 80
}
const copyFormatItems = computed(() => [
{ label: t('copy.url'), value: 'url' as const },
{ label: t('copy.markdown'), value: 'markdown' as const },
@@ -42,9 +87,14 @@ function onClientQualityInput(event: Event) {
clientWebpQuality.value = Number.isFinite(value) ? value : 80
}
function selectPreset(value: string) {
transcodePreset.value = value
}
onMounted(() => {
loadPreferences()
void loadUserSettings()
void loadTranscodeSettings()
})
</script>
@@ -78,8 +128,14 @@ onMounted(() => {
</div>
<div class="flex flex-1 flex-col justify-center p-5 sm:p-6">
<div class="grid gap-5 sm:grid-cols-3 sm:gap-6">
<div class="space-y-4">
<div
class="grid gap-5"
:class="gridClass"
>
<div
v-if="isImageKind"
class="space-y-4"
>
<h3 class="text-sm font-semibold">
{{ t('preferences.processing') }}
</h3>
@@ -137,7 +193,103 @@ onMounted(() => {
</div>
</div>
<div class="space-y-4">
<div
v-if="isVideoKind"
class="space-y-4"
>
<h3 class="text-sm font-semibold">
{{ t('preferences.videoProcessing') }}
</h3>
<label class="flex cursor-pointer items-start gap-2.5">
<UCheckbox
v-model="transcodeToHls"
class="mt-0.5"
/>
<span>
<span class="block text-sm">{{ t('preferences.transcodeToHls') }}</span>
<span class="mt-1 block text-xs leading-relaxed text-muted">
{{ t('preferences.transcodeToHlsHint') }}
</span>
</span>
</label>
<div
v-if="transcodeToHls"
class="ml-7 space-y-3 border-t border-default pt-4"
>
<div class="flex items-center gap-2 text-sm">
<span class="shrink-0">{{ t('preferences.transcodeConcurrency') }}</span>
<UInput
v-model.number="transcodeConcurrency"
type="number"
min="1"
:max="maxTranscodeConcurrency"
size="xs"
class="w-16 tabular-nums"
:disabled="!isAdmin"
/>
<span class="text-muted">{{ t('preferences.unitCount') }}</span>
<span class="text-xs text-muted">{{ t('preferences.concurrentHint') }}</span>
</div>
<div class="flex items-center gap-2 text-sm">
<span class="shrink-0">{{ t('preferences.transcodeThreads') }}</span>
<UInput
v-model.number="transcodeThreads"
type="number"
min="1"
:max="maxTranscodeThreads"
size="xs"
class="w-16 tabular-nums"
:disabled="!isAdmin"
/>
<span class="text-muted">{{ t('preferences.unitCount') }}</span>
<span class="text-xs text-muted">{{ t('preferences.threadsHint') }}</span>
</div>
<div class="flex items-center gap-2 text-sm">
<span class="shrink-0">{{ t('preferences.transcodeQuality') }}</span>
<div class="flex gap-1 rounded-lg border border-default p-0.5">
<UButton
v-for="item in presetItems"
:key="item.value"
size="xs"
class="flex-1 justify-center"
:variant="transcodePreset === item.value ? 'solid' : 'ghost'"
:color="transcodePreset === item.value ? 'primary' : 'neutral'"
:label="item.label"
:disabled="!isAdmin"
@click="selectPreset(item.value)"
/>
</div>
</div>
<div
class="flex items-center gap-2 text-sm"
:class="transcodePreset === 'compress' ? '' : 'opacity-40'"
>
<span class="shrink-0">{{ t('preferences.compressBitrate') }}</span>
<input
type="range"
:min="minBitratePercent"
:max="maxBitratePercent"
:value="transcodeBitratePercent"
:disabled="!isAdmin || transcodePreset !== 'compress'"
class="h-2 min-w-24 flex-1 cursor-pointer appearance-none rounded-full bg-default accent-primary disabled:opacity-40"
@input="onBitrateInput"
>
<span class="w-12 shrink-0 text-right tabular-nums text-muted">
{{ transcodeBitratePercent }}%
</span>
</div>
</div>
</div>
<div
v-if="isImageKind"
class="space-y-4"
>
<h3 class="text-sm font-semibold">
{{ t('preferences.webpQuality') }}
</h3>
+175
View File
@@ -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>
+752
View File
@@ -0,0 +1,752 @@
<script setup lang="ts">
import type { FileItem, FileListResponse } from '~/types/file'
import type { LibraryStatsData } from '~/types/media'
import { formatFileSize } from '~/composables/useFileSize'
const { isAuthenticated, handleAuthError } = useAuth()
const toast = useToast()
const { t, locale } = useI18n()
const { items: tagItems, fetchTags, batchUpdateTags } = useTags()
const items = ref<FileItem[]>([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(20)
const totalPages = ref(1)
const loading = ref(false)
const searchQuery = ref('')
const activeSearch = ref('')
const accessMode = ref<'public' | 'token'>('public')
const apiToken = ref('')
const stats = ref<LibraryStatsData | null>(null)
const selectedKeys = ref<Set<string>>(new Set())
const deleteModalOpen = ref(false)
const batchTagOpen = ref(false)
const deleteTargetKeys = ref<string[]>([])
const deleting = ref(false)
const previewOpen = ref(false)
const previewItem = ref<FileItem | null>(null)
const currentBackend = ref('all')
const currentSource = ref('all')
const backendOptions = ref<Array<{ id: string, name: string }>>([])
const activeTagIds = ref<number[]>([])
const activeTagMode = ref<'or' | 'and'>('or')
const activeUntaggedOnly = ref(false)
const { viewMode } = useLibraryView('video')
const selectedCount = computed(() => selectedKeys.value.size)
const backendItems = computed(() => [
{ label: t('stats.filterStorageAll'), value: 'all' },
...backendOptions.value.map(backend => ({ label: backend.name, value: backend.id }))
])
const sourceItems = computed(() => [
{ label: t('stats.filterSourceAll'), value: 'all' },
{ label: t('stats.sourceWeb'), value: 'web' },
{ label: t('stats.sourceApi'), value: 'api' }
])
const allSelected = computed(() =>
items.value.length > 0 && items.value.every(item => selectedKeys.value.has(item.key))
)
function withToken(raw: string | undefined): string {
if (!raw) return ''
if (accessMode.value !== 'token' || !apiToken.value) return raw
const separator = raw.includes('?') ? '&' : '?'
return `${raw}${separator}token=${encodeURIComponent(apiToken.value)}`
}
/** 转码完成后主直链指向 m3u8 播放列表 */
function videoLink(item: FileItem): string {
return withToken(item.hlsUrl ?? item.url)
}
function thumbLink(item: FileItem): string {
return withToken(item.thumbUrl)
}
function downloadUrl(item: FileItem): string {
return withToken(item.url)
}
/** 转码完成后按 HLS 播放列表展示名称 */
function displayName(item: FileItem): string {
if (!item.hlsUrl) return item.originalName
const dot = item.originalName.lastIndexOf('.')
const base = dot > 0 ? item.originalName.slice(0, dot) : item.originalName
return `${base}.m3u8`
}
function uploadedLabel(item: FileItem): string {
try {
return new Date(item.uploadedAt).toLocaleString(locale.value, { hour12: false })
} catch {
return item.uploadedAt
}
}
async function loadApiToken() {
try {
const data = await $fetch<{ apiUploadToken: string }>('/api/user/api-token', {
credentials: 'include'
})
apiToken.value = data.apiUploadToken ?? ''
} catch {
apiToken.value = ''
}
}
async function loadBackendOptions() {
try {
const data = await $fetch<{ backends: Array<{ id: string, name: string }> }>(
'/api/storage-backends',
{ credentials: 'include' }
)
backendOptions.value = data.backends ?? []
} catch (error: unknown) {
handleAuthError(error)
}
}
async function fetchStats() {
if (!isAuthenticated.value) return
try {
stats.value = await $fetch<LibraryStatsData>('/api/library/stats', {
credentials: 'include',
query: { kind: 'video' }
})
} catch (error: unknown) {
handleAuthError(error)
}
}
async function fetchList(targetPage = page.value) {
if (!isAuthenticated.value) return
loading.value = true
try {
const response = await $fetch<FileListResponse>('/api/files', {
credentials: 'include',
query: {
limit: pageSize.value,
page: targetPage,
kind: 'video',
...(activeSearch.value ? { q: activeSearch.value } : {}),
...(currentBackend.value !== 'all' ? { backendId: currentBackend.value } : {}),
...(currentSource.value !== 'all' ? { uploadSource: currentSource.value } : {}),
...(activeTagIds.value.length ? { tagIds: activeTagIds.value.join(',') } : {}),
...(activeUntaggedOnly.value ? { untagged: '1' } : {}),
...(activeTagMode.value === 'and' ? { tagMode: 'and' } : {})
}
})
items.value = response.items
total.value = response.total
page.value = response.page
totalPages.value = response.totalPages
accessMode.value = response.accessMode
const visible = new Set(response.items.map(item => item.key))
selectedKeys.value = new Set(
[...selectedKeys.value].filter(key => visible.has(key))
)
if (response.accessMode === 'token' && !apiToken.value) {
await loadApiToken()
}
} catch (error: unknown) {
handleAuthError(error)
if (isAuthenticated.value) {
toast.add({ title: t('files.loadFailed'), color: 'error' })
}
} finally {
loading.value = false
}
}
async function refresh() {
await Promise.all([fetchList(1), fetchStats(), fetchTags()])
}
async function submitSearch() {
if (!isAuthenticated.value) return
activeSearch.value = searchQuery.value.trim()
await fetchList(1)
}
async function handleBackendChange(value: string) {
currentBackend.value = value
selectedKeys.value = new Set()
await fetchList(1)
}
async function handleSourceChange(value: string) {
currentSource.value = value
selectedKeys.value = new Set()
await fetchList(1)
}
async function handleTagIdsChange(tagIds: number[]) {
activeTagIds.value = tagIds
selectedKeys.value = new Set()
await fetchList(1)
}
async function handleTagModeChange(tagMode: 'or' | 'and') {
activeTagMode.value = tagMode
await fetchList(1)
}
async function handleUntaggedChange(untaggedOnly: boolean) {
activeUntaggedOnly.value = untaggedOnly
selectedKeys.value = new Set()
await fetchList(1)
}
async function resetFilters() {
searchQuery.value = ''
activeSearch.value = ''
currentBackend.value = 'all'
currentSource.value = 'all'
activeTagIds.value = []
activeTagMode.value = 'or'
activeUntaggedOnly.value = false
selectedKeys.value = new Set()
await fetchList(1)
}
function toggleSelected(key: string, value: boolean) {
const next = new Set(selectedKeys.value)
if (value) next.add(key)
else next.delete(key)
selectedKeys.value = next
}
function toggleSelectAll() {
selectedKeys.value = allSelected.value
? new Set()
: new Set(items.value.map(item => item.key))
}
function clearSelection() {
selectedKeys.value = new Set()
}
function setViewMode(mode: 'grid' | 'list') {
viewMode.value = mode
}
function openBatchTags() {
batchTagOpen.value = true
}
async function confirmBatchTags(tagIds: number[], action: 'add' | 'remove') {
const keys = [...selectedKeys.value]
if (!keys.length || !tagIds.length) return
try {
await batchUpdateTags(keys, tagIds, action)
batchTagOpen.value = false
selectedKeys.value = new Set()
toast.add({ title: t('tags.batchSuccess'), color: 'success' })
await Promise.all([fetchList(1), fetchStats(), fetchTags(true)])
} catch (error: unknown) {
handleAuthError(error)
toast.add({ title: t('tags.batchFailed'), color: 'error' })
}
}
function openPreview(item: FileItem) {
previewItem.value = item
previewOpen.value = true
}
onMounted(() => {
void loadBackendOptions()
})
function requestDelete(item: FileItem) {
if (!isAuthenticated.value) return
deleteTargetKeys.value = [item.key]
deleteModalOpen.value = true
}
function requestBatchDelete() {
if (!isAuthenticated.value) return
if (!selectedCount.value) {
toast.add({ title: t('library.selectFirst'), color: 'warning' })
return
}
deleteTargetKeys.value = [...selectedKeys.value]
deleteModalOpen.value = true
}
async function confirmDelete() {
const keys = [...deleteTargetKeys.value]
if (!keys.length || !isAuthenticated.value) return
deleting.value = true
try {
if (keys.length === 1) {
await $fetch('/api/files', {
method: 'DELETE',
credentials: 'include',
query: { key: keys[0] }
})
} else {
const response = await $fetch<{ deleted: string[], failed: unknown[] }>(
'/api/files/batch-delete',
{ method: 'POST', credentials: 'include', body: { keys } }
)
if (response.failed.length) {
toast.add({
title: t('library.deletePartialFail', { n: response.failed.length }),
color: 'warning'
})
}
}
toast.add({ title: t('library.deleted', { n: keys.length }), color: 'success' })
deleteModalOpen.value = false
deleteTargetKeys.value = []
selectedKeys.value = new Set()
await refresh()
} catch (error: unknown) {
handleAuthError(error)
if (isAuthenticated.value) {
toast.add({ title: t('files.deleteFailed'), color: 'error' })
}
} finally {
deleting.value = false
}
}
async function handlePageChange(targetPage: number) {
selectedKeys.value = new Set()
await fetchList(targetPage)
}
async function handlePageSizeChange(size: number) {
pageSize.value = size
selectedKeys.value = new Set()
await fetchList(1)
}
defineExpose({ refresh })
</script>
<template>
<div class="space-y-6">
<div class="flex items-start justify-between gap-3">
<div class="min-w-0">
<h1 class="text-2xl font-semibold tracking-tight">
{{ t('library.video.title') }}
</h1>
<p class="text-sm text-muted">
{{ t('library.video.subtitle') }}
</p>
</div>
<UButton
icon="i-lucide-refresh-cw"
variant="ghost"
color="neutral"
size="sm"
class="mt-0.5 shrink-0"
:aria-label="t('common.refresh')"
:loading="loading"
@click="refresh"
/>
</div>
<LibraryStatsPanel
kind="video"
:stats="stats"
:loading="loading"
/>
<section class="space-y-3">
<div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
<div class="flex items-center gap-2 text-sm">
<UCheckbox
:model-value="allSelected"
:disabled="!items.length"
@update:model-value="toggleSelectAll"
/>
<span class="text-muted">
{{ t('library.selectedCount', { n: selectedCount }) }}
</span>
<UButton
v-if="selectedCount > 0"
variant="link"
color="primary"
size="xs"
:label="t('library.clearSelection')"
@click="clearSelection"
/>
</div>
<div class="flex flex-wrap items-center gap-2">
<UInput
v-model="searchQuery"
icon="i-lucide-search"
:placeholder="t('library.searchPlaceholder')"
size="sm"
class="w-44"
@keydown.enter.prevent="submitSearch"
/>
<USelect
:model-value="currentBackend"
:items="backendItems"
value-key="value"
size="sm"
class="w-32"
:aria-label="t('stats.filterStorageAll')"
@update:model-value="handleBackendChange"
/>
<USelect
:model-value="currentSource"
:items="sourceItems"
value-key="value"
size="sm"
class="w-28"
:aria-label="t('stats.filterSourceAll')"
@update:model-value="handleSourceChange"
/>
<TagFilterSelect
:model-value="activeTagIds"
:tag-mode="activeTagMode"
:untagged-only="activeUntaggedOnly"
:tags="tagItems"
:disabled="loading"
@update:model-value="handleTagIdsChange"
@update:tag-mode="handleTagModeChange"
@update:untagged-only="handleUntaggedChange"
/>
<UButton
icon="i-lucide-search"
size="sm"
:label="t('common.search')"
:loading="loading"
@click="submitSearch"
/>
<UButton
icon="i-lucide-rotate-ccw"
variant="outline"
color="neutral"
size="sm"
:label="t('library.reset')"
@click="resetFilters"
/>
<UButton
v-if="selectedCount > 0"
icon="i-lucide-tags"
variant="outline"
color="primary"
size="sm"
:disabled="!selectedCount || loading"
:label="t('tags.batchAdd')"
@click="openBatchTags"
/>
<UButton
icon="i-lucide-trash-2"
variant="outline"
color="error"
size="sm"
:disabled="!selectedCount || loading"
:label="t('library.batchDelete')"
@click="requestBatchDelete"
/>
<div class="flex gap-0.5 rounded-lg border border-default p-0.5">
<UButton
icon="i-lucide-layout-grid"
size="xs"
:variant="viewMode === 'grid' ? 'solid' : 'ghost'"
:color="viewMode === 'grid' ? 'primary' : 'neutral'"
:aria-label="t('stats.viewGrid')"
@click="setViewMode('grid')"
/>
<UButton
icon="i-lucide-list"
size="xs"
:variant="viewMode === 'list' ? 'solid' : 'ghost'"
:color="viewMode === 'list' ? 'primary' : 'neutral'"
:aria-label="t('stats.viewList')"
@click="setViewMode('list')"
/>
</div>
</div>
</div>
<div
v-if="loading && !items.length"
class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
>
<USkeleton
v-for="n in 8"
:key="n"
class="aspect-[4/3] rounded-xl"
/>
</div>
<p
v-else-if="!items.length"
class="rounded-lg border border-default py-10 text-center text-sm text-muted"
>
{{ activeSearch ? t('library.searchEmpty') : t('library.video.empty') }}
</p>
<div
v-else-if="viewMode === 'grid'"
class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
>
<VideoCard
v-for="item in items"
:key="item.key"
:item="item"
:link="videoLink(item)"
:thumb-link="thumbLink(item)"
:download-link="downloadUrl(item)"
selectable
:selected="selectedKeys.has(item.key)"
@update:selected="toggleSelected(item.key, $event)"
@play="openPreview(item)"
@delete="requestDelete(item)"
/>
</div>
<div
v-else
class="overflow-hidden rounded-xl border border-default bg-default"
>
<div class="overflow-x-auto">
<table class="min-w-full text-xs">
<thead class="border-b border-default bg-elevated/40 text-muted">
<tr>
<th class="w-10 px-3 py-2.5 text-left font-medium">
<UCheckbox
:model-value="allSelected"
:aria-label="t('stats.selectAll')"
@update:model-value="toggleSelectAll"
/>
</th>
<th class="min-w-[14rem] px-3 py-2.5 text-left font-medium">
{{ t('stats.colFilename') }}
</th>
<th class="hidden w-24 px-3 py-2.5 text-left font-medium sm:table-cell">
{{ t('stats.colSource') }}
</th>
<th class="w-20 px-3 py-2.5 text-left font-medium">
{{ t('stats.colSize') }}
</th>
<th class="hidden w-28 px-3 py-2.5 text-left font-medium md:table-cell">
{{ t('stats.colType') }}
</th>
<th class="hidden w-40 px-3 py-2.5 text-left font-medium lg:table-cell">
{{ t('stats.colUploadedAt') }}
</th>
<th class="hidden min-w-[9rem] px-3 py-2.5 text-left font-medium md:table-cell">
{{ t('tags.column') }}
</th>
<th class="w-32 px-3 py-2.5 text-right font-medium">
{{ t('stats.colActions') }}
</th>
</tr>
</thead>
<tbody class="divide-y divide-default">
<tr
v-for="item in items"
:key="item.key"
class="transition-colors hover:bg-elevated/50"
:class="selectedKeys.has(item.key) ? 'bg-primary/5' : ''"
>
<td class="px-3 py-2">
<UCheckbox
:model-value="selectedKeys.has(item.key)"
@update:model-value="toggleSelected(item.key, $event === true)"
/>
</td>
<td class="px-3 py-2.5">
<div class="flex min-w-0 items-center gap-3">
<button
type="button"
class="relative aspect-video w-12 shrink-0 overflow-hidden rounded-md border border-default bg-muted"
:aria-label="t('library.play')"
@click="openPreview(item)"
>
<img
v-if="item.thumbUrl"
:src="thumbLink(item)"
:alt="displayName(item)"
loading="lazy"
class="size-full object-cover"
>
<UIcon
v-else
name="i-lucide-film"
class="size-5 text-dimmed"
/>
</button>
<p
class="min-w-0 flex-1 truncate text-highlighted"
:title="displayName(item)"
>
{{ displayName(item) }}
</p>
<UBadge
v-if="item.hlsUrl"
color="success"
variant="subtle"
size="xs"
class="shrink-0"
>
m3u8
</UBadge>
<UBadge
v-else-if="item.transcodeStatus === 'failed'"
color="error"
variant="subtle"
size="xs"
class="shrink-0"
>
{{ t('library.transcodeFailed') }}
</UBadge>
</div>
</td>
<td class="hidden px-3 py-2 sm:table-cell">
<span
v-if="item.uploadSource"
class="inline-flex items-center gap-1 rounded-md border border-default px-1.5 py-0.5 text-[11px] leading-4 text-muted"
>
<UIcon
:name="item.uploadSource === 'api' ? 'i-lucide-code-xml' : 'i-lucide-globe'"
class="size-3 shrink-0"
/>
{{ item.uploadSource === 'api' ? t('stats.tagApi') : t('stats.tagWeb') }}
</span>
<span
v-else
class="text-muted"
>—</span>
</td>
<td class="px-3 py-2 tabular-nums text-muted">
{{ formatFileSize(item.size) }}
</td>
<td class="hidden px-3 py-2 md:table-cell">
<span
v-if="item.storage"
class="inline-flex items-center gap-1 rounded-md border border-default px-1.5 py-0.5 text-[11px] leading-4 text-muted"
>
<UIcon
:name="item.storage.type === 'local' ? 'i-lucide-hard-drive' : 'i-lucide-cloud'"
class="size-3 shrink-0"
/>
{{ item.storage.name }}
</span>
<span
v-else
class="text-muted"
>—</span>
</td>
<td class="hidden px-3 py-2 text-muted lg:table-cell">
{{ uploadedLabel(item) }}
</td>
<td class="hidden px-3 py-2 md:table-cell">
<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>
<span
v-else
class="text-muted"
>{{ t('tags.unlabeled') }}</span>
</td>
<td class="px-3 py-2">
<div class="flex items-center justify-end gap-1">
<CopyButton
icon-only
icon="i-lucide-link"
:label="t('library.copyVideoLink')"
:value="videoLink(item)"
/>
<CopyButton
icon-only
icon="i-lucide-image"
:label="t('library.copyThumbLink')"
:value="thumbLink(item)"
/>
<UButton
v-if="!item.sourceDeleted"
size="xs"
variant="ghost"
color="neutral"
icon="i-lucide-download"
:to="downloadUrl(item)"
target="_blank"
rel="noopener"
:aria-label="t('files.download')"
/>
<UButton
size="xs"
variant="ghost"
color="error"
icon="i-lucide-trash-2"
:aria-label="t('common.delete')"
@click="requestDelete(item)"
/>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<PaginationBar
v-if="!loading && total > 0"
:page="page"
:total-pages="totalPages"
:total="total"
:page-size="pageSize"
unit=""
:loading="loading"
@update:page="handlePageChange"
@update:page-size="handlePageSizeChange"
/>
</section>
<DeleteConfirmModal
v-model:open="deleteModalOpen"
:count="deleteTargetKeys.length"
:loading="deleting"
kind="video"
@confirm="confirmDelete"
/>
<BatchTagModal
v-model:open="batchTagOpen"
:tags="tagItems"
:selected-count="selectedCount"
@confirm="confirmBatchTags"
/>
<VideoPreviewModal
v-model:open="previewOpen"
:item="previewItem"
:link="previewItem ? videoLink(previewItem) : ''"
:thumb-link="previewItem ? thumbLink(previewItem) : ''"
:download-link="previewItem ? downloadUrl(previewItem) : ''"
:deleting="deleting"
@delete="previewItem && requestDelete(previewItem)"
/>
</div>
</template>
+522
View File
@@ -0,0 +1,522 @@
<script setup lang="ts">
import type { FileItem } from '~/types/file'
import type { CopyFormat } from '~/composables/useUploadPreferences'
const props = withDefaults(defineProps<{
open: boolean
item: FileItem | null
/** 已按访问模式拼接好的视频直链 */
link: string
/** 缩略图直链 */
thumbLink: string
/** 原始视频下载地址 */
downloadLink: string
deleting?: boolean
allowDelete?: boolean
}>(), {
allowDelete: true
})
const emit = defineEmits<{
'update:open': [value: boolean]
'delete': []
}>()
const toast = useToast()
const { formatFileSize } = useFileSize()
const { t, locale } = useI18n()
const { copyFormat } = useUploadPreferences('video')
const videoEl = ref<HTMLVideoElement | null>(null)
const copyingUrl = ref(false)
const embedFormat = ref<CopyFormat>('url')
let hlsInstance: { destroy: () => void } | null = null
const embedFormatItems = computed(() => [
{ label: t('copy.url'), value: 'url' as const },
{ label: t('copy.markdown'), value: 'markdown' as const },
{ label: t('copy.html'), value: 'html' as const },
{ label: t('copy.bbcode'), value: 'bbcode' as const }
])
/** 转码完成后按 HLS 播放列表展示 */
const displayName = computed(() => {
const item = props.item
if (!item) return '—'
if (!item.hlsUrl) return item.originalName
const dot = item.originalName.lastIndexOf('.')
const base = dot > 0 ? item.originalName.slice(0, dot) : item.originalName
return `${base}.m3u8`
})
const uploadedLabel = computed(() => {
const item = props.item
if (!item) return '—'
try {
return new Date(item.uploadedAt).toLocaleString(locale.value, { hour12: false })
} catch {
return item.uploadedAt
}
})
const sizeLabel = computed(() => {
const item = props.item
if (!item) return '—'
return t('image.previewSizeDetail', {
size: formatFileSize(item.size),
bytes: item.size.toLocaleString(locale.value)
})
})
const transcodeLabel = computed(() => {
const item = props.item
if (!item) return '—'
switch (item.transcodeStatus) {
case 'pending':
return t('library.transcodePending')
case 'running':
return `${t('library.transcoding')} ${item.transcodeProgress ?? 0}%`
case 'done':
return t('library.video.transcodeDone')
case 'failed':
return t('library.transcodeFailed')
default:
return t('library.video.transcodeNone')
}
})
/** 转码完成后条目实际代表 HLS,路径与类型都按播放列表展示 */
const storagePath = computed(() => props.item?.hlsKey ?? props.item?.key ?? '—')
const contentTypeLabel = computed(() =>
props.item?.hlsKey ? 'application/vnd.apple.mpegurl' : props.item?.contentType ?? '—'
)
const previewValue = computed(() => {
if (!props.item) return ''
switch (embedFormat.value) {
case 'markdown':
return `[${displayName.value}](${props.link})`
case 'html':
return `<a href="${props.link}">${displayName.value}</a>`
case 'bbcode':
return `[url=${props.link}]${displayName.value}[/url]`
default:
return props.link
}
})
const copySuccessTitle = computed(() => {
switch (embedFormat.value) {
case 'markdown':
return t('copy.copiedMarkdown')
case 'html':
return t('copy.copiedHtml')
case 'bbcode':
return t('copy.copiedBbcode')
default:
return t('copy.copiedUrl')
}
})
const storageIcon = computed(() =>
props.item?.storage?.type === 'local' ? 'i-lucide-hard-drive' : 'i-lucide-cloud'
)
const uploadSourceTag = computed(() => {
switch (props.item?.uploadSource) {
case 'web':
return t('stats.tagWeb')
case 'api':
return t('stats.tagApi')
default:
return null
}
})
const uploadSourceIcon = computed(() => {
switch (props.item?.uploadSource) {
case 'web':
return 'i-lucide-globe'
case 'api':
return 'i-lucide-code-xml'
default:
return null
}
})
function destroyPlayer() {
if (hlsInstance) {
hlsInstance.destroy()
hlsInstance = null
}
if (videoEl.value) {
videoEl.value.removeAttribute('src')
videoEl.value.load()
}
}
async function attachPlayerSource() {
const item = props.item
const element = videoEl.value
if (!item || !element) return
element.src = props.link
if (!item.hlsUrl || element.canPlayType('application/vnd.apple.mpegurl')) return
const { default: Hls } = await import('hls.js')
if (!Hls.isSupported()) return
const hls = new Hls()
hls.on(Hls.Events.ERROR, (_event, data) => {
if (!data.fatal) return
// 切片缺失(例如从备份恢复)时回退播放原视频
hls.destroy()
hlsInstance = null
element.src = props.downloadLink
})
hls.loadSource(props.link)
hls.attachMedia(element)
hlsInstance = hls
}
watch(() => props.open, async (open) => {
if (!open) {
destroyPlayer()
return
}
embedFormat.value = copyFormat.value
await nextTick()
await attachPlayerSource()
})
onUnmounted(destroyPlayer)
function selectEmbedFormat(value: CopyFormat) {
embedFormat.value = value
copyFormat.value = value
}
async function copyText(text: string, successTitle: string) {
if (!text) return
try {
if (navigator.clipboard?.writeText) {
await navigator.clipboard.writeText(text)
toast.add({ title: successTitle, color: 'success' })
return
}
} catch {
// 回退方案见下
}
const textarea = document.createElement('textarea')
textarea.value = text
textarea.setAttribute('readonly', '')
textarea.style.position = 'fixed'
textarea.style.left = '-9999px'
document.body.appendChild(textarea)
textarea.select()
let ok = false
try {
ok = document.execCommand('copy')
} catch {
ok = false
} finally {
document.body.removeChild(textarea)
}
toast.add({
title: ok ? successTitle : t('copy.failedManual'),
color: ok ? 'success' : 'error'
})
}
async function copyLink() {
if (!props.link || copyingUrl.value) return
copyingUrl.value = true
try {
await copyText(props.link, t('copy.copiedUrl'))
} finally {
copyingUrl.value = false
}
}
function openInNewTab() {
if (!props.link) return
window.open(props.link, '_blank', 'noopener,noreferrer')
}
function downloadOriginal() {
if (!props.downloadLink) return
const link = document.createElement('a')
link.href = props.downloadLink
link.download = props.item?.originalName || 'video'
link.rel = 'noopener'
link.click()
}
</script>
<template>
<UModal
:open="open && !!item"
:title="t('library.video.previewTitle')"
:description="t('library.video.previewSubtitle')"
:ui="{ content: 'max-w-5xl' }"
@update:open="emit('update:open', $event)"
>
<template
v-if="item"
#body
>
<div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)] lg:items-start">
<div class="flex items-center justify-center overflow-hidden rounded-xl border border-default bg-black p-2">
<video
ref="videoEl"
controls
autoplay
playsinline
class="max-h-[min(60vh,24rem)] w-full rounded-lg bg-black"
/>
</div>
<div class="flex min-w-0 flex-col gap-5">
<dl class="divide-y divide-default text-sm">
<div class="flex gap-4 py-2.5 first:pt-0">
<dt class="w-20 shrink-0 text-muted">
{{ t('image.previewOriginalName') }}
</dt>
<dd class="min-w-0 flex-1 break-all font-medium">
{{ displayName }}
</dd>
</div>
<div class="flex gap-4 py-2.5">
<dt class="w-20 shrink-0 text-muted">
{{ t('image.previewUploadedAt') }}
</dt>
<dd class="min-w-0 flex-1">
{{ uploadedLabel }}
</dd>
</div>
<div class="flex gap-4 py-2.5">
<dt class="w-20 shrink-0 text-muted">
{{ t('image.previewSize') }}
</dt>
<dd class="min-w-0 flex-1">
{{ sizeLabel }}
</dd>
</div>
<div class="flex gap-4 py-2.5">
<dt class="w-20 shrink-0 text-muted">
{{ t('image.previewContentType') }}
</dt>
<dd class="min-w-0 flex-1">
{{ contentTypeLabel }}
</dd>
</div>
<div class="flex gap-4 py-2.5">
<dt class="w-20 shrink-0 text-muted">
{{ t('library.video.previewTranscode') }}
</dt>
<dd class="min-w-0 flex-1">
<UBadge
:color="item.hlsUrl ? 'success' : item.transcodeStatus === 'failed' ? 'error' : 'neutral'"
variant="subtle"
size="xs"
>
{{ transcodeLabel }}
</UBadge>
</dd>
</div>
<div
v-if="item.storage"
class="flex gap-4 py-2.5"
>
<dt class="w-20 shrink-0 text-muted">
{{ t('image.previewStorage') }}
</dt>
<dd class="min-w-0 flex-1">
<span class="inline-flex items-center gap-1.5">
<UIcon
:name="storageIcon"
class="size-3.5 shrink-0 text-muted"
/>
{{ item.storage.name }}
</span>
</dd>
</div>
<div
v-if="uploadSourceTag"
class="flex gap-4 py-2.5"
>
<dt class="w-20 shrink-0 text-muted">
{{ t('image.previewUploadSource') }}
</dt>
<dd class="min-w-0 flex-1">
<span
v-if="uploadSourceIcon"
class="inline-flex items-center gap-1 rounded-md border border-default px-2 py-0.5 text-xs text-muted"
>
<UIcon
:name="uploadSourceIcon"
class="size-3 shrink-0"
/>
{{ uploadSourceTag }}
</span>
</dd>
</div>
<div
v-if="item.owner"
class="flex gap-4 py-2.5"
>
<dt class="w-20 shrink-0 text-muted">
{{ t('image.previewOwner') }}
</dt>
<dd class="min-w-0 flex-1">
{{ item.owner.username }}
</dd>
</div>
<div class="flex gap-4 py-2.5">
<dt class="w-20 shrink-0 text-muted">
{{ t('tags.column') }}
</dt>
<dd class="min-w-0 flex-1">
<div
v-if="item.tags?.length"
class="flex flex-wrap gap-1.5"
>
<TagBadge
v-for="tag in item.tags"
:key="tag.id"
:tag="tag"
/>
</div>
<span
v-else
class="inline-flex rounded-md border border-dashed border-default px-2 py-0.5 text-xs text-muted"
>
{{ t('tags.unlabeled') }}
</span>
</dd>
</div>
<div class="flex gap-4 py-2.5 last:pb-0">
<dt class="w-20 shrink-0 text-muted">
{{ t('library.video.previewKey') }}
</dt>
<dd class="flex min-w-0 flex-1 items-start gap-2">
<span class="min-w-0 flex-1 break-all font-mono text-xs text-dimmed">
{{ storagePath }}
</span>
<CopyButton
icon="i-lucide-copy"
icon-only
variant="ghost"
color="neutral"
class="shrink-0"
:label="t('common.copy')"
:value="storagePath"
:success-title="t('copy.copied')"
/>
</dd>
</div>
</dl>
<div class="border-t border-default pt-4">
<p class="mb-2.5 text-sm font-medium">
{{ t('image.previewLinks') }}
</p>
<div class="flex gap-1 rounded-lg border border-default bg-default p-0.5">
<UButton
v-for="option in embedFormatItems"
:key="option.value"
size="xs"
class="flex-1 justify-center"
:variant="embedFormat === option.value ? 'solid' : 'ghost'"
:color="embedFormat === option.value ? 'primary' : 'neutral'"
:label="option.label"
@click="selectEmbedFormat(option.value)"
/>
</div>
<div class="mt-2 flex items-center gap-2">
<UInput
:model-value="previewValue"
readonly
size="sm"
class="min-w-0 flex-1 font-mono text-xs"
/>
<CopyButton
:label="t('common.copy')"
:value="previewValue"
:success-title="copySuccessTitle"
/>
</div>
<div
v-if="thumbLink"
class="mt-3"
>
<p class="mb-1.5 text-xs text-muted">
{{ t('library.video.previewThumbLink') }}
</p>
<div class="flex items-center gap-2">
<UInput
:model-value="thumbLink"
readonly
size="sm"
class="min-w-0 flex-1 font-mono text-xs"
/>
<CopyButton
:label="t('common.copy')"
:value="thumbLink"
:success-title="t('copy.copiedUrl')"
/>
</div>
</div>
</div>
</div>
</div>
</template>
<template
v-if="item"
#footer
>
<div class="flex w-full flex-wrap justify-end gap-1.5">
<UButton
:label="t('image.previewOpen')"
icon="i-lucide-external-link"
color="neutral"
variant="outline"
size="sm"
@click="openInNewTab"
/>
<UButton
v-if="!item.sourceDeleted"
:label="t('image.previewDownload')"
icon="i-lucide-download"
color="neutral"
variant="outline"
size="sm"
@click="downloadOriginal"
/>
<UButton
:label="t('image.previewCopyLink')"
icon="i-lucide-link"
color="primary"
size="sm"
:loading="copyingUrl"
@click="copyLink"
/>
<UButton
v-if="allowDelete"
:label="t('common.delete')"
icon="i-lucide-trash-2"
color="error"
variant="outline"
size="sm"
:loading="deleting"
@click="emit('delete')"
/>
</div>
</template>
</UModal>
</template>
@@ -7,7 +7,8 @@ defineProps<{
checking: boolean
}>()
const emit = defineEmits<{
// 「检查更新」已停用(改动较大,与上游版本号已不对应),暂时保留事件定义
defineEmits<{
checkUpdate: []
}>()
@@ -28,6 +29,7 @@ const { t } = useI18n()
<span class="text-sm font-medium tabular-nums text-highlighted">
v{{ appVersion }}
</span>
<!-- 检查更新功能已停用,需要时恢复下面这段
<UBadge
v-if="updateAvailable && latestVersion"
color="warning"
@@ -63,6 +65,7 @@ const { t } = useI18n()
>
{{ t('settings.viewReleases') }}
</a>
-->
</div>
</div>
</template>
+40
View File
@@ -0,0 +1,40 @@
const STORAGE_KEY = 'pichost.library-view'
export type LibraryViewKind = 'image' | 'video' | 'file'
export type LibraryViewMode = 'grid' | 'list'
function storageKeyFor(kind: LibraryViewKind): string {
return `${STORAGE_KEY}.${kind}`
}
/**
* 图库 / 视频库 / 文件库各自的显示方式。
* 三个库分别记住(互不影响),且页面切换后保持,不用重新点。
*/
export function useLibraryView(kind: LibraryViewKind = 'image') {
const viewMode = useState<LibraryViewMode>(`library-view-mode-${kind}`, () => 'grid')
const loaded = useState(`library-view-loaded-${kind}`, () => false)
if (import.meta.client && !loaded.value) {
try {
const stored = localStorage.getItem(storageKeyFor(kind))
if (stored === 'grid' || stored === 'list') {
viewMode.value = stored
}
} catch {
// 读取失败保持默认
}
loaded.value = true
}
watch(viewMode, (value) => {
if (!import.meta.client) return
try {
localStorage.setItem(storageKeyFor(kind), value)
} catch {
// 写入失败不影响使用
}
})
return { viewMode }
}
+286
View File
@@ -0,0 +1,286 @@
import type { UploadProgressItem } from '~/types/image'
import type { FileItem, FileListResponse, FileUploadResponse } from '~/types/file'
import type { CopyFormat, UploadMediaKind } from './useUploadPreferences'
import { isUnauthorizedError } from './useAuth'
const MAX_FILES = 10
function buildCopyText(item: FileItem, format: CopyFormat): string {
switch (format) {
case 'url':
return item.url
case 'html':
return `<a href="${item.url}">${item.originalName}</a>`
case 'bbcode':
return `[url=${item.url}]${item.originalName}[/url]`
default:
return `[${item.originalName}](${item.url})`
}
}
async function copyToClipboard(text: string): Promise<boolean> {
try {
if (navigator.clipboard?.writeText) {
await navigator.clipboard.writeText(text)
return true
}
} catch {
// 内网 http:// 等非安全上下文继续走回退方案
}
try {
const textarea = document.createElement('textarea')
textarea.value = text
textarea.style.position = 'fixed'
textarea.style.left = '-9999px'
document.body.appendChild(textarea)
textarea.select()
const ok = document.execCommand('copy')
document.body.removeChild(textarea)
return ok
} catch {
return false
}
}
/** 视频床 / 文件床的上传:走文件床接口,偏好按类型独立 */
export function useMediaUpload(kind: UploadMediaKind) {
const toast = useToast()
const { t } = useI18n()
const {
autoCopyMarkdown,
copyFormat,
transcodeToHls,
loadPreferences
} = useUploadPreferences(kind)
const uploading = ref(false)
const progressItems = ref<UploadProgressItem[]>([])
const lastResult = ref<FileUploadResponse | null>(null)
/** 本次会话内上传的条目,页面刷新后清空 */
const sessionItems = ref<FileItem[]>([])
const accessMode = ref<'public' | 'token'>('public')
const apiToken = ref('')
const endpoint = kind === 'video' ? '/api/videos/upload' : '/api/files/upload'
loadPreferences()
async function loadApiToken() {
try {
const data = await $fetch<{ apiUploadToken: string }>('/api/user/api-token', {
credentials: 'include'
})
apiToken.value = data.apiUploadToken ?? ''
} catch {
apiToken.value = ''
}
}
/** Token 模式下复制出的链接需要带上令牌 */
function linkUrl(item: FileItem): string {
// 转码完成后优先给出 m3u8 播放地址
const base = item.hlsUrl ?? item.url
if (accessMode.value !== 'token' || !apiToken.value) return base
const separator = base.includes('?') ? '&' : '?'
return `${base}${separator}token=${encodeURIComponent(apiToken.value)}`
}
/** 封面缩略图地址(同样按访问模式拼接) */
function thumbLink(item: FileItem): string {
const base = item.thumbUrl
if (!base) return ''
if (accessMode.value !== 'token' || !apiToken.value) return base
const separator = base.includes('?') ? '&' : '?'
return `${base}${separator}token=${encodeURIComponent(apiToken.value)}`
}
let statusTimer: ReturnType<typeof setInterval> | null = null
function stopStatusPolling() {
if (statusTimer) {
clearInterval(statusTimer)
statusTimer = null
}
}
function hasPendingTranscode(): boolean {
return sessionItems.value.some(
item => item.transcodeStatus === 'pending' || item.transcodeStatus === 'running'
)
}
/** 转码是异步的,轮询列表把状态与 m3u8 地址同步回来 */
async function refreshTranscodeStatus() {
if (!hasPendingTranscode()) {
stopStatusPolling()
return
}
try {
const [active, finished] = await Promise.all([
$fetch<FileListResponse>('/api/files', {
credentials: 'include',
query: { kind: 'video', limit: 100, processing: '1' }
}),
$fetch<FileListResponse>('/api/files', {
credentials: 'include',
query: { kind: 'video', limit: 100 }
})
])
const latest = new Map(
[...active.items, ...finished.items].map(item => [item.key, item])
)
sessionItems.value = sessionItems.value.map(item => latest.get(item.key) ?? item)
} catch {
// 轮询失败保持现状,下个周期重试
}
if (!hasPendingTranscode()) stopStatusPolling()
}
function startStatusPolling() {
if (kind !== 'video' || statusTimer) return
statusTimer = setInterval(() => {
void refreshTranscodeStatus()
}, 1000)
}
onUnmounted(stopStatusPolling)
/** 刷新或换页后仍要显示还在排队/转码中的视频 */
async function loadActiveTranscodes() {
if (kind !== 'video') return
try {
const response = await $fetch<FileListResponse>('/api/files', {
credentials: 'include',
query: { kind: 'video', limit: 100, processing: '1' }
})
if (!response.items.length) return
const known = new Set(sessionItems.value.map(item => item.key))
const missing = response.items.filter(item => !known.has(item.key))
const latest = new Map(response.items.map(item => [item.key, item]))
sessionItems.value = [
...missing,
...sessionItems.value.map(item => latest.get(item.key) ?? item)
]
startStatusPolling()
} catch {
// 拉取失败时保持现状
}
}
async function uploadFiles(files: File[]) {
if (!files.length || uploading.value) return
if (files.length > MAX_FILES) {
toast.add({ title: t('files.maxFiles', { n: MAX_FILES }), color: 'warning' })
return
}
uploading.value = true
progressItems.value = files.map(file => ({
name: file.name,
status: 'pending',
progress: 0
}))
try {
const formData = new FormData()
for (const file of files) {
formData.append('files', file, file.name)
}
if (kind === 'video' && transcodeToHls.value) {
formData.append('transcode', '1')
}
progressItems.value = progressItems.value.map(item => ({
...item,
status: 'uploading',
progress: 50
}))
const response = await $fetch<FileUploadResponse>(endpoint, {
method: 'POST',
body: formData
})
lastResult.value = response
accessMode.value = response.accessMode
if (response.accessMode === 'token' && !apiToken.value) {
await loadApiToken()
}
progressItems.value = files.map((file) => {
const failed = response.errors.find(error => error.name === file.name)
return {
name: file.name,
status: failed ? 'error' : 'success',
progress: 100,
error: failed?.error.message
}
})
if (response.items.length) {
const wantsTranscode = kind === 'video' && transcodeToHls.value
const uploaded = wantsTranscode
? response.items.map(item => ({ ...item, transcodeStatus: 'pending' as const }))
: response.items
sessionItems.value = [...uploaded, ...sessionItems.value]
if (wantsTranscode) startStatusPolling()
toast.add({
title: t('files.uploadSuccess', { n: response.items.length }),
color: 'success'
})
const first = response.items[0]
if (autoCopyMarkdown.value && first) {
const text = buildCopyText(first, copyFormat.value)
if (text && await copyToClipboard(text)) {
toast.add({ title: t('copy.copied'), color: 'success' })
}
}
}
for (const failure of response.errors.slice(0, 3)) {
toast.add({
title: `${failure.name}:${failure.error.message}`,
color: 'error'
})
}
return response
} catch (error: unknown) {
if (!isUnauthorizedError(error)) {
progressItems.value = progressItems.value.map(item => ({
...item,
status: 'error',
progress: 100,
error: t('files.uploadFailed')
}))
toast.add({ title: t('files.uploadFailed'), color: 'error' })
}
throw error
} finally {
uploading.value = false
}
}
return {
uploading,
progressItems,
lastResult,
sessionItems,
accessMode,
linkUrl,
thumbLink,
loadActiveTranscodes,
uploadFiles
}
}
+114
View File
@@ -0,0 +1,114 @@
interface TranscodeSettingsResponse {
concurrency: number
threads: number
preset: string
bitratePercent: number
maxConcurrency: number
maxThreads: number
minBitratePercent: number
maxBitratePercent: number
presets: string[]
}
/** 服务端转码参数:并发任务数与单任务 CPU 核心数(仅管理员可改) */
export function useTranscodeSettings() {
const { isAuthenticated, isAdmin, handleAuthError } = useAuth()
const toast = useToast()
const { t } = useI18n()
const concurrency = ref(1)
const threads = ref(1)
const maxConcurrency = ref(8)
const maxThreads = ref(64)
const preset = ref('veryfast')
const presets = ref<string[]>(['veryfast', 'medium', 'slow'])
const bitratePercent = ref(80)
const minBitratePercent = ref(10)
const maxBitratePercent = ref(100)
const loaded = ref(false)
const hydrated = ref(false)
let saveTimer: ReturnType<typeof setTimeout> | null = null
function apply(data: TranscodeSettingsResponse) {
hydrated.value = false
concurrency.value = data.concurrency
threads.value = data.threads
preset.value = data.preset
bitratePercent.value = data.bitratePercent
minBitratePercent.value = data.minBitratePercent ?? 10
maxBitratePercent.value = data.maxBitratePercent ?? 100
if (data.presets?.length) presets.value = data.presets
maxConcurrency.value = data.maxConcurrency
maxThreads.value = data.maxThreads
loaded.value = true
nextTick(() => {
hydrated.value = true
})
}
async function load() {
if (!isAuthenticated.value) return
try {
apply(await $fetch<TranscodeSettingsResponse>('/api/videos/transcode-settings', {
credentials: 'include'
}))
} catch (error: unknown) {
handleAuthError(error)
if (isAuthenticated.value) {
toast.add({ title: t('preferences.transcodeLoadFailed'), color: 'error' })
}
}
}
async function save() {
if (!hydrated.value || !isAdmin.value) return
try {
const data = await $fetch<TranscodeSettingsResponse>('/api/videos/transcode-settings', {
method: 'PATCH',
credentials: 'include',
body: {
concurrency: concurrency.value,
threads: threads.value,
preset: preset.value,
bitratePercent: bitratePercent.value
}
})
hydrated.value = false
concurrency.value = data.concurrency
threads.value = data.threads
preset.value = data.preset
bitratePercent.value = data.bitratePercent
nextTick(() => {
hydrated.value = true
})
} catch (error: unknown) {
handleAuthError(error)
if (isAuthenticated.value) {
toast.add({ title: t('preferences.transcodeSaveFailed'), color: 'error' })
}
}
}
watch([concurrency, threads, preset, bitratePercent], () => {
if (!hydrated.value || !isAdmin.value) return
if (saveTimer) clearTimeout(saveTimer)
saveTimer = setTimeout(() => {
void save()
}, 600)
})
return {
concurrency,
threads,
preset,
bitratePercent,
minBitratePercent,
maxBitratePercent,
presets,
maxConcurrency,
maxThreads,
loaded,
load
}
}
+39 -20
View File
@@ -1,6 +1,12 @@
const STORAGE_KEY = 'pichost.upload-preferences'
export type CopyFormat = 'url' | 'markdown' | 'html' | 'bbcode'
export type UploadMediaKind = 'image' | 'video' | 'file'
/** 每种上传页各存一份偏好,互不影响 */
function storageKeyFor(kind: UploadMediaKind): string {
return kind === 'image' ? STORAGE_KEY : `${STORAGE_KEY}.${kind}`
}
export interface UploadPreferences {
compressEnabled: boolean
@@ -8,6 +14,8 @@ export interface UploadPreferences {
copyFormat: CopyFormat
clientWebpQuality: number
lastTagIds: number[]
/** 视频床专属:上传后转码为 HLS(m3u8 + 分片) */
transcodeToHls: boolean
}
const DEFAULTS: UploadPreferences = {
@@ -15,7 +23,8 @@ const DEFAULTS: UploadPreferences = {
autoCopyMarkdown: false,
copyFormat: 'markdown',
clientWebpQuality: 80,
lastTagIds: []
lastTagIds: [],
transcodeToHls: false
}
function clampQuality(value: unknown): number {
@@ -28,11 +37,11 @@ function isCopyFormat(value: unknown): value is CopyFormat {
return value === 'url' || value === 'markdown' || value === 'html' || value === 'bbcode'
}
function readStored(): UploadPreferences {
function readStored(kind: UploadMediaKind): UploadPreferences {
if (import.meta.server) return { ...DEFAULTS }
try {
const raw = localStorage.getItem(STORAGE_KEY)
const raw = localStorage.getItem(storageKeyFor(kind))
if (!raw) return { ...DEFAULTS }
const parsed = JSON.parse(raw) as Partial<UploadPreferences>
return {
@@ -42,33 +51,36 @@ function readStored(): UploadPreferences {
clientWebpQuality: clampQuality(parsed.clientWebpQuality),
lastTagIds: Array.isArray(parsed.lastTagIds)
? parsed.lastTagIds.filter(id => Number.isInteger(id) && id > 0)
: DEFAULTS.lastTagIds
: DEFAULTS.lastTagIds,
transcodeToHls: parsed.transcodeToHls === true
}
} catch {
return { ...DEFAULTS }
}
}
function writeStored(prefs: UploadPreferences) {
function writeStored(kind: UploadMediaKind, prefs: UploadPreferences) {
if (import.meta.server) return
localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs))
localStorage.setItem(storageKeyFor(kind), JSON.stringify(prefs))
}
export function useUploadPreferences() {
const compressEnabled = useState('upload-pref-compress', () => DEFAULTS.compressEnabled)
const autoCopyMarkdown = useState('upload-pref-auto-md', () => DEFAULTS.autoCopyMarkdown)
const copyFormat = useState<CopyFormat>('upload-pref-copy-format', () => DEFAULTS.copyFormat)
const clientWebpQuality = useState('upload-pref-webp-quality', () => DEFAULTS.clientWebpQuality)
const lastTagIds = useState<number[]>('upload-pref-last-tag-ids', () => DEFAULTS.lastTagIds)
const loaded = useState('upload-pref-loaded', () => false)
export function useUploadPreferences(kind: UploadMediaKind = 'image') {
const compressEnabled = useState(`upload-pref-compress-${kind}`, () => DEFAULTS.compressEnabled)
const autoCopyMarkdown = useState(`upload-pref-auto-md-${kind}`, () => DEFAULTS.autoCopyMarkdown)
const copyFormat = useState<CopyFormat>(`upload-pref-copy-format-${kind}`, () => DEFAULTS.copyFormat)
const clientWebpQuality = useState(`upload-pref-webp-quality-${kind}`, () => DEFAULTS.clientWebpQuality)
const lastTagIds = useState<number[]>(`upload-pref-last-tag-ids-${kind}`, () => DEFAULTS.lastTagIds)
const transcodeToHls = useState(`upload-pref-transcode-${kind}`, () => DEFAULTS.transcodeToHls)
const loaded = useState(`upload-pref-loaded-${kind}`, () => false)
function loadPreferences() {
const stored = readStored()
const stored = readStored(kind)
compressEnabled.value = stored.compressEnabled
autoCopyMarkdown.value = stored.autoCopyMarkdown
copyFormat.value = stored.copyFormat
clientWebpQuality.value = stored.clientWebpQuality
lastTagIds.value = stored.lastTagIds
transcodeToHls.value = stored.transcodeToHls
loaded.value = true
}
@@ -77,12 +89,13 @@ export function useUploadPreferences() {
}
function savePreferences() {
writeStored({
writeStored(kind, {
compressEnabled: compressEnabled.value,
autoCopyMarkdown: autoCopyMarkdown.value,
copyFormat: copyFormat.value,
clientWebpQuality: clampQuality(clientWebpQuality.value),
lastTagIds: lastTagIds.value
lastTagIds: lastTagIds.value,
transcodeToHls: transcodeToHls.value
})
}
@@ -91,21 +104,27 @@ export function useUploadPreferences() {
autoCopyMarkdown.value = DEFAULTS.autoCopyMarkdown
copyFormat.value = DEFAULTS.copyFormat
clientWebpQuality.value = DEFAULTS.clientWebpQuality
transcodeToHls.value = DEFAULTS.transcodeToHls
savePreferences()
}
watch([compressEnabled, autoCopyMarkdown, copyFormat, clientWebpQuality, lastTagIds], () => {
if (loaded.value) {
savePreferences()
watch(
[compressEnabled, autoCopyMarkdown, copyFormat, clientWebpQuality, lastTagIds, transcodeToHls],
() => {
if (loaded.value) {
savePreferences()
}
}
})
)
return {
kind,
compressEnabled,
autoCopyMarkdown,
copyFormat,
clientWebpQuality,
lastTagIds,
transcodeToHls,
loaded,
loadPreferences,
savePreferences,
+59
View File
@@ -0,0 +1,59 @@
<script setup lang="ts">
import FileLibraryPanel from '~/components/FileLibraryPanel.vue'
const { isChecking, isAuthenticated, checkSession, fetchStatus } = useAuth()
const { t } = useI18n()
const panelRef = ref<{ refresh: () => Promise<void> } | null>(null)
async function loadPanel() {
if (isAuthenticated.value) {
await panelRef.value?.refresh()
}
}
onMounted(async () => {
const status = await fetchStatus()
if (!status.initialized && !status.legacyMode) {
await navigateTo('/setup')
return
}
await checkSession()
await loadPanel()
})
watch(isAuthenticated, async (authed, prev) => {
if (authed && prev === false) {
await nextTick()
await loadPanel()
}
})
</script>
<template>
<div class="min-h-screen">
<div
v-if="isChecking"
class="flex min-h-screen items-center justify-center"
>
<div class="flex flex-col items-center gap-3 text-muted">
<UIcon
name="i-lucide-loader-circle"
class="size-8 animate-spin"
/>
<p class="text-sm">
{{ t('common.loadingSession') }}
</p>
</div>
</div>
<AdminLoginGate v-else-if="!isAuthenticated" />
<AppShell v-else>
<FileLibraryPanel
ref="panelRef"
kind="file"
/>
</AppShell>
</div>
</template>
+38
View File
@@ -0,0 +1,38 @@
<script setup lang="ts">
const { isChecking, isAuthenticated, checkSession, fetchStatus } = useAuth()
const { t } = useI18n()
onMounted(async () => {
const status = await fetchStatus()
if (!status.initialized && !status.legacyMode) {
await navigateTo('/setup')
return
}
await checkSession()
})
</script>
<template>
<div class="min-h-screen">
<div
v-if="isChecking"
class="flex min-h-screen items-center justify-center"
>
<div class="flex flex-col items-center gap-3 text-muted">
<UIcon
name="i-lucide-loader-circle"
class="size-8 animate-spin"
/>
<p class="text-sm">
{{ t('common.loadingSession') }}
</p>
</div>
</div>
<AdminLoginGate v-else-if="!isAuthenticated" />
<AppShell v-else>
<MediaUploadPanel kind="file" />
</AppShell>
</div>
</template>
+6 -6
View File
@@ -51,8 +51,7 @@ const {
activeTagMode,
activeUntaggedOnly,
setActiveTagFilter,
toggleTagFilter,
listQueryParams
toggleTagFilter
} = useImageList()
const { items: tagItems, fetchTags, batchUpdateTags } = useTags()
@@ -73,7 +72,7 @@ const batchDeleting = ref(false)
const showScrollTop = ref(false)
const previewOpen = ref(false)
const previewImage = ref<ImageItem | null>(null)
const viewMode = ref<'grid' | 'list'>('grid')
const { viewMode } = useLibraryView('image')
const batchTagOpen = ref(false)
const currentUploadSource = ref('all')
@@ -104,9 +103,9 @@ function scrollToTop() {
}
async function fetchStats() {
stats.value = await $fetch<StatsResponse>('/api/stats', {
stats.value = await $fetch<StatsResponse>('/api/library/stats', {
credentials: 'include',
query: listQueryParams()
query: { kind: 'image' }
})
}
@@ -466,7 +465,8 @@ watch(isAuthenticated, async (authed, prev) => {
/>
</div>
<GalleryStatsOverview
<LibraryStatsPanel
kind="image"
:stats="stats"
:loading="statsLoading"
/>
+31 -1
View File
@@ -61,6 +61,7 @@ interface SettingsResponse {
loginRateWindowMinutesSource: PolicySource
preserveOriginalUpload: boolean
preserveOriginalUploadSource: PolicySource
fileBedAccess: 'public' | 'token'
mimeTypeOptions: ReadonlyArray<{ mime: MimeType, label: string }>
}
@@ -171,6 +172,20 @@ const uploadRateWindowMinutesDraft = ref(15)
const loginRateMaxDraft = ref(10)
const loginRateWindowMinutesDraft = ref(15)
const preserveOriginalUploadDraft = ref(false)
const fileBedAccessDraft = ref<'public' | 'token'>('public')
const fileBedAccessOptions = computed(() => [
{
value: 'public',
label: t('settings.fileBedPublic'),
description: t('settings.fileBedPublicHint')
},
{
value: 'token',
label: t('settings.fileBedToken'),
description: t('settings.fileBedTokenHint')
}
])
interface ReleaseCheckResponse {
currentVersion: string
@@ -207,6 +222,7 @@ const hasServerChanges = computed(() => {
|| loginRateMaxDraft.value !== settings.value.loginRateMax
|| loginRateWindowMinutesDraft.value !== settings.value.loginRateWindowMinutes
|| preserveOriginalUploadDraft.value !== settings.value.preserveOriginalUpload
|| fileBedAccessDraft.value !== settings.value.fileBedAccess
})
const domainSeparationWouldActivate = computed(() =>
@@ -270,6 +286,7 @@ function applySettings(data: SettingsResponse) {
loginRateMaxDraft.value = data.loginRateMax
loginRateWindowMinutesDraft.value = data.loginRateWindowMinutes
preserveOriginalUploadDraft.value = data.preserveOriginalUpload
fileBedAccessDraft.value = data.fileBedAccess
}
async function patchSettings(body: Record<string, unknown>) {
@@ -370,7 +387,8 @@ async function performSaveServerSettings() {
uploadRateWindowMinutes: uploadRateWindowMinutesDraft.value,
loginRateMax: loginRateMaxDraft.value,
loginRateWindowMinutes: loginRateWindowMinutesDraft.value,
preserveOriginalUpload: preserveOriginalUploadDraft.value
preserveOriginalUpload: preserveOriginalUploadDraft.value,
fileBedAccess: fileBedAccessDraft.value
})
toast.add({ title: t('settings.saved'), color: 'success' })
} catch (error: unknown) {
@@ -923,6 +941,18 @@ watch(isAdmin, () => {
</div>
</SettingsPlainSection>
<SettingsSection
:title="t('settings.fileBed')"
:hint="t('settings.fileBedHint')"
>
<SettingsGroup>
<SettingsRadioGroup
v-model="fileBedAccessDraft"
:items="fileBedAccessOptions"
/>
</SettingsGroup>
</SettingsSection>
<SettingsSection
:title="t('settings.loginVerification')"
:hint="t('settings.loginVerificationHint')"
+56
View File
@@ -0,0 +1,56 @@
<script setup lang="ts">
import VideoLibraryPanel from '~/components/VideoLibraryPanel.vue'
const { isChecking, isAuthenticated, checkSession, fetchStatus } = useAuth()
const { t } = useI18n()
const panelRef = ref<{ refresh: () => Promise<void> } | null>(null)
async function loadPanel() {
if (isAuthenticated.value) {
await panelRef.value?.refresh()
}
}
onMounted(async () => {
const status = await fetchStatus()
if (!status.initialized && !status.legacyMode) {
await navigateTo('/setup')
return
}
await checkSession()
await loadPanel()
})
watch(isAuthenticated, async (authed, prev) => {
if (authed && prev === false) {
await nextTick()
await loadPanel()
}
})
</script>
<template>
<div class="min-h-screen">
<div
v-if="isChecking"
class="flex min-h-screen items-center justify-center"
>
<div class="flex flex-col items-center gap-3 text-muted">
<UIcon
name="i-lucide-loader-circle"
class="size-8 animate-spin"
/>
<p class="text-sm">
{{ t('common.loadingSession') }}
</p>
</div>
</div>
<AdminLoginGate v-else-if="!isAuthenticated" />
<AppShell v-else>
<VideoLibraryPanel ref="panelRef" />
</AppShell>
</div>
</template>
+38
View File
@@ -0,0 +1,38 @@
<script setup lang="ts">
const { isChecking, isAuthenticated, checkSession, fetchStatus } = useAuth()
const { t } = useI18n()
onMounted(async () => {
const status = await fetchStatus()
if (!status.initialized && !status.legacyMode) {
await navigateTo('/setup')
return
}
await checkSession()
})
</script>
<template>
<div class="min-h-screen">
<div
v-if="isChecking"
class="flex min-h-screen items-center justify-center"
>
<div class="flex flex-col items-center gap-3 text-muted">
<UIcon
name="i-lucide-loader-circle"
class="size-8 animate-spin"
/>
<p class="text-sm">
{{ t('common.loadingSession') }}
</p>
</div>
</div>
<AdminLoginGate v-else-if="!isAuthenticated" />
<AppShell v-else>
<MediaUploadPanel kind="video" />
</AppShell>
</div>
</template>
+58
View File
@@ -0,0 +1,58 @@
import type { ImageTag, UploadErrorItem } from './image'
export interface FileItem {
key: string
url: string
originalName: string
contentType: string
size: number
uploadedAt: string
markdown: string
/** 视频转码状态(仅视频有值) */
transcodeStatus?: 'none' | 'pending' | 'running' | 'done' | 'failed'
/** 转码进度 0–100 */
transcodeProgress?: number
/** 本视频使用的转码档位 */
transcodePreset?: string
/** HLS 播放列表地址(转码完成后有值) */
hlsUrl?: string
/** HLS 播放列表在存储中的 key */
hlsKey?: string
/** 视频封面缩略图地址 */
thumbUrl?: string
/** 上传来源(来自活动日志) */
uploadSource?: 'web' | 'api'
/** 转码成功后源视频已删除,不再提供原文件下载 */
sourceDeleted?: boolean
/** 视频标签 */
tags?: ImageTag[]
/** 管理员列表可见:上传者信息 */
owner?: {
userId: number | null
username: string
}
/** 文件所在存储后端 */
storage?: {
id: string
name: string
type: 'local' | 's3' | 'telegram'
}
}
export interface FileListResponse {
items: FileItem[]
total: number
page: number
pageSize: number
totalPages: number
/** 文件床直链访问方式(后台可切换) */
accessMode: 'public' | 'token'
}
export interface FileUploadResponse {
success: boolean
items: FileItem[]
errors: UploadErrorItem[]
/** 直链访问方式,token 模式下复制链接需要附带令牌 */
accessMode: 'public' | 'token'
}
+21
View File
@@ -0,0 +1,21 @@
export type MediaType = 'image' | 'video' | 'file'
/** 图库 / 视频库 / 文件库共用的统计数据结构 */
export interface LibraryStatsData {
uploadToday: number
uploadYesterday: number
uploadMonth: number
uploadLastMonth: number
uploadTotal: number
storedCount: number
uploadBytesTotal: number
bySource: {
web: number
api: number
}
storageUsage: {
usedBytes: number
totalBytes: number | null
percent: number | null
}
}
+97
View File
@@ -24,6 +24,8 @@
"nav": {
"api": "API",
"gallery": "Gallery",
"videoLibrary": "Video library",
"fileLibrary": "File library",
"stats": "Stats",
"logs": "Activity log",
"settings": "Settings",
@@ -298,6 +300,23 @@
"qualityMedium": "Medium quality",
"qualityLow": "Lossy",
"convenience": "Convenience",
"videoProcessing": "Video processing",
"transcodeToHls": "Transcode to m3u8",
"transcodeToHlsHint": "Segment into HLS, uses extra CPU.",
"concurrentHint": "at a time",
"threadsHint": "per job",
"transcodeConcurrency": "Concurrent transcodes",
"transcodeThreads": "CPU threads",
"unitCount": "",
"transcodeQuality": "Quality",
"presetCopy": "Remux",
"presetSpeed": "Speed",
"presetBalanced": "Balanced",
"presetQuality": "Quality",
"presetCompress": "Compress",
"compressBitrate": "Target bitrate",
"transcodeLoadFailed": "Failed to load transcode settings",
"transcodeSaveFailed": "Failed to save transcode settings",
"autoCopy": "Copy link after upload",
"autoCopyHint": "Copy to clipboard in the selected format"
},
@@ -356,6 +375,12 @@
"refererUnrestricted": "Unrestricted",
"loginVerification": "Login verification",
"loginVerificationHint": "Human verification for login and registration (choose one)",
"fileBed": "File bed",
"fileBedHint": "Access mode for file download links. Takes effect immediately.",
"fileBedPublic": "Public",
"fileBedPublicHint": "Anyone with the link can download. Best for sharing.",
"fileBedToken": "Token required",
"fileBedTokenHint": "Downloads must carry a token (append ?token= to the link). Best for private files.",
"loginVerificationSlider": "Local slider",
"loginVerificationSliderHint": "Built-in slider puzzle; no third-party service",
"loginVerificationTurnstile": "Cloudflare Turnstile",
@@ -816,6 +841,8 @@
"storageBackend": "Storage: {name}"
},
"delete": {
"confirmDescVideo": "Delete the selected {count} video(s)? This cannot be undone.",
"confirmDescFile": "Delete the selected {count} file(s)? This cannot be undone.",
"confirmTitle": "Confirm delete",
"confirmDesc": "Delete {count} selected image(s)? This cannot be undone.",
"confirm": "Delete"
@@ -967,6 +994,76 @@
}
}
},
"files": {
"maxFiles": "Up to {n} files per upload",
"uploadSuccess": "Uploaded {n} file(s)",
"uploadFailed": "Upload failed, please try again",
"loadFailed": "Failed to load files",
"copyLink": "Copy link",
"download": "Download",
"deleted": "Deleted",
"deleteFailed": "Delete failed"
},
"host": {
"video": "Video",
"file": "File",
"imageFull": "Personal lightweight image host",
"videoFull": "Personal lightweight video host",
"fileFull": "Personal lightweight file host"
},
"library": {
"play": "Play",
"copyVideoLink": "Copy video link",
"copyThumbLink": "Copy thumbnail link",
"selectedCount": "{n} selected",
"selectFirst": "Select videos first",
"clearSelection": "Clear",
"reset": "Reset",
"batchDelete": "Delete",
"deleted": "Deleted {n} video(s)",
"fileDeleted": "Deleted {n} file(s)",
"deletePartialFail": "{n} video(s) failed to delete",
"statsToday": "Uploaded today",
"statsMonth": "This month",
"statsTotal": "Videos",
"statsBytes": "Total size",
"statsUsage": "Storage usage",
"statsSource": "Upload source",
"statsTotalHintVideo": "Total videos",
"statsTotalHintFile": "Total files",
"statsTotalHintImage": "Total images",
"statsVsYesterday": "vs yesterday {value}",
"statsVsLastMonth": "vs last month {value}",
"transcodePending": "Queued",
"transcoding": "Transcoding",
"transcodeFailed": "Transcode failed",
"searchPlaceholder": "Search file name",
"searchEmpty": "Nothing matched",
"clearSearch": "Clear search",
"file": {
"title": "File bed",
"subtitle": "Manage uploaded files, copy links or download",
"uploadTitle": "Drop files here to upload",
"uploadHint": "or click to choose files, up to 10 at a time",
"uploadFormats": "Any type allowed (HTML / HTM / SVG blocked), up to 100MB per file",
"empty": "No files yet — upload one to get started"
},
"video": {
"title": "Videos",
"subtitle": "Manage uploaded videos, copy links or download",
"previewTitle": "Video details",
"previewSubtitle": "View video info and links",
"previewTranscode": "Transcode",
"previewThumbLink": "Thumbnail link",
"previewKey": "Video path",
"transcodeNone": "Not transcoded",
"transcodeDone": "Done (m3u8)",
"uploadTitle": "Drop videos here to upload",
"uploadHint": "or click to choose video files, up to 10 at a time",
"uploadFormats": "MP4 / WebM / MOV / MKV and more, up to 100MB per file",
"empty": "No videos yet — upload one to get started"
}
},
"userSettings": {
"loadFailed": "Failed to load settings",
"saveFailed": "Failed to save settings"
+98 -1
View File
@@ -24,6 +24,8 @@
"nav": {
"api": "API",
"gallery": "图库",
"videoLibrary": "视频库",
"fileLibrary": "文件库",
"stats": "统计",
"logs": "操作日志",
"settings": "设置",
@@ -298,8 +300,25 @@
"qualityMedium": "中等质量",
"qualityLow": "有损压缩",
"convenience": "便捷功能",
"videoProcessing": "视频处理",
"transcodeToHls": "转码成 m3u8",
"transcodeToHlsHint": "自动切片为 HLS,会占用 CPU。",
"concurrentHint": "同时转码数",
"threadsHint": "单任务 CPU 上限",
"transcodeConcurrency": "并发转码数量",
"transcodeThreads": "限制核心数",
"unitCount": "个",
"transcodeQuality": "转码质量",
"presetCopy": "直接封装",
"presetSpeed": "速度",
"presetBalanced": "平衡",
"presetQuality": "质量",
"presetCompress": "压缩",
"compressBitrate": "目标码率",
"transcodeLoadFailed": "读取转码设置失败",
"transcodeSaveFailed": "保存转码设置失败",
"autoCopy": "上传成功自动复制链接",
"autoCopyHint": "图片上传成功后,自动复制图片链接到剪贴板。"
"autoCopyHint": "上传成功后,自动复制链接到剪贴板。"
},
"settings": {
"title": "系统设置",
@@ -356,6 +375,12 @@
"refererUnrestricted": "未限制",
"loginVerification": "登录验证",
"loginVerificationHint": "登录与注册时使用的人机验证方式,三选一",
"fileBed": "文件床",
"fileBedHint": "文件直链的访问方式,切换后立即生效",
"fileBedPublic": "公开访问",
"fileBedPublicHint": "任何人拿到链接都能下载,适合分享。",
"fileBedToken": "Token 访问",
"fileBedTokenHint": "下载需要携带 Token(链接后追加 ?token=),适合私密文件。",
"loginVerificationSlider": "本地滑块",
"loginVerificationSliderHint": "内置滑块验证,无需第三方服务。",
"loginVerificationTurnstile": "Cloudflare Turnstile",
@@ -816,6 +841,8 @@
"storageBackend": "存储:{name}"
},
"delete": {
"confirmDescVideo": "确定要删除选中的 {count} 个视频吗?此操作不可恢复。",
"confirmDescFile": "确定要删除选中的 {count} 个文件吗?此操作不可恢复。",
"confirmTitle": "确认删除",
"confirmDesc": "确定要删除选中的 {count} 张图片吗?此操作不可恢复。",
"confirm": "确认删除"
@@ -970,6 +997,76 @@
}
}
},
"files": {
"maxFiles": "每次最多上传 {n} 个文件",
"uploadSuccess": "已上传 {n} 个文件",
"uploadFailed": "上传失败,请稍后重试",
"loadFailed": "读取文件列表失败",
"copyLink": "复制直链",
"download": "下载",
"deleted": "已删除",
"deleteFailed": "删除失败"
},
"host": {
"video": "视频",
"file": "文件",
"imageFull": "个人轻量图床",
"videoFull": "个人轻量视频床",
"fileFull": "个人轻量文件床"
},
"library": {
"play": "播放",
"copyVideoLink": "复制视频链接",
"copyThumbLink": "复制缩略图链接",
"selectedCount": "已选择 {n} 项",
"selectFirst": "请先选择视频",
"clearSelection": "取消选择",
"reset": "重置",
"batchDelete": "批量删除",
"deleted": "已删除 {n} 个视频",
"fileDeleted": "已删除 {n} 个文件",
"deletePartialFail": "{n} 个视频删除失败",
"statsToday": "今日上传",
"statsMonth": "本月上传",
"statsTotal": "累计视频",
"statsBytes": "总占用",
"statsUsage": "存储使用率",
"statsSource": "上传来源分布",
"statsTotalHintVideo": "总视频数",
"statsTotalHintFile": "总文件数",
"statsTotalHintImage": "总图片数",
"statsVsYesterday": "较昨日 {value}",
"statsVsLastMonth": "较上月 {value}",
"transcodePending": "等待转码中",
"transcoding": "转码中",
"transcodeFailed": "转码失败",
"searchPlaceholder": "搜索文件名",
"searchEmpty": "没有匹配的内容",
"clearSearch": "清除搜索",
"file": {
"title": "文件床",
"subtitle": "管理已上传的文件,复制直链或下载",
"uploadTitle": "拖拽文件到此处上传",
"uploadHint": "或点击选择文件,单次最多 10 个",
"uploadFormats": "支持任意类型(禁止 HTML / HTM / SVG),单个文件最大 100MB",
"empty": "还没有文件,上传一个试试"
},
"video": {
"title": "视频",
"subtitle": "管理已上传的视频,复制直链或下载",
"previewTitle": "视频详情",
"previewSubtitle": "查看视频信息与链接",
"previewTranscode": "转码状态",
"previewThumbLink": "缩略图链接",
"previewKey": "视频路径",
"transcodeNone": "未转码",
"transcodeDone": "已完成(m3u8)",
"uploadTitle": "拖拽视频到此处上传",
"uploadHint": "或点击选择视频文件,单次最多 10 个",
"uploadFormats": "支持 MP4 / WebM / MOV / MKV 等,单个文件最大 100MB",
"empty": "还没有视频,上传一个试试"
}
},
"userSettings": {
"loadFailed": "加载设置失败",
"saveFailed": "保存设置失败"
+7
View File
@@ -16,6 +16,7 @@
"@nuxt/ui": "^4.9.0",
"@nuxtjs/i18n": "^10.6.0",
"cap-widget": "^0.1.58",
"hls.js": "^1.7.3",
"nuxt": "^4.4.8",
"sharp": "^0.35.3",
"tailwindcss": "^4.3.1",
@@ -13843,6 +13844,12 @@
"integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==",
"license": "MIT"
},
"node_modules/hls.js": {
"version": "1.7.3",
"resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.7.3.tgz",
"integrity": "sha512-MsPlx6yVW4Qv4C7mEVou4/gk/5cN2dVxOTnrNjPSmyH2f0Ln+/UkG10Ax1PE6OvrmTVPKgQYozTtBaPOuCzq7A==",
"license": "Apache-2.0"
},
"node_modules/hookable": {
"version": "6.1.1",
"resolved": "https://registry.npmmirror.com/hookable/-/hookable-6.1.1.tgz",
+1
View File
@@ -51,6 +51,7 @@
"@nuxt/ui": "^4.9.0",
"@nuxtjs/i18n": "^10.6.0",
"cap-widget": "^0.1.58",
"hls.js": "^1.7.3",
"nuxt": "^4.4.8",
"sharp": "^0.35.3",
"tailwindcss": "^4.3.1",
+81
View File
@@ -0,0 +1,81 @@
import type { BatchDeleteResponse } from '~/types/image'
import { assertImageOwnership, requireApiOrAdminAuth } from '../../utils/access'
import { createApiError } from '../../utils/api-error'
import { logActivity } from '../../utils/activity-log'
import { deleteImageIndex, getImageIndexRow } from '../../utils/image-index'
import { validateFileKey, validateVideoKey } from '../../utils/image-key'
import { deleteImage, headImage } from '../../utils/storage'
import { cancelTranscode, removeHlsArtifacts } from '../../utils/transcode'
import { MAX_DELETE_BATCH } from '../../utils/constants'
interface BatchDeleteBody {
keys?: unknown
}
export default defineEventHandler(async (event) => {
await requireApiOrAdminAuth(event)
const body = await readBody<BatchDeleteBody>(event).catch((): BatchDeleteBody => ({}))
const keys = Array.isArray(body.keys)
? body.keys.map(key => String(key)).filter(Boolean)
: []
if (!keys.length) {
createApiError(event, 'INVALID_REQUEST', '未提供要删除的文件', 400)
}
if (keys.length > MAX_DELETE_BATCH) {
createApiError(event, 'INVALID_REQUEST', `每次最多删除 ${MAX_DELETE_BATCH} 个文件`, 400)
}
const deleted: string[] = []
const failed: BatchDeleteResponse['failed'] = []
for (const key of keys) {
if (!validateFileKey(key) && !validateVideoKey(key)) {
failed.push({ key, error: { code: 'INVALID_IMAGE_KEY', message: '无效的文件路径' } })
continue
}
try {
const existing = await headImage(key)
const indexed = getImageIndexRow(key)
if (!existing && !indexed) {
failed.push({ key, error: { code: 'IMAGE_NOT_FOUND', message: '文件不存在' } })
continue
}
const ownerId = existing?.userId ?? indexed?.user_id ?? null
await assertImageOwnership(event, ownerId)
if (validateVideoKey(key)) {
cancelTranscode(key)
await removeHlsArtifacts(key).catch(() => {})
}
if (existing) {
await deleteImage(key, key)
} else {
deleteImageIndex(key)
}
logActivity(event, {
action: 'delete',
key,
originalName: existing?.originalName ?? indexed?.original_name ?? key,
size: existing?.size ?? indexed?.size ?? 0,
contentType: existing?.contentType ?? indexed?.content_type ?? 'application/octet-stream',
userId: ownerId,
backendId: existing?.backendId ?? indexed?.backend_id ?? null
})
deleted.push(key)
} catch (error: unknown) {
const message = error instanceof Error ? error.message : '删除失败'
failed.push({ key, error: { code: 'DELETE_FAILED', message } })
}
}
const response: BatchDeleteResponse = { success: failed.length === 0, deleted, failed }
return response
})
+77
View File
@@ -0,0 +1,77 @@
import type { DeleteResponse } from '~/types/image'
import { assertImageOwnership, requireApiOrAdminAuth } from '../../utils/access'
import { createApiError } from '../../utils/api-error'
import { logActivity } from '../../utils/activity-log'
import { deleteImageIndex, getImageIndexRow } from '../../utils/image-index'
import { validateFileKey, validateVideoKey } from '../../utils/image-key'
import { deleteImage, headImage } from '../../utils/storage'
import { cancelTranscode, removeHlsArtifacts } from '../../utils/transcode'
import { logInfo } from '../../utils/logger'
interface DeleteBody {
key?: string
}
export default defineEventHandler(async (event) => {
try {
await requireApiOrAdminAuth(event)
const query = getQuery(event)
const body = await readBody<DeleteBody>(event).catch(() => null)
const key = (typeof query.key === 'string' ? query.key : undefined) ?? body?.key
if (!key || (!validateFileKey(key) && !validateVideoKey(key))) {
createApiError(event, 'INVALID_IMAGE_KEY', '无效的文件路径', 400)
}
const existing = await headImage(key)
const indexed = getImageIndexRow(key)
if (!existing && !indexed) {
createApiError(event, 'IMAGE_NOT_FOUND', '文件不存在', 404)
}
const originalName = existing?.originalName ?? indexed?.original_name ?? key
const size = existing?.size ?? indexed?.size ?? 0
const contentType = existing?.contentType ?? indexed?.content_type ?? 'application/octet-stream'
const ownerId = existing?.userId ?? indexed?.user_id ?? null
const backendId = existing?.backendId ?? indexed?.backend_id ?? null
await assertImageOwnership(event, ownerId)
try {
if (validateVideoKey(key)) {
// 立即中断正在进行的转码,再清理产物与原文件
cancelTranscode(key)
await removeHlsArtifacts(key).catch(() => {})
}
if (existing) {
await deleteImage(key, key)
} else {
deleteImageIndex(key)
}
} catch {
createApiError(event, 'DELETE_FAILED', '删除失败', 500)
}
logActivity(event, {
action: 'delete',
key,
originalName,
size,
contentType,
userId: ownerId,
backendId
})
logInfo('file delete success', { key, size })
const response: DeleteResponse = { success: true }
return response
} catch (error: unknown) {
if (error && typeof error === 'object' && 'statusCode' in error) {
throw error
}
createApiError(event, 'DELETE_FAILED', '删除失败', 500)
}
})
+141
View File
@@ -0,0 +1,141 @@
import type { FileListResponse } from '~/types/file'
import type { MediaType, TranscodeStatus } from '../../utils/storage/types'
import { requireApiOrAdminAuth, getImageUserFilter } from '../../utils/access'
import { getCurrentUser } from '../../utils/auth'
import { DEFAULT_LIST_LIMIT, MAX_LIST_LIMIT } from '../../utils/constants'
import { getUploadSourcesForKeys, listUserIdUsernameMap } from '../../utils/db'
import { getFileBedAccessMode } from '../../utils/env'
import { buildFileItem } from '../../utils/file-bed'
import {
resolveImageOwner,
resolveImageStorage,
resolveImageUrl
} from '../../utils/image-response'
import { getTagsForImageKeys } from '../../utils/tags'
import { listStorageBackendNameMap } from '../../utils/storage-backends'
import { createApiError } from '../../utils/api-error'
import {
readBackendIdQuery,
readTagFilterQuery,
readUploadSourceQuery
} from '../../utils/image-query'
import { listImages, searchImages } from '../../utils/storage'
export default defineEventHandler(async (event) => {
await requireApiOrAdminAuth(event)
const query = getQuery(event)
const limitRaw = Number(query.limit ?? DEFAULT_LIST_LIMIT)
const limit = Number.isFinite(limitRaw)
? Math.min(Math.max(1, Math.floor(limitRaw)), MAX_LIST_LIMIT)
: DEFAULT_LIST_LIMIT
const pageRaw = Number(query.page ?? 1)
const page = Number.isFinite(pageRaw) && pageRaw > 0 ? Math.floor(pageRaw) : 1
const search = typeof query.q === 'string' ? query.q.trim() : ''
const userFilter = await getImageUserFilter(event)
const backendId = readBackendIdQuery(query)
if (backendId === null) {
createApiError(event, 'INVALID_REQUEST', '无效的存储后端', 400)
}
const uploadSource = readUploadSourceQuery(query)
if (uploadSource === null) {
createApiError(event, 'INVALID_REQUEST', '无效的上传来源', 400)
}
const tagFilter = readTagFilterQuery(query)
if (tagFilter === null) {
createApiError(event, 'INVALID_REQUEST', '无效的标签筛选参数', 400)
}
// 文件床按类型分工:视频库看 media_type=video,文件库看 media_type=file
const kindRaw = typeof query.kind === 'string' ? query.kind.trim() : ''
if (kindRaw && kindRaw !== 'file' && kindRaw !== 'video') {
createApiError(event, 'INVALID_REQUEST', '无效的文件类型筛选', 400)
}
const mediaType: MediaType = kindRaw === 'video' ? 'video' : 'file'
// 视频库只收录转码已结束的条目;processing=1 用于上传页查仍在转码中的视频
const processingRaw = query.processing
const processingOnly = processingRaw === '1' || processingRaw === 'true'
const transcodeStatuses: TranscodeStatus[] | undefined = mediaType === 'video'
? (processingOnly ? ['pending', 'running'] : ['none', 'done', 'failed'])
: undefined
const listing = search
? await searchImages({
query: search,
limit,
page,
userFilter,
mediaType,
transcodeStatuses,
backendId,
uploadSource,
tagFilter
})
: await listImages({
limit,
page,
userFilter,
mediaType,
transcodeStatuses,
backendId,
uploadSource,
tagFilter
})
const user = await getCurrentUser(event)
const ownerMap = user?.role === 'admin' ? listUserIdUsernameMap() : undefined
const backendMap = listStorageBackendNameMap()
const sourceMap = getUploadSourcesForKeys(listing.items.map(item => item.key))
const mapped = listing.items.map((stored) => {
const owner = resolveImageOwner(stored.userId, ownerMap)
const storage = resolveImageStorage(stored.backendId, backendMap)
const uploadSource = sourceMap.get(stored.key)
return {
...buildFileItem({
event,
key: stored.key,
backendId: stored.backendId,
originalName: stored.originalName,
contentType: stored.contentType,
size: stored.size,
uploadedAt: stored.uploadedAt
}),
...(owner ? { owner } : {}),
...(storage ? { storage } : {}),
...(uploadSource === 'web' || uploadSource === 'api' ? { uploadSource } : {}),
transcodeStatus: stored.transcodeStatus ?? 'none',
transcodeProgress: stored.transcodeProgress ?? 0,
...(stored.transcodePreset ? { transcodePreset: stored.transcodePreset } : {}),
...(stored.sourceDeleted ? { sourceDeleted: true } : {}),
...(stored.thumbKey
? { thumbUrl: resolveImageUrl(event, stored.thumbKey, stored.backendId) }
: {}),
...(stored.hlsKey
? {
hlsUrl: resolveImageUrl(event, stored.hlsKey, stored.backendId),
hlsKey: stored.hlsKey
}
: {})
}
})
const tagMap = getTagsForImageKeys(mapped.map(item => item.key))
const items = mapped.map(item => ({ ...item, tags: tagMap.get(item.key) ?? [] }))
const response: FileListResponse = {
items,
total: listing.total,
page: listing.page,
pageSize: listing.pageSize,
totalPages: listing.totalPages,
accessMode: getFileBedAccessMode()
}
return response
})
+79
View File
@@ -0,0 +1,79 @@
import { readMultipartFormData } from 'h3'
import type { FileItem, FileUploadResponse } from '~/types/file'
import type { UploadErrorItem } from '~/types/image'
import {
getUploadUserId,
requireUploadAuth,
verifyApiUploadToken
} from '../../utils/access'
import { MAX_FILES_PER_UPLOAD } from '../../utils/constants'
import { createApiError } from '../../utils/api-error'
import { checkUploadRateLimit } from '../../utils/rate-limit'
import { processSingleFileUpload } from '../../utils/file-bed'
import { getFileBedAccessMode } from '../../utils/env'
export default defineEventHandler(async (event) => {
await requireUploadAuth(event)
const formData = await readMultipartFormData(event)
if (!formData?.length) {
createApiError(event, 'INVALID_REQUEST', '未收到上传文件', 400)
}
const tokenField = formData.find(part => part.name === 'token')
const formToken = tokenField?.data?.length
? new TextDecoder().decode(tokenField.data).trim()
: ''
checkUploadRateLimit(event, formToken)
const source = verifyApiUploadToken(event) ? 'api' : 'web'
const uploadUserId = await getUploadUserId(event, formToken)
const fileParts = formData.filter(
part => (part.name === 'file' || part.name === 'files') && part.data?.length
)
if (!fileParts.length) {
createApiError(event, 'INVALID_REQUEST', '未收到上传文件', 400)
}
if (fileParts.length > MAX_FILES_PER_UPLOAD) {
createApiError(
event,
'TOO_MANY_FILES',
`每次最多上传 ${MAX_FILES_PER_UPLOAD} 个文件`,
400
)
}
const items: FileItem[] = []
const errors: UploadErrorItem[] = []
for (const part of fileParts) {
const result = await processSingleFileUpload(event, {
bytes: new Uint8Array(part.data),
filename: part.filename,
contentType: part.type,
source,
userId: uploadUserId
})
if ('error' in result) {
errors.push(result.error)
} else {
items.push(result.item)
}
}
const response: FileUploadResponse = {
success: items.length > 0,
items,
errors,
accessMode: getFileBedAccessMode()
}
if (!items.length && errors.length) {
setResponseStatus(event, 400)
}
return response
})
+2 -2
View File
@@ -4,7 +4,7 @@ import { getCurrentUser } from '../../utils/auth'
import { createApiError } from '../../utils/api-error'
import { MAX_DELETE_BATCH } from '../../utils/constants'
import { getImageIndexRow } from '../../utils/image-index'
import { toCanonicalImageKey, validateImageKey } from '../../utils/image-key'
import { toCanonicalImageKey, validateStorageKey } from '../../utils/image-key'
import {
addTagsToImage,
removeTagFromImage
@@ -20,7 +20,7 @@ interface BatchTagsBody {
function validateKeys(keys: string[]): void {
for (const key of keys) {
if (
!validateImageKey(key)
!validateStorageKey(key)
&& !toCanonicalImageKey(key)
&& !getImageIndexRow(key)
) {
+41
View File
@@ -0,0 +1,41 @@
import { getImageUserFilter, requireApiOrAdminAuth } from '../../utils/access'
import { createApiError } from '../../utils/api-error'
import { getMediaStats } from '../../utils/image-index'
import { buildBackendCapacity } from '../../utils/storage-capacity'
import { getActiveBackendRow } from '../../utils/storage/resolver'
import type { MediaType } from '../../utils/storage/types'
const ALLOWED_KINDS: MediaType[] = ['image', 'video', 'file']
export default defineEventHandler(async (event) => {
await requireApiOrAdminAuth(event)
const query = getQuery(event)
const kindRaw = typeof query.kind === 'string' ? query.kind.trim() : 'image'
const kind = ALLOWED_KINDS.find(item => item === kindRaw)
if (!kind) {
createApiError(event, 'INVALID_REQUEST', '无效的统计类型', 400)
}
const userFilter = await getImageUserFilter(event)
const stats = getMediaStats(kind, userFilter)
const backend = getActiveBackendRow()
const capacity = backend
? await buildBackendCapacity(
backend.id,
backend.type,
stats.uploadBytesTotal,
backend.quota_bytes
)
: { totalBytes: null, percent: null }
return {
...stats,
storageUsage: {
usedBytes: stats.uploadBytesTotal,
totalBytes: capacity.totalBytes,
percent: capacity.percent
}
}
})
+11
View File
@@ -15,9 +15,11 @@ import {
SETTINGS_TURNSTILE_SECRET_KEY,
SETTINGS_CAP_API_ENDPOINT,
SETTINGS_CAP_SECRET,
SETTINGS_FILE_BED_ACCESS,
setAllowRegistration
} from '../../utils/db'
import {
parseFileBedAccessMode,
getSettingsPayload,
isValidImageBaseUrl,
isValidRefererHost,
@@ -68,6 +70,7 @@ interface SettingsPatchBody {
loginRateMax?: unknown
loginRateWindowMinutes?: unknown
preserveOriginalUpload?: unknown
fileBedAccess?: unknown
}
export default defineEventHandler(async (event) => {
@@ -333,6 +336,14 @@ export default defineEventHandler(async (event) => {
setUploadPolicySettings({ preserveOriginalUpload: body.preserveOriginalUpload })
}
if (body.fileBedAccess !== undefined) {
const mode = parseFileBedAccessMode(String(body.fileBedAccess))
if (!mode) {
createApiError(event, 'INVALID_REQUEST', '文件床访问方式无效', 400)
}
setSetting(SETTINGS_FILE_BED_ACCESS, mode)
}
logActivity(event, {
action: 'settings',
key: 'settings/system',
@@ -0,0 +1,22 @@
import { requireUserAuth } from '../../utils/access'
import {
getTranscodeSettings,
MAX_TRANSCODE_CONCURRENCY,
MAX_TRANSCODE_THREADS,
MAX_TRANSCODE_BITRATE_PERCENT,
MIN_TRANSCODE_BITRATE_PERCENT,
TRANSCODE_PRESETS
} from '../../utils/transcode'
export default defineEventHandler(async (event) => {
await requireUserAuth(event)
return {
...getTranscodeSettings(),
maxConcurrency: MAX_TRANSCODE_CONCURRENCY,
maxThreads: MAX_TRANSCODE_THREADS,
minBitratePercent: MIN_TRANSCODE_BITRATE_PERCENT,
maxBitratePercent: MAX_TRANSCODE_BITRATE_PERCENT,
presets: TRANSCODE_PRESETS
}
})
@@ -0,0 +1,80 @@
import { requireAdminAuth } from '../../utils/access'
import { createApiError } from '../../utils/api-error'
import {
MAX_TRANSCODE_CONCURRENCY,
MAX_TRANSCODE_THREADS,
MAX_TRANSCODE_BITRATE_PERCENT,
MIN_TRANSCODE_BITRATE_PERCENT,
parseTranscodePreset,
setTranscodeSettings
} from '../../utils/transcode'
interface TranscodeSettingsPatch {
concurrency?: unknown
threads?: unknown
preset?: unknown
bitratePercent?: unknown
}
export default defineEventHandler(async (event) => {
await requireAdminAuth(event)
const body = await readBody<TranscodeSettingsPatch>(event).catch(
(): TranscodeSettingsPatch => ({})
)
const full: Parameters<typeof setTranscodeSettings>[0] = {}
if (body.concurrency !== undefined) {
const value = Number(body.concurrency)
if (!Number.isInteger(value) || value < 1 || value > MAX_TRANSCODE_CONCURRENCY) {
createApiError(
event,
'INVALID_REQUEST',
`并发转码数量需为 1–${MAX_TRANSCODE_CONCURRENCY} 的整数`,
400
)
}
full.concurrency = value
}
if (body.threads !== undefined) {
const value = Number(body.threads)
if (!Number.isInteger(value) || value < 1 || value > MAX_TRANSCODE_THREADS) {
createApiError(
event,
'INVALID_REQUEST',
`限制核心数需为 1–${MAX_TRANSCODE_THREADS} 的整数`,
400
)
}
full.threads = value
}
if (body.preset !== undefined) {
const preset = parseTranscodePreset(String(body.preset))
if (!preset) {
createApiError(event, 'INVALID_REQUEST', '无效的转码质量档位', 400)
}
full.preset = preset
}
if (body.bitratePercent !== undefined) {
const value = Number(body.bitratePercent)
if (
!Number.isInteger(value)
|| value < MIN_TRANSCODE_BITRATE_PERCENT
|| value > MAX_TRANSCODE_BITRATE_PERCENT
) {
createApiError(
event,
'INVALID_REQUEST',
`码率需为 ${MIN_TRANSCODE_BITRATE_PERCENT}–${MAX_TRANSCODE_BITRATE_PERCENT} 的整数`,
400
)
}
full.bitratePercent = value
}
return setTranscodeSettings(full)
})
+94
View File
@@ -0,0 +1,94 @@
import { readMultipartFormData } from 'h3'
import type { FileItem, FileUploadResponse } from '~/types/file'
import type { UploadErrorItem } from '~/types/image'
import {
getUploadUserId,
requireUploadAuth,
verifyApiUploadToken
} from '../../utils/access'
import { MAX_FILES_PER_UPLOAD } from '../../utils/constants'
import { createApiError } from '../../utils/api-error'
import { checkUploadRateLimit } from '../../utils/rate-limit'
import { processSingleVideoUpload } from '../../utils/file-bed'
import { enqueueTranscode } from '../../utils/transcode'
import { getFileBedAccessMode } from '../../utils/env'
export default defineEventHandler(async (event) => {
await requireUploadAuth(event)
const formData = await readMultipartFormData(event)
if (!formData?.length) {
createApiError(event, 'INVALID_REQUEST', '未收到上传文件', 400)
}
const tokenField = formData.find(part => part.name === 'token')
const formToken = tokenField?.data?.length
? new TextDecoder().decode(tokenField.data).trim()
: ''
checkUploadRateLimit(event, formToken)
const source = verifyApiUploadToken(event) ? 'api' : 'web'
const uploadUserId = await getUploadUserId(event, formToken)
const transcodeField = formData.find(part => part.name === 'transcode')
const wantTranscode = transcodeField?.data?.length
? ['1', 'true', 'yes'].includes(
new TextDecoder().decode(transcodeField.data).trim().toLowerCase()
)
: false
const fileParts = formData.filter(
part => (part.name === 'file' || part.name === 'files' || part.name === 'video')
&& part.data?.length
)
if (!fileParts.length) {
createApiError(event, 'INVALID_REQUEST', '未收到上传文件', 400)
}
if (fileParts.length > MAX_FILES_PER_UPLOAD) {
createApiError(
event,
'TOO_MANY_FILES',
`每次最多上传 ${MAX_FILES_PER_UPLOAD} 个视频`,
400
)
}
const items: FileItem[] = []
const errors: UploadErrorItem[] = []
for (const part of fileParts) {
const result = await processSingleVideoUpload(event, {
bytes: new Uint8Array(part.data),
filename: part.filename,
contentType: part.type,
source,
userId: uploadUserId
})
if ('error' in result) {
errors.push(result.error)
} else {
items.push(result.item)
}
}
const response: FileUploadResponse = {
success: items.length > 0,
items,
errors,
accessMode: getFileBedAccessMode()
}
if (wantTranscode) {
for (const item of items) {
enqueueTranscode(item.key)
}
}
if (!items.length && errors.length) {
setResponseStatus(event, 400)
}
return response
})
+38 -1
View File
@@ -1,7 +1,16 @@
import { getDataDir } from '../utils/data-dir'
import { promises as fs } from 'node:fs'
import { tmpdir } from 'node:os'
import { join } from 'node:path'
import { runAutoDeleteCleanup } from '../utils/auto-delete'
import { migrateLocalImagesToIndex, purgeOrphanImageIndexRows, reconcileLegacyImageKeys, repairLocalImageIndexMetadata } from '../utils/image-index'
import { ensureDefaultBackends } from '../utils/storage-backends'
import {
cleanupTranscodedSources,
killOrphanFfmpeg,
purgeOrphanVideoAssets,
resumePendingTranscodes
} from '../utils/transcode'
import { logException, logInfo } from '../utils/logger'
export default defineNitroPlugin(() => {
@@ -17,10 +26,26 @@ export default defineNitroPlugin(() => {
ensureDefaultBackends()
/** 清理上次异常退出留下的转码临时目录 */
void (async () => {
try {
const entries = await fs.readdir(tmpdir(), { withFileTypes: true })
for (const entry of entries) {
if (!entry.isDirectory() || !entry.name.startsWith('pichost-hls-')) continue
await fs.rm(join(tmpdir(), entry.name), { recursive: true, force: true })
.catch(() => {})
}
} catch {
// 清理失败不影响启动
}
})()
void (async () => {
const dataDir = getDataDir()
try {
logInfo('开始同步图片索引:扫描本地磁盘', { path: `${dataDir}/images/` })
logInfo('开始同步存储索引:扫描本地磁盘', {
path: `${dataDir}/images/, ${dataDir}/files/, ${dataDir}/videos/`
})
const inserted = await migrateLocalImagesToIndex()
if (inserted > 0) {
@@ -54,6 +79,18 @@ export default defineNitroPlugin(() => {
}
logInfo('图片索引同步结束')
logInfo('开始恢复未完成的视频转码任务')
await killOrphanFfmpeg()
const purgedAssets = await purgeOrphanVideoAssets()
if (purgedAssets > 0) {
logInfo('清理无主的视频附属文件', { removed: purgedAssets })
}
const removedSources = await cleanupTranscodedSources()
if (removedSources > 0) {
logInfo('清理转码完成后的源视频', { removed: removedSources })
}
resumePendingTranscodes()
} catch (error) {
logException('图片索引同步失败', error)
}
+18
View File
@@ -286,3 +286,21 @@ export async function getUploadUserId(
return null
}
/** 文件床直链在 Token 模式下的校验:Auth-Token 头、?token= 查询参数或已登录会话 */
export async function isFileAccessAuthorized(event: H3Event): Promise<boolean> {
if (devBypass(event)) return true
if (verifyApiUploadToken(event)) return true
const queryToken = getQuery(event).token
if (
typeof queryToken === 'string'
&& queryToken
&& verifyUploadTokenValue(event, queryToken)
) {
return true
}
const user = await getCurrentUser(event)
return Boolean(user)
}
+30
View File
@@ -17,3 +17,33 @@ export const MAX_LIST_LIMIT = 100
export const IMAGE_CACHE_CONTROL
= 'public, max-age=86400, s-maxage=604800, stale-while-revalidate=86400'
/** 文件床单文件上限(当前上传全量读入内存,限制在可控范围) */
export const MAX_FILE_BED_FILE_SIZE = 100 * 1024 * 1024
/** 视频床单文件上限 */
export const MAX_VIDEO_FILE_SIZE = 500 * 1024 * 1024
/** 文件床禁止的扩展名:避免上传的文件被浏览器当作脚本或页面执行 */
export const FORBIDDEN_FILE_EXTENSIONS = ['html', 'htm', 'svg'] as const
/** 视频床允许的扩展名 */
export const VIDEO_EXTENSIONS = [
'mp4',
'm4v',
'webm',
'mov',
'mkv',
'avi',
'flv',
'wmv',
'mpg',
'mpeg',
'ts',
'm3u8'
] as const
/** 文件床直链缓存:公开访问可长期缓存,Token 访问不能进共享缓存 */
export const FILE_CACHE_CONTROL
= 'public, max-age=86400, s-maxage=604800, stale-while-revalidate=86400'
export const FILE_PRIVATE_CACHE_CONTROL = 'private, no-store'
+29 -1
View File
@@ -1,3 +1,31 @@
/** 常见文件床类型的扩展名推断(仅在索引缺失元数据时使用) */
const EXTRA_TYPES: Record<string, string> = {
'pdf': 'application/pdf',
'zip': 'application/zip',
'7z': 'application/x-7z-compressed',
'rar': 'application/vnd.rar',
'gz': 'application/gzip',
'tar': 'application/x-tar',
'txt': 'text/plain; charset=utf-8',
'md': 'text/markdown; charset=utf-8',
'json': 'application/json',
'csv': 'text/csv; charset=utf-8',
'mp3': 'audio/mpeg',
'mp4': 'video/mp4',
'm4v': 'video/x-m4v',
'webm': 'video/webm',
'mov': 'video/quicktime',
'mkv': 'video/x-matroska',
'avi': 'video/x-msvideo',
'flv': 'video/x-flv',
'wmv': 'video/x-ms-wmv',
'mpg': 'video/mpeg',
'mpeg': 'video/mpeg',
'ts': 'video/mp2t',
'm3u8': 'application/vnd.apple.mpegurl',
'apk': 'application/vnd.android.package-archive'
}
export function contentTypeFromKey(key: string): string {
const ext = key.split('.').pop()?.toLowerCase()
switch (ext) {
@@ -15,6 +43,6 @@ export function contentTypeFromKey(key: string): string {
case 'ico':
return 'image/x-icon'
default:
return 'application/octet-stream'
return (ext && EXTRA_TYPES[ext]) || 'application/octet-stream'
}
}
+5
View File
@@ -500,6 +500,11 @@ export function deleteSessionsForUser(userId: number): void {
export const SETTINGS_API_UPLOAD_TOKEN = 'api_upload_token'
export const SETTINGS_WEBP_QUALITY = 'webp_quality'
export const SETTINGS_ALLOWED_REFERER_HOSTS = 'allowed_referer_hosts'
export const SETTINGS_FILE_BED_ACCESS = 'file_bed_access'
export const SETTINGS_TRANSCODE_CONCURRENCY = 'transcode_concurrency'
export const SETTINGS_TRANSCODE_THREADS = 'transcode_threads'
export const SETTINGS_TRANSCODE_PRESET = 'transcode_preset'
export const SETTINGS_TRANSCODE_BITRATE = 'transcode_bitrate_percent'
export const SETTINGS_HIDE_FOLDER_IN_URL = 'hide_folder_in_url'
export const SETTINGS_STORAGE_USE_DATE_PATH = 'storage_use_date_path'
export const SETTINGS_SITE_BASE_URL = 'site_base_url'
+17
View File
@@ -10,6 +10,7 @@ import {
SETTINGS_STORAGE_USE_DATE_PATH,
SETTINGS_IMAGE_BASE_URL,
SETTINGS_SITE_BASE_URL,
SETTINGS_FILE_BED_ACCESS,
SETTINGS_WEBP_QUALITY,
SETTINGS_LOGIN_VERIFICATION_METHOD,
SETTINGS_TURNSTILE_SITE_KEY,
@@ -20,6 +21,21 @@ import {
} from './db'
import { getUploadPolicySettingsPayload } from './upload-policy'
export type FileBedAccessMode = 'public' | 'token'
export function parseFileBedAccessMode(
raw: string | null | undefined
): FileBedAccessMode | null {
const value = raw?.trim().toLowerCase()
if (value === 'public' || value === 'token') return value
return null
}
/** 文件床直链访问方式:公开直链或需要 Token(默认公开) */
export function getFileBedAccessMode(): FileBedAccessMode {
return parseFileBedAccessMode(getSetting(SETTINGS_FILE_BED_ACCESS)) ?? 'public'
}
export function getRuntimeEnv(
event: H3Event,
envKey: string,
@@ -688,6 +704,7 @@ export function getSettingsPayload(event: H3Event) {
autoDeleteDays,
autoDeleteDaysSource: getAutoDeleteDaysSource(),
autoDeleteEnvFallback: parseAutoDeleteDays(getAutoDeleteDaysFromEnv()) ?? 0,
fileBedAccess: getFileBedAccessMode(),
allowRegistration: isAllowRegistration(),
loginVerificationMethod: getLoginVerificationMethod(event),
turnstileSiteKey: getTurnstileSiteKeyConfigured(event),
+178
View File
@@ -0,0 +1,178 @@
import { describe, expect, it } from 'vitest'
import {
buildAttachmentDisposition,
isForbiddenFileExtension,
normalizeFileContentType,
normalizeVideoContentType,
sanitizeDownloadName
} from './file-bed'
import {
extensionFromFilename,
generateFileKey,
generateVideoKey,
isVideoExtension,
validateFileKey,
validateStorageKey,
validateVideoKey
} from './image-key'
import { parseFileBedAccessMode } from './env'
describe('isForbiddenFileExtension', () => {
it('blocks html, htm and svg regardless of case', () => {
expect(isForbiddenFileExtension('html')).toBe(true)
expect(isForbiddenFileExtension('HTM')).toBe(true)
expect(isForbiddenFileExtension('svg')).toBe(true)
})
it('allows other extensions', () => {
expect(isForbiddenFileExtension('pdf')).toBe(false)
expect(isForbiddenFileExtension('')).toBe(false)
})
})
describe('sanitizeDownloadName', () => {
it('keeps unicode names and strips path segments', () => {
expect(sanitizeDownloadName('C:\\path/设计稿.pdf')).toBe('设计稿.pdf')
})
it('replaces reserved characters', () => {
expect(sanitizeDownloadName('a"b<c>.txt')).toBe('a_b_c_.txt')
})
it('falls back when the name is empty', () => {
expect(sanitizeDownloadName('')).toBe('file')
})
})
describe('buildAttachmentDisposition', () => {
it('includes an ascii fallback and a utf-8 filename', () => {
const value = buildAttachmentDisposition('报告.pdf')
expect(value.startsWith('attachment; ')).toBe(true)
expect(value).toContain('filename="__.pdf"')
expect(value).toContain(`filename*=UTF-8''${encodeURIComponent('报告.pdf')}`)
})
})
describe('normalizeFileContentType', () => {
it('keeps valid mime types', () => {
expect(normalizeFileContentType('application/pdf; charset=binary', 'pdf'))
.toBe('application/pdf')
})
it('infers from the extension when the declared type is invalid', () => {
expect(normalizeFileContentType('not a mime', 'pdf')).toBe('application/pdf')
expect(normalizeFileContentType(undefined, 'mp4')).toBe('video/mp4')
})
it('falls back to octet-stream without an extension', () => {
expect(normalizeFileContentType('', '')).toBe('application/octet-stream')
})
})
describe('extensionFromFilename', () => {
it('lowercases and sanitizes the extension', () => {
expect(extensionFromFilename('a/b/报告.PDF')).toBe('pdf')
expect(extensionFromFilename('archive.tar.gz')).toBe('gz')
})
it('returns empty for files without a usable extension', () => {
expect(extensionFromFilename('README')).toBe('')
expect(extensionFromFilename('.env')).toBe('')
})
})
describe('validateFileKey', () => {
it('accepts files/ keys with or without extension', () => {
expect(validateFileKey('files/2026/10/abc123.pdf')).toBe(true)
expect(validateFileKey('files/abc123')).toBe(true)
})
it('rejects traversal, absolute and image keys', () => {
expect(validateFileKey('files/../../etc/passwd')).toBe(false)
expect(validateFileKey('/files/a.pdf')).toBe(false)
expect(validateFileKey('images/2026/10/a.webp')).toBe(false)
expect(validateFileKey('../files/a.pdf')).toBe(false)
})
it('keeps image keys working through validateStorageKey', () => {
expect(validateStorageKey('images/2026/10/a.webp')).toBe(true)
expect(validateStorageKey('files/2026/10/a.pdf')).toBe(true)
expect(validateStorageKey('other/2026/10/a.pdf')).toBe(false)
})
})
describe('generateFileKey', () => {
const date = new Date('2026-10-16T00:00:00Z')
it('builds a dated key with the sanitized extension', () => {
expect(generateFileKey('pdf', date)).toMatch(/^files\/2026\/10\/[A-Za-z0-9]{12}\.pdf$/)
})
it('drops unknown extensions and supports flat layout', () => {
expect(generateFileKey('../../etc', date)).toMatch(/^files\/2026\/10\/[A-Za-z0-9]{12}$/)
expect(generateFileKey('', date, 'flat')).toMatch(/^files\/[A-Za-z0-9]{12}$/)
})
})
describe('parseFileBedAccessMode', () => {
it('parses known modes and rejects others', () => {
expect(parseFileBedAccessMode('public')).toBe('public')
expect(parseFileBedAccessMode(' TOKEN ')).toBe('token')
expect(parseFileBedAccessMode('other')).toBeNull()
expect(parseFileBedAccessMode(null)).toBeNull()
})
})
describe('isVideoExtension', () => {
it('accepts common video containers', () => {
expect(isVideoExtension('mp4')).toBe(true)
expect(isVideoExtension('MP4')).toBe(true)
expect(isVideoExtension('webm')).toBe(true)
expect(isVideoExtension('mkv')).toBe(true)
})
it('rejects non-video extensions', () => {
expect(isVideoExtension('png')).toBe(false)
expect(isVideoExtension('pdf')).toBe(false)
expect(isVideoExtension('')).toBe(false)
})
})
describe('validateVideoKey', () => {
it('accepts videos/ keys with a video extension', () => {
expect(validateVideoKey('videos/2026/10/abc123.mp4')).toBe(true)
expect(validateVideoKey('videos/2026/10/abc123.MKV')).toBe(true)
})
it('rejects other folders, non-video extensions and traversal', () => {
expect(validateVideoKey('files/2026/10/abc123.mp4')).toBe(false)
expect(validateVideoKey('videos/2026/10/abc123.txt')).toBe(false)
expect(validateVideoKey('videos/../../etc/passwd')).toBe(false)
expect(validateVideoKey('/videos/a.mp4')).toBe(false)
})
it('is covered by validateStorageKey', () => {
expect(validateStorageKey('videos/2026/10/a.mp4')).toBe(true)
})
})
describe('generateVideoKey', () => {
const date = new Date('2026-10-16T00:00:00Z')
it('builds a dated key and keeps the extension', () => {
expect(generateVideoKey('mp4', date)).toMatch(/^videos\/2026\/10\/[A-Za-z0-9]{12}\.mp4$/)
expect(generateVideoKey('', date)).toMatch(/^videos\/2026\/10\/[A-Za-z0-9]{12}\.mp4$/)
})
})
describe('normalizeVideoContentType', () => {
it('keeps declared video mime types', () => {
expect(normalizeVideoContentType('video/mp4', 'mp4')).toBe('video/mp4')
})
it('falls back to the extension when the declared type is not a video', () => {
expect(normalizeVideoContentType('application/octet-stream', 'mkv'))
.toBe('video/x-matroska')
expect(normalizeVideoContentType(undefined, 'm4v')).toBe('video/x-m4v')
})
})
+310
View File
@@ -0,0 +1,310 @@
import type { H3Event } from 'h3'
import type { UploadErrorItem } from '~/types/image'
import type { FileItem } from '~/types/file'
import {
FORBIDDEN_FILE_EXTENSIONS,
MAX_FILE_BED_FILE_SIZE,
MAX_VIDEO_FILE_SIZE
} from './constants'
import { contentTypeFromKey } from './content-type'
import {
extensionFromFilename,
generateFileKey,
generateVideoKey,
isVideoExtension
} from './image-key'
import { getStorageLayout } from './env'
import { resolveImageUrl } from './image-response'
import type { LogSource } from './db'
import type { MediaType } from './storage/types'
import { logActivity } from './activity-log'
import { logException, logInfo } from './logger'
import { putImage } from './storage'
import { generateVideoThumbnail } from './transcode'
import { updateImageThumb } from './image-index'
/** 文件床禁止上传的扩展名(html / htm / svg) */
export function isForbiddenFileExtension(extension: string): boolean {
if (!extension) return false
return (FORBIDDEN_FILE_EXTENSIONS as readonly string[]).includes(extension.toLowerCase())
}
/** 下载文件名清洗:保留中文等字符,去掉路径与控制字符 */
export function sanitizeDownloadName(name: string): string {
const base = name.split(/[/\\]/).pop() ?? 'file'
const withoutControl = Array.from(base)
.filter(char => char.charCodeAt(0) > 0x1f && char.charCodeAt(0) !== 0x7f)
.join('')
const cleaned = withoutControl
.replace(/["<>|:*?]/g, '_')
.trim()
return cleaned.slice(0, 200) || 'file'
}
/** RFC 5987 兼容的附件下载响应头值 */
export function buildAttachmentDisposition(name: string): string {
const safe = sanitizeDownloadName(name)
const ascii = safe.replace(/[^\x20-\x7e]/g, '_').replace(/["\\]/g, '_')
return `attachment; filename="${ascii}"; filename*=UTF-8''${encodeURIComponent(safe)}`
}
export function generateFileStorageKey(originalName: string, date = new Date()): string {
return generateFileKey(extensionFromFilename(originalName), date, getStorageLayout())
}
export function generateVideoStorageKey(originalName: string, date = new Date()): string {
return generateVideoKey(extensionFromFilename(originalName), date, getStorageLayout())
}
/** 声明 MIME 清洗;不合法时按扩展名推断 */
export function normalizeFileContentType(
declared: string | undefined,
extension: string
): string {
const value = (declared ?? '').split(';')[0]!.trim().toLowerCase()
const valid = /^[a-z0-9][a-z0-9!#$&^_.+-]*\/[a-z0-9][a-z0-9!#$&^_.+-]*$/.test(value)
if (valid) return value
return extension ? contentTypeFromKey(`file.${extension}`) : 'application/octet-stream'
}
/** 视频必须落到 video/* 上,否则按扩展名推断 */
export function normalizeVideoContentType(
declared: string | undefined,
extension: string
): string {
const normalized = normalizeFileContentType(declared, extension)
if (normalized.startsWith('video/')) return normalized
return contentTypeFromKey(`video.${extension}`)
}
export function buildFileItem(input: {
event: H3Event
key: string
backendId?: string
originalName: string
contentType: string
size: number
uploadedAt: string
}): FileItem {
const url = resolveImageUrl(input.event, input.key, input.backendId)
const name = sanitizeDownloadName(input.originalName)
return {
key: input.key,
url,
originalName: name,
contentType: input.contentType,
size: input.size,
uploadedAt: input.uploadedAt,
markdown: `[${name}](${url})`
}
}
export async function processSingleFileUpload(
event: H3Event,
input: {
bytes: Uint8Array
filename?: string
contentType?: string
source?: LogSource
userId?: number | null
}
): Promise<{ item: FileItem } | { error: UploadErrorItem }> {
const originalName = sanitizeDownloadName(input.filename ?? 'file')
const bytes = input.bytes
if (!bytes.byteLength) {
return {
error: {
name: originalName,
error: { code: 'INVALID_REQUEST', message: '文件内容为空' }
}
}
}
if (bytes.byteLength > MAX_FILE_BED_FILE_SIZE) {
return {
error: {
name: originalName,
error: {
code: 'FILE_TOO_LARGE',
message: `单个文件不能超过 ${Math.round(MAX_FILE_BED_FILE_SIZE / 1024 / 1024)}MB`
}
}
}
}
const extension = extensionFromFilename(originalName)
if (isForbiddenFileExtension(extension)) {
return {
error: {
name: originalName,
error: {
code: 'UNSUPPORTED_FILE_TYPE',
message: '不允许上传 html / htm / svg 文件'
}
}
}
}
const uploadedAt = new Date().toISOString()
const key = generateFileStorageKey(originalName, new Date(uploadedAt))
return persistMediaUpload(event, {
key,
bytes,
originalName,
uploadedAt,
contentType: normalizeFileContentType(input.contentType, extension),
source: input.source,
userId: input.userId,
mediaType: 'file'
})
}
/** 写存储 + 建索引 + 记日志 + 组装返回项(文件床与视频床共用) */
async function persistMediaUpload(
event: H3Event,
input: {
key: string
bytes: Uint8Array
originalName: string
uploadedAt: string
contentType: string
source?: LogSource
userId?: number | null
mediaType: MediaType
}
): Promise<{ item: FileItem } | { error: UploadErrorItem }> {
let backendId: string
try {
backendId = await putImage(input.key, input.bytes, {
originalName: input.originalName,
uploadedAt: input.uploadedAt,
contentType: input.contentType,
size: input.bytes.byteLength,
userId: input.userId ?? null,
mediaType: input.mediaType
})
} catch (error) {
logException('upload failed: storage error', error, {
name: input.originalName,
source: input.source ?? 'web'
})
const detail = error instanceof Error ? error.message.trim() : ''
return {
error: {
name: input.originalName,
error: {
code: 'UPLOAD_FAILED',
message: detail.startsWith('Telegram') || detail.includes('群组')
? detail
: '上传失败,请稍后重试'
}
}
}
}
logActivity(event, {
action: 'upload',
key: input.key,
originalName: input.originalName,
size: input.bytes.byteLength,
contentType: input.contentType,
source: input.source,
userId: input.userId ?? null,
backendId
})
logInfo(`${input.mediaType} upload success`, {
key: input.key,
size: input.bytes.byteLength,
contentType: input.contentType,
source: input.source ?? 'web'
})
return {
item: buildFileItem({
event,
key: input.key,
backendId,
originalName: input.originalName,
contentType: input.contentType,
size: input.bytes.byteLength,
uploadedAt: input.uploadedAt
})
}
}
export async function processSingleVideoUpload(
event: H3Event,
input: {
bytes: Uint8Array
filename?: string
contentType?: string
source?: LogSource
userId?: number | null
}
): Promise<{ item: FileItem } | { error: UploadErrorItem }> {
const originalName = sanitizeDownloadName(input.filename ?? 'video')
const bytes = input.bytes
if (!bytes.byteLength) {
return {
error: {
name: originalName,
error: { code: 'INVALID_REQUEST', message: '文件内容为空' }
}
}
}
if (bytes.byteLength > MAX_VIDEO_FILE_SIZE) {
return {
error: {
name: originalName,
error: {
code: 'FILE_TOO_LARGE',
message: `单个视频不能超过 ${Math.round(MAX_VIDEO_FILE_SIZE / 1024 / 1024)}MB`
}
}
}
}
const extension = extensionFromFilename(originalName)
if (!isVideoExtension(extension)) {
return {
error: {
name: originalName,
error: {
code: 'UNSUPPORTED_FILE_TYPE',
message: '只支持常见视频格式(MP4 / WebM / MOV / MKV 等)'
}
}
}
}
const uploadedAt = new Date().toISOString()
const key = generateVideoStorageKey(originalName, new Date(uploadedAt))
const result = await persistMediaUpload(event, {
key,
bytes,
originalName,
uploadedAt,
contentType: normalizeVideoContentType(input.contentType, extension),
source: input.source,
userId: input.userId,
mediaType: 'video'
})
// 生成封面缩略图;失败不影响上传结果
if ('item' in result) {
const thumbKey = await generateVideoThumbnail(key).catch(() => null)
if (thumbKey) {
updateImageThumb(key, thumbKey)
result.item.thumbUrl = resolveImageUrl(event, thumbKey)
}
}
return result
}
+228 -23
View File
@@ -3,7 +3,16 @@ import { dirname, join } from 'node:path'
import { getDb, getUploadSourcesForKeys } from './db'
import { getDataDir } from './data-dir'
import { contentTypeFromKey } from './content-type'
import { DEFAULT_FOLDER, toCanonicalImageKey, validateImageKey } from './image-key'
import {
DEFAULT_FOLDER,
FILE_FOLDER,
VIDEO_FOLDER,
isVideoSidecarKey,
mediaTypeForKey,
toCanonicalImageKey,
validateImageKey,
validateStorageKey
} from './image-key'
import { buildTagFilterSql, type TagFilterInput } from './tags'
import { isBareImageFilename, isHiddenImageDatePath } from './image-public-path'
import {
@@ -11,7 +20,13 @@ import {
ensureStorageSchema,
LOCAL_BACKEND_ID
} from './storage-backends'
import type { PaginatedResult, StoredImage, StoredImageMeta } from './storage/types'
import type {
MediaType,
PaginatedResult,
StoredImage,
StoredImageMeta,
TranscodeStatus
} from './storage/types'
const META_SUFFIX = '.meta.json'
@@ -24,6 +39,12 @@ export interface ImageIndexRow {
content_type: string
size: number
uploaded_at: string
hls_key: string | null
transcode_status: string
transcode_progress: number
thumb_key: string | null
source_deleted: number
transcode_preset: string | null
}
function keyToFilePath(key: string): string {
@@ -49,6 +70,12 @@ function rowToStoredImage(row: ImageIndexRow): StoredImage {
contentType: row.content_type,
size: row.size,
userId: row.user_id,
hlsKey: row.hls_key ?? null,
transcodeStatus: (row.transcode_status ?? 'none') as TranscodeStatus,
transcodeProgress: Number(row.transcode_progress ?? 0),
thumbKey: row.thumb_key ?? null,
sourceDeleted: Number(row.source_deleted ?? 0) === 1,
transcodePreset: row.transcode_preset ?? null,
mtimeMs: Number.isFinite(uploadedMs) ? uploadedMs : Date.now()
}
}
@@ -70,13 +97,14 @@ export function insertImageIndex(input: {
contentType: string
size: number
uploadedAt: string
mediaType?: MediaType
}): void {
ensureStorageSchema()
const folder = input.key.split('/')[0] ?? DEFAULT_FOLDER
getDb().prepare(`
INSERT INTO images
(key, backend_id, user_id, folder, original_name, content_type, size, uploaded_at)
VALUES (?, ?, ?, ?, ?, ?, ?, ?)
(key, backend_id, user_id, folder, original_name, content_type, size, uploaded_at, media_type)
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
ON CONFLICT(key) DO UPDATE SET
backend_id = excluded.backend_id,
user_id = excluded.user_id,
@@ -84,7 +112,8 @@ export function insertImageIndex(input: {
original_name = excluded.original_name,
content_type = excluded.content_type,
size = excluded.size,
uploaded_at = excluded.uploaded_at
uploaded_at = excluded.uploaded_at,
media_type = excluded.media_type
`).run(
input.key,
input.backendId,
@@ -93,7 +122,8 @@ export function insertImageIndex(input: {
input.originalName,
input.contentType,
input.size,
input.uploadedAt
input.uploadedAt,
input.mediaType ?? 'image'
)
}
@@ -180,11 +210,13 @@ export async function reconcileLegacyImageKeys(): Promise<{
export async function purgeOrphanImageIndexRows(): Promise<number> {
ensureStorageSchema()
const rows = getDb().prepare(`
SELECT key, backend_id FROM images
`).all() as Array<{ key: string, backend_id: string }>
SELECT key, backend_id, source_deleted FROM images
`).all() as Array<{ key: string, backend_id: string, source_deleted: number }>
let removed = 0
for (const row of rows) {
// 转码成功后源文件是主动删除的,索引要保留(播放走 HLS)
if (Number(row.source_deleted ?? 0) === 1) continue
if (row.backend_id !== LOCAL_BACKEND_ID) continue
if (await fileExistsAtKey(row.key)) continue
const canonical = toCanonicalImageKey(row.key)
@@ -198,7 +230,7 @@ export async function purgeOrphanImageIndexRows(): Promise<number> {
export function getImageIndexRow(key: string): ImageIndexRow | null {
ensureStorageSchema()
const row = getDb().prepare(`
SELECT key, backend_id, user_id, folder, original_name, content_type, size, uploaded_at
SELECT key, backend_id, user_id, folder, original_name, content_type, size, uploaded_at, hls_key, transcode_status, transcode_progress, thumb_key, source_deleted, transcode_preset
FROM images
WHERE key = ?
`).get(key) as ImageIndexRow | undefined
@@ -217,7 +249,7 @@ export function findImageKeyByDatePath(datePath: string): string | null {
ensureStorageSchema()
const suffix = `/${datePath}`
const rows = getDb().prepare(`
SELECT key FROM images WHERE key LIKE ?
SELECT key FROM images WHERE media_type = 'image' AND key LIKE ?
`).all(`%${suffix}`) as Array<{ key: string }>
if (rows.length === 0) {
@@ -240,7 +272,7 @@ export function findImageKeyByFilename(filename: string): string | null {
ensureStorageSchema()
const suffix = `/${filename}`
const rows = getDb().prepare(`
SELECT key FROM images WHERE key LIKE ?
SELECT key FROM images WHERE media_type = 'image' AND key LIKE ?
`).all(`%${suffix}`) as Array<{ key: string }>
if (rows.length === 0) {
@@ -274,7 +306,7 @@ async function collectImageKeysRecursive(
} else if (entry.isFile()) {
if (name.endsWith(META_SUFFIX)) continue
const key = `${keyPrefix}/${name}`
if (validateImageKey(key)) keys.push(key)
if (validateStorageKey(key)) keys.push(key)
}
}
} catch {
@@ -284,17 +316,25 @@ async function collectImageKeysRecursive(
return keys
}
async function listLocalImageKeys(): Promise<string[]> {
const imagesRoot = join(getDataDir(), DEFAULT_FOLDER)
return collectImageKeysRecursive(imagesRoot, DEFAULT_FOLDER)
/** 扫描本地磁盘的 images/、files/ 与 videos/ 目录 */
async function listLocalStorageKeys(): Promise<string[]> {
const keys: string[] = []
for (const root of [DEFAULT_FOLDER, FILE_FOLDER, VIDEO_FOLDER]) {
const found = await collectImageKeysRecursive(join(getDataDir(), root), root)
keys.push(...found)
}
return keys
}
export async function migrateLocalImagesToIndex(): Promise<number> {
ensureDefaultBackends()
const keys = await listLocalImageKeys()
const keys = await listLocalStorageKeys()
let inserted = 0
for (const key of keys) {
// HLS 播放列表与分片属于视频的附属产物,不进索引
if (isVideoSidecarKey(key)) continue
const existing = getImageIndexRow(key)
if (existing) continue
@@ -320,7 +360,8 @@ export async function migrateLocalImagesToIndex(): Promise<number> {
originalName: meta.originalName ?? key.split('/').pop() ?? 'image',
contentType,
size: stat.size,
uploadedAt
uploadedAt,
mediaType: mediaTypeForKey(key) as MediaType
})
inserted++
}
@@ -382,7 +423,7 @@ export function getImageTotals(): { count: number, bytes: number } {
export function listAllImageIndexRows(): ImageIndexRow[] {
ensureStorageSchema()
return getDb().prepare(`
SELECT key, backend_id, user_id, folder, original_name, content_type, size, uploaded_at
SELECT key, backend_id, user_id, folder, original_name, content_type, size, uploaded_at, hls_key, transcode_status, transcode_progress, thumb_key, source_deleted, transcode_preset
FROM images
ORDER BY key ASC
`).all() as unknown as ImageIndexRow[]
@@ -391,7 +432,7 @@ export function listAllImageIndexRows(): ImageIndexRow[] {
export function listImageIndexRowsByBackend(backendId: string): ImageIndexRow[] {
ensureStorageSchema()
return getDb().prepare(`
SELECT key, backend_id, user_id, folder, original_name, content_type, size, uploaded_at
SELECT key, backend_id, user_id, folder, original_name, content_type, size, uploaded_at, hls_key, transcode_status, transcode_progress, thumb_key, source_deleted, transcode_preset
FROM images
WHERE backend_id = ?
ORDER BY key ASC
@@ -405,15 +446,157 @@ export function updateImageBackendId(key: string, backendId: string): void {
`).run(backendId, key)
}
/** 更新 HLS 转码状态;hlsKey / progress 传 null 时保留原值 */
export function updateImageTranscode(
key: string,
input: {
status: TranscodeStatus
hlsKey?: string | null
progress?: number
sourceDeleted?: boolean
size?: number
preset?: string | null
}
): void {
ensureStorageSchema()
getDb().prepare(`
UPDATE images
SET transcode_status = ?,
hls_key = COALESCE(?, hls_key),
transcode_progress = COALESCE(?, transcode_progress),
source_deleted = COALESCE(?, source_deleted),
size = COALESCE(?, size),
transcode_preset = COALESCE(?, transcode_preset)
WHERE key = ?
`).run(
input.status,
input.hlsKey ?? null,
input.progress ?? null,
input.sourceDeleted === undefined ? null : (input.sourceDeleted ? 1 : 0),
input.size ?? null,
input.preset ?? null,
key
)
}
/** 启动时恢复被中断的转码任务 */
export function listPendingTranscodeKeys(): string[] {
ensureStorageSchema()
const rows = getDb().prepare(`
SELECT key FROM images
WHERE media_type = 'video' AND transcode_status IN ('pending', 'running')
ORDER BY uploaded_at ASC
`).all() as Array<{ key: string }>
return rows.map(row => row.key)
}
/** 转码已完成但仍保留源文件的视频(用于补删历史遗留) */
export function listTranscodedSourceRows(): Array<{ key: string, hlsKey: string }> {
ensureStorageSchema()
const rows = getDb().prepare(`
SELECT key, hls_key FROM images
WHERE media_type = 'video'
AND transcode_status = 'done'
AND source_deleted = 0
AND hls_key IS NOT NULL
`).all() as Array<{ key: string, hls_key: string }>
return rows.map(row => ({ key: row.key, hlsKey: row.hls_key }))
}
/** 记录视频封面缩略图 key */
export function updateImageThumb(key: string, thumbKey: string): void {
ensureStorageSchema()
getDb().prepare('UPDATE images SET thumb_key = ? WHERE key = ?').run(thumbKey, key)
}
export interface MediaStats {
uploadToday: number
uploadYesterday: number
uploadMonth: number
uploadLastMonth: number
uploadTotal: number
storedCount: number
uploadBytesTotal: number
bySource: { web: number, api: number }
}
/** 按媒体类型统计(图片 / 视频 / 文件各自独立) */
export function getMediaStats(
mediaType: MediaType,
userFilter?: number | 'admin'
): MediaStats {
ensureStorageSchema()
const params: Array<string | number> = [mediaType]
const userSql = buildUserFilterSql(userFilter, params)
// 转码中的视频还没入库,与列表口径保持一致:统计不计入
const transcodeSql = mediaType === 'video'
? ` AND transcode_status IN ('none', 'done', 'failed')`
: ''
const rows = getDb().prepare(`
SELECT size, uploaded_at FROM images
WHERE media_type = ?${transcodeSql}${userSql}
`).all(...params) as Array<{ size: number, uploaded_at: string }>
const startOfDay = startOfDayIsoInShanghai()
const startOfYesterday = startOfYesterdayIsoInShanghai()
const startOfMonth = startOfMonthIsoInShanghai()
const startOfLastMonth = startOfLastMonthIsoInShanghai()
let bytes = 0
let today = 0
let yesterday = 0
let month = 0
let lastMonth = 0
for (const row of rows) {
bytes += row.size
if (row.uploaded_at >= startOfDay) today++
if (row.uploaded_at >= startOfYesterday && row.uploaded_at < startOfDay) yesterday++
if (row.uploaded_at >= startOfMonth) month++
if (row.uploaded_at >= startOfLastMonth && row.uploaded_at < startOfMonth) lastMonth++
}
// 来源分布来自上传日志,按目录前缀区分类型
const prefix = mediaType === 'video' ? 'videos/' : mediaType === 'file' ? 'files/' : 'images/'
const sourceRows = getDb().prepare(`
SELECT source, COUNT(*) AS count FROM activity_logs
WHERE action = 'upload' AND key LIKE ?
GROUP BY source
`).all(`${prefix}%`) as Array<{ source: string, count: number }>
const bySource = { web: 0, api: 0 }
for (const row of sourceRows) {
if (row.source === 'web') bySource.web = row.count
else if (row.source === 'api') bySource.api = row.count
}
return {
uploadToday: today,
uploadYesterday: yesterday,
uploadMonth: month,
uploadLastMonth: lastMonth,
uploadTotal: rows.length,
storedCount: rows.length,
uploadBytesTotal: bytes,
bySource
}
}
export async function countImages(
userFilter?: number | 'admin',
backendId?: string,
tagFilter?: TagFilterInput
tagFilter?: TagFilterInput,
mediaType: MediaType | 'all' = 'image'
): Promise<number> {
ensureStorageSchema()
const params: Array<string | number> = []
const clauses: string[] = ['1=1']
if (mediaType !== 'all') {
clauses.push('media_type = ?')
params.push(mediaType)
}
const userSql = buildUserFilterSql(userFilter, params)
const backendSql = buildBackendFilterSql(backendId, params)
const tagSql = buildTagFilterSql(tagFilter, params)
@@ -466,16 +649,27 @@ export async function listImages(options: {
contentType?: string
uploadSource?: 'web' | 'api'
tagFilter?: TagFilterInput
mediaType?: MediaType
/** 只返回这些转码状态的条目(视频库用来隐藏转码中的视频) */
transcodeStatuses?: TranscodeStatus[]
}): Promise<PaginatedResult<StoredImage>> {
ensureStorageSchema()
const params: Array<string | number> = []
const clauses: string[] = ['1=1']
clauses.push('media_type = ?')
params.push(options.mediaType ?? 'image')
if (options.transcodeStatuses?.length) {
clauses.push(`transcode_status IN (${options.transcodeStatuses.map(() => '?').join(', ')})`)
params.push(...options.transcodeStatuses)
}
const userSql = buildUserFilterSql(options.userFilter, params)
const backendSql = buildBackendFilterSql(options.backendId, params)
const tagSql = buildTagFilterSql(options.tagFilter, params)
const rows = getDb().prepare(`
SELECT key, backend_id, user_id, folder, original_name, content_type, size, uploaded_at
SELECT key, backend_id, user_id, folder, original_name, content_type, size, uploaded_at, hls_key, transcode_status, transcode_progress, thumb_key, source_deleted, transcode_preset
FROM images
WHERE ${clauses.join(' AND ')}${userSql}${backendSql}${tagSql}
ORDER BY uploaded_at DESC, key DESC
@@ -501,17 +695,27 @@ export async function searchImages(options: {
contentType?: string
uploadSource?: 'web' | 'api'
tagFilter?: TagFilterInput
mediaType?: MediaType
transcodeStatuses?: TranscodeStatus[]
}): Promise<PaginatedResult<StoredImage>> {
ensureStorageSchema()
const needle = options.query.trim().toLowerCase()
const params: Array<string | number> = []
const clauses: string[] = ['1=1']
clauses.push('media_type = ?')
params.push(options.mediaType ?? 'image')
if (options.transcodeStatuses?.length) {
clauses.push(`transcode_status IN (${options.transcodeStatuses.map(() => '?').join(', ')})`)
params.push(...options.transcodeStatuses)
}
const userSql = buildUserFilterSql(options.userFilter, params)
const backendSql = buildBackendFilterSql(options.backendId, params)
const tagSql = buildTagFilterSql(options.tagFilter, params)
const rows = getDb().prepare(`
SELECT key, backend_id, user_id, folder, original_name, content_type, size, uploaded_at
SELECT key, backend_id, user_id, folder, original_name, content_type, size, uploaded_at, hls_key, transcode_status, transcode_progress, thumb_key, source_deleted, transcode_preset
FROM images
WHERE ${clauses.join(' AND ')}${userSql}${backendSql}${tagSql}
ORDER BY uploaded_at DESC, key DESC
@@ -645,8 +849,9 @@ export async function getUserScopedStorageStats(
export async function listImageKeysForAutoDelete(): Promise<StoredImage[]> {
ensureStorageSchema()
const rows = getDb().prepare(`
SELECT key, backend_id, user_id, folder, original_name, content_type, size, uploaded_at
SELECT key, backend_id, user_id, folder, original_name, content_type, size, uploaded_at, hls_key, transcode_status, transcode_progress, thumb_key, source_deleted, transcode_preset
FROM images
WHERE media_type = 'image'
ORDER BY uploaded_at ASC
`).all() as unknown as ImageIndexRow[]
+128
View File
@@ -1,3 +1,4 @@
import { VIDEO_EXTENSIONS } from './constants'
import type { AllowedMimeType } from './constants'
const EXT_MAP: Record<AllowedMimeType, string> = {
@@ -10,11 +11,16 @@ const EXT_MAP: Record<AllowedMimeType, string> = {
}
export const DEFAULT_FOLDER = 'images'
export const FILE_FOLDER = 'files'
export const VIDEO_FOLDER = 'videos'
export type StorageLayout = 'date' | 'flat'
const IMAGE_EXT_PATTERN = /\.(jpg|jpeg|png|webp|gif|svg|ico)$/i
/** 文件床文件名:字母数字开头,允许 - _ .,最长 64(含扩展名) */
const FILE_NAME_PATTERN = /^[A-Za-z0-9][A-Za-z0-9._-]{0,63}$/
function generateRandomId(length = 12): string {
const alphabet = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
const bytes = new Uint8Array(length)
@@ -69,6 +75,128 @@ export function validateImageKey(key: string): boolean {
return true
}
/** 扩展名清洗:只保留 1–10 位字母数字 */
export function sanitizeFileExtension(raw: string): string {
const ext = raw.trim().toLowerCase().replace(/^\.+/, '')
return /^[a-z0-9]{1,10}$/.test(ext) ? ext : ''
}
/** 从原始文件名取安全扩展名;无扩展名时返回空串 */
export function extensionFromFilename(filename: string): string {
const base = filename.split(/[/\\]/).pop() ?? ''
const dot = base.lastIndexOf('.')
if (dot <= 0 || dot === base.length - 1) return ''
return sanitizeFileExtension(base.slice(dot + 1))
}
export function generateFileKey(
extension: string,
date = new Date(),
layout: StorageLayout = 'date'
): string {
const id = generateRandomId(12)
const ext = sanitizeFileExtension(extension)
const suffix = ext ? `.${ext}` : ''
if (layout === 'flat') {
return `${FILE_FOLDER}/${id}${suffix}`
}
const year = date.getUTCFullYear()
const month = String(date.getUTCMonth() + 1).padStart(2, '0')
return `${FILE_FOLDER}/${year}/${month}/${id}${suffix}`
}
/** 文件床 key(files/…);图片 key 走 validateImageKey */
export function validateFileKey(key: string): boolean {
if (!key || typeof key !== 'string') return false
if (key.startsWith('/')) return false
if (key.includes('..')) return false
if (key.includes('//')) return false
const parts = key.split('/')
if (parts.length < 2 || parts.some(part => !part)) return false
if (parts[0] !== FILE_FOLDER) return false
const filename = parts[parts.length - 1]!
if (!FILE_NAME_PATTERN.test(filename)) return false
for (let i = 1; i < parts.length - 1; i++) {
if (!isValidPathSegment(parts[i]!)) return false
}
return true
}
/** 图片或文件床的存储 key */
export function validateStorageKey(key: string): boolean {
return validateImageKey(key) || validateFileKey(key) || validateVideoKey(key)
}
export function mediaTypeForKey(key: string): 'image' | 'video' | 'file' {
if (key.startsWith(`${FILE_FOLDER}/`)) return 'file'
if (key.startsWith(`${VIDEO_FOLDER}/`)) return 'video'
return 'image'
}
/** videos/ 下除视频本体外的附属资源:播放列表、分片、封面缩略图 */
const VIDEO_SIDECAR_EXTENSIONS = ['m3u8', 'ts', 'webp', 'jpg', 'jpeg', 'png']
function isVideoKeyExtension(extension: string): boolean {
if (!extension) return false
const value = extension.toLowerCase()
return (VIDEO_EXTENSIONS as readonly string[]).includes(value)
|| VIDEO_SIDECAR_EXTENSIONS.includes(value)
}
/** 附属资源不进索引,也不出现在列表里 */
export function isVideoSidecarKey(key: string): boolean {
return validateVideoKey(key)
&& VIDEO_SIDECAR_EXTENSIONS.includes(extensionFromFilename(key))
}
export function isVideoExtension(extension: string): boolean {
if (!extension) return false
return (VIDEO_EXTENSIONS as readonly string[]).includes(extension.toLowerCase())
}
export function generateVideoKey(
extension: string,
date = new Date(),
layout: StorageLayout = 'date'
): string {
const id = generateRandomId(12)
const ext = sanitizeFileExtension(extension) || 'mp4'
if (layout === 'flat') {
return `${VIDEO_FOLDER}/${id}.${ext}`
}
const year = date.getUTCFullYear()
const month = String(date.getUTCMonth() + 1).padStart(2, '0')
return `${VIDEO_FOLDER}/${year}/${month}/${id}.${ext}`
}
/** 视频床 key(videos/…),扩展名必须在视频白名单内 */
export function validateVideoKey(key: string): boolean {
if (!key || typeof key !== 'string') return false
if (key.startsWith('/')) return false
if (key.includes('..')) return false
if (key.includes('//')) return false
const parts = key.split('/')
if (parts.length < 2 || parts.some(part => !part)) return false
if (parts[0] !== VIDEO_FOLDER) return false
const filename = parts[parts.length - 1]!
if (!FILE_NAME_PATTERN.test(filename)) return false
if (!isVideoKeyExtension(extensionFromFilename(filename))) return false
for (let i = 1; i < parts.length - 1; i++) {
if (!isValidPathSegment(parts[i]!)) return false
}
return true
}
/** 将遗留顶层目录 key(如 blog/foo.webp)映射为 images/blog/foo.webp */
export function toCanonicalImageKey(key: string): string | null {
if (validateImageKey(key)) return key
+3 -1
View File
@@ -1,5 +1,5 @@
import { basename } from 'node:path'
import { DEFAULT_FOLDER, validateImageKey } from './image-key'
import { DEFAULT_FOLDER, validateFileKey, validateImageKey } from './image-key'
/** 存储 key → 对外 URL 路径(不含域名) */
export function storageKeyToPublicPath(key: string): string {
@@ -23,6 +23,8 @@ export function toStorageKeyFromPublicPath(publicPath: string): string | null {
const raw = publicPath.replace(/^\/+/, '')
if (!raw) return null
if (validateImageKey(raw)) return raw
// 文件床直链保留 files/ 前缀,避免与图片路径混用
if (validateFileKey(raw)) return raw
const candidate = `${DEFAULT_FOLDER}/${raw}`
return validateImageKey(candidate) ? candidate : null
}
+50 -5
View File
@@ -1,14 +1,26 @@
import type { H3Event } from 'h3'
import { IMAGE_CACHE_CONTROL } from './constants'
import {
FILE_CACHE_CONTROL,
FILE_PRIVATE_CACHE_CONTROL,
IMAGE_CACHE_CONTROL
} from './constants'
import {
getAllowedRefererHostsRaw,
getFileBedAccessMode,
getImageBaseUrlConfigured,
getSiteBaseUrlConfigured,
hostnameFromBaseUrl,
isRefererConfigured
} from './env'
import { isFileAccessAuthorized } from './access'
import { buildAttachmentDisposition } from './file-bed'
import { findImageKeyByDatePath, findImageKeyByFilename } from './image-index'
import { validateImageKey } from './image-key'
import {
validateFileKey,
validateImageKey,
validateStorageKey,
validateVideoKey
} from './image-key'
import { isBareImageFilename, toStorageKeyFromPublicPath } from './image-public-path'
import { buildPublicImageUrl } from './image-response'
import { createImageStream, headImage } from './storage'
@@ -90,7 +102,7 @@ export function requestPathToImageKey(
const raw = decodeURIComponent(pathname).replace(/^\/+/, '')
if (!raw) return null
if (validateImageKey(raw)) return raw
if (validateStorageKey(raw)) return raw
// 简短链接:纯文件名须先走索引反查,不能猜成 images/文件名(与按年/月存储冲突)
if (options?.hideFolder && isBareImageFilename(raw)) {
@@ -114,6 +126,12 @@ export function requestPathToImageKey(
}
export async function serveImageByKey(event: H3Event, key: string) {
const isFile = validateFileKey(key)
const isVideo = validateVideoKey(key)
// 文件与视频共用「文件床访问方式」开关
const isMedia = isFile || isVideo
const fileAccessMode = isMedia ? getFileBedAccessMode() : 'public'
const referer = getHeader(event, 'referer') ?? null
if (isHotlinkBlocked(event, referer)) {
setHeader(event, 'Cache-Control', ERROR_CACHE_CONTROL)
@@ -123,6 +141,12 @@ export async function serveImageByKey(event: H3Event, key: string) {
})
}
// Token 模式:文件直链需要 Auth-Token / ?token= / 已登录会话
if (isMedia && fileAccessMode === 'token' && !(await isFileAccessAuthorized(event))) {
setHeader(event, 'Cache-Control', ERROR_CACHE_CONTROL)
throw createError({ statusCode: 401, statusMessage: 'Unauthorized' })
}
const stored = await headImage(key)
if (!stored) {
setHeader(event, 'Cache-Control', ERROR_CACHE_CONTROL)
@@ -130,7 +154,12 @@ export async function serveImageByKey(event: H3Event, key: string) {
}
const backendRow = await getBackendRowForKey(key)
if (backendRow.serving_mode === 'public' && backendRow.public_url) {
// Token 模式不做对象存储直链跳转,避免绕过鉴权
if (
fileAccessMode === 'public'
&& backendRow.serving_mode === 'public'
&& backendRow.public_url
) {
const publicUrl = buildPublicImageUrl(backendRow, key)
return sendRedirect(event, publicUrl, 302)
}
@@ -138,11 +167,27 @@ export async function serveImageByKey(event: H3Event, key: string) {
const etag = `"${stored.size}-${Math.round(stored.mtimeMs)}"`
setHeader(event, 'ETag', etag)
setHeader(event, 'Cache-Control', IMAGE_CACHE_CONTROL)
setHeader(
event,
'Cache-Control',
isMedia
? (fileAccessMode === 'token' ? FILE_PRIVATE_CACHE_CONTROL : FILE_CACHE_CONTROL)
: IMAGE_CACHE_CONTROL
)
setHeader(event, 'Accept-Ranges', 'bytes')
setHeader(event, 'X-Content-Type-Options', 'nosniff')
setHeader(event, 'Content-Type', stored.contentType)
// 文件床统一以附件形式下发,避免上传的文档在站点域名下被渲染执行
if (isFile) {
setHeader(event, 'Content-Disposition', buildAttachmentDisposition(stored.originalName))
}
// 视频走 inline 播放,跨域(图片域名)访问需要放行 CORS
if (isVideo) {
setHeader(event, 'Access-Control-Allow-Origin', '*')
}
if (stored.contentType === 'image/svg+xml') {
setHeader(
event,
+160
View File
@@ -88,6 +88,150 @@ function migrateStorageBackendTelegramType(database: DatabaseSync): void {
}
}
const STORAGE_SCHEMA_MEDIA_TYPE_KEY = 'storage_schema_media_type'
const STORAGE_SCHEMA_TRANSCODE_KEY = 'storage_schema_transcode'
const STORAGE_SCHEMA_TRANSCODE_PROGRESS_KEY = 'storage_schema_transcode_progress'
const STORAGE_SCHEMA_THUMB_KEY = 'storage_schema_thumb'
const STORAGE_SCHEMA_SOURCE_DELETED_KEY = 'storage_schema_source_deleted'
const STORAGE_SCHEMA_TRANSCODE_PRESET_KEY = 'storage_schema_transcode_preset'
/** images 表新增 media_type 列(区分图床图片与文件床文件) */
function migrateImagesMediaType(database: DatabaseSync): void {
const migrated = database.prepare(`
SELECT value FROM settings WHERE key = ?
`).get(STORAGE_SCHEMA_MEDIA_TYPE_KEY) as { value?: string } | undefined
if (migrated?.value === '1') return
const columns = database.prepare('PRAGMA table_info(images)').all() as Array<{
name: string
}>
if (!columns.some(column => column.name === 'media_type')) {
database.exec(`
ALTER TABLE images ADD COLUMN media_type TEXT NOT NULL DEFAULT 'image'
`)
}
database.prepare(`
INSERT OR REPLACE INTO settings (key, value, updated_at)
VALUES (?, '1', ?)
`).run(STORAGE_SCHEMA_MEDIA_TYPE_KEY, new Date().toISOString())
}
/** images 表新增 HLS 转码相关列(hls_key / transcode_status) */
function migrateImagesTranscode(database: DatabaseSync): void {
const migrated = database.prepare(`
SELECT value FROM settings WHERE key = ?
`).get(STORAGE_SCHEMA_TRANSCODE_KEY) as { value?: string } | undefined
if (migrated?.value === '1') return
const columns = database.prepare('PRAGMA table_info(images)').all() as Array<{
name: string
}>
if (!columns.some(column => column.name === 'hls_key')) {
database.exec('ALTER TABLE images ADD COLUMN hls_key TEXT')
}
if (!columns.some(column => column.name === 'transcode_status')) {
database.exec(`
ALTER TABLE images ADD COLUMN transcode_status TEXT NOT NULL DEFAULT 'none'
`)
}
database.prepare(`
INSERT OR REPLACE INTO settings (key, value, updated_at)
VALUES (?, '1', ?)
`).run(STORAGE_SCHEMA_TRANSCODE_KEY, new Date().toISOString())
}
/** images 表新增转码进度列(0–100) */
function migrateImagesTranscodeProgress(database: DatabaseSync): void {
const migrated = database.prepare(`
SELECT value FROM settings WHERE key = ?
`).get(STORAGE_SCHEMA_TRANSCODE_PROGRESS_KEY) as { value?: string } | undefined
if (migrated?.value === '1') return
const columns = database.prepare('PRAGMA table_info(images)').all() as Array<{
name: string
}>
if (!columns.some(column => column.name === 'transcode_progress')) {
database.exec(`
ALTER TABLE images ADD COLUMN transcode_progress INTEGER NOT NULL DEFAULT 0
`)
}
database.prepare(`
INSERT OR REPLACE INTO settings (key, value, updated_at)
VALUES (?, '1', ?)
`).run(STORAGE_SCHEMA_TRANSCODE_PROGRESS_KEY, new Date().toISOString())
}
/** images 表新增视频缩略图列 */
function migrateImagesThumb(database: DatabaseSync): void {
const migrated = database.prepare(`
SELECT value FROM settings WHERE key = ?
`).get(STORAGE_SCHEMA_THUMB_KEY) as { value?: string } | undefined
if (migrated?.value === '1') return
const columns = database.prepare('PRAGMA table_info(images)').all() as Array<{
name: string
}>
if (!columns.some(column => column.name === 'thumb_key')) {
database.exec('ALTER TABLE images ADD COLUMN thumb_key TEXT')
}
database.prepare(`
INSERT OR REPLACE INTO settings (key, value, updated_at)
VALUES (?, '1', ?)
`).run(STORAGE_SCHEMA_THUMB_KEY, new Date().toISOString())
}
/** images 表新增「源视频已删除」标记 */
function migrateImagesSourceDeleted(database: DatabaseSync): void {
const migrated = database.prepare(`
SELECT value FROM settings WHERE key = ?
`).get(STORAGE_SCHEMA_SOURCE_DELETED_KEY) as { value?: string } | undefined
if (migrated?.value === '1') return
const columns = database.prepare('PRAGMA table_info(images)').all() as Array<{
name: string
}>
if (!columns.some(column => column.name === 'source_deleted')) {
database.exec(`
ALTER TABLE images ADD COLUMN source_deleted INTEGER NOT NULL DEFAULT 0
`)
}
database.prepare(`
INSERT OR REPLACE INTO settings (key, value, updated_at)
VALUES (?, '1', ?)
`).run(STORAGE_SCHEMA_SOURCE_DELETED_KEY, new Date().toISOString())
}
/** images 表新增「本视频使用的转码档位」列 */
function migrateImagesTranscodePreset(database: DatabaseSync): void {
const migrated = database.prepare(`
SELECT value FROM settings WHERE key = ?
`).get(STORAGE_SCHEMA_TRANSCODE_PRESET_KEY) as { value?: string } | undefined
if (migrated?.value === '1') return
const columns = database.prepare('PRAGMA table_info(images)').all() as Array<{
name: string
}>
if (!columns.some(column => column.name === 'transcode_preset')) {
database.exec('ALTER TABLE images ADD COLUMN transcode_preset TEXT')
}
database.prepare(`
INSERT OR REPLACE INTO settings (key, value, updated_at)
VALUES (?, '1', ?)
`).run(STORAGE_SCHEMA_TRANSCODE_PRESET_KEY, new Date().toISOString())
}
function migrateStorageTables(database: DatabaseSync): void {
database.exec(`
CREATE TABLE IF NOT EXISTS storage_backends (
@@ -112,6 +256,13 @@ function migrateStorageTables(database: DatabaseSync): void {
content_type TEXT NOT NULL,
size INTEGER NOT NULL,
uploaded_at TEXT NOT NULL,
media_type TEXT NOT NULL DEFAULT 'image',
hls_key TEXT,
transcode_status TEXT NOT NULL DEFAULT 'none',
transcode_progress INTEGER NOT NULL DEFAULT 0,
thumb_key TEXT,
source_deleted INTEGER NOT NULL DEFAULT 0,
transcode_preset TEXT,
FOREIGN KEY (backend_id) REFERENCES storage_backends(id)
);
CREATE INDEX IF NOT EXISTS idx_images_uploaded_at ON images(uploaded_at DESC);
@@ -127,6 +278,15 @@ function migrateStorageTables(database: DatabaseSync): void {
);
`)
migrateStorageBackendTelegramType(database)
migrateImagesMediaType(database)
migrateImagesTranscode(database)
migrateImagesTranscodeProgress(database)
migrateImagesThumb(database)
migrateImagesSourceDeleted(database)
migrateImagesTranscodePreset(database)
database.exec(`
CREATE INDEX IF NOT EXISTS idx_images_media_type ON images(media_type);
`)
}
export function ensureStorageSchema(): void {
+30 -13
View File
@@ -18,7 +18,13 @@ import {
listImages as listImagesFromIndex,
searchImages as searchImagesFromIndex
} from './image-index'
import { DEFAULT_FOLDER, toCanonicalImageKey, validateImageKey } from './image-key'
import {
DEFAULT_FOLDER,
isVideoSidecarKey,
mediaTypeForKey,
toCanonicalImageKey,
validateStorageKey
} from './image-key'
import type { TagFilterInput } from './tags'
import {
getActiveBackend,
@@ -26,9 +32,11 @@ import {
} from './storage/resolver'
import type {
FolderStorageStat,
MediaType,
PaginatedResult,
StoredImage,
StoredImageMeta
StoredImageMeta,
TranscodeStatus
} from './storage/types'
export type {
@@ -57,7 +65,7 @@ async function fileExistsAtKey(key: string): Promise<boolean> {
export async function resolveStorageImageKey(key: string): Promise<string | null> {
if (!key || typeof key !== 'string') return null
if (validateImageKey(key)) {
if (validateStorageKey(key)) {
if (await fileExistsAtKey(key) || getImageIndexRow(key)) return key
return null
}
@@ -106,7 +114,8 @@ export async function putImage(
originalName: meta.originalName,
contentType: meta.contentType,
size: meta.size,
uploadedAt: meta.uploadedAt
uploadedAt: meta.uploadedAt,
mediaType: meta.mediaType
})
return backend.id
}
@@ -134,15 +143,19 @@ export async function headImage(key: string): Promise<StoredImage | null> {
}
}
insertImageIndex({
key: stored.key,
backendId: backend.id,
userId: stored.userId,
originalName: stored.originalName,
contentType: stored.contentType,
size: stored.size,
uploadedAt: stored.uploadedAt
})
// HLS 播放列表与分片不建索引,避免污染视频库
if (!isVideoSidecarKey(stored.key)) {
insertImageIndex({
key: stored.key,
backendId: backend.id,
userId: stored.userId,
originalName: stored.originalName,
contentType: stored.contentType,
size: stored.size,
uploadedAt: stored.uploadedAt,
mediaType: mediaTypeForKey(stored.key)
})
}
return { ...stored, backendId: backend.id }
}
@@ -214,6 +227,8 @@ export async function listImages(options: {
contentType?: string
uploadSource?: 'web' | 'api'
tagFilter?: TagFilterInput
mediaType?: MediaType
transcodeStatuses?: TranscodeStatus[]
}): Promise<PaginatedResult<StoredImage>> {
return listImagesFromIndex(options)
}
@@ -227,6 +242,8 @@ export async function searchImages(options: {
contentType?: string
uploadSource?: 'web' | 'api'
tagFilter?: TagFilterInput
mediaType?: MediaType
transcodeStatuses?: TranscodeStatus[]
}): Promise<PaginatedResult<StoredImage>> {
return searchImagesFromIndex(options)
}
+2 -2
View File
@@ -3,7 +3,7 @@ import type { ReadStream } from 'node:fs'
import { dirname, join } from 'node:path'
import { contentTypeFromKey } from '../content-type'
import { getDataDir } from '../data-dir'
import { validateImageKey } from '../image-key'
import { validateStorageKey } from '../image-key'
import type { StoredImage, StoredImageMeta, StorageBackend } from './types'
const META_SUFFIX = '.meta.json'
@@ -44,7 +44,7 @@ export class LocalStorageBackend implements StorageBackend {
}
async head(key: string): Promise<StoredImage | null> {
if (!validateImageKey(key)) return null
if (!validateStorageKey(key)) return null
let stat
try {
+2 -2
View File
@@ -7,7 +7,7 @@ import {
S3Client
} from '@aws-sdk/client-s3'
import type { Readable } from 'node:stream'
import { validateImageKey } from '../image-key'
import { validateStorageKey } from '../image-key'
import type {
S3BackendConfig,
S3BackendSecrets,
@@ -133,7 +133,7 @@ export class S3StorageBackend implements StorageBackend {
}
async head(key: string): Promise<StoredImage | null> {
if (!validateImageKey(key)) return null
if (!validateStorageKey(key)) return null
try {
const response = await this.client.send(new HeadObjectCommand({
+3 -3
View File
@@ -1,6 +1,6 @@
import { Readable } from 'node:stream'
import { getImageIndexAsStored } from '../image-index'
import { validateImageKey } from '../image-key'
import { validateStorageKey } from '../image-key'
import { logException } from '../logger'
import {
deleteStorageObjectRef,
@@ -338,7 +338,7 @@ export class TelegramStorageBackend implements StorageBackend {
}
async put(key: string, bytes: Uint8Array, _meta: StoredImageMeta): Promise<void> {
if (!validateImageKey(key)) {
if (!validateStorageKey(key)) {
throw new Error('Invalid image key')
}
if (bytes.byteLength > TELEGRAM_MAX_FILE_BYTES) {
@@ -393,7 +393,7 @@ export class TelegramStorageBackend implements StorageBackend {
}
async head(key: string): Promise<StoredImage | null> {
if (!validateImageKey(key)) return null
if (!validateStorageKey(key)) return null
const indexed = getImageIndexAsStored(key)
if (!indexed || indexed.backendId !== this.id) {
+17
View File
@@ -6,12 +6,29 @@ export interface StoredImageMeta {
contentType: string
size: number
userId?: number | null
/** 索引表中的资源类型:图片或文件床文件 */
mediaType?: MediaType
}
export type MediaType = 'image' | 'video' | 'file'
export type TranscodeStatus = 'none' | 'pending' | 'running' | 'done' | 'failed'
export interface StoredImage extends StoredImageMeta {
key: string
mtimeMs: number
backendId?: string
/** HLS 播放列表 key(转码完成后有值) */
hlsKey?: string | null
transcodeStatus?: TranscodeStatus
/** 转码进度 0–100 */
transcodeProgress?: number
/** 本视频使用的转码档位 */
transcodePreset?: string | null
/** 视频封面缩略图 key */
thumbKey?: string | null
/** 转码成功后源视频是否已删除 */
sourceDeleted?: boolean
}
export interface PaginatedResult<T> {
+86
View File
@@ -0,0 +1,86 @@
import { describe, expect, it } from 'vitest'
import {
DEFAULT_TRANSCODE_CONCURRENCY,
DEFAULT_TRANSCODE_PRESET,
DEFAULT_TRANSCODE_THREADS,
getTranscodeConcurrency,
getTranscodeSettings,
hlsPlaylistKey,
parseTranscodePreset,
setTranscodeSettings,
thumbKeyFor
} from './transcode'
import { isVideoSidecarKey, mediaTypeForKey } from './image-key'
describe('hlsPlaylistKey', () => {
it('uses the video key without extension as the hls directory', () => {
expect(hlsPlaylistKey('videos/2026/10/abc123.mp4'))
.toBe('videos/2026/10/abc123/index.m3u8')
expect(hlsPlaylistKey('videos/abc123.mkv'))
.toBe('videos/abc123/index.m3u8')
})
})
describe('isVideoSidecarKey', () => {
it('detects playlists, segments and thumbnails', () => {
expect(isVideoSidecarKey('videos/2026/10/abc/index.m3u8')).toBe(true)
expect(isVideoSidecarKey('videos/2026/10/abc/seg000.ts')).toBe(true)
expect(isVideoSidecarKey('videos/2026/10/abc.webp')).toBe(true)
})
it('leaves the original video and other media out', () => {
expect(isVideoSidecarKey('videos/2026/10/abc.mp4')).toBe(false)
expect(isVideoSidecarKey('files/2026/10/abc.pdf')).toBe(false)
expect(isVideoSidecarKey('images/2026/10/abc.webp')).toBe(false)
})
it('builds thumbnail keys next to the video', () => {
expect(thumbKeyFor('videos/2026/10/abc.mp4')).toBe('videos/2026/10/abc.webp')
})
})
describe('mediaTypeForKey', () => {
it('maps folders to media types', () => {
expect(mediaTypeForKey('images/2026/10/a.webp')).toBe('image')
expect(mediaTypeForKey('videos/2026/10/a.mp4')).toBe('video')
expect(mediaTypeForKey('files/2026/10/a.pdf')).toBe('file')
})
})
describe('transcode settings', () => {
it('defaults to one concurrent job with one thread', () => {
expect(DEFAULT_TRANSCODE_CONCURRENCY).toBe(1)
expect(DEFAULT_TRANSCODE_THREADS).toBe(1)
expect(getTranscodeSettings()).toEqual({
concurrency: 1,
threads: 1,
preset: 'veryfast',
bitratePercent: 80
})
})
it('round-trips stored values', () => {
setTranscodeSettings({ concurrency: 3, threads: 2 })
expect(getTranscodeSettings()).toEqual({
concurrency: 3,
threads: 2,
preset: 'veryfast',
bitratePercent: 80
})
})
it('falls back to the default when the stored value is out of range', () => {
setTranscodeSettings({ concurrency: 99 })
expect(getTranscodeConcurrency()).toBe(DEFAULT_TRANSCODE_CONCURRENCY)
setTranscodeSettings({ concurrency: 1, threads: 1 })
})
it('stores the quality preset and rejects unknown ones', () => {
setTranscodeSettings({ preset: 'slow' })
expect(getTranscodeSettings().preset).toBe('slow')
expect(parseTranscodePreset('nope')).toBeNull()
setTranscodeSettings({ preset: DEFAULT_TRANSCODE_PRESET })
})
})
+712
View File
@@ -0,0 +1,712 @@
import { spawn } from 'node:child_process'
import type { ChildProcess } from 'node:child_process'
import { createWriteStream, promises as fs } from 'node:fs'
import { randomUUID } from 'node:crypto'
import { tmpdir } from 'node:os'
import { basename, join } from 'node:path'
import { pipeline } from 'node:stream/promises'
import { getDataDir } from './data-dir'
import {
listAllImageIndexRows,
listPendingTranscodeKeys,
listTranscodedSourceRows,
updateImageTranscode
} from './image-index'
import {
VIDEO_FOLDER,
extensionFromFilename,
isVideoSidecarKey,
validateStorageKey,
validateVideoKey
} from './image-key'
import {
createImageStream,
deleteImage,
headImage
} from './storage'
import { getBackendForKey } from './storage/resolver'
import { logException, logInfo } from './logger'
import {
getSetting,
SETTINGS_TRANSCODE_CONCURRENCY,
SETTINGS_TRANSCODE_BITRATE,
SETTINGS_TRANSCODE_PRESET,
SETTINGS_TRANSCODE_THREADS,
setSetting
} from './db'
/** HLS 分片时长(秒) */
const HLS_SEGMENT_TIME = 6
export const DEFAULT_TRANSCODE_CONCURRENCY = 1
export const DEFAULT_TRANSCODE_THREADS = 1
export const MAX_TRANSCODE_CONCURRENCY = 8
export const MAX_TRANSCODE_THREADS = 64
/**
* 转码档位:直接封装(不重编码)/ 速度 / 平衡 / 质量。
* 注意 CRF 模式下 preset 越慢画质越好、体积也越大。
*/
export const TRANSCODE_PRESETS = ['copy', 'veryfast', 'medium', 'slow', 'compress'] as const
export type TranscodePreset = (typeof TRANSCODE_PRESETS)[number]
export const DEFAULT_TRANSCODE_PRESET: TranscodePreset = 'veryfast'
/** 「压缩」档的目标码率占源码率的百分比 */
export const DEFAULT_TRANSCODE_BITRATE_PERCENT = 80
export const MIN_TRANSCODE_BITRATE_PERCENT = 10
export const MAX_TRANSCODE_BITRATE_PERCENT = 100
export function getTranscodeBitratePercent(): number {
return parseBoundedInt(
getSetting(SETTINGS_TRANSCODE_BITRATE),
DEFAULT_TRANSCODE_BITRATE_PERCENT,
MIN_TRANSCODE_BITRATE_PERCENT,
MAX_TRANSCODE_BITRATE_PERCENT
)
}
export function parseTranscodePreset(raw: string | null | undefined): TranscodePreset | null {
const value = raw?.trim()
if (!value) return null
return (TRANSCODE_PRESETS as readonly string[]).includes(value)
? value as TranscodePreset
: null
}
function parseBoundedInt(
raw: string | null,
fallback: number,
min: number,
max: number
): number {
const value = Number(raw)
if (!Number.isInteger(value) || value < min || value > max) return fallback
return value
}
export interface TranscodeSettings {
concurrency: number
threads: number
preset: TranscodePreset
bitratePercent: number
}
/** 同时进行的转码任务数,默认 1(串行) */
export function getTranscodeConcurrency(): number {
return parseBoundedInt(
getSetting(SETTINGS_TRANSCODE_CONCURRENCY),
DEFAULT_TRANSCODE_CONCURRENCY,
1,
MAX_TRANSCODE_CONCURRENCY
)
}
/** 每个转码任务使用的 CPU 核心数,默认 1 */
export function getTranscodeThreads(): number {
return parseBoundedInt(
getSetting(SETTINGS_TRANSCODE_THREADS),
DEFAULT_TRANSCODE_THREADS,
1,
MAX_TRANSCODE_THREADS
)
}
export function getTranscodeSettings(): TranscodeSettings {
return {
concurrency: getTranscodeConcurrency(),
threads: getTranscodeThreads(),
preset: parseTranscodePreset(getSetting(SETTINGS_TRANSCODE_PRESET)) ?? DEFAULT_TRANSCODE_PRESET,
bitratePercent: getTranscodeBitratePercent()
}
}
export function setTranscodeSettings(patch: {
concurrency?: number
threads?: number
preset?: TranscodePreset
bitratePercent?: number
}): TranscodeSettings {
if (patch.concurrency !== undefined) {
setSetting(SETTINGS_TRANSCODE_CONCURRENCY, String(patch.concurrency))
}
if (patch.threads !== undefined) {
setSetting(SETTINGS_TRANSCODE_THREADS, String(patch.threads))
}
if (patch.preset !== undefined) {
setSetting(SETTINGS_TRANSCODE_PRESET, patch.preset)
}
if (patch.bitratePercent !== undefined) {
setSetting(SETTINGS_TRANSCODE_BITRATE, String(patch.bitratePercent))
}
return getTranscodeSettings()
}
function stripExtension(key: string): string {
const slash = key.lastIndexOf('/')
const dot = key.lastIndexOf('.')
return dot > slash ? key.slice(0, dot) : key
}
function extensionOf(key: string): string {
const dot = key.lastIndexOf('.')
return dot > 0 ? key.slice(dot + 1) : 'mp4'
}
/** 视频 key 对应的 HLS 播放列表 key(去扩展名后作为目录) */
export function hlsPlaylistKey(videoKey: string): string {
return `${stripExtension(videoKey)}/index.m3u8`
}
/** 视频 key 对应的封面缩略图 key(同目录同名,扩展名换成 webp) */
export function thumbKeyFor(videoKey: string): string {
return `${stripExtension(videoKey)}.webp`
}
function runThumbFfmpeg(inputPath: string, outputPath: string, seek: number): Promise<void> {
return new Promise((resolve, reject) => {
const child = spawn('ffmpeg', [
'-hide_banner',
'-loglevel', 'error',
'-y',
'-ss', String(seek),
'-i', inputPath,
'-frames:v', '1',
'-vf', 'scale=640:-2',
'-c:v', 'libwebp',
'-quality', '80',
outputPath
], { windowsHide: true })
let stderr = ''
child.stderr.on('data', (chunk) => {
stderr += String(chunk)
})
child.on('error', reject)
child.on('close', (code) => {
if (code === 0) {
resolve()
return
}
const detail = stderr.trim().split('\n').filter(Boolean).pop()
reject(new Error(detail || `ffmpeg 退出码 ${code}`))
})
})
}
/**
* 抽取视频封面并写入存储,返回缩略图 key。
* 优先取第 1 秒的画面,短视频或抽取失败时退回第一帧。
*/
export async function generateVideoThumbnail(videoKey: string): Promise<string | null> {
const stored = await headImage(videoKey)
if (!stored) return null
const workDir = join(tmpdir(), `pichost-thumb-${randomUUID()}`)
const inputPath = join(workDir, `input.${extensionOf(videoKey)}`)
const outputPath = join(workDir, 'thumb.webp')
await fs.mkdir(workDir, { recursive: true })
try {
await streamToFile(await createImageStream(videoKey), inputPath)
try {
await runThumbFfmpeg(inputPath, outputPath, 1)
} catch {
await runThumbFfmpeg(inputPath, outputPath, 0)
}
const bytes = await fs.readFile(outputPath)
const thumbKey = thumbKeyFor(videoKey)
const backend = await getBackendForKey(videoKey)
await backend.put(thumbKey, new Uint8Array(bytes), {
originalName: `${basename(thumbKey)}`,
uploadedAt: new Date().toISOString(),
contentType: 'image/webp',
size: bytes.byteLength,
userId: stored.userId ?? null,
mediaType: 'video'
})
return thumbKey
} catch (error) {
logException('video thumbnail failed', error, { key: videoKey })
return null
} finally {
await fs.rm(workDir, { recursive: true, force: true }).catch(() => {})
}
}
/** 正在转码的视频 → ffmpeg 进程,用于删除时中断 */
const runningProcesses = new Map<string, ChildProcess>()
/** 读取视频总时长(秒);失败返回 0,表示无法计算进度 */
function probeDuration(inputPath: string): Promise<number> {
return new Promise((resolve) => {
const child = spawn('ffprobe', [
'-v', 'error',
'-show_entries', 'format=duration',
'-of', 'default=noprint_wrappers=1:nokey=1',
inputPath
], { windowsHide: true })
let output = ''
child.stdout.on('data', (chunk) => {
output += String(chunk)
})
child.on('error', () => resolve(0))
child.on('close', () => {
const value = Number.parseFloat(output.trim())
resolve(Number.isFinite(value) && value > 0 ? value : 0)
})
})
}
/** 读取视频总码率(bps);失败返回 0 */
function probeBitrate(inputPath: string): Promise<number> {
return new Promise((resolve) => {
const child = spawn('ffprobe', [
'-v', 'error',
'-show_entries', 'format=bit_rate',
'-of', 'default=noprint_wrappers=1:nokey=1',
inputPath
], { windowsHide: true })
let output = ''
child.stdout.on('data', (chunk) => {
output += String(chunk)
})
child.on('error', () => resolve(0))
child.on('close', () => {
const value = Number.parseInt(output.trim(), 10)
resolve(Number.isFinite(value) && value > 0 ? value : 0)
})
})
}
/**
* 读取音轨码率(bps);没有音轨或读不到时返回 0。
* 音频目标码率会取「128k 与源音频码率」中的较小值,避免低码率音频被放大。
*/
function probeAudioBitrate(inputPath: string): Promise<number> {
return new Promise((resolve) => {
const child = spawn('ffprobe', [
'-v', 'error',
'-select_streams', 'a:0',
'-show_entries', 'stream=bit_rate',
'-of', 'default=noprint_wrappers=1:nokey=1',
inputPath
], { windowsHide: true })
let output = ''
child.stdout.on('data', (chunk) => {
output += String(chunk)
})
child.on('error', () => resolve(0))
child.on('close', () => {
const value = Number.parseInt(output.trim(), 10)
resolve(Number.isFinite(value) && value > 0 ? value : 0)
})
})
}
/** 单码率 H.264 + AAC 切片,产出 index.m3u8 与 segNNN.ts */
function runFfmpeg(
videoKey: string,
inputPath: string,
outputDir: string,
sourceBitrate: number,
sourceAudioBitrate: number,
onProgressUs: (outTimeUs: number) => void
): Promise<void> {
const { preset, bitratePercent } = getTranscodeSettings()
// 音频不放大也不压缩:跟随源音轨码率(读不到时才用 128k)
const audioBitrate = sourceAudioBitrate > 0
? sourceAudioBitrate
: 128_000
const audioKbps = `${Math.round(audioBitrate / 1000)}k`
let codecArgs: string[]
if (preset === 'copy') {
// 不重新编码:只把音视频流重新封装成 HLS 切片
codecArgs = ['-c', 'copy', '-bsf:v', 'h264_mp4toannexb']
} else if (preset === 'compress') {
// 目标「总码率」= 源码率 × 比例,再扣掉音频预算得到视频码率,避免总量反超
const targetTotal = Math.round(sourceBitrate * bitratePercent / 100)
const targetVideo = Math.max(80_000, targetTotal - audioBitrate)
codecArgs = [
'-c:v', 'libx264',
'-preset', 'medium',
'-b:v', String(targetVideo),
'-maxrate', String(Math.round(targetVideo * 1.2)),
'-bufsize', String(targetVideo * 2),
'-c:a', 'aac',
'-b:a', audioKbps
]
} else {
// 恒定质量优先,但用「源码率 - 音频预算」卡住视频峰值,避免体积反超源文件
const ceiling = sourceBitrate > audioBitrate ? sourceBitrate - audioBitrate : 0
codecArgs = [
'-c:v', 'libx264',
'-preset', preset,
'-crf', '23',
...(ceiling
? ['-maxrate', String(ceiling), '-bufsize', String(ceiling * 2)]
: []),
'-c:a', 'aac',
'-b:a', audioKbps
]
}
return new Promise((resolve, reject) => {
const child = spawn('ffmpeg', [
'-hide_banner',
'-loglevel', 'error',
'-nostats',
'-progress', 'pipe:1',
'-y',
'-i', inputPath,
'-threads', String(getTranscodeThreads()),
...codecArgs,
'-f', 'hls',
'-hls_time', String(HLS_SEGMENT_TIME),
'-hls_playlist_type', 'vod',
// 分片写相对名,避免播放列表里出现本机绝对路径
'-hls_segment_filename', 'seg%03d.ts',
'index.m3u8'
], { cwd: outputDir, windowsHide: true })
runningProcesses.set(videoKey, child)
const release = () => {
runningProcesses.delete(videoKey)
}
let stderr = ''
child.stderr.on('data', (chunk) => {
stderr += String(chunk)
})
child.stdout.on('data', (chunk) => {
const match = /out_time_us=(\d+)/.exec(String(chunk))
if (match?.[1]) onProgressUs(Number(match[1]))
})
child.on('error', (error) => {
release()
reject(error)
})
child.on('close', (code) => {
release()
if (code === 0) {
resolve()
return
}
const detail = stderr.trim().split('\n').filter(Boolean).pop()
reject(new Error(detail || `ffmpeg 退出码 ${code}`))
})
})
}
async function streamToFile(stream: NodeJS.ReadableStream, filePath: string): Promise<void> {
await pipeline(stream, createWriteStream(filePath))
}
async function streamToString(stream: NodeJS.ReadableStream): Promise<string> {
const chunks: Buffer[] = []
for await (const chunk of stream) {
chunks.push(Buffer.from(chunk as Uint8Array))
}
return Buffer.concat(chunks).toString('utf8')
}
/** 把视频转成 HLS 并写入存储,返回播放列表 key 与产物总大小 */
export async function transcodeVideoToHls(
videoKey: string
): Promise<{ playlistKey: string, totalBytes: number }> {
const stored = await headImage(videoKey)
if (!stored) throw new Error('视频不存在')
const workDir = join(tmpdir(), `pichost-hls-${randomUUID()}`)
const inputPath = join(workDir, `input.${extensionOf(videoKey)}`)
const outputDir = join(workDir, 'out')
const dirKey = stripExtension(videoKey)
const playlistKey = hlsPlaylistKey(videoKey)
await fs.mkdir(outputDir, { recursive: true })
// 记录已写入存储的产物,中途失败时要逐个回收,避免留下残缺切片
const writtenKeys: string[] = []
const backend = await getBackendForKey(videoKey)
try {
await streamToFile(await createImageStream(videoKey), inputPath)
const durationSec = await probeDuration(inputPath)
const sourceBitrate = await probeBitrate(inputPath)
const sourceAudioBitrate = await probeAudioBitrate(inputPath)
let lastProgressAt = 0
await runFfmpeg(videoKey, inputPath, outputDir, sourceBitrate, sourceAudioBitrate, (outTimeUs) => {
if (!durationSec) return
const now = Date.now()
if (now - lastProgressAt < 1000) return
lastProgressAt = now
const percent = Math.round((outTimeUs / (durationSec * 1_000_000)) * 100)
updateImageTranscode(videoKey, {
status: 'running',
progress: Math.min(99, Math.max(1, percent))
})
})
const uploadedAt = new Date().toISOString()
let totalBytes = 0
for (const name of await fs.readdir(outputDir)) {
const bytes = await fs.readFile(join(outputDir, name))
const objectKey = `${dirKey}/${name}`
await backend.put(objectKey, new Uint8Array(bytes), {
originalName: name,
uploadedAt,
contentType: name.endsWith('.m3u8')
? 'application/vnd.apple.mpegurl'
: 'video/mp2t',
size: bytes.byteLength,
userId: stored.userId ?? null,
mediaType: 'video'
})
writtenKeys.push(objectKey)
totalBytes += bytes.byteLength
}
return { playlistKey, totalBytes }
} catch (error) {
for (const key of writtenKeys) {
await backend.delete(key).catch(() => {})
}
if (backend.type === 'local') {
await fs.rmdir(join(getDataDir(), ...dirKey.split('/'))).catch(() => {})
}
throw error
} finally {
await fs.rm(workDir, { recursive: true, force: true }).catch(() => {})
}
}
/** 删除视频对应的 HLS 播放列表与分片 */
export async function removeHlsArtifacts(videoKey: string): Promise<void> {
const playlistKey = hlsPlaylistKey(videoKey)
// 封面缩略图与播放列表无关,必须先于提前返回处理
await deleteImage(thumbKeyFor(videoKey)).catch(() => {})
if (!await headImage(playlistKey)) return
const dirKey = stripExtension(videoKey)
const text = await streamToString(await createImageStream(playlistKey))
for (const line of text.split('\n')) {
const name = line.trim()
if (!name || name.startsWith('#')) continue
const segmentKey = `${dirKey}/${basename(name)}`
if (!validateStorageKey(segmentKey)) continue
await deleteImage(segmentKey).catch(() => {})
}
await deleteImage(playlistKey).catch(() => {})
// 本地磁盘上把清空后的分片目录一并移除
const backend = await getBackendForKey(videoKey)
if (backend.type === 'local') {
await fs.rmdir(join(getDataDir(), ...dirKey.split('/'))).catch(() => {})
}
}
const queue: string[] = []
const queued = new Set<string>()
let activeCount = 0
async function processOne(videoKey: string): Promise<void> {
updateImageTranscode(videoKey, { status: 'running' })
try {
const { playlistKey, totalBytes } = await transcodeVideoToHls(videoKey)
// 转码成功后源文件不再需要,直接删除以节省空间
const backend = await getBackendForKey(videoKey)
await backend.delete(videoKey).catch(() => {})
updateImageTranscode(videoKey, {
status: 'done',
hlsKey: playlistKey,
progress: 100,
sourceDeleted: true,
size: totalBytes
})
logInfo('transcode done', { key: videoKey, hlsKey: playlistKey })
} catch (error) {
updateImageTranscode(videoKey, { status: 'failed' })
logException('transcode failed', error, { key: videoKey })
}
}
/** 按设置的并发数消费队列(默认 1,即串行) */
function drain(): void {
while (queue.length && activeCount < getTranscodeConcurrency()) {
const key = queue.shift()!
activeCount += 1
void processOne(key).finally(() => {
activeCount -= 1
queued.delete(key)
drain()
})
}
}
export function enqueueTranscode(videoKey: string): void {
if (!validateVideoKey(videoKey) || queued.has(videoKey)) return
queued.add(videoKey)
queue.push(videoKey)
// 记录本视频使用的档位,便于上传页展示
const preset = getTranscodeSettings().preset
updateImageTranscode(videoKey, {
status: 'pending',
// 压缩档带上百分比,例如 compress:80
preset: preset === 'compress'
? `compress:${getTranscodeBitratePercent()}`
: preset
})
drain()
}
/** 取消排队中或正在转码的任务(删除视频时调用) */
export function cancelTranscode(videoKey: string): void {
const index = queue.indexOf(videoKey)
if (index >= 0) queue.splice(index, 1)
queued.delete(videoKey)
const child = runningProcesses.get(videoKey)
if (child) {
runningProcesses.delete(videoKey)
child.kill()
}
}
/**
* 补删转码完成后仍保留的源文件。
* 仅当 HLS 播放列表确实存在时才删除,避免产物缺失时把视频删没。
*/
export async function cleanupTranscodedSources(): Promise<number> {
let removed = 0
for (const row of listTranscodedSourceRows()) {
try {
if (!await headImage(row.hlsKey)) continue
const backend = await getBackendForKey(row.key)
await backend.delete(row.key).catch(() => {})
updateImageTranscode(row.key, { status: 'done', sourceDeleted: true })
removed += 1
} catch (error) {
logException('cleanup transcoded source failed', error, { key: row.key })
}
}
return removed
}
/** 启动时把上次中断的任务重新排队 */
export function resumePendingTranscodes(): void {
for (const key of listPendingTranscodeKeys()) {
enqueueTranscode(key)
}
}
/**
* 清理遗留的转码进程。
* 开发时热重载会重建模块,队列里的旧 ffmpeg 仍在跑,必须按命令行特征回收。
*/
export function killOrphanFfmpeg(): Promise<void> {
return new Promise((resolve) => {
try {
const psScript = 'Get-CimInstance Win32_Process -Filter "Name=\'ffmpeg.exe\'" '
+ '| Where-Object { $_.CommandLine -like \'*pichost-hls-*\' } '
+ '| ForEach-Object { Stop-Process -Id $_.ProcessId -Force }'
const child = process.platform === 'win32'
? spawn('powershell', ['-NoProfile', '-NonInteractive', '-Command', psScript], {
windowsHide: true,
stdio: 'ignore'
})
: spawn('pkill', ['-f', 'pichost-hls-'], { stdio: 'ignore' })
child.on('error', () => resolve())
child.on('close', () => resolve())
} catch {
resolve()
}
})
}
/**
* 清理没有对应主视频记录的附属文件(缩略图、HLS 播放列表与分片)。
* 正常删除流程已经清理,这里兜底历史残留。
*/
export async function purgeOrphanVideoAssets(): Promise<number> {
const root = join(getDataDir(), VIDEO_FOLDER)
const owners = new Set(
listAllImageIndexRows()
.filter(row => row.key.startsWith(`${VIDEO_FOLDER}/`))
.map(row => stripExtension(row.key))
)
let removed = 0
async function walk(dir: string, keyPrefix: string): Promise<void> {
let entries
try {
entries = await fs.readdir(dir, { withFileTypes: true })
} catch {
return
}
for (const entry of entries) {
const name = String(entry.name)
const key = `${keyPrefix}/${name}`
if (entry.isDirectory()) {
await walk(join(dir, name), key)
// 附属文件清空后的空目录一并移除
await fs.rmdir(join(dir, name)).catch(() => {})
continue
}
if (!isVideoSidecarKey(key)) continue
const extension = extensionFromFilename(name)
// 缩略图与视频同名前缀;播放列表和分片归属所在目录
const owner = ['webp', 'jpg', 'jpeg', 'png'].includes(extension)
? stripExtension(key)
: keyPrefix
if (owners.has(owner)) continue
await fs.rm(join(dir, name), { force: true }).catch(() => {})
removed += 1
}
}
await walk(root, VIDEO_FOLDER)
return removed
}
/** 进程退出时尽量带走正在运行的 ffmpeg,避免留下孤儿进程 */
function killRunningProcesses(): void {
for (const child of runningProcesses.values()) {
child.kill()
}
runningProcesses.clear()
}
process.on('exit', killRunningProcesses)
process.on('SIGINT', killRunningProcesses)
process.on('SIGTERM', killRunningProcesses)