txai-dev/yu-zhi-ran
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): 移动端卡片布局优化

Browse Source 
- 新增移动端卡片列表 (≤768px)
- 表格在小屏幕自动隐藏
- 操作按钮在移动端垂直排列
- 减少表格字体/内边距以节省空间
This commit is contained in:
lt
2026-04-27 19:14:33 +08:00
parent d63074be71
commit 33133430f8
1 changed files with 85 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
platform/frontend/topics.html
+85 -2
View File
@@ -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; }
}
</style>
</head>
<body>
@@ -74,7 +121,8 @@
<el-tag size="large" :type="filterStatus === '已发布' ? 'primary' : ''" @click="filterStatus = '已发布'">已发布 ({{ countByStatus('已发布') }})</el-tag>
</div>
<div class="card" style="width: 100%; overflow-x: auto; padding: 16px;">
<el-table :data="filteredTopics" stripe v-loading="loadingTable" @selection-change="selectedTopicIds = $event">
<el-table :data="filteredTopics" stripe v-loading="loadingTable" @selection-change="selectedTopicIds = $event" :cell-class-name="getMobileCellClass">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="id" label="ID" width="70" fixed></el-table-column>
<el-table-column prop="title" label="标题" min-width="200"></el-table-column>
@@ -100,6 +148,33 @@
</template>
</el-table-column>
</el-table>
<!-- 移动端卡片列表 -->
<div class="topic-card-list">
<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>
<el-tag :type="getStatusType(topic.status)" size="small">{{ topic.status }}</el-tag>
</div>
<div class="topic-card-tags">
<el-tag size="small" type="info">{{ topic.field }}</el-tag>
<el-tag size="small" type="warning">合规{{ topic.compliance_score }}</el-tag>
</div>
<div class="topic-card-meta">
<div>创建: {{ formatDate(topic.created_at) }}</div>
<div>创作: {{ topic.generated_at ? formatDate(topic.generated_at) : '-' }}</div>
<div>发布: {{ topic.published_at ? formatDate(topic.published_at) : '-' }}</div>
<div>今日: {{ topic.is_today ? '是' : '否' }}</div>
</div>
<div class="topic-card-actions">
<el-button size="small" @click="openPreview(topic)" type="primary">预览</el-button>
<el-button size="small" type="success" :disabled="topic.status !== '待处理'" @click="createTopic(topic)">创作</el-button>
<el-button size="small" type="warning" :disabled="topic.status !== '待审查'" @click="optimizeTopic(topic)">审查</el-button>
<el-button v-if="topic.status === '待发布'" size="small" type="primary" @click="handlePublish(topic)">发布</el-button>
<el-button size="small" type="danger" @click="deleteTopic(topic.id)">删除</el-button>
</div>
</div>
</div>
</div>
</div>
</main>
@@ -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);