Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
f174ba46ae | ||
|
|
2e89f8460c | ||
|
|
632bf13990 | ||
|
|
becbe18d76 | ||
|
|
6bcabea261 | ||
|
|
99bb666e47 | ||
|
|
092fe18ae7 | ||
|
|
c2a76a593a | ||
|
|
a28eaa4514 | ||
|
|
189a7f689a |
No files matched your search
@@ -1,10 +1,35 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import request from '@/axios'
|
||||
import type { EpisodeItem, EpisodeSaveData } from './types'
|
||||
import type { EpisodeItem, EpisodeSaveData, PageResult } from './types'
|
||||
|
||||
export const listEpisodesApi = (dramaId: number, status?: string) => {
|
||||
return request.get<EpisodeItem[]>({ url: '/admin/episodes', params: { dramaId, status } })
|
||||
export interface EpisodePageParams {
|
||||
dramaId: number | string
|
||||
status?: string
|
||||
pageIndex?: number
|
||||
pageSize?: number
|
||||
}
|
||||
|
||||
/**
|
||||
* 解包剧集列表分页。
|
||||
* 契约(OpenAPI PageResultEpisodeRespVO):data = { total, list }。
|
||||
* 兼容误把 data 当数组的旧调用,避免列表空白。
|
||||
*/
|
||||
export function parseEpisodePage(payload: unknown): PageResult<EpisodeItem> {
|
||||
if (Array.isArray(payload)) {
|
||||
return { total: payload.length, list: payload as EpisodeItem[] }
|
||||
}
|
||||
if (payload && typeof payload === 'object') {
|
||||
const page = payload as { total?: unknown; list?: unknown }
|
||||
const list = Array.isArray(page.list) ? (page.list as EpisodeItem[]) : []
|
||||
const total = Number(page.total)
|
||||
return { total: Number.isFinite(total) ? total : list.length, list }
|
||||
}
|
||||
return { total: 0, list: [] }
|
||||
}
|
||||
|
||||
export const listEpisodesApi = (params: EpisodePageParams) => {
|
||||
return request.get<PageResult<EpisodeItem>>({ url: '/admin/episodes', params })
|
||||
}
|
||||
|
||||
export const createEpisodeApi = (data: EpisodeSaveData) => {
|
||||
|
||||
+6
-3
@@ -532,16 +532,19 @@ export default {
|
||||
title: 'Batch upload episodes',
|
||||
entry: 'Batch upload',
|
||||
selectFiles: 'Select videos',
|
||||
startUpload: 'Start upload',
|
||||
uploadingAction: 'Uploading',
|
||||
pause: 'Pause',
|
||||
resume: 'Resume',
|
||||
retry: 'Retry',
|
||||
retryAll: 'Retry all',
|
||||
remove: 'Remove',
|
||||
hint: 'Supports MP4 / MOV / MKV / WEBM, max 500MB each',
|
||||
hint: 'Supports MP4 / MOV / MKV / WEBM, max 500MB each. Files stay queued until you click Start upload.',
|
||||
invalidType: 'Only MP4, MOV, MKV, WEBM are allowed',
|
||||
oversize: 'File exceeds 500MB and was not queued',
|
||||
overallProgress: 'Overall progress',
|
||||
empty: 'No videos selected',
|
||||
resultSummary: 'Upload finished: {done} succeeded, {failed} failed',
|
||||
createEpisodes: 'Create episodes',
|
||||
closeWhileUploading:
|
||||
'Uploads are still in progress. Closing will stop dispatching new tasks. Continue?',
|
||||
@@ -551,7 +554,7 @@ export default {
|
||||
resumeYes: 'Pick files to resume',
|
||||
resumeNo: 'Discard',
|
||||
resumeAbandoned: 'Unfinished uploads discarded',
|
||||
resumeMatched: 'Matched {count} file(s) and resumed',
|
||||
resumeMatched: 'Matched {count} file(s). Click Start upload to continue.',
|
||||
resumeUnmatched: '{count} session(s) could not match local files; pick again manually',
|
||||
createTitle: 'Create episodes in batch',
|
||||
createHint:
|
||||
@@ -571,7 +574,7 @@ export default {
|
||||
submitCreate: 'Create',
|
||||
retryFailed: 'Retry failed',
|
||||
status: {
|
||||
waiting: 'Waiting',
|
||||
waiting: 'Pending',
|
||||
uploading: 'Uploading',
|
||||
merging: 'Merging',
|
||||
done: 'Done',
|
||||
|
||||
@@ -526,16 +526,19 @@ export default {
|
||||
title: '批量上传剧集',
|
||||
entry: '批量上传',
|
||||
selectFiles: '选择视频',
|
||||
startUpload: '开始上传',
|
||||
uploadingAction: '上传中',
|
||||
pause: '暂停',
|
||||
resume: '继续',
|
||||
retry: '重试',
|
||||
retryAll: '全部重试',
|
||||
remove: '移除',
|
||||
hint: '支持 MP4 / MOV / MKV / WEBM,单文件不超过 500MB',
|
||||
hint: '支持 MP4 / MOV / MKV / WEBM,单文件不超过 500MB;选完文件后点击「开始上传」才会真正上传',
|
||||
invalidType: '仅支持 MP4、MOV、MKV、WEBM',
|
||||
oversize: '文件超过 500MB,未入队',
|
||||
overallProgress: '总进度',
|
||||
empty: '尚未选择视频',
|
||||
resultSummary: '上传结束:成功 {done} 个,失败 {failed} 个',
|
||||
createEpisodes: '批量创建分集',
|
||||
closeWhileUploading: '仍有未完成上传,关闭后将暂停派发新任务,确定关闭吗?',
|
||||
resumeTitle: '发现未完成上传',
|
||||
@@ -543,7 +546,7 @@ export default {
|
||||
resumeYes: '选择文件续传',
|
||||
resumeNo: '放弃',
|
||||
resumeAbandoned: '已放弃未完成上传',
|
||||
resumeMatched: '已匹配 {count} 个文件并开始续传',
|
||||
resumeMatched: '已匹配 {count} 个文件,请点击「开始上传」继续',
|
||||
resumeUnmatched: '有 {count} 个会话无法匹配本地文件,请手动重选',
|
||||
createTitle: '批量创建分集',
|
||||
createHint:
|
||||
@@ -563,7 +566,7 @@ export default {
|
||||
submitCreate: '创建',
|
||||
retryFailed: '重试失败项',
|
||||
status: {
|
||||
waiting: '等待中',
|
||||
waiting: '待上传',
|
||||
uploading: '上传中',
|
||||
merging: '合并中',
|
||||
done: '已完成',
|
||||
|
||||
@@ -560,13 +560,16 @@ body {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.drama-select {
|
||||
.drama-select,
|
||||
.status-select {
|
||||
width: 100%;
|
||||
}
|
||||
.drama-select .el-input__wrapper {
|
||||
.drama-select .el-input__wrapper,
|
||||
.status-select .el-input__wrapper {
|
||||
box-shadow: 0 0 0 1px #efedf3 inset !important;
|
||||
}
|
||||
.drama-select .el-input__inner {
|
||||
.drama-select .el-input__inner,
|
||||
.status-select .el-input__inner {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
@@ -6,7 +6,12 @@ import { useRoute } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { AppIcons } from '@/constants/icons'
|
||||
import { pageDramasApi } from '@/api/admin/drama'
|
||||
import { deleteEpisodeApi, listEpisodesApi, sortEpisodesApi } from '@/api/admin/episode'
|
||||
import {
|
||||
deleteEpisodeApi,
|
||||
listEpisodesApi,
|
||||
parseEpisodePage,
|
||||
sortEpisodesApi
|
||||
} from '@/api/admin/episode'
|
||||
import { useRbac } from '@/stores/rbac'
|
||||
import { formatCount } from '@/utils/format'
|
||||
import { statusClass } from '@/utils/status'
|
||||
@@ -15,6 +20,11 @@ import BatchUploadDialog from './upload/BatchUploadDialog.vue'
|
||||
import EpisodeFormDialog from './upload/EpisodeFormDialog.vue'
|
||||
import { listPendingSessions } from './upload/uploadSessions'
|
||||
|
||||
/** 排序/批量建集需要全集快照,单次请求不超过接口 pageSize 上限。 */
|
||||
const SNAPSHOT_PAGE_SIZE = 200
|
||||
const DEFAULT_PAGE_SIZE = 100
|
||||
const PAGE_SIZE_OPTIONS = [50, 100, 200]
|
||||
|
||||
const route = useRoute()
|
||||
const { can } = useRbac()
|
||||
const { t } = useI18n()
|
||||
@@ -22,18 +32,26 @@ const { t } = useI18n()
|
||||
const loading = ref(false)
|
||||
const dramas = ref([])
|
||||
const episodes = ref([])
|
||||
const total = ref(0)
|
||||
const selectedDramaId = ref(undefined)
|
||||
const statusFilter = ref(undefined)
|
||||
const pageIndex = ref(1)
|
||||
const pageSize = ref(DEFAULT_PAGE_SIZE)
|
||||
const batchUploadVisible = ref(false)
|
||||
const previewVisible = ref(false)
|
||||
const previewEpisode = ref(null)
|
||||
const formDialogRef = ref()
|
||||
/** 上移/下移与批量建集用的全集快照。 */
|
||||
const snapshotEpisodes = ref([])
|
||||
|
||||
const batchNextNumber = computed(() => nextNumber())
|
||||
const selectedDrama = computed(() => dramas.value.find((item) => item.id === selectedDramaId.value))
|
||||
const existingEpisodeNumbers = computed(() =>
|
||||
episodes.value.map((item) => Number(item.number)).filter((n) => Number.isFinite(n))
|
||||
snapshotEpisodes.value.map((item) => Number(item.number)).filter((n) => Number.isFinite(n))
|
||||
)
|
||||
|
||||
const showEmpty = computed(() => !loading.value && episodes.value.length === 0)
|
||||
|
||||
async function loadDramas() {
|
||||
const res = await pageDramasApi({ pageIndex: 1, pageSize: 200 })
|
||||
dramas.value = res.data?.list || []
|
||||
@@ -49,23 +67,75 @@ async function loadDramas() {
|
||||
async function loadEpisodes() {
|
||||
if (!selectedDramaId.value) {
|
||||
episodes.value = []
|
||||
total.value = 0
|
||||
snapshotEpisodes.value = []
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await listEpisodesApi(selectedDramaId.value)
|
||||
episodes.value = res.data || []
|
||||
const res = await listEpisodesApi({
|
||||
dramaId: selectedDramaId.value,
|
||||
status: statusFilter.value || undefined,
|
||||
pageIndex: pageIndex.value,
|
||||
pageSize: pageSize.value
|
||||
})
|
||||
// 按 OpenAPI PageResult{total,list} 解包,禁止再把 data 当数组切片
|
||||
const page = parseEpisodePage(res.data)
|
||||
episodes.value = page.list
|
||||
total.value = page.total
|
||||
await clampOrRetreatPage()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function nextNumber() {
|
||||
return episodes.value.reduce((max, item) => Math.max(max, item.number || 0), 0) + 1
|
||||
/** 拉当前剧全集快照,供排序与批量建集集号计算。不过滤 status,按页取完。 */
|
||||
async function refreshSnapshot() {
|
||||
if (!selectedDramaId.value) {
|
||||
snapshotEpisodes.value = []
|
||||
return
|
||||
}
|
||||
const collected = []
|
||||
let page = 1
|
||||
let totalCount = 0
|
||||
do {
|
||||
const res = await listEpisodesApi({
|
||||
dramaId: selectedDramaId.value,
|
||||
pageIndex: page,
|
||||
pageSize: SNAPSHOT_PAGE_SIZE
|
||||
})
|
||||
const parsed = parseEpisodePage(res.data)
|
||||
totalCount = parsed.total
|
||||
collected.push(...parsed.list)
|
||||
if (!parsed.list.length) break
|
||||
page += 1
|
||||
} while (collected.length < totalCount)
|
||||
snapshotEpisodes.value = collected
|
||||
}
|
||||
|
||||
function openBatchUpload() {
|
||||
/**
|
||||
* 删除后若当前页空且仍有数据,回退上一页再拉;否则夹页。
|
||||
*/
|
||||
async function clampOrRetreatPage() {
|
||||
const maxPage = Math.max(1, Math.ceil(total.value / pageSize.value) || 1)
|
||||
if (episodes.value.length === 0 && total.value > 0 && pageIndex.value > 1) {
|
||||
pageIndex.value = Math.min(pageIndex.value - 1, maxPage)
|
||||
await loadEpisodes()
|
||||
return
|
||||
}
|
||||
if (pageIndex.value > maxPage) {
|
||||
pageIndex.value = maxPage
|
||||
await loadEpisodes()
|
||||
}
|
||||
}
|
||||
|
||||
function nextNumber() {
|
||||
return snapshotEpisodes.value.reduce((max, item) => Math.max(max, item.number || 0), 0) + 1
|
||||
}
|
||||
|
||||
async function openBatchUpload() {
|
||||
if (!selectedDramaId.value) return
|
||||
await refreshSnapshot()
|
||||
batchUploadVisible.value = true
|
||||
}
|
||||
|
||||
@@ -73,7 +143,8 @@ async function onBatchEpisodesCreated() {
|
||||
await loadEpisodes()
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
async function openCreate() {
|
||||
await refreshSnapshot()
|
||||
formDialogRef.value?.openCreate()
|
||||
}
|
||||
|
||||
@@ -94,6 +165,9 @@ async function confirmDelete(row) {
|
||||
}
|
||||
await deleteEpisodeApi(row.id)
|
||||
ElMessage.success('剧集已删除')
|
||||
if (episodes.value.length === 1 && pageIndex.value > 1) {
|
||||
pageIndex.value -= 1
|
||||
}
|
||||
await loadEpisodes()
|
||||
}
|
||||
|
||||
@@ -122,11 +196,32 @@ function stopThumb(event) {
|
||||
}
|
||||
}
|
||||
|
||||
/** 上移/下移后把新顺序整表提交,由后端重排 sort。 */
|
||||
async function move(index, offset) {
|
||||
function pageLocalIndex(row) {
|
||||
return episodes.value.findIndex((item) => item.id === row.id)
|
||||
}
|
||||
|
||||
function globalIndex(row) {
|
||||
const local = pageLocalIndex(row)
|
||||
if (local < 0) return -1
|
||||
return (pageIndex.value - 1) * pageSize.value + local
|
||||
}
|
||||
|
||||
function canMoveUp(row) {
|
||||
return globalIndex(row) > 0
|
||||
}
|
||||
|
||||
function canMoveDown(row) {
|
||||
const index = globalIndex(row)
|
||||
return index >= 0 && index < total.value - 1
|
||||
}
|
||||
|
||||
/** 上移/下移后把快照新顺序整表提交,由后端重排 sort。 */
|
||||
async function move(row, offset) {
|
||||
await refreshSnapshot()
|
||||
const index = snapshotEpisodes.value.findIndex((item) => item.id === row.id)
|
||||
const target = index + offset
|
||||
if (target < 0 || target >= episodes.value.length) return
|
||||
const next = [...episodes.value]
|
||||
if (index < 0 || target < 0 || target >= snapshotEpisodes.value.length) return
|
||||
const next = [...snapshotEpisodes.value]
|
||||
const [moved] = next.splice(index, 1)
|
||||
next.splice(target, 0, moved)
|
||||
await sortEpisodesApi(next.map((item) => item.id))
|
||||
@@ -135,10 +230,25 @@ async function move(index, offset) {
|
||||
}
|
||||
|
||||
async function onDramaChange() {
|
||||
pageIndex.value = 1
|
||||
await loadEpisodes()
|
||||
openBatchIfPendingSessions()
|
||||
}
|
||||
|
||||
function onStatusChange() {
|
||||
pageIndex.value = 1
|
||||
loadEpisodes()
|
||||
}
|
||||
|
||||
function handleSizeChange() {
|
||||
pageIndex.value = 1
|
||||
loadEpisodes()
|
||||
}
|
||||
|
||||
function handlePageChange() {
|
||||
loadEpisodes()
|
||||
}
|
||||
|
||||
/** 进入页面或切换短剧时,若有 24h 内未完成上传则打开批量上传弹窗以提示续传。 */
|
||||
function openBatchIfPendingSessions() {
|
||||
if (!selectedDramaId.value || !can('episode:upload')) return
|
||||
@@ -177,7 +287,7 @@ onMounted(async () => {
|
||||
<span class="episode-context-label">当前短剧</span>
|
||||
<b class="episode-context-title">{{ selectedDrama?.title || '暂无短剧' }}</b>
|
||||
<small class="episode-context-count"
|
||||
>共 {{ selectedDrama?.episodes ?? episodes.length }} 集 · 收藏
|
||||
>共 {{ selectedDrama?.episodes ?? total }} 集 · 收藏
|
||||
{{ formatCount(selectedDrama?.favoriteCount ?? 0) }} · 热度
|
||||
{{ formatCount(selectedDrama?.views ?? 0) }}</small
|
||||
>
|
||||
@@ -197,23 +307,40 @@ onMounted(async () => {
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
<span class="episode-context-label">状态</span>
|
||||
<el-select
|
||||
v-model="statusFilter"
|
||||
clearable
|
||||
placeholder="全部状态"
|
||||
class="status-select"
|
||||
@change="onStatusChange"
|
||||
>
|
||||
<el-option label="草稿" value="draft" />
|
||||
<el-option label="已上线" value="published" />
|
||||
<el-option label="已下线" value="offline" />
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="episode-toolbar"
|
||||
><div
|
||||
><h2>剧集列表({{ episodes.length }})</h2><p>按列表顺序播放</p></div
|
||||
><h2>剧集列表({{ total }})</h2><p>按列表顺序播放</p></div
|
||||
></div
|
||||
>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="episodes"
|
||||
row-key="id"
|
||||
empty-text="该短剧暂无剧集"
|
||||
class="drama-el-table episode-el-table"
|
||||
>
|
||||
<template #empty>
|
||||
<el-empty
|
||||
v-if="showEmpty"
|
||||
:description="selectedDramaId ? '该短剧暂无剧集' : '请先选择短剧'"
|
||||
/>
|
||||
</template>
|
||||
<el-table-column label="集数" width="90"
|
||||
><template #default="{ row }">{{
|
||||
String(row.number).padStart(2, '0')
|
||||
String(row.number ?? 0).padStart(2, '0')
|
||||
}}</template></el-table-column
|
||||
>
|
||||
<el-table-column label="剧集名称" min-width="240"
|
||||
@@ -278,7 +405,7 @@ onMounted(async () => {
|
||||
></el-table-column
|
||||
>
|
||||
<el-table-column label="操作" width="250" fixed="right"
|
||||
><template #default="{ row, $index }"
|
||||
><template #default="{ row }"
|
||||
><div class="table-actions"
|
||||
><el-button
|
||||
v-if="can('episode:upload')"
|
||||
@@ -289,14 +416,14 @@ onMounted(async () => {
|
||||
><el-button
|
||||
v-if="can('episode:sort')"
|
||||
size="small"
|
||||
:disabled="$index === 0"
|
||||
@click="move($index, -1)"
|
||||
:disabled="!canMoveUp(row)"
|
||||
@click="move(row, -1)"
|
||||
>上移</el-button
|
||||
><el-button
|
||||
v-if="can('episode:sort')"
|
||||
size="small"
|
||||
:disabled="$index === episodes.length - 1"
|
||||
@click="move($index, 1)"
|
||||
:disabled="!canMoveDown(row)"
|
||||
@click="move(row, 1)"
|
||||
>下移</el-button
|
||||
><el-button
|
||||
v-if="can('episode:upload')"
|
||||
@@ -309,6 +436,18 @@ onMounted(async () => {
|
||||
></el-table-column
|
||||
>
|
||||
</el-table>
|
||||
<div class="pagination"
|
||||
><el-pagination
|
||||
v-model:current-page="pageIndex"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="PAGE_SIZE_OPTIONS"
|
||||
:total="total"
|
||||
:pager-count="7"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
background
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handlePageChange"
|
||||
/></div>
|
||||
</section>
|
||||
<EpisodeFormDialog
|
||||
ref="formDialogRef"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!-- Author: fruit.com.cn -->
|
||||
<!-- 剧集批量上传弹窗:多选、队列、总进度、续传与批量建集入口 -->
|
||||
<!-- 剧集批量上传弹窗:先入队待上传,点「开始上传」后再执行 -->
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, ref, watch } from 'vue'
|
||||
@@ -60,6 +60,10 @@ watch(
|
||||
|
||||
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()
|
||||
@@ -92,14 +96,19 @@ function onPickFiles(event: Event): void {
|
||||
}
|
||||
rejectedNames.value = rejected
|
||||
if (!accepted.length) return
|
||||
// 只入队,不发起上传;等用户点「开始上传」
|
||||
queue.enqueue(accepted)
|
||||
queue.start()
|
||||
}
|
||||
|
||||
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()
|
||||
@@ -158,7 +167,6 @@ async function onResumeFiles(event: Event): Promise<void> {
|
||||
}
|
||||
if (matched.length) {
|
||||
ElMessage.success(t('episodeBatch.resumeMatched', { count: matched.length }))
|
||||
queue.start()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -229,10 +237,13 @@ function onEpisodesCreated(): void {
|
||||
<AppIcon :icon="AppIcons.upload" />
|
||||
{{ t('episodeBatch.selectFiles') }}
|
||||
</el-button>
|
||||
<el-button :disabled="!queue.items.value.length" @click="queue.pause()">
|
||||
<el-button
|
||||
:disabled="!queue.started.value || !queue.items.value.length"
|
||||
@click="queue.pause()"
|
||||
>
|
||||
{{ t('episodeBatch.pause') }}
|
||||
</el-button>
|
||||
<el-button :disabled="!queue.items.value.length" @click="queue.start()">
|
||||
<el-button :disabled="!queue.canStart.value" @click="queue.start()">
|
||||
{{ t('episodeBatch.resume') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
@@ -254,11 +265,22 @@ function onEpisodesCreated(): void {
|
||||
<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 in queue.items.value"
|
||||
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"
|
||||
/>
|
||||
@@ -267,7 +289,15 @@ function onEpisodesCreated(): void {
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">{{ t('common.cancel') }}</el-button>
|
||||
<el-button type="primary" :disabled="!canCreateEpisodes" @click="openCreateDialog">
|
||||
<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>
|
||||
@@ -317,6 +347,15 @@ function onEpisodesCreated(): void {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.batch-upload-summary {
|
||||
margin: 0 0 12px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
background: color-mix(in srgb, var(--el-color-success) 10%, transparent);
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.batch-upload-list {
|
||||
max-height: 360px;
|
||||
overflow: auto;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!-- Author: fruit.com.cn -->
|
||||
<!-- 批量上传队列单行:文件名、大小、进度、状态与操作 -->
|
||||
<!-- 批量上传队列单行:序号、文件名、大小、进度、状态与操作 -->
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
@@ -8,6 +8,10 @@ import type { UploadQueueItem } from './useUploadQueue'
|
||||
|
||||
const props = defineProps<{
|
||||
item: UploadQueueItem
|
||||
/** 自然排序后的展示序号(从 1 起) */
|
||||
index: number
|
||||
/** 选择阶段才允许移除 */
|
||||
allowRemove: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -47,14 +51,12 @@ const statusType = computed(() => {
|
||||
})
|
||||
|
||||
const canRetry = computed(() => props.item.status === 'failed')
|
||||
const canRemove = computed(
|
||||
() => props.item.status !== 'uploading' && props.item.status !== 'merging'
|
||||
)
|
||||
</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>
|
||||
@@ -71,7 +73,13 @@ const canRemove = computed(
|
||||
<el-button v-if="canRetry" size="small" type="primary" @click="emit('retry', item.id)">
|
||||
{{ t('episodeBatch.retry') }}
|
||||
</el-button>
|
||||
<el-button v-if="canRemove" size="small" type="danger" text @click="emit('remove', item.id)">
|
||||
<el-button
|
||||
v-if="allowRemove"
|
||||
size="small"
|
||||
type="danger"
|
||||
text
|
||||
@click="emit('remove', item.id)"
|
||||
>
|
||||
{{ t('episodeBatch.remove') }}
|
||||
</el-button>
|
||||
</div>
|
||||
@@ -91,6 +99,14 @@ const canRemove = computed(
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.upload-task-row__index {
|
||||
flex: 0 0 auto;
|
||||
min-width: 1.5em;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 13px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.upload-task-row__name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
// Author: fruit.com.cn
|
||||
/** 剧集批量上传队列:文件并发、进度加权、断点会话、失败隔离 */
|
||||
/** 剧集批量上传队列:手动开始、文件并发、进度加权、断点会话、失败隔离 */
|
||||
|
||||
import { computed, ref } from 'vue'
|
||||
import { getUploadProgressApi } from '@/api/admin/media'
|
||||
@@ -58,6 +58,11 @@ function isHttpNotFound(error: unknown): boolean {
|
||||
return status === 404
|
||||
}
|
||||
|
||||
/** 文件名自然排序(数字感知),保证队列序号稳定。 */
|
||||
function compareFileName(a: string, b: string): number {
|
||||
return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建上传队列控制器。
|
||||
* @param options dramaId 与可选 bizType
|
||||
@@ -65,6 +70,8 @@ function isHttpNotFound(error: unknown): boolean {
|
||||
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
|
||||
|
||||
@@ -77,18 +84,36 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
|
||||
return Math.min(MAX_PERCENT, Math.round(weighted / totalBytes))
|
||||
})
|
||||
|
||||
const hasActiveUpload = computed(() =>
|
||||
items.value.some(
|
||||
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({
|
||||
@@ -106,6 +131,10 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
|
||||
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 = ''
|
||||
@@ -140,7 +169,7 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
|
||||
}
|
||||
|
||||
function pump(): void {
|
||||
if (paused.value) return
|
||||
if (!started.value || paused.value) return
|
||||
while (running < FILE_CONCURRENCY && !paused.value) {
|
||||
const next = items.value.find((item) => item.status === 'waiting')
|
||||
if (!next) return
|
||||
@@ -155,9 +184,10 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
|
||||
}
|
||||
}
|
||||
|
||||
/** 入队本地文件(调用方已完成类型/大小校验)。 */
|
||||
/** 入队本地文件(调用方已完成类型/大小校验);只展示待上传,不发起请求。 */
|
||||
function enqueue(files: File[]): void {
|
||||
for (const file of files) {
|
||||
const sorted = [...files].sort((a, b) => compareFileName(a.name, b.name))
|
||||
for (const file of sorted) {
|
||||
items.value.push({
|
||||
id: nextItemId(),
|
||||
file,
|
||||
@@ -165,15 +195,18 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
|
||||
fileSize: file.size,
|
||||
lastModified: file.lastModified,
|
||||
percent: 0,
|
||||
status: paused.value ? 'paused' : 'waiting',
|
||||
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'
|
||||
@@ -183,6 +216,7 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
|
||||
|
||||
/** 暂停:不派新任务;进行中分片跑完。 */
|
||||
function pause(): void {
|
||||
if (!started.value) return
|
||||
paused.value = true
|
||||
for (const item of items.value) {
|
||||
if (item.status === 'waiting') item.status = 'paused'
|
||||
@@ -196,7 +230,7 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
|
||||
item.error = ''
|
||||
item.percent = item.uploadId ? item.percent : 0
|
||||
item.status = paused.value ? 'paused' : 'waiting'
|
||||
if (!paused.value) void pump()
|
||||
if (started.value && !paused.value) void pump()
|
||||
}
|
||||
|
||||
/** 重试全部失败项。 */
|
||||
@@ -207,11 +241,12 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
|
||||
item.status = paused.value ? 'paused' : 'waiting'
|
||||
}
|
||||
}
|
||||
if (!paused.value) void pump()
|
||||
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)
|
||||
@@ -225,6 +260,7 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
|
||||
}
|
||||
items.value = []
|
||||
paused.value = false
|
||||
started.value = false
|
||||
running = 0
|
||||
}
|
||||
|
||||
@@ -234,7 +270,7 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
|
||||
}
|
||||
|
||||
/**
|
||||
* 用本地重选文件匹配会话并入队续传。
|
||||
* 用本地重选文件匹配会话并入队(待上传);不自动开始,由用户点「开始上传」续传。
|
||||
* @returns matched / unmatched 会话列表
|
||||
*/
|
||||
async function resumeFromSessions(
|
||||
@@ -267,7 +303,7 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
|
||||
fileSize: file.size,
|
||||
lastModified: file.lastModified,
|
||||
percent: Math.min(MERGING_PERCENT, Number(progress.percent) || 0),
|
||||
status: paused.value ? 'paused' : 'waiting',
|
||||
status: 'waiting',
|
||||
error: '',
|
||||
uploadId: session.uploadId
|
||||
})
|
||||
@@ -280,6 +316,7 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
|
||||
}
|
||||
}
|
||||
}
|
||||
sortItemsByName()
|
||||
return { matched, unmatched }
|
||||
}
|
||||
|
||||
@@ -294,7 +331,12 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
|
||||
items,
|
||||
overallPercent,
|
||||
hasActiveUpload,
|
||||
isUploading,
|
||||
canStart,
|
||||
doneItems,
|
||||
failedCount,
|
||||
showResultSummary,
|
||||
started,
|
||||
paused,
|
||||
enqueue,
|
||||
start,
|
||||
|
||||
Reference in new issue
Block a user