feat: 添加管理员可控的F12调试模式开关

## 功能说明 - 管理员登录后可在管理后台页面看到"调试模式"卡片 - 点击开关按钮可启用/禁用F12和开发者工具 - 调试模式状态保存在localStorage,页面刷新后保持 - 同时控制主应用(app.html)和分享页面(share.html)的调试权限 ## 技术实现 1. app.js新增debugMode配置和toggleDebugMode方法 2. app.html添加调试模式开关UI,并修改防调试代码支持debugMode控制 3. share.html添加防调试代码,受localStorage中的debugMode控制 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-14 16:04:17 +08:00
parent 024e807f75
commit bce225ec5c
3 changed files with 145 additions and 13 deletions
--- a/frontend/app.html
+++ b/frontend/app.html
@@ -1192,6 +1192,24 @@
    <!-- 管理员视图 -->
    <div v-if="isLoggedIn && currentView === 'admin' && user && user.is_admin" class="main-container">
      <div class="card">
+      <!-- 调试模式开关 -->
+      <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;">
+          <div>
+            <h3 style="margin-bottom: 10px; color: white;">
+              <i class="fas fa-bug"></i> 调试模式
+            </h3>
+            <p style="margin: 0; font-size: 14px; opacity: 0.9;">
+              {{ debugMode ? '已启用 - F12和开发者工具已解锁' : '已禁用 - F12和开发者工具被锁定' }}
+            </p>
+          </div>
+          <button @click="toggleDebugMode" class="btn" :style="{background: debugMode ? '#28a745' : '#dc3545', color: 'white', border: 'none', padding: '12px 24px', fontSize: '16px', fontWeight: '600', cursor: 'pointer', borderRadius: '8px', boxShadow: '0 4px 12px rgba(0,0,0,0.2)'}">
+            <i :class="debugMode ? 'fas fa-toggle-on' : 'fas fa-toggle-off'"></i>
+            {{ debugMode ? '关闭调试' : '开启调试' }}
+          </button>
+        </div>
+      </div>
+
      <!-- 服务器存储统计 -->
      <div class="card" style="margin-bottom: 30px;">
        <h3 style="margin-bottom: 20px;">
@@ -2098,14 +2116,20 @@

  <!-- 开发者工具保护 -->
  <script>
-    // 禁用右键菜单
-    document.addEventListener('contextmenu', function(e) {
-      e.preventDefault();
-      return false;
-    });
+    // 检查是否启用调试模式
+    const isDebugMode = localStorage.getItem('debugMode') === 'true';
    
-    // 禁用F12和常见开发者工具快捷键
-    document.addEventListener('keydown', function(e) {
+    // 禁用右键菜单（调试模式下不禁用）
+    if (!isDebugMode) {
+      document.addEventListener('contextmenu', function(e) {
+        e.preventDefault();
+        return false;
+      });
+    }
+
+    // 禁用F12和常见开发者工具快捷键（调试模式下不禁用）
+    if (!isDebugMode) {
+      document.addEventListener('keydown', function(e) {
      // F12
      if (e.key === 'F12' || e.keyCode === 123) {
        e.preventDefault();
@@ -2132,9 +2156,11 @@
        return false;
      }
    });
+    }

-    // 检测开发者工具是否打开
-    (function() {
+    // 检测开发者工具是否打开（调试模式下不检测）
+    if (!isDebugMode) {
+      (function() {
      const threshold = 160;
      let isDevToolsOpen = false;

@@ -2155,10 +2181,11 @@
          isDevToolsOpen = false;
        }
      }, 500);
-    })();
+      })();
+    }

