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
2026-01-06 15:28:12 +08:00
parent 31d6192816
commit 1723802722
4 changed files with 122 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,6 +10,7 @@
<!-- Filters -->
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-4 mb-6 flex flex-wrap gap-4 items-center">
<!-- ... existing filters ... -->
<div class="flex items-center gap-2">
<span class="text-sm font-bold text-slate-500">状态:</span>
<select v-model="filterStatus"
@@ -42,6 +43,19 @@
<option v-for="k in keys" :key="k" :value="k">{{ k }}</option>
</select>
</div>
<div class="flex items-center gap-2">
<span class="text-sm font-bold text-slate-500">排序:</span>
<select v-model="filterSort"
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 v-for="opt in sortOptions" :key="opt.key" :value="opt.key">{{ opt.value }}</option>
</select>
</div>
<button @click="handleResetFilters" class="h-9 px-3 text-slate-500 hover:text-slate-700 hover:bg-slate-100 rounded transition-colors text-sm font-bold flex items-center gap-1">
<i class="pi pi-refresh"></i> 重置
</button>
<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"
@@ -50,10 +64,35 @@
</div>
</div>
<!-- Loading State -->
<div v-if="loading" class="space-y-4">
<div v-for="i in 3" :key="i" class="bg-white rounded-xl shadow-sm border border-slate-100 p-5 flex gap-6 animate-pulse">
<div class="w-40 h-[90px] bg-slate-200 rounded-lg"></div>
<div class="flex-1 space-y-3">
<div class="h-6 bg-slate-200 rounded w-1/3"></div>
<div class="h-4 bg-slate-200 rounded w-1/4"></div>
<div class="h-8 bg-slate-200 rounded w-full mt-4"></div>
</div>
</div>
</div>
<!-- Empty State -->
<div v-else-if="!loading && contents.length === 0" class="flex flex-col items-center justify-center py-20 bg-white rounded-xl border border-slate-100 border-dashed">
<div class="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mb-4">
<i class="pi pi-folder-open text-3xl text-slate-300"></i>
</div>
<h3 class="text-slate-900 font-bold mb-1">暂无内容</h3>
<p class="text-slate-500 text-sm mb-6">您还没有发布任何内容，快去创作吧！</p>
<router-link to="/creator/contents/new" class="px-5 py-2 bg-primary-600 text-white rounded-lg text-sm font-bold hover:bg-primary-700 transition-colors">
立即发布
</router-link>
</div>
<!-- Content List -->
<div class="space-y-4">
<div v-else 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">
<!-- ... existing list item ... -->
<!-- Cover -->
<div class="w-40 h-[90px] bg-slate-100 rounded-lg flex-shrink-0 overflow-hidden relative">
@@ -176,6 +215,7 @@ import { useRouter } from 'vue-router';
import { useToast } from 'primevue/usetoast';
import { useConfirm } from 'primevue/useconfirm';
import ConfirmDialog from 'primevue/confirmdialog';
import Paginator from 'primevue/paginator';
import { commonApi } from '../../api/common';
import { creatorApi } from '../../api/creator';
@@ -183,10 +223,12 @@ const router = useRouter();
const toast = useToast();
const confirm = useConfirm();
const contents = ref([]);
const loading = ref(false);
const filterStatus = ref('all');
const filterVisibility = ref('all');
const filterGenre = ref('all');
const filterKey = ref('all');
const filterSort = ref('latest');
const searchKeyword = ref('');
const statusOptions = ref([]);
const visibilityOptions = [
@@ -194,7 +236,16 @@ const visibilityOptions = [
{ key: 'tenant_only', value: '仅会员' },
{ key: 'private', value: '私有' }
];
const sortOptions = [
{ key: 'latest', value: '最新发布' },
{ key: 'oldest', value: '最早发布' },
{ key: 'views', value: '最多浏览' },
{ key: 'likes', value: '最多点赞' }
];
const genreOptions = ref([]);
const totalRecords = ref(0);
const rows = ref(10);
const first = ref(0);
const keys = ['C大调', 'D大调', 'E大调', 'F大调', 'G大调', 'A大调', 'B大调', '降E大调'];
const fetchOptions = async () => {
@@ -210,30 +261,59 @@ const fetchOptions = async () => {
};
const fetchContents = async () => {
loading.value = true;
try {
const params = {};
const params = {
page: (first.value / rows.value) + 1,
limit: rows.value
};
if (filterStatus.value !== 'all') params.status = filterStatus.value;
if (filterVisibility.value !== 'all') params.visibility = filterVisibility.value;
if (filterGenre.value !== 'all') params.genre = filterGenre.value;
if (filterKey.value !== 'all') params.key = filterKey.value;
if (filterSort.value !== 'latest') params.sort = filterSort.value;
if (searchKeyword.value) params.keyword = searchKeyword.value;
const res = await creatorApi.listContents(params);
contents.value = res || [];
if (res && res.items) {
contents.value = res.items;
totalRecords.value = res.total;
} else {
contents.value = [];
totalRecords.value = 0;
}
} catch (e) {
console.error(e);
} finally {
loading.value = false;
}
};
const onPage = (event) => {
first.value = event.first;
rows.value = event.rows;
fetchContents();
};
onMounted(() => {
fetchOptions();
fetchContents();
});
watch([filterStatus, filterVisibility, filterGenre, filterKey], () => {
watch([filterStatus, filterVisibility, filterGenre, filterKey, filterSort], () => {
fetchContents();
});
const handleResetFilters = () => {
filterStatus.value = 'all';
filterVisibility.value = 'all';
filterGenre.value = 'all';
filterKey.value = 'all';
filterSort.value = 'latest';
searchKeyword.value = '';
fetchContents();
};
const handleSearch = () => {
fetchContents();
};