refactor(UI): 优化表单布局并添加磁盘使用统计功能

- 将登录表单改为浮动标签样式提升用户体验
- 为版本管理表单添加占位符文本
- 在首页添加网站空间使用情况统计
This commit is contained in:
2025-07-12 15:19:14 +08:00
parent 5b009b838b
commit 81b08598d0
4 changed files with 39 additions and 14 deletions

View File

@@ -84,13 +84,13 @@ if (!isset($_SESSION['admin'])) {
</script> </script>
<?php endif; ?> <?php endif; ?>
<form method="post"> <form method="post">
<div class="mb-3"> <div class="form-floating mb-3">
<label for="username" class="form-label">用户名</label>
<input type="text" class="form-control" id="username" name="username" required> <input type="text" class="form-control" id="username" name="username" required>
<label for="username">用户名</label>
</div> </div>
<div class="mb-3"> <div class="form-floating mb-3">
<label for="password" class="form-label">密码</label>
<input type="password" class="form-control" id="password" name="password" required> <input type="password" class="form-control" id="password" name="password" required>
<label for="password">密码</label>
</div> </div>
<button type="submit" class="btn btn-primary">登录</button> <button type="submit" class="btn btn-primary">登录</button>
</form> </form>

View File

@@ -286,11 +286,11 @@ if (isset($_GET['success'])) {
<div class="modal-body"> <div class="modal-body">
<input type="hidden" name="version_id" value="<?php echo $version['id']; ?>"> <input type="hidden" name="version_id" value="<?php echo $version['id']; ?>">
<div class="form-floating mb-3"> <div class="form-floating mb-3">
<input type="text" class="form-control" id="version_<?php echo $version['id']; ?>" name="version" value="<?php echo htmlspecialchars($version['version']); ?>" required> <input type="text" class="form-control" id="version_<?php echo $version['id']; ?>" name="version" value="<?php echo htmlspecialchars($version['version']); ?>" placeholder="如: 1.0.0" required>
<label for="version_<?php echo $version['id']; ?>">版本号</label> <label for="version_<?php echo $version['id']; ?>">版本号</label>
</div> </div>
<div class="form-floating mb-3"> <div class="form-floating mb-3">
<textarea class="form-control" id="changelog_<?php echo $version['id']; ?>" name="changelog" rows="3" required><?php echo htmlspecialchars($version['changelog']); ?></textarea> <textarea class="form-control" id="changelog_<?php echo $version['id']; ?>" name="changelog" rows="3" placeholder="描述本次更新内容" required><?php echo htmlspecialchars($version['changelog']); ?></textarea>
<label for="changelog_<?php echo $version['id']; ?>">更新日志</label> <label for="changelog_<?php echo $version['id']; ?>">更新日志</label>
</div> </div>
<div class="mb-3"> <div class="mb-3">

View File

@@ -103,13 +103,13 @@ if (!($conn instanceof mysqli)) {
<div class="alert alert-danger" role="alert"><?php echo $error; ?></div> <div class="alert alert-danger" role="alert"><?php echo $error; ?></div>
<?php endif; ?> <?php endif; ?>
<form method="post"> <form method="post">
<div class="mb-3"> <div class="form-floating mb-3">
<label for="login_id" class="form-label">邮箱/用户名</label>
<input type="text" id="login_id" name="login_id" class="form-control" placeholder="请输入邮箱或用户名" required> <input type="text" id="login_id" name="login_id" class="form-control" placeholder="请输入邮箱或用户名" required>
<label for="login_id">邮箱/用户名</label>
</div> </div>
<div class="form-group"> <div class="form-floating mb-3">
<label for="password" class="form-label">密码</label> <input type="password" id="password" name="password" class="form-control" placeholder="请输入密码" required>
<input type="password" id="password" name="password" class="form-control" required> <label for="password">密码</label>
</div> </div>
<button type="submit" class="btn btn-primary w-100">登录</button> <button type="submit" class="btn btn-primary w-100">登录</button>
</form> </form>

View File

@@ -114,7 +114,7 @@ $announcement = $announcementResult && $announcementResult->num_rows > 0 ? $anno
$freeSpace = disk_free_space(__DIR__); $freeSpace = disk_free_space(__DIR__);
$usedSpace = $totalSpace - $freeSpace; $usedSpace = $totalSpace - $freeSpace;
$usagePercent = round(($usedSpace / $totalSpace) * 100, 2); $usagePercent = round(($usedSpace / $totalSpace) * 100, 2);
function formatBytes($bytes) { function formatBytes($bytes) {
if ($bytes >= 1073741824) { if ($bytes >= 1073741824) {
return round($bytes / 1073741824, 2) . ' GB'; return round($bytes / 1073741824, 2) . ' GB';
@@ -126,14 +126,39 @@ $announcement = $announcementResult && $announcementResult->num_rows > 0 ? $anno
return $bytes . ' B'; return $bytes . ' B';
} }
} }
?>
// 计算网站占用量
function getDirectorySize($dir) {
$size = 0;
$iterator = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($dir));
foreach ($iterator as $file) {
if ($file->isFile()) {
$size += $file->getSize();
}
}
return $size;
}
$websiteSpace = getDirectorySize(__DIR__);
$websiteUsagePercent = round(($websiteSpace / $totalSpace) * 100, 2);
?>
<div class="progress-label"> <div class="progress-label">
<span>磁盘使用情况</span> <span>磁盘使用情况</span>
<span><?php echo formatBytes($usedSpace); ?> / <?php echo formatBytes($totalSpace); ?></span> <span><?php echo formatBytes($usedSpace); ?> / <?php echo formatBytes($totalSpace); ?></span>
</div> </div>
<div class="progress"> <div class="progress">
<div class="progress-bar" role="progressbar" style="width: <?php echo $usagePercent; ?>%" aria-valuenow="<?php echo $usagePercent; ?>" aria-valuemin="0" aria-valuemax="100"><?php echo $usagePercent; ?>%</div> <div class="progress-bar" role="progressbar" style="width: <?php echo $usagePercent; ?>%" aria-valuenow="<?php echo $usagePercent; ?>" aria-valuemin="0" aria-valuemax="100"><?php echo $usagePercent; ?>%</div>
</div><br> </div>
<!-- <p>网站占用量: <?php echo formatBytes($websiteSpace); ?></p> -->
<br>
<div class="progress-label">
<span>网站使用情况</span>
<span><?php echo formatBytes($websiteSpace); ?> / <?php echo formatBytes($totalSpace); ?></span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: <?php echo $websiteUsagePercent; ?>%" aria-valuenow="<?php echo $websiteUsagePercent; ?>" aria-valuemin="0" aria-valuemax="100"><?php echo $websiteUsagePercent; ?>%</div>
</div>
<!-- <p>网站占用量: <?php echo formatBytes($websiteSpace); ?></p> -->
<br>
<form method="get" action="index.php" class="mb-4" onsubmit="return validateSearch();"> <form method="get" action="index.php" class="mb-4" onsubmit="return validateSearch();">
<script> <script>
function validateSearch() { function validateSearch() {