feat(admin): 管理员页面改为标签页模式

- 添加5个标签页:概览、设置、监控、用户、工具
- 概览:调试模式开关、服务器存储统计
- 设置:系统设置、SMTP邮件配置
- 监控:健康检测、系统日志
- 用户:用户管理列表
- 工具:上传工具管理

优化管理员页面布局,减少滚动,提升使用体验

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-27 20:31:26 +08:00
parent 3dbd545f6b
commit 4f29bbe631
2 changed files with 46 additions and 4 deletions

View File

@@ -1573,7 +1573,34 @@
<!-- 管理员视图 -->
<div v-if="isLoggedIn && currentView === 'admin' && user && user.is_admin" class="main-container">
<div class="card">
<!-- 管理员标签页导航 -->
<div class="card" style="margin-bottom: 20px; padding: 0;">
<div style="display: flex; flex-wrap: wrap; border-bottom: 2px solid #eee;">
<button @click="adminTab = 'overview'"
:style="{ padding: '15px 25px', border: 'none', background: adminTab === 'overview' ? '#667eea' : 'transparent', color: adminTab === 'overview' ? 'white' : '#666', cursor: 'pointer', fontWeight: '600', fontSize: '14px', borderRadius: adminTab === 'overview' ? '8px 8px 0 0' : '0', transition: 'all 0.2s' }">
<i class="fas fa-tachometer-alt"></i> 概览
</button>
<button @click="adminTab = 'settings'"
:style="{ padding: '15px 25px', border: 'none', background: adminTab === 'settings' ? '#667eea' : 'transparent', color: adminTab === 'settings' ? 'white' : '#666', cursor: 'pointer', fontWeight: '600', fontSize: '14px', borderRadius: adminTab === 'settings' ? '8px 8px 0 0' : '0', transition: 'all 0.2s' }">
<i class="fas fa-cog"></i> 设置
</button>
<button @click="adminTab = 'monitor'"
:style="{ padding: '15px 25px', border: 'none', background: adminTab === 'monitor' ? '#667eea' : 'transparent', color: adminTab === 'monitor' ? 'white' : '#666', cursor: 'pointer', fontWeight: '600', fontSize: '14px', borderRadius: adminTab === 'monitor' ? '8px 8px 0 0' : '0', transition: 'all 0.2s' }">
<i class="fas fa-chart-line"></i> 监控
</button>
<button @click="adminTab = 'users'"
:style="{ padding: '15px 25px', border: 'none', background: adminTab === 'users' ? '#667eea' : 'transparent', color: adminTab === 'users' ? 'white' : '#666', cursor: 'pointer', fontWeight: '600', fontSize: '14px', borderRadius: adminTab === 'users' ? '8px 8px 0 0' : '0', transition: 'all 0.2s' }">
<i class="fas fa-users"></i> 用户
</button>
<button @click="adminTab = 'tools'"
:style="{ padding: '15px 25px', border: 'none', background: adminTab === 'tools' ? '#667eea' : 'transparent', color: adminTab === 'tools' ? 'white' : '#666', cursor: 'pointer', fontWeight: '600', fontSize: '14px', borderRadius: adminTab === 'tools' ? '8px 8px 0 0' : '0', transition: 'all 0.2s' }">
<i class="fas fa-tools"></i> 工具
</button>
</div>
</div>
<!-- ========== 概览标签页 ========== -->
<div v-show="adminTab === 'overview'">
<!-- 调试模式开关 -->
<div class="card" style="margin-bottom: 30px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
<div style="display: flex; align-items: center; justify-content: space-between;">
@@ -1687,13 +1714,16 @@
<strong>警告:</strong> 磁盘使用率已超过90%,建议及时清理空间或扩容!
</div>
<div v-if="serverStorageStats.totalUserQuotas > serverStorageStats.totalDisk"
<div v-if="serverStorageStats.totalUserQuotas > serverStorageStats.totalDisk"
style="margin-top: 20px; padding: 15px; background: #f8d7da; border-left: 4px solid #dc3545; border-radius: 6px; color: #721c24;">
<i class="fas fa-exclamation-circle"></i>
<strong>配额超分配:</strong> 用户配额总和 ({{ formatBytes(serverStorageStats.totalUserQuotas) }}) 已超过磁盘总容量 ({{ formatBytes(serverStorageStats.totalDisk) }})
</div>
</div>
</div><!-- 概览标签页结束 -->
<!-- ========== 设置标签页 ========== -->
<div v-show="adminTab === 'settings'">
<!-- 系统设置 -->
<div class="card" style="margin-bottom: 30px;">
<h3 style="margin-bottom: 20px;">
@@ -1752,7 +1782,10 @@
</button>
</div>
</div>
</div><!-- 设置标签页结束 -->
<!-- ========== 监控标签页 ========== -->
<div v-show="adminTab === 'monitor'">
<!-- 健康检测 -->
<div class="card" style="margin-bottom: 30px;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
@@ -1985,7 +2018,11 @@
</button>
</div>
</div>
</div><!-- 监控标签页结束 -->
<!-- ========== 用户标签页 ========== -->
<div v-show="adminTab === 'users'">
<div class="card">
<h3 style="margin-bottom: 20px;">用户管理</h3>
<div style="overflow-x: auto;">
<table style="width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 900px;">
@@ -2064,9 +2101,12 @@
</table>
</div>
</div>
</div><!-- 用户标签页结束 -->
<!-- ========== 工具标签页 ========== -->
<div v-show="adminTab === 'tools'">
<!-- 上传工具管理区域 -->
<div class="card" style="margin-top: 30px;">
<div class="card">
<h3 style="margin-bottom: 20px;">
<i class="fas fa-cloud-upload-alt"></i> 上传工具管理
</h3>
@@ -2131,7 +2171,8 @@
</div>
</div>
</div>
</div>
</div><!-- 工具标签页结束 -->
</div><!-- 管理员视图结束 -->
<!-- 忘记密码模态框 -->
<div v-if="showForgotPasswordModal" class="modal-overlay" @mousedown.self="handleModalMouseDown" @mouseup.self="handleModalMouseUp('showForgotPasswordModal')">