From 4f29bbe631bf1ccc3097893d8e5c819ec8324282 Mon Sep 17 00:00:00 2001
From: yuyx <237899745@qq.com>
Date: Thu, 27 Nov 2025 20:31:26 +0800
Subject: [PATCH] =?UTF-8?q?feat(admin):=20=E7=AE=A1=E7=90=86=E5=91=98?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=94=B9=E4=B8=BA=E6=A0=87=E7=AD=BE=E9=A1=B5?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/app.html | 49 +++++++++++++++++++++++++++++++++++++++++++----
 frontend/app.js   |  1 +
 2 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/frontend/app.html b/frontend/app.html
index 85ed3c0..5c2830a 100644
--- a/frontend/app.html
+++ b/frontend/app.html
@@ -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')">
diff --git a/frontend/app.js b/frontend/app.js
index c770110..ff5bac7 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -18,6 +18,7 @@ createApp({
       fileViewMode: 'grid', // 文件显示模式: grid 大图标, list 列表
       shareViewMode: 'list', // 分享显示模式: grid 大图标, list 列表
       debugMode: false, // 调试模式（管理员可切换）
+      adminTab: 'overview', // 管理员页面当前标签：overview, settings, monitor, users, tools
 
       // 表单数据
       loginForm: {