rogee/quyun-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加获取全局选项接口，支持动态状态和曲种选择

Browse Source
This commit is contained in:
Rogee
2025-12-31 12:31:52 +08:00
parent 111d0978a3
commit 20e1a2fa19
6 changed files with 127 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/portal/src/api/common.js
View File

@@ -1,6 +1,7 @@
import { request } from '../utils/request';
export const commonApi = {
getOptions: () => request('/common/options'),
upload: (file, type) => {
const formData = new FormData();
formData.append('file', file);

167
frontend/portal/src/views/creator/ContentsView.vue
View File

@@ -13,42 +13,37 @@
<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">
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 value="published">已发布</option>
<option value="audit">审核中</option>
<option value="rejected">已驳回</option>
<option value="draft">草稿箱</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">
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 value="京剧">京剧</option>
<option value="昆曲">昆曲</option>
<option value="越剧">越剧</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="搜索标题..."
<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 filteredList" :key="item.id"
<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" class="w-full h-full object-cover">
<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/new`"
<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>
@@ -58,16 +53,17 @@
<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">[{{ item.genre }}]</span>
<span class="text-xs px-1.5 py-0.5 border rounded text-slate-500" v-if="item.genre">[{{ item.genre }}]</span>
<h3
class="font-bold text-slate-900 text-lg truncate hover:text-primary-600 cursor-pointer transition-colors">
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 === 'rejected'"
class="text-red-500 text-xs flex items-center gap-1 cursor-help" title="点击查看原因">
<i class="pi pi-info-circle"></i> {{ item.rejectReason }}
<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">
@@ -81,21 +77,21 @@
<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>
<span>{{ item.date }}</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"><i
<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 === 'offline'"
<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"><i
<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>
@@ -105,74 +101,83 @@
</template>
<script setup>
import { computed, ref } from 'vue';
import { computed, ref, onMounted, watch } from 'vue';
import { creatorApi } from '../../api/creator';
import { commonApi } from '../../api/common';
import { useRouter } from 'vue-router';
const router = useRouter();
const contents = ref([]);
const filterStatus = ref('all');
const filterGenre = ref('all');
const searchKeyword = ref('');
const statusOptions = ref([]);
const genreOptions = ref([]);
const list = ref([
{
id: 1,
title: '《锁麟囊》春秋亭 (程砚秋)',
genre: '京剧',
cover: 'https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
status: 'published',
price: 9.9,
views: '12.5k',
likes: 850,
date: '2025-12-24'
},
{
id: 2,
title: '昆曲《牡丹亭》游园惊梦',
genre: '昆曲',
cover: 'https://images.unsplash.com/photo-1557683316-973673baf926?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
status: 'audit',
price: 0,
views: '-',
likes: '-',
date: '2025-12-25'
},
{
id: 3,
title: '越剧《红楼梦》葬花',
genre: '越剧',
cover: 'https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
status: 'rejected',
rejectReason: '封面图清晰度不足',
price: 19.9,
views: '-',
likes: '-',
date: '2025-12-23'
},
{
id: 4,
title: '未命名的草稿',
genre: '京剧',
cover: '',
status: 'draft',
price: 0,
views: '-',
likes: '-',
date: '2025-12-26'
}
]);
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 filteredList = computed(() => {
return list.value.filter(item => {
const matchStatus = filterStatus.value === 'all' || item.status === filterStatus.value;
const matchGenre = filterGenre.value === 'all' || item.genre === filterGenre.value;
return matchStatus && matchGenre;
});
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 'audit': return { bg: 'bg-orange-50', text: 'text-orange-600', label: '审核中' };
case 'rejected': return { bg: 'bg-red-50', text: 'text-red-600', label: '已驳回' };
case 'draft': return { bg: 'bg-slate-100', text: 'text-slate-500', label: '草稿' };
default: return { bg: 'bg-slate-100', text: 'text-slate-500', label: '未知' };
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>