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

feat(ui): 移动端适配优化 (logs, users)

Browse Source 
- logs.html: 移动端控制栏垂直布局，日志卡片优化
- users.html: 新增移动端用户卡片列表，隐藏表格
- 统一小屏幕字体和间距
This commit is contained in:
lt
2026-04-27 19:36:03 +08:00
parent 33133430f8
commit 54c84b6681
2 changed files with 45 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
platform/frontend/logs.html
+9
View File
@@ -29,6 +29,15 @@
.mobile-nav { display: flex; }
.content-area { padding: 16px; padding-bottom: 80px; }
}
/* logs.html 移动端优化 */
@media (max-width: 768px) {
.log-controls { flex-direction: column; gap: 8px; }
.log-controls .el-select, .log-controls .el-date-picker { width: 100% !important; }
.el-card { margin: 0 -16px; border-radius: 0; min-height: calc(100vh - 180px); }
.el-card .el-card__body { padding: 12px; }
pre { font-size: 11px; line-height: 1.4; }
}
</style>
</head>
<body>
platform/frontend/users.html
+36 -1
View File
@@ -29,6 +29,41 @@
.mobile-nav { display: flex; }
.content-area { padding: 16px; padding-bottom: 80px; }
}
/* users.html 移动端优化 */
@media (max-width: 768px) {
.user-table { display: none; }
.user-card-list { display: block; margin: 0 -16px; }
.user-card {
background: white;
border-radius: 8px;
padding: 16px;
margin-bottom: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.user-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.user-card-name { font-size: 16px; font-weight: 600; }
.user-card-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
font-size: 12px;
color: #606266;
margin-bottom: 12px;
}
.user-card-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
padding-top: 8px;
border-top: 1px solid #ebeef5;
}
}
</style>
</head>
<body>
@@ -56,7 +91,7 @@
<h3 style="font-size: 18px; font-weight: 600;">用户列表</h3>
<el-button type="primary" @click="addUser">+ 新建用户</el-button>
</div>
<el-table :data="users" stripe>
<el-table :data="users" stripe :cell-class-name="getMobileUserCellClass" class="user-table">
<el-table-column prop="id" label="ID" width="80"></el-table-column>
<el-table-column prop="username" label="用户名"></el-table-column>
<el-table-column prop="role" label="角色" width="100">