feat(ui): 移动端卡片布局优化
- 新增移动端卡片列表 (≤768px) - 表格在小屏幕自动隐藏 - 操作按钮在移动端垂直排列 - 减少表格字体/内边距以节省空间
This commit is contained in:
lt
@@ -35,6 +35,53 @@
|
|||||||
.mobile-nav { display: flex; }
|
.mobile-nav { display: flex; }
|
||||||
.content-area { padding: 16px; padding-bottom: 80px; }
|
.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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -74,7 +121,8 @@
|
|||||||
<el-tag size="large" :type="filterStatus === '已发布' ? 'primary' : ''" @click="filterStatus = '已发布'">已发布 ({{ countByStatus('已发布') }})</el-tag>
|
<el-tag size="large" :type="filterStatus === '已发布' ? 'primary' : ''" @click="filterStatus = '已发布'">已发布 ({{ countByStatus('已发布') }})</el-tag>
|
||||||
</div>
|
</div>
|
||||||
<div class="card" style="width: 100%; overflow-x: auto; padding: 16px;">
|
<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 type="selection" width="55"></el-table-column>
|
||||||
<el-table-column prop="id" label="ID" width="70" fixed></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>
|
<el-table-column prop="title" label="标题" min-width="200"></el-table-column>
|
||||||
@@ -100,6 +148,33 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
@@ -180,7 +255,15 @@
|
|||||||
.then(response => response.ok ? response.json() : Promise.reject())
|
.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(); })
|
.then(data => { this.currentUser = data.user; this.isAdmin = data.user.role === 'admin'; this.isLoggedIn = true; this.fetchTopics(); })
|
||||||
.catch(() => { localStorage.removeItem('authToken'); window.location.href = '/'; });
|
.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);
|
const app = Vue.createApp(TopicsApp);
|
||||||
app.use(ElementPlus);
|
app.use(ElementPlus);
|
||||||
|
|||||||
Reference in New Issue
Block a user