feat(creator-center): 分集支持视频预览与表格横向滚动
This commit is contained in:
Zhou Weidong committed
1 parent
3c730c7d33
commit
71ee469563
2 files changed
+163
-136
No files matched your search
@@ -1,7 +1,7 @@
|
||||
<!-- Author: fruit.com.cn -->
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import { AppIcons } from '@/constants/icons'
|
||||
import { AppImage } from '@/components/AppImage'
|
||||
import PageHeading from '@/views/components/PageHeading.vue'
|
||||
@@ -45,7 +45,6 @@ const {
|
||||
moveEpisode,
|
||||
uploadVideo,
|
||||
uploadCover,
|
||||
hasResumeSession,
|
||||
submit,
|
||||
withdraw
|
||||
} = useDramaEdit()
|
||||
@@ -62,6 +61,16 @@ function back() {
|
||||
window.history.back()
|
||||
}
|
||||
|
||||
/* ---------- 分集视频预览 ---------- */
|
||||
const videoPreviewVisible = ref(false)
|
||||
const videoPreviewUrl = ref('')
|
||||
|
||||
function playEpisode(row) {
|
||||
if (!row.videoUrl) return
|
||||
videoPreviewUrl.value = row.videoUrl
|
||||
videoPreviewVisible.value = true
|
||||
}
|
||||
|
||||
/** el-upload 的 http-request 回调：拿到原始 File 后交给统一的（可续传）上传逻辑 */
|
||||
function requestVideo(row, options) {
|
||||
return uploadVideo(row, options.file)
|
||||
@@ -123,15 +132,9 @@ function requestDramaCover(options) {
|
||||
<el-form-item label="作品名称" required>
|
||||
<el-input v-model="infoForm.title" maxlength="64" />
|
||||
</el-form-item>
|
||||
<el-form-item label="副标题">
|
||||
<el-input v-model="infoForm.subtitle" maxlength="64" />
|
||||
</el-form-item>
|
||||
<el-form-item label="题材">
|
||||
<el-input v-model="infoForm.genre" maxlength="32" placeholder="例如：都市情感" />
|
||||
</el-form-item>
|
||||
<el-form-item label="语言">
|
||||
<el-input v-model="infoForm.language" maxlength="16" placeholder="zh-CN / id-ID" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="简介">
|
||||
<el-input
|
||||
@@ -163,13 +166,6 @@ function requestDramaCover(options) {
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="预告片地址">
|
||||
<el-input
|
||||
v-model="infoForm.trailerUrl"
|
||||
maxlength="512"
|
||||
placeholder="整剧一支预告片，可留空"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-button
|
||||
v-if="canEdit"
|
||||
@@ -202,80 +198,92 @@ function requestDramaCover(options) {
|
||||
show-icon
|
||||
:title="resumeHint"
|
||||
/>
|
||||
<el-table :data="episodes" row-key="id" border class="drama-el-table" empty-text="还没有分集">
|
||||
<el-table-column prop="number" label="集号" width="70" />
|
||||
<el-table-column label="封面" width="88">
|
||||
<template #default="{ row }">
|
||||
<div class="creator-episode-cover">
|
||||
<AppImage
|
||||
v-if="row.cover"
|
||||
:src="row.cover"
|
||||
:preview-list="episodeCoverPreviewList"
|
||||
:initial-index="episodeCoverPreviewIndex(row)"
|
||||
fit="cover"
|
||||
class="creator-episode-image"
|
||||
:alt="row.title"
|
||||
/>
|
||||
<span v-else>无</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="title" label="标题" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="duration" label="时长" width="90" />
|
||||
<el-table-column label="片源" min-width="120">
|
||||
<template #default="{ row }">
|
||||
<span class="console-muted">{{ row.videoUrl ? '已上传' : '未上传' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="90">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
size="small"
|
||||
effect="light"
|
||||
:type="row.status === 'published' ? 'success' : 'info'"
|
||||
>
|
||||
{{ row.statusText }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="300" fixed="right">
|
||||
<template #default="{ row, $index }">
|
||||
<div class="table-actions">
|
||||
<el-button
|
||||
<div class="creator-table-scroll creator-table-scroll--episodes">
|
||||
<el-table
|
||||
:data="episodes"
|
||||
row-key="id"
|
||||
border
|
||||
class="drama-el-table"
|
||||
style="min-width: 1150px"
|
||||
empty-text="还没有分集"
|
||||
>
|
||||
<el-table-column prop="number" label="集号" width="70" />
|
||||
<el-table-column label="封面" width="88">
|
||||
<template #default="{ row }">
|
||||
<div class="creator-episode-cover">
|
||||
<AppImage
|
||||
v-if="row.cover"
|
||||
:src="row.cover"
|
||||
:preview-list="episodeCoverPreviewList"
|
||||
:initial-index="episodeCoverPreviewIndex(row)"
|
||||
fit="cover"
|
||||
class="creator-episode-image"
|
||||
:alt="row.title"
|
||||
/>
|
||||
<span v-else>无</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="title" label="标题" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="duration" label="时长" width="90" />
|
||||
<el-table-column label="片源" min-width="120">
|
||||
<template #default="{ row }">
|
||||
<el-button v-if="row.videoUrl" link type="primary" @click="playEpisode(row)"
|
||||
>播放</el-button
|
||||
>
|
||||
<span v-else class="console-muted">未上传</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="90">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
size="small"
|
||||
:disabled="!editable || $index === 0"
|
||||
@click="moveEpisode(row, -1)"
|
||||
>上移</el-button
|
||||
effect="light"
|
||||
:type="row.status === 'published' ? 'success' : 'info'"
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
:disabled="!editable || $index === episodes.length - 1"
|
||||
@click="moveEpisode(row, 1)"
|
||||
>下移</el-button
|
||||
>
|
||||
<el-button size="small" :disabled="!editable" @click="openEpisode(row)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-upload
|
||||
v-if="canUpload"
|
||||
:show-file-list="false"
|
||||
accept="video/*"
|
||||
:http-request="(options) => requestVideo(row, options)"
|
||||
:disabled="!editable || uploadingId !== null"
|
||||
>
|
||||
<el-button size="small">{{ hasResumeSession ? '继续上传' : '上传视频' }}</el-button>
|
||||
</el-upload>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
:disabled="!editable"
|
||||
@click="removeEpisode(row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
{{ row.statusText }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="340">
|
||||
<template #default="{ row, $index }">
|
||||
<div class="table-actions">
|
||||
<el-button
|
||||
size="small"
|
||||
:disabled="!editable || $index === 0"
|
||||
@click="moveEpisode(row, -1)"
|
||||
>上移</el-button
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
:disabled="!editable || $index === episodes.length - 1"
|
||||
@click="moveEpisode(row, 1)"
|
||||
>下移</el-button
|
||||
>
|
||||
<el-button size="small" :disabled="!editable" @click="openEpisode(row)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-upload
|
||||
v-if="canUpload"
|
||||
:show-file-list="false"
|
||||
accept="video/*"
|
||||
:http-request="(options) => requestVideo(row, options)"
|
||||
:disabled="!editable || uploadingId !== null"
|
||||
>
|
||||
<el-button size="small">上传视频</el-button>
|
||||
</el-upload>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
:disabled="!editable"
|
||||
@click="removeEpisode(row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<p v-if="uploadingId !== null" class="creator-upload-hint"
|
||||
>上传中 {{ uploadPercent }}%（分片上传，可断点续传）</p
|
||||
>
|
||||
@@ -283,56 +291,75 @@ function requestDramaCover(options) {
|
||||
|
||||
<section class="panel">
|
||||
<h3 class="creator-section-title">提交记录</h3>
|
||||
<el-table
|
||||
:data="submissions"
|
||||
row-key="id"
|
||||
border
|
||||
class="drama-el-table"
|
||||
empty-text="还没有提交记录"
|
||||
>
|
||||
<el-table-column prop="version" label="版本" width="70" />
|
||||
<el-table-column label="类型" width="100">
|
||||
<template #default="{ row }">{{ submissionTypeText(row.type) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag size="small" :type="submissionStatusMeta(row.status).tag" effect="light">
|
||||
{{ submissionStatusMeta(row.status).label }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="submitAt"
|
||||
label="提交时间"
|
||||
min-width="165"
|
||||
:formatter="dateCell"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
prop="reviewAt"
|
||||
label="审核时间"
|
||||
min-width="165"
|
||||
:formatter="dateCell"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column prop="reviewNote" label="审核意见" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="110" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<div class="table-actions">
|
||||
<el-button
|
||||
v-if="canEdit && ['SUBMITTED', 'REVIEWING'].includes(row.status)"
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="withdraw(row.id)"
|
||||
>撤回</el-button
|
||||
>
|
||||
<span v-else class="console-muted">—</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="creator-table-scroll creator-table-scroll--submissions">
|
||||
<el-table
|
||||
:data="submissions"
|
||||
row-key="id"
|
||||
border
|
||||
class="drama-el-table"
|
||||
style="min-width: 1000px"
|
||||
empty-text="还没有提交记录"
|
||||
>
|
||||
<el-table-column prop="version" label="版本" width="70" />
|
||||
<el-table-column label="类型" width="100">
|
||||
<template #default="{ row }">{{ submissionTypeText(row.type) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag size="small" :type="submissionStatusMeta(row.status).tag" effect="light">
|
||||
{{ submissionStatusMeta(row.status).label }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="submitAt"
|
||||
label="提交时间"
|
||||
min-width="165"
|
||||
:formatter="dateCell"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
prop="reviewAt"
|
||||
label="审核时间"
|
||||
min-width="165"
|
||||
:formatter="dateCell"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
prop="reviewNote"
|
||||
label="审核意见"
|
||||
min-width="200"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column label="操作" width="110">
|
||||
<template #default="{ row }">
|
||||
<div class="table-actions">
|
||||
<el-button
|
||||
v-if="canEdit && ['SUBMITTED', 'REVIEWING'].includes(row.status)"
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="withdraw(row.id)"
|
||||
>撤回</el-button
|
||||
>
|
||||
<span v-else class="console-muted">—</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<el-dialog v-model="videoPreviewVisible" title="视频预览" width="720px" append-to-body>
|
||||
<video
|
||||
v-if="videoPreviewUrl"
|
||||
:src="videoPreviewUrl"
|
||||
controls
|
||||
autoplay
|
||||
playsinline
|
||||
class="creator-video-preview"
|
||||
></video>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
v-model="episodeVisible"
|
||||
:title="episodeEditingId ? '编辑分集' : '新增分集'"
|
||||
|
||||
@@ -259,7 +259,7 @@ export function useDramaEdit() {
|
||||
ElMessage.success('视频已上传并挂到该分集')
|
||||
await loadEpisodes()
|
||||
} catch {
|
||||
resumeHint.value = `「${file.name}」上传中断，进度已记住，可点「继续上传」接着传`
|
||||
resumeHint.value = `「${file.name}」上传中断，进度已记住；重新选择同一个文件即可续传`
|
||||
} finally {
|
||||
uploadingId.value = null
|
||||
uploadPercent.value = 0
|
||||
|
||||
Reference in new issue
Block a user