feat: 更新后台管理界面,优化表格和按钮样式
- 改进表格布局,支持横向滚动和长文本自动换行 - 设置合理的列宽,确保信息完整显示 - 添加应用图标、下载链接、官网链接和应用描述字段 - 优化按钮布局和样式,提升用户体验 - 更新README.md,记录此次更新日志
This commit is contained in:
parent
319a49f716
commit
94b38708d0
14
README.md
14
README.md
@ -249,6 +249,20 @@ A: 检查CDN资源是否正常加载,可考虑本地化CSS/JS文件。
|
|||||||
|
|
||||||
本项目采用 MIT 协议开源,详见 [LICENSE](LICENSE) 文件。
|
本项目采用 MIT 协议开源,详见 [LICENSE](LICENSE) 文件。
|
||||||
|
|
||||||
|
## 📝 更新日志
|
||||||
|
|
||||||
|
### 2025-07-09
|
||||||
|
- ✨ 优化后台管理界面显示
|
||||||
|
- 改进表格布局,添加横向滚动支持
|
||||||
|
- 优化长文本内容显示
|
||||||
|
- 设置合理的列宽
|
||||||
|
- 普通列:最小宽度100px
|
||||||
|
- URL列:最小宽度200px,最大宽度300px
|
||||||
|
- 描述列:最小宽度300px,最大宽度500px
|
||||||
|
- 支持描述文本自动换行
|
||||||
|
- 完整显示URL链接
|
||||||
|
- 优化按钮布局和样式
|
||||||
|
|
||||||
## 🙏 致谢
|
## 🙏 致谢
|
||||||
|
|
||||||
- 感谢所有为开源社区做出贡献的开发者
|
- 感谢所有为开源社区做出贡献的开发者
|
||||||
|
137
admin/index.php
137
admin/index.php
@ -305,12 +305,14 @@ $total_pages = ceil($total / $limit);
|
|||||||
background: white;
|
background: white;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||||
overflow: hidden;
|
overflow-x: auto;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table {
|
.table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table th,
|
.table th,
|
||||||
@ -318,12 +320,18 @@ $total_pages = ceil($total / $limit);
|
|||||||
padding: 15px;
|
padding: 15px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
border-bottom: 1px solid #e2e8f0;
|
border-bottom: 1px solid #e2e8f0;
|
||||||
|
min-width: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table th {
|
.table th {
|
||||||
background: #f8fafc;
|
background: #f8fafc;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #374151;
|
color: #374151;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table td {
|
||||||
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table tr:hover {
|
.table tr:hover {
|
||||||
@ -355,22 +363,38 @@ $total_pages = ceil($total / $limit);
|
|||||||
.action-buttons {
|
.action-buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-sm {
|
.btn-sm {
|
||||||
padding: 4px 8px;
|
padding: 4px 8px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-sm i {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
.btn-success {
|
.btn-success {
|
||||||
background: #10b981;
|
background: #10b981;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-warning {
|
.btn-success:hover {
|
||||||
background: #f59e0b;
|
background: #059669;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
background: #ef4444;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-danger:hover {
|
||||||
|
background: #dc2626;
|
||||||
|
}
|
||||||
|
|
||||||
.pagination {
|
.pagination {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -485,6 +509,63 @@ $total_pages = ceil($total / $limit);
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.app-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 8px;
|
||||||
|
object-fit: cover;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-icon:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.truncate {
|
||||||
|
max-width: 250px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: inline-block;
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description-cell {
|
||||||
|
min-width: 300px;
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description-content {
|
||||||
|
white-space: normal;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.url-cell {
|
||||||
|
min-width: 200px;
|
||||||
|
max-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.url-link {
|
||||||
|
color: #3b82f6;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.url-link:hover {
|
||||||
|
color: #2563eb;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.platform-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #e5e7eb;
|
||||||
|
color: #374151;
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.header-content {
|
.header-content {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -611,6 +692,10 @@ $total_pages = ceil($total / $limit);
|
|||||||
<th>应用名称</th>
|
<th>应用名称</th>
|
||||||
<th>平台</th>
|
<th>平台</th>
|
||||||
<th>版本</th>
|
<th>版本</th>
|
||||||
|
<th>图标</th>
|
||||||
|
<th>下载链接</th>
|
||||||
|
<th>官网/落地页</th>
|
||||||
|
<th>应用描述</th>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<th>收录平台</th>
|
<th>收录平台</th>
|
||||||
<th>联系方式</th>
|
<th>联系方式</th>
|
||||||
@ -634,6 +719,42 @@ $total_pages = ceil($total / $limit);
|
|||||||
<td><?php echo htmlspecialchars($submission['name']); ?></td>
|
<td><?php echo htmlspecialchars($submission['name']); ?></td>
|
||||||
<td><?php echo htmlspecialchars($submission['platform']); ?></td>
|
<td><?php echo htmlspecialchars($submission['platform']); ?></td>
|
||||||
<td><?php echo htmlspecialchars($submission['version'] ?: '-'); ?></td>
|
<td><?php echo htmlspecialchars($submission['version'] ?: '-'); ?></td>
|
||||||
|
<td>
|
||||||
|
<?php if ($submission['icon_url']): ?>
|
||||||
|
<a href="<?php echo htmlspecialchars($submission['icon_url']); ?>" target="_blank">
|
||||||
|
<img src="<?php echo htmlspecialchars($submission['icon_url']); ?>" alt="图标" class="app-icon">
|
||||||
|
</a>
|
||||||
|
<?php else: ?>
|
||||||
|
<span class="platform-badge">无图标</span>
|
||||||
|
<?php endif; ?>
|
||||||
|
</td>
|
||||||
|
<td class="url-cell">
|
||||||
|
<?php if ($submission['download_url']): ?>
|
||||||
|
<a href="<?php echo htmlspecialchars($submission['download_url']); ?>" target="_blank" class="url-link">
|
||||||
|
<?php echo htmlspecialchars($submission['download_url']); ?>
|
||||||
|
</a>
|
||||||
|
<?php else: ?>
|
||||||
|
<span class="platform-badge">无下载链接</span>
|
||||||
|
<?php endif; ?>
|
||||||
|
</td>
|
||||||
|
<td class="url-cell">
|
||||||
|
<?php if ($submission['website_url']): ?>
|
||||||
|
<a href="<?php echo htmlspecialchars($submission['website_url']); ?>" target="_blank" class="url-link">
|
||||||
|
<?php echo htmlspecialchars($submission['website_url']); ?>
|
||||||
|
</a>
|
||||||
|
<?php else: ?>
|
||||||
|
<span class="platform-badge">无官网</span>
|
||||||
|
<?php endif; ?>
|
||||||
|
</td>
|
||||||
|
<td class="description-cell">
|
||||||
|
<?php if ($submission['description']): ?>
|
||||||
|
<div class="description-content">
|
||||||
|
<?php echo nl2br(htmlspecialchars($submission['description'])); ?>
|
||||||
|
</div>
|
||||||
|
<?php else: ?>
|
||||||
|
<span class="platform-badge">无描述</span>
|
||||||
|
<?php endif; ?>
|
||||||
|
</td>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<td><?php echo htmlspecialchars($submission['platforms'] ?: '-'); ?></td>
|
<td><?php echo htmlspecialchars($submission['platforms'] ?: '-'); ?></td>
|
||||||
<td><?php echo htmlspecialchars($submission['contact'] ?: '-'); ?></td>
|
<td><?php echo htmlspecialchars($submission['contact'] ?: '-'); ?></td>
|
||||||
@ -654,16 +775,16 @@ $total_pages = ceil($total / $limit);
|
|||||||
<div class="action-buttons">
|
<div class="action-buttons">
|
||||||
<button class="btn btn-sm btn-primary"
|
<button class="btn btn-sm btn-primary"
|
||||||
onclick="showStatusModal(<?php echo $submission['id']; ?>, '<?php echo $type; ?>', '<?php echo $submission['status']; ?>', '<?php echo htmlspecialchars($submission['admin_note'] ?? '', ENT_QUOTES); ?>')">
|
onclick="showStatusModal(<?php echo $submission['id']; ?>, '<?php echo $type; ?>', '<?php echo $submission['status']; ?>', '<?php echo htmlspecialchars($submission['admin_note'] ?? '', ENT_QUOTES); ?>')">
|
||||||
<i class="fas fa-edit"></i>
|
<i class="fas fa-edit"></i> 编辑
|
||||||
</button>
|
</button>
|
||||||
<?php if ($submission['status'] === 'pending'): ?>
|
<?php if ($submission['status'] === 'pending'): ?>
|
||||||
<button class="btn btn-sm btn-success"
|
<button class="btn btn-sm btn-success"
|
||||||
onclick="quickUpdate(<?php echo $submission['id']; ?>, '<?php echo $type; ?>', 'approved')">
|
onclick="quickUpdate(<?php echo $submission['id']; ?>, '<?php echo $type; ?>', 'approved')">
|
||||||
<i class="fas fa-check"></i>
|
<i class="fas fa-check"></i> 通过
|
||||||
</button>
|
</button>
|
||||||
<button class="btn btn-sm btn-danger"
|
<button class="btn btn-sm btn-danger"
|
||||||
onclick="quickUpdate(<?php echo $submission['id']; ?>, '<?php echo $type; ?>', 'rejected')">
|
onclick="quickUpdate(<?php echo $submission['id']; ?>, '<?php echo $type; ?>', 'rejected')">
|
||||||
<i class="fas fa-times"></i>
|
<i class="fas fa-times"></i> 拒绝
|
||||||
</button>
|
</button>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user