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:
@@ -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')">
|
||||
|
||||
Reference in New Issue
Block a user