feat: 搭建后台管理框架
This commit is contained in:
Vicky committed
1 parent
6d28bab72b
commit
40546bfd01
238 files changed
+18160
-3837
No files matched your search
@@ -14,9 +14,19 @@ const pageSize = ref(10)
|
||||
const dialogVisible = ref(false)
|
||||
const editingId = ref(null)
|
||||
const form = reactive({ title: '', genre: '', description: '', episodes: 1, cover: '' })
|
||||
const filtered = computed(() => dramas.filter(item => item.title.includes(search.value) && (status.value === '全部状态' || item.status === status.value)))
|
||||
const paginated = computed(() => filtered.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value))
|
||||
watch([search, status], () => { currentPage.value = 1 })
|
||||
const filtered = computed(() =>
|
||||
dramas.filter(
|
||||
(item) =>
|
||||
item.title.includes(search.value) &&
|
||||
(status.value === '全部状态' || item.status === status.value)
|
||||
)
|
||||
)
|
||||
const paginated = computed(() =>
|
||||
filtered.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
|
||||
)
|
||||
watch([search, status], () => {
|
||||
currentPage.value = 1
|
||||
})
|
||||
function openCreate() {
|
||||
editingId.value = null
|
||||
Object.assign(form, { title: '', genre: '', description: '', episodes: 1, cover: '' })
|
||||
@@ -24,14 +34,20 @@ function openCreate() {
|
||||
}
|
||||
function openEdit(item) {
|
||||
editingId.value = item.id
|
||||
Object.assign(form, { title: item.title, genre: item.genre, description: item.description, episodes: item.episodes, cover: item.cover || '' })
|
||||
Object.assign(form, {
|
||||
title: item.title,
|
||||
genre: item.genre,
|
||||
description: item.description,
|
||||
episodes: item.episodes,
|
||||
cover: item.cover || ''
|
||||
})
|
||||
dialogVisible.value = true
|
||||
}
|
||||
function saveDrama() {
|
||||
if (!form.title || !form.genre) return ElMessage.warning('请填写短剧名称和类型')
|
||||
const updatedAt = new Date().toISOString().slice(0, 10)
|
||||
if (editingId.value) {
|
||||
const drama = dramas.find(item => item.id === editingId.value)
|
||||
const drama = dramas.find((item) => item.id === editingId.value)
|
||||
if (drama) Object.assign(drama, { ...form, updatedAt })
|
||||
} else {
|
||||
dramas.unshift({ id: Date.now(), ...form, status: '草稿', views: '—', updatedAt })
|
||||
@@ -41,7 +57,9 @@ function saveDrama() {
|
||||
ElMessage.success(editingId.value ? '短剧信息已更新' : '短剧草稿已保存')
|
||||
editingId.value = null
|
||||
}
|
||||
function uploadCover(file) { if (can('上传封面素材')) form.cover = URL.createObjectURL(file.raw) }
|
||||
function uploadCover(file) {
|
||||
if (can('上传封面素材')) form.cover = URL.createObjectURL(file.raw)
|
||||
}
|
||||
async function confirmDelete(item) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定删除短剧「${item.title}」吗？删除后无法恢复。`, '删除确认', {
|
||||
@@ -49,11 +67,12 @@ async function confirmDelete(item) {
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
confirmButtonClass: 'el-button--danger',
|
||||
distinguishCancelAndClose: true,
|
||||
distinguishCancelAndClose: true
|
||||
})
|
||||
const index = dramas.findIndex(drama => drama.id === item.id)
|
||||
const index = dramas.findIndex((drama) => drama.id === item.id)
|
||||
if (index !== -1) dramas.splice(index, 1)
|
||||
if (currentPage.value > Math.ceil(filtered.value.length / pageSize.value)) currentPage.value = Math.max(1, currentPage.value - 1)
|
||||
if (currentPage.value > Math.ceil(filtered.value.length / pageSize.value))
|
||||
currentPage.value = Math.max(1, currentPage.value - 1)
|
||||
ElMessage.success('短剧已删除')
|
||||
} catch {
|
||||
// 用户取消或关闭确认框时不执行删除。
|
||||
@@ -62,19 +81,134 @@ async function confirmDelete(item) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-heading"><div><div class="eyebrow">内容管理</div><h1>短剧管理</h1><p>管理短剧信息、封面、剧集和发布状态。</p></div><el-button v-if="can('创建短剧')" type="primary" class="primary-button" @click="openCreate"><el-icon><Plus /></el-icon>新建短剧</el-button></div>
|
||||
<div class="page-heading"
|
||||
><div
|
||||
><div class="eyebrow">内容管理</div><h1>短剧管理</h1
|
||||
><p>管理短剧信息、封面、剧集和发布状态。</p></div
|
||||
><el-button v-if="can('创建短剧')" type="primary" class="primary-button" @click="openCreate"
|
||||
><el-icon><Plus /></el-icon>新建短剧</el-button
|
||||
></div
|
||||
>
|
||||
<section class="panel library-panel">
|
||||
<div class="library-toolbar"><div class="drama-filters"><el-input v-model="search" placeholder="搜索短剧名称" :prefix-icon="Search" clearable /><el-select v-model="status"><el-option v-for="item in ['全部状态','已上线','审核中','草稿']" :key="item" :label="item" :value="item" /></el-select></div><span class="table-result-count">共 {{filtered.length}} 部短剧</span></div>
|
||||
<div class="library-toolbar"
|
||||
><div class="drama-filters"
|
||||
><el-input
|
||||
v-model="search"
|
||||
placeholder="搜索短剧名称"
|
||||
:prefix-icon="Search"
|
||||
clearable /><el-select v-model="status"
|
||||
><el-option
|
||||
v-for="item in ['全部状态', '已上线', '审核中', '草稿']"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item" /></el-select></div
|
||||
><span class="table-result-count">共 {{ filtered.length }} 部短剧</span></div
|
||||
>
|
||||
<el-table :data="paginated" row-key="id" empty-text="没有符合条件的短剧" class="drama-el-table">
|
||||
<el-table-column label="短剧名称" min-width="340"><template #default="{row}"><div class="drama-cell"><img v-if="row.cover" :src="row.cover" class="drama-cover-image"/><div v-else class="drama-cover">暂无封面</div><div><b>{{row.title}}</b><small>{{row.description}}</small></div></div></template></el-table-column>
|
||||
<el-table-column label="短剧名称" min-width="340"
|
||||
><template #default="{ row }"
|
||||
><div class="drama-cell"
|
||||
><img v-if="row.cover" :src="row.cover" class="drama-cover-image" /><div
|
||||
v-else
|
||||
class="drama-cover"
|
||||
>暂无封面</div
|
||||
><div
|
||||
><b>{{ row.title }}</b
|
||||
><small>{{ row.description }}</small></div
|
||||
></div
|
||||
></template
|
||||
></el-table-column
|
||||
>
|
||||
<el-table-column prop="genre" label="类型" width="140" />
|
||||
<el-table-column label="集数" width="110"><template #default="{row}">{{row.episodes}} 集</template></el-table-column>
|
||||
<el-table-column label="集数" width="110"
|
||||
><template #default="{ row }">{{ row.episodes }} 集</template></el-table-column
|
||||
>
|
||||
<el-table-column prop="views" label="播放量" width="120" />
|
||||
<el-table-column label="状态" width="120"><template #default="{row}"><el-tag :class="['status-badge',statusClass(row.status)]" effect="light">{{row.status}}</el-tag></template></el-table-column>
|
||||
<el-table-column label="状态" width="120"
|
||||
><template #default="{ row }"
|
||||
><el-tag :class="['status-badge', statusClass(row.status)]" effect="light">{{
|
||||
row.status
|
||||
}}</el-tag></template
|
||||
></el-table-column
|
||||
>
|
||||
<el-table-column prop="updatedAt" label="更新时间" width="150" />
|
||||
<el-table-column label="操作" width="240" fixed="right"><template #default="{row}"><div class="table-actions"><el-button v-if="can('编辑短剧信息')" type="primary" size="small" @click="openEdit(row)">编辑</el-button><el-button v-if="can('查看剧集列表')" type="success" size="small" @click="$router.push({name:'episodes',query:{drama:row.id}})">剧集</el-button><el-button v-if="can('删除短剧')" type="danger" size="small" @click="confirmDelete(row)">删除</el-button></div></template></el-table-column>
|
||||
<el-table-column label="操作" width="240" fixed="right"
|
||||
><template #default="{ row }"
|
||||
><div class="table-actions"
|
||||
><el-button
|
||||
v-if="can('编辑短剧信息')"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="openEdit(row)"
|
||||
>编辑</el-button
|
||||
><el-button
|
||||
v-if="can('查看剧集列表')"
|
||||
type="success"
|
||||
size="small"
|
||||
@click="$router.push({ name: 'episodes', query: { drama: row.id } })"
|
||||
>剧集</el-button
|
||||
><el-button
|
||||
v-if="can('删除短剧')"
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="confirmDelete(row)"
|
||||
>删除</el-button
|
||||
></div
|
||||
></template
|
||||
></el-table-column
|
||||
>
|
||||
</el-table>
|
||||
<div class="pagination"><el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5,10,20,50]" :total="filtered.length" :pager-count="7" layout="total, sizes, prev, pager, next, jumper" background /></div>
|
||||
<div class="pagination"
|
||||
><el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[5, 10, 20, 50]"
|
||||
:total="filtered.length"
|
||||
:pager-count="7"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
background
|
||||
/></div>
|
||||
</section>
|
||||
<el-dialog v-model="dialogVisible" :title="editingId?'编辑短剧':'新建短剧'" width="600px"><el-form label-position="top"><div class="form-row"><el-form-item label="短剧名称" required><el-input v-model="form.title" placeholder="请输入短剧名称" /></el-form-item><el-form-item label="类型" required><el-select v-model="form.genre" placeholder="请选择"><el-option v-for="genre in ['都市情感','甜宠爱情','重生逆袭','悬疑复仇','古装言情']" :key="genre" :label="genre" :value="genre" /></el-select></el-form-item></div><el-form-item label="简介"><el-input v-model="form.description" type="textarea" :rows="3" maxlength="200" show-word-limit /></el-form-item><div class="form-row"><el-form-item label="预计集数"><el-input-number v-model="form.episodes" :min="1" :max="200" /></el-form-item><el-form-item v-if="can('上传封面素材')" label="短剧封面"><el-upload action="#" :auto-upload="false" :show-file-list="false" accept="image/*" :on-change="uploadCover"><el-button size="small">{{form.cover?'更换封面':'选择封面'}}</el-button></el-upload></el-form-item></div><img v-if="form.cover" :src="form.cover" class="form-cover-preview" /></el-form><template #footer><el-button @click="dialogVisible=false">取消</el-button><el-button type="primary" @click="saveDrama">{{editingId?'保存修改':'保存草稿'}}</el-button></template></el-dialog>
|
||||
<el-dialog v-model="dialogVisible" :title="editingId ? '编辑短剧' : '新建短剧'" width="600px"
|
||||
><el-form label-position="top"
|
||||
><div class="form-row"
|
||||
><el-form-item label="短剧名称" required
|
||||
><el-input v-model="form.title" placeholder="请输入短剧名称" /></el-form-item
|
||||
><el-form-item label="类型" required
|
||||
><el-select v-model="form.genre" placeholder="请选择"
|
||||
><el-option
|
||||
v-for="genre in ['都市情感', '甜宠爱情', '重生逆袭', '悬疑复仇', '古装言情']"
|
||||
:key="genre"
|
||||
:label="genre"
|
||||
:value="genre" /></el-select></el-form-item></div
|
||||
><el-form-item label="简介"
|
||||
><el-input
|
||||
v-model="form.description"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
maxlength="200"
|
||||
show-word-limit /></el-form-item
|
||||
><div class="form-row"
|
||||
><el-form-item label="预计集数"
|
||||
><el-input-number v-model="form.episodes" :min="1" :max="200" /></el-form-item
|
||||
><el-form-item v-if="can('上传封面素材')" label="短剧封面"
|
||||
><el-upload
|
||||
action="#"
|
||||
:auto-upload="false"
|
||||
:show-file-list="false"
|
||||
accept="image/*"
|
||||
:on-change="uploadCover"
|
||||
><el-button size="small">{{
|
||||
form.cover ? '更换封面' : '选择封面'
|
||||
}}</el-button></el-upload
|
||||
></el-form-item
|
||||
></div
|
||||
><img v-if="form.cover" :src="form.cover" class="form-cover-preview" /></el-form
|
||||
><template #footer
|
||||
><el-button @click="dialogVisible = false">取消</el-button
|
||||
><el-button type="primary" @click="saveDrama">{{
|
||||
editingId ? '保存修改' : '保存草稿'
|
||||
}}</el-button></template
|
||||
></el-dialog
|
||||
>
|
||||
</template>
|
||||
Reference in new issue
Block a user