278 lines
9.2 KiB
Vue
278 lines
9.2 KiB
Vue
<template>
|
|
<div class="series-manage">
|
|
<el-card shadow="never">
|
|
<template #header>
|
|
<div class="header">
|
|
<span>系列管理</span>
|
|
<div>
|
|
<el-input v-model="keyword" placeholder="搜索系列标题" clearable
|
|
style="width: 200px; margin-right: 8px" @keyup.enter="load" />
|
|
<el-button :loading="syncAllLoading" @click="syncAll">同步新剧</el-button>
|
|
<el-button type="primary" @click="showCreate">+ 新建系列</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<el-table :data="list" v-loading="loading" stripe>
|
|
<el-table-column prop="id" label="ID" width="70" />
|
|
<el-table-column prop="title" label="系列标题" min-width="160">
|
|
<template #default="{ row }">
|
|
<div class="title-col">
|
|
<img v-if="row.cover_url" :src="row.cover_url" class="cover" />
|
|
<span>{{ row.title }}</span>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="total_episodes" label="集数" width="90" />
|
|
<el-table-column label="来源" width="80">
|
|
<template #default="{ row }">
|
|
<el-tag v-if="row.source_id" size="small" type="warning">采集</el-tag>
|
|
<span v-else>-</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="状态" width="80">
|
|
<template #default="{ row }">
|
|
<el-tag :type="row.status === 1 ? 'success' : 'info'" size="small">
|
|
{{ row.status === 1 ? '正常' : '隐藏' }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="created_at" label="创建时间" width="170" />
|
|
<el-table-column label="操作" width="230" fixed="right">
|
|
<template #default="{ row }">
|
|
<el-button link type="primary" @click="showEdit(row)">编辑</el-button>
|
|
<el-button v-if="row.source_id" link type="warning"
|
|
:loading="syncingId === row.id" @click="syncOne(row)">更新</el-button>
|
|
<el-button link type="primary" @click="toggleStatus(row)">
|
|
{{ row.status === 1 ? '隐藏' : '恢复' }}
|
|
</el-button>
|
|
<el-button link type="danger" @click="del(row)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<el-pagination
|
|
v-model:current-page="page"
|
|
:page-size="pageSize"
|
|
:total="total"
|
|
layout="total, prev, pager, next"
|
|
style="margin-top: 12px; text-align: right"
|
|
@current-change="load"
|
|
/>
|
|
</el-card>
|
|
|
|
<!-- 新建/编辑弹窗 -->
|
|
<el-dialog v-model="dialogVisible" :title="editing ? '编辑系列' : '新建系列'" width="480px">
|
|
<el-form :model="form" label-width="90px">
|
|
<el-form-item label="标题">
|
|
<el-input v-model="form.title" maxlength="100" show-word-limit />
|
|
</el-form-item>
|
|
<el-form-item label="封面图">
|
|
<div class="cover-upload">
|
|
<el-upload
|
|
:show-file-list="false"
|
|
:auto-upload="false"
|
|
accept="image/jpeg,image/png,image/webp,image/gif"
|
|
:on-change="(f) => uploadCover(f)"
|
|
>
|
|
<div v-if="form.cover_url" class="cover-preview">
|
|
<img :src="form.cover_url" />
|
|
<span v-if="coverUploading" class="mask">上传中…</span>
|
|
</div>
|
|
<el-button v-else plain :loading="coverUploading">选择图片</el-button>
|
|
</el-upload>
|
|
<el-button
|
|
v-if="form.cover_url"
|
|
link type="danger"
|
|
style="margin-left: 12px"
|
|
@click="form.cover_url = ''"
|
|
>移除</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="封面 URL">
|
|
<el-input v-model="form.cover_url" placeholder="可直接粘贴或通过上方选择上传" />
|
|
</el-form-item>
|
|
<el-form-item label="分类">
|
|
<el-select v-model="form.category_id" placeholder="请选择" style="width: 100%">
|
|
<el-option v-for="c in categories" :key="c.id" :label="c.name" :value="c.id" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="简介">
|
|
<el-input v-model="form.description" type="textarea" :rows="3" maxlength="500" show-word-limit />
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
<el-button type="primary" :loading="submitting" @click="save">保存</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref, onMounted } from 'vue'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import request from '@/api/request'
|
|
|
|
const list = ref([])
|
|
const total = ref(0)
|
|
const page = ref(1)
|
|
const pageSize = 20
|
|
const loading = ref(false)
|
|
const keyword = ref('')
|
|
const categories = ref([])
|
|
const dialogVisible = ref(false)
|
|
const editing = ref(null)
|
|
const submitting = ref(false)
|
|
const coverUploading = ref(false)
|
|
const syncAllLoading = ref(false)
|
|
const syncingId = ref(0)
|
|
|
|
const form = reactive({
|
|
title: '', cover_url: '', description: '', category_id: 0,
|
|
})
|
|
|
|
async function uploadCover(file) {
|
|
if (!file || !file.raw) return
|
|
const allowed = ['image/jpeg', 'image/png', 'image/webp', 'image/gif']
|
|
if (!allowed.includes(file.raw.type)) {
|
|
return ElMessage.error('仅支持 jpg/png/webp/gif')
|
|
}
|
|
if (file.raw.size > 5 * 1024 * 1024) {
|
|
return ElMessage.error('图片不能超过 5MB')
|
|
}
|
|
coverUploading.value = true
|
|
try {
|
|
const fd = new FormData()
|
|
fd.append('file', file.raw)
|
|
const r = await request({
|
|
url: '/admin/upload/image', method: 'post', data: fd,
|
|
headers: { 'Content-Type': 'multipart/form-data' },
|
|
})
|
|
form.cover_url = r.url
|
|
ElMessage.success('封面上传成功')
|
|
} catch (e) {
|
|
ElMessage.error(e?.message || '上传失败')
|
|
} finally {
|
|
coverUploading.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
load()
|
|
try {
|
|
const r = await request({ url: '/admin/categories', method: 'get' })
|
|
categories.value = r || []
|
|
} catch (e) {}
|
|
})
|
|
|
|
async function load() {
|
|
loading.value = true
|
|
try {
|
|
const r = await request({
|
|
url: '/admin/series', method: 'get',
|
|
params: { keyword: keyword.value, page: page.value, page_size: pageSize },
|
|
})
|
|
list.value = r.list
|
|
total.value = r.total
|
|
} catch (e) {} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function showCreate() {
|
|
editing.value = null
|
|
Object.assign(form, { title: '', cover_url: '', description: '', category_id: 0 })
|
|
dialogVisible.value = true
|
|
}
|
|
|
|
function showEdit(row) {
|
|
editing.value = row
|
|
Object.assign(form, {
|
|
title: row.title, cover_url: row.cover_url,
|
|
description: row.description, category_id: row.category_id ?? 0,
|
|
})
|
|
dialogVisible.value = true
|
|
}
|
|
|
|
async function save() {
|
|
if (!form.title) { ElMessage.warning('请填标题'); return }
|
|
submitting.value = true
|
|
try {
|
|
if (editing.value) {
|
|
await request({
|
|
url: `/admin/series/${editing.value.id}`, method: 'put', data: form,
|
|
})
|
|
ElMessage.success('已更新')
|
|
} else {
|
|
await request({ url: '/admin/series', method: 'post', data: form })
|
|
ElMessage.success('已创建')
|
|
}
|
|
dialogVisible.value = false
|
|
load()
|
|
} catch (e) {} finally {
|
|
submitting.value = false
|
|
}
|
|
}
|
|
|
|
async function toggleStatus(row) {
|
|
const next = row.status === 1 ? 0 : 1
|
|
try {
|
|
await request({
|
|
url: `/admin/series/${row.id}`, method: 'put',
|
|
data: { status: next },
|
|
})
|
|
ElMessage.success('已更新')
|
|
load()
|
|
} catch (e) {}
|
|
}
|
|
|
|
async function del(row) {
|
|
await ElMessageBox.confirm(`确认删除「${row.title}」？`, '警告', { type: 'warning' })
|
|
try {
|
|
await request({ url: `/admin/series/${row.id}`, method: 'delete' })
|
|
ElMessage.success('已删除')
|
|
load()
|
|
} catch (e) {}
|
|
}
|
|
|
|
async function syncOne(row) {
|
|
syncingId.value = row.id
|
|
try {
|
|
const r = await request({ url: `/admin/collection/sync/${row.id}`, method: 'post' })
|
|
ElMessage.success(`同步完成：新增 ${r.episodes_created} 集，已存在 ${r.episodes_skipped} 集`)
|
|
load()
|
|
} catch (e) {} finally {
|
|
syncingId.value = 0
|
|
}
|
|
}
|
|
|
|
async function syncAll() {
|
|
syncAllLoading.value = true
|
|
try {
|
|
await request({ url: '/admin/collection/sync-all', method: 'post', data: { pages: 2 } })
|
|
ElMessage.success('已触发后台同步，稍后刷新查看')
|
|
setTimeout(load, 15000)
|
|
} catch (e) {} finally {
|
|
syncAllLoading.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.header { display: flex; justify-content: space-between; align-items: center; }
|
|
.title-col { display: flex; align-items: center; gap: 8px; }
|
|
.cover { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; }
|
|
.cover-upload { display: flex; align-items: center; }
|
|
.cover-preview {
|
|
width: 120px; height: 70px; border-radius: 6px; overflow: hidden;
|
|
border: 1px dashed #dcdfe6; cursor: pointer; position: relative;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.cover-preview img { width: 100%; height: 100%; object-fit: cover; }
|
|
.cover-preview .mask {
|
|
position: absolute; inset: 0; background: rgba(0,0,0,.6);
|
|
color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center;
|
|
}
|
|
</style>
|