jianghaifeng/ReelShortWeb
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(web): 收口前几轮后台改动（品牌 / 媒资上传 / 轮播图 / 类型管理 / 操作日志 / App 用户）

Browse Source 
为什么：这些改动在前几轮就已完成并在 :3005 验证过，但一直留在工作区没有入库。
下一步 3-4 的四个页面依赖其中的公共样式入口（src/styles/business/index.css）与
api/admin 的公共类型（PageResult 等），如果不先收口，新页面的提交就会夹带旧改动，
既说不清 diff 边界，也让 index.css 这类多轮共用的文件长期处于半提交状态。

本提交只做归档，不改行为：
- 品牌与接口基址改成 FruitShorts / 短剧服务（.env.*、README、vite 代理）
- 去掉前端 mock 数据目录（src/data、src/permissions、stores/auth），改为走真实接口
- 新增 api/admin 下的接口封装与 src/utils/uploader.ts（媒资分片直传）
- 新增/改造：轮播图管理、类型管理、操作日志、App 用户管理、后台布局与公共样式
This commit is contained in:
Vicky committed 2026-10-15 13:28:01 +08:00
1 parent 40546bfd01
commit 44c2c46a68
59 files changed
+4082 -982
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/views/contentManagement/DramaManagementView.vue
+313 -100
View File
@@ -1,83 +1,237 @@
<script setup>
import { computed, reactive, ref, watch } from 'vue'
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Search } from '@element-plus/icons-vue'
import { dramas } from '@/data/dramas'
import {
changeDramaStatusApi,
createDramaApi,
deleteDramaApi,
listDramaCategoryOptionsApi,
pageDramasApi,
updateDramaApi
} from '@/api/admin/drama'
import { useRbac } from '@/stores/rbac'
import { formatCount } from '@/utils/format'
import { statusClass } from '@/utils/status'
import { uploadFile } from '@/utils/uploader'
const { can } = useRbac()
const search = ref('')
const status = ref('全部状态')
const currentPage = ref(1)
const router = useRouter()
const { can, hasAny } = useRbac()
const loading = ref(false)
const list = ref([])
const total = ref(0)
const categories = ref([])
const keyword = ref('')
const statusFilter = ref(undefined)
const categoryId = ref(undefined)
const hotFilter = ref(undefined)
const pageIndex = ref(1)
const pageSize = ref(10)
const dialogVisible = ref(false)
const saving = ref(false)
const uploadingCover = ref(false)
const coverPercent = ref(0)
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 form = reactive({
title: '',
categoryId: undefined,
description: '',
freeEpisodes: 3,
unlockCoin: 0,
cover: ''
})
const statusOptions = [
{ code: 'draft', text: '草稿' },
{ code: 'reviewing', text: '审核中' },
{ code: 'approved', text: '待发布' },
{ code: 'published', text: '已上线' },
{ code: 'offline', text: '已下线' }
]
const actionMeta = {
submit: { label: '提交审核', done: '已提交审核' },
approve: { label: '审核通过', done: '已通过审核' },
reject: { label: '驳回', done: '已驳回' },
publish: { label: '上线', done: '已上线' },
offline: { label: '下线', done: '已下线' }
}
async function load() {
loading.value = true
try {
const res = await pageDramasApi({
pageIndex: pageIndex.value,
pageSize: pageSize.value,
keyword: keyword.value.trim() || undefined,
status: statusFilter.value || undefined,
categoryId: categoryId.value,
isHot: hotFilter.value
})
list.value = res.data?.list || []
total.value = res.data?.total || 0
} finally {
loading.value = false
}
}
async function loadCategories() {
const res = await listDramaCategoryOptionsApi()
categories.value = res.data || []
}
function search() {
pageIndex.value = 1
load()
}
function resetFilters() {
keyword.value = ''
statusFilter.value = undefined
categoryId.value = undefined
hotFilter.value = undefined
search()
}
function handleSizeChange() {
pageIndex.value = 1
load()
}
function openCreate() {
editingId.value = null
Object.assign(form, { title: '', genre: '', description: '', episodes: 1, cover: '' })
dialogVisible.value = true
}
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 || ''
title: '',
categoryId: undefined,
description: '',
freeEpisodes: 3,
unlockCoin: 0,
isHot: false,
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)
if (drama) Object.assign(drama, { ...form, updatedAt })
} else {
dramas.unshift({ id: Date.now(), ...form, status: '草稿', views: '—', updatedAt })
function openEdit(row) {
editingId.value = row.id
Object.assign(form, {
title: row.title,
categoryId: row.categoryId || undefined,
description: row.description || '',
freeEpisodes: row.freeEpisodes ?? 3,
unlockCoin: row.unlockCoin ?? 0,
isHot: !!row.isHot,
cover: row.cover || ''
})
dialogVisible.value = true
}
async function saveDrama() {
if (!form.title.trim()) return ElMessage.warning('请填写短剧名称')
if (!form.categoryId) return ElMessage.warning('请选择短剧类型')
const category = categories.value.find((item) => item.id === form.categoryId)
const payload = {
...form,
title: form.title.trim(),
genre: category?.name || ''
}
Object.assign(form, { title: '', genre: '', description: '', episodes: 1, cover: '' })
dialogVisible.value = false
ElMessage.success(editingId.value ? '短剧信息已更新' : '短剧草稿已保存')
editingId.value = null
}
function uploadCover(file) {
if (can('上传封面素材')) form.cover = URL.createObjectURL(file.raw)
}
async function confirmDelete(item) {
saving.value = true
try {
await ElMessageBox.confirm(`确定删除短剧「${item.title}」吗？删除后无法恢复。`, '删除确认', {
if (editingId.value) {
await updateDramaApi(editingId.value, payload)
ElMessage.success('短剧信息已更新')
} else {
await createDramaApi(payload)
ElMessage.success('短剧草稿已保存')
pageIndex.value = 1
}
dialogVisible.value = false
await load()
} finally {
saving.value = false
}
}
/** 封面走分片上传（图片只有一个分片），成功后回填地址。 */
async function uploadCover(options) {
uploadingCover.value = true
coverPercent.value = 0
try {
const asset = await uploadFile(options.file, {
bizType: 'DRAMA_COVER',
onProgress: (percent) => (coverPercent.value = percent)
})
form.cover = asset.url
ElMessage.success('封面已上传')
} finally {
uploadingCover.value = false
}
}
async function confirmDelete(row) {
try {
await ElMessageBox.confirm(`确定删除短剧「${row.title}」吗？删除后无法恢复。`, '删除确认', {
confirmButtonText: '确认删除',
cancelButtonText: '取消',
type: 'warning',
confirmButtonClass: 'el-button--danger',
distinguishCancelAndClose: true
})
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)
ElMessage.success('短剧已删除')
} catch {
// 用户取消或关闭确认框时不执行删除。
return
}
await deleteDramaApi(row.id)
ElMessage.success('短剧已删除')
if (list.value.length === 1 && pageIndex.value > 1) pageIndex.value -= 1
await load()
}
/** 审核发布动作：驳回需要填写原因，其余二次确认。 */
async function runAction(row, action) {
const meta = actionMeta[action]
let reason = ''
try {
if (action === 'reject') {
const { value } = await ElMessageBox.prompt('请填写驳回原因', `驳回「${row.title}」`, {
confirmButtonText: '确认驳回',
cancelButtonText: '取消',
inputPlaceholder: '例如：封面素材不合规'
})
reason = value
} else {
await ElMessageBox.confirm(`确定将「${row.title}」${meta.label}吗？`, '操作确认', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
}
} catch {
return
}
await changeDramaStatusApi(row.id, action, reason)
ElMessage.success(meta.done)
await load()
}
function reviewActions(row) {
const canReview = can('drama:review')
if (row.status === 'draft' || row.status === 'offline') {
return hasAny('drama:update', 'drama:review') ? ['submit'] : []
}
if (row.status === 'reviewing') return canReview ? ['approve', 'reject'] : []
if (row.status === 'approved') return canReview ? ['publish'] : []
if (row.status === 'published') return canReview ? ['offline'] : []
return []
}
onMounted(async () => {
await loadCategories()
await load()
})
</script>
<template>
@@ -85,7 +239,7 @@ async function confirmDelete(item) {
><div
><div class="eyebrow">内容管理</div><h1>短剧管理</h1
><p>管理短剧信息、封面、剧集和发布状态。</p></div
><el-button v-if="can('创建短剧')" type="primary" class="primary-button" @click="openCreate"
><el-button v-if="can('drama:create')" type="primary" class="primary-button" @click="openCreate"
><el-icon><Plus /></el-icon>新建短剧</el-button
></div
>
@@ -93,19 +247,39 @@ async function confirmDelete(item) {
<div class="library-toolbar"
><div class="drama-filters"
><el-input
v-model="search"
v-model="keyword"
placeholder="搜索短剧名称"
:prefix-icon="Search"
clearable /><el-select v-model="status"
clearable
@keyup.enter="search"
@clear="search"
/><el-select v-model="statusFilter" clearable placeholder="全部状态" @change="search"
><el-option
v-for="item in ['全部状态', '已上线', '审核中', '草稿']"
:key="item"
:label="item"
:value="item" /></el-select></div
><span class="table-result-count">共 {{ filtered.length }} 部短剧</span></div
v-for="item in statusOptions"
:key="item.code"
:label="item.text"
:value="item.code" /></el-select
><el-select v-model="categoryId" clearable placeholder="全部类型" @change="search"
><el-option
v-for="item in categories"
:key="item.id"
:label="item.name"
:value="item.id" /></el-select
><el-select v-model="hotFilter" clearable placeholder="全部热度" @change="search"
><el-option label="仅热门" :value="true" /><el-option
label="非热门"
:value="false" /></el-select
><el-button @click="resetFilters">重置</el-button></div
><span class="table-result-count">共 {{ total }} 部短剧</span></div
>
<el-table :data="paginated" row-key="id" empty-text="没有符合条件的短剧" class="drama-el-table">
<el-table-column label="短剧名称" min-width="340"
<el-table
v-loading="loading"
:data="list"
row-key="id"
empty-text="没有符合条件的短剧"
class="drama-el-table"
>
<el-table-column label="短剧名称" min-width="220"
><template #default="{ row }"
><div class="drama-cell"
><img v-if="row.cover" :src="row.cover" class="drama-cover-image" /><div
@@ -113,42 +287,69 @@ async function confirmDelete(item) {
class="drama-cover"
>暂无封面</div
><div
><b>{{ row.title }}</b
><small>{{ row.description }}</small></div
><b>{{ row.title }}</b></div
></div
></template
></el-table-column
>
<el-table-column prop="genre" label="类型" width="140" />
<el-table-column label="集数" width="110"
<el-table-column label="简介" min-width="200" show-overflow-tooltip
><template #default="{ row }"
><span v-if="row.description">{{ row.description }}</span
><span v-else class="table-empty-text">—</span></template
></el-table-column
>
<el-table-column prop="genre" label="类型" width="110" />
<el-table-column label="集数" width="90"
><template #default="{ row }">{{ row.episodes }} 集</template></el-table-column
>
<el-table-column prop="views" label="播放量" width="120" />
<el-table-column label="状态" width="120"
<el-table-column label="播放量" width="110"
><template #default="{ row }">{{ formatCount(row.views) }}</template></el-table-column
>
<el-table-column label="状态" width="110"
><template #default="{ row }"
><el-tag :class="['status-badge', statusClass(row.status)]" effect="light">{{
row.status
row.statusText
}}</el-tag></template
></el-table-column
>
<el-table-column prop="updatedAt" label="更新时间" width="150" />
<el-table-column label="操作" width="240" fixed="right"
<el-table-column label="热门" width="90"
><template #default="{ row }"
><el-tag v-if="row.isHot" type="danger" effect="light">热门</el-tag
><span v-else class="table-empty-text">—</span></template
></el-table-column
>
<el-table-column prop="updatedAt" label="更新时间" width="160" />
<el-table-column label="审核" width="140"
><template #default="{ row }"
><div class="table-actions"
><el-button
v-if="can('编辑短剧信息')"
v-for="action in reviewActions(row)"
:key="action"
:type="action === 'reject' || action === 'offline' ? 'warning' : 'success'"
size="small"
@click="runAction(row, action)"
>{{ actionMeta[action].label }}</el-button
><span v-if="!reviewActions(row).length" class="table-empty-text">—</span></div
></template
></el-table-column
>
<el-table-column label="操作" width="200" fixed="right"
><template #default="{ row }"
><div class="table-actions"
><el-button
v-if="can('drama:update')"
type="primary"
size="small"
@click="openEdit(row)"
>编辑</el-button
><el-button
v-if="can('查看剧集列表')"
v-if="can('episode:list')"
type="success"
size="small"
@click="$router.push({ name: 'episodes', query: { drama: row.id } })"
@click="router.push({ name: 'episodes', query: { drama: row.id } })"
>剧集</el-button
><el-button
v-if="can('删除短剧')"
v-if="can('drama:delete')"
type="danger"
size="small"
@click="confirmDelete(row)"
@@ -160,13 +361,15 @@ async function confirmDelete(item) {
</el-table>
<div class="pagination"
><el-pagination
v-model:current-page="currentPage"
v-model:current-page="pageIndex"
v-model:page-size="pageSize"
:page-sizes="[5, 10, 20, 50]"
:total="filtered.length"
:total="total"
:pager-count="7"
layout="total, sizes, prev, pager, next, jumper"
background
@current-change="load"
@size-change="handleSizeChange"
/></div>
</section>
<el-dialog v-model="dialogVisible" :title="editingId ? '编辑短剧' : '新建短剧'" width="600px"
@@ -175,38 +378,48 @@ async function confirmDelete(item) {
><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-select v-model="form.categoryId" placeholder="请选择"
><el-option
v-for="genre in ['都市情感', '甜宠爱情', '重生逆袭', '悬疑复仇', '古装言情']"
:key="genre"
:label="genre"
:value="genre" /></el-select></el-form-item></div
v-for="item in categories"
:key="item.id"
:label="item.name"
:value="item.id" /></el-select></el-form-item></div
><el-form-item label="简介"
><el-input
v-model="form.description"
type="textarea"
:rows="3"
:rows="2"
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
><el-form-item label="免费集数"
><el-input-number v-model="form.freeEpisodes" :min="0" :max="200" /></el-form-item
><el-form-item label="单集解锁金币"
><el-input-number v-model="form.unlockCoin" :min="0" :max="9999" /></el-form-item
></div>
<el-form-item label="是否热门"><el-switch v-model="form.isHot" /></el-form-item>
<el-form-item label="短剧封面"
><div class="cover-field"
><div class="cover-field-actions"
><el-upload
v-if="can('cover:upload')"
:show-file-list="false"
accept="image/*"
:http-request="uploadCover"
:disabled="uploadingCover"
><el-button :loading="uploadingCover">{{
form.cover ? '更换封面' : '选择封面'
}}</el-button></el-upload
><p v-if="uploadingCover" class="selected-file">上传中 {{ coverPercent }}%</p
><p v-else-if="form.cover" class="selected-file">封面已上传</p
><el-input v-model="form.cover" placeholder="也可以直接填写图片地址" /></div
><img
v-if="form.cover"
:src="form.cover"
class="form-cover-preview" /></div></el-form-item></el-form
><template #footer
><el-button @click="dialogVisible = false">取消</el-button
><el-button type="primary" @click="saveDrama">{{
><el-button type="primary" :loading="saving" @click="saveDrama">{{
editingId ? '保存修改' : '保存草稿'
}}</el-button></template
></el-dialog