-    // 禁用console输出（可选）
-    if (window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') {
+    // 禁用console输出（调试模式下不禁用）
+    if (!isDebugMode && window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') {
      console.log = function() {};
      console.info = function() {};
      console.warn = function() {};
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -17,6 +17,7 @@ createApp({
      isLogin: true,
      fileViewMode: 'grid', // 文件显示模式: grid 大图标, list 列表
      shareViewMode: 'list', // 分享显示模式: grid 大图标, list 列表
+      debugMode: false, // 调试模式（管理员可切换）

      // 表单数据
      loginForm: {
@@ -1973,9 +1974,37 @@ handleDragLeave(e) {
        this.uploadingTool = false;
        event.target.value = ''; // 清空input，允许重复上传
      }
-    }  },
+    },
+
+    // ===== 调试模式管理 =====
+
+    // 切换调试模式
+    toggleDebugMode() {
+      this.debugMode = !this.debugMode;
+      
+      // 保存到 localStorage
+      if (this.debugMode) {
+        localStorage.setItem('debugMode', 'true');
+        this.showToast('success', '调试模式已启用', 'F12和开发者工具快捷键已启用');
+        // 刷新页面以应用更改
+        setTimeout(() => {
+          window.location.reload();
+        }, 1000);
+      } else {
+        localStorage.removeItem('debugMode');
+        this.showToast('info', '调试模式已禁用', '页面将重新加载以应用更改');
+        // 刷新页面以应用更改
+        setTimeout(() => {
+          window.location.reload();
+        }, 1000);
+      }
+    }
+  },

  mounted() {
+    // 初始化调试模式状态
+    this.debugMode = localStorage.getItem('debugMode') === 'true';
+    
    // 阻止全局拖拽默认行为（防止拖到区域外打开新页面）
    window.addEventListener("dragover", (e) => {
      e.preventDefault();
--- a/frontend/share.html
+++ b/frontend/share.html
@@ -885,5 +885,81 @@
      }
    }).mount('#app');
  </script>
+
+  <script>
+    // 检查是否启用调试模式
+    const isDebugMode = localStorage.getItem('debugMode') === 'true';
+    
+    // 禁用右键菜单（调试模式下不禁用）
+    if (!isDebugMode) {
+      document.addEventListener('contextmenu', function(e) {
+        e.preventDefault();
+        return false;
+      });
+    }
+
+    // 禁用F12和常见开发者工具快捷键（调试模式下不禁用）
+    if (!isDebugMode) {
+      document.addEventListener('keydown', function(e) {
+        // F12
+        if (e.key === 'F12' || e.keyCode === 123) {
+          e.preventDefault();
+          return false;
+        }
+        // Ctrl+Shift+I (开发者工具)
+        if (e.ctrlKey && e.shiftKey && (e.key === 'I' || e.keyCode === 73)) {
+          e.preventDefault();
+          return false;
+        }
+        // Ctrl+Shift+J (控制台)
+        if (e.ctrlKey && e.shiftKey && (e.key === 'J' || e.keyCode === 74)) {
+          e.preventDefault();
+          return false;
+        }
+        // Ctrl+U (查看源代码)
+        if (e.ctrlKey && (e.key === 'U' || e.keyCode === 85)) {
+          e.preventDefault();
+          return false;
+        }
+        // Ctrl+Shift+C (元素选择器)
+        if (e.ctrlKey && e.shiftKey && (e.key === 'C' || e.keyCode === 67)) {
+          e.preventDefault();
+          return false;
+        }
+      });
+    }
+
+    // 检测开发者工具是否打开（调试模式下不检测）
+    if (!isDebugMode) {
+      (function() {
+        const threshold = 160;
+        let isDevToolsOpen = false;
+
+        setInterval(function() {
+          const widthThreshold = window.outerWidth - window.innerWidth > threshold;
+          const heightThreshold = window.outerHeight - window.innerHeight > threshold;
+
+          if (!(heightThreshold && widthThreshold) &&
+              ((window.Firebug && window.Firebug.chrome && window.Firebug.chrome.isInitialized) || widthThreshold || heightThreshold)) {
+            if (!isDevToolsOpen) {
+              isDevToolsOpen = true;
+              console.clear();
+            }
+          } else {
+            isDevToolsOpen = false;
+          }
+        }, 500);
+      })();
+    }
+
+    // 禁用console输出（调试模式下不禁用）
+    if (!isDebugMode && window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') {
+      console.log = function() {};
+      console.info = function() {};
+      console.warn = function() {};
+      console.error = function() {};
+      console.debug = function() {};
+    }
+  </script>
 </body>
 </html>