188 lines
8.6 KiB
Vue
188 lines
8.6 KiB
Vue
<template>
|
|
<div>
|
|
<div class="flex items-center justify-between mb-8">
|
|
<h1 class="text-2xl font-bold text-slate-900">内容管理</h1>
|
|
<router-link to="/creator/contents/new"
|
|
class="px-6 py-2.5 bg-primary-600 text-white rounded-lg font-bold hover:bg-primary-700 transition-colors shadow-sm shadow-primary-200 cursor-pointer active:scale-95 flex items-center gap-2">
|
|
<i class="pi pi-plus"></i> 发布新内容
|
|
</router-link>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-4 mb-6 flex flex-wrap gap-4 items-center">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-sm font-bold text-slate-500">状态:</span>
|
|
<select v-model="filterStatus"
|
|
class="h-9 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none bg-white cursor-pointer min-w-[100px]">
|
|
<option value="all">全部</option>
|
|
<option v-for="opt in statusOptions" :key="opt.key" :value="opt.key">{{ opt.value }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-sm font-bold text-slate-500">曲种:</span>
|
|
<select v-model="filterGenre"
|
|
class="h-9 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none bg-white cursor-pointer min-w-[100px]">
|
|
<option value="all">全部</option>
|
|
<option v-for="opt in genreOptions" :key="opt.key" :value="opt.key">{{ opt.value }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="ml-auto relative">
|
|
<i class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
|
|
<input type="text" placeholder="搜索标题..." v-model="searchKeyword" @keyup.enter="handleSearch"
|
|
@blur="handleSearch"
|
|
class="h-9 pl-9 pr-4 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none w-48 transition-all focus:w-64">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content List -->
|
|
<div class="space-y-4">
|
|
<div v-for="item in contents" :key="item.id"
|
|
class="bg-white rounded-xl shadow-sm border border-slate-100 p-5 flex gap-6 hover:shadow-md transition-shadow group relative">
|
|
|
|
<!-- Cover -->
|
|
<div class="w-40 h-[90px] bg-slate-100 rounded-lg flex-shrink-0 overflow-hidden relative">
|
|
<img :src="item.cover || 'https://via.placeholder.com/300x168?text=No+Cover'"
|
|
class="w-full h-full object-cover">
|
|
<div
|
|
class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<router-link :to="`/creator/contents/${item.id}`"
|
|
class="text-white text-xs font-bold border border-white px-3 py-1 rounded hover:bg-white hover:text-black transition-colors">编辑</router-link>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info -->
|
|
<div class="flex-1 min-w-0 flex flex-col justify-between">
|
|
<div>
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs px-1.5 py-0.5 border rounded text-slate-500" v-if="item.genre">{{
|
|
item.genre }}</span>
|
|
<span class="text-xs px-1.5 py-0.5 border rounded text-slate-500" v-if="item.key">{{ item.key
|
|
}}</span>
|
|
<h3 class="font-bold text-slate-900 text-lg truncate hover:text-primary-600 cursor-pointer transition-colors"
|
|
@click="$router.push(`/creator/contents/${item.id}`)">
|
|
{{ item.title }}</h3>
|
|
</div>
|
|
<!-- Status Badge -->
|
|
<div class="flex items-center gap-2">
|
|
<span v-if="item.status === 'blocked'"
|
|
class="text-red-500 text-xs flex items-center gap-1 cursor-help" title="已被封禁">
|
|
<i class="pi pi-info-circle"></i> 封禁
|
|
</span>
|
|
<span class="px-2.5 py-1 rounded text-xs font-bold"
|
|
:class="statusStyle(item.status).bg + ' ' + statusStyle(item.status).text">
|
|
{{ statusStyle(item.status).label }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-6 text-sm text-slate-500">
|
|
<span v-if="item.price > 0" class="text-red-600 font-bold">¥ {{ item.price }}</span>
|
|
<span v-else class="text-green-600 font-bold">免费</span>
|
|
<span><i class="pi pi-eye mr-1"></i> {{ item.views }}</span>
|
|
<span><i class="pi pi-thumbs-up mr-1"></i> {{ item.likes }}</span>
|
|
<!-- Date field missing in DTO, using hardcoded or omitting -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex items-center gap-4 pt-3 border-t border-slate-50 mt-2">
|
|
<button class="text-sm text-slate-500 hover:text-primary-600 font-medium cursor-pointer"
|
|
@click="$router.push(`/creator/contents/${item.id}`)"><i class="pi pi-file-edit mr-1"></i>
|
|
编辑</button>
|
|
<button v-if="item.status === 'published'"
|
|
class="text-sm text-slate-500 hover:text-orange-600 font-medium cursor-pointer"><i
|
|
class="pi pi-arrow-down mr-1"></i> 下架</button>
|
|
<button v-if="item.status === 'unpublished'"
|
|
class="text-sm text-slate-500 hover:text-green-600 font-medium cursor-pointer"><i
|
|
class="pi pi-arrow-up mr-1"></i> 上架</button>
|
|
<button class="text-sm text-slate-500 hover:text-red-600 font-medium ml-auto cursor-pointer"
|
|
@click="handleDelete(item.id)"><i class="pi pi-trash mr-1"></i> 删除</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, ref, watch } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { commonApi } from '../../api/common';
|
|
import { creatorApi } from '../../api/creator';
|
|
|
|
const router = useRouter();
|
|
const contents = ref([]);
|
|
const filterStatus = ref('all');
|
|
const filterGenre = ref('all');
|
|
const searchKeyword = ref('');
|
|
const statusOptions = ref([]);
|
|
const genreOptions = ref([]);
|
|
|
|
const fetchOptions = async () => {
|
|
try {
|
|
const res = await commonApi.getOptions();
|
|
if (res) {
|
|
statusOptions.value = res.content_status || [];
|
|
genreOptions.value = res.content_genre || [];
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
};
|
|
|
|
const fetchContents = async () => {
|
|
try {
|
|
const params = {};
|
|
if (filterStatus.value !== 'all') params.status = filterStatus.value;
|
|
if (filterGenre.value !== 'all') params.genre = filterGenre.value;
|
|
if (searchKeyword.value) params.keyword = searchKeyword.value;
|
|
|
|
const res = await creatorApi.listContents(params);
|
|
contents.value = res || [];
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
fetchOptions();
|
|
fetchContents();
|
|
});
|
|
|
|
watch([filterStatus, filterGenre], () => {
|
|
fetchContents();
|
|
});
|
|
|
|
const handleSearch = () => {
|
|
fetchContents();
|
|
};
|
|
|
|
const statusStyle = (status) => {
|
|
// Map backend status to UI style. Labels should ideally come from backend option value/label map if needed,
|
|
// but for style/color mapping we can keep it here or use a helper.
|
|
// Using labels from options if available would be best for text.
|
|
|
|
const option = statusOptions.value.find(o => o.key === status);
|
|
const label = option ? option.value : status;
|
|
|
|
switch (status) {
|
|
case 'published': return { bg: 'bg-green-50', text: 'text-green-600', label };
|
|
case 'reviewing': return { bg: 'bg-orange-50', text: 'text-orange-600', label };
|
|
case 'blocked': return { bg: 'bg-red-50', text: 'text-red-600', label };
|
|
case 'draft': return { bg: 'bg-slate-100', text: 'text-slate-500', label };
|
|
case 'unpublished': return { bg: 'bg-slate-100', text: 'text-slate-500', label };
|
|
default: return { bg: 'bg-slate-100', text: 'text-slate-500', label };
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (id) => {
|
|
if (!confirm('确定要删除吗？')) return;
|
|
try {
|
|
await creatorApi.deleteContent(id);
|
|
fetchContents();
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
};
|
|
</script> |