feat(creator-center): 新增两步发布作品并支持删除作品
This commit is contained in:
Zhou Weidong committed
1 parent
4055b7a2a9
commit
3c730c7d33
6 files changed
+1522
-112
No files matched your search
File diff suppressed because it is too large.
Load diff
@@ -30,16 +30,12 @@ const {
|
||||
profileLoading,
|
||||
dramas,
|
||||
notices,
|
||||
createVisible,
|
||||
createSaving,
|
||||
createForm,
|
||||
queryDramas,
|
||||
loadDramas,
|
||||
loadNotices,
|
||||
submit,
|
||||
withdraw,
|
||||
openCreate,
|
||||
confirmCreate
|
||||
remove
|
||||
} = useCreatorWorkspace()
|
||||
|
||||
const activeTab = ref('dramas')
|
||||
@@ -59,6 +55,11 @@ function onTabChange(name) {
|
||||
function openEdit(row) {
|
||||
router.push(`/creator-center/dramas/${row.id}`)
|
||||
}
|
||||
|
||||
/** 抖音式发布：直接进发布页选视频，不再先建空草稿 */
|
||||
function openPublish() {
|
||||
router.push('/creator-center/publish')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -68,8 +69,8 @@ function openEdit(row) {
|
||||
title="我的作品"
|
||||
description="查看作品与审核进度，提交上线 / 下线申请。"
|
||||
>
|
||||
<el-button v-if="canEdit && !impersonating" type="primary" @click="openCreate"
|
||||
>新建作品</el-button
|
||||
<el-button v-if="canEdit && !impersonating" type="primary" @click="openPublish"
|
||||
>发布作品</el-button
|
||||
>
|
||||
</PageHeading>
|
||||
|
||||
@@ -114,7 +115,7 @@ function openEdit(row) {
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<section class="panel creator-workspace-wrap">
|
||||
<el-tabs v-model="activeTab" @tab-change="onTabChange">
|
||||
<el-tab-pane label="我的作品" name="dramas">
|
||||
<div class="console-toolbar">
|
||||
@@ -146,47 +147,151 @@ function openEdit(row) {
|
||||
<span class="console-count">共 {{ dramas.total }} 部作品</span>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
v-loading="dramas.loading"
|
||||
:data="dramas.rows"
|
||||
row-key="id"
|
||||
border
|
||||
class="drama-el-table"
|
||||
empty-text="还没有作品，点右上角「新建作品」开始"
|
||||
>
|
||||
<el-table-column label="作品" min-width="220">
|
||||
<template #default="{ row }">
|
||||
<div class="creator-drama-cell">
|
||||
<div class="creator-drama-cover">
|
||||
<AppImage
|
||||
v-if="row.cover"
|
||||
:src="row.cover"
|
||||
:preview-list="workspaceCoverPreviewList"
|
||||
:initial-index="workspaceCoverPreviewIndex(row)"
|
||||
fit="cover"
|
||||
class="creator-drama-image"
|
||||
:alt="row.title"
|
||||
/>
|
||||
<span v-else>{{ (row.title || '?').slice(0, 1) }}</span>
|
||||
<div class="creator-desktop-only">
|
||||
<el-table
|
||||
v-loading="dramas.loading"
|
||||
:data="dramas.rows"
|
||||
row-key="id"
|
||||
border
|
||||
class="drama-el-table"
|
||||
empty-text="还没有作品，点右上角「发布作品」开始"
|
||||
>
|
||||
<el-table-column label="作品" min-width="220">
|
||||
<template #default="{ row }">
|
||||
<div class="creator-drama-cell">
|
||||
<div class="creator-drama-cover">
|
||||
<AppImage
|
||||
v-if="row.cover"
|
||||
:src="row.cover"
|
||||
:preview-list="workspaceCoverPreviewList"
|
||||
:initial-index="workspaceCoverPreviewIndex(row)"
|
||||
fit="cover"
|
||||
class="creator-drama-image"
|
||||
:alt="row.title"
|
||||
/>
|
||||
<span v-else>{{ (row.title || '?').slice(0, 1) }}</span>
|
||||
</div>
|
||||
<div class="creator-drama-meta">
|
||||
<span class="creator-drama-title">{{ row.title }}</span>
|
||||
<span class="creator-drama-code">{{ row.code }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="creator-drama-meta">
|
||||
<span class="creator-drama-title">{{ row.title }}</span>
|
||||
<span class="creator-drama-code">{{ row.code }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="dramaStatusMeta(row.status).tag" effect="light">{{
|
||||
dramaStatusMeta(row.status).label
|
||||
}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="episodes" label="分集" width="80" />
|
||||
<el-table-column prop="views" label="播放" width="100" />
|
||||
<el-table-column label="审核进度" min-width="200">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row.submissionStatus" class="creator-progress">
|
||||
<el-tag
|
||||
size="small"
|
||||
:type="submissionStatusMeta(row.submissionStatus).tag"
|
||||
effect="plain"
|
||||
>
|
||||
{{ submissionTypeText(row.submissionType) }}·{{
|
||||
submissionStatusMeta(row.submissionStatus).label
|
||||
}}
|
||||
</el-tag>
|
||||
<span v-if="row.reviewNote" class="console-muted" :title="row.reviewNote">{{
|
||||
row.reviewNote
|
||||
}}</span>
|
||||
</div>
|
||||
<span v-else class="console-muted">尚未提交</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="updatedAt"
|
||||
label="更新时间"
|
||||
min-width="165"
|
||||
:formatter="dateCell"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column label="操作" width="280">
|
||||
<template #default="{ row }">
|
||||
<div class="table-actions">
|
||||
<el-button
|
||||
v-if="canEdit && !impersonating"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="openEdit(row)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-dropdown
|
||||
v-if="canEdit && !impersonating && submitOptions(row).length"
|
||||
trigger="click"
|
||||
@command="(type) => submit(row, type)"
|
||||
>
|
||||
<el-button size="small">提交审核</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
v-for="type in submitOptions(row)"
|
||||
:key="type"
|
||||
:command="type"
|
||||
>
|
||||
{{ submissionTypeText(type) }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<el-button
|
||||
v-if="
|
||||
canEdit &&
|
||||
!impersonating &&
|
||||
row.submissionId &&
|
||||
['SUBMITTED', 'REVIEWING'].includes(row.submissionStatus)
|
||||
"
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="withdraw(row)"
|
||||
>撤回</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="canEdit && !impersonating"
|
||||
text
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="remove(row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<div v-loading="dramas.loading" class="creator-mobile-only creator-drama-list">
|
||||
<el-empty v-if="!dramas.rows.length" description="还没有作品，点下方「发布作品」开始" />
|
||||
<article v-for="row in dramas.rows" :key="row.id" class="creator-drama-card">
|
||||
<div class="creator-drama-card-cover" @click="openEdit(row)">
|
||||
<AppImage
|
||||
v-if="row.cover"
|
||||
:src="row.cover"
|
||||
fit="cover"
|
||||
class="creator-drama-image"
|
||||
:alt="row.title"
|
||||
/>
|
||||
<span v-else>{{ (row.title || '?').slice(0, 1) }}</span>
|
||||
</div>
|
||||
<div class="creator-drama-card-body">
|
||||
<div class="creator-drama-card-head">
|
||||
<span class="creator-drama-title">{{ row.title }}</span>
|
||||
<el-tag size="small" :type="dramaStatusMeta(row.status).tag" effect="light">
|
||||
{{ dramaStatusMeta(row.status).label }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<span class="creator-drama-code">{{ row.code }}</span>
|
||||
<div class="creator-drama-card-meta">
|
||||
<span>{{ row.episodes }} 集</span>
|
||||
<span>{{ row.views }} 播放</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="dramaStatusMeta(row.status).tag" effect="light">{{
|
||||
dramaStatusMeta(row.status).label
|
||||
}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="episodes" label="分集" width="80" />
|
||||
<el-table-column prop="views" label="播放" width="100" />
|
||||
<el-table-column label="审核进度" min-width="200">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row.submissionStatus" class="creator-progress">
|
||||
<el-tag
|
||||
size="small"
|
||||
@@ -197,32 +302,12 @@ function openEdit(row) {
|
||||
submissionStatusMeta(row.submissionStatus).label
|
||||
}}
|
||||
</el-tag>
|
||||
<span v-if="row.reviewNote" class="console-muted" :title="row.reviewNote">{{
|
||||
row.reviewNote
|
||||
}}</span>
|
||||
</div>
|
||||
<span v-else class="console-muted">尚未提交</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="updatedAt"
|
||||
label="更新时间"
|
||||
min-width="165"
|
||||
:formatter="dateCell"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column label="操作" width="210" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<div class="table-actions">
|
||||
<el-button
|
||||
v-if="canEdit && !impersonating"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="openEdit(row)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<div v-if="canEdit && !impersonating" class="creator-drama-card-actions">
|
||||
<el-button size="small" type="primary" @click="openEdit(row)">编辑</el-button>
|
||||
<el-dropdown
|
||||
v-if="canEdit && !impersonating && submitOptions(row).length"
|
||||
v-if="submitOptions(row).length"
|
||||
trigger="click"
|
||||
@command="(type) => submit(row, type)"
|
||||
>
|
||||
@@ -241,20 +326,18 @@ function openEdit(row) {
|
||||
</el-dropdown>
|
||||
<el-button
|
||||
v-if="
|
||||
canEdit &&
|
||||
!impersonating &&
|
||||
row.submissionId &&
|
||||
['SUBMITTED', 'REVIEWING'].includes(row.submissionStatus)
|
||||
row.submissionId && ['SUBMITTED', 'REVIEWING'].includes(row.submissionStatus)
|
||||
"
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="withdraw(row)"
|
||||
>撤回</el-button
|
||||
>
|
||||
<el-button text type="danger" size="small" @click="remove(row)">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
@@ -290,41 +373,5 @@ function openEdit(row) {
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</section>
|
||||
|
||||
<el-dialog v-model="createVisible" title="新建作品" width="480px">
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="作品名称" required>
|
||||
<el-input
|
||||
v-model="createForm.title"
|
||||
maxlength="64"
|
||||
placeholder="例如：闪婚后，傅先生每天都在撒糖"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="题材">
|
||||
<el-input v-model="createForm.genre" maxlength="32" placeholder="例如：都市情感" />
|
||||
</el-form-item>
|
||||
<el-form-item label="简介">
|
||||
<el-input
|
||||
v-model="createForm.description"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-alert
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
title="先建草稿，再去作品编辑页完善信息、分集与视频，然后提交审核"
|
||||
/>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="createVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="createSaving" @click="confirmCreate"
|
||||
>创建草稿</el-button
|
||||
>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</CreatorCenterPage>
|
||||
</template>
|
||||
@@ -4,6 +4,7 @@ import { onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {
|
||||
createDramaApi,
|
||||
deleteDramaApi,
|
||||
getCreatorProfileApi,
|
||||
listCreatorNoticesApi,
|
||||
pageMyDramasApi,
|
||||
@@ -168,6 +169,32 @@ export function useCreatorWorkspace() {
|
||||
await loadDramas()
|
||||
}
|
||||
|
||||
/** 删作品。已上线的后端会拦，前端按状态给提示。 */
|
||||
async function remove(row) {
|
||||
const label = row.title || '该作品'
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`《${label}》将被永久删除（分集、封面、审核记录一并清理），且不可恢复。确认删除？`,
|
||||
'删除作品',
|
||||
{
|
||||
confirmButtonText: '确认删除',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
confirmButtonClass: 'el-button--danger'
|
||||
}
|
||||
)
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
try {
|
||||
await deleteDramaApi(row.id)
|
||||
ElMessage.success('作品已删除')
|
||||
await loadDramas()
|
||||
} catch (e) {
|
||||
// 后端可能抛"已上线，请先下线"之类的业务错误；ElMessage 全局拦截器会弹 message
|
||||
}
|
||||
}
|
||||
|
||||
const createVisible = ref(false)
|
||||
const createSaving = ref(false)
|
||||
const createForm = reactive({ title: '', genre: '', description: '' })
|
||||
@@ -216,6 +243,7 @@ export function useCreatorWorkspace() {
|
||||
loadNotices,
|
||||
submit,
|
||||
withdraw,
|
||||
remove,
|
||||
openCreate,
|
||||
confirmCreate
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user