chore(merge): 将 develop 同步到 release/v1.0.0
This commit is contained in:
Zhou Weidong committed
commit
430ba59613
60 files changed
+6769
-426
No files matched your search
@@ -0,0 +1,363 @@
|
||||
<!-- Author: fruit.com.cn -->
|
||||
<!-- 剧集批量上传弹窗：先入队待上传，点「开始上传」后再执行 -->
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, ref, watch } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { AppIcons } from '@/constants/icons'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import CreateEpisodesDialog from './CreateEpisodesDialog.vue'
|
||||
import UploadTaskRow from './UploadTaskRow.vue'
|
||||
import { useUploadQueue } from './useUploadQueue'
|
||||
import { MAX_VIDEO_SIZE, VIDEO_ACCEPT_ATTR, VIDEO_EXTENSIONS } from './videoLimit'
|
||||
import type { UploadSessionRecord } from './uploadSessions'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue: boolean
|
||||
dramaId: string | number
|
||||
nextEpisodeNumber: number
|
||||
defaultUnlockCoin: number
|
||||
existingNumbers: number[]
|
||||
/** 所属短剧免费集数；不传默认 0 */
|
||||
freeEpisodes?: number
|
||||
}>(),
|
||||
{
|
||||
freeEpisodes: 0
|
||||
}
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
created: []
|
||||
refreshed: []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const visible = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value: boolean) => emit('update:modelValue', value)
|
||||
})
|
||||
|
||||
const dramaKey = computed(() => String(props.dramaId || ''))
|
||||
const fileInputRef = ref<HTMLInputElement | null>(null)
|
||||
const resumeFileInputRef = ref<HTMLInputElement | null>(null)
|
||||
const rejectedNames = ref<string[]>([])
|
||||
const pendingSessions = ref<UploadSessionRecord[]>([])
|
||||
const createVisible = ref(false)
|
||||
const resumePromptShown = ref(false)
|
||||
|
||||
const queue = useUploadQueue({ getDramaId: () => dramaKey.value })
|
||||
|
||||
watch(
|
||||
() => props.dramaId,
|
||||
() => {
|
||||
queue.clear()
|
||||
resumePromptShown.value = false
|
||||
}
|
||||
)
|
||||
|
||||
const canCreateEpisodes = computed(() => queue.doneItems.value.length > 0)
|
||||
|
||||
const startButtonLabel = computed(() =>
|
||||
queue.isUploading.value ? t('episodeBatch.uploadingAction') : t('episodeBatch.startUpload')
|
||||
)
|
||||
|
||||
function extensionOf(fileName: string): string {
|
||||
const parts = String(fileName || '').split('.')
|
||||
return (parts.pop() || '').toLowerCase()
|
||||
}
|
||||
|
||||
function validateFile(file: File): string {
|
||||
if (!VIDEO_EXTENSIONS.includes(extensionOf(file.name))) {
|
||||
return t('episodeBatch.invalidType')
|
||||
}
|
||||
if (file.size > MAX_VIDEO_SIZE) {
|
||||
return t('episodeBatch.oversize')
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
function onPickFiles(event: Event): void {
|
||||
const input = event.target as HTMLInputElement
|
||||
const files = Array.from(input.files || [])
|
||||
input.value = ''
|
||||
if (!files.length) return
|
||||
const accepted: File[] = []
|
||||
const rejected: string[] = []
|
||||
for (const file of files) {
|
||||
const reason = validateFile(file)
|
||||
if (reason) {
|
||||
rejected.push(`${file.name}: ${reason}`)
|
||||
} else {
|
||||
accepted.push(file)
|
||||
}
|
||||
}
|
||||
rejectedNames.value = rejected
|
||||
if (!accepted.length) return
|
||||
// 只入队，不发起上传；等用户点「开始上传」
|
||||
queue.enqueue(accepted)
|
||||
}
|
||||
|
||||
function openFilePicker(): void {
|
||||
fileInputRef.value?.click()
|
||||
}
|
||||
|
||||
function onStartUpload(): void {
|
||||
if (!queue.canStart.value) return
|
||||
queue.start()
|
||||
}
|
||||
|
||||
function onBeforeUnload(event: BeforeUnloadEvent): void {
|
||||
if (!queue.hasActiveUpload.value) return
|
||||
event.preventDefault()
|
||||
event.returnValue = ''
|
||||
}
|
||||
|
||||
watch(
|
||||
() => queue.hasActiveUpload.value,
|
||||
(active) => {
|
||||
if (active) {
|
||||
window.addEventListener('beforeunload', onBeforeUnload)
|
||||
} else {
|
||||
window.removeEventListener('beforeunload', onBeforeUnload)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('beforeunload', onBeforeUnload)
|
||||
})
|
||||
|
||||
async function promptResumeIfNeeded(): Promise<void> {
|
||||
if (resumePromptShown.value || !dramaKey.value) return
|
||||
const sessions = queue.getPendingSessions()
|
||||
if (!sessions.length) return
|
||||
resumePromptShown.value = true
|
||||
pendingSessions.value = sessions
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
t('episodeBatch.resumeConfirm', { count: sessions.length }),
|
||||
t('episodeBatch.resumeTitle'),
|
||||
{
|
||||
confirmButtonText: t('episodeBatch.resumeYes'),
|
||||
cancelButtonText: t('episodeBatch.resumeNo'),
|
||||
type: 'info'
|
||||
}
|
||||
)
|
||||
resumeFileInputRef.value?.click()
|
||||
} catch {
|
||||
queue.abandonSessions(sessions)
|
||||
pendingSessions.value = []
|
||||
ElMessage.info(t('episodeBatch.resumeAbandoned'))
|
||||
}
|
||||
}
|
||||
|
||||
async function onResumeFiles(event: Event): Promise<void> {
|
||||
const input = event.target as HTMLInputElement
|
||||
const files = Array.from(input.files || [])
|
||||
input.value = ''
|
||||
const sessions = pendingSessions.value
|
||||
if (!files.length || !sessions.length) return
|
||||
const { matched, unmatched } = await queue.resumeFromSessions(sessions, files)
|
||||
pendingSessions.value = []
|
||||
if (unmatched.length) {
|
||||
ElMessage.warning(t('episodeBatch.resumeUnmatched', { count: unmatched.length }))
|
||||
}
|
||||
if (matched.length) {
|
||||
ElMessage.success(t('episodeBatch.resumeMatched', { count: matched.length }))
|
||||
}
|
||||
}
|
||||
|
||||
function beforeClose(done: () => void): void {
|
||||
if (!queue.hasActiveUpload.value) {
|
||||
done()
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm(t('episodeBatch.closeWhileUploading'), t('common.reminder'), {
|
||||
type: 'warning',
|
||||
confirmButtonText: t('common.ok'),
|
||||
cancelButtonText: t('common.cancel')
|
||||
})
|
||||
.then(() => {
|
||||
queue.pause()
|
||||
done()
|
||||
})
|
||||
.catch(() => undefined)
|
||||
}
|
||||
|
||||
watch(visible, (open) => {
|
||||
if (open) {
|
||||
void promptResumeIfNeeded()
|
||||
}
|
||||
})
|
||||
|
||||
function openCreateDialog(): void {
|
||||
if (!canCreateEpisodes.value) return
|
||||
createVisible.value = true
|
||||
}
|
||||
|
||||
function onEpisodesCreated(): void {
|
||||
createVisible.value = false
|
||||
emit('created')
|
||||
visible.value = false
|
||||
queue.clear()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:title="t('episodeBatch.title')"
|
||||
width="720px"
|
||||
class="batch-upload-dialog"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="beforeClose"
|
||||
>
|
||||
<input
|
||||
ref="fileInputRef"
|
||||
type="file"
|
||||
multiple
|
||||
hidden
|
||||
:accept="VIDEO_ACCEPT_ATTR"
|
||||
@change="onPickFiles"
|
||||
/>
|
||||
<input
|
||||
ref="resumeFileInputRef"
|
||||
type="file"
|
||||
multiple
|
||||
hidden
|
||||
:accept="VIDEO_ACCEPT_ATTR"
|
||||
@change="onResumeFiles"
|
||||
/>
|
||||
|
||||
<div class="batch-upload-toolbar">
|
||||
<el-button type="primary" @click="openFilePicker">
|
||||
<AppIcon :icon="AppIcons.upload" />
|
||||
{{ t('episodeBatch.selectFiles') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
:disabled="!queue.started.value || !queue.items.value.length"
|
||||
@click="queue.pause()"
|
||||
>
|
||||
{{ t('episodeBatch.pause') }}
|
||||
</el-button>
|
||||
<el-button :disabled="!queue.canStart.value" @click="queue.start()">
|
||||
{{ t('episodeBatch.resume') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
:disabled="!queue.items.value.some((item) => item.status === 'failed')"
|
||||
@click="queue.retryAll()"
|
||||
>
|
||||
{{ t('episodeBatch.retryAll') }}
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<p class="batch-upload-hint">{{ t('episodeBatch.hint') }}</p>
|
||||
|
||||
<div v-if="rejectedNames.length" class="batch-upload-rejected">
|
||||
<p v-for="name in rejectedNames" :key="name">{{ name }}</p>
|
||||
</div>
|
||||
|
||||
<div v-if="queue.items.value.length" class="batch-upload-overall">
|
||||
<span>{{ t('episodeBatch.overallProgress') }}</span>
|
||||
<el-progress :percentage="queue.overallPercent.value" :stroke-width="12" />
|
||||
</div>
|
||||
|
||||
<p v-if="queue.showResultSummary.value" class="batch-upload-summary">
|
||||
{{
|
||||
t('episodeBatch.resultSummary', {
|
||||
done: queue.doneItems.value.length,
|
||||
failed: queue.failedCount.value
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
|
||||
<div class="batch-upload-list">
|
||||
<UploadTaskRow
|
||||
v-for="(item, index) in queue.items.value"
|
||||
:key="item.id"
|
||||
:item="item"
|
||||
:index="index + 1"
|
||||
:allow-remove="!queue.started.value && item.status === 'waiting'"
|
||||
@retry="queue.retry"
|
||||
@remove="queue.remove"
|
||||
/>
|
||||
<el-empty v-if="!queue.items.value.length" :description="t('episodeBatch.empty')" />
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">{{ t('common.cancel') }}</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:disabled="!queue.canStart.value"
|
||||
:loading="queue.isUploading.value"
|
||||
@click="onStartUpload"
|
||||
>
|
||||
{{ startButtonLabel }}
|
||||
</el-button>
|
||||
<el-button type="success" :disabled="!canCreateEpisodes" @click="openCreateDialog">
|
||||
{{ t('episodeBatch.createEpisodes') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<CreateEpisodesDialog
|
||||
v-model="createVisible"
|
||||
:drama-id="dramaId"
|
||||
:done-items="queue.doneItems.value"
|
||||
:next-episode-number="nextEpisodeNumber"
|
||||
:default-unlock-coin="defaultUnlockCoin"
|
||||
:free-episodes="freeEpisodes"
|
||||
:existing-numbers="existingNumbers"
|
||||
@settled="emit('refreshed')"
|
||||
@created="onEpisodesCreated"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.batch-upload-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.batch-upload-hint {
|
||||
margin: 0 0 12px;
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.batch-upload-rejected {
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 12px;
|
||||
color: var(--el-color-danger);
|
||||
background: color-mix(in srgb, var(--el-color-danger) 8%, transparent);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.batch-upload-rejected p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.batch-upload-overall {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.batch-upload-summary {
|
||||
padding: 8px 12px;
|
||||
margin: 0 0 12px;
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-primary);
|
||||
background: color-mix(in srgb, var(--el-color-success) 10%, transparent);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.batch-upload-list {
|
||||
max-height: 360px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,263 @@
|
||||
<!-- Author: fruit.com.cn -->
|
||||
<!-- 批量创建分集确认清单：标题取文件名，集号自动顺延，失败可重试 -->
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { createEpisodeApi } from '@/api/admin/episode'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import type { UploadQueueItem } from './useUploadQueue'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue: boolean
|
||||
dramaId: string | number
|
||||
doneItems: UploadQueueItem[]
|
||||
nextEpisodeNumber: number
|
||||
defaultUnlockCoin: number
|
||||
existingNumbers: number[]
|
||||
/** 所属短剧免费集数；不传默认 0 */
|
||||
freeEpisodes?: number
|
||||
}>(),
|
||||
{
|
||||
freeEpisodes: 0
|
||||
}
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
settled: []
|
||||
created: []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
interface EpisodeDraft {
|
||||
key: string
|
||||
sourceName: string
|
||||
number: number
|
||||
title: string
|
||||
isFree: boolean
|
||||
videoUrl: string
|
||||
durationSec: number
|
||||
saved: boolean
|
||||
error: string
|
||||
}
|
||||
|
||||
const PUBLISHED_STATUS = 'published'
|
||||
const rows = ref<EpisodeDraft[]>([])
|
||||
const submitting = ref(false)
|
||||
|
||||
function baseName(fileName: string): string {
|
||||
const dot = fileName.lastIndexOf('.')
|
||||
if (dot <= 0) return fileName
|
||||
return fileName.slice(0, dot)
|
||||
}
|
||||
|
||||
function compareNatural(left: string, right: string): number {
|
||||
return left.localeCompare(right, undefined, { numeric: true, sensitivity: 'base' })
|
||||
}
|
||||
|
||||
/** 从起点起跳过已占用集号，返回下一个可用值。 */
|
||||
function nextFreeNumber(start: number, used: Set<number>): number {
|
||||
let candidate = start
|
||||
while (used.has(candidate)) {
|
||||
candidate += 1
|
||||
}
|
||||
return candidate
|
||||
}
|
||||
|
||||
function buildRows(): void {
|
||||
const sorted = [...props.doneItems].sort((left, right) =>
|
||||
compareNatural(baseName(left.fileName), baseName(right.fileName))
|
||||
)
|
||||
const used = new Set(props.existingNumbers)
|
||||
let cursor = props.nextEpisodeNumber
|
||||
const freeLimit = props.freeEpisodes
|
||||
rows.value = sorted.map((item) => {
|
||||
const number = nextFreeNumber(cursor, used)
|
||||
used.add(number)
|
||||
cursor = number + 1
|
||||
const isFree = number <= freeLimit
|
||||
return {
|
||||
key: item.id,
|
||||
sourceName: item.fileName,
|
||||
number,
|
||||
title: baseName(item.fileName),
|
||||
isFree,
|
||||
videoUrl: item.url || '',
|
||||
durationSec: item.durationSec || 0,
|
||||
saved: false,
|
||||
error: ''
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(open) => {
|
||||
if (open) buildRows()
|
||||
}
|
||||
)
|
||||
|
||||
function errorText(error: unknown): string {
|
||||
if (error instanceof Error && error.message) return error.message
|
||||
return t('episodeBatch.createFailed')
|
||||
}
|
||||
|
||||
async function createOne(row: EpisodeDraft): Promise<void> {
|
||||
if (!row.videoUrl) {
|
||||
row.error = t('episodeBatch.missingVideo')
|
||||
return
|
||||
}
|
||||
try {
|
||||
await createEpisodeApi({
|
||||
dramaId: props.dramaId as unknown as number,
|
||||
number: row.number,
|
||||
title: baseName(row.sourceName),
|
||||
durationSec: row.durationSec,
|
||||
videoUrl: row.videoUrl,
|
||||
isFree: row.isFree,
|
||||
unlockCoin: row.isFree ? 0 : props.defaultUnlockCoin,
|
||||
status: PUBLISHED_STATUS
|
||||
})
|
||||
row.saved = true
|
||||
row.error = ''
|
||||
} catch (error) {
|
||||
row.error = errorText(error)
|
||||
}
|
||||
}
|
||||
|
||||
async function submit(): Promise<void> {
|
||||
if (submitting.value) return
|
||||
submitting.value = true
|
||||
try {
|
||||
for (const row of rows.value) {
|
||||
if (!row.saved) await createOne(row)
|
||||
}
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
emit('settled')
|
||||
if (rows.value.every((row) => row.saved)) {
|
||||
ElMessage.success(t('episodeBatch.createAllSuccess'))
|
||||
emit('created')
|
||||
return
|
||||
}
|
||||
ElMessage.warning(t('episodeBatch.createPartial'))
|
||||
}
|
||||
|
||||
function closeDialog(): void {
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
|
||||
function hasFailed(): boolean {
|
||||
return rows.value.some((row) => !row.saved && !!row.error)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog
|
||||
:model-value="modelValue"
|
||||
:title="t('episodeBatch.createTitle')"
|
||||
width="760px"
|
||||
:close-on-click-modal="false"
|
||||
@update:model-value="emit('update:modelValue', $event)"
|
||||
>
|
||||
<p class="create-episode-hint">{{ t('episodeBatch.createHint') }}</p>
|
||||
<div class="create-episode-head">
|
||||
<span>{{ t('episodeBatch.colSource') }}</span>
|
||||
<span>{{ t('episodeBatch.colNumber') }}</span>
|
||||
<span>{{ t('episodeBatch.colTitle') }}</span>
|
||||
<span>{{ t('episodeBatch.colFree') }}</span>
|
||||
<span>{{ t('episodeBatch.colResult') }}</span>
|
||||
</div>
|
||||
<div class="create-episode-list">
|
||||
<div
|
||||
v-for="row in rows"
|
||||
:key="row.key"
|
||||
class="create-episode-row"
|
||||
:class="{ 'is-saved': row.saved }"
|
||||
>
|
||||
<b class="create-episode-source" :title="row.sourceName">{{ row.sourceName }}</b>
|
||||
<span class="create-episode-number">{{ row.number }}</span>
|
||||
<span class="create-episode-title" :title="row.title">{{ row.title }}</span>
|
||||
<span class="create-episode-free" :class="row.isFree ? 'is-free' : 'is-paid'">
|
||||
{{ row.isFree ? t('episodeBatch.labelFree') : t('episodeBatch.labelPaid') }}
|
||||
</span>
|
||||
<span class="create-episode-result">
|
||||
{{ row.saved ? t('episodeBatch.createOk') : row.error }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="closeDialog">{{ t('common.cancel') }}</el-button>
|
||||
<el-button type="primary" :loading="submitting" @click="submit">
|
||||
{{ hasFailed() ? t('episodeBatch.retryFailed') : t('episodeBatch.submitCreate') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.create-episode-hint {
|
||||
margin: 0 0 12px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.create-episode-head,
|
||||
.create-episode-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(120px, 1.2fr) 72px minmax(140px, 1.4fr) 56px minmax(80px, 0.8fr);
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.create-episode-free {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.create-episode-free.is-free {
|
||||
color: var(--el-color-success);
|
||||
}
|
||||
|
||||
.create-episode-free.is-paid {
|
||||
color: var(--el-color-warning);
|
||||
}
|
||||
|
||||
.create-episode-head {
|
||||
margin-bottom: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.create-episode-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
max-height: 420px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.create-episode-source,
|
||||
.create-episode-title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.create-episode-number {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.create-episode-result {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.create-episode-row.is-saved .create-episode-result {
|
||||
color: var(--el-color-success);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,283 @@
|
||||
<!-- Author: fruit.com.cn -->
|
||||
<!-- 剧集新建/编辑弹窗：表单校验、单集视频上传与保存 -->
|
||||
|
||||
<script setup>
|
||||
import { nextTick, reactive, ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { createEpisodeApi, updateEpisodeApi } from '@/api/admin/episode'
|
||||
import { formatCount } from '@/utils/format'
|
||||
import EpisodeTranscodePanel from './EpisodeTranscodePanel.vue'
|
||||
import EpisodeVideoUploader from './EpisodeVideoUploader.vue'
|
||||
|
||||
const props = defineProps({
|
||||
dramaOptions: { type: Object, default: null },
|
||||
nextNumber: { type: Number, default: 1 },
|
||||
row: { type: Object, default: null }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['saved'])
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const saving = ref(false)
|
||||
const uploadingVideo = ref(false)
|
||||
const videoFileName = ref('')
|
||||
const editingId = ref(null)
|
||||
const editingCommentCount = ref(0)
|
||||
const formRef = ref()
|
||||
const uploaderRef = ref()
|
||||
|
||||
const form = reactive({
|
||||
number: 1,
|
||||
title: '',
|
||||
durationSec: 0,
|
||||
videoUrl: '',
|
||||
isFree: true,
|
||||
unlockCoin: 0,
|
||||
likeCount: 0,
|
||||
status: 'draft'
|
||||
})
|
||||
|
||||
const statusOptions = [
|
||||
{ code: 'draft', text: '草稿' },
|
||||
{ code: 'approved', text: '待发布' },
|
||||
{ code: 'published', text: '已上线' },
|
||||
{ code: 'offline', text: '已下线' }
|
||||
]
|
||||
|
||||
const formRules = {
|
||||
number: [{ required: true, message: '请输入集号', trigger: 'change' }],
|
||||
title: [{ required: true, message: '请输入剧集标题', trigger: 'blur' }],
|
||||
videoUrl: [
|
||||
{
|
||||
validator: (_rule, value, callback) => {
|
||||
if (form.status === 'published' && !value) {
|
||||
callback(new Error('上线剧集必须上传视频'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function episodeBasename(path) {
|
||||
if (!path) return ''
|
||||
const clean = path.split('?')[0].split('#')[0]
|
||||
return decodeURIComponent(clean.split('/').pop() || clean)
|
||||
}
|
||||
|
||||
async function resetValidation() {
|
||||
await nextTick()
|
||||
formRef.value?.clearValidate()
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
editingId.value = null
|
||||
Object.assign(form, {
|
||||
number: props.nextNumber,
|
||||
title: '',
|
||||
durationSec: 0,
|
||||
videoUrl: '',
|
||||
isFree: true,
|
||||
unlockCoin: props.dramaOptions?.unlockCoin ?? 0,
|
||||
likeCount: 0,
|
||||
status: 'draft'
|
||||
})
|
||||
videoFileName.value = ''
|
||||
uploaderRef.value?.clearError()
|
||||
editingCommentCount.value = 0
|
||||
dialogVisible.value = true
|
||||
resetValidation()
|
||||
}
|
||||
|
||||
function openEdit(row) {
|
||||
const target = row || props.row
|
||||
if (!target) return
|
||||
editingId.value = target.id
|
||||
Object.assign(form, {
|
||||
number: target.number,
|
||||
title: target.title,
|
||||
durationSec: target.durationSec || 0,
|
||||
videoUrl: target.videoUrl || '',
|
||||
isFree: !!target.isFree,
|
||||
unlockCoin: target.unlockCoin || 0,
|
||||
likeCount: target.likeCount ?? 0,
|
||||
status: target.status
|
||||
})
|
||||
videoFileName.value = target.videoUrl ? episodeBasename(target.videoUrl) : ''
|
||||
uploaderRef.value?.clearError()
|
||||
editingCommentCount.value = target.commentCount ?? 0
|
||||
dialogVisible.value = true
|
||||
resetValidation()
|
||||
}
|
||||
|
||||
async function saveEpisode() {
|
||||
if (saving.value || uploadingVideo.value) return
|
||||
try {
|
||||
await formRef.value?.validate()
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
const dramaId = props.dramaOptions?.id
|
||||
if (!dramaId) return
|
||||
const payload = {
|
||||
dramaId,
|
||||
number: form.number,
|
||||
title: form.title.trim(),
|
||||
durationSec: form.durationSec || 0,
|
||||
videoUrl: form.videoUrl.trim(),
|
||||
isFree: form.isFree,
|
||||
unlockCoin: form.isFree ? 0 : form.unlockCoin || 0,
|
||||
likeCount: form.likeCount,
|
||||
status: form.status
|
||||
}
|
||||
saving.value = true
|
||||
try {
|
||||
if (editingId.value) {
|
||||
await updateEpisodeApi(editingId.value, payload)
|
||||
ElMessage.success('剧集已更新')
|
||||
} else {
|
||||
await createEpisodeApi(payload)
|
||||
ElMessage.success('剧集已创建')
|
||||
}
|
||||
dialogVisible.value = false
|
||||
emit('saved')
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function beforeDialogClose(done) {
|
||||
if (saving.value || uploadingVideo.value) {
|
||||
ElMessage.warning(saving.value ? '正在保存，请稍候' : '视频正在上传，请稍候')
|
||||
return
|
||||
}
|
||||
done()
|
||||
}
|
||||
|
||||
defineExpose({ openCreate, openEdit })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="editingId ? '编辑剧集' : '新增剧集'"
|
||||
width="680px"
|
||||
class="episode-editor-dialog"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="beforeDialogClose"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="formRules"
|
||||
label-position="top"
|
||||
class="episode-editor-form"
|
||||
>
|
||||
<section class="episode-editor-section">
|
||||
<h3 class="episode-editor-section-title">基础信息</h3>
|
||||
<div class="episode-editor-grid episode-editor-grid--two">
|
||||
<el-form-item label="集号" prop="number">
|
||||
<el-input-number
|
||||
v-model="form.number"
|
||||
class="episode-editor-number"
|
||||
controls-position="right"
|
||||
:min="1"
|
||||
:max="999"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="时长（秒）">
|
||||
<el-input-number
|
||||
v-model="form.durationSec"
|
||||
class="episode-editor-number"
|
||||
controls-position="right"
|
||||
:min="0"
|
||||
:max="9999"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="剧集标题" prop="title">
|
||||
<el-input v-model="form.title" maxlength="100" placeholder="例如：命运的相遇" />
|
||||
</el-form-item>
|
||||
</section>
|
||||
|
||||
<section class="episode-editor-section">
|
||||
<h3 class="episode-editor-section-title">视频文件</h3>
|
||||
<el-form-item prop="videoUrl">
|
||||
<EpisodeVideoUploader
|
||||
ref="uploaderRef"
|
||||
v-model:video-url="form.videoUrl"
|
||||
v-model:duration-sec="form.durationSec"
|
||||
v-model:file-name="videoFileName"
|
||||
v-model:uploading="uploadingVideo"
|
||||
@change="resetValidation"
|
||||
/>
|
||||
</el-form-item>
|
||||
</section>
|
||||
|
||||
<section class="episode-editor-section">
|
||||
<h3 class="episode-editor-section-title">互动数据</h3>
|
||||
<div class="episode-editor-grid episode-editor-grid--two">
|
||||
<el-form-item label="本集点赞数">
|
||||
<el-input-number
|
||||
v-model="form.likeCount"
|
||||
class="episode-editor-number"
|
||||
controls-position="right"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="本集评论数">
|
||||
<div class="readonly-stat">{{ formatCount(editingCommentCount) }}</div>
|
||||
<p class="readonly-stat-hint">按集实时统计，不可编辑</p>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="episode-editor-section">
|
||||
<h3 class="episode-editor-section-title">付费与状态</h3>
|
||||
<div class="episode-editor-grid episode-editor-grid--three">
|
||||
<el-form-item label="是否免费">
|
||||
<el-switch v-model="form.isFree" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="!form.isFree" label="解锁金币">
|
||||
<el-input-number
|
||||
v-model="form.unlockCoin"
|
||||
class="episode-editor-number"
|
||||
controls-position="right"
|
||||
:min="0"
|
||||
:max="9999"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="form.status">
|
||||
<el-option
|
||||
v-for="item in statusOptions"
|
||||
:key="item.code"
|
||||
:label="item.text"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</section>
|
||||
</el-form>
|
||||
|
||||
<EpisodeTranscodePanel v-if="editingId" :episode-id="editingId" :active="dialogVisible" />
|
||||
|
||||
<template #footer>
|
||||
<el-button :disabled="saving || uploadingVideo" @click="dialogVisible = false">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="saving"
|
||||
:disabled="saving || uploadingVideo"
|
||||
@click="saveEpisode"
|
||||
>
|
||||
保存
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
@@ -0,0 +1,315 @@
|
||||
<!-- Author: fruit.com.cn -->
|
||||
<!-- 剧集转码逐帧、雪碧图与分页预览 -->
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import type {
|
||||
MediaThumbnailFrameItem,
|
||||
MediaThumbnailResult,
|
||||
MediaThumbnailSpriteInfo
|
||||
} from '@/api/admin/types'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { formatTimeMs, THUMBNAIL_PAGE_SIZES } from './episodeTranscodeUi'
|
||||
|
||||
interface FramesView {
|
||||
data: MediaThumbnailResult | null
|
||||
loading: boolean
|
||||
errorMessage: string
|
||||
pageIndex: number
|
||||
pageSize: number
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
view: FramesView
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
pageChange: [value: number]
|
||||
pageSizeChange: [value: number]
|
||||
retry: []
|
||||
}>()
|
||||
|
||||
const FRAME_CARD_WIDTH = 128
|
||||
const PREVIEW_MAX_WIDTH = 520
|
||||
const PREVIEW_MAX_HEIGHT = 360
|
||||
|
||||
const { t } = useI18n()
|
||||
const frameView = ref<'frames' | 'sprites'>('frames')
|
||||
const previewVisible = ref(false)
|
||||
const previewFrame = ref<MediaThumbnailFrameItem | null>(null)
|
||||
const frames = computed(() => props.view.data?.frames?.list || [])
|
||||
const sprite = computed(() => props.view.data?.sprite || null)
|
||||
const spriteUrls = computed(() => sprite.value?.spriteUrls || [])
|
||||
const framesTotal = computed(() => Number(props.view.data?.frames?.total || 0))
|
||||
const previewStyle = computed(() => {
|
||||
const frame = previewFrame.value
|
||||
const info = sprite.value
|
||||
if (!frame || !info) return {}
|
||||
const scale = Math.min(
|
||||
PREVIEW_MAX_WIDTH / Math.max(1, frame.width),
|
||||
PREVIEW_MAX_HEIGHT / Math.max(1, frame.height)
|
||||
)
|
||||
return frameStyle(frame, info, scale)
|
||||
})
|
||||
|
||||
function openFramePreview(frame: MediaThumbnailFrameItem) {
|
||||
previewFrame.value = frame
|
||||
previewVisible.value = true
|
||||
}
|
||||
|
||||
function frameStyle(frame: MediaThumbnailFrameItem, info: MediaThumbnailSpriteInfo, scale: number) {
|
||||
return {
|
||||
width: `${Math.round(frame.width * scale)}px`,
|
||||
height: `${Math.round(frame.height * scale)}px`,
|
||||
backgroundImage: `url("${frame.spriteUrl || frame.imageUrl}")`,
|
||||
backgroundPosition: `-${Math.round(frame.x * scale)}px -${Math.round(frame.y * scale)}px`,
|
||||
backgroundSize: `${Math.round((info.columns || 1) * frame.width * scale)}px ${Math.round(
|
||||
(info.rows || 1) * frame.height * scale
|
||||
)}px`
|
||||
}
|
||||
}
|
||||
|
||||
function frameCardStyle(frame: MediaThumbnailFrameItem) {
|
||||
if (!sprite.value) return {}
|
||||
return frameStyle(frame, sprite.value, FRAME_CARD_WIDTH / Math.max(1, frame.width))
|
||||
}
|
||||
|
||||
function spriteFrameCount(index: number) {
|
||||
const info = sprite.value
|
||||
if (!info) return 0
|
||||
const capacity = Math.max(1, info.columns * info.rows)
|
||||
return Math.max(0, Math.min(capacity, info.totalFrames - index * capacity))
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="episode-transcode-frames__heading">
|
||||
<h4>{{ t('episodeTranscode.frameTitle') }}</h4>
|
||||
<div class="episode-transcode-frames__tools">
|
||||
<span>{{ t('episodeTranscode.frameCount', { total: framesTotal }) }}</span>
|
||||
<el-radio-group v-model="frameView" size="small">
|
||||
<el-radio-button label="frames">{{ t('episodeTranscode.frameView') }}</el-radio-button>
|
||||
<el-radio-button label="sprites">{{ t('episodeTranscode.spriteView') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<el-alert
|
||||
v-if="view.errorMessage"
|
||||
type="error"
|
||||
:title="view.errorMessage"
|
||||
:closable="false"
|
||||
show-icon
|
||||
>
|
||||
<template #default>
|
||||
<el-button size="small" text @click="emit('retry')">
|
||||
{{ t('episodeTranscode.retryLoad') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-alert>
|
||||
<div v-loading="view.loading">
|
||||
<template v-if="frameView === 'frames'">
|
||||
<div v-if="frames.length" class="episode-transcode-frames__grid">
|
||||
<button
|
||||
v-for="frame in frames"
|
||||
:key="frame.frameIndex"
|
||||
class="episode-transcode-frames__card"
|
||||
type="button"
|
||||
:aria-label="t('episodeTranscode.previewFrame', { time: formatTimeMs(frame.timeMs) })"
|
||||
@click="openFramePreview(frame)"
|
||||
>
|
||||
<span class="episode-transcode-frames__image" :style="frameCardStyle(frame)"></span>
|
||||
<span>{{ formatTimeMs(frame.timeMs) }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<el-empty v-else :description="t('episodeTranscode.noFrames')" :image-size="58" />
|
||||
<el-pagination
|
||||
v-if="framesTotal"
|
||||
class="episode-transcode-frames__pagination"
|
||||
background
|
||||
layout="sizes, prev, pager, next"
|
||||
:current-page="view.pageIndex"
|
||||
:page-size="view.pageSize"
|
||||
:page-sizes="THUMBNAIL_PAGE_SIZES"
|
||||
:total="framesTotal"
|
||||
@current-change="emit('pageChange', $event)"
|
||||
@size-change="emit('pageSizeChange', $event)"
|
||||
/>
|
||||
</template>
|
||||
<div v-else-if="spriteUrls.length && sprite" class="episode-transcode-frames__sprites">
|
||||
<figure
|
||||
v-for="(url, index) in spriteUrls"
|
||||
:key="url"
|
||||
class="episode-transcode-frames__sprite"
|
||||
>
|
||||
<div
|
||||
class="episode-transcode-frames__sprite-frame"
|
||||
:style="{
|
||||
aspectRatio: `${sprite.columns * sprite.thumbWidth} / ${
|
||||
sprite.rows * sprite.thumbHeight
|
||||
}`
|
||||
}"
|
||||
>
|
||||
<el-image
|
||||
:src="url"
|
||||
:preview-src-list="spriteUrls"
|
||||
:initial-index="index"
|
||||
fit="contain"
|
||||
preview-teleported
|
||||
hide-on-click-modal
|
||||
/>
|
||||
<span
|
||||
class="episode-transcode-frames__sprite-grid"
|
||||
:style="{
|
||||
backgroundSize: `calc(100% / ${sprite.columns}) calc(100% / ${sprite.rows})`
|
||||
}"
|
||||
></span>
|
||||
</div>
|
||||
<figcaption>
|
||||
<b>{{ t('episodeTranscode.spriteSheet', { index: index + 1 }) }}</b>
|
||||
<span>{{
|
||||
t('episodeTranscode.spriteSheetFrames', { count: spriteFrameCount(index) })
|
||||
}}</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<el-empty v-else :description="t('episodeTranscode.noSprites')" :image-size="58" />
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
v-model="previewVisible"
|
||||
:title="t('episodeTranscode.zoomTitle')"
|
||||
width="min(92vw, 600px)"
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
>
|
||||
<div class="episode-transcode-frames__preview-shell">
|
||||
<div class="episode-transcode-frames__preview-image" :style="previewStyle"></div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.episode-transcode-frames__heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin: 18px 0 10px;
|
||||
}
|
||||
|
||||
.episode-transcode-frames__heading h4 {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.episode-transcode-frames__tools {
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.episode-transcode-frames__grid {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
grid-template-columns: repeat(4, 128px);
|
||||
}
|
||||
|
||||
.episode-transcode-frames__card {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
font-size: 11px;
|
||||
color: var(--el-text-color-secondary);
|
||||
cursor: zoom-in;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.episode-transcode-frames__image {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
background-color: var(--el-fill-color-dark);
|
||||
background-repeat: no-repeat;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.episode-transcode-frames__card:hover .episode-transcode-frames__image {
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.episode-transcode-frames__pagination {
|
||||
margin-top: 14px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.episode-transcode-frames__sprites {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
}
|
||||
|
||||
.episode-transcode-frames__sprite {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.episode-transcode-frames__sprite-frame {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--el-fill-color-dark);
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.episode-transcode-frames__sprite-frame :deep(.el-image) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.episode-transcode-frames__sprite-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(to right, rgb(255 255 255 / 34%) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgb(255 255 255 / 34%) 1px, transparent 1px);
|
||||
background-repeat: repeat;
|
||||
}
|
||||
|
||||
.episode-transcode-frames__sprite figcaption {
|
||||
display: flex;
|
||||
padding-top: 6px;
|
||||
font-size: 11px;
|
||||
color: var(--el-text-color-secondary);
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.episode-transcode-frames__preview-shell {
|
||||
display: flex;
|
||||
min-height: 240px;
|
||||
background: var(--el-fill-color-dark);
|
||||
border-radius: 8px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.episode-transcode-frames__preview-image {
|
||||
background-repeat: no-repeat;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@media (width <= 600px) {
|
||||
.episode-transcode-frames__grid {
|
||||
grid-template-columns: repeat(2, 128px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,266 @@
|
||||
<!-- Author: fruit.com.cn -->
|
||||
<!-- 剧集转码面板：数据获取、轮询与子组件组合 -->
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, ref, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import {
|
||||
getEpisodeTranscodeApi,
|
||||
getMediaThumbnailsApi,
|
||||
triggerMediaTranscodeApi
|
||||
} from '@/api/admin/transcode'
|
||||
import type { EpisodeTranscodeItem, MediaThumbnailResult } from '@/api/admin/types'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import EpisodeTranscodeFrames from './EpisodeTranscodeFrames.vue'
|
||||
import EpisodeTranscodeRenditions from './EpisodeTranscodeRenditions.vue'
|
||||
import EpisodeTranscodeStatusBadge from './EpisodeTranscodeStatusBadge.vue'
|
||||
import EpisodeTranscodeStatusPanel from './EpisodeTranscodeStatusPanel.vue'
|
||||
import {
|
||||
safeTranscodeProgress,
|
||||
THUMBNAIL_PAGE_SIZE,
|
||||
transcodeProgressStatus,
|
||||
transcodeStatusKey,
|
||||
transcodeStatusType
|
||||
} from './episodeTranscodeUi'
|
||||
|
||||
const props = defineProps<{
|
||||
episodeId: string | number
|
||||
active: boolean
|
||||
}>()
|
||||
|
||||
const POLL_INTERVAL_MS = 4000
|
||||
|
||||
const { t } = useI18n()
|
||||
const expanded = ref<string[]>(['transcode'])
|
||||
const detail = ref<EpisodeTranscodeItem | null>(null)
|
||||
const thumbnails = ref<MediaThumbnailResult | null>(null)
|
||||
const loading = ref(false)
|
||||
const thumbnailLoading = ref(false)
|
||||
const retriggering = ref(false)
|
||||
const errorMessage = ref('')
|
||||
const thumbnailError = ref('')
|
||||
const pageIndex = ref(1)
|
||||
const pageSize = ref(THUMBNAIL_PAGE_SIZE)
|
||||
let pollTimer: ReturnType<typeof setTimeout> | null = null
|
||||
let requestSeq = 0
|
||||
let thumbnailSeq = 0
|
||||
|
||||
const mediaAssetId = computed(() => detail.value?.mediaAssetId || '')
|
||||
const hasMedia = computed(() => /^[1-9]\d*$/.test(mediaAssetId.value))
|
||||
const normalizedStatus = computed(() => String(detail.value?.status || '').toUpperCase())
|
||||
const renditions = computed(() => detail.value?.renditions || [])
|
||||
const isProcessing = computed(
|
||||
() => normalizedStatus.value === 'QUEUED' || normalizedStatus.value === 'RUNNING'
|
||||
)
|
||||
const statusLabel = computed(() =>
|
||||
t(`episodeTranscode.status.${transcodeStatusKey(detail.value?.status)}`)
|
||||
)
|
||||
const statusType = computed(() => transcodeStatusType(detail.value?.status))
|
||||
const progressStatus = computed(() => transcodeProgressStatus(detail.value?.status))
|
||||
const progress = computed(() => safeTranscodeProgress(detail.value?.progress))
|
||||
const showOutputs = computed(() => !!detail.value && hasMedia.value && !errorMessage.value)
|
||||
const statusView = computed(() => ({
|
||||
loading: loading.value,
|
||||
errorMessage: errorMessage.value,
|
||||
hasMedia: hasMedia.value,
|
||||
retriggering: retriggering.value,
|
||||
isProcessing: isProcessing.value,
|
||||
statusLabel: statusLabel.value,
|
||||
statusType: statusType.value,
|
||||
progressStatus: progressStatus.value,
|
||||
progress: progress.value
|
||||
}))
|
||||
const framesView = computed(() => ({
|
||||
data: thumbnails.value,
|
||||
loading: thumbnailLoading.value,
|
||||
errorMessage: thumbnailError.value,
|
||||
pageIndex: pageIndex.value,
|
||||
pageSize: pageSize.value
|
||||
}))
|
||||
|
||||
watch(
|
||||
[() => props.episodeId, () => props.active],
|
||||
([episodeId, active], [previousEpisodeId]) => {
|
||||
if (episodeId !== previousEpisodeId) resetState()
|
||||
if (!active) {
|
||||
stopPolling()
|
||||
return
|
||||
}
|
||||
if (episodeId) void loadDetail()
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
onBeforeUnmount(stopPolling)
|
||||
|
||||
function resetState() {
|
||||
stopPolling()
|
||||
requestSeq += 1
|
||||
thumbnailSeq += 1
|
||||
detail.value = null
|
||||
thumbnails.value = null
|
||||
errorMessage.value = ''
|
||||
thumbnailError.value = ''
|
||||
pageIndex.value = 1
|
||||
pageSize.value = THUMBNAIL_PAGE_SIZE
|
||||
}
|
||||
|
||||
function stopPolling() {
|
||||
if (pollTimer) clearTimeout(pollTimer)
|
||||
pollTimer = null
|
||||
}
|
||||
|
||||
function schedulePolling() {
|
||||
stopPolling()
|
||||
if (!props.active || !isProcessing.value) return
|
||||
pollTimer = setTimeout(() => {
|
||||
pollTimer = null
|
||||
void loadDetail(true)
|
||||
}, POLL_INTERVAL_MS)
|
||||
}
|
||||
|
||||
async function loadDetail(silent = false) {
|
||||
if (!props.active || !props.episodeId) return
|
||||
const seq = ++requestSeq
|
||||
stopPolling()
|
||||
if (!silent) loading.value = true
|
||||
errorMessage.value = ''
|
||||
try {
|
||||
const response = await getEpisodeTranscodeApi(props.episodeId)
|
||||
if (seq !== requestSeq) return
|
||||
const result = response.data
|
||||
detail.value = result
|
||||
if (result.thumbnails) {
|
||||
thumbnails.value = result.thumbnails
|
||||
pageIndex.value = result.thumbnails.pageIndex || 1
|
||||
pageSize.value = result.thumbnails.pageSize || THUMBNAIL_PAGE_SIZE
|
||||
thumbnailError.value = ''
|
||||
}
|
||||
if (isProcessing.value) schedulePolling()
|
||||
} catch (error) {
|
||||
if (seq !== requestSeq) return
|
||||
errorMessage.value = errorText(error, t('episodeTranscode.loadFailed'))
|
||||
stopPolling()
|
||||
} finally {
|
||||
if (seq === requestSeq) loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function loadThumbnailPage() {
|
||||
if (!hasMedia.value || thumbnailLoading.value) return
|
||||
const seq = ++thumbnailSeq
|
||||
thumbnailLoading.value = true
|
||||
thumbnailError.value = ''
|
||||
try {
|
||||
const response = await getMediaThumbnailsApi(
|
||||
mediaAssetId.value,
|
||||
pageIndex.value,
|
||||
pageSize.value
|
||||
)
|
||||
if (seq !== thumbnailSeq) return
|
||||
const result = response.data
|
||||
thumbnails.value = result
|
||||
pageIndex.value = result.pageIndex || pageIndex.value
|
||||
pageSize.value = result.pageSize || pageSize.value
|
||||
} catch (error) {
|
||||
if (seq !== thumbnailSeq) return
|
||||
thumbnailError.value = errorText(error, t('episodeTranscode.loadFailed'))
|
||||
} finally {
|
||||
if (seq === thumbnailSeq) thumbnailLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function retrigger() {
|
||||
if (!hasMedia.value || isProcessing.value || retriggering.value) return
|
||||
retriggering.value = true
|
||||
errorMessage.value = ''
|
||||
try {
|
||||
await triggerMediaTranscodeApi(mediaAssetId.value)
|
||||
if (detail.value) {
|
||||
detail.value = { ...detail.value, status: 'QUEUED', progress: 0, errorMsg: '' }
|
||||
}
|
||||
ElMessage.success(t('episodeTranscode.triggerSuccess'))
|
||||
await loadDetail(true)
|
||||
schedulePolling()
|
||||
} catch (error) {
|
||||
errorMessage.value = errorText(error, t('episodeTranscode.triggerFailed'))
|
||||
} finally {
|
||||
retriggering.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function changePage(value: number) {
|
||||
pageIndex.value = value
|
||||
void loadThumbnailPage()
|
||||
}
|
||||
|
||||
function changePageSize(value: number) {
|
||||
pageSize.value = value
|
||||
pageIndex.value = 1
|
||||
void loadThumbnailPage()
|
||||
}
|
||||
|
||||
function errorText(error: unknown, fallback: string) {
|
||||
return error instanceof Error && error.message ? error.message : fallback
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="episode-editor-section episode-transcode-panel">
|
||||
<el-collapse v-model="expanded">
|
||||
<el-collapse-item name="transcode">
|
||||
<template #title>
|
||||
<div class="episode-transcode-panel__heading">
|
||||
<span>{{ t('episodeTranscode.title') }}</span>
|
||||
<EpisodeTranscodeStatusBadge
|
||||
:visible="!!detail"
|
||||
:status-label="statusLabel"
|
||||
:status-type="statusType"
|
||||
:progress="progress"
|
||||
:progress-status="progressStatus"
|
||||
:show-progress="!!detail && hasMedia"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<EpisodeTranscodeStatusPanel
|
||||
:detail="detail"
|
||||
:view="statusView"
|
||||
@retry="loadDetail()"
|
||||
@retrigger="retrigger"
|
||||
/>
|
||||
<template v-if="showOutputs">
|
||||
<EpisodeTranscodeRenditions :renditions="renditions" />
|
||||
<EpisodeTranscodeFrames
|
||||
:view="framesView"
|
||||
@page-change="changePage"
|
||||
@page-size-change="changePageSize"
|
||||
@retry="loadThumbnailPage"
|
||||
/>
|
||||
</template>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.episode-transcode-panel :deep(.el-collapse) {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.episode-transcode-panel :deep(.el-collapse-item__header),
|
||||
.episode-transcode-panel :deep(.el-collapse-item__wrap) {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.episode-transcode-panel__heading {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding-right: 12px;
|
||||
font-size: 15px;
|
||||
font-weight: 650;
|
||||
color: var(--el-text-color-primary);
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,106 @@
|
||||
<!-- Author: fruit.com.cn -->
|
||||
<!-- 剧集转码清晰度表格与播放地址操作 -->
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import type { MediaRenditionItem } from '@/api/admin/types'
|
||||
import { AppIcon } from '@/components/AppIcon'
|
||||
import { AppIcons } from '@/constants/icons'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import RenditionPlayerDialog from './RenditionPlayerDialog.vue'
|
||||
import {
|
||||
formatBytes,
|
||||
formatDuration,
|
||||
renditionStatusLabelKey,
|
||||
renditionStatusType
|
||||
} from './episodeTranscodeUi'
|
||||
|
||||
defineProps<{
|
||||
renditions: MediaRenditionItem[]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const playerVisible = ref(false)
|
||||
const playerUrl = ref('')
|
||||
const playerTitle = ref('')
|
||||
|
||||
function statusLabel(rendition: MediaRenditionItem) {
|
||||
return t(`episodeTranscode.status.${renditionStatusLabelKey(rendition.status)}`)
|
||||
}
|
||||
|
||||
function playRendition(rendition: MediaRenditionItem) {
|
||||
if (!rendition.hlsUrl) return
|
||||
playerUrl.value = rendition.hlsUrl
|
||||
playerTitle.value = `${rendition.qualityName} · ${rendition.resolution}`
|
||||
playerVisible.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="episode-transcode-renditions__heading">
|
||||
<h4>{{ t('episodeTranscode.renditionTitle') }}</h4>
|
||||
</div>
|
||||
<el-table
|
||||
:data="renditions"
|
||||
size="small"
|
||||
border
|
||||
class="episode-transcode-renditions__table"
|
||||
:empty-text="t('episodeTranscode.noRendition')"
|
||||
>
|
||||
<el-table-column prop="qualityName" :label="t('episodeTranscode.quality')" min-width="88" />
|
||||
<el-table-column prop="resolution" :label="t('episodeTranscode.resolution')" min-width="105" />
|
||||
<el-table-column :label="t('episodeTranscode.videoBitrate')" min-width="105">
|
||||
<template #default="{ row }">{{ row.videoBitrateKbps }} kbps</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('episodeTranscode.audioBitrate')" min-width="105">
|
||||
<template #default="{ row }">{{ row.audioBitrateKbps }} kbps</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="videoCodec" :label="t('episodeTranscode.codec')" min-width="82" />
|
||||
<el-table-column prop="container" :label="t('episodeTranscode.container')" min-width="82" />
|
||||
<el-table-column :label="t('episodeTranscode.fileSize')" min-width="92">
|
||||
<template #default="{ row }">{{ formatBytes(row.sizeBytes) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('episodeTranscode.duration')" min-width="76">
|
||||
<template #default="{ row }">{{ formatDuration(row.durationSec) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="segmentCount" :label="t('episodeTranscode.segments')" min-width="76" />
|
||||
<el-table-column :label="t('episodeTranscode.statusColumn')" min-width="82">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="renditionStatusType(row.status)" effect="light" size="small">
|
||||
{{ statusLabel(row) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('episodeTranscode.actions')" width="76" fixed="right" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tooltip :content="t('episodeTranscode.play')" placement="top">
|
||||
<el-button text circle @click="playRendition(row)">
|
||||
<AppIcon :icon="AppIcons.videoPlay" :size="17" />
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<RenditionPlayerDialog v-model="playerVisible" :url="playerUrl" :title="playerTitle" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.episode-transcode-renditions__heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin: 18px 0 10px;
|
||||
}
|
||||
|
||||
.episode-transcode-renditions__heading h4 {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.episode-transcode-renditions__table {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!-- Author: fruit.com.cn -->
|
||||
<!-- 剧集转码折叠标题状态徽标 -->
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { TranscodeProgressStatus, TranscodeTagType } from './episodeTranscodeUi'
|
||||
|
||||
defineProps<{
|
||||
visible: boolean
|
||||
statusLabel: string
|
||||
statusType: TranscodeTagType
|
||||
progress: number
|
||||
progressStatus: TranscodeProgressStatus
|
||||
showProgress: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="episode-transcode-badge">
|
||||
<el-tag v-if="visible" :type="statusType" effect="light" size="small">
|
||||
{{ statusLabel }}
|
||||
</el-tag>
|
||||
<el-progress
|
||||
v-if="showProgress"
|
||||
class="episode-transcode-badge__progress"
|
||||
:percentage="progress"
|
||||
:status="progressStatus"
|
||||
:stroke-width="6"
|
||||
:show-text="false"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.episode-transcode-badge {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.episode-transcode-badge__progress {
|
||||
width: 110px;
|
||||
margin-left: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,169 @@
|
||||
<!-- Author: fruit.com.cn -->
|
||||
<!-- 剧集转码状态、进度、错误与重新转码操作 -->
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { EpisodeTranscodeItem } from '@/api/admin/types'
|
||||
import { AppIcon } from '@/components/AppIcon'
|
||||
import { AppIcons } from '@/constants/icons'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { formatDateTime } from '@/utils/format'
|
||||
import type { TranscodeProgressStatus, TranscodeTagType } from './episodeTranscodeUi'
|
||||
|
||||
interface StatusView {
|
||||
loading: boolean
|
||||
errorMessage: string
|
||||
hasMedia: boolean
|
||||
retriggering: boolean
|
||||
isProcessing: boolean
|
||||
statusLabel: string
|
||||
statusType: TranscodeTagType
|
||||
progressStatus: TranscodeProgressStatus
|
||||
progress: number
|
||||
}
|
||||
|
||||
defineProps<{
|
||||
detail: EpisodeTranscodeItem | null
|
||||
view: StatusView
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
retry: []
|
||||
retrigger: []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<p class="episode-transcode-status__description">
|
||||
{{ t('episodeTranscode.description') }}
|
||||
</p>
|
||||
<el-skeleton v-if="view.loading && !detail" :rows="4" animated />
|
||||
<div v-else-if="view.errorMessage" class="episode-transcode-status__error">
|
||||
<el-alert type="error" :title="view.errorMessage" :closable="false" show-icon />
|
||||
<el-button size="small" @click="emit('retry')">
|
||||
<AppIcon :icon="AppIcons.refresh" :size="16" />
|
||||
{{ t('episodeTranscode.retryLoad') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<el-empty
|
||||
v-else-if="detail && !view.hasMedia"
|
||||
:description="detail.errorMsg || t('episodeTranscode.noMedia')"
|
||||
:image-size="72"
|
||||
/>
|
||||
<template v-else-if="detail">
|
||||
<div class="episode-transcode-status__summary">
|
||||
<div class="episode-transcode-status__metric">
|
||||
<span>{{ t('episodeTranscode.statusLabel') }}</span>
|
||||
<el-tag :type="view.statusType" effect="light">{{ view.statusLabel }}</el-tag>
|
||||
</div>
|
||||
<div class="episode-transcode-status__metric">
|
||||
<span>{{ t('episodeTranscode.progress') }}</span>
|
||||
<b>{{ view.progress }}%</b>
|
||||
</div>
|
||||
<div class="episode-transcode-status__metric">
|
||||
<span>{{ t('episodeTranscode.retryCount') }}</span>
|
||||
<b>{{ detail.retryCount || 0 }}</b>
|
||||
</div>
|
||||
<div class="episode-transcode-status__metric">
|
||||
<span>{{ t('episodeTranscode.updatedAt') }}</span>
|
||||
<b>{{ formatDateTime(detail.updatedAt) }}</b>
|
||||
</div>
|
||||
<el-button
|
||||
class="episode-transcode-status__retry"
|
||||
type="primary"
|
||||
plain
|
||||
:loading="view.retriggering"
|
||||
:disabled="!view.hasMedia || view.isProcessing || view.retriggering"
|
||||
@click="emit('retrigger')"
|
||||
>
|
||||
<AppIcon :icon="AppIcons.restart" :size="16" />
|
||||
{{
|
||||
view.retriggering ? t('episodeTranscode.reprocessing') : t('episodeTranscode.reprocess')
|
||||
}}
|
||||
</el-button>
|
||||
</div>
|
||||
<el-progress
|
||||
class="episode-transcode-status__progress"
|
||||
:percentage="view.progress"
|
||||
:status="view.progressStatus"
|
||||
:stroke-width="8"
|
||||
/>
|
||||
<p v-if="view.isProcessing && view.progress === 0" class="episode-transcode-status__waiting">
|
||||
{{ t('episodeTranscode.waitingProgress') }}
|
||||
</p>
|
||||
<el-alert
|
||||
v-if="detail.errorMsg"
|
||||
class="episode-transcode-status__error-alert"
|
||||
type="error"
|
||||
:title="detail.errorMsg"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.episode-transcode-status__description {
|
||||
margin: 0 0 14px;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.episode-transcode-status__error {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.episode-transcode-status__summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.episode-transcode-status__metric {
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.episode-transcode-status__metric b {
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-primary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.episode-transcode-status__retry {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.episode-transcode-status__progress {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.episode-transcode-status__waiting {
|
||||
margin: 8px 0 0;
|
||||
font-size: 12px;
|
||||
color: var(--el-color-warning);
|
||||
}
|
||||
|
||||
.episode-transcode-status__error-alert {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
@media (width <= 600px) {
|
||||
.episode-transcode-status__summary {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.episode-transcode-status__retry {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,172 @@
|
||||
<!-- Author: fruit.com.cn -->
|
||||
<!-- 单集视频上传：格式/大小校验、分片上传、预览与移除 -->
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { AppIcons } from '@/constants/icons'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { probeVideoDuration, uploadFile } from '@/utils/uploader'
|
||||
import { MAX_VIDEO_SIZE, VIDEO_ACCEPT_ATTR, VIDEO_EXTENSIONS } from './videoLimit'
|
||||
|
||||
const props = defineProps({
|
||||
videoUrl: { type: String, default: '' },
|
||||
durationSec: { type: Number, default: 0 },
|
||||
fileName: { type: String, default: '' }
|
||||
})
|
||||
|
||||
const emit = defineEmits([
|
||||
'update:videoUrl',
|
||||
'update:durationSec',
|
||||
'update:fileName',
|
||||
'update:uploading',
|
||||
'change'
|
||||
])
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const uploadingVideo = ref(false)
|
||||
const videoPercent = ref(0)
|
||||
const videoError = ref('')
|
||||
|
||||
const videoDisplayName = computed(
|
||||
() => props.fileName || (props.videoUrl ? episodeBasename(props.videoUrl) : '尚未选择视频')
|
||||
)
|
||||
|
||||
watch(uploadingVideo, (value) => emit('update:uploading', value))
|
||||
|
||||
function episodeBasename(path) {
|
||||
if (!path) return ''
|
||||
const clean = path.split('?')[0].split('#')[0]
|
||||
return decodeURIComponent(clean.split('/').pop() || clean)
|
||||
}
|
||||
|
||||
function clearError() {
|
||||
videoError.value = ''
|
||||
}
|
||||
|
||||
function beforeVideoUpload(file) {
|
||||
videoError.value = ''
|
||||
const extension = String(file.name || '')
|
||||
.split('.')
|
||||
.pop()
|
||||
?.toLowerCase()
|
||||
if (!VIDEO_EXTENSIONS.includes(extension)) {
|
||||
videoError.value = t('episodeBatch.invalidType')
|
||||
return false
|
||||
}
|
||||
if (file.size > MAX_VIDEO_SIZE) {
|
||||
videoError.value = '视频大小不能超过 500MB'
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
/** 视频分片上传：先探测时长，再交给上传器，完成后回填地址与时长。 */
|
||||
async function uploadVideo(options) {
|
||||
uploadingVideo.value = true
|
||||
videoPercent.value = 0
|
||||
videoError.value = ''
|
||||
try {
|
||||
const duration = await probeVideoDuration(options.file)
|
||||
const asset = await uploadFile(options.file, {
|
||||
bizType: 'EPISODE',
|
||||
durationSec: duration,
|
||||
onProgress: (percent) => (videoPercent.value = percent)
|
||||
})
|
||||
emit('update:videoUrl', asset.url)
|
||||
emit('update:fileName', options.file.name)
|
||||
if (duration > 0) emit('update:durationSec', duration)
|
||||
emit('change')
|
||||
ElMessage.success('视频已上传')
|
||||
} catch {
|
||||
videoError.value = '视频上传失败，请检查网络后重试'
|
||||
} finally {
|
||||
uploadingVideo.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function removeVideo() {
|
||||
if (uploadingVideo.value) return
|
||||
emit('update:videoUrl', '')
|
||||
emit('update:fileName', '')
|
||||
videoError.value = ''
|
||||
emit('change')
|
||||
}
|
||||
|
||||
defineExpose({ clearError, uploadingVideo })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="episode-video-editor">
|
||||
<div class="episode-video-preview-card">
|
||||
<video
|
||||
v-if="videoUrl"
|
||||
:src="videoUrl"
|
||||
controls
|
||||
preload="metadata"
|
||||
class="episode-editor-video"
|
||||
></video>
|
||||
<el-upload
|
||||
v-else
|
||||
drag
|
||||
class="episode-video-empty-upload"
|
||||
:show-file-list="false"
|
||||
:accept="VIDEO_ACCEPT_ATTR"
|
||||
:before-upload="beforeVideoUpload"
|
||||
:http-request="uploadVideo"
|
||||
:disabled="uploadingVideo"
|
||||
>
|
||||
<div class="episode-video-empty-copy">
|
||||
<AppIcon :icon="AppIcons.videoCameraFront" :size="30" />
|
||||
<b>拖放或点击上传</b>
|
||||
<span>MP4、MOV、MKV、WEBM</span>
|
||||
</div>
|
||||
</el-upload>
|
||||
<div v-if="uploadingVideo" class="episode-video-upload-mask">
|
||||
<span>上传中</span>
|
||||
<b>{{ videoPercent }}%</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="episode-video-meta">
|
||||
<div class="episode-video-status">
|
||||
<el-tag :type="videoUrl ? 'success' : 'info'" effect="light">
|
||||
{{ videoUrl ? '已上传' : '未上传' }}
|
||||
</el-tag>
|
||||
<span class="episode-video-filename" :title="videoDisplayName">
|
||||
{{ videoDisplayName }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="episode-video-hint">{{ t('episodeBatch.hint') }}</p>
|
||||
<el-alert v-if="videoError" :title="videoError" type="error" :closable="false" show-icon />
|
||||
<div class="episode-video-actions">
|
||||
<el-upload
|
||||
v-if="videoUrl"
|
||||
:show-file-list="false"
|
||||
:accept="VIDEO_ACCEPT_ATTR"
|
||||
:before-upload="beforeVideoUpload"
|
||||
:http-request="uploadVideo"
|
||||
:disabled="uploadingVideo"
|
||||
>
|
||||
<el-button :loading="uploadingVideo" :disabled="uploadingVideo">
|
||||
<AppIcon :icon="AppIcons.upload" />
|
||||
更换视频
|
||||
</el-button>
|
||||
</el-upload>
|
||||
<el-button v-if="videoUrl" type="danger" :disabled="uploadingVideo" @click="removeVideo">
|
||||
移除
|
||||
</el-button>
|
||||
<a
|
||||
v-if="videoUrl"
|
||||
class="episode-video-link"
|
||||
:href="videoUrl"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
查看视频
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,126 @@
|
||||
<!-- Author: fruit.com.cn -->
|
||||
<!-- 清晰度产物 HLS 预览播放器：Chrome/Edge 用 hls.js，Safari 走原生 -->
|
||||
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onBeforeUnmount, ref, watch } from 'vue'
|
||||
import type Hls from 'hls.js'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
url: string
|
||||
title: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', value: boolean): void
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const videoRef = ref<HTMLVideoElement>()
|
||||
const errorMsg = ref('')
|
||||
let hls: Hls | null = null
|
||||
|
||||
function destroy() {
|
||||
hls?.destroy()
|
||||
hls = null
|
||||
const video = videoRef.value
|
||||
if (video) {
|
||||
video.pause()
|
||||
video.removeAttribute('src')
|
||||
video.load()
|
||||
}
|
||||
}
|
||||
|
||||
async function start(url: string) {
|
||||
await nextTick()
|
||||
const video = videoRef.value
|
||||
if (!video || !url) return
|
||||
errorMsg.value = ''
|
||||
destroy()
|
||||
|
||||
if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
video.src = url
|
||||
video.play().catch(() => {})
|
||||
return
|
||||
}
|
||||
|
||||
const { default: HlsPlayer } = await import('hls.js')
|
||||
if (!HlsPlayer.isSupported()) {
|
||||
errorMsg.value = t('episodeTranscode.playerUnsupported')
|
||||
return
|
||||
}
|
||||
const instance = new HlsPlayer()
|
||||
hls = instance
|
||||
instance.on(HlsPlayer.Events.MANIFEST_PARSED, () => {
|
||||
video.play().catch(() => {})
|
||||
})
|
||||
instance.on(HlsPlayer.Events.ERROR, (_event, data) => {
|
||||
if (data?.fatal) {
|
||||
errorMsg.value = t('episodeTranscode.playerFailed')
|
||||
}
|
||||
})
|
||||
instance.loadSource(url)
|
||||
instance.attachMedia(video)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
start(props.url)
|
||||
} else {
|
||||
destroy()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
onBeforeUnmount(destroy)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog
|
||||
:model-value="modelValue"
|
||||
:title="title"
|
||||
width="720px"
|
||||
destroy-on-close
|
||||
class="rendition-player-dialog"
|
||||
@update:model-value="emit('update:modelValue', $event)"
|
||||
@closed="destroy"
|
||||
>
|
||||
<div class="rendition-player">
|
||||
<video ref="videoRef" class="rendition-player__video" controls playsinline></video>
|
||||
<p v-if="errorMsg" class="rendition-player__error">{{ errorMsg }}</p>
|
||||
<p class="rendition-player__url" :title="url">{{ url }}</p>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.rendition-player {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.rendition-player__video {
|
||||
width: 100%;
|
||||
max-height: 62vh;
|
||||
background: #000;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.rendition-player__error {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
|
||||
.rendition-player__url {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!-- Author: fruit.com.cn -->
|
||||
<!-- 批量上传队列单行：序号、文件名、大小、进度、状态与操作 -->
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import type { UploadQueueItem } from './useUploadQueue'
|
||||
|
||||
const props = defineProps<{
|
||||
item: UploadQueueItem
|
||||
/** 自然排序后的展示序号（从 1 起） */
|
||||
index: number
|
||||
/** 选择阶段才允许移除 */
|
||||
allowRemove: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
retry: [id: string]
|
||||
remove: [id: string]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const BYTES_PER_KB = 1024
|
||||
const BYTES_PER_MB = 1024 * 1024
|
||||
|
||||
const sizeLabel = computed(() => {
|
||||
const size = props.item.fileSize
|
||||
if (size >= BYTES_PER_MB) {
|
||||
return `${(size / BYTES_PER_MB).toFixed(1)} MB`
|
||||
}
|
||||
return `${Math.max(1, Math.round(size / BYTES_PER_KB))} KB`
|
||||
})
|
||||
|
||||
const statusLabel = computed(() => t(`episodeBatch.status.${props.item.status}`))
|
||||
|
||||
const statusType = computed(() => {
|
||||
switch (props.item.status) {
|
||||
case 'done':
|
||||
return 'success'
|
||||
case 'failed':
|
||||
return 'danger'
|
||||
case 'paused':
|
||||
return 'warning'
|
||||
case 'merging':
|
||||
case 'uploading':
|
||||
return ''
|
||||
default:
|
||||
return 'info'
|
||||
}
|
||||
})
|
||||
|
||||
const canRetry = computed(() => props.item.status === 'failed')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="upload-task-row" :class="{ 'is-failed': item.status === 'failed' }">
|
||||
<div class="upload-task-row__meta">
|
||||
<span class="upload-task-row__index">{{ index }}</span>
|
||||
<b class="upload-task-row__name" :title="item.fileName">{{ item.fileName }}</b>
|
||||
<small>{{ sizeLabel }}</small>
|
||||
<el-tag :type="statusType" effect="light" size="small">{{ statusLabel }}</el-tag>
|
||||
</div>
|
||||
<el-progress
|
||||
:percentage="item.percent"
|
||||
:status="
|
||||
item.status === 'failed' ? 'exception' : item.status === 'done' ? 'success' : undefined
|
||||
"
|
||||
:stroke-width="10"
|
||||
/>
|
||||
<p v-if="item.error" class="upload-task-row__error">{{ item.error }}</p>
|
||||
<div class="upload-task-row__actions">
|
||||
<el-button v-if="canRetry" size="small" type="primary" @click="emit('retry', item.id)">
|
||||
{{ t('episodeBatch.retry') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="allowRemove"
|
||||
size="small"
|
||||
type="danger"
|
||||
text
|
||||
@click="emit('remove', item.id)"
|
||||
>
|
||||
{{ t('episodeBatch.remove') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.upload-task-row {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.upload-task-row__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.upload-task-row__index {
|
||||
min-width: 1.5em;
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-secondary);
|
||||
flex: 0 0 auto;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.upload-task-row__name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.upload-task-row__error {
|
||||
margin: 6px 0 0;
|
||||
font-size: 12px;
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
|
||||
.upload-task-row__actions {
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
margin-left: auto;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.upload-task-row.is-failed {
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
background: color-mix(in srgb, var(--el-color-danger) 6%, transparent);
|
||||
border-radius: 6px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
// Author: fruit.com.cn
|
||||
// 剧集转码面板的状态映射与展示格式化
|
||||
|
||||
export type TranscodeTagType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
|
||||
export type TranscodeProgressStatus = 'success' | 'exception' | undefined
|
||||
|
||||
export const THUMBNAIL_PAGE_SIZE = 100
|
||||
export const THUMBNAIL_PAGE_SIZES = [100, 200, 500]
|
||||
|
||||
const STATUS_KEYS: Record<string, string> = {
|
||||
QUEUED: 'queued',
|
||||
RUNNING: 'running',
|
||||
SUCCESS: 'success',
|
||||
FAILED: 'failed',
|
||||
EMPTY: 'empty',
|
||||
NO_VIDEO: 'noVideo',
|
||||
NO_MEDIA_ASSET: 'noMediaAsset',
|
||||
NO_TASK: 'noTask',
|
||||
NO_EPISODE: 'noEpisode',
|
||||
EPISODE_NOT_FOUND: 'episodeNotFound',
|
||||
INVALID: 'invalid',
|
||||
READY: 'ready'
|
||||
}
|
||||
const BYTES_PER_KB = 1024
|
||||
const BYTES_PER_MB = BYTES_PER_KB * 1024
|
||||
const BYTES_PER_GB = BYTES_PER_MB * 1024
|
||||
const SECONDS_PER_MINUTE = 60
|
||||
const MILLIS_PER_SECOND = 1000
|
||||
|
||||
export function transcodeStatusKey(status?: string): string {
|
||||
return STATUS_KEYS[String(status || '').toUpperCase()] || 'unknown'
|
||||
}
|
||||
|
||||
export function transcodeStatusType(status?: string): TranscodeTagType {
|
||||
switch (String(status || '').toUpperCase()) {
|
||||
case 'SUCCESS':
|
||||
return 'success'
|
||||
case 'RUNNING':
|
||||
return 'warning'
|
||||
case 'FAILED':
|
||||
return 'danger'
|
||||
case 'QUEUED':
|
||||
return 'primary'
|
||||
default:
|
||||
return 'info'
|
||||
}
|
||||
}
|
||||
|
||||
export function transcodeProgressStatus(status?: string): TranscodeProgressStatus {
|
||||
const normalized = String(status || '').toUpperCase()
|
||||
if (normalized === 'SUCCESS') return 'success'
|
||||
if (normalized === 'FAILED') return 'exception'
|
||||
return undefined
|
||||
}
|
||||
|
||||
export function safeTranscodeProgress(value?: number): number {
|
||||
return Math.min(100, Math.max(0, Number(value || 0)))
|
||||
}
|
||||
|
||||
export function renditionStatusLabelKey(status?: string): string {
|
||||
return transcodeStatusKey(status)
|
||||
}
|
||||
|
||||
export function renditionStatusType(status?: string): TranscodeTagType {
|
||||
const normalized = String(status || '').toUpperCase()
|
||||
if (normalized === 'READY') return 'success'
|
||||
if (normalized === 'FAILED') return 'danger'
|
||||
return 'info'
|
||||
}
|
||||
|
||||
export function formatBytes(value?: number): string {
|
||||
const size = Number(value || 0)
|
||||
if (size >= BYTES_PER_GB) return `${(size / BYTES_PER_GB).toFixed(2)} GB`
|
||||
if (size >= BYTES_PER_MB) return `${(size / BYTES_PER_MB).toFixed(1)} MB`
|
||||
if (size >= BYTES_PER_KB) return `${Math.round(size / BYTES_PER_KB)} KB`
|
||||
return `${size} B`
|
||||
}
|
||||
|
||||
export function formatDuration(seconds?: number): string {
|
||||
const total = Math.max(0, Number(seconds || 0))
|
||||
const minutes = Math.floor(total / SECONDS_PER_MINUTE)
|
||||
const remainder = total % SECONDS_PER_MINUTE
|
||||
return `${String(minutes).padStart(2, '0')}:${String(remainder).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
export function formatTimeMs(milliseconds?: number): string {
|
||||
const totalMs = Math.max(0, Number(milliseconds || 0))
|
||||
const totalSeconds = Math.floor(totalMs / MILLIS_PER_SECOND)
|
||||
const minutes = Math.floor(totalSeconds / SECONDS_PER_MINUTE)
|
||||
const seconds = totalSeconds % SECONDS_PER_MINUTE
|
||||
const tenths = Math.floor((totalMs % MILLIS_PER_SECOND) / 100)
|
||||
return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}.${tenths}`
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
// Author: fruit.com.cn
|
||||
/** 剧集批量上传断点会话：localStorage 读写与清理 */
|
||||
|
||||
export const UPLOAD_SESSION_KEY = 'reel_upload_sessions'
|
||||
export const UPLOAD_SESSION_TTL_MS = 24 * 60 * 60 * 1000
|
||||
|
||||
export interface UploadSessionRecord {
|
||||
uploadId: string
|
||||
fileName: string
|
||||
fileSize: number
|
||||
lastModified: number
|
||||
dramaId: string
|
||||
bizType: string
|
||||
createdAt: number
|
||||
}
|
||||
|
||||
/** 读取全部会话，解析失败时返回空数组。 */
|
||||
export function loadUploadSessions(): UploadSessionRecord[] {
|
||||
try {
|
||||
const raw = localStorage.getItem(UPLOAD_SESSION_KEY)
|
||||
if (!raw) return []
|
||||
const parsed = JSON.parse(raw)
|
||||
return Array.isArray(parsed) ? (parsed as UploadSessionRecord[]) : []
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
/** 覆盖写入全部会话。 */
|
||||
export function saveUploadSessions(sessions: UploadSessionRecord[]): void {
|
||||
localStorage.setItem(UPLOAD_SESSION_KEY, JSON.stringify(sessions))
|
||||
}
|
||||
|
||||
/** 按 dramaId 过滤且未超过 TTL 的未完成会话。 */
|
||||
export function listPendingSessions(dramaId: string, now = Date.now()): UploadSessionRecord[] {
|
||||
const dramaKey = String(dramaId)
|
||||
return loadUploadSessions().filter(
|
||||
(item) =>
|
||||
String(item.dramaId) === dramaKey &&
|
||||
now - Number(item.createdAt || 0) <= UPLOAD_SESSION_TTL_MS
|
||||
)
|
||||
}
|
||||
|
||||
/** 新增或按 uploadId 覆盖一条会话。 */
|
||||
export function upsertUploadSession(record: UploadSessionRecord): void {
|
||||
const next = loadUploadSessions().filter((item) => item.uploadId !== record.uploadId)
|
||||
next.push(record)
|
||||
saveUploadSessions(next)
|
||||
}
|
||||
|
||||
/** 按 uploadId 移除会话。 */
|
||||
export function removeUploadSession(uploadId: string): void {
|
||||
if (!uploadId) return
|
||||
saveUploadSessions(loadUploadSessions().filter((item) => item.uploadId !== uploadId))
|
||||
}
|
||||
|
||||
/** 批量移除会话。 */
|
||||
export function removeUploadSessions(uploadIds: string[]): void {
|
||||
if (!uploadIds.length) return
|
||||
const idSet = new Set(uploadIds)
|
||||
saveUploadSessions(loadUploadSessions().filter((item) => !idSet.has(item.uploadId)))
|
||||
}
|
||||
|
||||
/** 用文件名 + size + lastModified 匹配本地文件。 */
|
||||
export function matchFileForSession(session: UploadSessionRecord, files: File[]): File | undefined {
|
||||
return files.find(
|
||||
(file) =>
|
||||
file.name === session.fileName &&
|
||||
file.size === session.fileSize &&
|
||||
file.lastModified === session.lastModified
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,352 @@
|
||||
// Author: fruit.com.cn
|
||||
/** 剧集批量上传队列：手动开始、文件并发、进度加权、断点会话、失败隔离 */
|
||||
|
||||
import { computed, ref } from 'vue'
|
||||
import { getUploadProgressApi } from '@/api/admin/media'
|
||||
import { probeVideoDuration, resumeUpload, uploadFile } from '@/utils/uploader'
|
||||
import {
|
||||
listPendingSessions,
|
||||
matchFileForSession,
|
||||
removeUploadSession,
|
||||
type UploadSessionRecord,
|
||||
upsertUploadSession
|
||||
} from './uploadSessions'
|
||||
|
||||
export type UploadItemStatus = 'waiting' | 'uploading' | 'merging' | 'done' | 'failed' | 'paused'
|
||||
|
||||
export interface UploadQueueItem {
|
||||
id: string
|
||||
file: File
|
||||
fileName: string
|
||||
fileSize: number
|
||||
lastModified: number
|
||||
percent: number
|
||||
status: UploadItemStatus
|
||||
error: string
|
||||
uploadId: string
|
||||
assetId?: number
|
||||
url?: string
|
||||
durationSec?: number
|
||||
}
|
||||
|
||||
export interface UseUploadQueueOptions {
|
||||
/** 当前短剧 id（调用时读取，避免切换剧后闭包过期） */
|
||||
getDramaId: () => string
|
||||
bizType?: string
|
||||
}
|
||||
|
||||
const FILE_CONCURRENCY = 2
|
||||
const CHUNK_CONCURRENCY = 3
|
||||
const DEFAULT_BIZ_TYPE = 'EPISODE'
|
||||
const MERGING_PERCENT = 95
|
||||
const MAX_PERCENT = 100
|
||||
|
||||
let queueSeq = 0
|
||||
|
||||
function nextItemId(): string {
|
||||
queueSeq += 1
|
||||
return `uq-${Date.now()}-${queueSeq}`
|
||||
}
|
||||
|
||||
function extractErrorMessage(error: unknown): string {
|
||||
if (error instanceof Error && error.message) return error.message
|
||||
return String(error || 'upload failed')
|
||||
}
|
||||
|
||||
function isHttpNotFound(error: unknown): boolean {
|
||||
const status = (error as { response?: { status?: number } })?.response?.status
|
||||
return status === 404
|
||||
}
|
||||
|
||||
/** 文件名自然排序（数字感知），保证队列序号稳定。 */
|
||||
function compareFileName(a: string, b: string): number {
|
||||
return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建上传队列控制器。
|
||||
* @param options dramaId 与可选 bizType
|
||||
*/
|
||||
export function useUploadQueue(options: UseUploadQueueOptions) {
|
||||
const items = ref<UploadQueueItem[]>([])
|
||||
const paused = ref(false)
|
||||
/** 用户是否已点过「开始上传」；选文件阶段不派发、不占用并发。 */
|
||||
const started = ref(false)
|
||||
const bizType = options.bizType || DEFAULT_BIZ_TYPE
|
||||
let running = 0
|
||||
|
||||
const overallPercent = computed(() => {
|
||||
const list = items.value
|
||||
if (!list.length) return 0
|
||||
const totalBytes = list.reduce((sum, item) => sum + item.fileSize, 0)
|
||||
if (totalBytes <= 0) return 0
|
||||
const weighted = list.reduce((sum, item) => sum + item.fileSize * item.percent, 0)
|
||||
return Math.min(MAX_PERCENT, Math.round(weighted / totalBytes))
|
||||
})
|
||||
|
||||
const isUploading = computed(() =>
|
||||
items.value.some((item) => item.status === 'uploading' || item.status === 'merging')
|
||||
)
|
||||
|
||||
/** 关闭弹窗需二次确认：仅在已开始且仍有未完成任务时。 */
|
||||
const hasActiveUpload = computed(() => {
|
||||
if (!started.value) return false
|
||||
return items.value.some(
|
||||
(item) =>
|
||||
item.status === 'waiting' ||
|
||||
item.status === 'uploading' ||
|
||||
item.status === 'merging' ||
|
||||
item.status === 'paused'
|
||||
)
|
||||
})
|
||||
|
||||
const canStart = computed(() => {
|
||||
if (isUploading.value) return false
|
||||
return items.value.some((item) => item.status === 'waiting' || item.status === 'paused')
|
||||
})
|
||||
|
||||
const doneItems = computed(() => items.value.filter((item) => item.status === 'done'))
|
||||
|
||||
const failedCount = computed(() => items.value.filter((item) => item.status === 'failed').length)
|
||||
|
||||
/** 已开始且队列已无进行中任务时，可展示结果汇总。 */
|
||||
const showResultSummary = computed(
|
||||
() => started.value && items.value.length > 0 && !hasActiveUpload.value
|
||||
)
|
||||
|
||||
function persistSession(item: UploadQueueItem, uploadId: string): void {
|
||||
item.uploadId = uploadId
|
||||
upsertUploadSession({
|
||||
uploadId,
|
||||
fileName: item.fileName,
|
||||
fileSize: item.fileSize,
|
||||
lastModified: item.lastModified,
|
||||
dramaId: String(options.getDramaId()),
|
||||
bizType,
|
||||
createdAt: Date.now()
|
||||
})
|
||||
}
|
||||
|
||||
function clearSession(uploadId: string): void {
|
||||
if (uploadId) removeUploadSession(uploadId)
|
||||
}
|
||||
|
||||
function sortItemsByName(): void {
|
||||
items.value.sort((a, b) => compareFileName(a.fileName, b.fileName))
|
||||
}
|
||||
|
||||
async function runOne(item: UploadQueueItem, resumeId?: string): Promise<void> {
|
||||
item.status = 'uploading'
|
||||
item.error = ''
|
||||
try {
|
||||
const durationSec = await probeVideoDuration(item.file)
|
||||
item.durationSec = durationSec
|
||||
const uploadOptions = {
|
||||
bizType,
|
||||
concurrency: CHUNK_CONCURRENCY,
|
||||
durationSec,
|
||||
onSession: (uploadId: string) => persistSession(item, uploadId),
|
||||
onProgress: (percent: number) => {
|
||||
item.percent = percent
|
||||
if (percent >= MERGING_PERCENT && item.status === 'uploading') {
|
||||
item.status = 'merging'
|
||||
}
|
||||
}
|
||||
}
|
||||
const asset = resumeId
|
||||
? await resumeUpload(item.file, resumeId, uploadOptions)
|
||||
: await uploadFile(item.file, uploadOptions)
|
||||
item.percent = MAX_PERCENT
|
||||
item.status = 'done'
|
||||
item.assetId = asset.id
|
||||
item.url = asset.url
|
||||
if (asset.durationSec != null) item.durationSec = asset.durationSec
|
||||
clearSession(item.uploadId || resumeId || '')
|
||||
} catch (error) {
|
||||
item.status = 'failed'
|
||||
item.error = extractErrorMessage(error)
|
||||
}
|
||||
}
|
||||
|
||||
function pump(): void {
|
||||
if (!started.value || paused.value) return
|
||||
while (running < FILE_CONCURRENCY && !paused.value) {
|
||||
const next = items.value.find((item) => item.status === 'waiting')
|
||||
if (!next) return
|
||||
// 立刻占位，避免同步 while 循环把同一项派发两次
|
||||
next.status = 'uploading'
|
||||
running += 1
|
||||
const resumeId = next.uploadId || undefined
|
||||
void runOne(next, resumeId).finally(() => {
|
||||
running -= 1
|
||||
if (!paused.value) pump()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/** 入队本地文件（调用方已完成类型/大小校验）；只展示待上传，不发起请求。 */
|
||||
function enqueue(files: File[]): void {
|
||||
const sorted = [...files].sort((a, b) => compareFileName(a.name, b.name))
|
||||
for (const file of sorted) {
|
||||
items.value.push({
|
||||
id: nextItemId(),
|
||||
file,
|
||||
fileName: file.name,
|
||||
fileSize: file.size,
|
||||
lastModified: file.lastModified,
|
||||
percent: 0,
|
||||
status: 'waiting',
|
||||
error: '',
|
||||
uploadId: ''
|
||||
})
|
||||
}
|
||||
sortItemsByName()
|
||||
}
|
||||
|
||||
/** 开始或继续派发（含断点续传项上的 uploadId）。 */
|
||||
function start(): void {
|
||||
if (!items.value.length) return
|
||||
started.value = true
|
||||
paused.value = false
|
||||
for (const item of items.value) {
|
||||
if (item.status === 'paused') item.status = 'waiting'
|
||||
}
|
||||
void pump()
|
||||
}
|
||||
|
||||
/** 暂停：不派新任务；进行中分片跑完。 */
|
||||
function pause(): void {
|
||||
if (!started.value) return
|
||||
paused.value = true
|
||||
for (const item of items.value) {
|
||||
if (item.status === 'waiting') item.status = 'paused'
|
||||
}
|
||||
}
|
||||
|
||||
/** 重试单个失败项。 */
|
||||
function retry(id: string): void {
|
||||
const item = items.value.find((row) => row.id === id)
|
||||
if (!item || item.status !== 'failed') return
|
||||
item.error = ''
|
||||
item.percent = item.uploadId ? item.percent : 0
|
||||
item.status = paused.value ? 'paused' : 'waiting'
|
||||
if (started.value && !paused.value) void pump()
|
||||
}
|
||||
|
||||
/** 重试全部失败项。 */
|
||||
function retryAll(): void {
|
||||
for (const item of items.value) {
|
||||
if (item.status === 'failed') {
|
||||
item.error = ''
|
||||
item.status = paused.value ? 'paused' : 'waiting'
|
||||
}
|
||||
}
|
||||
if (started.value && !paused.value) void pump()
|
||||
}
|
||||
|
||||
/** 仅选择阶段可移除；已开始上传后禁止直接移除，避免脏会话。 */
|
||||
function remove(id: string): void {
|
||||
if (started.value) return
|
||||
const index = items.value.findIndex((row) => row.id === id)
|
||||
if (index < 0) return
|
||||
const [removed] = items.value.splice(index, 1)
|
||||
clearSession(removed.uploadId)
|
||||
}
|
||||
|
||||
/** 清空队列并清理本队列会话。 */
|
||||
function clear(): void {
|
||||
for (const item of items.value) {
|
||||
clearSession(item.uploadId)
|
||||
}
|
||||
items.value = []
|
||||
paused.value = false
|
||||
started.value = false
|
||||
running = 0
|
||||
}
|
||||
|
||||
/** 读取当前剧未完成会话（24h 内）。 */
|
||||
function getPendingSessions(): UploadSessionRecord[] {
|
||||
return listPendingSessions(String(options.getDramaId()))
|
||||
}
|
||||
|
||||
/**
|
||||
* 用本地重选文件匹配会话并入队（待上传）；不自动开始，由用户点「开始上传」续传。
|
||||
* @returns matched / unmatched 会话列表
|
||||
*/
|
||||
async function resumeFromSessions(
|
||||
sessions: UploadSessionRecord[],
|
||||
files: File[]
|
||||
): Promise<{ matched: UploadSessionRecord[]; unmatched: UploadSessionRecord[] }> {
|
||||
const matched: UploadSessionRecord[] = []
|
||||
const unmatched: UploadSessionRecord[] = []
|
||||
for (const session of sessions) {
|
||||
const file = matchFileForSession(session, files)
|
||||
if (!file) {
|
||||
unmatched.push(session)
|
||||
continue
|
||||
}
|
||||
try {
|
||||
const progressRes = await getUploadProgressApi(session.uploadId)
|
||||
const progress = progressRes?.data
|
||||
if (!progress) {
|
||||
unmatched.push(session)
|
||||
continue
|
||||
}
|
||||
if (String(progress.status || '').toLowerCase() === 'completed') {
|
||||
clearSession(session.uploadId)
|
||||
continue
|
||||
}
|
||||
items.value.push({
|
||||
id: nextItemId(),
|
||||
file,
|
||||
fileName: file.name,
|
||||
fileSize: file.size,
|
||||
lastModified: file.lastModified,
|
||||
percent: Math.min(MERGING_PERCENT, Number(progress.percent) || 0),
|
||||
status: 'waiting',
|
||||
error: '',
|
||||
uploadId: session.uploadId
|
||||
})
|
||||
matched.push(session)
|
||||
} catch (error) {
|
||||
if (isHttpNotFound(error)) {
|
||||
clearSession(session.uploadId)
|
||||
} else {
|
||||
unmatched.push(session)
|
||||
}
|
||||
}
|
||||
}
|
||||
sortItemsByName()
|
||||
return { matched, unmatched }
|
||||
}
|
||||
|
||||
/** 放弃续传：清理给定会话。 */
|
||||
function abandonSessions(sessions: UploadSessionRecord[]): void {
|
||||
for (const session of sessions) {
|
||||
clearSession(session.uploadId)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
items,
|
||||
overallPercent,
|
||||
hasActiveUpload,
|
||||
isUploading,
|
||||
canStart,
|
||||
doneItems,
|
||||
failedCount,
|
||||
showResultSummary,
|
||||
started,
|
||||
paused,
|
||||
enqueue,
|
||||
start,
|
||||
pause,
|
||||
retry,
|
||||
retryAll,
|
||||
remove,
|
||||
clear,
|
||||
getPendingSessions,
|
||||
resumeFromSessions,
|
||||
abandonSessions
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
// Author: fruit.com.cn
|
||||
/** 剧集视频大小上限，单文件上传与批量上传共用。 */
|
||||
export const MAX_VIDEO_SIZE = 500 * 1024 * 1024
|
||||
|
||||
/** 允许的视频扩展名（小写，不含点），单文件与批量上传同源。 */
|
||||
export const VIDEO_EXTENSIONS: string[] = ['mp4', 'mov', 'mkv', 'webm']
|
||||
|
||||
/** el-upload / input[type=file] 的 accept 属性，与 VIDEO_EXTENSIONS 保持一致。 */
|
||||
export const VIDEO_ACCEPT_ATTR = '.mp4,.mov,.mkv,.webm,video/*'
|
||||
Reference in new issue
Block a user