fix(ui): 修复移动端数据加载显示

- 为 topic-card-list 添加 v-if 条件渲染
- 添加空状态提示
- 增强调试信息(console.log)
- 确保移动端卡片列表正确显示
This commit is contained in:
lt
2026-04-27 21:20:28 +08:00
parent 6cb273a8a9
commit 03287697c3
+10 -2
View File
@@ -143,7 +143,7 @@
</el-table-column>
</el-table>
<!-- 移动端卡片列表 -->
<div class="topic-card-list">
<div class="topic-card-list" v-if="filteredTopics && filteredTopics.length > 0">
<div v-for="topic in filteredTopics" :key="topic.id" class="topic-card">
<div class="topic-card-header">
<div class="topic-card-title">{{ topic.title }}</div>
@@ -185,12 +185,20 @@
const TopicsApp = {
data() { return { isLoggedIn: false, isAdmin: false, currentUser: { username: '' }, topics: [], filterStatus: '', selectedTopicIds: [], loadingTable: false } },
computed: {
filteredTopics() { if (!this.topics.length) return []; if (!this.filterStatus) return this.topics; return this.topics.filter(t => t.status === this.filterStatus); },
filteredTopics() {
console.log('[DEBUG] filteredTopics called, filterStatus:', this.filterStatus, 'topics count:', this.topics.length);
if (!this.topics.length) { console.log('[DEBUG] topics is empty'); return []; }
if (!this.filterStatus) { console.log('[DEBUG] no filter, return all'); return this.topics; }
const result = this.topics.filter(t => t.status === this.filterStatus);
console.log('[DEBUG] filtered result count:', result.length);
return result;
},
countByStatus() { return (status) => this.topics.filter(t => t.status === status).length; }
},
methods: {
async fetchTopics() {
this.loadingTable = true;
console.log('[DEBUG] fetchTopics called');
try {
const token = localStorage.getItem('authToken');
const response = await fetch('/api/topics', { headers: { 'Authorization': 'Bearer ' + token } });