diff --git a/platform/frontend/topics.html b/platform/frontend/topics.html index ede76f9..00c7cc1 100644 --- a/platform/frontend/topics.html +++ b/platform/frontend/topics.html @@ -35,6 +35,53 @@ .mobile-nav { display: flex; } .content-area { padding: 16px; padding-bottom: 80px; } } + + /* 移动端表格优化 */ + @media (max-width: 768px) { + .el-table { font-size: 12px; } + .el-table .el-button { padding: 4px 8px; font-size: 11px; min-height: auto; } + .el-table .cell { padding: 0 4px; } + .el-table .el-table__cell { padding: 6px 0; } + } + + /* 移动端卡片列表 */ + .topic-card-list { display: none; } + @media (max-width: 768px) { + .table-container { display: none; } + .topic-card-list { display: block; margin: 0 -16px; } + .topic-card { + background: white; + border-radius: 8px; + padding: 16px; + margin-bottom: 12px; + box-shadow: 0 2px 8px rgba(0,0,0,0.08); + } + .topic-card-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 12px; + } + .topic-card-title { font-size: 16px; font-weight: 600; color: #303133; flex: 1; margin-right: 8px; } + .topic-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } + .topic-card-meta { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; + font-size: 12px; + color: #606266; + margin-bottom: 12px; + } + .topic-card-actions { + display: flex; + gap: 8px; + flex-wrap: wrap; + margin-top: 12px; + padding-top: 12px; + border-top: 1px solid #ebeef5; + } + .topic-card-actions .el-button { flex: 1; min-width: 60px; } + } @@ -74,7 +121,8 @@ 已发布 ({{ countByStatus('已发布') }})
- + + @@ -100,6 +148,33 @@ + +
+
+
+
{{ topic.title }}
+ {{ topic.status }} +
+
+ {{ topic.field }} + 合规{{ topic.compliance_score }} +
+
+
创建: {{ formatDate(topic.created_at) }}
+
创作: {{ topic.generated_at ? formatDate(topic.generated_at) : '-' }}
+
发布: {{ topic.published_at ? formatDate(topic.published_at) : '-' }}
+
今日: {{ topic.is_today ? '是' : '否' }}
+
+
+ 预览 + 创作 + 审查 + 发布 + 删除 +
+
+
+
@@ -180,7 +255,15 @@ .then(response => response.ok ? response.json() : Promise.reject()) .then(data => { this.currentUser = data.user; this.isAdmin = data.user.role === 'admin'; this.isLoggedIn = true; this.fetchTopics(); }) .catch(() => { localStorage.removeItem('authToken'); window.location.href = '/'; }); - } +, + getStatusType(status) { + const map = { '待处理': 'warning', '待审查': 'danger', '待发布': 'success', '已发布': 'info' }; + return map[status] || 'primary'; + }, + getMobileCellClass({ row, column }) { + // 移动端隐藏部分列的逻辑在 CSS 中处理 + return ''; + } } }; const app = Vue.createApp(TopicsApp); app.use(ElementPlus);